npm - @nyaruka/temba-components - Versions diffs - 0.41.3 → 0.41.5 - Mend

@nyaruka/temba-components 0.41.3 → 0.41.5

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.

Files changed (14) hide show

package/CHANGELOG.md +12 -0
package/dist/{563aa8dc.js → 641a9920.js} +8 -5
package/dist/index.js +8 -5
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/events.js +1 -0
package/out-tsc/src/contacts/events.js.map +1 -1
package/out-tsc/src/list/TembaMenu.js +16 -2
package/out-tsc/src/list/TembaMenu.js.map +1 -1
package/package.json +1 -1
package/src/contacts/events.ts +1 -0
package/src/list/TembaMenu.ts +17 -2

package/CHANGELOG.md CHANGED Viewed

@@ -4,8 +4,20 @@ All notable changes to this project will be documented in this file. Dates are d
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
+#### [v0.41.5](https://github.com/nyaruka/temba-components/compare/v0.41.4...v0.41.5)
+- Show item as pressed in menu [`#269`](https://github.com/nyaruka/temba-components/pull/269)
+#### [v0.41.4](https://github.com/nyaruka/temba-components/compare/v0.41.3...v0.41.4)
+> 22 February 2023
+- For wrapping for event descriptions to deal with urls [`#268`](https://github.com/nyaruka/temba-components/pull/268)
 #### [v0.41.3](https://github.com/nyaruka/temba-components/compare/v0.41.2...v0.41.3)
+> 22 February 2023
 - Make async refresh wait for http when working through selection [`#267`](https://github.com/nyaruka/temba-components/pull/267)
 #### [v0.41.2](https://github.com/nyaruka/temba-components/compare/v0.41.1...v0.41.2)

package/dist/{563aa8dc.js → 641a9920.js} RENAMED Viewed

@@ -2324,6 +2324,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
     .event .description {
       flex-grow: 1;
+      word-break: break-all;
     }
     .msg-summary {
@@ -3495,7 +3496,8 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         --icon-color: var(--color-text-dark);
       }
-      .item.selected {
+      .item.selected,
+      .item.pressed {
         background: var(--color-selection);
         color: var(--color-primary-dark);
         --icon-color: var(--color-primary-dark);
@@ -3887,14 +3889,15 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
           size="${0===t.level?"1.5":"1"}"
           name="${t.collapsed_icon}"
           class="collapse-icon"
-        ></temba-icon>`:null,r=_t({["menu-"+t.id]:!0,"child-selected":n,selected:i,item:!(t.avatar&&0===t.level),avatar:!!t.avatar,inline:t.inline,expanding:this.expanding&&this.expanding===t.id,expanded:this.isExpanded(t),iconless:!o&&!s&&!t.avatar});t.avatar&&(o=this.renderAvatar(t.avatar));const a=D` <div
+        ></temba-icon>`:null,r=_t({["menu-"+t.id]:!0,"child-selected":n,selected:i,item:!(t.avatar&&0===t.level),avatar:!!t.avatar,inline:t.inline,expanding:this.expanding&&this.expanding===t.id,expanded:this.isExpanded(t),iconless:!o&&!s&&!t.avatar,pressed:this.pressedItem&&this.pressedItem.id==t.id});t.avatar&&(o=this.renderAvatar(t.avatar));const a=D` <div
         class="item-top ${i?"selected":null} "
       ></div>
       <div
         id="menu-${t.id}"
         class="${r}"
-        @click=${i=>{this.handleItemClicked(i,t,e)}}
+        @click=${i=>{this.pressedItem=null,this.handleItemClicked(i,t,e)}}
+        @mousedown=${()=>{t.level>0&&(this.pressedItem=t),console.log("pressing",t)}}
+        @mouseleave=${()=>{this.pressedItem=null}}
       >
         ${0===t.level?t.avatar?o:D`<temba-tip
                 style="display:flex;"
@@ -3996,7 +3999,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       class="${_t({root:!0,"fully-collapsed":this.collapsed})}"
     >
       ${e}
-    </div>`;return D`${i}`}}t([st({type:Boolean})],el.prototype,"wraps",void 0),t([st({type:Boolean})],el.prototype,"wait",void 0),t([st({type:String})],el.prototype,"endpoint",void 0),t([st({type:String})],el.prototype,"expanding",void 0),t([st({type:String})],el.prototype,"value",void 0),t([st({type:String})],el.prototype,"submenu",void 0),t([st({type:Boolean})],el.prototype,"collapsed",void 0);class il extends et{static get styles(){return r`
+    </div>`;return D`${i}`}}t([st({type:Boolean})],el.prototype,"wraps",void 0),t([st({type:Boolean})],el.prototype,"wait",void 0),t([st({type:String})],el.prototype,"endpoint",void 0),t([st({type:String})],el.prototype,"expanding",void 0),t([st({type:String})],el.prototype,"value",void 0),t([st({type:String})],el.prototype,"submenu",void 0),t([st({type:Boolean})],el.prototype,"collapsed",void 0),t([st({type:Object})],el.prototype,"pressedItem",void 0);class il extends et{static get styles(){return r`
       :host {
         color: var(--color-link-primary);
         display: inline-block;

package/dist/index.js CHANGED Viewed

@@ -2324,6 +2324,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
     .event .description {
       flex-grow: 1;
+      word-break: break-all;
     }
     .msg-summary {
@@ -3495,7 +3496,8 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         --icon-color: var(--color-text-dark);
       }
-      .item.selected {
+      .item.selected,
+      .item.pressed {
         background: var(--color-selection);
         color: var(--color-primary-dark);
         --icon-color: var(--color-primary-dark);
@@ -3887,14 +3889,15 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
           size="${0===t.level?"1.5":"1"}"
           name="${t.collapsed_icon}"
           class="collapse-icon"
-        ></temba-icon>`:null,r=_t({["menu-"+t.id]:!0,"child-selected":n,selected:i,item:!(t.avatar&&0===t.level),avatar:!!t.avatar,inline:t.inline,expanding:this.expanding&&this.expanding===t.id,expanded:this.isExpanded(t),iconless:!o&&!s&&!t.avatar});t.avatar&&(o=this.renderAvatar(t.avatar));const a=D` <div
+        ></temba-icon>`:null,r=_t({["menu-"+t.id]:!0,"child-selected":n,selected:i,item:!(t.avatar&&0===t.level),avatar:!!t.avatar,inline:t.inline,expanding:this.expanding&&this.expanding===t.id,expanded:this.isExpanded(t),iconless:!o&&!s&&!t.avatar,pressed:this.pressedItem&&this.pressedItem.id==t.id});t.avatar&&(o=this.renderAvatar(t.avatar));const a=D` <div
         class="item-top ${i?"selected":null} "
       ></div>
       <div
         id="menu-${t.id}"
         class="${r}"
-        @click=${i=>{this.handleItemClicked(i,t,e)}}
+        @click=${i=>{this.pressedItem=null,this.handleItemClicked(i,t,e)}}
+        @mousedown=${()=>{t.level>0&&(this.pressedItem=t),console.log("pressing",t)}}
+        @mouseleave=${()=>{this.pressedItem=null}}
       >
         ${0===t.level?t.avatar?o:D`<temba-tip
                 style="display:flex;"
@@ -3996,7 +3999,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       class="${_t({root:!0,"fully-collapsed":this.collapsed})}"
     >
       ${e}
-    </div>`;return D`${i}`}}t([st({type:Boolean})],el.prototype,"wraps",void 0),t([st({type:Boolean})],el.prototype,"wait",void 0),t([st({type:String})],el.prototype,"endpoint",void 0),t([st({type:String})],el.prototype,"expanding",void 0),t([st({type:String})],el.prototype,"value",void 0),t([st({type:String})],el.prototype,"submenu",void 0),t([st({type:Boolean})],el.prototype,"collapsed",void 0);class il extends et{static get styles(){return r`
+    </div>`;return D`${i}`}}t([st({type:Boolean})],el.prototype,"wraps",void 0),t([st({type:Boolean})],el.prototype,"wait",void 0),t([st({type:String})],el.prototype,"endpoint",void 0),t([st({type:String})],el.prototype,"expanding",void 0),t([st({type:String})],el.prototype,"value",void 0),t([st({type:String})],el.prototype,"submenu",void 0),t([st({type:Boolean})],el.prototype,"collapsed",void 0),t([st({type:Object})],el.prototype,"pressedItem",void 0);class il extends et{static get styles(){return r`
       :host {
         color: var(--color-link-primary);
         display: inline-block;

package/dist/sw.js CHANGED Viewed

@@ -1,2 +1,2 @@
-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 c=e=>o(e,i),d={module:{uri:i},exports:r,require:c};t[i]=Promise.all(n.map((e=>d[e]||c(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"563aa8dc.js",revision:"28b61cb38e46d4d1d6e766e58319ac01"},{url:"templates/components-body.html",revision:"f878ccc2754c09e6f76caf3f0c9d5d90"},{url:"templates/components-head.html",revision:"5aed75503b7aabb1f129e61549dd540a"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
+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 d=e=>o(e,i),l={module:{uri:i},exports:r,require:d};t[i]=Promise.all(n.map((e=>l[e]||d(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"641a9920.js",revision:"a9ab076e68fada1b5167d3fd8655872d"},{url:"templates/components-body.html",revision:"483ff557e54bde9f4461ea57f9fd5964"},{url:"templates/components-head.html",revision:"2db394aaf36d121fdf8b3126b7157e2b"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
 //# sourceMappingURL=sw.js.map

package/dist/sw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sw.js","sources":["../../../../../tmp/~~2fae83b727a243b0d0751b036a520d34~~/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\": \"~~563aa8dc~~.js\",\n \"revision\": \"~~28b61cb38e46d4d1d6e766e58319ac01~~\"\n },\n {\n \"url\": \"templates/components-body.html\",\n \"revision\": \"~~f878ccc2754c09e6f76caf3f0c9d5d90~~\"\n },\n {\n \"url\": \"templates/components-head.html\",\n \"revision\": \"~~5aed75503b7aabb1f129e61549dd540a~~\"\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	+ {"version":3,"file":"sw.js","sources":["../../../../../tmp/9ff5bed9f77ac866fe17700fa69c4857/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\": \"641a9920.js\",\n \"revision\": \"a9ab076e68fada1b5167d3fd8655872d\"\n },\n {\n \"url\": \"templates/components-body.html\",\n \"revision\": \"483ff557e54bde9f4461ea57f9fd5964\"\n },\n {\n \"url\": \"templates/components-head.html\",\n \"revision\": \"2db394aaf36d121fdf8b3126b7157e2b\"\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"}

package/dist/templates/components-body.html CHANGED Viewed

	@@ -1 +1 @@
1	- <script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/~~563aa8dc~~.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.41.3"</script>
1	+ <script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/641a9920.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.41.5"</script>

package/dist/templates/components-head.html CHANGED Viewed

	@@ -1 +1 @@
1	- <link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/~~563aa8dc~~.js" crossorigin="anonymous">
1	+ <link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/641a9920.js" crossorigin="anonymous">

package/out-tsc/src/contacts/events.js CHANGED Viewed

@@ -304,6 +304,7 @@ export const getEventStyles = () => {
     .event .description {
       flex-grow: 1;
+      word-break: break-all;
     }
     .msg-summary {

package/out-tsc/src/contacts/events.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"events.js","sourceRoot":"","sources":["../../../src/contacts/events.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { Msg, ObjectReference, User } from '../interfaces';\nimport { getClasses, oxford, oxfordFn, oxfordNamed, timeSince } from '../utils';\nimport { Icon } from '../vectoricon';\nimport { getDisplayName } from './helpers';\n\nexport const getEventStyles = () => {\n return css`\n .grouping {\n margin-top: 1em;\n }\n\n .grouping.verbose {\n background: #f9f9f9;\n color: var(--color-dark);\n --color-link-primary: rgba(38, 166, 230, 1);\n pointer-events: none;\n background: #fefefe;\n box-shadow: -8px 0px 8px 1px rgba(0, 0, 0, 0.05) inset;\n margin-right: -16px;\n padding-right: 16px;\n margin-bottom: 1.3em;\n }\n\n .grouping .items {\n display: block;\n }\n\n .grouping.verbose .items {\n opacity: 0;\n max-height: 0;\n display: flex;\n flex-direction: column;\n user-select: none;\n }\n\n .grouping.flows .items {\n padding: 0;\n }\n\n .grouping.messages .items {\n display: flex;\n flex-direction: column;\n margin: 0em 0.75em;\n }\n\n .grouping.verbose.expanded .items {\n transition: max-height var(--transition-speed) ease-in-out,\n opacity var(--transition-speed) ease-in-out;\n opacity: 1;\n max-height: 1000px;\n padding: 1em 1em;\n }\n\n .grouping.verbose.expanded {\n border-top: 1px solid #f3f3f3;\n border-bottom: 1px solid #f3f3f3;\n }\n\n .grouping.verbose.expanded,\n .grouping.verbose .event-count {\n pointer-events: auto;\n }\n\n .grouping.verbose temba-icon {\n }\n\n .grouping.verbose > .event,\n .grouping.verbose > pre {\n max-height: 0px;\n padding-top: 0;\n padding-bottom: 0;\n margin-top: 0;\n margin-bottom: 0;\n opacity: 0;\n }\n\n .grouping.verbose .attn {\n color: #666;\n }\n\n .event-count {\n position: relative;\n font-size: 0.8em;\n text-align: center;\n margin: 0 auto;\n display: table;\n padding: 3px 10px;\n font-weight: 400;\n color: #999;\n cursor: pointer;\n width: 100%;\n opacity: 1;\n z-index: 1;\n }\n\n .event-count temba-icon {\n display: inline-block;\n position: absolute;\n right: 5px;\n top: 5px;\n }\n\n .event-count:hover {\n color: var(--color-link-primary-hover);\n }\n\n .expanded .event-count {\n padding: 0;\n pointer-events: none;\n }\n\n .grouping.flows {\n margin-left: 1em;\n margin-right: 1em;\n margin-bottom: 1.5em;\n\n border: 1px solid #f2f2f2;\n border-radius: var(--curvature);\n padding: 0.5em 1em;\n }\n\n .grouping.flows .event {\n margin: 0;\n padding: 0;\n }\n\n .grouping.tickets {\n margin-bottom: 2em;\n }\n\n pre {\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n\n .grouping.verbose.expanded .event,\n .grouping.verbose.expanded pre {\n max-height: 500px;\n opacity: 1;\n }\n\n .grouping-close-button {\n position: relative;\n display: inline-block;\n opacity: 0;\n float: right;\n --icon-color: #666;\n }\n\n .grouping.verbose.expanded:hover .grouping-close-button {\n opacity: 1;\n }\n\n .grouping.messages,\n .grouping.tickets {\n display: flex;\n flex-direction: column;\n }\n\n .event {\n margin: 0.25em 0.5em;\n border-radius: var(--curvature);\n flex-grow: 1;\n }\n\n .msg {\n padding: var(--event-padding);\n border-radius: 8px;\n border: 2px solid rgba(100, 100, 100, 0.1);\n max-width: 300px;\n }\n\n .event.msg_received .msg {\n background: rgba(200, 200, 200, 0.1);\n }\n\n .event.msg_created,\n .event.broadcast_created,\n .event.ivr_created,\n .tickets .event.ticket_note_added {\n align-self: flex-end;\n }\n\n .event.msg_created .msg,\n .event.broadcast_created .msg,\n .event.ivr_created .msg {\n background: rgb(231, 243, 255);\n }\n\n .webhook_called {\n --icon-color: #e68628;\n word-break: break-all;\n }\n\n .webhook_called .failed {\n --icon-color: var(--color-error);\n color: var(--color-error);\n }\n\n .input_labels_added,\n .contact_name_changed,\n .contact_field_changed,\n .contact_urns_changed,\n .contact_language_changed,\n .run_result_changed {\n --icon-color: rgba(1, 193, 175, 1);\n }\n\n .email_sent {\n --icon-color: #8e5ea7;\n }\n\n .contact_groups_changed .added {\n --icon-color: #309c42;\n }\n .contact_groups_changed .removed {\n --icon-color: var(--color-error);\n }\n\n .event.error .description,\n .event.failure .description {\n color: var(--color-error);\n }\n\n .description.error {\n color: var(--color-error);\n }\n\n .info {\n border: 1px solid rgba(100, 100, 100, 0.2);\n background: rgba(10, 10, 10, 0.02);\n }\n\n .tickets .ticket_note_added {\n max-width: 300px;\n }\n\n .tickets .note-summary {\n display: flex;\n flex-direction: row;\n font-size: 85%;\n margin-top: -0.5em;\n color: rgba(0, 0, 0, 0.6);\n padding: 8px 3px;\n }\n\n .tickets .ticket_note_added .description {\n border: 2px solid rgba(100, 100, 100, 0.1);\n background: rgb(255, 249, 194);\n padding: var(--event-padding);\n border-radius: 8px;\n }\n\n .channel_event {\n --icon-color: rgb(230, 230, 230);\n }\n\n .airtime_transferred,\n .flow_exited,\n .flow_entered,\n .ticket_opened,\n .ticket_reopened,\n .ticket_closed,\n .call_started,\n .campaign_fired {\n --icon-color: rgba(223, 65, 159, 1);\n }\n\n .active-ticket.ticket_opened {\n padding: 0em 1em;\n }\n\n .ticket_opened temba-icon.clickable[name='check'] {\n --icon-color: rgba(100, 100, 100, 1);\n }\n\n .ticket_opened .active {\n color: var(--color-text);\n }\n\n .ticket_closed .inactive .subtext {\n display: none;\n }\n\n .attn {\n color: var(--color-text);\n }\n\n .flow_exited,\n .flow_entered {\n align-self: center;\n max-width: 80%;\n display: flex;\n flex-direction: row;\n }\n\n .flow_exited temba-icon,\n .flow_entered temba-icon {\n }\n\n .event {\n display: flex;\n align-items: center;\n }\n\n .event .description {\n flex-grow: 1;\n }\n\n .msg-summary {\n display: flex;\n font-size: 85%;\n color: rgba(0, 0, 0, 0.6);\n padding: 6px 3px;\n margin-bottom: 0.5em;\n margin-top: -0.5em;\n }\n\n .msg-summary temba-icon.log {\n --icon-color: rgba(0, 0, 0, 0.2);\n }\n\n .msg-summary temba-icon.log:hover {\n --icon-color: var(--color-link-primary-hover);\n cursor: pointer;\n }\n\n .msg-summary temba-icon.error {\n --icon-color: rgba(var(--error-rgb), 0.75);\n }\n\n .msg-summary temba-icon.error:hover {\n --icon-color: var(--color-error);\n cursor: pointer;\n }\n\n .msg-summary temba-icon.broadcast {\n --icon-color: rgba(90, 90, 90, 0.5);\n }\n\n .msg-summary * {\n display: flex;\n margin-right: 1px;\n margin-left: 1px;\n }\n\n .unsupported {\n border: 1px solid #f2f2f2;\n color: #999;\n padding: 0.5em 1em;\n border-radius: var(--curvature);\n }\n\n .time {\n padding: 0.3em 1px;\n }\n\n .status {\n padding: 0.3em 3px;\n }\n\n .separator {\n padding: 0.3em 0px;\n }\n\n .recipients {\n padding: 0.3em 3px;\n }\n\n .verbose temba-icon,\n .flows temba-icon,\n .tickets temba-icon {\n margin-right: 0.75em;\n }\n\n .attn {\n display: inline-block;\n font-weight: 500;\n margin: 0px 2px;\n }\n\n .subtext {\n font-size: 80%;\n }\n\n .body-pre {\n white-space: pre-wrap;\n word-wrap: break-word;\n font-size: 90%;\n }\n\n a,\n .linked {\n color: var(--color-link-primary);\n cursor: pointer;\n }\n\n a:hover,\n .linked:hover {\n text-decoration: underline;\n color: var(--color-link-primary-hover);\n }\n\n temba-icon.error {\n --icon-color: var(--color-error);\n }\n\n .delivery-error {\n --icon-color: var(--color-error);\n margin-right: 0.25em;\n }\n\n .flow {\n --icon-color: #ddd;\n background: #fff;\n width: 18px;\n height: 18px;\n padding-top: 4px;\n padding-left: 9px;\n border: 0px solid #f3f3f3;\n }\n\n .assigned {\n color: #777;\n max-width: 300px;\n margin-left: auto;\n margin-right: auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-bottom: 10px;\n }\n\n .assigned .attn {\n color: #777;\n }\n\n .attachments {\n margin-top: 1em;\n }\n `;\n};\n\nconst FLOW_USER_ID = 'flow';\n\nexport interface EventGroup {\n type: string;\n events: ContactEvent[];\n open: boolean;\n}\n\nexport enum Events {\n MESSAGE_CREATED = 'msg_created',\n MESSAGE_RECEIVED = 'msg_received',\n BROADCAST_CREATED = 'broadcast_created',\n IVR_CREATED = 'ivr_created',\n FLOW_ENTERED = 'flow_entered',\n FLOW_EXITED = 'flow_exited',\n RUN_RESULT_CHANGED = 'run_result_changed',\n CONTACT_FIELD_CHANGED = 'contact_field_changed',\n CONTACT_GROUPS_CHANGED = 'contact_groups_changed',\n CONTACT_NAME_CHANGED = 'contact_name_changed',\n CONTACT_URNS_CHANGED = 'contact_urns_changed',\n CAMPAIGN_FIRED = 'campaign_fired',\n CHANNEL_EVENT = 'channel_event',\n CONTACT_LANGUAGE_CHANGED = 'contact_language_changed',\n WEBHOOK_CALLED = 'webhook_called',\n AIRTIME_TRANSFERRED = 'airtime_transferred',\n CALL_STARTED = 'call_started',\n EMAIL_SENT = 'email_sent',\n INPUT_LABELS_ADDED = 'input_labels_added',\n NOTE_CREATED = 'note_created',\n TICKET_ASSIGNED = 'ticket_assigned',\n TICKET_NOTE_ADDED = 'ticket_note_added',\n TICKET_CLOSED = 'ticket_closed',\n TICKET_OPENED = 'ticket_opened',\n TICKET_REOPENED = 'ticket_reopened',\n ERROR = 'error',\n FAILURE = 'failure',\n}\n\nexport interface ContactEvent {\n type: string;\n created_on: string;\n}\n\nexport interface ChannelEvent extends ContactEvent {\n channel_event_type: string;\n duration: number;\n}\n\nexport interface ContactLanguageChangedEvent extends ContactEvent {\n language: string;\n step_uuid: string;\n session_uuid: string;\n}\n\nexport interface MsgEvent extends ContactEvent {\n msg: Msg;\n status: string;\n failed_reason?: string;\n failed_reason_display?: string;\n logs_url: string;\n msg_type: string;\n recipient_count?: number;\n created_by?: User;\n}\n\nexport interface FlowEvent extends ContactEvent {\n flow: ObjectReference;\n status: string;\n}\n\nexport interface EmailSentEvent extends ContactEvent {\n to: string[];\n subject: string;\n body: string;\n}\n\nexport interface URNsChangedEvent extends ContactEvent {\n urns: string[];\n}\n\nexport interface TicketEvent extends ContactEvent {\n note?: string;\n assignee?: User;\n ticket: {\n uuid: string;\n ticketer: ObjectReference;\n body: string;\n topic?: ObjectReference;\n external_id?: string;\n closed_on?: string;\n opened_on?: string;\n };\n created_by?: User;\n}\n\nexport interface LabelsAddedEvent extends ContactEvent {\n labels: ObjectReference[];\n}\n\nexport interface NameChangedEvent extends ContactEvent {\n name: string;\n}\n\nexport interface UpdateFieldEvent extends ContactEvent {\n field: { key: string; name: string };\n value: { text: string };\n}\n\nexport interface ErrorMessageEvent extends ContactEvent {\n text: string;\n}\n\nexport interface UpdateResultEvent extends ContactEvent {\n name: string;\n value: string;\n category: string;\n input: string;\n}\n\nexport interface ContactGroupsEvent extends ContactEvent {\n groups_added: ObjectReference[];\n groups_removed: ObjectReference[];\n}\n\nexport interface WebhookEvent extends ContactEvent {\n status: string;\n status_code: number;\n elapsed_ms: number;\n logs_url: string;\n url: string;\n}\n\nexport interface AirtimeTransferredEvent extends ContactEvent {\n sender: string;\n recipient: string;\n currency: string;\n desired_amount: string;\n actual_amount: string;\n logs_url: string;\n}\n\nexport type CallStartedEvent = ContactEvent;\nexport interface CampaignFiredEvent extends ContactEvent {\n campaign: { uuid: string; id: number; name: string };\n campaign_event: {\n id: number;\n offset_display: string;\n relative_to: { key: string; name: string };\n };\n fired_result: string;\n}\n\nexport interface ContactHistoryPage {\n has_older: boolean;\n recent_only: boolean;\n next_before: number;\n next_after: number;\n start_date: Date;\n events: ContactEvent[];\n}\n\nexport const getEventGroupType = (event: ContactEvent, ticket: string) => {\n if (!event) {\n return 'messages';\n }\n switch (event.type) {\n case Events.TICKET_ASSIGNED:\n case Events.TICKET_NOTE_ADDED:\n case Events.TICKET_OPENED:\n case Events.TICKET_CLOSED:\n case Events.TICKET_REOPENED:\n if (!ticket) {\n return 'verbose';\n }\n\n if ((event as TicketEvent).ticket.uuid === ticket) {\n return 'tickets';\n }\n\n break;\n case Events.FLOW_ENTERED:\n case Events.FLOW_EXITED:\n return 'flows';\n case Events.BROADCAST_CREATED:\n case Events.MESSAGE_CREATED:\n case Events.MESSAGE_RECEIVED:\n case Events.IVR_CREATED:\n return 'messages';\n }\n return 'verbose';\n};\n\nexport const renderAvatar = (user: User, agent = '') => {\n const current = user && user.email === agent;\n if (user.email === FLOW_USER_ID \|\| !user \|\| !user.first_name) {\n return html`<temba-tip text=\"Automated message\" position=\"top\"\n ><div class=\"avatar flow\" style=\"margin-top:0.5em\">\n <temba-icon size=\"1\" name=\"${Icon.flow_user}\" /></div\n ></temba-tip>`;\n } else {\n return html`<temba-tip\n text=\"${user.first_name + ' ' + user.last_name}\"\n position=\"top\"\n >\n <div\n class=\"avatar\"\n style=\"\n border-radius: 9999px; \n display:flex;\n align-items:center;\n border: 2px solid rgba(0,0,0,.05);\n background: ${current ? 'var(--color-primary-dark)' : '#eee'};\n color: ${current ? '#fff' : '#999'} ;\n font-weight: 400;\n padding: 0.5em;\n line-height:1.2em;\n \"\n >\n ${user.first_name[0] + user.last_name[0]}\n </div>\n </temba-tip>`;\n }\n};\n\nexport const renderAttachment = (attachment: string): TemplateResult => {\n const idx = attachment.indexOf(':');\n const attType = attachment.substr(0, idx);\n const url = attachment.substr(idx + 1);\n const [mediaType, ext] = attType.split('/', 2);\n\n let inner = null;\n if (mediaType === 'image') {\n inner = html`<div class=\"linked\" onclick=\"goto(event)\" href=\"${url}\"><img src=\"${url}\" style=\"width:100%;height:auto;display:block\"></img></a>`;\n } else if (ext === 'pdf') {\n return html`<div\n style=\"width:100%;height:300px;border-radius:var(--curvature);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);overflow:hidden\"\n ><embed src=\"${url}#view=Fit\" type=\"application/pdf\" frameBorder=\"0\" scrolling=\"auto\" height=\"100%\" width=\"100%\"></embed></div>`;\n } else if (mediaType === 'video') {\n return html`<video\n style=\"border-radius:var(--curvature);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);max-width:400px\"\n height=\"auto\"\n controls\n >\n <source src=\"${url}\" type=\"video/mp4\" />\n </video> `;\n } else if (mediaType === 'audio') {\n return html`<audio\n style=\"border-radius: 99px; box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);\"\n src=\"${url}\"\n type=\"${attType}\"\n controls\n >\n <a target=\"_\" href=\"${url}\">${url}</a>\n </audio>`;\n } else if (attType === 'geo') {\n const [lat, long] = url.split(',');\n const latFloat = parseFloat(lat);\n const longFloat = parseFloat(long);\n const geo = `${lat}000000%2C${long}000000`;\n\n return html` <iframe\n style=\"border-radius: var(--curvature);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);\"\n width=\"300\"\n height=\"300\"\n frameborder=\"0\"\n scrolling=\"no\"\n marginheight=\"0\"\n marginwidth=\"0\"\n src=\"https://www.openstreetmap.org/export/embed.html?bbox=${longFloat -\n 0.005}000000%2C${latFloat - 0.005}%2C${longFloat +\n 0.005}000000%2C${latFloat +\n 0.005}000000&layer=mapnik&marker=${geo}\"\n ></iframe>`;\n } else {\n return html`<div style=\"display:flex\">\n <temba-icon name=\"${Icon.download}\"></temba-icon>\n <div>Attachment ${ext}</div>\n </div>`;\n }\n\n return html`<div\n style=\"width:100%;max-width:300px;border-radius:var(--curvature); box-shadow:0px 0px 6px 0px rgba(0,0,0,.15);overflow:hidden\"\n >\n ${inner}\n </div>`;\n};\n\nexport const renderMsgEvent = (\n event: MsgEvent,\n agent: string\n): TemplateResult => {\n const isInbound = event.type === Events.MESSAGE_RECEIVED;\n const isError = event.status === 'E';\n const isFailure = event.status === 'F';\n\n // summary items which appear under the message bubble\n const summary: TemplateResult[] = [];\n if (event.logs_url) {\n summary.push(html` <div class=\"icon-link\">\n <temba-icon\n onclick=\"goto(event)\"\n href=\"${event.logs_url}\"\n name=\"${Icon.log}\"\n class=\"log ${isError \|\| isFailure ? 'error' : ''}\"\n ></temba-icon>\n </div>`);\n } else if (isError) {\n summary.push(\n html`<temba-icon\n title=\"Message delivery error\"\n name=\"${Icon.error}\"\n class=\"delivery-error\"\n ></temba-icon>`\n );\n } else if (isFailure) {\n summary.push(\n html`<temba-icon\n title=\"Message delivery failure: ${event.failed_reason_display}\"\n name=\"${Icon.error}\"\n class=\"delivery-error\"\n ></temba-icon>`\n );\n }\n if (event.recipient_count > 1) {\n summary.push(html`<temba-icon\n size=\"1\"\n class=\"broadcast\"\n name=\"${Icon.broadcast}\"\n ></temba-icon>\n <div class=\"recipients\">${event.recipient_count} contacts</div>\n <div class=\"separator\">•</div>`);\n }\n summary.push(\n html`<temba-date\n class=\"time\"\n value=\"${event.created_on}\"\n display=\"duration\"\n ></temba-date>`\n );\n\n return html`<div style=\"display:flex;align-items:flex-start\">\n <div style=\"display:flex;flex-direction:column\">\n ${event.msg.text ? html`<div class=\"msg\">${event.msg.text}</div>` : null}\n ${event.msg.attachments\n ? html`<div class=\"attachments\">\n ${event.msg.attachments.map(attachment =>\n renderAttachment(attachment)\n )}\n </div> `\n : null}\n ${!event.msg.text && !event.msg.attachments\n ? html`<div class=\"unsupported\">Unsupported Message</div>`\n : null}\n <div\n class=\"msg-summary\"\n style=\"flex-direction:row${isInbound ? '-reverse' : ''}\"\n >\n <div style=\"flex-grow:1\"></div>\n ${summary}\n </div>\n </div>\n\n ${!isInbound\n ? html`<div style=\"margin-left:0.8em;margin-top:0.3em\">\n ${event.msg.created_by\n ? html`<div style=\"font-size:0.8em\">\n ${renderAvatar(event.msg.created_by, agent)}\n </div>`\n : renderAvatar({ email: FLOW_USER_ID })}\n </div>`\n : null}\n </div>`;\n};\n\nexport const renderFlowEvent = (event: FlowEvent): TemplateResult => {\n let verb = 'Interrupted';\n let icon = Icon.flow_interrupted;\n\n if (event.status !== 'I') {\n if (event.type === Events.FLOW_ENTERED) {\n verb = 'Started';\n icon = Icon.flow;\n } else {\n verb = 'Completed';\n icon = Icon.flow;\n }\n }\n\n return html`\n <temba-icon name=\"${icon}\"></temba-icon>\n <div class=\"description\">\n ${verb}\n <span\n class=\"linked\"\n href=\"/flow/editor/${event.flow.uuid}/\"\n onclick=\"goto(event)\"\n >\n ${event.flow.name}\n </span>\n </div>\n `;\n};\n\nexport const renderResultEvent = (event: UpdateResultEvent): TemplateResult => {\n if (event.name.startsWith('_')) {\n return null;\n }\n return html`\n <temba-icon name=\"${Icon.updated}\"></temba-icon>\n <div class=\"description\">\n Updated\n <div class=\"attn\">${event.name}</div>\n to\n <div class=\"attn\">${event.value}</div>\n ${event.category\n ? html`with category\n <div class=\"attn\">${event.category}</div>`\n : null}\n </div>\n `;\n};\n\nexport const renderUpdateEvent = (event: UpdateFieldEvent): TemplateResult => {\n return html`\n <temba-icon name=\"${Icon.contact_updated}\"></temba-icon>\n <div class=\"description\">\n ${event.value\n ? html`Updated\n <div class=\"attn\">${event.field.name}</div>\n to\n <div class=\"attn\">${event.value.text}</div>`\n : html`Cleared\n <div class=\"attn\">${event.field.name}</div>`}\n </div>\n `;\n};\n\nexport const renderNameChanged = (event: NameChangedEvent): TemplateResult => {\n return html`\n <temba-icon name=\"${Icon.contact_updated}\"></temba-icon>\n <div class=\"description\">\n Updated\n <div class=\"attn\">Name</div>\n to\n <div class=\"attn\">${event.name}</div>\n </div>\n `;\n};\n\nexport const renderContactURNsChanged = (\n event: URNsChangedEvent\n): TemplateResult => {\n return html`\n <temba-icon name=\"${Icon.contact_updated}\"></temba-icon>\n <div class=\"description\">\n Updated\n <div class=\"attn\">URNs</div>\n to\n ${oxfordFn(\n event.urns,\n (urn: string) =>\n html`<div class=\"attn\">${urn.split(':')[1].split('?')[0]}</div>`\n )}\n </div>\n </div>\n `;\n};\n\nexport const renderEmailSent = (event: EmailSentEvent): TemplateResult => {\n return html`\n <temba-icon name=\"${Icon.email}\"></temba-icon>\n <div class=\"description\">\n Email sent to\n <div class=\"attn\">${oxford(event.to, 'and')}</div>\n with subject\n <div class=\"attn\">${event.subject}</div>\n </div>\n `;\n};\n\nexport const renderLabelsAdded = (event: LabelsAddedEvent): TemplateResult => {\n return html`\n <temba-icon name=\"${Icon.label}\"></temba-icon>\n <div class=\"description\">\n Message labeled with\n <div class=\"attn\">${oxfordNamed(event.labels, 'and')}</div>\n </div>\n `;\n};\n\nexport const renderNoteCreated = (\n event: TicketEvent,\n agent: string\n): TemplateResult => {\n return html`<div style=\"display:flex;align-items:flex-start\">\n <div style=\"display:flex;flex-direction:column\">\n <div class=\"description\">${event.note}</div>\n <div class=\"note-summary\">\n <div style=\"flex-grow:1\"></div>\n <temba-date\n class=\"time\"\n value=\"${event.created_on}\"\n display=\"duration\"\n ></temba-date>\n </div>\n </div>\n <div style=\"margin-left:0.8em;margin-top:0.3em;font-size:0.8em\">\n ${renderAvatar(event.created_by, agent)}\n </div>\n </div>`;\n};\n\nconst getTicketIcon = (event: TicketEvent) => {\n let icon = Icon.inbox;\n if (event.ticket.ticketer.name.indexOf('Email') > -1) {\n icon = Icon.email;\n } else if (event.ticket.ticketer.name.indexOf('Zendesk') > -1) {\n icon = Icon.zendesk;\n }\n return icon;\n};\n\nexport const renderTicketAction = (\n event: TicketEvent,\n action: string,\n grouped: boolean\n): TemplateResult => {\n const reopened = new Date(event.created_on);\n const icon = getTicketIcon(event);\n if (grouped) {\n return html`<div class=\"\" style=\"display: flex\">\n <temba-icon name=\"${icon}\"></temba-icon>\n <div class=\"description\">\n ${getDisplayName(event.created_by)} ${action} a\n <span\n onclick=\"goto(event)\"\n class=\"linked\"\n href=\"/ticket/all/open/${event.ticket.uuid}\"\n >\n ticket\n </span>\n </div>\n </div>`;\n }\n\n return html`\n <div class=\"assigned active\">\n <div style=\"text-align:center\">\n ${getDisplayName(event.created_by)} ${action} this ticket\n </div>\n <div class=\"subtext\" style=\"justify-content:center\">\n <temba-date\n class=\"time\"\n value=\"${reopened}\"\n display=\"duration\"\n ></temba-date>\n </div>\n </div>\n `;\n};\n\nexport const renderTicketAssigned = (event: TicketEvent): TemplateResult => {\n return html`\n <div class=\"assigned active\">\n <div style=\"text-align:center\">\n ${event.assignee\n ? event.assignee.id === event.created_by.id\n ? html`${getDisplayName(event.created_by)} took this ticket`\n : html`${getDisplayName(event.created_by)} assigned this ticket to\n <div class=\"attn\">${getDisplayName(event.assignee)}</div>`\n : html`${getDisplayName(event.created_by)} unassigned this ticket`}\n </div>\n <div class=\"subtext\" style=\"justify-content:center\">\n <temba-date\n class=\"time\"\n value=\"${event.created_on}\"\n display=\"duration\"\n ></temba-date>\n </div>\n </div>\n `;\n};\n\nexport const renderTicketOpened = (\n event: TicketEvent,\n handleClose: (uuid: string) => void,\n grouped: boolean\n): TemplateResult => {\n const icon = getTicketIcon(event);\n\n if (grouped) {\n return html`<div class=\"\" style=\"display: flex\">\n <temba-icon name=\"${icon}\"></temba-icon>\n <div class=\"description\">\n ${event.ticket.topic.name}\n <span\n class=\"linked\"\n onclick=\"goto(event)\"\n href=\"/ticket/all/open/${event.ticket.uuid}\"\n >ticket</span\n >\n was opened\n </div>\n </div>`;\n } else {\n return html`\n <temba-icon size=\"1.5\" name=\"${icon}\"></temba-icon>\n\n <div class=\"active\" style=\"flex-grow:1;\">\n Opened\n <div class=\"attn\">\n ${event.ticket.topic ? event.ticket.topic.name : 'General'}\n </div>\n <div class=\"subtext\">${timeSince(new Date(event.created_on))}</div>\n </div>\n ${handleClose\n ? html`\n <temba-tip text=\"Resolve\" position=\"left\" style=\"width:1.5em\">\n <temba-icon\n class=\"clickable\"\n size=\"1.5\"\n name=\"${Icon.check}\"\n @click=${() => {\n handleClose(event.ticket.uuid);\n }}\n ?clickable=${open}\n />\n </temba-tip>\n `\n : null}\n `;\n }\n};\n\nexport const renderErrorMessage = (\n event: ErrorMessageEvent\n): TemplateResult => {\n return html`\n <temba-icon\n name=\"${Icon.error}\"\n style=\"--icon-color:var(--color-error)\"\n ></temba-icon>\n <div class=\"description\">\n ${event.text}\n ${event.type === Events.FAILURE\n ? html`<div>Run ended prematurely, check the flow design.</div>`\n : null}\n </div>\n `;\n};\n\nexport const renderWebhookEvent = (event: WebhookEvent): TemplateResult => {\n return html`\n <div\n class=\"${event.status === 'success' ? '' : 'failed'}\"\n style=\"display: flex\"\n >\n <temba-icon name=\"${Icon.webhook}\"></temba-icon>\n <div class=\"description\">\n ${event.status === 'success'\n ? html`Successfully called ${event.url}`\n : html`Failed to call ${event.url}`}\n </div>\n </div>\n `;\n};\n\nexport const renderAirtimeTransferredEvent = (\n event: AirtimeTransferredEvent\n): TemplateResult => {\n if (parseFloat(event.actual_amount) === 0) {\n return html`<temba-icon\n name=\"${Icon.error}\"\n style=\"--icon-color: var(--color-error)\"\n ></temba-icon>\n <div class=\"description error\">Airtime transfer failed</div>`;\n }\n\n return html`<temba-icon name=\"${Icon.airtime}\"></temba-icon>\n <div class=\"description\">\n Transferred\n <div class=\"attn\">${event.actual_amount} ${event.currency}</div>\n of airtime\n </div>`;\n};\n\nexport const renderCallStartedEvent = (): TemplateResult => {\n return html`<temba-icon name=\"${Icon.call}\"></temba-icon>\n <div class=\"description\">Call Started</div>`;\n};\n\nexport const renderContactLanguageChangedEvent = (\n event: ContactLanguageChangedEvent\n): TemplateResult => {\n return html`<temba-icon name=\"${Icon.contact_updated}\"></temba-icon>\n <div class=\"description\">\n Language updated to <span class=\"attn\">${event.language}</span>\n </div>`;\n};\n\nexport const renderChannelEvent = (event: ChannelEvent): TemplateResult => {\n let eventMessage = '';\n let icon = Icon.call;\n\n if (event.channel_event_type === 'mt_miss') {\n eventMessage = 'Missed outgoing call';\n icon = Icon.call_missed;\n } else if (event.channel_event_type === 'mo_miss') {\n eventMessage = 'Missed incoming call';\n icon = Icon.call_missed;\n } else if (event.channel_event_type === 'new_conversation') {\n eventMessage = 'Started Conversation';\n icon = Icon.event;\n } else if (event.channel_event_type === 'welcome_message') {\n eventMessage = 'Welcome Message Sent';\n icon = Icon.event;\n } else if (event.channel_event_type === 'referral') {\n eventMessage = 'Referred';\n icon = Icon.event;\n } else if (event.channel_event_type === 'follow') {\n eventMessage = 'Followed';\n icon = Icon.event;\n } else if (event.channel_event_type === 'stop_contact') {\n eventMessage = 'Stopped';\n icon = Icon.contact_stopped;\n } else if (event.channel_event_type === 'mt_call') {\n eventMessage = 'Outgoing Phone Call';\n } else if (event.channel_event_type == 'mo_call') {\n eventMessage = 'Incoming Phone call';\n }\n\n return html`<temba-icon name=\"${icon}\"></temba-icon>\n <div class=\"description\">${eventMessage}</div>`;\n};\n\nexport const renderCampaignFiredEvent = (\n event: CampaignFiredEvent\n): TemplateResult => {\n return html`<temba-icon name=\"${Icon.campaign}\"></temba-icon>\n <div class=\"description\">\n Campaign\n <span\n class=\"linked\"\n onclick=\"goto(event)\"\n href=\"/campaign/read/${event.campaign.uuid}\"\n >${event.campaign.name}</span\n >\n ${event.fired_result === 'S' ? 'skipped' : 'triggered'}\n <span\n class=\"linked\"\n onclick=\"goto(event)\"\n href=\"/campaignevent/read/${event.campaign.uuid}/${event.campaign_event\n .id}\"\n >\n ${event.campaign_event.offset_display}\n ${event.campaign_event.relative_to.name}</span\n >\n </div>`;\n};\n\nexport const renderContactGroupsEvent = (\n event: ContactGroupsEvent\n): TemplateResult => {\n const groups = event.groups_added \|\| event.groups_removed;\n const added = !!event.groups_added;\n return html`\n <temba-icon\n name=\"${Icon.users}\"\n class=\"${getClasses({ added: added, removed: !added })}\"\n ></temba-icon>\n <div class=\"description\">\n ${added ? 'Added to' : 'Removed from'}\n ${oxfordFn(\n groups,\n (group: ObjectReference) =>\n html`<span\n class=\"linked\"\n onclick=\"goto(event)\"\n href=\"/contact/filter/${group.uuid}\"\n >${group.name}</span\n >`\n )}\n ${event.type === Events.FAILURE\n ? html`<div>Run ended prematurely, check the flow design.</div>`\n : null}\n </div>\n `;\n};\n"]}
1	+ {"version":3,"file":"events.js","sourceRoot":"","sources":["../../../src/contacts/events.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { Msg, ObjectReference, User } from '../interfaces';\nimport { getClasses, oxford, oxfordFn, oxfordNamed, timeSince } from '../utils';\nimport { Icon } from '../vectoricon';\nimport { getDisplayName } from './helpers';\n\nexport const getEventStyles = () => {\n return css`\n .grouping {\n margin-top: 1em;\n }\n\n .grouping.verbose {\n background: #f9f9f9;\n color: var(--color-dark);\n --color-link-primary: rgba(38, 166, 230, 1);\n pointer-events: none;\n background: #fefefe;\n box-shadow: -8px 0px 8px 1px rgba(0, 0, 0, 0.05) inset;\n margin-right: -16px;\n padding-right: 16px;\n margin-bottom: 1.3em;\n }\n\n .grouping .items {\n display: block;\n }\n\n .grouping.verbose .items {\n opacity: 0;\n max-height: 0;\n display: flex;\n flex-direction: column;\n user-select: none;\n }\n\n .grouping.flows .items {\n padding: 0;\n }\n\n .grouping.messages .items {\n display: flex;\n flex-direction: column;\n margin: 0em 0.75em;\n }\n\n .grouping.verbose.expanded .items {\n transition: max-height var(--transition-speed) ease-in-out,\n opacity var(--transition-speed) ease-in-out;\n opacity: 1;\n max-height: 1000px;\n padding: 1em 1em;\n }\n\n .grouping.verbose.expanded {\n border-top: 1px solid #f3f3f3;\n border-bottom: 1px solid #f3f3f3;\n }\n\n .grouping.verbose.expanded,\n .grouping.verbose .event-count {\n pointer-events: auto;\n }\n\n .grouping.verbose temba-icon {\n }\n\n .grouping.verbose > .event,\n .grouping.verbose > pre {\n max-height: 0px;\n padding-top: 0;\n padding-bottom: 0;\n margin-top: 0;\n margin-bottom: 0;\n opacity: 0;\n }\n\n .grouping.verbose .attn {\n color: #666;\n }\n\n .event-count {\n position: relative;\n font-size: 0.8em;\n text-align: center;\n margin: 0 auto;\n display: table;\n padding: 3px 10px;\n font-weight: 400;\n color: #999;\n cursor: pointer;\n width: 100%;\n opacity: 1;\n z-index: 1;\n }\n\n .event-count temba-icon {\n display: inline-block;\n position: absolute;\n right: 5px;\n top: 5px;\n }\n\n .event-count:hover {\n color: var(--color-link-primary-hover);\n }\n\n .expanded .event-count {\n padding: 0;\n pointer-events: none;\n }\n\n .grouping.flows {\n margin-left: 1em;\n margin-right: 1em;\n margin-bottom: 1.5em;\n\n border: 1px solid #f2f2f2;\n border-radius: var(--curvature);\n padding: 0.5em 1em;\n }\n\n .grouping.flows .event {\n margin: 0;\n padding: 0;\n }\n\n .grouping.tickets {\n margin-bottom: 2em;\n }\n\n pre {\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n\n .grouping.verbose.expanded .event,\n .grouping.verbose.expanded pre {\n max-height: 500px;\n opacity: 1;\n }\n\n .grouping-close-button {\n position: relative;\n display: inline-block;\n opacity: 0;\n float: right;\n --icon-color: #666;\n }\n\n .grouping.verbose.expanded:hover .grouping-close-button {\n opacity: 1;\n }\n\n .grouping.messages,\n .grouping.tickets {\n display: flex;\n flex-direction: column;\n }\n\n .event {\n margin: 0.25em 0.5em;\n border-radius: var(--curvature);\n flex-grow: 1;\n }\n\n .msg {\n padding: var(--event-padding);\n border-radius: 8px;\n border: 2px solid rgba(100, 100, 100, 0.1);\n max-width: 300px;\n }\n\n .event.msg_received .msg {\n background: rgba(200, 200, 200, 0.1);\n }\n\n .event.msg_created,\n .event.broadcast_created,\n .event.ivr_created,\n .tickets .event.ticket_note_added {\n align-self: flex-end;\n }\n\n .event.msg_created .msg,\n .event.broadcast_created .msg,\n .event.ivr_created .msg {\n background: rgb(231, 243, 255);\n }\n\n .webhook_called {\n --icon-color: #e68628;\n word-break: break-all;\n }\n\n .webhook_called .failed {\n --icon-color: var(--color-error);\n color: var(--color-error);\n }\n\n .input_labels_added,\n .contact_name_changed,\n .contact_field_changed,\n .contact_urns_changed,\n .contact_language_changed,\n .run_result_changed {\n --icon-color: rgba(1, 193, 175, 1);\n }\n\n .email_sent {\n --icon-color: #8e5ea7;\n }\n\n .contact_groups_changed .added {\n --icon-color: #309c42;\n }\n .contact_groups_changed .removed {\n --icon-color: var(--color-error);\n }\n\n .event.error .description,\n .event.failure .description {\n color: var(--color-error);\n }\n\n .description.error {\n color: var(--color-error);\n }\n\n .info {\n border: 1px solid rgba(100, 100, 100, 0.2);\n background: rgba(10, 10, 10, 0.02);\n }\n\n .tickets .ticket_note_added {\n max-width: 300px;\n }\n\n .tickets .note-summary {\n display: flex;\n flex-direction: row;\n font-size: 85%;\n margin-top: -0.5em;\n color: rgba(0, 0, 0, 0.6);\n padding: 8px 3px;\n }\n\n .tickets .ticket_note_added .description {\n border: 2px solid rgba(100, 100, 100, 0.1);\n background: rgb(255, 249, 194);\n padding: var(--event-padding);\n border-radius: 8px;\n }\n\n .channel_event {\n --icon-color: rgb(230, 230, 230);\n }\n\n .airtime_transferred,\n .flow_exited,\n .flow_entered,\n .ticket_opened,\n .ticket_reopened,\n .ticket_closed,\n .call_started,\n .campaign_fired {\n --icon-color: rgba(223, 65, 159, 1);\n }\n\n .active-ticket.ticket_opened {\n padding: 0em 1em;\n }\n\n .ticket_opened temba-icon.clickable[name='check'] {\n --icon-color: rgba(100, 100, 100, 1);\n }\n\n .ticket_opened .active {\n color: var(--color-text);\n }\n\n .ticket_closed .inactive .subtext {\n display: none;\n }\n\n .attn {\n color: var(--color-text);\n }\n\n .flow_exited,\n .flow_entered {\n align-self: center;\n max-width: 80%;\n display: flex;\n flex-direction: row;\n }\n\n .flow_exited temba-icon,\n .flow_entered temba-icon {\n }\n\n .event {\n display: flex;\n align-items: center;\n }\n\n .event .description {\n flex-grow: 1;\n word-break: break-all;\n }\n\n .msg-summary {\n display: flex;\n font-size: 85%;\n color: rgba(0, 0, 0, 0.6);\n padding: 6px 3px;\n margin-bottom: 0.5em;\n margin-top: -0.5em;\n }\n\n .msg-summary temba-icon.log {\n --icon-color: rgba(0, 0, 0, 0.2);\n }\n\n .msg-summary temba-icon.log:hover {\n --icon-color: var(--color-link-primary-hover);\n cursor: pointer;\n }\n\n .msg-summary temba-icon.error {\n --icon-color: rgba(var(--error-rgb), 0.75);\n }\n\n .msg-summary temba-icon.error:hover {\n --icon-color: var(--color-error);\n cursor: pointer;\n }\n\n .msg-summary temba-icon.broadcast {\n --icon-color: rgba(90, 90, 90, 0.5);\n }\n\n .msg-summary * {\n display: flex;\n margin-right: 1px;\n margin-left: 1px;\n }\n\n .unsupported {\n border: 1px solid #f2f2f2;\n color: #999;\n padding: 0.5em 1em;\n border-radius: var(--curvature);\n }\n\n .time {\n padding: 0.3em 1px;\n }\n\n .status {\n padding: 0.3em 3px;\n }\n\n .separator {\n padding: 0.3em 0px;\n }\n\n .recipients {\n padding: 0.3em 3px;\n }\n\n .verbose temba-icon,\n .flows temba-icon,\n .tickets temba-icon {\n margin-right: 0.75em;\n }\n\n .attn {\n display: inline-block;\n font-weight: 500;\n margin: 0px 2px;\n }\n\n .subtext {\n font-size: 80%;\n }\n\n .body-pre {\n white-space: pre-wrap;\n word-wrap: break-word;\n font-size: 90%;\n }\n\n a,\n .linked {\n color: var(--color-link-primary);\n cursor: pointer;\n }\n\n a:hover,\n .linked:hover {\n text-decoration: underline;\n color: var(--color-link-primary-hover);\n }\n\n temba-icon.error {\n --icon-color: var(--color-error);\n }\n\n .delivery-error {\n --icon-color: var(--color-error);\n margin-right: 0.25em;\n }\n\n .flow {\n --icon-color: #ddd;\n background: #fff;\n width: 18px;\n height: 18px;\n padding-top: 4px;\n padding-left: 9px;\n border: 0px solid #f3f3f3;\n }\n\n .assigned {\n color: #777;\n max-width: 300px;\n margin-left: auto;\n margin-right: auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-bottom: 10px;\n }\n\n .assigned .attn {\n color: #777;\n }\n\n .attachments {\n margin-top: 1em;\n }\n `;\n};\n\nconst FLOW_USER_ID = 'flow';\n\nexport interface EventGroup {\n type: string;\n events: ContactEvent[];\n open: boolean;\n}\n\nexport enum Events {\n MESSAGE_CREATED = 'msg_created',\n MESSAGE_RECEIVED = 'msg_received',\n BROADCAST_CREATED = 'broadcast_created',\n IVR_CREATED = 'ivr_created',\n FLOW_ENTERED = 'flow_entered',\n FLOW_EXITED = 'flow_exited',\n RUN_RESULT_CHANGED = 'run_result_changed',\n CONTACT_FIELD_CHANGED = 'contact_field_changed',\n CONTACT_GROUPS_CHANGED = 'contact_groups_changed',\n CONTACT_NAME_CHANGED = 'contact_name_changed',\n CONTACT_URNS_CHANGED = 'contact_urns_changed',\n CAMPAIGN_FIRED = 'campaign_fired',\n CHANNEL_EVENT = 'channel_event',\n CONTACT_LANGUAGE_CHANGED = 'contact_language_changed',\n WEBHOOK_CALLED = 'webhook_called',\n AIRTIME_TRANSFERRED = 'airtime_transferred',\n CALL_STARTED = 'call_started',\n EMAIL_SENT = 'email_sent',\n INPUT_LABELS_ADDED = 'input_labels_added',\n NOTE_CREATED = 'note_created',\n TICKET_ASSIGNED = 'ticket_assigned',\n TICKET_NOTE_ADDED = 'ticket_note_added',\n TICKET_CLOSED = 'ticket_closed',\n TICKET_OPENED = 'ticket_opened',\n TICKET_REOPENED = 'ticket_reopened',\n ERROR = 'error',\n FAILURE = 'failure',\n}\n\nexport interface ContactEvent {\n type: string;\n created_on: string;\n}\n\nexport interface ChannelEvent extends ContactEvent {\n channel_event_type: string;\n duration: number;\n}\n\nexport interface ContactLanguageChangedEvent extends ContactEvent {\n language: string;\n step_uuid: string;\n session_uuid: string;\n}\n\nexport interface MsgEvent extends ContactEvent {\n msg: Msg;\n status: string;\n failed_reason?: string;\n failed_reason_display?: string;\n logs_url: string;\n msg_type: string;\n recipient_count?: number;\n created_by?: User;\n}\n\nexport interface FlowEvent extends ContactEvent {\n flow: ObjectReference;\n status: string;\n}\n\nexport interface EmailSentEvent extends ContactEvent {\n to: string[];\n subject: string;\n body: string;\n}\n\nexport interface URNsChangedEvent extends ContactEvent {\n urns: string[];\n}\n\nexport interface TicketEvent extends ContactEvent {\n note?: string;\n assignee?: User;\n ticket: {\n uuid: string;\n ticketer: ObjectReference;\n body: string;\n topic?: ObjectReference;\n external_id?: string;\n closed_on?: string;\n opened_on?: string;\n };\n created_by?: User;\n}\n\nexport interface LabelsAddedEvent extends ContactEvent {\n labels: ObjectReference[];\n}\n\nexport interface NameChangedEvent extends ContactEvent {\n name: string;\n}\n\nexport interface UpdateFieldEvent extends ContactEvent {\n field: { key: string; name: string };\n value: { text: string };\n}\n\nexport interface ErrorMessageEvent extends ContactEvent {\n text: string;\n}\n\nexport interface UpdateResultEvent extends ContactEvent {\n name: string;\n value: string;\n category: string;\n input: string;\n}\n\nexport interface ContactGroupsEvent extends ContactEvent {\n groups_added: ObjectReference[];\n groups_removed: ObjectReference[];\n}\n\nexport interface WebhookEvent extends ContactEvent {\n status: string;\n status_code: number;\n elapsed_ms: number;\n logs_url: string;\n url: string;\n}\n\nexport interface AirtimeTransferredEvent extends ContactEvent {\n sender: string;\n recipient: string;\n currency: string;\n desired_amount: string;\n actual_amount: string;\n logs_url: string;\n}\n\nexport type CallStartedEvent = ContactEvent;\nexport interface CampaignFiredEvent extends ContactEvent {\n campaign: { uuid: string; id: number; name: string };\n campaign_event: {\n id: number;\n offset_display: string;\n relative_to: { key: string; name: string };\n };\n fired_result: string;\n}\n\nexport interface ContactHistoryPage {\n has_older: boolean;\n recent_only: boolean;\n next_before: number;\n next_after: number;\n start_date: Date;\n events: ContactEvent[];\n}\n\nexport const getEventGroupType = (event: ContactEvent, ticket: string) => {\n if (!event) {\n return 'messages';\n }\n switch (event.type) {\n case Events.TICKET_ASSIGNED:\n case Events.TICKET_NOTE_ADDED:\n case Events.TICKET_OPENED:\n case Events.TICKET_CLOSED:\n case Events.TICKET_REOPENED:\n if (!ticket) {\n return 'verbose';\n }\n\n if ((event as TicketEvent).ticket.uuid === ticket) {\n return 'tickets';\n }\n\n break;\n case Events.FLOW_ENTERED:\n case Events.FLOW_EXITED:\n return 'flows';\n case Events.BROADCAST_CREATED:\n case Events.MESSAGE_CREATED:\n case Events.MESSAGE_RECEIVED:\n case Events.IVR_CREATED:\n return 'messages';\n }\n return 'verbose';\n};\n\nexport const renderAvatar = (user: User, agent = '') => {\n const current = user && user.email === agent;\n if (user.email === FLOW_USER_ID \|\| !user \|\| !user.first_name) {\n return html`<temba-tip text=\"Automated message\" position=\"top\"\n ><div class=\"avatar flow\" style=\"margin-top:0.5em\">\n <temba-icon size=\"1\" name=\"${Icon.flow_user}\" /></div\n ></temba-tip>`;\n } else {\n return html`<temba-tip\n text=\"${user.first_name + ' ' + user.last_name}\"\n position=\"top\"\n >\n <div\n class=\"avatar\"\n style=\"\n border-radius: 9999px; \n display:flex;\n align-items:center;\n border: 2px solid rgba(0,0,0,.05);\n background: ${current ? 'var(--color-primary-dark)' : '#eee'};\n color: ${current ? '#fff' : '#999'} ;\n font-weight: 400;\n padding: 0.5em;\n line-height:1.2em;\n \"\n >\n ${user.first_name[0] + user.last_name[0]}\n </div>\n </temba-tip>`;\n }\n};\n\nexport const renderAttachment = (attachment: string): TemplateResult => {\n const idx = attachment.indexOf(':');\n const attType = attachment.substr(0, idx);\n const url = attachment.substr(idx + 1);\n const [mediaType, ext] = attType.split('/', 2);\n\n let inner = null;\n if (mediaType === 'image') {\n inner = html`<div class=\"linked\" onclick=\"goto(event)\" href=\"${url}\"><img src=\"${url}\" style=\"width:100%;height:auto;display:block\"></img></a>`;\n } else if (ext === 'pdf') {\n return html`<div\n style=\"width:100%;height:300px;border-radius:var(--curvature);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);overflow:hidden\"\n ><embed src=\"${url}#view=Fit\" type=\"application/pdf\" frameBorder=\"0\" scrolling=\"auto\" height=\"100%\" width=\"100%\"></embed></div>`;\n } else if (mediaType === 'video') {\n return html`<video\n style=\"border-radius:var(--curvature);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);max-width:400px\"\n height=\"auto\"\n controls\n >\n <source src=\"${url}\" type=\"video/mp4\" />\n </video> `;\n } else if (mediaType === 'audio') {\n return html`<audio\n style=\"border-radius: 99px; box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);\"\n src=\"${url}\"\n type=\"${attType}\"\n controls\n >\n <a target=\"_\" href=\"${url}\">${url}</a>\n </audio>`;\n } else if (attType === 'geo') {\n const [lat, long] = url.split(',');\n const latFloat = parseFloat(lat);\n const longFloat = parseFloat(long);\n const geo = `${lat}000000%2C${long}000000`;\n\n return html` <iframe\n style=\"border-radius: var(--curvature);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);\"\n width=\"300\"\n height=\"300\"\n frameborder=\"0\"\n scrolling=\"no\"\n marginheight=\"0\"\n marginwidth=\"0\"\n src=\"https://www.openstreetmap.org/export/embed.html?bbox=${longFloat -\n 0.005}000000%2C${latFloat - 0.005}%2C${longFloat +\n 0.005}000000%2C${latFloat +\n 0.005}000000&layer=mapnik&marker=${geo}\"\n ></iframe>`;\n } else {\n return html`<div style=\"display:flex\">\n <temba-icon name=\"${Icon.download}\"></temba-icon>\n <div>Attachment ${ext}</div>\n </div>`;\n }\n\n return html`<div\n style=\"width:100%;max-width:300px;border-radius:var(--curvature); box-shadow:0px 0px 6px 0px rgba(0,0,0,.15);overflow:hidden\"\n >\n ${inner}\n </div>`;\n};\n\nexport const renderMsgEvent = (\n event: MsgEvent,\n agent: string\n): TemplateResult => {\n const isInbound = event.type === Events.MESSAGE_RECEIVED;\n const isError = event.status === 'E';\n const isFailure = event.status === 'F';\n\n // summary items which appear under the message bubble\n const summary: TemplateResult[] = [];\n if (event.logs_url) {\n summary.push(html` <div class=\"icon-link\">\n <temba-icon\n onclick=\"goto(event)\"\n href=\"${event.logs_url}\"\n name=\"${Icon.log}\"\n class=\"log ${isError \|\| isFailure ? 'error' : ''}\"\n ></temba-icon>\n </div>`);\n } else if (isError) {\n summary.push(\n html`<temba-icon\n title=\"Message delivery error\"\n name=\"${Icon.error}\"\n class=\"delivery-error\"\n ></temba-icon>`\n );\n } else if (isFailure) {\n summary.push(\n html`<temba-icon\n title=\"Message delivery failure: ${event.failed_reason_display}\"\n name=\"${Icon.error}\"\n class=\"delivery-error\"\n ></temba-icon>`\n );\n }\n if (event.recipient_count > 1) {\n summary.push(html`<temba-icon\n size=\"1\"\n class=\"broadcast\"\n name=\"${Icon.broadcast}\"\n ></temba-icon>\n <div class=\"recipients\">${event.recipient_count} contacts</div>\n <div class=\"separator\">•</div>`);\n }\n summary.push(\n html`<temba-date\n class=\"time\"\n value=\"${event.created_on}\"\n display=\"duration\"\n ></temba-date>`\n );\n\n return html`<div style=\"display:flex;align-items:flex-start\">\n <div style=\"display:flex;flex-direction:column\">\n ${event.msg.text ? html`<div class=\"msg\">${event.msg.text}</div>` : null}\n ${event.msg.attachments\n ? html`<div class=\"attachments\">\n ${event.msg.attachments.map(attachment =>\n renderAttachment(attachment)\n )}\n </div> `\n : null}\n ${!event.msg.text && !event.msg.attachments\n ? html`<div class=\"unsupported\">Unsupported Message</div>`\n : null}\n <div\n class=\"msg-summary\"\n style=\"flex-direction:row${isInbound ? '-reverse' : ''}\"\n >\n <div style=\"flex-grow:1\"></div>\n ${summary}\n </div>\n </div>\n\n ${!isInbound\n ? html`<div style=\"margin-left:0.8em;margin-top:0.3em\">\n ${event.msg.created_by\n ? html`<div style=\"font-size:0.8em\">\n ${renderAvatar(event.msg.created_by, agent)}\n </div>`\n : renderAvatar({ email: FLOW_USER_ID })}\n </div>`\n : null}\n </div>`;\n};\n\nexport const renderFlowEvent = (event: FlowEvent): TemplateResult => {\n let verb = 'Interrupted';\n let icon = Icon.flow_interrupted;\n\n if (event.status !== 'I') {\n if (event.type === Events.FLOW_ENTERED) {\n verb = 'Started';\n icon = Icon.flow;\n } else {\n verb = 'Completed';\n icon = Icon.flow;\n }\n }\n\n return html`\n <temba-icon name=\"${icon}\"></temba-icon>\n <div class=\"description\">\n ${verb}\n <span\n class=\"linked\"\n href=\"/flow/editor/${event.flow.uuid}/\"\n onclick=\"goto(event)\"\n >\n ${event.flow.name}\n </span>\n </div>\n `;\n};\n\nexport const renderResultEvent = (event: UpdateResultEvent): TemplateResult => {\n if (event.name.startsWith('_')) {\n return null;\n }\n return html`\n <temba-icon name=\"${Icon.updated}\"></temba-icon>\n <div class=\"description\">\n Updated\n <div class=\"attn\">${event.name}</div>\n to\n <div class=\"attn\">${event.value}</div>\n ${event.category\n ? html`with category\n <div class=\"attn\">${event.category}</div>`\n : null}\n </div>\n `;\n};\n\nexport const renderUpdateEvent = (event: UpdateFieldEvent): TemplateResult => {\n return html`\n <temba-icon name=\"${Icon.contact_updated}\"></temba-icon>\n <div class=\"description\">\n ${event.value\n ? html`Updated\n <div class=\"attn\">${event.field.name}</div>\n to\n <div class=\"attn\">${event.value.text}</div>`\n : html`Cleared\n <div class=\"attn\">${event.field.name}</div>`}\n </div>\n `;\n};\n\nexport const renderNameChanged = (event: NameChangedEvent): TemplateResult => {\n return html`\n <temba-icon name=\"${Icon.contact_updated}\"></temba-icon>\n <div class=\"description\">\n Updated\n <div class=\"attn\">Name</div>\n to\n <div class=\"attn\">${event.name}</div>\n </div>\n `;\n};\n\nexport const renderContactURNsChanged = (\n event: URNsChangedEvent\n): TemplateResult => {\n return html`\n <temba-icon name=\"${Icon.contact_updated}\"></temba-icon>\n <div class=\"description\">\n Updated\n <div class=\"attn\">URNs</div>\n to\n ${oxfordFn(\n event.urns,\n (urn: string) =>\n html`<div class=\"attn\">${urn.split(':')[1].split('?')[0]}</div>`\n )}\n </div>\n </div>\n `;\n};\n\nexport const renderEmailSent = (event: EmailSentEvent): TemplateResult => {\n return html`\n <temba-icon name=\"${Icon.email}\"></temba-icon>\n <div class=\"description\">\n Email sent to\n <div class=\"attn\">${oxford(event.to, 'and')}</div>\n with subject\n <div class=\"attn\">${event.subject}</div>\n </div>\n `;\n};\n\nexport const renderLabelsAdded = (event: LabelsAddedEvent): TemplateResult => {\n return html`\n <temba-icon name=\"${Icon.label}\"></temba-icon>\n <div class=\"description\">\n Message labeled with\n <div class=\"attn\">${oxfordNamed(event.labels, 'and')}</div>\n </div>\n `;\n};\n\nexport const renderNoteCreated = (\n event: TicketEvent,\n agent: string\n): TemplateResult => {\n return html`<div style=\"display:flex;align-items:flex-start\">\n <div style=\"display:flex;flex-direction:column\">\n <div class=\"description\">${event.note}</div>\n <div class=\"note-summary\">\n <div style=\"flex-grow:1\"></div>\n <temba-date\n class=\"time\"\n value=\"${event.created_on}\"\n display=\"duration\"\n ></temba-date>\n </div>\n </div>\n <div style=\"margin-left:0.8em;margin-top:0.3em;font-size:0.8em\">\n ${renderAvatar(event.created_by, agent)}\n </div>\n </div>`;\n};\n\nconst getTicketIcon = (event: TicketEvent) => {\n let icon = Icon.inbox;\n if (event.ticket.ticketer.name.indexOf('Email') > -1) {\n icon = Icon.email;\n } else if (event.ticket.ticketer.name.indexOf('Zendesk') > -1) {\n icon = Icon.zendesk;\n }\n return icon;\n};\n\nexport const renderTicketAction = (\n event: TicketEvent,\n action: string,\n grouped: boolean\n): TemplateResult => {\n const reopened = new Date(event.created_on);\n const icon = getTicketIcon(event);\n if (grouped) {\n return html`<div class=\"\" style=\"display: flex\">\n <temba-icon name=\"${icon}\"></temba-icon>\n <div class=\"description\">\n ${getDisplayName(event.created_by)} ${action} a\n <span\n onclick=\"goto(event)\"\n class=\"linked\"\n href=\"/ticket/all/open/${event.ticket.uuid}\"\n >\n ticket\n </span>\n </div>\n </div>`;\n }\n\n return html`\n <div class=\"assigned active\">\n <div style=\"text-align:center\">\n ${getDisplayName(event.created_by)} ${action} this ticket\n </div>\n <div class=\"subtext\" style=\"justify-content:center\">\n <temba-date\n class=\"time\"\n value=\"${reopened}\"\n display=\"duration\"\n ></temba-date>\n </div>\n </div>\n `;\n};\n\nexport const renderTicketAssigned = (event: TicketEvent): TemplateResult => {\n return html`\n <div class=\"assigned active\">\n <div style=\"text-align:center\">\n ${event.assignee\n ? event.assignee.id === event.created_by.id\n ? html`${getDisplayName(event.created_by)} took this ticket`\n : html`${getDisplayName(event.created_by)} assigned this ticket to\n <div class=\"attn\">${getDisplayName(event.assignee)}</div>`\n : html`${getDisplayName(event.created_by)} unassigned this ticket`}\n </div>\n <div class=\"subtext\" style=\"justify-content:center\">\n <temba-date\n class=\"time\"\n value=\"${event.created_on}\"\n display=\"duration\"\n ></temba-date>\n </div>\n </div>\n `;\n};\n\nexport const renderTicketOpened = (\n event: TicketEvent,\n handleClose: (uuid: string) => void,\n grouped: boolean\n): TemplateResult => {\n const icon = getTicketIcon(event);\n\n if (grouped) {\n return html`<div class=\"\" style=\"display: flex\">\n <temba-icon name=\"${icon}\"></temba-icon>\n <div class=\"description\">\n ${event.ticket.topic.name}\n <span\n class=\"linked\"\n onclick=\"goto(event)\"\n href=\"/ticket/all/open/${event.ticket.uuid}\"\n >ticket</span\n >\n was opened\n </div>\n </div>`;\n } else {\n return html`\n <temba-icon size=\"1.5\" name=\"${icon}\"></temba-icon>\n\n <div class=\"active\" style=\"flex-grow:1;\">\n Opened\n <div class=\"attn\">\n ${event.ticket.topic ? event.ticket.topic.name : 'General'}\n </div>\n <div class=\"subtext\">${timeSince(new Date(event.created_on))}</div>\n </div>\n ${handleClose\n ? html`\n <temba-tip text=\"Resolve\" position=\"left\" style=\"width:1.5em\">\n <temba-icon\n class=\"clickable\"\n size=\"1.5\"\n name=\"${Icon.check}\"\n @click=${() => {\n handleClose(event.ticket.uuid);\n }}\n ?clickable=${open}\n />\n </temba-tip>\n `\n : null}\n `;\n }\n};\n\nexport const renderErrorMessage = (\n event: ErrorMessageEvent\n): TemplateResult => {\n return html`\n <temba-icon\n name=\"${Icon.error}\"\n style=\"--icon-color:var(--color-error)\"\n ></temba-icon>\n <div class=\"description\">\n ${event.text}\n ${event.type === Events.FAILURE\n ? html`<div>Run ended prematurely, check the flow design.</div>`\n : null}\n </div>\n `;\n};\n\nexport const renderWebhookEvent = (event: WebhookEvent): TemplateResult => {\n return html`\n <div\n class=\"${event.status === 'success' ? '' : 'failed'}\"\n style=\"display: flex\"\n >\n <temba-icon name=\"${Icon.webhook}\"></temba-icon>\n <div class=\"description\">\n ${event.status === 'success'\n ? html`Successfully called ${event.url}`\n : html`Failed to call ${event.url}`}\n </div>\n </div>\n `;\n};\n\nexport const renderAirtimeTransferredEvent = (\n event: AirtimeTransferredEvent\n): TemplateResult => {\n if (parseFloat(event.actual_amount) === 0) {\n return html`<temba-icon\n name=\"${Icon.error}\"\n style=\"--icon-color: var(--color-error)\"\n ></temba-icon>\n <div class=\"description error\">Airtime transfer failed</div>`;\n }\n\n return html`<temba-icon name=\"${Icon.airtime}\"></temba-icon>\n <div class=\"description\">\n Transferred\n <div class=\"attn\">${event.actual_amount} ${event.currency}</div>\n of airtime\n </div>`;\n};\n\nexport const renderCallStartedEvent = (): TemplateResult => {\n return html`<temba-icon name=\"${Icon.call}\"></temba-icon>\n <div class=\"description\">Call Started</div>`;\n};\n\nexport const renderContactLanguageChangedEvent = (\n event: ContactLanguageChangedEvent\n): TemplateResult => {\n return html`<temba-icon name=\"${Icon.contact_updated}\"></temba-icon>\n <div class=\"description\">\n Language updated to <span class=\"attn\">${event.language}</span>\n </div>`;\n};\n\nexport const renderChannelEvent = (event: ChannelEvent): TemplateResult => {\n let eventMessage = '';\n let icon = Icon.call;\n\n if (event.channel_event_type === 'mt_miss') {\n eventMessage = 'Missed outgoing call';\n icon = Icon.call_missed;\n } else if (event.channel_event_type === 'mo_miss') {\n eventMessage = 'Missed incoming call';\n icon = Icon.call_missed;\n } else if (event.channel_event_type === 'new_conversation') {\n eventMessage = 'Started Conversation';\n icon = Icon.event;\n } else if (event.channel_event_type === 'welcome_message') {\n eventMessage = 'Welcome Message Sent';\n icon = Icon.event;\n } else if (event.channel_event_type === 'referral') {\n eventMessage = 'Referred';\n icon = Icon.event;\n } else if (event.channel_event_type === 'follow') {\n eventMessage = 'Followed';\n icon = Icon.event;\n } else if (event.channel_event_type === 'stop_contact') {\n eventMessage = 'Stopped';\n icon = Icon.contact_stopped;\n } else if (event.channel_event_type === 'mt_call') {\n eventMessage = 'Outgoing Phone Call';\n } else if (event.channel_event_type == 'mo_call') {\n eventMessage = 'Incoming Phone call';\n }\n\n return html`<temba-icon name=\"${icon}\"></temba-icon>\n <div class=\"description\">${eventMessage}</div>`;\n};\n\nexport const renderCampaignFiredEvent = (\n event: CampaignFiredEvent\n): TemplateResult => {\n return html`<temba-icon name=\"${Icon.campaign}\"></temba-icon>\n <div class=\"description\">\n Campaign\n <span\n class=\"linked\"\n onclick=\"goto(event)\"\n href=\"/campaign/read/${event.campaign.uuid}\"\n >${event.campaign.name}</span\n >\n ${event.fired_result === 'S' ? 'skipped' : 'triggered'}\n <span\n class=\"linked\"\n onclick=\"goto(event)\"\n href=\"/campaignevent/read/${event.campaign.uuid}/${event.campaign_event\n .id}\"\n >\n ${event.campaign_event.offset_display}\n ${event.campaign_event.relative_to.name}</span\n >\n </div>`;\n};\n\nexport const renderContactGroupsEvent = (\n event: ContactGroupsEvent\n): TemplateResult => {\n const groups = event.groups_added \|\| event.groups_removed;\n const added = !!event.groups_added;\n return html`\n <temba-icon\n name=\"${Icon.users}\"\n class=\"${getClasses({ added: added, removed: !added })}\"\n ></temba-icon>\n <div class=\"description\">\n ${added ? 'Added to' : 'Removed from'}\n ${oxfordFn(\n groups,\n (group: ObjectReference) =>\n html`<span\n class=\"linked\"\n onclick=\"goto(event)\"\n href=\"/contact/filter/${group.uuid}\"\n >${group.name}</span\n >`\n )}\n ${event.type === Events.FAILURE\n ? html`<div>Run ended prematurely, check the flow design.</div>`\n : null}\n </div>\n `;\n};\n"]}

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

@@ -66,7 +66,8 @@ export class TembaMenu extends RapidElement {
         --icon-color: var(--color-text-dark);
       }
-      .item.selected {
+      .item.selected,
+      .item.pressed {
         background: var(--color-selection);
         color: var(--color-primary-dark);
         --icon-color: var(--color-primary-dark);
@@ -501,6 +502,7 @@ export class TembaMenu extends RapidElement {
                 expanding: this.expanding && this.expanding === menuItem.id,
                 expanded: this.isExpanded(menuItem),
                 iconless: !icon && !collapsedIcon && !menuItem.avatar,
+                pressed: this.pressedItem && this.pressedItem.id == menuItem.id,
             });
             if (menuItem.avatar) {
                 icon = this.renderAvatar(menuItem.avatar);
@@ -508,13 +510,22 @@ export class TembaMenu extends RapidElement {
             const item = html ` <div
         class="item-top ${isSelected ? 'selected' : null} "
       ></div>
       <div
         id="menu-${menuItem.id}"
         class="${itemClasses}"
         @click=${event => {
+                this.pressedItem = null;
                 this.handleItemClicked(event, menuItem, parent);
             }}
+        @mousedown=${() => {
+                if (menuItem.level > 0) {
+                    this.pressedItem = menuItem;
+                }
+                console.log('pressing', menuItem);
+            }}
+        @mouseleave=${() => {
+                this.pressedItem = null;
+            }}
       >
         ${menuItem.level === 0
                 ? menuItem.avatar
@@ -996,4 +1007,7 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], TembaMenu.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: Object })
+], TembaMenu.prototype, "pressedItem", void 0);
 //# sourceMappingURL=TembaMenu.js.map

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

	@@ -1 +1 @@
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,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,SAAS,MAAM,YAAY,CAAC;AA8BnC,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;QAsErC,YAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;QA0RvC,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;QAreA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7C,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,KAAK,CAAC,SAAS;QACpB,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,sEAAsE;YACtE,MAAM,IAAI,CAAC,YAAY,CAAC;YACxB,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;YACxB,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;SACzD;QAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC;IAID,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,IAAI,QAAQ,CAAC,OAAO,EAAE;YACpB,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,aAAa,EAAE;gBAClD,IAAI,EAAE,QAAQ;gBACd,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE;gBAC9B,MAAM;aACP,CAAC,CAAC;YACH,OAAO;SACR;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,OAAO,EAAE,CAAC;QACf,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;AA5nBC;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 { debounce, 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 trigger?: boolean;\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 this.doRefresh = this.doRefresh.bind(this);\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 async doRefresh() {\n const path = [...this.selection];\n let item = this.root;\n\n while (path.length > 0) {\n this.loadItems(item);\n // we need to wait until the load is complete before doing the replace\n await this.httpComplete;\n const id = path.shift();\n item = (item.items \|\| []).find(_item => _item.id == id);\n }\n\n this.loadItems(item);\n }\n\n public refresh = debounce(this.doRefresh, 200);\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 if (menuItem.trigger) {\n this.fireCustomEvent(CustomEventType.ButtonClicked, {\n item: menuItem,\n selection: this.getSelection(),\n parent,\n });\n return;\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.refresh();\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":"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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 { debounce, 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 trigger?: boolean;\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 .item.pressed {\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 @property({ type: Object })\n pressedItem: MenuItem;\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 this.doRefresh = this.doRefresh.bind(this);\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 async doRefresh() {\n const path = [...this.selection];\n let item = this.root;\n\n while (path.length > 0) {\n this.loadItems(item);\n // we need to wait until the load is complete before doing the replace\n await this.httpComplete;\n const id = path.shift();\n item = (item.items \|\| []).find(_item => _item.id == id);\n }\n\n this.loadItems(item);\n }\n\n public refresh = debounce(this.doRefresh, 200);\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 if (menuItem.trigger) {\n this.fireCustomEvent(CustomEventType.ButtonClicked, {\n item: menuItem,\n selection: this.getSelection(),\n parent,\n });\n return;\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.refresh();\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 pressed: this.pressedItem && this.pressedItem.id == menuItem.id,\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 <div\n id=\"menu-${menuItem.id}\"\n class=\"${itemClasses}\"\n @click=${event => {\n this.pressedItem = null;\n this.handleItemClicked(event, menuItem, parent);\n }}\n @mousedown=${() => {\n if (menuItem.level > 0) {\n this.pressedItem = menuItem;\n }\n\n console.log('pressing', menuItem);\n }}\n @mouseleave=${() => {\n this.pressedItem = null;\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"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.41.3",
+  "version": "0.41.5",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/contacts/events.ts CHANGED Viewed

@@ -306,6 +306,7 @@ export const getEventStyles = () => {
     .event .description {
       flex-grow: 1;
+      word-break: break-all;
     }
     .msg-summary {

package/src/list/TembaMenu.ts CHANGED Viewed

@@ -101,7 +101,8 @@ export class TembaMenu extends RapidElement {
         --icon-color: var(--color-text-dark);
       }
-      .item.selected {
+      .item.selected,
+      .item.pressed {
         background: var(--color-selection);
         color: var(--color-primary-dark);
         --icon-color: var(--color-primary-dark);
@@ -504,6 +505,9 @@ export class TembaMenu extends RapidElement {
   @property({ type: Boolean })
   collapsed: boolean;
+  @property({ type: Object })
+  pressedItem: MenuItem;
   // http promise to monitor for completeness
   public httpComplete: Promise<void>;
@@ -921,6 +925,7 @@ export class TembaMenu extends RapidElement {
       expanding: this.expanding && this.expanding === menuItem.id,
       expanded: this.isExpanded(menuItem),
       iconless: !icon && !collapsedIcon && !menuItem.avatar,
+      pressed: this.pressedItem && this.pressedItem.id == menuItem.id,
     });
     if (menuItem.avatar) {
@@ -930,13 +935,23 @@ export class TembaMenu extends RapidElement {
     const item = html` <div
         class="item-top ${isSelected ? 'selected' : null} "
       ></div>
       <div
         id="menu-${menuItem.id}"
         class="${itemClasses}"
         @click=${event => {
+          this.pressedItem = null;
           this.handleItemClicked(event, menuItem, parent);
         }}
+        @mousedown=${() => {
+          if (menuItem.level > 0) {
+            this.pressedItem = menuItem;
+          }
+          console.log('pressing', menuItem);
+        }}
+        @mouseleave=${() => {
+          this.pressedItem = null;
+        }}
       >
         ${menuItem.level === 0
           ? menuItem.avatar