@nyaruka/temba-components 0.26.2 → 0.26.5

package/CHANGELOG.md

@@ -4,6 +4,25 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v0.26.5](https://github.com/nyaruka/temba-components/compare/v0.26.4...v0.26.5)
+
+> 28 April 2022
+
+- Update version of flatpickr [`4560eb8`](https://github.com/nyaruka/temba-components/commit/4560eb85894c0a0c2f5722d550ff44b7bdd835d5)
+
+#### [v0.26.4](https://github.com/nyaruka/temba-components/compare/v0.26.3...v0.26.4)
+
+> 26 April 2022
+
+- Fix inline menus with no items [`#165`](https://github.com/nyaruka/temba-components/pull/165)
+- Switch test font [`9fe1ffd`](https://github.com/nyaruka/temba-components/commit/9fe1ffd67be69c42e931e87e3e06e1c402e992fa)
+
+#### [v0.26.3](https://github.com/nyaruka/temba-components/compare/v0.26.2...v0.26.3)
+
+> 22 April 2022
+
+- Add bubble support for menu items [`#164`](https://github.com/nyaruka/temba-components/pull/164)
+
 #### [v0.26.2](https://github.com/nyaruka/temba-components/compare/v0.26.1...v0.26.2)
 
 > 21 April 2022

package/dist/{4f80c187.js → 3f6be8fc.js}

@@ -3464,13 +3464,17 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
           ${this.arrow}
         </div>
       </div>
-    `}}__decorate([e$2({type:String})],Tip.prototype,"text",void 0),__decorate([e$2({type:Boolean})],Tip.prototype,"visible",void 0),__decorate([e$2({type:String})],Tip.prototype,"position",void 0),__decorate([e$2({type:Boolean})],Tip.prototype,"hideOnChange",void 0),__decorate([e$2({type:Number,attribute:!1})],Tip.prototype,"top",void 0),__decorate([e$2({type:Number,attribute:!1})],Tip.prototype,"left",void 0),__decorate([e$2({type:Number,attribute:!1})],Tip.prototype,"width",void 0),__decorate([e$2({type:Boolean,attribute:!1})],Tip.prototype,"poppedTop",void 0);const findItem=(l,n)=>{const e=l||[],t=e.findIndex((l=>l.id==n||l.vanity_id==n));if(t>-1){return{item:e[t],index:t}}return{item:null,index:-1}};class TembaMenu extends RapidElement{constructor(){super(),this.wraps=!1,this.selection=[],this.pending=[],this.state={},this.renderMenuItem=(l,n=null)=>{if("divider"===l.type)return $`<div class="divider"></div>`;if("section"===l.type||l.inline)return $`<div class="sub-section">${l.name}</div>`;if("modax-button"===l.type)return $`<temba-button
+    `}}__decorate([e$2({type:String})],Tip.prototype,"text",void 0),__decorate([e$2({type:Boolean})],Tip.prototype,"visible",void 0),__decorate([e$2({type:String})],Tip.prototype,"position",void 0),__decorate([e$2({type:Boolean})],Tip.prototype,"hideOnChange",void 0),__decorate([e$2({type:Number,attribute:!1})],Tip.prototype,"top",void 0),__decorate([e$2({type:Number,attribute:!1})],Tip.prototype,"left",void 0),__decorate([e$2({type:Number,attribute:!1})],Tip.prototype,"width",void 0),__decorate([e$2({type:Boolean,attribute:!1})],Tip.prototype,"poppedTop",void 0);const findItem=(l,n)=>{const e=l||[],t=e.findIndex((l=>l.id==n||l.vanity_id==n));if(t>-1){return{item:e[t],index:t}}return{item:null,index:-1}};class TembaMenu extends RapidElement{constructor(){super(),this.wraps=!1,this.selection=[],this.pending=[],this.state={},this.renderMenuItem=(l,n=null)=>{if("divider"===l.type)return $`<div class="divider"></div>`;if("space"===l.type)return $`<div class="space"></div>`;if("section"===l.type||l.inline)return $`<div class="sub-section">${l.name}</div>`;if("modax-button"===l.type)return $`<temba-button
         name=${l.name}
         @click=${n=>{this.handleItemClicked(n,l)}}
       />`;const e=this.isSelected(l),t=e&&this.selection.length>l.level+1,i=l.icon?$`<temba-icon
-          size="${0===l.level?"1.5":"1"}"
-          name="${l.icon}"
-        ></temba-icon>`:null,o=l.collapsed_icon?$`<temba-icon
+            size="${0===l.level?"1.5":"1"}"
+            name="${l.icon}"
+          ></temba-icon
+          >${l.bubble?$`<div
+                style="background-color: ${l.bubble}"
+                class="bubble"
+              ></div>`:null}`:null,o=l.collapsed_icon?$`<temba-icon
           size="${0===l.level?"1.5":"1"}"
           name="${l.collapsed_icon}"
           class="collapse-icon"
@@ -3516,6 +3520,18 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
         --options-block-shadow: none;
       }
 
+      .bubble {
+        width: 8px;
+        height: 8px;
+        left: 14px;
+        bottom: -1px;
+        z-index: 10000;
+        border-radius: 99px;
+        border: 1px solid rgb(255, 255, 255);
+        position: relative;
+        margin-top: -10px;
+      }
+
       .section {
         font-size: 1.5em;
         margin-bottom: 0.2em;
@@ -3619,7 +3635,6 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
         margin-top: 0.1em;
         border-radius: var(--curvature);
         display: flex;
-
         min-width: 12em;
         max-width: 12em;
       }
@@ -3709,7 +3724,7 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
 
       .level-1 {
         transition: opacity 100ms linear, margin 200ms linear;
-        overflow-y: auto;
+        overflow-y: scroll;
         z-index: 1500;
       }
 
@@ -3820,6 +3835,10 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
         min-height: 1px;
       }
 
+      .space {
+        margin: 0.5em;
+      }
+
       .collapsed .divider {
         height: 0;
         margin: 0;
@@ -3860,7 +3879,7 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
         margin-left: 0.75em;
         margin-right: 0.75em;
       }
-    `}getMenuItemState(l){let n={};return l&&(n=this.state[l],n||(n={},this.state[l]=n)),n}updated(l){l.has("value")&&this.setSelection((this.value||"").split("/")),l.has("submenu")&&!l.has("value")&&this.setSelection([this.submenu]),l.has("endpoint")&&(this.root={level:-1,endpoint:this.endpoint},this.wait||this.loadItems(this.root))}refresh(l=null){l||(l=[...this.selection]);const n=this.getMenuItemForSelection(l);n.endpoint?this.loadItems(n,!1):(l.pop(),this.refresh(l))}fireNoPath(l){const n=this.getMenuItem(),e={item:n.id,selection:"/"+this.selection.join("/"),endpoint:n.endpoint,path:l+"/"+this.pending.join("/")+document.location.search},t=this.selection.join("/");t.replace(e.path,""),this.selection=t.split("/"),this.fireCustomEvent(CustomEventType.NoPath,e),this.pending=[],this.requestUpdate("root")}loadItems(l,n=!0){l&&l.endpoint&&(l.loading=!0,this.httpComplete=fetchResults(l.endpoint).then((e=>{if(e.forEach((n=>{n.level=l.level+1,n.items&&n.items.forEach((n=>{n.level=l.level+2}))})),l.items=e,l.loading=!1,this.requestUpdate("root"),this.scrollSelectedIntoView(),this.pending&&this.pending.length>0){const l=this.pending.shift();if(l&&e.length>0){const n=findItem(e,l);n.item?this.handleItemClicked(null,n.item):this.fireNoPath(l)}}else if(n&&e.length>0&&this.selection.length>=1&&!l.inline)for(const l of e)if(!l.type){this.handleItemClicked(null,l);break}})))}handleItemClicked(l,n,e=null){if(e&&e.inline&&this.handleItemClicked(null,e),this.collapsed&&(this.collapsed=!1),l&&(l.preventDefault(),l.stopPropagation()),"modax-button"!=n.type)if(n.trigger)window[n.trigger]();else if(n.level,n.level>=this.selection.length?this.selection.push(n.vanity_id||n.id):this.selection.splice(n.level,this.selection.length-n.level,n.vanity_id||n.id),n.endpoint)this.loadItems(n,!n.href),this.dispatchEvent(new Event("change"));else{if(this.pending&&this.pending.length>0){const l=this.pending.shift(),n=this.getMenuItem();if(l&&n&&n.items&&n.items.length>0){const e=findItem(n.items,l).item;e?this.handleItemClicked(null,e):this.fireNoPath(l)}else this.fireNoPath(l)}else this.dispatchEvent(new Event("change"));this.requestUpdate("root")}else this.fireCustomEvent(CustomEventType.ButtonClicked,{title:n.name,href:n.href,on_submit:n.on_submit})}scrollSelectedIntoView(){window.setTimeout((()=>{this.shadowRoot.querySelectorAll(".selected").forEach((l=>{l.scrollIntoView({block:"end",behavior:"smooth"})}))}),0)}clickItem(l){const n=[...this.selection];n.splice(n.length-1,1,l);const e=this.getMenuItemForSelection(n);return!!e&&(this.handleItemClicked(null,e),this.scrollSelectedIntoView(),!0)}getMenuItem(){return this.getMenuItemForSelection([...this.selection])}getMenuItemForSelection(l){const n=[...l];let e=this.root.items,t=null;for(;n.length>0;){const l=n.splice(0,1)[0];if(!e)break;if(t=findItem(e,l).item,!t)break;e=t.items}return t}getSelection(){return this.selection}setSelection(l){this.pending=[...l],this.selection=[],this.wait&&(this.wait=!1,this.loadItems(this.root))}setSelectionPath(l){const n=l.split("/").filter((l=>!!l));this.clickItem(n[n.length-1])||(this.wait=!0,this.setSelection(n))}async setFocusedItem(l){const n=l.split("/").filter((l=>!!l));if(n.length>0){if(!findItem(this.root.items,n[0]).item)return}const e=[];let t=this.root;for(;n.length>0;){const l=n.shift();l&&(t.items||(this.loadItems(t,!1),await this.httpComplete),t=findItem(t.items,l).item,t?e.push(l):n.splice(0,n.length))}this.selection=e,this.requestUpdate("root")}isSelected(l){if(l.level<this.selection.length){return this.selection[l.level]==(l.vanity_id||l.id)}return!1}isExpanded(l){return!!this.selection.find((n=>n===l.vanity_id||l.id))}render(){if(!this.root||!this.root.items)return $`<temba-loading
+    `}setBubble(l,n){const e=findItem(this.root.items,l);return!(!e||!e.item)&&(e.item.bubble=n,this.requestUpdate("root"),!0)}getMenuItemState(l){let n={};return l&&(n=this.state[l],n||(n={},this.state[l]=n)),n}updated(l){l.has("value")&&this.setSelection((this.value||"").split("/")),l.has("submenu")&&!l.has("value")&&this.setSelection([this.submenu]),l.has("endpoint")&&(this.root={level:-1,endpoint:this.endpoint},this.wait||this.loadItems(this.root))}refresh(l=null){l||(l=[...this.selection]);const n=this.getMenuItemForSelection(l);n.endpoint?this.loadItems(n,!1):(l.pop(),this.refresh(l))}fireNoPath(l){const n=this.getMenuItem(),e={item:n.id,selection:"/"+this.selection.join("/"),endpoint:n.endpoint,path:l+"/"+this.pending.join("/")+document.location.search},t=this.selection.join("/");t.replace(e.path,""),this.selection=t.split("/"),this.fireCustomEvent(CustomEventType.NoPath,e),this.pending=[],this.requestUpdate("root")}loadItems(l,n=!0){l&&l.endpoint&&(l.loading=!0,this.httpComplete=fetchResults(l.endpoint).then((e=>{if(e.forEach((n=>{n.level=l.level+1,n.items&&n.items.forEach((n=>{n.level=l.level+2}))})),l.items=e,l.loading=!1,this.requestUpdate("root"),this.scrollSelectedIntoView(),this.pending&&this.pending.length>0){const l=this.pending.shift();if(l&&e.length>0){const n=findItem(e,l);n.item?this.handleItemClicked(null,n.item):this.fireNoPath(l)}}else if(n&&e.length>0&&this.selection.length>=1&&!l.inline)for(const l of e)if(!l.type){this.handleItemClicked(null,l);break}})))}handleItemClicked(l,n,e=null){if(e&&e.inline&&this.handleItemClicked(null,e),this.collapsed&&(this.collapsed=!1),l&&(l.preventDefault(),l.stopPropagation()),"modax-button"!=n.type)if(n.trigger)new Function(n.trigger)();else if(n.level,n.level>=this.selection.length?this.selection.push(n.vanity_id||n.id):this.selection.splice(n.level,this.selection.length-n.level,n.vanity_id||n.id),n.endpoint)this.loadItems(n,!n.href),this.dispatchEvent(new Event("change"));else{if(this.pending&&this.pending.length>0){const l=this.pending.shift(),n=this.getMenuItem();if(l&&n&&n.items&&n.items.length>0){const e=findItem(n.items,l).item;e?this.handleItemClicked(null,e):this.fireNoPath(l)}else this.fireNoPath(l)}else this.dispatchEvent(new Event("change"));this.requestUpdate("root")}else this.fireCustomEvent(CustomEventType.ButtonClicked,{title:n.name,href:n.href,on_submit:n.on_submit})}scrollSelectedIntoView(){window.setTimeout((()=>{this.shadowRoot.querySelectorAll(".selected").forEach((l=>{l.scrollIntoView({block:"end",behavior:"smooth"})}))}),0)}clickItem(l){const n=[...this.selection];n.splice(n.length-1,1,l);const e=this.getMenuItemForSelection(n);return!!e&&(this.handleItemClicked(null,e),this.scrollSelectedIntoView(),!0)}getMenuItem(){return this.getMenuItemForSelection([...this.selection])}getMenuItemForSelection(l){const n=[...l];let e=this.root.items,t=null;for(;n.length>0;){const l=n.splice(0,1)[0];if(!e)break;if(t=findItem(e,l).item,!t)break;e=t.items}return t}getSelection(){return this.selection}setSelection(l){this.pending=[...l],this.selection=[],this.wait&&(this.wait=!1,this.loadItems(this.root))}setSelectionPath(l){const n=l.split("/").filter((l=>!!l));this.clickItem(n[n.length-1])||(this.wait=!0,this.setSelection(n))}async setFocusedItem(l){const n=l.split("/").filter((l=>!!l));if(n.length>0){if(!findItem(this.root.items,n[0]).item)return}const e=[];let t=this.root;for(;n.length>0;){const l=n.shift();l&&(t.items||(this.loadItems(t,!1),await this.httpComplete),t=findItem(t.items,l).item,t?e.push(l):n.splice(0,n.length))}this.selection=e,this.requestUpdate("root")}isSelected(l){if(l.level<this.selection.length){return this.selection[l.level]==(l.vanity_id||l.id)}return!1}isExpanded(l){return!!this.selection.find((n=>n===l.vanity_id||l.id))}render(){if(!this.root||!this.root.items)return $`<temba-loading
         units="3"
         size="10"
         direction="column"
@@ -3877,12 +3896,12 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
             class="${getClasses({level:!0,["level-"+(t+1)]:!0,collapsed:o})}"
           >
             ${this.submenu?null:$`<div class="section">${i.name}</div>`}
-            ${l.map((l=>l.inline?$`${this.renderMenuItem(l)}
+            ${l.map((l=>l.inline&&l.items?$`${this.renderMenuItem(l)}
                   <div class="inline-children">
-                    ${l.items.map((n=>this.renderMenuItem(n,l)))}
+                    ${(l.items||[]).map((n=>this.renderMenuItem(n,l)))}
                   </div>`:this.renderMenuItem(l)))}
           </div>`)}));const e=$`<div
-      class="root ${this.collapsed?"fully-collapsed":""}"
+      class="${getClasses({root:!0,"fully-collapsed":this.collapsed})}"
     >
       ${n}
     </div>`;return $`${e}`}}__decorate([e$2({type:Boolean})],TembaMenu.prototype,"wraps",void 0),__decorate([e$2({type:Boolean})],TembaMenu.prototype,"wait",void 0),__decorate([e$2({type:String})],TembaMenu.prototype,"endpoint",void 0),__decorate([e$2({type:String})],TembaMenu.prototype,"expanding",void 0),__decorate([e$2({type:String})],TembaMenu.prototype,"value",void 0),__decorate([e$2({type:String})],TembaMenu.prototype,"submenu",void 0),__decorate([e$2({type:Boolean})],TembaMenu.prototype,"collapsed",void 0);class Anchor extends s{static get styles(){return r$2`

package/dist/index.js

@@ -3464,13 +3464,17 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
           ${this.arrow}
         </div>
       </div>
-    `}}__decorate([e$2({type:String})],Tip.prototype,"text",void 0),__decorate([e$2({type:Boolean})],Tip.prototype,"visible",void 0),__decorate([e$2({type:String})],Tip.prototype,"position",void 0),__decorate([e$2({type:Boolean})],Tip.prototype,"hideOnChange",void 0),__decorate([e$2({type:Number,attribute:!1})],Tip.prototype,"top",void 0),__decorate([e$2({type:Number,attribute:!1})],Tip.prototype,"left",void 0),__decorate([e$2({type:Number,attribute:!1})],Tip.prototype,"width",void 0),__decorate([e$2({type:Boolean,attribute:!1})],Tip.prototype,"poppedTop",void 0);const findItem=(l,n)=>{const e=l||[],t=e.findIndex((l=>l.id==n||l.vanity_id==n));if(t>-1){return{item:e[t],index:t}}return{item:null,index:-1}};class TembaMenu extends RapidElement{constructor(){super(),this.wraps=!1,this.selection=[],this.pending=[],this.state={},this.renderMenuItem=(l,n=null)=>{if("divider"===l.type)return $`<div class="divider"></div>`;if("section"===l.type||l.inline)return $`<div class="sub-section">${l.name}</div>`;if("modax-button"===l.type)return $`<temba-button
+    `}}__decorate([e$2({type:String})],Tip.prototype,"text",void 0),__decorate([e$2({type:Boolean})],Tip.prototype,"visible",void 0),__decorate([e$2({type:String})],Tip.prototype,"position",void 0),__decorate([e$2({type:Boolean})],Tip.prototype,"hideOnChange",void 0),__decorate([e$2({type:Number,attribute:!1})],Tip.prototype,"top",void 0),__decorate([e$2({type:Number,attribute:!1})],Tip.prototype,"left",void 0),__decorate([e$2({type:Number,attribute:!1})],Tip.prototype,"width",void 0),__decorate([e$2({type:Boolean,attribute:!1})],Tip.prototype,"poppedTop",void 0);const findItem=(l,n)=>{const e=l||[],t=e.findIndex((l=>l.id==n||l.vanity_id==n));if(t>-1){return{item:e[t],index:t}}return{item:null,index:-1}};class TembaMenu extends RapidElement{constructor(){super(),this.wraps=!1,this.selection=[],this.pending=[],this.state={},this.renderMenuItem=(l,n=null)=>{if("divider"===l.type)return $`<div class="divider"></div>`;if("space"===l.type)return $`<div class="space"></div>`;if("section"===l.type||l.inline)return $`<div class="sub-section">${l.name}</div>`;if("modax-button"===l.type)return $`<temba-button
         name=${l.name}
         @click=${n=>{this.handleItemClicked(n,l)}}
       />`;const e=this.isSelected(l),t=e&&this.selection.length>l.level+1,i=l.icon?$`<temba-icon
-          size="${0===l.level?"1.5":"1"}"
-          name="${l.icon}"
-        ></temba-icon>`:null,o=l.collapsed_icon?$`<temba-icon
+            size="${0===l.level?"1.5":"1"}"
+            name="${l.icon}"
+          ></temba-icon
+          >${l.bubble?$`<div
+                style="background-color: ${l.bubble}"
+                class="bubble"
+              ></div>`:null}`:null,o=l.collapsed_icon?$`<temba-icon
           size="${0===l.level?"1.5":"1"}"
           name="${l.collapsed_icon}"
           class="collapse-icon"
@@ -3516,6 +3520,18 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
         --options-block-shadow: none;
       }
 
+      .bubble {
+        width: 8px;
+        height: 8px;
+        left: 14px;
+        bottom: -1px;
+        z-index: 10000;
+        border-radius: 99px;
+        border: 1px solid rgb(255, 255, 255);
+        position: relative;
+        margin-top: -10px;
+      }
+
       .section {
         font-size: 1.5em;
         margin-bottom: 0.2em;
@@ -3619,7 +3635,6 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
         margin-top: 0.1em;
         border-radius: var(--curvature);
         display: flex;
-
         min-width: 12em;
         max-width: 12em;
       }
@@ -3709,7 +3724,7 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
 
       .level-1 {
         transition: opacity 100ms linear, margin 200ms linear;
-        overflow-y: auto;
+        overflow-y: scroll;
         z-index: 1500;
       }
 
@@ -3820,6 +3835,10 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
         min-height: 1px;
       }
 
+      .space {
+        margin: 0.5em;
+      }
+
       .collapsed .divider {
         height: 0;
         margin: 0;
@@ -3860,7 +3879,7 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
         margin-left: 0.75em;
         margin-right: 0.75em;
       }
-    `}getMenuItemState(l){let n={};return l&&(n=this.state[l],n||(n={},this.state[l]=n)),n}updated(l){l.has("value")&&this.setSelection((this.value||"").split("/")),l.has("submenu")&&!l.has("value")&&this.setSelection([this.submenu]),l.has("endpoint")&&(this.root={level:-1,endpoint:this.endpoint},this.wait||this.loadItems(this.root))}refresh(l=null){l||(l=[...this.selection]);const n=this.getMenuItemForSelection(l);n.endpoint?this.loadItems(n,!1):(l.pop(),this.refresh(l))}fireNoPath(l){const n=this.getMenuItem(),e={item:n.id,selection:"/"+this.selection.join("/"),endpoint:n.endpoint,path:l+"/"+this.pending.join("/")+document.location.search},t=this.selection.join("/");t.replace(e.path,""),this.selection=t.split("/"),this.fireCustomEvent(CustomEventType.NoPath,e),this.pending=[],this.requestUpdate("root")}loadItems(l,n=!0){l&&l.endpoint&&(l.loading=!0,this.httpComplete=fetchResults(l.endpoint).then((e=>{if(e.forEach((n=>{n.level=l.level+1,n.items&&n.items.forEach((n=>{n.level=l.level+2}))})),l.items=e,l.loading=!1,this.requestUpdate("root"),this.scrollSelectedIntoView(),this.pending&&this.pending.length>0){const l=this.pending.shift();if(l&&e.length>0){const n=findItem(e,l);n.item?this.handleItemClicked(null,n.item):this.fireNoPath(l)}}else if(n&&e.length>0&&this.selection.length>=1&&!l.inline)for(const l of e)if(!l.type){this.handleItemClicked(null,l);break}})))}handleItemClicked(l,n,e=null){if(e&&e.inline&&this.handleItemClicked(null,e),this.collapsed&&(this.collapsed=!1),l&&(l.preventDefault(),l.stopPropagation()),"modax-button"!=n.type)if(n.trigger)window[n.trigger]();else if(n.level,n.level>=this.selection.length?this.selection.push(n.vanity_id||n.id):this.selection.splice(n.level,this.selection.length-n.level,n.vanity_id||n.id),n.endpoint)this.loadItems(n,!n.href),this.dispatchEvent(new Event("change"));else{if(this.pending&&this.pending.length>0){const l=this.pending.shift(),n=this.getMenuItem();if(l&&n&&n.items&&n.items.length>0){const e=findItem(n.items,l).item;e?this.handleItemClicked(null,e):this.fireNoPath(l)}else this.fireNoPath(l)}else this.dispatchEvent(new Event("change"));this.requestUpdate("root")}else this.fireCustomEvent(CustomEventType.ButtonClicked,{title:n.name,href:n.href,on_submit:n.on_submit})}scrollSelectedIntoView(){window.setTimeout((()=>{this.shadowRoot.querySelectorAll(".selected").forEach((l=>{l.scrollIntoView({block:"end",behavior:"smooth"})}))}),0)}clickItem(l){const n=[...this.selection];n.splice(n.length-1,1,l);const e=this.getMenuItemForSelection(n);return!!e&&(this.handleItemClicked(null,e),this.scrollSelectedIntoView(),!0)}getMenuItem(){return this.getMenuItemForSelection([...this.selection])}getMenuItemForSelection(l){const n=[...l];let e=this.root.items,t=null;for(;n.length>0;){const l=n.splice(0,1)[0];if(!e)break;if(t=findItem(e,l).item,!t)break;e=t.items}return t}getSelection(){return this.selection}setSelection(l){this.pending=[...l],this.selection=[],this.wait&&(this.wait=!1,this.loadItems(this.root))}setSelectionPath(l){const n=l.split("/").filter((l=>!!l));this.clickItem(n[n.length-1])||(this.wait=!0,this.setSelection(n))}async setFocusedItem(l){const n=l.split("/").filter((l=>!!l));if(n.length>0){if(!findItem(this.root.items,n[0]).item)return}const e=[];let t=this.root;for(;n.length>0;){const l=n.shift();l&&(t.items||(this.loadItems(t,!1),await this.httpComplete),t=findItem(t.items,l).item,t?e.push(l):n.splice(0,n.length))}this.selection=e,this.requestUpdate("root")}isSelected(l){if(l.level<this.selection.length){return this.selection[l.level]==(l.vanity_id||l.id)}return!1}isExpanded(l){return!!this.selection.find((n=>n===l.vanity_id||l.id))}render(){if(!this.root||!this.root.items)return $`<temba-loading
+    `}setBubble(l,n){const e=findItem(this.root.items,l);return!(!e||!e.item)&&(e.item.bubble=n,this.requestUpdate("root"),!0)}getMenuItemState(l){let n={};return l&&(n=this.state[l],n||(n={},this.state[l]=n)),n}updated(l){l.has("value")&&this.setSelection((this.value||"").split("/")),l.has("submenu")&&!l.has("value")&&this.setSelection([this.submenu]),l.has("endpoint")&&(this.root={level:-1,endpoint:this.endpoint},this.wait||this.loadItems(this.root))}refresh(l=null){l||(l=[...this.selection]);const n=this.getMenuItemForSelection(l);n.endpoint?this.loadItems(n,!1):(l.pop(),this.refresh(l))}fireNoPath(l){const n=this.getMenuItem(),e={item:n.id,selection:"/"+this.selection.join("/"),endpoint:n.endpoint,path:l+"/"+this.pending.join("/")+document.location.search},t=this.selection.join("/");t.replace(e.path,""),this.selection=t.split("/"),this.fireCustomEvent(CustomEventType.NoPath,e),this.pending=[],this.requestUpdate("root")}loadItems(l,n=!0){l&&l.endpoint&&(l.loading=!0,this.httpComplete=fetchResults(l.endpoint).then((e=>{if(e.forEach((n=>{n.level=l.level+1,n.items&&n.items.forEach((n=>{n.level=l.level+2}))})),l.items=e,l.loading=!1,this.requestUpdate("root"),this.scrollSelectedIntoView(),this.pending&&this.pending.length>0){const l=this.pending.shift();if(l&&e.length>0){const n=findItem(e,l);n.item?this.handleItemClicked(null,n.item):this.fireNoPath(l)}}else if(n&&e.length>0&&this.selection.length>=1&&!l.inline)for(const l of e)if(!l.type){this.handleItemClicked(null,l);break}})))}handleItemClicked(l,n,e=null){if(e&&e.inline&&this.handleItemClicked(null,e),this.collapsed&&(this.collapsed=!1),l&&(l.preventDefault(),l.stopPropagation()),"modax-button"!=n.type)if(n.trigger)new Function(n.trigger)();else if(n.level,n.level>=this.selection.length?this.selection.push(n.vanity_id||n.id):this.selection.splice(n.level,this.selection.length-n.level,n.vanity_id||n.id),n.endpoint)this.loadItems(n,!n.href),this.dispatchEvent(new Event("change"));else{if(this.pending&&this.pending.length>0){const l=this.pending.shift(),n=this.getMenuItem();if(l&&n&&n.items&&n.items.length>0){const e=findItem(n.items,l).item;e?this.handleItemClicked(null,e):this.fireNoPath(l)}else this.fireNoPath(l)}else this.dispatchEvent(new Event("change"));this.requestUpdate("root")}else this.fireCustomEvent(CustomEventType.ButtonClicked,{title:n.name,href:n.href,on_submit:n.on_submit})}scrollSelectedIntoView(){window.setTimeout((()=>{this.shadowRoot.querySelectorAll(".selected").forEach((l=>{l.scrollIntoView({block:"end",behavior:"smooth"})}))}),0)}clickItem(l){const n=[...this.selection];n.splice(n.length-1,1,l);const e=this.getMenuItemForSelection(n);return!!e&&(this.handleItemClicked(null,e),this.scrollSelectedIntoView(),!0)}getMenuItem(){return this.getMenuItemForSelection([...this.selection])}getMenuItemForSelection(l){const n=[...l];let e=this.root.items,t=null;for(;n.length>0;){const l=n.splice(0,1)[0];if(!e)break;if(t=findItem(e,l).item,!t)break;e=t.items}return t}getSelection(){return this.selection}setSelection(l){this.pending=[...l],this.selection=[],this.wait&&(this.wait=!1,this.loadItems(this.root))}setSelectionPath(l){const n=l.split("/").filter((l=>!!l));this.clickItem(n[n.length-1])||(this.wait=!0,this.setSelection(n))}async setFocusedItem(l){const n=l.split("/").filter((l=>!!l));if(n.length>0){if(!findItem(this.root.items,n[0]).item)return}const e=[];let t=this.root;for(;n.length>0;){const l=n.shift();l&&(t.items||(this.loadItems(t,!1),await this.httpComplete),t=findItem(t.items,l).item,t?e.push(l):n.splice(0,n.length))}this.selection=e,this.requestUpdate("root")}isSelected(l){if(l.level<this.selection.length){return this.selection[l.level]==(l.vanity_id||l.id)}return!1}isExpanded(l){return!!this.selection.find((n=>n===l.vanity_id||l.id))}render(){if(!this.root||!this.root.items)return $`<temba-loading
         units="3"
         size="10"
         direction="column"
@@ -3877,12 +3896,12 @@ function __decorate(l,n,e,t){var i,o=arguments.length,u=o<3?n:null===t?t=Object.
             class="${getClasses({level:!0,["level-"+(t+1)]:!0,collapsed:o})}"
           >
             ${this.submenu?null:$`<div class="section">${i.name}</div>`}
-            ${l.map((l=>l.inline?$`${this.renderMenuItem(l)}
+            ${l.map((l=>l.inline&&l.items?$`${this.renderMenuItem(l)}
                   <div class="inline-children">
-                    ${l.items.map((n=>this.renderMenuItem(n,l)))}
+                    ${(l.items||[]).map((n=>this.renderMenuItem(n,l)))}
                   </div>`:this.renderMenuItem(l)))}
           </div>`)}));const e=$`<div
-      class="root ${this.collapsed?"fully-collapsed":""}"
+      class="${getClasses({root:!0,"fully-collapsed":this.collapsed})}"
     >
       ${n}
     </div>`;return $`${e}`}}__decorate([e$2({type:Boolean})],TembaMenu.prototype,"wraps",void 0),__decorate([e$2({type:Boolean})],TembaMenu.prototype,"wait",void 0),__decorate([e$2({type:String})],TembaMenu.prototype,"endpoint",void 0),__decorate([e$2({type:String})],TembaMenu.prototype,"expanding",void 0),__decorate([e$2({type:String})],TembaMenu.prototype,"value",void 0),__decorate([e$2({type:String})],TembaMenu.prototype,"submenu",void 0),__decorate([e$2({type:Boolean})],TembaMenu.prototype,"collapsed",void 0);class Anchor extends s{static get styles(){return r$2`

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:"4f80c187.js",revision:"d60c39cb449ca5ab882bf01302e8e733"},{url:"templates/components-body.html",revision:"8f833c9bc89413160bce470ea2ba670d"},{url:"templates/components-head.html",revision:"562f5b9ecb905279fe16b0b5e071507b"}],{}),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:"3f6be8fc.js",revision:"1e5c694507e298f157f4f7fd37a2af52"},{url:"templates/components-body.html",revision:"9ba8c8f447c50b4844ed0fbe55e6d24e"},{url:"templates/components-head.html",revision:"072244c2aaf590013cd892b40a5ffcd1"}],{}),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/2302fdcdc06aab7d06d90a0b66b9dc19/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\": \"4f80c187.js\",\n    \"revision\": \"d60c39cb449ca5ab882bf01302e8e733\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"8f833c9bc89413160bce470ea2ba670d\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"562f5b9ecb905279fe16b0b5e071507b\"\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":["workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"k1BAmCoC,CAClC,KACS,uBACK,oCAEd,KACS,0CACK,oCAEd,KACS,0CACK,qCAEb,oBAE2B,IAAIA,kBAAgCC,0BAA2C,iCAG/E,iBAAkB,IAAIC,aAAiC"}
+{"version":3,"file":"sw.js","sources":["../../../../../tmp/f83d602cdebb456f6bd10352ab09e723/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\": \"3f6be8fc.js\",\n    \"revision\": \"1e5c694507e298f157f4f7fd37a2af52\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"9ba8c8f447c50b4844ed0fbe55e6d24e\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"072244c2aaf590013cd892b40a5ffcd1\"\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":["workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"k1BAmCoC,CAClC,KACS,uBACK,oCAEd,KACS,0CACK,oCAEd,KACS,0CACK,qCAEb,oBAE2B,IAAIA,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/4f80c187.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.26.2"</script>
+<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/3f6be8fc.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.26.5"</script>

package/dist/templates/components-head.html

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

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

@@ -26,6 +26,9 @@ export class TembaMenu extends RapidElement {
             if (menuItem.type === 'divider') {
                 return html `<div class="divider"></div>`;
             }
+            if (menuItem.type === 'space') {
+                return html `<div class="space"></div>`;
+            }
             if (menuItem.type === 'section' || menuItem.inline) {
                 return html `<div class="sub-section">${menuItem.name}</div>`;
             }
@@ -41,9 +44,15 @@ export class TembaMenu extends RapidElement {
             const isChildSelected = isSelected && this.selection.length > menuItem.level + 1;
             const icon = menuItem.icon
                 ? html `<temba-icon
-          size="${menuItem.level === 0 ? '1.5' : '1'}"
-          name="${menuItem.icon}"
-        ></temba-icon>`
+            size="${menuItem.level === 0 ? '1.5' : '1'}"
+            name="${menuItem.icon}"
+          ></temba-icon
+          >${menuItem.bubble
+                    ? html `<div
+                style="background-color: ${menuItem.bubble}"
+                class="bubble"
+              ></div>`
+                    : null}`
                 : null;
             const collapsedIcon = menuItem.collapsed_icon
                 ? html `<temba-icon
@@ -123,6 +132,18 @@ export class TembaMenu extends RapidElement {
         --options-block-shadow: none;
       }
 
+      .bubble {
+        width: 8px;
+        height: 8px;
+        left: 14px;
+        bottom: -1px;
+        z-index: 10000;
+        border-radius: 99px;
+        border: 1px solid rgb(255, 255, 255);
+        position: relative;
+        margin-top: -10px;
+      }
+
       .section {
         font-size: 1.5em;
         margin-bottom: 0.2em;
@@ -226,7 +247,6 @@ export class TembaMenu extends RapidElement {
         margin-top: 0.1em;
         border-radius: var(--curvature);
         display: flex;
-
         min-width: 12em;
         max-width: 12em;
       }
@@ -316,7 +336,7 @@ export class TembaMenu extends RapidElement {
 
       .level-1 {
         transition: opacity 100ms linear, margin 200ms linear;
-        overflow-y: auto;
+        overflow-y: scroll;
         z-index: 1500;
       }
 
@@ -427,6 +447,10 @@ export class TembaMenu extends RapidElement {
         min-height: 1px;
       }
 
+      .space {
+        margin: 0.5em;
+      }
+
       .collapsed .divider {
         height: 0;
         margin: 0;
@@ -469,6 +493,15 @@ export class TembaMenu extends RapidElement {
       }
     `;
     }
+    setBubble(id, color) {
+        const found = findItem(this.root.items, id);
+        if (found && found.item) {
+            found.item.bubble = color;
+            this.requestUpdate('root');
+            return true;
+        }
+        return false;
+    }
     getMenuItemState(id) {
         let itemState = {};
         if (id) {
@@ -597,7 +630,7 @@ export class TembaMenu extends RapidElement {
             return;
         }
         if (menuItem.trigger) {
-            window[menuItem.trigger]();
+            new Function(menuItem.trigger)();
         }
         else {
             if (menuItem.level === 0) {
@@ -808,10 +841,10 @@ export class TembaMenu extends RapidElement {
                     ? html `<div class="section">${selected.name}</div>`
                     : null}
             ${items.map((item) => {
-                    if (item.inline) {
+                    if (item.inline && item.items) {
                         return html `${this.renderMenuItem(item)}
                   <div class="inline-children">
-                    ${item.items.map((child) => {
+                    ${(item.items || []).map((child) => {
                             return this.renderMenuItem(child, item);
                         })}
                   </div>`;
@@ -822,7 +855,10 @@ export class TembaMenu extends RapidElement {
             }
         });
         const menu = html `<div
-      class="root ${this.collapsed ? 'fully-collapsed' : ''}"
+      class="${getClasses({
+            root: true,
+            'fully-collapsed': this.collapsed,
+        })}"
     >
       ${levels}
     </div>`;

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

@@ -1 +1 @@
-{"version":3,"file":"TembaMenu.js","sourceRoot":"","sources":["../../../src/list/TembaMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { fetchResults, getClasses } from '../utils';\n\nexport interface MenuItem {\n  id?: string;\n  vanity_id?: string;\n  name?: string;\n  count?: number;\n  icon?: string;\n  collapsed_icon?: string;\n  endpoint?: string;\n  loading?: boolean;\n  bottom?: boolean;\n  level?: number;\n  trigger?: string;\n  href?: string;\n  items?: MenuItem[];\n  inline?: boolean;\n  type?: string;\n  on_submit?: string;\n}\n\ninterface MenuItemState {\n  collapsed?: string;\n}\n\nconst findItem = (\n  items: MenuItem[],\n  id: string\n): { item: MenuItem; index: number } => {\n  const search = items || [];\n\n  const index = search.findIndex((item: MenuItem) => {\n    return item.id == id || item.vanity_id == id;\n  });\n\n  if (index > -1) {\n    const item = search[index];\n    return { item, index };\n  }\n\n  return { item: null, index: -1 };\n};\n\nexport class TembaMenu extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        width: 100%;\n        display: block;\n        --color-widget-bg-focused: transparent;\n        --options-block-shadow: none;\n      }\n\n      .section {\n        font-size: 1.5em;\n        margin-bottom: 0.2em;\n        color: var(--color-text-dark);\n      }\n\n      .collapse-toggle {\n        width: 0.5em;\n        cursor: pointer;\n        display: block;\n        margin-right: 5px;\n        margin-top: 3px;\n        margin-bottom: 3px;\n      }\n\n      .collapse-toggle:hover {\n        background: rgb(100, 100, 100, 0.05);\n      }\n\n      .item {\n        cursor: pointer;\n        user-select: none;\n        -webkit-user-select: none;\n        display: flex;\n        font-size: 1em;\n        --icon-color: var(--color-text-dark);\n      }\n\n      .item.selected {\n        background: var(--color-selection);\n        color: var(--color-primary-dark);\n        --icon-color: var(--color-primary-dark);\n      }\n\n      .root {\n        display: flex;\n        flex-direction: row;\n        height: 100%;\n      }\n\n      .level {\n        display: flex;\n        flex-direction: column;\n      }\n\n      .level.hidden {\n        display: none;\n      }\n\n      .submenu {\n      }\n\n      .level-0 > .item {\n        background: var(--color-primary-dark);\n        --icon-color: #fff;\n        font-size: 1em;\n      }\n\n      .level-0 > .top {\n        padding-top: var(--menu-padding);\n        background: var(--color-primary-dark);\n      }\n\n      .level-0 > .empty {\n        background: var(--color-primary-dark);\n        align-self: stretch;\n        flex-grow: 1;\n      }\n\n      .level-0 > .bottom {\n        height: 1em;\n        background: var(--color-primary-dark);\n      }\n\n      .level-0 > .item > .details {\n        display: none !important;\n      }\n\n      .level-0.expanding {\n      }\n\n      .level-0.expanded {\n        background: inherit;\n      }\n\n      .level-0 > .item.selected {\n        background: inherit;\n        --icon-color: var(--color-primary-dark);\n      }\n\n      .level {\n        padding: var(--menu-padding);\n      }\n\n      .level-0 {\n        padding: 0px;\n      }\n\n      .item {\n        padding: 0.2em 0.75em;\n        margin-top: 0.1em;\n        border-radius: var(--curvature);\n        display: flex;\n\n        min-width: 12em;\n        max-width: 12em;\n      }\n\n      .item > temba-icon {\n        margin-right: 0.5em;\n      }\n\n      .item.inline > temba-icon {\n      }\n\n      .item > .details > .name {\n        flex-grow: 1;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 0;\n      }\n\n      .level-0 > .item {\n        padding: 1em 1em;\n        margin-top: 0em;\n        border-radius: 0px;\n        min-width: inherit;\n        max-width: inherit;\n      }\n\n      .level-0 > .item > temba-icon {\n        margin-right: 0px;\n      }\n\n      .level-0 > .item > .name {\n        min-width: 0px;\n      }\n\n      .count {\n        align-self: center;\n        margin-left: 1em;\n        font-size: 0.8em;\n        font-weight: 400;\n      }\n\n      .level-0 > .item-top {\n        background: var(--color-primary-dark);\n        min-height: var(--curvature);\n      }\n\n      .level-0 > .item-bottom {\n        background: var(--color-primary-dark);\n        min-height: var(--curvature);\n      }\n\n      .level-0 > .item-bottom.selected {\n        border-top-right-radius: var(--curvature);\n      }\n\n      .level-0 > .item-top.selected {\n        border-bottom-right-radius: var(--curvature);\n      }\n\n      .level-0 > .selected-top {\n      }\n\n      .level-0 > .item:hover {\n        background: rgba(var(--primary-rgb), 0.85);\n      }\n\n      .level-0 > .item.selected:hover {\n        background: inherit;\n      }\n\n      .inline-children {\n      }\n\n      .inline-children .item {\n      }\n\n      .item.inline {\n        border: 0px solid transparent;\n      }\n\n      .level-1,\n      .level-2 {\n        border-right: 1px solid rgba(0 0 0 / 8%);\n        box-shadow: rgb(0 0 0 / 6%) 4px 0px 6px 1px;\n      }\n\n      .level-1 {\n        transition: opacity 100ms linear, margin 200ms linear;\n        overflow-y: auto;\n        z-index: 1500;\n      }\n\n      .level-2 {\n        background: #fbfbfb;\n        overflow-y: auto;\n        z-index: 1000;\n      }\n\n      .level-2 .item .details {\n        overflow: hidden;\n      }\n\n      .level-2 .item {\n        min-width: 12em;\n        max-width: 12em;\n      }\n\n      .level-1 .item {\n        overflow: hidden;\n        max-width: 12em;\n        min-width: 12em;\n        min-height: 1.5em;\n        max-height: 1.5em;\n        transition: min-width var(--transition-speed) !important;\n      }\n\n      .level-1 .item .details {\n      }\n\n      .collapsed .item {\n        overflow: hidden;\n        min-width: 0;\n        margin: 0;\n      }\n\n      .item .details {\n        opacity: 1;\n        min-height: 1.5em;\n        max-height: 1.5em;\n        align-items: center;\n      }\n\n      .item .details .name {\n      }\n\n      .item temba-icon {\n      }\n\n      .collapsed .item {\n        margin-bottom: 0.5em;\n      }\n\n      .collapsed .item .details {\n        overflow: hidden;\n        max-height: 0em;\n        max-width: 0em;\n      }\n\n      .collapsed .item .details {\n        max-height: 0em;\n      }\n\n      .collapsed .item temba-icon {\n        margin-right: 0;\n      }\n\n      .section {\n        max-width: 12em;\n      }\n\n      .collapsed .section {\n        opacity: 0;\n        max-width: 0em;\n        max-height: 0.6em;\n      }\n\n      .collapsed.level-1 {\n        overflow: hidden;\n        padding: 0.5em;\n        --icon-color: #999;\n      }\n\n      .collapsed .item .right {\n        flex-grow: 1;\n      }\n\n      .collapse-icon {\n        display: none;\n      }\n\n      .collapsed .collapse-icon {\n        --icon-color: #ccc;\n        display: block;\n      }\n\n      .collapsed .item.iconless {\n        max-height: 0em;\n        padding: 0em;\n        min-height: 0em;\n        margin-bottom: 0em;\n      }\n\n      .divider {\n        height: 1px;\n        background: #f3f3f3;\n        margin: 0.5em 0.75em;\n        min-height: 1px;\n      }\n\n      .collapsed .divider {\n        height: 0;\n        margin: 0;\n        padding: 0;\n        min-height: 0px;\n      }\n\n      .sub-section {\n        font-size: 1rem;\n        color: #888;\n        margin-top: 1rem;\n        margin-left: 0.3rem;\n      }\n\n      .fully-collapsed .level-0 {\n        z-index: 1;\n      }\n\n      .fully-collapsed .level-1 {\n        margin-left: -245px;\n        z-index: 0;\n        border: none;\n      }\n\n      .fully-collapsed .level-1 .item,\n      .fully-collapsed .level-1 .divider {\n        opacity: 0;\n      }\n\n      .fully-collapsed .level-2,\n      .fully-collapsed .level-3 {\n        display: none;\n      }\n\n      temba-button {\n        margin-top: 0.2em;\n        margin-bottom: 0.2em;\n        margin-left: 0.75em;\n        margin-right: 0.75em;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  wraps = false;\n\n  @property({ type: Boolean })\n  wait: boolean;\n\n  @property({ type: String })\n  endpoint: string;\n\n  @property({ type: String })\n  expanding: string;\n\n  @property({ type: String })\n  value: string;\n\n  // submenu to constrain to\n  @property({ type: String })\n  submenu: string;\n\n  @property({ type: Boolean })\n  collapsed: boolean;\n\n  // http promise to monitor for completeness\n  public httpComplete: Promise<void>;\n\n  root: MenuItem;\n  selection: string[] = [];\n  pending: string[] = [];\n  state: { [id: string]: MenuItemState } = {};\n\n  constructor() {\n    super();\n  }\n\n  private getMenuItemState(id: string): MenuItemState {\n    let itemState = {};\n    if (id) {\n      itemState = this.state[id];\n      if (!itemState) {\n        itemState = {};\n        this.state[id] = itemState;\n      }\n    }\n    return itemState;\n  }\n\n  public updated(changes: Map<string, any>) {\n    if (changes.has('value')) {\n      this.setSelection((this.value || '').split('/'));\n    }\n\n    if (changes.has('submenu') && !changes.has('value')) {\n      this.setSelection([this.submenu]);\n    }\n\n    if (changes.has('endpoint')) {\n      this.root = {\n        level: -1,\n        endpoint: this.endpoint,\n      };\n\n      if (!this.wait) {\n        this.loadItems(this.root);\n      }\n    }\n  }\n\n  public refresh(path: string[] = null) {\n    if (!path) {\n      path = [...this.selection];\n    }\n\n    // go up the tree until we find an endpoint\n    const item = this.getMenuItemForSelection(path);\n\n    if (item.endpoint) {\n      this.loadItems(item, false);\n    } else {\n      path.pop();\n      this.refresh(path);\n    }\n  }\n\n  private fireNoPath(missingId: string) {\n    const item = this.getMenuItem();\n\n    const details = {\n      item: item.id,\n      selection: '/' + this.selection.join('/'),\n      endpoint: item.endpoint,\n      path: missingId + '/' + this.pending.join('/') + document.location.search,\n    };\n\n    // remove any excess from our selection\n    const selection = this.selection.join('/');\n    selection.replace(details.path, '');\n    this.selection = selection.split('/');\n\n    this.fireCustomEvent(CustomEventType.NoPath, details);\n    this.pending = [];\n    this.requestUpdate('root');\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private loadItems(item: MenuItem, selectFirst = true) {\n    if (item && item.endpoint) {\n      item.loading = true;\n      this.httpComplete = fetchResults(item.endpoint).then(\n        (items: MenuItem[]) => {\n          // update our item level\n          items.forEach(subItem => {\n            subItem.level = item.level + 1;\n            // if we came with preset items, set the level for them accordingly\n            if (subItem.items) {\n              subItem.items.forEach(inlineItem => {\n                inlineItem.level = item.level + 2;\n                // inlineItem.parent = subItem;\n              });\n            }\n          });\n\n          item.items = items;\n          item.loading = false;\n          this.requestUpdate('root');\n          this.scrollSelectedIntoView();\n          if (this.pending && this.pending.length > 0) {\n            // auto select the next pending click\n            const nextId = this.pending.shift();\n            if (nextId && items.length > 0) {\n              const nextItem = findItem(items, nextId);\n              if (nextItem.item) {\n                this.handleItemClicked(null, nextItem.item);\n              } else {\n                this.fireNoPath(nextId);\n              }\n            }\n          } else {\n            // auto select the first item\n            if (\n              selectFirst &&\n              items.length > 0 &&\n              this.selection.length >= 1 &&\n              !item.inline\n            ) {\n              for (const item of items) {\n                if (!item.type) {\n                  this.handleItemClicked(null, item);\n                  break;\n                }\n              }\n            }\n          }\n        }\n      );\n    }\n  }\n\n  private handleItemClicked(\n    event: MouseEvent,\n    menuItem: MenuItem,\n    parent: MenuItem = null\n  ) {\n    if (parent && parent.inline) {\n      this.handleItemClicked(null, parent);\n    }\n\n    if (this.collapsed) {\n      this.collapsed = false;\n    }\n\n    if (event) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    if (menuItem.type == 'modax-button') {\n      this.fireCustomEvent(CustomEventType.ButtonClicked, {\n        title: menuItem.name,\n        href: menuItem.href,\n        on_submit: menuItem.on_submit,\n      });\n      return;\n    }\n\n    if (menuItem.trigger) {\n      window[menuItem.trigger]();\n    } else {\n      if (menuItem.level === 0) {\n        /* this.expanding = menuItem.id;\n        window.setTimeout(() => {\n          this.expanding = null;\n        }, 60);\n        */\n      }\n\n      // update our selection\n      if (menuItem.level >= this.selection.length) {\n        this.selection.push(menuItem.vanity_id || menuItem.id);\n      } else {\n        this.selection.splice(\n          menuItem.level,\n          this.selection.length - menuItem.level,\n          menuItem.vanity_id || menuItem.id\n        );\n      }\n\n      if (menuItem.endpoint) {\n        this.loadItems(menuItem, !menuItem.href);\n        this.dispatchEvent(new Event('change'));\n      } else {\n        if (this.pending && this.pending.length > 0) {\n          // auto select the next pending click\n          const nextId = this.pending.shift();\n          const item = this.getMenuItem();\n          if (nextId && item && item.items && item.items.length > 0) {\n            const nextItem = findItem(item.items, nextId).item;\n            if (nextItem) {\n              this.handleItemClicked(null, nextItem);\n            } else {\n              this.fireNoPath(nextId);\n            }\n          } else {\n            this.fireNoPath(nextId);\n          }\n        } else {\n          this.dispatchEvent(new Event('change'));\n        }\n        this.requestUpdate('root');\n      }\n    }\n  }\n\n  public scrollSelectedIntoView() {\n    // makes sure we are scrolled into view\n    window.setTimeout(() => {\n      const eles = this.shadowRoot.querySelectorAll('.selected');\n      eles.forEach(ele => {\n        ele.scrollIntoView({ block: 'end', behavior: 'smooth' });\n      });\n    }, 0);\n  }\n\n  public clickItem(id: string): boolean {\n    const path = [...this.selection];\n    path.splice(path.length - 1, 1, id);\n    const item = this.getMenuItemForSelection(path);\n\n    if (item) {\n      this.handleItemClicked(null, item);\n      this.scrollSelectedIntoView();\n      return true;\n    }\n    return false;\n  }\n\n  public getMenuItem(): MenuItem {\n    return this.getMenuItemForSelection([...this.selection]);\n  }\n\n  public getMenuItemForSelection(selection: string[]) {\n    const path = [...selection];\n    let items = this.root.items;\n    let item = null;\n    while (path.length > 0) {\n      const step = path.splice(0, 1)[0];\n      if (items) {\n        item = findItem(items, step).item;\n        if (item) {\n          items = item.items;\n        } else {\n          break;\n        }\n      } else {\n        break;\n      }\n    }\n\n    return item;\n  }\n\n  public getSelection() {\n    return this.selection;\n  }\n\n  public setSelection(path: string[]) {\n    this.pending = [...path];\n    this.selection = [];\n\n    if (this.wait) {\n      this.wait = false;\n      this.loadItems(this.root);\n    }\n  }\n\n  public setSelectionPath(path: string) {\n    const asPath = path.split('/').filter(step => !!step);\n\n    // first try to click in the current space\n    const clicked = this.clickItem(asPath[asPath.length - 1]);\n\n    if (!clicked) {\n      this.wait = true;\n      this.setSelection(asPath);\n    }\n  }\n\n  public async setFocusedItem(path: string) {\n    const focusedPath = path.split('/').filter(step => !!step);\n\n    // if we don't match at the first level, we are a noop\n    if (focusedPath.length > 0) {\n      const rootItem = findItem(this.root.items, focusedPath[0]).item;\n      if (!rootItem) {\n        return;\n      }\n    }\n\n    const newPath = [];\n    let level = this.root;\n    while (focusedPath.length > 0) {\n      const nextId = focusedPath.shift();\n      if (nextId) {\n        if (!level.items) {\n          this.loadItems(level, false);\n          await this.httpComplete;\n        }\n\n        level = findItem(level.items, nextId).item;\n        if (!level) {\n          focusedPath.splice(0, focusedPath.length);\n        } else {\n          newPath.push(nextId);\n        }\n      }\n    }\n\n    this.selection = newPath;\n    this.requestUpdate('root');\n  }\n\n  private isSelected(menuItem: MenuItem) {\n    if (menuItem.level < this.selection.length) {\n      const selected =\n        this.selection[menuItem.level] == (menuItem.vanity_id || menuItem.id);\n      return selected;\n    }\n    return false;\n  }\n\n  private isExpanded(menuItem: MenuItem) {\n    const expanded = !!this.selection.find(\n      id => id === menuItem.vanity_id || menuItem.id\n    );\n    return expanded;\n  }\n\n  private renderMenuItem = (\n    menuItem: MenuItem,\n    parent: MenuItem = null\n  ): TemplateResult => {\n    if (menuItem.type === 'divider') {\n      return html`<div class=\"divider\"></div>`;\n    }\n\n    if (menuItem.type === 'section' || menuItem.inline) {\n      return html`<div class=\"sub-section\">${menuItem.name}</div>`;\n    }\n\n    if (menuItem.type === 'modax-button') {\n      return html`<temba-button\n        name=${menuItem.name}\n        @click=${event => {\n          this.handleItemClicked(event, menuItem);\n        }}\n      />`;\n    }\n\n    const isSelected = this.isSelected(menuItem);\n    const isChildSelected =\n      isSelected && this.selection.length > menuItem.level + 1;\n\n    const icon = menuItem.icon\n      ? html`<temba-icon\n          size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n          name=\"${menuItem.icon}\"\n        ></temba-icon>`\n      : null;\n\n    const collapsedIcon = menuItem.collapsed_icon\n      ? html`<temba-icon\n          size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n          name=\"${menuItem.collapsed_icon}\"\n          class=\"collapse-icon\"\n        ></temba-icon>`\n      : null;\n\n    const itemClasses = getClasses({\n      ['menu-' + menuItem.id]: true,\n      'child-selected': isChildSelected,\n      selected: isSelected,\n      item: true,\n      inline: menuItem.inline,\n      expanding: this.expanding && this.expanding === menuItem.id,\n      expanded: this.isExpanded(menuItem),\n      iconless: !icon && !collapsedIcon,\n    });\n\n    const item = html` <div\n        class=\"item-top ${isSelected ? 'selected' : null} \"\n      ></div>\n\n      <div\n        id=\"menu-${menuItem.id}\"\n        class=\"${itemClasses}\"\n        @click=${event => {\n          this.handleItemClicked(event, menuItem, parent);\n        }}\n      >\n        ${menuItem.level === 0\n          ? html`<temba-tip\n              style=\"display:flex;\"\n              text=\"${menuItem.name}\"\n              position=\"right\"\n              >${icon}</temba-tip\n            >`\n          : html`${icon}${collapsedIcon}`}\n\n        <div class=\"details\" style=\"flex-grow:1;display:flex\">\n          <div\n            class=\"name\"\n            style=\"flex-grow:1; flex-shrink:0; white-space: ${this.wraps\n              ? 'normal'\n              : 'nowrap'};\"\n          >\n            ${menuItem.name}\n          </div>\n          ${menuItem.level > 0\n            ? menuItem.inline\n              ? html`<temba-icon\n                  name=\"chevron-${isSelected || isChildSelected\n                    ? 'up'\n                    : 'down'}\"\n                ></temba-icon>`\n              : html`${menuItem.count || menuItem.count == 0\n                  ? html`\n                      <div class=\"count\">\n                        ${menuItem.count.toLocaleString()}\n                      </div>\n                    `\n                  : html`<div class=\"count\"></div>`}`\n            : null}\n        </div>\n        <div class=\"right\"></div>\n      </div>\n\n      <div class=\"item-bottom ${isSelected ? 'selected' : null}\"></div>`;\n\n    return item;\n  };\n\n  public render(): TemplateResult {\n    if (!this.root || !this.root.items) {\n      return html`<temba-loading\n        units=\"3\"\n        size=\"10\"\n        direction=\"column\"\n        style=\"margin:1em;margin-right:0em\"\n      />`;\n    }\n\n    let items = this.root.items || [];\n    const levels = [];\n\n    levels.push(\n      html`<div class=\"level level-0 ${this.submenu ? 'hidden' : ''}\">\n        <div class=\"top\"></div>\n\n        ${items\n          .filter(item => !item.bottom)\n          .map((item: MenuItem) => {\n            return this.renderMenuItem(item);\n          })}\n\n        <div class=\"empty\"></div>\n        ${items\n          .filter(item => !!item.bottom)\n          .map((item: MenuItem) => {\n            return this.renderMenuItem(item);\n          })}\n        <div class=\"bottom\"></div>\n      </div>`\n    );\n\n    this.selection.forEach((id, index) => {\n      const selected = findItem(items, id).item;\n\n      let collapsed = false;\n      if (selected) {\n        items = selected.items;\n        const itemState = this.getMenuItemState(selected.id);\n        // users set an explicit collapse state\n        if (itemState.collapsed) {\n          collapsed = itemState.collapsed === 'collapsed';\n        }\n        // otherwise pick a default collapse state\n        else {\n          if (this.selection.length > selected.level + 2) {\n            collapsed = false;\n          }\n        }\n      } else {\n        items = null;\n      }\n\n      if (items && items.length > 0 && !selected.inline) {\n        levels.push(\n          html`<div\n            class=\"${getClasses({\n              level: true,\n              ['level-' + (index + 1)]: true,\n              collapsed,\n            })}\"\n          >\n            ${!this.submenu\n              ? html`<div class=\"section\">${selected.name}</div>`\n              : null}\n            ${items.map((item: MenuItem) => {\n              if (item.inline) {\n                return html`${this.renderMenuItem(item)}\n                  <div class=\"inline-children\">\n                    ${item.items.map((child: MenuItem) => {\n                      return this.renderMenuItem(child, item);\n                    })}\n                  </div>`;\n              }\n              return this.renderMenuItem(item);\n            })}\n          </div>`\n        );\n      }\n    });\n\n    const menu = html`<div\n      class=\"root ${this.collapsed ? 'fully-collapsed' : ''}\"\n    >\n      ${levels}\n    </div>`;\n    return html`${menu}`;\n  }\n}\n"]}
+{"version":3,"file":"TembaMenu.js","sourceRoot":"","sources":["../../../src/list/TembaMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { fetchResults, getClasses } from '../utils';\n\nexport interface MenuItem {\n  id?: string;\n  vanity_id?: string;\n  name?: string;\n  count?: number;\n  icon?: string;\n  collapsed_icon?: string;\n  endpoint?: string;\n  loading?: boolean;\n  bottom?: boolean;\n  level?: number;\n  trigger?: string;\n  href?: string;\n  items?: MenuItem[];\n  inline?: boolean;\n  type?: string;\n  on_submit?: string;\n  bubble?: string;\n}\n\ninterface MenuItemState {\n  collapsed?: string;\n}\n\nconst findItem = (\n  items: MenuItem[],\n  id: string\n): { item: MenuItem; index: number } => {\n  const search = items || [];\n\n  const index = search.findIndex((item: MenuItem) => {\n    return item.id == id || item.vanity_id == id;\n  });\n\n  if (index > -1) {\n    const item = search[index];\n    return { item, index };\n  }\n\n  return { item: null, index: -1 };\n};\n\nexport class TembaMenu extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        width: 100%;\n        display: block;\n        --color-widget-bg-focused: transparent;\n        --options-block-shadow: none;\n      }\n\n      .bubble {\n        width: 8px;\n        height: 8px;\n        left: 14px;\n        bottom: -1px;\n        z-index: 10000;\n        border-radius: 99px;\n        border: 1px solid rgb(255, 255, 255);\n        position: relative;\n        margin-top: -10px;\n      }\n\n      .section {\n        font-size: 1.5em;\n        margin-bottom: 0.2em;\n        color: var(--color-text-dark);\n      }\n\n      .collapse-toggle {\n        width: 0.5em;\n        cursor: pointer;\n        display: block;\n        margin-right: 5px;\n        margin-top: 3px;\n        margin-bottom: 3px;\n      }\n\n      .collapse-toggle:hover {\n        background: rgb(100, 100, 100, 0.05);\n      }\n\n      .item {\n        cursor: pointer;\n        user-select: none;\n        -webkit-user-select: none;\n        display: flex;\n        font-size: 1em;\n        --icon-color: var(--color-text-dark);\n      }\n\n      .item.selected {\n        background: var(--color-selection);\n        color: var(--color-primary-dark);\n        --icon-color: var(--color-primary-dark);\n      }\n\n      .root {\n        display: flex;\n        flex-direction: row;\n        height: 100%;\n      }\n\n      .level {\n        display: flex;\n        flex-direction: column;\n      }\n\n      .level.hidden {\n        display: none;\n      }\n\n      .submenu {\n      }\n\n      .level-0 > .item {\n        background: var(--color-primary-dark);\n        --icon-color: #fff;\n        font-size: 1em;\n      }\n\n      .level-0 > .top {\n        padding-top: var(--menu-padding);\n        background: var(--color-primary-dark);\n      }\n\n      .level-0 > .empty {\n        background: var(--color-primary-dark);\n        align-self: stretch;\n        flex-grow: 1;\n      }\n\n      .level-0 > .bottom {\n        height: 1em;\n        background: var(--color-primary-dark);\n      }\n\n      .level-0 > .item > .details {\n        display: none !important;\n      }\n\n      .level-0.expanding {\n      }\n\n      .level-0.expanded {\n        background: inherit;\n      }\n\n      .level-0 > .item.selected {\n        background: inherit;\n        --icon-color: var(--color-primary-dark);\n      }\n\n      .level {\n        padding: var(--menu-padding);\n      }\n\n      .level-0 {\n        padding: 0px;\n      }\n\n      .item {\n        padding: 0.2em 0.75em;\n        margin-top: 0.1em;\n        border-radius: var(--curvature);\n        display: flex;\n        min-width: 12em;\n        max-width: 12em;\n      }\n\n      .item > temba-icon {\n        margin-right: 0.5em;\n      }\n\n      .item.inline > temba-icon {\n      }\n\n      .item > .details > .name {\n        flex-grow: 1;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 0;\n      }\n\n      .level-0 > .item {\n        padding: 1em 1em;\n        margin-top: 0em;\n        border-radius: 0px;\n        min-width: inherit;\n        max-width: inherit;\n      }\n\n      .level-0 > .item > temba-icon {\n        margin-right: 0px;\n      }\n\n      .level-0 > .item > .name {\n        min-width: 0px;\n      }\n\n      .count {\n        align-self: center;\n        margin-left: 1em;\n        font-size: 0.8em;\n        font-weight: 400;\n      }\n\n      .level-0 > .item-top {\n        background: var(--color-primary-dark);\n        min-height: var(--curvature);\n      }\n\n      .level-0 > .item-bottom {\n        background: var(--color-primary-dark);\n        min-height: var(--curvature);\n      }\n\n      .level-0 > .item-bottom.selected {\n        border-top-right-radius: var(--curvature);\n      }\n\n      .level-0 > .item-top.selected {\n        border-bottom-right-radius: var(--curvature);\n      }\n\n      .level-0 > .selected-top {\n      }\n\n      .level-0 > .item:hover {\n        background: rgba(var(--primary-rgb), 0.85);\n      }\n\n      .level-0 > .item.selected:hover {\n        background: inherit;\n      }\n\n      .inline-children {\n      }\n\n      .inline-children .item {\n      }\n\n      .item.inline {\n        border: 0px solid transparent;\n      }\n\n      .level-1,\n      .level-2 {\n        border-right: 1px solid rgba(0 0 0 / 8%);\n        box-shadow: rgb(0 0 0 / 6%) 4px 0px 6px 1px;\n      }\n\n      .level-1 {\n        transition: opacity 100ms linear, margin 200ms linear;\n        overflow-y: scroll;\n        z-index: 1500;\n      }\n\n      .level-2 {\n        background: #fbfbfb;\n        overflow-y: auto;\n        z-index: 1000;\n      }\n\n      .level-2 .item .details {\n        overflow: hidden;\n      }\n\n      .level-2 .item {\n        min-width: 12em;\n        max-width: 12em;\n      }\n\n      .level-1 .item {\n        overflow: hidden;\n        max-width: 12em;\n        min-width: 12em;\n        min-height: 1.5em;\n        max-height: 1.5em;\n        transition: min-width var(--transition-speed) !important;\n      }\n\n      .level-1 .item .details {\n      }\n\n      .collapsed .item {\n        overflow: hidden;\n        min-width: 0;\n        margin: 0;\n      }\n\n      .item .details {\n        opacity: 1;\n        min-height: 1.5em;\n        max-height: 1.5em;\n        align-items: center;\n      }\n\n      .item .details .name {\n      }\n\n      .item temba-icon {\n      }\n\n      .collapsed .item {\n        margin-bottom: 0.5em;\n      }\n\n      .collapsed .item .details {\n        overflow: hidden;\n        max-height: 0em;\n        max-width: 0em;\n      }\n\n      .collapsed .item .details {\n        max-height: 0em;\n      }\n\n      .collapsed .item temba-icon {\n        margin-right: 0;\n      }\n\n      .section {\n        max-width: 12em;\n      }\n\n      .collapsed .section {\n        opacity: 0;\n        max-width: 0em;\n        max-height: 0.6em;\n      }\n\n      .collapsed.level-1 {\n        overflow: hidden;\n        padding: 0.5em;\n        --icon-color: #999;\n      }\n\n      .collapsed .item .right {\n        flex-grow: 1;\n      }\n\n      .collapse-icon {\n        display: none;\n      }\n\n      .collapsed .collapse-icon {\n        --icon-color: #ccc;\n        display: block;\n      }\n\n      .collapsed .item.iconless {\n        max-height: 0em;\n        padding: 0em;\n        min-height: 0em;\n        margin-bottom: 0em;\n      }\n\n      .divider {\n        height: 1px;\n        background: #f3f3f3;\n        margin: 0.5em 0.75em;\n        min-height: 1px;\n      }\n\n      .space {\n        margin: 0.5em;\n      }\n\n      .collapsed .divider {\n        height: 0;\n        margin: 0;\n        padding: 0;\n        min-height: 0px;\n      }\n\n      .sub-section {\n        font-size: 1rem;\n        color: #888;\n        margin-top: 1rem;\n        margin-left: 0.3rem;\n      }\n\n      .fully-collapsed .level-0 {\n        z-index: 1;\n      }\n\n      .fully-collapsed .level-1 {\n        margin-left: -245px;\n        z-index: 0;\n        border: none;\n      }\n\n      .fully-collapsed .level-1 .item,\n      .fully-collapsed .level-1 .divider {\n        opacity: 0;\n      }\n\n      .fully-collapsed .level-2,\n      .fully-collapsed .level-3 {\n        display: none;\n      }\n\n      temba-button {\n        margin-top: 0.2em;\n        margin-bottom: 0.2em;\n        margin-left: 0.75em;\n        margin-right: 0.75em;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  wraps = false;\n\n  @property({ type: Boolean })\n  wait: boolean;\n\n  @property({ type: String })\n  endpoint: string;\n\n  @property({ type: String })\n  expanding: string;\n\n  @property({ type: String })\n  value: string;\n\n  // submenu to constrain to\n  @property({ type: String })\n  submenu: string;\n\n  @property({ type: Boolean })\n  collapsed: boolean;\n\n  // http promise to monitor for completeness\n  public httpComplete: Promise<void>;\n\n  root: MenuItem;\n  selection: string[] = [];\n  pending: string[] = [];\n  state: { [id: string]: MenuItemState } = {};\n\n  constructor() {\n    super();\n  }\n\n  public setBubble(id: string, color: string) {\n    const found = findItem(this.root.items, id);\n    if (found && found.item) {\n      found.item.bubble = color;\n      this.requestUpdate('root');\n      return true;\n    }\n    return false;\n  }\n\n  private getMenuItemState(id: string): MenuItemState {\n    let itemState = {};\n    if (id) {\n      itemState = this.state[id];\n      if (!itemState) {\n        itemState = {};\n        this.state[id] = itemState;\n      }\n    }\n    return itemState;\n  }\n\n  public updated(changes: Map<string, any>) {\n    if (changes.has('value')) {\n      this.setSelection((this.value || '').split('/'));\n    }\n\n    if (changes.has('submenu') && !changes.has('value')) {\n      this.setSelection([this.submenu]);\n    }\n\n    if (changes.has('endpoint')) {\n      this.root = {\n        level: -1,\n        endpoint: this.endpoint,\n      };\n\n      if (!this.wait) {\n        this.loadItems(this.root);\n      }\n    }\n  }\n\n  public refresh(path: string[] = null) {\n    if (!path) {\n      path = [...this.selection];\n    }\n\n    // go up the tree until we find an endpoint\n    const item = this.getMenuItemForSelection(path);\n\n    if (item.endpoint) {\n      this.loadItems(item, false);\n    } else {\n      path.pop();\n      this.refresh(path);\n    }\n  }\n\n  private fireNoPath(missingId: string) {\n    const item = this.getMenuItem();\n\n    const details = {\n      item: item.id,\n      selection: '/' + this.selection.join('/'),\n      endpoint: item.endpoint,\n      path: missingId + '/' + this.pending.join('/') + document.location.search,\n    };\n\n    // remove any excess from our selection\n    const selection = this.selection.join('/');\n    selection.replace(details.path, '');\n    this.selection = selection.split('/');\n\n    this.fireCustomEvent(CustomEventType.NoPath, details);\n    this.pending = [];\n    this.requestUpdate('root');\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private loadItems(item: MenuItem, selectFirst = true) {\n    if (item && item.endpoint) {\n      item.loading = true;\n      this.httpComplete = fetchResults(item.endpoint).then(\n        (items: MenuItem[]) => {\n          // update our item level\n          items.forEach(subItem => {\n            subItem.level = item.level + 1;\n            // if we came with preset items, set the level for them accordingly\n            if (subItem.items) {\n              subItem.items.forEach(inlineItem => {\n                inlineItem.level = item.level + 2;\n                // inlineItem.parent = subItem;\n              });\n            }\n          });\n\n          item.items = items;\n          item.loading = false;\n          this.requestUpdate('root');\n          this.scrollSelectedIntoView();\n          if (this.pending && this.pending.length > 0) {\n            // auto select the next pending click\n            const nextId = this.pending.shift();\n            if (nextId && items.length > 0) {\n              const nextItem = findItem(items, nextId);\n              if (nextItem.item) {\n                this.handleItemClicked(null, nextItem.item);\n              } else {\n                this.fireNoPath(nextId);\n              }\n            }\n          } else {\n            // auto select the first item\n            if (\n              selectFirst &&\n              items.length > 0 &&\n              this.selection.length >= 1 &&\n              !item.inline\n            ) {\n              for (const item of items) {\n                if (!item.type) {\n                  this.handleItemClicked(null, item);\n                  break;\n                }\n              }\n            }\n          }\n        }\n      );\n    }\n  }\n\n  private handleItemClicked(\n    event: MouseEvent,\n    menuItem: MenuItem,\n    parent: MenuItem = null\n  ) {\n    if (parent && parent.inline) {\n      this.handleItemClicked(null, parent);\n    }\n\n    if (this.collapsed) {\n      this.collapsed = false;\n    }\n\n    if (event) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    if (menuItem.type == 'modax-button') {\n      this.fireCustomEvent(CustomEventType.ButtonClicked, {\n        title: menuItem.name,\n        href: menuItem.href,\n        on_submit: menuItem.on_submit,\n      });\n      return;\n    }\n\n    if (menuItem.trigger) {\n      new Function(menuItem.trigger)();\n    } else {\n      if (menuItem.level === 0) {\n        /* this.expanding = menuItem.id;\n        window.setTimeout(() => {\n          this.expanding = null;\n        }, 60);\n        */\n      }\n\n      // update our selection\n      if (menuItem.level >= this.selection.length) {\n        this.selection.push(menuItem.vanity_id || menuItem.id);\n      } else {\n        this.selection.splice(\n          menuItem.level,\n          this.selection.length - menuItem.level,\n          menuItem.vanity_id || menuItem.id\n        );\n      }\n\n      if (menuItem.endpoint) {\n        this.loadItems(menuItem, !menuItem.href);\n        this.dispatchEvent(new Event('change'));\n      } else {\n        if (this.pending && this.pending.length > 0) {\n          // auto select the next pending click\n          const nextId = this.pending.shift();\n          const item = this.getMenuItem();\n          if (nextId && item && item.items && item.items.length > 0) {\n            const nextItem = findItem(item.items, nextId).item;\n            if (nextItem) {\n              this.handleItemClicked(null, nextItem);\n            } else {\n              this.fireNoPath(nextId);\n            }\n          } else {\n            this.fireNoPath(nextId);\n          }\n        } else {\n          this.dispatchEvent(new Event('change'));\n        }\n        this.requestUpdate('root');\n      }\n    }\n  }\n\n  public scrollSelectedIntoView() {\n    // makes sure we are scrolled into view\n    window.setTimeout(() => {\n      const eles = this.shadowRoot.querySelectorAll('.selected');\n      eles.forEach(ele => {\n        ele.scrollIntoView({ block: 'end', behavior: 'smooth' });\n      });\n    }, 0);\n  }\n\n  public clickItem(id: string): boolean {\n    const path = [...this.selection];\n    path.splice(path.length - 1, 1, id);\n    const item = this.getMenuItemForSelection(path);\n\n    if (item) {\n      this.handleItemClicked(null, item);\n      this.scrollSelectedIntoView();\n      return true;\n    }\n    return false;\n  }\n\n  public getMenuItem(): MenuItem {\n    return this.getMenuItemForSelection([...this.selection]);\n  }\n\n  public getMenuItemForSelection(selection: string[]) {\n    const path = [...selection];\n    let items = this.root.items;\n    let item = null;\n    while (path.length > 0) {\n      const step = path.splice(0, 1)[0];\n      if (items) {\n        item = findItem(items, step).item;\n        if (item) {\n          items = item.items;\n        } else {\n          break;\n        }\n      } else {\n        break;\n      }\n    }\n\n    return item;\n  }\n\n  public getSelection() {\n    return this.selection;\n  }\n\n  public setSelection(path: string[]) {\n    this.pending = [...path];\n    this.selection = [];\n\n    if (this.wait) {\n      this.wait = false;\n      this.loadItems(this.root);\n    }\n  }\n\n  public setSelectionPath(path: string) {\n    const asPath = path.split('/').filter(step => !!step);\n\n    // first try to click in the current space\n    const clicked = this.clickItem(asPath[asPath.length - 1]);\n\n    if (!clicked) {\n      this.wait = true;\n      this.setSelection(asPath);\n    }\n  }\n\n  public async setFocusedItem(path: string) {\n    const focusedPath = path.split('/').filter(step => !!step);\n\n    // if we don't match at the first level, we are a noop\n    if (focusedPath.length > 0) {\n      const rootItem = findItem(this.root.items, focusedPath[0]).item;\n      if (!rootItem) {\n        return;\n      }\n    }\n\n    const newPath = [];\n    let level = this.root;\n    while (focusedPath.length > 0) {\n      const nextId = focusedPath.shift();\n      if (nextId) {\n        if (!level.items) {\n          this.loadItems(level, false);\n          await this.httpComplete;\n        }\n\n        level = findItem(level.items, nextId).item;\n        if (!level) {\n          focusedPath.splice(0, focusedPath.length);\n        } else {\n          newPath.push(nextId);\n        }\n      }\n    }\n\n    this.selection = newPath;\n    this.requestUpdate('root');\n  }\n\n  private isSelected(menuItem: MenuItem) {\n    if (menuItem.level < this.selection.length) {\n      const selected =\n        this.selection[menuItem.level] == (menuItem.vanity_id || menuItem.id);\n      return selected;\n    }\n    return false;\n  }\n\n  private isExpanded(menuItem: MenuItem) {\n    const expanded = !!this.selection.find(\n      id => id === menuItem.vanity_id || menuItem.id\n    );\n    return expanded;\n  }\n\n  private renderMenuItem = (\n    menuItem: MenuItem,\n    parent: MenuItem = null\n  ): TemplateResult => {\n    if (menuItem.type === 'divider') {\n      return html`<div class=\"divider\"></div>`;\n    }\n\n    if (menuItem.type === 'space') {\n      return html`<div class=\"space\"></div>`;\n    }\n\n    if (menuItem.type === 'section' || menuItem.inline) {\n      return html`<div class=\"sub-section\">${menuItem.name}</div>`;\n    }\n\n    if (menuItem.type === 'modax-button') {\n      return html`<temba-button\n        name=${menuItem.name}\n        @click=${event => {\n          this.handleItemClicked(event, menuItem);\n        }}\n      />`;\n    }\n\n    const isSelected = this.isSelected(menuItem);\n    const isChildSelected =\n      isSelected && this.selection.length > menuItem.level + 1;\n\n    const icon = menuItem.icon\n      ? html`<temba-icon\n            size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n            name=\"${menuItem.icon}\"\n          ></temba-icon\n          >${menuItem.bubble\n            ? html`<div\n                style=\"background-color: ${menuItem.bubble}\"\n                class=\"bubble\"\n              ></div>`\n            : null}`\n      : null;\n\n    const collapsedIcon = menuItem.collapsed_icon\n      ? html`<temba-icon\n          size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n          name=\"${menuItem.collapsed_icon}\"\n          class=\"collapse-icon\"\n        ></temba-icon>`\n      : null;\n\n    const itemClasses = getClasses({\n      ['menu-' + menuItem.id]: true,\n      'child-selected': isChildSelected,\n      selected: isSelected,\n      item: true,\n      inline: menuItem.inline,\n      expanding: this.expanding && this.expanding === menuItem.id,\n      expanded: this.isExpanded(menuItem),\n      iconless: !icon && !collapsedIcon,\n    });\n\n    const item = html` <div\n        class=\"item-top ${isSelected ? 'selected' : null} \"\n      ></div>\n\n      <div\n        id=\"menu-${menuItem.id}\"\n        class=\"${itemClasses}\"\n        @click=${event => {\n          this.handleItemClicked(event, menuItem, parent);\n        }}\n      >\n        ${menuItem.level === 0\n          ? html`<temba-tip\n              style=\"display:flex;\"\n              text=\"${menuItem.name}\"\n              position=\"right\"\n              >${icon}</temba-tip\n            >`\n          : html`${icon}${collapsedIcon}`}\n\n        <div class=\"details\" style=\"flex-grow:1;display:flex\">\n          <div\n            class=\"name\"\n            style=\"flex-grow:1; flex-shrink:0; white-space: ${this.wraps\n              ? 'normal'\n              : 'nowrap'};\"\n          >\n            ${menuItem.name}\n          </div>\n          ${menuItem.level > 0\n            ? menuItem.inline\n              ? html`<temba-icon\n                  name=\"chevron-${isSelected || isChildSelected\n                    ? 'up'\n                    : 'down'}\"\n                ></temba-icon>`\n              : html`${menuItem.count || menuItem.count == 0\n                  ? html`\n                      <div class=\"count\">\n                        ${menuItem.count.toLocaleString()}\n                      </div>\n                    `\n                  : html`<div class=\"count\"></div>`}`\n            : null}\n        </div>\n        <div class=\"right\"></div>\n      </div>\n\n      <div class=\"item-bottom ${isSelected ? 'selected' : null}\"></div>`;\n\n    return item;\n  };\n\n  public render(): TemplateResult {\n    if (!this.root || !this.root.items) {\n      return html`<temba-loading\n        units=\"3\"\n        size=\"10\"\n        direction=\"column\"\n        style=\"margin:1em;margin-right:0em\"\n      />`;\n    }\n\n    let items = this.root.items || [];\n    const levels = [];\n\n    levels.push(\n      html`<div class=\"level level-0 ${this.submenu ? 'hidden' : ''}\">\n        <div class=\"top\"></div>\n\n        ${items\n          .filter(item => !item.bottom)\n          .map((item: MenuItem) => {\n            return this.renderMenuItem(item);\n          })}\n\n        <div class=\"empty\"></div>\n        ${items\n          .filter(item => !!item.bottom)\n          .map((item: MenuItem) => {\n            return this.renderMenuItem(item);\n          })}\n        <div class=\"bottom\"></div>\n      </div>`\n    );\n\n    this.selection.forEach((id, index) => {\n      const selected = findItem(items, id).item;\n\n      let collapsed = false;\n      if (selected) {\n        items = selected.items;\n        const itemState = this.getMenuItemState(selected.id);\n        // users set an explicit collapse state\n        if (itemState.collapsed) {\n          collapsed = itemState.collapsed === 'collapsed';\n        }\n        // otherwise pick a default collapse state\n        else {\n          if (this.selection.length > selected.level + 2) {\n            collapsed = false;\n          }\n        }\n      } else {\n        items = null;\n      }\n\n      if (items && items.length > 0 && !selected.inline) {\n        levels.push(\n          html`<div\n            class=\"${getClasses({\n              level: true,\n              ['level-' + (index + 1)]: true,\n              collapsed,\n            })}\"\n          >\n            ${!this.submenu\n              ? html`<div class=\"section\">${selected.name}</div>`\n              : null}\n            ${items.map((item: MenuItem) => {\n              if (item.inline && item.items) {\n                return html`${this.renderMenuItem(item)}\n                  <div class=\"inline-children\">\n                    ${(item.items || []).map((child: MenuItem) => {\n                      return this.renderMenuItem(child, item);\n                    })}\n                  </div>`;\n              }\n              return this.renderMenuItem(item);\n            })}\n          </div>`\n        );\n      }\n    });\n\n    const menu = html`<div\n      class=\"${getClasses({\n        root: true,\n        'fully-collapsed': this.collapsed,\n      })}\"\n    >\n      ${levels}\n    </div>`;\n    return html`${menu}`;\n  }\n}\n"]}

package/out-tsc/test/temba-contact-history.test.js

@@ -46,9 +46,9 @@ describe('temba-contact-history', () => {
         // we should have scrolled to the bottom
         const events = history.shadowRoot.querySelector('.events');
         const top = events.scrollHeight - events.getBoundingClientRect().height;
-        expect(top).to.equal(539);
+        expect(top).to.equal(533);
         // make sure we actually scrolled to there
-        expect(events.scrollTop).to.equal(top - 4);
+        expect(events.scrollTop).to.equal(top);
         await assertScreenshot('contacts/history', getHistoryClip(history));
     });
     it('expands event groups', async () => {

package/out-tsc/test/temba-contact-history.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"temba-contact-history.test.js","sourceRoot":"","sources":["../../test/temba-contact-history.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, assert, expect } from '@open-wc/testing';\nimport sinon from 'sinon';\nimport { ContactHistory } from '../src/contacts/ContactHistory';\nimport { stubbable } from '../src/utils';\nimport {\n  assertScreenshot,\n  getClip,\n  getHTML,\n  mockGET,\n} from '../test/utils.test';\nimport './utils.test';\n\nexport const createHistory = async (def: string) => {\n  const parentNode = document.createElement('div');\n  parentNode.setAttribute(\n    'style',\n    'width: 500px;height:750px;display:flex;flex-direction:column;flex-grow:1;min-height:0;'\n  );\n  const history = (await fixture(def, { parentNode })) as ContactHistory;\n\n  // let history fetch start and wait for it\n  await waitFor(0);\n  await history.httpComplete;\n\n  // wait for scroll update\n  await waitFor(0);\n  await history.httpComplete;\n\n  return history;\n};\n\nconst getHistoryHTML = (attrs: any = {} as any) =>\n  // attrs = \"min-height:0;display:flex;flex-grow:1;flex-direction:column\";\n  getHTML('temba-contact-history', attrs);\n\nconst getHistoryClip = (ele: ContactHistory) => {\n  const clip = getClip(ele);\n  clip.height = Math.min(clip.height, 750);\n  clip.bottom = clip.top + clip.height;\n  return clip;\n};\n\n// stub our current date for consistent screenshots\nsinon.stub(stubbable, 'getCurrentDate').callsFake(() => {\n  return new Date('2021-03-31T00:00:00.000-00:00');\n});\n\ndescribe('temba-contact-history', () => {\n  beforeEach(() => {\n    mockGET(\n      /\\/contact\\/history\\/1234\\/.*/,\n      '/test-assets/contacts/history.json'\n    );\n\n    mockGET(\n      /\\/api\\/v2\\/tickets\\.json\\?contact=1234/,\n      '/test-assets/api/tickets.json'\n    );\n  });\n\n  it('can be created', async () => {\n    const history = await createHistory(getHistoryHTML());\n    assert.instanceOf(history, ContactHistory);\n  });\n\n  it('renders history', async () => {\n    const history = await createHistory(\n      getHistoryHTML({\n        uuid: '1234',\n      })\n    );\n\n    await waitFor(500);\n\n    // we should have scrolled to the bottom\n    const events = history.shadowRoot.querySelector('.events');\n    const top = events.scrollHeight - events.getBoundingClientRect().height;\n\n    expect(top).to.equal(539);\n\n    // make sure we actually scrolled to there\n    expect(events.scrollTop).to.equal(top - 4);\n\n    await assertScreenshot('contacts/history', getHistoryClip(history));\n  });\n\n  it('expands event groups', async () => {\n    const history = await createHistory(\n      getHistoryHTML({\n        uuid: '1234',\n      })\n    );\n\n    // our groups with collapsed events\n    const groups = [3, 5, 7];\n    for (const idx of groups) {\n      const group = history.shadowRoot.querySelector(\n        `.event-count[data-group-index='${idx}']`\n      ) as HTMLDivElement;\n      group.click();\n    }\n\n    await waitFor(500);\n\n    await assertScreenshot(\n      'contacts/history-expanded',\n      getHistoryClip(history)\n    );\n  });\n});\n"]}
+{"version":3,"file":"temba-contact-history.test.js","sourceRoot":"","sources":["../../test/temba-contact-history.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, assert, expect } from '@open-wc/testing';\nimport sinon from 'sinon';\nimport { ContactHistory } from '../src/contacts/ContactHistory';\nimport { stubbable } from '../src/utils';\nimport {\n  assertScreenshot,\n  getClip,\n  getHTML,\n  mockGET,\n} from '../test/utils.test';\nimport './utils.test';\n\nexport const createHistory = async (def: string) => {\n  const parentNode = document.createElement('div');\n  parentNode.setAttribute(\n    'style',\n    'width: 500px;height:750px;display:flex;flex-direction:column;flex-grow:1;min-height:0;'\n  );\n  const history = (await fixture(def, { parentNode })) as ContactHistory;\n\n  // let history fetch start and wait for it\n  await waitFor(0);\n  await history.httpComplete;\n\n  // wait for scroll update\n  await waitFor(0);\n  await history.httpComplete;\n\n  return history;\n};\n\nconst getHistoryHTML = (attrs: any = {} as any) =>\n  // attrs = \"min-height:0;display:flex;flex-grow:1;flex-direction:column\";\n  getHTML('temba-contact-history', attrs);\n\nconst getHistoryClip = (ele: ContactHistory) => {\n  const clip = getClip(ele);\n  clip.height = Math.min(clip.height, 750);\n  clip.bottom = clip.top + clip.height;\n  return clip;\n};\n\n// stub our current date for consistent screenshots\nsinon.stub(stubbable, 'getCurrentDate').callsFake(() => {\n  return new Date('2021-03-31T00:00:00.000-00:00');\n});\n\ndescribe('temba-contact-history', () => {\n  beforeEach(() => {\n    mockGET(\n      /\\/contact\\/history\\/1234\\/.*/,\n      '/test-assets/contacts/history.json'\n    );\n\n    mockGET(\n      /\\/api\\/v2\\/tickets\\.json\\?contact=1234/,\n      '/test-assets/api/tickets.json'\n    );\n  });\n\n  it('can be created', async () => {\n    const history = await createHistory(getHistoryHTML());\n    assert.instanceOf(history, ContactHistory);\n  });\n\n  it('renders history', async () => {\n    const history = await createHistory(\n      getHistoryHTML({\n        uuid: '1234',\n      })\n    );\n\n    await waitFor(500);\n\n    // we should have scrolled to the bottom\n    const events = history.shadowRoot.querySelector('.events');\n    const top = events.scrollHeight - events.getBoundingClientRect().height;\n\n    expect(top).to.equal(533);\n\n    // make sure we actually scrolled to there\n    expect(events.scrollTop).to.equal(top);\n\n    await assertScreenshot('contacts/history', getHistoryClip(history));\n  });\n\n  it('expands event groups', async () => {\n    const history = await createHistory(\n      getHistoryHTML({\n        uuid: '1234',\n      })\n    );\n\n    // our groups with collapsed events\n    const groups = [3, 5, 7];\n    for (const idx of groups) {\n      const group = history.shadowRoot.querySelector(\n        `.event-count[data-group-index='${idx}']`\n      ) as HTMLDivElement;\n      group.click();\n    }\n\n    await waitFor(500);\n\n    await assertScreenshot(\n      'contacts/history-expanded',\n      getHistoryClip(history)\n    );\n  });\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.26.2",
+  "version": "0.26.5",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",
@@ -29,6 +29,7 @@
     "version": "yarn run build && auto-changelog -p && git add CHANGELOG.md"
   },
   "dependencies": {
+    "flatpickr": "4.6.13",
     "flru": "^1.0.2",
     "geojson": "^0.5.0",
     "highlight.js": "^10.7.1",

package/src/list/TembaMenu.ts

@@ -21,6 +21,7 @@ export interface MenuItem {
   inline?: boolean;
   type?: string;
   on_submit?: string;
+  bubble?: string;
 }
 
 interface MenuItemState {
@@ -55,6 +56,18 @@ export class TembaMenu extends RapidElement {
         --options-block-shadow: none;
       }
 
+      .bubble {
+        width: 8px;
+        height: 8px;
+        left: 14px;
+        bottom: -1px;
+        z-index: 10000;
+        border-radius: 99px;
+        border: 1px solid rgb(255, 255, 255);
+        position: relative;
+        margin-top: -10px;
+      }
+
       .section {
         font-size: 1.5em;
         margin-bottom: 0.2em;
@@ -158,7 +171,6 @@ export class TembaMenu extends RapidElement {
         margin-top: 0.1em;
         border-radius: var(--curvature);
         display: flex;
-
         min-width: 12em;
         max-width: 12em;
       }
@@ -248,7 +260,7 @@ export class TembaMenu extends RapidElement {
 
       .level-1 {
         transition: opacity 100ms linear, margin 200ms linear;
-        overflow-y: auto;
+        overflow-y: scroll;
         z-index: 1500;
       }
 
@@ -359,6 +371,10 @@ export class TembaMenu extends RapidElement {
         min-height: 1px;
       }
 
+      .space {
+        margin: 0.5em;
+      }
+
       .collapsed .divider {
         height: 0;
         margin: 0;
@@ -436,6 +452,16 @@ export class TembaMenu extends RapidElement {
     super();
   }
 
+  public setBubble(id: string, color: string) {
+    const found = findItem(this.root.items, id);
+    if (found && found.item) {
+      found.item.bubble = color;
+      this.requestUpdate('root');
+      return true;
+    }
+    return false;
+  }
+
   private getMenuItemState(id: string): MenuItemState {
     let itemState = {};
     if (id) {
@@ -587,7 +613,7 @@ export class TembaMenu extends RapidElement {
     }
 
     if (menuItem.trigger) {
-      window[menuItem.trigger]();
+      new Function(menuItem.trigger)();
     } else {
       if (menuItem.level === 0) {
         /* this.expanding = menuItem.id;
@@ -766,6 +792,10 @@ export class TembaMenu extends RapidElement {
       return html`<div class="divider"></div>`;
     }
 
+    if (menuItem.type === 'space') {
+      return html`<div class="space"></div>`;
+    }
+
     if (menuItem.type === 'section' || menuItem.inline) {
       return html`<div class="sub-section">${menuItem.name}</div>`;
     }
@@ -785,9 +815,15 @@ export class TembaMenu extends RapidElement {
 
     const icon = menuItem.icon
       ? html`<temba-icon
-          size="${menuItem.level === 0 ? '1.5' : '1'}"
-          name="${menuItem.icon}"
-        ></temba-icon>`
+            size="${menuItem.level === 0 ? '1.5' : '1'}"
+            name="${menuItem.icon}"
+          ></temba-icon
+          >${menuItem.bubble
+            ? html`<div
+                style="background-color: ${menuItem.bubble}"
+                class="bubble"
+              ></div>`
+            : null}`
       : null;
 
     const collapsedIcon = menuItem.collapsed_icon
@@ -929,10 +965,10 @@ export class TembaMenu extends RapidElement {
               ? html`<div class="section">${selected.name}</div>`
               : null}
             ${items.map((item: MenuItem) => {
-              if (item.inline) {
+              if (item.inline && item.items) {
                 return html`${this.renderMenuItem(item)}
                   <div class="inline-children">
-                    ${item.items.map((child: MenuItem) => {
+                    ${(item.items || []).map((child: MenuItem) => {
                       return this.renderMenuItem(child, item);
                     })}
                   </div>`;
@@ -945,7 +981,10 @@ export class TembaMenu extends RapidElement {
     });
 
     const menu = html`<div
-      class="root ${this.collapsed ? 'fully-collapsed' : ''}"
+      class="${getClasses({
+        root: true,
+        'fully-collapsed': this.collapsed,
+      })}"
     >
       ${levels}
     </div>`;

package/test/temba-contact-history.test.ts

@@ -76,10 +76,10 @@ describe('temba-contact-history', () => {
     const events = history.shadowRoot.querySelector('.events');
     const top = events.scrollHeight - events.getBoundingClientRect().height;
 
-    expect(top).to.equal(539);
+    expect(top).to.equal(533);
 
     // make sure we actually scrolled to there
-    expect(events.scrollTop).to.equal(top - 4);
+    expect(events.scrollTop).to.equal(top);
 
     await assertScreenshot('contacts/history', getHistoryClip(history));
   });

package/test-assets/style.css

@@ -17,7 +17,7 @@ html input {
 html {
   --transition-speed: 0ms !important;
   --input-caret: transparent !important;
-  --font-family: 'Roboto';
+  --font-family: 'Arial';
   --primary-rgb: 35, 135, 202;
   --secondary-rgb: 140, 51, 140;
   --tertiary-rgb: 135, 202, 35;