@nyaruka/temba-components 0.29.1 → 0.29.3

package/.yarnrc

@@ -2,4 +2,4 @@
 # yarn lockfile v1
 
 
-yarn-path ".yarn/releases/yarn-1.22.10.cjs"
+# yarn-path ".yarn/releases/yarn-1.22.10.cjs"

package/.yarnrc.yml

@@ -1,7 +1 @@
 nodeLinker: node-modules
-
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
-    spec: "@yarnpkg/plugin-version"
-
-yarnPath: .yarn/releases/yarn-3.2.2.cjs

package/CHANGELOG.md

@@ -4,6 +4,21 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v0.29.3](https://github.com/nyaruka/temba-components/compare/v0.29.2...v0.29.3)
+
+- archived contact cannot send msg [`#189`](https://github.com/nyaruka/temba-components/pull/189)
+- archived, blocked, and stopped contacts cannot send msg [`8929d60`](https://github.com/nyaruka/temba-components/commit/8929d6052c7658f93ca194f1acc8a47217e5b15c)
+- Load contact using static fetch [`a11e03d`](https://github.com/nyaruka/temba-components/commit/a11e03d5ef442cbfab42f6d75f17ed4aca11b1cc)
+- Remove incompatible yarn plugin [`6bd49ba`](https://github.com/nyaruka/temba-components/commit/6bd49baacc210dfcbd025ba0e3156c3250ce1e57)
+
+#### [v0.29.2](https://github.com/nyaruka/temba-components/compare/v0.29.1...v0.29.2)
+
+> 11 August 2022
+
+- Downgrade yarn [`240e084`](https://github.com/nyaruka/temba-components/commit/240e0840745a76436a2a51472e81dec624fb0ddb)
+- Downgrade yarn [`6edfac0`](https://github.com/nyaruka/temba-components/commit/6edfac0fc004cae66f9ca8ef328fa1ff4365d33c)
+- Add git plugin for yarn [`7f1eda2`](https://github.com/nyaruka/temba-components/commit/7f1eda2a9fa671ecc1c05a49f322576ca7e79f5e)
+
 #### [v0.29.1](https://github.com/nyaruka/temba-components/compare/v0.29.0...v0.29.1)
 
 > 11 August 2022
@@ -14,9 +29,9 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Add mouse-helper to help with mouse-moving tests [`#184`](https://github.com/nyaruka/temba-components/pull/184)
 - Fix slider update tests [`#183`](https://github.com/nyaruka/temba-components/pull/183)
 - added render tests, update tests in progress [`#181`](https://github.com/nyaruka/temba-components/pull/181)
+- Update auto-changelog [`72a5b66`](https://github.com/nyaruka/temba-components/commit/72a5b66038b0bac320d23590dbd690a797e97389)
 - Add test for label shadow [`386e5b8`](https://github.com/nyaruka/temba-components/commit/386e5b8bde632662519aa6fc7cda558f10d1a362)
 - merge [`fc6b29b`](https://github.com/nyaruka/temba-components/commit/fc6b29b512673fba007df5a91549d77f64c60ab2)
-- Update yarn lock [`5f13c8a`](https://github.com/nyaruka/temba-components/commit/5f13c8a570ef357599ff4f2b11182c4129731c9b)
 
 #### [v0.29.0](https://github.com/nyaruka/temba-components/compare/v0.28.3...v0.29.0)
 

package/dist/{c78b084c.js → a439f561.js}

@@ -1850,6 +1850,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
                           ></temba-button>
                         </div>`:O` <div
                           class="chatbox ${this.toolbar?"full":""}"
+                          style="${"active"!==this.currentContact.status?"display:none":""}"
                         >
                           <temba-completion
                             @change=${this.handleChatChange}

package/dist/index.js

@@ -1850,6 +1850,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
                           ></temba-button>
                         </div>`:O` <div
                           class="chatbox ${this.toolbar?"full":""}"
+                          style="${"active"!==this.currentContact.status?"display:none":""}"
                         >
                           <temba-completion
                             @change=${this.handleChatChange}

package/dist/sw.js

@@ -1,2 +1,2 @@
-if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let r=Promise.resolve();return t[e]||(r=new Promise(async r=>{if("document"in self){const t=document.createElement("script");t.src=e,document.head.appendChild(t),t.onload=r}else importScripts(e),r()})),r.then(()=>{if(!t[e])throw new Error(`Module ${e} didn’t register its module`);return t[e]})},r=(r,t)=>{Promise.all(r.map(e)).then(e=>t(1===e.length?e[0]:e))},t={require:Promise.resolve(r)};self.define=(r,s,o)=>{t[r]||(t[r]=Promise.resolve().then(()=>{let t={};const n={uri:location.origin+r.slice(1)};return Promise.all(s.map(r=>{switch(r){case"exports":return t;case"module":return n;default:return e(r)}})).then(e=>{const r=o(...e);return t.default||(t.default=r),t})}))}}define("./sw.js",["./workbox-80efdfd1"],(function(e){"use strict";e.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"c78b084c.js",revision:"32035e599243ec8a236abebb13c9db63"},{url:"templates/components-body.html",revision:"dc2d7dc77b98559a9e31fd1f406813a7"},{url:"templates/components-head.html",revision:"1a8f5e3e8937a5ea8d7664869614fc87"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
+if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let r=Promise.resolve();return t[e]||(r=new Promise(async r=>{if("document"in self){const t=document.createElement("script");t.src=e,document.head.appendChild(t),t.onload=r}else importScripts(e),r()})),r.then(()=>{if(!t[e])throw new Error(`Module ${e} didn’t register its module`);return t[e]})},r=(r,t)=>{Promise.all(r.map(e)).then(e=>t(1===e.length?e[0]:e))},t={require:Promise.resolve(r)};self.define=(r,s,o)=>{t[r]||(t[r]=Promise.resolve().then(()=>{let t={};const n={uri:location.origin+r.slice(1)};return Promise.all(s.map(r=>{switch(r){case"exports":return t;case"module":return n;default:return e(r)}})).then(e=>{const r=o(...e);return t.default||(t.default=r),t})}))}}define("./sw.js",["./workbox-80efdfd1"],(function(e){"use strict";e.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"a439f561.js",revision:"abf152229b567e0babc68ecd538a95bb"},{url:"templates/components-body.html",revision:"40a5f86af8874320cb9098683c1c7815"},{url:"templates/components-head.html",revision:"084a8e102d8f40ee74ce339590262c48"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
 //# sourceMappingURL=sw.js.map

package/dist/sw.js.map

@@ -1 +1 @@
-{"version":3,"file":"sw.js","sources":["../../../../../tmp/be6c5457f6fdd57efe01ae9e9252b7ff/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nworkbox_core_skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"c78b084c.js\",\n    \"revision\": \"32035e599243ec8a236abebb13c9db63\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"dc2d7dc77b98559a9e31fd1f406813a7\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"1a8f5e3e8937a5ea8d7664869614fc87\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["url","revision","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"k1BAmCoC,CAClC,CACEA,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,oBAE2B,IAAIC,kBAAgCC,0BAA2C,iCAG/E,iBAAkB,IAAIC,aAAiC"}
+{"version":3,"file":"sw.js","sources":["../../../../../tmp/62d448ef5e824fa5faa0ecb710c97d32/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nworkbox_core_skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"a439f561.js\",\n    \"revision\": \"abf152229b567e0babc68ecd538a95bb\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"40a5f86af8874320cb9098683c1c7815\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"084a8e102d8f40ee74ce339590262c48\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["url","revision","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"k1BAmCoC,CAClC,CACEA,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,oBAE2B,IAAIC,kBAAgCC,0BAA2C,iCAG/E,iBAAkB,IAAIC,aAAiC"}

package/dist/templates/components-body.html

@@ -1 +1 @@
-<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/c78b084c.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.29.1"</script>
+<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/a439f561.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.29.3"</script>

package/dist/templates/components-head.html

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

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

@@ -294,6 +294,9 @@ export class ContactChat extends ContactStoreElement {
                         </div>`
                 : html ` <div
                           class="chatbox ${this.toolbar ? 'full' : ''}"
+                          style="${this.currentContact.status !== 'active'
+                    ? 'display:none'
+                    : ''}"
                         >
                           <temba-completion
                             @change=${this.handleChatChange}

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

@@ -1 +1 @@
-{"version":3,"file":"ContactChat.js","sourceRoot":"","sources":["../../../src/contacts/ContactChat.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { Contact, CustomEventType, Ticket } from '../interfaces';\nimport { COOKIE_KEYS, getCookieBoolean, postJSON, setCookie } from '../utils';\nimport { TextInput } from '../textinput/TextInput';\nimport { Completion } from '../completion/Completion';\nimport { ContactHistory } from './ContactHistory';\nimport { Modax } from '../dialog/Modax';\nimport { ContactStoreElement } from './ContactStoreElement';\n\nconst DEFAULT_REFRESH = 10000;\n\nexport class ContactChat extends ContactStoreElement {\n  public static get styles() {\n    return css`\n      .left-pane {\n        box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0);\n        transition: box-shadow 600ms linear;\n      }\n\n      .left-pane.open {\n        z-index: 1000;\n      }\n\n      :host {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: row;\n        min-height: 0;\n        border-radius: var(--curvature);\n      }\n\n      .chat-wrapper {\n        display: flex;\n        flex-grow: 1;\n        flex-direction: column;\n        overflow: hidden;\n        min-height: 0;\n      }\n\n      temba-contact-history {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n      }\n\n      .chatbox {\n        padding: 1em;\n        background: #f2f2f2;\n        border-top: 3px solid #e1e1e1;\n        display: flex;\n        flex-direction: column;\n        z-index: 3;\n        border-bottom-left-radius: var(--curvature);\n        border-bottom-right-radius: var(--curvature);\n      }\n\n      .chatbox.full {\n        border-bottom-right-radius: 0 !important;\n      }\n\n      .closed-footer {\n        padding: 1em;\n        background: #f2f2f2;\n        border-top: 3px solid #e1e1e1;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n      }\n\n      temba-completion {\n        --textarea-height: 2.5em;\n      }\n\n      a {\n        color: var(--color-link-primary);\n      }\n\n      a:hover {\n        text-decoration: underline;\n        color: var(--color-link-primary-hover);\n      }\n\n      temba-button#send-button {\n        --button-y: 1px;\n        --button-x: 12px;\n        margin-top: 0.8em;\n        align-self: flex-end;\n      }\n\n      temba-button#reopen-button {\n        --button-y: 1px;\n        --button-x: 12px;\n      }\n\n      .toolbar {\n        position: relative;\n        width: 2.5em;\n        background: #e6e6e6;\n        transition: all 600ms ease-in;\n        z-index: 10;\n        flex-shrink: 0;\n        border-top-right-radius: var(--curvature);\n        border-bottom-right-radius: var(--curvature);\n        padding: 0.5em 0;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        overflow: hidden;\n      }\n\n      .toolbar temba-icon {\n        fill: rgb(60, 60, 60);\n        margin-bottom: 0.5em;\n      }\n\n      .toolbar.closed {\n        box-shadow: inset 10px 0px 10px -11px rgb(0 0 0 / 15%);\n      }\n\n      temba-contact-details {\n        flex-basis: 16em;\n        flex-grow: 0;\n        flex-shrink: 0;\n        transition: margin 600ms cubic-bezier(0.68, -0.55, 0.265, 1.05),\n          opacity 600ms ease-in-out 200ms;\n        z-index: 5;\n      }\n\n      temba-contact-details.hidden {\n        margin-right: -16em;\n        opacity: 0;\n      }\n\n      @media only screen and (max-width: 768px) {\n        temba-contact-details {\n          flex-basis: 12em;\n          flex-shrink: 0;\n        }\n\n        temba-contact-details.hidden {\n          margin-right: -12em;\n        }\n      }\n\n      #close-button,\n      #open-button {\n        margin-top: 1em;\n      }\n\n      #details-button {\n        margin-top: 0.25em;\n        transform: rotate(180deg);\n      }\n\n      #note-dialog,\n      #assign-dialog {\n        --header-bg: rgb(255, 249, 194);\n        --header-text: #555;\n        --textarea-height: 5em;\n      }\n    `;\n  }\n\n  @property({ type: String, attribute: 'ticket' })\n  ticketUUID: string;\n\n  @property({ type: String })\n  contactsEndpoint = '/api/v2/contacts.json';\n\n  @property({ type: String })\n  currentChat = '';\n\n  @property({ type: String })\n  currentNote = '';\n\n  @property({ type: Boolean })\n  showDetails = true;\n\n  @property({ type: Boolean })\n  toolbar = false;\n\n  @property({ type: Boolean })\n  monitor = false;\n\n  @property({ type: Object })\n  currentTicket: Ticket = null;\n\n  @property({ type: Object })\n  currentContact: Contact = null;\n\n  @property({ type: String })\n  agent = '';\n\n  constructor() {\n    super();\n    this.showDetails = getCookieBoolean(COOKIE_KEYS.TICKET_SHOW_DETAILS);\n  }\n\n  refreshInterval = null;\n\n  public connectedCallback() {\n    super.connectedCallback();\n    if (this.monitor) {\n      this.refreshInterval = setInterval(() => {\n        if (this.currentTicket && this.currentTicket.closed_on) {\n          return;\n        }\n        this.refresh();\n      }, DEFAULT_REFRESH);\n    }\n  }\n\n  public disconnectedCallback() {\n    if (this.refreshInterval) {\n      clearInterval(this.refreshInterval);\n    }\n  }\n\n  public getContactHistory(): ContactHistory {\n    return this.shadowRoot.querySelector(\n      'temba-contact-history'\n    ) as ContactHistory;\n  }\n\n  public refresh(scrollToBottom = false): void {\n    const contactHistory = this.getContactHistory();\n    if (contactHistory) {\n      if (scrollToBottom) {\n        contactHistory.scrollToBottom();\n      }\n      contactHistory.refresh();\n    }\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    // if we don't have an endpoint infer one\n    if (\n      changedProperties.has('data') ||\n      changedProperties.has('currentContact')\n    ) {\n      this.currentContact = this.data;\n      // focus our completion on load\n      const prevContact = changedProperties.get('contact');\n      if (\n        !prevContact ||\n        (this.currentContact &&\n          this.currentContact.ticket &&\n          this.currentContact.ticket.uuid !== prevContact.ticket.uuid)\n      ) {\n        const completion = this.shadowRoot.querySelector(\n          'temba-completion'\n        ) as Completion;\n        if (completion) {\n          window.setTimeout(() => {\n            completion.click();\n          }, 0);\n        }\n      }\n    }\n  }\n\n  private handleChatChange(event: Event) {\n    event.stopPropagation();\n    event.preventDefault();\n\n    const chat = event.currentTarget as TextInput;\n    this.currentChat = chat.value;\n  }\n\n  private handleReopen() {\n    const uuid = this.currentTicket.uuid;\n    postJSON(`/api/v2/ticket_actions.json`, {\n      tickets: [uuid],\n      action: 'reopen',\n    })\n      .then(() => {\n        this.refresh();\n        this.fireCustomEvent(CustomEventType.ContentChanged, {\n          ticket: { uuid, status: 'open' },\n        });\n      })\n      .catch((response: any) => {\n        console.error(response);\n      });\n  }\n\n  private handleSend() {\n    const payload = {\n      contacts: [this.currentContact.uuid],\n      text: this.currentChat,\n    };\n\n    if (this.currentTicket) {\n      payload['ticket'] = this.currentTicket.uuid;\n    }\n\n    postJSON(`/api/v2/broadcasts.json`, payload)\n      .then(() => {\n        this.currentChat = '';\n        this.refresh(true);\n      })\n      .catch(err => {\n        // error message dialog?\n        console.error(err);\n      });\n  }\n\n  private handleTicketAssigned() {\n    this.refresh();\n    this.getContactHistory().checkForAgentAssignmentEvent(this.agent);\n  }\n\n  private handleDetailSlider(): void {\n    this.showDetails = !this.showDetails;\n    setCookie(COOKIE_KEYS.TICKET_SHOW_DETAILS, this.showDetails);\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div\n        style=\"flex-grow: 1; margin-right: 0em; display:flex; flex-direction:row; min-height: 0;\"\n        class=\"left-pane  ${this.showDetails ? 'open' : ''}\"\n      >\n        <div class=\"chat-wrapper\">\n          ${this.currentContact\n            ? html`<temba-contact-history\n                    .uuid=${this.currentContact.uuid}\n                    .contact=${this.currentContact}\n                    .ticket=${\n                      this.currentTicket ? this.currentTicket.uuid : null\n                    }\n                    .endDate=${\n                      this.currentTicket ? this.currentTicket.closed_on : null\n                    }\n                    .agent=${this.agent}\n                  ></temba-contact-history>\n\n                  ${\n                    this.currentTicket && this.currentTicket.closed_on\n                      ? html`<div class=\"closed-footer\">\n                          <temba-button\n                            id=\"reopen-button\"\n                            name=\"Reopen\"\n                            @click=${this.handleReopen}\n                          ></temba-button>\n                        </div>`\n                      : html` <div\n                          class=\"chatbox ${this.toolbar ? 'full' : ''}\"\n                        >\n                          <temba-completion\n                            @change=${this.handleChatChange}\n                            .value=${this.currentChat}\n                            @keydown=${(e: KeyboardEvent) => {\n                              if (e.key === 'Enter' && !e.shiftKey) {\n                                const chat = e.target as Completion;\n                                if (!chat.hasVisibleOptions()) {\n                                  this.handleSend();\n                                  e.preventDefault();\n                                  e.stopPropagation();\n                                }\n                              }\n                            }}\n                            textarea\n                          >\n                          </temba-completion>\n                          <temba-button\n                            id=\"send-button\"\n                            name=\"Send\"\n                            @click=${this.handleSend}\n                            ?disabled=${this.currentChat.trim().length === 0}\n                          ></temba-button>\n                        </div>`\n                  }\n                  </div>`\n            : null}\n        </div>\n      </div>\n\n      ${this.toolbar\n        ? html`${\n            this.currentContact\n              ? html`<temba-contact-details\n                  style=\"z-index: 10\"\n                  class=\"${this.showDetails ? '' : 'hidden'}\"\n                  showGroups=\"true\"\n                  .visible=${this.showDetails}\n                  .ticket=${this.currentTicket}\n                  .contact=${this.currentContact}\n                ></temba-contact-details>`\n              : null\n          }\n\n        <div class=\"toolbar ${this.showDetails ? '' : 'closed'}\">\n          ${\n            this.currentContact\n              ? html`\n                  <temba-tip\n                    style=\"margin-top:5px\"\n                    text=\"${this.showDetails ? 'Hide Details' : 'Show Details'}\"\n                    position=\"left\"\n                    hideOnChange\n                  >\n                    <temba-icon\n                      id=\"details-button\"\n                      name=\"${this.showDetails ? 'chevrons-left' : 'sidebar'}\"\n                      @click=\"${this.handleDetailSlider}\"\n                      clickable\n                      animatechange=\"spin\"\n                    ></temba-icon>\n                  </temba-tip>\n\n                  ${this.currentTicket\n                    ? html`<temba-tip\n                          style=\"margin-top:5px\"\n                          text=\"Assign\"\n                          position=\"left\"\n                        >\n                          <temba-icon\n                            id=\"assign-button\"\n                            name=\"user\"\n                            @click=\"${() => {\n                              const modax = this.shadowRoot.getElementById(\n                                'assign-dialog'\n                              ) as Modax;\n                              modax.open = true;\n                            }}\"\n                            clickable\n                          ></temba-icon>\n                        </temba-tip>\n                        <temba-tip\n                          style=\"margin-top:5px\"\n                          text=\"Add Note\"\n                          position=\"left\"\n                        >\n                          <temba-icon\n                            id=\"add-note-button\"\n                            name=\"edit\"\n                            @click=\"${() => {\n                              const note = this.shadowRoot.getElementById(\n                                'note-dialog'\n                              ) as Modax;\n                              note.open = true;\n                            }}\"\n                            clickable\n                          ></temba-icon>\n                        </temba-tip>`\n                    : null}\n                `\n              : null\n          }\n        </div>\n      </div>\n\n      ${\n        this.currentTicket\n          ? html`<temba-modax\n              header=\"Add Note\"\n              id=\"note-dialog\"\n              @temba-submitted=${this.refresh}\n              endpoint=\"/ticket/note/${this.currentTicket.uuid}/\"\n            ></temba-modax>\n            <temba-modax\n              header=\"Assign Ticket\"\n              id=\"assign-dialog\"\n              @temba-submitted=${this.handleTicketAssigned}\n              endpoint=\"/ticket/assign/${this.currentTicket.uuid}/\"\n            /></temba-modax>`\n          : null\n      }`\n        : null}\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ContactChat.js","sourceRoot":"","sources":["../../../src/contacts/ContactChat.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { Contact, CustomEventType, Ticket } from '../interfaces';\nimport { COOKIE_KEYS, getCookieBoolean, postJSON, setCookie } from '../utils';\nimport { TextInput } from '../textinput/TextInput';\nimport { Completion } from '../completion/Completion';\nimport { ContactHistory } from './ContactHistory';\nimport { Modax } from '../dialog/Modax';\nimport { ContactStoreElement } from './ContactStoreElement';\n\nconst DEFAULT_REFRESH = 10000;\n\nexport class ContactChat extends ContactStoreElement {\n  public static get styles() {\n    return css`\n      .left-pane {\n        box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0);\n        transition: box-shadow 600ms linear;\n      }\n\n      .left-pane.open {\n        z-index: 1000;\n      }\n\n      :host {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: row;\n        min-height: 0;\n        border-radius: var(--curvature);\n      }\n\n      .chat-wrapper {\n        display: flex;\n        flex-grow: 1;\n        flex-direction: column;\n        overflow: hidden;\n        min-height: 0;\n      }\n\n      temba-contact-history {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n      }\n\n      .chatbox {\n        padding: 1em;\n        background: #f2f2f2;\n        border-top: 3px solid #e1e1e1;\n        display: flex;\n        flex-direction: column;\n        z-index: 3;\n        border-bottom-left-radius: var(--curvature);\n        border-bottom-right-radius: var(--curvature);\n      }\n\n      .chatbox.full {\n        border-bottom-right-radius: 0 !important;\n      }\n\n      .closed-footer {\n        padding: 1em;\n        background: #f2f2f2;\n        border-top: 3px solid #e1e1e1;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n      }\n\n      temba-completion {\n        --textarea-height: 2.5em;\n      }\n\n      a {\n        color: var(--color-link-primary);\n      }\n\n      a:hover {\n        text-decoration: underline;\n        color: var(--color-link-primary-hover);\n      }\n\n      temba-button#send-button {\n        --button-y: 1px;\n        --button-x: 12px;\n        margin-top: 0.8em;\n        align-self: flex-end;\n      }\n\n      temba-button#reopen-button {\n        --button-y: 1px;\n        --button-x: 12px;\n      }\n\n      .toolbar {\n        position: relative;\n        width: 2.5em;\n        background: #e6e6e6;\n        transition: all 600ms ease-in;\n        z-index: 10;\n        flex-shrink: 0;\n        border-top-right-radius: var(--curvature);\n        border-bottom-right-radius: var(--curvature);\n        padding: 0.5em 0;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        overflow: hidden;\n      }\n\n      .toolbar temba-icon {\n        fill: rgb(60, 60, 60);\n        margin-bottom: 0.5em;\n      }\n\n      .toolbar.closed {\n        box-shadow: inset 10px 0px 10px -11px rgb(0 0 0 / 15%);\n      }\n\n      temba-contact-details {\n        flex-basis: 16em;\n        flex-grow: 0;\n        flex-shrink: 0;\n        transition: margin 600ms cubic-bezier(0.68, -0.55, 0.265, 1.05),\n          opacity 600ms ease-in-out 200ms;\n        z-index: 5;\n      }\n\n      temba-contact-details.hidden {\n        margin-right: -16em;\n        opacity: 0;\n      }\n\n      @media only screen and (max-width: 768px) {\n        temba-contact-details {\n          flex-basis: 12em;\n          flex-shrink: 0;\n        }\n\n        temba-contact-details.hidden {\n          margin-right: -12em;\n        }\n      }\n\n      #close-button,\n      #open-button {\n        margin-top: 1em;\n      }\n\n      #details-button {\n        margin-top: 0.25em;\n        transform: rotate(180deg);\n      }\n\n      #note-dialog,\n      #assign-dialog {\n        --header-bg: rgb(255, 249, 194);\n        --header-text: #555;\n        --textarea-height: 5em;\n      }\n    `;\n  }\n\n  @property({ type: String, attribute: 'ticket' })\n  ticketUUID: string;\n\n  @property({ type: String })\n  contactsEndpoint = '/api/v2/contacts.json';\n\n  @property({ type: String })\n  currentChat = '';\n\n  @property({ type: String })\n  currentNote = '';\n\n  @property({ type: Boolean })\n  showDetails = true;\n\n  @property({ type: Boolean })\n  toolbar = false;\n\n  @property({ type: Boolean })\n  monitor = false;\n\n  @property({ type: Object })\n  currentTicket: Ticket = null;\n\n  @property({ type: Object })\n  currentContact: Contact = null;\n\n  @property({ type: String })\n  agent = '';\n\n  constructor() {\n    super();\n    this.showDetails = getCookieBoolean(COOKIE_KEYS.TICKET_SHOW_DETAILS);\n  }\n\n  refreshInterval = null;\n\n  public connectedCallback() {\n    super.connectedCallback();\n    if (this.monitor) {\n      this.refreshInterval = setInterval(() => {\n        if (this.currentTicket && this.currentTicket.closed_on) {\n          return;\n        }\n        this.refresh();\n      }, DEFAULT_REFRESH);\n    }\n  }\n\n  public disconnectedCallback() {\n    if (this.refreshInterval) {\n      clearInterval(this.refreshInterval);\n    }\n  }\n\n  public getContactHistory(): ContactHistory {\n    return this.shadowRoot.querySelector(\n      'temba-contact-history'\n    ) as ContactHistory;\n  }\n\n  public refresh(scrollToBottom = false): void {\n    const contactHistory = this.getContactHistory();\n    if (contactHistory) {\n      if (scrollToBottom) {\n        contactHistory.scrollToBottom();\n      }\n      contactHistory.refresh();\n    }\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    // if we don't have an endpoint infer one\n    if (\n      changedProperties.has('data') ||\n      changedProperties.has('currentContact')\n    ) {\n      this.currentContact = this.data;\n      // focus our completion on load\n      const prevContact = changedProperties.get('contact');\n      if (\n        !prevContact ||\n        (this.currentContact &&\n          this.currentContact.ticket &&\n          this.currentContact.ticket.uuid !== prevContact.ticket.uuid)\n      ) {\n        const completion = this.shadowRoot.querySelector(\n          'temba-completion'\n        ) as Completion;\n        if (completion) {\n          window.setTimeout(() => {\n            completion.click();\n          }, 0);\n        }\n      }\n    }\n  }\n\n  private handleChatChange(event: Event) {\n    event.stopPropagation();\n    event.preventDefault();\n\n    const chat = event.currentTarget as TextInput;\n    this.currentChat = chat.value;\n  }\n\n  private handleReopen() {\n    const uuid = this.currentTicket.uuid;\n    postJSON(`/api/v2/ticket_actions.json`, {\n      tickets: [uuid],\n      action: 'reopen',\n    })\n      .then(() => {\n        this.refresh();\n        this.fireCustomEvent(CustomEventType.ContentChanged, {\n          ticket: { uuid, status: 'open' },\n        });\n      })\n      .catch((response: any) => {\n        console.error(response);\n      });\n  }\n\n  private handleSend() {\n    const payload = {\n      contacts: [this.currentContact.uuid],\n      text: this.currentChat,\n    };\n\n    if (this.currentTicket) {\n      payload['ticket'] = this.currentTicket.uuid;\n    }\n\n    postJSON(`/api/v2/broadcasts.json`, payload)\n      .then(() => {\n        this.currentChat = '';\n        this.refresh(true);\n      })\n      .catch(err => {\n        // error message dialog?\n        console.error(err);\n      });\n  }\n\n  private handleTicketAssigned() {\n    this.refresh();\n    this.getContactHistory().checkForAgentAssignmentEvent(this.agent);\n  }\n\n  private handleDetailSlider(): void {\n    this.showDetails = !this.showDetails;\n    setCookie(COOKIE_KEYS.TICKET_SHOW_DETAILS, this.showDetails);\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div\n        style=\"flex-grow: 1; margin-right: 0em; display:flex; flex-direction:row; min-height: 0;\"\n        class=\"left-pane  ${this.showDetails ? 'open' : ''}\"\n      >\n        <div class=\"chat-wrapper\">\n          ${this.currentContact\n            ? html`<temba-contact-history\n                    .uuid=${this.currentContact.uuid}\n                    .contact=${this.currentContact}\n                    .ticket=${\n                      this.currentTicket ? this.currentTicket.uuid : null\n                    }\n                    .endDate=${\n                      this.currentTicket ? this.currentTicket.closed_on : null\n                    }\n                    .agent=${this.agent}\n                  ></temba-contact-history>\n\n                  ${\n                    this.currentTicket && this.currentTicket.closed_on\n                      ? html`<div class=\"closed-footer\">\n                          <temba-button\n                            id=\"reopen-button\"\n                            name=\"Reopen\"\n                            @click=${this.handleReopen}\n                          ></temba-button>\n                        </div>`\n                      : html` <div\n                          class=\"chatbox ${this.toolbar ? 'full' : ''}\"\n                          style=\"${this.currentContact.status !== 'active'\n                            ? 'display:none'\n                            : ''}\"\n                        >\n                          <temba-completion\n                            @change=${this.handleChatChange}\n                            .value=${this.currentChat}\n                            @keydown=${(e: KeyboardEvent) => {\n                              if (e.key === 'Enter' && !e.shiftKey) {\n                                const chat = e.target as Completion;\n                                if (!chat.hasVisibleOptions()) {\n                                  this.handleSend();\n                                  e.preventDefault();\n                                  e.stopPropagation();\n                                }\n                              }\n                            }}\n                            textarea\n                          >\n                          </temba-completion>\n                          <temba-button\n                            id=\"send-button\"\n                            name=\"Send\"\n                            @click=${this.handleSend}\n                            ?disabled=${this.currentChat.trim().length === 0}\n                          ></temba-button>\n                        </div>`\n                  }\n                  </div>`\n            : null}\n        </div>\n      </div>\n\n      ${this.toolbar\n        ? html`${\n            this.currentContact\n              ? html`<temba-contact-details\n                  style=\"z-index: 10\"\n                  class=\"${this.showDetails ? '' : 'hidden'}\"\n                  showGroups=\"true\"\n                  .visible=${this.showDetails}\n                  .ticket=${this.currentTicket}\n                  .contact=${this.currentContact}\n                ></temba-contact-details>`\n              : null\n          }\n\n        <div class=\"toolbar ${this.showDetails ? '' : 'closed'}\">\n          ${\n            this.currentContact\n              ? html`\n                  <temba-tip\n                    style=\"margin-top:5px\"\n                    text=\"${this.showDetails ? 'Hide Details' : 'Show Details'}\"\n                    position=\"left\"\n                    hideOnChange\n                  >\n                    <temba-icon\n                      id=\"details-button\"\n                      name=\"${this.showDetails ? 'chevrons-left' : 'sidebar'}\"\n                      @click=\"${this.handleDetailSlider}\"\n                      clickable\n                      animatechange=\"spin\"\n                    ></temba-icon>\n                  </temba-tip>\n\n                  ${this.currentTicket\n                    ? html`<temba-tip\n                          style=\"margin-top:5px\"\n                          text=\"Assign\"\n                          position=\"left\"\n                        >\n                          <temba-icon\n                            id=\"assign-button\"\n                            name=\"user\"\n                            @click=\"${() => {\n                              const modax = this.shadowRoot.getElementById(\n                                'assign-dialog'\n                              ) as Modax;\n                              modax.open = true;\n                            }}\"\n                            clickable\n                          ></temba-icon>\n                        </temba-tip>\n                        <temba-tip\n                          style=\"margin-top:5px\"\n                          text=\"Add Note\"\n                          position=\"left\"\n                        >\n                          <temba-icon\n                            id=\"add-note-button\"\n                            name=\"edit\"\n                            @click=\"${() => {\n                              const note = this.shadowRoot.getElementById(\n                                'note-dialog'\n                              ) as Modax;\n                              note.open = true;\n                            }}\"\n                            clickable\n                          ></temba-icon>\n                        </temba-tip>`\n                    : null}\n                `\n              : null\n          }\n        </div>\n      </div>\n\n      ${\n        this.currentTicket\n          ? html`<temba-modax\n              header=\"Add Note\"\n              id=\"note-dialog\"\n              @temba-submitted=${this.refresh}\n              endpoint=\"/ticket/note/${this.currentTicket.uuid}/\"\n            ></temba-modax>\n            <temba-modax\n              header=\"Assign Ticket\"\n              id=\"assign-dialog\"\n              @temba-submitted=${this.handleTicketAssigned}\n              endpoint=\"/ticket/assign/${this.currentTicket.uuid}/\"\n            /></temba-modax>`\n          : null\n      }`\n        : null}\n    `;\n  }\n}\n"]}

package/out-tsc/test/temba-contact-badges.test.js

@@ -14,7 +14,7 @@ describe('temba-contact-badges', () => {
         // we are a StoreElement, so load a store first
         await loadStore();
         const badges = await getBadges({
-            contact: 'contact-a.json',
+            contact: 'contact-dave-active',
         });
         assert.instanceOf(badges, ContactBadges);
         await assertScreenshot('contacts/badges', getClip(badges));

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

@@ -1 +1 @@
-{"version":3,"file":"temba-contact-badges.test.js","sourceRoot":"","sources":["../../test/temba-contact-badges.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EACL,gBAAgB,EAChB,KAAK,EACL,OAAO,EACP,YAAY,EACZ,SAAS,GACV,MAAM,cAAc,CAAC;AAEtB,MAAM,GAAG,GAAG,sBAAsB,CAAC;AACnC,MAAM,SAAS,GAAG,KAAK,EAAE,QAAa,EAAE,EAAE,EAAE;IAC1C,KAAK,CAAC,UAAU,CAAC,GAAG,wBAAwB,CAAC;IAC7C,MAAM,MAAM,GAAG,CAAC,MAAM,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,CAAC,CAAkB,CAAC;IAE1E,+BAA+B;IAC/B,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC;IAEjB,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;IACpC,EAAE,CAAC,iBAAiB,EAAE,KAAK,IAAI,EAAE;QAC/B,+CAA+C;QAC/C,MAAM,SAAS,EAAE,CAAC;QAElB,MAAM,MAAM,GAAkB,MAAM,SAAS,CAAC;YAC5C,OAAO,EAAE,gBAAgB;SAC1B,CAAC,CAAC;QACH,MAAM,CAAC,UAAU,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;QACzC,MAAM,gBAAgB,CAAC,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { assert } from '@open-wc/testing';\nimport { ContactBadges } from '../src/contacts/ContactBadges';\nimport {\n  assertScreenshot,\n  delay,\n  getClip,\n  getComponent,\n  loadStore,\n} from './utils.test';\n\nconst TAG = 'temba-contact-badges';\nconst getBadges = async (attrs: any = {}) => {\n  attrs['endpoint'] = '/test-assets/contacts/';\n  const badges = (await getComponent(TAG, attrs, '', 400)) as ContactBadges;\n\n  // wait for our contact to load\n  await delay(100);\n\n  return badges;\n};\n\ndescribe('temba-contact-badges', () => {\n  it('renders default', async () => {\n    // we are a StoreElement, so load a store first\n    await loadStore();\n\n    const badges: ContactBadges = await getBadges({\n      contact: 'contact-a.json',\n    });\n    assert.instanceOf(badges, ContactBadges);\n    await assertScreenshot('contacts/badges', getClip(badges));\n  });\n});\n"]}
+{"version":3,"file":"temba-contact-badges.test.js","sourceRoot":"","sources":["../../test/temba-contact-badges.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EACL,gBAAgB,EAChB,KAAK,EACL,OAAO,EACP,YAAY,EACZ,SAAS,GACV,MAAM,cAAc,CAAC;AAEtB,MAAM,GAAG,GAAG,sBAAsB,CAAC;AACnC,MAAM,SAAS,GAAG,KAAK,EAAE,QAAa,EAAE,EAAE,EAAE;IAC1C,KAAK,CAAC,UAAU,CAAC,GAAG,wBAAwB,CAAC;IAC7C,MAAM,MAAM,GAAG,CAAC,MAAM,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,CAAC,CAAkB,CAAC;IAE1E,+BAA+B;IAC/B,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC;IAEjB,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;IACpC,EAAE,CAAC,iBAAiB,EAAE,KAAK,IAAI,EAAE;QAC/B,+CAA+C;QAC/C,MAAM,SAAS,EAAE,CAAC;QAElB,MAAM,MAAM,GAAkB,MAAM,SAAS,CAAC;YAC5C,OAAO,EAAE,qBAAqB;SAC/B,CAAC,CAAC;QACH,MAAM,CAAC,UAAU,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;QACzC,MAAM,gBAAgB,CAAC,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { assert } from '@open-wc/testing';\nimport { ContactBadges } from '../src/contacts/ContactBadges';\nimport {\n  assertScreenshot,\n  delay,\n  getClip,\n  getComponent,\n  loadStore,\n} from './utils.test';\n\nconst TAG = 'temba-contact-badges';\nconst getBadges = async (attrs: any = {}) => {\n  attrs['endpoint'] = '/test-assets/contacts/';\n  const badges = (await getComponent(TAG, attrs, '', 400)) as ContactBadges;\n\n  // wait for our contact to load\n  await delay(100);\n\n  return badges;\n};\n\ndescribe('temba-contact-badges', () => {\n  it('renders default', async () => {\n    // we are a StoreElement, so load a store first\n    await loadStore();\n\n    const badges: ContactBadges = await getBadges({\n      contact: 'contact-dave-active',\n    });\n    assert.instanceOf(badges, ContactBadges);\n    await assertScreenshot('contacts/badges', getClip(badges));\n  });\n});\n"]}

package/out-tsc/test/temba-contact-chat.test.js

@@ -1,12 +1,116 @@
-import { fixture, assert } from '@open-wc/testing';
-import { ContactChat } from '../src/contacts/ContactChat';
-import { getHTML } from '../test/utils.test';
-import './utils.test';
-const getChatHTML = (attrs = {}) => getHTML('temba-contact-chat', attrs);
+import { expect } from '@open-wc/testing';
+import { assertScreenshot, delay, getClip, getComponent, loadStore, mockGET, } from '../test/utils.test';
+const TAG = 'temba-contact-chat';
+const getContactChat = async (attrs = {}) => {
+    attrs['endpoint'] = '/test-assets/contacts/';
+    // add some sizes and styles to force our chat history to scroll
+    const chat = (await getComponent(TAG, attrs, '', 500, 500, 'display:flex;flex-direction:column;flex-grow:1;min-height:0;'));
+    // wait for our contact to load
+    await delay(100);
+    return chat;
+};
 describe('temba-contact-chat', () => {
+    // map requests for contact history and ticket api to our static files
+    // we'll just us the same history and ticket list for everybody for now
+    beforeEach(() => {
+        mockGET(/\/contact\/history\/contact-.*/, '/test-assets/contacts/history.json');
+        mockGET(/\/api\/v2\/tickets\.json\?contact=contact-.*/, '/test-assets/api/tickets.json');
+    });
     it('can be created', async () => {
-        const chat = await fixture(getChatHTML());
-        assert.instanceOf(chat, ContactChat);
+        // we are a StoreElement, so load a store first
+        await loadStore();
+        const chat = await getContactChat({
+            contact: 'contact-dave-active',
+        });
+        await assertScreenshot('contacts/contact-active-default', getClip(chat));
+    });
+    it('can send chat msg if contact is active', async () => {
+        // we are a StoreElement, so load a store first
+        await loadStore();
+        const chat = await getContactChat({
+            contact: 'contact-dave-active',
+        });
+        const chatboxDivEl = chat.shadowRoot.querySelector('.chatbox');
+        const displayVal = chatboxDivEl.style.display;
+        expect(displayVal).to.equal('');
+        await assertScreenshot('contacts/contact-active-show-chat-msg', getClip(chat));
+    });
+    it('can see chat history if contact is active', async () => {
+        // we are a StoreElement, so load a store first
+        await loadStore();
+        const chat = await getContactChat({
+            contact: 'contact-dave-active',
+        });
+        const chatHistoryEl = chat.shadowRoot.querySelector('temba-contact-history');
+        const displayVal = chatHistoryEl.style.display;
+        expect(displayVal).to.equal('');
+        await assertScreenshot('contacts/contact-active-show-chat-history', getClip(chat));
+    });
+    it('cannot send chat msg if contact is archived', async () => {
+        // we are a StoreElement, so load a store first
+        await loadStore();
+        const chat = await getContactChat({
+            contact: 'contact-barak-archived',
+        });
+        const chatboxDivEl = chat.shadowRoot.querySelector('.chatbox');
+        const displayVal = chatboxDivEl.style.display;
+        expect(displayVal).to.equal('none');
+        await assertScreenshot('contacts/contact-archived-hide-chat-msg', getClip(chat));
+    });
+    it('can see chat history if contact is archived', async () => {
+        // we are a StoreElement, so load a store first
+        await loadStore();
+        const chat = await getContactChat({
+            contact: 'contact-barak-archived',
+        });
+        const chatHistoryEl = chat.shadowRoot.querySelector('temba-contact-history');
+        const displayVal = chatHistoryEl.style.display;
+        expect(displayVal).to.equal('');
+        await assertScreenshot('contacts/contact-archived-show-chat-history', getClip(chat));
+    });
+    it('cannot send chat msg if contact is blocked', async () => {
+        // we are a StoreElement, so load a store first
+        await loadStore();
+        const chat = await getContactChat({
+            contact: 'contact-michelle-blocked',
+        });
+        const chatboxDivEl = chat.shadowRoot.querySelector('.chatbox');
+        const displayVal = chatboxDivEl.style.display;
+        expect(displayVal).to.equal('none');
+        await assertScreenshot('contacts/contact-blocked-hide-chat-msg', getClip(chat));
+    });
+    it('can see chat history if contact is blocked', async () => {
+        // we are a StoreElement, so load a store first
+        await loadStore();
+        const chat = await getContactChat({
+            contact: 'contact-michelle-blocked',
+        });
+        const chatHistoryEl = chat.shadowRoot.querySelector('temba-contact-history');
+        const displayVal = chatHistoryEl.style.display;
+        expect(displayVal).to.equal('');
+        await assertScreenshot('contacts/contact-blocked-show-chat-history', getClip(chat));
+    });
+    it('cannot send chat msg if contact is stopped', async () => {
+        // we are a StoreElement, so load a store first
+        await loadStore();
+        const chat = await getContactChat({
+            contact: 'contact-tim-stopped',
+        });
+        const chatboxDivEl = chat.shadowRoot.querySelector('.chatbox');
+        const displayVal = chatboxDivEl.style.display;
+        expect(displayVal).to.equal('none');
+        await assertScreenshot('contacts/contact-stopped-hide-chat-msg', getClip(chat));
+    });
+    it('can see chat history if contact is stopped', async () => {
+        // we are a StoreElement, so load a store first
+        await loadStore();
+        const chat = await getContactChat({
+            contact: 'contact-tim-stopped',
+        });
+        const chatHistoryEl = chat.shadowRoot.querySelector('temba-contact-history');
+        const displayVal = chatHistoryEl.style.display;
+        expect(displayVal).to.equal('');
+        await assertScreenshot('contacts/contact-stopped-show-chat-history', getClip(chat));
     });
 });
 //# sourceMappingURL=temba-contact-chat.test.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"temba-contact-chat.test.js","sourceRoot":"","sources":["../../test/temba-contact-chat.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,GAAG,CAAC,QAAa,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAAC;AAE9E,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,EAAE;QAC9B,MAAM,IAAI,GAAgB,MAAM,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;QACvD,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture, assert } from '@open-wc/testing';\nimport { ContactChat } from '../src/contacts/ContactChat';\nimport { getHTML } from '../test/utils.test';\nimport './utils.test';\n\nconst getChatHTML = (attrs: any = {}) => getHTML('temba-contact-chat', attrs);\n\ndescribe('temba-contact-chat', () => {\n  it('can be created', async () => {\n    const chat: ContactChat = await fixture(getChatHTML());\n    assert.instanceOf(chat, ContactChat);\n  });\n});\n"]}
+{"version":3,"file":"temba-contact-chat.test.js","sourceRoot":"","sources":["../../test/temba-contact-chat.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect } from '@open-wc/testing';\nimport { ContactChat } from '../src/contacts/ContactChat';\nimport {\n  assertScreenshot,\n  delay,\n  getClip,\n  getComponent,\n  loadStore,\n  mockGET,\n} from '../test/utils.test';\n\nconst TAG = 'temba-contact-chat';\n\nconst getContactChat = async (attrs: any = {}) => {\n  attrs['endpoint'] = '/test-assets/contacts/';\n\n  // add some sizes and styles to force our chat history to scroll\n  const chat = (await getComponent(\n    TAG,\n    attrs,\n    '',\n    500,\n    500,\n    'display:flex;flex-direction:column;flex-grow:1;min-height:0;'\n  )) as ContactChat;\n\n  // wait for our contact to load\n  await delay(100);\n\n  return chat;\n};\n\ndescribe('temba-contact-chat', () => {\n  // map requests for contact history and ticket api to our static files\n  // we'll just us the same history and ticket list for everybody for now\n  beforeEach(() => {\n    mockGET(\n      /\\/contact\\/history\\/contact-.*/,\n      '/test-assets/contacts/history.json'\n    );\n\n    mockGET(\n      /\\/api\\/v2\\/tickets\\.json\\?contact=contact-.*/,\n      '/test-assets/api/tickets.json'\n    );\n  });\n\n  it('can be created', async () => {\n    // we are a StoreElement, so load a store first\n    await loadStore();\n    const chat: ContactChat = await getContactChat({\n      contact: 'contact-dave-active',\n    });\n\n    await assertScreenshot('contacts/contact-active-default', getClip(chat));\n  });\n\n  it('can send chat msg if contact is active', async () => {\n    // we are a StoreElement, so load a store first\n    await loadStore();\n    const chat: ContactChat = await getContactChat({\n      contact: 'contact-dave-active',\n    });\n\n    const chatboxDivEl = chat.shadowRoot.querySelector(\n      '.chatbox'\n    ) as HTMLDivElement;\n    const displayVal = chatboxDivEl.style.display;\n    expect(displayVal).to.equal('');\n\n    await assertScreenshot(\n      'contacts/contact-active-show-chat-msg',\n      getClip(chat)\n    );\n  });\n\n  it('can see chat history if contact is active', async () => {\n    // we are a StoreElement, so load a store first\n    await loadStore();\n    const chat: ContactChat = await getContactChat({\n      contact: 'contact-dave-active',\n    });\n\n    const chatHistoryEl = chat.shadowRoot.querySelector(\n      'temba-contact-history'\n    ) as HTMLDivElement;\n    const displayVal = chatHistoryEl.style.display;\n    expect(displayVal).to.equal('');\n\n    await assertScreenshot(\n      'contacts/contact-active-show-chat-history',\n      getClip(chat)\n    );\n  });\n\n  it('cannot send chat msg if contact is archived', async () => {\n    // we are a StoreElement, so load a store first\n    await loadStore();\n    const chat: ContactChat = await getContactChat({\n      contact: 'contact-barak-archived',\n    });\n\n    const chatboxDivEl = chat.shadowRoot.querySelector(\n      '.chatbox'\n    ) as HTMLDivElement;\n    const displayVal = chatboxDivEl.style.display;\n    expect(displayVal).to.equal('none');\n\n    await assertScreenshot(\n      'contacts/contact-archived-hide-chat-msg',\n      getClip(chat)\n    );\n  });\n\n  it('can see chat history if contact is archived', async () => {\n    // we are a StoreElement, so load a store first\n    await loadStore();\n    const chat: ContactChat = await getContactChat({\n      contact: 'contact-barak-archived',\n    });\n\n    const chatHistoryEl = chat.shadowRoot.querySelector(\n      'temba-contact-history'\n    ) as HTMLDivElement;\n    const displayVal = chatHistoryEl.style.display;\n    expect(displayVal).to.equal('');\n\n    await assertScreenshot(\n      'contacts/contact-archived-show-chat-history',\n      getClip(chat)\n    );\n  });\n\n  it('cannot send chat msg if contact is blocked', async () => {\n    // we are a StoreElement, so load a store first\n    await loadStore();\n    const chat: ContactChat = await getContactChat({\n      contact: 'contact-michelle-blocked',\n    });\n\n    const chatboxDivEl = chat.shadowRoot.querySelector(\n      '.chatbox'\n    ) as HTMLDivElement;\n    const displayVal = chatboxDivEl.style.display;\n    expect(displayVal).to.equal('none');\n\n    await assertScreenshot(\n      'contacts/contact-blocked-hide-chat-msg',\n      getClip(chat)\n    );\n  });\n\n  it('can see chat history if contact is blocked', async () => {\n    // we are a StoreElement, so load a store first\n    await loadStore();\n    const chat: ContactChat = await getContactChat({\n      contact: 'contact-michelle-blocked',\n    });\n\n    const chatHistoryEl = chat.shadowRoot.querySelector(\n      'temba-contact-history'\n    ) as HTMLDivElement;\n    const displayVal = chatHistoryEl.style.display;\n    expect(displayVal).to.equal('');\n\n    await assertScreenshot(\n      'contacts/contact-blocked-show-chat-history',\n      getClip(chat)\n    );\n  });\n\n  it('cannot send chat msg if contact is stopped', async () => {\n    // we are a StoreElement, so load a store first\n    await loadStore();\n    const chat: ContactChat = await getContactChat({\n      contact: 'contact-tim-stopped',\n    });\n\n    const chatboxDivEl = chat.shadowRoot.querySelector(\n      '.chatbox'\n    ) as HTMLDivElement;\n    const displayVal = chatboxDivEl.style.display;\n    expect(displayVal).to.equal('none');\n\n    await assertScreenshot(\n      'contacts/contact-stopped-hide-chat-msg',\n      getClip(chat)\n    );\n  });\n\n  it('can see chat history if contact is stopped', async () => {\n    // we are a StoreElement, so load a store first\n    await loadStore();\n    const chat: ContactChat = await getContactChat({\n      contact: 'contact-tim-stopped',\n    });\n\n    const chatHistoryEl = chat.shadowRoot.querySelector(\n      'temba-contact-history'\n    ) as HTMLDivElement;\n    const displayVal = chatHistoryEl.style.display;\n    expect(displayVal).to.equal('');\n\n    await assertScreenshot(\n      'contacts/contact-stopped-show-chat-history',\n      getClip(chat)\n    );\n  });\n});\n"]}

package/out-tsc/test/temba-contact-history.test.js

@@ -31,8 +31,8 @@ sinon.stub(stubbable, 'getCurrentDate').callsFake(() => {
 });
 describe('temba-contact-history', () => {
     beforeEach(() => {
-        mockGET(/\/contact\/history\/1234\/.*/, '/test-assets/contacts/history.json');
-        mockGET(/\/api\/v2\/tickets\.json\?contact=1234/, '/test-assets/api/tickets.json');
+        mockGET(/\/contact\/history\/contact-dave-active\/.*/, '/test-assets/contacts/history.json');
+        mockGET(/\/api\/v2\/tickets\.json\?contact=contact-dave-active/, '/test-assets/api/tickets.json');
     });
     it('can be created', async () => {
         const history = await createHistory(getHistoryHTML());
@@ -40,7 +40,7 @@ describe('temba-contact-history', () => {
     });
     it('renders history', async () => {
         const history = await createHistory(getHistoryHTML({
-            uuid: '1234',
+            uuid: 'contact-dave-active',
         }));
         await waitFor(500);
         // we should have scrolled to the bottom
@@ -53,7 +53,7 @@ describe('temba-contact-history', () => {
     });
     it('expands event groups', async () => {
         const history = await createHistory(getHistoryHTML({
-            uuid: '1234',
+            uuid: 'contact-dave-active',
         }));
         // our groups with collapsed events
         const groups = [3, 5, 7];

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

@@ -1 +1 @@
-{"version":3,"file":"temba-contact-history.test.js","sourceRoot":"","sources":["../../test/temba-contact-history.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, assert, expect } from '@open-wc/testing';\nimport * as sinon from 'sinon';\nimport { ContactHistory } from '../src/contacts/ContactHistory';\nimport { stubbable } from '../src/utils';\nimport {\n  assertScreenshot,\n  getClip,\n  getHTML,\n  mockGET,\n} from '../test/utils.test';\nimport './utils.test';\n\nexport const createHistory = async (def: string) => {\n  const parentNode = document.createElement('div');\n  parentNode.setAttribute(\n    'style',\n    'width: 500px;height:750px;display:flex;flex-direction:column;flex-grow:1;min-height:0;'\n  );\n  const history = (await fixture(def, { parentNode })) as ContactHistory;\n\n  // let history fetch start and wait for it\n  await waitFor(0);\n  await history.httpComplete;\n\n  // wait for scroll update\n  await waitFor(0);\n  await history.httpComplete;\n\n  return history;\n};\n\nconst getHistoryHTML = (attrs: any = {} as any) =>\n  // attrs = \"min-height:0;display:flex;flex-grow:1;flex-direction:column\";\n  getHTML('temba-contact-history', attrs);\n\nconst getHistoryClip = (ele: ContactHistory) => {\n  const clip = getClip(ele);\n  clip.height = Math.min(clip.height, 750);\n  clip.bottom = clip.top + clip.height;\n  return clip;\n};\n\n// stub our current date for consistent screenshots\nsinon.stub(stubbable, 'getCurrentDate').callsFake(() => {\n  return new Date('2021-03-31T00:00:00.000-00:00');\n});\n\ndescribe('temba-contact-history', () => {\n  beforeEach(() => {\n    mockGET(\n      /\\/contact\\/history\\/1234\\/.*/,\n      '/test-assets/contacts/history.json'\n    );\n\n    mockGET(\n      /\\/api\\/v2\\/tickets\\.json\\?contact=1234/,\n      '/test-assets/api/tickets.json'\n    );\n  });\n\n  it('can be created', async () => {\n    const history = await createHistory(getHistoryHTML());\n    assert.instanceOf(history, ContactHistory);\n  });\n\n  it('renders history', async () => {\n    const history = await createHistory(\n      getHistoryHTML({\n        uuid: '1234',\n      })\n    );\n\n    await waitFor(500);\n\n    // we should have scrolled to the bottom\n    const events = history.shadowRoot.querySelector('.events');\n    const top = events.scrollHeight - events.getBoundingClientRect().height;\n\n    expect(top).to.equal(520);\n\n    // make sure we actually scrolled to there\n    expect(events.scrollTop).to.equal(top);\n\n    await assertScreenshot('contacts/history', getHistoryClip(history));\n  });\n\n  it('expands event groups', async () => {\n    const history = await createHistory(\n      getHistoryHTML({\n        uuid: '1234',\n      })\n    );\n\n    // our groups with collapsed events\n    const groups = [3, 5, 7];\n    for (const idx of groups) {\n      const group = history.shadowRoot.querySelector(\n        `.event-count[data-group-index='${idx}']`\n      ) as HTMLDivElement;\n      group.click();\n    }\n\n    await waitFor(800);\n\n    await assertScreenshot(\n      'contacts/history-expanded',\n      getHistoryClip(history)\n    );\n  });\n});\n"]}
+{"version":3,"file":"temba-contact-history.test.js","sourceRoot":"","sources":["../../test/temba-contact-history.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, assert, expect } from '@open-wc/testing';\nimport * as sinon from 'sinon';\nimport { ContactHistory } from '../src/contacts/ContactHistory';\nimport { stubbable } from '../src/utils';\nimport {\n  assertScreenshot,\n  getClip,\n  getHTML,\n  mockGET,\n} from '../test/utils.test';\nimport './utils.test';\n\nexport const createHistory = async (def: string) => {\n  const parentNode = document.createElement('div');\n  parentNode.setAttribute(\n    'style',\n    'width: 500px;height:750px;display:flex;flex-direction:column;flex-grow:1;min-height:0;'\n  );\n  const history = (await fixture(def, { parentNode })) as ContactHistory;\n\n  // let history fetch start and wait for it\n  await waitFor(0);\n  await history.httpComplete;\n\n  // wait for scroll update\n  await waitFor(0);\n  await history.httpComplete;\n\n  return history;\n};\n\nconst getHistoryHTML = (attrs: any = {} as any) =>\n  // attrs = \"min-height:0;display:flex;flex-grow:1;flex-direction:column\";\n  getHTML('temba-contact-history', attrs);\n\nconst getHistoryClip = (ele: ContactHistory) => {\n  const clip = getClip(ele);\n  clip.height = Math.min(clip.height, 750);\n  clip.bottom = clip.top + clip.height;\n  return clip;\n};\n\n// stub our current date for consistent screenshots\nsinon.stub(stubbable, 'getCurrentDate').callsFake(() => {\n  return new Date('2021-03-31T00:00:00.000-00:00');\n});\n\ndescribe('temba-contact-history', () => {\n  beforeEach(() => {\n    mockGET(\n      /\\/contact\\/history\\/contact-dave-active\\/.*/,\n      '/test-assets/contacts/history.json'\n    );\n\n    mockGET(\n      /\\/api\\/v2\\/tickets\\.json\\?contact=contact-dave-active/,\n      '/test-assets/api/tickets.json'\n    );\n  });\n\n  it('can be created', async () => {\n    const history = await createHistory(getHistoryHTML());\n    assert.instanceOf(history, ContactHistory);\n  });\n\n  it('renders history', async () => {\n    const history = await createHistory(\n      getHistoryHTML({\n        uuid: 'contact-dave-active',\n      })\n    );\n\n    await waitFor(500);\n\n    // we should have scrolled to the bottom\n    const events = history.shadowRoot.querySelector('.events');\n    const top = events.scrollHeight - events.getBoundingClientRect().height;\n\n    expect(top).to.equal(520);\n\n    // make sure we actually scrolled to there\n    expect(events.scrollTop).to.equal(top);\n\n    await assertScreenshot('contacts/history', getHistoryClip(history));\n  });\n\n  it('expands event groups', async () => {\n    const history = await createHistory(\n      getHistoryHTML({\n        uuid: 'contact-dave-active',\n      })\n    );\n\n    // our groups with collapsed events\n    const groups = [3, 5, 7];\n    for (const idx of groups) {\n      const group = history.shadowRoot.querySelector(\n        `.event-count[data-group-index='${idx}']`\n      ) as HTMLDivElement;\n      group.click();\n    }\n\n    await waitFor(800);\n\n    await assertScreenshot(\n      'contacts/history-expanded',\n      getHistoryClip(history)\n    );\n  });\n});\n"]}

package/out-tsc/test/temba-menu.test.js

@@ -3,7 +3,7 @@ import { TembaMenu } from '../src/list/TembaMenu';
 import { assertScreenshot, getClip, getComponent } from './utils.test';
 const TAG = 'temba-menu';
 const getMenu = async (attrs = {}, width = 0) => {
-    const menu = (await getComponent(TAG, attrs, '', width, 'display:inline-block'));
+    const menu = (await getComponent(TAG, attrs, '', width, 0, 'display:inline-block'));
     // wait for the fetch
     await menu.httpComplete;
     return menu;

package/out-tsc/test/temba-menu.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"temba-menu.test.js","sourceRoot":"","sources":["../../test/temba-menu.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEvE,MAAM,GAAG,GAAG,YAAY,CAAC;AACzB,MAAM,OAAO,GAAG,KAAK,EAAE,QAAa,EAAE,EAAE,KAAK,GAAG,CAAC,EAAE,EAAE;IACnD,MAAM,IAAI,GAAG,CAAC,MAAM,YAAY,CAC9B,GAAG,EACH,KAAK,EACL,EAAE,EACF,KAAK,EACL,sBAAsB,CACvB,CAAc,CAAC;IAEhB,qBAAqB;IACrB,MAAM,IAAI,CAAC,YAAY,CAAC;IAExB,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,EAAE;QAC9B,MAAM,IAAI,GAAc,MAAM,OAAO,EAAE,CAAC;QACxC,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;QACnC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;QACrC,MAAM,IAAI,GAAc,MAAM,OAAO,CAAC;YACpC,QAAQ,EAAE,kCAAkC;SAC7C,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC3C,MAAM,gBAAgB,CAAC,gBAAgB,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kBAAkB,EAAE,KAAK,IAAI,EAAE;QAChC,MAAM,IAAI,GAAc,MAAM,OAAO,CAAC;YACpC,QAAQ,EAAE,kCAAkC;SAC7C,CAAC,CAAC;QAEH,uBAAuB;QACvB,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,KAAK,EAAE,CAAC;QACnC,MAAM,IAAI,CAAC,YAAY,CAAC;QAExB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAEpD,MAAM,gBAAgB,CAAC,mBAAmB,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { assert, expect } from '@open-wc/testing';\n\nimport { TembaMenu } from '../src/list/TembaMenu';\nimport { assertScreenshot, getClip, getComponent } from './utils.test';\n\nconst TAG = 'temba-menu';\nconst getMenu = async (attrs: any = {}, width = 0) => {\n  const menu = (await getComponent(\n    TAG,\n    attrs,\n    '',\n    width,\n    'display:inline-block'\n  )) as TembaMenu;\n\n  // wait for the fetch\n  await menu.httpComplete;\n\n  return menu;\n};\n\ndescribe('temba-menu', () => {\n  it('can be created', async () => {\n    const list: TembaMenu = await getMenu();\n    assert.instanceOf(list, TembaMenu);\n    expect(list.root).is.undefined;\n  });\n\n  it('renders with endpoint', async () => {\n    const menu: TembaMenu = await getMenu({\n      endpoint: '/test-assets/list/menu-root.json',\n    });\n\n    expect(menu.root.items.length).to.equal(2);\n    await assertScreenshot('list/menu-root', getClip(menu));\n  });\n\n  it('supports submenu', async () => {\n    const menu: TembaMenu = await getMenu({\n      endpoint: '/test-assets/list/menu-root.json',\n    });\n\n    // click our first item\n    menu.getDiv('#menu-tasks').click();\n    await menu.httpComplete;\n\n    expect(menu.root.items[0].items.length).to.equal(3);\n\n    await assertScreenshot('list/menu-submenu', getClip(menu));\n  });\n});\n"]}
+{"version":3,"file":"temba-menu.test.js","sourceRoot":"","sources":["../../test/temba-menu.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEvE,MAAM,GAAG,GAAG,YAAY,CAAC;AACzB,MAAM,OAAO,GAAG,KAAK,EAAE,QAAa,EAAE,EAAE,KAAK,GAAG,CAAC,EAAE,EAAE;IACnD,MAAM,IAAI,GAAG,CAAC,MAAM,YAAY,CAC9B,GAAG,EACH,KAAK,EACL,EAAE,EACF,KAAK,EACL,CAAC,EACD,sBAAsB,CACvB,CAAc,CAAC;IAEhB,qBAAqB;IACrB,MAAM,IAAI,CAAC,YAAY,CAAC;IAExB,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,EAAE;QAC9B,MAAM,IAAI,GAAc,MAAM,OAAO,EAAE,CAAC;QACxC,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;QACnC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;QACrC,MAAM,IAAI,GAAc,MAAM,OAAO,CAAC;YACpC,QAAQ,EAAE,kCAAkC;SAC7C,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC3C,MAAM,gBAAgB,CAAC,gBAAgB,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kBAAkB,EAAE,KAAK,IAAI,EAAE;QAChC,MAAM,IAAI,GAAc,MAAM,OAAO,CAAC;YACpC,QAAQ,EAAE,kCAAkC;SAC7C,CAAC,CAAC;QAEH,uBAAuB;QACvB,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,KAAK,EAAE,CAAC;QACnC,MAAM,IAAI,CAAC,YAAY,CAAC;QAExB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAEpD,MAAM,gBAAgB,CAAC,mBAAmB,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { assert, expect } from '@open-wc/testing';\n\nimport { TembaMenu } from '../src/list/TembaMenu';\nimport { assertScreenshot, getClip, getComponent } from './utils.test';\n\nconst TAG = 'temba-menu';\nconst getMenu = async (attrs: any = {}, width = 0) => {\n  const menu = (await getComponent(\n    TAG,\n    attrs,\n    '',\n    width,\n    0,\n    'display:inline-block'\n  )) as TembaMenu;\n\n  // wait for the fetch\n  await menu.httpComplete;\n\n  return menu;\n};\n\ndescribe('temba-menu', () => {\n  it('can be created', async () => {\n    const list: TembaMenu = await getMenu();\n    assert.instanceOf(list, TembaMenu);\n    expect(list.root).is.undefined;\n  });\n\n  it('renders with endpoint', async () => {\n    const menu: TembaMenu = await getMenu({\n      endpoint: '/test-assets/list/menu-root.json',\n    });\n\n    expect(menu.root.items.length).to.equal(2);\n    await assertScreenshot('list/menu-root', getClip(menu));\n  });\n\n  it('supports submenu', async () => {\n    const menu: TembaMenu = await getMenu({\n      endpoint: '/test-assets/list/menu-root.json',\n    });\n\n    // click our first item\n    menu.getDiv('#menu-tasks').click();\n    await menu.httpComplete;\n\n    expect(menu.root.items[0].items.length).to.equal(3);\n\n    await assertScreenshot('list/menu-submenu', getClip(menu));\n  });\n});\n"]}

package/out-tsc/test/temba-tip.test.js

@@ -6,7 +6,7 @@ const getTarget = () => {
     return "<div style='line-height:0px;font-size:14px;background:green;display:flex'>👱‍♀️</div>";
 };
 const getTip = async (attrs = {}, slot = getTarget()) => {
-    return (await getComponent(TAG, attrs, slot, 20, 'margin:200px;'));
+    return (await getComponent(TAG, attrs, slot, 20, 0, 'margin:200px;'));
 };
 const getRightClip = (ele) => {
     const clip = getClip(ele);

package/out-tsc/test/temba-tip.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"temba-tip.test.js","sourceRoot":"","sources":["../../test/temba-tip.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { assert } from '@open-wc/testing';\nimport { Tip } from '../src/tip/Tip';\nimport { assertScreenshot, getClip, getComponent } from './utils.test';\n\nconst TAG = 'temba-tip';\n\nconst getTarget = () => {\n  return \"<div style='line-height:0px;font-size:14px;background:green;display:flex'>👱‍♀️</div>\";\n};\n\nconst getTip = async (\n  attrs: { text?: string; position?: string; visible?: boolean } = {},\n  slot = getTarget()\n) => {\n  return (await getComponent(TAG, attrs, slot, 20, 'margin:200px;')) as Tip;\n};\n\nconst getRightClip = (ele: HTMLElement) => {\n  const clip = getClip(ele);\n  clip.width += 78;\n  clip.height += 10;\n  clip.y -= 5;\n  return clip;\n};\n\nconst getLeftClip = (ele: HTMLElement) => {\n  const clip = getClip(ele);\n  clip.x -= 80;\n  clip.width += 78;\n  clip.height += 10;\n  clip.y -= 5;\n  return clip;\n};\n\nconst getTopClip = (ele: HTMLElement) => {\n  const clip = getClip(ele);\n  clip.y -= 30;\n  clip.height += 30;\n  clip.width += 30;\n  clip.x -= 15;\n  return clip;\n};\n\nconst getBottomClip = (ele: HTMLElement) => {\n  const clip = getClip(ele);\n  clip.height += 35;\n  clip.width += 30;\n  clip.x -= 15;\n  return clip;\n};\n\ndescribe(TAG, () => {\n  it('can be created', async () => {\n    const icon = await getTip({ text: 'Resolve' });\n    assert.instanceOf(icon, Tip);\n  });\n\n  it('shows on the left', async () => {\n    const tip = await getTip({\n      text: 'Hello!',\n      visible: true,\n      position: 'left',\n    });\n    await assertScreenshot('tip/left', getLeftClip(tip));\n  });\n\n  it('shows on the right', async () => {\n    const tip = await getTip({\n      text: 'Hello!',\n      visible: true,\n      position: 'right',\n    });\n    await assertScreenshot('tip/right', getRightClip(tip));\n  });\n\n  it('shows on top', async () => {\n    const tip = await getTip({\n      text: 'Hello!',\n      visible: true,\n      position: 'top',\n    });\n    await assertScreenshot('tip/top', getTopClip(tip));\n  });\n\n  it('shows on bottom', async () => {\n    const tip = await getTip({\n      text: 'Hello!',\n      visible: true,\n      position: 'bottom',\n    });\n    await assertScreenshot('tip/bottom', getBottomClip(tip));\n  });\n});\n"]}
+{"version":3,"file":"temba-tip.test.js","sourceRoot":"","sources":["../../test/temba-tip.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { assert } from '@open-wc/testing';\nimport { Tip } from '../src/tip/Tip';\nimport { assertScreenshot, getClip, getComponent } from './utils.test';\n\nconst TAG = 'temba-tip';\n\nconst getTarget = () => {\n  return \"<div style='line-height:0px;font-size:14px;background:green;display:flex'>👱‍♀️</div>\";\n};\n\nconst getTip = async (\n  attrs: { text?: string; position?: string; visible?: boolean } = {},\n  slot = getTarget()\n) => {\n  return (await getComponent(TAG, attrs, slot, 20, 0, 'margin:200px;')) as Tip;\n};\n\nconst getRightClip = (ele: HTMLElement) => {\n  const clip = getClip(ele);\n  clip.width += 78;\n  clip.height += 10;\n  clip.y -= 5;\n  return clip;\n};\n\nconst getLeftClip = (ele: HTMLElement) => {\n  const clip = getClip(ele);\n  clip.x -= 80;\n  clip.width += 78;\n  clip.height += 10;\n  clip.y -= 5;\n  return clip;\n};\n\nconst getTopClip = (ele: HTMLElement) => {\n  const clip = getClip(ele);\n  clip.y -= 30;\n  clip.height += 30;\n  clip.width += 30;\n  clip.x -= 15;\n  return clip;\n};\n\nconst getBottomClip = (ele: HTMLElement) => {\n  const clip = getClip(ele);\n  clip.height += 35;\n  clip.width += 30;\n  clip.x -= 15;\n  return clip;\n};\n\ndescribe(TAG, () => {\n  it('can be created', async () => {\n    const icon = await getTip({ text: 'Resolve' });\n    assert.instanceOf(icon, Tip);\n  });\n\n  it('shows on the left', async () => {\n    const tip = await getTip({\n      text: 'Hello!',\n      visible: true,\n      position: 'left',\n    });\n    await assertScreenshot('tip/left', getLeftClip(tip));\n  });\n\n  it('shows on the right', async () => {\n    const tip = await getTip({\n      text: 'Hello!',\n      visible: true,\n      position: 'right',\n    });\n    await assertScreenshot('tip/right', getRightClip(tip));\n  });\n\n  it('shows on top', async () => {\n    const tip = await getTip({\n      text: 'Hello!',\n      visible: true,\n      position: 'top',\n    });\n    await assertScreenshot('tip/top', getTopClip(tip));\n  });\n\n  it('shows on bottom', async () => {\n    const tip = await getTip({\n      text: 'Hello!',\n      visible: true,\n      position: 'bottom',\n    });\n    await assertScreenshot('tip/bottom', getBottomClip(tip));\n  });\n});\n"]}

package/out-tsc/test/utils.test.js

@@ -19,19 +19,16 @@ export const getAttributes = (attrs = {}) => {
     })
         .join(' ')}`;
 };
-export const getComponent = async (tag, attrs = {}, slot = '', width = 250, style = '') => {
+export const getComponent = async (tag, attrs = {}, slot = '', width = 250, height = 0, style = '') => {
     const spec = `<${tag} ${getAttributes(attrs)}>${slot}</${tag}>`;
-    if (width > 0 || style) {
-        const parentNode = document.createElement('div');
-        if (width > 0) {
-            parentNode.setAttribute('style', `width: ${width}px;${style}`);
-        }
-        else {
-            parentNode.setAttribute('style', `${style}`);
-        }
-        return await fixture(spec, { parentNode });
-    }
-    return await fixture(spec);
+    const parentNode = document.createElement('div');
+    const styleAttribute = `
+    ${width > 0 ? `width:${width}px;` : ``} 
+    ${height > 0 ? `height:${height}px;` : ``}
+    ${style ? style : ``}
+  `;
+    parentNode.setAttribute('style', styleAttribute);
+    return await fixture(spec, { parentNode });
 };
 const createResponse = mocked => {
     const mockResponse = new window.Response(mocked.body, {
@@ -100,7 +97,7 @@ export const assertScreenshot = async (filename, clip, threshold = 0.1, exclude
     // const screenShotsEnabled = !!__karma__.config.args.find(
     // (option: string) => option === '--screenshots'
     // );
-    // await (window as any).waitFor(300);
+    await window.waitFor(300);
     // console.log((window as any).watched);
     if (window.watched) {
         // return;