@nyaruka/temba-components 0.31.6 → 0.31.9
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 +21 -0
- package/dist/{fa23691e.js → 4be064bd.js} +110 -28
- package/dist/index.js +110 -28
- package/dist/static/icons/symbol-defs.svg +7 -3
- 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/anchor/Anchor.js +7 -4
- package/out-tsc/src/anchor/Anchor.js.map +1 -1
- package/out-tsc/src/contacts/ContactUrn.js +8 -1
- package/out-tsc/src/contacts/ContactUrn.js.map +1 -1
- package/out-tsc/src/list/TembaMenu.js +105 -17
- package/out-tsc/src/list/TembaMenu.js.map +1 -1
- package/out-tsc/src/options/Options.js +14 -2
- package/out-tsc/src/options/Options.js.map +1 -1
- package/out-tsc/src/select/Select.js +9 -2
- package/out-tsc/src/select/Select.js.map +1 -1
- package/out-tsc/src/store/Store.js +4 -1
- package/out-tsc/src/store/Store.js.map +1 -1
- package/out-tsc/src/tabpane/TabPane.js +6 -0
- package/out-tsc/src/tabpane/TabPane.js.map +1 -1
- package/out-tsc/src/vectoricon/VectorIcon.js +2 -3
- package/out-tsc/src/vectoricon/VectorIcon.js.map +1 -1
- package/package.json +1 -1
- package/src/anchor/Anchor.ts +7 -4
- package/src/contacts/ContactUrn.ts +5 -2
- package/src/list/TembaMenu.ts +110 -17
- package/src/options/Options.ts +15 -2
- package/src/select/Select.ts +9 -2
- package/src/store/Store.ts +5 -1
- package/src/tabpane/TabPane.ts +6 -0
- package/src/vectoricon/VectorIcon.ts +2 -3
- package/static/css/temba-components.css +5 -2
- package/static/icons/Read Me.txt +1 -1
- package/static/icons/SVG/menu-collapse.svg +5 -0
- package/static/icons/SVG/zapier.svg +2 -1
- package/static/icons/demo-external-svg.html +144 -139
- package/static/icons/demo-files/demo.css +4 -4
- package/static/icons/demo.html +151 -142
- package/static/icons/selection.json +250 -200
- package/static/icons/symbol-defs.svg +7 -3
|
@@ -20,6 +20,7 @@ export class TabPane extends RapidElement {
|
|
|
20
20
|
|
|
21
21
|
.tabs {
|
|
22
22
|
display: flex;
|
|
23
|
+
padding-left: 0.18em;
|
|
23
24
|
}
|
|
24
25
|
|
|
25
26
|
.tab {
|
|
@@ -36,6 +37,7 @@ export class TabPane extends RapidElement {
|
|
|
36
37
|
color: var(--color-text-dark);
|
|
37
38
|
--icon-color: var(--color-text-dark);
|
|
38
39
|
white-space: nowrap;
|
|
40
|
+
transition: all 100ms ease-in-out;
|
|
39
41
|
}
|
|
40
42
|
|
|
41
43
|
.tab.hidden {
|
|
@@ -74,6 +76,8 @@ export class TabPane extends RapidElement {
|
|
|
74
76
|
cursor: default;
|
|
75
77
|
box-shadow: 2px 1px 3px 2px rgba(0, 0, 0, 0.07);
|
|
76
78
|
background: #fff;
|
|
79
|
+
transform: scale(1.05) translateY(-0.05em);
|
|
80
|
+
z-index: 0;
|
|
77
81
|
}
|
|
78
82
|
|
|
79
83
|
.pane {
|
|
@@ -85,10 +89,12 @@ export class TabPane extends RapidElement {
|
|
|
85
89
|
box-shadow: 2px 5px 12px 2px rgba(0, 0, 0, 0.09),
|
|
86
90
|
3px 3px 2px 1px rgba(0, 0, 0, 0.05);
|
|
87
91
|
min-height: 0;
|
|
92
|
+
z-index: 1;
|
|
88
93
|
}
|
|
89
94
|
|
|
90
95
|
.pane.first {
|
|
91
96
|
border-top-left-radius: 0px;
|
|
97
|
+
overflow: hidden;
|
|
92
98
|
}
|
|
93
99
|
|
|
94
100
|
.badge {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabPane.js","sourceRoot":"","sources":["../../../src/tabpane/TabPane.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,MAAM,OAAO,OAAQ,SAAQ,YAAY;IAAzC;;
|
|
1
|
+
{"version":3,"file":"TabPane.js","sourceRoot":"","sources":["../../../src/tabpane/TabPane.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { Tab } from './Tab';\n\nexport class TabPane extends RapidElement {\n static get styles() {\n return css`\n :host {\n display: flex;\n flex-direction: column;\n min-height: 0;\n }\n\n .tabs {\n display: flex;\n padding-left: 0.18em;\n }\n\n .tab {\n user-select: none;\n padding: 0.5em 1em;\n margin: 0em 0em;\n cursor: pointer;\n display: flex;\n align-items: center;\n border-radius: var(--curvature);\n border-bottom-right-radius: 0px;\n border-bottom-left-radius: 0px;\n border: 0px solid rgba(0, 0, 0, 0.45);\n color: var(--color-text-dark);\n --icon-color: var(--color-text-dark);\n white-space: nowrap;\n transition: all 100ms ease-in-out;\n }\n\n .tab.hidden {\n display: none;\n }\n\n .tab temba-icon {\n }\n\n .tab .name {\n margin-left: 0.4em;\n max-width: 80px;\n margin-right: 0.4em;\n overflow: hidden;\n transition: max-width 500ms ease-in-out;\n }\n\n .tab .badge {\n margin-left: 0.4em;\n }\n\n @media (max-width: 900px) {\n .collapses .tab .name {\n max-width: 0px;\n margin: 0;\n }\n }\n\n @media (max-width: 600px) {\n .collapses .tab .badge {\n display: none;\n }\n }\n\n .tab.selected {\n cursor: default;\n box-shadow: 2px 1px 3px 2px rgba(0, 0, 0, 0.07);\n background: #fff;\n transform: scale(1.05) translateY(-0.05em);\n z-index: 0;\n }\n\n .pane {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n background: #fff;\n border-radius: var(--curvature);\n box-shadow: 2px 5px 12px 2px rgba(0, 0, 0, 0.09),\n 3px 3px 2px 1px rgba(0, 0, 0, 0.05);\n min-height: 0;\n z-index: 1;\n }\n\n .pane.first {\n border-top-left-radius: 0px;\n overflow: hidden;\n }\n\n .badge {\n }\n\n .count {\n border-radius: 99px;\n background: rgba(0, 0, 0, 0.05);\n color: rgba(0, 0, 0, 0.5);\n font-size: 0.6em;\n font-weight: 400;\n padding: 0.1em 0.4em;\n min-width: 1em;\n text-align: center;\n }\n\n .notify .count {\n background: var(--color-alert);\n color: #fff;\n }\n `;\n }\n\n @property({ type: Boolean })\n collapses = false;\n\n @property({ type: Number })\n index = 0;\n\n private handleTabClick(event: MouseEvent): void {\n this.index = parseInt(\n (event.currentTarget as HTMLDivElement).dataset.index\n );\n this.requestUpdate('index');\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n if (changedProperties.has('index')) {\n if (this.children.length > this.index) {\n for (let i = 0; i < this.children.length; i++) {\n const tab = this.children[i] as Tab;\n tab.selected = i == this.index;\n\n if (tab.selected) {\n tab.style.display = 'flex';\n } else {\n tab.style.display = 'none';\n }\n }\n }\n this.fireEvent(CustomEventType.ContextChanged);\n }\n }\n\n public getTab(index: number): Tab {\n return this.children.item(index) as Tab;\n }\n\n public render(): TemplateResult {\n const tabs: Tab[] = [];\n for (const tab of this.children) {\n tabs.push(tab as Tab);\n }\n\n return html`\n <div\n class=\"tabs ${getClasses({ tabs: true, collapses: this.collapses })}\"\n >\n ${tabs.map(\n (tab, index) => html`\n <div\n @click=${this.handleTabClick}\n data-index=${index}\n class=\"${getClasses({\n tab: true,\n selected: index == this.index,\n hidden: tab.hidden,\n notify: tab.notify,\n })}\"\n style=\"${tab.selectionColor && index == this.index\n ? `color:${tab.selectionColor};--icon-color:${tab.selectionColor};`\n : ''} ${tab.selectionBackground && index == this.index\n ? `background-color:${tab.selectionBackground};`\n : ''}\"\n >\n ${tab.icon ? html`<temba-icon name=${tab.icon} />` : null}\n <div class=\"name\">${tab.name}</div>\n ${tab.hasBadge()\n ? html`\n <div class=\"badge\">\n ${tab.count > 0\n ? html`<div class=\"count\">\n ${tab.count.toLocaleString()}\n </div>`\n : null}\n </div>\n `\n : null}\n </div>\n `\n )}\n </div>\n <div class=\"pane ${this.index === 0 ? 'first' : null}\">\n <slot></slot>\n </div>\n `;\n }\n}\n"]}
|
|
@@ -3,7 +3,7 @@ import { LitElement, html, css } from 'lit';
|
|
|
3
3
|
import { property } from 'lit/decorators';
|
|
4
4
|
import { getClasses } from '../utils';
|
|
5
5
|
// for cache busting, increase whenever the icon set changes
|
|
6
|
-
const ICON_VERSION =
|
|
6
|
+
const ICON_VERSION = 15;
|
|
7
7
|
export class VectorIcon extends LitElement {
|
|
8
8
|
constructor() {
|
|
9
9
|
super();
|
|
@@ -17,7 +17,6 @@ export class VectorIcon extends LitElement {
|
|
|
17
17
|
return css `
|
|
18
18
|
:host {
|
|
19
19
|
margin: auto;
|
|
20
|
-
--color1: var(--icon-color);
|
|
21
20
|
}
|
|
22
21
|
|
|
23
22
|
.sheet {
|
|
@@ -56,7 +55,7 @@ export class VectorIcon extends LitElement {
|
|
|
56
55
|
|
|
57
56
|
.clickable:hover {
|
|
58
57
|
cursor: pointer;
|
|
59
|
-
fill: var(--color-link-primary);
|
|
58
|
+
fill: var(--color-link-primary) !important;
|
|
60
59
|
background: rgb(255, 255, 255);
|
|
61
60
|
}
|
|
62
61
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VectorIcon.js","sourceRoot":"","sources":["../../../src/vectoricon/VectorIcon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,4DAA4D;AAC5D,MAAM,YAAY,GAAG,EAAE,CAAC;AAExB,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 { LitElement, TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators';\n\nimport { getClasses } from '../utils';\n\n// for cache busting, increase whenever the icon set changes\nconst ICON_VERSION = 15;\n\nexport class VectorIcon extends LitElement {\n @property({ type: String })\n name: string;\n\n @property({ type: String })\n prefix: string;\n\n // same as name but without implicit coloring\n @property({ type: String })\n id: string;\n\n @property({ type: Number })\n size = 1;\n\n @property({ type: Boolean })\n clickable: boolean;\n\n @property({ type: Boolean })\n circled: boolean;\n\n @property({ type: String })\n animateChange: string;\n\n @property({ type: String })\n animateClick: string;\n\n @property({ type: Number })\n animationDuration = 200;\n\n @property({ type: String })\n src = '';\n\n @property({ type: Number, attribute: false })\n steps = 2;\n\n @property({ type: Number, attribute: false })\n animationStep: number;\n\n @property({ type: String })\n easing = 'cubic-bezier(0.68, -0.55, 0.265, 1.55)';\n\n static get styles() {\n return css`\n :host {\n margin: auto;\n }\n\n .sheet {\n 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 .sheet.spin {\n transform: rotate(0deg);\n }\n\n .sheet.spin-1 {\n transform: rotate(180deg);\n }\n\n .sheet.spin-2 {\n transform: rotate(360deg);\n }\n\n .sheet.spin-3 {\n transform: rotate(0deg);\n transition-duration: 0ms !important;\n }\n\n .sheet.pulse {\n transform: scale(1);\n }\n\n .sheet.pulse-1 {\n transform: scale(1.2);\n }\n\n .clickable:hover {\n cursor: pointer;\n fill: var(--color-link-primary) !important;\n background: rgb(255, 255, 255);\n }\n\n .circled {\n background: 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 linear,\n transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n padding 150ms linear, margin 150ms linear;\n }\n\n .wrapper.clickable {\n transform: scale(1);\n }\n\n .wrapper.clickable:hover {\n --icon-circle-size: 0.35em;\n --icon-background: var(--icon-color-circle-hover);\n }\n\n .wrapper.clickable {\n padding: var(--icon-circle-size);\n margin: calc(-1 * var(--icon-circle-size));\n background: var(--icon-background);\n }\n `;\n }\n\n constructor() {\n super();\n }\n\n private lastName: string;\n\n public firstUpdated(changes: Map<string, any>) {\n super.firstUpdated(changes);\n if (changes.has('animateChange')) {\n // set our default duration if we need one\n if (!changes.has('animationDuration')) {\n this.animationDuration = this.steps * this.animationDuration;\n }\n\n if (this.animateChange === 'spin') {\n this.steps = 3;\n this.animationDuration = 400;\n this.easing = 'linear';\n }\n }\n }\n\n public handleClicked() {\n if (this.animateClick) {\n this.animationStep = 1;\n }\n }\n\n public updated(changes: Map<string, any>) {\n super.updated(changes);\n\n if (changes.has('animationStep')) {\n // if we are halfway through, change the icon\n if (this.lastName && this.animationStep >= this.steps / 2) {\n this.lastName = null;\n this.requestUpdate();\n }\n\n setTimeout(() => {\n if (this.animationStep > 0 && this.animationStep < this.steps) {\n this.animationStep++;\n } else {\n this.animationStep = 0;\n }\n }, this.animationDuration / this.steps);\n }\n\n if (changes.has('name') && this.animateChange) {\n this.lastName = changes.get('name');\n\n // our name changed, lets animate it\n if (this.lastName && this.animateChange) {\n this.animationStep = 1;\n }\n }\n }\n\n public render(): TemplateResult {\n return html`\n <div\n @click=${this.handleClicked}\n class=\"wrapper ${getClasses({\n clickable: this.clickable,\n circled: this.circled,\n animate: !!this.animateChange || !!this.animateClick,\n })}\"\n >\n <svg\n style=\"height:${this.size}em;width:${this\n .size}em;transition:transform ${this.animationDuration /\n this.steps}ms\n ${this.easing}\"\n class=\"${getClasses({\n sheet: this.src === '',\n [this.animateChange]: !!this.animateChange,\n [this.animateChange + '-' + this.animationStep]:\n this.animationStep > 0,\n [this.animateClick]: !!this.animateClick,\n [this.animateClick + '-' + this.animationStep]:\n this.animationStep > 0,\n })}\"\n >\n <use\n href=\"${this.src\n ? this.src\n : `${\n this.prefix || (window as any).static_url || '/static/'\n }icons/symbol-defs.svg?v=${ICON_VERSION}#icon-${\n this.lastName || this.name || this.id\n }`}\"\n />\n </svg>\n </div>\n `;\n }\n}\n"]}
|
package/package.json
CHANGED
package/src/anchor/Anchor.ts
CHANGED
|
@@ -5,8 +5,13 @@ export class Anchor extends LitElement {
|
|
|
5
5
|
static get styles() {
|
|
6
6
|
return css`
|
|
7
7
|
:host {
|
|
8
|
-
cursor: pointer;
|
|
9
8
|
color: var(--color-link-primary);
|
|
9
|
+
display: inline-block;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
slot:hover {
|
|
13
|
+
cursor: pointer;
|
|
14
|
+
text-decoration: underline;
|
|
10
15
|
}
|
|
11
16
|
`;
|
|
12
17
|
}
|
|
@@ -20,8 +25,6 @@ export class Anchor extends LitElement {
|
|
|
20
25
|
}
|
|
21
26
|
|
|
22
27
|
public render(): TemplateResult {
|
|
23
|
-
return html
|
|
24
|
-
<slot href="${this.href}" @click="${this.handleClick}"></slot>
|
|
25
|
-
`;
|
|
28
|
+
return html`<slot href="${this.href}" @click="${this.handleClick}"></slot>`;
|
|
26
29
|
}
|
|
27
30
|
}
|
|
@@ -6,8 +6,11 @@ export class ContactUrn extends RapidElement {
|
|
|
6
6
|
@property({ type: String })
|
|
7
7
|
urn: string;
|
|
8
8
|
|
|
9
|
+
@property({ type: String })
|
|
10
|
+
scheme: string;
|
|
11
|
+
|
|
9
12
|
@property({ type: Number })
|
|
10
|
-
size
|
|
13
|
+
size = 20;
|
|
11
14
|
|
|
12
15
|
static get styles() {
|
|
13
16
|
return css`
|
|
@@ -34,7 +37,7 @@ export class ContactUrn extends RapidElement {
|
|
|
34
37
|
}
|
|
35
38
|
|
|
36
39
|
public render(): TemplateResult {
|
|
37
|
-
const scheme = this.urn.split(':')[0];
|
|
40
|
+
const scheme = this.scheme || this.urn.split(':')[0];
|
|
38
41
|
return html`
|
|
39
42
|
<img
|
|
40
43
|
class="urn ${this.size < 20 ? 'small' : ''}"
|
package/src/list/TembaMenu.ts
CHANGED
|
@@ -17,6 +17,7 @@ export interface MenuItem {
|
|
|
17
17
|
level?: number;
|
|
18
18
|
trigger?: string;
|
|
19
19
|
href?: string;
|
|
20
|
+
show_header?: boolean;
|
|
20
21
|
items?: MenuItem[];
|
|
21
22
|
inline?: boolean;
|
|
22
23
|
type?: string;
|
|
@@ -129,6 +130,9 @@ export class TembaMenu extends RapidElement {
|
|
|
129
130
|
.level-0 > .top {
|
|
130
131
|
padding-top: var(--menu-padding);
|
|
131
132
|
background: var(--color-primary-dark);
|
|
133
|
+
display: flex;
|
|
134
|
+
flex-direction: column;
|
|
135
|
+
align-items: center;
|
|
132
136
|
}
|
|
133
137
|
|
|
134
138
|
.level-0 > .empty {
|
|
@@ -395,7 +399,7 @@ export class TembaMenu extends RapidElement {
|
|
|
395
399
|
}
|
|
396
400
|
|
|
397
401
|
.fully-collapsed .level-1 {
|
|
398
|
-
margin-left: -
|
|
402
|
+
margin-left: -208px;
|
|
399
403
|
pointer-events: none;
|
|
400
404
|
border: none;
|
|
401
405
|
overflow: hidden;
|
|
@@ -421,6 +425,54 @@ export class TembaMenu extends RapidElement {
|
|
|
421
425
|
margin-left: 0.75em;
|
|
422
426
|
margin-right: 0.75em;
|
|
423
427
|
}
|
|
428
|
+
|
|
429
|
+
.expand-icon {
|
|
430
|
+
transform: rotate(180deg);
|
|
431
|
+
--icon-color: rgba(255, 255, 255, 0.5);
|
|
432
|
+
cursor: pointer;
|
|
433
|
+
max-height: 0px;
|
|
434
|
+
overflow: hidden;
|
|
435
|
+
opacity: 0;
|
|
436
|
+
transition: all 400ms ease-in-out 400ms;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
.expand-icon:hover {
|
|
440
|
+
--icon-color: #fff;
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
.fully-collapsed .expand-icon {
|
|
444
|
+
padding-top: 0.5em;
|
|
445
|
+
max-height: 2em;
|
|
446
|
+
opacity: 1;
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
.section-header {
|
|
450
|
+
display: flex;
|
|
451
|
+
align-items: center;
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
.section-header .section {
|
|
455
|
+
flex-grow: 1;
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
.section-header temba-icon {
|
|
459
|
+
--icon-color: #ddd;
|
|
460
|
+
cursor: pointer;
|
|
461
|
+
padding-bottom: 0.5em;
|
|
462
|
+
padding-right: 0.5em;
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
.section-header temba-icon:hover {
|
|
466
|
+
--icon-color: var(--color-link-primary);
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
slot[name='header'] {
|
|
470
|
+
display: none;
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
slot[name='header'].show-header {
|
|
474
|
+
display: block;
|
|
475
|
+
}
|
|
424
476
|
`;
|
|
425
477
|
}
|
|
426
478
|
|
|
@@ -503,6 +555,10 @@ export class TembaMenu extends RapidElement {
|
|
|
503
555
|
}
|
|
504
556
|
}
|
|
505
557
|
|
|
558
|
+
public reset() {
|
|
559
|
+
this.loadItems(this.root);
|
|
560
|
+
}
|
|
561
|
+
|
|
506
562
|
public refresh(path: string[] = null) {
|
|
507
563
|
if (!path) {
|
|
508
564
|
path = [...this.selection];
|
|
@@ -524,21 +580,24 @@ export class TembaMenu extends RapidElement {
|
|
|
524
580
|
private fireNoPath(missingId: string) {
|
|
525
581
|
const item = this.getMenuItem();
|
|
526
582
|
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
583
|
+
if (item) {
|
|
584
|
+
const details = {
|
|
585
|
+
item: item.id,
|
|
586
|
+
selection: '/' + this.selection.join('/'),
|
|
587
|
+
endpoint: item.endpoint,
|
|
588
|
+
path:
|
|
589
|
+
missingId + '/' + this.pending.join('/') + document.location.search,
|
|
590
|
+
};
|
|
533
591
|
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
592
|
+
// remove any excess from our selection
|
|
593
|
+
const selection = this.selection.join('/');
|
|
594
|
+
selection.replace(details.path, '');
|
|
595
|
+
this.selection = selection.split('/');
|
|
538
596
|
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
597
|
+
this.fireCustomEvent(CustomEventType.NoPath, details);
|
|
598
|
+
this.pending = [];
|
|
599
|
+
this.requestUpdate('root');
|
|
600
|
+
}
|
|
542
601
|
}
|
|
543
602
|
|
|
544
603
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
@@ -645,7 +704,7 @@ export class TembaMenu extends RapidElement {
|
|
|
645
704
|
}
|
|
646
705
|
|
|
647
706
|
if (menuItem.endpoint) {
|
|
648
|
-
this.loadItems(menuItem,
|
|
707
|
+
this.loadItems(menuItem, true);
|
|
649
708
|
this.dispatchEvent(new Event('change'));
|
|
650
709
|
} else {
|
|
651
710
|
if (this.pending && this.pending.length > 0) {
|
|
@@ -744,6 +803,14 @@ export class TembaMenu extends RapidElement {
|
|
|
744
803
|
}
|
|
745
804
|
}
|
|
746
805
|
|
|
806
|
+
public handleExpand() {
|
|
807
|
+
this.collapsed = false;
|
|
808
|
+
}
|
|
809
|
+
|
|
810
|
+
public handleCollapse() {
|
|
811
|
+
this.collapsed = true;
|
|
812
|
+
}
|
|
813
|
+
|
|
747
814
|
public async setFocusedItem(path: string) {
|
|
748
815
|
const focusedPath = path.split('/').filter(step => !!step);
|
|
749
816
|
|
|
@@ -923,7 +990,15 @@ export class TembaMenu extends RapidElement {
|
|
|
923
990
|
|
|
924
991
|
levels.push(
|
|
925
992
|
html`<div class="level level-0 ${this.submenu ? 'hidden' : ''}">
|
|
926
|
-
<div class="top"
|
|
993
|
+
<div class="top">
|
|
994
|
+
<div class="expand-icon" @click=${this.handleExpand}>
|
|
995
|
+
<temba-icon
|
|
996
|
+
name="menu-collapse"
|
|
997
|
+
class="expand"
|
|
998
|
+
size="1.4"
|
|
999
|
+
></temba-icon>
|
|
1000
|
+
</div>
|
|
1001
|
+
</div>
|
|
927
1002
|
|
|
928
1003
|
${items
|
|
929
1004
|
.filter(item => !item.bottom)
|
|
@@ -972,7 +1047,25 @@ export class TembaMenu extends RapidElement {
|
|
|
972
1047
|
})}"
|
|
973
1048
|
>
|
|
974
1049
|
${!this.submenu
|
|
975
|
-
? html
|
|
1050
|
+
? html`
|
|
1051
|
+
<slot
|
|
1052
|
+
class="${getClasses({
|
|
1053
|
+
'show-header': selected.show_header,
|
|
1054
|
+
})}"
|
|
1055
|
+
name="header"
|
|
1056
|
+
></slot>
|
|
1057
|
+
<div class="section-header">
|
|
1058
|
+
<div class="section">${selected.name}</div>
|
|
1059
|
+
|
|
1060
|
+
${index == 0 && !this.collapsed
|
|
1061
|
+
? html`<temba-icon
|
|
1062
|
+
name="menu-collapse"
|
|
1063
|
+
size="1.1"
|
|
1064
|
+
@click=${this.handleCollapse}
|
|
1065
|
+
></temba-icon>`
|
|
1066
|
+
: null}
|
|
1067
|
+
</div>
|
|
1068
|
+
`
|
|
976
1069
|
: null}
|
|
977
1070
|
${items.map((item: MenuItem) => {
|
|
978
1071
|
if (item.inline && item.items) {
|
package/src/options/Options.ts
CHANGED
|
@@ -14,7 +14,7 @@ export class Options extends RapidElement {
|
|
|
14
14
|
static get styles() {
|
|
15
15
|
return css`
|
|
16
16
|
.options-container {
|
|
17
|
-
background: var(--color-
|
|
17
|
+
background: var(--color-options-bg);
|
|
18
18
|
user-select: none;
|
|
19
19
|
border-radius: var(--curvature-widget);
|
|
20
20
|
overflow: hidden;
|
|
@@ -186,6 +186,12 @@ export class Options extends RapidElement {
|
|
|
186
186
|
@property({ type: Number })
|
|
187
187
|
width: number;
|
|
188
188
|
|
|
189
|
+
@property({ type: Number, attribute: 'static-width' })
|
|
190
|
+
staticWidth: number;
|
|
191
|
+
|
|
192
|
+
@property({ type: Boolean, attribute: 'anchor-right' })
|
|
193
|
+
anchorRight: boolean;
|
|
194
|
+
|
|
189
195
|
@property({ type: Number })
|
|
190
196
|
marginHorizontal = 0;
|
|
191
197
|
|
|
@@ -526,7 +532,14 @@ export class Options extends RapidElement {
|
|
|
526
532
|
}
|
|
527
533
|
|
|
528
534
|
this.left = anchorBounds.left;
|
|
529
|
-
this.width =
|
|
535
|
+
this.width =
|
|
536
|
+
this.staticWidth > 0
|
|
537
|
+
? this.staticWidth
|
|
538
|
+
: anchorBounds.width - 2 - this.marginHorizontal * 2;
|
|
539
|
+
|
|
540
|
+
if (this.anchorRight) {
|
|
541
|
+
this.left = anchorBounds.right - this.width;
|
|
542
|
+
}
|
|
530
543
|
}
|
|
531
544
|
}
|
|
532
545
|
}
|
package/src/select/Select.ts
CHANGED
|
@@ -88,8 +88,7 @@ export class Select extends FormElement {
|
|
|
88
88
|
border-radius: var(--curvature-widget);
|
|
89
89
|
background: var(--color-widget-bg);
|
|
90
90
|
padding-top: 1px;
|
|
91
|
-
box-shadow:
|
|
92
|
-
0 1px 2px 0 rgba(0, 0, 0, 0.02);
|
|
91
|
+
box-shadow: var(--widget-shadow);
|
|
93
92
|
|
|
94
93
|
position: relative;
|
|
95
94
|
z-index: 2;
|
|
@@ -453,6 +452,12 @@ export class Select extends FormElement {
|
|
|
453
452
|
getValue: (option: any) => string = (option: any) =>
|
|
454
453
|
option[this.valueKey || 'value'] || option.id;
|
|
455
454
|
|
|
455
|
+
@property({ type: Number, attribute: 'option-width' })
|
|
456
|
+
optionWidth: number;
|
|
457
|
+
|
|
458
|
+
@property({ type: Boolean, attribute: 'anchor-right' })
|
|
459
|
+
anchorRight: boolean;
|
|
460
|
+
|
|
456
461
|
@property({ attribute: false })
|
|
457
462
|
shouldExclude: (option: any) => boolean;
|
|
458
463
|
|
|
@@ -1295,6 +1300,8 @@ export class Select extends FormElement {
|
|
|
1295
1300
|
.spaceSelect=${this.spaceSelect}
|
|
1296
1301
|
.nameKey=${this.nameKey}
|
|
1297
1302
|
.getName=${this.getNameInternal}
|
|
1303
|
+
static-width=${this.optionWidth}
|
|
1304
|
+
?anchor-right=${this.anchorRight}
|
|
1298
1305
|
?visible=${this.visibleOptions.length > 0}
|
|
1299
1306
|
></temba-options>
|
|
1300
1307
|
|
package/src/store/Store.ts
CHANGED
|
@@ -74,7 +74,7 @@ export class Store extends RapidElement {
|
|
|
74
74
|
|
|
75
75
|
private cache: any;
|
|
76
76
|
|
|
77
|
-
public
|
|
77
|
+
public reset() {
|
|
78
78
|
this.cache = Lru(this.max, this.ttl);
|
|
79
79
|
|
|
80
80
|
/*
|
|
@@ -172,6 +172,10 @@ export class Store extends RapidElement {
|
|
|
172
172
|
this.httpComplete = Promise.all(fetches);
|
|
173
173
|
}
|
|
174
174
|
|
|
175
|
+
public firstUpdated() {
|
|
176
|
+
this.reset();
|
|
177
|
+
}
|
|
178
|
+
|
|
175
179
|
public getLanguageCode() {
|
|
176
180
|
if (this.locale.length > 0) {
|
|
177
181
|
return this.locale[0].split('-')[0];
|
package/src/tabpane/TabPane.ts
CHANGED
|
@@ -16,6 +16,7 @@ export class TabPane extends RapidElement {
|
|
|
16
16
|
|
|
17
17
|
.tabs {
|
|
18
18
|
display: flex;
|
|
19
|
+
padding-left: 0.18em;
|
|
19
20
|
}
|
|
20
21
|
|
|
21
22
|
.tab {
|
|
@@ -32,6 +33,7 @@ export class TabPane extends RapidElement {
|
|
|
32
33
|
color: var(--color-text-dark);
|
|
33
34
|
--icon-color: var(--color-text-dark);
|
|
34
35
|
white-space: nowrap;
|
|
36
|
+
transition: all 100ms ease-in-out;
|
|
35
37
|
}
|
|
36
38
|
|
|
37
39
|
.tab.hidden {
|
|
@@ -70,6 +72,8 @@ export class TabPane extends RapidElement {
|
|
|
70
72
|
cursor: default;
|
|
71
73
|
box-shadow: 2px 1px 3px 2px rgba(0, 0, 0, 0.07);
|
|
72
74
|
background: #fff;
|
|
75
|
+
transform: scale(1.05) translateY(-0.05em);
|
|
76
|
+
z-index: 0;
|
|
73
77
|
}
|
|
74
78
|
|
|
75
79
|
.pane {
|
|
@@ -81,10 +85,12 @@ export class TabPane extends RapidElement {
|
|
|
81
85
|
box-shadow: 2px 5px 12px 2px rgba(0, 0, 0, 0.09),
|
|
82
86
|
3px 3px 2px 1px rgba(0, 0, 0, 0.05);
|
|
83
87
|
min-height: 0;
|
|
88
|
+
z-index: 1;
|
|
84
89
|
}
|
|
85
90
|
|
|
86
91
|
.pane.first {
|
|
87
92
|
border-top-left-radius: 0px;
|
|
93
|
+
overflow: hidden;
|
|
88
94
|
}
|
|
89
95
|
|
|
90
96
|
.badge {
|
|
@@ -4,7 +4,7 @@ import { property } from 'lit/decorators';
|
|
|
4
4
|
import { getClasses } from '../utils';
|
|
5
5
|
|
|
6
6
|
// for cache busting, increase whenever the icon set changes
|
|
7
|
-
const ICON_VERSION =
|
|
7
|
+
const ICON_VERSION = 15;
|
|
8
8
|
|
|
9
9
|
export class VectorIcon extends LitElement {
|
|
10
10
|
@property({ type: String })
|
|
@@ -51,7 +51,6 @@ export class VectorIcon extends LitElement {
|
|
|
51
51
|
return css`
|
|
52
52
|
:host {
|
|
53
53
|
margin: auto;
|
|
54
|
-
--color1: var(--icon-color);
|
|
55
54
|
}
|
|
56
55
|
|
|
57
56
|
.sheet {
|
|
@@ -90,7 +89,7 @@ export class VectorIcon extends LitElement {
|
|
|
90
89
|
|
|
91
90
|
.clickable:hover {
|
|
92
91
|
cursor: pointer;
|
|
93
|
-
fill: var(--color-link-primary);
|
|
92
|
+
fill: var(--color-link-primary) !important;
|
|
94
93
|
background: rgb(255, 255, 255);
|
|
95
94
|
}
|
|
96
95
|
|
|
@@ -30,7 +30,9 @@
|
|
|
30
30
|
--color-widget-bg: #fff;
|
|
31
31
|
--color-widget-bg-focused: #fff;
|
|
32
32
|
--color-widget-border: rgb(225, 225, 225);
|
|
33
|
-
|
|
33
|
+
|
|
34
|
+
--color-options-bg: var(--color-widget-bg);
|
|
35
|
+
|
|
34
36
|
/* primary colors, should be dark */
|
|
35
37
|
--color-selection: #f0f6ff;
|
|
36
38
|
|
|
@@ -38,7 +40,8 @@
|
|
|
38
40
|
--widget-box-shadow-focused-error: 0 0 0 3px rgba(var(--error-rgb), 0.3);
|
|
39
41
|
|
|
40
42
|
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
|
41
|
-
|
|
43
|
+
--shadow-widget: 0 3px 20px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.02);
|
|
44
|
+
|
|
42
45
|
/* page text, borders, widgets */
|
|
43
46
|
--color-text: #555;
|
|
44
47
|
--color-widget-text: #555;
|
package/static/icons/Read Me.txt
CHANGED
|
@@ -4,7 +4,7 @@ If you prefer using PNGs, PDFs, or CSS sprites, refer to the Preferences panel o
|
|
|
4
4
|
|
|
5
5
|
*demo.html* lists the icons that you selected. To insert your icons as inline SVGs (with the <use> element), copy the <svg> element (that contains symbol definitions) from the source of the demo.html file, below your own HTML's <body> tag. After copying this SVG, you can reference your glyphs like the following:
|
|
6
6
|
|
|
7
|
-
<svg class="icon icon-
|
|
7
|
+
<svg class="icon icon-zapier"><use xlink:href="#icon-zapier"></use></svg>
|
|
8
8
|
|
|
9
9
|
You can get this code from the SVG tab of the IcoMoon app, or by referring to the source of the demo.html file. To see how you can change the color/size of your icons using CSS, refer to the example provided in the *style.css* file.
|
|
10
10
|
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<!-- Generated by IcoMoon.io -->
|
|
2
|
+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
3
|
+
<title>menu-collapse</title>
|
|
4
|
+
<path d="M21 15.609l-1.406 1.406-5.016-5.016 5.016-5.016 1.406 1.406-3.563 3.609zM3 6h12.984v2.016h-12.984v-2.016zM3 12.984v-1.969h9.984v1.969h-9.984zM3 18v-2.016h12.984v2.016h-12.984z"></path>
|
|
5
|
+
</svg>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
<!-- Generated by IcoMoon.io -->
|
|
2
2
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
|
3
3
|
<title>zapier</title>
|
|
4
|
-
<path fill="#
|
|
4
|
+
<path fill="#474747" d="M4.8 0h22.4c2.651 0 4.8 2.149 4.8 4.8v22.4c0 2.651-2.149 4.8-4.8 4.8h-22.4c-2.651 0-4.8-2.149-4.8-4.8v-22.4c0-2.651 2.149-4.8 4.8-4.8z"></path>
|
|
5
|
+
<path fill="#fff" d="M4.8 20.8h22.4v6.4h-22.4v-6.4z"></path>
|
|
5
6
|
</svg>
|