@nyaruka/temba-components 0.38.0 → 0.39.0

package/CHANGELOG.md

@@ -4,8 +4,14 @@ 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.39.0](https://github.com/nyaruka/temba-components/compare/v0.38.0...v0.39.0)
+
+- Don't fire menu change events until pending selection is complete [`#257`](https://github.com/nyaruka/temba-components/pull/257)
+
 #### [v0.38.0](https://github.com/nyaruka/temba-components/compare/v0.37.1...v0.38.0)
 
+> 26 January 2023
+
 - Bump ua-parser-js from 1.0.32 to 1.0.33 [`#253`](https://github.com/nyaruka/temba-components/pull/253)
 - Add avatar and popup support to menu [`#255`](https://github.com/nyaruka/temba-components/pull/255)
 

package/dist/{86fcf5ab.js → 9ac0723e.js}

@@ -3962,7 +3962,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
             </div>
           </div>
         </temba-dropdown>
-      `:a}}setBubble(t,e){const i=Qa(this.root.items,t);return!(!i||!i.item)&&(i.item.bubble=e,this.requestUpdate("root"),!0)}getMenuItemState(t){let e={};return t&&(e=this.state[t],e||(e={},this.state[t]=e)),e}updated(t){t.has("value")&&this.setSelection((this.value||"").split("/")),t.has("submenu")&&!t.has("value")&&this.setSelection([this.submenu]),t.has("endpoint")&&(this.root={level:-1,endpoint:this.endpoint},this.wait||this.loadItems(this.root),this.fireCustomEvent(Ft.Ready))}reset(){this.loadItems(this.root)}refresh(t=null){t||(t=[...this.selection]);const e=this.getMenuItemForSelection(t);e&&(e.endpoint?this.loadItems(e,!1):(t.pop(),this.refresh(t)))}fireNoPath(t){const e=this.getMenuItem();if(e){const i={item:e.id,selection:"/"+this.selection.join("/"),endpoint:e.endpoint,path:t+"/"+this.pending.join("/")+document.location.search},n=this.selection.join("/");n.replace(i.path,""),this.selection=n.split("/"),this.fireCustomEvent(Ft.NoPath,i),this.pending=[],this.requestUpdate("root")}}loadItems(t,e=!0){t&&t.endpoint&&(t.loading=!0,this.httpComplete=wt(t.endpoint).then((i=>{if(i.forEach((e=>{e.level=t.level+1,e.items&&e.items.forEach((e=>{e.level=t.level+2}))})),t.items=i,t.loading=!1,this.requestUpdate("root"),this.scrollSelectedIntoView(),this.pending&&this.pending.length>0){const t=this.pending.shift();if(t&&i.length>0){const e=Qa(i,t);e.item?this.handleItemClicked(null,e.item):this.fireNoPath(t)}}else if(e&&i.length>0&&this.selection.length>=1&&!t.inline)for(const t of i)if(!t.type){this.handleItemClicked(null,t);break}})))}handleItemClicked(t,e,i=null){if(this.fireCustomEvent(Ft.ButtonClicked,{item:e,parent:i}),!(i&&i.popup||e.popup))if(i&&i.inline&&this.handleItemClicked(null,i),this.collapsed&&(this.collapsed=!1),t&&(t.preventDefault(),t.stopPropagation()),e.trigger)new Function(e.trigger)();else{if(e.level,e.level>=this.selection.length?this.selection.push(e.vanity_id||e.id):this.selection.splice(e.level,this.selection.length-e.level,e.vanity_id||e.id),e.endpoint)this.loadItems(e,!0);else{if(this.pending&&this.pending.length>0){const t=this.pending.shift(),e=this.getMenuItem();if(t&&e&&e.items&&e.items.length>0){const i=Qa(e.items,t).item;i?this.handleItemClicked(null,i):this.fireNoPath(t)}else this.fireNoPath(t)}this.requestUpdate("root")}this.dispatchEvent(new Event("change"))}}scrollSelectedIntoView(){window.setTimeout((()=>{this.shadowRoot.querySelectorAll(".selected").forEach((t=>{t.scrollIntoView({block:"end",behavior:"smooth"})}))}),0)}clickItem(t){const e=[...this.selection];e.splice(e.length-1,1,t);const i=this.getMenuItemForSelection(e);return!!i&&(this.handleItemClicked(null,i),this.scrollSelectedIntoView(),!0)}getMenuItem(){return this.getMenuItemForSelection([...this.selection])}getMenuItemForSelection(t){const e=[...t];let i=this.root.items,n=null;for(;e.length>0;){const t=e.splice(0,1)[0];if(!i)break;if(n=Qa(i,t).item,!n)break;i=n.items}return n}getSelection(){return this.selection}setSelection(t){this.pending=[...t],this.selection=[],this.wait&&(this.wait=!1,this.loadItems(this.root))}setSelectionPath(t){const e=t.split("/").filter((t=>!!t));this.clickItem(e[e.length-1])||(this.wait=!0,this.setSelection(e))}handleExpand(){this.collapsed=!1}handleCollapse(){this.collapsed=!0}async setFocusedItem(t){const e=t.split("/").filter((t=>!!t));if(e.length>0){if(!Qa(this.root.items,e[0]).item)return}const i=[];let n=this.root;for(;e.length>0;){const t=e.shift();t&&(n.items||(this.loadItems(n,!1),await this.httpComplete),n=Qa(n.items,t).item,n?i.push(t):e.splice(0,e.length))}this.selection=i,this.requestUpdate("root")}isSelected(t){if(t.level<this.selection.length){return this.selection[t.level]==(t.vanity_id||t.id)}return!1}isExpanded(t){return!!this.selection.find((e=>e===t.vanity_id||t.id))}renderAvatar(t){const e=(new Xa).hex(t);let i=t.indexOf(" ")+1;i<1&&(i=t.length>1?1:0);let n=t.substring(0,1)+t.substring(i,i+1);return n=n.toUpperCase(),D`
+      `:a}}setBubble(t,e){const i=Qa(this.root.items,t);return!(!i||!i.item)&&(i.item.bubble=e,this.requestUpdate("root"),!0)}getMenuItemState(t){let e={};return t&&(e=this.state[t],e||(e={},this.state[t]=e)),e}updated(t){t.has("value")&&this.setSelection((this.value||"").split("/")),t.has("submenu")&&!t.has("value")&&this.setSelection([this.submenu]),t.has("endpoint")&&(this.root={level:-1,endpoint:this.endpoint},this.wait||this.loadItems(this.root),this.fireCustomEvent(Ft.Ready))}reset(){this.loadItems(this.root)}refresh(t=null){t||(t=[...this.selection]);const e=this.getMenuItemForSelection(t);e&&(e.endpoint?this.loadItems(e,!1):(t.pop(),this.refresh(t)))}fireNoPath(t){const e=this.getMenuItem();if(e){const i={item:e.id,selection:"/"+this.selection.join("/"),endpoint:e.endpoint,path:t+"/"+this.pending.join("/")+document.location.search},n=this.selection.join("/");n.replace(i.path,""),this.selection=n.split("/"),this.fireCustomEvent(Ft.NoPath,i),this.pending=[],this.requestUpdate("root")}}loadItems(t,e=!0){t&&t.endpoint&&(t.loading=!0,this.httpComplete=wt(t.endpoint).then((i=>{if(i.forEach((e=>{e.level=t.level+1,e.items&&e.items.forEach((e=>{e.level=t.level+2}))})),t.items=i,t.loading=!1,this.requestUpdate("root"),this.scrollSelectedIntoView(),this.pending&&this.pending.length>0){const t=this.pending.shift();if(t&&i.length>0){const e=Qa(i,t);e.item?this.handleItemClicked(null,e.item):this.fireNoPath(t)}}else if(e&&i.length>0&&this.selection.length>=1&&!t.inline)for(const t of i)if(!t.type){this.handleItemClicked(null,t);break}})))}handleItemClicked(t,e,i=null){if(this.fireCustomEvent(Ft.ButtonClicked,{item:e,parent:i}),!(i&&i.popup||e.popup))if(i&&i.inline&&this.handleItemClicked(null,i),this.collapsed&&(this.collapsed=!1),t&&(t.preventDefault(),t.stopPropagation()),e.trigger)new Function(e.trigger)();else{if(e.level,e.level>=this.selection.length?this.selection.push(e.vanity_id||e.id):this.selection.splice(e.level,this.selection.length-e.level,e.vanity_id||e.id),e.endpoint){if(this.loadItems(e,0==this.pending.length),!e.href)return}else{if(this.pending&&this.pending.length>0){const t=this.pending.shift(),e=this.getMenuItem();if(t&&e&&e.items&&e.items.length>0){const i=Qa(e.items,t).item;return i?void this.handleItemClicked(null,i):(this.fireNoPath(t),void this.requestUpdate("root"))}return this.fireNoPath(t),void this.requestUpdate("root")}this.requestUpdate("root")}(0==this.pending.length||this.getMenuItem().href)&&this.dispatchEvent(new Event("change"))}}scrollSelectedIntoView(){window.setTimeout((()=>{this.shadowRoot.querySelectorAll(".selected").forEach((t=>{t.scrollIntoView({block:"end",behavior:"smooth"})}))}),0)}clickItem(t){const e=[...this.selection];e.splice(e.length-1,1,t);const i=this.getMenuItemForSelection(e);return!!i&&(this.handleItemClicked(null,i),this.scrollSelectedIntoView(),!0)}getMenuItem(){return this.getMenuItemForSelection([...this.selection])}getMenuItemForSelection(t){const e=[...t];let i=this.root.items,n=null;for(;e.length>0;){const t=e.splice(0,1)[0];if(!i)break;if(n=Qa(i,t).item,!n)break;i=n.items}return n}getSelection(){return this.selection}setSelection(t){this.pending=[...t],this.selection=[],this.wait&&(this.wait=!1,this.loadItems(this.root))}setSelectionPath(t){const e=t.split("/").filter((t=>!!t));this.clickItem(e[e.length-1])||(this.wait=!0,this.setSelection(e))}handleExpand(){this.collapsed=!1}handleCollapse(){this.collapsed=!0}async setFocusedItem(t){const e=t.split("/").filter((t=>!!t));if(e.length>0){if(!Qa(this.root.items,e[0]).item)return}const i=[];let n=this.root;for(;e.length>0;){const t=e.shift();t&&(n.items||(this.loadItems(n,!1),await this.httpComplete),n=Qa(n.items,t).item,n?i.push(t):e.splice(0,e.length))}this.selection=i,this.requestUpdate("root")}isSelected(t){if(t.level<this.selection.length){return this.selection[t.level]==(t.vanity_id||t.id)}return!1}isExpanded(t){return!!this.selection.find((e=>e===t.vanity_id||t.id))}renderAvatar(t){const e=(new Xa).hex(t);let i=t.indexOf(" ")+1;i<1&&(i=t.length>1?1:0);let n=t.substring(0,1)+t.substring(i,i+1);return n=n.toUpperCase(),D`
       <div
         style="border: 0px solid red; display:flex; flex-direction: column; align-items:center;"
       >

package/dist/index.js

@@ -3962,7 +3962,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
             </div>
           </div>
         </temba-dropdown>
-      `:a}}setBubble(t,e){const i=Qa(this.root.items,t);return!(!i||!i.item)&&(i.item.bubble=e,this.requestUpdate("root"),!0)}getMenuItemState(t){let e={};return t&&(e=this.state[t],e||(e={},this.state[t]=e)),e}updated(t){t.has("value")&&this.setSelection((this.value||"").split("/")),t.has("submenu")&&!t.has("value")&&this.setSelection([this.submenu]),t.has("endpoint")&&(this.root={level:-1,endpoint:this.endpoint},this.wait||this.loadItems(this.root),this.fireCustomEvent(Ft.Ready))}reset(){this.loadItems(this.root)}refresh(t=null){t||(t=[...this.selection]);const e=this.getMenuItemForSelection(t);e&&(e.endpoint?this.loadItems(e,!1):(t.pop(),this.refresh(t)))}fireNoPath(t){const e=this.getMenuItem();if(e){const i={item:e.id,selection:"/"+this.selection.join("/"),endpoint:e.endpoint,path:t+"/"+this.pending.join("/")+document.location.search},n=this.selection.join("/");n.replace(i.path,""),this.selection=n.split("/"),this.fireCustomEvent(Ft.NoPath,i),this.pending=[],this.requestUpdate("root")}}loadItems(t,e=!0){t&&t.endpoint&&(t.loading=!0,this.httpComplete=wt(t.endpoint).then((i=>{if(i.forEach((e=>{e.level=t.level+1,e.items&&e.items.forEach((e=>{e.level=t.level+2}))})),t.items=i,t.loading=!1,this.requestUpdate("root"),this.scrollSelectedIntoView(),this.pending&&this.pending.length>0){const t=this.pending.shift();if(t&&i.length>0){const e=Qa(i,t);e.item?this.handleItemClicked(null,e.item):this.fireNoPath(t)}}else if(e&&i.length>0&&this.selection.length>=1&&!t.inline)for(const t of i)if(!t.type){this.handleItemClicked(null,t);break}})))}handleItemClicked(t,e,i=null){if(this.fireCustomEvent(Ft.ButtonClicked,{item:e,parent:i}),!(i&&i.popup||e.popup))if(i&&i.inline&&this.handleItemClicked(null,i),this.collapsed&&(this.collapsed=!1),t&&(t.preventDefault(),t.stopPropagation()),e.trigger)new Function(e.trigger)();else{if(e.level,e.level>=this.selection.length?this.selection.push(e.vanity_id||e.id):this.selection.splice(e.level,this.selection.length-e.level,e.vanity_id||e.id),e.endpoint)this.loadItems(e,!0);else{if(this.pending&&this.pending.length>0){const t=this.pending.shift(),e=this.getMenuItem();if(t&&e&&e.items&&e.items.length>0){const i=Qa(e.items,t).item;i?this.handleItemClicked(null,i):this.fireNoPath(t)}else this.fireNoPath(t)}this.requestUpdate("root")}this.dispatchEvent(new Event("change"))}}scrollSelectedIntoView(){window.setTimeout((()=>{this.shadowRoot.querySelectorAll(".selected").forEach((t=>{t.scrollIntoView({block:"end",behavior:"smooth"})}))}),0)}clickItem(t){const e=[...this.selection];e.splice(e.length-1,1,t);const i=this.getMenuItemForSelection(e);return!!i&&(this.handleItemClicked(null,i),this.scrollSelectedIntoView(),!0)}getMenuItem(){return this.getMenuItemForSelection([...this.selection])}getMenuItemForSelection(t){const e=[...t];let i=this.root.items,n=null;for(;e.length>0;){const t=e.splice(0,1)[0];if(!i)break;if(n=Qa(i,t).item,!n)break;i=n.items}return n}getSelection(){return this.selection}setSelection(t){this.pending=[...t],this.selection=[],this.wait&&(this.wait=!1,this.loadItems(this.root))}setSelectionPath(t){const e=t.split("/").filter((t=>!!t));this.clickItem(e[e.length-1])||(this.wait=!0,this.setSelection(e))}handleExpand(){this.collapsed=!1}handleCollapse(){this.collapsed=!0}async setFocusedItem(t){const e=t.split("/").filter((t=>!!t));if(e.length>0){if(!Qa(this.root.items,e[0]).item)return}const i=[];let n=this.root;for(;e.length>0;){const t=e.shift();t&&(n.items||(this.loadItems(n,!1),await this.httpComplete),n=Qa(n.items,t).item,n?i.push(t):e.splice(0,e.length))}this.selection=i,this.requestUpdate("root")}isSelected(t){if(t.level<this.selection.length){return this.selection[t.level]==(t.vanity_id||t.id)}return!1}isExpanded(t){return!!this.selection.find((e=>e===t.vanity_id||t.id))}renderAvatar(t){const e=(new Xa).hex(t);let i=t.indexOf(" ")+1;i<1&&(i=t.length>1?1:0);let n=t.substring(0,1)+t.substring(i,i+1);return n=n.toUpperCase(),D`
+      `:a}}setBubble(t,e){const i=Qa(this.root.items,t);return!(!i||!i.item)&&(i.item.bubble=e,this.requestUpdate("root"),!0)}getMenuItemState(t){let e={};return t&&(e=this.state[t],e||(e={},this.state[t]=e)),e}updated(t){t.has("value")&&this.setSelection((this.value||"").split("/")),t.has("submenu")&&!t.has("value")&&this.setSelection([this.submenu]),t.has("endpoint")&&(this.root={level:-1,endpoint:this.endpoint},this.wait||this.loadItems(this.root),this.fireCustomEvent(Ft.Ready))}reset(){this.loadItems(this.root)}refresh(t=null){t||(t=[...this.selection]);const e=this.getMenuItemForSelection(t);e&&(e.endpoint?this.loadItems(e,!1):(t.pop(),this.refresh(t)))}fireNoPath(t){const e=this.getMenuItem();if(e){const i={item:e.id,selection:"/"+this.selection.join("/"),endpoint:e.endpoint,path:t+"/"+this.pending.join("/")+document.location.search},n=this.selection.join("/");n.replace(i.path,""),this.selection=n.split("/"),this.fireCustomEvent(Ft.NoPath,i),this.pending=[],this.requestUpdate("root")}}loadItems(t,e=!0){t&&t.endpoint&&(t.loading=!0,this.httpComplete=wt(t.endpoint).then((i=>{if(i.forEach((e=>{e.level=t.level+1,e.items&&e.items.forEach((e=>{e.level=t.level+2}))})),t.items=i,t.loading=!1,this.requestUpdate("root"),this.scrollSelectedIntoView(),this.pending&&this.pending.length>0){const t=this.pending.shift();if(t&&i.length>0){const e=Qa(i,t);e.item?this.handleItemClicked(null,e.item):this.fireNoPath(t)}}else if(e&&i.length>0&&this.selection.length>=1&&!t.inline)for(const t of i)if(!t.type){this.handleItemClicked(null,t);break}})))}handleItemClicked(t,e,i=null){if(this.fireCustomEvent(Ft.ButtonClicked,{item:e,parent:i}),!(i&&i.popup||e.popup))if(i&&i.inline&&this.handleItemClicked(null,i),this.collapsed&&(this.collapsed=!1),t&&(t.preventDefault(),t.stopPropagation()),e.trigger)new Function(e.trigger)();else{if(e.level,e.level>=this.selection.length?this.selection.push(e.vanity_id||e.id):this.selection.splice(e.level,this.selection.length-e.level,e.vanity_id||e.id),e.endpoint){if(this.loadItems(e,0==this.pending.length),!e.href)return}else{if(this.pending&&this.pending.length>0){const t=this.pending.shift(),e=this.getMenuItem();if(t&&e&&e.items&&e.items.length>0){const i=Qa(e.items,t).item;return i?void this.handleItemClicked(null,i):(this.fireNoPath(t),void this.requestUpdate("root"))}return this.fireNoPath(t),void this.requestUpdate("root")}this.requestUpdate("root")}(0==this.pending.length||this.getMenuItem().href)&&this.dispatchEvent(new Event("change"))}}scrollSelectedIntoView(){window.setTimeout((()=>{this.shadowRoot.querySelectorAll(".selected").forEach((t=>{t.scrollIntoView({block:"end",behavior:"smooth"})}))}),0)}clickItem(t){const e=[...this.selection];e.splice(e.length-1,1,t);const i=this.getMenuItemForSelection(e);return!!i&&(this.handleItemClicked(null,i),this.scrollSelectedIntoView(),!0)}getMenuItem(){return this.getMenuItemForSelection([...this.selection])}getMenuItemForSelection(t){const e=[...t];let i=this.root.items,n=null;for(;e.length>0;){const t=e.splice(0,1)[0];if(!i)break;if(n=Qa(i,t).item,!n)break;i=n.items}return n}getSelection(){return this.selection}setSelection(t){this.pending=[...t],this.selection=[],this.wait&&(this.wait=!1,this.loadItems(this.root))}setSelectionPath(t){const e=t.split("/").filter((t=>!!t));this.clickItem(e[e.length-1])||(this.wait=!0,this.setSelection(e))}handleExpand(){this.collapsed=!1}handleCollapse(){this.collapsed=!0}async setFocusedItem(t){const e=t.split("/").filter((t=>!!t));if(e.length>0){if(!Qa(this.root.items,e[0]).item)return}const i=[];let n=this.root;for(;e.length>0;){const t=e.shift();t&&(n.items||(this.loadItems(n,!1),await this.httpComplete),n=Qa(n.items,t).item,n?i.push(t):e.splice(0,e.length))}this.selection=i,this.requestUpdate("root")}isSelected(t){if(t.level<this.selection.length){return this.selection[t.level]==(t.vanity_id||t.id)}return!1}isExpanded(t){return!!this.selection.find((e=>e===t.vanity_id||t.id))}renderAvatar(t){const e=(new Xa).hex(t);let i=t.indexOf(" ")+1;i<1&&(i=t.length>1?1:0);let n=t.substring(0,1)+t.substring(i,i+1);return n=n.toUpperCase(),D`
       <div
         style="border: 0px solid red; display:flex; flex-direction: column; align-items:center;"
       >

package/dist/sw.js

@@ -1,2 +1,2 @@
-if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const l=e=>o(e,i),f={module:{uri:i},exports:r,require:l};t[i]=Promise.all(n.map((e=>f[e]||l(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"86fcf5ab.js",revision:"bffe5ed2098bc98043f765bf5a0999dc"},{url:"templates/components-body.html",revision:"a048d9f630f0a788a95311da46eeaa28"},{url:"templates/components-head.html",revision:"04b274865a0414761c61ba927790dea2"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
+if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const l=e=>o(e,i),c={module:{uri:i},exports:r,require:l};t[i]=Promise.all(n.map((e=>c[e]||l(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"9ac0723e.js",revision:"fb9447c01bc44f0e5d14392d90614394"},{url:"templates/components-body.html",revision:"9dd9b0ff4467b05f60de06817c9a688c"},{url:"templates/components-head.html",revision:"67b4db9023b5b889146f73bf36cc84eb"}],{}),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/aa8a2ca81bcb888fff48648396a7a83b/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"86fcf5ab.js\",\n    \"revision\": \"bffe5ed2098bc98043f765bf5a0999dc\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"a048d9f630f0a788a95311da46eeaa28\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"04b274865a0414761c61ba927790dea2\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["self","skipWaiting","workbox_core_clientsClaim","workbox_precaching_precacheAndRoute","url","revision","workbox","registerRoute","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"0nBAwBAA,KAAKC,cAELC,EAAAA,eAQAC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,CAAE,GAEwBC,EAAAC,cAAC,IAAIC,EAAAA,gBAAgCC,EAAAA,wBAA2C,iBAGhFH,EAAAC,cAAC,iBAAkB,IAAIG,aAAiC"}
+{"version":3,"file":"sw.js","sources":["../../../../../tmp/8b0a5762cfabb38535d0e755a79035bd/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"9ac0723e.js\",\n    \"revision\": \"fb9447c01bc44f0e5d14392d90614394\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"9dd9b0ff4467b05f60de06817c9a688c\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"67b4db9023b5b889146f73bf36cc84eb\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["self","skipWaiting","workbox_core_clientsClaim","workbox_precaching_precacheAndRoute","url","revision","workbox","registerRoute","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"0nBAwBAA,KAAKC,cAELC,EAAAA,eAQAC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,CAAE,GAEwBC,EAAAC,cAAC,IAAIC,EAAAA,gBAAgCC,EAAAA,wBAA2C,iBAGhFH,EAAAC,cAAC,iBAAkB,IAAIG,aAAiC"}

package/dist/templates/components-body.html

@@ -1 +1 @@
-<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/86fcf5ab.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.38.0"</script>
+<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/9ac0723e.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.39.0"</script>

package/dist/templates/components-head.html

@@ -1 +1 @@
-<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/86fcf5ab.js" crossorigin="anonymous">
+<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/9ac0723e.js" crossorigin="anonymous">

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

@@ -769,7 +769,11 @@ export class TembaMenu extends RapidElement {
                 this.selection.splice(menuItem.level, this.selection.length - menuItem.level, menuItem.vanity_id || menuItem.id);
             }
             if (menuItem.endpoint) {
-                this.loadItems(menuItem, true);
+                this.loadItems(menuItem, this.pending.length == 0);
+                // make sure change events fire for events with hrefs
+                if (!menuItem.href) {
+                    return;
+                }
             }
             else {
                 if (this.pending && this.pending.length > 0) {
@@ -780,18 +784,25 @@ export class TembaMenu extends RapidElement {
                         const nextItem = findItem(item.items, nextId).item;
                         if (nextItem) {
                             this.handleItemClicked(null, nextItem);
+                            return;
                         }
                         else {
                             this.fireNoPath(nextId);
+                            this.requestUpdate('root');
+                            return;
                         }
                     }
                     else {
                         this.fireNoPath(nextId);
+                        this.requestUpdate('root');
+                        return;
                     }
                 }
                 this.requestUpdate('root');
             }
-            this.dispatchEvent(new Event('change'));
+            if (this.pending.length == 0 || this.getMenuItem().href) {
+                this.dispatchEvent(new Event('change'));
+            }
         }
     }
     scrollSelectedIntoView() {

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

@@ -1 +1 @@
-{"version":3,"file":"TembaMenu.js","sourceRoot":"","sources":["../../../src/list/TembaMenu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,SAAS,MAAM,YAAY,CAAC;AA8BnC,MAAM,QAAQ,GAAG,CACf,KAAiB,EACjB,EAAU,EACyB,EAAE;IACrC,MAAM,MAAM,GAAG,KAAK,IAAI,EAAE,CAAC;IAE3B,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,IAAc,EAAE,EAAE;QAChD,OAAO,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE;QACd,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QAC3B,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;KACxB;IAED,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC;AACnC,CAAC,CAAC;AAEF,MAAM,OAAO,SAAU,SAAQ,YAAY;IACzC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAocT,CAAC;IACJ,CAAC;IAgCD;QACE,KAAK,EAAE,CAAC;QA9BV,UAAK,GAAG,KAAK,CAAC;QAyBd,cAAS,GAAa,EAAE,CAAC;QACzB,YAAO,GAAa,EAAE,CAAC;QACvB,UAAK,GAAoC,EAAE,CAAC;QAmYpC,mBAAc,GAAG,CACvB,QAAkB,EAClB,SAAmB,IAAI,EACP,EAAE;YAClB,IAAI,QAAQ,CAAC,IAAI,KAAK,SAAS,EAAE;gBAC/B,OAAO,IAAI,CAAA,6BAA6B,CAAC;aAC1C;YAED,IAAI,QAAQ,CAAC,IAAI,KAAK,OAAO,EAAE;gBAC7B,OAAO,IAAI,CAAA,2BAA2B,CAAC;aACxC;YAED,IAAI,QAAQ,CAAC,IAAI,KAAK,SAAS,IAAI,QAAQ,CAAC,MAAM,EAAE;gBAClD,OAAO,IAAI,CAAA,4BAA4B,QAAQ,CAAC,IAAI,QAAQ,CAAC;aAC9D;YAED,IAAI,QAAQ,CAAC,IAAI,KAAK,cAAc,EAAE;gBACpC,OAAO,IAAI,CAAA;eACF,QAAQ,CAAC,IAAI;iBACX,KAAK,CAAC,EAAE;oBACf,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;gBAC1C,CAAC;SACA,CAAC;aACL;YAED,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;YAC7C,MAAM,eAAe,GACnB,UAAU,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC;YAE3D,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI;gBACtB,CAAC,CAAC,IAAI,CAAA;oBACQ,QAAQ,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;oBAClC,QAAQ,CAAC,IAAI;;aAEpB,QAAQ,CAAC,MAAM;oBAChB,CAAC,CAAC,IAAI,CAAA;2CACyB,QAAQ,CAAC,MAAM;;sBAEpC;oBACV,CAAC,CAAC,IAAI,EAAE;gBACd,CAAC,CAAC,IAAI,CAAC;YAET,MAAM,aAAa,GAAG,QAAQ,CAAC,cAAc;gBAC3C,CAAC,CAAC,IAAI,CAAA;kBACM,QAAQ,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;kBAClC,QAAQ,CAAC,cAAc;;uBAElB;gBACjB,CAAC,CAAC,IAAI,CAAC;YAET,MAAM,WAAW,GAAG,UAAU,CAAC;gBAC7B,CAAC,OAAO,GAAG,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI;gBAC7B,gBAAgB,EAAE,eAAe;gBACjC,QAAQ,EAAE,UAAU;gBACpB,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAC,MAAM,IAAI,QAAQ,CAAC,KAAK,KAAK,CAAC,CAAC;gBAChD,MAAM,EAAE,CAAC,CAAC,QAAQ,CAAC,MAAM;gBACzB,MAAM,EAAE,QAAQ,CAAC,MAAM;gBACvB,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,CAAC,EAAE;gBAC3D,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;gBACnC,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,IAAI,CAAC,QAAQ,CAAC,MAAM;aACtD,CAAC,CAAC;YAEH,IAAI,QAAQ,CAAC,MAAM,EAAE;gBACnB,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;aAC3C;YAED,MAAM,IAAI,GAAG,IAAI,CAAA;0BACK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI;;;;mBAIrC,QAAQ,CAAC,EAAE;iBACb,WAAW;iBACX,KAAK,CAAC,EAAE;gBACf,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;YAClD,CAAC;;UAEC,QAAQ,CAAC,KAAK,KAAK,CAAC;gBACpB,CAAC,CAAC,QAAQ,CAAC,MAAM;oBACf,CAAC,CAAC,IAAI;oBACN,CAAC,CAAC,IAAI,CAAA;;wBAEM,QAAQ,CAAC,IAAI;;mBAElB,IAAI;gBACP;gBACN,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,GAAG,aAAa,EAAE;;;;;8DAKqB,IAAI,CAAC,KAAK;gBAC1D,CAAC,CAAC,QAAQ;gBACV,CAAC,CAAC,QAAQ;;cAEV,QAAQ,CAAC,IAAI;;YAEf,QAAQ,CAAC,KAAK,GAAG,CAAC;gBAClB,CAAC,CAAC,QAAQ,CAAC,MAAM;oBACf,CAAC,CAAC,IAAI,CAAA;0BACM,UAAU,IAAI,eAAe;wBACnC,CAAC,CAAC,IAAI,CAAC,QAAQ;wBACf,CAAC,CAAC,IAAI,CAAC,UAAU;+BACN;oBACjB,CAAC,CAAC,IAAI,CAAA,GAAG,QAAQ,CAAC,KAAK,IAAI,QAAQ,CAAC,KAAK,IAAI,CAAC;wBAC1C,CAAC,CAAC,IAAI,CAAA;;0BAEE,QAAQ,CAAC,KAAK,CAAC,cAAc,EAAE;;qBAEpC;wBACH,CAAC,CAAC,IAAI,CAAA,2BAA2B,EAAE;gBACzC,CAAC,CAAC,IAAI;;;;;gCAKc,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,UAAU,CAAC;YAErE,IAAI,QAAQ,CAAC,KAAK,EAAE;gBAClB,OAAO,IAAI,CAAA;;+BAEc,IAAI;;;;;;gBAMnB,CAAC,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,KAAe,EAAE,EAAE;oBAC/C,KAAK,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC;oBACjC,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;gBAC9C,CAAC,CAAC;;;;OAIT,CAAC;aACH;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC;IAxgBF,CAAC;IAEM,SAAS,CAAC,EAAU,EAAE,KAAa;QACxC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAC5C,IAAI,KAAK,IAAI,KAAK,CAAC,IAAI,EAAE;YACvB,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YAC1B,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAC3B,OAAO,IAAI,CAAC;SACb;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAEO,gBAAgB,CAAC,EAAU;QACjC,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,IAAI,EAAE,EAAE;YACN,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YAC3B,IAAI,CAAC,SAAS,EAAE;gBACd,SAAS,GAAG,EAAE,CAAC;gBACf,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC;aAC5B;SACF;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAEM,OAAO,CAAC,OAAyB;QACtC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACxB,IAAI,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;SAClD;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACnD,IAAI,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;SACnC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAC3B,IAAI,CAAC,IAAI,GAAG;gBACV,KAAK,EAAE,CAAC,CAAC;gBACT,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC;YAEF,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;gBACd,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aAC3B;YAED,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;SAC7C;IACH,CAAC;IAEM,KAAK;QACV,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAEM,OAAO,CAAC,OAAiB,IAAI;QAClC,IAAI,CAAC,IAAI,EAAE;YACT,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;SAC5B;QAED,2CAA2C;QAC3C,MAAM,IAAI,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC;QAEhD,IAAI,IAAI,EAAE;YACR,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;aAC7B;iBAAM;gBACL,IAAI,CAAC,GAAG,EAAE,CAAC;gBACX,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;aACpB;SACF;IACH,CAAC;IAEO,UAAU,CAAC,SAAiB;QAClC,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAEhC,IAAI,IAAI,EAAE;YACR,MAAM,OAAO,GAAG;gBACd,IAAI,EAAE,IAAI,CAAC,EAAE;gBACb,SAAS,EAAE,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;gBACzC,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,IAAI,EACF,SAAS,GAAG,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM;aACtE,CAAC;YAEF,uCAAuC;YACvC,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC3C,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YACpC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAEtC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YACtD,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;YAClB,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;SAC5B;IACH,CAAC;IAED,gEAAgE;IACxD,SAAS,CAAC,IAAc,EAAE,WAAW,GAAG,IAAI;QAClD,IAAI,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE;YACzB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAClD,CAAC,KAAiB,EAAE,EAAE;gBACpB,wBAAwB;gBACxB,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;oBACtB,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;oBAC/B,mEAAmE;oBACnE,IAAI,OAAO,CAAC,KAAK,EAAE;wBACjB,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;4BACjC,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;4BAClC,+BAA+B;wBACjC,CAAC,CAAC,CAAC;qBACJ;gBACH,CAAC,CAAC,CAAC;gBAEH,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;gBACnB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;gBACrB,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;gBAC3B,IAAI,CAAC,sBAAsB,EAAE,CAAC;gBAC9B,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;oBAC3C,qCAAqC;oBACrC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;oBACpC,IAAI,MAAM,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;wBAC9B,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;wBACzC,IAAI,QAAQ,CAAC,IAAI,EAAE;4BACjB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;yBAC7C;6BAAM;4BACL,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;yBACzB;qBACF;iBACF;qBAAM;oBACL,6BAA6B;oBAC7B,IACE,WAAW;wBACX,KAAK,CAAC,MAAM,GAAG,CAAC;wBAChB,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC;wBAC1B,CAAC,IAAI,CAAC,MAAM,EACZ;wBACA,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;4BACxB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;gCACd,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;gCACnC,MAAM;6BACP;yBACF;qBACF;iBACF;YACH,CAAC,CACF,CAAC;SACH;IACH,CAAC;IAEO,iBAAiB,CACvB,KAAiB,EACjB,QAAkB,EAClB,SAAmB,IAAI;QAEvB,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,aAAa,EAAE;YAClD,IAAI,EAAE,QAAQ;YACd,MAAM;SACP,CAAC,CAAC;QACH,IAAI,MAAM,IAAI,MAAM,CAAC,KAAK,EAAE;YAC1B,OAAO;SACR;QAED,IAAI,QAAQ,CAAC,KAAK,EAAE;YAClB,OAAO;SACR;QAED,IAAI,MAAM,IAAI,MAAM,CAAC,MAAM,EAAE;YAC3B,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;SACtC;QAED,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;SACxB;QAED,IAAI,KAAK,EAAE;YACT,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;QAED,IAAI,QAAQ,CAAC,OAAO,EAAE;YACpB,IAAI,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;SAClC;aAAM;YACL,IAAI,QAAQ,CAAC,KAAK,KAAK,CAAC,EAAE;gBACxB;;;;kBAIE;aACH;YAED,uBAAuB;YACvB,IAAI,QAAQ,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE;gBAC3C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,IAAI,QAAQ,CAAC,EAAE,CAAC,CAAC;aACxD;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,MAAM,CACnB,QAAQ,CAAC,KAAK,EACd,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,EACtC,QAAQ,CAAC,SAAS,IAAI,QAAQ,CAAC,EAAE,CAClC,CAAC;aACH;YAED,IAAI,QAAQ,CAAC,QAAQ,EAAE;gBACrB,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;aAChC;iBAAM;gBACL,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;oBAC3C,qCAAqC;oBACrC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;oBACpC,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;oBAChC,IAAI,MAAM,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;wBACzD,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC;wBACnD,IAAI,QAAQ,EAAE;4BACZ,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;yBACxC;6BAAM;4BACL,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;yBACzB;qBACF;yBAAM;wBACL,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;qBACzB;iBACF;gBACD,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;aAC5B;YACD,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;SACzC;IACH,CAAC;IAEM,sBAAsB;QAC3B,uCAAuC;QACvC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACrB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;YAC3D,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;gBACjB,GAAG,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;YAC3D,CAAC,CAAC,CAAC;QACL,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC;IAEM,SAAS,CAAC,EAAU;QACzB,MAAM,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;QACjC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QACpC,MAAM,IAAI,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC;QAEhD,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;YACnC,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAC9B,OAAO,IAAI,CAAC;SACb;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAEM,WAAW;QAChB,OAAO,IAAI,CAAC,uBAAuB,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3D,CAAC;IAEM,uBAAuB,CAAC,SAAmB;QAChD,MAAM,IAAI,GAAG,CAAC,GAAG,SAAS,CAAC,CAAC;QAC5B,IAAI,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;QAC5B,IAAI,IAAI,GAAG,IAAI,CAAC;QAChB,OAAO,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YACtB,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAClC,IAAI,KAAK,EAAE;gBACT,IAAI,GAAG,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC;gBAClC,IAAI,IAAI,EAAE;oBACR,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;iBACpB;qBAAM;oBACL,MAAM;iBACP;aACF;iBAAM;gBACL,MAAM;aACP;SACF;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAEM,YAAY;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAEM,YAAY,CAAC,IAAc;QAChC,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;QACzB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;QAEpB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAC3B;IACH,CAAC;IAEM,gBAAgB,CAAC,IAAY;QAClC,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QAEtD,0CAA0C;QAC1C,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;QAE1D,IAAI,CAAC,OAAO,EAAE;YACZ,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;SAC3B;IACH,CAAC;IAEM,YAAY;QACjB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAEM,cAAc;QACnB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAEM,KAAK,CAAC,cAAc,CAAC,IAAY;QACtC,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QAE3D,sDAAsD;QACtD,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;YAC1B,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAChE,IAAI,CAAC,QAAQ,EAAE;gBACb,OAAO;aACR;SACF;QAED,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,IAAI,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;QACtB,OAAO,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;YAC7B,MAAM,MAAM,GAAG,WAAW,CAAC,KAAK,EAAE,CAAC;YACnC,IAAI,MAAM,EAAE;gBACV,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;oBAChB,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;oBAC7B,MAAM,IAAI,CAAC,YAAY,CAAC;iBACzB;gBAED,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC;gBAC3C,IAAI,CAAC,KAAK,EAAE;oBACV,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;iBAC3C;qBAAM;oBACL,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;iBACtB;aACF;SACF;QAED,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC;QACzB,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC;IAEO,UAAU,CAAC,QAAkB;QACnC,IAAI,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE;YAC1C,MAAM,QAAQ,GACZ,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,IAAI,QAAQ,CAAC,EAAE,CAAC,CAAC;YACxE,OAAO,QAAQ,CAAC;SACjB;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAEO,UAAU,CAAC,QAAkB;QACnC,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CACpC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,QAAQ,CAAC,SAAS,IAAI,QAAQ,CAAC,EAAE,CAC/C,CAAC;QACF,OAAO,QAAQ,CAAC;IAClB,CAAC;IAEO,YAAY,CAAC,MAAc;QACjC,MAAM,IAAI,GAAG,IAAI,SAAS,EAAE,CAAC;QAC7B,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAE/B,IAAI,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACrC,IAAI,MAAM,GAAG,CAAC,EAAE;YACd,MAAM,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SACpC;QACD,IAAI,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC;QACzE,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAE1B,OAAO,IAAI,CAAA;;;;;;+DAMgD,KAAK;;;;;kDAKlB,IAAI;;;;KAIjD,CAAC;IACJ,CAAC;IA6IM,MAAM;QACX,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YAClC,OAAO,IAAI,CAAA;;;;;SAKR,CAAC;SACL;QAED,IAAI,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;QAClC,MAAM,MAAM,GAAG,EAAE,CAAC;QAElB,MAAM,CAAC,IAAI,CACT,IAAI,CAAA,6BAA6B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;4CAEvB,IAAI,CAAC,YAAY;;sBAEvC,IAAI,CAAC,aAAa;;;;;;;;UAQ9B,KAAK;aACJ,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;aAC5B,GAAG,CAAC,CAAC,IAAc,EAAE,EAAE;YACtB,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QACnC,CAAC,CAAC;;;UAGF,KAAK;aACJ,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;aAC7B,GAAG,CAAC,CAAC,IAAc,EAAE,EAAE;YACtB,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QACnC,CAAC,CAAC;;aAEC,CACR,CAAC;QAEF,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;YACnC,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC;YAE1C,IAAI,SAAS,GAAG,KAAK,CAAC;YACtB,IAAI,QAAQ,EAAE;gBACZ,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;gBACvB,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;gBACrD,uCAAuC;gBACvC,IAAI,SAAS,CAAC,SAAS,EAAE;oBACvB,SAAS,GAAG,SAAS,CAAC,SAAS,KAAK,WAAW,CAAC;iBACjD;gBACD,0CAA0C;qBACrC;oBACH,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,GAAG,CAAC,EAAE;wBAC9C,SAAS,GAAG,KAAK,CAAC;qBACnB;iBACF;aACF;iBAAM;gBACL,KAAK,GAAG,IAAI,CAAC;aACd;YAED,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;gBACjD,MAAM,CAAC,IAAI,CACT,IAAI,CAAA;qBACO,UAAU,CAAC;oBAClB,KAAK,EAAE,IAAI;oBACX,CAAC,QAAQ,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI;oBAC9B,SAAS;iBACV,CAAC;;cAEA,CAAC,IAAI,CAAC,OAAO;oBACb,CAAC,CAAC,IAAI,CAAA;;6BAES,UAAU,CAAC;wBAClB,aAAa,EAAE,QAAQ,CAAC,WAAW;qBACpC,CAAC;;;;2CAIqB,QAAQ,CAAC,IAAI;;sBAElC,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS;wBAC7B,CAAC,CAAC,IAAI,CAAA;kCACM,IAAI,CAAC,aAAa;;mCAEjB,IAAI,CAAC,cAAc;uCACf;wBACjB,CAAC,CAAC,IAAI;;iBAEX;oBACH,CAAC,CAAC,IAAI;cACN,KAAK,CAAC,GAAG,CAAC,CAAC,IAAc,EAAE,EAAE;oBAC7B,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE;wBAC7B,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;;sBAEjC,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,KAAe,EAAE,EAAE;4BAC3C,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;wBAC1C,CAAC,CAAC;yBACG,CAAC;qBACX;oBACD,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;gBACnC,CAAC,CAAC;iBACG,CACR,CAAC;aACH;QACH,CAAC,CAAC,CAAC;QAEH,MAAM,IAAI,GAAG,IAAI,CAAA;eACN,UAAU,CAAC;YAClB,IAAI,EAAE,IAAI;YACV,iBAAiB,EAAE,IAAI,CAAC,SAAS;SAClC,CAAC;;QAEA,MAAM;WACH,CAAC;QACR,OAAO,IAAI,CAAA,GAAG,IAAI,EAAE,CAAC;IACvB,CAAC;CACF;AAhqBC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACd;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACd;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACT;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACb;AAId;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACX;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACT","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { fetchResults, getClasses } from '../utils';\nimport { Icon } from '../vectoricon';\nimport ColorHash from 'color-hash';\n\nexport interface MenuItem {\n  id?: string;\n  vanity_id?: string;\n  name?: string;\n  verbose_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  show_header?: boolean;\n  items?: MenuItem[];\n  inline?: boolean;\n  type?: string;\n  on_submit?: string;\n  bubble?: string;\n  popup?: boolean;\n  avatar?: 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        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      .level-0 > temba-dropdown > div[slot='toggle'] > .avatar {\n        background: var(--color-primary-dark);\n        --icon-color: rgba(255, 255, 255, 0.7);\n        font-size: 1em;\n      }\n\n      .level-0 > .top {\n        padding-top: var(--menu-padding);\n        background: var(--color-primary-dark);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\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      temba-dropdown {\n        z-index: 1;\n      }\n\n      temba-dropdown > div[slot='dropdown'] .avatar > .details {\n        margin-left: 0.75em;\n      }\n\n      .level-0 > .item > .details,\n      .level-0 > temba-dropdown > div[slot='toggle'] > .avatar > .details {\n        display: none !important;\n      }\n\n      .avatar {\n        align-items: center;\n      }\n\n      .avatar-circle {\n        box-shadow: 0 0 0px 3px rgba(0, 0, 0, 0.075);\n        display: flex;\n        margin: 0.4em 0em;\n        height: 2em;\n        width: 2em;\n        flex-direction: row;\n        align-items: center;\n        color: #fff;\n        border-radius: 100%;\n        font-weight: 400;\n      }\n\n      temba-dropdown > div[slot='dropdown'] .avatar .avatar-circle {\n        font-size: 0.7em;\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        z-index: 500;\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      }\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        --icon-color: #fff;\n      }\n\n      .level-0 > .item.selected:hover {\n        background: inherit;\n        --icon-color: var(--color-primary-dark);\n        cursor: default;\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: 150;\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-1 {\n        margin-left: -208px;\n        pointer-events: none;\n        border: none;\n        overflow: hidden;\n      }\n\n      .fully-collapsed .level-1 > * {\n        opacity: 0;\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      .expand-icon {\n        transform: rotate(180deg);\n        --icon-color: rgba(255, 255, 255, 0.5);\n        cursor: pointer;\n        max-height: 0px;\n        overflow: hidden;\n        opacity: 0;\n        transition: all 400ms ease-in-out 400ms;\n      }\n\n      .expand-icon:hover {\n        --icon-color: #fff;\n      }\n\n      .fully-collapsed .expand-icon {\n        padding-top: 0.5em;\n        max-height: 2em;\n        opacity: 1;\n      }\n\n      .section-header {\n        display: flex;\n        align-items: center;\n      }\n\n      .section-header .section {\n        flex-grow: 1;\n      }\n\n      .section-header temba-icon {\n        --icon-color: #ddd;\n        cursor: pointer;\n        padding-bottom: 0.5em;\n        padding-right: 0.5em;\n      }\n\n      .section-header temba-icon:hover {\n        --icon-color: var(--color-link-primary);\n      }\n\n      slot[name='header'] {\n        display: none;\n      }\n\n      slot[name='header'].show-header {\n        display: block;\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      this.fireCustomEvent(CustomEventType.Ready);\n    }\n  }\n\n  public reset() {\n    this.loadItems(this.root);\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) {\n      if (item.endpoint) {\n        this.loadItems(item, false);\n      } else {\n        path.pop();\n        this.refresh(path);\n      }\n    }\n  }\n\n  private fireNoPath(missingId: string) {\n    const item = this.getMenuItem();\n\n    if (item) {\n      const details = {\n        item: item.id,\n        selection: '/' + this.selection.join('/'),\n        endpoint: item.endpoint,\n        path:\n          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\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    this.fireCustomEvent(CustomEventType.ButtonClicked, {\n      item: menuItem,\n      parent,\n    });\n    if (parent && parent.popup) {\n      return;\n    }\n\n    if (menuItem.popup) {\n      return;\n    }\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.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, true);\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        }\n        this.requestUpdate('root');\n      }\n      this.dispatchEvent(new Event('change'));\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 handleExpand() {\n    this.collapsed = false;\n  }\n\n  public handleCollapse() {\n    this.collapsed = true;\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 renderAvatar(avatar: string) {\n    const hash = new ColorHash();\n    const color = hash.hex(avatar);\n\n    let second = avatar.indexOf(' ') + 1;\n    if (second < 1) {\n      second = avatar.length > 1 ? 1 : 0;\n    }\n    let name = avatar.substring(0, 1) + avatar.substring(second, second + 1);\n    name = name.toUpperCase();\n\n    return html`\n      <div\n        style=\"border: 0px solid red; display:flex; flex-direction: column; align-items:center;\"\n      >\n        <div\n          class=\"avatar-circle\"\n          style=\"border: 0px solid rgba(0,0,0,.1);background:${color}\"\n        >\n          <div\n            style=\"border: 0px solid red; display:flex; flex-direction: column; align-items:center;flex-grow:1\"\n          >\n            <div style=\"border:0px solid blue;\">${name}</div>\n          </div>\n        </div>\n      </div>\n    `;\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    let 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: !(menuItem.avatar && menuItem.level === 0),\n      avatar: !!menuItem.avatar,\n      inline: menuItem.inline,\n      expanding: this.expanding && this.expanding === menuItem.id,\n      expanded: this.isExpanded(menuItem),\n      iconless: !icon && !collapsedIcon && !menuItem.avatar,\n    });\n\n    if (menuItem.avatar) {\n      icon = this.renderAvatar(menuItem.avatar);\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          ? menuItem.avatar\n            ? icon\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=\"${isSelected || isChildSelected\n                    ? Icon.arrow_up\n                    : Icon.arrow_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    if (menuItem.popup) {\n      return html`\n        <temba-dropdown offsetx=\"10\" arrowoffset=\"8\" mask>\n          <div slot=\"toggle\">${item}</div>\n          <div\n            slot=\"dropdown\"\n            style=\"width:300px;overflow:hidden;padding-bottom:0.5em\"\n          >\n            <div style=\"max-height:400px;overflow-y:auto\">\n              ${(menuItem.items || []).map((child: MenuItem) => {\n                child.level = menuItem.level + 1;\n                return this.renderMenuItem(child, menuItem);\n              })}\n            </div>\n          </div>\n        </temba-dropdown>\n      `;\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\">\n          <div class=\"expand-icon\" @click=${this.handleExpand}>\n            <temba-icon\n              name=\"${Icon.menu_collapse}\"\n              class=\"collapse\"\n              class=\"expand\"\n              size=\"1.4\"\n            ></temba-icon>\n          </div>\n        </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`\n                  <slot\n                    class=\"${getClasses({\n                      'show-header': selected.show_header,\n                    })}\"\n                    name=\"header\"\n                  ></slot>\n                  <div class=\"section-header\">\n                    <div class=\"section\">${selected.name}</div>\n\n                    ${index == 0 && !this.collapsed\n                      ? html`<temba-icon\n                          name=\"${Icon.menu_collapse}\"\n                          size=\"1.1\"\n                          @click=${this.handleCollapse}\n                        ></temba-icon>`\n                      : null}\n                  </div>\n                `\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"]}
+{"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.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { fetchResults, getClasses } from '../utils';\nimport { Icon } from '../vectoricon';\nimport ColorHash from 'color-hash';\n\nexport interface MenuItem {\n  id?: string;\n  vanity_id?: string;\n  name?: string;\n  verbose_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  show_header?: boolean;\n  items?: MenuItem[];\n  inline?: boolean;\n  type?: string;\n  on_submit?: string;\n  bubble?: string;\n  popup?: boolean;\n  avatar?: 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        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      .level-0 > temba-dropdown > div[slot='toggle'] > .avatar {\n        background: var(--color-primary-dark);\n        --icon-color: rgba(255, 255, 255, 0.7);\n        font-size: 1em;\n      }\n\n      .level-0 > .top {\n        padding-top: var(--menu-padding);\n        background: var(--color-primary-dark);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\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      temba-dropdown {\n        z-index: 1;\n      }\n\n      temba-dropdown > div[slot='dropdown'] .avatar > .details {\n        margin-left: 0.75em;\n      }\n\n      .level-0 > .item > .details,\n      .level-0 > temba-dropdown > div[slot='toggle'] > .avatar > .details {\n        display: none !important;\n      }\n\n      .avatar {\n        align-items: center;\n      }\n\n      .avatar-circle {\n        box-shadow: 0 0 0px 3px rgba(0, 0, 0, 0.075);\n        display: flex;\n        margin: 0.4em 0em;\n        height: 2em;\n        width: 2em;\n        flex-direction: row;\n        align-items: center;\n        color: #fff;\n        border-radius: 100%;\n        font-weight: 400;\n      }\n\n      temba-dropdown > div[slot='dropdown'] .avatar .avatar-circle {\n        font-size: 0.7em;\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        z-index: 500;\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      }\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        --icon-color: #fff;\n      }\n\n      .level-0 > .item.selected:hover {\n        background: inherit;\n        --icon-color: var(--color-primary-dark);\n        cursor: default;\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: 150;\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-1 {\n        margin-left: -208px;\n        pointer-events: none;\n        border: none;\n        overflow: hidden;\n      }\n\n      .fully-collapsed .level-1 > * {\n        opacity: 0;\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      .expand-icon {\n        transform: rotate(180deg);\n        --icon-color: rgba(255, 255, 255, 0.5);\n        cursor: pointer;\n        max-height: 0px;\n        overflow: hidden;\n        opacity: 0;\n        transition: all 400ms ease-in-out 400ms;\n      }\n\n      .expand-icon:hover {\n        --icon-color: #fff;\n      }\n\n      .fully-collapsed .expand-icon {\n        padding-top: 0.5em;\n        max-height: 2em;\n        opacity: 1;\n      }\n\n      .section-header {\n        display: flex;\n        align-items: center;\n      }\n\n      .section-header .section {\n        flex-grow: 1;\n      }\n\n      .section-header temba-icon {\n        --icon-color: #ddd;\n        cursor: pointer;\n        padding-bottom: 0.5em;\n        padding-right: 0.5em;\n      }\n\n      .section-header temba-icon:hover {\n        --icon-color: var(--color-link-primary);\n      }\n\n      slot[name='header'] {\n        display: none;\n      }\n\n      slot[name='header'].show-header {\n        display: block;\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      this.fireCustomEvent(CustomEventType.Ready);\n    }\n  }\n\n  public reset() {\n    this.loadItems(this.root);\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) {\n      if (item.endpoint) {\n        this.loadItems(item, false);\n      } else {\n        path.pop();\n        this.refresh(path);\n      }\n    }\n  }\n\n  private fireNoPath(missingId: string) {\n    const item = this.getMenuItem();\n\n    if (item) {\n      const details = {\n        item: item.id,\n        selection: '/' + this.selection.join('/'),\n        endpoint: item.endpoint,\n        path:\n          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\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    this.fireCustomEvent(CustomEventType.ButtonClicked, {\n      item: menuItem,\n      parent,\n    });\n    if (parent && parent.popup) {\n      return;\n    }\n\n    if (menuItem.popup) {\n      return;\n    }\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.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, this.pending.length == 0);\n\n        // make sure change events fire for events with hrefs\n        if (!menuItem.href) {\n          return;\n        }\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              return;\n            } else {\n              this.fireNoPath(nextId);\n              this.requestUpdate('root');\n              return;\n            }\n          } else {\n            this.fireNoPath(nextId);\n            this.requestUpdate('root');\n            return;\n          }\n        }\n        this.requestUpdate('root');\n      }\n\n      if (this.pending.length == 0 || this.getMenuItem().href) {\n        this.dispatchEvent(new Event('change'));\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 handleExpand() {\n    this.collapsed = false;\n  }\n\n  public handleCollapse() {\n    this.collapsed = true;\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 renderAvatar(avatar: string) {\n    const hash = new ColorHash();\n    const color = hash.hex(avatar);\n\n    let second = avatar.indexOf(' ') + 1;\n    if (second < 1) {\n      second = avatar.length > 1 ? 1 : 0;\n    }\n    let name = avatar.substring(0, 1) + avatar.substring(second, second + 1);\n    name = name.toUpperCase();\n\n    return html`\n      <div\n        style=\"border: 0px solid red; display:flex; flex-direction: column; align-items:center;\"\n      >\n        <div\n          class=\"avatar-circle\"\n          style=\"border: 0px solid rgba(0,0,0,.1);background:${color}\"\n        >\n          <div\n            style=\"border: 0px solid red; display:flex; flex-direction: column; align-items:center;flex-grow:1\"\n          >\n            <div style=\"border:0px solid blue;\">${name}</div>\n          </div>\n        </div>\n      </div>\n    `;\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    let 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: !(menuItem.avatar && menuItem.level === 0),\n      avatar: !!menuItem.avatar,\n      inline: menuItem.inline,\n      expanding: this.expanding && this.expanding === menuItem.id,\n      expanded: this.isExpanded(menuItem),\n      iconless: !icon && !collapsedIcon && !menuItem.avatar,\n    });\n\n    if (menuItem.avatar) {\n      icon = this.renderAvatar(menuItem.avatar);\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          ? menuItem.avatar\n            ? icon\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=\"${isSelected || isChildSelected\n                    ? Icon.arrow_up\n                    : Icon.arrow_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    if (menuItem.popup) {\n      return html`\n        <temba-dropdown offsetx=\"10\" arrowoffset=\"8\" mask>\n          <div slot=\"toggle\">${item}</div>\n          <div\n            slot=\"dropdown\"\n            style=\"width:300px;overflow:hidden;padding-bottom:0.5em\"\n          >\n            <div style=\"max-height:400px;overflow-y:auto\">\n              ${(menuItem.items || []).map((child: MenuItem) => {\n                child.level = menuItem.level + 1;\n                return this.renderMenuItem(child, menuItem);\n              })}\n            </div>\n          </div>\n        </temba-dropdown>\n      `;\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\">\n          <div class=\"expand-icon\" @click=${this.handleExpand}>\n            <temba-icon\n              name=\"${Icon.menu_collapse}\"\n              class=\"collapse\"\n              class=\"expand\"\n              size=\"1.4\"\n            ></temba-icon>\n          </div>\n        </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`\n                  <slot\n                    class=\"${getClasses({\n                      'show-header': selected.show_header,\n                    })}\"\n                    name=\"header\"\n                  ></slot>\n                  <div class=\"section-header\">\n                    <div class=\"section\">${selected.name}</div>\n\n                    ${index == 0 && !this.collapsed\n                      ? html`<temba-icon\n                          name=\"${Icon.menu_collapse}\"\n                          size=\"1.1\"\n                          @click=${this.handleCollapse}\n                        ></temba-icon>`\n                      : null}\n                  </div>\n                `\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/package.json

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

package/src/list/TembaMenu.ts

@@ -740,7 +740,12 @@ export class TembaMenu extends RapidElement {
       }
 
       if (menuItem.endpoint) {
-        this.loadItems(menuItem, true);
+        this.loadItems(menuItem, this.pending.length == 0);
+
+        // make sure change events fire for events with hrefs
+        if (!menuItem.href) {
+          return;
+        }
       } else {
         if (this.pending && this.pending.length > 0) {
           // auto select the next pending click
@@ -750,16 +755,24 @@ export class TembaMenu extends RapidElement {
             const nextItem = findItem(item.items, nextId).item;
             if (nextItem) {
               this.handleItemClicked(null, nextItem);
+              return;
             } else {
               this.fireNoPath(nextId);
+              this.requestUpdate('root');
+              return;
             }
           } else {
             this.fireNoPath(nextId);
+            this.requestUpdate('root');
+            return;
           }
         }
         this.requestUpdate('root');
       }
-      this.dispatchEvent(new Event('change'));
+
+      if (this.pending.length == 0 || this.getMenuItem().href) {
+        this.dispatchEvent(new Event('change'));
+      }
     }
   }