@nyaruka/temba-components 0.37.1 → 0.39.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 +13 -0
- package/demo/index.html +3 -0
- package/demo/remote.html +3 -0
- package/dist/{135b99dc.js → 9ac0723e.js} +135 -62
- package/dist/index.js +135 -62
- 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/RapidElement.js +8 -6
- package/out-tsc/src/RapidElement.js.map +1 -1
- package/out-tsc/src/dropdown/Dropdown.js +27 -1
- package/out-tsc/src/dropdown/Dropdown.js.map +1 -1
- package/out-tsc/src/list/TembaMenu.js +116 -27
- package/out-tsc/src/list/TembaMenu.js.map +1 -1
- package/out-tsc/src/remote/Remote.js +16 -1
- package/out-tsc/src/remote/Remote.js.map +1 -1
- package/out-tsc/src/tabpane/TabPane.js +1 -0
- package/out-tsc/src/tabpane/TabPane.js.map +1 -1
- package/out-tsc/src/vectoricon/index.js +3 -0
- package/out-tsc/src/vectoricon/index.js.map +1 -1
- package/out-tsc/temba-modules.js +2 -0
- package/out-tsc/temba-modules.js.map +1 -1
- package/package.json +2 -1
- package/src/RapidElement.ts +8 -6
- package/src/dropdown/Dropdown.ts +26 -1
- package/src/list/TembaMenu.ts +126 -28
- package/src/remote/Remote.ts +13 -1
- package/src/tabpane/TabPane.ts +1 -0
- package/src/vectoricon/index.ts +3 -0
- package/temba-modules.ts +2 -0
package/dist/sw.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const
|
|
1
|
+
if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const l=e=>o(e,i),c={module:{uri:i},exports:r,require:l};t[i]=Promise.all(n.map((e=>c[e]||l(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"9ac0723e.js",revision:"fb9447c01bc44f0e5d14392d90614394"},{url:"templates/components-body.html",revision:"9dd9b0ff4467b05f60de06817c9a688c"},{url:"templates/components-head.html",revision:"67b4db9023b5b889146f73bf36cc84eb"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
|
|
2
2
|
//# sourceMappingURL=sw.js.map
|
package/dist/sw.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sw.js","sources":["../../../../../tmp/
|
|
1
|
+
{"version":3,"file":"sw.js","sources":["../../../../../tmp/8b0a5762cfabb38535d0e755a79035bd/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n {\n \"url\": \"9ac0723e.js\",\n \"revision\": \"fb9447c01bc44f0e5d14392d90614394\"\n },\n {\n \"url\": \"templates/components-body.html\",\n \"revision\": \"9dd9b0ff4467b05f60de06817c9a688c\"\n },\n {\n \"url\": \"templates/components-head.html\",\n \"revision\": \"67b4db9023b5b889146f73bf36cc84eb\"\n }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["self","skipWaiting","workbox_core_clientsClaim","workbox_precaching_precacheAndRoute","url","revision","workbox","registerRoute","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"0nBAwBAA,KAAKC,cAELC,EAAAA,eAQAC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,CAAE,GAEwBC,EAAAC,cAAC,IAAIC,EAAAA,gBAAgCC,EAAAA,wBAA2C,iBAGhFH,EAAAC,cAAC,iBAAkB,IAAIG,aAAiC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/
|
|
1
|
+
<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/9ac0723e.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.39.0"</script>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/
|
|
1
|
+
<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/9ac0723e.js" crossorigin="anonymous">
|
|
@@ -53,14 +53,16 @@ export class RapidElement extends LitElement {
|
|
|
53
53
|
return eventFire(event);
|
|
54
54
|
}
|
|
55
55
|
else {
|
|
56
|
-
const func = new Function('event', `
|
|
57
|
-
with(
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
handler
|
|
56
|
+
const func = new Function('event', `
|
|
57
|
+
with(document) {
|
|
58
|
+
with(this) {
|
|
59
|
+
let handler = ${ele.getAttribute('-' + event.type)};
|
|
60
|
+
if(typeof handler === 'function') {
|
|
61
|
+
handler(event);
|
|
62
|
+
}
|
|
61
63
|
}
|
|
62
64
|
}
|
|
63
|
-
|
|
65
|
+
`);
|
|
64
66
|
return func.call(ele, event);
|
|
65
67
|
}
|
|
66
68
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RapidElement.js","sourceRoot":"","sources":["../../src/RapidElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AASjC,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QACU,SAAI,GAA2C,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"RapidElement.js","sourceRoot":"","sources":["../../src/RapidElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement } from 'lit';\nimport { CustomEventType } from './interfaces';\n\nexport interface EventHandler {\n event: string;\n method: EventListener;\n isDocument?: boolean;\n}\n\nexport class RapidElement extends LitElement {\n private eles: { [selector: string]: HTMLDivElement } = {};\n public getEventHandlers(): EventHandler[] {\n return [];\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n for (const handler of this.getEventHandlers()) {\n if (handler.isDocument) {\n document.addEventListener(handler.event, handler.method.bind(this));\n } else {\n this.addEventListener(handler.event, handler.method.bind(this));\n }\n }\n }\n\n disconnectedCallback() {\n for (const handler of this.getEventHandlers()) {\n if (handler.isDocument) {\n document.removeEventListener(handler.event, handler.method);\n } else {\n this.removeEventListener(handler.event, handler.method);\n }\n }\n super.disconnectedCallback();\n }\n\n public fireEvent(type: string): any {\n return this.dispatchEvent(\n new Event(type, {\n bubbles: true,\n composed: true,\n })\n );\n }\n\n public fireCustomEvent(type: CustomEventType, detail: any = {}): any {\n const event = new CustomEvent(type, {\n detail,\n bubbles: true,\n composed: true,\n });\n\n return this.dispatchEvent(event);\n }\n\n public dispatchEvent(event: any): any {\n super.dispatchEvent(event);\n const ele = event.target;\n if (ele) {\n // lookup events with - prefix and try to invoke them\n const eventFire = (ele as any)['-' + event.type];\n if (eventFire) {\n return eventFire(event);\n } else {\n const func = new Function(\n 'event',\n `\n with(document) {\n with(this) {\n let handler = ${ele.getAttribute('-' + event.type)};\n if(typeof handler === 'function') { \n handler(event);\n }\n }\n }\n `\n );\n return func.call(ele, event);\n }\n }\n }\n\n public closestElement(selector: string, base: Element = this) {\n function __closestFrom(el: Element | Window | Document): Element {\n if (!el || el === document || el === window) return null;\n if ((el as any).assignedSlot) el = (el as any).assignedSlot;\n const found = (el as Element).closest(selector);\n return found\n ? found\n : __closestFrom(((el as Element).getRootNode() as ShadowRoot).host);\n }\n return __closestFrom(base);\n }\n\n public getDiv(selector: string) {\n let ele = this.eles[selector];\n if (ele) {\n return ele;\n }\n\n ele = this.shadowRoot.querySelector(selector);\n if (ele) {\n this.eles[selector] = ele;\n }\n return ele;\n }\n}\n"]}
|
|
@@ -11,6 +11,7 @@ export class Dropdown extends RapidElement {
|
|
|
11
11
|
this.arrowOffset = this.arrowSize * 2;
|
|
12
12
|
this.offsetX = 0;
|
|
13
13
|
this.offsetY = 0;
|
|
14
|
+
this.mask = false;
|
|
14
15
|
}
|
|
15
16
|
static get styles() {
|
|
16
17
|
return css `
|
|
@@ -30,7 +31,7 @@ export class Dropdown extends RapidElement {
|
|
|
30
31
|
.dropdown {
|
|
31
32
|
position: absolute;
|
|
32
33
|
opacity: 0;
|
|
33
|
-
z-index:
|
|
34
|
+
z-index: 2;
|
|
34
35
|
pointer-events: none;
|
|
35
36
|
padding: 0;
|
|
36
37
|
border-radius: var(--curvature);
|
|
@@ -64,6 +65,24 @@ export class Dropdown extends RapidElement {
|
|
|
64
65
|
pointer-events: auto;
|
|
65
66
|
transform: translateY(0.5em);
|
|
66
67
|
}
|
|
68
|
+
|
|
69
|
+
.mask {
|
|
70
|
+
position: absolute;
|
|
71
|
+
left: 0;
|
|
72
|
+
top: 0;
|
|
73
|
+
right: 0;
|
|
74
|
+
bottom: 0;
|
|
75
|
+
background: rgba(0, 0, 0, 0.7);
|
|
76
|
+
opacity: 0;
|
|
77
|
+
transition: opacity var(--transition-speed) ease-in-out;
|
|
78
|
+
z-index: 1;
|
|
79
|
+
pointer-events: none;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.mask.open {
|
|
83
|
+
opacity: 1;
|
|
84
|
+
pointer-events: auto;
|
|
85
|
+
}
|
|
67
86
|
`;
|
|
68
87
|
}
|
|
69
88
|
firstUpdated(props) {
|
|
@@ -120,6 +139,10 @@ export class Dropdown extends RapidElement {
|
|
|
120
139
|
}
|
|
121
140
|
render() {
|
|
122
141
|
return html `
|
|
142
|
+
${this.mask
|
|
143
|
+
? html `<div class="mask ${this.open ? 'open' : ''}" />`
|
|
144
|
+
: null}
|
|
145
|
+
|
|
123
146
|
<div class="wrapper ${this.open ? 'open' : ''}">
|
|
124
147
|
<slot
|
|
125
148
|
name="toggle"
|
|
@@ -158,4 +181,7 @@ __decorate([
|
|
|
158
181
|
__decorate([
|
|
159
182
|
property({ type: Number })
|
|
160
183
|
], Dropdown.prototype, "offsetY", void 0);
|
|
184
|
+
__decorate([
|
|
185
|
+
property({ type: Boolean })
|
|
186
|
+
], Dropdown.prototype, "mask", void 0);
|
|
161
187
|
//# sourceMappingURL=Dropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/dropdown/Dropdown.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,OAAO,QAAS,SAAQ,YAAY;IAA1C;;
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/dropdown/Dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\n\nexport class Dropdown extends RapidElement {\n static get styles() {\n return css`\n .wrapper {\n position: relative;\n }\n\n .toggle {\n cursor: pointer;\n }\n\n .dropdown-wrapper {\n position: relative;\n overflow: auto;\n }\n\n .dropdown {\n position: absolute;\n opacity: 0;\n z-index: 2;\n pointer-events: none;\n padding: 0;\n border-radius: var(--curvature);\n background: #fff;\n transform: translateY(-1em);\n transition: all calc(0.6 * var(--transition-speed)) linear;\n user-select: none;\n margin-top: 0px;\n margin-left: 0px;\n box-shadow: var(--dropdown-shadow);\n }\n\n .dropdown:focus {\n outline: none;\n }\n\n .arrow {\n content: '';\n width: 0px;\n height: 0;\n top: -6px;\n z-index: 10;\n position: absolute;\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-bottom: 6px solid white;\n }\n\n .open .dropdown {\n opacity: 1;\n pointer-events: auto;\n transform: translateY(0.5em);\n }\n\n .mask {\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.7);\n opacity: 0;\n transition: opacity var(--transition-speed) ease-in-out;\n z-index: 1;\n pointer-events: none;\n }\n\n .mask.open {\n opacity: 1;\n pointer-events: auto;\n }\n `;\n }\n\n @property({ type: Boolean })\n open = false;\n\n @property({ type: String, attribute: 'drop_align' })\n dropAlign = 'left';\n\n @property({ type: Number })\n arrowSize = 6;\n\n @property({ type: Number })\n arrowOffset = this.arrowSize * 2;\n\n @property({ type: Number })\n offsetX = 0;\n\n @property({ type: Number })\n offsetY = 0;\n\n @property({ type: Boolean })\n mask = false;\n\n public firstUpdated(props: any) {\n super.firstUpdated(props);\n\n const arrow = this.shadowRoot.querySelector('.arrow') as HTMLDivElement;\n arrow.style.borderWidth = this.arrowSize + 'px';\n arrow.style.top = '-' + this.arrowSize + 'px';\n\n if (this.arrowOffset < 0) {\n arrow.style.right = Math.abs(this.arrowOffset) + 'px';\n } else {\n arrow.style.left = this.arrowOffset + 'px';\n }\n\n const dropdown = this.shadowRoot.querySelector(\n '.dropdown'\n ) as HTMLDivElement;\n\n dropdown.addEventListener('blur', () => {\n // we nest this to deal with clicking the toggle to close\n // as we don't want it to toggle an immediate open, probably\n // a better way to deal with this\n window.setTimeout(() => {\n this.open = false;\n // blur our host element too\n (this.shadowRoot.host as HTMLDivElement).blur();\n }, 200);\n });\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('offsetY') || changedProperties.has('offsetX')) {\n const dropdown = this.shadowRoot.querySelector(\n '.dropdown'\n ) as HTMLDivElement;\n\n dropdown.style.marginTop = this.offsetY + 'px';\n if (dropdown.offsetLeft + dropdown.clientWidth > window.outerWidth) {\n dropdown.style.marginLeft =\n '-' + (dropdown.clientWidth - this.clientWidth - this.offsetX) + 'px';\n } else {\n dropdown.style.marginLeft = this.offsetX + 'px';\n }\n }\n\n if (changedProperties.has('open')) {\n if (this.open) {\n this.classList.add('open');\n } else {\n this.classList.remove('open');\n }\n }\n }\n\n public handleToggleClicked(): void {\n if (!this.open) {\n this.open = true;\n\n const dropdown = this.shadowRoot.querySelector(\n '.dropdown'\n ) as HTMLDivElement;\n dropdown.focus();\n }\n }\n\n public render(): TemplateResult {\n return html`\n ${this.mask\n ? html`<div class=\"mask ${this.open ? 'open' : ''}\" />`\n : null}\n\n <div class=\"wrapper ${this.open ? 'open' : ''}\">\n <slot\n name=\"toggle\"\n class=\"toggle\"\n @click=\"${this.handleToggleClicked}\"\n ></slot>\n <div\n class=\"dropdown\"\n tabindex=\"0\"\n style=\"${this.dropAlign == 'right' ? 'right:0' : ''}\"\n >\n <div class=\"arrow\"></div>\n <div class=\"dropdown-wrapper\">\n <slot name=\"dropdown\" tabindex=\"1\"></slot>\n </div>\n </div>\n </div>\n `;\n }\n}\n"]}
|
|
@@ -5,6 +5,7 @@ import { CustomEventType } from '../interfaces';
|
|
|
5
5
|
import { RapidElement } from '../RapidElement';
|
|
6
6
|
import { fetchResults, getClasses } from '../utils';
|
|
7
7
|
import { Icon } from '../vectoricon';
|
|
8
|
+
import ColorHash from 'color-hash';
|
|
8
9
|
const findItem = (items, id) => {
|
|
9
10
|
const search = items || [];
|
|
10
11
|
const index = search.findIndex((item) => {
|
|
@@ -31,7 +32,6 @@ export class TembaMenu extends RapidElement {
|
|
|
31
32
|
height: 8px;
|
|
32
33
|
left: 14px;
|
|
33
34
|
bottom: -1px;
|
|
34
|
-
z-index: 10000;
|
|
35
35
|
border-radius: 99px;
|
|
36
36
|
border: 1px solid rgb(255, 255, 255);
|
|
37
37
|
position: relative;
|
|
@@ -90,7 +90,8 @@ export class TembaMenu extends RapidElement {
|
|
|
90
90
|
.submenu {
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
-
.level-0 > .item
|
|
93
|
+
.level-0 > .item,
|
|
94
|
+
.level-0 > temba-dropdown > div[slot='toggle'] > .avatar {
|
|
94
95
|
background: var(--color-primary-dark);
|
|
95
96
|
--icon-color: rgba(255, 255, 255, 0.7);
|
|
96
97
|
font-size: 1em;
|
|
@@ -115,10 +116,40 @@ export class TembaMenu extends RapidElement {
|
|
|
115
116
|
background: var(--color-primary-dark);
|
|
116
117
|
}
|
|
117
118
|
|
|
118
|
-
|
|
119
|
+
temba-dropdown {
|
|
120
|
+
z-index: 1;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
temba-dropdown > div[slot='dropdown'] .avatar > .details {
|
|
124
|
+
margin-left: 0.75em;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.level-0 > .item > .details,
|
|
128
|
+
.level-0 > temba-dropdown > div[slot='toggle'] > .avatar > .details {
|
|
119
129
|
display: none !important;
|
|
120
130
|
}
|
|
121
131
|
|
|
132
|
+
.avatar {
|
|
133
|
+
align-items: center;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.avatar-circle {
|
|
137
|
+
box-shadow: 0 0 0px 3px rgba(0, 0, 0, 0.075);
|
|
138
|
+
display: flex;
|
|
139
|
+
margin: 0.4em 0em;
|
|
140
|
+
height: 2em;
|
|
141
|
+
width: 2em;
|
|
142
|
+
flex-direction: row;
|
|
143
|
+
align-items: center;
|
|
144
|
+
color: #fff;
|
|
145
|
+
border-radius: 100%;
|
|
146
|
+
font-weight: 400;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
temba-dropdown > div[slot='dropdown'] .avatar .avatar-circle {
|
|
150
|
+
font-size: 0.7em;
|
|
151
|
+
}
|
|
152
|
+
|
|
122
153
|
.level-0.expanding {
|
|
123
154
|
}
|
|
124
155
|
|
|
@@ -146,7 +177,6 @@ export class TembaMenu extends RapidElement {
|
|
|
146
177
|
border-radius: var(--curvature);
|
|
147
178
|
display: flex;
|
|
148
179
|
min-width: 12em;
|
|
149
|
-
max-width: 12em;
|
|
150
180
|
}
|
|
151
181
|
|
|
152
182
|
.item > temba-icon {
|
|
@@ -366,10 +396,6 @@ export class TembaMenu extends RapidElement {
|
|
|
366
396
|
margin-left: 0.3rem;
|
|
367
397
|
}
|
|
368
398
|
|
|
369
|
-
.fully-collapsed .level-0 {
|
|
370
|
-
z-index: 1;
|
|
371
|
-
}
|
|
372
|
-
|
|
373
399
|
.fully-collapsed .level-1 {
|
|
374
400
|
margin-left: -208px;
|
|
375
401
|
pointer-events: none;
|
|
@@ -473,7 +499,7 @@ export class TembaMenu extends RapidElement {
|
|
|
473
499
|
}
|
|
474
500
|
const isSelected = this.isSelected(menuItem);
|
|
475
501
|
const isChildSelected = isSelected && this.selection.length > menuItem.level + 1;
|
|
476
|
-
|
|
502
|
+
let icon = menuItem.icon
|
|
477
503
|
? html `<temba-icon
|
|
478
504
|
size="${menuItem.level === 0 ? '1.5' : '1'}"
|
|
479
505
|
name="${menuItem.icon}"
|
|
@@ -496,12 +522,16 @@ export class TembaMenu extends RapidElement {
|
|
|
496
522
|
['menu-' + menuItem.id]: true,
|
|
497
523
|
'child-selected': isChildSelected,
|
|
498
524
|
selected: isSelected,
|
|
499
|
-
item:
|
|
525
|
+
item: !(menuItem.avatar && menuItem.level === 0),
|
|
526
|
+
avatar: !!menuItem.avatar,
|
|
500
527
|
inline: menuItem.inline,
|
|
501
528
|
expanding: this.expanding && this.expanding === menuItem.id,
|
|
502
529
|
expanded: this.isExpanded(menuItem),
|
|
503
|
-
iconless: !icon && !collapsedIcon,
|
|
530
|
+
iconless: !icon && !collapsedIcon && !menuItem.avatar,
|
|
504
531
|
});
|
|
532
|
+
if (menuItem.avatar) {
|
|
533
|
+
icon = this.renderAvatar(menuItem.avatar);
|
|
534
|
+
}
|
|
505
535
|
const item = html ` <div
|
|
506
536
|
class="item-top ${isSelected ? 'selected' : null} "
|
|
507
537
|
></div>
|
|
@@ -514,12 +544,14 @@ export class TembaMenu extends RapidElement {
|
|
|
514
544
|
}}
|
|
515
545
|
>
|
|
516
546
|
${menuItem.level === 0
|
|
517
|
-
?
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
547
|
+
? menuItem.avatar
|
|
548
|
+
? icon
|
|
549
|
+
: html `<temba-tip
|
|
550
|
+
style="display:flex;"
|
|
551
|
+
text="${menuItem.name}"
|
|
552
|
+
position="right"
|
|
553
|
+
>${icon}</temba-tip
|
|
554
|
+
>`
|
|
523
555
|
: html `${icon}${collapsedIcon}`}
|
|
524
556
|
|
|
525
557
|
<div class="details" style="flex-grow:1;display:flex">
|
|
@@ -551,6 +583,24 @@ export class TembaMenu extends RapidElement {
|
|
|
551
583
|
</div>
|
|
552
584
|
|
|
553
585
|
<div class="item-bottom ${isSelected ? 'selected' : null}"></div>`;
|
|
586
|
+
if (menuItem.popup) {
|
|
587
|
+
return html `
|
|
588
|
+
<temba-dropdown offsetx="10" arrowoffset="8" mask>
|
|
589
|
+
<div slot="toggle">${item}</div>
|
|
590
|
+
<div
|
|
591
|
+
slot="dropdown"
|
|
592
|
+
style="width:300px;overflow:hidden;padding-bottom:0.5em"
|
|
593
|
+
>
|
|
594
|
+
<div style="max-height:400px;overflow-y:auto">
|
|
595
|
+
${(menuItem.items || []).map((child) => {
|
|
596
|
+
child.level = menuItem.level + 1;
|
|
597
|
+
return this.renderMenuItem(child, menuItem);
|
|
598
|
+
})}
|
|
599
|
+
</div>
|
|
600
|
+
</div>
|
|
601
|
+
</temba-dropdown>
|
|
602
|
+
`;
|
|
603
|
+
}
|
|
554
604
|
return item;
|
|
555
605
|
};
|
|
556
606
|
}
|
|
@@ -680,6 +730,16 @@ export class TembaMenu extends RapidElement {
|
|
|
680
730
|
}
|
|
681
731
|
}
|
|
682
732
|
handleItemClicked(event, menuItem, parent = null) {
|
|
733
|
+
this.fireCustomEvent(CustomEventType.ButtonClicked, {
|
|
734
|
+
item: menuItem,
|
|
735
|
+
parent,
|
|
736
|
+
});
|
|
737
|
+
if (parent && parent.popup) {
|
|
738
|
+
return;
|
|
739
|
+
}
|
|
740
|
+
if (menuItem.popup) {
|
|
741
|
+
return;
|
|
742
|
+
}
|
|
683
743
|
if (parent && parent.inline) {
|
|
684
744
|
this.handleItemClicked(null, parent);
|
|
685
745
|
}
|
|
@@ -690,14 +750,6 @@ export class TembaMenu extends RapidElement {
|
|
|
690
750
|
event.preventDefault();
|
|
691
751
|
event.stopPropagation();
|
|
692
752
|
}
|
|
693
|
-
if (menuItem.type == 'modax-button') {
|
|
694
|
-
this.fireCustomEvent(CustomEventType.ButtonClicked, {
|
|
695
|
-
title: menuItem.name,
|
|
696
|
-
href: menuItem.href,
|
|
697
|
-
on_submit: menuItem.on_submit,
|
|
698
|
-
});
|
|
699
|
-
return;
|
|
700
|
-
}
|
|
701
753
|
if (menuItem.trigger) {
|
|
702
754
|
new Function(menuItem.trigger)();
|
|
703
755
|
}
|
|
@@ -717,7 +769,11 @@ export class TembaMenu extends RapidElement {
|
|
|
717
769
|
this.selection.splice(menuItem.level, this.selection.length - menuItem.level, menuItem.vanity_id || menuItem.id);
|
|
718
770
|
}
|
|
719
771
|
if (menuItem.endpoint) {
|
|
720
|
-
this.loadItems(menuItem,
|
|
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
|
+
}
|
|
721
777
|
}
|
|
722
778
|
else {
|
|
723
779
|
if (this.pending && this.pending.length > 0) {
|
|
@@ -728,18 +784,25 @@ export class TembaMenu extends RapidElement {
|
|
|
728
784
|
const nextItem = findItem(item.items, nextId).item;
|
|
729
785
|
if (nextItem) {
|
|
730
786
|
this.handleItemClicked(null, nextItem);
|
|
787
|
+
return;
|
|
731
788
|
}
|
|
732
789
|
else {
|
|
733
790
|
this.fireNoPath(nextId);
|
|
791
|
+
this.requestUpdate('root');
|
|
792
|
+
return;
|
|
734
793
|
}
|
|
735
794
|
}
|
|
736
795
|
else {
|
|
737
796
|
this.fireNoPath(nextId);
|
|
797
|
+
this.requestUpdate('root');
|
|
798
|
+
return;
|
|
738
799
|
}
|
|
739
800
|
}
|
|
740
801
|
this.requestUpdate('root');
|
|
741
802
|
}
|
|
742
|
-
this.
|
|
803
|
+
if (this.pending.length == 0 || this.getMenuItem().href) {
|
|
804
|
+
this.dispatchEvent(new Event('change'));
|
|
805
|
+
}
|
|
743
806
|
}
|
|
744
807
|
}
|
|
745
808
|
scrollSelectedIntoView() {
|
|
@@ -853,6 +916,32 @@ export class TembaMenu extends RapidElement {
|
|
|
853
916
|
const expanded = !!this.selection.find(id => id === menuItem.vanity_id || menuItem.id);
|
|
854
917
|
return expanded;
|
|
855
918
|
}
|
|
919
|
+
renderAvatar(avatar) {
|
|
920
|
+
const hash = new ColorHash();
|
|
921
|
+
const color = hash.hex(avatar);
|
|
922
|
+
let second = avatar.indexOf(' ') + 1;
|
|
923
|
+
if (second < 1) {
|
|
924
|
+
second = avatar.length > 1 ? 1 : 0;
|
|
925
|
+
}
|
|
926
|
+
let name = avatar.substring(0, 1) + avatar.substring(second, second + 1);
|
|
927
|
+
name = name.toUpperCase();
|
|
928
|
+
return html `
|
|
929
|
+
<div
|
|
930
|
+
style="border: 0px solid red; display:flex; flex-direction: column; align-items:center;"
|
|
931
|
+
>
|
|
932
|
+
<div
|
|
933
|
+
class="avatar-circle"
|
|
934
|
+
style="border: 0px solid rgba(0,0,0,.1);background:${color}"
|
|
935
|
+
>
|
|
936
|
+
<div
|
|
937
|
+
style="border: 0px solid red; display:flex; flex-direction: column; align-items:center;flex-grow:1"
|
|
938
|
+
>
|
|
939
|
+
<div style="border:0px solid blue;">${name}</div>
|
|
940
|
+
</div>
|
|
941
|
+
</div>
|
|
942
|
+
</div>
|
|
943
|
+
`;
|
|
944
|
+
}
|
|
856
945
|
render() {
|
|
857
946
|
if (!this.root || !this.root.items) {
|
|
858
947
|
return html `<temba-loading
|