@nyaruka/temba-components 0.21.0 → 0.24.1

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

@@ -3,6 +3,9 @@ import { css, html, property } from 'lit-element';
 import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import { fetchResults, getClasses } from '../utils';
+const findItem = (items, id) => (items || []).find((item) => {
+    return item.id == id || item.vanity_id == id;
+});
 export class TembaMenu extends RapidElement {
     constructor() {
         super();
@@ -11,9 +14,12 @@ export class TembaMenu extends RapidElement {
         this.pending = [];
         this.state = {};
         this.renderMenuItem = (menuItem) => {
-            if (menuItem.id === 'divider') {
+            if (menuItem.type === 'divider') {
                 return html `<div class="divider"></div>`;
             }
+            if (menuItem.type === 'section') {
+                return html `<div class="sub-section">${menuItem.name}</div>`;
+            }
             const isSelected = this.isSelected(menuItem);
             const isChildSelected = isSelected && this.selection.length > menuItem.level + 1;
             const icon = menuItem.icon
@@ -62,7 +68,7 @@ export class TembaMenu extends RapidElement {
         <div class="details" style="flex-grow:1;display:flex">
           <div
             class="name"
-            style="flex-grow:1; flex-shrink:0 white-space: ${this.wraps
+            style="flex-grow:1; flex-shrink:0; white-space: ${this.wraps
                 ? 'normal'
                 : 'nowrap'};"
           >
@@ -125,6 +131,7 @@ export class TembaMenu extends RapidElement {
         -webkit-user-select: none;
         display: flex;
         font-size: 1.15em;
+        --icon-color: var(--color-text-dark);
       }
 
       .item.selected {
@@ -202,6 +209,9 @@ export class TembaMenu extends RapidElement {
         margin-top: 0.1em;
         border-radius: var(--curvature);
         display: flex;
+
+        min-width: 12em;
+        max-width: 12em;
       }
 
       .item > temba-icon {
@@ -209,7 +219,7 @@ export class TembaMenu extends RapidElement {
       }
 
       .item.inline > temba-icon {
-        margin-right: 0em;
+        // margin-right: 0em;
       }
 
       .item > .details > .name {
@@ -217,12 +227,15 @@ export class TembaMenu extends RapidElement {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        width: 0;
       }
 
       .level-0 > .item {
         padding: 1em 1em;
         margin-top: 0em;
         border-radius: 0px;
+        min-width: inherit;
+        max-width: inherit;
       }
 
       .level-0 > .item > temba-icon {
@@ -270,32 +283,43 @@ export class TembaMenu extends RapidElement {
       }
 
       .inline-children {
-        padding-left: 0.5em;
-      }
-
-      .inline-children {
-        background: #ffffff;
+        // background: #ffffff;
         padding: 0.5em;
         border-bottom-right-radius: var(--curvature);
         border-bottom-left-radius: var(--curvature);
-        font-size: 0.9rem;
+        font-size: 1rem;
         margin-bottom: 0.75em;
-        border: 1px solid #f1f1f1;
+        border: 1px solid #f3f3f3;
+        // box-shadow: var(--shadow);
+        // margin-top: -1px;
+        z-index: 1000;
+        // margin-left: 1em;
+        border-top: none;
+      }
+
+      .inline-children .item {
+        max-width: 11em !important;
+        min-width: 11em !important;
+        // border: 1px solid #f1f1f1;
+        // margin-top: 0.75em;
+        // margin-right: -1em;
+        // padding-right: 0;
       }
 
       .item.inline {
-        border: 1px solid #f1f1f1;
-        margin-top: 0.75em;
+        border: 0px solid transparent;
       }
 
       .item.inline.child-selected,
       .item.inline.selected {
-        background: #f1f1f1;
+        background: #f3f3f3;
+        border: 0px solid #f1f1f1;
         border-bottom-right-radius: 0px !important;
         border-bottom-left-radius: 0px !important;
         z-index: 1000;
         color: #444;
         --icon-color: #444;
+        // box-shadow: var(--shadow);
       }
 
       .level-1,
@@ -355,6 +379,10 @@ export class TembaMenu extends RapidElement {
       .item temba-icon {
       }
 
+      .collapsed .item {
+        margin-bottom: 0.5em;
+      }
+
       .collapsed .item .details {
         overflow: hidden;
         max-height: 0em;
@@ -370,18 +398,19 @@ export class TembaMenu extends RapidElement {
       }
 
       .section {
-        transition: opacity var(--transition-speed) linear !important;
         max-width: 12em;
       }
 
       .collapsed .section {
         opacity: 0;
         max-width: 0em;
-        max-height: 0.3em;
+        max-height: 0.6em;
       }
 
       .collapsed.level-1 {
         overflow: hidden;
+        padding: 0.5em;
+        --icon-color: #999;
       }
 
       .collapsed .item .right {
@@ -401,6 +430,7 @@ export class TembaMenu extends RapidElement {
         max-height: 0em;
         padding: 0em;
         min-height: 0em;
+        margin-bottom: 0em;
       }
 
       .divider {
@@ -416,6 +446,13 @@ export class TembaMenu extends RapidElement {
         padding: 0;
         min-height: 0px;
       }
+
+      .sub-section {
+        font-size: 1.1rem;
+        color: #888;
+        margin-top: 1rem;
+        margin-left: 0.3rem;
+      }
     `;
     }
     getMenuItemState(id) {
@@ -453,7 +490,7 @@ export class TembaMenu extends RapidElement {
         while (path.length > 0) {
             const step = path.splice(0, 1)[0];
             if (items) {
-                item = items.find(mi => mi.id == step);
+                item = findItem(items, step);
                 if (item) {
                     if (item.endpoint) {
                         item.loading = true;
@@ -461,7 +498,7 @@ export class TembaMenu extends RapidElement {
                         fetchResults(itemToUpdate.endpoint).then((updated) => {
                             // for now we only deal with updating counts and names
                             (itemToUpdate.items || []).forEach((existing, index, items) => {
-                                const updatedItem = updated.find(updatedItem => updatedItem.id === existing.id);
+                                const updatedItem = findItem(updated, existing.id);
                                 // we were removed!
                                 if (!updatedItem) {
                                     items.splice(index, 1);
@@ -488,39 +525,64 @@ export class TembaMenu extends RapidElement {
             }
         }
     }
+    fireNoPath(missingId) {
+        const item = this.getMenuItem();
+        const details = {
+            item: item.id,
+            selection: '/' + this.selection.join('/'),
+            endpoint: item.endpoint,
+            path: missingId + '/' + this.pending.join('/') + document.location.search,
+        };
+        // remove any excess from our selection
+        const selection = this.selection.join('/');
+        selection.replace(details.path, '');
+        this.selection = selection.split('/');
+        this.fireCustomEvent(CustomEventType.NoPath, details);
+        this.pending = [];
+        this.requestUpdate('root');
+    }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    loadItems(item) {
+    loadItems(item, selectFirst = true) {
         if (item && item.endpoint) {
             item.loading = true;
             this.httpComplete = fetchResults(item.endpoint).then((items) => {
                 // update our item level
-                items.forEach(subItem => (subItem.level = item.level + 1));
+                items.forEach(subItem => {
+                    subItem.level = item.level + 1;
+                    // if we came with preset items, set the level for them accordingly
+                    if (subItem.items) {
+                        subItem.items.forEach(inlineItem => (inlineItem.level = item.level + 2));
+                    }
+                });
                 item.items = items;
                 item.loading = false;
                 this.requestUpdate('root');
+                this.scrollSelectedIntoView();
                 if (this.pending && this.pending.length > 0) {
                     // auto select the next pending click
                     const nextId = this.pending.splice(0, 1)[0];
                     if (nextId && items.length > 0) {
-                        const nextItem = items.find(item => item.id === nextId);
+                        const nextItem = findItem(items, nextId);
                         if (nextItem) {
                             this.handleItemClicked(null, nextItem);
                         }
                         else {
-                            this.fireCustomEvent(CustomEventType.NoPath, {
-                                item: item.id,
-                                endpoint: item.endpoint,
-                                path: nextId + '/' + this.pending.join('/'),
-                            });
+                            this.fireNoPath(nextId);
                         }
                     }
                 }
                 else {
                     // auto select the first item
-                    if (items.length > 0 &&
+                    if (selectFirst &&
+                        items.length > 0 &&
                         this.selection.length >= 1 &&
                         !item.inline) {
-                        this.handleItemClicked(null, items[0]);
+                        for (const item of items) {
+                            if (!item.type) {
+                                this.handleItemClicked(null, item);
+                                break;
+                            }
+                        }
                     }
                 }
             });
@@ -544,13 +606,13 @@ export class TembaMenu extends RapidElement {
             }
             // update our selection
             if (menuItem.level >= this.selection.length) {
-                this.selection.push(menuItem.id);
+                this.selection.push(menuItem.vanity_id || menuItem.id);
             }
             else {
-                this.selection.splice(menuItem.level, this.selection.length - menuItem.level, menuItem.id);
+                this.selection.splice(menuItem.level, this.selection.length - menuItem.level, menuItem.vanity_id || menuItem.id);
             }
             if (menuItem.endpoint) {
-                this.loadItems(menuItem);
+                this.loadItems(menuItem, !menuItem.href);
                 this.dispatchEvent(new Event('change'));
             }
             else {
@@ -560,23 +622,35 @@ export class TembaMenu extends RapidElement {
                     const nextId = this.pending.splice(0, 1)[0];
                     const item = this.getMenuItem();
                     if (nextId && item && item.items && item.items.length > 0) {
-                        const nextItem = item.items.find(item => item.id === nextId);
+                        const nextItem = findItem(item.items, nextId);
                         if (nextItem) {
                             this.handleItemClicked(null, nextItem);
                         }
                     }
+                    else {
+                        this.fireNoPath(nextId);
+                    }
                 }
-                this.pending = [];
                 this.requestUpdate('root');
             }
         }
     }
+    scrollSelectedIntoView() {
+        // makes sure we are scrolled into view
+        window.setTimeout(() => {
+            const eles = this.shadowRoot.querySelectorAll('.selected');
+            eles.forEach(ele => {
+                ele.scrollIntoView({ block: 'end', behavior: 'smooth' });
+            });
+        }, 0);
+    }
     clickItem(id) {
         const path = [...this.selection];
         path.splice(path.length - 1, 1, id);
         const item = this.getMenuItemForSelection(path);
         if (item) {
             this.handleItemClicked(null, item);
+            this.scrollSelectedIntoView();
             return true;
         }
         return false;
@@ -591,7 +665,7 @@ export class TembaMenu extends RapidElement {
         while (path.length > 0) {
             const step = path.splice(0, 1)[0];
             if (items) {
-                item = items.find(mi => mi.id == step);
+                item = findItem(items, step);
                 if (item) {
                     items = item.items;
                 }
@@ -625,19 +699,45 @@ export class TembaMenu extends RapidElement {
             this.setSelection(asPath);
         }
     }
-    setFocusedItem(path) {
+    async setFocusedItem(path) {
         const focusedPath = path.split('/').filter(step => !!step);
-        this.selection = focusedPath;
+        // if we don't match at the first level, we are a noop
+        if (focusedPath.length > 0) {
+            const rootItem = findItem(this.root.items, focusedPath[0]);
+            if (!rootItem) {
+                return;
+            }
+        }
+        const newPath = [];
+        let level = this.root;
+        while (focusedPath.length > 0) {
+            const nextId = focusedPath.shift();
+            if (nextId) {
+                if (!level.items) {
+                    this.loadItems(level, false);
+                    await this.httpComplete;
+                }
+                level = findItem(level.items, nextId);
+                if (!level) {
+                    focusedPath.splice(0, focusedPath.length);
+                }
+                else {
+                    newPath.push(nextId);
+                }
+            }
+        }
+        this.selection = newPath;
         this.requestUpdate('root');
     }
     isSelected(menuItem) {
         if (menuItem.level < this.selection.length) {
-            return this.selection[menuItem.level] == menuItem.id;
+            const selected = this.selection[menuItem.level] == (menuItem.vanity_id || menuItem.id);
+            return selected;
         }
         return false;
     }
     isExpanded(menuItem) {
-        const expanded = !!this.selection.find(id => menuItem.id === id);
+        const expanded = !!this.selection.find(id => id === menuItem.vanity_id || menuItem.id);
         return expanded;
     }
     render() {
@@ -669,7 +769,7 @@ export class TembaMenu extends RapidElement {
         <div class="bottom"></div>
       </div>`);
         this.selection.forEach((id, index) => {
-            const selected = (items || []).find(item => item.id === id);
+            const selected = findItem(items, id);
             let collapsed = false;
             if (selected) {
                 items = selected.items;
@@ -681,7 +781,7 @@ export class TembaMenu extends RapidElement {
                 // otherwise pick a default collapse state
                 else {
                     if (this.selection.length > selected.level + 2) {
-                        collapsed = true;
+                        collapsed = false;
                     }
                 }
             }

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

@@ -1 +1 @@
-{"version":3,"file":"TembaMenu.js","sourceRoot":"","sources":["../../../src/list/TembaMenu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAkB,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAsBpD,MAAM,OAAO,SAAU,SAAQ,YAAY;IAoWzC;QACE,KAAK,EAAE,CAAC;QA3BV,UAAK,GAAG,KAAK,CAAC;QAsBd,cAAS,GAAa,EAAE,CAAC;QACzB,YAAO,GAAa,EAAE,CAAC;QACvB,UAAK,GAAoC,EAAE,CAAC;QAwQpC,mBAAc,GAAG,CAAC,QAAkB,EAAkB,EAAE;YAC9D,IAAI,QAAQ,CAAC,EAAE,KAAK,SAAS,EAAE;gBAC7B,OAAO,IAAI,CAAA,6BAA6B,CAAC;aAC1C;YAED,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;YAC7C,MAAM,eAAe,GACnB,UAAU,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC;YAE3D,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI;gBACxB,CAAC,CAAC,IAAI,CAAA;kBACM,QAAQ,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;kBAClC,QAAQ,CAAC,IAAI;uBACR;gBACjB,CAAC,CAAC,IAAI,CAAC;YAET,MAAM,aAAa,GAAG,QAAQ,CAAC,cAAc;gBAC3C,CAAC,CAAC,IAAI,CAAA;kBACM,QAAQ,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;kBAClC,QAAQ,CAAC,cAAc;;uBAElB;gBACjB,CAAC,CAAC,IAAI,CAAC;YAET,MAAM,WAAW,GAAG,UAAU,CAAC;gBAC7B,CAAC,OAAO,GAAG,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI;gBAC7B,gBAAgB,EAAE,eAAe;gBACjC,QAAQ,EAAE,UAAU;gBACpB,IAAI,EAAE,IAAI;gBACV,MAAM,EAAE,QAAQ,CAAC,MAAM;gBACvB,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,CAAC,EAAE;gBAC3D,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;gBACnC,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa;aAClC,CAAC,CAAC;YAEH,MAAM,IAAI,GAAG,IAAI,CAAA;0BACK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI;;;;mBAIrC,QAAQ,CAAC,EAAE;iBACb,WAAW;iBACX,KAAK,CAAC,EAAE;gBACf,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;YAC1C,CAAC;;UAEC,QAAQ,CAAC,KAAK,KAAK,CAAC;gBACpB,CAAC,CAAC,IAAI,CAAA;;sBAEM,QAAQ,CAAC,IAAI;;iBAElB,IAAI;cACP;gBACJ,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,GAAG,aAAa,EAAE;;;;;6DAKoB,IAAI,CAAC,KAAK;gBACzD,CAAC,CAAC,QAAQ;gBACV,CAAC,CAAC,QAAQ;;cAEV,QAAQ,CAAC,IAAI;;YAEf,QAAQ,CAAC,KAAK,GAAG,CAAC;gBAClB,CAAC,CAAC,QAAQ,CAAC,MAAM;oBACf,CAAC,CAAC,IAAI,CAAA;kCACc,UAAU,IAAI,eAAe;wBAC3C,CAAC,CAAC,IAAI;wBACN,CAAC,CAAC,MAAM;+BACG;oBACjB,CAAC,CAAC,IAAI,CAAA,GAAG,QAAQ,CAAC,KAAK,IAAI,QAAQ,CAAC,KAAK,IAAI,CAAC;wBAC1C,CAAC,CAAC,IAAI,CAAA;;0BAEE,QAAQ,CAAC,KAAK,CAAC,cAAc,EAAE;;qBAEpC;wBACH,CAAC,CAAC,IAAI,CAAA,2BAA2B,EAAE;gBACzC,CAAC,CAAC,IAAI;;;;;gCAKc,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,UAAU,CAAC;YAErE,OAAO,IAAI,CAAC;QACd,CAAC,CAAC;IA1VF,CAAC;IArWD,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoUT,CAAC;IACJ,CAAC;IAiCO,gBAAgB,CAAC,EAAU;QACjC,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,IAAI,EAAE,EAAE;YACN,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YAC3B,IAAI,CAAC,SAAS,EAAE;gBACd,SAAS,GAAG,EAAE,CAAC;gBACf,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC;aAC5B;SACF;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAEM,OAAO,CAAC,OAAyB;QACtC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACxB,IAAI,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;SAClD;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACnD,IAAI,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;SACnC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAC3B,IAAI,CAAC,IAAI,GAAG;gBACV,KAAK,EAAE,CAAC,CAAC;gBACT,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC;YAEF,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;gBACd,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aAC3B;SACF;IACH,CAAC;IAEM,OAAO;QACZ,MAAM,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;QACjC,IAAI,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;QAC5B,IAAI,IAAI,GAAG,IAAI,CAAC;QAChB,OAAO,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YACtB,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAClC,IAAI,KAAK,EAAE;gBACT,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,IAAI,CAAC,CAAC;gBACvC,IAAI,IAAI,EAAE;oBACR,IAAI,IAAI,CAAC,QAAQ,EAAE;wBACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;wBACpB,MAAM,YAAY,GAAG,IAAI,CAAC;wBAC1B,YAAY,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,OAAmB,EAAE,EAAE;4BAC/D,sDAAsD;4BACtD,CAAC,YAAY,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,OAAO,CAChC,CAAC,QAAkB,EAAE,KAAa,EAAE,KAAS,EAAE,EAAE;gCAC/C,MAAM,WAAW,GAAG,OAAO,CAAC,IAAI,CAC9B,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,QAAQ,CAAC,EAAE,CAC9C,CAAC;gCAEF,mBAAmB;gCACnB,IAAI,CAAC,WAAW,EAAE;oCAChB,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;oCAEvB,IACE,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC;wCACzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,QAAQ,CAAC,EAAE,EACxD;wCACA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;wCACpD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;qCAC3D;iCACF;qCAAM;oCACL,QAAQ,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC;oCACnC,QAAQ,CAAC,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC;iCAClC;4BACH,CAAC,CACF,CAAC;4BAEF,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;4BAC7B,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;wBAC7B,CAAC,CAAC,CAAC;qBACJ;oBAED,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;iBACpB;aACF;iBAAM;gBACL,MAAM;aACP;SACF;IACH,CAAC;IAED,gEAAgE;IACxD,SAAS,CAAC,IAAc;QAC9B,IAAI,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE;YACzB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAClD,CAAC,KAAiB,EAAE,EAAE;gBACpB,wBAAwB;gBACxB,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;gBAC3D,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;gBACnB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;gBACrB,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;gBAC3B,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;oBAC3C,qCAAqC;oBACrC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBAC5C,IAAI,MAAM,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;wBAC9B,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC;wBACxD,IAAI,QAAQ,EAAE;4BACZ,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;yBACxC;6BAAM;4BACL,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,MAAM,EAAE;gCAC3C,IAAI,EAAE,IAAI,CAAC,EAAE;gCACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;gCACvB,IAAI,EAAE,MAAM,GAAG,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;6BAC5C,CAAC,CAAC;yBACJ;qBACF;iBACF;qBAAM;oBACL,6BAA6B;oBAC7B,IACE,KAAK,CAAC,MAAM,GAAG,CAAC;wBAChB,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC;wBAC1B,CAAC,IAAI,CAAC,MAAM,EACZ;wBACA,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;qBACxC;iBACF;YACH,CAAC,CACF,CAAC;SACH;IACH,CAAC;IAEO,iBAAiB,CAAC,KAAiB,EAAE,QAAkB;QAC7D,IAAI,KAAK,EAAE;YACT,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;QAED,IAAI,QAAQ,CAAC,OAAO,EAAE;YACpB,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;SAC5B;aAAM;YACL,IAAI,QAAQ,CAAC,KAAK,KAAK,CAAC,EAAE;gBACxB;;;;kBAIE;aACH;YAED,uBAAuB;YACvB,IAAI,QAAQ,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE;gBAC3C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;aAClC;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,MAAM,CACnB,QAAQ,CAAC,KAAK,EACd,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,EACtC,QAAQ,CAAC,EAAE,CACZ,CAAC;aACH;YAED,IAAI,QAAQ,CAAC,QAAQ,EAAE;gBACrB,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;gBACzB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;aACzC;iBAAM;gBACL,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;gBAExC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;oBAC3C,qCAAqC;oBACrC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBAC5C,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;oBAChC,IAAI,MAAM,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;wBACzD,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC;wBAC7D,IAAI,QAAQ,EAAE;4BACZ,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;yBACxC;qBACF;iBACF;gBAED,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;gBAClB,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;aAC5B;SACF;IACH,CAAC;IAEM,SAAS,CAAC,EAAU;QACzB,MAAM,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;QACjC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QACpC,MAAM,IAAI,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC;QAEhD,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;YACnC,OAAO,IAAI,CAAC;SACb;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAEM,WAAW;QAChB,OAAO,IAAI,CAAC,uBAAuB,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3D,CAAC;IAEM,uBAAuB,CAAC,SAAmB;QAChD,MAAM,IAAI,GAAG,SAAS,CAAC;QACvB,IAAI,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;QAC5B,IAAI,IAAI,GAAG,IAAI,CAAC;QAChB,OAAO,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YACtB,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAClC,IAAI,KAAK,EAAE;gBACT,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,IAAI,CAAC,CAAC;gBACvC,IAAI,IAAI,EAAE;oBACR,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;iBACpB;qBAAM;oBACL,MAAM;iBACP;aACF;iBAAM;gBACL,MAAM;aACP;SACF;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAEM,YAAY;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAEM,YAAY,CAAC,IAAc;QAChC,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;QACzB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;QAEpB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAC3B;IACH,CAAC;IAEM,gBAAgB,CAAC,IAAY;QAClC,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QAEtD,0CAA0C;QAC1C,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;QAE1D,IAAI,CAAC,OAAO,EAAE;YACZ,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;SAC3B;IACH,CAAC;IAEM,cAAc,CAAC,IAAY;QAChC,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QAC3D,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC;QAC7B,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC;IAEO,UAAU,CAAC,QAAkB;QACnC,IAAI,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE;YAC1C,OAAO,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,EAAE,CAAC;SACtD;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAEO,UAAU,CAAC,QAAkB;QACnC,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QACjE,OAAO,QAAQ,CAAC;IAClB,CAAC;IA0FM,MAAM;QACX,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YAClC,OAAO,IAAI,CAAA;;;;;SAKR,CAAC;SACL;QAED,IAAI,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;QAClC,MAAM,MAAM,GAAG,EAAE,CAAC;QAElB,MAAM,CAAC,IAAI,CACT,IAAI,CAAA,6BAA6B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;;UAGzD,KAAK;aACJ,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;aAC5B,GAAG,CAAC,CAAC,IAAc,EAAE,EAAE;YACtB,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QACnC,CAAC,CAAC;;;UAGF,KAAK;aACJ,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;aAC7B,GAAG,CAAC,CAAC,IAAc,EAAE,EAAE;YACtB,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QACnC,CAAC,CAAC;;aAEC,CACR,CAAC;QAEF,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;YACnC,MAAM,QAAQ,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;YAC5D,IAAI,SAAS,GAAG,KAAK,CAAC;YACtB,IAAI,QAAQ,EAAE;gBACZ,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;gBACvB,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;gBACrD,uCAAuC;gBACvC,IAAI,SAAS,CAAC,SAAS,EAAE;oBACvB,SAAS,GAAG,SAAS,CAAC,SAAS,KAAK,WAAW,CAAC;iBACjD;gBACD,0CAA0C;qBACrC;oBACH,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,GAAG,CAAC,EAAE;wBAC9C,SAAS,GAAG,IAAI,CAAC;qBAClB;iBACF;aACF;iBAAM;gBACL,KAAK,GAAG,IAAI,CAAC;aACd;YAED,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;gBACjD,MAAM,CAAC,IAAI,CACT,IAAI,CAAA;qBACO,UAAU,CAAC;oBAClB,KAAK,EAAE,IAAI;oBACX,CAAC,QAAQ,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI;oBAC9B,SAAS;iBACV,CAAC;;cAEA,CAAC,IAAI,CAAC,OAAO;oBACb,CAAC,CAAC,IAAI,CAAA,wBAAwB,QAAQ,CAAC,IAAI,QAAQ;oBACnD,CAAC,CAAC,IAAI;cACN,KAAK,CAAC,GAAG,CAAC,CAAC,IAAc,EAAE,EAAE;oBAC7B,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE;wBACxC,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;;sBAEjC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAe,EAAE,EAAE;4BACnC,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;wBACpC,CAAC,CAAC;yBACG,CAAC;qBACX;oBACD,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;gBACnC,CAAC,CAAC;iBACG,CACR,CAAC;aACH;QACH,CAAC,CAAC,CAAC;QAEH,MAAM,IAAI,GAAG,IAAI,CAAA,qBAAqB,MAAM,QAAQ,CAAC;QACrD,OAAO,IAAI,CAAA,GAAG,IAAI,EAAE,CAAC;IACvB,CAAC;CACF;AA5cC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACd;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACd;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACT;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACb;AAId;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACX","sourcesContent":["import { css, html, property, TemplateResult } from 'lit-element';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { fetchResults, getClasses } from '../utils';\n\nexport interface MenuItem {\n  id?: string;\n  name?: string;\n  count?: number;\n  icon?: string;\n  collapsed_icon?: string;\n  endpoint?: string;\n  loading?: boolean;\n  bottom?: boolean;\n  level?: number;\n  trigger?: string;\n  href?: string;\n  items?: MenuItem[];\n  inline?: boolean;\n}\n\ninterface MenuItemState {\n  collapsed?: string;\n}\n\nexport class TembaMenu extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        width: 100%;\n        display: block;\n        --color-widget-bg-focused: transparent;\n        --options-block-shadow: none;\n      }\n\n      .section {\n        font-size: 1.875rem;\n        margin-bottom: 0.2em;\n        color: var(--color-text-dark);\n      }\n\n      .collapse-toggle {\n        width: 0.5em;\n        cursor: pointer;\n        display: block;\n        margin-right: 5px;\n        margin-top: 3px;\n        margin-bottom: 3px;\n      }\n\n      .collapse-toggle:hover {\n        background: rgb(100, 100, 100, 0.05);\n      }\n\n      .item {\n        cursor: pointer;\n        user-select: none;\n        -webkit-user-select: none;\n        display: flex;\n        font-size: 1.15em;\n      }\n\n      .item.selected {\n        background: var(--color-selection);\n        color: var(--color-primary-dark);\n        --icon-color: var(--color-primary-dark);\n      }\n\n      .root {\n        display: flex;\n        flex-direction: row;\n        height: 100%;\n      }\n\n      .level {\n        display: flex;\n        flex-direction: column;\n      }\n\n      .level.hidden {\n        display: none;\n      }\n\n      .submenu {\n      }\n\n      .level-0 > .item {\n        background: var(--color-primary-dark);\n        --icon-color: #fff;\n        font-size: 1em;\n      }\n\n      .level-0 > .top {\n        padding-top: var(--menu-padding);\n        background: var(--color-primary-dark);\n      }\n\n      .level-0 > .empty {\n        background: var(--color-primary-dark);\n        align-self: stretch;\n        flex-grow: 1;\n      }\n\n      .level-0 > .bottom {\n        height: 1em;\n        background: var(--color-primary-dark);\n      }\n\n      .level-0 > .item > .details {\n        display: none !important;\n      }\n\n      .level-0.expanding {\n      }\n\n      .level-0.expanded {\n        background: inherit;\n      }\n\n      .level-0 > .item.selected {\n        background: inherit;\n        --icon-color: var(--color-primary-dark);\n      }\n\n      .level {\n        padding: var(--menu-padding);\n      }\n\n      .level-0 {\n        padding: 0px;\n      }\n\n      .item {\n        padding: 0.2em 0.75em;\n        margin-top: 0.1em;\n        border-radius: var(--curvature);\n        display: flex;\n      }\n\n      .item > temba-icon {\n        margin-right: 0.5em;\n      }\n\n      .item.inline > temba-icon {\n        margin-right: 0em;\n      }\n\n      .item > .details > .name {\n        flex-grow: 1;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .level-0 > .item {\n        padding: 1em 1em;\n        margin-top: 0em;\n        border-radius: 0px;\n      }\n\n      .level-0 > .item > temba-icon {\n        margin-right: 0px;\n      }\n\n      .level-0 > .item > .name {\n        min-width: 0px;\n      }\n\n      .count {\n        align-self: center;\n        margin-left: 1em;\n        font-size: 0.8em;\n        font-weight: 400;\n      }\n\n      .level-0 > .item-top {\n        background: var(--color-primary-dark);\n        min-height: var(--curvature);\n      }\n\n      .level-0 > .item-bottom {\n        background: var(--color-primary-dark);\n        min-height: var(--curvature);\n      }\n\n      .level-0 > .item-bottom.selected {\n        border-top-right-radius: var(--curvature);\n      }\n\n      .level-0 > .item-top.selected {\n        border-bottom-right-radius: var(--curvature);\n      }\n\n      .level-0 > .selected-top {\n      }\n\n      .level-0 > .item:hover {\n        background: rgba(var(--primary-rgb), 0.85);\n      }\n\n      .level-0 > .item.selected:hover {\n        background: inherit;\n      }\n\n      .inline-children {\n        padding-left: 0.5em;\n      }\n\n      .inline-children {\n        background: #ffffff;\n        padding: 0.5em;\n        border-bottom-right-radius: var(--curvature);\n        border-bottom-left-radius: var(--curvature);\n        font-size: 0.9rem;\n        margin-bottom: 0.75em;\n        border: 1px solid #f1f1f1;\n      }\n\n      .item.inline {\n        border: 1px solid #f1f1f1;\n        margin-top: 0.75em;\n      }\n\n      .item.inline.child-selected,\n      .item.inline.selected {\n        background: #f1f1f1;\n        border-bottom-right-radius: 0px !important;\n        border-bottom-left-radius: 0px !important;\n        z-index: 1000;\n        color: #444;\n        --icon-color: #444;\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        overflow-y: auto;\n        z-index: 1500;\n      }\n\n      .level-2 {\n        background: #fbfbfb;\n        overflow-y: auto;\n        z-index: 1000;\n      }\n\n      .level-2 .item .details {\n        overflow: hidden;\n      }\n\n      .level-2 .item {\n        min-width: 12em;\n        max-width: 12em;\n      }\n\n      .level-1 .item {\n        overflow: hidden;\n        max-width: 12em;\n        min-width: 12em;\n        min-height: 1.5em;\n        max-height: 1.5em;\n        transition: min-width var(--transition-speed) !important;\n      }\n\n      .level-1 .item .details {\n      }\n\n      .collapsed .item {\n        overflow: hidden;\n        min-width: 0;\n        margin: 0;\n      }\n\n      .item .details {\n        opacity: 1;\n        min-height: 1.5em;\n        max-height: 1.5em;\n        align-items: center;\n      }\n\n      .item .details .name {\n      }\n\n      .item temba-icon {\n      }\n\n      .collapsed .item .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        transition: opacity var(--transition-speed) linear !important;\n        max-width: 12em;\n      }\n\n      .collapsed .section {\n        opacity: 0;\n        max-width: 0em;\n        max-height: 0.3em;\n      }\n\n      .collapsed.level-1 {\n        overflow: hidden;\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      }\n\n      .divider {\n        height: 1px;\n        background: #f3f3f3;\n        margin: 0.5em 0.75em;\n        min-height: 1px;\n      }\n\n      .collapsed .divider {\n        height: 0;\n        margin: 0;\n        padding: 0;\n        min-height: 0px;\n      }\n    `;\n  }\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  // http promise to monitor for completeness\n  public httpComplete: Promise<void>;\n\n  root: MenuItem;\n  selection: string[] = [];\n  pending: string[] = [];\n  state: { [id: string]: MenuItemState } = {};\n\n  constructor() {\n    super();\n  }\n\n  private getMenuItemState(id: string): MenuItemState {\n    let itemState = {};\n    if (id) {\n      itemState = this.state[id];\n      if (!itemState) {\n        itemState = {};\n        this.state[id] = itemState;\n      }\n    }\n    return itemState;\n  }\n\n  public updated(changes: Map<string, any>) {\n    if (changes.has('value')) {\n      this.setSelection((this.value || '').split('/'));\n    }\n\n    if (changes.has('submenu') && !changes.has('value')) {\n      this.setSelection([this.submenu]);\n    }\n\n    if (changes.has('endpoint')) {\n      this.root = {\n        level: -1,\n        endpoint: this.endpoint,\n      };\n\n      if (!this.wait) {\n        this.loadItems(this.root);\n      }\n    }\n  }\n\n  public refresh() {\n    const path = [...this.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 = items.find(mi => mi.id == step);\n        if (item) {\n          if (item.endpoint) {\n            item.loading = true;\n            const itemToUpdate = item;\n            fetchResults(itemToUpdate.endpoint).then((updated: MenuItem[]) => {\n              // for now we only deal with updating counts and names\n              (itemToUpdate.items || []).forEach(\n                (existing: MenuItem, index: number, items: []) => {\n                  const updatedItem = updated.find(\n                    updatedItem => updatedItem.id === existing.id\n                  );\n\n                  // we were removed!\n                  if (!updatedItem) {\n                    items.splice(index, 1);\n\n                    if (\n                      this.selection.length > 1 &&\n                      this.selection[this.selection.length - 1] == existing.id\n                    ) {\n                      this.selection.splice(this.selection.length - 1, 1);\n                      this.clickItem(this.selection[this.selection.length - 1]);\n                    }\n                  } else {\n                    existing.count = updatedItem.count;\n                    existing.name = updatedItem.name;\n                  }\n                }\n              );\n\n              itemToUpdate.loading = false;\n              this.requestUpdate('root');\n            });\n          }\n\n          items = item.items;\n        }\n      } else {\n        break;\n      }\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private loadItems(item: MenuItem) {\n    if (item && item.endpoint) {\n      item.loading = true;\n      this.httpComplete = fetchResults(item.endpoint).then(\n        (items: MenuItem[]) => {\n          // update our item level\n          items.forEach(subItem => (subItem.level = item.level + 1));\n          item.items = items;\n          item.loading = false;\n          this.requestUpdate('root');\n          if (this.pending && this.pending.length > 0) {\n            // auto select the next pending click\n            const nextId = this.pending.splice(0, 1)[0];\n            if (nextId && items.length > 0) {\n              const nextItem = items.find(item => item.id === nextId);\n              if (nextItem) {\n                this.handleItemClicked(null, nextItem);\n              } else {\n                this.fireCustomEvent(CustomEventType.NoPath, {\n                  item: item.id,\n                  endpoint: item.endpoint,\n                  path: nextId + '/' + this.pending.join('/'),\n                });\n              }\n            }\n          } else {\n            // auto select the first item\n            if (\n              items.length > 0 &&\n              this.selection.length >= 1 &&\n              !item.inline\n            ) {\n              this.handleItemClicked(null, items[0]);\n            }\n          }\n        }\n      );\n    }\n  }\n\n  private handleItemClicked(event: MouseEvent, menuItem: MenuItem) {\n    if (event) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    if (menuItem.trigger) {\n      window[menuItem.trigger]();\n    } else {\n      if (menuItem.level === 0) {\n        /* this.expanding = menuItem.id;\n        window.setTimeout(() => {\n          this.expanding = null;\n        }, 60);\n        */\n      }\n\n      // update our selection\n      if (menuItem.level >= this.selection.length) {\n        this.selection.push(menuItem.id);\n      } else {\n        this.selection.splice(\n          menuItem.level,\n          this.selection.length - menuItem.level,\n          menuItem.id\n        );\n      }\n\n      if (menuItem.endpoint) {\n        this.loadItems(menuItem);\n        this.dispatchEvent(new Event('change'));\n      } else {\n        this.dispatchEvent(new Event('change'));\n\n        if (this.pending && this.pending.length > 0) {\n          // auto select the next pending click\n          const nextId = this.pending.splice(0, 1)[0];\n          const item = this.getMenuItem();\n          if (nextId && item && item.items && item.items.length > 0) {\n            const nextItem = item.items.find(item => item.id === nextId);\n            if (nextItem) {\n              this.handleItemClicked(null, nextItem);\n            }\n          }\n        }\n\n        this.pending = [];\n        this.requestUpdate('root');\n      }\n    }\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      return true;\n    }\n    return false;\n  }\n\n  public getMenuItem() {\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 = items.find(mi => mi.id == step);\n        if (item) {\n          items = item.items;\n        } else {\n          break;\n        }\n      } else {\n        break;\n      }\n    }\n\n    return item;\n  }\n\n  public getSelection() {\n    return this.selection;\n  }\n\n  public setSelection(path: string[]) {\n    this.pending = [...path];\n    this.selection = [];\n\n    if (this.wait) {\n      this.wait = false;\n      this.loadItems(this.root);\n    }\n  }\n\n  public setSelectionPath(path: string) {\n    const asPath = path.split('/').filter(step => !!step);\n\n    // first try to click in the current space\n    const clicked = this.clickItem(asPath[asPath.length - 1]);\n\n    if (!clicked) {\n      this.wait = true;\n      this.setSelection(asPath);\n    }\n  }\n\n  public setFocusedItem(path: string) {\n    const focusedPath = path.split('/').filter(step => !!step);\n    this.selection = focusedPath;\n    this.requestUpdate('root');\n  }\n\n  private isSelected(menuItem: MenuItem) {\n    if (menuItem.level < this.selection.length) {\n      return this.selection[menuItem.level] == menuItem.id;\n    }\n    return false;\n  }\n\n  private isExpanded(menuItem: MenuItem) {\n    const expanded = !!this.selection.find(id => menuItem.id === id);\n    return expanded;\n  }\n\n  private renderMenuItem = (menuItem: MenuItem): TemplateResult => {\n    if (menuItem.id === 'divider') {\n      return html`<div class=\"divider\"></div>`;\n    }\n\n    const isSelected = this.isSelected(menuItem);\n    const isChildSelected =\n      isSelected && this.selection.length > menuItem.level + 1;\n\n    const icon = menuItem.icon\n      ? html`<temba-icon\n          size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n          name=\"${menuItem.icon}\"\n        ></temba-icon>`\n      : null;\n\n    const collapsedIcon = menuItem.collapsed_icon\n      ? html`<temba-icon\n          size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n          name=\"${menuItem.collapsed_icon}\"\n          class=\"collapse-icon\"\n        ></temba-icon>`\n      : null;\n\n    const itemClasses = getClasses({\n      ['menu-' + menuItem.id]: true,\n      'child-selected': isChildSelected,\n      selected: isSelected,\n      item: true,\n      inline: menuItem.inline,\n      expanding: this.expanding && this.expanding === menuItem.id,\n      expanded: this.isExpanded(menuItem),\n      iconless: !icon && !collapsedIcon,\n    });\n\n    const item = html` <div\n        class=\"item-top ${isSelected ? 'selected' : null} \"\n      ></div>\n\n      <div\n        id=\"menu-${menuItem.id}\"\n        class=\"${itemClasses}\"\n        @click=${event => {\n          this.handleItemClicked(event, menuItem);\n        }}\n      >\n        ${menuItem.level === 0\n          ? html`<temba-tip\n              style=\"display:flex;\"\n              text=\"${menuItem.name}\"\n              position=\"right\"\n              >${icon}</temba-tip\n            >`\n          : html`${icon}${collapsedIcon}`}\n\n        <div class=\"details\" style=\"flex-grow:1;display:flex\">\n          <div\n            class=\"name\"\n            style=\"flex-grow:1; flex-shrink:0 white-space: ${this.wraps\n              ? 'normal'\n              : 'nowrap'};\"\n          >\n            ${menuItem.name}\n          </div>\n          ${menuItem.level > 0\n            ? menuItem.inline\n              ? html`<temba-icon\n                  name=\"chevron-${isSelected || isChildSelected\n                    ? 'up'\n                    : 'down'}\"\n                ></temba-icon>`\n              : html`${menuItem.count || menuItem.count == 0\n                  ? html`\n                      <div class=\"count\">\n                        ${menuItem.count.toLocaleString()}\n                      </div>\n                    `\n                  : html`<div class=\"count\"></div>`}`\n            : null}\n        </div>\n        <div class=\"right\"></div>\n      </div>\n\n      <div class=\"item-bottom ${isSelected ? 'selected' : null}\"></div>`;\n\n    return item;\n  };\n\n  public render(): TemplateResult {\n    if (!this.root || !this.root.items) {\n      return html`<temba-loading\n        units=\"3\"\n        size=\"10\"\n        direction=\"column\"\n        style=\"margin:1em;margin-right:0em\"\n      />`;\n    }\n\n    let items = this.root.items || [];\n    const levels = [];\n\n    levels.push(\n      html`<div class=\"level level-0 ${this.submenu ? 'hidden' : ''}\">\n        <div class=\"top\"></div>\n\n        ${items\n          .filter(item => !item.bottom)\n          .map((item: MenuItem) => {\n            return this.renderMenuItem(item);\n          })}\n\n        <div class=\"empty\"></div>\n        ${items\n          .filter(item => !!item.bottom)\n          .map((item: MenuItem) => {\n            return this.renderMenuItem(item);\n          })}\n        <div class=\"bottom\"></div>\n      </div>`\n    );\n\n    this.selection.forEach((id, index) => {\n      const selected = (items || []).find(item => item.id === id);\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 = true;\n          }\n        }\n      } else {\n        items = null;\n      }\n\n      if (items && items.length > 0 && !selected.inline) {\n        levels.push(\n          html`<div\n            class=\"${getClasses({\n              level: true,\n              ['level-' + (index + 1)]: true,\n              collapsed,\n            })}\"\n          >\n            ${!this.submenu\n              ? html`<div class=\"section\">${selected.name}</div>`\n              : null}\n            ${items.map((item: MenuItem) => {\n              if (item.inline && this.isSelected(item)) {\n                return html`${this.renderMenuItem(item)}\n                  <div class=\"inline-children\">\n                    ${item.items.map((child: MenuItem) => {\n                      return this.renderMenuItem(child);\n                    })}\n                  </div>`;\n              }\n              return this.renderMenuItem(item);\n            })}\n          </div>`\n        );\n      }\n    });\n\n    const menu = html`<div class=\"root\">${levels}</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, property, TemplateResult } from 'lit-element';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { fetchResults, getClasses } from '../utils';\n\nexport interface MenuItem {\n  id?: string;\n  vanity_id?: string;\n  name?: string;\n  count?: number;\n  icon?: string;\n  collapsed_icon?: string;\n  endpoint?: string;\n  loading?: boolean;\n  bottom?: boolean;\n  level?: number;\n  trigger?: string;\n  href?: string;\n  items?: MenuItem[];\n  inline?: boolean;\n  type?: string;\n}\n\ninterface MenuItemState {\n  collapsed?: string;\n}\n\nconst findItem = (items: MenuItem[], id: string) =>\n  (items || []).find((item: MenuItem) => {\n    return item.id == id || item.vanity_id == id;\n  });\n\nexport class TembaMenu extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        width: 100%;\n        display: block;\n        --color-widget-bg-focused: transparent;\n        --options-block-shadow: none;\n      }\n\n      .section {\n        font-size: 1.875rem;\n        margin-bottom: 0.2em;\n        color: var(--color-text-dark);\n      }\n\n      .collapse-toggle {\n        width: 0.5em;\n        cursor: pointer;\n        display: block;\n        margin-right: 5px;\n        margin-top: 3px;\n        margin-bottom: 3px;\n      }\n\n      .collapse-toggle:hover {\n        background: rgb(100, 100, 100, 0.05);\n      }\n\n      .item {\n        cursor: pointer;\n        user-select: none;\n        -webkit-user-select: none;\n        display: flex;\n        font-size: 1.15em;\n        --icon-color: var(--color-text-dark);\n      }\n\n      .item.selected {\n        background: var(--color-selection);\n        color: var(--color-primary-dark);\n        --icon-color: var(--color-primary-dark);\n      }\n\n      .root {\n        display: flex;\n        flex-direction: row;\n        height: 100%;\n      }\n\n      .level {\n        display: flex;\n        flex-direction: column;\n      }\n\n      .level.hidden {\n        display: none;\n      }\n\n      .submenu {\n      }\n\n      .level-0 > .item {\n        background: var(--color-primary-dark);\n        --icon-color: #fff;\n        font-size: 1em;\n      }\n\n      .level-0 > .top {\n        padding-top: var(--menu-padding);\n        background: var(--color-primary-dark);\n      }\n\n      .level-0 > .empty {\n        background: var(--color-primary-dark);\n        align-self: stretch;\n        flex-grow: 1;\n      }\n\n      .level-0 > .bottom {\n        height: 1em;\n        background: var(--color-primary-dark);\n      }\n\n      .level-0 > .item > .details {\n        display: none !important;\n      }\n\n      .level-0.expanding {\n      }\n\n      .level-0.expanded {\n        background: inherit;\n      }\n\n      .level-0 > .item.selected {\n        background: inherit;\n        --icon-color: var(--color-primary-dark);\n      }\n\n      .level {\n        padding: var(--menu-padding);\n      }\n\n      .level-0 {\n        padding: 0px;\n      }\n\n      .item {\n        padding: 0.2em 0.75em;\n        margin-top: 0.1em;\n        border-radius: var(--curvature);\n        display: flex;\n\n        min-width: 12em;\n        max-width: 12em;\n      }\n\n      .item > temba-icon {\n        margin-right: 0.5em;\n      }\n\n      .item.inline > temba-icon {\n        // margin-right: 0em;\n      }\n\n      .item > .details > .name {\n        flex-grow: 1;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 0;\n      }\n\n      .level-0 > .item {\n        padding: 1em 1em;\n        margin-top: 0em;\n        border-radius: 0px;\n        min-width: inherit;\n        max-width: inherit;\n      }\n\n      .level-0 > .item > temba-icon {\n        margin-right: 0px;\n      }\n\n      .level-0 > .item > .name {\n        min-width: 0px;\n      }\n\n      .count {\n        align-self: center;\n        margin-left: 1em;\n        font-size: 0.8em;\n        font-weight: 400;\n      }\n\n      .level-0 > .item-top {\n        background: var(--color-primary-dark);\n        min-height: var(--curvature);\n      }\n\n      .level-0 > .item-bottom {\n        background: var(--color-primary-dark);\n        min-height: var(--curvature);\n      }\n\n      .level-0 > .item-bottom.selected {\n        border-top-right-radius: var(--curvature);\n      }\n\n      .level-0 > .item-top.selected {\n        border-bottom-right-radius: var(--curvature);\n      }\n\n      .level-0 > .selected-top {\n      }\n\n      .level-0 > .item:hover {\n        background: rgba(var(--primary-rgb), 0.85);\n      }\n\n      .level-0 > .item.selected:hover {\n        background: inherit;\n      }\n\n      .inline-children {\n        // background: #ffffff;\n        padding: 0.5em;\n        border-bottom-right-radius: var(--curvature);\n        border-bottom-left-radius: var(--curvature);\n        font-size: 1rem;\n        margin-bottom: 0.75em;\n        border: 1px solid #f3f3f3;\n        // box-shadow: var(--shadow);\n        // margin-top: -1px;\n        z-index: 1000;\n        // margin-left: 1em;\n        border-top: none;\n      }\n\n      .inline-children .item {\n        max-width: 11em !important;\n        min-width: 11em !important;\n        // border: 1px solid #f1f1f1;\n        // margin-top: 0.75em;\n        // margin-right: -1em;\n        // padding-right: 0;\n      }\n\n      .item.inline {\n        border: 0px solid transparent;\n      }\n\n      .item.inline.child-selected,\n      .item.inline.selected {\n        background: #f3f3f3;\n        border: 0px solid #f1f1f1;\n        border-bottom-right-radius: 0px !important;\n        border-bottom-left-radius: 0px !important;\n        z-index: 1000;\n        color: #444;\n        --icon-color: #444;\n        // box-shadow: var(--shadow);\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        overflow-y: auto;\n        z-index: 1500;\n      }\n\n      .level-2 {\n        background: #fbfbfb;\n        overflow-y: auto;\n        z-index: 1000;\n      }\n\n      .level-2 .item .details {\n        overflow: hidden;\n      }\n\n      .level-2 .item {\n        min-width: 12em;\n        max-width: 12em;\n      }\n\n      .level-1 .item {\n        overflow: hidden;\n        max-width: 12em;\n        min-width: 12em;\n        min-height: 1.5em;\n        max-height: 1.5em;\n        transition: min-width var(--transition-speed) !important;\n      }\n\n      .level-1 .item .details {\n      }\n\n      .collapsed .item {\n        overflow: hidden;\n        min-width: 0;\n        margin: 0;\n      }\n\n      .item .details {\n        opacity: 1;\n        min-height: 1.5em;\n        max-height: 1.5em;\n        align-items: center;\n      }\n\n      .item .details .name {\n      }\n\n      .item temba-icon {\n      }\n\n      .collapsed .item {\n        margin-bottom: 0.5em;\n      }\n\n      .collapsed .item .details {\n        overflow: hidden;\n        max-height: 0em;\n        max-width: 0em;\n      }\n\n      .collapsed .item .details {\n        max-height: 0em;\n      }\n\n      .collapsed .item temba-icon {\n        margin-right: 0;\n      }\n\n      .section {\n        max-width: 12em;\n      }\n\n      .collapsed .section {\n        opacity: 0;\n        max-width: 0em;\n        max-height: 0.6em;\n      }\n\n      .collapsed.level-1 {\n        overflow: hidden;\n        padding: 0.5em;\n        --icon-color: #999;\n      }\n\n      .collapsed .item .right {\n        flex-grow: 1;\n      }\n\n      .collapse-icon {\n        display: none;\n      }\n\n      .collapsed .collapse-icon {\n        --icon-color: #ccc;\n        display: block;\n      }\n\n      .collapsed .item.iconless {\n        max-height: 0em;\n        padding: 0em;\n        min-height: 0em;\n        margin-bottom: 0em;\n      }\n\n      .divider {\n        height: 1px;\n        background: #f3f3f3;\n        margin: 0.5em 0.75em;\n        min-height: 1px;\n      }\n\n      .collapsed .divider {\n        height: 0;\n        margin: 0;\n        padding: 0;\n        min-height: 0px;\n      }\n\n      .sub-section {\n        font-size: 1.1rem;\n        color: #888;\n        margin-top: 1rem;\n        margin-left: 0.3rem;\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  // http promise to monitor for completeness\n  public httpComplete: Promise<void>;\n\n  root: MenuItem;\n  selection: string[] = [];\n  pending: string[] = [];\n  state: { [id: string]: MenuItemState } = {};\n\n  constructor() {\n    super();\n  }\n\n  private getMenuItemState(id: string): MenuItemState {\n    let itemState = {};\n    if (id) {\n      itemState = this.state[id];\n      if (!itemState) {\n        itemState = {};\n        this.state[id] = itemState;\n      }\n    }\n    return itemState;\n  }\n\n  public updated(changes: Map<string, any>) {\n    if (changes.has('value')) {\n      this.setSelection((this.value || '').split('/'));\n    }\n\n    if (changes.has('submenu') && !changes.has('value')) {\n      this.setSelection([this.submenu]);\n    }\n\n    if (changes.has('endpoint')) {\n      this.root = {\n        level: -1,\n        endpoint: this.endpoint,\n      };\n\n      if (!this.wait) {\n        this.loadItems(this.root);\n      }\n    }\n  }\n\n  public refresh() {\n    const path = [...this.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);\n        if (item) {\n          if (item.endpoint) {\n            item.loading = true;\n            const itemToUpdate = item;\n            fetchResults(itemToUpdate.endpoint).then((updated: MenuItem[]) => {\n              // for now we only deal with updating counts and names\n              (itemToUpdate.items || []).forEach(\n                (existing: MenuItem, index: number, items: []) => {\n                  const updatedItem = findItem(updated, existing.id);\n\n                  // we were removed!\n                  if (!updatedItem) {\n                    items.splice(index, 1);\n\n                    if (\n                      this.selection.length > 1 &&\n                      this.selection[this.selection.length - 1] == existing.id\n                    ) {\n                      this.selection.splice(this.selection.length - 1, 1);\n                      this.clickItem(this.selection[this.selection.length - 1]);\n                    }\n                  } else {\n                    existing.count = updatedItem.count;\n                    existing.name = updatedItem.name;\n                  }\n                }\n              );\n\n              itemToUpdate.loading = false;\n              this.requestUpdate('root');\n            });\n          }\n\n          items = item.items;\n        }\n      } else {\n        break;\n      }\n    }\n  }\n\n  private fireNoPath(missingId: string) {\n    const item = this.getMenuItem();\n\n    const details = {\n      item: item.id,\n      selection: '/' + this.selection.join('/'),\n      endpoint: item.endpoint,\n      path: missingId + '/' + this.pending.join('/') + document.location.search,\n    };\n\n    // remove any excess from our selection\n    const selection = this.selection.join('/');\n    selection.replace(details.path, '');\n    this.selection = selection.split('/');\n\n    this.fireCustomEvent(CustomEventType.NoPath, details);\n    this.pending = [];\n    this.requestUpdate('root');\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private loadItems(item: MenuItem, selectFirst = true) {\n    if (item && item.endpoint) {\n      item.loading = true;\n      this.httpComplete = fetchResults(item.endpoint).then(\n        (items: MenuItem[]) => {\n          // update our item level\n          items.forEach(subItem => {\n            subItem.level = item.level + 1;\n            // if we came with preset items, set the level for them accordingly\n            if (subItem.items) {\n              subItem.items.forEach(\n                inlineItem => (inlineItem.level = item.level + 2)\n              );\n            }\n          });\n\n          item.items = items;\n          item.loading = false;\n          this.requestUpdate('root');\n          this.scrollSelectedIntoView();\n          if (this.pending && this.pending.length > 0) {\n            // auto select the next pending click\n            const nextId = this.pending.splice(0, 1)[0];\n            if (nextId && items.length > 0) {\n              const nextItem = findItem(items, nextId);\n              if (nextItem) {\n                this.handleItemClicked(null, nextItem);\n              } else {\n                this.fireNoPath(nextId);\n              }\n            }\n          } else {\n            // auto select the first item\n            if (\n              selectFirst &&\n              items.length > 0 &&\n              this.selection.length >= 1 &&\n              !item.inline\n            ) {\n              for (const item of items) {\n                if (!item.type) {\n                  this.handleItemClicked(null, item);\n                  break;\n                }\n              }\n            }\n          }\n        }\n      );\n    }\n  }\n\n  private handleItemClicked(event: MouseEvent, menuItem: MenuItem) {\n    if (event) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    if (menuItem.trigger) {\n      window[menuItem.trigger]();\n    } else {\n      if (menuItem.level === 0) {\n        /* this.expanding = menuItem.id;\n        window.setTimeout(() => {\n          this.expanding = null;\n        }, 60);\n        */\n      }\n\n      // update our selection\n      if (menuItem.level >= this.selection.length) {\n        this.selection.push(menuItem.vanity_id || menuItem.id);\n      } else {\n        this.selection.splice(\n          menuItem.level,\n          this.selection.length - menuItem.level,\n          menuItem.vanity_id || menuItem.id\n        );\n      }\n\n      if (menuItem.endpoint) {\n        this.loadItems(menuItem, !menuItem.href);\n        this.dispatchEvent(new Event('change'));\n      } else {\n        this.dispatchEvent(new Event('change'));\n\n        if (this.pending && this.pending.length > 0) {\n          // auto select the next pending click\n          const nextId = this.pending.splice(0, 1)[0];\n          const item = this.getMenuItem();\n          if (nextId && item && item.items && item.items.length > 0) {\n            const nextItem = findItem(item.items, nextId);\n            if (nextItem) {\n              this.handleItemClicked(null, nextItem);\n            }\n          } else {\n            this.fireNoPath(nextId);\n          }\n        }\n        this.requestUpdate('root');\n      }\n    }\n  }\n\n  public scrollSelectedIntoView() {\n    // makes sure we are scrolled into view\n    window.setTimeout(() => {\n      const eles = this.shadowRoot.querySelectorAll('.selected');\n      eles.forEach(ele => {\n        ele.scrollIntoView({ block: 'end', behavior: 'smooth' });\n      });\n    }, 0);\n  }\n\n  public clickItem(id: string): boolean {\n    const path = [...this.selection];\n    path.splice(path.length - 1, 1, id);\n    const item = this.getMenuItemForSelection(path);\n\n    if (item) {\n      this.handleItemClicked(null, item);\n      this.scrollSelectedIntoView();\n      return true;\n    }\n    return false;\n  }\n\n  public getMenuItem(): MenuItem {\n    return this.getMenuItemForSelection([...this.selection]);\n  }\n\n  public getMenuItemForSelection(selection: string[]) {\n    const path = selection;\n    let items = this.root.items;\n    let item = null;\n    while (path.length > 0) {\n      const step = path.splice(0, 1)[0];\n      if (items) {\n        item = findItem(items, step);\n        if (item) {\n          items = item.items;\n        } else {\n          break;\n        }\n      } else {\n        break;\n      }\n    }\n\n    return item;\n  }\n\n  public getSelection() {\n    return this.selection;\n  }\n\n  public setSelection(path: string[]) {\n    this.pending = [...path];\n    this.selection = [];\n\n    if (this.wait) {\n      this.wait = false;\n      this.loadItems(this.root);\n    }\n  }\n\n  public setSelectionPath(path: string) {\n    const asPath = path.split('/').filter(step => !!step);\n\n    // first try to click in the current space\n    const clicked = this.clickItem(asPath[asPath.length - 1]);\n\n    if (!clicked) {\n      this.wait = true;\n      this.setSelection(asPath);\n    }\n  }\n\n  public async setFocusedItem(path: string) {\n    const focusedPath = path.split('/').filter(step => !!step);\n\n    // if we don't match at the first level, we are a noop\n    if (focusedPath.length > 0) {\n      const rootItem = findItem(this.root.items, focusedPath[0]);\n      if (!rootItem) {\n        return;\n      }\n    }\n\n    const newPath = [];\n    let level = this.root;\n    while (focusedPath.length > 0) {\n      const nextId = focusedPath.shift();\n      if (nextId) {\n        if (!level.items) {\n          this.loadItems(level, false);\n          await this.httpComplete;\n        }\n\n        level = findItem(level.items, nextId);\n        if (!level) {\n          focusedPath.splice(0, focusedPath.length);\n        } else {\n          newPath.push(nextId);\n        }\n      }\n    }\n\n    this.selection = newPath;\n    this.requestUpdate('root');\n  }\n\n  private isSelected(menuItem: MenuItem) {\n    if (menuItem.level < this.selection.length) {\n      const selected =\n        this.selection[menuItem.level] == (menuItem.vanity_id || menuItem.id);\n      return selected;\n    }\n    return false;\n  }\n\n  private isExpanded(menuItem: MenuItem) {\n    const expanded = !!this.selection.find(\n      id => id === menuItem.vanity_id || menuItem.id\n    );\n    return expanded;\n  }\n\n  private renderMenuItem = (menuItem: MenuItem): TemplateResult => {\n    if (menuItem.type === 'divider') {\n      return html`<div class=\"divider\"></div>`;\n    }\n\n    if (menuItem.type === 'section') {\n      return html`<div class=\"sub-section\">${menuItem.name}</div>`;\n    }\n\n    const isSelected = this.isSelected(menuItem);\n    const isChildSelected =\n      isSelected && this.selection.length > menuItem.level + 1;\n\n    const icon = menuItem.icon\n      ? html`<temba-icon\n          size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n          name=\"${menuItem.icon}\"\n        ></temba-icon>`\n      : null;\n\n    const collapsedIcon = menuItem.collapsed_icon\n      ? html`<temba-icon\n          size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n          name=\"${menuItem.collapsed_icon}\"\n          class=\"collapse-icon\"\n        ></temba-icon>`\n      : null;\n\n    const itemClasses = getClasses({\n      ['menu-' + menuItem.id]: true,\n      'child-selected': isChildSelected,\n      selected: isSelected,\n      item: true,\n      inline: menuItem.inline,\n      expanding: this.expanding && this.expanding === menuItem.id,\n      expanded: this.isExpanded(menuItem),\n      iconless: !icon && !collapsedIcon,\n    });\n\n    const item = html` <div\n        class=\"item-top ${isSelected ? 'selected' : null} \"\n      ></div>\n\n      <div\n        id=\"menu-${menuItem.id}\"\n        class=\"${itemClasses}\"\n        @click=${event => {\n          this.handleItemClicked(event, menuItem);\n        }}\n      >\n        ${menuItem.level === 0\n          ? html`<temba-tip\n              style=\"display:flex;\"\n              text=\"${menuItem.name}\"\n              position=\"right\"\n              >${icon}</temba-tip\n            >`\n          : html`${icon}${collapsedIcon}`}\n\n        <div class=\"details\" style=\"flex-grow:1;display:flex\">\n          <div\n            class=\"name\"\n            style=\"flex-grow:1; flex-shrink:0; white-space: ${this.wraps\n              ? 'normal'\n              : 'nowrap'};\"\n          >\n            ${menuItem.name}\n          </div>\n          ${menuItem.level > 0\n            ? menuItem.inline\n              ? html`<temba-icon\n                  name=\"chevron-${isSelected || isChildSelected\n                    ? 'up'\n                    : 'down'}\"\n                ></temba-icon>`\n              : html`${menuItem.count || menuItem.count == 0\n                  ? html`\n                      <div class=\"count\">\n                        ${menuItem.count.toLocaleString()}\n                      </div>\n                    `\n                  : html`<div class=\"count\"></div>`}`\n            : null}\n        </div>\n        <div class=\"right\"></div>\n      </div>\n\n      <div class=\"item-bottom ${isSelected ? 'selected' : null}\"></div>`;\n\n    return item;\n  };\n\n  public render(): TemplateResult {\n    if (!this.root || !this.root.items) {\n      return html`<temba-loading\n        units=\"3\"\n        size=\"10\"\n        direction=\"column\"\n        style=\"margin:1em;margin-right:0em\"\n      />`;\n    }\n\n    let items = this.root.items || [];\n    const levels = [];\n\n    levels.push(\n      html`<div class=\"level level-0 ${this.submenu ? 'hidden' : ''}\">\n        <div class=\"top\"></div>\n\n        ${items\n          .filter(item => !item.bottom)\n          .map((item: MenuItem) => {\n            return this.renderMenuItem(item);\n          })}\n\n        <div class=\"empty\"></div>\n        ${items\n          .filter(item => !!item.bottom)\n          .map((item: MenuItem) => {\n            return this.renderMenuItem(item);\n          })}\n        <div class=\"bottom\"></div>\n      </div>`\n    );\n\n    this.selection.forEach((id, index) => {\n      const selected = findItem(items, id);\n\n      let collapsed = false;\n      if (selected) {\n        items = selected.items;\n        const itemState = this.getMenuItemState(selected.id);\n        // users set an explicit collapse state\n        if (itemState.collapsed) {\n          collapsed = itemState.collapsed === 'collapsed';\n        }\n        // otherwise pick a default collapse state\n        else {\n          if (this.selection.length > selected.level + 2) {\n            collapsed = false;\n          }\n        }\n      } else {\n        items = null;\n      }\n\n      if (items && items.length > 0 && !selected.inline) {\n        levels.push(\n          html`<div\n            class=\"${getClasses({\n              level: true,\n              ['level-' + (index + 1)]: true,\n              collapsed,\n            })}\"\n          >\n            ${!this.submenu\n              ? html`<div class=\"section\">${selected.name}</div>`\n              : null}\n            ${items.map((item: MenuItem) => {\n              if (item.inline && this.isSelected(item)) {\n                return html`${this.renderMenuItem(item)}\n                  <div class=\"inline-children\">\n                    ${item.items.map((child: MenuItem) => {\n                      return this.renderMenuItem(child);\n                    })}\n                  </div>`;\n              }\n              return this.renderMenuItem(item);\n            })}\n          </div>`\n        );\n      }\n    });\n\n    const menu = html`<div class=\"root\">${levels}</div>`;\n    return html`${menu}`;\n  }\n}\n"]}

package/out-tsc/src/omnibox/Omnibox.js

@@ -56,7 +56,9 @@ export class Omnibox extends RapidElement {
             }
         }
         if (option.type === OmniType.Group) {
-            return html ` <div style=${styleMap(style)}>${option.count}</div> `;
+            return html `
+        <div style=${styleMap(style)}>${option.count.toLocaleString()}</div>
+      `;
         }
         return null;
     }
@@ -114,6 +116,10 @@ export class Omnibox extends RapidElement {
             }
         }
     }
+    getValues() {
+        const select = this.shadowRoot.querySelector('temba-select');
+        return select.values;
+    }
     render() {
         return html `
       <temba-select

package/out-tsc/src/omnibox/Omnibox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Omnibox.js","sourceRoot":"","sources":["../../../src/omnibox/Omnibox.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,IAAK,QAIJ;AAJD,WAAK,QAAQ;IACX,2BAAe,CAAA;IACf,+BAAmB,CAAA;IACnB,uBAAW,CAAA;AACb,CAAC,EAJI,QAAQ,KAAR,QAAQ,QAIZ;AAYD,MAAM,aAAa,GAAG;IACpB,KAAK,EAAE,wBAAwB;IAC/B,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,MAAM;CACjB,CAAC;AAEF,MAAM,OAAO,OAAQ,SAAQ,YAAY;IAAzC;;QAoBE,WAAM,GAAG,KAAK,CAAC;QAGf,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;QAGb,UAAK,GAAiB,EAAE,CAAC;QAMzB,gBAAW,GAAG,mBAAmB,CAAC;QAGlC,aAAQ,GAAG,KAAK,CAAC;IAqInB,CAAC;IA1KC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;KAQT,CAAC;IACJ,CAAC;IA4CD,iCAAiC;IACzB,YAAY,CAAC,MAAkB;QACrC,OAAO,IAAI,CAAA;;yCAE0B,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;+BAC9B,MAAM,CAAC,IAAI;;;;YAI9B,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;;;KAG/B,CAAC;IACJ,CAAC;IAEO,WAAW,CAAC,MAAkB;QACpC,MAAM,KAAK,GAAG,EAAE,GAAG,aAAa,EAAE,CAAC;QAEnC,IAAI,MAAM,CAAC,GAAG,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,CAAC,OAAO,EAAE;YAClD,IAAI,MAAM,CAAC,GAAG,KAAK,MAAM,CAAC,IAAI,EAAE;gBAC9B,OAAO,IAAI,CAAA,eAAe,QAAQ,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,GAAG,SAAS,CAAC;aAClE;SACF;QAED,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,CAAC,KAAK,EAAE;YAClC,OAAO,IAAI,CAAA,eAAe,QAAQ,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,KAAK,SAAS,CAAC;SACpE;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,+CAA+C;IACvC,eAAe,CAAC,MAAkB;QACxC,OAAO,IAAI,CAAA;;;;;YAKH,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;;;;;;YAMpB,MAAM,CAAC,IAAI;;;;;YAKX,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;;;KAG/B,CAAC;IACJ,CAAC;IAEO,OAAO,CAAC,MAAkB;QAChC,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,CAAC,KAAK,EAAE;YAClC,OAAO,IAAI,CAAA,+BAA+B,CAAC;SAC5C;QAED,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,CAAC,OAAO,EAAE;YACpC,OAAO,IAAI,CAAA,8BAA8B,CAAC;SAC3C;IACH,CAAC;IAEO,WAAW;QACjB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,KAAK,GAAG,SAAS,CAAC;QACtB,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,KAAK,IAAI,GAAG,CAAC;SACd;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,IAAI,GAAG,CAAC;SACd;QAED,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,KAAK,IAAI,GAAG,CAAC;SACd;QAED,OAAO,QAAQ,GAAG,KAAK,CAAC;IAC1B,CAAC;IAED,6DAA6D;IACrD,qBAAqB,CAAC,KAAa;QACzC,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,MAAM,GAAG,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;YAC9B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,GAAG,CAAC,EAAE;gBAChC,OAAO,EAAE,EAAE,EAAE,MAAM,GAAG,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;aACzD;SACF;IACH,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC,IAAI;mBACL,IAAI,CAAC,WAAW,EAAE;sBACf,IAAI,CAAC,WAAW;;iBAErB,IAAI,CAAC,KAAK;oBACP,IAAI,CAAC,QAAQ;sBACX,IAAI,CAAC,UAAU;oBACjB,IAAI,CAAC,QAAQ;kBACf,IAAI,CAAC,MAAM;kBACX,IAAI,CAAC,KAAK;wBACJ,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;8BACtB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;iCAC5B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC;qBACjD,IAAI;;;;;KAKpB,CAAC;IACJ,CAAC;CACF;AA7JC;IADC,QAAQ,EAAE;yCACM;AAGjB;IADC,QAAQ,EAAE;qCACE;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACb;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACf;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;sCACD;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;uCACT;AAGjB;IADC,QAAQ,EAAE;4CACuB;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;yCAClC;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;2CAClC;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;2CAClC;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;0CAClC;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACb","sourcesContent":["import { TemplateResult, html, css, property } from 'lit-element';\nimport { styleMap } from 'lit-html/directives/style-map';\nimport { RapidElement } from '../RapidElement';\n\nenum OmniType {\n  Group = 'group',\n  Contact = 'contact',\n  Urn = 'urn',\n}\n\ninterface OmniOption {\n  id: string;\n  name: string;\n  type: OmniType;\n  urn?: string;\n  count?: number;\n  contact?: string;\n  scheme?: string;\n}\n\nconst postNameStyle = {\n  color: 'var(--color-text-dark)',\n  padding: '0px 6px',\n  fontSize: '12px',\n};\n\nexport class Omnibox extends RapidElement {\n  static get styles() {\n    return css`\n      temba-select:focus {\n        outline: none;\n        box-shadow: none;\n      }\n\n      :host {\n      }\n    `;\n  }\n\n  @property()\n  endpoint: string;\n\n  @property()\n  name: string;\n\n  @property({ type: Boolean })\n  groups = false;\n\n  @property({ type: Boolean })\n  contacts = false;\n\n  @property({ type: Boolean })\n  urns = false;\n\n  @property({ type: Array })\n  value: OmniOption[] = [];\n\n  @property({ type: Array })\n  errors: string[];\n\n  @property()\n  placeholder = 'Select recipients';\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: String, attribute: 'help_text' })\n  helpText: string;\n\n  @property({ type: Boolean, attribute: 'help_always' })\n  helpAlways: boolean;\n\n  @property({ type: Boolean, attribute: 'widget_only' })\n  widgetOnly: boolean;\n\n  @property({ type: Boolean, attribute: 'hide_label' })\n  hideLabel: boolean;\n\n  @property({ type: String })\n  label: string;\n\n  /** An option in the drop down */\n  private renderOption(option: OmniOption): TemplateResult {\n    return html`\n      <div style=\"display:flex;\">\n        <div style=\"margin-right: 8px\">${this.getIcon(option)}</div>\n        <div style=\"flex: 1\">${option.name}</div>\n        <div\n          style=\"background: rgba(50, 50, 50, 0.15); margin-left: 5px; display: flex; align-items: center; border-radius: 4px\"\n        >\n          ${this.getPostName(option)}\n        </div>\n      </div>\n    `;\n  }\n\n  private getPostName(option: OmniOption): TemplateResult {\n    const style = { ...postNameStyle };\n\n    if (option.urn && option.type === OmniType.Contact) {\n      if (option.urn !== option.name) {\n        return html` <div style=${styleMap(style)}>${option.urn}</div> `;\n      }\n    }\n\n    if (option.type === OmniType.Group) {\n      return html` <div style=${styleMap(style)}>${option.count}</div> `;\n    }\n\n    return null;\n  }\n\n  /** Selection in the multi-select select box */\n  private renderSelection(option: OmniOption): TemplateResult {\n    return html`\n      <div\n        style=\"flex:1 1 auto; display: flex; align-items: stretch; color: var(--color-text-dark); font-size: 12px;\"\n      >\n        <div style=\"align-self: center; padding: 0px 7px; color: #bbb\">\n          ${this.getIcon(option)}\n        </div>\n        <div\n          class=\"name\"\n          style=\"align-self: center; padding: 0px; font-size: 12px;\"\n        >\n          ${option.name}\n        </div>\n        <div\n          style=\"background: rgba(100, 100, 100, 0.05); border-left: 1px solid rgba(100, 100, 100, 0.1); margin-left: 12px; display: flex; align-items: center\"\n        >\n          ${this.getPostName(option)}\n        </div>\n      </div>\n    `;\n  }\n\n  private getIcon(option: OmniOption): TemplateResult {\n    if (option.type === OmniType.Group) {\n      return html` <temba-icon name=\"users\" /> `;\n    }\n\n    if (option.type === OmniType.Contact) {\n      return html` <temba-icon name=\"user\" /> `;\n    }\n  }\n\n  private getEndpoint() {\n    const endpoint = this.endpoint;\n    let types = '&types=';\n    if (this.groups) {\n      types += 'g';\n    }\n\n    if (this.contacts) {\n      types += 'c';\n    }\n\n    if (this.urns) {\n      types += 'u';\n    }\n\n    return endpoint + types;\n  }\n\n  /** If we support urns, let them enter an arbitrary number */\n  private createArbitraryOption(input: string): any {\n    if (this.urns) {\n      const num = parseFloat(input);\n      if (!isNaN(num) && isFinite(num)) {\n        return { id: 'tel:' + input, name: input, type: 'urn' };\n      }\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <temba-select\n        name=${this.name}\n        endpoint=${this.getEndpoint()}\n        placeholder=${this.placeholder}\n        queryParam=\"search\"\n        .label=${this.label}\n        .helpText=${this.helpText}\n        .widgetOnly=${this.widgetOnly}\n        ?disabled=${this.disabled}\n        .errors=${this.errors}\n        .values=${this.value}\n        .renderOption=${this.renderOption.bind(this)}\n        .renderSelectedItem=${this.renderSelection.bind(this)}\n        .createArbitraryOption=${this.createArbitraryOption.bind(this)}\n        .inputRoot=${this}\n        searchable\n        searchOnFocus\n        multi\n      ></temba-select>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Omnibox.js","sourceRoot":"","sources":["../../../src/omnibox/Omnibox.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css, property } from 'lit-element';\nimport { styleMap } from 'lit-html/directives/style-map';\nimport { RapidElement } from '../RapidElement';\nimport { Select } from '../select/Select';\n\nenum OmniType {\n  Group = 'group',\n  Contact = 'contact',\n  Urn = 'urn',\n}\n\ninterface OmniOption {\n  id: string;\n  name: string;\n  type: OmniType;\n  urn?: string;\n  count?: number;\n  contact?: string;\n  scheme?: string;\n}\n\nconst postNameStyle = {\n  color: 'var(--color-text-dark)',\n  padding: '0px 6px',\n  fontSize: '12px',\n};\n\nexport class Omnibox extends RapidElement {\n  static get styles() {\n    return css`\n      temba-select:focus {\n        outline: none;\n        box-shadow: none;\n      }\n\n      :host {\n      }\n    `;\n  }\n\n  @property()\n  endpoint: string;\n\n  @property()\n  name: string;\n\n  @property({ type: Boolean })\n  groups = false;\n\n  @property({ type: Boolean })\n  contacts = false;\n\n  @property({ type: Boolean })\n  urns = false;\n\n  @property({ type: Array })\n  value: OmniOption[] = [];\n\n  @property({ type: Array })\n  errors: string[];\n\n  @property()\n  placeholder = 'Select recipients';\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: String, attribute: 'help_text' })\n  helpText: string;\n\n  @property({ type: Boolean, attribute: 'help_always' })\n  helpAlways: boolean;\n\n  @property({ type: Boolean, attribute: 'widget_only' })\n  widgetOnly: boolean;\n\n  @property({ type: Boolean, attribute: 'hide_label' })\n  hideLabel: boolean;\n\n  @property({ type: String })\n  label: string;\n\n  /** An option in the drop down */\n  private renderOption(option: OmniOption): TemplateResult {\n    return html`\n      <div style=\"display:flex;\">\n        <div style=\"margin-right: 8px\">${this.getIcon(option)}</div>\n        <div style=\"flex: 1\">${option.name}</div>\n        <div\n          style=\"background: rgba(50, 50, 50, 0.15); margin-left: 5px; display: flex; align-items: center; border-radius: 4px\"\n        >\n          ${this.getPostName(option)}\n        </div>\n      </div>\n    `;\n  }\n\n  private getPostName(option: OmniOption): TemplateResult {\n    const style = { ...postNameStyle };\n\n    if (option.urn && option.type === OmniType.Contact) {\n      if (option.urn !== option.name) {\n        return html` <div style=${styleMap(style)}>${option.urn}</div> `;\n      }\n    }\n\n    if (option.type === OmniType.Group) {\n      return html`\n        <div style=${styleMap(style)}>${option.count.toLocaleString()}</div>\n      `;\n    }\n\n    return null;\n  }\n\n  /** Selection in the multi-select select box */\n  private renderSelection(option: OmniOption): TemplateResult {\n    return html`\n      <div\n        style=\"flex:1 1 auto; display: flex; align-items: stretch; color: var(--color-text-dark); font-size: 12px;\"\n      >\n        <div style=\"align-self: center; padding: 0px 7px; color: #bbb\">\n          ${this.getIcon(option)}\n        </div>\n        <div\n          class=\"name\"\n          style=\"align-self: center; padding: 0px; font-size: 12px;\"\n        >\n          ${option.name}\n        </div>\n        <div\n          style=\"background: rgba(100, 100, 100, 0.05); border-left: 1px solid rgba(100, 100, 100, 0.1); margin-left: 12px; display: flex; align-items: center\"\n        >\n          ${this.getPostName(option)}\n        </div>\n      </div>\n    `;\n  }\n\n  private getIcon(option: OmniOption): TemplateResult {\n    if (option.type === OmniType.Group) {\n      return html` <temba-icon name=\"users\" /> `;\n    }\n\n    if (option.type === OmniType.Contact) {\n      return html` <temba-icon name=\"user\" /> `;\n    }\n  }\n\n  private getEndpoint() {\n    const endpoint = this.endpoint;\n    let types = '&types=';\n    if (this.groups) {\n      types += 'g';\n    }\n\n    if (this.contacts) {\n      types += 'c';\n    }\n\n    if (this.urns) {\n      types += 'u';\n    }\n\n    return endpoint + types;\n  }\n\n  /** If we support urns, let them enter an arbitrary number */\n  private createArbitraryOption(input: string): any {\n    if (this.urns) {\n      const num = parseFloat(input);\n      if (!isNaN(num) && isFinite(num)) {\n        return { id: 'tel:' + input, name: input, type: 'urn' };\n      }\n    }\n  }\n\n  public getValues(): any[] {\n    const select = this.shadowRoot.querySelector('temba-select') as Select;\n    return select.values;\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <temba-select\n        name=${this.name}\n        endpoint=${this.getEndpoint()}\n        placeholder=${this.placeholder}\n        queryParam=\"search\"\n        .label=${this.label}\n        .helpText=${this.helpText}\n        .widgetOnly=${this.widgetOnly}\n        ?disabled=${this.disabled}\n        .errors=${this.errors}\n        .values=${this.value}\n        .renderOption=${this.renderOption.bind(this)}\n        .renderSelectedItem=${this.renderSelection.bind(this)}\n        .createArbitraryOption=${this.createArbitraryOption.bind(this)}\n        .inputRoot=${this}\n        searchable\n        searchOnFocus\n        multi\n      ></temba-select>\n    `;\n  }\n}\n"]}