@nyaruka/temba-components 0.113.0 → 0.114.0

package/web-test-runner.config.mjs

@@ -130,7 +130,7 @@ const checkScreenshot = async (filename, excluded, threshold) => {
   });
 };
 
-const wireScreenshots = async (page, context, wait) => {
+const wireScreenshots = async (page, context, wait, replaceScreenshots) => {
   // clear out any past tests
   const diffs = path.resolve(SCREENSHOTS, DIFF);
   const tests = path.resolve(SCREENSHOTS, TEST);
@@ -142,6 +142,7 @@ const wireScreenshots = async (page, context, wait) => {
     'matchPageSnapshot',
     (filename, clip, excluded, threshold) => {
       return new Promise(async (resolve, reject) => {
+        // const start = Date.now();
         const testFile = await getPath(TEST, filename);
         const truthFile = await getPath(TRUTH, filename);
 
@@ -182,9 +183,16 @@ const wireScreenshots = async (page, context, wait) => {
 
           try {
             const result = await checkScreenshot(filename);
+            // const end = Date.now();
+            // console.log(`Screenshot took ${end - start}ms`);
             resolve(result);
           } catch (error) {
-            reject(error);
+            if (replaceScreenshots) {
+              await page.screenshot({ path: truthFile, clip });
+              resolve();
+            } else  {
+              reject(error);
+            }
             return;
           }
         }
@@ -244,6 +252,7 @@ const wireScreenshots = async (page, context, wait) => {
     await ele.click({});
   });
 
+
   await page.exposeFunction(
     'typeInto',
     async (selector, text, replace = false, enter = false) => {
@@ -338,7 +347,10 @@ export default {
         headless: true,
       },
       createPage: async ({ context, config }) => {
-        const wait = !(config['unknown'] || []).includes('--fast');
+        const params = (config['unknown'] || [])
+        const wait = !params.includes('--fast');
+        const replaceScreenshots = params.includes('--replace-screenshots');
+
         const page = await context.newPage();
         await page.setUserAgent(
           'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36'
@@ -350,7 +362,7 @@ export default {
           `,
           });
 
-          await wireScreenshots(page, context, wait);
+          await wireScreenshots(page, context, wait, replaceScreenshots);
         });
 
         await page.emulateTimezone('GMT');

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

@@ -1,462 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { CustomEventType, TicketStatus } from '../interfaces';
-import { EndpointMonitorElement } from '../store/EndpointMonitorElement';
-import { getClasses, postJSON, stopEvent } from '../utils';
-import { Icon } from '../vectoricon';
-const dropdownUserScale = 0.7;
-const inlineUserScale = 0.8;
-export class ContactTickets extends EndpointMonitorElement {
-    constructor() {
-        super(...arguments);
-        this.clickable = false;
-        this.expandable = false;
-        this.expanded = false;
-    }
-    static get styles() {
-        return css `
-      :host {
-      }
-
-      :hover {
-      }
-
-      .ticket.expandable:hover,
-      .ticket.clickable:hover {
-        cursor: pointer;
-        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),
-          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;
-      }
-
-      .count {
-        margin-left: 0.5em;
-      }
-
-      .ticket {
-        background: #fff;
-        display: flex;
-        flex-direction: column;
-        margin-bottom: 0.5em;
-        border-radius: var(--curvature);
-        display: flex;
-        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 .topic {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        margin: 0.5em 0.75em 0.5em 0.75em;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 1;
-        flex-grow: 2;
-      }
-
-      .ticket .body {
-        max-height: 0px;
-        overflow-y: auto;
-        -webkit-line-clamp: none;
-        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 {
-        --icon-color: #999;
-      }
-
-      .ticket.closed {
-        background: #f9f9f9;
-        color: #888;
-      }
-
-      .resolve {
-        color: var(--color-primary-dark);
-      }
-
-      .dropdown {
-        color: rgb(45, 45, 45);
-        z-index: 50;
-        width: 18em;
-      }
-
-      .option-group {
-        padding: 0.4em;
-        border-bottom: 1px solid #f3f3f3;
-      }
-
-      .option-group temba-user {
-        flex-grow: 1;
-      }
-
-      .assigned .user {
-        flex-grow: 1;
-      }
-
-      .assigned {
-        display: flex;
-        align-items: center;
-      }
-
-      .assigned temba-button {
-        margin-right: 0.75em;
-      }
-
-      .assigned .user:hover {
-        cursor: default;
-        background: none;
-      }
-
-      .options {
-        max-height: 40vh;
-        overflow-y: auto;
-        border-bottom: none;
-      }
-
-      .user {
-        display: flex;
-        align-items: center;
-        border-radius: var(--curvature);
-        cursor: pointer;
-      }
-
-      .user:hover {
-        background: var(--color-selection);
-      }
-
-      .user .name {
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        flex-grow: 1;
-      }
-
-      .user temba-button {
-        margin-left: 0.5em;
-      }
-
-      .current-user {
-        font-weight: 400;
-      }
-
-      .details {
-        display: flex;
-        align-items: center;
-        flex-shrink: 1;
-        margin-right: 0.5em;
-      }
-
-      .details .date {
-        padding: 0em 0.5em;
-      }
-
-      .details .toggle {
-        padding-right: 0.5em;
-      }
-    `;
-    }
-    prepareData(data) {
-        if (data && data.length) {
-            data.sort((a, b) => {
-                if (a.status == TicketStatus.Open && b.status == TicketStatus.Closed) {
-                    return -1;
-                }
-                if (b.status == TicketStatus.Open && a.status == TicketStatus.Closed) {
-                    return 1;
-                }
-                if (a.status == TicketStatus.Closed &&
-                    b.status == TicketStatus.Closed) {
-                    return (new Date(b.closed_on).getTime() - new Date(a.closed_on).getTime());
-                }
-                return (new Date(b.opened_on).getTime() - new Date(a.opened_on).getTime());
-            });
-        }
-        return data;
-    }
-    updated(changes) {
-        super.updated(changes);
-        if (changes.has('data') && this.data) {
-            this.fireCustomEvent(CustomEventType.DetailsChanged, {
-                count: this.data.length
-            });
-        }
-        if (changes.has('contact') || changes.has('ticket')) {
-            if (this.contact) {
-                this.url = `/api/v2/tickets.json?contact=${this.contact}${this.ticket ? '&ticket=' + this.ticket : ''}`;
-            }
-            else {
-                this.url = null;
-            }
-        }
-    }
-    handleClose(uuid) {
-        postJSON(`/api/v2/ticket_actions.json`, {
-            tickets: [uuid],
-            action: 'close'
-        })
-            .then(() => {
-            this.refresh();
-        })
-            .catch((response) => {
-            console.error(response);
-        });
-    }
-    handleReopen(uuid) {
-        postJSON(`/api/v2/ticket_actions.json`, {
-            tickets: [uuid],
-            action: 'reopen'
-        })
-            .then(() => {
-            this.refresh();
-        })
-            .catch((response) => {
-            console.error(response);
-        });
-    }
-    handleTicketAssignment(uuid, email) {
-        // if its already assigned to use, it's a noop
-        const ticket = this.data.find((ticket) => ticket.uuid === uuid);
-        if (ticket.assignee && ticket.assignee.email === email) {
-            return;
-        }
-        this.blur();
-        postJSON(`/api/v2/ticket_actions.json`, {
-            tickets: [uuid],
-            action: 'assign',
-            assignee: email
-        })
-            .then(() => {
-            this.refresh();
-        })
-            .catch((response) => {
-            console.error(response);
-        });
-        return true;
-    }
-    renderTicket(ticket) {
-        const date = ticket.opened_on;
-        const users = this.store.getAssignableUsers();
-        const agent = users.find((user) => user.email === this.agent);
-        return html `
-      <div
-        @click=${() => {
-            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="header">
-          <div class="topic">${ticket.topic.name}</div>
-
-          <div class="details">
-            <div class="date">
-              <temba-date value="${date}" display="duration"></temba-date>
-            </div>
-
-            ${ticket.status === TicketStatus.Closed
-            ? html `<div class="reopen">
-                  <temba-button
-                    primary
-                    small
-                    name="Reopen"
-                    @click=${(event) => {
-                event.preventDefault();
-                event.stopPropagation();
-                this.handleReopen(ticket.uuid);
-            }}
-                  ></temba-button>
-                </div>`
-            : html `
-                  <div>
-                    <temba-dropdown
-                      right
-                      arrowsize="8"
-                      arrowoffset="-44"
-                      offsety="8"
-                      offsetx=${ticket.assignee ? -42 : -28}
-                    >
-                      <div slot="toggle" class="toggle">
-                        ${ticket.assignee
-                ? html `
-                              <temba-user
-                                email=${ticket.assignee.email}
-                                scale="${inlineUserScale}"
-                              ></temba-user>
-                            `
-                : html `
-                              <temba-button
-                                name="Assign"
-                                primary
-                                small
-                              ></temba-button>
-                            `}
-                      </div>
-
-                      <div
-                        slot="dropdown"
-                        class="dropdown"
-                        @click=${(event) => {
-                stopEvent(event);
-            }}
-                      >
-                        ${ticket.assignee
-                ? html `
-                              <div
-                                class="assigned option-group ${agent &&
-                    ticket.assignee.email == agent.email
-                    ? 'current-user'
-                    : ''}"
-                              >
-                                <temba-user
-                                  email=${ticket.assignee.email}
-                                  name
-                                  scale="${dropdownUserScale}"
-                                ></temba-user>
-                                <temba-button
-                                  name="Unassign"
-                                  primary
-                                  small
-                                  @click=${(event) => {
-                    stopEvent(event);
-                    this.handleTicketAssignment(ticket.uuid, null);
-                }}
-                                ></temba-button>
-                              </div>
-                            `
-                : null}
-                        ${agent &&
-                (!ticket.assignee ||
-                    agent.email !== ticket.assignee.email)
-                ? html `
-                              <div
-                                class="current-user option-group"
-                                @click=${(event) => {
-                    stopEvent(event);
-                    this.handleTicketAssignment(ticket.uuid, agent.email);
-                }}
-                              >
-                                <temba-user
-                                  email=${agent.email}
-                                  name
-                                  scale="${dropdownUserScale}"
-                                ></temba-user>
-                              </div>
-                            `
-                : null}
-
-                        <div class="options option-group">
-                          ${this.store.getAssignableUsers().map((user) => {
-                if (ticket.assignee &&
-                    user.email === ticket.assignee.email) {
-                    return null;
-                }
-                if (user.email === this.agent) {
-                    return null;
-                }
-                return html `<div
-                              @click=${(event) => {
-                    stopEvent(event);
-                    this.handleTicketAssignment(ticket.uuid, user.email);
-                }}
-                            >
-                              <temba-user
-                                email=${user.email}
-                                scale="${dropdownUserScale}"
-                                name
-                              ></temba-user>
-                            </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) => {
-                event.preventDefault();
-                event.stopPropagation();
-                this.handleClose(ticket.uuid);
-            }}
-                      ?clickable=${open}
-                    />
-                  </temba-tip>
-                `}
-          </div>
-        </div>
-        <div class="body">${ticket.body}</div>
-      </div>
-    `;
-    }
-    render() {
-        if (this.data && this.data.length > 0) {
-            const tickets = this.data.map((ticket) => {
-                return this.renderTicket(ticket);
-            });
-            return html `${tickets}`;
-        }
-        return html `<slot name="empty"></slot>`;
-    }
-}
-__decorate([
-    property({ type: String })
-], ContactTickets.prototype, "agent", void 0);
-__decorate([
-    property({ type: String })
-], ContactTickets.prototype, "contact", void 0);
-__decorate([
-    property({ type: String })
-], ContactTickets.prototype, "ticket", void 0);
-__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);
-//# sourceMappingURL=ContactTickets.js.map

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

@@ -1 +0,0 @@
-{"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 } from '../interfaces';\nimport { EndpointMonitorElement } from '../store/EndpointMonitorElement';\nimport { getClasses, postJSON, stopEvent } from '../utils';\nimport { Icon } from '../vectoricon';\n\nconst dropdownUserScale = 0.7;\nconst inlineUserScale = 0.8;\n\nexport class ContactTickets extends EndpointMonitorElement {\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      .option-group temba-user {\n        flex-grow: 1;\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        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 .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\n    if (changes.has('data') && this.data) {\n      this.fireCustomEvent(CustomEventType.DetailsChanged, {\n        count: this.data.length\n      });\n    }\n\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 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    this.blur();\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                      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                              <temba-user\n                                email=${ticket.assignee.email}\n                                scale=\"${inlineUserScale}\"\n                              ></temba-user>\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                                <temba-user\n                                  email=${ticket.assignee.email}\n                                  name\n                                  scale=\"${dropdownUserScale}\"\n                                ></temba-user>\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                                <temba-user\n                                  email=${agent.email}\n                                  name\n                                  scale=\"${dropdownUserScale}\"\n                                ></temba-user>\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                              <temba-user\n                                email=${user.email}\n                                scale=\"${dropdownUserScale}\"\n                                name\n                              ></temba-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/test/temba-contact-tickets.test.js

@@ -1,36 +0,0 @@
-import { assert, waitUntil } from '@open-wc/testing';
-import { ContactTickets } from '../src/contacts/ContactTickets';
-import { assertScreenshot, getClip, getComponent, loadStore, mockAPI, mockNow } from './utils.test';
-const TAG = 'temba-contact-tickets';
-const getContactTickets = async (attrs = {}) => {
-    const contactTickets = (await getComponent(TAG, attrs, '', 400));
-    // wait for our contact to load
-    await waitUntil(() => !!contactTickets.data);
-    return contactTickets;
-};
-mockNow('2023-04-07T00:00:00.000-00:00');
-describe('temba-contact-tickets', () => {
-    beforeEach(() => {
-        mockAPI();
-        loadStore();
-    });
-    it('renders default', async () => {
-        const tickets = await getContactTickets({
-            contact: '24d64810-3315-4ff5-be85-48e3fe055bf9',
-            agent: 'admin1@nyaruka.com'
-        });
-        assert.instanceOf(tickets, ContactTickets);
-        await assertScreenshot('contacts/tickets', getClip(tickets));
-    });
-    it('shows assignment picker', async () => {
-        const tickets = await getContactTickets({
-            contact: '24d64810-3315-4ff5-be85-48e3fe055bf9',
-            agent: 'admin1@nyaruka.com'
-        });
-        // click on the avatar element
-        tickets.shadowRoot.querySelector('temba-user').click();
-        assert.instanceOf(tickets, ContactTickets);
-        await assertScreenshot('contacts/tickets-assignment', getClip(tickets));
-    });
-});
-//# sourceMappingURL=temba-contact-tickets.test.js.map

package/out-tsc/test/temba-contact-tickets.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"temba-contact-tickets.test.js","sourceRoot":"","sources":["../../test/temba-contact-tickets.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EACL,gBAAgB,EAChB,OAAO,EACP,YAAY,EACZ,SAAS,EACT,OAAO,EACP,OAAO,EACR,MAAM,cAAc,CAAC;AAEtB,MAAM,GAAG,GAAG,uBAAuB,CAAC;AACpC,MAAM,iBAAiB,GAAG,KAAK,EAAE,QAAa,EAAE,EAAE,EAAE;IAClD,MAAM,cAAc,GAAG,CAAC,MAAM,YAAY,CACxC,GAAG,EACH,KAAK,EACL,EAAE,EACF,GAAG,CACJ,CAAmB,CAAC;IACrB,+BAA+B;IAC/B,MAAM,SAAS,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAC7C,OAAO,cAAc,CAAC;AACxB,CAAC,CAAC;AAEF,OAAO,CAAC,+BAA+B,CAAC,CAAC;AACzC,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACrC,UAAU,CAAC,GAAG,EAAE;QACd,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iBAAiB,EAAE,KAAK,IAAI,EAAE;QAC/B,MAAM,OAAO,GAAmB,MAAM,iBAAiB,CAAC;YACtD,OAAO,EAAE,sCAAsC;YAC/C,KAAK,EAAE,oBAAoB;SAC5B,CAAC,CAAC;QACH,MAAM,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QAC3C,MAAM,gBAAgB,CAAC,kBAAkB,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;QACvC,MAAM,OAAO,GAAmB,MAAM,iBAAiB,CAAC;YACtD,OAAO,EAAE,sCAAsC;YAC/C,KAAK,EAAE,oBAAoB;SAC5B,CAAC,CAAC;QAEH,8BAA8B;QAC7B,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAoB,CAAC,KAAK,EAAE,CAAC;QAC3E,MAAM,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QAC3C,MAAM,gBAAgB,CAAC,6BAA6B,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAC1E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { assert, waitUntil } from '@open-wc/testing';\nimport { ContactTickets } from '../src/contacts/ContactTickets';\nimport {\n  assertScreenshot,\n  getClip,\n  getComponent,\n  loadStore,\n  mockAPI,\n  mockNow\n} from './utils.test';\n\nconst TAG = 'temba-contact-tickets';\nconst getContactTickets = async (attrs: any = {}) => {\n  const contactTickets = (await getComponent(\n    TAG,\n    attrs,\n    '',\n    400\n  )) as ContactTickets;\n  // wait for our contact to load\n  await waitUntil(() => !!contactTickets.data);\n  return contactTickets;\n};\n\nmockNow('2023-04-07T00:00:00.000-00:00');\ndescribe('temba-contact-tickets', () => {\n  beforeEach(() => {\n    mockAPI();\n    loadStore();\n  });\n\n  it('renders default', async () => {\n    const tickets: ContactTickets = await getContactTickets({\n      contact: '24d64810-3315-4ff5-be85-48e3fe055bf9',\n      agent: 'admin1@nyaruka.com'\n    });\n    assert.instanceOf(tickets, ContactTickets);\n    await assertScreenshot('contacts/tickets', getClip(tickets));\n  });\n\n  it('shows assignment picker', async () => {\n    const tickets: ContactTickets = await getContactTickets({\n      contact: '24d64810-3315-4ff5-be85-48e3fe055bf9',\n      agent: 'admin1@nyaruka.com'\n    });\n\n    // click on the avatar element\n    (tickets.shadowRoot.querySelector('temba-user') as HTMLDivElement).click();\n    assert.instanceOf(tickets, ContactTickets);\n    await assertScreenshot('contacts/tickets-assignment', getClip(tickets));\n  });\n});\n"]}