@nyaruka/temba-components 0.25.2 → 0.26.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 +11 -0
- package/demo/index.html +1 -0
- package/dist/b5b37a88.js +1 -0
- package/dist/index.js +1 -356
- 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/aliaseditor/AliasEditor.js +1 -2
- package/out-tsc/src/aliaseditor/AliasEditor.js.map +1 -1
- package/out-tsc/src/list/TembaMenu.js +76 -22
- package/out-tsc/src/list/TembaMenu.js.map +1 -1
- package/out-tsc/src/vectoricon/VectorIcon.js +6 -1
- package/out-tsc/src/vectoricon/VectorIcon.js.map +1 -1
- package/package.json +2 -2
- package/src/aliaseditor/AliasEditor.ts +1 -2
- package/src/list/TembaMenu.ts +82 -22
- package/src/vectoricon/VectorIcon.ts +6 -1
- package/web-test-runner.config.mjs +127 -117
- package/dist/56e0e480.js +0 -356
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VectorIcon.js","sourceRoot":"","sources":["../../../src/vectoricon/VectorIcon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAE9E,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,4DAA4D;AAC5D,MAAM,YAAY,GAAG,CAAC,CAAC;AAEvB,MAAM,OAAO,UAAW,SAAQ,UAAU;
|
|
1
|
+
{"version":3,"file":"VectorIcon.js","sourceRoot":"","sources":["../../../src/vectoricon/VectorIcon.ts"],"names":[],"mappings":"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","sourcesContent":["import { property, LitElement, TemplateResult, html, css } from 'lit-element';\n\nimport { getClasses } from '../utils';\n\n// for cache busting, increase whenever the icon set changes\nconst ICON_VERSION = 5;\n\nexport class VectorIcon extends LitElement {\n @property({ type: String })\n name: string;\n\n @property({ type: String })\n prefix: string;\n\n // same as name but without implicit coloring\n @property({ type: String })\n id: string;\n\n @property({ type: Number })\n size = 1;\n\n @property({ type: Boolean })\n clickable: boolean;\n\n @property({ type: Boolean })\n circled: boolean;\n\n @property({ type: String })\n animateChange: string;\n\n @property({ type: Number })\n animationDuration = 200;\n\n @property({ type: Number, attribute: false })\n steps = 2;\n\n @property({ type: Number, attribute: false })\n animationStep: number;\n\n @property({ type: String })\n easing = 'cubic-bezier(0.68, -0.55, 0.265, 1.55)';\n\n static get styles() {\n return css`\n :host {\n margin: auto;\n --color1: var(--icon-color);\n }\n\n :host([id='flow']),\n :host([name='flow']) {\n padding-bottom: 0.2em;\n }\n\n svg {\n fill: var(--icon-color);\n transform: scale(1);\n transition: fill 100ms ease-in-out,\n background 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n padding 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n margin 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);\n }\n\n svg.spin {\n transform: rotate(0deg);\n }\n\n svg.spin-1 {\n transform: rotate(180deg);\n }\n\n svg.spin-2 {\n transform: rotate(360deg);\n }\n\n svg.spin-3 {\n transform: rotate(0deg);\n transition-duration: 0ms !important;\n }\n\n svg.pulse {\n transform: scale(1);\n }\n\n svg.pulse-1 {\n transform: scale(1.2);\n }\n\n .clickable:hover {\n cursor: pointer;\n fill: var(--color-link-primary);\n background: rgb(255, 255, 255);\n }\n\n .circled {\n background: rgb(240, 240, 240);\n padding: 0.15em;\n margin: -0.15em;\n box-shadow: var(--shadow);\n }\n\n .wrapper {\n display: flex;\n flex-direction: column;\n border-radius: 999px;\n transition: background 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n padding 150ms linear, margin 150ms linear;\n }\n\n .wrapper.clickable {\n transform: scale(1);\n }\n\n .wrapper.clickable:hover {\n padding: 0.35em;\n margin: -0.35em;\n }\n `;\n }\n\n constructor() {\n super();\n }\n\n private lastName: string;\n\n public firstUpdated(changes: Map<string, any>) {\n super.firstUpdated(changes);\n if (changes.has('animateChange')) {\n // set our default duration if we need one\n if (!changes.has('animationDuration')) {\n this.animationDuration = this.steps * this.animationDuration;\n }\n\n if (this.animateChange === 'spin') {\n this.steps = 3;\n this.animationDuration = 400;\n this.easing = 'linear';\n }\n }\n }\n\n public updated(changes: Map<string, any>) {\n super.updated(changes);\n\n if (changes.has('animationStep')) {\n // if we are halfway through, change the icon\n if (this.lastName && this.animationStep >= this.steps / 2) {\n this.lastName = null;\n this.requestUpdate();\n }\n\n setTimeout(() => {\n if (this.animationStep > 0 && this.animationStep < this.steps) {\n this.animationStep++;\n } else {\n this.animationStep = 0;\n }\n }, this.animationDuration / this.steps);\n }\n\n if (changes.has('name') && this.animateChange) {\n this.lastName = changes.get('name');\n\n // our name changed, lets animate it\n if (this.lastName && this.animateChange) {\n this.animationStep = 1;\n }\n }\n }\n\n public render(): TemplateResult {\n return html`\n <div\n class=\"wrapper ${getClasses({\n clickable: this.clickable,\n circled: this.circled,\n animate: !!this.animateChange,\n })}\"\n >\n <svg\n style=\"height:${this.size}em;width:${this\n .size}em;transition:transform ${this.animationDuration /\n this.steps}ms\n ${this.easing}\"\n class=\"${getClasses({\n [this.animateChange]: !!this.animateChange,\n [this.animateChange + '-' + this.animationStep]:\n this.animationStep > 0,\n })}\"\n >\n <use\n href=\"${this.prefix ||\n (window as any).static_url ||\n '/static/'}icons/symbol-defs.svg?v=${ICON_VERSION}#icon-${this\n .lastName ||\n this.name ||\n this.id}\"\n />\n </svg>\n </div>\n `;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nyaruka/temba-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.26.0",
|
|
4
4
|
"description": "Web components to support rapidpro and related projects",
|
|
5
5
|
"author": "Nyaruka <code@nyaruka.coim>",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"lit-element": "^2.0.1",
|
|
38
38
|
"lit-flatpickr": "^0.2.2",
|
|
39
39
|
"lit-html": "^1.0.0",
|
|
40
|
-
"marked": "0.
|
|
40
|
+
"marked": "4.0.10",
|
|
41
41
|
"remarkable": "^2.0.1",
|
|
42
42
|
"serialize-javascript": "^3.0.0"
|
|
43
43
|
},
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/* eslint-disable @typescript-eslint/camelcase */
|
|
2
1
|
import { css, html, LitElement, property, TemplateResult } from 'lit-element';
|
|
3
2
|
import { FeatureProperties } from '../interfaces';
|
|
4
3
|
import { getUrl, postJSON, WebResponse } from '../utils';
|
|
@@ -258,7 +257,7 @@ export class AliasEditor extends LitElement {
|
|
|
258
257
|
evt.stopPropagation();
|
|
259
258
|
}}
|
|
260
259
|
>
|
|
261
|
-
<temba-icon name="edit"
|
|
260
|
+
<temba-icon name="edit" />
|
|
262
261
|
</div>
|
|
263
262
|
`
|
|
264
263
|
: ''}
|
package/src/list/TembaMenu.ts
CHANGED
|
@@ -25,11 +25,22 @@ interface MenuItemState {
|
|
|
25
25
|
collapsed?: string;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
-
const findItem = (
|
|
29
|
-
|
|
28
|
+
const findItem = (
|
|
29
|
+
items: MenuItem[],
|
|
30
|
+
id: string
|
|
31
|
+
): { item: MenuItem; index: number } => {
|
|
32
|
+
const search = items || [];
|
|
33
|
+
const index = search.findIndex((item: MenuItem) => {
|
|
30
34
|
return item.id == id || item.vanity_id == id;
|
|
31
35
|
});
|
|
32
36
|
|
|
37
|
+
if (index > -1) {
|
|
38
|
+
const item = search[index];
|
|
39
|
+
return { item: item, index: index };
|
|
40
|
+
}
|
|
41
|
+
return { item: null, index: -1 };
|
|
42
|
+
};
|
|
43
|
+
|
|
33
44
|
export class TembaMenu extends RapidElement {
|
|
34
45
|
static get styles() {
|
|
35
46
|
return css`
|
|
@@ -153,7 +164,6 @@ export class TembaMenu extends RapidElement {
|
|
|
153
164
|
}
|
|
154
165
|
|
|
155
166
|
.item.inline > temba-icon {
|
|
156
|
-
// margin-right: 0em;
|
|
157
167
|
}
|
|
158
168
|
|
|
159
169
|
.item > .details > .name {
|
|
@@ -217,27 +227,19 @@ export class TembaMenu extends RapidElement {
|
|
|
217
227
|
}
|
|
218
228
|
|
|
219
229
|
.inline-children {
|
|
220
|
-
// background: #ffffff;
|
|
221
230
|
padding: 0.5em;
|
|
222
231
|
border-bottom-right-radius: var(--curvature);
|
|
223
232
|
border-bottom-left-radius: var(--curvature);
|
|
224
233
|
font-size: 1rem;
|
|
225
234
|
margin-bottom: 0.75em;
|
|
226
235
|
border: 1px solid #f3f3f3;
|
|
227
|
-
// box-shadow: var(--shadow);
|
|
228
|
-
// margin-top: -1px;
|
|
229
236
|
z-index: 1000;
|
|
230
|
-
// margin-left: 1em;
|
|
231
237
|
border-top: none;
|
|
232
238
|
}
|
|
233
239
|
|
|
234
240
|
.inline-children .item {
|
|
235
241
|
max-width: 11em !important;
|
|
236
242
|
min-width: 11em !important;
|
|
237
|
-
// border: 1px solid #f1f1f1;
|
|
238
|
-
// margin-top: 0.75em;
|
|
239
|
-
// margin-right: -1em;
|
|
240
|
-
// padding-right: 0;
|
|
241
243
|
}
|
|
242
244
|
|
|
243
245
|
.item.inline {
|
|
@@ -253,7 +255,6 @@ export class TembaMenu extends RapidElement {
|
|
|
253
255
|
z-index: 1000;
|
|
254
256
|
color: #444;
|
|
255
257
|
--icon-color: #444;
|
|
256
|
-
// box-shadow: var(--shadow);
|
|
257
258
|
}
|
|
258
259
|
|
|
259
260
|
.level-1,
|
|
@@ -263,6 +264,7 @@ export class TembaMenu extends RapidElement {
|
|
|
263
264
|
}
|
|
264
265
|
|
|
265
266
|
.level-1 {
|
|
267
|
+
transition: opacity 100ms linear, margin 200ms linear;
|
|
266
268
|
overflow-y: auto;
|
|
267
269
|
z-index: 1500;
|
|
268
270
|
}
|
|
@@ -387,6 +389,33 @@ export class TembaMenu extends RapidElement {
|
|
|
387
389
|
margin-top: 1rem;
|
|
388
390
|
margin-left: 0.3rem;
|
|
389
391
|
}
|
|
392
|
+
|
|
393
|
+
.fully-collapsed .level-0 {
|
|
394
|
+
z-index: 1;
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
.fully-collapsed .level-1 {
|
|
398
|
+
margin-left: -245px;
|
|
399
|
+
z-index: 0;
|
|
400
|
+
border: none;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
.fully-collapsed .level-1 .item,
|
|
404
|
+
.fully-collapsed .level-1 .divider {
|
|
405
|
+
opacity: 0;
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
.fully-collapsed .level-2,
|
|
409
|
+
.fully-collapsed .level-3 {
|
|
410
|
+
display: none;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
temba-button {
|
|
414
|
+
margin-top: 0.5em;
|
|
415
|
+
margin-bottom: 0.5em;
|
|
416
|
+
margin-left: 0.75em;
|
|
417
|
+
margin-right: 0.75em;
|
|
418
|
+
}
|
|
390
419
|
`;
|
|
391
420
|
}
|
|
392
421
|
|
|
@@ -409,6 +438,9 @@ export class TembaMenu extends RapidElement {
|
|
|
409
438
|
@property({ type: String })
|
|
410
439
|
submenu: string;
|
|
411
440
|
|
|
441
|
+
@property({ type: Boolean })
|
|
442
|
+
collapsed: boolean;
|
|
443
|
+
|
|
412
444
|
// http promise to monitor for completeness
|
|
413
445
|
public httpComplete: Promise<void>;
|
|
414
446
|
|
|
@@ -461,7 +493,7 @@ export class TembaMenu extends RapidElement {
|
|
|
461
493
|
while (path.length > 0) {
|
|
462
494
|
const step = path.splice(0, 1)[0];
|
|
463
495
|
if (items) {
|
|
464
|
-
item = findItem(items, step);
|
|
496
|
+
item = findItem(items, step).item;
|
|
465
497
|
if (item) {
|
|
466
498
|
if (item.endpoint) {
|
|
467
499
|
item.loading = true;
|
|
@@ -470,7 +502,11 @@ export class TembaMenu extends RapidElement {
|
|
|
470
502
|
// for now we only deal with updating counts and names
|
|
471
503
|
(itemToUpdate.items || []).forEach(
|
|
472
504
|
(existing: MenuItem, index: number, items: []) => {
|
|
473
|
-
const
|
|
505
|
+
const itdx = findItem(updated, existing.id);
|
|
506
|
+
const updatedItem = itdx.item;
|
|
507
|
+
|
|
508
|
+
// remove it from our updated list
|
|
509
|
+
updated.splice(itdx.index, 1);
|
|
474
510
|
|
|
475
511
|
// we were removed!
|
|
476
512
|
if (!updatedItem) {
|
|
@@ -548,7 +584,7 @@ export class TembaMenu extends RapidElement {
|
|
|
548
584
|
// auto select the next pending click
|
|
549
585
|
const nextId = this.pending.splice(0, 1)[0];
|
|
550
586
|
if (nextId && items.length > 0) {
|
|
551
|
-
const nextItem = findItem(items, nextId);
|
|
587
|
+
const nextItem = findItem(items, nextId).item;
|
|
552
588
|
if (nextItem) {
|
|
553
589
|
this.handleItemClicked(null, nextItem);
|
|
554
590
|
} else {
|
|
@@ -577,11 +613,23 @@ export class TembaMenu extends RapidElement {
|
|
|
577
613
|
}
|
|
578
614
|
|
|
579
615
|
private handleItemClicked(event: MouseEvent, menuItem: MenuItem) {
|
|
616
|
+
if (this.collapsed) {
|
|
617
|
+
this.collapsed = false;
|
|
618
|
+
}
|
|
619
|
+
|
|
580
620
|
if (event) {
|
|
581
621
|
event.preventDefault();
|
|
582
622
|
event.stopPropagation();
|
|
583
623
|
}
|
|
584
624
|
|
|
625
|
+
if (menuItem.type == 'modax-button') {
|
|
626
|
+
this.fireCustomEvent(CustomEventType.ButtonClicked, {
|
|
627
|
+
title: menuItem.name,
|
|
628
|
+
href: menuItem.href,
|
|
629
|
+
});
|
|
630
|
+
return;
|
|
631
|
+
}
|
|
632
|
+
|
|
585
633
|
if (menuItem.trigger) {
|
|
586
634
|
window[menuItem.trigger]();
|
|
587
635
|
} else {
|
|
@@ -609,13 +657,12 @@ export class TembaMenu extends RapidElement {
|
|
|
609
657
|
this.dispatchEvent(new Event('change'));
|
|
610
658
|
} else {
|
|
611
659
|
this.dispatchEvent(new Event('change'));
|
|
612
|
-
|
|
613
660
|
if (this.pending && this.pending.length > 0) {
|
|
614
661
|
// auto select the next pending click
|
|
615
662
|
const nextId = this.pending.splice(0, 1)[0];
|
|
616
663
|
const item = this.getMenuItem();
|
|
617
664
|
if (nextId && item && item.items && item.items.length > 0) {
|
|
618
|
-
const nextItem = findItem(item.items, nextId);
|
|
665
|
+
const nextItem = findItem(item.items, nextId).item;
|
|
619
666
|
if (nextItem) {
|
|
620
667
|
this.handleItemClicked(null, nextItem);
|
|
621
668
|
}
|
|
@@ -662,7 +709,7 @@ export class TembaMenu extends RapidElement {
|
|
|
662
709
|
while (path.length > 0) {
|
|
663
710
|
const step = path.splice(0, 1)[0];
|
|
664
711
|
if (items) {
|
|
665
|
-
item = findItem(items, step);
|
|
712
|
+
item = findItem(items, step).item;
|
|
666
713
|
if (item) {
|
|
667
714
|
items = item.items;
|
|
668
715
|
} else {
|
|
@@ -707,7 +754,7 @@ export class TembaMenu extends RapidElement {
|
|
|
707
754
|
|
|
708
755
|
// if we don't match at the first level, we are a noop
|
|
709
756
|
if (focusedPath.length > 0) {
|
|
710
|
-
const rootItem = findItem(this.root.items, focusedPath[0]);
|
|
757
|
+
const rootItem = findItem(this.root.items, focusedPath[0]).item;
|
|
711
758
|
if (!rootItem) {
|
|
712
759
|
return;
|
|
713
760
|
}
|
|
@@ -723,7 +770,7 @@ export class TembaMenu extends RapidElement {
|
|
|
723
770
|
await this.httpComplete;
|
|
724
771
|
}
|
|
725
772
|
|
|
726
|
-
level = findItem(level.items, nextId);
|
|
773
|
+
level = findItem(level.items, nextId).item;
|
|
727
774
|
if (!level) {
|
|
728
775
|
focusedPath.splice(0, focusedPath.length);
|
|
729
776
|
} else {
|
|
@@ -761,6 +808,15 @@ export class TembaMenu extends RapidElement {
|
|
|
761
808
|
return html`<div class="sub-section">${menuItem.name}</div>`;
|
|
762
809
|
}
|
|
763
810
|
|
|
811
|
+
if (menuItem.type === 'modax-button') {
|
|
812
|
+
return html`<temba-button
|
|
813
|
+
name=${menuItem.name}
|
|
814
|
+
@click=${event => {
|
|
815
|
+
this.handleItemClicked(event, menuItem);
|
|
816
|
+
}}
|
|
817
|
+
/>`;
|
|
818
|
+
}
|
|
819
|
+
|
|
764
820
|
const isSelected = this.isSelected(menuItem);
|
|
765
821
|
const isChildSelected =
|
|
766
822
|
isSelected && this.selection.length > menuItem.level + 1;
|
|
@@ -878,7 +934,7 @@ export class TembaMenu extends RapidElement {
|
|
|
878
934
|
);
|
|
879
935
|
|
|
880
936
|
this.selection.forEach((id, index) => {
|
|
881
|
-
const selected = findItem(items, id);
|
|
937
|
+
const selected = findItem(items, id).item;
|
|
882
938
|
|
|
883
939
|
let collapsed = false;
|
|
884
940
|
if (selected) {
|
|
@@ -926,7 +982,11 @@ export class TembaMenu extends RapidElement {
|
|
|
926
982
|
}
|
|
927
983
|
});
|
|
928
984
|
|
|
929
|
-
const menu = html`<div
|
|
985
|
+
const menu = html`<div
|
|
986
|
+
class="root ${this.collapsed ? 'fully-collapsed' : ''}"
|
|
987
|
+
>
|
|
988
|
+
${levels}
|
|
989
|
+
</div>`;
|
|
930
990
|
return html`${menu}`;
|
|
931
991
|
}
|
|
932
992
|
}
|
|
@@ -9,6 +9,9 @@ export class VectorIcon extends LitElement {
|
|
|
9
9
|
@property({ type: String })
|
|
10
10
|
name: string;
|
|
11
11
|
|
|
12
|
+
@property({ type: String })
|
|
13
|
+
prefix: string;
|
|
14
|
+
|
|
12
15
|
// same as name but without implicit coloring
|
|
13
16
|
@property({ type: String })
|
|
14
17
|
id: string;
|
|
@@ -188,7 +191,9 @@ export class VectorIcon extends LitElement {
|
|
|
188
191
|
})}"
|
|
189
192
|
>
|
|
190
193
|
<use
|
|
191
|
-
href="
|
|
194
|
+
href="${this.prefix ||
|
|
195
|
+
(window as any).static_url ||
|
|
196
|
+
'/static/'}icons/symbol-defs.svg?v=${ICON_VERSION}#icon-${this
|
|
192
197
|
.lastName ||
|
|
193
198
|
this.name ||
|
|
194
199
|
this.id}"
|