@nyaruka/temba-components 0.43.0 → 0.43.2

package/dist/sw.js

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

package/dist/templates/components-body.html

@@ -1 +1 @@
-<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/96498fd6.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.43.0"</script>
+<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/850b9c76.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.43.2"</script>

package/dist/templates/components-head.html

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

package/out-tsc/src/compose/Compose.js

@@ -5,6 +5,7 @@ import { property } from 'lit/decorators.js';
 import { Icon } from '../vectoricon';
 import { CustomEventType } from '../interfaces';
 import { formatFileSize, formatFileType, getClasses, postFormData, truncate, } from '../utils';
+export const upload_endpoint = '/api/v2/media.json';
 export class Compose extends FormElement {
     static get styles() {
         return css `
@@ -162,7 +163,7 @@ export class Compose extends FormElement {
         super();
         this.currentChat = '';
         this.accept = ''; //e.g. ".xls,.xlsx"
-        this.endpoint = '/msgmedia/upload/';
+        this.endpoint = upload_endpoint;
         // values = valid and uploaded attachments
         // errorValues = invalid and not-uploaded attachments
         this.errorValues = [];
@@ -172,18 +173,23 @@ export class Compose extends FormElement {
     }
     updated(changes) {
         super.updated(changes);
-        if (changes.has('currentChat') ||
-            changes.has('values') ||
-            changes.has('buttonError')) {
+        if (changes.has('currentChat') || changes.has('values')) {
+            this.buttonError = '';
             this.toggleButton();
         }
     }
     firstUpdated() {
-        const completion = this.shadowRoot.querySelector('temba-completion');
-        if (completion) {
-            window.setTimeout(() => {
-                completion.click();
-            }, 0);
+        this.setFocusOnChatbox();
+    }
+    setFocusOnChatbox() {
+        if (this.chatbox) {
+            const completion = this.shadowRoot.querySelector('temba-completion');
+            if (completion) {
+                //simulate a click inside the completion to set focus
+                window.setTimeout(() => {
+                    completion.click();
+                }, 0);
+            }
         }
     }
     reset() {
@@ -260,20 +266,22 @@ export class Compose extends FormElement {
         payload.append('file', file);
         postFormData(url, payload)
             .then((response) => {
-            if (response.json.error) {
-                this.addErrorValue(file, response.json.error);
-            }
-            else {
-                const attachment = response.json;
-                if (attachment) {
-                    this.addValue(attachment);
-                    this.fireCustomEvent(CustomEventType.AttachmentAdded, attachment);
-                }
+            const attachment = response.json;
+            if (attachment) {
+                this.addValue(attachment);
+                this.fireCustomEvent(CustomEventType.AttachmentAdded, attachment);
             }
         })
             .catch((error) => {
-            console.log(error);
-            this.addErrorValue(file, error);
+            let fileError = '';
+            if (error.status === 400) {
+                fileError = error.json.file[0];
+            }
+            else {
+                fileError = 'Server failure';
+            }
+            console.error(fileError);
+            this.addErrorValue(file, fileError);
         })
             .finally(() => {
             this.uploading = false;
@@ -283,8 +291,7 @@ export class Compose extends FormElement {
         const errorValue = {
             uuid: Math.random().toString(36).slice(2, 6),
             content_type: file.type,
-            type: file.type,
-            name: file.name,
+            filename: file.name,
             url: file.name,
             size: file.size,
             error: error,
@@ -311,24 +318,19 @@ export class Compose extends FormElement {
     }
     toggleButton() {
         if (this.button) {
-            if (this.buttonError && this.buttonError.length > 0) {
-                this.buttonDisabled = true;
+            const chatboxEmpty = this.currentChat.trim().length === 0;
+            const attachmentsEmpty = this.values.length === 0;
+            if (this.chatbox && this.attachments) {
+                this.buttonDisabled = chatboxEmpty && attachmentsEmpty;
+            }
+            else if (this.chatbox) {
+                this.buttonDisabled = chatboxEmpty;
+            }
+            else if (this.attachments) {
+                this.buttonDisabled = attachmentsEmpty;
             }
             else {
-                const chatboxEmpty = this.currentChat.trim().length === 0;
-                const attachmentsEmpty = this.values.length === 0;
-                if (this.chatbox && this.attachments) {
-                    this.buttonDisabled = chatboxEmpty && attachmentsEmpty;
-                }
-                else if (this.chatbox) {
-                    this.buttonDisabled = chatboxEmpty;
-                }
-                else if (this.attachments) {
-                    this.buttonDisabled = attachmentsEmpty;
-                }
-                else {
-                    this.buttonDisabled = true;
-                }
+                this.buttonDisabled = true;
             }
         }
     }
@@ -349,11 +351,8 @@ export class Compose extends FormElement {
             this.buttonDisabled = true;
             const name = this.buttonName;
             this.fireCustomEvent(CustomEventType.ButtonClicked, { name });
-        }
-    }
-    handleSendBlur() {
-        if (this.buttonError.length > 0) {
-            this.buttonError = '';
+            //after send, return focus to chatbox
+            this.setFocusOnChatbox();
         }
     }
     render() {
@@ -386,7 +385,6 @@ export class Compose extends FormElement {
       @change=${this.handleChatboxChange}
       @keydown=${this.handleSendEnter}
       placeholder="Write something here"
-      @blur=${this.handleSendBlur}
     >
     </temba-completion>`;
     }
@@ -408,10 +406,10 @@ export class Compose extends FormElement {
                 </div>
                 <div class="attachment-name">
                   <span
-                    title="${attachment.name} (${formatFileSize(attachment.size, 2)}) ${attachment.type}"
-                    >${truncate(attachment.name, 25)}
+                    title="${attachment.filename} (${formatFileSize(attachment.size, 2)}) ${attachment.content_type}"
+                    >${truncate(attachment.filename, 25)}
                     (${formatFileSize(attachment.size, 0)})
-                    ${formatFileType(attachment.type)}</span
+                    ${formatFileType(attachment.content_type)}</span
                   >
                 </div>
               </div>`;
@@ -429,8 +427,8 @@ export class Compose extends FormElement {
                 </div>
                 <div class="attachment-name">
                   <span
-                    title="${errorAttachment.name} (${formatFileSize(0, 0)}) - Attachment failed - ${errorAttachment.error}"
-                    >${truncate(errorAttachment.name, 25)}
+                    title="${errorAttachment.filename} (${formatFileSize(0, 0)}) - Attachment failed - ${errorAttachment.error}"
+                    >${truncate(errorAttachment.filename, 25)}
                     (${formatFileSize(0, 0)}) - Attachment failed</span
                   >
                 </div>
@@ -486,7 +484,6 @@ export class Compose extends FormElement {
       name=${this.buttonName}
       @click=${this.handleSendClick}
       ?disabled=${this.buttonDisabled}
-      @blur=${this.handleSendBlur}
     ></temba-button>`;
     }
 }

package/out-tsc/src/compose/Compose.js.map

