@nyaruka/temba-components 0.33.0 → 0.33.1

package/dist/sw.js

@@ -1,2 +1,2 @@
-if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let r=Promise.resolve();return t[e]||(r=new Promise(async r=>{if("document"in self){const t=document.createElement("script");t.src=e,document.head.appendChild(t),t.onload=r}else importScripts(e),r()})),r.then(()=>{if(!t[e])throw new Error(`Module ${e} didn’t register its module`);return t[e]})},r=(r,t)=>{Promise.all(r.map(e)).then(e=>t(1===e.length?e[0]:e))},t={require:Promise.resolve(r)};self.define=(r,s,o)=>{t[r]||(t[r]=Promise.resolve().then(()=>{let t={};const n={uri:location.origin+r.slice(1)};return Promise.all(s.map(r=>{switch(r){case"exports":return t;case"module":return n;default:return e(r)}})).then(e=>{const r=o(...e);return t.default||(t.default=r),t})}))}}define("./sw.js",["./workbox-80efdfd1"],(function(e){"use strict";e.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"2f70e385.js",revision:"a1750ac110565befc4d6062496f3e8f3"},{url:"templates/components-body.html",revision:"6fe1353f31fe6475c0e76bfc684a239e"},{url:"templates/components-head.html",revision:"7a9bc9d8b2bfb43a82c02cd9040f3b81"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
+if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let r=Promise.resolve();return t[e]||(r=new Promise(async r=>{if("document"in self){const t=document.createElement("script");t.src=e,document.head.appendChild(t),t.onload=r}else importScripts(e),r()})),r.then(()=>{if(!t[e])throw new Error(`Module ${e} didn’t register its module`);return t[e]})},r=(r,t)=>{Promise.all(r.map(e)).then(e=>t(1===e.length?e[0]:e))},t={require:Promise.resolve(r)};self.define=(r,s,o)=>{t[r]||(t[r]=Promise.resolve().then(()=>{let t={};const n={uri:location.origin+r.slice(1)};return Promise.all(s.map(r=>{switch(r){case"exports":return t;case"module":return n;default:return e(r)}})).then(e=>{const r=o(...e);return t.default||(t.default=r),t})}))}}define("./sw.js",["./workbox-80efdfd1"],(function(e){"use strict";e.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"253098e2.js",revision:"b02136e291253d09668fc2ff171ca6b4"},{url:"templates/components-body.html",revision:"19951e5941cffa55c54ab045b10c1cfd"},{url:"templates/components-head.html",revision:"1b74585e602eeff3a73aa29329adba0f"}],{}),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

@@ -1 +1 @@
-{"version":3,"file":"sw.js","sources":["../../../../../tmp/f97f8af7f5506871371481e254be9112/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 {skipWaiting as workbox_core_skipWaiting} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/skipWaiting.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\nworkbox_core_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\": \"2f70e385.js\",\n    \"revision\": \"a1750ac110565befc4d6062496f3e8f3\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"6fe1353f31fe6475c0e76bfc684a239e\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"7a9bc9d8b2bfb43a82c02cd9040f3b81\"\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":["url","revision","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"k1BAmCoC,CAClC,CACEA,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,oBAE2B,IAAIC,kBAAgCC,0BAA2C,iCAG/E,iBAAkB,IAAIC,aAAiC"}
+{"version":3,"file":"sw.js","sources":["../../../../../tmp/f534685623b0b9a48039916487e2d8ef/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 {skipWaiting as workbox_core_skipWaiting} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/skipWaiting.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\nworkbox_core_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\": \"253098e2.js\",\n    \"revision\": \"b02136e291253d09668fc2ff171ca6b4\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"19951e5941cffa55c54ab045b10c1cfd\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"1b74585e602eeff3a73aa29329adba0f\"\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":["url","revision","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"k1BAmCoC,CAClC,CACEA,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,oBAE2B,IAAIC,kBAAgCC,0BAA2C,iCAG/E,iBAAkB,IAAIC,aAAiC"}

package/dist/templates/components-body.html

@@ -1 +1 @@
-<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/2f70e385.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.33.0"</script>
+<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/253098e2.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.33.1"</script>

package/dist/templates/components-head.html

@@ -1 +1 @@
-<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/2f70e385.js" crossorigin="anonymous">
+<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/253098e2.js" crossorigin="anonymous">

package/out-tsc/src/checkbox/Checkbox.js

@@ -2,6 +2,7 @@ import { __decorate } from "tslib";
 import { html, css } from 'lit';
 import { FormElement } from '../FormElement';
 import { property } from 'lit/decorators';
+import { Icon } from '../vectoricon';
 export class Checkbox extends FormElement {
     constructor() {
         super(...arguments);
@@ -89,7 +90,7 @@ export class Checkbox extends FormElement {
     }
     render() {
         const icon = html `<temba-icon
-      name="${this.checked ? 'check-' : ''}square"
+      name="${this.checked ? Icon.checkbox_checked : Icon.checkbox}"
       size="${this.size}"
       animatechange="${this.animateChange}"
     />`;

package/out-tsc/src/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/checkbox/Checkbox.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,MAAM,OAAO,QAAS,SAAQ,WAAW;IAAzC;;QAwDE,SAAI,GAAG,EAAE,CAAC;QAMV,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,GAAG,CAAC;QAGX,kBAAa,GAAG,OAAO,CAAC;IA4D1B,CAAC;IA/HC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDT,CAAC;IACJ,CAAC;IAiBM,OAAO,CAAC,OAAyB;QACtC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YAC1B,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;aAClB;iBAAM;gBACL,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;aACnB;YAED,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;SAC1B;IACH,CAAC;IAEM,cAAc,CAAC,KAAU;QAC9B,OAAO,KAAK,CAAC;IACf,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;SAC9B;IACH,CAAC;IAEM,KAAK;QACV,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,KAAK,CAAC,KAAK,EAAE,CAAC;IAChB,CAAC;IAEM,MAAM;QACX,MAAM,IAAI,GAAG,IAAI,CAAA;cACP,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;cAC5B,IAAI,CAAC,IAAI;uBACA,IAAI,CAAC,aAAa;OAClC,CAAC;QAEJ,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QAEnD,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;;iBAEpC,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;oBACf,IAAI,CAAC,MAAM;wBACP,IAAI,CAAC,UAAU;wBACf,IAAI;sBACN,IAAI,CAAC,QAAQ;mBAChB,IAAI,CAAC,WAAW;;2CAEQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;cAC5D,IAAI;cACJ,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA,+BAA+B,IAAI,CAAC,KAAK,QAAQ;YACvD,CAAC,CAAC,IAAI;;;;KAIf,CAAC;IACJ,CAAC;CACF;AAxEC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACH","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FormElement } from '../FormElement';\nimport { property } from 'lit/decorators';\n\nexport class Checkbox extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        color: var(--color-text);\n        display: inline-block;\n      }\n\n      :host([label]) {\n        width: 100%;\n      }\n\n      .wrapper.label {\n        padding: 10px;\n        border-radius: var(--curvature);\n      }\n\n      .wrapper.label:hover {\n        background: #f9f9f9;\n      }\n\n      temba-field {\n        --help-text-margin-left: 24px;\n        cursor: pointer;\n      }\n\n      .checkbox-container {\n        cursor: pointer;\n        display: flex;\n        user-select: none;\n        -webkit-user-select: none;\n      }\n\n      .checkbox-label {\n        font-family: var(--font-family);\n        padding: 0px;\n        margin-left: 8px;\n        font-weight: 300;\n        font-size: 14px;\n        line-height: 19px;\n        flex-grow: 1;\n      }\n\n      .far {\n        height: 16px;\n        margin-top: 1px;\n      }\n\n      .disabled {\n        cursor: not-allowed;\n        --icon-color: #ccc;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: Boolean })\n  checked: boolean;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Number })\n  size = 1.2;\n\n  @property({ type: String })\n  animateChange = 'pulse';\n\n  public updated(changes: Map<string, any>) {\n    super.updated(changes);\n    if (changes.has('checked')) {\n      if (this.checked) {\n        this.setValue(1);\n      } else {\n        this.setValue('');\n      }\n\n      this.fireEvent('change');\n    }\n  }\n\n  public serializeValue(value: any): string {\n    return value;\n  }\n\n  private handleClick(): void {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n    }\n  }\n\n  public click(): void {\n    this.handleClick();\n    super.click();\n  }\n\n  public render(): TemplateResult {\n    const icon = html`<temba-icon\n      name=\"${this.checked ? 'check-' : ''}square\"\n      size=\"${this.size}\"\n      animatechange=\"${this.animateChange}\"\n    />`;\n\n    this.label = this.label ? this.label.trim() : null;\n\n    return html`\n      <div class=\"wrapper ${this.label ? 'label' : ''}\">\n        <temba-field\n          name=${this.name}\n          .helpText=${this.helpText}\n          .errors=${this.errors}\n          .widgetOnly=${this.widgetOnly}\n          .helpAlways=${true}\n          ?disabled=${this.disabled}\n          @click=${this.handleClick}\n        >\n          <div class=\"checkbox-container ${this.disabled ? 'disabled' : ''}\">\n            ${icon}\n            ${this.label\n              ? html`<div class=\"checkbox-label\">${this.label}</div>`\n              : null}\n          </div>\n        </temba-field>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/checkbox/Checkbox.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,MAAM,OAAO,QAAS,SAAQ,WAAW;IAAzC;;QAwDE,SAAI,GAAG,EAAE,CAAC;QAMV,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,GAAG,CAAC;QAGX,kBAAa,GAAG,OAAO,CAAC;IA4D1B,CAAC;IA/HC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDT,CAAC;IACJ,CAAC;IAiBM,OAAO,CAAC,OAAyB;QACtC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YAC1B,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;aAClB;iBAAM;gBACL,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;aACnB;YAED,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;SAC1B;IACH,CAAC;IAEM,cAAc,CAAC,KAAU;QAC9B,OAAO,KAAK,CAAC;IACf,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;SAC9B;IACH,CAAC;IAEM,KAAK;QACV,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,KAAK,CAAC,KAAK,EAAE,CAAC;IAChB,CAAC;IAEM,MAAM;QACX,MAAM,IAAI,GAAG,IAAI,CAAA;cACP,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;cACpD,IAAI,CAAC,IAAI;uBACA,IAAI,CAAC,aAAa;OAClC,CAAC;QAEJ,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QAEnD,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;;iBAEpC,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;oBACf,IAAI,CAAC,MAAM;wBACP,IAAI,CAAC,UAAU;wBACf,IAAI;sBACN,IAAI,CAAC,QAAQ;mBAChB,IAAI,CAAC,WAAW;;2CAEQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;cAC5D,IAAI;cACJ,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA,+BAA+B,IAAI,CAAC,KAAK,QAAQ;YACvD,CAAC,CAAC,IAAI;;;;KAIf,CAAC;IACJ,CAAC;CACF;AAxEC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACH","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FormElement } from '../FormElement';\nimport { property } from 'lit/decorators';\nimport { Icon } from '../vectoricon';\n\nexport class Checkbox extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        color: var(--color-text);\n        display: inline-block;\n      }\n\n      :host([label]) {\n        width: 100%;\n      }\n\n      .wrapper.label {\n        padding: 10px;\n        border-radius: var(--curvature);\n      }\n\n      .wrapper.label:hover {\n        background: #f9f9f9;\n      }\n\n      temba-field {\n        --help-text-margin-left: 24px;\n        cursor: pointer;\n      }\n\n      .checkbox-container {\n        cursor: pointer;\n        display: flex;\n        user-select: none;\n        -webkit-user-select: none;\n      }\n\n      .checkbox-label {\n        font-family: var(--font-family);\n        padding: 0px;\n        margin-left: 8px;\n        font-weight: 300;\n        font-size: 14px;\n        line-height: 19px;\n        flex-grow: 1;\n      }\n\n      .far {\n        height: 16px;\n        margin-top: 1px;\n      }\n\n      .disabled {\n        cursor: not-allowed;\n        --icon-color: #ccc;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: Boolean })\n  checked: boolean;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Number })\n  size = 1.2;\n\n  @property({ type: String })\n  animateChange = 'pulse';\n\n  public updated(changes: Map<string, any>) {\n    super.updated(changes);\n    if (changes.has('checked')) {\n      if (this.checked) {\n        this.setValue(1);\n      } else {\n        this.setValue('');\n      }\n\n      this.fireEvent('change');\n    }\n  }\n\n  public serializeValue(value: any): string {\n    return value;\n  }\n\n  private handleClick(): void {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n    }\n  }\n\n  public click(): void {\n    this.handleClick();\n    super.click();\n  }\n\n  public render(): TemplateResult {\n    const icon = html`<temba-icon\n      name=\"${this.checked ? Icon.checkbox_checked : Icon.checkbox}\"\n      size=\"${this.size}\"\n      animatechange=\"${this.animateChange}\"\n    />`;\n\n    this.label = this.label ? this.label.trim() : null;\n\n    return html`\n      <div class=\"wrapper ${this.label ? 'label' : ''}\">\n        <temba-field\n          name=${this.name}\n          .helpText=${this.helpText}\n          .errors=${this.errors}\n          .widgetOnly=${this.widgetOnly}\n          .helpAlways=${true}\n          ?disabled=${this.disabled}\n          @click=${this.handleClick}\n        >\n          <div class=\"checkbox-container ${this.disabled ? 'disabled' : ''}\">\n            ${icon}\n            ${this.label\n              ? html`<div class=\"checkbox-label\">${this.label}</div>`\n              : null}\n          </div>\n        </temba-field>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/contacts/ContactBadges.js

@@ -1,5 +1,5 @@
 import { css, html } from 'lit';
-import { Icon } from '../utils';
+import { Icon } from '../vectoricon';
 import { ContactStoreElement } from './ContactStoreElement';
 const STATUS = {
     stopped: { name: 'Stopped', icon: 'x-octagon' },
@@ -55,7 +55,7 @@ export class ContactBadges extends ContactStoreElement {
           ${this.data.language
                 ? html `
                 <temba-label
-                  icon=${Icon.Language}
+                  icon=${Icon.language}
                   onclick="goto(event)"
                   href="/contact/?search=language+%3D+${encodeURIComponent('"' + this.data.language + '"')}"
                   clickable
@@ -72,7 +72,7 @@ export class ContactBadges extends ContactStoreElement {
                 class="group"
                 onclick="goto(event)"
                 href="/contact/filter/${group.uuid}/"
-                icon=${group.is_dynamic ? Icon.SmartGroup : Icon.Group}
+                icon=${group.is_dynamic ? Icon.group_smart : Icon.group}
                 clickable
                 shadow
               >

package/out-tsc/src/contacts/ContactBadges.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactBadges.js","sourceRoot":"","sources":["../../../src/contacts/ContactBadges.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE;IAC/C,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE;IAC3C,QAAQ,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE;CAChD,CAAC;AAEF,MAAM,OAAO,aAAc,SAAQ,mBAAmB;IACpD,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;KAST,CAAC;IACJ,CAAC;IAEM,MAAM;QACX,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAExC,OAAO,IAAI,CAAA;;YAEL,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,QAAQ;gBACvC,CAAC,CAAC,IAAI,CAAA;;0BAEQ,MAAM,CAAC,IAAI;;mCAEF,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE;;;;;oBAKxC,MAAM,CAAC,IAAI;;eAEhB;gBACH,CAAC,CAAC,IAAI;YACN,IAAI,CAAC,IAAI,CAAC,IAAI;gBACd,CAAC,CAAC,IAAI,CAAA;;;;oDAIkC,kBAAkB,CAClD,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,GAAG,CAChC;;;;;oBAKC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI;;eAExB;gBACH,CAAC,CAAC,IAAI;YACN,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAClB,CAAC,CAAC,IAAI,CAAA;;yBAEO,IAAI,CAAC,QAAQ;;wDAEkB,kBAAkB,CACtD,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,GAAG,CAC/B;;;;;oBAKC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;;eAEnD;gBACH,CAAC,CAAC,IAAI;YACN,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAY,EAAE,EAAE;gBACtC,OAAO,IAAI,CAAA;;;;wCAIiB,KAAK,CAAC,IAAI;uBAC3B,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;;;;kBAIpD,KAAK,CAAC,IAAI;;aAEf,CAAC;YACJ,CAAC,CAAC;;OAEL,CAAC;SACH;aAAM;YACL,OAAO,IAAI,CAAC;SACb;IACH,CAAC;CACF","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { Group } from '../interfaces';\nimport { Icon } from '../utils';\nimport { ContactStoreElement } from './ContactStoreElement';\n\nconst STATUS = {\n  stopped: { name: 'Stopped', icon: 'x-octagon' },\n  blocked: { name: 'Blocked', icon: 'slash' },\n  archived: { name: 'Archived', icon: 'archive' },\n};\n\nexport class ContactBadges extends ContactStoreElement {\n  static get styles() {\n    return css`\n      temba-label {\n        margin: 0.3em;\n      }\n\n      .badges {\n        display: flex;\n        flex-wrap: wrap;\n      }\n    `;\n  }\n\n  public render(): TemplateResult {\n    if (this.data) {\n      const status = STATUS[this.data.status];\n\n      return html`\n        <div class=\"badges\">\n          ${status && this.data.status !== 'active'\n            ? html`\n                <temba-label\n                  icon=\"${status.icon}\"\n                  onclick=\"goto(event)\"\n                  href=\"/contact/${status.name.toLowerCase()}\"\n                  secondary\n                  clickable\n                  shadow\n                >\n                  ${status.name}\n                </temba-label>\n              `\n            : null}\n          ${this.data.flow\n            ? html`\n                <temba-label\n                  icon=\"flow\"\n                  onclick=\"goto(event)\"\n                  href=\"/contact/?search=flow+%3D+${encodeURIComponent(\n                    '\"' + this.data.flow.name + '\"'\n                  )}\"\n                  clickable\n                  primary\n                  shadow\n                >\n                  ${this.data.flow.name}\n                </temba-label>\n              `\n            : null}\n          ${this.data.language\n            ? html`\n                <temba-label\n                  icon=${Icon.Language}\n                  onclick=\"goto(event)\"\n                  href=\"/contact/?search=language+%3D+${encodeURIComponent(\n                    '\"' + this.data.language + '\"'\n                  )}\"\n                  clickable\n                  primary\n                  shadow\n                >\n                  ${this.store.getLanguageName(this.data.language)}\n                </temba-label>\n              `\n            : null}\n          ${this.data.groups.map((group: Group) => {\n            return html`\n              <temba-label\n                class=\"group\"\n                onclick=\"goto(event)\"\n                href=\"/contact/filter/${group.uuid}/\"\n                icon=${group.is_dynamic ? Icon.SmartGroup : Icon.Group}\n                clickable\n                shadow\n              >\n                ${group.name}\n              </temba-label>\n            `;\n          })}\n        </div>\n      `;\n    } else {\n      return null;\n    }\n  }\n}\n"]}
+{"version":3,"file":"ContactBadges.js","sourceRoot":"","sources":["../../../src/contacts/ContactBadges.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE;IAC/C,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE;IAC3C,QAAQ,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE;CAChD,CAAC;AAEF,MAAM,OAAO,aAAc,SAAQ,mBAAmB;IACpD,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;KAST,CAAC;IACJ,CAAC;IAEM,MAAM;QACX,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAExC,OAAO,IAAI,CAAA;;YAEL,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,QAAQ;gBACvC,CAAC,CAAC,IAAI,CAAA;;0BAEQ,MAAM,CAAC,IAAI;;mCAEF,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE;;;;;oBAKxC,MAAM,CAAC,IAAI;;eAEhB;gBACH,CAAC,CAAC,IAAI;YACN,IAAI,CAAC,IAAI,CAAC,IAAI;gBACd,CAAC,CAAC,IAAI,CAAA;;;;oDAIkC,kBAAkB,CAClD,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,GAAG,CAChC;;;;;oBAKC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI;;eAExB;gBACH,CAAC,CAAC,IAAI;YACN,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAClB,CAAC,CAAC,IAAI,CAAA;;yBAEO,IAAI,CAAC,QAAQ;;wDAEkB,kBAAkB,CACtD,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,GAAG,CAC/B;;;;;oBAKC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;;eAEnD;gBACH,CAAC,CAAC,IAAI;YACN,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAY,EAAE,EAAE;gBACtC,OAAO,IAAI,CAAA;;;;wCAIiB,KAAK,CAAC,IAAI;uBAC3B,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;;;;kBAIrD,KAAK,CAAC,IAAI;;aAEf,CAAC;YACJ,CAAC,CAAC;;OAEL,CAAC;SACH;aAAM;YACL,OAAO,IAAI,CAAC;SACb;IACH,CAAC;CACF","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { Group } from '../interfaces';\nimport { Icon } from '../vectoricon';\nimport { ContactStoreElement } from './ContactStoreElement';\n\nconst STATUS = {\n  stopped: { name: 'Stopped', icon: 'x-octagon' },\n  blocked: { name: 'Blocked', icon: 'slash' },\n  archived: { name: 'Archived', icon: 'archive' },\n};\n\nexport class ContactBadges extends ContactStoreElement {\n  static get styles() {\n    return css`\n      temba-label {\n        margin: 0.3em;\n      }\n\n      .badges {\n        display: flex;\n        flex-wrap: wrap;\n      }\n    `;\n  }\n\n  public render(): TemplateResult {\n    if (this.data) {\n      const status = STATUS[this.data.status];\n\n      return html`\n        <div class=\"badges\">\n          ${status && this.data.status !== 'active'\n            ? html`\n                <temba-label\n                  icon=\"${status.icon}\"\n                  onclick=\"goto(event)\"\n                  href=\"/contact/${status.name.toLowerCase()}\"\n                  secondary\n                  clickable\n                  shadow\n                >\n                  ${status.name}\n                </temba-label>\n              `\n            : null}\n          ${this.data.flow\n            ? html`\n                <temba-label\n                  icon=\"flow\"\n                  onclick=\"goto(event)\"\n                  href=\"/contact/?search=flow+%3D+${encodeURIComponent(\n                    '\"' + this.data.flow.name + '\"'\n                  )}\"\n                  clickable\n                  primary\n                  shadow\n                >\n                  ${this.data.flow.name}\n                </temba-label>\n              `\n            : null}\n          ${this.data.language\n            ? html`\n                <temba-label\n                  icon=${Icon.language}\n                  onclick=\"goto(event)\"\n                  href=\"/contact/?search=language+%3D+${encodeURIComponent(\n                    '\"' + this.data.language + '\"'\n                  )}\"\n                  clickable\n                  primary\n                  shadow\n                >\n                  ${this.store.getLanguageName(this.data.language)}\n                </temba-label>\n              `\n            : null}\n          ${this.data.groups.map((group: Group) => {\n            return html`\n              <temba-label\n                class=\"group\"\n                onclick=\"goto(event)\"\n                href=\"/contact/filter/${group.uuid}/\"\n                icon=${group.is_dynamic ? Icon.group_smart : Icon.group}\n                clickable\n                shadow\n              >\n                ${group.name}\n              </temba-label>\n            `;\n          })}\n        </div>\n      `;\n    } else {\n      return null;\n    }\n  }\n}\n"]}

package/out-tsc/src/contacts/ContactChat.js

@@ -2,8 +2,9 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { property } from 'lit/decorators';
 import { CustomEventType } from '../interfaces';
-import { COOKIE_KEYS, getCookieBoolean, Icon, postJSON, setCookie, } from '../utils';
+import { COOKIE_KEYS, getCookieBoolean, postJSON, setCookie } from '../utils';
 import { ContactStoreElement } from './ContactStoreElement';
+import { Icon } from '../vectoricon';
 const DEFAULT_REFRESH = 10000;
 export class ContactChat extends ContactStoreElement {
     constructor() {
@@ -350,7 +351,7 @@ export class ContactChat extends ContactStoreElement {
                     <temba-icon
                       id="details-button"
                       name="${this.showDetails
-                    ? Icon.MenuCollapse
+                    ? Icon.menu_collapse
                     : 'layout-left'}"
                       @click="${this.handleDetailSlider}"
                       clickable
@@ -366,7 +367,7 @@ export class ContactChat extends ContactStoreElement {
                         >
                           <temba-icon
                             id="assign-button"
-                            name="${Icon.Users}"
+                            name="${Icon.users}"
                             @click="${() => {
                         const modax = this.shadowRoot.getElementById('assign-dialog');
                         modax.open = true;
@@ -381,7 +382,7 @@ export class ContactChat extends ContactStoreElement {
                         >
                           <temba-icon
                             id="add-note-button"
-                            name="${Icon.AddNote}"
+                            name="${Icon.add_note}"
                             @click="${() => {
                         const note = this.shadowRoot.getElementById('note-dialog');
                         note.open = true;

package/out-tsc/src/contacts/ContactChat.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactChat.js","sourceRoot":"","sources":["../../../src/contacts/ContactChat.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAW,eAAe,EAAU,MAAM,eAAe,CAAC;AACjE,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,SAAS,GACV,MAAM,UAAU,CAAC;AAKlB,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,eAAe,GAAG,KAAK,CAAC;AAE9B,MAAM,OAAO,WAAY,SAAQ,mBAAmB;IAuLlD;QACE,KAAK,EAAE,CAAC;QA3BV,qBAAgB,GAAG,uBAAuB,CAAC;QAG3C,gBAAW,GAAG,EAAE,CAAC;QAGjB,gBAAW,GAAG,EAAE,CAAC;QAGjB,gBAAW,GAAG,IAAI,CAAC;QAGnB,YAAO,GAAG,KAAK,CAAC;QAGhB,YAAO,GAAG,KAAK,CAAC;QAGhB,kBAAa,GAAW,IAAI,CAAC;QAG7B,mBAAc,GAAY,IAAI,CAAC;QAG/B,UAAK,GAAG,EAAE,CAAC;QAOX,oBAAe,GAAG,IAAI,CAAC;QAHrB,IAAI,CAAC,WAAW,GAAG,gBAAgB,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC;IACvE,CAAC;IAzLM,MAAM,KAAK,MAAM;QACtB,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoJT,CAAC;IACJ,CAAC;IAuCM,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;gBACtC,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE;oBACtD,OAAO;iBACR;gBACD,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,CAAC,EAAE,eAAe,CAAC,CAAC;SACrB;IACH,CAAC;IAEM,oBAAoB;QACzB,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,aAAa,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SACrC;IACH,CAAC;IAEM,iBAAiB;QACtB,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAClC,uBAAuB,CACN,CAAC;IACtB,CAAC;IAEM,OAAO,CAAC,cAAc,GAAG,KAAK;QACnC,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAChD,IAAI,cAAc,EAAE;YAClB,IAAI,cAAc,EAAE;gBAClB,cAAc,CAAC,cAAc,EAAE,CAAC;aACjC;YACD,cAAc,CAAC,OAAO,EAAE,CAAC;SAC1B;IACH,CAAC;IAEM,OAAO,CAAC,iBAAmC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,yCAAyC;QACzC,IACE,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC;YAC7B,iBAAiB,CAAC,GAAG,CAAC,gBAAgB,CAAC,EACvC;YACA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC;YAChC,+BAA+B;YAC/B,MAAM,WAAW,GAAG,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;YACrD,IACE,CAAC,WAAW;gBACZ,CAAC,IAAI,CAAC,cAAc;oBAClB,IAAI,CAAC,cAAc,CAAC,MAAM;oBAC1B,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,KAAK,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D;gBACA,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAC9C,kBAAkB,CACL,CAAC;gBAChB,IAAI,UAAU,EAAE;oBACd,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;wBACrB,UAAU,CAAC,KAAK,EAAE,CAAC;oBACrB,CAAC,EAAE,CAAC,CAAC,CAAC;iBACP;aACF;SACF;IACH,CAAC;IAEO,gBAAgB,CAAC,KAAY;QACnC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,MAAM,IAAI,GAAG,KAAK,CAAC,aAA0B,CAAC;QAC9C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC;IAChC,CAAC;IAEO,YAAY;QAClB,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;QACrC,QAAQ,CAAC,6BAA6B,EAAE;YACtC,OAAO,EAAE,CAAC,IAAI,CAAC;YACf,MAAM,EAAE,QAAQ;SACjB,CAAC;aACC,IAAI,CAAC,GAAG,EAAE;YACT,IAAI,CAAC,OAAO,EAAE,CAAC;YACf,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,cAAc,EAAE;gBACnD,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE;aACjC,CAAC,CAAC;QACL,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,QAAa,EAAE,EAAE;YACvB,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAC1B,CAAC,CAAC,CAAC;IACP,CAAC;IAEO,UAAU;QAChB,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;YACpC,IAAI,EAAE,IAAI,CAAC,WAAW;SACvB,CAAC;QAEF,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;SAC7C;QAED,QAAQ,CAAC,yBAAyB,EAAE,OAAO,CAAC;aACzC,IAAI,CAAC,GAAG,EAAE;YACT,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;YACtB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,CAAC,EAAE;YACX,wBAAwB;YACxB,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACrB,CAAC,CAAC,CAAC;IACP,CAAC;IAEO,oBAAoB;QAC1B,IAAI,CAAC,OAAO,EAAE,CAAC;QACf,IAAI,CAAC,iBAAiB,EAAE,CAAC,4BAA4B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACpE,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;QACrC,SAAS,CAAC,WAAW,CAAC,mBAAmB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAC/D,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;4BAGa,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;;;YAG9C,IAAI,CAAC,cAAc;YACnB,CAAC,CAAC,IAAI,CAAA;4BACU,IAAI,CAAC,cAAc,CAAC,IAAI;+BACrB,IAAI,CAAC,cAAc;8BAE5B,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,IACjD;+BAEE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,IACtD;6BACS,IAAI,CAAC,KAAK;;;oBAInB,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,SAAS;gBAChD,CAAC,CAAC,IAAI,CAAA;;;;qCAIS,IAAI,CAAC,YAAY;;+BAEvB;gBACT,CAAC,CAAC,IAAI,CAAA;2CACe,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;mCAClC,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,QAAQ;oBAC9C,CAAC,CAAC,cAAc;oBAChB,CAAC,CAAC,EAAE;;;sCAGM,IAAI,CAAC,gBAAgB;qCACtB,IAAI,CAAC,WAAW;uCACd,CAAC,CAAgB,EAAE,EAAE;oBAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE;wBACpC,MAAM,IAAI,GAAG,CAAC,CAAC,MAAoB,CAAC;wBACpC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE;4BAC7B,IAAI,CAAC,UAAU,EAAE,CAAC;4BAClB,CAAC,CAAC,cAAc,EAAE,CAAC;4BACnB,CAAC,CAAC,eAAe,EAAE,CAAC;yBACrB;qBACF;gBACH,CAAC;;;;;;;qCAOQ,IAAI,CAAC,UAAU;wCACZ,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC;;+BAG1D;yBACO;YACb,CAAC,CAAC,IAAI;;;;QAIV,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA,GACF,IAAI,CAAC,cAAc;gBACjB,CAAC,CAAC,IAAI,CAAA;;2BAEO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;6BAE9B,IAAI,CAAC,WAAW;4BACjB,IAAI,CAAC,aAAa;6BACjB,IAAI,CAAC,cAAc;0CACN;gBAC5B,CAAC,CAAC,IACN;;8BAEoB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;YAElD,IAAI,CAAC,cAAc;gBACjB,CAAC,CAAC,IAAI,CAAA;;;4BAGQ,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc;;;;;;8BAMhD,IAAI,CAAC,WAAW;oBACtB,CAAC,CAAC,IAAI,CAAC,YAAY;oBACnB,CAAC,CAAC,aAAa;gCACP,IAAI,CAAC,kBAAkB;;;;;;oBAMnC,IAAI,CAAC,aAAa;oBAClB,CAAC,CAAC,IAAI,CAAA;;;;;;;oCAOU,IAAI,CAAC,KAAK;sCACR,GAAG,EAAE;wBACb,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,cAAc,CAC1C,eAAe,CACP,CAAC;wBACX,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;oBACpB,CAAC;;;;;;;;;;;oCAWO,IAAI,CAAC,OAAO;sCACV,GAAG,EAAE;wBACb,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,cAAc,CACzC,aAAa,CACL,CAAC;wBACX,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;oBACnB,CAAC;;;qCAGQ;oBACjB,CAAC,CAAC,IAAI;iBACT;gBACH,CAAC,CAAC,IACN;;;;QAKF,IAAI,CAAC,aAAa;gBAChB,CAAC,CAAC,IAAI,CAAA;;;iCAGiB,IAAI,CAAC,OAAO;uCACN,IAAI,CAAC,aAAa,CAAC,IAAI;;;;;iCAK7B,IAAI,CAAC,oBAAoB;yCACjB,IAAI,CAAC,aAAa,CAAC,IAAI;6BACnC;gBACnB,CAAC,CAAC,IACN,EAAE;YACA,CAAC,CAAC,IAAI;KACT,CAAC;IACJ,CAAC;CACF;AA3TC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;+CAC7B;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDACgB;AAG3C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACE;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACI;AAG/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAChB","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { Contact, CustomEventType, Ticket } from '../interfaces';\nimport {\n  COOKIE_KEYS,\n  getCookieBoolean,\n  Icon,\n  postJSON,\n  setCookie,\n} from '../utils';\nimport { TextInput } from '../textinput/TextInput';\nimport { Completion } from '../completion/Completion';\nimport { ContactHistory } from './ContactHistory';\nimport { Modax } from '../dialog/Modax';\nimport { ContactStoreElement } from './ContactStoreElement';\n\nconst DEFAULT_REFRESH = 10000;\n\nexport class ContactChat extends ContactStoreElement {\n  public static get styles() {\n    return css`\n      .left-pane {\n        box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0);\n        transition: box-shadow 600ms linear;\n      }\n\n      .left-pane.open {\n        z-index: 1000;\n      }\n\n      :host {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: row;\n        min-height: 0;\n        border-radius: var(--curvature);\n      }\n\n      .chat-wrapper {\n        display: flex;\n        flex-grow: 1;\n        flex-direction: column;\n        overflow: hidden;\n        min-height: 0;\n      }\n\n      temba-contact-history {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n      }\n\n      .chatbox {\n        padding: 1em;\n        background: #f2f2f2;\n        border-top: 3px solid #e1e1e1;\n        display: flex;\n        flex-direction: column;\n        z-index: 3;\n        border-bottom-left-radius: var(--curvature);\n        border-bottom-right-radius: var(--curvature);\n      }\n\n      .chatbox.full {\n        border-bottom-right-radius: 0 !important;\n      }\n\n      .closed-footer {\n        padding: 1em;\n        background: #f2f2f2;\n        border-top: 3px solid #e1e1e1;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n      }\n\n      temba-completion {\n        --textarea-height: 2.5em;\n      }\n\n      a {\n        color: var(--color-link-primary);\n      }\n\n      a:hover {\n        text-decoration: underline;\n        color: var(--color-link-primary-hover);\n      }\n\n      temba-button#send-button {\n        --button-y: 1px;\n        --button-x: 12px;\n        margin-top: 0.8em;\n        align-self: flex-end;\n      }\n\n      temba-button#reopen-button {\n        --button-y: 1px;\n        --button-x: 12px;\n      }\n\n      .toolbar {\n        position: relative;\n        width: 2.5em;\n        background: #e6e6e6;\n        transition: all 600ms ease-in;\n        z-index: 10;\n        flex-shrink: 0;\n        border-top-right-radius: var(--curvature);\n        border-bottom-right-radius: var(--curvature);\n        padding: 0.5em 0;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        overflow: hidden;\n      }\n\n      .toolbar temba-icon {\n        fill: rgb(60, 60, 60);\n        margin-bottom: 0.5em;\n      }\n\n      .toolbar.closed {\n        box-shadow: inset 10px 0px 10px -11px rgb(0 0 0 / 15%);\n      }\n\n      temba-contact-details {\n        flex-basis: 16em;\n        flex-grow: 0;\n        flex-shrink: 0;\n        transition: margin 600ms cubic-bezier(0.68, -0.55, 0.265, 1.05),\n          opacity 600ms ease-in-out 200ms;\n        z-index: 5;\n      }\n\n      temba-contact-details.hidden {\n        margin-right: -16em;\n        opacity: 0;\n      }\n\n      @media only screen and (max-width: 768px) {\n        temba-contact-details {\n          flex-basis: 12em;\n          flex-shrink: 0;\n        }\n\n        temba-contact-details.hidden {\n          margin-right: -12em;\n        }\n      }\n\n      #close-button,\n      #open-button {\n        margin-top: 1em;\n      }\n\n      #details-button {\n        margin-top: 0.25em;\n        transform: rotate(180deg);\n      }\n\n      #note-dialog,\n      #assign-dialog {\n        --header-bg: rgb(255, 249, 194);\n        --header-text: #555;\n        --textarea-height: 5em;\n      }\n    `;\n  }\n\n  @property({ type: String, attribute: 'ticket' })\n  ticketUUID: string;\n\n  @property({ type: String })\n  contactsEndpoint = '/api/v2/contacts.json';\n\n  @property({ type: String })\n  currentChat = '';\n\n  @property({ type: String })\n  currentNote = '';\n\n  @property({ type: Boolean })\n  showDetails = true;\n\n  @property({ type: Boolean })\n  toolbar = false;\n\n  @property({ type: Boolean })\n  monitor = false;\n\n  @property({ type: Object })\n  currentTicket: Ticket = null;\n\n  @property({ type: Object })\n  currentContact: Contact = null;\n\n  @property({ type: String })\n  agent = '';\n\n  constructor() {\n    super();\n    this.showDetails = getCookieBoolean(COOKIE_KEYS.TICKET_SHOW_DETAILS);\n  }\n\n  refreshInterval = null;\n\n  public connectedCallback() {\n    super.connectedCallback();\n    if (this.monitor) {\n      this.refreshInterval = setInterval(() => {\n        if (this.currentTicket && this.currentTicket.closed_on) {\n          return;\n        }\n        this.refresh();\n      }, DEFAULT_REFRESH);\n    }\n  }\n\n  public disconnectedCallback() {\n    if (this.refreshInterval) {\n      clearInterval(this.refreshInterval);\n    }\n  }\n\n  public getContactHistory(): ContactHistory {\n    return this.shadowRoot.querySelector(\n      'temba-contact-history'\n    ) as ContactHistory;\n  }\n\n  public refresh(scrollToBottom = false): void {\n    const contactHistory = this.getContactHistory();\n    if (contactHistory) {\n      if (scrollToBottom) {\n        contactHistory.scrollToBottom();\n      }\n      contactHistory.refresh();\n    }\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    // if we don't have an endpoint infer one\n    if (\n      changedProperties.has('data') ||\n      changedProperties.has('currentContact')\n    ) {\n      this.currentContact = this.data;\n      // focus our completion on load\n      const prevContact = changedProperties.get('contact');\n      if (\n        !prevContact ||\n        (this.currentContact &&\n          this.currentContact.ticket &&\n          this.currentContact.ticket.uuid !== prevContact.ticket.uuid)\n      ) {\n        const completion = this.shadowRoot.querySelector(\n          'temba-completion'\n        ) as Completion;\n        if (completion) {\n          window.setTimeout(() => {\n            completion.click();\n          }, 0);\n        }\n      }\n    }\n  }\n\n  private handleChatChange(event: Event) {\n    event.stopPropagation();\n    event.preventDefault();\n\n    const chat = event.currentTarget as TextInput;\n    this.currentChat = chat.value;\n  }\n\n  private handleReopen() {\n    const uuid = this.currentTicket.uuid;\n    postJSON(`/api/v2/ticket_actions.json`, {\n      tickets: [uuid],\n      action: 'reopen',\n    })\n      .then(() => {\n        this.refresh();\n        this.fireCustomEvent(CustomEventType.ContentChanged, {\n          ticket: { uuid, status: 'open' },\n        });\n      })\n      .catch((response: any) => {\n        console.error(response);\n      });\n  }\n\n  private handleSend() {\n    const payload = {\n      contacts: [this.currentContact.uuid],\n      text: this.currentChat,\n    };\n\n    if (this.currentTicket) {\n      payload['ticket'] = this.currentTicket.uuid;\n    }\n\n    postJSON(`/api/v2/broadcasts.json`, payload)\n      .then(() => {\n        this.currentChat = '';\n        this.refresh(true);\n      })\n      .catch(err => {\n        // error message dialog?\n        console.error(err);\n      });\n  }\n\n  private handleTicketAssigned() {\n    this.refresh();\n    this.getContactHistory().checkForAgentAssignmentEvent(this.agent);\n  }\n\n  private handleDetailSlider(): void {\n    this.showDetails = !this.showDetails;\n    setCookie(COOKIE_KEYS.TICKET_SHOW_DETAILS, this.showDetails);\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div\n        style=\"flex-grow: 1; margin-right: 0em; display:flex; flex-direction:row; min-height: 0;\"\n        class=\"left-pane  ${this.showDetails ? 'open' : ''}\"\n      >\n        <div class=\"chat-wrapper\">\n          ${this.currentContact\n            ? html`<temba-contact-history\n                    .uuid=${this.currentContact.uuid}\n                    .contact=${this.currentContact}\n                    .ticket=${\n                      this.currentTicket ? this.currentTicket.uuid : null\n                    }\n                    .endDate=${\n                      this.currentTicket ? this.currentTicket.closed_on : null\n                    }\n                    .agent=${this.agent}\n                  ></temba-contact-history>\n\n                  ${\n                    this.currentTicket && this.currentTicket.closed_on\n                      ? html`<div class=\"closed-footer\">\n                          <temba-button\n                            id=\"reopen-button\"\n                            name=\"Reopen\"\n                            @click=${this.handleReopen}\n                          ></temba-button>\n                        </div>`\n                      : html` <div\n                          class=\"chatbox ${this.toolbar ? 'full' : ''}\"\n                          style=\"${this.currentContact.status !== 'active'\n                            ? 'display:none'\n                            : ''}\"\n                        >\n                          <temba-completion\n                            @change=${this.handleChatChange}\n                            .value=${this.currentChat}\n                            @keydown=${(e: KeyboardEvent) => {\n                              if (e.key === 'Enter' && !e.shiftKey) {\n                                const chat = e.target as Completion;\n                                if (!chat.hasVisibleOptions()) {\n                                  this.handleSend();\n                                  e.preventDefault();\n                                  e.stopPropagation();\n                                }\n                              }\n                            }}\n                            textarea\n                          >\n                          </temba-completion>\n                          <temba-button\n                            id=\"send-button\"\n                            name=\"Send\"\n                            @click=${this.handleSend}\n                            ?disabled=${this.currentChat.trim().length === 0}\n                          ></temba-button>\n                        </div>`\n                  }\n                  </div>`\n            : null}\n        </div>\n      </div>\n\n      ${this.toolbar\n        ? html`${\n            this.currentContact\n              ? html`<temba-contact-details\n                  style=\"z-index: 10\"\n                  class=\"${this.showDetails ? '' : 'hidden'}\"\n                  showGroups=\"true\"\n                  .visible=${this.showDetails}\n                  .ticket=${this.currentTicket}\n                  .contact=${this.currentContact}\n                ></temba-contact-details>`\n              : null\n          }\n\n        <div class=\"toolbar ${this.showDetails ? '' : 'closed'}\">\n          ${\n            this.currentContact\n              ? html`\n                  <temba-tip\n                    style=\"margin-top:5px\"\n                    text=\"${this.showDetails ? 'Hide Details' : 'Show Details'}\"\n                    position=\"left\"\n                    hideOnChange\n                  >\n                    <temba-icon\n                      id=\"details-button\"\n                      name=\"${this.showDetails\n                        ? Icon.MenuCollapse\n                        : 'layout-left'}\"\n                      @click=\"${this.handleDetailSlider}\"\n                      clickable\n                      animatechange=\"spin\"\n                    ></temba-icon>\n                  </temba-tip>\n\n                  ${this.currentTicket\n                    ? html`<temba-tip\n                          style=\"margin-top:5px\"\n                          text=\"Assign\"\n                          position=\"left\"\n                        >\n                          <temba-icon\n                            id=\"assign-button\"\n                            name=\"${Icon.Users}\"\n                            @click=\"${() => {\n                              const modax = this.shadowRoot.getElementById(\n                                'assign-dialog'\n                              ) as Modax;\n                              modax.open = true;\n                            }}\"\n                            clickable\n                          ></temba-icon>\n                        </temba-tip>\n                        <temba-tip\n                          style=\"margin-top:5px\"\n                          text=\"Add Note\"\n                          position=\"left\"\n                        >\n                          <temba-icon\n                            id=\"add-note-button\"\n                            name=\"${Icon.AddNote}\"\n                            @click=\"${() => {\n                              const note = this.shadowRoot.getElementById(\n                                'note-dialog'\n                              ) as Modax;\n                              note.open = true;\n                            }}\"\n                            clickable\n                          ></temba-icon>\n                        </temba-tip>`\n                    : null}\n                `\n              : null\n          }\n        </div>\n      </div>\n\n      ${\n        this.currentTicket\n          ? html`<temba-modax\n              header=\"Add Note\"\n              id=\"note-dialog\"\n              @temba-submitted=${this.refresh}\n              endpoint=\"/ticket/note/${this.currentTicket.uuid}/\"\n            ></temba-modax>\n            <temba-modax\n              header=\"Assign Ticket\"\n              id=\"assign-dialog\"\n              @temba-submitted=${this.handleTicketAssigned}\n              endpoint=\"/ticket/assign/${this.currentTicket.uuid}/\"\n            /></temba-modax>`\n          : null\n      }`\n        : null}\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ContactChat.js","sourceRoot":"","sources":["../../../src/contacts/ContactChat.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { Contact, CustomEventType, Ticket } from '../interfaces';\nimport { COOKIE_KEYS, getCookieBoolean, postJSON, setCookie } from '../utils';\nimport { TextInput } from '../textinput/TextInput';\nimport { Completion } from '../completion/Completion';\nimport { ContactHistory } from './ContactHistory';\nimport { Modax } from '../dialog/Modax';\nimport { ContactStoreElement } from './ContactStoreElement';\nimport { Icon } from '../vectoricon';\n\nconst DEFAULT_REFRESH = 10000;\n\nexport class ContactChat extends ContactStoreElement {\n  public static get styles() {\n    return css`\n      .left-pane {\n        box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0);\n        transition: box-shadow 600ms linear;\n      }\n\n      .left-pane.open {\n        z-index: 1000;\n      }\n\n      :host {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: row;\n        min-height: 0;\n        border-radius: var(--curvature);\n      }\n\n      .chat-wrapper {\n        display: flex;\n        flex-grow: 1;\n        flex-direction: column;\n        overflow: hidden;\n        min-height: 0;\n      }\n\n      temba-contact-history {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n      }\n\n      .chatbox {\n        padding: 1em;\n        background: #f2f2f2;\n        border-top: 3px solid #e1e1e1;\n        display: flex;\n        flex-direction: column;\n        z-index: 3;\n        border-bottom-left-radius: var(--curvature);\n        border-bottom-right-radius: var(--curvature);\n      }\n\n      .chatbox.full {\n        border-bottom-right-radius: 0 !important;\n      }\n\n      .closed-footer {\n        padding: 1em;\n        background: #f2f2f2;\n        border-top: 3px solid #e1e1e1;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n      }\n\n      temba-completion {\n        --textarea-height: 2.5em;\n      }\n\n      a {\n        color: var(--color-link-primary);\n      }\n\n      a:hover {\n        text-decoration: underline;\n        color: var(--color-link-primary-hover);\n      }\n\n      temba-button#send-button {\n        --button-y: 1px;\n        --button-x: 12px;\n        margin-top: 0.8em;\n        align-self: flex-end;\n      }\n\n      temba-button#reopen-button {\n        --button-y: 1px;\n        --button-x: 12px;\n      }\n\n      .toolbar {\n        position: relative;\n        width: 2.5em;\n        background: #e6e6e6;\n        transition: all 600ms ease-in;\n        z-index: 10;\n        flex-shrink: 0;\n        border-top-right-radius: var(--curvature);\n        border-bottom-right-radius: var(--curvature);\n        padding: 0.5em 0;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        overflow: hidden;\n      }\n\n      .toolbar temba-icon {\n        fill: rgb(60, 60, 60);\n        margin-bottom: 0.5em;\n      }\n\n      .toolbar.closed {\n        box-shadow: inset 10px 0px 10px -11px rgb(0 0 0 / 15%);\n      }\n\n      temba-contact-details {\n        flex-basis: 16em;\n        flex-grow: 0;\n        flex-shrink: 0;\n        transition: margin 600ms cubic-bezier(0.68, -0.55, 0.265, 1.05),\n          opacity 600ms ease-in-out 200ms;\n        z-index: 5;\n      }\n\n      temba-contact-details.hidden {\n        margin-right: -16em;\n        opacity: 0;\n      }\n\n      @media only screen and (max-width: 768px) {\n        temba-contact-details {\n          flex-basis: 12em;\n          flex-shrink: 0;\n        }\n\n        temba-contact-details.hidden {\n          margin-right: -12em;\n        }\n      }\n\n      #close-button,\n      #open-button {\n        margin-top: 1em;\n      }\n\n      #details-button {\n        margin-top: 0.25em;\n        transform: rotate(180deg);\n      }\n\n      #note-dialog,\n      #assign-dialog {\n        --header-bg: rgb(255, 249, 194);\n        --header-text: #555;\n        --textarea-height: 5em;\n      }\n    `;\n  }\n\n  @property({ type: String, attribute: 'ticket' })\n  ticketUUID: string;\n\n  @property({ type: String })\n  contactsEndpoint = '/api/v2/contacts.json';\n\n  @property({ type: String })\n  currentChat = '';\n\n  @property({ type: String })\n  currentNote = '';\n\n  @property({ type: Boolean })\n  showDetails = true;\n\n  @property({ type: Boolean })\n  toolbar = false;\n\n  @property({ type: Boolean })\n  monitor = false;\n\n  @property({ type: Object })\n  currentTicket: Ticket = null;\n\n  @property({ type: Object })\n  currentContact: Contact = null;\n\n  @property({ type: String })\n  agent = '';\n\n  constructor() {\n    super();\n    this.showDetails = getCookieBoolean(COOKIE_KEYS.TICKET_SHOW_DETAILS);\n  }\n\n  refreshInterval = null;\n\n  public connectedCallback() {\n    super.connectedCallback();\n    if (this.monitor) {\n      this.refreshInterval = setInterval(() => {\n        if (this.currentTicket && this.currentTicket.closed_on) {\n          return;\n        }\n        this.refresh();\n      }, DEFAULT_REFRESH);\n    }\n  }\n\n  public disconnectedCallback() {\n    if (this.refreshInterval) {\n      clearInterval(this.refreshInterval);\n    }\n  }\n\n  public getContactHistory(): ContactHistory {\n    return this.shadowRoot.querySelector(\n      'temba-contact-history'\n    ) as ContactHistory;\n  }\n\n  public refresh(scrollToBottom = false): void {\n    const contactHistory = this.getContactHistory();\n    if (contactHistory) {\n      if (scrollToBottom) {\n        contactHistory.scrollToBottom();\n      }\n      contactHistory.refresh();\n    }\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    // if we don't have an endpoint infer one\n    if (\n      changedProperties.has('data') ||\n      changedProperties.has('currentContact')\n    ) {\n      this.currentContact = this.data;\n      // focus our completion on load\n      const prevContact = changedProperties.get('contact');\n      if (\n        !prevContact ||\n        (this.currentContact &&\n          this.currentContact.ticket &&\n          this.currentContact.ticket.uuid !== prevContact.ticket.uuid)\n      ) {\n        const completion = this.shadowRoot.querySelector(\n          'temba-completion'\n        ) as Completion;\n        if (completion) {\n          window.setTimeout(() => {\n            completion.click();\n          }, 0);\n        }\n      }\n    }\n  }\n\n  private handleChatChange(event: Event) {\n    event.stopPropagation();\n    event.preventDefault();\n\n    const chat = event.currentTarget as TextInput;\n    this.currentChat = chat.value;\n  }\n\n  private handleReopen() {\n    const uuid = this.currentTicket.uuid;\n    postJSON(`/api/v2/ticket_actions.json`, {\n      tickets: [uuid],\n      action: 'reopen',\n    })\n      .then(() => {\n        this.refresh();\n        this.fireCustomEvent(CustomEventType.ContentChanged, {\n          ticket: { uuid, status: 'open' },\n        });\n      })\n      .catch((response: any) => {\n        console.error(response);\n      });\n  }\n\n  private handleSend() {\n    const payload = {\n      contacts: [this.currentContact.uuid],\n      text: this.currentChat,\n    };\n\n    if (this.currentTicket) {\n      payload['ticket'] = this.currentTicket.uuid;\n    }\n\n    postJSON(`/api/v2/broadcasts.json`, payload)\n      .then(() => {\n        this.currentChat = '';\n        this.refresh(true);\n      })\n      .catch(err => {\n        // error message dialog?\n        console.error(err);\n      });\n  }\n\n  private handleTicketAssigned() {\n    this.refresh();\n    this.getContactHistory().checkForAgentAssignmentEvent(this.agent);\n  }\n\n  private handleDetailSlider(): void {\n    this.showDetails = !this.showDetails;\n    setCookie(COOKIE_KEYS.TICKET_SHOW_DETAILS, this.showDetails);\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div\n        style=\"flex-grow: 1; margin-right: 0em; display:flex; flex-direction:row; min-height: 0;\"\n        class=\"left-pane  ${this.showDetails ? 'open' : ''}\"\n      >\n        <div class=\"chat-wrapper\">\n          ${this.currentContact\n            ? html`<temba-contact-history\n                    .uuid=${this.currentContact.uuid}\n                    .contact=${this.currentContact}\n                    .ticket=${\n                      this.currentTicket ? this.currentTicket.uuid : null\n                    }\n                    .endDate=${\n                      this.currentTicket ? this.currentTicket.closed_on : null\n                    }\n                    .agent=${this.agent}\n                  ></temba-contact-history>\n\n                  ${\n                    this.currentTicket && this.currentTicket.closed_on\n                      ? html`<div class=\"closed-footer\">\n                          <temba-button\n                            id=\"reopen-button\"\n                            name=\"Reopen\"\n                            @click=${this.handleReopen}\n                          ></temba-button>\n                        </div>`\n                      : html` <div\n                          class=\"chatbox ${this.toolbar ? 'full' : ''}\"\n                          style=\"${this.currentContact.status !== 'active'\n                            ? 'display:none'\n                            : ''}\"\n                        >\n                          <temba-completion\n                            @change=${this.handleChatChange}\n                            .value=${this.currentChat}\n                            @keydown=${(e: KeyboardEvent) => {\n                              if (e.key === 'Enter' && !e.shiftKey) {\n                                const chat = e.target as Completion;\n                                if (!chat.hasVisibleOptions()) {\n                                  this.handleSend();\n                                  e.preventDefault();\n                                  e.stopPropagation();\n                                }\n                              }\n                            }}\n                            textarea\n                          >\n                          </temba-completion>\n                          <temba-button\n                            id=\"send-button\"\n                            name=\"Send\"\n                            @click=${this.handleSend}\n                            ?disabled=${this.currentChat.trim().length === 0}\n                          ></temba-button>\n                        </div>`\n                  }\n                  </div>`\n            : null}\n        </div>\n      </div>\n\n      ${this.toolbar\n        ? html`${\n            this.currentContact\n              ? html`<temba-contact-details\n                  style=\"z-index: 10\"\n                  class=\"${this.showDetails ? '' : 'hidden'}\"\n                  showGroups=\"true\"\n                  .visible=${this.showDetails}\n                  .ticket=${this.currentTicket}\n                  .contact=${this.currentContact}\n                ></temba-contact-details>`\n              : null\n          }\n\n        <div class=\"toolbar ${this.showDetails ? '' : 'closed'}\">\n          ${\n            this.currentContact\n              ? html`\n                  <temba-tip\n                    style=\"margin-top:5px\"\n                    text=\"${this.showDetails ? 'Hide Details' : 'Show Details'}\"\n                    position=\"left\"\n                    hideOnChange\n                  >\n                    <temba-icon\n                      id=\"details-button\"\n                      name=\"${this.showDetails\n                        ? Icon.menu_collapse\n                        : 'layout-left'}\"\n                      @click=\"${this.handleDetailSlider}\"\n                      clickable\n                      animatechange=\"spin\"\n                    ></temba-icon>\n                  </temba-tip>\n\n                  ${this.currentTicket\n                    ? html`<temba-tip\n                          style=\"margin-top:5px\"\n                          text=\"Assign\"\n                          position=\"left\"\n                        >\n                          <temba-icon\n                            id=\"assign-button\"\n                            name=\"${Icon.users}\"\n                            @click=\"${() => {\n                              const modax = this.shadowRoot.getElementById(\n                                'assign-dialog'\n                              ) as Modax;\n                              modax.open = true;\n                            }}\"\n                            clickable\n                          ></temba-icon>\n                        </temba-tip>\n                        <temba-tip\n                          style=\"margin-top:5px\"\n                          text=\"Add Note\"\n                          position=\"left\"\n                        >\n                          <temba-icon\n                            id=\"add-note-button\"\n                            name=\"${Icon.add_note}\"\n                            @click=\"${() => {\n                              const note = this.shadowRoot.getElementById(\n                                'note-dialog'\n                              ) as Modax;\n                              note.open = true;\n                            }}\"\n                            clickable\n                          ></temba-icon>\n                        </temba-tip>`\n                    : null}\n                `\n              : null\n          }\n        </div>\n      </div>\n\n      ${\n        this.currentTicket\n          ? html`<temba-modax\n              header=\"Add Note\"\n              id=\"note-dialog\"\n              @temba-submitted=${this.refresh}\n              endpoint=\"/ticket/note/${this.currentTicket.uuid}/\"\n            ></temba-modax>\n            <temba-modax\n              header=\"Assign Ticket\"\n              id=\"assign-dialog\"\n              @temba-submitted=${this.handleTicketAssigned}\n              endpoint=\"/ticket/assign/${this.currentTicket.uuid}/\"\n            /></temba-modax>`\n          : null\n      }`\n        : null}\n    `;\n  }\n}\n"]}

package/out-tsc/src/contacts/ContactDetails.js

@@ -2,8 +2,9 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { property } from 'lit/decorators';
 import { RapidElement } from '../RapidElement';
-import { Icon, isDate, timeSince, truncate } from '../utils';
+import { isDate, timeSince, truncate } from '../utils';
 import { BODY_SNIPPET_LENGTH, fetchContact } from './helpers';
+import { Icon } from '../vectoricon';
 export class ContactDetails extends RapidElement {
     constructor() {
         super(...arguments);
@@ -234,7 +235,7 @@ export class ContactDetails extends RapidElement {
                   >
                     ${group.is_dynamic
                         ? html `<temba-icon
-                          name="${Icon.SmartGroup}"
+                          name="${Icon.group_smart}"
                         ></temba-icon>`
                         : null}${group.name}
                   </div>
@@ -288,7 +289,9 @@ export class ContactDetails extends RapidElement {
                   <div style="margin-right:1em;margin-top:-0.5em">
                     ${this.fields.length > 3
                     ? html `<temba-icon
-                          name="chevrons-${this.expandFields ? 'up' : 'down'}"
+                          name="${this.expandFields
+                        ? Icon.arrow_up
+                        : Icon.arrow_down}"
                           @click=${this.handleToggleFields}
                           animateChange="spin"
                           circled

package/out-tsc/src/contacts/ContactDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactDetails.js","sourceRoot":"","sources":["../../../src/contacts/ContactDetails.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { Contact, Group, Ticket } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { Icon, isDate, timeSince, truncate } from '../utils';\nimport { Store } from '../store/Store';\nimport { BODY_SNIPPET_LENGTH, fetchContact } from './helpers';\n\nexport class ContactDetails extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        background: #f9f9f9;\n        display: block;\n        height: 100%;\n        position: relative;\n        overflow: hidden;\n        -webkit-mask-image: -webkit-radial-gradient(white, black);\n      }\n\n      .contact {\n        display: flex;\n        flex-direction: column;\n        align-items: stretch;\n        height: 100%;\n      }\n\n      .wrapper {\n        padding: 0em 1em;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n      }\n\n      a {\n        color: var(--color-link-primary);\n      }\n\n      .field-links {\n        font-size: 0.8em;\n      }\n\n      .contact > .name {\n        font-size: 1.2em;\n        font-weight: 400;\n        padding: 0.5em 0.75em;\n        padding-right: 1em;\n      }\n\n      .group-label temba-icon {\n        display: inline-block;\n        fill: var(--color-text-dark);\n        margin-bottom: -2px;\n        margin-right: 4px;\n      }\n\n      .group-label {\n        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),\n          0 1px 2px 0 rgba(0, 0, 0, 0.06);\n        line-height: 1.25;\n        text-decoration: none;\n        cursor: default;\n        padding-left: 0.5rem;\n        padding-right: 0.5rem;\n        padding-top: 0.25rem;\n        padding-bottom: 0.25rem;\n        display: inline-block;\n        font-size: 0.75rem;\n        font-weight: 400;\n        border-radius: 9999px;\n        background-color: #f1f1f1;\n        color: rgba(0, 0, 0, 0.5);\n        letter-spacing: 0.025em;\n        white-space: nowrap;\n        text-align: center;\n        user-select: none;\n        -webkit-user-select: none;\n        margin-right: 0.75em;\n        margin-bottom: 0.75em;\n      }\n\n      .groups {\n        margin-top: 0.55em;\n        padding: 0px 0.75em;\n        margin-bottom: 0.3em;\n      }\n\n      .start-flow {\n      }\n\n      .actions {\n        margin-top: 16px;\n        border: 0px solid #ddd;\n        border-radius: var(--curvature);\n        padding: 0px;\n      }\n\n      .fields-wrapper {\n        background: #fff;\n        overflow: hidden;\n        margin: 0em -1em;\n\n        display: flex;\n        align-items: stretch;\n        flex-direction: column;\n        transition: all 300ms linear;\n      }\n\n      .fields-wrapper.expanded {\n        flex-grow: 2;\n      }\n\n      .body-wrapper {\n        overflow: hidden;\n      }\n\n      .body {\n        max-height: 200px;\n        overflow-y: auto;\n      }\n\n      .fields {\n        padding: 1em;\n        overflow-y: auto;\n      }\n\n      .fields-wrapper.expanded .fields {\n        flex-grow: 1;\n        height: 0px;\n      }\n\n      .field {\n        border-radius: var(--curvature);\n\n        display: flex;\n        flex-direction: column;\n        margin-bottom: 0.3em;\n      }\n\n      .field .name {\n        margin-right: 8px;\n        font-weight: 400;\n        color: #666;\n        font-size: 0.9em;\n        word-break: break-word;\n      }\n      .field .value {\n        font-size: 0.8em;\n        word-break: break-word;\n      }\n\n      temba-button {\n        margin-top: 5px;\n        display: block;\n        --button-y: 0;\n      }\n    `;\n  }\n\n  // optional display name\n  @property({ type: String })\n  name: string;\n\n  @property({ type: String })\n  uuid: string;\n\n  @property({ type: Object })\n  contact: Contact;\n\n  @property({ attribute: false })\n  flow: any = null;\n\n  // the fields with values for this contact\n  @property({ type: Array })\n  fields: string[] = [];\n\n  @property({ type: String })\n  endpoint: string;\n\n  @property({ type: Boolean })\n  expandFields = false;\n\n  @property({ type: Boolean })\n  expandBody = false;\n\n  @property({ type: Boolean })\n  showGroups = false;\n\n  @property({ type: Boolean })\n  showFlows = false;\n\n  @property({ type: Object })\n  ticket: Ticket = null;\n\n  public updated(changes: Map<string, any>) {\n    super.updated(changes);\n\n    if (changes.has('contact')) {\n      const store: Store = document.querySelector('temba-store');\n      if (this.contact && this.contact.fields) {\n        this.fields = Object.keys(this.contact.fields).filter((key: string) => {\n          const hasField = !!this.contact.fields[key];\n          return hasField && store.getContactField(key).pinned;\n        });\n\n        this.contact.groups.forEach((group: Group) => {\n          group.is_dynamic = store.isDynamicGroup(group.uuid);\n        });\n\n        this.contact.groups.sort((a: Group, b: Group) => {\n          if (a.is_dynamic) {\n            return -1;\n          }\n          if (b.is_dynamic) {\n            return 1;\n          }\n          return a.name.localeCompare(b.name);\n        });\n      }\n    }\n\n    if (changes.has('endpoint')) {\n      this.flow = null;\n      this.expandFields = false;\n      fetchContact(this.endpoint).then((contact: Contact) => {\n        this.contact = contact;\n      });\n    }\n  }\n\n  private handleFlowChanged(evt: CustomEvent) {\n    this.flow = evt.detail.selected as any;\n  }\n\n  private handleToggleFields(): void {\n    this.expandFields = !this.expandFields;\n  }\n\n  private handleExpandBody(): void {\n    this.expandBody = true;\n  }\n\n  private handleHideBody(): void {\n    this.expandBody = false;\n  }\n\n  public render(): TemplateResult {\n    const store: Store = document.querySelector('temba-store');\n\n    let body = this.ticket ? this.ticket.body : null;\n    const showBodyToggle = body ? body.length > BODY_SNIPPET_LENGTH : false;\n    if (\n      !this.expandBody &&\n      this.ticket &&\n      this.ticket.body.length > BODY_SNIPPET_LENGTH\n    ) {\n      body = truncate(this.ticket.body, BODY_SNIPPET_LENGTH);\n    }\n\n    if (this.contact) {\n      return html`<div class=\"contact\">\n        ${this.ticket\n          ? html`<div class=\"name\">${this.name || this.contact.name}</div>`\n          : null}\n        ${this.showGroups && !this.ticket\n          ? html`<div class=\"groups\">\n              ${this.contact.groups.map((group: Group) => {\n                return html`\n                  <div\n                    onclick=\"goto(event)\"\n                    href=\"/contact/filter/${group.uuid}/\"\n                    class=\"group-label\"\n                    style=\"cursor:pointer\"\n                  >\n                    ${group.is_dynamic\n                      ? html`<temba-icon\n                          name=\"${Icon.SmartGroup}\"\n                        ></temba-icon>`\n                      : null}${group.name}\n                  </div>\n                `;\n              })}\n            </div>`\n          : html``}\n\n        <div class=\"wrapper\">\n          ${body\n            ? html`<div class=\"body-wrapper\">\n                <div class=\"body\">${body}</div>\n                <div class=\"field-links\">\n                  ${showBodyToggle\n                    ? !this.expandBody\n                      ? html`<a href=\"#\" @click=\"${this.handleExpandBody}\"\n                          >more</a\n                        >`\n                      : html`<a href=\"#\" @click=\"${this.handleHideBody}\"\n                          >less</a\n                        >`\n                    : null}\n                </div>\n              </div>`\n            : null}\n          ${this.fields.length > 0\n            ? html` <div\n                  class=\"fields-wrapper ${this.expandFields ? 'expanded' : ''}\"\n                >\n                  <div class=\"fields\">\n                    ${this.fields\n                      .slice(0, this.expandFields ? 255 : 3)\n                      .map((key: string) => {\n                        let value = this.contact.fields[key];\n                        if (value) {\n                          if (isDate(value)) {\n                            value = timeSince(new Date(value));\n                          }\n                          return html`<div class=\"field\">\n                            <div class=\"name\">\n                              ${store.getContactField(key).label}\n                            </div>\n                            <div class=\"value\">${value}</div>\n                          </div>`;\n                        }\n                      })}\n                  </div>\n                </div>\n                <div style=\"display:flex;\">\n                  <div style=\"flex-grow:1\"></div>\n                  <div style=\"margin-right:1em;margin-top:-0.5em\">\n                    ${this.fields.length > 3\n                      ? html`<temba-icon\n                          name=\"chevrons-${this.expandFields ? 'up' : 'down'}\"\n                          @click=${this.handleToggleFields}\n                          animateChange=\"spin\"\n                          circled\n                          clickable\n                        ></temba-icon>`\n                      : null}\n                  </div>\n                </div>`\n            : null}\n          <div style=\"flex-grow:1\"></div>\n        </div>\n      </div>`;\n    }\n  }\n}\n"]}
+{"version":3,"file":"ContactDetails.js","sourceRoot":"","sources":["../../../src/contacts/ContactDetails.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { Contact, Group, Ticket } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { isDate, timeSince, truncate } from '../utils';\nimport { Store } from '../store/Store';\nimport { BODY_SNIPPET_LENGTH, fetchContact } from './helpers';\nimport { Icon } from '../vectoricon';\n\nexport class ContactDetails extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        background: #f9f9f9;\n        display: block;\n        height: 100%;\n        position: relative;\n        overflow: hidden;\n        -webkit-mask-image: -webkit-radial-gradient(white, black);\n      }\n\n      .contact {\n        display: flex;\n        flex-direction: column;\n        align-items: stretch;\n        height: 100%;\n      }\n\n      .wrapper {\n        padding: 0em 1em;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n      }\n\n      a {\n        color: var(--color-link-primary);\n      }\n\n      .field-links {\n        font-size: 0.8em;\n      }\n\n      .contact > .name {\n        font-size: 1.2em;\n        font-weight: 400;\n        padding: 0.5em 0.75em;\n        padding-right: 1em;\n      }\n\n      .group-label temba-icon {\n        display: inline-block;\n        fill: var(--color-text-dark);\n        margin-bottom: -2px;\n        margin-right: 4px;\n      }\n\n      .group-label {\n        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),\n          0 1px 2px 0 rgba(0, 0, 0, 0.06);\n        line-height: 1.25;\n        text-decoration: none;\n        cursor: default;\n        padding-left: 0.5rem;\n        padding-right: 0.5rem;\n        padding-top: 0.25rem;\n        padding-bottom: 0.25rem;\n        display: inline-block;\n        font-size: 0.75rem;\n        font-weight: 400;\n        border-radius: 9999px;\n        background-color: #f1f1f1;\n        color: rgba(0, 0, 0, 0.5);\n        letter-spacing: 0.025em;\n        white-space: nowrap;\n        text-align: center;\n        user-select: none;\n        -webkit-user-select: none;\n        margin-right: 0.75em;\n        margin-bottom: 0.75em;\n      }\n\n      .groups {\n        margin-top: 0.55em;\n        padding: 0px 0.75em;\n        margin-bottom: 0.3em;\n      }\n\n      .start-flow {\n      }\n\n      .actions {\n        margin-top: 16px;\n        border: 0px solid #ddd;\n        border-radius: var(--curvature);\n        padding: 0px;\n      }\n\n      .fields-wrapper {\n        background: #fff;\n        overflow: hidden;\n        margin: 0em -1em;\n\n        display: flex;\n        align-items: stretch;\n        flex-direction: column;\n        transition: all 300ms linear;\n      }\n\n      .fields-wrapper.expanded {\n        flex-grow: 2;\n      }\n\n      .body-wrapper {\n        overflow: hidden;\n      }\n\n      .body {\n        max-height: 200px;\n        overflow-y: auto;\n      }\n\n      .fields {\n        padding: 1em;\n        overflow-y: auto;\n      }\n\n      .fields-wrapper.expanded .fields {\n        flex-grow: 1;\n        height: 0px;\n      }\n\n      .field {\n        border-radius: var(--curvature);\n\n        display: flex;\n        flex-direction: column;\n        margin-bottom: 0.3em;\n      }\n\n      .field .name {\n        margin-right: 8px;\n        font-weight: 400;\n        color: #666;\n        font-size: 0.9em;\n        word-break: break-word;\n      }\n      .field .value {\n        font-size: 0.8em;\n        word-break: break-word;\n      }\n\n      temba-button {\n        margin-top: 5px;\n        display: block;\n        --button-y: 0;\n      }\n    `;\n  }\n\n  // optional display name\n  @property({ type: String })\n  name: string;\n\n  @property({ type: String })\n  uuid: string;\n\n  @property({ type: Object })\n  contact: Contact;\n\n  @property({ attribute: false })\n  flow: any = null;\n\n  // the fields with values for this contact\n  @property({ type: Array })\n  fields: string[] = [];\n\n  @property({ type: String })\n  endpoint: string;\n\n  @property({ type: Boolean })\n  expandFields = false;\n\n  @property({ type: Boolean })\n  expandBody = false;\n\n  @property({ type: Boolean })\n  showGroups = false;\n\n  @property({ type: Boolean })\n  showFlows = false;\n\n  @property({ type: Object })\n  ticket: Ticket = null;\n\n  public updated(changes: Map<string, any>) {\n    super.updated(changes);\n\n    if (changes.has('contact')) {\n      const store: Store = document.querySelector('temba-store');\n      if (this.contact && this.contact.fields) {\n        this.fields = Object.keys(this.contact.fields).filter((key: string) => {\n          const hasField = !!this.contact.fields[key];\n          return hasField && store.getContactField(key).pinned;\n        });\n\n        this.contact.groups.forEach((group: Group) => {\n          group.is_dynamic = store.isDynamicGroup(group.uuid);\n        });\n\n        this.contact.groups.sort((a: Group, b: Group) => {\n          if (a.is_dynamic) {\n            return -1;\n          }\n          if (b.is_dynamic) {\n            return 1;\n          }\n          return a.name.localeCompare(b.name);\n        });\n      }\n    }\n\n    if (changes.has('endpoint')) {\n      this.flow = null;\n      this.expandFields = false;\n      fetchContact(this.endpoint).then((contact: Contact) => {\n        this.contact = contact;\n      });\n    }\n  }\n\n  private handleFlowChanged(evt: CustomEvent) {\n    this.flow = evt.detail.selected as any;\n  }\n\n  private handleToggleFields(): void {\n    this.expandFields = !this.expandFields;\n  }\n\n  private handleExpandBody(): void {\n    this.expandBody = true;\n  }\n\n  private handleHideBody(): void {\n    this.expandBody = false;\n  }\n\n  public render(): TemplateResult {\n    const store: Store = document.querySelector('temba-store');\n\n    let body = this.ticket ? this.ticket.body : null;\n    const showBodyToggle = body ? body.length > BODY_SNIPPET_LENGTH : false;\n    if (\n      !this.expandBody &&\n      this.ticket &&\n      this.ticket.body.length > BODY_SNIPPET_LENGTH\n    ) {\n      body = truncate(this.ticket.body, BODY_SNIPPET_LENGTH);\n    }\n\n    if (this.contact) {\n      return html`<div class=\"contact\">\n        ${this.ticket\n          ? html`<div class=\"name\">${this.name || this.contact.name}</div>`\n          : null}\n        ${this.showGroups && !this.ticket\n          ? html`<div class=\"groups\">\n              ${this.contact.groups.map((group: Group) => {\n                return html`\n                  <div\n                    onclick=\"goto(event)\"\n                    href=\"/contact/filter/${group.uuid}/\"\n                    class=\"group-label\"\n                    style=\"cursor:pointer\"\n                  >\n                    ${group.is_dynamic\n                      ? html`<temba-icon\n                          name=\"${Icon.group_smart}\"\n                        ></temba-icon>`\n                      : null}${group.name}\n                  </div>\n                `;\n              })}\n            </div>`\n          : html``}\n\n        <div class=\"wrapper\">\n          ${body\n            ? html`<div class=\"body-wrapper\">\n                <div class=\"body\">${body}</div>\n                <div class=\"field-links\">\n                  ${showBodyToggle\n                    ? !this.expandBody\n                      ? html`<a href=\"#\" @click=\"${this.handleExpandBody}\"\n                          >more</a\n                        >`\n                      : html`<a href=\"#\" @click=\"${this.handleHideBody}\"\n                          >less</a\n                        >`\n                    : null}\n                </div>\n              </div>`\n            : null}\n          ${this.fields.length > 0\n            ? html` <div\n                  class=\"fields-wrapper ${this.expandFields ? 'expanded' : ''}\"\n                >\n                  <div class=\"fields\">\n                    ${this.fields\n                      .slice(0, this.expandFields ? 255 : 3)\n                      .map((key: string) => {\n                        let value = this.contact.fields[key];\n                        if (value) {\n                          if (isDate(value)) {\n                            value = timeSince(new Date(value));\n                          }\n                          return html`<div class=\"field\">\n                            <div class=\"name\">\n                              ${store.getContactField(key).label}\n                            </div>\n                            <div class=\"value\">${value}</div>\n                          </div>`;\n                        }\n                      })}\n                  </div>\n                </div>\n                <div style=\"display:flex;\">\n                  <div style=\"flex-grow:1\"></div>\n                  <div style=\"margin-right:1em;margin-top:-0.5em\">\n                    ${this.fields.length > 3\n                      ? html`<temba-icon\n                          name=\"${this.expandFields\n                            ? Icon.arrow_up\n                            : Icon.arrow_down}\"\n                          @click=${this.handleToggleFields}\n                          animateChange=\"spin\"\n                          circled\n                          clickable\n                        ></temba-icon>`\n                      : null}\n                  </div>\n                </div>`\n            : null}\n          <div style=\"flex-grow:1\"></div>\n        </div>\n      </div>`;\n    }\n  }\n}\n"]}

package/out-tsc/src/contacts/ContactFieldEditor.js

@@ -3,11 +3,11 @@ import { css, html } from 'lit';
 import { property } from 'lit/decorators';
 import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
-import { Icon } from '../utils';
+import { Icon } from '../vectoricon';
 export class ContactFieldEditor extends RapidElement {
     constructor() {
         super(...arguments);
-        this.icon = navigator.clipboard ? Icon.Copy : '';
+        this.icon = navigator.clipboard ? Icon.copy : '';
         this.iconClass = '';
     }
     static get styles() {
@@ -192,7 +192,7 @@ export class ContactFieldEditor extends RapidElement {
                   <temba-icon
                     class="search"
                     icon-action="search"
-                    name="${Icon.Search}"
+                    name="${Icon.search}"
                     animateclick="pulse"
                   ></temba-icon>
                   </div>

package/out-tsc/src/contacts/ContactFieldEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactFieldEditor.js","sourceRoot":"","sources":["../../../src/contacts/ContactFieldEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { FormElement } from '../FormElement';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { TextInput } from '../textinput/TextInput';\nimport { Icon } from '../utils';\n\nexport class ContactFieldEditor extends RapidElement {\n  @property({ type: String })\n  key: string;\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: String })\n  name: string;\n\n  @property({ type: String })\n  type: string;\n\n  @property({ type: String })\n  timezone: string;\n\n  @property({ type: String })\n  icon = navigator.clipboard ? Icon.Copy : '';\n\n  @property({ type: String })\n  iconClass = '';\n\n  static get styles() {\n    return css`\n      .wrapper {\n        --widget-box-shadow: none;\n      }\n\n      .prefix {\n        background: rgba(0, 0, 0, 0.05);\n        border-top-left-radius: var(--curvature-widget);\n        border-bottom-left-radius: var(--curvature-widget);\n        color: #888;\n        cursor: pointer;\n        width: 200px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: flex;\n        padding: 0em 0.5em;\n      }\n\n      .wrapper {\n        margin-bottom: -1px;\n      }\n\n      .prefix .name {\n        padding: 0.5em 0em;\n        color: #888;\n        width: 200px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .postfix {\n        display: flex;\n        align-items: stretch;\n      }\n\n      .popper {\n        padding: 0.5em 0.75em;\n        background: rgba(240, 240, 240, 1);\n        border-top-right-radius: var(--curvature-widget);\n        border-bottom-right-radius: var(--curvature-widget);\n        --icon-color: #888;\n        opacity: 0;\n        cursor: default;\n        transform: scale(0.5);\n        transition: all 300ms ease-in-out;\n        display: flex;\n        align-items: stretch;\n        z-index: 1000;\n      }\n\n      temba-icon[name='calendar'] {\n        --icon-color: rgba(0, 0, 0, 0.2);\n      }\n\n      temba-icon:hover {\n        --icon-color: rgba(0, 0, 0, 0.5);\n      }\n\n      temba-icon {\n        cursor: pointer;\n        --icon-color: rgba(0, 0, 0, 0.3);\n      }\n\n      temba-textinput:hover .popper {\n        opacity: 1;\n        transform: scale(1);\n      }\n\n      temba-textinput:focus .popper {\n        opacity: 1;\n        transform: scale(1);\n      }\n\n      .unset temba-textinput:focus .popper,\n      .unset temba-textinput:hover .popper {\n        opacity: 0;\n      }\n\n      .copy.clicked temba-icon {\n        transform: scale(1.2);\n      }\n\n      temba-icon {\n        transition: all 200ms ease-in-out;\n      }\n\n      temba-icon.search {\n        margin-right: 1em;\n      }\n\n      temba-datepicker {\n        --curvature: 0px;\n        position: relative;\n      }\n    `;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.handleInput = this.handleInput.bind(this);\n    this.handleSubmit = this.handleSubmit.bind(this);\n  }\n\n  public handleIconClick(evt: MouseEvent) {\n    const ele = evt.target as HTMLDivElement;\n    const icon = ele.getAttribute('icon-action');\n    const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n\n    if (icon === 'copy') {\n      if (navigator.clipboard) {\n        this.iconClass = 'clicked';\n        navigator.clipboard.writeText(input.getDisplayValue()).then(() => {\n          window.setTimeout(() => {\n            this.iconClass = '';\n          }, 300);\n        });\n      }\n    }\n\n    if (icon === 'search') {\n      this.fireCustomEvent(CustomEventType.ButtonClicked, {\n        key: this.key,\n        value: this.value,\n      });\n    }\n\n    evt.preventDefault();\n    evt.stopPropagation();\n  }\n\n  public handleSubmit() {\n    const input = this.shadowRoot.querySelector(\n      'temba-textinput, temba-datepicker'\n    ) as FormElement;\n    if (input.value !== this.value) {\n      this.value = input.value;\n      this.fireEvent('change');\n    }\n    this.icon = navigator.clipboard ? 'copy' : '';\n  }\n\n  public handleChange(evt: Event) {\n    evt.preventDefault();\n    evt.stopPropagation();\n  }\n\n  public handleInput(evt: KeyboardEvent) {\n    if (evt.key === 'Enter') {\n      const input = evt.currentTarget as TextInput;\n      input.blur();\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"wrapper ${this.value ? 'set' : 'unset'}\">\n        ${this.type === 'datetime'\n          ? html`\n              <temba-datepicker\n                timezone=${this.timezone}\n                value=\"${this.value ? this.value : ''}\"\n                @change=${this.handleSubmit}\n                time\n              >\n                <div class=\"prefix\" slot=\"prefix\">\n                  <div class=\"name\">${this.name}</div>\n                </div>\n              </temba-datepicker>\n            `\n          : html`\n              <temba-textinput\n                value=\"${this.value ? this.value : ''}\"\n                @blur=${this.handleSubmit}\n                @keydown=${this.handleInput}\n                @change=${this.handleChange}\n              >\n                <div class=\"prefix\" slot=\"prefix\">\n                  <div class=\"name\">${this.name}</div>\n                </div>\n\n                <div class=\"postfix\">\n                  <div\n                    class=\"popper ${this.iconClass}\"\n                    @click=${this.handleIconClick}\n                  >\n                    ${this.value\n                      ? html`\n                  <temba-icon\n                    class=\"search\"\n                    icon-action=\"search\"\n                    name=\"${Icon.Search}\"\n                    animateclick=\"pulse\"\n                  ></temba-icon>\n                  </div>\n                `\n                      : null}\n                    <temba-icon\n                      icon-action=\"copy\"\n                      name=\"${this.icon}\"\n                      animatechange=\"spin\"\n                      animateclick=\"pulse\"\n                    ></temba-icon>\n                  </div>\n                </div>\n              </temba-textinput>\n            `}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ContactFieldEditor.js","sourceRoot":"","sources":["../../../src/contacts/ContactFieldEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { FormElement } from '../FormElement';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { TextInput } from '../textinput/TextInput';\nimport { Icon } from '../vectoricon';\n\nexport class ContactFieldEditor extends RapidElement {\n  @property({ type: String })\n  key: string;\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: String })\n  name: string;\n\n  @property({ type: String })\n  type: string;\n\n  @property({ type: String })\n  timezone: string;\n\n  @property({ type: String })\n  icon = navigator.clipboard ? Icon.copy : '';\n\n  @property({ type: String })\n  iconClass = '';\n\n  static get styles() {\n    return css`\n      .wrapper {\n        --widget-box-shadow: none;\n      }\n\n      .prefix {\n        background: rgba(0, 0, 0, 0.05);\n        border-top-left-radius: var(--curvature-widget);\n        border-bottom-left-radius: var(--curvature-widget);\n        color: #888;\n        cursor: pointer;\n        width: 200px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: flex;\n        padding: 0em 0.5em;\n      }\n\n      .wrapper {\n        margin-bottom: -1px;\n      }\n\n      .prefix .name {\n        padding: 0.5em 0em;\n        color: #888;\n        width: 200px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .postfix {\n        display: flex;\n        align-items: stretch;\n      }\n\n      .popper {\n        padding: 0.5em 0.75em;\n        background: rgba(240, 240, 240, 1);\n        border-top-right-radius: var(--curvature-widget);\n        border-bottom-right-radius: var(--curvature-widget);\n        --icon-color: #888;\n        opacity: 0;\n        cursor: default;\n        transform: scale(0.5);\n        transition: all 300ms ease-in-out;\n        display: flex;\n        align-items: stretch;\n        z-index: 1000;\n      }\n\n      temba-icon[name='calendar'] {\n        --icon-color: rgba(0, 0, 0, 0.2);\n      }\n\n      temba-icon:hover {\n        --icon-color: rgba(0, 0, 0, 0.5);\n      }\n\n      temba-icon {\n        cursor: pointer;\n        --icon-color: rgba(0, 0, 0, 0.3);\n      }\n\n      temba-textinput:hover .popper {\n        opacity: 1;\n        transform: scale(1);\n      }\n\n      temba-textinput:focus .popper {\n        opacity: 1;\n        transform: scale(1);\n      }\n\n      .unset temba-textinput:focus .popper,\n      .unset temba-textinput:hover .popper {\n        opacity: 0;\n      }\n\n      .copy.clicked temba-icon {\n        transform: scale(1.2);\n      }\n\n      temba-icon {\n        transition: all 200ms ease-in-out;\n      }\n\n      temba-icon.search {\n        margin-right: 1em;\n      }\n\n      temba-datepicker {\n        --curvature: 0px;\n        position: relative;\n      }\n    `;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.handleInput = this.handleInput.bind(this);\n    this.handleSubmit = this.handleSubmit.bind(this);\n  }\n\n  public handleIconClick(evt: MouseEvent) {\n    const ele = evt.target as HTMLDivElement;\n    const icon = ele.getAttribute('icon-action');\n    const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n\n    if (icon === 'copy') {\n      if (navigator.clipboard) {\n        this.iconClass = 'clicked';\n        navigator.clipboard.writeText(input.getDisplayValue()).then(() => {\n          window.setTimeout(() => {\n            this.iconClass = '';\n          }, 300);\n        });\n      }\n    }\n\n    if (icon === 'search') {\n      this.fireCustomEvent(CustomEventType.ButtonClicked, {\n        key: this.key,\n        value: this.value,\n      });\n    }\n\n    evt.preventDefault();\n    evt.stopPropagation();\n  }\n\n  public handleSubmit() {\n    const input = this.shadowRoot.querySelector(\n      'temba-textinput, temba-datepicker'\n    ) as FormElement;\n    if (input.value !== this.value) {\n      this.value = input.value;\n      this.fireEvent('change');\n    }\n    this.icon = navigator.clipboard ? 'copy' : '';\n  }\n\n  public handleChange(evt: Event) {\n    evt.preventDefault();\n    evt.stopPropagation();\n  }\n\n  public handleInput(evt: KeyboardEvent) {\n    if (evt.key === 'Enter') {\n      const input = evt.currentTarget as TextInput;\n      input.blur();\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"wrapper ${this.value ? 'set' : 'unset'}\">\n        ${this.type === 'datetime'\n          ? html`\n              <temba-datepicker\n                timezone=${this.timezone}\n                value=\"${this.value ? this.value : ''}\"\n                @change=${this.handleSubmit}\n                time\n              >\n                <div class=\"prefix\" slot=\"prefix\">\n                  <div class=\"name\">${this.name}</div>\n                </div>\n              </temba-datepicker>\n            `\n          : html`\n              <temba-textinput\n                value=\"${this.value ? this.value : ''}\"\n                @blur=${this.handleSubmit}\n                @keydown=${this.handleInput}\n                @change=${this.handleChange}\n              >\n                <div class=\"prefix\" slot=\"prefix\">\n                  <div class=\"name\">${this.name}</div>\n                </div>\n\n                <div class=\"postfix\">\n                  <div\n                    class=\"popper ${this.iconClass}\"\n                    @click=${this.handleIconClick}\n                  >\n                    ${this.value\n                      ? html`\n                  <temba-icon\n                    class=\"search\"\n                    icon-action=\"search\"\n                    name=\"${Icon.search}\"\n                    animateclick=\"pulse\"\n                  ></temba-icon>\n                  </div>\n                `\n                      : null}\n                    <temba-icon\n                      icon-action=\"copy\"\n                      name=\"${this.icon}\"\n                      animatechange=\"spin\"\n                      animateclick=\"pulse\"\n                    ></temba-icon>\n                  </div>\n                </div>\n              </temba-textinput>\n            `}\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/contacts/ContactPending.js

@@ -3,11 +3,11 @@ import { css, html } from 'lit';
 import { property } from 'lit/decorators';
 import { ScheduledEventType } from '../interfaces';
 import { StoreElement } from '../store/StoreElement';
-import { Icon } from '../utils';
+import { Icon } from '../vectoricon';
 const ICONS = {
-    [ScheduledEventType.CampaignEvent]: Icon.Campaign,
-    [ScheduledEventType.ScheduledBroadcast]: Icon.Message,
-    [ScheduledEventType.ScheduledTrigger]: Icon.Trigger,
+    [ScheduledEventType.CampaignEvent]: Icon.campaign,
+    [ScheduledEventType.ScheduledBroadcast]: Icon.message,
+    [ScheduledEventType.ScheduledTrigger]: Icon.trigger,
 };
 export class ContactPending extends StoreElement {
     constructor() {
@@ -145,7 +145,7 @@ export class ContactPending extends StoreElement {
         <div class="type">
           <temba-icon
             size="2"
-            name="${event.message ? Icon.Message : Icon.Flow}"
+            name="${event.message ? Icon.message : Icon.flow}"
           ></temba-icon>
         </div>
 
@@ -174,7 +174,7 @@ export class ContactPending extends StoreElement {
                   href="/campaign/read/${event.campaign.uuid}/"
                   onclick="goto(event, this)"
                 >
-                  <temba-icon name="${Icon.Campaign}"></temba-icon>
+                  <temba-icon name="${Icon.campaign}"></temba-icon>
                   <div class="name">${event.campaign.name}</div>
                 </div>`
             : html `

package/out-tsc/src/contacts/ContactPending.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactPending.js","sourceRoot":"","sources":["../../../src/contacts/ContactPending.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { ScheduledEvent, ScheduledEventType } from '../interfaces';\nimport { StoreElement } from '../store/StoreElement';\nimport { Icon } from '../utils';\n\nconst ICONS = {\n  [ScheduledEventType.CampaignEvent]: Icon.Campaign,\n  [ScheduledEventType.ScheduledBroadcast]: Icon.Message,\n  [ScheduledEventType.ScheduledTrigger]: Icon.Trigger,\n};\n\nexport class ContactPending extends StoreElement {\n  @property({ type: String })\n  contact: string;\n\n  @property({ type: Object, attribute: false })\n  data: ScheduledEvent[];\n\n  @property({ type: String })\n  lang_weekly = 'Weekly';\n\n  @property({ type: String })\n  lang_daily = 'Daily';\n\n  @property({ type: String })\n  lang_once = 'Once';\n\n  REPEAT_PERIOD = {\n    O: this.lang_once,\n    D: this.lang_daily,\n    W: this.lang_weekly,\n  };\n\n  static get styles() {\n    return css`\n      :host {\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      .type {\n        background: rgba(0, 0, 0, 0.02);\n        padding: 1em;\n        display: flex;\n        align-self: stretch;\n        --icon-color: rgba(50, 50, 50, 0.25);\n        border-top-left-radius: var(--curvature);\n        border-bottom-left-radius: var(--curvature);\n      }\n\n      .details {\n        display: flex;\n        flex-direction: column;\n        padding: 0.5em 1em;\n        flex-grow: 1;\n      }\n\n      .campaign {\n        display: flex;\n        color: var(--text-color);\n        --icon-color: var(--text-color);\n        align-self: center;\n        white-space: nowrap;\n      }\n\n      .message {\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        padding: 0.1em;\n      }\n\n      .event {\n        margin-bottom: 0.5em;\n        border-radius: var(--curvature);\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),\n          0 0 0px 1px rgba(0, 0, 0, 0.02);\n      }\n\n      .time {\n        white-space: nowrap;\n        background: rgba(0, 0, 0, 0.02);\n        border-top-right-radius: var(--curvature);\n        border-bottom-right-radius: var(--curvature);\n        display: flex;\n        align-self: stretch;\n        padding: 0 1em;\n        min-width: 5em;\n      }\n\n      .duration {\n        align-self: center;\n        flex-grow: 1;\n        text-align: center;\n      }\n\n      .flow {\n        display: inline-block;\n      }\n\n      temba-tip {\n        cursor: default;\n      }\n\n      .scheduled-by {\n        font-size: 0.85em;\n        display: flex;\n        color: var(--text-color);\n        --icon-color: var(--text-color);\n      }\n\n      .scheduled-by temba-icon {\n        margin-right: 0.25em;\n      }\n\n      .campaign_event .scheduled-by:hover {\n        color: var(--color-link-primary);\n        --icon-color: var(--color-link-primary);\n        cursor: pointer;\n      }\n\n      .scheduled-by .name {\n        flex-grow: 1;\n      }\n    `;\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('contact')) {\n      if (this.contact) {\n        this.url = `/contact/scheduled/${this.contact}/`;\n      } else {\n        this.url = null;\n      }\n    }\n  }\n\n  public renderEvent(event: ScheduledEvent) {\n    return html`\n      <div class=\"event ${event.type}\">\n        <div class=\"type\">\n          <temba-icon\n            size=\"2\"\n            name=\"${event.message ? Icon.Message : Icon.Flow}\"\n          ></temba-icon>\n        </div>\n\n        <div class=\"details\">\n          <div>\n            ${event.flow\n              ? html`\n                  <div\n                    class=\"flow linked\"\n                    href=\"/flow/editor/${event.flow.uuid}/\"\n                    onclick=\"goto(event)\"\n                  >\n                    ${event.flow.name}\n                  </div>\n                `\n              : null}\n            ${event.message\n              ? html` <div class=\"message\">${event.message}</div> `\n              : null}\n          </div>\n\n          <div class=\"scheduled-by\">\n            ${event.campaign\n              ? html`<div\n                  style=\"display:flex\"\n                  href=\"/campaign/read/${event.campaign.uuid}/\"\n                  onclick=\"goto(event, this)\"\n                >\n                  <temba-icon name=\"${Icon.Campaign}\"></temba-icon>\n                  <div class=\"name\">${event.campaign.name}</div>\n                </div>`\n              : html`\n                  ${event.type === ScheduledEventType.ScheduledTrigger\n                    ? html`<temba-icon\n                        name=\"${ICONS[event.type]}\"\n                      ></temba-icon>`\n                    : null}\n                  <div class=\"name\">\n                    ${this.REPEAT_PERIOD[event.repeat_period]}\n                  </div>\n                `}\n          </div>\n        </div>\n\n        <div class=\"time\">\n          <div class=\"duration\">\n            <temba-tip\n              text=${this.store.formatDate(event.scheduled)}\n              position=\"left\"\n            >\n              ${this.store.getShortDuration(event.scheduled)}\n            </temba-tip>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  public render(): TemplateResult {\n    if (this.data) {\n      if (this.data.length > 0) {\n        return html`\n          ${this.data.map(event => {\n            return this.renderEvent(event);\n          })}\n        `;\n      } else {\n        return html`<slot name=\"empty\"></slot>`;\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"ContactPending.js","sourceRoot":"","sources":["../../../src/contacts/ContactPending.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { ScheduledEvent, ScheduledEventType } from '../interfaces';\nimport { StoreElement } from '../store/StoreElement';\nimport { Icon } from '../vectoricon';\n\nconst ICONS = {\n  [ScheduledEventType.CampaignEvent]: Icon.campaign,\n  [ScheduledEventType.ScheduledBroadcast]: Icon.message,\n  [ScheduledEventType.ScheduledTrigger]: Icon.trigger,\n};\n\nexport class ContactPending extends StoreElement {\n  @property({ type: String })\n  contact: string;\n\n  @property({ type: Object, attribute: false })\n  data: ScheduledEvent[];\n\n  @property({ type: String })\n  lang_weekly = 'Weekly';\n\n  @property({ type: String })\n  lang_daily = 'Daily';\n\n  @property({ type: String })\n  lang_once = 'Once';\n\n  REPEAT_PERIOD = {\n    O: this.lang_once,\n    D: this.lang_daily,\n    W: this.lang_weekly,\n  };\n\n  static get styles() {\n    return css`\n      :host {\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      .type {\n        background: rgba(0, 0, 0, 0.02);\n        padding: 1em;\n        display: flex;\n        align-self: stretch;\n        --icon-color: rgba(50, 50, 50, 0.25);\n        border-top-left-radius: var(--curvature);\n        border-bottom-left-radius: var(--curvature);\n      }\n\n      .details {\n        display: flex;\n        flex-direction: column;\n        padding: 0.5em 1em;\n        flex-grow: 1;\n      }\n\n      .campaign {\n        display: flex;\n        color: var(--text-color);\n        --icon-color: var(--text-color);\n        align-self: center;\n        white-space: nowrap;\n      }\n\n      .message {\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        padding: 0.1em;\n      }\n\n      .event {\n        margin-bottom: 0.5em;\n        border-radius: var(--curvature);\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),\n          0 0 0px 1px rgba(0, 0, 0, 0.02);\n      }\n\n      .time {\n        white-space: nowrap;\n        background: rgba(0, 0, 0, 0.02);\n        border-top-right-radius: var(--curvature);\n        border-bottom-right-radius: var(--curvature);\n        display: flex;\n        align-self: stretch;\n        padding: 0 1em;\n        min-width: 5em;\n      }\n\n      .duration {\n        align-self: center;\n        flex-grow: 1;\n        text-align: center;\n      }\n\n      .flow {\n        display: inline-block;\n      }\n\n      temba-tip {\n        cursor: default;\n      }\n\n      .scheduled-by {\n        font-size: 0.85em;\n        display: flex;\n        color: var(--text-color);\n        --icon-color: var(--text-color);\n      }\n\n      .scheduled-by temba-icon {\n        margin-right: 0.25em;\n      }\n\n      .campaign_event .scheduled-by:hover {\n        color: var(--color-link-primary);\n        --icon-color: var(--color-link-primary);\n        cursor: pointer;\n      }\n\n      .scheduled-by .name {\n        flex-grow: 1;\n      }\n    `;\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('contact')) {\n      if (this.contact) {\n        this.url = `/contact/scheduled/${this.contact}/`;\n      } else {\n        this.url = null;\n      }\n    }\n  }\n\n  public renderEvent(event: ScheduledEvent) {\n    return html`\n      <div class=\"event ${event.type}\">\n        <div class=\"type\">\n          <temba-icon\n            size=\"2\"\n            name=\"${event.message ? Icon.message : Icon.flow}\"\n          ></temba-icon>\n        </div>\n\n        <div class=\"details\">\n          <div>\n            ${event.flow\n              ? html`\n                  <div\n                    class=\"flow linked\"\n                    href=\"/flow/editor/${event.flow.uuid}/\"\n                    onclick=\"goto(event)\"\n                  >\n                    ${event.flow.name}\n                  </div>\n                `\n              : null}\n            ${event.message\n              ? html` <div class=\"message\">${event.message}</div> `\n              : null}\n          </div>\n\n          <div class=\"scheduled-by\">\n            ${event.campaign\n              ? html`<div\n                  style=\"display:flex\"\n                  href=\"/campaign/read/${event.campaign.uuid}/\"\n                  onclick=\"goto(event, this)\"\n                >\n                  <temba-icon name=\"${Icon.campaign}\"></temba-icon>\n                  <div class=\"name\">${event.campaign.name}</div>\n                </div>`\n              : html`\n                  ${event.type === ScheduledEventType.ScheduledTrigger\n                    ? html`<temba-icon\n                        name=\"${ICONS[event.type]}\"\n                      ></temba-icon>`\n                    : null}\n                  <div class=\"name\">\n                    ${this.REPEAT_PERIOD[event.repeat_period]}\n                  </div>\n                `}\n          </div>\n        </div>\n\n        <div class=\"time\">\n          <div class=\"duration\">\n            <temba-tip\n              text=${this.store.formatDate(event.scheduled)}\n              position=\"left\"\n            >\n              ${this.store.getShortDuration(event.scheduled)}\n            </temba-tip>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  public render(): TemplateResult {\n    if (this.data) {\n      if (this.data.length > 0) {\n        return html`\n          ${this.data.map(event => {\n            return this.renderEvent(event);\n          })}\n        `;\n      } else {\n        return html`<slot name=\"empty\"></slot>`;\n      }\n    }\n  }\n}\n"]}

package/out-tsc/src/contacts/ContactTickets.js

@@ -3,7 +3,7 @@ import { css, html } from 'lit';
 import { property } from 'lit/decorators';
 import { TicketStatus } from '../interfaces';
 import { StoreElement } from '../store/StoreElement';
-import { Icon } from '../utils';
+import { Icon } from '../vectoricon';
 export class ContactTickets extends StoreElement {
     static get styles() {
         return css `
@@ -112,7 +112,7 @@ export class ContactTickets extends StoreElement {
 
         ${ticket.status === TicketStatus.Closed
             ? html `<div class="status">
-              <temba-icon name="${Icon.Check}"></temba-icon>
+              <temba-icon name="${Icon.check}"></temba-icon>
             </div>`
             : null}
       </div>

package/out-tsc/src/contacts/ContactTickets.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactTickets.js","sourceRoot":"","sources":["../../../src/contacts/ContactTickets.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { Ticket, TicketStatus } from '../interfaces';\nimport { StoreElement } from '../store/StoreElement';\nimport { Icon } from '../utils';\n\nexport class ContactTickets extends StoreElement {\n  @property({ type: String })\n  contact: string;\n\n  @property({ type: Object, attribute: false })\n  data: Ticket[];\n\n  static get styles() {\n    return css`\n      :host {\n        padding: 1em;\n      }\n\n      :hover {\n      }\n\n      .ticket:hover {\n        cursor: pointer;\n        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),\n          0 0 0px 2px var(--color-link-primary);\n      }\n\n      .tickets {\n        display: flex;\n        padding: 0.3em 0.8em;\n      }\n\n      .count {\n        margin-left: 0.5em;\n      }\n\n      .ticket {\n        display: flex;\n        margin-bottom: 0.5em;\n        border-radius: var(--curvature);\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),\n          0 0 0px 1px rgba(0, 0, 0, 0.02);\n      }\n\n      .ticket .body {\n        flex-grow: 1;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        padding: 0.1em;\n      }\n\n      .ticket > div {\n        padding: 0.5em 1em;\n        pointer-events: none;\n      }\n\n      .status {\n        --icon-color: #999;\n      }\n\n      .ticket.closed {\n        background: #f9f9f9;\n        color: #888;\n      }\n    `;\n  }\n\n  prepareData(data: any): any {\n    if (data && data.length) {\n      data.sort((a: Ticket, b: Ticket) => {\n        if (a.status == TicketStatus.Open && b.status == TicketStatus.Closed) {\n          return -1;\n        }\n\n        if (b.status == TicketStatus.Open && a.status == TicketStatus.Closed) {\n          return 1;\n        }\n\n        if (\n          a.status == TicketStatus.Closed &&\n          b.status == TicketStatus.Closed\n        ) {\n          return (\n            new Date(b.closed_on).getTime() - new Date(a.closed_on).getTime()\n          );\n        }\n\n        return (\n          new Date(b.opened_on).getTime() - new Date(a.opened_on).getTime()\n        );\n      });\n    }\n    return data;\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('contact')) {\n      if (this.contact) {\n        this.url = `/api/v2/tickets.json?contact=${this.contact}`;\n      } else {\n        this.url = null;\n      }\n    }\n  }\n\n  public renderTicket(ticket: Ticket) {\n    const date =\n      ticket.status === TicketStatus.Open ? ticket.opened_on : ticket.closed_on;\n    return html`\n      <div\n        class=\"ticket ${ticket.status}\"\n        href=\"/ticket/all/open/${ticket.uuid}\"\n        onclick=\"goto(event)\"\n      >\n        <div class=\"topic\">${ticket.topic.name}</div>\n        <div class=\"body\">${ticket.body}</div>\n\n        <div class=\"date\">\n          <temba-tip direction=\"left\" text=${this.store.formatDate(date)}>\n            ${this.store.getShortDuration(date)}\n          </temba-tip>\n        </div>\n\n        ${ticket.status === TicketStatus.Closed\n          ? html`<div class=\"status\">\n              <temba-icon name=\"${Icon.Check}\"></temba-icon>\n            </div>`\n          : null}\n      </div>\n    `;\n  }\n\n  public render(): TemplateResult {\n    if (this.data && this.data.length > 0) {\n      const tickets = this.data.map(ticket => {\n        return this.renderTicket(ticket);\n      });\n\n      return html`${tickets}`;\n    }\n\n    return html`<slot name=\"empty\"></slot>`;\n  }\n}\n"]}
+{"version":3,"file":"ContactTickets.js","sourceRoot":"","sources":["../../../src/contacts/ContactTickets.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { Ticket, TicketStatus } from '../interfaces';\nimport { StoreElement } from '../store/StoreElement';\nimport { Icon } from '../vectoricon';\n\nexport class ContactTickets extends StoreElement {\n  @property({ type: String })\n  contact: string;\n\n  @property({ type: Object, attribute: false })\n  data: Ticket[];\n\n  static get styles() {\n    return css`\n      :host {\n        padding: 1em;\n      }\n\n      :hover {\n      }\n\n      .ticket:hover {\n        cursor: pointer;\n        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),\n          0 0 0px 2px var(--color-link-primary);\n      }\n\n      .tickets {\n        display: flex;\n        padding: 0.3em 0.8em;\n      }\n\n      .count {\n        margin-left: 0.5em;\n      }\n\n      .ticket {\n        display: flex;\n        margin-bottom: 0.5em;\n        border-radius: var(--curvature);\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),\n          0 0 0px 1px rgba(0, 0, 0, 0.02);\n      }\n\n      .ticket .body {\n        flex-grow: 1;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        padding: 0.1em;\n      }\n\n      .ticket > div {\n        padding: 0.5em 1em;\n        pointer-events: none;\n      }\n\n      .status {\n        --icon-color: #999;\n      }\n\n      .ticket.closed {\n        background: #f9f9f9;\n        color: #888;\n      }\n    `;\n  }\n\n  prepareData(data: any): any {\n    if (data && data.length) {\n      data.sort((a: Ticket, b: Ticket) => {\n        if (a.status == TicketStatus.Open && b.status == TicketStatus.Closed) {\n          return -1;\n        }\n\n        if (b.status == TicketStatus.Open && a.status == TicketStatus.Closed) {\n          return 1;\n        }\n\n        if (\n          a.status == TicketStatus.Closed &&\n          b.status == TicketStatus.Closed\n        ) {\n          return (\n            new Date(b.closed_on).getTime() - new Date(a.closed_on).getTime()\n          );\n        }\n\n        return (\n          new Date(b.opened_on).getTime() - new Date(a.opened_on).getTime()\n        );\n      });\n    }\n    return data;\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('contact')) {\n      if (this.contact) {\n        this.url = `/api/v2/tickets.json?contact=${this.contact}`;\n      } else {\n        this.url = null;\n      }\n    }\n  }\n\n  public renderTicket(ticket: Ticket) {\n    const date =\n      ticket.status === TicketStatus.Open ? ticket.opened_on : ticket.closed_on;\n    return html`\n      <div\n        class=\"ticket ${ticket.status}\"\n        href=\"/ticket/all/open/${ticket.uuid}\"\n        onclick=\"goto(event)\"\n      >\n        <div class=\"topic\">${ticket.topic.name}</div>\n        <div class=\"body\">${ticket.body}</div>\n\n        <div class=\"date\">\n          <temba-tip direction=\"left\" text=${this.store.formatDate(date)}>\n            ${this.store.getShortDuration(date)}\n          </temba-tip>\n        </div>\n\n        ${ticket.status === TicketStatus.Closed\n          ? html`<div class=\"status\">\n              <temba-icon name=\"${Icon.check}\"></temba-icon>\n            </div>`\n          : null}\n      </div>\n    `;\n  }\n\n  public render(): TemplateResult {\n    if (this.data && this.data.length > 0) {\n      const tickets = this.data.map(ticket => {\n        return this.renderTicket(ticket);\n      });\n\n      return html`${tickets}`;\n    }\n\n    return html`<slot name=\"empty\"></slot>`;\n  }\n}\n"]}