@nyaruka/temba-components 0.31.6 → 0.31.9

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

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

package/dist/sw.js

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

package/dist/templates/components-body.html

@@ -1 +1 @@
-<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/fa23691e.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.31.6"</script>
+<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/4be064bd.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.31.9"</script>

package/dist/templates/components-head.html

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

package/out-tsc/src/anchor/Anchor.js

@@ -5,8 +5,13 @@ export class Anchor extends LitElement {
     static get styles() {
         return css `
       :host {
-        cursor: pointer;
         color: var(--color-link-primary);
+        display: inline-block;
+      }
+
+      slot:hover {
+        cursor: pointer;
+        text-decoration: underline;
       }
     `;
     }
@@ -15,9 +20,7 @@ export class Anchor extends LitElement {
         window.goto(evt);
     }
     render() {
-        return html `
-      <slot href="${this.href}" @click="${this.handleClick}"></slot>
-    `;
+        return html `<slot href="${this.href}" @click="${this.handleClick}"></slot>`;
     }
 }
 __decorate([

package/out-tsc/src/anchor/Anchor.js.map

@@ -1 +1 @@
-{"version":3,"file":"Anchor.js","sourceRoot":"","sources":["../../../src/anchor/Anchor.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,MAAM,OAAO,MAAO,SAAQ,UAAU;IACpC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;KAKT,CAAC;IACJ,CAAC;IAKO,WAAW,CAAC,GAAe;QACjC,kDAAkD;QACjD,MAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC5B,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,WAAW;KACrD,CAAC;IACJ,CAAC;CACF;AAZC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACd","sourcesContent":["import { LitElement, TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators';\n\nexport class Anchor extends LitElement {\n  static get styles() {\n    return css`\n      :host {\n        cursor: pointer;\n        color: var(--color-link-primary);\n      }\n    `;\n  }\n\n  @property({ type: String })\n  href: string;\n\n  private handleClick(evt: MouseEvent) {\n    // TODO: fire event instead to be handled upstream\n    (window as any).goto(evt);\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <slot href=\"${this.href}\" @click=\"${this.handleClick}\"></slot>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Anchor.js","sourceRoot":"","sources":["../../../src/anchor/Anchor.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,MAAM,OAAO,MAAO,SAAQ,UAAU;IACpC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;KAUT,CAAC;IACJ,CAAC;IAKO,WAAW,CAAC,GAAe;QACjC,kDAAkD;QACjD,MAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC5B,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA,eAAe,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,WAAW,WAAW,CAAC;IAC9E,CAAC;CACF;AAVC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACd","sourcesContent":["import { LitElement, TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators';\n\nexport class Anchor extends LitElement {\n  static get styles() {\n    return css`\n      :host {\n        color: var(--color-link-primary);\n        display: inline-block;\n      }\n\n      slot:hover {\n        cursor: pointer;\n        text-decoration: underline;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  href: string;\n\n  private handleClick(evt: MouseEvent) {\n    // TODO: fire event instead to be handled upstream\n    (window as any).goto(evt);\n  }\n\n  public render(): TemplateResult {\n    return html`<slot href=\"${this.href}\" @click=\"${this.handleClick}\"></slot>`;\n  }\n}\n"]}

package/out-tsc/src/contacts/ContactUrn.js

@@ -3,6 +3,10 @@ import { css, html } from 'lit';
 import { property } from 'lit/decorators';
 import { RapidElement } from '../RapidElement';
 export class ContactUrn extends RapidElement {
+    constructor() {
+        super(...arguments);
+        this.size = 20;
+    }
     static get styles() {
         return css `
       :host {
@@ -27,7 +31,7 @@ export class ContactUrn extends RapidElement {
     `;
     }
     render() {
-        const scheme = this.urn.split(':')[0];
+        const scheme = this.scheme || this.urn.split(':')[0];
         return html `
       <img
         class="urn ${this.size < 20 ? 'small' : ''}"
@@ -43,6 +47,9 @@ export class ContactUrn extends RapidElement {
 __decorate([
     property({ type: String })
 ], ContactUrn.prototype, "urn", void 0);
+__decorate([
+    property({ type: String })
+], ContactUrn.prototype, "scheme", void 0);
 __decorate([
     property({ type: Number })
 ], ContactUrn.prototype, "size", void 0);

package/out-tsc/src/contacts/ContactUrn.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactUrn.js","sourceRoot":"","sources":["../../../src/contacts/ContactUrn.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,OAAO,UAAW,SAAQ,YAAY;IAO1C,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;KAoBT,CAAC;IACJ,CAAC;IAEM,MAAM;QACX,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QACtC,OAAO,IAAI,CAAA;;qBAEM,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;iBACjC,IAAI,CAAC,IAAI;kBACR,IAAI,CAAC,IAAI;eACZ,IAAI,CAAC,MAAM;YACjB,MAAc,CAAC,UAAU;YAC1B,UAAU,eAAe,MAAM;;KAElC,CAAC;IACJ,CAAC;CACF;AA1CC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACd","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { RapidElement } from '../RapidElement';\n\nexport class ContactUrn extends RapidElement {\n  @property({ type: String })\n  urn: string;\n\n  @property({ type: Number })\n  size: number;\n\n  static get styles() {\n    return css`\n      :host {\n        display: flex;\n        align-items: center;\n      }\n      .urn {\n        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.04) inset;\n        padding: 3px;\n        border: 1px solid #ddd;\n        border-radius: 18rem;\n        background: #eee;\n        margin-right: 0.2em;\n      }\n\n      .small {\n        padding: 0px;\n        border: 0px;\n        box-shadow: none;\n        margin-right: 0.5em;\n      }\n    `;\n  }\n\n  public render(): TemplateResult {\n    const scheme = this.urn.split(':')[0];\n    return html`\n      <img\n        class=\"urn ${this.size < 20 ? 'small' : ''}\"\n        width=\"${this.size}em\"\n        height=\"${this.size}em\"\n        src=\"${this.prefix ||\n        (window as any).static_url ||\n        '/static/'}img/schemes/${scheme}.svg\"\n      />\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ContactUrn.js","sourceRoot":"","sources":["../../../src/contacts/ContactUrn.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,OAAO,UAAW,SAAQ,YAAY;IAA5C;;QAQE,SAAI,GAAG,EAAE,CAAC;IAuCZ,CAAC;IArCC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;KAoBT,CAAC;IACJ,CAAC;IAEM,MAAM;QACX,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QACrD,OAAO,IAAI,CAAA;;qBAEM,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;iBACjC,IAAI,CAAC,IAAI;kBACR,IAAI,CAAC,IAAI;eACZ,IAAI,CAAC,MAAM;YACjB,MAAc,CAAC,UAAU;YAC1B,UAAU,eAAe,MAAM;;KAElC,CAAC;IACJ,CAAC;CACF;AA7CC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACjB","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { RapidElement } from '../RapidElement';\n\nexport class ContactUrn extends RapidElement {\n  @property({ type: String })\n  urn: string;\n\n  @property({ type: String })\n  scheme: string;\n\n  @property({ type: Number })\n  size = 20;\n\n  static get styles() {\n    return css`\n      :host {\n        display: flex;\n        align-items: center;\n      }\n      .urn {\n        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.04) inset;\n        padding: 3px;\n        border: 1px solid #ddd;\n        border-radius: 18rem;\n        background: #eee;\n        margin-right: 0.2em;\n      }\n\n      .small {\n        padding: 0px;\n        border: 0px;\n        box-shadow: none;\n        margin-right: 0.5em;\n      }\n    `;\n  }\n\n  public render(): TemplateResult {\n    const scheme = this.scheme || this.urn.split(':')[0];\n    return html`\n      <img\n        class=\"urn ${this.size < 20 ? 'small' : ''}\"\n        width=\"${this.size}em\"\n        height=\"${this.size}em\"\n        src=\"${this.prefix ||\n        (window as any).static_url ||\n        '/static/'}img/schemes/${scheme}.svg\"\n      />\n    `;\n  }\n}\n"]}

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

@@ -205,6 +205,9 @@ export class TembaMenu extends RapidElement {
       .level-0 > .top {
         padding-top: var(--menu-padding);
         background: var(--color-primary-dark);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
       }
 
       .level-0 > .empty {
@@ -471,7 +474,7 @@ export class TembaMenu extends RapidElement {
       }
 
       .fully-collapsed .level-1 {
-        margin-left: -217px;
+        margin-left: -208px;
         pointer-events: none;
         border: none;
         overflow: hidden;
@@ -497,6 +500,54 @@ export class TembaMenu extends RapidElement {
         margin-left: 0.75em;
         margin-right: 0.75em;
       }
+
+      .expand-icon {
+        transform: rotate(180deg);
+        --icon-color: rgba(255, 255, 255, 0.5);
+        cursor: pointer;
+        max-height: 0px;
+        overflow: hidden;
+        opacity: 0;
+        transition: all 400ms ease-in-out 400ms;
+      }
+
+      .expand-icon:hover {
+        --icon-color: #fff;
+      }
+
+      .fully-collapsed .expand-icon {
+        padding-top: 0.5em;
+        max-height: 2em;
+        opacity: 1;
+      }
+
+      .section-header {
+        display: flex;
+        align-items: center;
+      }
+
+      .section-header .section {
+        flex-grow: 1;
+      }
+
+      .section-header temba-icon {
+        --icon-color: #ddd;
+        cursor: pointer;
+        padding-bottom: 0.5em;
+        padding-right: 0.5em;
+      }
+
+      .section-header temba-icon:hover {
+        --icon-color: var(--color-link-primary);
+      }
+
+      slot[name='header'] {
+        display: none;
+      }
+
+      slot[name='header'].show-header {
+        display: block;
+      }
     `;
     }
     setBubble(id, color) {
@@ -537,6 +588,9 @@ export class TembaMenu extends RapidElement {
             this.fireCustomEvent(CustomEventType.Ready);
         }
     }
+    reset() {
+        this.loadItems(this.root);
+    }
     refresh(path = null) {
         if (!path) {
             path = [...this.selection];
@@ -555,19 +609,21 @@ export class TembaMenu extends RapidElement {
     }
     fireNoPath(missingId) {
         const item = this.getMenuItem();
-        const details = {
-            item: item.id,
-            selection: '/' + this.selection.join('/'),
-            endpoint: item.endpoint,
-            path: missingId + '/' + this.pending.join('/') + document.location.search,
-        };
-        // remove any excess from our selection
-        const selection = this.selection.join('/');
-        selection.replace(details.path, '');
-        this.selection = selection.split('/');
-        this.fireCustomEvent(CustomEventType.NoPath, details);
-        this.pending = [];
-        this.requestUpdate('root');
+        if (item) {
+            const details = {
+                item: item.id,
+                selection: '/' + this.selection.join('/'),
+                endpoint: item.endpoint,
+                path: missingId + '/' + this.pending.join('/') + document.location.search,
+            };
+            // remove any excess from our selection
+            const selection = this.selection.join('/');
+            selection.replace(details.path, '');
+            this.selection = selection.split('/');
+            this.fireCustomEvent(CustomEventType.NoPath, details);
+            this.pending = [];
+            this.requestUpdate('root');
+        }
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     loadItems(item, selectFirst = true) {
@@ -657,7 +713,7 @@ 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, !menuItem.href);
+                this.loadItems(menuItem, true);
                 this.dispatchEvent(new Event('change'));
             }
             else {
@@ -749,6 +805,12 @@ export class TembaMenu extends RapidElement {
             this.setSelection(asPath);
         }
     }
+    handleExpand() {
+        this.collapsed = false;
+    }
+    handleCollapse() {
+        this.collapsed = true;
+    }
     async setFocusedItem(path) {
         const focusedPath = path.split('/').filter(step => !!step);
         // if we don't match at the first level, we are a noop
@@ -802,7 +864,15 @@ export class TembaMenu extends RapidElement {
         let items = this.root.items || [];
         const levels = [];
         levels.push(html `<div class="level level-0 ${this.submenu ? 'hidden' : ''}">
-        <div class="top"></div>
+        <div class="top">
+          <div class="expand-icon" @click=${this.handleExpand}>
+            <temba-icon
+              name="menu-collapse"
+              class="expand"
+              size="1.4"
+            ></temba-icon>
+          </div>
+        </div>
 
         ${items
             .filter(item => !item.bottom)
@@ -847,7 +917,25 @@ export class TembaMenu extends RapidElement {
                 })}"
           >
             ${!this.submenu
-                    ? html `<div class="section">${selected.name}</div>`
+                    ? html `
+                  <slot
+                    class="${getClasses({
+                        'show-header': selected.show_header,
+                    })}"
+                    name="header"
+                  ></slot>
+                  <div class="section-header">
+                    <div class="section">${selected.name}</div>
+
+                    ${index == 0 && !this.collapsed
+                        ? html `<temba-icon
+                          name="menu-collapse"
+                          size="1.1"
+                          @click=${this.handleCollapse}
+                        ></temba-icon>`
+                        : null}
+                  </div>
+                `
                     : null}
             ${items.map((item) => {
                     if (item.inline && item.items) {

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,gBAAgB,CAAC;AAC1C,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;AA0BpD,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;IAwZzC;QACE,KAAK,EAAE,CAAC;QA9BV,UAAK,GAAG,KAAK,CAAC;QAyBd,cAAS,GAAa,EAAE,CAAC;QACzB,YAAO,GAAa,EAAE,CAAC;QACvB,UAAK,GAAoC,EAAE,CAAC;QAsVpC,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,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI;gBACxB,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,IAAI;gBACV,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;aAClC,CAAC,CAAC;YAEH,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,IAAI,CAAA;;sBAEM,QAAQ,CAAC,IAAI;;iBAElB,IAAI;cACP;gBACJ,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;kCACc,UAAU,IAAI,eAAe;wBAC3C,CAAC,CAAC,IAAI;wBACN,CAAC,CAAC,MAAM;+BACG;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,OAAO,IAAI,CAAC;QACd,CAAC,CAAC;IAlcF,CAAC;IAzZD,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqXT,CAAC;IACJ,CAAC;IAoCM,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,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,MAAM,OAAO,GAAG;YACd,IAAI,EAAE,IAAI,CAAC,EAAE;YACb,SAAS,EAAE,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;YACzC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,IAAI,EAAE,SAAS,GAAG,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM;SAC1E,CAAC;QAEF,uCAAuC;QACvC,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC3C,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACpC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAEtC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACtD,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,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,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,IAAI,IAAI,cAAc,EAAE;YACnC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,aAAa,EAAE;gBAClD,KAAK,EAAE,QAAQ,CAAC,IAAI;gBACpB,IAAI,EAAE,QAAQ,CAAC,IAAI;gBACnB,SAAS,EAAE,QAAQ,CAAC,SAAS;aAC9B,CAAC,CAAC;YACH,OAAO;SACR;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,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;gBACzC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;aACzC;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;qBAAM;oBACL,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;iBACzC;gBACD,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;aAC5B;SACF;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,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;IAoHM,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;;;UAGzD,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,wBAAwB,QAAQ,CAAC,IAAI,QAAQ;oBACnD,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;AA/jBC;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';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { fetchResults, getClasses } from '../utils';\n\nexport interface MenuItem {\n  id?: string;\n  vanity_id?: string;\n  name?: string;\n  count?: number;\n  icon?: string;\n  collapsed_icon?: string;\n  endpoint?: string;\n  loading?: boolean;\n  bottom?: boolean;\n  level?: number;\n  trigger?: string;\n  href?: string;\n  items?: MenuItem[];\n  inline?: boolean;\n  type?: string;\n  on_submit?: string;\n  bubble?: string;\n}\n\ninterface MenuItemState {\n  collapsed?: string;\n}\n\nconst findItem = (\n  items: MenuItem[],\n  id: string\n): { item: MenuItem; index: number } => {\n  const search = items || [];\n\n  const index = search.findIndex((item: MenuItem) => {\n    return item.id == id || item.vanity_id == id;\n  });\n\n  if (index > -1) {\n    const item = search[index];\n    return { item, index };\n  }\n\n  return { item: null, index: -1 };\n};\n\nexport class TembaMenu extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        width: 100%;\n        display: block;\n        --color-widget-bg-focused: transparent;\n        --options-block-shadow: none;\n      }\n\n      .bubble {\n        width: 8px;\n        height: 8px;\n        left: 14px;\n        bottom: -1px;\n        z-index: 10000;\n        border-radius: 99px;\n        border: 1px solid rgb(255, 255, 255);\n        position: relative;\n        margin-top: -10px;\n      }\n\n      .section {\n        font-size: 1.5em;\n        margin-bottom: 0.2em;\n        color: var(--color-text-dark);\n      }\n\n      .collapse-toggle {\n        width: 0.5em;\n        cursor: pointer;\n        display: block;\n        margin-right: 5px;\n        margin-top: 3px;\n        margin-bottom: 3px;\n      }\n\n      .collapse-toggle:hover {\n        background: rgb(100, 100, 100, 0.05);\n      }\n\n      .item {\n        cursor: pointer;\n        user-select: none;\n        -webkit-user-select: none;\n        display: flex;\n        font-size: 1em;\n        --icon-color: var(--color-text-dark);\n      }\n\n      .item.selected {\n        background: var(--color-selection);\n        color: var(--color-primary-dark);\n        --icon-color: var(--color-primary-dark);\n      }\n\n      .root {\n        display: flex;\n        flex-direction: row;\n        height: 100%;\n      }\n\n      .level {\n        display: flex;\n        flex-direction: column;\n      }\n\n      .level.hidden {\n        display: none;\n      }\n\n      .submenu {\n      }\n\n      .level-0 > .item {\n        background: var(--color-primary-dark);\n        --icon-color: #fff;\n        font-size: 1em;\n      }\n\n      .level-0 > .top {\n        padding-top: var(--menu-padding);\n        background: var(--color-primary-dark);\n      }\n\n      .level-0 > .empty {\n        background: var(--color-primary-dark);\n        align-self: stretch;\n        flex-grow: 1;\n      }\n\n      .level-0 > .bottom {\n        height: 1em;\n        background: var(--color-primary-dark);\n      }\n\n      .level-0 > .item > .details {\n        display: none !important;\n      }\n\n      .level-0.expanding {\n      }\n\n      .level-0.expanded {\n        background: inherit;\n      }\n\n      .level-0 > .item.selected {\n        background: inherit;\n        --icon-color: var(--color-primary-dark);\n      }\n\n      .level {\n        padding: var(--menu-padding);\n      }\n\n      .level-0 {\n        padding: 0px;\n        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        max-width: 12em;\n      }\n\n      .item > temba-icon {\n        margin-right: 0.5em;\n      }\n\n      .item.inline > temba-icon {\n      }\n\n      .item > .details > .name {\n        flex-grow: 1;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 0;\n      }\n\n      .level-0 > .item {\n        padding: 1em 1em;\n        margin-top: 0em;\n        border-radius: 0px;\n        min-width: inherit;\n        max-width: inherit;\n      }\n\n      .level-0 > .item > temba-icon {\n        margin-right: 0px;\n      }\n\n      .level-0 > .item > .name {\n        min-width: 0px;\n      }\n\n      .count {\n        align-self: center;\n        margin-left: 1em;\n        font-size: 0.8em;\n        font-weight: 400;\n      }\n\n      .level-0 > .item-top {\n        background: var(--color-primary-dark);\n        min-height: var(--curvature);\n      }\n\n      .level-0 > .item-bottom {\n        background: var(--color-primary-dark);\n        min-height: var(--curvature);\n      }\n\n      .level-0 > .item-bottom.selected {\n        border-top-right-radius: var(--curvature);\n      }\n\n      .level-0 > .item-top.selected {\n        border-bottom-right-radius: var(--curvature);\n      }\n\n      .level-0 > .selected-top {\n      }\n\n      .level-0 > .item:hover {\n        background: rgba(var(--primary-rgb), 0.85);\n      }\n\n      .level-0 > .item.selected:hover {\n        background: inherit;\n      }\n\n      .inline-children {\n      }\n\n      .inline-children .item {\n      }\n\n      .item.inline {\n        border: 0px solid transparent;\n      }\n\n      .level-1,\n      .level-2 {\n        border-right: 1px solid rgba(0 0 0 / 8%);\n        box-shadow: rgb(0 0 0 / 6%) 4px 0px 6px 1px;\n      }\n\n      .level-1 {\n        transition: opacity 100ms linear, margin 200ms linear;\n        overflow-y: scroll;\n        z-index: 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-0 {\n        z-index: 1;\n      }\n\n      .fully-collapsed .level-1 {\n        margin-left: -217px;\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  }\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 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    const details = {\n      item: item.id,\n      selection: '/' + this.selection.join('/'),\n      endpoint: item.endpoint,\n      path: missingId + '/' + this.pending.join('/') + document.location.search,\n    };\n\n    // remove any excess from our selection\n    const selection = this.selection.join('/');\n    selection.replace(details.path, '');\n    this.selection = selection.split('/');\n\n    this.fireCustomEvent(CustomEventType.NoPath, details);\n    this.pending = [];\n    this.requestUpdate('root');\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private loadItems(item: MenuItem, selectFirst = true) {\n    if (item && item.endpoint) {\n      item.loading = true;\n      this.httpComplete = fetchResults(item.endpoint).then(\n        (items: MenuItem[]) => {\n          // update our item level\n          items.forEach(subItem => {\n            subItem.level = item.level + 1;\n            // if we came with preset items, set the level for them accordingly\n            if (subItem.items) {\n              subItem.items.forEach(inlineItem => {\n                inlineItem.level = item.level + 2;\n                // inlineItem.parent = subItem;\n              });\n            }\n          });\n\n          item.items = items;\n          item.loading = false;\n          this.requestUpdate('root');\n          this.scrollSelectedIntoView();\n          if (this.pending && this.pending.length > 0) {\n            // auto select the next pending click\n            const nextId = this.pending.shift();\n            if (nextId && items.length > 0) {\n              const nextItem = findItem(items, nextId);\n              if (nextItem.item) {\n                this.handleItemClicked(null, nextItem.item);\n              } else {\n                this.fireNoPath(nextId);\n              }\n            }\n          } else {\n            // auto select the first item\n            if (\n              selectFirst &&\n              items.length > 0 &&\n              this.selection.length >= 1 &&\n              !item.inline\n            ) {\n              for (const item of items) {\n                if (!item.type) {\n                  this.handleItemClicked(null, item);\n                  break;\n                }\n              }\n            }\n          }\n        }\n      );\n    }\n  }\n\n  private handleItemClicked(\n    event: MouseEvent,\n    menuItem: MenuItem,\n    parent: MenuItem = null\n  ) {\n    if (parent && parent.inline) {\n      this.handleItemClicked(null, parent);\n    }\n\n    if (this.collapsed) {\n      this.collapsed = false;\n    }\n\n    if (event) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    if (menuItem.type == 'modax-button') {\n      this.fireCustomEvent(CustomEventType.ButtonClicked, {\n        title: menuItem.name,\n        href: menuItem.href,\n        on_submit: menuItem.on_submit,\n      });\n      return;\n    }\n\n    if (menuItem.trigger) {\n      new Function(menuItem.trigger)();\n    } else {\n      if (menuItem.level === 0) {\n        /* this.expanding = menuItem.id;\n        window.setTimeout(() => {\n          this.expanding = null;\n        }, 60);\n        */\n      }\n\n      // update our selection\n      if (menuItem.level >= this.selection.length) {\n        this.selection.push(menuItem.vanity_id || menuItem.id);\n      } else {\n        this.selection.splice(\n          menuItem.level,\n          this.selection.length - menuItem.level,\n          menuItem.vanity_id || menuItem.id\n        );\n      }\n\n      if (menuItem.endpoint) {\n        this.loadItems(menuItem, !menuItem.href);\n        this.dispatchEvent(new Event('change'));\n      } else {\n        if (this.pending && this.pending.length > 0) {\n          // auto select the next pending click\n          const nextId = this.pending.shift();\n          const item = this.getMenuItem();\n          if (nextId && item && item.items && item.items.length > 0) {\n            const nextItem = findItem(item.items, nextId).item;\n            if (nextItem) {\n              this.handleItemClicked(null, nextItem);\n            } else {\n              this.fireNoPath(nextId);\n            }\n          } else {\n            this.fireNoPath(nextId);\n          }\n        } else {\n          this.dispatchEvent(new Event('change'));\n        }\n        this.requestUpdate('root');\n      }\n    }\n  }\n\n  public scrollSelectedIntoView() {\n    // makes sure we are scrolled into view\n    window.setTimeout(() => {\n      const eles = this.shadowRoot.querySelectorAll('.selected');\n      eles.forEach(ele => {\n        ele.scrollIntoView({ block: 'end', behavior: 'smooth' });\n      });\n    }, 0);\n  }\n\n  public clickItem(id: string): boolean {\n    const path = [...this.selection];\n    path.splice(path.length - 1, 1, id);\n    const item = this.getMenuItemForSelection(path);\n\n    if (item) {\n      this.handleItemClicked(null, item);\n      this.scrollSelectedIntoView();\n      return true;\n    }\n    return false;\n  }\n\n  public getMenuItem(): MenuItem {\n    return this.getMenuItemForSelection([...this.selection]);\n  }\n\n  public getMenuItemForSelection(selection: string[]) {\n    const path = [...selection];\n    let items = this.root.items;\n    let item = null;\n    while (path.length > 0) {\n      const step = path.splice(0, 1)[0];\n      if (items) {\n        item = findItem(items, step).item;\n        if (item) {\n          items = item.items;\n        } else {\n          break;\n        }\n      } else {\n        break;\n      }\n    }\n\n    return item;\n  }\n\n  public getSelection() {\n    return this.selection;\n  }\n\n  public setSelection(path: string[]) {\n    this.pending = [...path];\n    this.selection = [];\n\n    if (this.wait) {\n      this.wait = false;\n      this.loadItems(this.root);\n    }\n  }\n\n  public setSelectionPath(path: string) {\n    const asPath = path.split('/').filter(step => !!step);\n\n    // first try to click in the current space\n    const clicked = this.clickItem(asPath[asPath.length - 1]);\n\n    if (!clicked) {\n      this.wait = true;\n      this.setSelection(asPath);\n    }\n  }\n\n  public async setFocusedItem(path: string) {\n    const focusedPath = path.split('/').filter(step => !!step);\n\n    // if we don't match at the first level, we are a noop\n    if (focusedPath.length > 0) {\n      const rootItem = findItem(this.root.items, focusedPath[0]).item;\n      if (!rootItem) {\n        return;\n      }\n    }\n\n    const newPath = [];\n    let level = this.root;\n    while (focusedPath.length > 0) {\n      const nextId = focusedPath.shift();\n      if (nextId) {\n        if (!level.items) {\n          this.loadItems(level, false);\n          await this.httpComplete;\n        }\n\n        level = findItem(level.items, nextId).item;\n        if (!level) {\n          focusedPath.splice(0, focusedPath.length);\n        } else {\n          newPath.push(nextId);\n        }\n      }\n    }\n\n    this.selection = newPath;\n    this.requestUpdate('root');\n  }\n\n  private isSelected(menuItem: MenuItem) {\n    if (menuItem.level < this.selection.length) {\n      const selected =\n        this.selection[menuItem.level] == (menuItem.vanity_id || menuItem.id);\n      return selected;\n    }\n    return false;\n  }\n\n  private isExpanded(menuItem: MenuItem) {\n    const expanded = !!this.selection.find(\n      id => id === menuItem.vanity_id || menuItem.id\n    );\n    return expanded;\n  }\n\n  private renderMenuItem = (\n    menuItem: MenuItem,\n    parent: MenuItem = null\n  ): TemplateResult => {\n    if (menuItem.type === 'divider') {\n      return html`<div class=\"divider\"></div>`;\n    }\n\n    if (menuItem.type === 'space') {\n      return html`<div class=\"space\"></div>`;\n    }\n\n    if (menuItem.type === 'section' || menuItem.inline) {\n      return html`<div class=\"sub-section\">${menuItem.name}</div>`;\n    }\n\n    if (menuItem.type === 'modax-button') {\n      return html`<temba-button\n        name=${menuItem.name}\n        @click=${event => {\n          this.handleItemClicked(event, menuItem);\n        }}\n      />`;\n    }\n\n    const isSelected = this.isSelected(menuItem);\n    const isChildSelected =\n      isSelected && this.selection.length > menuItem.level + 1;\n\n    const icon = menuItem.icon\n      ? html`<temba-icon\n            size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n            name=\"${menuItem.icon}\"\n          ></temba-icon\n          >${menuItem.bubble\n            ? html`<div\n                style=\"background-color: ${menuItem.bubble}\"\n                class=\"bubble\"\n              ></div>`\n            : null}`\n      : null;\n\n    const collapsedIcon = menuItem.collapsed_icon\n      ? html`<temba-icon\n          size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n          name=\"${menuItem.collapsed_icon}\"\n          class=\"collapse-icon\"\n        ></temba-icon>`\n      : null;\n\n    const itemClasses = getClasses({\n      ['menu-' + menuItem.id]: true,\n      'child-selected': isChildSelected,\n      selected: isSelected,\n      item: true,\n      inline: menuItem.inline,\n      expanding: this.expanding && this.expanding === menuItem.id,\n      expanded: this.isExpanded(menuItem),\n      iconless: !icon && !collapsedIcon,\n    });\n\n    const item = html` <div\n        class=\"item-top ${isSelected ? 'selected' : null} \"\n      ></div>\n\n      <div\n        id=\"menu-${menuItem.id}\"\n        class=\"${itemClasses}\"\n        @click=${event => {\n          this.handleItemClicked(event, menuItem, parent);\n        }}\n      >\n        ${menuItem.level === 0\n          ? html`<temba-tip\n              style=\"display:flex;\"\n              text=\"${menuItem.name}\"\n              position=\"right\"\n              >${icon}</temba-tip\n            >`\n          : html`${icon}${collapsedIcon}`}\n\n        <div class=\"details\" style=\"flex-grow:1;display:flex\">\n          <div\n            class=\"name\"\n            style=\"flex-grow:1; flex-shrink:0; white-space: ${this.wraps\n              ? 'normal'\n              : 'nowrap'};\"\n          >\n            ${menuItem.name}\n          </div>\n          ${menuItem.level > 0\n            ? menuItem.inline\n              ? html`<temba-icon\n                  name=\"chevron-${isSelected || isChildSelected\n                    ? 'up'\n                    : 'down'}\"\n                ></temba-icon>`\n              : html`${menuItem.count || menuItem.count == 0\n                  ? html`\n                      <div class=\"count\">\n                        ${menuItem.count.toLocaleString()}\n                      </div>\n                    `\n                  : html`<div class=\"count\"></div>`}`\n            : null}\n        </div>\n        <div class=\"right\"></div>\n      </div>\n\n      <div class=\"item-bottom ${isSelected ? 'selected' : null}\"></div>`;\n\n    return item;\n  };\n\n  public render(): TemplateResult {\n    if (!this.root || !this.root.items) {\n      return html`<temba-loading\n        units=\"3\"\n        size=\"10\"\n        direction=\"column\"\n        style=\"margin:1em;margin-right:0em\"\n      />`;\n    }\n\n    let items = this.root.items || [];\n    const levels = [];\n\n    levels.push(\n      html`<div class=\"level level-0 ${this.submenu ? 'hidden' : ''}\">\n        <div class=\"top\"></div>\n\n        ${items\n          .filter(item => !item.bottom)\n          .map((item: MenuItem) => {\n            return this.renderMenuItem(item);\n          })}\n\n        <div class=\"empty\"></div>\n        ${items\n          .filter(item => !!item.bottom)\n          .map((item: MenuItem) => {\n            return this.renderMenuItem(item);\n          })}\n        <div class=\"bottom\"></div>\n      </div>`\n    );\n\n    this.selection.forEach((id, index) => {\n      const selected = findItem(items, id).item;\n\n      let collapsed = false;\n      if (selected) {\n        items = selected.items;\n        const itemState = this.getMenuItemState(selected.id);\n        // users set an explicit collapse state\n        if (itemState.collapsed) {\n          collapsed = itemState.collapsed === 'collapsed';\n        }\n        // otherwise pick a default collapse state\n        else {\n          if (this.selection.length > selected.level + 2) {\n            collapsed = false;\n          }\n        }\n      } else {\n        items = null;\n      }\n\n      if (items && items.length > 0 && !selected.inline) {\n        levels.push(\n          html`<div\n            class=\"${getClasses({\n              level: true,\n              ['level-' + (index + 1)]: true,\n              collapsed,\n            })}\"\n          >\n            ${!this.submenu\n              ? html`<div class=\"section\">${selected.name}</div>`\n              : null}\n            ${items.map((item: MenuItem) => {\n              if (item.inline && item.items) {\n                return html`${this.renderMenuItem(item)}\n                  <div class=\"inline-children\">\n                    ${(item.items || []).map((child: MenuItem) => {\n                      return this.renderMenuItem(child, item);\n                    })}\n                  </div>`;\n              }\n              return this.renderMenuItem(item);\n            })}\n          </div>`\n        );\n      }\n    });\n\n    const menu = html`<div\n      class=\"${getClasses({\n        root: true,\n        'fully-collapsed': this.collapsed,\n      })}\"\n    >\n      ${levels}\n    </div>`;\n    return html`${menu}`;\n  }\n}\n"]}
+{"version":3,"file":"TembaMenu.js","sourceRoot":"","sources":["../../../src/list/TembaMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { fetchResults, getClasses } from '../utils';\n\nexport interface MenuItem {\n  id?: string;\n  vanity_id?: string;\n  name?: string;\n  count?: number;\n  icon?: string;\n  collapsed_icon?: string;\n  endpoint?: string;\n  loading?: boolean;\n  bottom?: boolean;\n  level?: number;\n  trigger?: string;\n  href?: string;\n  show_header?: boolean;\n  items?: MenuItem[];\n  inline?: boolean;\n  type?: string;\n  on_submit?: string;\n  bubble?: string;\n}\n\ninterface MenuItemState {\n  collapsed?: string;\n}\n\nconst findItem = (\n  items: MenuItem[],\n  id: string\n): { item: MenuItem; index: number } => {\n  const search = items || [];\n\n  const index = search.findIndex((item: MenuItem) => {\n    return item.id == id || item.vanity_id == id;\n  });\n\n  if (index > -1) {\n    const item = search[index];\n    return { item, index };\n  }\n\n  return { item: null, index: -1 };\n};\n\nexport class TembaMenu extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        width: 100%;\n        display: block;\n        --color-widget-bg-focused: transparent;\n        --options-block-shadow: none;\n      }\n\n      .bubble {\n        width: 8px;\n        height: 8px;\n        left: 14px;\n        bottom: -1px;\n        z-index: 10000;\n        border-radius: 99px;\n        border: 1px solid rgb(255, 255, 255);\n        position: relative;\n        margin-top: -10px;\n      }\n\n      .section {\n        font-size: 1.5em;\n        margin-bottom: 0.2em;\n        color: var(--color-text-dark);\n      }\n\n      .collapse-toggle {\n        width: 0.5em;\n        cursor: pointer;\n        display: block;\n        margin-right: 5px;\n        margin-top: 3px;\n        margin-bottom: 3px;\n      }\n\n      .collapse-toggle:hover {\n        background: rgb(100, 100, 100, 0.05);\n      }\n\n      .item {\n        cursor: pointer;\n        user-select: none;\n        -webkit-user-select: none;\n        display: flex;\n        font-size: 1em;\n        --icon-color: var(--color-text-dark);\n      }\n\n      .item.selected {\n        background: var(--color-selection);\n        color: var(--color-primary-dark);\n        --icon-color: var(--color-primary-dark);\n      }\n\n      .root {\n        display: flex;\n        flex-direction: row;\n        height: 100%;\n      }\n\n      .level {\n        display: flex;\n        flex-direction: column;\n      }\n\n      .level.hidden {\n        display: none;\n      }\n\n      .submenu {\n      }\n\n      .level-0 > .item {\n        background: var(--color-primary-dark);\n        --icon-color: #fff;\n        font-size: 1em;\n      }\n\n      .level-0 > .top {\n        padding-top: var(--menu-padding);\n        background: var(--color-primary-dark);\n        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      .level-0 > .item > .details {\n        display: none !important;\n      }\n\n      .level-0.expanding {\n      }\n\n      .level-0.expanded {\n        background: inherit;\n      }\n\n      .level-0 > .item.selected {\n        background: inherit;\n        --icon-color: var(--color-primary-dark);\n      }\n\n      .level {\n        padding: var(--menu-padding);\n      }\n\n      .level-0 {\n        padding: 0px;\n        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        max-width: 12em;\n      }\n\n      .item > temba-icon {\n        margin-right: 0.5em;\n      }\n\n      .item.inline > temba-icon {\n      }\n\n      .item > .details > .name {\n        flex-grow: 1;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 0;\n      }\n\n      .level-0 > .item {\n        padding: 1em 1em;\n        margin-top: 0em;\n        border-radius: 0px;\n        min-width: inherit;\n        max-width: inherit;\n      }\n\n      .level-0 > .item > temba-icon {\n        margin-right: 0px;\n      }\n\n      .level-0 > .item > .name {\n        min-width: 0px;\n      }\n\n      .count {\n        align-self: center;\n        margin-left: 1em;\n        font-size: 0.8em;\n        font-weight: 400;\n      }\n\n      .level-0 > .item-top {\n        background: var(--color-primary-dark);\n        min-height: var(--curvature);\n      }\n\n      .level-0 > .item-bottom {\n        background: var(--color-primary-dark);\n        min-height: var(--curvature);\n      }\n\n      .level-0 > .item-bottom.selected {\n        border-top-right-radius: var(--curvature);\n      }\n\n      .level-0 > .item-top.selected {\n        border-bottom-right-radius: var(--curvature);\n      }\n\n      .level-0 > .selected-top {\n      }\n\n      .level-0 > .item:hover {\n        background: rgba(var(--primary-rgb), 0.85);\n      }\n\n      .level-0 > .item.selected:hover {\n        background: inherit;\n      }\n\n      .inline-children {\n      }\n\n      .inline-children .item {\n      }\n\n      .item.inline {\n        border: 0px solid transparent;\n      }\n\n      .level-1,\n      .level-2 {\n        border-right: 1px solid rgba(0 0 0 / 8%);\n        box-shadow: rgb(0 0 0 / 6%) 4px 0px 6px 1px;\n      }\n\n      .level-1 {\n        transition: opacity 100ms linear, margin 200ms linear;\n        overflow-y: scroll;\n        z-index: 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-0 {\n        z-index: 1;\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    if (parent && parent.inline) {\n      this.handleItemClicked(null, parent);\n    }\n\n    if (this.collapsed) {\n      this.collapsed = false;\n    }\n\n    if (event) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    if (menuItem.type == 'modax-button') {\n      this.fireCustomEvent(CustomEventType.ButtonClicked, {\n        title: menuItem.name,\n        href: menuItem.href,\n        on_submit: menuItem.on_submit,\n      });\n      return;\n    }\n\n    if (menuItem.trigger) {\n      new Function(menuItem.trigger)();\n    } else {\n      if (menuItem.level === 0) {\n        /* this.expanding = menuItem.id;\n        window.setTimeout(() => {\n          this.expanding = null;\n        }, 60);\n        */\n      }\n\n      // update our selection\n      if (menuItem.level >= this.selection.length) {\n        this.selection.push(menuItem.vanity_id || menuItem.id);\n      } else {\n        this.selection.splice(\n          menuItem.level,\n          this.selection.length - menuItem.level,\n          menuItem.vanity_id || menuItem.id\n        );\n      }\n\n      if (menuItem.endpoint) {\n        this.loadItems(menuItem, true);\n        this.dispatchEvent(new Event('change'));\n      } else {\n        if (this.pending && this.pending.length > 0) {\n          // auto select the next pending click\n          const nextId = this.pending.shift();\n          const item = this.getMenuItem();\n          if (nextId && item && item.items && item.items.length > 0) {\n            const nextItem = findItem(item.items, nextId).item;\n            if (nextItem) {\n              this.handleItemClicked(null, nextItem);\n            } else {\n              this.fireNoPath(nextId);\n            }\n          } else {\n            this.fireNoPath(nextId);\n          }\n        } else {\n          this.dispatchEvent(new Event('change'));\n        }\n        this.requestUpdate('root');\n      }\n    }\n  }\n\n  public scrollSelectedIntoView() {\n    // makes sure we are scrolled into view\n    window.setTimeout(() => {\n      const eles = this.shadowRoot.querySelectorAll('.selected');\n      eles.forEach(ele => {\n        ele.scrollIntoView({ block: 'end', behavior: 'smooth' });\n      });\n    }, 0);\n  }\n\n  public clickItem(id: string): boolean {\n    const path = [...this.selection];\n    path.splice(path.length - 1, 1, id);\n    const item = this.getMenuItemForSelection(path);\n\n    if (item) {\n      this.handleItemClicked(null, item);\n      this.scrollSelectedIntoView();\n      return true;\n    }\n    return false;\n  }\n\n  public getMenuItem(): MenuItem {\n    return this.getMenuItemForSelection([...this.selection]);\n  }\n\n  public getMenuItemForSelection(selection: string[]) {\n    const path = [...selection];\n    let items = this.root.items;\n    let item = null;\n    while (path.length > 0) {\n      const step = path.splice(0, 1)[0];\n      if (items) {\n        item = findItem(items, step).item;\n        if (item) {\n          items = item.items;\n        } else {\n          break;\n        }\n      } else {\n        break;\n      }\n    }\n\n    return item;\n  }\n\n  public getSelection() {\n    return this.selection;\n  }\n\n  public setSelection(path: string[]) {\n    this.pending = [...path];\n    this.selection = [];\n\n    if (this.wait) {\n      this.wait = false;\n      this.loadItems(this.root);\n    }\n  }\n\n  public setSelectionPath(path: string) {\n    const asPath = path.split('/').filter(step => !!step);\n\n    // first try to click in the current space\n    const clicked = this.clickItem(asPath[asPath.length - 1]);\n\n    if (!clicked) {\n      this.wait = true;\n      this.setSelection(asPath);\n    }\n  }\n\n  public 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 renderMenuItem = (\n    menuItem: MenuItem,\n    parent: MenuItem = null\n  ): TemplateResult => {\n    if (menuItem.type === 'divider') {\n      return html`<div class=\"divider\"></div>`;\n    }\n\n    if (menuItem.type === 'space') {\n      return html`<div class=\"space\"></div>`;\n    }\n\n    if (menuItem.type === 'section' || menuItem.inline) {\n      return html`<div class=\"sub-section\">${menuItem.name}</div>`;\n    }\n\n    if (menuItem.type === 'modax-button') {\n      return html`<temba-button\n        name=${menuItem.name}\n        @click=${event => {\n          this.handleItemClicked(event, menuItem);\n        }}\n      />`;\n    }\n\n    const isSelected = this.isSelected(menuItem);\n    const isChildSelected =\n      isSelected && this.selection.length > menuItem.level + 1;\n\n    const icon = menuItem.icon\n      ? html`<temba-icon\n            size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n            name=\"${menuItem.icon}\"\n          ></temba-icon\n          >${menuItem.bubble\n            ? html`<div\n                style=\"background-color: ${menuItem.bubble}\"\n                class=\"bubble\"\n              ></div>`\n            : null}`\n      : null;\n\n    const collapsedIcon = menuItem.collapsed_icon\n      ? html`<temba-icon\n          size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n          name=\"${menuItem.collapsed_icon}\"\n          class=\"collapse-icon\"\n        ></temba-icon>`\n      : null;\n\n    const itemClasses = getClasses({\n      ['menu-' + menuItem.id]: true,\n      'child-selected': isChildSelected,\n      selected: isSelected,\n      item: true,\n      inline: menuItem.inline,\n      expanding: this.expanding && this.expanding === menuItem.id,\n      expanded: this.isExpanded(menuItem),\n      iconless: !icon && !collapsedIcon,\n    });\n\n    const item = html` <div\n        class=\"item-top ${isSelected ? 'selected' : null} \"\n      ></div>\n\n      <div\n        id=\"menu-${menuItem.id}\"\n        class=\"${itemClasses}\"\n        @click=${event => {\n          this.handleItemClicked(event, menuItem, parent);\n        }}\n      >\n        ${menuItem.level === 0\n          ? html`<temba-tip\n              style=\"display:flex;\"\n              text=\"${menuItem.name}\"\n              position=\"right\"\n              >${icon}</temba-tip\n            >`\n          : html`${icon}${collapsedIcon}`}\n\n        <div class=\"details\" style=\"flex-grow:1;display:flex\">\n          <div\n            class=\"name\"\n            style=\"flex-grow:1; flex-shrink:0; white-space: ${this.wraps\n              ? 'normal'\n              : 'nowrap'};\"\n          >\n            ${menuItem.name}\n          </div>\n          ${menuItem.level > 0\n            ? menuItem.inline\n              ? html`<temba-icon\n                  name=\"chevron-${isSelected || isChildSelected\n                    ? 'up'\n                    : 'down'}\"\n                ></temba-icon>`\n              : html`${menuItem.count || menuItem.count == 0\n                  ? html`\n                      <div class=\"count\">\n                        ${menuItem.count.toLocaleString()}\n                      </div>\n                    `\n                  : html`<div class=\"count\"></div>`}`\n            : null}\n        </div>\n        <div class=\"right\"></div>\n      </div>\n\n      <div class=\"item-bottom ${isSelected ? 'selected' : null}\"></div>`;\n\n    return item;\n  };\n\n  public render(): TemplateResult {\n    if (!this.root || !this.root.items) {\n      return html`<temba-loading\n        units=\"3\"\n        size=\"10\"\n        direction=\"column\"\n        style=\"margin:1em;margin-right:0em\"\n      />`;\n    }\n\n    let items = this.root.items || [];\n    const levels = [];\n\n    levels.push(\n      html`<div class=\"level level-0 ${this.submenu ? 'hidden' : ''}\">\n        <div class=\"top\">\n          <div class=\"expand-icon\" @click=${this.handleExpand}>\n            <temba-icon\n              name=\"menu-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=\"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/out-tsc/src/options/Options.js

@@ -33,7 +33,7 @@ export class Options extends RapidElement {
     static get styles() {
         return css `
       .options-container {
-        background: var(--color-widget-bg-focused);
+        background: var(--color-options-bg);
         user-select: none;
         border-radius: var(--curvature-widget);
         overflow: hidden;
@@ -401,7 +401,13 @@ export class Options extends RapidElement {
                     this.poppedTop = false;
                 }
                 this.left = anchorBounds.left;
-                this.width = anchorBounds.width - 2 - this.marginHorizontal * 2;
+                this.width =
+                    this.staticWidth > 0
+                        ? this.staticWidth
+                        : anchorBounds.width - 2 - this.marginHorizontal * 2;
+                if (this.anchorRight) {
+                    this.left = anchorBounds.right - this.width;
+                }
             }
         }
     }
@@ -515,6 +521,12 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], Options.prototype, "width", void 0);
+__decorate([
+    property({ type: Number, attribute: 'static-width' })
+], Options.prototype, "staticWidth", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'anchor-right' })
+], Options.prototype, "anchorRight", void 0);
 __decorate([
     property({ type: Number })
 ], Options.prototype, "marginHorizontal", void 0);