@@ -1 +1 @@
-{"version":3,"file":"Compose.js","sourceRoot":"","sources":["../../../src/compose/Compose.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FormElement } from '../FormElement';\nimport { property } from 'lit/decorators.js';\nimport { Icon } from '../vectoricon';\nimport { CustomEventType } from '../interfaces';\nimport {\n  formatFileSize,\n  formatFileType,\n  getClasses,\n  postFormData,\n  truncate,\n  WebResponse,\n} from '../utils';\nimport { Completion } from '../completion/Completion';\n\nexport interface Attachment {\n  uuid: string;\n  content_type: string;\n  type: string; //deprecated\n  url: string;\n  name: string;\n  size: number;\n  error: string;\n}\n\nexport class Compose extends FormElement {\n  static get styles() {\n    return css`\n      .container {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n        position: relative;\n\n        border-radius: var(--curvature-widget);\n        background: var(--color-widget-bg);\n        border: 1px solid var(--color-widget-border);\n        transition: all ease-in-out var(--transition-speed);\n        box-shadow: var(--widget-box-shadow);\n        caret-color: var(--input-caret);\n        padding: var(--temba-textinput-padding);\n      }\n      .container:focus-within {\n        border-color: var(--color-focus);\n        background: var(--color-widget-bg-focused);\n        box-shadow: var(--widget-box-shadow-focused);\n      }\n\n      .drop-mask {\n        opacity: 0;\n        pointer-events: none;\n        position: absolute;\n        z-index: 1;\n        height: 100%;\n        width: 100%;\n        bottom: 0;\n        right: 0;\n        background: rgba(210, 243, 184, 0.8);\n        border-radius: var(--curvature-widget);\n        margin: -0.5em;\n        padding: 0.5em;\n        transition: opacity ease-in-out var(--transition-speed);\n        display: flex;\n        align-items: center;\n        text-align: center;\n      }\n\n      .highlight .drop-mask {\n        opacity: 1;\n      }\n\n      .drop-mask > div {\n        margin: auto;\n        border-radius: var(--curvature-widget);\n        font-weight: 400;\n        color: rgba(0, 0, 0, 0.5);\n      }\n\n      .items {\n      }\n\n      temba-completion {\n        margin-left: 0.3em;\n        margin-top: 0.3em;\n        --color-widget-border: none;\n        --curvature-widget: none;\n        --widget-box-shadow: none;\n        --widget-box-shadow-focused: none;\n        --temba-textinput-padding: 0;\n      }\n\n      .attachments {\n        display: flex;\n        flex-direction: column;\n      }\n      .attachments-list {\n        display: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n      }\n      .attachment-item {\n        background: rgba(100, 100, 100, 0.1);\n        border-radius: 2px;\n        margin: 0.3em;\n        display: flex;\n        color: var(--color-widget-text);\n      }\n      .attachment-item.error {\n        background: rgba(250, 0, 0, 0.1);\n        color: rgba(250, 0, 0, 0.75);\n      }\n      .remove-item {\n        cursor: pointer !important;\n        padding: 3px 6px;\n        border-right: 1px solid rgba(100, 100, 100, 0.2);\n        margin-top: 1px;\n        background: rgba(100, 100, 100, 0.05);\n      }\n\n      .remove-item:hover {\n        background: rgba(100, 100, 100, 0.1);\n      }\n\n      .remove-item.error:hover {\n        background: rgba(250, 0, 0, 0.1);\n      }\n\n      .remove-item.error {\n        background: rgba(250, 0, 0, 0.05);\n        color: rgba(250, 0, 0, 0.75);\n      }\n      .attachment-name {\n        align-self: center;\n        font-size: 12px;\n        padding: 2px 8px;\n      }\n\n      .actions {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-left: 0.25em;\n        padding: 0.2em;\n      }\n\n      #upload-files {\n        display: none;\n      }\n      .upload-label {\n        display: flex;\n        align-items: center;\n      }\n      .upload-icon {\n        color: rgb(102, 102, 102);\n      }\n      .actions-right {\n        display: flex;\n        align-items: center;\n      }\n      temba-charcount {\n        margin-right: 5px;\n        overflow: hidden;\n        --temba-charcount-counts-margin-top: 0px;\n        --temba-charcount-summary-margin-top: 0px;\n        --temba-charcount-summary-position: fixed;\n        --temba-charcount-summary-right: 105px;\n        --temba-charcount-summary-bottom: 105px;\n      }\n      temba-button {\n        --button-y: 1px;\n        --button-x: 12px;\n      }\n      .send-error {\n        color: rgba(250, 0, 0, 0.75);\n        font-size: var(--help-text-size);\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  chatbox: boolean;\n\n  @property({ type: Boolean })\n  attachments: boolean;\n\n  @property({ type: Boolean })\n  counter: boolean;\n\n  @property({ type: Boolean })\n  pendingDrop: boolean;\n\n  @property({ type: Boolean })\n  button: boolean;\n\n  @property({ type: String, attribute: false })\n  currentChat = '';\n\n  @property({ type: String })\n  accept = ''; //e.g. \".xls,.xlsx\"\n\n  @property({ type: String, attribute: false })\n  endpoint = '/msgmedia/upload/';\n\n  @property({ type: Boolean, attribute: false })\n  uploading: boolean;\n\n  // values = valid and uploaded attachments\n  // errorValues = invalid and not-uploaded attachments\n  @property({ type: Array, attribute: false })\n  errorValues: Attachment[] = [];\n\n  @property({ type: String })\n  buttonName = 'Send';\n\n  @property({ type: Boolean, attribute: false })\n  buttonDisabled = true;\n\n  @property({ type: String, attribute: false })\n  buttonError = '';\n\n  public constructor() {\n    super();\n  }\n\n  public updated(changes: Map<string, any>): void {\n    super.updated(changes);\n\n    if (\n      changes.has('currentChat') ||\n      changes.has('values') ||\n      changes.has('buttonError')\n    ) {\n      this.toggleButton();\n    }\n  }\n\n  firstUpdated(): void {\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  public reset(): void {\n    this.currentChat = '';\n    this.values = [];\n    this.errorValues = [];\n    this.buttonError = '';\n  }\n\n  private handleChatboxChange(evt: Event) {\n    const completion = evt.target as Completion;\n    const textInput = completion.textInputElement;\n    this.currentChat = textInput.value;\n    this.preventDefaults(evt);\n  }\n\n  private handleDragEnter(evt: DragEvent): void {\n    this.highlight(evt);\n  }\n\n  private handleDragOver(evt: DragEvent): void {\n    this.highlight(evt);\n  }\n\n  private handleDragLeave(evt: DragEvent): void {\n    this.unhighlight(evt);\n  }\n\n  private handleDrop(evt: DragEvent): void {\n    this.unhighlight(evt);\n\n    const dt = evt.dataTransfer;\n    if (dt) {\n      const files = dt.files;\n      this.uploadFiles(files);\n    }\n  }\n\n  private preventDefaults(evt: Event): void {\n    evt.preventDefault();\n    evt.stopPropagation();\n  }\n\n  private highlight(evt: DragEvent): void {\n    this.pendingDrop = true;\n    this.preventDefaults(evt);\n  }\n\n  private unhighlight(evt: DragEvent): void {\n    this.pendingDrop = false;\n    this.preventDefaults(evt);\n  }\n\n  private handleAddAttachments(): void {\n    this.dispatchEvent(new Event('change'));\n  }\n\n  private handleUploadFileChanged(evt: Event): void {\n    const target = evt.target as HTMLInputElement;\n    const files = target.files;\n    this.uploadFiles(files);\n  }\n\n  public uploadFiles(files: FileList): void {\n    let filesToUpload = [];\n    if (this.values && this.values.length > 0) {\n      //remove duplicate files that have already been uploaded\n      filesToUpload = [...files].filter(file => {\n        const index = this.values.findIndex(\n          value => value.name === file.name && value.size === file.size\n        );\n        if (index === -1) {\n          return file;\n        }\n      });\n    } else {\n      filesToUpload = [...files];\n    }\n    filesToUpload.map(fileToUpload => {\n      this.uploadFile(fileToUpload);\n    });\n  }\n\n  private uploadFile(file: File): void {\n    this.uploading = true;\n\n    const url = this.endpoint;\n    const payload = new FormData();\n    payload.append('file', file);\n    postFormData(url, payload)\n      .then((response: WebResponse) => {\n        if (response.json.error) {\n          this.addErrorValue(file, response.json.error);\n        } else {\n          const attachment = response.json as Attachment;\n          if (attachment) {\n            this.addValue(attachment);\n            this.fireCustomEvent(CustomEventType.AttachmentAdded, attachment);\n          }\n        }\n      })\n      .catch((error: string) => {\n        console.log(error);\n        this.addErrorValue(file, error);\n      })\n      .finally(() => {\n        this.uploading = false;\n      });\n  }\n\n  private addErrorValue(file: File, error: string) {\n    const errorValue = {\n      uuid: Math.random().toString(36).slice(2, 6),\n      content_type: file.type,\n      type: file.type,\n      name: file.name,\n      url: file.name,\n      size: file.size,\n      error: error,\n    };\n    this.errorValues.push(errorValue);\n    this.requestUpdate('errorValues');\n  }\n  public removeErrorValue(valueToRemove: any) {\n    this.errorValues = this.errorValues.filter(\n      (value: any) => value !== valueToRemove\n    );\n    this.requestUpdate('errorValues');\n  }\n\n  private handleRemoveAttachment(evt: Event): void {\n    const target = evt.target as HTMLDivElement;\n\n    const attachment = this.values.find(({ uuid }) => uuid === target.id);\n    if (attachment) {\n      this.removeValue(attachment);\n      this.fireCustomEvent(CustomEventType.AttachmentRemoved, attachment);\n    }\n    const errorAttachment = this.errorValues.find(\n      ({ uuid }) => uuid === target.id\n    );\n    if (errorAttachment) {\n      this.removeErrorValue(errorAttachment);\n      this.fireCustomEvent(CustomEventType.AttachmentRemoved, attachment);\n    }\n  }\n\n  public toggleButton() {\n    if (this.button) {\n      if (this.buttonError && this.buttonError.length > 0) {\n        this.buttonDisabled = true;\n      } else {\n        const chatboxEmpty = this.currentChat.trim().length === 0;\n        const attachmentsEmpty = this.values.length === 0;\n        if (this.chatbox && this.attachments) {\n          this.buttonDisabled = chatboxEmpty && attachmentsEmpty;\n        } else if (this.chatbox) {\n          this.buttonDisabled = chatboxEmpty;\n        } else if (this.attachments) {\n          this.buttonDisabled = attachmentsEmpty;\n        } else {\n          this.buttonDisabled = true;\n        }\n      }\n    }\n  }\n\n  private handleSendClick() {\n    this.handleSend();\n  }\n\n  private handleSendEnter(evt: KeyboardEvent) {\n    if (evt.key === 'Enter' && !evt.shiftKey) {\n      const chat = evt.target as Completion;\n      if (!chat.hasVisibleOptions()) {\n        this.handleSend();\n      }\n      this.preventDefaults(evt);\n    }\n  }\n\n  private handleSend() {\n    if (!this.buttonDisabled) {\n      this.buttonDisabled = true;\n      const name = this.buttonName;\n      this.fireCustomEvent(CustomEventType.ButtonClicked, { name });\n    }\n  }\n\n  private handleSendBlur() {\n    if (this.buttonError.length > 0) {\n      this.buttonError = '';\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div\n        class=${getClasses({ container: true, highlight: this.pendingDrop })}\n        @dragenter=\"${this.handleDragEnter}\"\n        @dragover=\"${this.handleDragOver}\"\n        @dragleave=\"${this.handleDragLeave}\"\n        @drop=\"${this.handleDrop}\"\n      >\n        <div class=\"drop-mask\"><div>Upload Attachment</div></div>\n\n        ${this.chatbox\n          ? html`<div class=\"items chatbox\">${this.getChatbox()}</div>`\n          : null}\n        ${this.attachments\n          ? html`<div class=\"items attachments\">${this.getAttachments()}</div>`\n          : null}\n        <div class=\"items actions\">${this.getActions()}</div>\n      </div>\n    `;\n  }\n\n  private getChatbox(): TemplateResult {\n    return html` <temba-completion\n      value=${this.currentChat}\n      gsm\n      textarea\n      autogrow\n      @change=${this.handleChatboxChange}\n      @keydown=${this.handleSendEnter}\n      placeholder=\"Write something here\"\n      @blur=${this.handleSendBlur}\n    >\n    </temba-completion>`;\n  }\n\n  private getAttachments(): TemplateResult {\n    return html`\n      ${(this.values && this.values.length > 0) ||\n      (this.errorValues && this.errorValues.length > 0)\n        ? html` <div class=\"attachments-list\">\n            ${this.values.map(attachment => {\n              return html` <div class=\"attachment-item\">\n                <div\n                  class=\"remove-item\"\n                  @click=\"${this.handleRemoveAttachment}\"\n                >\n                  <temba-icon\n                    id=\"${attachment.uuid}\"\n                    name=\"${Icon.delete_small}\"\n                  ></temba-icon>\n                </div>\n                <div class=\"attachment-name\">\n                  <span\n                    title=\"${attachment.name} (${formatFileSize(\n                      attachment.size,\n                      2\n                    )}) ${attachment.type}\"\n                    >${truncate(attachment.name, 25)}\n                    (${formatFileSize(attachment.size, 0)})\n                    ${formatFileType(attachment.type)}</span\n                  >\n                </div>\n              </div>`;\n            })}\n            ${this.errorValues.map(errorAttachment => {\n              return html` <div class=\"attachment-item error\">\n                <div\n                  class=\"remove-item error\"\n                  @click=\"${this.handleRemoveAttachment}\"\n                >\n                  <temba-icon\n                    id=\"${errorAttachment.uuid}\"\n                    name=\"${Icon.delete_small}\"\n                  ></temba-icon>\n                </div>\n                <div class=\"attachment-name\">\n                  <span\n                    title=\"${errorAttachment.name} (${formatFileSize(\n                      0,\n                      0\n                    )}) - Attachment failed - ${errorAttachment.error}\"\n                    >${truncate(errorAttachment.name, 25)}\n                    (${formatFileSize(0, 0)}) - Attachment failed</span\n                  >\n                </div>\n              </div>`;\n            })}\n          </div>`\n        : null}\n    `;\n  }\n\n  private getActions(): TemplateResult {\n    return html`\n      <div class=\"actions-left\">\n        ${this.attachments ? this.getUploader() : null}\n      </div>\n      <div class=\"actions-center\"></div>\n      <div class=\"actions-right\">\n        ${this.buttonError\n          ? html`<div class=\"send-error\">${this.buttonError}</div>`\n          : null}\n        ${this.counter ? this.getCounter() : null}\n        ${this.button ? this.getButton() : null}\n      </div>\n    `;\n  }\n\n  private getUploader(): TemplateResult {\n    if (this.uploading) {\n      return html`<temba-loading units=\"3\" size=\"12\"></temba-loading>`;\n    } else {\n      return html` <input\n          type=\"file\"\n          id=\"upload-files\"\n          multiple\n          accept=\"${this.accept}\"\n          @change=\"${this.handleUploadFileChanged}\"\n        />\n        <label class=\"actions-left upload-label\" for=\"upload-files\">\n          <temba-icon\n            class=\"upload-icon\"\n            name=\"${Icon.attachment}\"\n            @click=\"${this.handleAddAttachments}\"\n            clickable\n          ></temba-icon>\n        </label>`;\n    }\n  }\n\n  private getCounter(): TemplateResult {\n    return html`<temba-charcount text=\"${this.currentChat}\"></temba-charcount>`;\n  }\n\n  private getButton(): TemplateResult {\n    return html` <temba-button\n      id=\"send-button\"\n      name=${this.buttonName}\n      @click=${this.handleSendClick}\n      ?disabled=${this.buttonDisabled}\n      @blur=${this.handleSendBlur}\n    ></temba-button>`;\n  }\n}\n"]}
+{"version":3,"file":"Compose.js","sourceRoot":"","sources":["../../../src/compose/Compose.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FormElement } from '../FormElement';\nimport { property } from 'lit/decorators.js';\nimport { Icon } from '../vectoricon';\nimport { CustomEventType } from '../interfaces';\nimport {\n  formatFileSize,\n  formatFileType,\n  getClasses,\n  postFormData,\n  truncate,\n  WebResponse,\n} from '../utils';\nimport { Completion } from '../completion/Completion';\nimport { VectorIcon } from '../vectoricon/VectorIcon';\nimport { Button } from '../button/Button';\n\nexport interface Attachment {\n  uuid: string;\n  content_type: string;\n  url: string;\n  filename: string;\n  size: number;\n  error: string;\n}\n\nexport const upload_endpoint = '/api/v2/media.json';\n\nexport class Compose extends FormElement {\n  static get styles() {\n    return css`\n      .container {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n        position: relative;\n\n        border-radius: var(--curvature-widget);\n        background: var(--color-widget-bg);\n        border: 1px solid var(--color-widget-border);\n        transition: all ease-in-out var(--transition-speed);\n        box-shadow: var(--widget-box-shadow);\n        caret-color: var(--input-caret);\n        padding: var(--temba-textinput-padding);\n      }\n      .container:focus-within {\n        border-color: var(--color-focus);\n        background: var(--color-widget-bg-focused);\n        box-shadow: var(--widget-box-shadow-focused);\n      }\n\n      .drop-mask {\n        opacity: 0;\n        pointer-events: none;\n        position: absolute;\n        z-index: 1;\n        height: 100%;\n        width: 100%;\n        bottom: 0;\n        right: 0;\n        background: rgba(210, 243, 184, 0.8);\n        border-radius: var(--curvature-widget);\n        margin: -0.5em;\n        padding: 0.5em;\n        transition: opacity ease-in-out var(--transition-speed);\n        display: flex;\n        align-items: center;\n        text-align: center;\n      }\n\n      .highlight .drop-mask {\n        opacity: 1;\n      }\n\n      .drop-mask > div {\n        margin: auto;\n        border-radius: var(--curvature-widget);\n        font-weight: 400;\n        color: rgba(0, 0, 0, 0.5);\n      }\n\n      .items {\n      }\n\n      temba-completion {\n        margin-left: 0.3em;\n        margin-top: 0.3em;\n        --color-widget-border: none;\n        --curvature-widget: none;\n        --widget-box-shadow: none;\n        --widget-box-shadow-focused: none;\n        --temba-textinput-padding: 0;\n      }\n\n      .attachments {\n        display: flex;\n        flex-direction: column;\n      }\n      .attachments-list {\n        display: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n      }\n      .attachment-item {\n        background: rgba(100, 100, 100, 0.1);\n        border-radius: 2px;\n        margin: 0.3em;\n        display: flex;\n        color: var(--color-widget-text);\n      }\n      .attachment-item.error {\n        background: rgba(250, 0, 0, 0.1);\n        color: rgba(250, 0, 0, 0.75);\n      }\n      .remove-item {\n        cursor: pointer !important;\n        padding: 3px 6px;\n        border-right: 1px solid rgba(100, 100, 100, 0.2);\n        margin-top: 1px;\n        background: rgba(100, 100, 100, 0.05);\n      }\n\n      .remove-item:hover {\n        background: rgba(100, 100, 100, 0.1);\n      }\n\n      .remove-item.error:hover {\n        background: rgba(250, 0, 0, 0.1);\n      }\n\n      .remove-item.error {\n        background: rgba(250, 0, 0, 0.05);\n        color: rgba(250, 0, 0, 0.75);\n      }\n      .attachment-name {\n        align-self: center;\n        font-size: 12px;\n        padding: 2px 8px;\n      }\n\n      .actions {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-left: 0.25em;\n        padding: 0.2em;\n      }\n\n      #upload-files {\n        display: none;\n      }\n      .upload-label {\n        display: flex;\n        align-items: center;\n      }\n      .upload-icon {\n        color: rgb(102, 102, 102);\n      }\n      .actions-right {\n        display: flex;\n        align-items: center;\n      }\n      temba-charcount {\n        margin-right: 5px;\n        overflow: hidden;\n        --temba-charcount-counts-margin-top: 0px;\n        --temba-charcount-summary-margin-top: 0px;\n        --temba-charcount-summary-position: fixed;\n        --temba-charcount-summary-right: 105px;\n        --temba-charcount-summary-bottom: 105px;\n      }\n      temba-button {\n        --button-y: 1px;\n        --button-x: 12px;\n      }\n      .send-error {\n        color: rgba(250, 0, 0, 0.75);\n        font-size: var(--help-text-size);\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  chatbox: boolean;\n\n  @property({ type: Boolean })\n  attachments: boolean;\n\n  @property({ type: Boolean })\n  counter: boolean;\n\n  @property({ type: Boolean })\n  pendingDrop: boolean;\n\n  @property({ type: Boolean })\n  button: boolean;\n\n  @property({ type: String, attribute: false })\n  currentChat = '';\n\n  @property({ type: String })\n  accept = ''; //e.g. \".xls,.xlsx\"\n\n  @property({ type: String, attribute: false })\n  endpoint = upload_endpoint;\n\n  @property({ type: Boolean, attribute: false })\n  uploading: boolean;\n\n  // values = valid and uploaded attachments\n  // errorValues = invalid and not-uploaded attachments\n  @property({ type: Array, attribute: false })\n  errorValues: Attachment[] = [];\n\n  @property({ type: String })\n  buttonName = 'Send';\n\n  @property({ type: Boolean, attribute: false })\n  buttonDisabled = true;\n\n  @property({ type: String, attribute: false })\n  buttonError = '';\n\n  public constructor() {\n    super();\n  }\n\n  public updated(changes: Map<string, any>): void {\n    super.updated(changes);\n\n    if (changes.has('currentChat') || changes.has('values')) {\n      this.buttonError = '';\n      this.toggleButton();\n    }\n  }\n\n  firstUpdated(): void {\n    this.setFocusOnChatbox();\n  }\n\n  setFocusOnChatbox(): void {\n    if (this.chatbox) {\n      const completion = this.shadowRoot.querySelector(\n        'temba-completion'\n      ) as Completion;\n      if (completion) {\n        //simulate a click inside the completion to set focus\n        window.setTimeout(() => {\n          completion.click();\n        }, 0);\n      }\n    }\n  }\n\n  public reset(): void {\n    this.currentChat = '';\n    this.values = [];\n    this.errorValues = [];\n    this.buttonError = '';\n  }\n\n  private handleChatboxChange(evt: Event) {\n    const completion = evt.target as Completion;\n    const textInput = completion.textInputElement;\n    this.currentChat = textInput.value;\n    this.preventDefaults(evt);\n  }\n\n  private handleDragEnter(evt: DragEvent): void {\n    this.highlight(evt);\n  }\n\n  private handleDragOver(evt: DragEvent): void {\n    this.highlight(evt);\n  }\n\n  private handleDragLeave(evt: DragEvent): void {\n    this.unhighlight(evt);\n  }\n\n  private handleDrop(evt: DragEvent): void {\n    this.unhighlight(evt);\n\n    const dt = evt.dataTransfer;\n    if (dt) {\n      const files = dt.files;\n      this.uploadFiles(files);\n    }\n  }\n\n  private preventDefaults(evt: Event): void {\n    evt.preventDefault();\n    evt.stopPropagation();\n  }\n\n  private highlight(evt: DragEvent): void {\n    this.pendingDrop = true;\n    this.preventDefaults(evt);\n  }\n\n  private unhighlight(evt: DragEvent): void {\n    this.pendingDrop = false;\n    this.preventDefaults(evt);\n  }\n\n  private handleAddAttachments(): void {\n    this.dispatchEvent(new Event('change'));\n  }\n\n  private handleUploadFileChanged(evt: Event): void {\n    const target = evt.target as HTMLInputElement;\n    const files = target.files;\n    this.uploadFiles(files);\n  }\n\n  public uploadFiles(files: FileList): void {\n    let filesToUpload = [];\n    if (this.values && this.values.length > 0) {\n      //remove duplicate files that have already been uploaded\n      filesToUpload = [...files].filter(file => {\n        const index = this.values.findIndex(\n          value => value.name === file.name && value.size === file.size\n        );\n        if (index === -1) {\n          return file;\n        }\n      });\n    } else {\n      filesToUpload = [...files];\n    }\n    filesToUpload.map(fileToUpload => {\n      this.uploadFile(fileToUpload);\n    });\n  }\n\n  private uploadFile(file: File): void {\n    this.uploading = true;\n\n    const url = this.endpoint;\n    const payload = new FormData();\n    payload.append('file', file);\n    postFormData(url, payload)\n      .then((response: WebResponse) => {\n        const attachment = response.json as Attachment;\n        if (attachment) {\n          this.addValue(attachment);\n          this.fireCustomEvent(CustomEventType.AttachmentAdded, attachment);\n        }\n      })\n      .catch((error: WebResponse) => {\n        let fileError = '';\n        if (error.status === 400) {\n          fileError = error.json.file[0];\n        } else {\n          fileError = 'Server failure';\n        }\n        console.error(fileError);\n        this.addErrorValue(file, fileError);\n      })\n      .finally(() => {\n        this.uploading = false;\n      });\n  }\n\n  private addErrorValue(file: File, error: string) {\n    const errorValue = {\n      uuid: Math.random().toString(36).slice(2, 6),\n      content_type: file.type,\n      filename: file.name,\n      url: file.name,\n      size: file.size,\n      error: error,\n    } as Attachment;\n    this.errorValues.push(errorValue);\n    this.requestUpdate('errorValues');\n  }\n  public removeErrorValue(valueToRemove: any) {\n    this.errorValues = this.errorValues.filter(\n      (value: any) => value !== valueToRemove\n    );\n    this.requestUpdate('errorValues');\n  }\n\n  private handleRemoveAttachment(evt: Event): void {\n    const target = evt.target as HTMLDivElement;\n\n    const attachment = this.values.find(({ uuid }) => uuid === target.id);\n    if (attachment) {\n      this.removeValue(attachment);\n      this.fireCustomEvent(CustomEventType.AttachmentRemoved, attachment);\n    }\n    const errorAttachment = this.errorValues.find(\n      ({ uuid }) => uuid === target.id\n    );\n    if (errorAttachment) {\n      this.removeErrorValue(errorAttachment);\n      this.fireCustomEvent(CustomEventType.AttachmentRemoved, attachment);\n    }\n  }\n\n  public toggleButton() {\n    if (this.button) {\n      const chatboxEmpty = this.currentChat.trim().length === 0;\n      const attachmentsEmpty = this.values.length === 0;\n      if (this.chatbox && this.attachments) {\n        this.buttonDisabled = chatboxEmpty && attachmentsEmpty;\n      } else if (this.chatbox) {\n        this.buttonDisabled = chatboxEmpty;\n      } else if (this.attachments) {\n        this.buttonDisabled = attachmentsEmpty;\n      } else {\n        this.buttonDisabled = true;\n      }\n    }\n  }\n\n  private handleSendClick() {\n    this.handleSend();\n  }\n\n  private handleSendEnter(evt: KeyboardEvent) {\n    if (evt.key === 'Enter' && !evt.shiftKey) {\n      const chat = evt.target as Completion;\n      if (!chat.hasVisibleOptions()) {\n        this.handleSend();\n      }\n      this.preventDefaults(evt);\n    }\n  }\n\n  private handleSend() {\n    if (!this.buttonDisabled) {\n      this.buttonDisabled = true;\n      const name = this.buttonName;\n      this.fireCustomEvent(CustomEventType.ButtonClicked, { name });\n\n      //after send, return focus to chatbox\n      this.setFocusOnChatbox();\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div\n        class=${getClasses({ container: true, highlight: this.pendingDrop })}\n        @dragenter=\"${this.handleDragEnter}\"\n        @dragover=\"${this.handleDragOver}\"\n        @dragleave=\"${this.handleDragLeave}\"\n        @drop=\"${this.handleDrop}\"\n      >\n        <div class=\"drop-mask\"><div>Upload Attachment</div></div>\n\n        ${this.chatbox\n          ? html`<div class=\"items chatbox\">${this.getChatbox()}</div>`\n          : null}\n        ${this.attachments\n          ? html`<div class=\"items attachments\">${this.getAttachments()}</div>`\n          : null}\n        <div class=\"items actions\">${this.getActions()}</div>\n      </div>\n    `;\n  }\n\n  private getChatbox(): TemplateResult {\n    return html` <temba-completion\n      value=${this.currentChat}\n      gsm\n      textarea\n      autogrow\n      @change=${this.handleChatboxChange}\n      @keydown=${this.handleSendEnter}\n      placeholder=\"Write something here\"\n    >\n    </temba-completion>`;\n  }\n\n  private getAttachments(): TemplateResult {\n    return html`\n      ${(this.values && this.values.length > 0) ||\n      (this.errorValues && this.errorValues.length > 0)\n        ? html` <div class=\"attachments-list\">\n            ${this.values.map(attachment => {\n              return html` <div class=\"attachment-item\">\n                <div\n                  class=\"remove-item\"\n                  @click=\"${this.handleRemoveAttachment}\"\n                >\n                  <temba-icon\n                    id=\"${attachment.uuid}\"\n                    name=\"${Icon.delete_small}\"\n                  ></temba-icon>\n                </div>\n                <div class=\"attachment-name\">\n                  <span\n                    title=\"${attachment.filename} (${formatFileSize(\n                      attachment.size,\n                      2\n                    )}) ${attachment.content_type}\"\n                    >${truncate(attachment.filename, 25)}\n                    (${formatFileSize(attachment.size, 0)})\n                    ${formatFileType(attachment.content_type)}</span\n                  >\n                </div>\n              </div>`;\n            })}\n            ${this.errorValues.map(errorAttachment => {\n              return html` <div class=\"attachment-item error\">\n                <div\n                  class=\"remove-item error\"\n                  @click=\"${this.handleRemoveAttachment}\"\n                >\n                  <temba-icon\n                    id=\"${errorAttachment.uuid}\"\n                    name=\"${Icon.delete_small}\"\n                  ></temba-icon>\n                </div>\n                <div class=\"attachment-name\">\n                  <span\n                    title=\"${errorAttachment.filename} (${formatFileSize(\n                      0,\n                      0\n                    )}) - Attachment failed - ${errorAttachment.error}\"\n                    >${truncate(errorAttachment.filename, 25)}\n                    (${formatFileSize(0, 0)}) - Attachment failed</span\n                  >\n                </div>\n              </div>`;\n            })}\n          </div>`\n        : null}\n    `;\n  }\n\n  private getActions(): TemplateResult {\n    return html`\n      <div class=\"actions-left\">\n        ${this.attachments ? this.getUploader() : null}\n      </div>\n      <div class=\"actions-center\"></div>\n      <div class=\"actions-right\">\n        ${this.buttonError\n          ? html`<div class=\"send-error\">${this.buttonError}</div>`\n          : null}\n        ${this.counter ? this.getCounter() : null}\n        ${this.button ? this.getButton() : null}\n      </div>\n    `;\n  }\n\n  private getUploader(): TemplateResult {\n    if (this.uploading) {\n      return html`<temba-loading units=\"3\" size=\"12\"></temba-loading>`;\n    } else {\n      return html` <input\n          type=\"file\"\n          id=\"upload-files\"\n          multiple\n          accept=\"${this.accept}\"\n          @change=\"${this.handleUploadFileChanged}\"\n        />\n        <label class=\"actions-left upload-label\" for=\"upload-files\">\n          <temba-icon\n            class=\"upload-icon\"\n            name=\"${Icon.attachment}\"\n            @click=\"${this.handleAddAttachments}\"\n            clickable\n          ></temba-icon>\n        </label>`;\n    }\n  }\n\n  private getCounter(): TemplateResult {\n    return html`<temba-charcount text=\"${this.currentChat}\"></temba-charcount>`;\n  }\n\n  private getButton(): TemplateResult {\n    return html` <temba-button\n      id=\"send-button\"\n      name=${this.buttonName}\n      @click=${this.handleSendClick}\n      ?disabled=${this.buttonDisabled}\n    ></temba-button>`;\n  }\n}\n"]}

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

