@nyaruka/temba-components 0.48.7 → 0.49.0

package/dist/sw.js

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

package/dist/templates/components-body.html

@@ -1 +1 @@
-<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/22788131.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.48.7"</script>
+<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/3819e8ba.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.49.0"</script>

package/dist/templates/components-head.html

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

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

@@ -577,6 +577,7 @@ export class TembaMenu extends RapidElement {
         id="menu-${menuItem.id}"
         class="${itemClasses}"
         @click=${event => {
+                event.preventDefault();
                 this.pressedItem = null;
                 this.handleItemClicked(event, menuItem, parent);
             }}
@@ -752,6 +753,10 @@ export class TembaMenu extends RapidElement {
     }
     handleItemClicked(event, menuItem, parent = null) {
         if (parent && parent.popup) {
+            const dropdown = this.shadowRoot.querySelector('temba-dropdown');
+            if (dropdown) {
+                dropdown.blur();
+            }
             if (event) {
                 this.fireCustomEvent(CustomEventType.ButtonClicked, {
                     item: menuItem,
@@ -990,7 +995,7 @@ export class TembaMenu extends RapidElement {
 
                     ${index == 0 && !this.collapsed
                         ? html `<temba-icon
-                          name="${Icon.menu_collapse}"
+                          name=${Icon.menu_collapse}
                           size="1.1"
                           @click=${this.handleCollapse}
                         ></temba-icon>`

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

@@ -1 +1 @@
-{"version":3,"file":"TembaMenu.js","sourceRoot":"","sources":["../../../src/list/TembaMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { debounce, fetchResults, getClasses, renderAvatar } from '../utils';\nimport { Icon } from '../vectoricon';\nexport interface MenuItem {\n  id?: string;\n  vanity_id?: string;\n  name?: string;\n  verbose_name?: string;\n  count?: number;\n  icon?: string;\n  collapsed_icon?: string;\n  endpoint?: string;\n  loading?: boolean;\n  bottom?: boolean;\n  level?: number;\n  href?: string;\n  show_header?: boolean;\n  items?: MenuItem[];\n  inline?: boolean;\n  type?: string;\n  on_submit?: string;\n  bubble?: string;\n  popup?: boolean;\n  avatar?: string;\n  trigger?: boolean;\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: 0.6em;\n        height: 0.6em;\n        right: 0em;\n        bottom: 0em;\n        border-radius: 99em;\n        border: 0.12em solid rgba(0, 0, 0, 0.1);\n        position: absolute;\n      }\n\n      .bubble.count {\n        position: relative;\n        width: inherit;\n        height: inherit;\n        right: inherit;\n        bottom: inherit;\n        color: #fff;\n        line-height: 1em;\n        padding: 0.12em;\n        min-width: 1em;\n        text-align: center;\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        --icon-color: var(--color-text-dark);\n      }\n\n      .item.selected,\n      .item.pressed {\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      .level-0 > .item,\n      .level-0 > temba-dropdown > div[slot='toggle'] > .avatar {\n        padding: 0px;\n        --icon-color: rgba(255, 255, 255, 0.7);\n        flex-direction: column;\n        border: 0px solid green;\n        width: 100%;\n        display: flex;\n        align-items: center;\n      }\n\n      .level-0 > temba-dropdown .icon-wrapper {\n        padding: 0.2em 0.4em 0.2em 0.4em;\n      }\n\n      .level-0 > .item.selected::before,\n      .level-0 > .item.selected::after {\n        content: ' ';\n        height: var(--curvature);\n        background: var(--color-primary-dark);\n        display: block;\n        width: 100%;\n      }\n\n      .level-0 > .item.selected::before {\n        border-bottom-right-radius: var(--curvature);\n      }\n\n      .level-0 > .item > temba-tip {\n        padding: 0.5em;\n      }\n\n      .level-0 > .item.selected::after {\n        border-top-right-radius: var(--curvature);\n      }\n\n      .level-0 {\n        padding-top: var(--menu-padding) !important;\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 > temba-dropdown.open > div[slot='toggle'] > .avatar {\n        background: transparent !important;\n      }\n\n      .level-0 {\n        background: var(--color-primary-dark);\n      }\n\n      temba-dropdown {\n        z-index: 1;\n      }\n\n      temba-dropdown > div[slot='dropdown'] .avatar > .details {\n        margin-left: 0.75em;\n      }\n\n      temba-dropdown > div[slot='dropdown'] .bubble.count {\n        margin-right: 0.75em;\n      }\n\n      .level-0 > .item > .details,\n      .level-0 > temba-dropdown > div[slot='toggle'] > .avatar > .details {\n        display: none !important;\n      }\n\n      .avatar {\n        align-items: center;\n      }\n\n      temba-dropdown > div[slot='dropdown'] .avatar .avatar-circle,\n      temba-dropdown > div[slot='dropdown'] .avatar .bubble {\n        font-size: 0.7em;\n      }\n\n      .level-0.expanded {\n        background: inherit;\n      }\n\n      .level-0 > .item.selected {\n        background: white;\n        --icon-color: var(--color-primary-dark);\n      }\n\n      .level {\n        padding: var(--menu-padding);\n      }\n\n      .level-0 {\n        padding: 0px;\n      }\n\n      .top {\n        display: flex;\n        align-items: center;\n        flex-direction: column;\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        position: relative;\n      }\n\n      .item > temba-icon {\n        margin-right: 0.5em;\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        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 > .item:hover {\n        background: rgba(255, 255, 255, 0.15);\n        --icon-color: #fff;\n      }\n\n      .level-0 > .item.selected:hover {\n        background: white;\n        --icon-color: var(--color-primary-dark);\n        cursor: default;\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      }\n\n      .level-2 {\n        background: #fbfbfb;\n        overflow-y: auto;\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      .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      .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: 0.9rem;\n        color: #888;\n        margin-top: 1rem;\n        margin-left: 0.3rem;\n      }\n\n      .fully-collapsed .level-1 {\n        margin-left: -208px;\n        pointer-events: none;\n        border: none;\n        overflow: hidden;\n      }\n\n      .fully-collapsed .level-1 > * {\n        opacity: 0;\n      }\n\n      .fully-collapsed .level-1 .item,\n      .fully-collapsed .level-1 .divider {\n        opacity: 0;\n      }\n\n      .fully-collapsed .level-2,\n      .fully-collapsed .level-3 {\n        display: none;\n      }\n\n      temba-button {\n        margin-top: 0.2em;\n        margin-bottom: 0.2em;\n        margin-left: 0.75em;\n        margin-right: 0.75em;\n      }\n\n      .expand-icon {\n        transform: rotate(180deg);\n        --icon-color: rgba(255, 255, 255, 0.5);\n        cursor: pointer;\n        max-height: 0px;\n        overflow: hidden;\n        opacity: 0;\n        transition: all 400ms ease-in-out 400ms;\n      }\n\n      .expand-icon:hover {\n        --icon-color: #fff;\n      }\n\n      .fully-collapsed .expand-icon {\n        padding-top: 0.5em;\n        max-height: 2em;\n        opacity: 1;\n      }\n\n      .section-header {\n        display: flex;\n        align-items: center;\n      }\n\n      .section-header .section {\n        flex-grow: 1;\n      }\n\n      .section-header temba-icon {\n        --icon-color: #ddd;\n        cursor: pointer;\n        padding-bottom: 0.5em;\n        padding-right: 0.5em;\n      }\n\n      .section-header temba-icon:hover {\n        --icon-color: var(--color-link-primary);\n      }\n\n      a {\n        text-decoration: none;\n        color: var(--color-text-dark);\n      }\n\n      slot[name='header'] {\n        display: none;\n      }\n\n      slot[name='header'].show-header {\n        display: block;\n      }\n\n      .icon-wrapper {\n        position: relative;\n        padding: 0.2em 0.4em 0.2em 0em;\n      }\n\n      .level-0 .icon-wrapper {\n        padding: 0.4em;\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  @property({ type: Object })\n  pressedItem: MenuItem;\n\n  // http promise to monitor for completeness\n  public httpComplete: Promise<void>;\n\n  root: MenuItem;\n  selection: string[] = [];\n  state: { [id: string]: MenuItemState } = {};\n\n  constructor() {\n    super();\n    this.doRefresh = this.doRefresh.bind(this);\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('endpoint')) {\n      this.root = {\n        level: -1,\n        endpoint: this.endpoint,\n      };\n\n      if (!this.wait) {\n        this.loadItems(this.root);\n      } else {\n        this.fireCustomEvent(CustomEventType.Ready);\n      }\n    }\n\n    if (changes.has('root')) {\n      if (this.value) {\n        this.setFocusedItem(this.value);\n        this.value = null;\n      }\n    }\n  }\n\n  public reset() {\n    this.loadItems(this.root);\n  }\n\n  public async doRefresh() {\n    const path = [...this.selection];\n    let item = this.root;\n\n    while (path.length > 0) {\n      this.loadItems(item);\n      // we need to wait until the load is complete before doing the replace\n      await this.httpComplete;\n      const id = path.shift();\n      item = (item.items || []).find(_item => _item.id == id);\n    }\n\n    this.loadItems(item);\n  }\n\n  public refresh = debounce(this.doRefresh, 200);\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private loadItems(item: MenuItem, event: MouseEvent = null) {\n    if (item && item.endpoint) {\n      item.loading = true;\n      this.httpComplete = fetchResults(item.endpoint).then(\n        (items: MenuItem[]) => {\n          items.forEach(newItem => {\n            if (!newItem.items) {\n              const prevItem = (item.items || []).find(\n                prev => prev.id == newItem.id\n              );\n              if (prevItem && prevItem.items) {\n                newItem.items = prevItem.items;\n              }\n            }\n          });\n\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              });\n            }\n          });\n\n          item.items = items;\n          item.loading = false;\n\n          if (this.submenu && this.selection.length == 0) {\n            const sub = this.getMenuItemForSelection([this.submenu]);\n            this.handleItemClicked(event, sub);\n          }\n\n          if (!this.wait) {\n            this.fireCustomEvent(CustomEventType.Ready);\n            this.wait = true;\n          }\n\n          // once we've set our items check if we need to auto-select\n          if (event && item.items.length > 0) {\n            this.handleItemClicked(event, item.items[0]);\n          }\n\n          this.requestUpdate('root');\n          this.scrollSelectedIntoView();\n        }\n      );\n    }\n  }\n\n  private handleItemClicked(\n    event: MouseEvent,\n    menuItem: MenuItem,\n    parent: MenuItem = null\n  ) {\n    if (parent && parent.popup) {\n      if (event) {\n        this.fireCustomEvent(CustomEventType.ButtonClicked, {\n          item: menuItem,\n          selection: this.getSelection(),\n          parent,\n        });\n      }\n      return;\n    }\n\n    if (menuItem.popup) {\n      if (event) {\n        this.fireCustomEvent(CustomEventType.ButtonClicked, {\n          item: menuItem,\n          selection: this.getSelection(),\n          parent,\n        });\n      }\n      return;\n    }\n\n    if (event) {\n      event.preventDefault();\n      event.stopPropagation();\n      if (event.metaKey && menuItem.href) {\n        window.open(menuItem.href, '_blank');\n        return;\n      }\n    }\n\n    if (parent && parent.inline) {\n      this.handleItemClicked(null, parent);\n    }\n\n    if (this.collapsed) {\n      this.collapsed = false;\n    }\n\n    if (menuItem.trigger) {\n      this.fireCustomEvent(CustomEventType.ButtonClicked, {\n        item: menuItem,\n        selection: this.getSelection(),\n        parent,\n      });\n      return;\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, event);\n\n      // make sure change events fire for events with hrefs\n      if (!menuItem.href) {\n        return;\n      }\n    } else {\n      this.requestUpdate();\n    }\n\n    if (menuItem.href) {\n      this.dispatchEvent(new Event('change'));\n    }\n\n    this.fireCustomEvent(CustomEventType.ButtonClicked, {\n      item: menuItem,\n      selection: this.getSelection(),\n      parent,\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 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    if (!this.root) {\n      return;\n    }\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);\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.refresh();\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    let icon = menuItem.icon\n      ? html`<div class=\"icon-wrapper\">\n          <temba-icon\n            size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n            name=\"${menuItem.icon}\"\n          ></temba-icon\n          >${menuItem.bubble && !menuItem.count\n            ? html`<div\n                style=\"background-color: ${menuItem.bubble}\"\n                class=\"bubble\"\n              ></div>`\n            : null}\n        </div>`\n      : null;\n\n    const collapsedIcon = menuItem.collapsed_icon\n      ? html`<temba-icon\n          size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n          name=\"${menuItem.collapsed_icon}\"\n          class=\"collapse-icon\"\n        ></temba-icon>`\n      : null;\n\n    const itemClasses = getClasses({\n      ['menu-' + menuItem.id]: true,\n      'child-selected': isChildSelected,\n      selected: isSelected,\n      item: !(menuItem.avatar && menuItem.level === 0),\n      avatar: !!menuItem.avatar,\n      inline: menuItem.inline,\n      expanding: this.expanding && this.expanding === menuItem.id,\n      expanded: this.isExpanded(menuItem),\n      iconless: !icon && !collapsedIcon && !menuItem.avatar,\n      pressed: this.pressedItem && this.pressedItem.id == menuItem.id,\n    });\n\n    if (menuItem.avatar) {\n      icon = renderAvatar({ name: menuItem.avatar, tip: false });\n      if (menuItem.bubble) {\n        icon = html`${icon}${menuItem.bubble\n          ? html`<div\n              style=\"background-color: ${menuItem.bubble}\"\n              class=\"bubble\"\n            ></div>`\n          : null}`;\n      }\n      icon = html`<div style=\"position:relative; padding: 0em\">${icon}</div>`;\n    }\n\n    const item = html`\n      <a\n        href=${ifDefined(menuItem.href ? menuItem.href : undefined)}\n        id=\"menu-${menuItem.id}\"\n        class=\"${itemClasses}\"\n        @click=${event => {\n          this.pressedItem = null;\n          this.handleItemClicked(event, menuItem, parent);\n        }}\n        @mousedown=${() => {\n          if (menuItem.level > 0) {\n            this.pressedItem = menuItem;\n          }\n        }}\n        @mouseleave=${() => {\n          this.pressedItem = null;\n        }}\n      >\n        ${menuItem.level === 0\n          ? menuItem.avatar\n            ? icon\n            : html`<temba-tip\n                style=\"display:flex;\"\n                text=\"${menuItem.name}\"\n                position=\"right\"\n                >${icon}</temba-tip\n              >`\n          : html`${icon}${collapsedIcon}`}\n\n        <div class=\"details\" style=\"flex-grow:1;display:flex\">\n          <div\n            class=\"name\"\n            style=\"flex-grow:1; flex-shrink:0; white-space: ${this.wraps\n              ? 'normal'\n              : 'nowrap'};\"\n          >\n            ${menuItem.name}\n          </div>\n          ${menuItem.level > 0\n            ? menuItem.inline\n              ? html`<temba-icon\n                  name=\"${isSelected || isChildSelected\n                    ? Icon.arrow_up\n                    : Icon.arrow_down}\"\n                ></temba-icon>`\n              : html`${menuItem.count || menuItem.count == 0\n                  ? html`\n                      <div\n                        class=\"count ${menuItem.bubble ? 'bubble' : ''}\"\n                        style=\"background-color: ${menuItem.bubble}\"\n                      >\n                        ${menuItem.count.toLocaleString()}\n                      </div>\n                    `\n                  : html`<div class=\"count\"></div>`}`\n            : null}\n        </div>\n        <div class=\"right\"></div>\n      </a>\n    `;\n\n    if (menuItem.popup) {\n      return html`\n        <temba-dropdown offsetx=\"10\" arrowoffset=\"8\" arrowSize=\"0\" mask>\n          <div slot=\"toggle\">${item}</div>\n          <div\n            slot=\"dropdown\"\n            style=\"width:300px;overflow:hidden;padding-bottom:0.5em\"\n          >\n            <div style=\"max-height:400px;overflow-y:auto\">\n              ${(menuItem.items || []).map((child: MenuItem) => {\n                child.level = menuItem.level + 1;\n                return html`${this.renderMenuItem(child, menuItem)}`;\n              })}\n            </div>\n          </div>\n        </temba-dropdown>\n      `;\n    }\n    return item;\n  };\n\n  public render(): TemplateResult {\n    if (!this.root || !this.root.items) {\n      return null;\n    }\n\n    let items = this.root.items || [];\n    const levels = [];\n\n    levels.push(\n      html`<div class=\"level level-0 ${this.submenu ? 'hidden' : ''}\">\n        <div class=\"top\">\n          <div class=\"expand-icon\" @click=${this.handleExpand}>\n            <temba-icon\n              name=\"${Icon.menu_collapse}\"\n              class=\"collapse\"\n              class=\"expand\"\n              size=\"1.4\"\n            ></temba-icon>\n          </div>\n        </div>\n\n        ${items\n          .filter(item => !item.bottom)\n          .map((item: MenuItem) => {\n            return this.renderMenuItem(item);\n          })}\n\n        <div class=\"empty\"></div>\n        ${items\n          .filter(item => !!item.bottom)\n          .map((item: MenuItem) => {\n            return this.renderMenuItem(item);\n          })}\n        <div class=\"bottom\"></div>\n      </div>`\n    );\n\n    this.selection.forEach((id, index) => {\n      const selected = findItem(items, id).item;\n\n      let collapsed = false;\n      if (selected) {\n        items = selected.items;\n        const itemState = this.getMenuItemState(selected.id);\n        // users set an explicit collapse state\n        if (itemState.collapsed) {\n          collapsed = itemState.collapsed === 'collapsed';\n        }\n        // otherwise pick a default collapse state\n        else {\n          if (this.selection.length > selected.level + 2) {\n            collapsed = false;\n          }\n        }\n      } else {\n        items = null;\n      }\n\n      if (items && items.length > 0 && !selected.inline) {\n        levels.push(\n          html`<div\n            class=\"${getClasses({\n              level: true,\n              ['level-' + (index + 1)]: true,\n              collapsed,\n            })}\"\n          >\n            ${!this.submenu\n              ? html`\n                  <slot\n                    class=\"${getClasses({\n                      'show-header': selected.show_header,\n                    })}\"\n                    name=\"header\"\n                  ></slot>\n                  <div class=\"section-header\">\n                    <div class=\"section\">${selected.name}</div>\n\n                    ${index == 0 && !this.collapsed\n                      ? html`<temba-icon\n                          name=\"${Icon.menu_collapse}\"\n                          size=\"1.1\"\n                          @click=${this.handleCollapse}\n                        ></temba-icon>`\n                      : null}\n                  </div>\n                `\n              : null}\n            ${items.map((item: MenuItem) => {\n              if (item.inline && item.items) {\n                return html`${this.renderMenuItem(item)}\n                  <div class=\"inline-children\">\n                    ${(item.items || []).map((child: MenuItem) => {\n                      return this.renderMenuItem(child, item);\n                    })}\n                  </div>`;\n              }\n              return this.renderMenuItem(item);\n            })}\n          </div>`\n        );\n      }\n    });\n\n    const menu = html`<div\n      class=\"${getClasses({\n        root: true,\n        'fully-collapsed': this.collapsed,\n      })}\"\n    >\n      ${levels}\n    </div>`;\n    return html`${menu}`;\n  }\n}\n"]}
+{"version":3,"file":"TembaMenu.js","sourceRoot":"","sources":["../../../src/list/TembaMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { debounce, fetchResults, getClasses, renderAvatar } from '../utils';\nimport { Icon } from '../vectoricon';\nimport { Dropdown } from '../dropdown/Dropdown';\nexport interface MenuItem {\n  id?: string;\n  vanity_id?: string;\n  name?: string;\n  verbose_name?: string;\n  count?: number;\n  icon?: string;\n  collapsed_icon?: string;\n  endpoint?: string;\n  loading?: boolean;\n  bottom?: boolean;\n  level?: number;\n  href?: string;\n  show_header?: boolean;\n  items?: MenuItem[];\n  inline?: boolean;\n  type?: string;\n  on_submit?: string;\n  bubble?: string;\n  popup?: boolean;\n  avatar?: string;\n  trigger?: boolean;\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: 0.6em;\n        height: 0.6em;\n        right: 0em;\n        bottom: 0em;\n        border-radius: 99em;\n        border: 0.12em solid rgba(0, 0, 0, 0.1);\n        position: absolute;\n      }\n\n      .bubble.count {\n        position: relative;\n        width: inherit;\n        height: inherit;\n        right: inherit;\n        bottom: inherit;\n        color: #fff;\n        line-height: 1em;\n        padding: 0.12em;\n        min-width: 1em;\n        text-align: center;\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        --icon-color: var(--color-text-dark);\n      }\n\n      .item.selected,\n      .item.pressed {\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      .level-0 > .item,\n      .level-0 > temba-dropdown > div[slot='toggle'] > .avatar {\n        padding: 0px;\n        --icon-color: rgba(255, 255, 255, 0.7);\n        flex-direction: column;\n        border: 0px solid green;\n        width: 100%;\n        display: flex;\n        align-items: center;\n      }\n\n      .level-0 > temba-dropdown .icon-wrapper {\n        padding: 0.2em 0.4em 0.2em 0.4em;\n      }\n\n      .level-0 > .item.selected::before,\n      .level-0 > .item.selected::after {\n        content: ' ';\n        height: var(--curvature);\n        background: var(--color-primary-dark);\n        display: block;\n        width: 100%;\n      }\n\n      .level-0 > .item.selected::before {\n        border-bottom-right-radius: var(--curvature);\n      }\n\n      .level-0 > .item > temba-tip {\n        padding: 0.5em;\n      }\n\n      .level-0 > .item.selected::after {\n        border-top-right-radius: var(--curvature);\n      }\n\n      .level-0 {\n        padding-top: var(--menu-padding) !important;\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 > temba-dropdown.open > div[slot='toggle'] > .avatar {\n        background: transparent !important;\n      }\n\n      .level-0 {\n        background: var(--color-primary-dark);\n      }\n\n      temba-dropdown {\n        z-index: 1;\n      }\n\n      temba-dropdown > div[slot='dropdown'] .avatar > .details {\n        margin-left: 0.75em;\n      }\n\n      temba-dropdown > div[slot='dropdown'] .bubble.count {\n        margin-right: 0.75em;\n      }\n\n      .level-0 > .item > .details,\n      .level-0 > temba-dropdown > div[slot='toggle'] > .avatar > .details {\n        display: none !important;\n      }\n\n      .avatar {\n        align-items: center;\n      }\n\n      temba-dropdown > div[slot='dropdown'] .avatar .avatar-circle,\n      temba-dropdown > div[slot='dropdown'] .avatar .bubble {\n        font-size: 0.7em;\n      }\n\n      .level-0.expanded {\n        background: inherit;\n      }\n\n      .level-0 > .item.selected {\n        background: white;\n        --icon-color: var(--color-primary-dark);\n      }\n\n      .level {\n        padding: var(--menu-padding);\n      }\n\n      .level-0 {\n        padding: 0px;\n      }\n\n      .top {\n        display: flex;\n        align-items: center;\n        flex-direction: column;\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        position: relative;\n      }\n\n      .item > temba-icon {\n        margin-right: 0.5em;\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        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 > .item:hover {\n        background: rgba(255, 255, 255, 0.15);\n        --icon-color: #fff;\n      }\n\n      .level-0 > .item.selected:hover {\n        background: white;\n        --icon-color: var(--color-primary-dark);\n        cursor: default;\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      }\n\n      .level-2 {\n        background: #fbfbfb;\n        overflow-y: auto;\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      .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      .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: 0.9rem;\n        color: #888;\n        margin-top: 1rem;\n        margin-left: 0.3rem;\n      }\n\n      .fully-collapsed .level-1 {\n        margin-left: -208px;\n        pointer-events: none;\n        border: none;\n        overflow: hidden;\n      }\n\n      .fully-collapsed .level-1 > * {\n        opacity: 0;\n      }\n\n      .fully-collapsed .level-1 .item,\n      .fully-collapsed .level-1 .divider {\n        opacity: 0;\n      }\n\n      .fully-collapsed .level-2,\n      .fully-collapsed .level-3 {\n        display: none;\n      }\n\n      temba-button {\n        margin-top: 0.2em;\n        margin-bottom: 0.2em;\n        margin-left: 0.75em;\n        margin-right: 0.75em;\n      }\n\n      .expand-icon {\n        transform: rotate(180deg);\n        --icon-color: rgba(255, 255, 255, 0.5);\n        cursor: pointer;\n        max-height: 0px;\n        overflow: hidden;\n        opacity: 0;\n        transition: all 400ms ease-in-out 400ms;\n      }\n\n      .expand-icon:hover {\n        --icon-color: #fff;\n      }\n\n      .fully-collapsed .expand-icon {\n        padding-top: 0.5em;\n        max-height: 2em;\n        opacity: 1;\n      }\n\n      .section-header {\n        display: flex;\n        align-items: center;\n      }\n\n      .section-header .section {\n        flex-grow: 1;\n      }\n\n      .section-header temba-icon {\n        --icon-color: #ddd;\n        cursor: pointer;\n        padding-bottom: 0.5em;\n        padding-right: 0.5em;\n      }\n\n      .section-header temba-icon:hover {\n        --icon-color: var(--color-link-primary);\n      }\n\n      a {\n        text-decoration: none;\n        color: var(--color-text-dark);\n      }\n\n      slot[name='header'] {\n        display: none;\n      }\n\n      slot[name='header'].show-header {\n        display: block;\n      }\n\n      .icon-wrapper {\n        position: relative;\n        padding: 0.2em 0.4em 0.2em 0em;\n      }\n\n      .level-0 .icon-wrapper {\n        padding: 0.4em;\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  @property({ type: Object })\n  pressedItem: MenuItem;\n\n  // http promise to monitor for completeness\n  public httpComplete: Promise<void>;\n\n  root: MenuItem;\n  selection: string[] = [];\n  state: { [id: string]: MenuItemState } = {};\n\n  constructor() {\n    super();\n    this.doRefresh = this.doRefresh.bind(this);\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('endpoint')) {\n      this.root = {\n        level: -1,\n        endpoint: this.endpoint,\n      };\n\n      if (!this.wait) {\n        this.loadItems(this.root);\n      } else {\n        this.fireCustomEvent(CustomEventType.Ready);\n      }\n    }\n\n    if (changes.has('root')) {\n      if (this.value) {\n        this.setFocusedItem(this.value);\n        this.value = null;\n      }\n    }\n  }\n\n  public reset() {\n    this.loadItems(this.root);\n  }\n\n  public async doRefresh() {\n    const path = [...this.selection];\n    let item = this.root;\n\n    while (path.length > 0) {\n      this.loadItems(item);\n      // we need to wait until the load is complete before doing the replace\n      await this.httpComplete;\n      const id = path.shift();\n      item = (item.items || []).find(_item => _item.id == id);\n    }\n\n    this.loadItems(item);\n  }\n\n  public refresh = debounce(this.doRefresh, 200);\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private loadItems(item: MenuItem, event: MouseEvent = null) {\n    if (item && item.endpoint) {\n      item.loading = true;\n      this.httpComplete = fetchResults(item.endpoint).then(\n        (items: MenuItem[]) => {\n          items.forEach(newItem => {\n            if (!newItem.items) {\n              const prevItem = (item.items || []).find(\n                prev => prev.id == newItem.id\n              );\n              if (prevItem && prevItem.items) {\n                newItem.items = prevItem.items;\n              }\n            }\n          });\n\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              });\n            }\n          });\n\n          item.items = items;\n          item.loading = false;\n\n          if (this.submenu && this.selection.length == 0) {\n            const sub = this.getMenuItemForSelection([this.submenu]);\n            this.handleItemClicked(event, sub);\n          }\n\n          if (!this.wait) {\n            this.fireCustomEvent(CustomEventType.Ready);\n            this.wait = true;\n          }\n\n          // once we've set our items check if we need to auto-select\n          if (event && item.items.length > 0) {\n            this.handleItemClicked(event, item.items[0]);\n          }\n\n          this.requestUpdate('root');\n          this.scrollSelectedIntoView();\n        }\n      );\n    }\n  }\n\n  private handleItemClicked(\n    event: MouseEvent,\n    menuItem: MenuItem,\n    parent: MenuItem = null\n  ) {\n    if (parent && parent.popup) {\n      const dropdown = this.shadowRoot.querySelector(\n        'temba-dropdown'\n      ) as Dropdown;\n      if (dropdown) {\n        dropdown.blur();\n      }\n\n      if (event) {\n        this.fireCustomEvent(CustomEventType.ButtonClicked, {\n          item: menuItem,\n          selection: this.getSelection(),\n          parent,\n        });\n      }\n      return;\n    }\n\n    if (menuItem.popup) {\n      if (event) {\n        this.fireCustomEvent(CustomEventType.ButtonClicked, {\n          item: menuItem,\n          selection: this.getSelection(),\n          parent,\n        });\n      }\n      return;\n    }\n\n    if (event) {\n      event.preventDefault();\n      event.stopPropagation();\n      if (event.metaKey && menuItem.href) {\n        window.open(menuItem.href, '_blank');\n        return;\n      }\n    }\n\n    if (parent && parent.inline) {\n      this.handleItemClicked(null, parent);\n    }\n\n    if (this.collapsed) {\n      this.collapsed = false;\n    }\n\n    if (menuItem.trigger) {\n      this.fireCustomEvent(CustomEventType.ButtonClicked, {\n        item: menuItem,\n        selection: this.getSelection(),\n        parent,\n      });\n      return;\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, event);\n\n      // make sure change events fire for events with hrefs\n      if (!menuItem.href) {\n        return;\n      }\n    } else {\n      this.requestUpdate();\n    }\n\n    if (menuItem.href) {\n      this.dispatchEvent(new Event('change'));\n    }\n\n    this.fireCustomEvent(CustomEventType.ButtonClicked, {\n      item: menuItem,\n      selection: this.getSelection(),\n      parent,\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 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    if (!this.root) {\n      return;\n    }\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);\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.refresh();\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    let icon = menuItem.icon\n      ? html`<div class=\"icon-wrapper\">\n          <temba-icon\n            size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n            name=\"${menuItem.icon}\"\n          ></temba-icon\n          >${menuItem.bubble && !menuItem.count\n            ? html`<div\n                style=\"background-color: ${menuItem.bubble}\"\n                class=\"bubble\"\n              ></div>`\n            : null}\n        </div>`\n      : null;\n\n    const collapsedIcon = menuItem.collapsed_icon\n      ? html`<temba-icon\n          size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n          name=\"${menuItem.collapsed_icon}\"\n          class=\"collapse-icon\"\n        ></temba-icon>`\n      : null;\n\n    const itemClasses = getClasses({\n      ['menu-' + menuItem.id]: true,\n      'child-selected': isChildSelected,\n      selected: isSelected,\n      item: !(menuItem.avatar && menuItem.level === 0),\n      avatar: !!menuItem.avatar,\n      inline: menuItem.inline,\n      expanding: this.expanding && this.expanding === menuItem.id,\n      expanded: this.isExpanded(menuItem),\n      iconless: !icon && !collapsedIcon && !menuItem.avatar,\n      pressed: this.pressedItem && this.pressedItem.id == menuItem.id,\n    });\n\n    if (menuItem.avatar) {\n      icon = renderAvatar({ name: menuItem.avatar, tip: false });\n      if (menuItem.bubble) {\n        icon = html`${icon}${menuItem.bubble\n          ? html`<div\n              style=\"background-color: ${menuItem.bubble}\"\n              class=\"bubble\"\n            ></div>`\n          : null}`;\n      }\n      icon = html`<div style=\"position:relative; padding: 0em\">${icon}</div>`;\n    }\n\n    const item = html`\n      <a\n        href=${ifDefined(menuItem.href ? menuItem.href : undefined)}\n        id=\"menu-${menuItem.id}\"\n        class=\"${itemClasses}\"\n        @click=${event => {\n          event.preventDefault();\n          this.pressedItem = null;\n          this.handleItemClicked(event, menuItem, parent);\n        }}\n        @mousedown=${() => {\n          if (menuItem.level > 0) {\n            this.pressedItem = menuItem;\n          }\n        }}\n        @mouseleave=${() => {\n          this.pressedItem = null;\n        }}\n      >\n        ${menuItem.level === 0\n          ? menuItem.avatar\n            ? icon\n            : html`<temba-tip\n                style=\"display:flex;\"\n                text=\"${menuItem.name}\"\n                position=\"right\"\n                >${icon}</temba-tip\n              >`\n          : html`${icon}${collapsedIcon}`}\n\n        <div class=\"details\" style=\"flex-grow:1;display:flex\">\n          <div\n            class=\"name\"\n            style=\"flex-grow:1; flex-shrink:0; white-space: ${this.wraps\n              ? 'normal'\n              : 'nowrap'};\"\n          >\n            ${menuItem.name}\n          </div>\n          ${menuItem.level > 0\n            ? menuItem.inline\n              ? html`<temba-icon\n                  name=\"${isSelected || isChildSelected\n                    ? Icon.arrow_up\n                    : Icon.arrow_down}\"\n                ></temba-icon>`\n              : html`${menuItem.count || menuItem.count == 0\n                  ? html`\n                      <div\n                        class=\"count ${menuItem.bubble ? 'bubble' : ''}\"\n                        style=\"background-color: ${menuItem.bubble}\"\n                      >\n                        ${menuItem.count.toLocaleString()}\n                      </div>\n                    `\n                  : html`<div class=\"count\"></div>`}`\n            : null}\n        </div>\n        <div class=\"right\"></div>\n      </a>\n    `;\n\n    if (menuItem.popup) {\n      return html`\n        <temba-dropdown offsetx=\"10\" arrowoffset=\"8\" arrowSize=\"0\" mask>\n          <div slot=\"toggle\">${item}</div>\n          <div\n            slot=\"dropdown\"\n            style=\"width:300px;overflow:hidden;padding-bottom:0.5em\"\n          >\n            <div style=\"max-height:400px;overflow-y:auto\">\n              ${(menuItem.items || []).map((child: MenuItem) => {\n                child.level = menuItem.level + 1;\n                return html`${this.renderMenuItem(child, menuItem)}`;\n              })}\n            </div>\n          </div>\n        </temba-dropdown>\n      `;\n    }\n    return item;\n  };\n\n  public render(): TemplateResult {\n    if (!this.root || !this.root.items) {\n      return null;\n    }\n\n    let items = this.root.items || [];\n    const levels = [];\n\n    levels.push(\n      html`<div class=\"level level-0 ${this.submenu ? 'hidden' : ''}\">\n        <div class=\"top\">\n          <div class=\"expand-icon\" @click=${this.handleExpand}>\n            <temba-icon\n              name=\"${Icon.menu_collapse}\"\n              class=\"collapse\"\n              class=\"expand\"\n              size=\"1.4\"\n            ></temba-icon>\n          </div>\n        </div>\n\n        ${items\n          .filter(item => !item.bottom)\n          .map((item: MenuItem) => {\n            return this.renderMenuItem(item);\n          })}\n\n        <div class=\"empty\"></div>\n        ${items\n          .filter(item => !!item.bottom)\n          .map((item: MenuItem) => {\n            return this.renderMenuItem(item);\n          })}\n        <div class=\"bottom\"></div>\n      </div>`\n    );\n\n    this.selection.forEach((id, index) => {\n      const selected = findItem(items, id).item;\n\n      let collapsed = false;\n      if (selected) {\n        items = selected.items;\n        const itemState = this.getMenuItemState(selected.id);\n        // users set an explicit collapse state\n        if (itemState.collapsed) {\n          collapsed = itemState.collapsed === 'collapsed';\n        }\n        // otherwise pick a default collapse state\n        else {\n          if (this.selection.length > selected.level + 2) {\n            collapsed = false;\n          }\n        }\n      } else {\n        items = null;\n      }\n\n      if (items && items.length > 0 && !selected.inline) {\n        levels.push(\n          html`<div\n            class=\"${getClasses({\n              level: true,\n              ['level-' + (index + 1)]: true,\n              collapsed,\n            })}\"\n          >\n            ${!this.submenu\n              ? html`\n                  <slot\n                    class=\"${getClasses({\n                      'show-header': selected.show_header,\n                    })}\"\n                    name=\"header\"\n                  ></slot>\n                  <div class=\"section-header\">\n                    <div class=\"section\">${selected.name}</div>\n\n                    ${index == 0 && !this.collapsed\n                      ? html`<temba-icon\n                          name=${Icon.menu_collapse}\n                          size=\"1.1\"\n                          @click=${this.handleCollapse}\n                        ></temba-icon>`\n                      : null}\n                  </div>\n                `\n              : null}\n            ${items.map((item: MenuItem) => {\n              if (item.inline && item.items) {\n                return html`${this.renderMenuItem(item)}\n                  <div class=\"inline-children\">\n                    ${(item.items || []).map((child: MenuItem) => {\n                      return this.renderMenuItem(child, item);\n                    })}\n                  </div>`;\n              }\n              return this.renderMenuItem(item);\n            })}\n          </div>`\n        );\n      }\n    });\n\n    const menu = html`<div\n      class=\"${getClasses({\n        root: true,\n        'fully-collapsed': this.collapsed,\n      })}\"\n    >\n      ${levels}\n    </div>`;\n    return html`${menu}`;\n  }\n}\n"]}

package/out-tsc/src/vectoricon/VectorIcon.js

@@ -1,10 +1,8 @@
 import { __decorate } from "tslib";
 import { LitElement, html, css } from 'lit';
 import { property } from 'lit/decorators.js';
-import { Icon } from '.';
+import { Icon, SVG_FINGERPRINT } from '.';
 import { getClasses } from '../utils';
-// for cache busting, increase whenever the icon set changes
-const ICON_VERSION = 15;
 export class VectorIcon extends LitElement {
     static get styles() {
         return css `
@@ -169,7 +167,7 @@ export class VectorIcon extends LitElement {
           <use
             href="${this.src
             ? this.src
-            : `${this.prefix || window.static_url || '/static/'}svg/index.svg?v=${ICON_VERSION}#${name}`}"
+            : `${this.prefix || window.static_url || '/static/'}svg/index.svg?v=${SVG_FINGERPRINT}#${name}`}"
           />
         </svg>
       </div>

package/out-tsc/src/vectoricon/VectorIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"VectorIcon.js","sourceRoot":"","sources":["../../../src/vectoricon/VectorIcon.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Icon } from '.';\n\nimport { getClasses } from '../utils';\n\n// for cache busting, increase whenever the icon set changes\nconst ICON_VERSION = 15;\n\nexport class VectorIcon extends LitElement {\n  @property({ type: String })\n  name: string;\n\n  @property({ type: String })\n  prefix: string;\n\n  // same as name but without implicit coloring\n  @property({ type: String })\n  id: string;\n\n  @property({ type: Number })\n  size = 1;\n\n  @property({ type: Boolean })\n  clickable: boolean;\n\n  @property({ type: Boolean })\n  circled: boolean;\n\n  @property({ type: String })\n  animateChange: string;\n\n  @property({ type: String })\n  animateClick: string;\n\n  @property({ type: Number })\n  animationDuration = 200;\n\n  @property({ type: String })\n  src = '';\n\n  @property({ type: Number, attribute: false })\n  steps = 2;\n\n  @property({ type: Number, attribute: false })\n  animationStep: number;\n\n  @property({ type: String })\n  easing = 'cubic-bezier(0.68, -0.55, 0.265, 1.55)';\n\n  static get styles() {\n    return css`\n      :host {\n        margin: auto;\n      }\n\n      .sheet {\n        color: var(--icon-color);\n        transform: scale(1);\n        transition: fill 100ms ease-in-out,\n          background 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n          padding 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n          margin 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);\n      }\n\n      .sheet.spin {\n        transform: rotate(0deg);\n      }\n\n      .sheet.spin-1 {\n        transform: rotate(180deg);\n      }\n\n      .sheet.spin-2 {\n        transform: rotate(360deg);\n      }\n\n      .sheet.spin-3 {\n        transform: rotate(0deg);\n        transition-duration: 0ms !important;\n      }\n\n      .sheet.pulse {\n        transform: scale(1);\n      }\n\n      .sheet.pulse-1 {\n        transform: scale(1.2);\n      }\n\n      .clickable:hover {\n        cursor: pointer;\n        fill: var(--color-link-primary) !important;\n        background: rgb(255, 255, 255);\n      }\n\n      .circled {\n        background: var(--icon-color-circle);\n        padding: 0.15em;\n        margin: -0.15em;\n        box-shadow: var(--shadow);\n      }\n\n      .wrapper {\n        display: flex;\n        flex-direction: column;\n        border-radius: 999px;\n        transition: background 200ms linear,\n          transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n          padding 150ms linear, margin 150ms linear;\n      }\n\n      .wrapper.clickable {\n        transform: scale(1);\n      }\n\n      .wrapper.clickable:hover {\n        --icon-circle-size: 0.35em;\n        --icon-background: var(--icon-color-circle-hover);\n      }\n\n      .wrapper.clickable {\n        padding: var(--icon-circle-size);\n        margin: calc(-1 * var(--icon-circle-size));\n        background: var(--icon-background);\n      }\n    `;\n  }\n\n  constructor() {\n    super();\n  }\n\n  private lastName: string;\n\n  public firstUpdated(changes: Map<string, any>) {\n    super.firstUpdated(changes);\n    if (changes.has('animateChange')) {\n      // set our default duration if we need one\n      if (!changes.has('animationDuration')) {\n        this.animationDuration = this.steps * this.animationDuration;\n      }\n\n      if (this.animateChange === 'spin') {\n        this.steps = 3;\n        this.animationDuration = 400;\n        this.easing = 'linear';\n      }\n    }\n  }\n\n  public handleClicked() {\n    if (this.animateClick) {\n      this.animationStep = 1;\n    }\n  }\n\n  public updated(changes: Map<string, any>) {\n    super.updated(changes);\n\n    if (changes.has('animationStep')) {\n      // if we are halfway through, change the icon\n      if (this.lastName && this.animationStep >= this.steps / 2) {\n        this.lastName = null;\n        this.requestUpdate();\n      }\n\n      setTimeout(() => {\n        if (this.animationStep > 0 && this.animationStep < this.steps) {\n          this.animationStep++;\n        } else {\n          this.animationStep = 0;\n        }\n      }, this.animationDuration / this.steps);\n    }\n\n    if (changes.has('name') && this.animateChange) {\n      this.lastName = changes.get('name');\n\n      // our name changed, lets animate it\n      if (this.lastName && this.animateChange) {\n        this.animationStep = 1;\n      }\n    }\n  }\n\n  public render(): TemplateResult {\n    // let icon name mappings take precedence\n    let name = this.lastName || this.name;\n    name = Icon[name.replace('icon.', '')] || name;\n\n    // referencing icons by id is explicit\n    if (!name) {\n      name = this.id;\n    }\n\n    return html`\n      <div\n        @click=${this.handleClicked}\n        class=\"wrapper ${getClasses({\n          clickable: this.clickable,\n          circled: this.circled,\n          animate: !!this.animateChange || !!this.animateClick,\n        })}\"\n      >\n        <svg\n          style=\"height:${this.size}em;width:${this\n            .size}em;transition:transform ${this.animationDuration /\n          this.steps}ms\n          ${this.easing}\"\n          class=\"${getClasses({\n            sheet: this.src === '',\n            [this.animateChange]: !!this.animateChange,\n            [this.animateChange + '-' + this.animationStep]:\n              this.animationStep > 0,\n            [this.animateClick]: !!this.animateClick,\n            [this.animateClick + '-' + this.animationStep]:\n              this.animationStep > 0,\n          })}\"\n        >\n          <use\n            href=\"${this.src\n              ? this.src\n              : `${\n                  this.prefix || (window as any).static_url || '/static/'\n                }svg/index.svg?v=${ICON_VERSION}#${name}`}\"\n          />\n        </svg>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"VectorIcon.js","sourceRoot":"","sources":["../../../src/vectoricon/VectorIcon.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Icon, SVG_FINGERPRINT } from '.';\n\nimport { getClasses } from '../utils';\n\nexport class VectorIcon extends LitElement {\n  @property({ type: String })\n  name: string;\n\n  @property({ type: String })\n  prefix: string;\n\n  // same as name but without implicit coloring\n  @property({ type: String })\n  id: string;\n\n  @property({ type: Number })\n  size = 1;\n\n  @property({ type: Boolean })\n  clickable: boolean;\n\n  @property({ type: Boolean })\n  circled: boolean;\n\n  @property({ type: String })\n  animateChange: string;\n\n  @property({ type: String })\n  animateClick: string;\n\n  @property({ type: Number })\n  animationDuration = 200;\n\n  @property({ type: String })\n  src = '';\n\n  @property({ type: Number, attribute: false })\n  steps = 2;\n\n  @property({ type: Number, attribute: false })\n  animationStep: number;\n\n  @property({ type: String })\n  easing = 'cubic-bezier(0.68, -0.55, 0.265, 1.55)';\n\n  static get styles() {\n    return css`\n      :host {\n        margin: auto;\n      }\n\n      .sheet {\n        color: var(--icon-color);\n        transform: scale(1);\n        transition: fill 100ms ease-in-out,\n          background 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n          padding 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n          margin 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);\n      }\n\n      .sheet.spin {\n        transform: rotate(0deg);\n      }\n\n      .sheet.spin-1 {\n        transform: rotate(180deg);\n      }\n\n      .sheet.spin-2 {\n        transform: rotate(360deg);\n      }\n\n      .sheet.spin-3 {\n        transform: rotate(0deg);\n        transition-duration: 0ms !important;\n      }\n\n      .sheet.pulse {\n        transform: scale(1);\n      }\n\n      .sheet.pulse-1 {\n        transform: scale(1.2);\n      }\n\n      .clickable:hover {\n        cursor: pointer;\n        fill: var(--color-link-primary) !important;\n        background: rgb(255, 255, 255);\n      }\n\n      .circled {\n        background: var(--icon-color-circle);\n        padding: 0.15em;\n        margin: -0.15em;\n        box-shadow: var(--shadow);\n      }\n\n      .wrapper {\n        display: flex;\n        flex-direction: column;\n        border-radius: 999px;\n        transition: background 200ms linear,\n          transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n          padding 150ms linear, margin 150ms linear;\n      }\n\n      .wrapper.clickable {\n        transform: scale(1);\n      }\n\n      .wrapper.clickable:hover {\n        --icon-circle-size: 0.35em;\n        --icon-background: var(--icon-color-circle-hover);\n      }\n\n      .wrapper.clickable {\n        padding: var(--icon-circle-size);\n        margin: calc(-1 * var(--icon-circle-size));\n        background: var(--icon-background);\n      }\n    `;\n  }\n\n  constructor() {\n    super();\n  }\n\n  private lastName: string;\n\n  public firstUpdated(changes: Map<string, any>) {\n    super.firstUpdated(changes);\n    if (changes.has('animateChange')) {\n      // set our default duration if we need one\n      if (!changes.has('animationDuration')) {\n        this.animationDuration = this.steps * this.animationDuration;\n      }\n\n      if (this.animateChange === 'spin') {\n        this.steps = 3;\n        this.animationDuration = 400;\n        this.easing = 'linear';\n      }\n    }\n  }\n\n  public handleClicked() {\n    if (this.animateClick) {\n      this.animationStep = 1;\n    }\n  }\n\n  public updated(changes: Map<string, any>) {\n    super.updated(changes);\n\n    if (changes.has('animationStep')) {\n      // if we are halfway through, change the icon\n      if (this.lastName && this.animationStep >= this.steps / 2) {\n        this.lastName = null;\n        this.requestUpdate();\n      }\n\n      setTimeout(() => {\n        if (this.animationStep > 0 && this.animationStep < this.steps) {\n          this.animationStep++;\n        } else {\n          this.animationStep = 0;\n        }\n      }, this.animationDuration / this.steps);\n    }\n\n    if (changes.has('name') && this.animateChange) {\n      this.lastName = changes.get('name');\n\n      // our name changed, lets animate it\n      if (this.lastName && this.animateChange) {\n        this.animationStep = 1;\n      }\n    }\n  }\n\n  public render(): TemplateResult {\n    // let icon name mappings take precedence\n    let name = this.lastName || this.name;\n    name = Icon[name.replace('icon.', '')] || name;\n\n    // referencing icons by id is explicit\n    if (!name) {\n      name = this.id;\n    }\n\n    return html`\n      <div\n        @click=${this.handleClicked}\n        class=\"wrapper ${getClasses({\n          clickable: this.clickable,\n          circled: this.circled,\n          animate: !!this.animateChange || !!this.animateClick,\n        })}\"\n      >\n        <svg\n          style=\"height:${this.size}em;width:${this\n            .size}em;transition:transform ${this.animationDuration /\n          this.steps}ms\n          ${this.easing}\"\n          class=\"${getClasses({\n            sheet: this.src === '',\n            [this.animateChange]: !!this.animateChange,\n            [this.animateChange + '-' + this.animationStep]:\n              this.animationStep > 0,\n            [this.animateClick]: !!this.animateClick,\n            [this.animateClick + '-' + this.animationStep]:\n              this.animationStep > 0,\n          })}\"\n        >\n          <use\n            href=\"${this.src\n              ? this.src\n              : `${\n                  this.prefix || (window as any).static_url || '/static/'\n                }svg/index.svg?v=${SVG_FINGERPRINT}#${name}`}\"\n          />\n        </svg>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/vectoricon/index.js

@@ -1,3 +1,6 @@
+// for cache busting we dynamically generate a fingerprint, use yarn svg to update
+export const SVG_FINGERPRINT = '579ca2593ad9c17698bf47bc18234db5';
+// only icons below are included in the sprite sheet
 export var Icon;
 (function (Icon) {
     Icon["analytics"] = "bar-chart-01";
@@ -15,8 +18,29 @@ export var Icon;
     Icon["call"] = "phone-call-01";
     Icon["call_missed"] = "phone-call-02";
     Icon["campaign"] = "clock-refresh";
+    Icon["campaign_active"] = "play";
+    Icon["campaign_archived"] = "archive";
     Icon["campaigns"] = "clock-refresh";
     Icon["channel"] = "zap";
+    Icon["channel_android"] = "channel-android";
+    Icon["channel_facebook"] = "facebook-official";
+    Icon["channel_freshchat"] = "freshchat";
+    Icon["channel_jiochat"] = "jiochat";
+    Icon["channel_junebug"] = "junebug";
+    Icon["channel_kannel"] = "kannel";
+    Icon["channel_line"] = "line";
+    Icon["channel_mtarget"] = "mtarget";
+    Icon["channel_plivo"] = "plivo";
+    Icon["channel_signalwire"] = "signalwire";
+    Icon["channel_thinq"] = "thinq";
+    Icon["channel_telegram"] = "telegram";
+    Icon["channel_twilio"] = "twilio-original";
+    Icon["channel_twitter"] = "twitter";
+    Icon["channel_viber"] = "viber";
+    Icon["channel_vk"] = "vk";
+    Icon["channel_vonage"] = "vonage";
+    Icon["channel_wechat"] = "wechat";
+    Icon["channel_whatsapp"] = "whatsapp";
     Icon["children"] = "git-branch-01";
     Icon["check"] = "check";
     Icon["checkbox"] = "square";
@@ -55,10 +79,13 @@ export var Icon;
     Icon["language"] = "globe-01";
     Icon["link"] = "link-external-01";
     Icon["log"] = "file-02";
+    Icon["logout"] = "log-out-04";
     Icon["menu"] = "menu-01";
     Icon["menu_collapse"] = "chevron-left-double";
     Icon["message"] = "message-square-02";
     Icon["messages"] = "message-square-02";
+    Icon["missing"] = "maximize-02";
+    Icon["new"] = "plus";
     Icon["notification"] = "bell-01";
     Icon["org_active"] = "credit-card-02";
     Icon["org_anonymous"] = "glasses-01";
@@ -68,15 +95,18 @@ export var Icon;
     Icon["org_suspended"] = "slash-circle-01";
     Icon["org_verified"] = "check-verified-02";
     Icon["overview"] = "pie-chart-01";
+    Icon["prometheus"] = "prometheus";
     Icon["featured"] = "star-01";
     Icon["resthooks"] = "share-07";
     Icon["restore"] = "play";
     Icon["retry"] = "refresh-cw-05";
+    Icon["rocketchat"] = "rocketchat";
     Icon["runs"] = "rows-03";
     Icon["search"] = "search-refraction";
     Icon["select_open"] = "chevron-down";
     Icon["select_clear"] = "x";
     Icon["service"] = "magic-wand-01";
+    Icon["service_end"] = "log-out-04";
     Icon["settings"] = "settings-02";
     Icon["sort"] = "chevron-selector-vertical";
     Icon["staff"] = "hard-drive";
@@ -90,6 +120,9 @@ export var Icon;
     Icon["two_factor_enabled"] = "shield-02";
     Icon["two_factor_disabled"] = "shield-01";
     Icon["trigger"] = "signal-01";
+    Icon["trigger_active"] = "play";
+    Icon["trigger_archived"] = "archive";
+    Icon["trigger_new"] = "plus";
     Icon["triggers"] = "signal-01";
     Icon["updated"] = "edit-02";
     Icon["up"] = "chevron-up";
@@ -99,7 +132,9 @@ export var Icon;
     Icon["users"] = "users-01";
     Icon["user_beta"] = "shield-zap";
     Icon["webhook"] = "link-external-01";
+    Icon["wit"] = "wit";
     Icon["workspace"] = "folder";
+    Icon["zapier"] = "zapier";
     Icon["zendesk"] = "zendesk";
     Icon["ext"] = "lightning-01";
     Icon["fcm"] = "lightning-01";

package/out-tsc/src/vectoricon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/vectoricon/index.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,IAyGX;AAzGD,WAAY,IAAI;IACd,kCAA0B,CAAA;IAC1B,2BAAmB,CAAA;IACnB,uBAAe,CAAA;IACf,4BAAoB,CAAA;IACpB,gCAAwB,CAAA;IACxB,2BAAmB,CAAA;IACnB,+BAAuB,CAAA;IACvB,mCAA2B,CAAA;IAC3B,mCAA2B,CAAA;IAC3B,qCAA6B,CAAA;IAC7B,gCAAwB,CAAA;IACxB,qCAA6B,CAAA;IAC7B,8BAAsB,CAAA;IACtB,qCAA6B,CAAA;IAC7B,kCAA0B,CAAA;IAC1B,mCAA2B,CAAA;IAC3B,uBAAe,CAAA;IACf,kCAA0B,CAAA;IAC1B,uBAAe,CAAA;IACf,2BAAmB,CAAA;IACnB,yCAAiC,CAAA;IACjC,2BAAmB,CAAA;IACnB,2BAAmB,CAAA;IACnB,oCAA4B,CAAA;IAC5B,4CAAoC,CAAA;IACpC,yCAAiC,CAAA;IACjC,qCAA6B,CAAA;IAC7B,4BAAoB,CAAA;IACpB,wBAAgB,CAAA;IAChB,kCAA0B,CAAA;IAC1B,2BAAmB,CAAA;IACnB,0BAAkB,CAAA;IAClB,6BAAqB,CAAA;IACrB,gCAAwB,CAAA;IACxB,yBAAiB,CAAA;IACjB,8BAAsB,CAAA;IACtB,qBAAa,CAAA;IACb,4BAAoB,CAAA;IACpB,qBAAa,CAAA;IACb,oCAA4B,CAAA;IAC5B,kCAA0B,CAAA;IAC1B,0CAAkC,CAAA;IAClC,gCAAwB,CAAA;IACxB,sBAAc,CAAA;IACd,0BAAkB,CAAA;IAClB,0BAAkB,CAAA;IAClB,+BAAuB,CAAA;IACvB,4BAAoB,CAAA;IACpB,4BAAoB,CAAA;IACpB,0BAAkB,CAAA;IAClB,4BAAoB,CAAA;IACpB,wBAAgB,CAAA;IAChB,6BAAqB,CAAA;IACrB,iCAAyB,CAAA;IACzB,uBAAe,CAAA;IACf,wBAAgB,CAAA;IAChB,6CAAqC,CAAA;IACrC,qCAA6B,CAAA;IAC7B,sCAA8B,CAAA;IAC9B,gCAAwB,CAAA;IACxB,qCAA6B,CAAA;IAC7B,oCAA4B,CAAA;IAC5B,qCAA6B,CAAA;IAC7B,+BAAuB,CAAA;IACvB,4BAAoB,CAAA;IACpB,yCAAiC,CAAA;IACjC,0CAAkC,CAAA;IAClC,iCAAyB,CAAA;IACzB,4BAAoB,CAAA;IACpB,8BAAsB,CAAA;IACtB,wBAAgB,CAAA;IAChB,+BAAuB,CAAA;IACvB,wBAAgB,CAAA;IAChB,oCAA4B,CAAA;IAC5B,oCAA4B,CAAA;IAC5B,0BAAkB,CAAA;IAClB,iCAAyB,CAAA;IACzB,gCAAwB,CAAA;IACxB,0CAAkC,CAAA;IAClC,4BAAoB,CAAA;IACpB,yBAAiB,CAAA;IACjB,+BAAuB,CAAA;IACvB,gCAAwB,CAAA;IACxB,+BAAuB,CAAA;IACvB,iCAAyB,CAAA;IACzB,uCAA+B,CAAA;IAC/B,wCAAgC,CAAA;IAChC,wCAAgC,CAAA;IAChC,yCAAiC,CAAA;IACjC,6BAAqB,CAAA;IACrB,8BAAsB,CAAA;IACtB,2BAAmB,CAAA;IACnB,yBAAiB,CAAA;IACjB,kCAA0B,CAAA;IAC1B,0BAAkB,CAAA;IAClB,yBAAiB,CAAA;IACjB,0BAAkB,CAAA;IAClB,gCAAwB,CAAA;IACxB,oCAA4B,CAAA;IAC5B,4BAAoB,CAAA;IACpB,2BAAmB,CAAA;IAEnB,4BAAoB,CAAA;IACpB,4BAAoB,CAAA;AACtB,CAAC,EAzGW,IAAI,KAAJ,IAAI,QAyGf","sourcesContent":["export enum Icon {\n  analytics = 'bar-chart-01',\n  account = 'user-01',\n  active = 'play',\n  add_note = 'file-02',\n  airtime = 'bank-note-01',\n  archive = 'archive',\n  arrow_up = 'chevron-up',\n  arrow_down = 'chevron-down',\n  arrow_left = 'chevron-left',\n  arrow_right = 'chevron-right',\n  attachment = 'paperclip',\n  broadcast = 'announcement-01',\n  call = 'phone-call-01',\n  call_missed = 'phone-call-02',\n  campaign = 'clock-refresh',\n  campaigns = 'clock-refresh',\n  channel = 'zap',\n  children = 'git-branch-01',\n  check = 'check',\n  checkbox = 'square',\n  checkbox_checked = 'check-square',\n  compose = 'send-01',\n  contact = 'user-01',\n  contact_archived = 'archive',\n  contact_blocked = 'message-x-square',\n  contact_stopped = 'slash-octagon',\n  contact_updated = 'user-edit',\n  contacts = 'user-01',\n  copy = 'copy-04',\n  dashboard = 'pie-chart-01',\n  delete = 'trash-03',\n  delete_small = 'x',\n  down = 'chevron-down',\n  download = 'download-01',\n  email = 'mail-01',\n  error = 'alert-circle',\n  event = 'zap',\n  fields = 'user-edit',\n  flow = 'flow',\n  flow_interrupted = 'x-close',\n  flow_ivr = 'phone-call-01',\n  flow_message = 'message-square-02',\n  flow_user = 'hard-drive',\n  flows = 'flow',\n  global = 'at-sign',\n  group = 'users-01',\n  group_smart = 'atom-01',\n  help = 'help-circle',\n  home = 'settings-02',\n  inbox = 'inbox-01',\n  info = 'user-square',\n  label = 'tag-01',\n  language = 'globe-01',\n  link = 'link-external-01',\n  log = 'file-02',\n  menu = 'menu-01',\n  menu_collapse = 'chevron-left-double',\n  message = 'message-square-02',\n  messages = 'message-square-02',\n  notification = 'bell-01',\n  org_active = 'credit-card-02',\n  org_anonymous = 'glasses-01',\n  org_bulk = 'credit-card-plus',\n  org_flagged = 'flag-01',\n  org_new = 'stars-02',\n  org_suspended = 'slash-circle-01',\n  org_verified = 'check-verified-02',\n  overview = 'pie-chart-01',\n  featured = 'star-01',\n  resthooks = 'share-07',\n  restore = 'play',\n  retry = 'refresh-cw-05',\n  runs = 'rows-03',\n  search = 'search-refraction',\n  select_open = 'chevron-down',\n  select_clear = 'x',\n  service = 'magic-wand-01',\n  settings = 'settings-02',\n  sort = 'chevron-selector-vertical',\n  staff = 'hard-drive',\n  tickets = 'agent',\n  tickets_all = 'archive',\n  tickets_closed = 'check',\n  tickets_mine = 'coffee',\n  tickets_open = 'inbox-01',\n  tickets_unassigned = 'inbox-01',\n  topic = 'message-text-circle-02',\n  two_factor_enabled = 'shield-02',\n  two_factor_disabled = 'shield-01',\n  trigger = 'signal-01',\n  triggers = 'signal-01',\n  updated = 'edit-02',\n  up = 'chevron-up',\n  upload = 'upload-cloud-01',\n  usages = 'link-04',\n  user = 'users-01',\n  users = 'users-01',\n  user_beta = 'shield-zap',\n  webhook = 'link-external-01',\n  workspace = 'folder',\n  zendesk = 'zendesk',\n\n  ext = 'lightning-01',\n  fcm = 'lightning-01',\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/vectoricon/index.ts"],"names":[],"mappings":"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","sourcesContent":["// for cache busting we dynamically generate a fingerprint, use yarn svg to update\nexport const SVG_FINGERPRINT = '579ca2593ad9c17698bf47bc18234db5';\n\n// only icons below are included in the sprite sheet\nexport enum Icon {\n  analytics = 'bar-chart-01',\n  account = 'user-01',\n  active = 'play',\n  add_note = 'file-02',\n  airtime = 'bank-note-01',\n  archive = 'archive',\n  arrow_up = 'chevron-up',\n  arrow_down = 'chevron-down',\n  arrow_left = 'chevron-left',\n  arrow_right = 'chevron-right',\n  attachment = 'paperclip',\n  broadcast = 'announcement-01',\n  call = 'phone-call-01',\n  call_missed = 'phone-call-02',\n  campaign = 'clock-refresh',\n  campaign_active = 'play',\n  campaign_archived = 'archive',\n  campaigns = 'clock-refresh',\n  channel = 'zap',\n\n  channel_android = 'channel-android',\n  channel_facebook = 'facebook-official',\n  channel_freshchat = 'freshchat',\n  channel_jiochat = 'jiochat',\n  channel_junebug = 'junebug',\n  channel_kannel = 'kannel',\n  channel_line = 'line',\n  channel_mtarget = 'mtarget',\n  channel_plivo = 'plivo',\n  channel_signalwire = 'signalwire',\n  channel_thinq = 'thinq',\n  channel_telegram = 'telegram',\n  channel_twilio = 'twilio-original',\n  channel_twitter = 'twitter',\n  channel_viber = 'viber',\n  channel_vk = 'vk',\n  channel_vonage = 'vonage',\n  channel_wechat = 'wechat',\n  channel_whatsapp = 'whatsapp',\n\n  children = 'git-branch-01',\n  check = 'check',\n  checkbox = 'square',\n  checkbox_checked = 'check-square',\n  compose = 'send-01',\n  contact = 'user-01',\n  contact_archived = 'archive',\n  contact_blocked = 'message-x-square',\n  contact_stopped = 'slash-octagon',\n  contact_updated = 'user-edit',\n  contacts = 'user-01',\n  copy = 'copy-04',\n  dashboard = 'pie-chart-01',\n  delete = 'trash-03',\n  delete_small = 'x',\n  down = 'chevron-down',\n  download = 'download-01',\n  email = 'mail-01',\n  error = 'alert-circle',\n  event = 'zap',\n  fields = 'user-edit',\n  flow = 'flow',\n  flow_interrupted = 'x-close',\n  flow_ivr = 'phone-call-01',\n  flow_message = 'message-square-02',\n  flow_user = 'hard-drive',\n  flows = 'flow',\n  global = 'at-sign',\n  group = 'users-01',\n  group_smart = 'atom-01',\n  help = 'help-circle',\n  home = 'settings-02',\n  inbox = 'inbox-01',\n  info = 'user-square',\n  label = 'tag-01',\n  language = 'globe-01',\n  link = 'link-external-01',\n  log = 'file-02',\n  logout = 'log-out-04',\n  menu = 'menu-01',\n  menu_collapse = 'chevron-left-double',\n  message = 'message-square-02',\n  messages = 'message-square-02',\n  missing = 'maximize-02',\n  new = 'plus',\n  notification = 'bell-01',\n  org_active = 'credit-card-02',\n  org_anonymous = 'glasses-01',\n  org_bulk = 'credit-card-plus',\n  org_flagged = 'flag-01',\n  org_new = 'stars-02',\n  org_suspended = 'slash-circle-01',\n  org_verified = 'check-verified-02',\n  overview = 'pie-chart-01',\n  prometheus = 'prometheus',\n  featured = 'star-01',\n  resthooks = 'share-07',\n  restore = 'play',\n  retry = 'refresh-cw-05',\n  rocketchat = 'rocketchat',\n  runs = 'rows-03',\n  search = 'search-refraction',\n  select_open = 'chevron-down',\n  select_clear = 'x',\n  service = 'magic-wand-01',\n  service_end = 'log-out-04',\n  settings = 'settings-02',\n  sort = 'chevron-selector-vertical',\n  staff = 'hard-drive',\n  tickets = 'agent',\n  tickets_all = 'archive',\n  tickets_closed = 'check',\n  tickets_mine = 'coffee',\n  tickets_open = 'inbox-01',\n  tickets_unassigned = 'inbox-01',\n  topic = 'message-text-circle-02',\n  two_factor_enabled = 'shield-02',\n  two_factor_disabled = 'shield-01',\n  trigger = 'signal-01',\n  trigger_active = 'play',\n  trigger_archived = 'archive',\n  trigger_new = 'plus',\n  triggers = 'signal-01',\n  updated = 'edit-02',\n  up = 'chevron-up',\n  upload = 'upload-cloud-01',\n  usages = 'link-04',\n  user = 'users-01',\n  users = 'users-01',\n  user_beta = 'shield-zap',\n  webhook = 'link-external-01',\n  wit = 'wit',\n  workspace = 'folder',\n  zapier = 'zapier',\n  zendesk = 'zendesk',\n\n  ext = 'lightning-01',\n  fcm = 'lightning-01',\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.48.7",
+  "version": "0.49.0",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",
@@ -12,7 +12,7 @@
     "start": "concurrently --kill-others --names tsc,web-dev-server \"yarn tsc:watch\" \"web-dev-server --app-index demo/index.html --node-resolve --open --watch --port 3010 --esbuild-target auto\"",
     "start:bg": "concurrently --kill-others --names tsc,web-dev-server \"yarn tsc:watch\" \"web-dev-server --app-index demo/index.html --node-resolve --watch --port 3010 --esbuild-target auto\"",
     "tsc:watch": "tsc --watch",
-    "build": "rimraf dist && tsc && rollup -c rollup.config.js",
+    "build": "rimraf dist && yarn svg && tsc && rollup -c rollup.config.js",
     "dev": "yarn build && cp -R ./dist/* ../rapidpro/node_modules/@nyaruka/temba-components/dist/ && cp -R ./dist/* ../floweditor/node_modules/@nyaruka/temba-components/dist/",
     "prepublish": "tsc",
     "postversion": "git push --tags && git push origin main",
@@ -23,12 +23,11 @@
     "lint": "yarn lint:eslint && yarn lint:prettier",
     "format": "yarn format:eslint && yarn format:prettier",
     "test-file": "rimraf out-tsc && tsc && web-test-runner --node-resolve --coverage",
-    "test": "wtr --node-resolve --coverage",
+    "test": "yarn svg && wtr --node-resolve --coverage",
     "test:watch": "wtr --node-resolve --watch",
     "storybook": "concurrently --kill-others --names tsc,storybook \"npm run tsc:watch\" \"start-storybook --node-resolve --watch --open\"",
     "storybook:build": "build-storybook",
-    "svg": "node svg.js",
-    "svg-rebuild": "rimraf static/svg/traced && yarn svg --trace && yarn svg && yarn dev",
+    "svg": "rimraf static/svg/work && node svg.js --resolution=100",
     "version": "yarn run build && auto-changelog -p && git add CHANGELOG.md"
   },
   "dependencies": {
@@ -61,6 +60,7 @@
     "concurrently": "^7.6.0",
     "dynamicpixelmatch": "^0.0.2",
     "eslint": "^8.29.0",
+    "fprint": "^2.0.1",
     "htmlclean": "^3.0.8",
     "husky": "^1.0.0",
     "lint-staged": "^10.0.0",

package/src/list/TembaMenu.ts

@@ -5,6 +5,7 @@ import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import { debounce, fetchResults, getClasses, renderAvatar } from '../utils';
 import { Icon } from '../vectoricon';
+import { Dropdown } from '../dropdown/Dropdown';
 export interface MenuItem {
   id?: string;
   vanity_id?: string;
@@ -696,6 +697,13 @@ export class TembaMenu extends RapidElement {
     parent: MenuItem = null
   ) {
     if (parent && parent.popup) {
+      const dropdown = this.shadowRoot.querySelector(
+        'temba-dropdown'
+      ) as Dropdown;
+      if (dropdown) {
+        dropdown.blur();
+      }
+
       if (event) {
         this.fireCustomEvent(CustomEventType.ButtonClicked, {
           item: menuItem,
@@ -974,6 +982,7 @@ export class TembaMenu extends RapidElement {
         id="menu-${menuItem.id}"
         class="${itemClasses}"
         @click=${event => {
+          event.preventDefault();
           this.pressedItem = null;
           this.handleItemClicked(event, menuItem, parent);
         }}
@@ -1130,7 +1139,7 @@ export class TembaMenu extends RapidElement {
 
                     ${index == 0 && !this.collapsed
                       ? html`<temba-icon
-                          name="${Icon.menu_collapse}"
+                          name=${Icon.menu_collapse}
                           size="1.1"
                           @click=${this.handleCollapse}
                         ></temba-icon>`

package/src/vectoricon/VectorIcon.ts

@@ -1,12 +1,9 @@
 import { LitElement, TemplateResult, html, css } from 'lit';
 import { property } from 'lit/decorators.js';
-import { Icon } from '.';
+import { Icon, SVG_FINGERPRINT } from '.';
 
 import { getClasses } from '../utils';
 
-// for cache busting, increase whenever the icon set changes
-const ICON_VERSION = 15;
-
 export class VectorIcon extends LitElement {
   @property({ type: String })
   name: string;
@@ -223,7 +220,7 @@ export class VectorIcon extends LitElement {
               ? this.src
               : `${
                   this.prefix || (window as any).static_url || '/static/'
-                }svg/index.svg?v=${ICON_VERSION}#${name}`}"
+                }svg/index.svg?v=${SVG_FINGERPRINT}#${name}`}"
           />
         </svg>
       </div>