@nyaruka/temba-components 0.39.1 → 0.40.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/dist/{7640b448.js → b885f7d6.js} +6 -33
- package/dist/index.js +6 -33
- package/dist/sw.js +1 -1
- package/dist/sw.js.map +1 -1
- package/dist/templates/components-body.html +1 -1
- package/dist/templates/components-head.html +1 -1
- package/out-tsc/src/contacts/ContactBadges.js +5 -5
- package/out-tsc/src/contacts/ContactBadges.js.map +1 -1
- package/out-tsc/src/list/TembaMenu.js +77 -168
- package/out-tsc/src/list/TembaMenu.js.map +1 -1
- package/out-tsc/src/vectoricon/index.js +1 -0
- package/out-tsc/src/vectoricon/index.js.map +1 -1
- package/out-tsc/test/temba-menu.test.js +58 -7
- package/out-tsc/test/temba-menu.test.js.map +1 -1
- package/package.json +1 -1
- package/screenshots/truth/menu/menu-focus.png +0 -0
- package/screenshots/truth/menu/menu-focused-with items.png +0 -0
- package/screenshots/truth/menu/menu-refresh-1.png +0 -0
- package/screenshots/truth/menu/menu-refresh-2.png +0 -0
- package/screenshots/truth/menu/menu-root.png +0 -0
- package/screenshots/truth/menu/menu-submenu.png +0 -0
- package/screenshots/truth/menu/menu-tasks-nextup.png +0 -0
- package/screenshots/truth/menu/menu-tasks.png +0 -0
- package/src/contacts/ContactBadges.ts +5 -5
- package/src/list/TembaMenu.ts +89 -181
- package/src/vectoricon/index.ts +1 -0
- package/test/temba-menu.test.ts +73 -7
- package/test-assets/menu/menu-root.json +33 -0
- package/test-assets/menu/menu-schedule.json +21 -0
- package/test-assets/{list → menu}/menu-tasks.json +0 -0
- package/screenshots/truth/list/menu-root.png +0 -0
- package/screenshots/truth/list/menu-submenu.png +0 -0
- package/test-assets/list/menu-root.json +0 -17
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContactBadges.js","sourceRoot":"","sources":["../../../src/contacts/ContactBadges.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE
|
|
1
|
+
{"version":3,"file":"ContactBadges.js","sourceRoot":"","sources":["../../../src/contacts/ContactBadges.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;IAC5B,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;IAC5B,QAAQ,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE;CAC/B,CAAC;AAEF,MAAM,OAAO,aAAc,SAAQ,mBAAmB;IACpD,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;KAST,CAAC;IACJ,CAAC;IAEM,MAAM;QACX,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAExC,OAAO,IAAI,CAAA;;YAEL,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,QAAQ;gBACvC,CAAC,CAAC,IAAI,CAAA;;uCAEqB,IAAI,CAAC,IAAI,CAAC,MAAM;;mCAEpB,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE;;;;;oBAKxC,MAAM,CAAC,IAAI;;eAEhB;gBACH,CAAC,CAAC,IAAI;YACN,IAAI,CAAC,IAAI,CAAC,IAAI;gBACd,CAAC,CAAC,IAAI,CAAA;;;;oDAIkC,kBAAkB,CAClD,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,GAAG,CAChC;;;;;oBAKC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI;;eAExB;gBACH,CAAC,CAAC,IAAI;YACN,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAClB,CAAC,CAAC,IAAI,CAAA;;yBAEO,IAAI,CAAC,QAAQ;;wDAEkB,kBAAkB,CACtD,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,GAAG,CAC/B;;;;;oBAKC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;;eAEnD;gBACH,CAAC,CAAC,IAAI;YACN,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAY,EAAE,EAAE;gBACtC,OAAO,IAAI,CAAA;;;;wCAIiB,KAAK,CAAC,IAAI;uBAC3B,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;;;;kBAIrD,KAAK,CAAC,IAAI;;aAEf,CAAC;YACJ,CAAC,CAAC;;OAEL,CAAC;SACH;aAAM;YACL,OAAO,IAAI,CAAC;SACb;IACH,CAAC;CACF","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { Group } from '../interfaces';\nimport { Icon } from '../vectoricon';\nimport { ContactStoreElement } from './ContactStoreElement';\n\nconst STATUS = {\n stopped: { name: 'Stopped' },\n blocked: { name: 'Blocked' },\n archived: { name: 'Archived' },\n};\n\nexport class ContactBadges extends ContactStoreElement {\n static get styles() {\n return css`\n temba-label {\n margin: 0.3em;\n }\n\n .badges {\n display: flex;\n flex-wrap: wrap;\n }\n `;\n }\n\n public render(): TemplateResult {\n if (this.data) {\n const status = STATUS[this.data.status];\n\n return html`\n <div class=\"badges\">\n ${status && this.data.status !== 'active'\n ? html`\n <temba-label\n icon=\"icon.contact_${this.data.status}\"\n onclick=\"goto(event)\"\n href=\"/contact/${status.name.toLowerCase()}/\"\n secondary\n clickable\n shadow\n >\n ${status.name}\n </temba-label>\n `\n : null}\n ${this.data.flow\n ? html`\n <temba-label\n icon=\"flow\"\n onclick=\"goto(event)\"\n href=\"/contact/?search=flow+%3D+${encodeURIComponent(\n '\"' + this.data.flow.name + '\"'\n )}\"\n clickable\n primary\n shadow\n >\n ${this.data.flow.name}\n </temba-label>\n `\n : null}\n ${this.data.language\n ? html`\n <temba-label\n icon=${Icon.language}\n onclick=\"goto(event)\"\n href=\"/contact/?search=language+%3D+${encodeURIComponent(\n '\"' + this.data.language + '\"'\n )}\"\n clickable\n primary\n shadow\n >\n ${this.store.getLanguageName(this.data.language)}\n </temba-label>\n `\n : null}\n ${this.data.groups.map((group: Group) => {\n return html`\n <temba-label\n class=\"group\"\n onclick=\"goto(event)\"\n href=\"/contact/filter/${group.uuid}/\"\n icon=${group.is_dynamic ? Icon.group_smart : Icon.group}\n clickable\n shadow\n >\n ${group.name}\n </temba-label>\n `;\n })}\n </div>\n `;\n } else {\n return null;\n }\n }\n}\n"]}
|
|
@@ -87,9 +87,6 @@ export class TembaMenu extends RapidElement {
|
|
|
87
87
|
display: none;
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
-
.submenu {
|
|
91
|
-
}
|
|
92
|
-
|
|
93
90
|
.level-0 > .item,
|
|
94
91
|
.level-0 > temba-dropdown > div[slot='toggle'] > .avatar {
|
|
95
92
|
background: var(--color-primary-dark);
|
|
@@ -150,9 +147,6 @@ export class TembaMenu extends RapidElement {
|
|
|
150
147
|
font-size: 0.7em;
|
|
151
148
|
}
|
|
152
149
|
|
|
153
|
-
.level-0.expanding {
|
|
154
|
-
}
|
|
155
|
-
|
|
156
150
|
.level-0.expanded {
|
|
157
151
|
background: inherit;
|
|
158
152
|
}
|
|
@@ -183,9 +177,6 @@ export class TembaMenu extends RapidElement {
|
|
|
183
177
|
margin-right: 0.5em;
|
|
184
178
|
}
|
|
185
179
|
|
|
186
|
-
.item.inline > temba-icon {
|
|
187
|
-
}
|
|
188
|
-
|
|
189
180
|
.item > .details > .name {
|
|
190
181
|
flex-grow: 1;
|
|
191
182
|
white-space: nowrap;
|
|
@@ -235,9 +226,6 @@ export class TembaMenu extends RapidElement {
|
|
|
235
226
|
border-bottom-right-radius: var(--curvature);
|
|
236
227
|
}
|
|
237
228
|
|
|
238
|
-
.level-0 > .selected-top {
|
|
239
|
-
}
|
|
240
|
-
|
|
241
229
|
.level-0 > .item:hover {
|
|
242
230
|
background: rgba(var(--primary-rgb), 0.85);
|
|
243
231
|
--icon-color: #fff;
|
|
@@ -249,12 +237,6 @@ export class TembaMenu extends RapidElement {
|
|
|
249
237
|
cursor: default;
|
|
250
238
|
}
|
|
251
239
|
|
|
252
|
-
.inline-children {
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
.inline-children .item {
|
|
256
|
-
}
|
|
257
|
-
|
|
258
240
|
.item.inline {
|
|
259
241
|
border: 0px solid transparent;
|
|
260
242
|
}
|
|
@@ -295,9 +277,6 @@ export class TembaMenu extends RapidElement {
|
|
|
295
277
|
transition: min-width var(--transition-speed) !important;
|
|
296
278
|
}
|
|
297
279
|
|
|
298
|
-
.level-1 .item .details {
|
|
299
|
-
}
|
|
300
|
-
|
|
301
280
|
.collapsed .item {
|
|
302
281
|
overflow: hidden;
|
|
303
282
|
min-width: 0;
|
|
@@ -311,12 +290,6 @@ export class TembaMenu extends RapidElement {
|
|
|
311
290
|
align-items: center;
|
|
312
291
|
}
|
|
313
292
|
|
|
314
|
-
.item .details .name {
|
|
315
|
-
}
|
|
316
|
-
|
|
317
|
-
.item temba-icon {
|
|
318
|
-
}
|
|
319
|
-
|
|
320
293
|
.collapsed .item {
|
|
321
294
|
margin-bottom: 0.5em;
|
|
322
295
|
}
|
|
@@ -477,7 +450,6 @@ export class TembaMenu extends RapidElement {
|
|
|
477
450
|
super();
|
|
478
451
|
this.wraps = false;
|
|
479
452
|
this.selection = [];
|
|
480
|
-
this.pending = [];
|
|
481
453
|
this.state = {};
|
|
482
454
|
this.renderMenuItem = (menuItem, parent = null) => {
|
|
483
455
|
if (menuItem.type === 'divider') {
|
|
@@ -625,12 +597,6 @@ export class TembaMenu extends RapidElement {
|
|
|
625
597
|
return itemState;
|
|
626
598
|
}
|
|
627
599
|
updated(changes) {
|
|
628
|
-
if (changes.has('value')) {
|
|
629
|
-
this.setSelection((this.value || '').split('/'));
|
|
630
|
-
}
|
|
631
|
-
if (changes.has('submenu') && !changes.has('value')) {
|
|
632
|
-
this.setSelection([this.submenu]);
|
|
633
|
-
}
|
|
634
600
|
if (changes.has('endpoint')) {
|
|
635
601
|
this.root = {
|
|
636
602
|
level: -1,
|
|
@@ -639,51 +605,43 @@ export class TembaMenu extends RapidElement {
|
|
|
639
605
|
if (!this.wait) {
|
|
640
606
|
this.loadItems(this.root);
|
|
641
607
|
}
|
|
642
|
-
|
|
608
|
+
else {
|
|
609
|
+
this.fireCustomEvent(CustomEventType.Ready);
|
|
610
|
+
}
|
|
611
|
+
}
|
|
612
|
+
if (changes.has('root')) {
|
|
613
|
+
if (this.value) {
|
|
614
|
+
this.setFocusedItem(this.value);
|
|
615
|
+
this.value = null;
|
|
616
|
+
}
|
|
643
617
|
}
|
|
644
618
|
}
|
|
645
619
|
reset() {
|
|
646
620
|
this.loadItems(this.root);
|
|
647
621
|
}
|
|
648
|
-
refresh(
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
if (item.endpoint) {
|
|
656
|
-
this.loadItems(item, false);
|
|
657
|
-
}
|
|
658
|
-
else {
|
|
659
|
-
path.pop();
|
|
660
|
-
this.refresh(path);
|
|
661
|
-
}
|
|
662
|
-
}
|
|
663
|
-
}
|
|
664
|
-
fireNoPath(missingId) {
|
|
665
|
-
const item = this.getMenuItem();
|
|
666
|
-
if (item) {
|
|
667
|
-
const details = {
|
|
668
|
-
item: item.id,
|
|
669
|
-
selection: '/' + this.selection.join('/'),
|
|
670
|
-
endpoint: item.endpoint,
|
|
671
|
-
path: missingId + '/' + this.pending.join('/') + document.location.search,
|
|
672
|
-
};
|
|
673
|
-
// remove any excess from our selection
|
|
674
|
-
const selection = this.selection.join('/');
|
|
675
|
-
selection.replace(details.path, '');
|
|
676
|
-
this.selection = selection.split('/');
|
|
677
|
-
this.fireCustomEvent(CustomEventType.NoPath, details);
|
|
678
|
-
this.pending = [];
|
|
679
|
-
this.requestUpdate('root');
|
|
622
|
+
refresh() {
|
|
623
|
+
const path = [...this.selection];
|
|
624
|
+
let item = this.root;
|
|
625
|
+
while (path.length > 0) {
|
|
626
|
+
this.loadItems(item);
|
|
627
|
+
const id = path.shift();
|
|
628
|
+
item = item.items.find(_item => _item.id == id);
|
|
680
629
|
}
|
|
630
|
+
this.loadItems(item);
|
|
681
631
|
}
|
|
682
632
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
683
|
-
loadItems(item, selectFirst =
|
|
633
|
+
loadItems(item, selectFirst = false) {
|
|
684
634
|
if (item && item.endpoint) {
|
|
685
635
|
item.loading = true;
|
|
686
636
|
this.httpComplete = fetchResults(item.endpoint).then((items) => {
|
|
637
|
+
items.forEach(newItem => {
|
|
638
|
+
if (!newItem.items) {
|
|
639
|
+
const prevItem = (item.items || []).find(prev => prev.id == newItem.id);
|
|
640
|
+
if (prevItem && prevItem.items) {
|
|
641
|
+
newItem.items = prevItem.items;
|
|
642
|
+
}
|
|
643
|
+
}
|
|
644
|
+
});
|
|
687
645
|
// update our item level
|
|
688
646
|
items.forEach(subItem => {
|
|
689
647
|
subItem.level = item.level + 1;
|
|
@@ -691,53 +649,47 @@ export class TembaMenu extends RapidElement {
|
|
|
691
649
|
if (subItem.items) {
|
|
692
650
|
subItem.items.forEach(inlineItem => {
|
|
693
651
|
inlineItem.level = item.level + 2;
|
|
694
|
-
// inlineItem.parent = subItem;
|
|
695
652
|
});
|
|
696
653
|
}
|
|
697
654
|
});
|
|
698
655
|
item.items = items;
|
|
699
656
|
item.loading = false;
|
|
700
|
-
this.
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
// auto select the next pending click
|
|
704
|
-
const nextId = this.pending.shift();
|
|
705
|
-
if (nextId && items.length > 0) {
|
|
706
|
-
const nextItem = findItem(items, nextId);
|
|
707
|
-
if (nextItem.item) {
|
|
708
|
-
this.handleItemClicked(null, nextItem.item);
|
|
709
|
-
}
|
|
710
|
-
else {
|
|
711
|
-
this.fireNoPath(nextId);
|
|
712
|
-
}
|
|
713
|
-
}
|
|
657
|
+
if (this.submenu && this.selection.length == 0) {
|
|
658
|
+
const sub = this.getMenuItemForSelection([this.submenu]);
|
|
659
|
+
this.handleItemClicked(null, sub);
|
|
714
660
|
}
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
items.length > 0 &&
|
|
719
|
-
this.selection.length >= 1 &&
|
|
720
|
-
!item.inline) {
|
|
721
|
-
for (const item of items) {
|
|
722
|
-
if (!item.type) {
|
|
723
|
-
this.handleItemClicked(null, item);
|
|
724
|
-
break;
|
|
725
|
-
}
|
|
726
|
-
}
|
|
727
|
-
}
|
|
661
|
+
if (!this.wait) {
|
|
662
|
+
this.fireCustomEvent(CustomEventType.Ready);
|
|
663
|
+
this.wait = true;
|
|
728
664
|
}
|
|
665
|
+
// once we've set our items check if we need to auto-select
|
|
666
|
+
if (selectFirst && item.items.length > 0) {
|
|
667
|
+
this.handleItemClicked(null, item.items[0]);
|
|
668
|
+
}
|
|
669
|
+
this.requestUpdate('root');
|
|
670
|
+
this.scrollSelectedIntoView();
|
|
729
671
|
});
|
|
730
672
|
}
|
|
731
673
|
}
|
|
732
674
|
handleItemClicked(event, menuItem, parent = null) {
|
|
733
|
-
this.fireCustomEvent(CustomEventType.ButtonClicked, {
|
|
734
|
-
item: menuItem,
|
|
735
|
-
parent,
|
|
736
|
-
});
|
|
737
675
|
if (parent && parent.popup) {
|
|
676
|
+
if (event) {
|
|
677
|
+
this.fireCustomEvent(CustomEventType.ButtonClicked, {
|
|
678
|
+
item: menuItem,
|
|
679
|
+
selection: this.getSelection(),
|
|
680
|
+
parent,
|
|
681
|
+
});
|
|
682
|
+
}
|
|
738
683
|
return;
|
|
739
684
|
}
|
|
740
685
|
if (menuItem.popup) {
|
|
686
|
+
if (event) {
|
|
687
|
+
this.fireCustomEvent(CustomEventType.ButtonClicked, {
|
|
688
|
+
item: menuItem,
|
|
689
|
+
selection: this.getSelection(),
|
|
690
|
+
parent,
|
|
691
|
+
});
|
|
692
|
+
}
|
|
741
693
|
return;
|
|
742
694
|
}
|
|
743
695
|
if (parent && parent.inline) {
|
|
@@ -750,60 +702,31 @@ export class TembaMenu extends RapidElement {
|
|
|
750
702
|
event.preventDefault();
|
|
751
703
|
event.stopPropagation();
|
|
752
704
|
}
|
|
753
|
-
|
|
754
|
-
|
|
705
|
+
// update our selection
|
|
706
|
+
if (menuItem.level >= this.selection.length) {
|
|
707
|
+
this.selection.push(menuItem.vanity_id || menuItem.id);
|
|
755
708
|
}
|
|
756
709
|
else {
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
// update our selection
|
|
765
|
-
if (menuItem.level >= this.selection.length) {
|
|
766
|
-
this.selection.push(menuItem.vanity_id || menuItem.id);
|
|
767
|
-
}
|
|
768
|
-
else {
|
|
769
|
-
this.selection.splice(menuItem.level, this.selection.length - menuItem.level, menuItem.vanity_id || menuItem.id);
|
|
770
|
-
}
|
|
771
|
-
if (menuItem.endpoint) {
|
|
772
|
-
this.loadItems(menuItem, this.pending.length == 0);
|
|
773
|
-
// make sure change events fire for events with hrefs
|
|
774
|
-
if (!menuItem.href) {
|
|
775
|
-
return;
|
|
776
|
-
}
|
|
777
|
-
}
|
|
778
|
-
else {
|
|
779
|
-
if (this.pending && this.pending.length > 0) {
|
|
780
|
-
// auto select the next pending click
|
|
781
|
-
const nextId = this.pending.shift();
|
|
782
|
-
const item = this.getMenuItem();
|
|
783
|
-
if (nextId && item && item.items && item.items.length > 0) {
|
|
784
|
-
const nextItem = findItem(item.items, nextId).item;
|
|
785
|
-
if (nextItem) {
|
|
786
|
-
this.handleItemClicked(null, nextItem);
|
|
787
|
-
return;
|
|
788
|
-
}
|
|
789
|
-
else {
|
|
790
|
-
this.fireNoPath(nextId);
|
|
791
|
-
this.requestUpdate('root');
|
|
792
|
-
return;
|
|
793
|
-
}
|
|
794
|
-
}
|
|
795
|
-
else {
|
|
796
|
-
this.fireNoPath(nextId);
|
|
797
|
-
this.requestUpdate('root');
|
|
798
|
-
return;
|
|
799
|
-
}
|
|
800
|
-
}
|
|
801
|
-
this.requestUpdate('root');
|
|
802
|
-
}
|
|
803
|
-
if (this.pending.length == 0 || this.getMenuItem().href) {
|
|
804
|
-
this.dispatchEvent(new Event('change'));
|
|
710
|
+
this.selection.splice(menuItem.level, this.selection.length - menuItem.level, menuItem.vanity_id || menuItem.id);
|
|
711
|
+
}
|
|
712
|
+
if (menuItem.endpoint) {
|
|
713
|
+
this.loadItems(menuItem, !!event);
|
|
714
|
+
// make sure change events fire for events with hrefs
|
|
715
|
+
if (!menuItem.href) {
|
|
716
|
+
return;
|
|
805
717
|
}
|
|
806
718
|
}
|
|
719
|
+
else {
|
|
720
|
+
this.requestUpdate();
|
|
721
|
+
}
|
|
722
|
+
if (menuItem.href) {
|
|
723
|
+
this.dispatchEvent(new Event('change'));
|
|
724
|
+
}
|
|
725
|
+
this.fireCustomEvent(CustomEventType.ButtonClicked, {
|
|
726
|
+
item: menuItem,
|
|
727
|
+
selection: this.getSelection(),
|
|
728
|
+
parent,
|
|
729
|
+
});
|
|
807
730
|
}
|
|
808
731
|
scrollSelectedIntoView() {
|
|
809
732
|
// makes sure we are scrolled into view
|
|
@@ -852,23 +775,6 @@ export class TembaMenu extends RapidElement {
|
|
|
852
775
|
getSelection() {
|
|
853
776
|
return this.selection;
|
|
854
777
|
}
|
|
855
|
-
setSelection(path) {
|
|
856
|
-
this.pending = [...path];
|
|
857
|
-
this.selection = [];
|
|
858
|
-
if (this.wait) {
|
|
859
|
-
this.wait = false;
|
|
860
|
-
this.loadItems(this.root);
|
|
861
|
-
}
|
|
862
|
-
}
|
|
863
|
-
setSelectionPath(path) {
|
|
864
|
-
const asPath = path.split('/').filter(step => !!step);
|
|
865
|
-
// first try to click in the current space
|
|
866
|
-
const clicked = this.clickItem(asPath[asPath.length - 1]);
|
|
867
|
-
if (!clicked) {
|
|
868
|
-
this.wait = true;
|
|
869
|
-
this.setSelection(asPath);
|
|
870
|
-
}
|
|
871
|
-
}
|
|
872
778
|
handleExpand() {
|
|
873
779
|
this.collapsed = false;
|
|
874
780
|
}
|
|
@@ -877,6 +783,9 @@ export class TembaMenu extends RapidElement {
|
|
|
877
783
|
}
|
|
878
784
|
async setFocusedItem(path) {
|
|
879
785
|
const focusedPath = path.split('/').filter(step => !!step);
|
|
786
|
+
if (!this.root) {
|
|
787
|
+
return;
|
|
788
|
+
}
|
|
880
789
|
// if we don't match at the first level, we are a noop
|
|
881
790
|
if (focusedPath.length > 0) {
|
|
882
791
|
const rootItem = findItem(this.root.items, focusedPath[0]).item;
|
|
@@ -890,7 +799,7 @@ export class TembaMenu extends RapidElement {
|
|
|
890
799
|
const nextId = focusedPath.shift();
|
|
891
800
|
if (nextId) {
|
|
892
801
|
if (!level.items) {
|
|
893
|
-
this.loadItems(level
|
|
802
|
+
this.loadItems(level);
|
|
894
803
|
await this.httpComplete;
|
|
895
804
|
}
|
|
896
805
|
level = findItem(level.items, nextId).item;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TembaMenu.js","sourceRoot":"","sources":["../../../src/list/TembaMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { fetchResults, getClasses } from '../utils';\nimport { Icon } from '../vectoricon';\nimport ColorHash from 'color-hash';\n\nexport interface MenuItem {\n id?: string;\n vanity_id?: string;\n name?: string;\n verbose_name?: string;\n count?: number;\n icon?: string;\n collapsed_icon?: string;\n endpoint?: string;\n loading?: boolean;\n bottom?: boolean;\n level?: number;\n trigger?: string;\n href?: string;\n show_header?: boolean;\n items?: MenuItem[];\n inline?: boolean;\n type?: string;\n on_submit?: string;\n bubble?: string;\n popup?: boolean;\n avatar?: string;\n}\n\ninterface MenuItemState {\n collapsed?: string;\n}\n\nconst findItem = (\n items: MenuItem[],\n id: string\n): { item: MenuItem; index: number } => {\n const search = items || [];\n\n const index = search.findIndex((item: MenuItem) => {\n return item.id == id || item.vanity_id == id;\n });\n\n if (index > -1) {\n const item = search[index];\n return { item, index };\n }\n\n return { item: null, index: -1 };\n};\n\nexport class TembaMenu extends RapidElement {\n static get styles() {\n return css`\n :host {\n width: 100%;\n display: block;\n --color-widget-bg-focused: transparent;\n --options-block-shadow: none;\n }\n\n .bubble {\n width: 8px;\n height: 8px;\n left: 14px;\n bottom: -1px;\n border-radius: 99px;\n border: 1px solid rgb(255, 255, 255);\n position: relative;\n margin-top: -10px;\n }\n\n .section {\n font-size: 1.5em;\n margin-bottom: 0.2em;\n color: var(--color-text-dark);\n }\n\n .collapse-toggle {\n width: 0.5em;\n cursor: pointer;\n display: block;\n margin-right: 5px;\n margin-top: 3px;\n margin-bottom: 3px;\n }\n\n .collapse-toggle:hover {\n background: rgb(100, 100, 100, 0.05);\n }\n\n .item {\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n display: flex;\n font-size: 1em;\n --icon-color: var(--color-text-dark);\n }\n\n .item.selected {\n background: var(--color-selection);\n color: var(--color-primary-dark);\n --icon-color: var(--color-primary-dark);\n }\n\n .root {\n display: flex;\n flex-direction: row;\n height: 100%;\n }\n\n .level {\n display: flex;\n flex-direction: column;\n }\n\n .level.hidden {\n display: none;\n }\n\n .submenu {\n }\n\n .level-0 > .item,\n .level-0 > temba-dropdown > div[slot='toggle'] > .avatar {\n background: var(--color-primary-dark);\n --icon-color: rgba(255, 255, 255, 0.7);\n font-size: 1em;\n }\n\n .level-0 > .top {\n padding-top: var(--menu-padding);\n background: var(--color-primary-dark);\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n .level-0 > .empty {\n background: var(--color-primary-dark);\n align-self: stretch;\n flex-grow: 1;\n }\n\n .level-0 > .bottom {\n height: 1em;\n background: var(--color-primary-dark);\n }\n\n temba-dropdown {\n z-index: 1;\n }\n\n temba-dropdown > div[slot='dropdown'] .avatar > .details {\n margin-left: 0.75em;\n }\n\n .level-0 > .item > .details,\n .level-0 > temba-dropdown > div[slot='toggle'] > .avatar > .details {\n display: none !important;\n }\n\n .avatar {\n align-items: center;\n }\n\n .avatar-circle {\n box-shadow: 0 0 0px 3px rgba(0, 0, 0, 0.075);\n display: flex;\n margin: 0.4em 0em;\n height: 2em;\n width: 2em;\n flex-direction: row;\n align-items: center;\n color: #fff;\n border-radius: 100%;\n font-weight: 400;\n }\n\n temba-dropdown > div[slot='dropdown'] .avatar .avatar-circle {\n font-size: 0.7em;\n }\n\n .level-0.expanding {\n }\n\n .level-0.expanded {\n background: inherit;\n }\n\n .level-0 > .item.selected {\n background: inherit;\n --icon-color: var(--color-primary-dark);\n }\n\n .level {\n padding: var(--menu-padding);\n }\n\n .level-0 {\n padding: 0px;\n z-index: 500;\n }\n\n .item {\n padding: 0.2em 0.75em;\n margin-top: 0.1em;\n border-radius: var(--curvature);\n display: flex;\n min-width: 12em;\n }\n\n .item > temba-icon {\n margin-right: 0.5em;\n }\n\n .item.inline > temba-icon {\n }\n\n .item > .details > .name {\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 0;\n }\n\n .level-0 > .item {\n padding: 1em 1em;\n margin-top: 0em;\n border-radius: 0px;\n min-width: inherit;\n max-width: inherit;\n }\n\n .level-0 > .item > temba-icon {\n margin-right: 0px;\n }\n\n .level-0 > .item > .name {\n min-width: 0px;\n }\n\n .count {\n align-self: center;\n margin-left: 1em;\n font-size: 0.8em;\n font-weight: 400;\n }\n\n .level-0 > .item-top {\n background: var(--color-primary-dark);\n min-height: var(--curvature);\n }\n\n .level-0 > .item-bottom {\n background: var(--color-primary-dark);\n min-height: var(--curvature);\n }\n\n .level-0 > .item-bottom.selected {\n border-top-right-radius: var(--curvature);\n }\n\n .level-0 > .item-top.selected {\n border-bottom-right-radius: var(--curvature);\n }\n\n .level-0 > .selected-top {\n }\n\n .level-0 > .item:hover {\n background: rgba(var(--primary-rgb), 0.85);\n --icon-color: #fff;\n }\n\n .level-0 > .item.selected:hover {\n background: inherit;\n --icon-color: var(--color-primary-dark);\n cursor: default;\n }\n\n .inline-children {\n }\n\n .inline-children .item {\n }\n\n .item.inline {\n border: 0px solid transparent;\n }\n\n .level-1,\n .level-2 {\n border-right: 1px solid rgba(0 0 0 / 8%);\n box-shadow: rgb(0 0 0 / 6%) 4px 0px 6px 1px;\n }\n\n .level-1 {\n transition: opacity 100ms linear, margin 200ms linear;\n overflow-y: scroll;\n z-index: 150;\n }\n\n .level-2 {\n background: #fbfbfb;\n overflow-y: auto;\n z-index: 1000;\n }\n\n .level-2 .item .details {\n overflow: hidden;\n }\n\n .level-2 .item {\n min-width: 12em;\n max-width: 12em;\n }\n\n .level-1 .item {\n overflow: hidden;\n max-width: 12em;\n min-width: 12em;\n min-height: 1.5em;\n max-height: 1.5em;\n transition: min-width var(--transition-speed) !important;\n }\n\n .level-1 .item .details {\n }\n\n .collapsed .item {\n overflow: hidden;\n min-width: 0;\n margin: 0;\n }\n\n .item .details {\n opacity: 1;\n min-height: 1.5em;\n max-height: 1.5em;\n align-items: center;\n }\n\n .item .details .name {\n }\n\n .item temba-icon {\n }\n\n .collapsed .item {\n margin-bottom: 0.5em;\n }\n\n .collapsed .item .details {\n overflow: hidden;\n max-height: 0em;\n max-width: 0em;\n }\n\n .collapsed .item .details {\n max-height: 0em;\n }\n\n .collapsed .item temba-icon {\n margin-right: 0;\n }\n\n .section {\n max-width: 12em;\n }\n\n .collapsed .section {\n opacity: 0;\n max-width: 0em;\n max-height: 0.6em;\n }\n\n .collapsed.level-1 {\n overflow: hidden;\n padding: 0.5em;\n --icon-color: #999;\n }\n\n .collapsed .item .right {\n flex-grow: 1;\n }\n\n .collapse-icon {\n display: none;\n }\n\n .collapsed .collapse-icon {\n --icon-color: #ccc;\n display: block;\n }\n\n .collapsed .item.iconless {\n max-height: 0em;\n padding: 0em;\n min-height: 0em;\n margin-bottom: 0em;\n }\n\n .divider {\n height: 1px;\n background: #f3f3f3;\n margin: 0.5em 0.75em;\n min-height: 1px;\n }\n\n .space {\n margin: 0.5em;\n }\n\n .collapsed .divider {\n height: 0;\n margin: 0;\n padding: 0;\n min-height: 0px;\n }\n\n .sub-section {\n font-size: 1rem;\n color: #888;\n margin-top: 1rem;\n margin-left: 0.3rem;\n }\n\n .fully-collapsed .level-1 {\n margin-left: -208px;\n pointer-events: none;\n border: none;\n overflow: hidden;\n }\n\n .fully-collapsed .level-1 > * {\n opacity: 0;\n }\n\n .fully-collapsed .level-1 .item,\n .fully-collapsed .level-1 .divider {\n opacity: 0;\n }\n\n .fully-collapsed .level-2,\n .fully-collapsed .level-3 {\n display: none;\n }\n\n temba-button {\n margin-top: 0.2em;\n margin-bottom: 0.2em;\n margin-left: 0.75em;\n margin-right: 0.75em;\n }\n\n .expand-icon {\n transform: rotate(180deg);\n --icon-color: rgba(255, 255, 255, 0.5);\n cursor: pointer;\n max-height: 0px;\n overflow: hidden;\n opacity: 0;\n transition: all 400ms ease-in-out 400ms;\n }\n\n .expand-icon:hover {\n --icon-color: #fff;\n }\n\n .fully-collapsed .expand-icon {\n padding-top: 0.5em;\n max-height: 2em;\n opacity: 1;\n }\n\n .section-header {\n display: flex;\n align-items: center;\n }\n\n .section-header .section {\n flex-grow: 1;\n }\n\n .section-header temba-icon {\n --icon-color: #ddd;\n cursor: pointer;\n padding-bottom: 0.5em;\n padding-right: 0.5em;\n }\n\n .section-header temba-icon:hover {\n --icon-color: var(--color-link-primary);\n }\n\n slot[name='header'] {\n display: none;\n }\n\n slot[name='header'].show-header {\n display: block;\n }\n `;\n }\n\n @property({ type: Boolean })\n wraps = false;\n\n @property({ type: Boolean })\n wait: boolean;\n\n @property({ type: String })\n endpoint: string;\n\n @property({ type: String })\n expanding: string;\n\n @property({ type: String })\n value: string;\n\n // submenu to constrain to\n @property({ type: String })\n submenu: string;\n\n @property({ type: Boolean })\n collapsed: boolean;\n\n // http promise to monitor for completeness\n public httpComplete: Promise<void>;\n\n root: MenuItem;\n selection: string[] = [];\n pending: string[] = [];\n state: { [id: string]: MenuItemState } = {};\n\n constructor() {\n super();\n }\n\n public setBubble(id: string, color: string) {\n const found = findItem(this.root.items, id);\n if (found && found.item) {\n found.item.bubble = color;\n this.requestUpdate('root');\n return true;\n }\n return false;\n }\n\n private getMenuItemState(id: string): MenuItemState {\n let itemState = {};\n if (id) {\n itemState = this.state[id];\n if (!itemState) {\n itemState = {};\n this.state[id] = itemState;\n }\n }\n return itemState;\n }\n\n public updated(changes: Map<string, any>) {\n if (changes.has('value')) {\n this.setSelection((this.value || '').split('/'));\n }\n\n if (changes.has('submenu') && !changes.has('value')) {\n this.setSelection([this.submenu]);\n }\n\n if (changes.has('endpoint')) {\n this.root = {\n level: -1,\n endpoint: this.endpoint,\n };\n\n if (!this.wait) {\n this.loadItems(this.root);\n }\n\n this.fireCustomEvent(CustomEventType.Ready);\n }\n }\n\n public reset() {\n this.loadItems(this.root);\n }\n\n public refresh(path: string[] = null) {\n if (!path) {\n path = [...this.selection];\n }\n\n // go up the tree until we find an endpoint\n const item = this.getMenuItemForSelection(path);\n\n if (item) {\n if (item.endpoint) {\n this.loadItems(item, false);\n } else {\n path.pop();\n this.refresh(path);\n }\n }\n }\n\n private fireNoPath(missingId: string) {\n const item = this.getMenuItem();\n\n if (item) {\n const details = {\n item: item.id,\n selection: '/' + this.selection.join('/'),\n endpoint: item.endpoint,\n path:\n missingId + '/' + this.pending.join('/') + document.location.search,\n };\n\n // remove any excess from our selection\n const selection = this.selection.join('/');\n selection.replace(details.path, '');\n this.selection = selection.split('/');\n\n this.fireCustomEvent(CustomEventType.NoPath, details);\n this.pending = [];\n this.requestUpdate('root');\n }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private loadItems(item: MenuItem, selectFirst = true) {\n if (item && item.endpoint) {\n item.loading = true;\n this.httpComplete = fetchResults(item.endpoint).then(\n (items: MenuItem[]) => {\n // update our item level\n items.forEach(subItem => {\n subItem.level = item.level + 1;\n // if we came with preset items, set the level for them accordingly\n if (subItem.items) {\n subItem.items.forEach(inlineItem => {\n inlineItem.level = item.level + 2;\n // inlineItem.parent = subItem;\n });\n }\n });\n\n item.items = items;\n item.loading = false;\n this.requestUpdate('root');\n this.scrollSelectedIntoView();\n if (this.pending && this.pending.length > 0) {\n // auto select the next pending click\n const nextId = this.pending.shift();\n if (nextId && items.length > 0) {\n const nextItem = findItem(items, nextId);\n if (nextItem.item) {\n this.handleItemClicked(null, nextItem.item);\n } else {\n this.fireNoPath(nextId);\n }\n }\n } else {\n // auto select the first item\n if (\n selectFirst &&\n items.length > 0 &&\n this.selection.length >= 1 &&\n !item.inline\n ) {\n for (const item of items) {\n if (!item.type) {\n this.handleItemClicked(null, item);\n break;\n }\n }\n }\n }\n }\n );\n }\n }\n\n private handleItemClicked(\n event: MouseEvent,\n menuItem: MenuItem,\n parent: MenuItem = null\n ) {\n this.fireCustomEvent(CustomEventType.ButtonClicked, {\n item: menuItem,\n parent,\n });\n if (parent && parent.popup) {\n return;\n }\n\n if (menuItem.popup) {\n return;\n }\n\n if (parent && parent.inline) {\n this.handleItemClicked(null, parent);\n }\n\n if (this.collapsed) {\n this.collapsed = false;\n }\n\n if (event) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n if (menuItem.trigger) {\n new Function(menuItem.trigger)();\n } else {\n if (menuItem.level === 0) {\n /* this.expanding = menuItem.id;\n window.setTimeout(() => {\n this.expanding = null;\n }, 60);\n */\n }\n\n // update our selection\n if (menuItem.level >= this.selection.length) {\n this.selection.push(menuItem.vanity_id || menuItem.id);\n } else {\n this.selection.splice(\n menuItem.level,\n this.selection.length - menuItem.level,\n menuItem.vanity_id || menuItem.id\n );\n }\n\n if (menuItem.endpoint) {\n this.loadItems(menuItem, this.pending.length == 0);\n\n // make sure change events fire for events with hrefs\n if (!menuItem.href) {\n return;\n }\n } else {\n if (this.pending && this.pending.length > 0) {\n // auto select the next pending click\n const nextId = this.pending.shift();\n const item = this.getMenuItem();\n if (nextId && item && item.items && item.items.length > 0) {\n const nextItem = findItem(item.items, nextId).item;\n if (nextItem) {\n this.handleItemClicked(null, nextItem);\n return;\n } else {\n this.fireNoPath(nextId);\n this.requestUpdate('root');\n return;\n }\n } else {\n this.fireNoPath(nextId);\n this.requestUpdate('root');\n return;\n }\n }\n this.requestUpdate('root');\n }\n\n if (this.pending.length == 0 || this.getMenuItem().href) {\n this.dispatchEvent(new Event('change'));\n }\n }\n }\n\n public scrollSelectedIntoView() {\n // makes sure we are scrolled into view\n window.setTimeout(() => {\n const eles = this.shadowRoot.querySelectorAll('.selected');\n eles.forEach(ele => {\n ele.scrollIntoView({ block: 'end', behavior: 'smooth' });\n });\n }, 0);\n }\n\n public clickItem(id: string): boolean {\n const path = [...this.selection];\n path.splice(path.length - 1, 1, id);\n const item = this.getMenuItemForSelection(path);\n\n if (item) {\n this.handleItemClicked(null, item);\n this.scrollSelectedIntoView();\n return true;\n }\n return false;\n }\n\n public getMenuItem(): MenuItem {\n return this.getMenuItemForSelection([...this.selection]);\n }\n\n public getMenuItemForSelection(selection: string[]) {\n const path = [...selection];\n let items = this.root.items;\n let item = null;\n while (path.length > 0) {\n const step = path.splice(0, 1)[0];\n if (items) {\n item = findItem(items, step).item;\n if (item) {\n items = item.items;\n } else {\n break;\n }\n } else {\n break;\n }\n }\n\n return item;\n }\n\n public getSelection() {\n return this.selection;\n }\n\n public setSelection(path: string[]) {\n this.pending = [...path];\n this.selection = [];\n\n if (this.wait) {\n this.wait = false;\n this.loadItems(this.root);\n }\n }\n\n public setSelectionPath(path: string) {\n const asPath = path.split('/').filter(step => !!step);\n\n // first try to click in the current space\n const clicked = this.clickItem(asPath[asPath.length - 1]);\n\n if (!clicked) {\n this.wait = true;\n this.setSelection(asPath);\n }\n }\n\n public handleExpand() {\n this.collapsed = false;\n }\n\n public handleCollapse() {\n this.collapsed = true;\n }\n\n public async setFocusedItem(path: string) {\n const focusedPath = path.split('/').filter(step => !!step);\n\n // if we don't match at the first level, we are a noop\n if (focusedPath.length > 0) {\n const rootItem = findItem(this.root.items, focusedPath[0]).item;\n if (!rootItem) {\n return;\n }\n }\n\n const newPath = [];\n let level = this.root;\n while (focusedPath.length > 0) {\n const nextId = focusedPath.shift();\n if (nextId) {\n if (!level.items) {\n this.loadItems(level, false);\n await this.httpComplete;\n }\n\n level = findItem(level.items, nextId).item;\n if (!level) {\n focusedPath.splice(0, focusedPath.length);\n } else {\n newPath.push(nextId);\n }\n }\n }\n\n this.selection = newPath;\n this.requestUpdate('root');\n }\n\n private isSelected(menuItem: MenuItem) {\n if (menuItem.level < this.selection.length) {\n const selected =\n this.selection[menuItem.level] == (menuItem.vanity_id || menuItem.id);\n return selected;\n }\n return false;\n }\n\n private isExpanded(menuItem: MenuItem) {\n const expanded = !!this.selection.find(\n id => id === menuItem.vanity_id || menuItem.id\n );\n return expanded;\n }\n\n private renderAvatar(avatar: string) {\n const hash = new ColorHash();\n const color = hash.hex(avatar);\n\n let second = avatar.indexOf(' ') + 1;\n if (second < 1) {\n second = avatar.length > 1 ? 1 : 0;\n }\n let name = avatar.substring(0, 1) + avatar.substring(second, second + 1);\n name = name.toUpperCase();\n\n return html`\n <div\n style=\"border: 0px solid red; display:flex; flex-direction: column; align-items:center;\"\n >\n <div\n class=\"avatar-circle\"\n style=\"border: 0px solid rgba(0,0,0,.1);background:${color}\"\n >\n <div\n style=\"border: 0px solid red; display:flex; flex-direction: column; align-items:center;flex-grow:1\"\n >\n <div style=\"border:0px solid blue;\">${name}</div>\n </div>\n </div>\n </div>\n `;\n }\n\n private renderMenuItem = (\n menuItem: MenuItem,\n parent: MenuItem = null\n ): TemplateResult => {\n if (menuItem.type === 'divider') {\n return html`<div class=\"divider\"></div>`;\n }\n\n if (menuItem.type === 'space') {\n return html`<div class=\"space\"></div>`;\n }\n\n if (menuItem.type === 'section' || menuItem.inline) {\n return html`<div class=\"sub-section\">${menuItem.name}</div>`;\n }\n\n if (menuItem.type === 'modax-button') {\n return html`<temba-button\n name=${menuItem.name}\n @click=${event => {\n this.handleItemClicked(event, menuItem);\n }}\n />`;\n }\n\n const isSelected = this.isSelected(menuItem);\n const isChildSelected =\n isSelected && this.selection.length > menuItem.level + 1;\n\n let icon = menuItem.icon\n ? html`<temba-icon\n size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n name=\"${menuItem.icon}\"\n ></temba-icon\n >${menuItem.bubble\n ? html`<div\n style=\"background-color: ${menuItem.bubble}\"\n class=\"bubble\"\n ></div>`\n : null}`\n : null;\n\n const collapsedIcon = menuItem.collapsed_icon\n ? html`<temba-icon\n size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n name=\"${menuItem.collapsed_icon}\"\n class=\"collapse-icon\"\n ></temba-icon>`\n : null;\n\n const itemClasses = getClasses({\n ['menu-' + menuItem.id]: true,\n 'child-selected': isChildSelected,\n selected: isSelected,\n item: !(menuItem.avatar && menuItem.level === 0),\n avatar: !!menuItem.avatar,\n inline: menuItem.inline,\n expanding: this.expanding && this.expanding === menuItem.id,\n expanded: this.isExpanded(menuItem),\n iconless: !icon && !collapsedIcon && !menuItem.avatar,\n });\n\n if (menuItem.avatar) {\n icon = this.renderAvatar(menuItem.avatar);\n }\n\n const item = html` <div\n class=\"item-top ${isSelected ? 'selected' : null} \"\n ></div>\n\n <div\n id=\"menu-${menuItem.id}\"\n class=\"${itemClasses}\"\n @click=${event => {\n this.handleItemClicked(event, menuItem, parent);\n }}\n >\n ${menuItem.level === 0\n ? menuItem.avatar\n ? icon\n : html`<temba-tip\n style=\"display:flex;\"\n text=\"${menuItem.name}\"\n position=\"right\"\n >${icon}</temba-tip\n >`\n : html`${icon}${collapsedIcon}`}\n\n <div class=\"details\" style=\"flex-grow:1;display:flex\">\n <div\n class=\"name\"\n style=\"flex-grow:1; flex-shrink:0; white-space: ${this.wraps\n ? 'normal'\n : 'nowrap'};\"\n >\n ${menuItem.name}\n </div>\n ${menuItem.level > 0\n ? menuItem.inline\n ? html`<temba-icon\n name=\"${isSelected || isChildSelected\n ? Icon.arrow_up\n : Icon.arrow_down}\"\n ></temba-icon>`\n : html`${menuItem.count || menuItem.count == 0\n ? html`\n <div class=\"count\">\n ${menuItem.count.toLocaleString()}\n </div>\n `\n : html`<div class=\"count\"></div>`}`\n : null}\n </div>\n <div class=\"right\"></div>\n </div>\n\n <div class=\"item-bottom ${isSelected ? 'selected' : null}\"></div>`;\n\n if (menuItem.popup) {\n return html`\n <temba-dropdown offsetx=\"10\" arrowoffset=\"8\" mask>\n <div slot=\"toggle\">${item}</div>\n <div\n slot=\"dropdown\"\n style=\"width:300px;overflow:hidden;padding-bottom:0.5em\"\n >\n <div style=\"max-height:400px;overflow-y:auto\">\n ${(menuItem.items || []).map((child: MenuItem) => {\n child.level = menuItem.level + 1;\n return this.renderMenuItem(child, menuItem);\n })}\n </div>\n </div>\n </temba-dropdown>\n `;\n }\n return item;\n };\n\n public render(): TemplateResult {\n if (!this.root || !this.root.items) {\n return html`<temba-loading\n units=\"3\"\n size=\"10\"\n direction=\"column\"\n style=\"margin:1em;margin-right:0em\"\n />`;\n }\n\n let items = this.root.items || [];\n const levels = [];\n\n levels.push(\n html`<div class=\"level level-0 ${this.submenu ? 'hidden' : ''}\">\n <div class=\"top\">\n <div class=\"expand-icon\" @click=${this.handleExpand}>\n <temba-icon\n name=\"${Icon.menu_collapse}\"\n class=\"collapse\"\n class=\"expand\"\n size=\"1.4\"\n ></temba-icon>\n </div>\n </div>\n\n ${items\n .filter(item => !item.bottom)\n .map((item: MenuItem) => {\n return this.renderMenuItem(item);\n })}\n\n <div class=\"empty\"></div>\n ${items\n .filter(item => !!item.bottom)\n .map((item: MenuItem) => {\n return this.renderMenuItem(item);\n })}\n <div class=\"bottom\"></div>\n </div>`\n );\n\n this.selection.forEach((id, index) => {\n const selected = findItem(items, id).item;\n\n let collapsed = false;\n if (selected) {\n items = selected.items;\n const itemState = this.getMenuItemState(selected.id);\n // users set an explicit collapse state\n if (itemState.collapsed) {\n collapsed = itemState.collapsed === 'collapsed';\n }\n // otherwise pick a default collapse state\n else {\n if (this.selection.length > selected.level + 2) {\n collapsed = false;\n }\n }\n } else {\n items = null;\n }\n\n if (items && items.length > 0 && !selected.inline) {\n levels.push(\n html`<div\n class=\"${getClasses({\n level: true,\n ['level-' + (index + 1)]: true,\n collapsed,\n })}\"\n >\n ${!this.submenu\n ? html`\n <slot\n class=\"${getClasses({\n 'show-header': selected.show_header,\n })}\"\n name=\"header\"\n ></slot>\n <div class=\"section-header\">\n <div class=\"section\">${selected.name}</div>\n\n ${index == 0 && !this.collapsed\n ? html`<temba-icon\n name=\"${Icon.menu_collapse}\"\n size=\"1.1\"\n @click=${this.handleCollapse}\n ></temba-icon>`\n : null}\n </div>\n `\n : null}\n ${items.map((item: MenuItem) => {\n if (item.inline && item.items) {\n return html`${this.renderMenuItem(item)}\n <div class=\"inline-children\">\n ${(item.items || []).map((child: MenuItem) => {\n return this.renderMenuItem(child, item);\n })}\n </div>`;\n }\n return this.renderMenuItem(item);\n })}\n </div>`\n );\n }\n });\n\n const menu = html`<div\n class=\"${getClasses({\n root: true,\n 'fully-collapsed': this.collapsed,\n })}\"\n >\n ${levels}\n </div>`;\n return html`${menu}`;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"TembaMenu.js","sourceRoot":"","sources":["../../../src/list/TembaMenu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,SAAS,MAAM,YAAY,CAAC;AA6BnC,MAAM,QAAQ,GAAG,CACf,KAAiB,EACjB,EAAU,EACyB,EAAE;IACrC,MAAM,MAAM,GAAG,KAAK,IAAI,EAAE,CAAC;IAE3B,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,IAAc,EAAE,EAAE;QAChD,OAAO,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE;QACd,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QAC3B,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;KACxB;IAED,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC;AACnC,CAAC,CAAC;AAEF,MAAM,OAAO,SAAU,SAAQ,YAAY;IACzC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyaT,CAAC;IACJ,CAAC;IA+BD;QACE,KAAK,EAAE,CAAC;QA7BV,UAAK,GAAG,KAAK,CAAC;QAyBd,cAAS,GAAa,EAAE,CAAC;QACzB,UAAK,GAAoC,EAAE,CAAC;QAiVpC,mBAAc,GAAG,CACvB,QAAkB,EAClB,SAAmB,IAAI,EACP,EAAE;YAClB,IAAI,QAAQ,CAAC,IAAI,KAAK,SAAS,EAAE;gBAC/B,OAAO,IAAI,CAAA,6BAA6B,CAAC;aAC1C;YAED,IAAI,QAAQ,CAAC,IAAI,KAAK,OAAO,EAAE;gBAC7B,OAAO,IAAI,CAAA,2BAA2B,CAAC;aACxC;YAED,IAAI,QAAQ,CAAC,IAAI,KAAK,SAAS,IAAI,QAAQ,CAAC,MAAM,EAAE;gBAClD,OAAO,IAAI,CAAA,4BAA4B,QAAQ,CAAC,IAAI,QAAQ,CAAC;aAC9D;YAED,IAAI,QAAQ,CAAC,IAAI,KAAK,cAAc,EAAE;gBACpC,OAAO,IAAI,CAAA;eACF,QAAQ,CAAC,IAAI;iBACX,KAAK,CAAC,EAAE;oBACf,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;gBAC1C,CAAC;SACA,CAAC;aACL;YAED,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;YAC7C,MAAM,eAAe,GACnB,UAAU,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC;YAE3D,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI;gBACtB,CAAC,CAAC,IAAI,CAAA;oBACQ,QAAQ,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;oBAClC,QAAQ,CAAC,IAAI;;aAEpB,QAAQ,CAAC,MAAM;oBAChB,CAAC,CAAC,IAAI,CAAA;2CACyB,QAAQ,CAAC,MAAM;;sBAEpC;oBACV,CAAC,CAAC,IAAI,EAAE;gBACd,CAAC,CAAC,IAAI,CAAC;YAET,MAAM,aAAa,GAAG,QAAQ,CAAC,cAAc;gBAC3C,CAAC,CAAC,IAAI,CAAA;kBACM,QAAQ,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;kBAClC,QAAQ,CAAC,cAAc;;uBAElB;gBACjB,CAAC,CAAC,IAAI,CAAC;YAET,MAAM,WAAW,GAAG,UAAU,CAAC;gBAC7B,CAAC,OAAO,GAAG,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI;gBAC7B,gBAAgB,EAAE,eAAe;gBACjC,QAAQ,EAAE,UAAU;gBACpB,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAC,MAAM,IAAI,QAAQ,CAAC,KAAK,KAAK,CAAC,CAAC;gBAChD,MAAM,EAAE,CAAC,CAAC,QAAQ,CAAC,MAAM;gBACzB,MAAM,EAAE,QAAQ,CAAC,MAAM;gBACvB,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,CAAC,EAAE;gBAC3D,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;gBACnC,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,IAAI,CAAC,QAAQ,CAAC,MAAM;aACtD,CAAC,CAAC;YAEH,IAAI,QAAQ,CAAC,MAAM,EAAE;gBACnB,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;aAC3C;YAED,MAAM,IAAI,GAAG,IAAI,CAAA;0BACK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI;;;;mBAIrC,QAAQ,CAAC,EAAE;iBACb,WAAW;iBACX,KAAK,CAAC,EAAE;gBACf,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;YAClD,CAAC;;UAEC,QAAQ,CAAC,KAAK,KAAK,CAAC;gBACpB,CAAC,CAAC,QAAQ,CAAC,MAAM;oBACf,CAAC,CAAC,IAAI;oBACN,CAAC,CAAC,IAAI,CAAA;;wBAEM,QAAQ,CAAC,IAAI;;mBAElB,IAAI;gBACP;gBACN,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,GAAG,aAAa,EAAE;;;;;8DAKqB,IAAI,CAAC,KAAK;gBAC1D,CAAC,CAAC,QAAQ;gBACV,CAAC,CAAC,QAAQ;;cAEV,QAAQ,CAAC,IAAI;;YAEf,QAAQ,CAAC,KAAK,GAAG,CAAC;gBAClB,CAAC,CAAC,QAAQ,CAAC,MAAM;oBACf,CAAC,CAAC,IAAI,CAAA;0BACM,UAAU,IAAI,eAAe;wBACnC,CAAC,CAAC,IAAI,CAAC,QAAQ;wBACf,CAAC,CAAC,IAAI,CAAC,UAAU;+BACN;oBACjB,CAAC,CAAC,IAAI,CAAA,GAAG,QAAQ,CAAC,KAAK,IAAI,QAAQ,CAAC,KAAK,IAAI,CAAC;wBAC1C,CAAC,CAAC,IAAI,CAAA;;0BAEE,QAAQ,CAAC,KAAK,CAAC,cAAc,EAAE;;qBAEpC;wBACH,CAAC,CAAC,IAAI,CAAA,2BAA2B,EAAE;gBACzC,CAAC,CAAC,IAAI;;;;;gCAKc,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,UAAU,CAAC;YAErE,IAAI,QAAQ,CAAC,KAAK,EAAE;gBAClB,OAAO,IAAI,CAAA;;+BAEc,IAAI;;;;;;gBAMnB,CAAC,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,KAAe,EAAE,EAAE;oBAC/C,KAAK,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC;oBACjC,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;gBAC9C,CAAC,CAAC;;;;OAIT,CAAC;aACH;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC;IAtdF,CAAC;IAEM,SAAS,CAAC,EAAU,EAAE,KAAa;QACxC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAC5C,IAAI,KAAK,IAAI,KAAK,CAAC,IAAI,EAAE;YACvB,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YAC1B,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAC3B,OAAO,IAAI,CAAC;SACb;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAEO,gBAAgB,CAAC,EAAU;QACjC,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,IAAI,EAAE,EAAE;YACN,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YAC3B,IAAI,CAAC,SAAS,EAAE;gBACd,SAAS,GAAG,EAAE,CAAC;gBACf,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC;aAC5B;SACF;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAEM,OAAO,CAAC,OAAyB;QACtC,IAAI,OAAO,CAAC,GAAG,CAAC,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;iBAAM;gBACL,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;aAC7C;SACF;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACvB,IAAI,IAAI,CAAC,KAAK,EAAE;gBACd,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAChC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;aACnB;SACF;IACH,CAAC;IAEM,KAAK;QACV,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAEM,OAAO;QACZ,MAAM,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;QACjC,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAErB,OAAO,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YACtB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;YACrB,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;YACxB,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;SACjD;QAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC;IAED,gEAAgE;IACxD,SAAS,CAAC,IAAc,EAAE,WAAW,GAAG,KAAK;QACnD,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,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;oBACtB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;wBAClB,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,IAAI,CACtC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,OAAO,CAAC,EAAE,CAC9B,CAAC;wBACF,IAAI,QAAQ,IAAI,QAAQ,CAAC,KAAK,EAAE;4BAC9B,OAAO,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;yBAChC;qBACF;gBACH,CAAC,CAAC,CAAC;gBAEH,wBAAwB;gBACxB,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;oBACtB,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;oBAC/B,mEAAmE;oBACnE,IAAI,OAAO,CAAC,KAAK,EAAE;wBACjB,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;4BACjC,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;wBACpC,CAAC,CAAC,CAAC;qBACJ;gBACH,CAAC,CAAC,CAAC;gBAEH,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;gBACnB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;gBAErB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,EAAE;oBAC9C,MAAM,GAAG,GAAG,IAAI,CAAC,uBAAuB,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;oBACzD,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;iBACnC;gBAED,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;oBACd,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;oBAC5C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;iBAClB;gBAED,2DAA2D;gBAC3D,IAAI,WAAW,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;oBACxC,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;iBAC7C;gBAED,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;gBAC3B,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAChC,CAAC,CACF,CAAC;SACH;IACH,CAAC;IAEO,iBAAiB,CACvB,KAAiB,EACjB,QAAkB,EAClB,SAAmB,IAAI;QAEvB,IAAI,MAAM,IAAI,MAAM,CAAC,KAAK,EAAE;YAC1B,IAAI,KAAK,EAAE;gBACT,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,aAAa,EAAE;oBAClD,IAAI,EAAE,QAAQ;oBACd,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE;oBAC9B,MAAM;iBACP,CAAC,CAAC;aACJ;YAED,OAAO;SACR;QAED,IAAI,QAAQ,CAAC,KAAK,EAAE;YAClB,IAAI,KAAK,EAAE;gBACT,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,aAAa,EAAE;oBAClD,IAAI,EAAE,QAAQ;oBACd,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE;oBAC9B,MAAM;iBACP,CAAC,CAAC;aACJ;YAED,OAAO;SACR;QAED,IAAI,MAAM,IAAI,MAAM,CAAC,MAAM,EAAE;YAC3B,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;SACtC;QAED,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;SACxB;QAED,IAAI,KAAK,EAAE;YACT,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;QAED,uBAAuB;QACvB,IAAI,QAAQ,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE;YAC3C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,IAAI,QAAQ,CAAC,EAAE,CAAC,CAAC;SACxD;aAAM;YACL,IAAI,CAAC,SAAS,CAAC,MAAM,CACnB,QAAQ,CAAC,KAAK,EACd,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,EACtC,QAAQ,CAAC,SAAS,IAAI,QAAQ,CAAC,EAAE,CAClC,CAAC;SACH;QAED,IAAI,QAAQ,CAAC,QAAQ,EAAE;YACrB,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;YAElC,qDAAqD;YACrD,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;gBAClB,OAAO;aACR;SACF;aAAM;YACL,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;QAED,IAAI,QAAQ,CAAC,IAAI,EAAE;YACjB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;SACzC;QAED,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,aAAa,EAAE;YAClD,IAAI,EAAE,QAAQ;YACd,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE;YAC9B,MAAM;SACP,CAAC,CAAC;IACL,CAAC;IAEM,sBAAsB;QAC3B,uCAAuC;QACvC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACrB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;YAC3D,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;gBACjB,GAAG,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;YAC3D,CAAC,CAAC,CAAC;QACL,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC;IAEM,SAAS,CAAC,EAAU;QACzB,MAAM,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;QACjC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QACpC,MAAM,IAAI,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC;QAEhD,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;YACnC,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAC9B,OAAO,IAAI,CAAC;SACb;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAEM,WAAW;QAChB,OAAO,IAAI,CAAC,uBAAuB,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3D,CAAC;IAEM,uBAAuB,CAAC,SAAmB;QAChD,MAAM,IAAI,GAAG,CAAC,GAAG,SAAS,CAAC,CAAC;QAC5B,IAAI,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;QAC5B,IAAI,IAAI,GAAG,IAAI,CAAC;QAChB,OAAO,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YACtB,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAClC,IAAI,KAAK,EAAE;gBACT,IAAI,GAAG,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC;gBAClC,IAAI,IAAI,EAAE;oBACR,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;iBACpB;qBAAM;oBACL,MAAM;iBACP;aACF;iBAAM;gBACL,MAAM;aACP;SACF;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAEM,YAAY;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAEM,YAAY;QACjB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAEM,cAAc;QACnB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAEM,KAAK,CAAC,cAAc,CAAC,IAAY;QACtC,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QAC3D,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO;SACR;QAED,sDAAsD;QACtD,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;YAC1B,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAChE,IAAI,CAAC,QAAQ,EAAE;gBACb,OAAO;aACR;SACF;QAED,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,IAAI,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;QACtB,OAAO,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;YAC7B,MAAM,MAAM,GAAG,WAAW,CAAC,KAAK,EAAE,CAAC;YACnC,IAAI,MAAM,EAAE;gBACV,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;oBAChB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;oBACtB,MAAM,IAAI,CAAC,YAAY,CAAC;iBACzB;gBAED,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC;gBAC3C,IAAI,CAAC,KAAK,EAAE;oBACV,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;iBAC3C;qBAAM;oBACL,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;iBACtB;aACF;SACF;QAED,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC;QACzB,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC;IAEO,UAAU,CAAC,QAAkB;QACnC,IAAI,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE;YAC1C,MAAM,QAAQ,GACZ,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,IAAI,QAAQ,CAAC,EAAE,CAAC,CAAC;YACxE,OAAO,QAAQ,CAAC;SACjB;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAEO,UAAU,CAAC,QAAkB;QACnC,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CACpC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,QAAQ,CAAC,SAAS,IAAI,QAAQ,CAAC,EAAE,CAC/C,CAAC;QACF,OAAO,QAAQ,CAAC;IAClB,CAAC;IAEO,YAAY,CAAC,MAAc;QACjC,MAAM,IAAI,GAAG,IAAI,SAAS,EAAE,CAAC;QAC7B,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAE/B,IAAI,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACrC,IAAI,MAAM,GAAG,CAAC,EAAE;YACd,MAAM,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SACpC;QACD,IAAI,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC;QACzE,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAE1B,OAAO,IAAI,CAAA;;;;;;+DAMgD,KAAK;;;;;kDAKlB,IAAI;;;;KAIjD,CAAC;IACJ,CAAC;IA6IM,MAAM;QACX,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YAClC,OAAO,IAAI,CAAA;;;;;SAKR,CAAC;SACL;QAED,IAAI,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;QAClC,MAAM,MAAM,GAAG,EAAE,CAAC;QAElB,MAAM,CAAC,IAAI,CACT,IAAI,CAAA,6BAA6B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;4CAEvB,IAAI,CAAC,YAAY;;sBAEvC,IAAI,CAAC,aAAa;;;;;;;;UAQ9B,KAAK;aACJ,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;aAC5B,GAAG,CAAC,CAAC,IAAc,EAAE,EAAE;YACtB,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QACnC,CAAC,CAAC;;;UAGF,KAAK;aACJ,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;aAC7B,GAAG,CAAC,CAAC,IAAc,EAAE,EAAE;YACtB,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QACnC,CAAC,CAAC;;aAEC,CACR,CAAC;QAEF,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;YACnC,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC;YAE1C,IAAI,SAAS,GAAG,KAAK,CAAC;YACtB,IAAI,QAAQ,EAAE;gBACZ,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;gBACvB,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;gBACrD,uCAAuC;gBACvC,IAAI,SAAS,CAAC,SAAS,EAAE;oBACvB,SAAS,GAAG,SAAS,CAAC,SAAS,KAAK,WAAW,CAAC;iBACjD;gBACD,0CAA0C;qBACrC;oBACH,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,GAAG,CAAC,EAAE;wBAC9C,SAAS,GAAG,KAAK,CAAC;qBACnB;iBACF;aACF;iBAAM;gBACL,KAAK,GAAG,IAAI,CAAC;aACd;YAED,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;gBACjD,MAAM,CAAC,IAAI,CACT,IAAI,CAAA;qBACO,UAAU,CAAC;oBAClB,KAAK,EAAE,IAAI;oBACX,CAAC,QAAQ,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI;oBAC9B,SAAS;iBACV,CAAC;;cAEA,CAAC,IAAI,CAAC,OAAO;oBACb,CAAC,CAAC,IAAI,CAAA;;6BAES,UAAU,CAAC;wBAClB,aAAa,EAAE,QAAQ,CAAC,WAAW;qBACpC,CAAC;;;;2CAIqB,QAAQ,CAAC,IAAI;;sBAElC,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS;wBAC7B,CAAC,CAAC,IAAI,CAAA;kCACM,IAAI,CAAC,aAAa;;mCAEjB,IAAI,CAAC,cAAc;uCACf;wBACjB,CAAC,CAAC,IAAI;;iBAEX;oBACH,CAAC,CAAC,IAAI;cACN,KAAK,CAAC,GAAG,CAAC,CAAC,IAAc,EAAE,EAAE;oBAC7B,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE;wBAC7B,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;;sBAEjC,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,KAAe,EAAE,EAAE;4BAC3C,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;wBAC1C,CAAC,CAAC;yBACG,CAAC;qBACX;oBACD,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;gBACnC,CAAC,CAAC;iBACG,CACR,CAAC;aACH;QACH,CAAC,CAAC,CAAC;QAEH,MAAM,IAAI,GAAG,IAAI,CAAA;eACN,UAAU,CAAC;YAClB,IAAI,EAAE,IAAI;YACV,iBAAiB,EAAE,IAAI,CAAC,SAAS;SAClC,CAAC;;QAEA,MAAM;WACH,CAAC;QACR,OAAO,IAAI,CAAA,GAAG,IAAI,EAAE,CAAC;IACvB,CAAC;CACF;AA7mBC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACd;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACd;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACT;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACb;AAId;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACX;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACT","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { fetchResults, getClasses } from '../utils';\nimport { Icon } from '../vectoricon';\nimport ColorHash from 'color-hash';\n\nexport interface MenuItem {\n id?: string;\n vanity_id?: string;\n name?: string;\n verbose_name?: string;\n count?: number;\n icon?: string;\n collapsed_icon?: string;\n endpoint?: string;\n loading?: boolean;\n bottom?: boolean;\n level?: number;\n href?: string;\n show_header?: boolean;\n items?: MenuItem[];\n inline?: boolean;\n type?: string;\n on_submit?: string;\n bubble?: string;\n popup?: boolean;\n avatar?: string;\n}\n\ninterface MenuItemState {\n collapsed?: string;\n}\n\nconst findItem = (\n items: MenuItem[],\n id: string\n): { item: MenuItem; index: number } => {\n const search = items || [];\n\n const index = search.findIndex((item: MenuItem) => {\n return item.id == id || item.vanity_id == id;\n });\n\n if (index > -1) {\n const item = search[index];\n return { item, index };\n }\n\n return { item: null, index: -1 };\n};\n\nexport class TembaMenu extends RapidElement {\n static get styles() {\n return css`\n :host {\n width: 100%;\n display: block;\n --color-widget-bg-focused: transparent;\n --options-block-shadow: none;\n }\n\n .bubble {\n width: 8px;\n height: 8px;\n left: 14px;\n bottom: -1px;\n border-radius: 99px;\n border: 1px solid rgb(255, 255, 255);\n position: relative;\n margin-top: -10px;\n }\n\n .section {\n font-size: 1.5em;\n margin-bottom: 0.2em;\n color: var(--color-text-dark);\n }\n\n .collapse-toggle {\n width: 0.5em;\n cursor: pointer;\n display: block;\n margin-right: 5px;\n margin-top: 3px;\n margin-bottom: 3px;\n }\n\n .collapse-toggle:hover {\n background: rgb(100, 100, 100, 0.05);\n }\n\n .item {\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n display: flex;\n font-size: 1em;\n --icon-color: var(--color-text-dark);\n }\n\n .item.selected {\n background: var(--color-selection);\n color: var(--color-primary-dark);\n --icon-color: var(--color-primary-dark);\n }\n\n .root {\n display: flex;\n flex-direction: row;\n height: 100%;\n }\n\n .level {\n display: flex;\n flex-direction: column;\n }\n\n .level.hidden {\n display: none;\n }\n\n .level-0 > .item,\n .level-0 > temba-dropdown > div[slot='toggle'] > .avatar {\n background: var(--color-primary-dark);\n --icon-color: rgba(255, 255, 255, 0.7);\n font-size: 1em;\n }\n\n .level-0 > .top {\n padding-top: var(--menu-padding);\n background: var(--color-primary-dark);\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n .level-0 > .empty {\n background: var(--color-primary-dark);\n align-self: stretch;\n flex-grow: 1;\n }\n\n .level-0 > .bottom {\n height: 1em;\n background: var(--color-primary-dark);\n }\n\n temba-dropdown {\n z-index: 1;\n }\n\n temba-dropdown > div[slot='dropdown'] .avatar > .details {\n margin-left: 0.75em;\n }\n\n .level-0 > .item > .details,\n .level-0 > temba-dropdown > div[slot='toggle'] > .avatar > .details {\n display: none !important;\n }\n\n .avatar {\n align-items: center;\n }\n\n .avatar-circle {\n box-shadow: 0 0 0px 3px rgba(0, 0, 0, 0.075);\n display: flex;\n margin: 0.4em 0em;\n height: 2em;\n width: 2em;\n flex-direction: row;\n align-items: center;\n color: #fff;\n border-radius: 100%;\n font-weight: 400;\n }\n\n temba-dropdown > div[slot='dropdown'] .avatar .avatar-circle {\n font-size: 0.7em;\n }\n\n .level-0.expanded {\n background: inherit;\n }\n\n .level-0 > .item.selected {\n background: inherit;\n --icon-color: var(--color-primary-dark);\n }\n\n .level {\n padding: var(--menu-padding);\n }\n\n .level-0 {\n padding: 0px;\n z-index: 500;\n }\n\n .item {\n padding: 0.2em 0.75em;\n margin-top: 0.1em;\n border-radius: var(--curvature);\n display: flex;\n min-width: 12em;\n }\n\n .item > temba-icon {\n margin-right: 0.5em;\n }\n\n .item > .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 > .item:hover {\n background: rgba(var(--primary-rgb), 0.85);\n --icon-color: #fff;\n }\n\n .level-0 > .item.selected:hover {\n background: inherit;\n --icon-color: var(--color-primary-dark);\n cursor: default;\n }\n\n .item.inline {\n border: 0px solid transparent;\n }\n\n .level-1,\n .level-2 {\n border-right: 1px solid rgba(0 0 0 / 8%);\n box-shadow: rgb(0 0 0 / 6%) 4px 0px 6px 1px;\n }\n\n .level-1 {\n transition: opacity 100ms linear, margin 200ms linear;\n overflow-y: scroll;\n z-index: 150;\n }\n\n .level-2 {\n background: #fbfbfb;\n overflow-y: auto;\n z-index: 1000;\n }\n\n .level-2 .item .details {\n overflow: hidden;\n }\n\n .level-2 .item {\n min-width: 12em;\n max-width: 12em;\n }\n\n .level-1 .item {\n overflow: hidden;\n max-width: 12em;\n min-width: 12em;\n min-height: 1.5em;\n max-height: 1.5em;\n transition: min-width var(--transition-speed) !important;\n }\n\n .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: 1rem;\n color: #888;\n margin-top: 1rem;\n margin-left: 0.3rem;\n }\n\n .fully-collapsed .level-1 {\n margin-left: -208px;\n pointer-events: none;\n border: none;\n overflow: hidden;\n }\n\n .fully-collapsed .level-1 > * {\n opacity: 0;\n }\n\n .fully-collapsed .level-1 .item,\n .fully-collapsed .level-1 .divider {\n opacity: 0;\n }\n\n .fully-collapsed .level-2,\n .fully-collapsed .level-3 {\n display: none;\n }\n\n temba-button {\n margin-top: 0.2em;\n margin-bottom: 0.2em;\n margin-left: 0.75em;\n margin-right: 0.75em;\n }\n\n .expand-icon {\n transform: rotate(180deg);\n --icon-color: rgba(255, 255, 255, 0.5);\n cursor: pointer;\n max-height: 0px;\n overflow: hidden;\n opacity: 0;\n transition: all 400ms ease-in-out 400ms;\n }\n\n .expand-icon:hover {\n --icon-color: #fff;\n }\n\n .fully-collapsed .expand-icon {\n padding-top: 0.5em;\n max-height: 2em;\n opacity: 1;\n }\n\n .section-header {\n display: flex;\n align-items: center;\n }\n\n .section-header .section {\n flex-grow: 1;\n }\n\n .section-header temba-icon {\n --icon-color: #ddd;\n cursor: pointer;\n padding-bottom: 0.5em;\n padding-right: 0.5em;\n }\n\n .section-header temba-icon:hover {\n --icon-color: var(--color-link-primary);\n }\n\n slot[name='header'] {\n display: none;\n }\n\n slot[name='header'].show-header {\n display: block;\n }\n `;\n }\n\n @property({ type: Boolean })\n wraps = false;\n\n @property({ type: Boolean })\n wait: boolean;\n\n @property({ type: String })\n endpoint: string;\n\n @property({ type: String })\n expanding: string;\n\n @property({ type: String })\n value: string;\n\n // submenu to constrain to\n @property({ type: String })\n submenu: string;\n\n @property({ type: Boolean })\n collapsed: boolean;\n\n // http promise to monitor for completeness\n public httpComplete: Promise<void>;\n\n root: MenuItem;\n selection: string[] = [];\n state: { [id: string]: MenuItemState } = {};\n\n constructor() {\n super();\n }\n\n public setBubble(id: string, color: string) {\n const found = findItem(this.root.items, id);\n if (found && found.item) {\n found.item.bubble = color;\n this.requestUpdate('root');\n return true;\n }\n return false;\n }\n\n private getMenuItemState(id: string): MenuItemState {\n let itemState = {};\n if (id) {\n itemState = this.state[id];\n if (!itemState) {\n itemState = {};\n this.state[id] = itemState;\n }\n }\n return itemState;\n }\n\n public updated(changes: Map<string, any>) {\n if (changes.has('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 refresh() {\n const path = [...this.selection];\n let item = this.root;\n\n while (path.length > 0) {\n this.loadItems(item);\n const id = path.shift();\n item = item.items.find(_item => _item.id == id);\n }\n\n this.loadItems(item);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private loadItems(item: MenuItem, selectFirst = false) {\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(null, 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 (selectFirst && item.items.length > 0) {\n this.handleItemClicked(null, 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\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\n return;\n }\n\n if (parent && parent.inline) {\n this.handleItemClicked(null, parent);\n }\n\n if (this.collapsed) {\n this.collapsed = false;\n }\n\n if (event) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n // 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.requestUpdate('root');\n }\n\n private isSelected(menuItem: MenuItem) {\n if (menuItem.level < this.selection.length) {\n const selected =\n this.selection[menuItem.level] == (menuItem.vanity_id || menuItem.id);\n return selected;\n }\n return false;\n }\n\n private isExpanded(menuItem: MenuItem) {\n const expanded = !!this.selection.find(\n id => id === menuItem.vanity_id || menuItem.id\n );\n return expanded;\n }\n\n private renderAvatar(avatar: string) {\n const hash = new ColorHash();\n const color = hash.hex(avatar);\n\n let second = avatar.indexOf(' ') + 1;\n if (second < 1) {\n second = avatar.length > 1 ? 1 : 0;\n }\n let name = avatar.substring(0, 1) + avatar.substring(second, second + 1);\n name = name.toUpperCase();\n\n return html`\n <div\n style=\"border: 0px solid red; display:flex; flex-direction: column; align-items:center;\"\n >\n <div\n class=\"avatar-circle\"\n style=\"border: 0px solid rgba(0,0,0,.1);background:${color}\"\n >\n <div\n style=\"border: 0px solid red; display:flex; flex-direction: column; align-items:center;flex-grow:1\"\n >\n <div style=\"border:0px solid blue;\">${name}</div>\n </div>\n </div>\n </div>\n `;\n }\n\n private renderMenuItem = (\n menuItem: MenuItem,\n parent: MenuItem = null\n ): TemplateResult => {\n if (menuItem.type === 'divider') {\n return html`<div class=\"divider\"></div>`;\n }\n\n if (menuItem.type === 'space') {\n return html`<div class=\"space\"></div>`;\n }\n\n if (menuItem.type === 'section' || menuItem.inline) {\n return html`<div class=\"sub-section\">${menuItem.name}</div>`;\n }\n\n if (menuItem.type === 'modax-button') {\n return html`<temba-button\n name=${menuItem.name}\n @click=${event => {\n this.handleItemClicked(event, menuItem);\n }}\n />`;\n }\n\n const isSelected = this.isSelected(menuItem);\n const isChildSelected =\n isSelected && this.selection.length > menuItem.level + 1;\n\n let icon = menuItem.icon\n ? html`<temba-icon\n size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n name=\"${menuItem.icon}\"\n ></temba-icon\n >${menuItem.bubble\n ? html`<div\n style=\"background-color: ${menuItem.bubble}\"\n class=\"bubble\"\n ></div>`\n : null}`\n : null;\n\n const collapsedIcon = menuItem.collapsed_icon\n ? html`<temba-icon\n size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n name=\"${menuItem.collapsed_icon}\"\n class=\"collapse-icon\"\n ></temba-icon>`\n : null;\n\n const itemClasses = getClasses({\n ['menu-' + menuItem.id]: true,\n 'child-selected': isChildSelected,\n selected: isSelected,\n item: !(menuItem.avatar && menuItem.level === 0),\n avatar: !!menuItem.avatar,\n inline: menuItem.inline,\n expanding: this.expanding && this.expanding === menuItem.id,\n expanded: this.isExpanded(menuItem),\n iconless: !icon && !collapsedIcon && !menuItem.avatar,\n });\n\n if (menuItem.avatar) {\n icon = this.renderAvatar(menuItem.avatar);\n }\n\n const item = html` <div\n class=\"item-top ${isSelected ? 'selected' : null} \"\n ></div>\n\n <div\n id=\"menu-${menuItem.id}\"\n class=\"${itemClasses}\"\n @click=${event => {\n this.handleItemClicked(event, menuItem, parent);\n }}\n >\n ${menuItem.level === 0\n ? menuItem.avatar\n ? icon\n : html`<temba-tip\n style=\"display:flex;\"\n text=\"${menuItem.name}\"\n position=\"right\"\n >${icon}</temba-tip\n >`\n : html`${icon}${collapsedIcon}`}\n\n <div class=\"details\" style=\"flex-grow:1;display:flex\">\n <div\n class=\"name\"\n style=\"flex-grow:1; flex-shrink:0; white-space: ${this.wraps\n ? 'normal'\n : 'nowrap'};\"\n >\n ${menuItem.name}\n </div>\n ${menuItem.level > 0\n ? menuItem.inline\n ? html`<temba-icon\n name=\"${isSelected || isChildSelected\n ? Icon.arrow_up\n : Icon.arrow_down}\"\n ></temba-icon>`\n : html`${menuItem.count || menuItem.count == 0\n ? html`\n <div class=\"count\">\n ${menuItem.count.toLocaleString()}\n </div>\n `\n : html`<div class=\"count\"></div>`}`\n : null}\n </div>\n <div class=\"right\"></div>\n </div>\n\n <div class=\"item-bottom ${isSelected ? 'selected' : null}\"></div>`;\n\n if (menuItem.popup) {\n return html`\n <temba-dropdown offsetx=\"10\" arrowoffset=\"8\" mask>\n <div slot=\"toggle\">${item}</div>\n <div\n slot=\"dropdown\"\n style=\"width:300px;overflow:hidden;padding-bottom:0.5em\"\n >\n <div style=\"max-height:400px;overflow-y:auto\">\n ${(menuItem.items || []).map((child: MenuItem) => {\n child.level = menuItem.level + 1;\n return this.renderMenuItem(child, menuItem);\n })}\n </div>\n </div>\n </temba-dropdown>\n `;\n }\n return item;\n };\n\n public render(): TemplateResult {\n if (!this.root || !this.root.items) {\n return html`<temba-loading\n units=\"3\"\n size=\"10\"\n direction=\"column\"\n style=\"margin:1em;margin-right:0em\"\n />`;\n }\n\n let items = this.root.items || [];\n const levels = [];\n\n levels.push(\n html`<div class=\"level level-0 ${this.submenu ? 'hidden' : ''}\">\n <div class=\"top\">\n <div class=\"expand-icon\" @click=${this.handleExpand}>\n <temba-icon\n name=\"${Icon.menu_collapse}\"\n class=\"collapse\"\n class=\"expand\"\n size=\"1.4\"\n ></temba-icon>\n </div>\n </div>\n\n ${items\n .filter(item => !item.bottom)\n .map((item: MenuItem) => {\n return this.renderMenuItem(item);\n })}\n\n <div class=\"empty\"></div>\n ${items\n .filter(item => !!item.bottom)\n .map((item: MenuItem) => {\n return this.renderMenuItem(item);\n })}\n <div class=\"bottom\"></div>\n </div>`\n );\n\n this.selection.forEach((id, index) => {\n const selected = findItem(items, id).item;\n\n let collapsed = false;\n if (selected) {\n items = selected.items;\n const itemState = this.getMenuItemState(selected.id);\n // users set an explicit collapse state\n if (itemState.collapsed) {\n collapsed = itemState.collapsed === 'collapsed';\n }\n // otherwise pick a default collapse state\n else {\n if (this.selection.length > selected.level + 2) {\n collapsed = false;\n }\n }\n } else {\n items = null;\n }\n\n if (items && items.length > 0 && !selected.inline) {\n levels.push(\n html`<div\n class=\"${getClasses({\n level: true,\n ['level-' + (index + 1)]: true,\n collapsed,\n })}\"\n >\n ${!this.submenu\n ? html`\n <slot\n class=\"${getClasses({\n 'show-header': selected.show_header,\n })}\"\n name=\"header\"\n ></slot>\n <div class=\"section-header\">\n <div class=\"section\">${selected.name}</div>\n\n ${index == 0 && !this.collapsed\n ? html`<temba-icon\n name=\"${Icon.menu_collapse}\"\n size=\"1.1\"\n @click=${this.handleCollapse}\n ></temba-icon>`\n : null}\n </div>\n `\n : null}\n ${items.map((item: MenuItem) => {\n if (item.inline && item.items) {\n return html`${this.renderMenuItem(item)}\n <div class=\"inline-children\">\n ${(item.items || []).map((child: MenuItem) => {\n return this.renderMenuItem(child, item);\n })}\n </div>`;\n }\n return this.renderMenuItem(item);\n })}\n </div>`\n );\n }\n });\n\n const menu = html`<div\n class=\"${getClasses({\n root: true,\n 'fully-collapsed': this.collapsed,\n })}\"\n >\n ${levels}\n </div>`;\n return html`${menu}`;\n }\n}\n"]}
|
|
@@ -22,6 +22,7 @@ export var Icon;
|
|
|
22
22
|
Icon["checkbox"] = "square";
|
|
23
23
|
Icon["checkbox_checked"] = "check-square";
|
|
24
24
|
Icon["contact"] = "user-01";
|
|
25
|
+
Icon["contact_archived"] = "archive";
|
|
25
26
|
Icon["contact_blocked"] = "message-x-square";
|
|
26
27
|
Icon["contact_stopped"] = "slash-octagon";
|
|
27
28
|
Icon["contact_updated"] = "user-edit";
|