@@ -225,7 +225,7 @@ export class ContactChat extends ContactStoreElement {
         const buttonName = evt.detail.name;
         if (buttonName === 'Send') {
             const payload = {
-                contacts: [this.currentContact.uuid],
+                contact: this.currentContact.uuid,
             };
             const compose = evt.currentTarget;
             if (compose) {
@@ -245,7 +245,7 @@ export class ContactChat extends ContactStoreElement {
                 payload['ticket'] = this.currentTicket.uuid;
             }
             const genericError = buttonName + ' failed, please try again.';
-            postJSON(`/api/v2/broadcasts.json`, payload)
+            postJSON(`/api/v2/messages.json`, payload)
                 .then(response => {
                 if (response.status < 400) {
                     compose.reset();

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

@@ -1 +1 @@
-{"version":3,"file":"ContactChat.js","sourceRoot":"","sources":["../../../src/contacts/ContactChat.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAW,eAAe,EAAU,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAG9E,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGrC,MAAM,eAAe,GAAG,KAAK,CAAC;AAE9B,MAAM,OAAO,WAAY,SAAQ,mBAAmB;IAC3C,MAAM,KAAK,MAAM;QACtB,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiJT,CAAC;IACJ,CAAC;IAmCD;QACE,KAAK,EAAE,CAAC;QA9BV,qBAAgB,GAAG,uBAAuB,CAAC;QAG3C,gBAAW,GAAG,EAAE,CAAC;QAGjB,gBAAW,GAAG,EAAE,CAAC;QAGjB,gBAAW,GAAG,IAAI,CAAC;QAGnB,YAAO,GAAG,KAAK,CAAC;QAGhB,YAAO,GAAG,KAAK,CAAC;QAGhB,kBAAa,GAAW,IAAI,CAAC;QAG7B,mBAAc,GAAY,IAAI,CAAC;QAG/B,UAAK,GAAG,EAAE,CAAC;QAUX,oBAAe,GAAG,IAAI,CAAC;QAHrB,IAAI,CAAC,WAAW,GAAG,gBAAgB,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC;IACvE,CAAC;IAIM,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;gBACtC,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE;oBACtD,OAAO;iBACR;gBACD,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,CAAC,EAAE,eAAe,CAAC,CAAC;SACrB;IACH,CAAC;IAEM,oBAAoB;QACzB,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,aAAa,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SACrC;IACH,CAAC;IAEM,iBAAiB;QACtB,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAClC,uBAAuB,CACN,CAAC;IACtB,CAAC;IAEM,OAAO,CAAC,cAAc,GAAG,KAAK;QACnC,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAChD,IAAI,cAAc,EAAE;YAClB,IAAI,cAAc,EAAE;gBAClB,cAAc,CAAC,cAAc,EAAE,CAAC;aACjC;YACD,cAAc,CAAC,OAAO,EAAE,CAAC;SAC1B;IACH,CAAC;IAEM,OAAO,CAAC,iBAAmC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,yCAAyC;QACzC,IACE,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC;YAC7B,iBAAiB,CAAC,GAAG,CAAC,gBAAgB,CAAC,EACvC;YACA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC;SACjC;IACH,CAAC;IAEO,kBAAkB;QACxB,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;QACrC,QAAQ,CAAC,6BAA6B,EAAE;YACtC,OAAO,EAAE,CAAC,IAAI,CAAC;YACf,MAAM,EAAE,QAAQ;SACjB,CAAC;aACC,IAAI,CAAC,GAAG,EAAE;YACT,IAAI,CAAC,OAAO,EAAE,CAAC;YACf,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,cAAc,EAAE;gBACnD,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE;aACjC,CAAC,CAAC;QACL,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,QAAa,EAAE,EAAE;YACvB,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAC1B,CAAC,CAAC,CAAC;IACP,CAAC;IAEO,UAAU,CAAC,GAAgB;QACjC,MAAM,UAAU,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC;QACnC,IAAI,UAAU,KAAK,MAAM,EAAE;YACzB,MAAM,OAAO,GAAG;gBACd,QAAQ,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;aACrC,CAAC;YACF,MAAM,OAAO,GAAG,GAAG,CAAC,aAAwB,CAAC;YAC7C,IAAI,OAAO,EAAE;gBACX,MAAM,IAAI,GAAG,OAAO,CAAC,WAAW,CAAC;gBACjC,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;oBACnB,OAAO,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;iBACxB;gBACD,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;oBAClD,MAAM,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC;oBAC7C,OAAO,YAAY,GAAG,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC;gBAC7C,CAAC,CAAC,CAAC;gBACH,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;oBAC1B,OAAO,CAAC,aAAa,CAAC,GAAG,WAAW,CAAC;iBACtC;aACF;YACD,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;aAC7C;YAED,MAAM,YAAY,GAAG,UAAU,GAAG,4BAA4B,CAAC;YAE/D,QAAQ,CAAC,yBAAyB,EAAE,OAAO,CAAC;iBACzC,IAAI,CAAC,QAAQ,CAAC,EAAE;gBACf,IAAI,QAAQ,CAAC,MAAM,GAAG,GAAG,EAAE;oBACzB,OAAO,CAAC,KAAK,EAAE,CAAC;oBAChB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;iBACpB;qBAAM,IAAI,QAAQ,CAAC,MAAM,GAAG,GAAG,EAAE;oBAChC,IACE,QAAQ,CAAC,IAAI,CAAC,IAAI;wBAClB,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG;wBACtB,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,EACjC;wBACA,OAAO,CAAC,WAAW;4BACjB,6CAA6C,CAAC;qBACjD;yBAAM,IACL,QAAQ,CAAC,IAAI,CAAC,WAAW;wBACzB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG;wBAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,EACxC;wBACA,OAAO,CAAC,WAAW;4BACjB,8CAA8C,CAAC;qBAClD;yBAAM;wBACL,OAAO,CAAC,WAAW,GAAG,YAAY,CAAC;qBACpC;iBACF;qBAAM;oBACL,OAAO,CAAC,WAAW,GAAG,YAAY,CAAC;iBACpC;YACH,CAAC,CAAC;iBACD,KAAK,CAAC,KAAK,CAAC,EAAE;gBACb,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;gBACrB,OAAO,CAAC,WAAW,GAAG,YAAY,CAAC;YACrC,CAAC,CAAC,CAAC;SACN;IACH,CAAC;IAEO,oBAAoB;QAC1B,IAAI,CAAC,OAAO,EAAE,CAAC;QACf,IAAI,CAAC,iBAAiB,EAAE,CAAC,4BAA4B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACpE,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;QACrC,SAAS,CAAC,WAAW,CAAC,mBAAmB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAC/D,CAAC;IAEM,MAAM;QACX,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc;YACxC,CAAC,CAAC,IAAI,CAAC,sBAAsB,EAAE;YAC/B,CAAC,CAAC,IAAI,CAAC;QACT,MAAM,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QAEpE,MAAM,wBAAwB,GAAG,IAAI,CAAA;;0BAEf,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;;kCAEtB,cAAc,IAAI,OAAO;WAChD,CAAC;QAER,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc;gBACxC,CAAC,CAAC,IAAI,CAAC,sBAAsB,EAAE;gBAC/B,CAAC,CAAC,IAAI,CAAC;YACT,MAAM,oBAAoB,GAAG,IAAI,CAAC,cAAc;gBAC9C,CAAC,CAAC,IAAI,CAAC,wBAAwB,EAAE;gBACjC,CAAC,CAAC,IAAI,CAAC;YACT,MAAM,+BAA+B,GACnC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,aAAa;gBACvC,CAAC,CAAC,IAAI,CAAC,kCAAkC,EAAE;gBAC3C,CAAC,CAAC,IAAI,CAAC;YACX,MAAM,kCAAkC,GAAG,IAAI,CAAC,aAAa;gBAC3D,CAAC,CAAC,IAAI,CAAC,qCAAqC,EAAE;gBAC9C,CAAC,CAAC,IAAI,CAAC;YAET,MAAM,wBAAwB,GAAG,IAAI,CAAA,GAAG,cAAc;8BAC9B,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;YAClD,oBAAoB,IAAI,+BAA+B;;UAEzD,kCAAkC,EAAE,CAAC;YAEzC,OAAO,IAAI,CAAA,GAAG,wBAAwB,IAAI,wBAAwB,EAAE,CAAC;SACtE;QAED,OAAO,IAAI,CAAA,GAAG,wBAAwB,EAAE,CAAC;IAC3C,CAAC;IAEO,sBAAsB;QAC5B,OAAO,IAAI,CAAA;cACD,IAAI,CAAC,cAAc,CAAC,IAAI;iBACrB,IAAI,CAAC,cAAc;gBACpB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;iBAClD,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;eAC1D,IAAI,CAAC,KAAK;;6BAEI,CAAC;IAC5B,CAAC;IAEO,eAAe;QACrB,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,QAAQ,EAAE;gBAClE,uDAAuD;gBACvD,OAAO,IAAI,CAAC;aACb;iBAAM;gBACL,IAAI,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE;oBAChC,wDAAwD;oBACxD,OAAO,IAAI,CAAA;;;;uBAIE,IAAI,CAAC,kBAAkB;;iBAE7B,CAAC;iBACT;qBAAM;oBACL,iDAAiD;oBACjD,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;iBAC1B;aACF;SACF;QAED,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,QAAQ,EAAE;YAClE,uDAAuD;YACvD,OAAO,IAAI,CAAC;SACb;aAAM;YACL,6BAA6B;YAC7B,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;SAC1B;IACH,CAAC;IAEO,UAAU;QAChB,OAAO,IAAI,CAAA,wBAAwB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;;;;;;gCAMjC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;;WAG/C,CAAC;IACV,CAAC;IAEO,sBAAsB;QAC5B,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;iBAE9B,IAAI,CAAC,WAAW;gBACjB,IAAI,CAAC,aAAa;iBACjB,IAAI,CAAC,cAAc;;6BAEP,CAAC;IAC5B,CAAC;IAEO,wBAAwB;QAC9B,OAAO,IAAI,CAAA;;cAED,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc;;;;;;gBAMhD,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa;kBACnD,IAAI,CAAC,kBAAkB;;;;iBAIxB,CAAC;IAChB,CAAC;IAEO,kCAAkC;QACxC,OAAO,IAAI,CAAA;;;;;;;kBAOG,IAAI,CAAC,KAAK;oBACR,GAAG,EAAE;YACb,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,cAAc,CAC1C,eAAe,CACP,CAAC;YACX,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;QACpB,CAAC;;;;;;;kBAOO,IAAI,CAAC,QAAQ;oBACX,GAAG,EAAE;YACb,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,aAAa,CAAU,CAAC;YACpE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACnB,CAAC;;;mBAGQ,CAAC;IAClB,CAAC;IAEO,qCAAqC;QAC3C,OAAO,IAAI,CAAA;;;2BAGY,IAAI,CAAC,OAAO;iCACN,IAAI,CAAC,aAAa,CAAC,IAAI;;;;;;2BAM7B,IAAI,CAAC,oBAAoB;mCACjB,IAAI,CAAC,aAAa,CAAC,IAAI;;qBAErC,CAAC;IACpB,CAAC;CACF;AAvVC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;+CAC7B;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDACgB;AAG3C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACE;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACI;AAG/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAChB","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Contact, CustomEventType, Ticket } from '../interfaces';\nimport { COOKIE_KEYS, getCookieBoolean, postJSON, setCookie } from '../utils';\nimport { ContactHistory } from './ContactHistory';\nimport { Modax } from '../dialog/Modax';\nimport { ContactStoreElement } from './ContactStoreElement';\nimport { Icon } from '../vectoricon';\nimport { Compose } from '../compose/Compose';\n\nconst DEFAULT_REFRESH = 10000;\n\nexport class ContactChat extends ContactStoreElement {\n  public static get styles() {\n    return css`\n      .left-pane {\n        box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0);\n        transition: box-shadow 600ms linear;\n      }\n\n      .left-pane.open {\n        z-index: 1000;\n      }\n\n      :host {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: row;\n        min-height: 0;\n        border-radius: var(--curvature);\n      }\n\n      .chat-wrapper {\n        display: flex;\n        flex-grow: 1;\n        flex-direction: column;\n        overflow: hidden;\n        min-height: 0;\n      }\n\n      temba-contact-history {\n        border-bottom: 3px solid #e1e1e1;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n      }\n\n      .chatbox {\n        background: rgb(242, 242, 242);\n        padding: 1em;\n        display: flex;\n        flex-direction: column;\n        z-index: 3;\n        border-bottom-left-radius: var(--curvature);\n        border-bottom-right-radius: var(--curvature);\n      }\n\n      .chatbox.full {\n        border-bottom-right-radius: 0 !important;\n      }\n\n      .closed-footer {\n        padding: 1em;\n        background: #f2f2f2;\n        border-top: 3px solid #e1e1e1;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n      }\n\n      a {\n        color: var(--color-link-primary);\n      }\n\n      a:hover {\n        text-decoration: underline;\n        color: var(--color-link-primary-hover);\n      }\n\n      temba-button#reopen-button {\n        --button-y: 1px;\n        --button-x: 12px;\n      }\n\n      .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      temba-completion {\n        --widget-box-shadow: none;\n        --color-widget-border: transparent;\n        --widget-box-shadow-focused: none;\n        --color-focus: transparent;\n        --color-widget-bg-focused: transparent;\n      }\n    `;\n  }\n\n  @property({ type: String, attribute: 'ticket' })\n  ticketUUID: string;\n\n  @property({ type: String })\n  contactsEndpoint = '/api/v2/contacts.json';\n\n  @property({ type: String })\n  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  // http promise to monitor for completeness\n  public httpComplete: Promise<void>;\n\n  constructor() {\n    super();\n    this.showDetails = getCookieBoolean(COOKIE_KEYS.TICKET_SHOW_DETAILS);\n  }\n\n  refreshInterval = null;\n\n  public connectedCallback() {\n    super.connectedCallback();\n    if (this.monitor) {\n      this.refreshInterval = setInterval(() => {\n        if (this.currentTicket && this.currentTicket.closed_on) {\n          return;\n        }\n        this.refresh();\n      }, DEFAULT_REFRESH);\n    }\n  }\n\n  public disconnectedCallback() {\n    if (this.refreshInterval) {\n      clearInterval(this.refreshInterval);\n    }\n  }\n\n  public getContactHistory(): ContactHistory {\n    return this.shadowRoot.querySelector(\n      'temba-contact-history'\n    ) as ContactHistory;\n  }\n\n  public refresh(scrollToBottom = false): void {\n    const contactHistory = this.getContactHistory();\n    if (contactHistory) {\n      if (scrollToBottom) {\n        contactHistory.scrollToBottom();\n      }\n      contactHistory.refresh();\n    }\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    // if we don't have an endpoint infer one\n    if (\n      changedProperties.has('data') ||\n      changedProperties.has('currentContact')\n    ) {\n      this.currentContact = this.data;\n    }\n  }\n\n  private handleTicketReopen() {\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(evt: CustomEvent) {\n    const buttonName = evt.detail.name;\n    if (buttonName === 'Send') {\n      const payload = {\n        contacts: [this.currentContact.uuid],\n      };\n      const compose = evt.currentTarget as Compose;\n      if (compose) {\n        const text = compose.currentChat;\n        if (text.length > 0) {\n          payload['text'] = text;\n        }\n        const attachments = compose.values.map(attachment => {\n          const content_type = attachment.content_type;\n          return content_type + ':' + attachment.url;\n        });\n        if (attachments.length > 0) {\n          payload['attachments'] = attachments;\n        }\n      }\n      if (this.currentTicket) {\n        payload['ticket'] = this.currentTicket.uuid;\n      }\n\n      const genericError = buttonName + ' failed, please try again.';\n\n      postJSON(`/api/v2/broadcasts.json`, payload)\n        .then(response => {\n          if (response.status < 400) {\n            compose.reset();\n            this.refresh(true);\n          } else if (response.status < 500) {\n            if (\n              response.json.text &&\n              response.json.text.eng &&\n              response.json.text.eng.length > 0\n            ) {\n              compose.buttonError =\n                'Text must have no more than 640 characters.';\n            } else if (\n              response.json.attachments &&\n              response.json.attachments.eng &&\n              response.json.attachments.eng.length > 0\n            ) {\n              compose.buttonError =\n                'Attachments must have no more than 10 files.';\n            } else {\n              compose.buttonError = genericError;\n            }\n          } else {\n            compose.buttonError = genericError;\n          }\n        })\n        .catch(error => {\n          console.error(error);\n          compose.buttonError = genericError;\n        });\n    }\n  }\n\n  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    const contactHistory = this.currentContact\n      ? this.getTembaContactHistory()\n      : null;\n    const chatbox = this.currentContact ? this.getTembaChatbox() : null;\n\n    const contactHistoryAndChatbox = html`<div\n      style=\"flex-grow: 1; margin-right: 0em; display:flex; flex-direction:row; min-height: 0;\"\n      class=\"left-pane  ${this.showDetails ? 'open' : ''}\"\n    >\n      <div class=\"chat-wrapper\">${contactHistory} ${chatbox}</div>\n    </div>`;\n\n    if (this.toolbar) {\n      const contactDetails = this.currentContact\n        ? this.getTembaContactDetails()\n        : null;\n      const toggleContactDetails = this.currentContact\n        ? this.getToggleDetailsTembaTip()\n        : null;\n      const addNoteAndAssignTicketTembaTips =\n        this.currentContact && this.currentTicket\n          ? this.getAddNoteAndAssignTicketTembaTips()\n          : null;\n      const addNoteAndAssignTicketTembaModaxes = this.currentTicket\n        ? this.getAddNoteAndAssignTicketTembaModaxes()\n        : null;\n\n      const contactDetailsAndActions = html`${contactDetails}\n        <div class=\"toolbar ${this.showDetails ? '' : 'closed'}\">\n          ${toggleContactDetails} ${addNoteAndAssignTicketTembaTips}\n        </div>\n        ${addNoteAndAssignTicketTembaModaxes}`;\n\n      return html`${contactHistoryAndChatbox} ${contactDetailsAndActions}`;\n    }\n\n    return html`${contactHistoryAndChatbox}`;\n  }\n\n  private getTembaContactHistory(): TemplateResult {\n    return html` <temba-contact-history\n      .uuid=${this.currentContact.uuid}\n      .contact=${this.currentContact}\n      .ticket=${this.currentTicket ? this.currentTicket.uuid : null}\n      .endDate=${this.currentTicket ? this.currentTicket.closed_on : null}\n      .agent=${this.agent}\n    >\n    </temba-contact-history>`;\n  }\n\n  private getTembaChatbox(): TemplateResult {\n    if (this.currentTicket) {\n      if (this.currentContact && this.currentContact.status !== 'active') {\n        //no chatbox for archived, blocked, or stopped contacts\n        return null;\n      } else {\n        if (this.currentTicket.closed_on) {\n          //reopen button for active contacts with a closed ticket\n          return html` <div class=\"closed-footer\">\n            <temba-button\n              id=\"reopen-button\"\n              name=\"Reopen\"\n              @click=${this.handleTicketReopen}\n            ></temba-button>\n          </div>`;\n        } else {\n          //chatbox for active contacts with an open ticket\n          return this.getChatbox();\n        }\n      }\n    }\n\n    if (this.currentContact && this.currentContact.status !== 'active') {\n      //no chatbox for archived, blocked, or stopped contacts\n      return null;\n    } else {\n      //chatbox for active contacts\n      return this.getChatbox();\n    }\n  }\n\n  private getChatbox(): TemplateResult {\n    return html` <div class=\"chatbox ${this.toolbar ? 'full' : ''}\">\n      <temba-compose\n        chatbox\n        attachments\n        counter\n        button\n        @temba-button-clicked=${this.handleSend.bind(this)}\n      >\n      </temba-compose>\n    </div>`;\n  }\n\n  private getTembaContactDetails(): TemplateResult {\n    return 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    >\n    </temba-contact-details>`;\n  }\n\n  private getToggleDetailsTembaTip(): TemplateResult {\n    return html` <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 ? Icon.menu_collapse : 'layout-left'}\"\n        @click=\"${this.handleDetailSlider}\"\n        clickable\n        animatechange=\"spin\"\n      ></temba-icon>\n    </temba-tip>`;\n  }\n\n  private getAddNoteAndAssignTicketTembaTips(): TemplateResult {\n    return html` <temba-tip\n        style=\"margin-top:5px\"\n        text=\"Assign\"\n        position=\"left\"\n      >\n        <temba-icon\n          id=\"assign-button\"\n          name=\"${Icon.users}\"\n          @click=\"${() => {\n            const modax = this.shadowRoot.getElementById(\n              'assign-dialog'\n            ) as Modax;\n            modax.open = true;\n          }}\"\n          clickable\n        ></temba-icon>\n      </temba-tip>\n      <temba-tip style=\"margin-top:5px\" text=\"Add Note\" position=\"left\">\n        <temba-icon\n          id=\"add-note-button\"\n          name=\"${Icon.add_note}\"\n          @click=\"${() => {\n            const note = this.shadowRoot.getElementById('note-dialog') as Modax;\n            note.open = true;\n          }}\"\n          clickable\n        ></temba-icon>\n      </temba-tip>`;\n  }\n\n  private getAddNoteAndAssignTicketTembaModaxes(): TemplateResult {\n    return html` <temba-modax\n        header=\"Add Note\"\n        id=\"note-dialog\"\n        @temba-submitted=${this.refresh}\n        endpoint=\"/ticket/note/${this.currentTicket.uuid}/\"\n      >\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      >\n      </temba-modax>`;\n  }\n}\n"]}
+{"version":3,"file":"ContactChat.js","sourceRoot":"","sources":["../../../src/contacts/ContactChat.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Contact, CustomEventType, Ticket } from '../interfaces';\nimport { COOKIE_KEYS, getCookieBoolean, postJSON, setCookie } from '../utils';\nimport { ContactHistory } from './ContactHistory';\nimport { Modax } from '../dialog/Modax';\nimport { ContactStoreElement } from './ContactStoreElement';\nimport { Icon } from '../vectoricon';\nimport { Compose } from '../compose/Compose';\n\nconst DEFAULT_REFRESH = 10000;\n\nexport class ContactChat extends ContactStoreElement {\n  public static get styles() {\n    return css`\n      .left-pane {\n        box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0);\n        transition: box-shadow 600ms linear;\n      }\n\n      .left-pane.open {\n        z-index: 1000;\n      }\n\n      :host {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: row;\n        min-height: 0;\n        border-radius: var(--curvature);\n      }\n\n      .chat-wrapper {\n        display: flex;\n        flex-grow: 1;\n        flex-direction: column;\n        overflow: hidden;\n        min-height: 0;\n      }\n\n      temba-contact-history {\n        border-bottom: 3px solid #e1e1e1;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n      }\n\n      .chatbox {\n        background: rgb(242, 242, 242);\n        padding: 1em;\n        display: flex;\n        flex-direction: column;\n        z-index: 3;\n        border-bottom-left-radius: var(--curvature);\n        border-bottom-right-radius: var(--curvature);\n      }\n\n      .chatbox.full {\n        border-bottom-right-radius: 0 !important;\n      }\n\n      .closed-footer {\n        padding: 1em;\n        background: #f2f2f2;\n        border-top: 3px solid #e1e1e1;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n      }\n\n      a {\n        color: var(--color-link-primary);\n      }\n\n      a:hover {\n        text-decoration: underline;\n        color: var(--color-link-primary-hover);\n      }\n\n      temba-button#reopen-button {\n        --button-y: 1px;\n        --button-x: 12px;\n      }\n\n      .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      temba-completion {\n        --widget-box-shadow: none;\n        --color-widget-border: transparent;\n        --widget-box-shadow-focused: none;\n        --color-focus: transparent;\n        --color-widget-bg-focused: transparent;\n      }\n    `;\n  }\n\n  @property({ type: String, attribute: 'ticket' })\n  ticketUUID: string;\n\n  @property({ type: String })\n  contactsEndpoint = '/api/v2/contacts.json';\n\n  @property({ type: String })\n  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  // http promise to monitor for completeness\n  public httpComplete: Promise<void>;\n\n  constructor() {\n    super();\n    this.showDetails = getCookieBoolean(COOKIE_KEYS.TICKET_SHOW_DETAILS);\n  }\n\n  refreshInterval = null;\n\n  public connectedCallback() {\n    super.connectedCallback();\n    if (this.monitor) {\n      this.refreshInterval = setInterval(() => {\n        if (this.currentTicket && this.currentTicket.closed_on) {\n          return;\n        }\n        this.refresh();\n      }, DEFAULT_REFRESH);\n    }\n  }\n\n  public disconnectedCallback() {\n    if (this.refreshInterval) {\n      clearInterval(this.refreshInterval);\n    }\n  }\n\n  public getContactHistory(): ContactHistory {\n    return this.shadowRoot.querySelector(\n      'temba-contact-history'\n    ) as ContactHistory;\n  }\n\n  public refresh(scrollToBottom = false): void {\n    const contactHistory = this.getContactHistory();\n    if (contactHistory) {\n      if (scrollToBottom) {\n        contactHistory.scrollToBottom();\n      }\n      contactHistory.refresh();\n    }\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    // if we don't have an endpoint infer one\n    if (\n      changedProperties.has('data') ||\n      changedProperties.has('currentContact')\n    ) {\n      this.currentContact = this.data;\n    }\n  }\n\n  private handleTicketReopen() {\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(evt: CustomEvent) {\n    const buttonName = evt.detail.name;\n    if (buttonName === 'Send') {\n      const payload = {\n        contact: this.currentContact.uuid,\n      };\n      const compose = evt.currentTarget as Compose;\n      if (compose) {\n        const text = compose.currentChat;\n        if (text.length > 0) {\n          payload['text'] = text;\n        }\n        const attachments = compose.values.map(attachment => {\n          const content_type = attachment.content_type;\n          return content_type + ':' + attachment.url;\n        });\n        if (attachments.length > 0) {\n          payload['attachments'] = attachments;\n        }\n      }\n      if (this.currentTicket) {\n        payload['ticket'] = this.currentTicket.uuid;\n      }\n\n      const genericError = buttonName + ' failed, please try again.';\n\n      postJSON(`/api/v2/messages.json`, payload)\n        .then(response => {\n          if (response.status < 400) {\n            compose.reset();\n            this.refresh(true);\n          } else if (response.status < 500) {\n            if (\n              response.json.text &&\n              response.json.text.eng &&\n              response.json.text.eng.length > 0\n            ) {\n              compose.buttonError =\n                'Text must have no more than 640 characters.';\n            } else if (\n              response.json.attachments &&\n              response.json.attachments.eng &&\n              response.json.attachments.eng.length > 0\n            ) {\n              compose.buttonError =\n                'Attachments must have no more than 10 files.';\n            } else {\n              compose.buttonError = genericError;\n            }\n          } else {\n            compose.buttonError = genericError;\n          }\n        })\n        .catch(error => {\n          console.error(error);\n          compose.buttonError = genericError;\n        });\n    }\n  }\n\n  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    const contactHistory = this.currentContact\n      ? this.getTembaContactHistory()\n      : null;\n    const chatbox = this.currentContact ? this.getTembaChatbox() : null;\n\n    const contactHistoryAndChatbox = html`<div\n      style=\"flex-grow: 1; margin-right: 0em; display:flex; flex-direction:row; min-height: 0;\"\n      class=\"left-pane  ${this.showDetails ? 'open' : ''}\"\n    >\n      <div class=\"chat-wrapper\">${contactHistory} ${chatbox}</div>\n    </div>`;\n\n    if (this.toolbar) {\n      const contactDetails = this.currentContact\n        ? this.getTembaContactDetails()\n        : null;\n      const toggleContactDetails = this.currentContact\n        ? this.getToggleDetailsTembaTip()\n        : null;\n      const addNoteAndAssignTicketTembaTips =\n        this.currentContact && this.currentTicket\n          ? this.getAddNoteAndAssignTicketTembaTips()\n          : null;\n      const addNoteAndAssignTicketTembaModaxes = this.currentTicket\n        ? this.getAddNoteAndAssignTicketTembaModaxes()\n        : null;\n\n      const contactDetailsAndActions = html`${contactDetails}\n        <div class=\"toolbar ${this.showDetails ? '' : 'closed'}\">\n          ${toggleContactDetails} ${addNoteAndAssignTicketTembaTips}\n        </div>\n        ${addNoteAndAssignTicketTembaModaxes}`;\n\n      return html`${contactHistoryAndChatbox} ${contactDetailsAndActions}`;\n    }\n\n    return html`${contactHistoryAndChatbox}`;\n  }\n\n  private getTembaContactHistory(): TemplateResult {\n    return html` <temba-contact-history\n      .uuid=${this.currentContact.uuid}\n      .contact=${this.currentContact}\n      .ticket=${this.currentTicket ? this.currentTicket.uuid : null}\n      .endDate=${this.currentTicket ? this.currentTicket.closed_on : null}\n      .agent=${this.agent}\n    >\n    </temba-contact-history>`;\n  }\n\n  private getTembaChatbox(): TemplateResult {\n    if (this.currentTicket) {\n      if (this.currentContact && this.currentContact.status !== 'active') {\n        //no chatbox for archived, blocked, or stopped contacts\n        return null;\n      } else {\n        if (this.currentTicket.closed_on) {\n          //reopen button for active contacts with a closed ticket\n          return html` <div class=\"closed-footer\">\n            <temba-button\n              id=\"reopen-button\"\n              name=\"Reopen\"\n              @click=${this.handleTicketReopen}\n            ></temba-button>\n          </div>`;\n        } else {\n          //chatbox for active contacts with an open ticket\n          return this.getChatbox();\n        }\n      }\n    }\n\n    if (this.currentContact && this.currentContact.status !== 'active') {\n      //no chatbox for archived, blocked, or stopped contacts\n      return null;\n    } else {\n      //chatbox for active contacts\n      return this.getChatbox();\n    }\n  }\n\n  private getChatbox(): TemplateResult {\n    return html` <div class=\"chatbox ${this.toolbar ? 'full' : ''}\">\n      <temba-compose\n        chatbox\n        attachments\n        counter\n        button\n        @temba-button-clicked=${this.handleSend.bind(this)}\n      >\n      </temba-compose>\n    </div>`;\n  }\n\n  private getTembaContactDetails(): TemplateResult {\n    return 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    >\n    </temba-contact-details>`;\n  }\n\n  private getToggleDetailsTembaTip(): TemplateResult {\n    return html` <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 ? Icon.menu_collapse : 'layout-left'}\"\n        @click=\"${this.handleDetailSlider}\"\n        clickable\n        animatechange=\"spin\"\n      ></temba-icon>\n    </temba-tip>`;\n  }\n\n  private getAddNoteAndAssignTicketTembaTips(): TemplateResult {\n    return html` <temba-tip\n        style=\"margin-top:5px\"\n        text=\"Assign\"\n        position=\"left\"\n      >\n        <temba-icon\n          id=\"assign-button\"\n          name=\"${Icon.users}\"\n          @click=\"${() => {\n            const modax = this.shadowRoot.getElementById(\n              'assign-dialog'\n            ) as Modax;\n            modax.open = true;\n          }}\"\n          clickable\n        ></temba-icon>\n      </temba-tip>\n      <temba-tip style=\"margin-top:5px\" text=\"Add Note\" position=\"left\">\n        <temba-icon\n          id=\"add-note-button\"\n          name=\"${Icon.add_note}\"\n          @click=\"${() => {\n            const note = this.shadowRoot.getElementById('note-dialog') as Modax;\n            note.open = true;\n          }}\"\n          clickable\n        ></temba-icon>\n      </temba-tip>`;\n  }\n\n  private getAddNoteAndAssignTicketTembaModaxes(): TemplateResult {\n    return html` <temba-modax\n        header=\"Add Note\"\n        id=\"note-dialog\"\n        @temba-submitted=${this.refresh}\n        endpoint=\"/ticket/note/${this.currentTicket.uuid}/\"\n      >\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      >\n      </temba-modax>`;\n  }\n}\n"]}

package/out-tsc/src/dialog/Dialog.js

@@ -162,14 +162,12 @@ export class Dialog extends RapidElement {
                     this.ready = true;
                     this.animationEnd = false;
                 }, 400);
-                const scrollbarWidth = window.outerWidth - body.clientWidth;
                 this.scrollOffset = -document.documentElement.scrollTop;
                 body.style.position = 'fixed';
                 body.style.overflowY = 'scroll';
                 body.style.top = this.scrollOffset + 'px';
                 body.style.width = '100%';
                 body.style.overflowY = 'hidden';
-                body.style.paddingRight = scrollbarWidth + 'px';
             }
             else {
                 body.style.position = '';

package/out-tsc/src/dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/dialog/Dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from 'lit/decorators.js';\nimport { TemplateResult, html, css } from 'lit';\nimport { Button } from '../button/Button';\nimport { RapidElement } from '../RapidElement';\nimport { CustomEventType } from '../interfaces';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { getClasses } from '../utils';\n\nexport class Dialog extends RapidElement {\n  static get widths(): { [size: string]: string } {\n    return {\n      small: '400px',\n      medium: '600px',\n      large: '655px',\n    };\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        position: absolute;\n        z-index: 10000;\n        font-family: var(--font-family);\n        background: white;\n      }\n\n      .flex {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        position: relative;\n        left: 0px;\n        top: 0px;\n        align-items: center;\n      }\n\n      .flex-grow {\n        flex-grow: 1;\n      }\n\n      .bottom-padding {\n        padding: 3rem;\n      }\n\n      .dialog-mask {\n        width: 100%;\n        background: rgba(0, 0, 0, 0.5);\n        opacity: 0;\n        position: fixed;\n        top: 0px;\n        left: 0px;\n        transition: opacity linear calc(var(--transition-speed) / 2ms);\n        pointer-events: none;\n      }\n\n      .dialog-container {\n        margin-top: -10000px;\n        position: relative;\n        transition: transform cubic-bezier(0.71, 0.18, 0.61, 1.33)\n            var(--transition-speed),\n          opacity ease-in-out calc(var(--transition-speed) - 50ms);\n        border-radius: var(--curvature);\n        box-shadow: 0px 0px 2px 4px rgba(0, 0, 0, 0.06);\n        overflow: hidden;\n        transform: scale(0.7);\n        background: white;\n      }\n\n      .dialog-body {\n        background: #fff;\n        max-height: 75vh;\n        overflow-y: auto;\n      }\n\n      .dialog-mask.dialog-open {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      .dialog-mask.dialog-open .dialog-container {\n        top: inherit;\n      }\n\n      .dialog-mask.dialog-animation-end .dialog-container {\n        margin-top: 10vh;\n        transform: scale(1) !important;\n      }\n\n      .dialog-mask.dialog-ready .dialog-container {\n        margin-top: 10vh;\n        transform: none;\n      }\n\n      .dialog-mask.dialog-loading .dialog-container {\n        margin-top: -10000px;\n      }\n\n      .header-text {\n        font-size: 20px;\n        padding: 12px 20px;\n        font-weight: 300;\n        color: var(--header-text);\n        background: var(--header-bg);\n      }\n\n      .dialog-footer {\n        background: var(--color-primary-light);\n        padding: 10px;\n        display: flex;\n        flex-flow: row-reverse;\n      }\n\n      temba-button {\n        margin-left: 10px;\n      }\n\n      .dialog-body temba-loading {\n        position: absolute;\n        right: 12px;\n        margin-top: -30px;\n        padding-bottom: 9px;\n        display: none;\n      }\n\n      #page-loader {\n        text-align: center;\n        display: block;\n        position: relative;\n        opacity: 0;\n        margin: auto;\n        margin-top: 30px;\n        width: 154px;\n        transition: opacity calc(var(--transition-speed) * 5ms) ease-in\n          calc(var(--transition-speed * 2));\n        visibility: hidden;\n      }\n\n      .dialog-mask.dialog-loading #page-loader {\n        opacity: 1;\n        visibility: visible;\n      }\n\n      #submit-loader {\n        flex-grow: 1;\n        text-align: right;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  open: boolean;\n\n  @property()\n  header: string;\n\n  @property()\n  body: string;\n\n  @property({ type: Boolean })\n  submitting: boolean;\n\n  @property({ type: Boolean })\n  destructive: boolean;\n\n  @property({ type: Boolean })\n  disabled: boolean;\n\n  @property({ type: Boolean })\n  loading: boolean;\n\n  @property({ type: Boolean })\n  hideOnClick: boolean;\n\n  @property({ type: Boolean })\n  noFocus: boolean;\n\n  @property()\n  size = 'medium';\n\n  @property({ type: String })\n  primaryButtonName = 'Ok';\n\n  @property({ type: String })\n  cancelButtonName = 'Cancel';\n\n  @property({ type: String })\n  width = null;\n\n  @property()\n  submittingName = 'Saving';\n\n  @property()\n  animationEnd: boolean;\n\n  @property()\n  ready: boolean;\n\n  @property({ attribute: false })\n  onButtonClicked: (button: Button) => void;\n\n  scrollOffset: any = 0;\n\n  public constructor() {\n    super();\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has('open')) {\n      const body = document.querySelector('body');\n\n      if (this.open) {\n        this.animationEnd = true;\n        window.setTimeout(() => {\n          this.ready = true;\n          this.animationEnd = false;\n        }, 400);\n\n        const scrollbarWidth = window.outerWidth - body.clientWidth;\n        this.scrollOffset = -document.documentElement.scrollTop;\n        body.style.position = 'fixed';\n        body.style.overflowY = 'scroll';\n        body.style.top = this.scrollOffset + 'px';\n        body.style.width = '100%';\n        body.style.overflowY = 'hidden';\n        body.style.paddingRight = scrollbarWidth + 'px';\n      } else {\n        body.style.position = '';\n        body.style.overflowY = '';\n        body.style.width = '';\n        body.style.marginRight = '';\n        body.style.paddingRight = '0px';\n        window.scrollTo(0, parseInt(this.scrollOffset || '0') * -1);\n      }\n\n      // make sure our buttons aren't in progress on show\n      if (this.open && !changedProperties.get('open')) {\n        this.shadowRoot\n          .querySelectorAll('temba-button')\n          .forEach((button: Button) => {\n            if (button) button.submitting = false;\n          });\n\n        if (!this.noFocus) {\n          this.focusFirstInput();\n        }\n      } else {\n        window.setTimeout(() => {\n          this.ready = false;\n        }, 400);\n      }\n    }\n  }\n\n  public focusFirstInput(): void {\n    window.setTimeout(() => {\n      let input = this.querySelector(\n        'temba-textinput, temba-completion, input[type=\"text\"], textarea'\n      ) as any;\n      if (input) {\n        input = input.textInputElement || input.inputElement || input;\n        if (!input.readOnly) {\n          input.focus();\n          input.click();\n        }\n      }\n    }, 100);\n  }\n\n  public handleClick(evt: MouseEvent) {\n    const button = evt.currentTarget as Button;\n    if (!button.disabled) {\n      this.fireCustomEvent(CustomEventType.ButtonClicked, { button });\n      if (button.name === this.cancelButtonName) {\n        this.open = false;\n      }\n    }\n  }\n\n  private getDocumentHeight(): number {\n    const body = document.body;\n    const html = document.documentElement;\n    return Math.max(\n      body.scrollHeight,\n      body.offsetHeight,\n      html.clientHeight,\n      html.scrollHeight,\n      html.offsetHeight\n    );\n  }\n\n  private clickCancel() {\n    const cancel = this.getCancelButton();\n    if (cancel) {\n      cancel.click();\n    }\n  }\n\n  public getCancelButton(): Button {\n    return this.shadowRoot.querySelector(\n      `temba-button[name='${this.cancelButtonName}']`\n    );\n  }\n\n  public getPrimaryButton(): Button {\n    return this.shadowRoot.querySelector(`temba-button[primary]`);\n  }\n\n  private handleKeyUp(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.clickCancel();\n    }\n  }\n\n  private handleClickMask(event: MouseEvent) {\n    if (this.hideOnClick) {\n      const id = (event.target as HTMLElement).id;\n      if (id === 'dialog-mask' || id === 'dialog-bg') {\n        this.fireCustomEvent(CustomEventType.DialogHidden);\n        this.clickCancel();\n      }\n    }\n  }\n\n  public show(): void {\n    this.open = true;\n  }\n\n  public hide(): void {\n    this.open = false;\n  }\n\n  public render(): TemplateResult {\n    const height = this.getDocumentHeight();\n\n    const maskStyle = {\n      height: `${height + 100}px`,\n    };\n\n    const dialogStyle = {\n      width: this.width,\n      minWidth: '250px',\n      maxWidth: '600px',\n    };\n    if (!this.width) {\n      dialogStyle['width'] = Dialog.widths[this.size];\n    }\n\n    const header = this.header\n      ? html`\n          <div class=\"dialog-header\">\n            <div class=\"header-text\">${this.header}</div>\n          </div>\n        `\n      : null;\n\n    return html`\n      <div\n        id=\"dialog-mask\"\n        @click=${this.handleClickMask}\n        class=\"dialog-mask ${getClasses({\n          'dialog-open': this.open,\n          'dialog-loading': this.loading,\n          'dialog-animation-end': this.animationEnd,\n          'dialog-ready': this.ready,\n        })}\"\n        style=${styleMap(maskStyle)}\n      >\n        <div style=\"position: absolute; width: 100%;\">\n          <temba-loading\n            id=\"page-loader\"\n            units=\"6\"\n            size=\"12\"\n            color=\"#ccc\"\n          ></temba-loading>\n        </div>\n\n        <div class=\"flex\">\n          <div class=\"flex-grow\"></div>\n          <div\n            @keyup=${this.handleKeyUp}\n            style=${styleMap(dialogStyle)}\n            class=\"dialog-container\"\n          >\n            ${header}\n            <div class=\"dialog-body\" @keypress=${this.handleKeyUp}>\n              ${this.body ? this.body : html`<slot></slot>`}\n              <temba-loading units=\"6\" size=\"8\"></temba-loading>\n            </div>\n\n            <div class=\"dialog-footer\">\n                ${\n                  this.primaryButtonName\n                    ? html`\n                        <temba-button\n                          @click=${this.handleClick}\n                          .name=${this.primaryButtonName}\n                          ?destructive=${this.destructive}\n                          ?primary=${!this.destructive}\n                          ?submitting=${this.submitting}\n                          ?disabled=${this.disabled}\n                          >}</temba-button\n                        >\n                      `\n                    : null\n                }\n                <temba-button\n                  @click=${this.handleClick}\n                  name=${this.cancelButtonName}\n                  secondary\n                ></temba-button>\n              </div>\n            </div>\n            <div class=\"flex-grow bottom-padding\"></div>\n            <div class=\"bottom-padding\"></div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/dialog/Dialog.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,OAAO,MAAO,SAAQ,YAAY;IACtC,MAAM,KAAK,MAAM;QACf,OAAO;YACL,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;YACf,KAAK,EAAE,OAAO;SACf,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgIT,CAAC;IACJ,CAAC;IAuDD;QACE,KAAK,EAAE,CAAC;QA1BV,SAAI,GAAG,QAAQ,CAAC;QAGhB,sBAAiB,GAAG,IAAI,CAAC;QAGzB,qBAAgB,GAAG,QAAQ,CAAC;QAG5B,UAAK,GAAG,IAAI,CAAC;QAGb,mBAAc,GAAG,QAAQ,CAAC;QAW1B,iBAAY,GAAQ,CAAC,CAAC;IAItB,CAAC;IAEM,OAAO,CAAC,iBAAmC;QAChD,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACjC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAE5C,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;gBACzB,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;oBACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;oBAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;gBAC5B,CAAC,EAAE,GAAG,CAAC,CAAC;gBAER,IAAI,CAAC,YAAY,GAAG,CAAC,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC;gBACxD,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;gBAC9B,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,QAAQ,CAAC;gBAChC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;gBAC1C,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;gBAC1B,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,QAAQ,CAAC;aACjC;iBAAM;gBACL,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;gBACzB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;gBAC1B,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;gBACtB,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,EAAE,CAAC;gBAC5B,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC;gBAChC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,YAAY,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;aAC7D;YAED,mDAAmD;YACnD,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;gBAC/C,IAAI,CAAC,UAAU;qBACZ,gBAAgB,CAAC,cAAc,CAAC;qBAChC,OAAO,CAAC,CAAC,MAAc,EAAE,EAAE;oBAC1B,IAAI,MAAM;wBAAE,MAAM,CAAC,UAAU,GAAG,KAAK,CAAC;gBACxC,CAAC,CAAC,CAAC;gBAEL,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;oBACjB,IAAI,CAAC,eAAe,EAAE,CAAC;iBACxB;aACF;iBAAM;gBACL,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;oBACrB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;gBACrB,CAAC,EAAE,GAAG,CAAC,CAAC;aACT;SACF;IACH,CAAC;IAEM,eAAe;QACpB,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACrB,IAAI,KAAK,GAAG,IAAI,CAAC,aAAa,CAC5B,iEAAiE,CAC3D,CAAC;YACT,IAAI,KAAK,EAAE;gBACT,KAAK,GAAG,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,YAAY,IAAI,KAAK,CAAC;gBAC9D,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;oBACnB,KAAK,CAAC,KAAK,EAAE,CAAC;oBACd,KAAK,CAAC,KAAK,EAAE,CAAC;iBACf;aACF;QACH,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAEM,WAAW,CAAC,GAAe;QAChC,MAAM,MAAM,GAAG,GAAG,CAAC,aAAuB,CAAC;QAC3C,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;YACpB,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;YAChE,IAAI,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,gBAAgB,EAAE;gBACzC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;aACnB;SACF;IACH,CAAC;IAEO,iBAAiB;QACvB,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;QAC3B,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;QACtC,OAAO,IAAI,CAAC,GAAG,CACb,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,YAAY,CAClB,CAAC;IACJ,CAAC;IAEO,WAAW;QACjB,MAAM,MAAM,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACtC,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,KAAK,EAAE,CAAC;SAChB;IACH,CAAC;IAEM,eAAe;QACpB,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAClC,sBAAsB,IAAI,CAAC,gBAAgB,IAAI,CAChD,CAAC;IACJ,CAAC;IAEM,gBAAgB;QACrB,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IAChE,CAAC;IAEO,WAAW,CAAC,KAAoB;QACtC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;YAC1B,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;IACH,CAAC;IAEO,eAAe,CAAC,KAAiB;QACvC,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,MAAM,EAAE,GAAI,KAAK,CAAC,MAAsB,CAAC,EAAE,CAAC;YAC5C,IAAI,EAAE,KAAK,aAAa,IAAI,EAAE,KAAK,WAAW,EAAE;gBAC9C,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;gBACnD,IAAI,CAAC,WAAW,EAAE,CAAC;aACpB;SACF;IACH,CAAC;IAEM,IAAI;QACT,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAEM,IAAI;QACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAEM,MAAM;QACX,MAAM,MAAM,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAExC,MAAM,SAAS,GAAG;YAChB,MAAM,EAAE,GAAG,MAAM,GAAG,GAAG,IAAI;SAC5B,CAAC;QAEF,MAAM,WAAW,GAAG;YAClB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,OAAO;YACjB,QAAQ,EAAE,OAAO;SAClB,CAAC;QACF,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,WAAW,CAAC,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACjD;QAED,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM;YACxB,CAAC,CAAC,IAAI,CAAA;;uCAE2B,IAAI,CAAC,MAAM;;SAEzC;YACH,CAAC,CAAC,IAAI,CAAC;QAET,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,eAAe;6BACR,UAAU,CAAC;YAC9B,aAAa,EAAE,IAAI,CAAC,IAAI;YACxB,gBAAgB,EAAE,IAAI,CAAC,OAAO;YAC9B,sBAAsB,EAAE,IAAI,CAAC,YAAY;YACzC,cAAc,EAAE,IAAI,CAAC,KAAK;SAC3B,CAAC;gBACM,QAAQ,CAAC,SAAS,CAAC;;;;;;;;;;;;;;qBAcd,IAAI,CAAC,WAAW;oBACjB,QAAQ,CAAC,WAAW,CAAC;;;cAG3B,MAAM;iDAC6B,IAAI,CAAC,WAAW;gBACjD,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe;;;;;kBAMzC,IAAI,CAAC,iBAAiB;YACpB,CAAC,CAAC,IAAI,CAAA;;mCAES,IAAI,CAAC,WAAW;kCACjB,IAAI,CAAC,iBAAiB;yCACf,IAAI,CAAC,WAAW;qCACpB,CAAC,IAAI,CAAC,WAAW;wCACd,IAAI,CAAC,UAAU;sCACjB,IAAI,CAAC,QAAQ;;;uBAG5B;YACH,CAAC,CAAC,IACN;;2BAEW,IAAI,CAAC,WAAW;yBAClB,IAAI,CAAC,gBAAgB;;;;;;;;;;KAUzC,CAAC;IACJ,CAAC;CACF;AA3QC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCACd;AAGd;IADC,QAAQ,EAAE;sCACI;AAGf;IADC,QAAQ,EAAE;oCACE;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACR;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACP;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACV;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACP;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACX;AAGjB;IADC,QAAQ,EAAE;oCACK;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACF;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACC;AAG5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACd;AAGb;IADC,QAAQ,EAAE;8CACe;AAG1B;IADC,QAAQ,EAAE;4CACW;AAGtB;IADC,QAAQ,EAAE;qCACI;AAGf;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;+CACW","sourcesContent":["import { property } from 'lit/decorators.js';\nimport { TemplateResult, html, css } from 'lit';\nimport { Button } from '../button/Button';\nimport { RapidElement } from '../RapidElement';\nimport { CustomEventType } from '../interfaces';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { getClasses } from '../utils';\n\nexport class Dialog extends RapidElement {\n  static get widths(): { [size: string]: string } {\n    return {\n      small: '400px',\n      medium: '600px',\n      large: '655px',\n    };\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        position: absolute;\n        z-index: 10000;\n        font-family: var(--font-family);\n        background: white;\n      }\n\n      .flex {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        position: relative;\n        left: 0px;\n        top: 0px;\n        align-items: center;\n      }\n\n      .flex-grow {\n        flex-grow: 1;\n      }\n\n      .bottom-padding {\n        padding: 3rem;\n      }\n\n      .dialog-mask {\n        width: 100%;\n        background: rgba(0, 0, 0, 0.5);\n        opacity: 0;\n        position: fixed;\n        top: 0px;\n        left: 0px;\n        transition: opacity linear calc(var(--transition-speed) / 2ms);\n        pointer-events: none;\n      }\n\n      .dialog-container {\n        margin-top: -10000px;\n        position: relative;\n        transition: transform cubic-bezier(0.71, 0.18, 0.61, 1.33)\n            var(--transition-speed),\n          opacity ease-in-out calc(var(--transition-speed) - 50ms);\n        border-radius: var(--curvature);\n        box-shadow: 0px 0px 2px 4px rgba(0, 0, 0, 0.06);\n        overflow: hidden;\n        transform: scale(0.7);\n        background: white;\n      }\n\n      .dialog-body {\n        background: #fff;\n        max-height: 75vh;\n        overflow-y: auto;\n      }\n\n      .dialog-mask.dialog-open {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      .dialog-mask.dialog-open .dialog-container {\n        top: inherit;\n      }\n\n      .dialog-mask.dialog-animation-end .dialog-container {\n        margin-top: 10vh;\n        transform: scale(1) !important;\n      }\n\n      .dialog-mask.dialog-ready .dialog-container {\n        margin-top: 10vh;\n        transform: none;\n      }\n\n      .dialog-mask.dialog-loading .dialog-container {\n        margin-top: -10000px;\n      }\n\n      .header-text {\n        font-size: 20px;\n        padding: 12px 20px;\n        font-weight: 300;\n        color: var(--header-text);\n        background: var(--header-bg);\n      }\n\n      .dialog-footer {\n        background: var(--color-primary-light);\n        padding: 10px;\n        display: flex;\n        flex-flow: row-reverse;\n      }\n\n      temba-button {\n        margin-left: 10px;\n      }\n\n      .dialog-body temba-loading {\n        position: absolute;\n        right: 12px;\n        margin-top: -30px;\n        padding-bottom: 9px;\n        display: none;\n      }\n\n      #page-loader {\n        text-align: center;\n        display: block;\n        position: relative;\n        opacity: 0;\n        margin: auto;\n        margin-top: 30px;\n        width: 154px;\n        transition: opacity calc(var(--transition-speed) * 5ms) ease-in\n          calc(var(--transition-speed * 2));\n        visibility: hidden;\n      }\n\n      .dialog-mask.dialog-loading #page-loader {\n        opacity: 1;\n        visibility: visible;\n      }\n\n      #submit-loader {\n        flex-grow: 1;\n        text-align: right;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  open: boolean;\n\n  @property()\n  header: string;\n\n  @property()\n  body: string;\n\n  @property({ type: Boolean })\n  submitting: boolean;\n\n  @property({ type: Boolean })\n  destructive: boolean;\n\n  @property({ type: Boolean })\n  disabled: boolean;\n\n  @property({ type: Boolean })\n  loading: boolean;\n\n  @property({ type: Boolean })\n  hideOnClick: boolean;\n\n  @property({ type: Boolean })\n  noFocus: boolean;\n\n  @property()\n  size = 'medium';\n\n  @property({ type: String })\n  primaryButtonName = 'Ok';\n\n  @property({ type: String })\n  cancelButtonName = 'Cancel';\n\n  @property({ type: String })\n  width = null;\n\n  @property()\n  submittingName = 'Saving';\n\n  @property()\n  animationEnd: boolean;\n\n  @property()\n  ready: boolean;\n\n  @property({ attribute: false })\n  onButtonClicked: (button: Button) => void;\n\n  scrollOffset: any = 0;\n\n  public constructor() {\n    super();\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has('open')) {\n      const body = document.querySelector('body');\n\n      if (this.open) {\n        this.animationEnd = true;\n        window.setTimeout(() => {\n          this.ready = true;\n          this.animationEnd = false;\n        }, 400);\n\n        this.scrollOffset = -document.documentElement.scrollTop;\n        body.style.position = 'fixed';\n        body.style.overflowY = 'scroll';\n        body.style.top = this.scrollOffset + 'px';\n        body.style.width = '100%';\n        body.style.overflowY = 'hidden';\n      } else {\n        body.style.position = '';\n        body.style.overflowY = '';\n        body.style.width = '';\n        body.style.marginRight = '';\n        body.style.paddingRight = '0px';\n        window.scrollTo(0, parseInt(this.scrollOffset || '0') * -1);\n      }\n\n      // make sure our buttons aren't in progress on show\n      if (this.open && !changedProperties.get('open')) {\n        this.shadowRoot\n          .querySelectorAll('temba-button')\n          .forEach((button: Button) => {\n            if (button) button.submitting = false;\n          });\n\n        if (!this.noFocus) {\n          this.focusFirstInput();\n        }\n      } else {\n        window.setTimeout(() => {\n          this.ready = false;\n        }, 400);\n      }\n    }\n  }\n\n  public focusFirstInput(): void {\n    window.setTimeout(() => {\n      let input = this.querySelector(\n        'temba-textinput, temba-completion, input[type=\"text\"], textarea'\n      ) as any;\n      if (input) {\n        input = input.textInputElement || input.inputElement || input;\n        if (!input.readOnly) {\n          input.focus();\n          input.click();\n        }\n      }\n    }, 100);\n  }\n\n  public handleClick(evt: MouseEvent) {\n    const button = evt.currentTarget as Button;\n    if (!button.disabled) {\n      this.fireCustomEvent(CustomEventType.ButtonClicked, { button });\n      if (button.name === this.cancelButtonName) {\n        this.open = false;\n      }\n    }\n  }\n\n  private getDocumentHeight(): number {\n    const body = document.body;\n    const html = document.documentElement;\n    return Math.max(\n      body.scrollHeight,\n      body.offsetHeight,\n      html.clientHeight,\n      html.scrollHeight,\n      html.offsetHeight\n    );\n  }\n\n  private clickCancel() {\n    const cancel = this.getCancelButton();\n    if (cancel) {\n      cancel.click();\n    }\n  }\n\n  public getCancelButton(): Button {\n    return this.shadowRoot.querySelector(\n      `temba-button[name='${this.cancelButtonName}']`\n    );\n  }\n\n  public getPrimaryButton(): Button {\n    return this.shadowRoot.querySelector(`temba-button[primary]`);\n  }\n\n  private handleKeyUp(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.clickCancel();\n    }\n  }\n\n  private handleClickMask(event: MouseEvent) {\n    if (this.hideOnClick) {\n      const id = (event.target as HTMLElement).id;\n      if (id === 'dialog-mask' || id === 'dialog-bg') {\n        this.fireCustomEvent(CustomEventType.DialogHidden);\n        this.clickCancel();\n      }\n    }\n  }\n\n  public show(): void {\n    this.open = true;\n  }\n\n  public hide(): void {\n    this.open = false;\n  }\n\n  public render(): TemplateResult {\n    const height = this.getDocumentHeight();\n\n    const maskStyle = {\n      height: `${height + 100}px`,\n    };\n\n    const dialogStyle = {\n      width: this.width,\n      minWidth: '250px',\n      maxWidth: '600px',\n    };\n    if (!this.width) {\n      dialogStyle['width'] = Dialog.widths[this.size];\n    }\n\n    const header = this.header\n      ? html`\n          <div class=\"dialog-header\">\n            <div class=\"header-text\">${this.header}</div>\n          </div>\n        `\n      : null;\n\n    return html`\n      <div\n        id=\"dialog-mask\"\n        @click=${this.handleClickMask}\n        class=\"dialog-mask ${getClasses({\n          'dialog-open': this.open,\n          'dialog-loading': this.loading,\n          'dialog-animation-end': this.animationEnd,\n          'dialog-ready': this.ready,\n        })}\"\n        style=${styleMap(maskStyle)}\n      >\n        <div style=\"position: absolute; width: 100%;\">\n          <temba-loading\n            id=\"page-loader\"\n            units=\"6\"\n            size=\"12\"\n            color=\"#ccc\"\n          ></temba-loading>\n        </div>\n\n        <div class=\"flex\">\n          <div class=\"flex-grow\"></div>\n          <div\n            @keyup=${this.handleKeyUp}\n            style=${styleMap(dialogStyle)}\n            class=\"dialog-container\"\n          >\n            ${header}\n            <div class=\"dialog-body\" @keypress=${this.handleKeyUp}>\n              ${this.body ? this.body : html`<slot></slot>`}\n              <temba-loading units=\"6\" size=\"8\"></temba-loading>\n            </div>\n\n            <div class=\"dialog-footer\">\n                ${\n                  this.primaryButtonName\n                    ? html`\n                        <temba-button\n                          @click=${this.handleClick}\n                          .name=${this.primaryButtonName}\n                          ?destructive=${this.destructive}\n                          ?primary=${!this.destructive}\n                          ?submitting=${this.submitting}\n                          ?disabled=${this.disabled}\n                          >}</temba-button\n                        >\n                      `\n                    : null\n                }\n                <temba-button\n                  @click=${this.handleClick}\n                  name=${this.cancelButtonName}\n                  secondary\n                ></temba-button>\n              </div>\n            </div>\n            <div class=\"flex-grow bottom-padding\"></div>\n            <div class=\"bottom-padding\"></div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/dropdown/Dropdown.js

@@ -75,7 +75,6 @@ export class Dropdown extends RapidElement {
         background: rgba(0, 0, 0, 0.7);
         opacity: 0;
         transition: opacity var(--transition-speed) ease-in-out;
-        z-index: 1;
         pointer-events: none;
       }