@nyaruka/temba-components 0.48.2 → 0.48.3

package/dist/sw.js.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"sw.js","sources":["../../../../../tmp/f9a22928ba07791c08333cc3fa2fae06/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\": \"1bf3fa94.js\",\n    \"revision\": \"5218d086a1c5aed78442a599e1301194\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"d9f5ad935c96a2f0756282133628de23\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"92c080a30061ddf17ba34c8dc9cfe7c1\"\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/98c8996c.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.48.2"</script>
+<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/1bf3fa94.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.48.3"</script>

package/dist/templates/components-head.html

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

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

@@ -27,8 +27,15 @@ export class ContactTickets extends StoreElement {
           0 0 0px 2px var(--color-link-primary);
       }
 
+      .header {
+        display: flex;
+        flex-direction: row;
+        flex-grow: 1;
+      }
+
       .tickets {
         display: flex;
+        flex-direction: column;
         padding: 0.3em 0.8em;
       }
 
@@ -39,65 +46,42 @@ export class ContactTickets extends StoreElement {
       .ticket {
         background: #fff;
         display: flex;
+        flex-direction: column;
         margin-bottom: 0.5em;
         border-radius: var(--curvature);
         display: flex;
-        flex-direction: row;
-        align-items: center;
+        flex-direction: column;
+        align-items: stretch;
         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;
-        white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        margin: 0 0.75em;
-        width: 60px;
-      }
-
-      .ticket.expanded .topic {
-        display: none;
-      }
-
-      .ticket.expanded .topic-expanded {
+        margin: 0.5em 0.75em 0.5em 0.75em;
         display: -webkit-box;
-      }
-
-      .topic-expanded {
-        flex-grow: 1;
-        display: none;
-        -webkit-line-clamp: 1;
         -webkit-box-orient: vertical;
-        overflow: hidden;
-      }
-
-      .ticket.expanded {
-        flex-direction: column-reverse;
-        align-items: stretch;
+        -webkit-line-clamp: 1;
+        flex-grow: 2;
       }
 
-      .ticket.expanded .body {
-        display: block;
-        max-height: 40vh;
+      .ticket .body {
+        max-height: 0px;
         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;
+        padding: 0.5em 0.75em 0em 0.75em;
+        max-height: 40vh;
+        display: none;
+        margin-bottom: 0.5em;
+        border-top: 1px solid #e6e6e6;
+      }
+
+      .ticket.expanded .body {
+        display: block;
       }
 
       .status {
@@ -184,16 +168,16 @@ export class ContactTickets extends StoreElement {
       .details {
         display: flex;
         align-items: center;
-        padding: 0.5em 1em;
         flex-shrink: 1;
+        margin-right: 0.5em;
       }
 
       .details .date {
-        padding: 0em 0.75em;
+        padding: 0em 0.5em;
       }
 
       .details .toggle {
-        padding-right: 0.75em;
+        padding-right: 0.5em;
       }
     `;
     }
@@ -298,103 +282,101 @@ export class ContactTickets extends StoreElement {
             expanded: this.expanded,
         })}"
       >
-        <div class="topic">${ticket.topic.name}</div>
-        <div class="body">${ticket.body}</div>
+        <div class="header">
+          <div class="topic">${ticket.topic.name}</div>
 
-        <div class="details">
-          <div class="topic-expanded">${ticket.topic.name}</div>
-
-          <div class="date">
-            <temba-date value="${date}" display="duration"></temba-date>
-          </div>
+          <div class="details">
+            <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 &&
+                        ${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;
@@ -403,37 +385,39 @@ 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>
+        <div class="body">${ticket.body}</div>
       </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.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"]}
+{"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      .header {\n        display: flex;\n        flex-direction: row;\n        flex-grow: 1;\n      }\n\n      .tickets {\n        display: flex;\n        flex-direction: column;\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        flex-direction: column;\n        margin-bottom: 0.5em;\n        border-radius: var(--curvature);\n        display: flex;\n        flex-direction: column;\n        align-items: stretch;\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 .topic {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        margin: 0.5em 0.75em 0.5em 0.75em;\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: 1;\n        flex-grow: 2;\n      }\n\n      .ticket .body {\n        max-height: 0px;\n        overflow-y: auto;\n        -webkit-line-clamp: none;\n        white-space: normal;\n        width: initial;\n        padding: 0.5em 0.75em 0em 0.75em;\n        max-height: 40vh;\n        display: none;\n        margin-bottom: 0.5em;\n        border-top: 1px solid #e6e6e6;\n      }\n\n      .ticket.expanded .body {\n        display: block;\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        flex-shrink: 1;\n        margin-right: 0.5em;\n      }\n\n      .details .date {\n        padding: 0em 0.5em;\n      }\n\n      .details .toggle {\n        padding-right: 0.5em;\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=\"header\">\n          <div class=\"topic\">${ticket.topic.name}</div>\n\n          <div class=\"details\">\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        <div class=\"body\">${ticket.body}</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"]}

package/out-tsc/src/list/TicketList.js

@@ -26,7 +26,7 @@ export class TicketList extends TembaList {
           >
             <div style="flex: 1; color:#333;">
               <div
-                style="font-weight:400;line-height:1.6;border:0px solid purple;"
+                style="font-weight:400;line-height:1.6;display:-webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 1;overflow: hidden;"
               >
                 ${contact.name}
               </div>

package/out-tsc/src/list/TicketList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TicketList.js","sourceRoot":"","sources":["../../../src/list/TicketList.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,MAAM,OAAO,UAAW,SAAQ,SAAS;IAIhC,kBAAkB;QACvB,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACzB,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC;YAC3D,OAAO,CACL,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,OAAO,EAAE,GAAG,IAAI,CACpE,CAAC;SACH;QACD,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAbV,UAAK,GAAG,EAAE,CAAC;QAeT,IAAI,CAAC,QAAQ,GAAG,aAAa,CAAC;QAC9B,IAAI,CAAC,YAAY,GAAG,CAAC,OAAgB,EAAkB,EAAE;YACvD,OAAO,IAAI,CAAA;;;;;;;;;;;kBAWC,OAAO,CAAC,IAAI;;gBAEd,OAAO,CAAC,MAAM,CAAC,SAAS;gBACxB,CAAC,CAAC,IAAI;gBACN,CAAC,CAAC,OAAO,CAAC,QAAQ;oBAClB,CAAC,CAAC,IAAI,CAAA;;;;wBAKE,OAAO,CAAC,QAAQ,CAAC,SAAS,KAAK,GAAG;wBAChC,CAAC,CAAC,IAAI,CAAA;;oCAEI;wBACV,CAAC,CAAC,IACN;wBAEE,OAAO,CAAC,QAAQ,CAAC,IAAI;wBACnB,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI;wBACvB,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW;4BAC9B,CAAC,CAAC,IAAI,CAAA;;;0CAGU,IAAI,CAAC,UAAU;;;;;;mCAMtB;4BACT,CAAC,CAAC,qBACN;;mBAEH;oBACH,CAAC,CAAC,IAAI;;;;;;;0BAOI,OAAO,CAAC,MAAM,CAAC,SAAS;gBAChC,OAAO,CAAC,MAAM,CAAC,gBAAgB;;;;;kBAK/B,CAAC,OAAO,CAAC,MAAM,CAAC,SAAS,IAAI,OAAO,CAAC,MAAM,CAAC,QAAQ;gBACpD,CAAC,CAAC,IAAI,CAAA,GAAG,gBAAgB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE;gBACpD,CAAC,CAAC,IAAI;;;;;OAKjB,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF;AArFC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAChB","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { TembaList } from './TembaList';\nimport { timeSince } from '../utils';\nimport { Contact } from '../interfaces';\nimport { renderUserAvatar } from '../contacts/events';\nimport { Icon } from '../vectoricon';\n\nexport class TicketList extends TembaList {\n  @property({ type: String })\n  agent = '';\n\n  public getRefreshEndpoint() {\n    if (this.items.length > 0) {\n      const lastActivity = this.items[0].ticket.last_activity_on;\n      return (\n        this.endpoint + '?after=' + new Date(lastActivity).getTime() * 1000\n      );\n    }\n    return this.endpoint;\n  }\n\n  constructor() {\n    super();\n\n    this.valueKey = 'ticket.uuid';\n    this.renderOption = (contact: Contact): TemplateResult => {\n      return html`\n        <div\n          style=\"align-items:center; margin-top: 0.1em; margin-bottom: 0.1em\"\n        >\n          <div\n            style=\"display:flex; align-items: flex-start;border:0px solid red;\"\n          >\n            <div style=\"flex: 1; color:#333;\">\n              <div\n                style=\"font-weight:400;line-height:1.6;border:0px solid purple;\"\n              >\n                ${contact.name}\n              </div>\n              ${contact.ticket.closed_on\n                ? null\n                : contact.last_msg\n                ? html`\n                    <div\n                      style=\"font-size: 0.9em; display: -webkit-box;  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;\"\n                    >\n                      ${\n                        contact.last_msg.direction === 'I'\n                          ? html`<div\n                              style=\"border-radius:9999px; background:var(--color-primary-dark);width:6px;height:6px;display:inline-block;margin:0px 2px;margin-bottom:1px;\"\n                            ></div>`\n                          : null\n                      }\n                      ${\n                        contact.last_msg.text\n                          ? contact.last_msg.text\n                          : contact.last_msg.attachments\n                          ? html`<div style=\"display:inline-block\">\n                              <div style=\"display:flex; margin-left:0.2em\">\n                                <temba-icon\n                                  name=\"${Icon.attachment}\"\n                                ></temba-icon>\n                                <div style=\"flex-grow:1;margin-left:0.2em\">\n                                  Attachment\n                                </div>\n                              </div>\n                            </div>`\n                          : 'Unsupported Message'\n                      }\n                    </div></div>\n                  `\n                : null}\n            </div>\n            <div\n              style=\"font-size:0.8em;display:flex;flex-direction:column;align-items:flex-end;max-width:60px;min-width:30px;border:0px solid green;text-align:right\"\n            >\n              <div style=\"padding:4px;padding-bottom:2px\">\n                <temba-date\n                  value=${contact.ticket.closed_on ||\n                  contact.ticket.last_activity_on}\n                  display=\"duration\"\n                ></temba-date>\n              </div>\n              <div style=\"font-size:0.7em;\">\n                ${!contact.ticket.closed_on && contact.ticket.assignee\n                  ? html`${renderUserAvatar(contact.ticket.assignee)}`\n                  : null}\n              </div>\n            </div>\n          </div>\n        </div>\n      `;\n    };\n  }\n}\n"]}
+{"version":3,"file":"TicketList.js","sourceRoot":"","sources":["../../../src/list/TicketList.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,MAAM,OAAO,UAAW,SAAQ,SAAS;IAIhC,kBAAkB;QACvB,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACzB,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC;YAC3D,OAAO,CACL,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,OAAO,EAAE,GAAG,IAAI,CACpE,CAAC;SACH;QACD,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAbV,UAAK,GAAG,EAAE,CAAC;QAeT,IAAI,CAAC,QAAQ,GAAG,aAAa,CAAC;QAC9B,IAAI,CAAC,YAAY,GAAG,CAAC,OAAgB,EAAkB,EAAE;YACvD,OAAO,IAAI,CAAA;;;;;;;;;;;kBAWC,OAAO,CAAC,IAAI;;gBAEd,OAAO,CAAC,MAAM,CAAC,SAAS;gBACxB,CAAC,CAAC,IAAI;gBACN,CAAC,CAAC,OAAO,CAAC,QAAQ;oBAClB,CAAC,CAAC,IAAI,CAAA;;;;wBAKE,OAAO,CAAC,QAAQ,CAAC,SAAS,KAAK,GAAG;wBAChC,CAAC,CAAC,IAAI,CAAA;;oCAEI;wBACV,CAAC,CAAC,IACN;wBAEE,OAAO,CAAC,QAAQ,CAAC,IAAI;wBACnB,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI;wBACvB,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW;4BAC9B,CAAC,CAAC,IAAI,CAAA;;;0CAGU,IAAI,CAAC,UAAU;;;;;;mCAMtB;4BACT,CAAC,CAAC,qBACN;;mBAEH;oBACH,CAAC,CAAC,IAAI;;;;;;;0BAOI,OAAO,CAAC,MAAM,CAAC,SAAS;gBAChC,OAAO,CAAC,MAAM,CAAC,gBAAgB;;;;;kBAK/B,CAAC,OAAO,CAAC,MAAM,CAAC,SAAS,IAAI,OAAO,CAAC,MAAM,CAAC,QAAQ;gBACpD,CAAC,CAAC,IAAI,CAAA,GAAG,gBAAgB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE;gBACpD,CAAC,CAAC,IAAI;;;;;OAKjB,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF;AArFC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAChB","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { TembaList } from './TembaList';\nimport { timeSince } from '../utils';\nimport { Contact } from '../interfaces';\nimport { renderUserAvatar } from '../contacts/events';\nimport { Icon } from '../vectoricon';\n\nexport class TicketList extends TembaList {\n  @property({ type: String })\n  agent = '';\n\n  public getRefreshEndpoint() {\n    if (this.items.length > 0) {\n      const lastActivity = this.items[0].ticket.last_activity_on;\n      return (\n        this.endpoint + '?after=' + new Date(lastActivity).getTime() * 1000\n      );\n    }\n    return this.endpoint;\n  }\n\n  constructor() {\n    super();\n\n    this.valueKey = 'ticket.uuid';\n    this.renderOption = (contact: Contact): TemplateResult => {\n      return html`\n        <div\n          style=\"align-items:center; margin-top: 0.1em; margin-bottom: 0.1em\"\n        >\n          <div\n            style=\"display:flex; align-items: flex-start;border:0px solid red;\"\n          >\n            <div style=\"flex: 1; color:#333;\">\n              <div\n                style=\"font-weight:400;line-height:1.6;display:-webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 1;overflow: hidden;\"\n              >\n                ${contact.name}\n              </div>\n              ${contact.ticket.closed_on\n                ? null\n                : contact.last_msg\n                ? html`\n                    <div\n                      style=\"font-size: 0.9em; display: -webkit-box;  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;\"\n                    >\n                      ${\n                        contact.last_msg.direction === 'I'\n                          ? html`<div\n                              style=\"border-radius:9999px; background:var(--color-primary-dark);width:6px;height:6px;display:inline-block;margin:0px 2px;margin-bottom:1px;\"\n                            ></div>`\n                          : null\n                      }\n                      ${\n                        contact.last_msg.text\n                          ? contact.last_msg.text\n                          : contact.last_msg.attachments\n                          ? html`<div style=\"display:inline-block\">\n                              <div style=\"display:flex; margin-left:0.2em\">\n                                <temba-icon\n                                  name=\"${Icon.attachment}\"\n                                ></temba-icon>\n                                <div style=\"flex-grow:1;margin-left:0.2em\">\n                                  Attachment\n                                </div>\n                              </div>\n                            </div>`\n                          : 'Unsupported Message'\n                      }\n                    </div></div>\n                  `\n                : null}\n            </div>\n            <div\n              style=\"font-size:0.8em;display:flex;flex-direction:column;align-items:flex-end;max-width:60px;min-width:30px;border:0px solid green;text-align:right\"\n            >\n              <div style=\"padding:4px;padding-bottom:2px\">\n                <temba-date\n                  value=${contact.ticket.closed_on ||\n                  contact.ticket.last_activity_on}\n                  display=\"duration\"\n                ></temba-date>\n              </div>\n              <div style=\"font-size:0.7em;\">\n                ${!contact.ticket.closed_on && contact.ticket.assignee\n                  ? html`${renderUserAvatar(contact.ticket.assignee)}`\n                  : null}\n              </div>\n            </div>\n          </div>\n        </div>\n      `;\n    };\n  }\n}\n"]}

package/package.json

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