@nyaruka/temba-components 0.48.0 → 0.48.2

package/dist/sw.js

@@ -1,2 +1,2 @@
-if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const l=e=>o(e,i),c={module:{uri:i},exports:r,require:l};t[i]=Promise.all(n.map((e=>c[e]||l(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"260fc44e.js",revision:"22e401ce64e194aca201dfa590f96898"},{url:"templates/components-body.html",revision:"91f752be69c57af0ab6d86e3fee69bda"},{url:"templates/components-head.html",revision:"55926ee7e56ab94cedde25c5df99baa3"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
+if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const c=e=>o(e,i),l={module:{uri:i},exports:r,require:c};t[i]=Promise.all(n.map((e=>l[e]||c(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"98c8996c.js",revision:"780de512b8bcf0039507acbe9bf68cf7"},{url:"templates/components-body.html",revision:"bf00671a29a6d826be7314f287fd4a65"},{url:"templates/components-head.html",revision:"583dca8df21efb6e3abe149c65a28dcb"}],{}),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/2bba64f6c3c60b2f57653b5aca41fbec/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"260fc44e.js\",\n    \"revision\": \"22e401ce64e194aca201dfa590f96898\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"91f752be69c57af0ab6d86e3fee69bda\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"55926ee7e56ab94cedde25c5df99baa3\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["self","skipWaiting","workbox_core_clientsClaim","workbox_precaching_precacheAndRoute","url","revision","workbox","registerRoute","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"0nBAwBAA,KAAKC,cAELC,EAAAA,eAQAC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,CAAE,GAEwBC,EAAAC,cAAC,IAAIC,EAAAA,gBAAgCC,EAAAA,wBAA2C,iBAGhFH,EAAAC,cAAC,iBAAkB,IAAIG,aAAiC"}
+{"version":3,"file":"sw.js","sources":["../../../../../tmp/34bc395f05606f8cc4b6639aceeb6549/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"98c8996c.js\",\n    \"revision\": \"780de512b8bcf0039507acbe9bf68cf7\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"bf00671a29a6d826be7314f287fd4a65\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"583dca8df21efb6e3abe149c65a28dcb\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["self","skipWaiting","workbox_core_clientsClaim","workbox_precaching_precacheAndRoute","url","revision","workbox","registerRoute","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"0nBAwBAA,KAAKC,cAELC,EAAAA,eAQAC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,CAAE,GAEwBC,EAAAC,cAAC,IAAIC,EAAAA,gBAAgCC,EAAAA,wBAA2C,iBAGhFH,EAAAC,cAAC,iBAAkB,IAAIG,aAAiC"}

package/dist/templates/components-body.html

@@ -1 +1 @@
-<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/260fc44e.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.48.0"</script>
+<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/98c8996c.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.48.2"</script>

package/dist/templates/components-head.html

@@ -1 +1 @@
-<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/260fc44e.js" crossorigin="anonymous">
+<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/98c8996c.js" crossorigin="anonymous">

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

@@ -168,16 +168,20 @@ export class ContactChat extends ContactStoreElement {
                 }
                 else if (response.status < 500) {
                     if (response.json.text &&
-                        response.json.text.eng &&
-                        response.json.text.eng.length > 0) {
-                        compose.buttonError =
-                            'Text must have no more than 640 characters.';
+                        response.json.text.length > 0 &&
+                        response.json.text[0].length > 0) {
+                        let textError = response.json.text[0];
+                        textError = textError.replace('Ensure this field has no more than', 'Maximum allowed text is');
+                        compose.buttonError = textError;
                     }
                     else if (response.json.attachments &&
-                        response.json.attachments.eng &&
-                        response.json.attachments.eng.length > 0) {
-                        compose.buttonError =
-                            'Attachments must have no more than 10 files.';
+                        response.json.attachments.length > 0 &&
+                        response.json.attachments[0].length > 0) {
+                        let attachmentError = response.json.attachments[0];
+                        attachmentError = attachmentError
+                            .replace('Ensure this field has no more than', 'Maximum allowed attachments is')
+                            .replace('elements', 'files');
+                        compose.buttonError = attachmentError;
                     }
                     else {
                         compose.buttonError = genericError;

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

@@ -1 +1 @@
-{"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.js';\nimport { Contact, CustomEventType, Ticket } from '../interfaces';\nimport { COOKIE_KEYS, getCookieBoolean, postJSON } from '../utils';\nimport { ContactHistory } from './ContactHistory';\nimport { ContactStoreElement } from './ContactStoreElement';\nimport { Compose } from '../compose/Compose';\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        border-radius: var(--curvature);\n      }\n\n      temba-contact-history {\n        border-bottom: 3px solid #e1e1e1;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n      }\n\n      .chatbox {\n        background: rgb(242, 242, 242);\n        padding: 1em;\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      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#reopen-button {\n        --button-y: 1px;\n        --button-x: 12px;\n      }\n\n      temba-completion {\n        --widget-box-shadow: none;\n        --color-widget-border: transparent;\n        --widget-box-shadow-focused: none;\n        --color-focus: transparent;\n        --color-widget-bg-focused: transparent;\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  currentNote = '';\n\n  @property({ type: Boolean })\n  showDetails = true;\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  // http promise to monitor for completeness\n  public httpComplete: Promise<void>;\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      // super.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    }\n  }\n\n  private handleSend(evt: CustomEvent) {\n    const buttonName = evt.detail.name;\n    if (buttonName === 'Send') {\n      const payload = {\n        contact: this.currentContact.uuid,\n      };\n      const compose = evt.currentTarget as Compose;\n      if (compose) {\n        const text = compose.currentText;\n        if (text && text.length > 0) {\n          payload['text'] = text;\n        }\n        const attachments = compose.currentAttachments;\n        if (attachments && attachments.length > 0) {\n          const attachment_uuids = attachments.map(\n            attachment => attachment.uuid\n          );\n          payload['attachments'] = attachment_uuids;\n        }\n      }\n      if (this.currentTicket) {\n        payload['ticket'] = this.currentTicket.uuid;\n      }\n\n      const genericError = buttonName + ' failed, please try again.';\n\n      postJSON(`/api/v2/messages.json`, payload)\n        .then(response => {\n          if (response.status < 400) {\n            compose.reset();\n            this.refresh(true);\n            this.fireCustomEvent(CustomEventType.MessageSent, { msg: payload });\n          } else if (response.status < 500) {\n            if (\n              response.json.text &&\n              response.json.text.eng &&\n              response.json.text.eng.length > 0\n            ) {\n              compose.buttonError =\n                'Text must have no more than 640 characters.';\n            } else if (\n              response.json.attachments &&\n              response.json.attachments.eng &&\n              response.json.attachments.eng.length > 0\n            ) {\n              compose.buttonError =\n                'Attachments must have no more than 10 files.';\n            } else {\n              compose.buttonError = genericError;\n            }\n          } else {\n            compose.buttonError = genericError;\n          }\n        })\n        .catch(error => {\n          console.error(error);\n          compose.buttonError = genericError;\n        });\n    }\n  }\n\n  public render(): TemplateResult {\n    const contactHistory = this.currentContact\n      ? this.getTembaContactHistory()\n      : null;\n    const chatbox = this.currentContact ? this.getTembaChatbox() : null;\n\n    const contactHistoryAndChatbox = html`<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\">${contactHistory} ${chatbox}</div>\n    </div>`;\n    return html`${contactHistoryAndChatbox}`;\n  }\n\n  private getTembaContactHistory(): TemplateResult {\n    return html` <temba-contact-history\n      .uuid=${this.currentContact.uuid}\n      .contact=${this.currentContact}\n      .ticket=${this.currentTicket ? this.currentTicket.uuid : null}\n      .endDate=${this.currentTicket ? this.currentTicket.closed_on : null}\n      .agent=${this.agent}\n    >\n    </temba-contact-history>`;\n  }\n\n  private getTembaChatbox(): TemplateResult {\n    if (this.currentTicket) {\n      if (this.currentContact && this.currentContact.status !== 'active') {\n        //no chatbox for archived, blocked, or stopped contacts\n        return null;\n      } else {\n        if (!this.currentTicket.closed_on) {\n          //chatbox for active contacts with an open ticket\n          return this.getChatbox();\n        } else {\n          return null;\n        }\n      }\n    }\n\n    if (this.currentContact && this.currentContact.status !== 'active') {\n      //no chatbox for archived, blocked, or stopped contacts\n      return null;\n    } else {\n      //chatbox for active contacts\n      return this.getChatbox();\n    }\n  }\n\n  private getChatbox(): TemplateResult {\n    return html`<div class=\"chatbox\">\n      <temba-compose\n        chatbox\n        attachments\n        counter\n        button\n        @temba-button-clicked=${this.handleSend.bind(this)}\n      >\n      </temba-compose>\n    </div>`;\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.js';\nimport { Contact, CustomEventType, Ticket } from '../interfaces';\nimport { COOKIE_KEYS, getCookieBoolean, postJSON } from '../utils';\nimport { ContactHistory } from './ContactHistory';\nimport { ContactStoreElement } from './ContactStoreElement';\nimport { Compose } from '../compose/Compose';\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        border-radius: var(--curvature);\n      }\n\n      temba-contact-history {\n        border-bottom: 3px solid #e1e1e1;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n      }\n\n      .chatbox {\n        background: rgb(242, 242, 242);\n        padding: 1em;\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      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#reopen-button {\n        --button-y: 1px;\n        --button-x: 12px;\n      }\n\n      temba-completion {\n        --widget-box-shadow: none;\n        --color-widget-border: transparent;\n        --widget-box-shadow-focused: none;\n        --color-focus: transparent;\n        --color-widget-bg-focused: transparent;\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  currentNote = '';\n\n  @property({ type: Boolean })\n  showDetails = true;\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  // http promise to monitor for completeness\n  public httpComplete: Promise<void>;\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      // super.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    }\n  }\n\n  private handleSend(evt: CustomEvent) {\n    const buttonName = evt.detail.name;\n    if (buttonName === 'Send') {\n      const payload = {\n        contact: this.currentContact.uuid,\n      };\n      const compose = evt.currentTarget as Compose;\n      if (compose) {\n        const text = compose.currentText;\n        if (text && text.length > 0) {\n          payload['text'] = text;\n        }\n        const attachments = compose.currentAttachments;\n        if (attachments && attachments.length > 0) {\n          const attachment_uuids = attachments.map(\n            attachment => attachment.uuid\n          );\n          payload['attachments'] = attachment_uuids;\n        }\n      }\n      if (this.currentTicket) {\n        payload['ticket'] = this.currentTicket.uuid;\n      }\n\n      const genericError = buttonName + ' failed, please try again.';\n\n      postJSON(`/api/v2/messages.json`, payload)\n        .then(response => {\n          if (response.status < 400) {\n            compose.reset();\n            this.refresh(true);\n            this.fireCustomEvent(CustomEventType.MessageSent, { msg: payload });\n          } else if (response.status < 500) {\n            if (\n              response.json.text &&\n              response.json.text.length > 0 &&\n              response.json.text[0].length > 0\n            ) {\n              let textError = response.json.text[0];\n              textError = textError.replace(\n                'Ensure this field has no more than',\n                'Maximum allowed text is'\n              );\n              compose.buttonError = textError;\n            } else if (\n              response.json.attachments &&\n              response.json.attachments.length > 0 &&\n              response.json.attachments[0].length > 0\n            ) {\n              let attachmentError = response.json.attachments[0];\n              attachmentError = attachmentError\n                .replace(\n                  'Ensure this field has no more than',\n                  'Maximum allowed attachments is'\n                )\n                .replace('elements', 'files');\n              compose.buttonError = attachmentError;\n            } else {\n              compose.buttonError = genericError;\n            }\n          } else {\n            compose.buttonError = genericError;\n          }\n        })\n        .catch(error => {\n          console.error(error);\n          compose.buttonError = genericError;\n        });\n    }\n  }\n\n  public render(): TemplateResult {\n    const contactHistory = this.currentContact\n      ? this.getTembaContactHistory()\n      : null;\n    const chatbox = this.currentContact ? this.getTembaChatbox() : null;\n\n    const contactHistoryAndChatbox = html`<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\">${contactHistory} ${chatbox}</div>\n    </div>`;\n    return html`${contactHistoryAndChatbox}`;\n  }\n\n  private getTembaContactHistory(): TemplateResult {\n    return html` <temba-contact-history\n      .uuid=${this.currentContact.uuid}\n      .contact=${this.currentContact}\n      .ticket=${this.currentTicket ? this.currentTicket.uuid : null}\n      .endDate=${this.currentTicket ? this.currentTicket.closed_on : null}\n      .agent=${this.agent}\n    >\n    </temba-contact-history>`;\n  }\n\n  private getTembaChatbox(): TemplateResult {\n    if (this.currentTicket) {\n      if (this.currentContact && this.currentContact.status !== 'active') {\n        //no chatbox for archived, blocked, or stopped contacts\n        return null;\n      } else {\n        if (!this.currentTicket.closed_on) {\n          //chatbox for active contacts with an open ticket\n          return this.getChatbox();\n        } else {\n          return null;\n        }\n      }\n    }\n\n    if (this.currentContact && this.currentContact.status !== 'active') {\n      //no chatbox for archived, blocked, or stopped contacts\n      return null;\n    } else {\n      //chatbox for active contacts\n      return this.getChatbox();\n    }\n  }\n\n  private getChatbox(): TemplateResult {\n    return html`<div class=\"chatbox\">\n      <temba-compose\n        chatbox\n        attachments\n        counter\n        button\n        @temba-button-clicked=${this.handleSend.bind(this)}\n      >\n      </temba-compose>\n    </div>`;\n  }\n}\n"]}

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

@@ -9,6 +9,8 @@ export class ContactTickets extends StoreElement {
     constructor() {
         super(...arguments);
         this.clickable = false;
+        this.expandable = false;
+        this.expanded = false;
     }
     static get styles() {
         return css `
@@ -18,6 +20,7 @@ export class ContactTickets extends StoreElement {
       :hover {
       }
 
+      .ticket.expandable:hover,
       .ticket.clickable:hover {
         cursor: pointer;
         box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),
@@ -43,27 +46,58 @@ export class ContactTickets extends StoreElement {
         align-items: center;
         box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),
           0 0 0px 1px rgba(0, 0, 0, 0.02);
+        transition: all 200ms ease-in-out;
       }
 
       .ticket .body {
+        flex-grow: 5;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 200px;
+      }
+
+      .ticket .topic {
         flex-grow: 1;
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
+        white-space: nowrap;
         overflow: hidden;
-        padding: 0.1em;
+        text-overflow: ellipsis;
+        margin: 0 0.75em;
+        width: 60px;
+      }
+
+      .ticket.expanded .topic {
+        display: none;
       }
 
-      .date {
+      .ticket.expanded .topic-expanded {
         display: -webkit-box;
+      }
+
+      .topic-expanded {
+        flex-grow: 1;
+        display: none;
         -webkit-line-clamp: 1;
         -webkit-box-orient: vertical;
         overflow: hidden;
-        padding: 0.1em;
       }
 
-      .ticket > div {
-        padding: 0.5em 1em;
+      .ticket.expanded {
+        flex-direction: column-reverse;
+        align-items: stretch;
+      }
+
+      .ticket.expanded .body {
+        display: block;
+        max-height: 40vh;
+        overflow-y: auto;
+        -webkit-line-clamp: none;
+        border-top: 1px solid #e6e6e6;
+        // 6px solid #f9f9f9;
+        margin-bottom: 0.5em;
+        padding: 0.5em 1em 0em 1em;
+        white-space: normal;
+        width: initial;
       }
 
       .status {
@@ -76,7 +110,6 @@ export class ContactTickets extends StoreElement {
       }
 
       .resolve {
-        margin-right: 1em;
         color: var(--color-primary-dark);
       }
 
@@ -147,6 +180,21 @@ export class ContactTickets extends StoreElement {
       .current-user {
         font-weight: 400;
       }
+
+      .details {
+        display: flex;
+        align-items: center;
+        padding: 0.5em 1em;
+        flex-shrink: 1;
+      }
+
+      .details .date {
+        padding: 0em 0.75em;
+      }
+
+      .details .toggle {
+        padding-right: 0.75em;
+      }
     `;
     }
     prepareData(data) {
@@ -228,6 +276,7 @@ export class ContactTickets extends StoreElement {
             .catch((response) => {
             console.error(response);
         });
+        return true;
     }
     renderTicket(ticket) {
         const date = ticket.opened_on;
@@ -239,104 +288,113 @@ export class ContactTickets extends StoreElement {
             if (this.clickable) {
                 this.fireCustomEvent(CustomEventType.ButtonClicked, { ticket });
             }
+            else if (this.expandable) {
+                this.expanded = !this.expanded;
+            }
         }}
         class="ticket ${ticket.status} ${getClasses({
             clickable: this.clickable,
+            expandable: this.expandable,
+            expanded: this.expanded,
         })}"
       >
         <div class="topic">${ticket.topic.name}</div>
         <div class="body">${ticket.body}</div>
 
-        <div class="date">
-          <temba-date value="${date}" display="duration"></temba-date>
-        </div>
+        <div class="details">
+          <div class="topic-expanded">${ticket.topic.name}</div>
+
+          <div class="date">
+            <temba-date value="${date}" display="duration"></temba-date>
+          </div>
 
-        ${ticket.status === TicketStatus.Closed
+          ${ticket.status === TicketStatus.Closed
             ? html `<div class="reopen">
-              <temba-button
-                primary
-                small
-                name="Reopen"
-                @click=${(event) => {
+                <temba-button
+                  primary
+                  small
+                  name="Reopen"
+                  @click=${(event) => {
                 event.preventDefault();
                 event.stopPropagation();
                 this.handleReopen(ticket.uuid);
             }}
-              ></temba-button>
-            </div>`
+                ></temba-button>
+              </div>`
             : html `
-              <div>
-                <temba-dropdown
-                  drop_align="right"
-                  arrowsize="8"
-                  arrowoffset="-44"
-                  offsety="8"
-                  offsetx=${ticket.assignee ? -42 : -28}
-                >
-                  <div slot="toggle" class="toggle">
-                    ${ticket.assignee
+                <div>
+                  <temba-dropdown
+                    drop_align="right"
+                    arrowsize="8"
+                    arrowoffset="-44"
+                    offsety="8"
+                    offsetx=${ticket.assignee ? -42 : -28}
+                  >
+                    <div slot="toggle" class="toggle">
+                      ${ticket.assignee
                 ? html `
-                          <div style="font-size:0.5em">
-                            ${renderAvatar({
+                            <div style="font-size:0.5em">
+                              ${renderAvatar({
                     name: ticket.assignee.name,
                     position: 'left',
                 })}
-                          </div>
-                        `
+                            </div>
+                          `
                 : html `
-                          <temba-button
-                            name="Assign"
-                            primary
-                            small
-                          ></temba-button>
-                        `}
-                  </div>
-
-                  <div
-                    slot="dropdown"
-                    class="dropdown"
-                    @click=${(event) => {
+                            <temba-button
+                              name="Assign"
+                              primary
+                              small
+                            ></temba-button>
+                          `}
+                    </div>
+
+                    <div
+                      slot="dropdown"
+                      class="dropdown"
+                      @click=${(event) => {
                 stopEvent(event);
             }}
-                  >
-                    ${ticket.assignee
+                    >
+                      ${ticket.assignee
                 ? html `
-                          <div
-                            class="assigned option-group ${agent &&
+                            <div
+                              class="assigned option-group ${agent &&
                     ticket.assignee.email == agent.email
                     ? 'current-user'
                     : ''}"
-                          >
-                            ${this.renderUser(users.find(user => user.email === ticket.assignee.email))}
-                            <temba-button
-                              name="Unassign"
-                              primary
-                              small
-                              @click=${(event) => {
+                            >
+                              ${this.renderUser(users.find(user => user.email === ticket.assignee.email))}
+                              <temba-button
+                                name="Unassign"
+                                primary
+                                small
+                                @click=${(event) => {
                     stopEvent(event);
                     this.handleTicketAssignment(ticket.uuid, null);
                 }}
-                            ></temba-button>
-                          </div>
-                        `
+                              ></temba-button>
+                            </div>
+                          `
                 : null}
-                    ${agent &&
-                (!ticket.assignee || agent.email !== ticket.assignee.email)
+                      ${agent &&
+                (!ticket.assignee ||
+                    agent.email !== ticket.assignee.email)
                 ? html `
-                          <div
-                            class="current-user option-group"
-                            @click=${(event) => {
+                            <div
+                              class="current-user option-group"
+                              @click=${(event) => {
                     stopEvent(event);
                     this.handleTicketAssignment(ticket.uuid, agent.email);
                 }}
-                          >
-                            ${this.renderUser(agent)}
-                          </div>
-                        `
+                            >
+                              ${this.renderUser(agent)}
+                            </div>
+                          `
                 : null}
 
-                    <div class="options option-group">
-                      ${this.store.getAssignableUsers().map(user => {
+                      <div class="options option-group">
+                        ${this.store.getAssignableUsers().map(user => {
                 if (ticket.assignee &&
                     user.email === ticket.assignee.email) {
                     return null;
@@ -345,36 +403,37 @@ export class ContactTickets extends StoreElement {
                     return null;
                 }
                 return html `<div
-                          @click=${(event) => {
+                            @click=${(event) => {
                     stopEvent(event);
                     this.handleTicketAssignment(ticket.uuid, user.email);
                 }}
-                        >
-                          ${this.renderUser(user)}
-                        </div>`;
+                          >
+                            ${this.renderUser(user)}
+                          </div>`;
             })}
+                      </div>
                     </div>
-                  </div>
-                </temba-dropdown>
-              </div>
-              <temba-tip
-                text="Resolve"
-                position="left"
-                style="width:1.5em"
-                class="resolve"
-              >
-                <temba-icon
-                  size="1.25"
-                  name="${Icon.check}"
-                  @click=${(event) => {
+                  </temba-dropdown>
+                </div>
+                <temba-tip
+                  text="Resolve"
+                  position="left"
+                  style="width:1.5em"
+                  class="resolve"
+                >
+                  <temba-icon
+                    size="1.25"
+                    name="${Icon.check}"
+                    @click=${(event) => {
                 event.preventDefault();
                 event.stopPropagation();
                 this.handleClose(ticket.uuid);
             }}
-                  ?clickable=${open}
-                />
-              </temba-tip>
-            `}
+                    ?clickable=${open}
+                  />
+                </temba-tip>
+              `}
+        </div>
       </div>
     `;
     }
@@ -400,6 +459,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], ContactTickets.prototype, "clickable", void 0);
+__decorate([
+    property({ type: Boolean })
+], ContactTickets.prototype, "expandable", void 0);
+__decorate([
+    property({ type: Boolean })
+], ContactTickets.prototype, "expanded", void 0);
 __decorate([
     property({ type: Object, attribute: false })
 ], ContactTickets.prototype, "data", void 0);

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.js';\nimport { CustomEventType, Ticket, TicketStatus, User } from '../interfaces';\nimport { StoreElement } from '../store/StoreElement';\nimport {\n  getAssets,\n  getClasses,\n  getFullName,\n  postJSON,\n  renderAvatar,\n  stopEvent,\n} from '../utils';\nimport { Icon } from '../vectoricon';\n\nexport class ContactTickets extends StoreElement {\n  @property({ type: String })\n  agent: string;\n\n  @property({ type: String })\n  contact: string;\n\n  @property({ type: String })\n  ticket: string;\n\n  @property({ type: Boolean })\n  clickable = false;\n\n  @property({ type: Object, attribute: false })\n  data: Ticket[];\n\n  static get styles() {\n    return css`\n      :host {\n      }\n\n      :hover {\n      }\n\n      .ticket.clickable: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        background: #fff;\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: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        padding: 0.1em;\n      }\n\n      .date {\n        display: -webkit-box;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        padding: 0.1em;\n      }\n\n      .ticket > div {\n        padding: 0.5em 1em;\n      }\n\n      .status {\n        --icon-color: #999;\n      }\n\n      .ticket.closed {\n        background: #f9f9f9;\n        color: #888;\n      }\n\n      .resolve {\n        margin-right: 1em;\n        color: var(--color-primary-dark);\n      }\n\n      .dropdown {\n        color: rgb(45, 45, 45);\n        z-index: 50;\n        width: 18em;\n      }\n\n      .option-group {\n        padding: 0.4em;\n        border-bottom: 1px solid #f3f3f3;\n      }\n\n      .assigned .user {\n        flex-grow: 1;\n      }\n\n      .assigned {\n        display: flex;\n        align-items: center;\n      }\n\n      .assigned temba-button {\n        margin-right: 0.75em;\n      }\n\n      .assigned .user:hover {\n        cursor: default;\n        background: none;\n      }\n\n      .options {\n        max-height: 40vh;\n        overflow-y: auto;\n        border-bottom: none;\n      }\n\n      .user {\n        display: flex;\n        padding: 0.4em 0.7em;\n        align-items: center;\n        border-radius: var(--curvature);\n        cursor: pointer;\n      }\n\n      .user:hover {\n        background: var(--color-selection);\n      }\n\n      .user .avatar {\n        font-size: 0.5em;\n        margin-right: 1em;\n      }\n\n      .user .name {\n        display: -webkit-box;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        flex-grow: 1;\n      }\n\n      .user temba-button {\n        margin-left: 0.5em;\n      }\n\n      .current-user {\n        font-weight: 400;\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') || changes.has('ticket')) {\n      if (this.contact) {\n        this.url = `/api/v2/tickets.json?contact=${this.contact}${\n          this.ticket ? '&ticket=' + this.ticket : ''\n        }`;\n      } else {\n        this.url = null;\n      }\n    }\n  }\n\n  private renderUser(user: User) {\n    if (!user) {\n      return null;\n    }\n    return html`<div class=\"user\">\n      <div class=\"avatar\">${renderAvatar({ user: user })}</div>\n      <div class=\"name\">${getFullName(user)}</div>\n    </div>`;\n  }\n\n  private handleClose(uuid: string) {\n    postJSON(`/api/v2/ticket_actions.json`, {\n      tickets: [uuid],\n      action: 'close',\n    })\n      .then(() => {\n        this.refresh();\n      })\n      .catch((response: any) => {\n        console.error(response);\n      });\n  }\n\n  private handleReopen(uuid: string) {\n    postJSON(`/api/v2/ticket_actions.json`, {\n      tickets: [uuid],\n      action: 'reopen',\n    })\n      .then(() => {\n        this.refresh();\n      })\n      .catch((response: any) => {\n        console.error(response);\n      });\n  }\n\n  public handleTicketAssignment(uuid: string, email: string) {\n    // if its already assigned to use, it's a noop\n    const ticket = this.data.find(ticket => ticket.uuid === uuid);\n    if (ticket.assignee && ticket.assignee.email === email) {\n      return;\n    }\n\n    postJSON(`/api/v2/ticket_actions.json`, {\n      tickets: [uuid],\n      action: 'assign',\n      assignee: email,\n    })\n      .then(() => {\n        this.refresh();\n      })\n      .catch((response: any) => {\n        console.error(response);\n      });\n  }\n\n  public renderTicket(ticket: Ticket) {\n    const date = ticket.opened_on;\n    const users = this.store.getAssignableUsers();\n    const agent = users.find(user => user.email === this.agent);\n    return html`\n      <div\n        @click=${() => {\n          if (this.clickable) {\n            this.fireCustomEvent(CustomEventType.ButtonClicked, { ticket });\n          }\n        }}\n        class=\"ticket ${ticket.status} ${getClasses({\n          clickable: this.clickable,\n        })}\"\n      >\n        <div class=\"topic\">${ticket.topic.name}</div>\n        <div class=\"body\">${ticket.body}</div>\n\n        <div class=\"date\">\n          <temba-date value=\"${date}\" display=\"duration\"></temba-date>\n        </div>\n\n        ${ticket.status === TicketStatus.Closed\n          ? html`<div class=\"reopen\">\n              <temba-button\n                primary\n                small\n                name=\"Reopen\"\n                @click=${(event: MouseEvent) => {\n                  event.preventDefault();\n                  event.stopPropagation();\n                  this.handleReopen(ticket.uuid);\n                }}\n              ></temba-button>\n            </div>`\n          : html`\n              <div>\n                <temba-dropdown\n                  drop_align=\"right\"\n                  arrowsize=\"8\"\n                  arrowoffset=\"-44\"\n                  offsety=\"8\"\n                  offsetx=${ticket.assignee ? -42 : -28}\n                >\n                  <div slot=\"toggle\" class=\"toggle\">\n                    ${ticket.assignee\n                      ? html`\n                          <div style=\"font-size:0.5em\">\n                            ${renderAvatar({\n                              name: ticket.assignee.name,\n                              position: 'left',\n                            })}\n                          </div>\n                        `\n                      : html`\n                          <temba-button\n                            name=\"Assign\"\n                            primary\n                            small\n                          ></temba-button>\n                        `}\n                  </div>\n\n                  <div\n                    slot=\"dropdown\"\n                    class=\"dropdown\"\n                    @click=${(event: MouseEvent) => {\n                      stopEvent(event);\n                    }}\n                  >\n                    ${ticket.assignee\n                      ? html`\n                          <div\n                            class=\"assigned option-group ${agent &&\n                            ticket.assignee.email == agent.email\n                              ? 'current-user'\n                              : ''}\"\n                          >\n                            ${this.renderUser(\n                              users.find(\n                                user => user.email === ticket.assignee.email\n                              )\n                            )}\n                            <temba-button\n                              name=\"Unassign\"\n                              primary\n                              small\n                              @click=${(event: MouseEvent) => {\n                                stopEvent(event);\n                                this.handleTicketAssignment(ticket.uuid, null);\n                              }}\n                            ></temba-button>\n                          </div>\n                        `\n                      : null}\n                    ${agent &&\n                    (!ticket.assignee || agent.email !== ticket.assignee.email)\n                      ? html`\n                          <div\n                            class=\"current-user option-group\"\n                            @click=${(event: MouseEvent) => {\n                              stopEvent(event);\n                              this.handleTicketAssignment(\n                                ticket.uuid,\n                                agent.email\n                              );\n                            }}\n                          >\n                            ${this.renderUser(agent)}\n                          </div>\n                        `\n                      : null}\n\n                    <div class=\"options option-group\">\n                      ${this.store.getAssignableUsers().map(user => {\n                        if (\n                          ticket.assignee &&\n                          user.email === ticket.assignee.email\n                        ) {\n                          return null;\n                        }\n\n                        if (user.email === this.agent) {\n                          return null;\n                        }\n                        return html`<div\n                          @click=${(event: MouseEvent) => {\n                            stopEvent(event);\n                            this.handleTicketAssignment(\n                              ticket.uuid,\n                              user.email\n                            );\n                          }}\n                        >\n                          ${this.renderUser(user)}\n                        </div>`;\n                      })}\n                    </div>\n                  </div>\n                </temba-dropdown>\n              </div>\n              <temba-tip\n                text=\"Resolve\"\n                position=\"left\"\n                style=\"width:1.5em\"\n                class=\"resolve\"\n              >\n                <temba-icon\n                  size=\"1.25\"\n                  name=\"${Icon.check}\"\n                  @click=${(event: MouseEvent) => {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    this.handleClose(ticket.uuid);\n                  }}\n                  ?clickable=${open}\n                />\n              </temba-tip>\n            `}\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      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.js';\nimport { CustomEventType, Ticket, TicketStatus, User } from '../interfaces';\nimport { StoreElement } from '../store/StoreElement';\nimport {\n  getClasses,\n  getFullName,\n  postJSON,\n  renderAvatar,\n  stopEvent,\n} from '../utils';\nimport { Icon } from '../vectoricon';\n\nexport class ContactTickets extends StoreElement {\n  @property({ type: String })\n  agent: string;\n\n  @property({ type: String })\n  contact: string;\n\n  @property({ type: String })\n  ticket: string;\n\n  @property({ type: Boolean })\n  clickable = false;\n\n  @property({ type: Boolean })\n  expandable = false;\n\n  @property({ type: Boolean })\n  expanded = false;\n\n  @property({ type: Object, attribute: false })\n  data: Ticket[];\n\n  static get styles() {\n    return css`\n      :host {\n      }\n\n      :hover {\n      }\n\n      .ticket.expandable:hover,\n      .ticket.clickable: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        background: #fff;\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        transition: all 200ms ease-in-out;\n      }\n\n      .ticket .body {\n        flex-grow: 5;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 200px;\n      }\n\n      .ticket .topic {\n        flex-grow: 1;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        margin: 0 0.75em;\n        width: 60px;\n      }\n\n      .ticket.expanded .topic {\n        display: none;\n      }\n\n      .ticket.expanded .topic-expanded {\n        display: -webkit-box;\n      }\n\n      .topic-expanded {\n        flex-grow: 1;\n        display: none;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n      }\n\n      .ticket.expanded {\n        flex-direction: column-reverse;\n        align-items: stretch;\n      }\n\n      .ticket.expanded .body {\n        display: block;\n        max-height: 40vh;\n        overflow-y: auto;\n        -webkit-line-clamp: none;\n        border-top: 1px solid #e6e6e6;\n        // 6px solid #f9f9f9;\n        margin-bottom: 0.5em;\n        padding: 0.5em 1em 0em 1em;\n        white-space: normal;\n        width: initial;\n      }\n\n      .status {\n        --icon-color: #999;\n      }\n\n      .ticket.closed {\n        background: #f9f9f9;\n        color: #888;\n      }\n\n      .resolve {\n        color: var(--color-primary-dark);\n      }\n\n      .dropdown {\n        color: rgb(45, 45, 45);\n        z-index: 50;\n        width: 18em;\n      }\n\n      .option-group {\n        padding: 0.4em;\n        border-bottom: 1px solid #f3f3f3;\n      }\n\n      .assigned .user {\n        flex-grow: 1;\n      }\n\n      .assigned {\n        display: flex;\n        align-items: center;\n      }\n\n      .assigned temba-button {\n        margin-right: 0.75em;\n      }\n\n      .assigned .user:hover {\n        cursor: default;\n        background: none;\n      }\n\n      .options {\n        max-height: 40vh;\n        overflow-y: auto;\n        border-bottom: none;\n      }\n\n      .user {\n        display: flex;\n        padding: 0.4em 0.7em;\n        align-items: center;\n        border-radius: var(--curvature);\n        cursor: pointer;\n      }\n\n      .user:hover {\n        background: var(--color-selection);\n      }\n\n      .user .avatar {\n        font-size: 0.5em;\n        margin-right: 1em;\n      }\n\n      .user .name {\n        display: -webkit-box;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        flex-grow: 1;\n      }\n\n      .user temba-button {\n        margin-left: 0.5em;\n      }\n\n      .current-user {\n        font-weight: 400;\n      }\n\n      .details {\n        display: flex;\n        align-items: center;\n        padding: 0.5em 1em;\n        flex-shrink: 1;\n      }\n\n      .details .date {\n        padding: 0em 0.75em;\n      }\n\n      .details .toggle {\n        padding-right: 0.75em;\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') || changes.has('ticket')) {\n      if (this.contact) {\n        this.url = `/api/v2/tickets.json?contact=${this.contact}${\n          this.ticket ? '&ticket=' + this.ticket : ''\n        }`;\n      } else {\n        this.url = null;\n      }\n    }\n  }\n\n  private renderUser(user: User) {\n    if (!user) {\n      return null;\n    }\n    return html`<div class=\"user\">\n      <div class=\"avatar\">${renderAvatar({ user: user })}</div>\n      <div class=\"name\">${getFullName(user)}</div>\n    </div>`;\n  }\n\n  private handleClose(uuid: string) {\n    postJSON(`/api/v2/ticket_actions.json`, {\n      tickets: [uuid],\n      action: 'close',\n    })\n      .then(() => {\n        this.refresh();\n      })\n      .catch((response: any) => {\n        console.error(response);\n      });\n  }\n\n  private handleReopen(uuid: string) {\n    postJSON(`/api/v2/ticket_actions.json`, {\n      tickets: [uuid],\n      action: 'reopen',\n    })\n      .then(() => {\n        this.refresh();\n      })\n      .catch((response: any) => {\n        console.error(response);\n      });\n  }\n\n  public handleTicketAssignment(uuid: string, email: string) {\n    // if its already assigned to use, it's a noop\n    const ticket = this.data.find(ticket => ticket.uuid === uuid);\n    if (ticket.assignee && ticket.assignee.email === email) {\n      return;\n    }\n\n    postJSON(`/api/v2/ticket_actions.json`, {\n      tickets: [uuid],\n      action: 'assign',\n      assignee: email,\n    })\n      .then(() => {\n        this.refresh();\n      })\n      .catch((response: any) => {\n        console.error(response);\n      });\n    return true;\n  }\n\n  public renderTicket(ticket: Ticket) {\n    const date = ticket.opened_on;\n    const users = this.store.getAssignableUsers();\n    const agent = users.find(user => user.email === this.agent);\n    return html`\n      <div\n        @click=${() => {\n          if (this.clickable) {\n            this.fireCustomEvent(CustomEventType.ButtonClicked, { ticket });\n          } else if (this.expandable) {\n            this.expanded = !this.expanded;\n          }\n        }}\n        class=\"ticket ${ticket.status} ${getClasses({\n          clickable: this.clickable,\n          expandable: this.expandable,\n          expanded: this.expanded,\n        })}\"\n      >\n        <div class=\"topic\">${ticket.topic.name}</div>\n        <div class=\"body\">${ticket.body}</div>\n\n        <div class=\"details\">\n          <div class=\"topic-expanded\">${ticket.topic.name}</div>\n\n          <div class=\"date\">\n            <temba-date value=\"${date}\" display=\"duration\"></temba-date>\n          </div>\n\n          ${ticket.status === TicketStatus.Closed\n            ? html`<div class=\"reopen\">\n                <temba-button\n                  primary\n                  small\n                  name=\"Reopen\"\n                  @click=${(event: MouseEvent) => {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    this.handleReopen(ticket.uuid);\n                  }}\n                ></temba-button>\n              </div>`\n            : html`\n                <div>\n                  <temba-dropdown\n                    drop_align=\"right\"\n                    arrowsize=\"8\"\n                    arrowoffset=\"-44\"\n                    offsety=\"8\"\n                    offsetx=${ticket.assignee ? -42 : -28}\n                  >\n                    <div slot=\"toggle\" class=\"toggle\">\n                      ${ticket.assignee\n                        ? html`\n                            <div style=\"font-size:0.5em\">\n                              ${renderAvatar({\n                                name: ticket.assignee.name,\n                                position: 'left',\n                              })}\n                            </div>\n                          `\n                        : html`\n                            <temba-button\n                              name=\"Assign\"\n                              primary\n                              small\n                            ></temba-button>\n                          `}\n                    </div>\n\n                    <div\n                      slot=\"dropdown\"\n                      class=\"dropdown\"\n                      @click=${(event: MouseEvent) => {\n                        stopEvent(event);\n                      }}\n                    >\n                      ${ticket.assignee\n                        ? html`\n                            <div\n                              class=\"assigned option-group ${agent &&\n                              ticket.assignee.email == agent.email\n                                ? 'current-user'\n                                : ''}\"\n                            >\n                              ${this.renderUser(\n                                users.find(\n                                  user => user.email === ticket.assignee.email\n                                )\n                              )}\n                              <temba-button\n                                name=\"Unassign\"\n                                primary\n                                small\n                                @click=${(event: MouseEvent) => {\n                                  stopEvent(event);\n                                  this.handleTicketAssignment(\n                                    ticket.uuid,\n                                    null\n                                  );\n                                }}\n                              ></temba-button>\n                            </div>\n                          `\n                        : null}\n                      ${agent &&\n                      (!ticket.assignee ||\n                        agent.email !== ticket.assignee.email)\n                        ? html`\n                            <div\n                              class=\"current-user option-group\"\n                              @click=${(event: MouseEvent) => {\n                                stopEvent(event);\n                                this.handleTicketAssignment(\n                                  ticket.uuid,\n                                  agent.email\n                                );\n                              }}\n                            >\n                              ${this.renderUser(agent)}\n                            </div>\n                          `\n                        : null}\n\n                      <div class=\"options option-group\">\n                        ${this.store.getAssignableUsers().map(user => {\n                          if (\n                            ticket.assignee &&\n                            user.email === ticket.assignee.email\n                          ) {\n                            return null;\n                          }\n\n                          if (user.email === this.agent) {\n                            return null;\n                          }\n                          return html`<div\n                            @click=${(event: MouseEvent) => {\n                              stopEvent(event);\n                              this.handleTicketAssignment(\n                                ticket.uuid,\n                                user.email\n                              );\n                            }}\n                          >\n                            ${this.renderUser(user)}\n                          </div>`;\n                        })}\n                      </div>\n                    </div>\n                  </temba-dropdown>\n                </div>\n                <temba-tip\n                  text=\"Resolve\"\n                  position=\"left\"\n                  style=\"width:1.5em\"\n                  class=\"resolve\"\n                >\n                  <temba-icon\n                    size=\"1.25\"\n                    name=\"${Icon.check}\"\n                    @click=${(event: MouseEvent) => {\n                      event.preventDefault();\n                      event.stopPropagation();\n                      this.handleClose(ticket.uuid);\n                    }}\n                    ?clickable=${open}\n                  />\n                </temba-tip>\n              `}\n        </div>\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      return html`${tickets}`;\n    }\n\n    return html`<slot name=\"empty\"></slot>`;\n  }\n}\n"]}