npm - @nyaruka/temba-components - Versions diffs - 0.89.0 → 0.90.0 - Mend

@nyaruka/temba-components 0.89.0 → 0.90.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

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

@@ -2,9 +2,8 @@ import { __decorate } from "tslib";
 import { html, css } from 'lit';
 import { FormElement } from '../FormElement';
 import { property } from 'lit/decorators.js';
-import { Icon } from '../vectoricon';
 import { CustomEventType } from '../interfaces';
-import { formatFileSize, getClasses, postFormData, truncate, DEFAULT_MEDIA_ENDPOINT, isImageAttachment } from '../utils';
+import { DEFAULT_MEDIA_ENDPOINT } from '../utils';
 export class Compose extends FormElement {
     static get styles() {
         return css `
@@ -22,36 +21,6 @@ export class Compose extends FormElement {
         caret-color: var(--input-caret);
       }
-      .drop-mask {
-        opacity: 0;
-        pointer-events: none;
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        bottom: 0;
-        right: 0;
-        background: rgba(210, 243, 184, 0.8);
-        border-radius: var(--curvature-widget);
-        transition: opacity ease-in-out var(--transition-speed);
-        display: flex;
-        align-items: center;
-        text-align: center;
-      }
-      .highlight .drop-mask {
-        opacity: 1;
-      }
-      .drop-mask > div {
-        margin: auto;
-        border-radius: var(--curvature-widget);
-        font-weight: 400;
-        color: rgba(0, 0, 0, 0.5);
-      }
-      .items {
-      }
       .chatbox {
         --color-widget-border: none;
         --curvature-widget: var(
@@ -63,58 +32,6 @@ export class Compose extends FormElement {
         padding: var(--compose-padding, 0px);
       }
-      .attachments {
-      }
-      .attachments-list {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        padding: 0.2em;
-      }
-      .attachment-item {
-        padding: 0.4em;
-      }
-      .attachment-item.error {
-        background: #fff;
-        color: rgba(250, 0, 0, 0.75);
-        padding: 0.2em;
-        margin: 0.3em 0.5em;
-        border-radius: var(--curvature);
-        display: block;
-      }
-      .remove-item {
-        position: absolute;
-        --icon-color: #ccc;
-        background: #fff;
-        border-radius: 99%;
-        transform: scale(0);
-        transition: transform 200ms linear;
-      }
-      .attachment-item:hover .remove-item {
-        transform: scale(1);
-      }
-      .remove-item:hover {
-        --icon-color: #333;
-        cursor: pointer;
-      }
-      .remove-item.error:hover {
-        background: rgba(250, 0, 0, 0.1);
-      }
-      .remove-item.error {
-        background: rgba(250, 0, 0, 0.05);
-        color: rgba(250, 0, 0, 0.75);
-      }
-      .attachment-name {
-        align-self: center;
-        font-size: 12px;
-        padding: 2px 8px;
-      }
       .actions {
         display: flex;
         justify-content: space-between;
@@ -126,20 +43,11 @@ export class Compose extends FormElement {
         border-top: solid 1px var(--color-widget-border);
       }
-      #upload-input {
-        display: none;
-      }
-      .upload-label {
-        display: flex;
-        align-items: center;
-      }
-      .upload-icon {
-        color: rgb(102, 102, 102);
-      }
       .actions-right {
         display: flex;
         align-items: center;
       }
       temba-charcount {
         margin-right: 5px;
         overflow: hidden;
@@ -149,10 +57,12 @@ export class Compose extends FormElement {
         --temba-charcount-summary-right: 105px;
         --temba-charcount-summary-bottom: 105px;
       }
       temba-button {
         --button-y: 1px;
         --button-x: 12px;
       }
       .send-error {
         color: rgba(250, 0, 0, 0.75);
         font-size: var(--help-text-size);
@@ -180,25 +90,11 @@ export class Compose extends FormElement {
         margin: 0.8em;
       }
-      .add-attachment {
+      .optins {
         padding: 1em;
-        background: #eee;
-        border-radius: var(--curvature);
-        color: #aaa;
-        margin: 0.5em;
-      }
-      .add-attachment:hover {
-        background: #e9e9e9;
-        cursor: pointer;
       }
-      temba-loading {
-        margin: auto 1em;
-      }
-      .optins {
-        padding: 1em;
+      .attachments {
       }
     `;
     }
@@ -216,7 +112,6 @@ export class Compose extends FormElement {
         this.currentQuickReplies = [];
         this.currentOptin = [];
         this.optinEndpoint = '/api/v2/optins.json';
-        this.failedAttachments = [];
         this.buttonName = 'Send';
         this.buttonDisabled = true;
         this.buttonError = '';
@@ -233,9 +128,7 @@ export class Compose extends FormElement {
         if (tab) {
             // check we are going for the first attachment
             if (tab.icon == 'attachment') {
-                if (this.currentAttachments.length == 0) {
-                    this.handleUploadFileIconClicked();
-                }
+                // show the media picker?
             }
         }
     }
@@ -306,6 +199,11 @@ export class Compose extends FormElement {
             this.setValue(this.langValues);
         }
     }
+    handleAttachmentsChanged(event) {
+        const media = event.target;
+        this.currentAttachments = media.attachments;
+        this.requestUpdate();
+    }
     setFocusOnChatbox() {
         if (this.chatbox) {
             const completion = this.shadowRoot.querySelector('.chatbox');
@@ -323,7 +221,6 @@ export class Compose extends FormElement {
         this.currentText = '';
         this.currentQuickReplies = [];
         this.currentAttachments = [];
-        this.failedAttachments = [];
         this.buttonError = '';
     }
     handleQuickReplyChange() {
@@ -337,137 +234,6 @@ export class Compose extends FormElement {
         const chatbox = evt.target;
         this.currentText = chatbox.value;
     }
-    handleDragEnter(evt) {
-        this.highlight(evt);
-    }
-    handleDragOver(evt) {
-        this.highlight(evt);
-    }
-    handleDragLeave(evt) {
-        this.unhighlight(evt);
-    }
-    handleDrop(evt) {
-        if (this.canAcceptAttachments()) {
-            this.unhighlight(evt);
-            const dt = evt.dataTransfer;
-            if (dt) {
-                const files = dt.files;
-                this.uploadFiles(files);
-            }
-        }
-    }
-    preventDefaults(evt) {
-        evt.preventDefault();
-        evt.stopPropagation();
-    }
-    highlight(evt) {
-        if (this.canAcceptAttachments()) {
-            this.pendingDrop = true;
-            this.preventDefaults(evt);
-        }
-    }
-    unhighlight(evt) {
-        if (this.canAcceptAttachments()) {
-            this.pendingDrop = false;
-            this.preventDefaults(evt);
-        }
-    }
-    handleUploadFileIconClicked() {
-        this.dispatchEvent(new Event('change'));
-    }
-    handleUploadFileInputChanged(evt) {
-        const target = evt.target;
-        const files = target.files;
-        this.uploadFiles(files);
-    }
-    canAcceptAttachments() {
-        return (this.attachments && this.currentAttachments.length < this.maxAttachments);
-    }
-    uploadFiles(files) {
-        let filesToUpload = [];
-        if (this.currentAttachments && this.currentAttachments.length > 0) {
-            //remove duplicate files that have already been uploaded
-            filesToUpload = [...files].filter((file) => {
-                const index = this.currentAttachments.findIndex((value) => value.filename === file.name && value.size === file.size);
-                if (index === -1) {
-                    return file;
-                }
-            });
-        }
-        else {
-            filesToUpload = [...files];
-        }
-        filesToUpload.map((fileToUpload) => {
-            this.uploadFile(fileToUpload);
-        });
-    }
-    uploadFile(file) {
-        this.uploading = true;
-        const url = this.endpoint;
-        const payload = new FormData();
-        payload.append('file', file);
-        postFormData(url, payload)
-            .then((response) => {
-            if (this.currentAttachments.length >= this.maxAttachments) {
-                this.addFailedAttachment(file, 'Too many attachments');
-            }
-            else {
-                const attachment = response.json;
-                if (attachment) {
-                    this.addCurrentAttachment(attachment);
-                }
-            }
-        })
-            .catch((error) => {
-            let uploadError = '';
-            if (error.status === 400) {
-                uploadError = error.json.file[0];
-            }
-            else {
-                uploadError = 'Server failure';
-            }
-            console.error(uploadError);
-            this.addFailedAttachment(file, uploadError);
-        })
-            .finally(() => {
-            this.uploading = false;
-        });
-    }
-    addCurrentAttachment(attachmentToAdd) {
-        this.currentAttachments.push(attachmentToAdd);
-        this.requestUpdate('currentAttachments');
-    }
-    removeCurrentAttachment(attachmentToRemove) {
-        this.currentAttachments = this.currentAttachments.filter((currentAttachment) => currentAttachment !== attachmentToRemove);
-        this.requestUpdate('currentAttachments');
-    }
-    addFailedAttachment(file, error) {
-        const failedAttachment = {
-            uuid: Math.random().toString(36).slice(2, 6),
-            content_type: file.type,
-            filename: file.name,
-            url: file.name,
-            size: file.size,
-            error: error
-        };
-        this.failedAttachments.push(failedAttachment);
-        this.requestUpdate('failedAttachments');
-    }
-    removeFailedAttachment(attachmentToRemove) {
-        this.failedAttachments = this.failedAttachments.filter((failedAttachment) => failedAttachment !== attachmentToRemove);
-        this.requestUpdate('failedAttachments');
-    }
-    handleRemoveFileClicked(evt) {
-        const target = evt.target;
-        const currentAttachmentToRemove = this.currentAttachments.find(({ uuid }) => uuid === target.id);
-        if (currentAttachmentToRemove) {
-            this.removeCurrentAttachment(currentAttachmentToRemove);
-        }
-        const failedAttachmentToRemove = this.failedAttachments.find(({ uuid }) => uuid === target.id);
-        if (failedAttachmentToRemove) {
-            this.removeFailedAttachment(failedAttachmentToRemove);
-        }
-    }
     toggleButton() {
         if (this.button) {
             this.buttonError = '';
@@ -498,12 +264,10 @@ export class Compose extends FormElement {
                     const chat = evt.target;
                     if (!chat.hasVisibleOptions()) {
                         this.handleSend();
-                        this.preventDefaults(evt);
                     }
                 }
                 else {
                     this.handleSend();
-                    this.preventDefaults(evt);
                 }
             }
         }
@@ -540,18 +304,8 @@ export class Compose extends FormElement {
             >
             </temba-select>`
             : null}
-        <div
-          class=${getClasses({ container: true, highlight: this.pendingDrop })}
-          @dragenter="${this.handleDragEnter}"
-          @dragover="${this.handleDragOver}"
-          @dragleave="${this.handleDragLeave}"
-          @drop="${this.handleDrop}"
-        >
-          <div class="drop-mask"><div>Upload Attachment</div></div>
+        <div class="container">
           ${this.chatbox ? html `${this.getChatbox()}` : null}
           <div class="items actions">${this.getActions()}</div>
         </div>
       </temba-field>
@@ -587,52 +341,6 @@ export class Compose extends FormElement {
       </temba-textinput>`;
         }
     }
-    getAttachments() {
-        return html `
-      ${this.attachments
-            ? html ` <div class="attachments-list">
-              ${this.currentAttachments.map((validAttachment) => {
-                return html ` <div class="attachment-item">
-                  <temba-icon
-                    class="remove-item"
-                    @click="${this.handleRemoveFileClicked}"
-                    id="${validAttachment.uuid}"
-                    name="${Icon.delete_small}"
-                  ></temba-icon>
-                  ${isImageAttachment(validAttachment)
-                    ? html `<temba-thumbnail
-                        url="${validAttachment.url}"
-                      ></temba-thumbnail>`
-                    : html `<temba-thumbnail
-                        label="${validAttachment.content_type.split('/')[1]}"
-                      ></temba-thumbnail>`}
-                </div>`;
-            })}
-              ${this.getUploader()}
-            </div>
-            ${this.failedAttachments.map((invalidAttachment) => {
-                return html ` <div class="attachment-item error">
-                <div
-                  class="remove-item error"
-                  @click="${this.handleRemoveFileClicked}"
-                >
-                  <temba-icon
-                    id="${invalidAttachment.uuid}"
-                    name="${Icon.delete_small}"
-                  ></temba-icon>
-                </div>
-                <div class="attachment-name">
-                  <span
-                    title="${invalidAttachment.filename} (${formatFileSize(0, 0)}) - Attachment failed - ${invalidAttachment.error}"
-                    >${truncate(invalidAttachment.filename, 25)}
-                    (${formatFileSize(0, 0)}) - Attachment failed</span
-                  >
-                </div>
-              </div>`;
-            })}`
-            : null}
-    `;
-    }
     getActions() {
         const showOptins = this.optIns && this.isBaseLanguage();
         return html `
@@ -649,7 +357,14 @@ export class Compose extends FormElement {
               icon="attachment"
               .count=${this.currentAttachments.length}
             >
-              <div class="items attachments">${this.getAttachments()}</div>
+              <div class="items attachments">
+                <temba-media-picker
+                  accept=${this.accept}
+                  max=${this.maxAttachments}
+                  attachments=${JSON.stringify(this.currentAttachments)}
+                  @change=${this.handleAttachmentsChanged.bind(this)}
+                ></temba-media-picker>
+              </div>
             </temba-tab>`
             : null}
         ${this.quickReplies
@@ -697,34 +412,6 @@ export class Compose extends FormElement {
       </temba-tabs>
     `;
     }
-    getUploader() {
-        if (this.uploading) {
-            return html `<temba-loading units="3" size="12"></temba-loading>`;
-        }
-        else {
-            return this.currentAttachments.length < this.maxAttachments
-                ? html `<input
-              type="file"
-              id="upload-input"
-              multiple
-              accept="${this.accept}"
-              @change="${this.handleUploadFileInputChanged}"
-            />
-            <label
-              id="upload-label"
-              class="actions-left upload-label"
-              for="upload-input"
-            >
-              <div
-                class="add-attachment"
-                @click="${this.handleUploadFileIconClicked}"
-              >
-                <temba-icon name="add" size="1.5"></temba-icon>
-              </div>
-            </label>`
-                : null;
-        }
-    }
     getCounter() {
         return html `<temba-charcount
       .text="${this.currentText}"
@@ -766,9 +453,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Compose.prototype, "counter", void 0);
-__decorate([
-    property({ type: Boolean })
-], Compose.prototype, "pendingDrop", void 0);
 __decorate([
     property({ type: Boolean })
 ], Compose.prototype, "button", void 0);
@@ -802,9 +486,6 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Compose.prototype, "optinEndpoint", void 0);
-__decorate([
-    property({ type: Array, attribute: false })
-], Compose.prototype, "failedAttachments", void 0);
 __decorate([
     property({ type: String })
 ], Compose.prototype, "buttonName", void 0);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Compose.js","sourceRoot":"","sources":["../../../src/compose/Compose.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAc,eAAe,EAAY,MAAM,eAAe,CAAC;AACtE,OAAO,EACL,cAAc,EACd,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,sBAAsB,EAEtB,iBAAiB,EAClB,MAAM,UAAU,CAAC;AAMlB,MAAM,OAAO,OAAQ,SAAQ,WAAW;IACtC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiMT,CAAC;IACJ,CAAC;IAgGD;QACE,KAAK,EAAE,CAAC;QA9FV,UAAK,GAAG,CAAC,CAAC;QAGV,mBAAc,GAAG,CAAC,CAAC;QAGnB,cAAS,GAAG,GAAG,CAAC;QA2BhB,gBAAW,GAAG,EAAE,CAAC;QAGjB,gBAAW,GAAG,EAAE,CAAC;QAGjB,WAAM,GAAG,EAAE,CAAC,CAAC,mBAAmB;QAGhC,aAAQ,GAAG,sBAAsB,CAAC;QAMlC,cAAS,GAAe,EAAE,CAAC;QAG3B,uBAAkB,GAAiB,EAAE,CAAC;QAGtC,wBAAmB,GAAsC,EAAE,CAAC;QAG5D,iBAAY,GAAqC,EAAE,CAAC;QAGpD,kBAAa,GAAG,qBAAqB,CAAC;QAGtC,sBAAiB,GAAiB,EAAE,CAAC;QAGrC,eAAU,GAAG,MAAM,CAAC;QAGpB,mBAAc,GAAG,IAAI,CAAC;QAGtB,gBAAW,GAAG,EAAE,CAAC;QASjB,eAAU,GAON,EAAE,CAAC;QAGP,oBAAe,GAAG,KAAK,CAAC;IAIxB,CAAC;IAEO,cAAc;QACpB,OAAO,CACL,IAAI,CAAC,eAAe,IAAI,KAAK;YAC7B,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,CAC9C,CAAC;IACJ,CAAC;IAEO,gBAAgB;QACtB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAY,CAAC;QACpE,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QACjC,IAAI,GAAG,EAAE,CAAC;YACR,8CAA8C;YAC9C,IAAI,GAAG,CAAC,IAAI,IAAI,YAAY,EAAE,CAAC;gBAC7B,IAAI,IAAI,CAAC,kBAAkB,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;oBACxC,IAAI,CAAC,2BAA2B,EAAE,CAAC;gBACrC,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAEM,gBAAgB;QACrB,OAAO;YACL,EAAE,KAAK,EAAE,eAAe,CAAC,cAAc,EAAE,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAAE;SACzE,CAAC;IACJ,CAAC;IAEM,YAAY,CAAC,OAAyB;QAC3C,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAE5B,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC1D,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;QAC/C,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,EAAE,CAAC;QACtD,CAAC;QACD,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAEM,OAAO,CAAC,OAAyB;QACtC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEvB,IAAI,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACtD,IAAI,SAAS,GAAG;gBACd,IAAI,EAAE,EAAE;gBACR,WAAW,EAAE,EAAE;gBACf,aAAa,EAAE,EAAE;aAClB,CAAC;YAEF,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBAC5C,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YACpD,CAAC;YAED,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC,IAAI,CAAC;YAClC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC,IAAI,CAAC;YAClC,IAAI,CAAC,kBAAkB,GAAG,SAAS,CAAC,WAAW,CAAC;YAChD,IAAI,CAAC,mBAAmB,GAAG,CAAC,SAAS,CAAC,aAAa,IAAI,EAAE,CAAC,CAAC,GAAG,CAC5D,CAAC,KAAK,EAAE,EAAE;gBACR,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;YAChC,CAAC,CACF,CAAC;YACF,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACnE,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAEzB,+CAA+C;YAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAQ,CAAC;YACjE,IAAI,OAAO,EAAE,CAAC;gBACZ,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;YACnC,CAAC;YACD,IAAI,CAAC,SAAS,EAAE,CAAC;YACjB,IAAI,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QAC3C,CAAC;QAED,IACE,CAAC,IAAI,CAAC,UAAU;YACd,CAAC,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC;gBACzB,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC;gBACjC,OAAO,CAAC,GAAG,CAAC,qBAAqB,CAAC,CAAC,CAAC;YACxC,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,EAC3B,CAAC;YACD,IAAI,CAAC,YAAY,EAAE,CAAC;YAEpB,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YAChE,IACE,OAAO;gBACP,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,CAAC;gBAClC,IAAI,CAAC,mBAAmB,CAAC,MAAM,GAAG,CAAC,EACnC,CAAC;gBACD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,GAAG;oBACtC,IAAI,EAAE,OAAO;oBACb,WAAW,EAAE,IAAI,CAAC,kBAAkB;oBACpC,aAAa,EAAE,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;oBACrE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI;iBAClE,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YAC/C,CAAC;YACD,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,cAAc,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;YACtE,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;YACjC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;IAEO,iBAAiB;QACvB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAC9C,UAAU,CACG,CAAC;YAChB,IAAI,UAAU,EAAE,CAAC;gBACf,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;oBACrB,UAAU,CAAC,KAAK,EAAE,CAAC;oBACnB,oBAAoB;gBACtB,CAAC,EAAE,CAAC,CAAC,CAAC;YACR,CAAC;QACH,CAAC;IACH,CAAC;IAEM,KAAK;QACT,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAsB,CAAC,KAAK,GAAG,EAAE,CAAC;QAC3E,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;QACtB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;QACtB,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC;QAC9B,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC;QAC7B,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC;QAC5B,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;IACxB,CAAC;IAEO,sBAAsB;QAC5B,IAAI,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAC5C,CAAC;IAEO,iBAAiB,CAAC,KAAiB;QACzC,IAAI,CAAC,YAAY,GAAI,KAAK,CAAC,MAAc,CAAC,MAAM,CAAC;QACjD,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAEO,mBAAmB,CAAC,GAAU;QACpC,MAAM,OAAO,GAAG,GAAG,CAAC,MAA0B,CAAC;QAC/C,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,KAAK,CAAC;IACnC,CAAC;IAEO,eAAe,CAAC,GAAc;QACpC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IACtB,CAAC;IAEO,cAAc,CAAC,GAAc;QACnC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IACtB,CAAC;IAEO,eAAe,CAAC,GAAc;QACpC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IACxB,CAAC;IAEO,UAAU,CAAC,GAAc;QAC/B,IAAI,IAAI,CAAC,oBAAoB,EAAE,EAAE,CAAC;YAChC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;YACtB,MAAM,EAAE,GAAG,GAAG,CAAC,YAAY,CAAC;YAC5B,IAAI,EAAE,EAAE,CAAC;gBACP,MAAM,KAAK,GAAG,EAAE,CAAC,KAAK,CAAC;gBACvB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC;IACH,CAAC;IAEO,eAAe,CAAC,GAAU;QAChC,GAAG,CAAC,cAAc,EAAE,CAAC;QACrB,GAAG,CAAC,eAAe,EAAE,CAAC;IACxB,CAAC;IAEO,SAAS,CAAC,GAAc;QAC9B,IAAI,IAAI,CAAC,oBAAoB,EAAE,EAAE,CAAC;YAChC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YACxB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC;IAEO,WAAW,CAAC,GAAc;QAChC,IAAI,IAAI,CAAC,oBAAoB,EAAE,EAAE,CAAC;YAChC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YACzB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC;IAEO,2BAA2B;QACjC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,CAAC;IAEO,4BAA4B,CAAC,GAAU;QAC7C,MAAM,MAAM,GAAG,GAAG,CAAC,MAA0B,CAAC;QAC9C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC3B,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAEM,oBAAoB;QACzB,OAAO,CACL,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc,CACzE,CAAC;IACJ,CAAC;IAEM,WAAW,CAAC,KAAe;QAChC,IAAI,aAAa,GAAG,EAAE,CAAC;QACvB,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAClE,wDAAwD;YACxD,aAAa,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;gBACzC,MAAM,KAAK,GAAG,IAAI,CAAC,kBAAkB,CAAC,SAAS,CAC7C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,KAAK,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CACpE,CAAC;gBACF,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC;oBACjB,OAAO,IAAI,CAAC;gBACd,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,aAAa,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC;QAC7B,CAAC;QACD,aAAa,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE;YACjC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;QAChC,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,UAAU,CAAC,IAAU;QAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QAEtB,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC1B,MAAM,OAAO,GAAG,IAAI,QAAQ,EAAE,CAAC;QAC/B,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QAC7B,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC;aACvB,IAAI,CAAC,CAAC,QAAqB,EAAE,EAAE;YAC9B,IAAI,IAAI,CAAC,kBAAkB,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;gBAC1D,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,sBAAsB,CAAC,CAAC;YACzD,CAAC;iBAAM,CAAC;gBACN,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAkB,CAAC;gBAC/C,IAAI,UAAU,EAAE,CAAC;oBACf,IAAI,CAAC,oBAAoB,CAAC,UAAU,CAAC,CAAC;gBACxC,CAAC;YACH,CAAC;QACH,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,KAAkB,EAAE,EAAE;YAC5B,IAAI,WAAW,GAAG,EAAE,CAAC;YACrB,IAAI,KAAK,CAAC,MAAM,KAAK,GAAG,EAAE,CAAC;gBACzB,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YACnC,CAAC;iBAAM,CAAC;gBACN,WAAW,GAAG,gBAAgB,CAAC;YACjC,CAAC;YACD,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;YAC3B,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QAC9C,CAAC,CAAC;aACD,OAAO,CAAC,GAAG,EAAE;YACZ,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC,CAAC,CAAC;IACP,CAAC;IAEO,oBAAoB,CAAC,eAAoB;QAC/C,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QAC9C,IAAI,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAC3C,CAAC;IACO,uBAAuB,CAAC,kBAAuB;QACrD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC,MAAM,CACtD,CAAC,iBAAiB,EAAE,EAAE,CAAC,iBAAiB,KAAK,kBAAkB,CAChE,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAC3C,CAAC;IAEO,mBAAmB,CAAC,IAAU,EAAE,KAAa;QACnD,MAAM,gBAAgB,GAAG;YACvB,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;YAC5C,YAAY,EAAE,IAAI,CAAC,IAAI;YACvB,QAAQ,EAAE,IAAI,CAAC,IAAI;YACnB,GAAG,EAAE,IAAI,CAAC,IAAI;YACd,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,KAAK;SACC,CAAC;QAChB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC9C,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;IAC1C,CAAC;IACO,sBAAsB,CAAC,kBAAuB;QACpD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC,MAAM,CACpD,CAAC,gBAAqB,EAAE,EAAE,CAAC,gBAAgB,KAAK,kBAAkB,CACnE,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;IAC1C,CAAC;IAEO,uBAAuB,CAAC,GAAU;QACxC,MAAM,MAAM,GAAG,GAAG,CAAC,MAAwB,CAAC;QAE5C,MAAM,yBAAyB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAC5D,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,KAAK,MAAM,CAAC,EAAE,CACjC,CAAC;QACF,IAAI,yBAAyB,EAAE,CAAC;YAC9B,IAAI,CAAC,uBAAuB,CAAC,yBAAyB,CAAC,CAAC;QAC1D,CAAC;QAED,MAAM,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAC1D,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,KAAK,MAAM,CAAC,EAAE,CACjC,CAAC;QACF,IAAI,wBAAwB,EAAE,CAAC;YAC7B,IAAI,CAAC,sBAAsB,CAAC,wBAAwB,CAAC,CAAC;QACxD,CAAC;IACH,CAAC;IAEM,YAAY;QACjB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;YACtB,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC;YAC1D,MAAM,gBAAgB,GAAG,IAAI,CAAC,kBAAkB,CAAC,MAAM,KAAK,CAAC,CAAC;YAC9D,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;gBACrC,IAAI,CAAC,cAAc,GAAG,YAAY,IAAI,gBAAgB,CAAC;YACzD,CAAC;iBAAM,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACxB,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC;YACrC,CAAC;iBAAM,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;gBAC5B,IAAI,CAAC,cAAc,GAAG,gBAAgB,CAAC;YACzC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC7B,CAAC;QACH,CAAC;IACH,CAAC;IAEO,eAAe,CAAC,GAAU;QAChC,GAAG,CAAC,eAAe,EAAE,CAAC;QACtB,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAEO,eAAe,CAAC,GAAkB;QACxC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,GAAG,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;gBACzC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;oBACpB,MAAM,IAAI,GAAG,GAAG,CAAC,MAAoB,CAAC;oBACtC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,CAAC;wBAC9B,IAAI,CAAC,UAAU,EAAE,CAAC;wBAClB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;oBAC5B,CAAC;gBACH,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,UAAU,EAAE,CAAC;oBAClB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;gBAC5B,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YACzB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC3B,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC;YAC7B,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,aAAa,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;QAChE,CAAC;IACH,CAAC;IAEO,oBAAoB,CAAC,GAAU;QACrC,MAAM,MAAM,GAAG,GAAG,CAAC,MAAgB,CAAC;QACpC,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC9C,CAAC;IAEM,SAAS;QACb,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAa,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;IACtE,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC,IAAI;kBACN,IAAI,CAAC,MAAM;sBACP,IAAI,CAAC,UAAU;iBACpB,IAAI,CAAC,KAAK;;UAEjB,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC;YACzB,CAAC,CAAC,IAAI,CAAA;wBACQ,IAAI,CAAC,oBAAoB;;;+BAGlB,IAAI,CAAC,SAAS;;;4BAGjB;YAClB,CAAC,CAAC,IAAI;;;kBAGE,UAAU,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC;wBACtD,IAAI,CAAC,eAAe;uBACrB,IAAI,CAAC,cAAc;wBAClB,IAAI,CAAC,eAAe;mBACzB,IAAI,CAAC,UAAU;;;;YAItB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI;;uCAErB,IAAI,CAAC,UAAU,EAAE;;;KAGnD,CAAC;IACJ,CAAC;IAEO,UAAU;QAChB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO,IAAI,CAAA;;iBAEA,IAAI,CAAC,WAAW;;;;oBAIb,IAAI,CAAC,SAAS;kBAChB,IAAI,CAAC,mBAAmB;mBACvB,IAAI,CAAC,eAAe;;;0BAGb,CAAC;QACvB,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAA;;;;;oBAKG,IAAI,CAAC,SAAS;iBACjB,IAAI,CAAC,WAAW;kBACf,IAAI,CAAC,mBAAmB;mBACvB,IAAI,CAAC,eAAe;;;yBAGd,CAAC;QACtB,CAAC;IACH,CAAC;IAEO,cAAc;QACpB,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA;gBACE,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,eAAe,EAAE,EAAE;gBAChD,OAAO,IAAI,CAAA;;;8BAGG,IAAI,CAAC,uBAAuB;0BAChC,eAAe,CAAC,IAAI;4BAClB,IAAI,CAAC,YAAY;;oBAEzB,iBAAiB,CAAC,eAAe,CAAC;oBAClC,CAAC,CAAC,IAAI,CAAA;+BACK,eAAe,CAAC,GAAG;0CACR;oBACtB,CAAC,CAAC,IAAI,CAAA;iCACO,eAAe,CAAC,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;0CACjC;uBACnB,CAAC;YACV,CAAC,CAAC;gBACA,IAAI,CAAC,WAAW,EAAE;;cAEpB,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,iBAAiB,EAAE,EAAE;gBACjD,OAAO,IAAI,CAAA;;;4BAGG,IAAI,CAAC,uBAAuB;;;0BAG9B,iBAAiB,CAAC,IAAI;4BACpB,IAAI,CAAC,YAAY;;;;;6BAKhB,iBAAiB,CAAC,QAAQ,KAAK,cAAc,CACpD,CAAC,EACD,CAAC,CACF,2BAA2B,iBAAiB,CAAC,KAAK;uBAChD,QAAQ,CAAC,iBAAiB,CAAC,QAAQ,EAAE,EAAE,CAAC;uBACxC,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC;;;qBAGtB,CAAC;YACV,CAAC,CAAC,EAAE;YACR,CAAC,CAAC,IAAI;KACT,CAAC;IACJ,CAAC;IAEO,UAAU;QAChB,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;QACxD,OAAO,IAAI,CAAA;;;;;mBAKI,IAAI,CAAC,kBAAkB,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI;aAC5D,mBAAmB,CAAC,MAAM,IAAI,UAAU,IAAI,IAAI,CAAC,YAAY;;UAE9D,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA;;;uBAGO,IAAI,CAAC,kBAAkB,CAAC,MAAM;;+CAEN,IAAI,CAAC,cAAc,EAAE;yBAC3C;YACf,CAAC,CAAC,IAAI;UACN,IAAI,CAAC,YAAY;YACjB,CAAC,CAAC,IAAI,CAAA;;;uBAGO,IAAI,CAAC,mBAAmB,CAAC,MAAM;;;0BAG5B,IAAI,CAAC,sBAAsB;0BAC3B,IAAI,CAAC,mBAAmB;;;;;;;;yBAQzB;YACf,CAAC,CAAC,IAAI;;;;oBAII,CAAC,UAAU;qBACV,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;;;sBAG3B,IAAI,CAAC,iBAAiB;sBACtB,IAAI,CAAC,YAAY;wBACf,IAAI,CAAC,aAAa;;;;;;;;;YAS9B,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA,2BAA2B,IAAI,CAAC,WAAW,QAAQ;YACzD,CAAC,CAAC,IAAI;YACN,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,IAAI;YACvC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,IAAI;;;KAG5C,CAAC;IACJ,CAAC;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,OAAO,IAAI,CAAA,qDAAqD,CAAC;QACnE,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc;gBACzD,CAAC,CAAC,IAAI,CAAA;;;;wBAIU,IAAI,CAAC,MAAM;yBACV,IAAI,CAAC,4BAA4B;;;;;;;;;0BAShC,IAAI,CAAC,2BAA2B;;;;qBAIrC;gBACb,CAAC,CAAC,IAAI,CAAC;QACX,CAAC;IACH,CAAC;IAEO,UAAU;QAChB,OAAO,IAAI,CAAA;eACA,IAAI,CAAC,WAAW;wBACP,CAAC;IACvB,CAAC;IAEO,SAAS;QACf,OAAO,IAAI,CAAA;;aAEF,IAAI,CAAC,UAAU;eACb,IAAI,CAAC,eAAe;kBACjB,IAAI,CAAC,cAAc;qBAChB,CAAC;IACpB,CAAC;CACF;AAnqBC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACR;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACX;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACR;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACP;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACN;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACP;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;yCACX;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;0CAC3B;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;0CACC;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;mDACY;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oDACkC;AAG5D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;6CAC0B;AAGpD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACW;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;kDACP;AAGrC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACP;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;+CACxB;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4CAC5B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;2CAClC;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;uCACT;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAQpB;AAGP;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACH","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FormElement } from '../FormElement';\nimport { property } from 'lit/decorators.js';\nimport { Icon } from '../vectoricon';\nimport { Attachment, CustomEventType, Language } from '../interfaces';\nimport {\n formatFileSize,\n getClasses,\n postFormData,\n truncate,\n DEFAULT_MEDIA_ENDPOINT,\n WebResponse,\n isImageAttachment\n} from '../utils';\nimport { Completion } from '../completion/Completion';\nimport { Select } from '../select/Select';\nimport { TabPane } from '../tabpane/TabPane';\nimport { EventHandler } from '../RapidElement';\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: var(--compose-border, 1px solid var(--color-widget-border));\n transition: all ease-in-out var(--transition-speed);\n box-shadow: var(--compose-shadow, var(--widget-box-shadow));\n caret-color: var(--input-caret);\n }\n\n .drop-mask {\n opacity: 0;\n pointer-events: none;\n position: absolute;\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 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 .chatbox {\n --color-widget-border: none;\n --curvature-widget: var(\n --compose-curvature,\n var(--curvature) var(--curvature) 0px 0px\n );\n --textarea-min-height: var(--textarea-min-height, 4em);\n --widget-box-shadow: none;\n padding: var(--compose-padding, 0px);\n }\n\n .attachments {\n }\n .attachments-list {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0.2em;\n }\n .attachment-item {\n padding: 0.4em;\n }\n .attachment-item.error {\n background: #fff;\n color: rgba(250, 0, 0, 0.75);\n padding: 0.2em;\n margin: 0.3em 0.5em;\n border-radius: var(--curvature);\n display: block;\n }\n\n .remove-item {\n position: absolute;\n --icon-color: #ccc;\n background: #fff;\n border-radius: 99%;\n transform: scale(0);\n transition: transform 200ms linear;\n }\n\n .attachment-item:hover .remove-item {\n transform: scale(1);\n }\n\n .remove-item:hover {\n --icon-color: #333;\n cursor: pointer;\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 padding: 0em;\n background: #f9f9f9;\n border-bottom-left-radius: var(--curvature);\n border-bottom-right-radius: var(--curvature);\n border-top: solid 1px var(--color-widget-border);\n }\n\n #upload-input {\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 .language {\n margin-bottom: 0.6em;\n display: block;\n }\n\n .top-right {\n align-items: center;\n display: flex;\n }\n\n #send-button {\n margin: 0.3em;\n }\n\n temba-tabs {\n --focused-tab-color: #f4f4f4;\n }\n\n .quick-replies {\n margin: 0.8em;\n }\n\n .add-attachment {\n padding: 1em;\n background: #eee;\n border-radius: var(--curvature);\n color: #aaa;\n margin: 0.5em;\n }\n\n .add-attachment:hover {\n background: #e9e9e9;\n cursor: pointer;\n }\n\n temba-loading {\n margin: auto 1em;\n }\n\n .optins {\n padding: 1em;\n }\n `;\n }\n\n @property({ type: Number })\n index = 1;\n\n @property({ type: Number })\n maxAttachments = 3;\n\n @property({ type: Number })\n maxLength = 640;\n\n @property({ type: Boolean })\n completion: boolean;\n\n @property({ type: Boolean })\n chatbox: boolean;\n\n @property({ type: Boolean })\n attachments: boolean;\n\n @property({ type: Boolean })\n quickReplies: boolean;\n\n @property({ type: Boolean })\n optIns: 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 })\n currentText = '';\n\n @property({ type: String })\n initialText = '';\n\n @property({ type: String })\n accept = ''; //e.g. \".xls,.xlsx\"\n\n @property({ type: String, attribute: false })\n endpoint = DEFAULT_MEDIA_ENDPOINT;\n\n @property({ type: Boolean, attribute: false })\n uploading: boolean;\n\n @property({ type: Array })\n languages: Language[] = [];\n\n @property({ type: Array })\n currentAttachments: Attachment[] = [];\n\n @property({ type: Array })\n currentQuickReplies: { name: string; value: string }[] = [];\n\n @property({ type: Array })\n currentOptin: { name: string; uuid: string }[] = [];\n\n @property({ type: String })\n optinEndpoint = '/api/v2/optins.json';\n\n @property({ type: Array, attribute: false })\n failedAttachments: 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 @property({ type: Boolean, attribute: 'widget_only' })\n widgetOnly: boolean;\n\n @property({ type: Array })\n errors: string[];\n\n @property({ type: Object })\n langValues: {\n [lang: string]: {\n text: string;\n attachments: Attachment[];\n quick_replies: string[];\n optin?: { name: string; uuid: string };\n };\n } = {};\n\n @property({ type: String })\n currentLanguage = 'und';\n\n public constructor() {\n super();\n }\n\n private isBaseLanguage(): boolean {\n return (\n this.currentLanguage == 'und' \|\|\n this.currentLanguage == this.languages[0].iso\n );\n }\n\n private handleTabChanged() {\n const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n const tab = tabs.getCurrentTab();\n if (tab) {\n // check we are going for the first attachment\n if (tab.icon == 'attachment') {\n if (this.currentAttachments.length == 0) {\n this.handleUploadFileIconClicked();\n }\n }\n }\n }\n\n public getEventHandlers(): EventHandler[] {\n return [\n { event: CustomEventType.ContextChanged, method: this.handleTabChanged }\n ];\n }\n\n public firstUpdated(changes: Map<string, any>): void {\n super.firstUpdated(changes);\n\n if (changes.has('languages') && this.languages.length > 0) {\n this.currentLanguage = this.languages[0].iso;\n }\n\n if (changes.has('value')) {\n this.langValues = this.getDeserializedValue() \|\| {};\n }\n this.setFocusOnChatbox();\n }\n\n public updated(changes: Map<string, any>): void {\n super.updated(changes);\n\n if (changes.has('currentLanguage') && this.langValues) {\n let langValue = {\n text: '',\n attachments: [],\n quick_replies: []\n };\n\n if (this.currentLanguage in this.langValues) {\n langValue = this.langValues[this.currentLanguage];\n }\n\n this.currentText = langValue.text;\n this.initialText = langValue.text;\n this.currentAttachments = langValue.attachments;\n this.currentQuickReplies = (langValue.quick_replies \|\| []).map(\n (value) => {\n return { name: value, value };\n }\n );\n this.currentOptin = langValue['optin'] ? [langValue['optin']] : [];\n this.setFocusOnChatbox();\n\n // TODO: this feels like it shouldn't be needed\n const chatbox = this.shadowRoot.querySelector('.chatbox') as any;\n if (chatbox) {\n chatbox.value = this.initialText;\n }\n this.resetTabs();\n this.requestUpdate('currentAttachments');\n }\n\n if (\n (this.langValues &&\n (changes.has('currentText') \|\|\n changes.has('currentAttachments') \|\|\n changes.has('currentQuickReplies'))) \|\|\n changes.has('currentOptin')\n ) {\n this.toggleButton();\n\n const trimmed = this.currentText ? this.currentText.trim() : '';\n if (\n trimmed \|\|\n this.currentAttachments.length > 0 \|\|\n this.currentQuickReplies.length > 0\n ) {\n this.langValues[this.currentLanguage] = {\n text: trimmed,\n attachments: this.currentAttachments,\n quick_replies: this.currentQuickReplies.map((option) => option.value),\n optin: this.currentOptin.length > 0 ? this.currentOptin[0] : null\n };\n } else {\n delete this.langValues[this.currentLanguage];\n }\n this.fireCustomEvent(CustomEventType.ContentChanged, this.langValues);\n this.requestUpdate('langValues');\n this.setValue(this.langValues);\n }\n }\n\n private setFocusOnChatbox(): void {\n if (this.chatbox) {\n const completion = this.shadowRoot.querySelector(\n '.chatbox'\n ) as Completion;\n if (completion) {\n window.setTimeout(() => {\n completion.focus();\n // this.resetTabs();\n }, 0);\n }\n }\n }\n\n public reset(): void {\n (this.shadowRoot.querySelector('.chatbox') as HTMLInputElement).value = '';\n this.initialText = '';\n this.currentText = '';\n this.currentQuickReplies = [];\n this.currentAttachments = [];\n this.failedAttachments = [];\n this.buttonError = '';\n }\n\n private handleQuickReplyChange() {\n this.requestUpdate('currentQuickReplies');\n }\n\n private handleOptInChange(event: InputEvent) {\n this.currentOptin = (event.target as any).values;\n this.requestUpdate('optIn');\n }\n\n private handleChatboxChange(evt: Event) {\n const chatbox = evt.target as HTMLInputElement;\n this.currentText = chatbox.value;\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 if (this.canAcceptAttachments()) {\n this.unhighlight(evt);\n const dt = evt.dataTransfer;\n if (dt) {\n const files = dt.files;\n this.uploadFiles(files);\n }\n }\n }\n\n private preventDefaults(evt: Event): void {\n evt.preventDefault();\n evt.stopPropagation();\n }\n\n private highlight(evt: DragEvent): void {\n if (this.canAcceptAttachments()) {\n this.pendingDrop = true;\n this.preventDefaults(evt);\n }\n }\n\n private unhighlight(evt: DragEvent): void {\n if (this.canAcceptAttachments()) {\n this.pendingDrop = false;\n this.preventDefaults(evt);\n }\n }\n\n private handleUploadFileIconClicked(): void {\n this.dispatchEvent(new Event('change'));\n }\n\n private handleUploadFileInputChanged(evt: Event): void {\n const target = evt.target as HTMLInputElement;\n const files = target.files;\n this.uploadFiles(files);\n }\n\n public canAcceptAttachments() {\n return (\n this.attachments && this.currentAttachments.length < this.maxAttachments\n );\n }\n\n public uploadFiles(files: FileList): void {\n let filesToUpload = [];\n if (this.currentAttachments && this.currentAttachments.length > 0) {\n //remove duplicate files that have already been uploaded\n filesToUpload = [...files].filter((file) => {\n const index = this.currentAttachments.findIndex(\n (value) => value.filename === 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 (this.currentAttachments.length >= this.maxAttachments) {\n this.addFailedAttachment(file, 'Too many attachments');\n } else {\n const attachment = response.json as Attachment;\n if (attachment) {\n this.addCurrentAttachment(attachment);\n }\n }\n })\n .catch((error: WebResponse) => {\n let uploadError = '';\n if (error.status === 400) {\n uploadError = error.json.file[0];\n } else {\n uploadError = 'Server failure';\n }\n console.error(uploadError);\n this.addFailedAttachment(file, uploadError);\n })\n .finally(() => {\n this.uploading = false;\n });\n }\n\n private addCurrentAttachment(attachmentToAdd: any) {\n this.currentAttachments.push(attachmentToAdd);\n this.requestUpdate('currentAttachments');\n }\n private removeCurrentAttachment(attachmentToRemove: any) {\n this.currentAttachments = this.currentAttachments.filter(\n (currentAttachment) => currentAttachment !== attachmentToRemove\n );\n this.requestUpdate('currentAttachments');\n }\n\n private addFailedAttachment(file: File, error: string) {\n const failedAttachment = {\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.failedAttachments.push(failedAttachment);\n this.requestUpdate('failedAttachments');\n }\n private removeFailedAttachment(attachmentToRemove: any) {\n this.failedAttachments = this.failedAttachments.filter(\n (failedAttachment: any) => failedAttachment !== attachmentToRemove\n );\n this.requestUpdate('failedAttachments');\n }\n\n private handleRemoveFileClicked(evt: Event): void {\n const target = evt.target as HTMLDivElement;\n\n const currentAttachmentToRemove = this.currentAttachments.find(\n ({ uuid }) => uuid === target.id\n );\n if (currentAttachmentToRemove) {\n this.removeCurrentAttachment(currentAttachmentToRemove);\n }\n\n const failedAttachmentToRemove = this.failedAttachments.find(\n ({ uuid }) => uuid === target.id\n );\n if (failedAttachmentToRemove) {\n this.removeFailedAttachment(failedAttachmentToRemove);\n }\n }\n\n public toggleButton() {\n if (this.button) {\n this.buttonError = '';\n const chatboxEmpty = this.currentText.trim().length === 0;\n const attachmentsEmpty = this.currentAttachments.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(evt: Event) {\n evt.stopPropagation();\n this.handleSend();\n }\n\n private handleSendEnter(evt: KeyboardEvent) {\n if (this.button) {\n if (evt.key === 'Enter' && !evt.shiftKey) {\n if (this.completion) {\n const chat = evt.target as Completion;\n if (!chat.hasVisibleOptions()) {\n this.handleSend();\n this.preventDefaults(evt);\n }\n } else {\n this.handleSend();\n this.preventDefaults(evt);\n }\n }\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 handleLanguageChange(evt: Event) {\n const select = evt.target as Select;\n this.currentLanguage = select.values[0].iso;\n }\n\n public resetTabs() {\n (this.shadowRoot.querySelector('temba-tabs') as TabPane).index = -1;\n }\n\n public render(): TemplateResult {\n return html`\n <temba-field\n name=${this.name}\n .errors=${this.errors}\n .widgetOnly=${this.widgetOnly}\n .value=${this.value}\n >\n ${this.languages.length > 1\n ? html`<temba-select\n @change=${this.handleLanguageChange}\n class=\"language\"\n name=\"language\"\n .staticOptions=${this.languages}\n valueKey=\"iso\"\n >\n </temba-select>`\n : null}\n\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 ? html`${this.getChatbox()}` : null}\n\n <div class=\"items actions\">${this.getActions()}</div>\n </div>\n </temba-field>\n `;\n }\n\n private getChatbox(): TemplateResult {\n if (this.completion) {\n return html`<temba-completion\n class=\"chatbox\"\n .value=${this.initialText}\n gsm\n textarea\n autogrow\n maxlength=${this.maxLength}\n @change=${this.handleChatboxChange}\n @keydown=${this.handleSendEnter}\n placeholder=\"Write something here\"\n >\n </temba-completion>`;\n } else {\n return html`<temba-textinput\n class=\"chatbox\"\n gsm\n textarea\n autogrow\n maxlength=${this.maxLength}\n .value=${this.initialText}\n @change=${this.handleChatboxChange}\n @keydown=${this.handleSendEnter}\n placeholder=\"Write something here\"\n >\n </temba-textinput>`;\n }\n }\n\n private getAttachments(): TemplateResult {\n return html`\n ${this.attachments\n ? html` <div class=\"attachments-list\">\n ${this.currentAttachments.map((validAttachment) => {\n return html` <div class=\"attachment-item\">\n <temba-icon\n class=\"remove-item\"\n @click=\"${this.handleRemoveFileClicked}\"\n id=\"${validAttachment.uuid}\"\n name=\"${Icon.delete_small}\"\n ></temba-icon>\n ${isImageAttachment(validAttachment)\n ? html`<temba-thumbnail\n url=\"${validAttachment.url}\"\n ></temba-thumbnail>`\n : html`<temba-thumbnail\n label=\"${validAttachment.content_type.split('/')[1]}\"\n ></temba-thumbnail>`}\n </div>`;\n })}\n ${this.getUploader()}\n </div>\n ${this.failedAttachments.map((invalidAttachment) => {\n return html` <div class=\"attachment-item error\">\n <div\n class=\"remove-item error\"\n @click=\"${this.handleRemoveFileClicked}\"\n >\n <temba-icon\n id=\"${invalidAttachment.uuid}\"\n name=\"${Icon.delete_small}\"\n ></temba-icon>\n </div>\n <div class=\"attachment-name\">\n <span\n title=\"${invalidAttachment.filename} (${formatFileSize(\n 0,\n 0\n )}) - Attachment failed - ${invalidAttachment.error}\"\n >${truncate(invalidAttachment.filename, 25)}\n (${formatFileSize(0, 0)}) - Attachment failed</span\n >\n </div>\n </div>`;\n })}`\n : null}\n `;\n }\n\n private getActions(): TemplateResult {\n const showOptins = this.optIns && this.isBaseLanguage();\n return html`\n <temba-tabs\n embedded\n focusedname\n bottom\n refresh=\"${this.currentAttachments.length}\|${this.index}\|${this\n .currentQuickReplies.length}\|${showOptins}\|${this.currentOptin}\"\n >\n ${this.attachments\n ? html`<temba-tab\n name=\"Attachments\"\n icon=\"attachment\"\n .count=${this.currentAttachments.length}\n >\n <div class=\"items attachments\">${this.getAttachments()}</div>\n </temba-tab>`\n : null}\n ${this.quickReplies\n ? html`<temba-tab\n name=\"Quick Replies\"\n icon=\"quick_replies\"\n .count=${this.currentQuickReplies.length}\n >\n <temba-select\n @change=${this.handleQuickReplyChange}\n .values=${this.currentQuickReplies}\n class=\"quick-replies\"\n tags\n multi\n searchable\n expressions\n placeholder=\"Add Quick Reply\"\n ></temba-select>\n </temba-tab>`\n : null}\n <temba-tab\n name=\"Opt-in\"\n icon=\"channel_fba\"\n ?hidden=${!showOptins}\n ?checked=${this.currentOptin.length > 0}\n >\n <temba-select\n @change=${this.handleOptInChange}\n .values=${this.currentOptin}\n endpoint=\"${this.optinEndpoint}\"\n class=\"optins\"\n searchable\n clearable\n placeholder=\"Select an opt-in to use for Facebook (optional)\"\n ></temba-select>\n </temba-tab>\n\n <div slot=\"tab-right\" class=\"top-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 </temba-tabs>\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 this.currentAttachments.length < this.maxAttachments\n ? html`<input\n type=\"file\"\n id=\"upload-input\"\n multiple\n accept=\"${this.accept}\"\n @change=\"${this.handleUploadFileInputChanged}\"\n />\n <label\n id=\"upload-label\"\n class=\"actions-left upload-label\"\n for=\"upload-input\"\n >\n <div\n class=\"add-attachment\"\n @click=\"${this.handleUploadFileIconClicked}\"\n >\n <temba-icon name=\"add\" size=\"1.5\"></temba-icon>\n </div>\n </label>`\n : null;\n }\n }\n\n private getCounter(): TemplateResult {\n return html`<temba-charcount\n .text=\"${this.currentText}\"\n ></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"]}
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 { Attachment, CustomEventType, Language } from '../interfaces';\nimport { DEFAULT_MEDIA_ENDPOINT } from '../utils';\nimport { Completion } from '../completion/Completion';\nimport { Select } from '../select/Select';\nimport { TabPane } from '../tabpane/TabPane';\nimport { EventHandler } from '../RapidElement';\nimport { MediaPicker } from '../mediapicker/MediaPicker';\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: var(--compose-border, 1px solid var(--color-widget-border));\n transition: all ease-in-out var(--transition-speed);\n box-shadow: var(--compose-shadow, var(--widget-box-shadow));\n caret-color: var(--input-caret);\n }\n\n .chatbox {\n --color-widget-border: none;\n --curvature-widget: var(\n --compose-curvature,\n var(--curvature) var(--curvature) 0px 0px\n );\n --textarea-min-height: var(--textarea-min-height, 4em);\n --widget-box-shadow: none;\n padding: var(--compose-padding, 0px);\n }\n\n .actions {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0em;\n background: #f9f9f9;\n border-bottom-left-radius: var(--curvature);\n border-bottom-right-radius: var(--curvature);\n border-top: solid 1px var(--color-widget-border);\n }\n\n .actions-right {\n display: flex;\n align-items: center;\n }\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\n temba-button {\n --button-y: 1px;\n --button-x: 12px;\n }\n\n .send-error {\n color: rgba(250, 0, 0, 0.75);\n font-size: var(--help-text-size);\n }\n\n .language {\n margin-bottom: 0.6em;\n display: block;\n }\n\n .top-right {\n align-items: center;\n display: flex;\n }\n\n #send-button {\n margin: 0.3em;\n }\n\n temba-tabs {\n --focused-tab-color: #f4f4f4;\n }\n\n .quick-replies {\n margin: 0.8em;\n }\n\n .optins {\n padding: 1em;\n }\n\n .attachments {\n }\n `;\n }\n\n @property({ type: Number })\n index = 1;\n\n @property({ type: Number })\n maxAttachments = 3;\n\n @property({ type: Number })\n maxLength = 640;\n\n @property({ type: Boolean })\n completion: boolean;\n\n @property({ type: Boolean })\n chatbox: boolean;\n\n @property({ type: Boolean })\n attachments: boolean;\n\n @property({ type: Boolean })\n quickReplies: boolean;\n\n @property({ type: Boolean })\n optIns: boolean;\n\n @property({ type: Boolean })\n counter: boolean;\n\n @property({ type: Boolean })\n button: boolean;\n\n @property({ type: String })\n currentText = '';\n\n @property({ type: String })\n initialText = '';\n\n @property({ type: String })\n accept = ''; //e.g. \".xls,.xlsx\"\n\n @property({ type: String, attribute: false })\n endpoint = DEFAULT_MEDIA_ENDPOINT;\n\n @property({ type: Boolean, attribute: false })\n uploading: boolean;\n\n @property({ type: Array })\n languages: Language[] = [];\n\n @property({ type: Array })\n currentAttachments: Attachment[] = [];\n\n @property({ type: Array })\n currentQuickReplies: { name: string; value: string }[] = [];\n\n @property({ type: Array })\n currentOptin: { name: string; uuid: string }[] = [];\n\n @property({ type: String })\n optinEndpoint = '/api/v2/optins.json';\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 @property({ type: Boolean, attribute: 'widget_only' })\n widgetOnly: boolean;\n\n @property({ type: Array })\n errors: string[];\n\n @property({ type: Object })\n langValues: {\n [lang: string]: {\n text: string;\n attachments: Attachment[];\n quick_replies: string[];\n optin?: { name: string; uuid: string };\n };\n } = {};\n\n @property({ type: String })\n currentLanguage = 'und';\n\n public constructor() {\n super();\n }\n\n private isBaseLanguage(): boolean {\n return (\n this.currentLanguage == 'und' \|\|\n this.currentLanguage == this.languages[0].iso\n );\n }\n\n private handleTabChanged() {\n const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n const tab = tabs.getCurrentTab();\n if (tab) {\n // check we are going for the first attachment\n if (tab.icon == 'attachment') {\n // show the media picker?\n }\n }\n }\n\n public getEventHandlers(): EventHandler[] {\n return [\n { event: CustomEventType.ContextChanged, method: this.handleTabChanged }\n ];\n }\n\n public firstUpdated(changes: Map<string, any>): void {\n super.firstUpdated(changes);\n\n if (changes.has('languages') && this.languages.length > 0) {\n this.currentLanguage = this.languages[0].iso;\n }\n\n if (changes.has('value')) {\n this.langValues = this.getDeserializedValue() \|\| {};\n }\n this.setFocusOnChatbox();\n }\n\n public updated(changes: Map<string, any>): void {\n super.updated(changes);\n\n if (changes.has('currentLanguage') && this.langValues) {\n let langValue = {\n text: '',\n attachments: [],\n quick_replies: []\n };\n\n if (this.currentLanguage in this.langValues) {\n langValue = this.langValues[this.currentLanguage];\n }\n\n this.currentText = langValue.text;\n this.initialText = langValue.text;\n this.currentAttachments = langValue.attachments;\n this.currentQuickReplies = (langValue.quick_replies \|\| []).map(\n (value) => {\n return { name: value, value };\n }\n );\n this.currentOptin = langValue['optin'] ? [langValue['optin']] : [];\n this.setFocusOnChatbox();\n\n // TODO: this feels like it shouldn't be needed\n const chatbox = this.shadowRoot.querySelector('.chatbox') as any;\n if (chatbox) {\n chatbox.value = this.initialText;\n }\n this.resetTabs();\n this.requestUpdate('currentAttachments');\n }\n\n if (\n (this.langValues &&\n (changes.has('currentText') \|\|\n changes.has('currentAttachments') \|\|\n changes.has('currentQuickReplies'))) \|\|\n changes.has('currentOptin')\n ) {\n this.toggleButton();\n\n const trimmed = this.currentText ? this.currentText.trim() : '';\n if (\n trimmed \|\|\n this.currentAttachments.length > 0 \|\|\n this.currentQuickReplies.length > 0\n ) {\n this.langValues[this.currentLanguage] = {\n text: trimmed,\n attachments: this.currentAttachments,\n quick_replies: this.currentQuickReplies.map((option) => option.value),\n optin: this.currentOptin.length > 0 ? this.currentOptin[0] : null\n };\n } else {\n delete this.langValues[this.currentLanguage];\n }\n this.fireCustomEvent(CustomEventType.ContentChanged, this.langValues);\n this.requestUpdate('langValues');\n this.setValue(this.langValues);\n }\n }\n\n private handleAttachmentsChanged(event: CustomEvent) {\n const media = event.target as MediaPicker;\n this.currentAttachments = media.attachments;\n this.requestUpdate();\n }\n\n private setFocusOnChatbox(): void {\n if (this.chatbox) {\n const completion = this.shadowRoot.querySelector(\n '.chatbox'\n ) as Completion;\n if (completion) {\n window.setTimeout(() => {\n completion.focus();\n // this.resetTabs();\n }, 0);\n }\n }\n }\n\n public reset(): void {\n (this.shadowRoot.querySelector('.chatbox') as HTMLInputElement).value = '';\n this.initialText = '';\n this.currentText = '';\n this.currentQuickReplies = [];\n this.currentAttachments = [];\n this.buttonError = '';\n }\n\n private handleQuickReplyChange() {\n this.requestUpdate('currentQuickReplies');\n }\n\n private handleOptInChange(event: InputEvent) {\n this.currentOptin = (event.target as any).values;\n this.requestUpdate('optIn');\n }\n\n private handleChatboxChange(evt: Event) {\n const chatbox = evt.target as HTMLInputElement;\n this.currentText = chatbox.value;\n }\n\n public toggleButton() {\n if (this.button) {\n this.buttonError = '';\n const chatboxEmpty = this.currentText.trim().length === 0;\n const attachmentsEmpty = this.currentAttachments.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(evt: Event) {\n evt.stopPropagation();\n this.handleSend();\n }\n\n private handleSendEnter(evt: KeyboardEvent) {\n if (this.button) {\n if (evt.key === 'Enter' && !evt.shiftKey) {\n if (this.completion) {\n const chat = evt.target as Completion;\n if (!chat.hasVisibleOptions()) {\n this.handleSend();\n }\n } else {\n this.handleSend();\n }\n }\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 handleLanguageChange(evt: Event) {\n const select = evt.target as Select;\n this.currentLanguage = select.values[0].iso;\n }\n\n public resetTabs() {\n (this.shadowRoot.querySelector('temba-tabs') as TabPane).index = -1;\n }\n\n public render(): TemplateResult {\n return html`\n <temba-field\n name=${this.name}\n .errors=${this.errors}\n .widgetOnly=${this.widgetOnly}\n .value=${this.value}\n >\n ${this.languages.length > 1\n ? html`<temba-select\n @change=${this.handleLanguageChange}\n class=\"language\"\n name=\"language\"\n .staticOptions=${this.languages}\n valueKey=\"iso\"\n >\n </temba-select>`\n : null}\n <div class=\"container\">\n ${this.chatbox ? html`${this.getChatbox()}` : null}\n <div class=\"items actions\">${this.getActions()}</div>\n </div>\n </temba-field>\n `;\n }\n\n private getChatbox(): TemplateResult {\n if (this.completion) {\n return html`<temba-completion\n class=\"chatbox\"\n .value=${this.initialText}\n gsm\n textarea\n autogrow\n maxlength=${this.maxLength}\n @change=${this.handleChatboxChange}\n @keydown=${this.handleSendEnter}\n placeholder=\"Write something here\"\n >\n </temba-completion>`;\n } else {\n return html`<temba-textinput\n class=\"chatbox\"\n gsm\n textarea\n autogrow\n maxlength=${this.maxLength}\n .value=${this.initialText}\n @change=${this.handleChatboxChange}\n @keydown=${this.handleSendEnter}\n placeholder=\"Write something here\"\n >\n </temba-textinput>`;\n }\n }\n\n private getActions(): TemplateResult {\n const showOptins = this.optIns && this.isBaseLanguage();\n return html`\n <temba-tabs\n embedded\n focusedname\n bottom\n refresh=\"${this.currentAttachments.length}\|${this.index}\|${this\n .currentQuickReplies.length}\|${showOptins}\|${this.currentOptin}\"\n >\n ${this.attachments\n ? html`<temba-tab\n name=\"Attachments\"\n icon=\"attachment\"\n .count=${this.currentAttachments.length}\n >\n <div class=\"items attachments\">\n <temba-media-picker\n accept=${this.accept}\n max=${this.maxAttachments}\n attachments=${JSON.stringify(this.currentAttachments)}\n @change=${this.handleAttachmentsChanged.bind(this)}\n ></temba-media-picker>\n </div>\n </temba-tab>`\n : null}\n ${this.quickReplies\n ? html`<temba-tab\n name=\"Quick Replies\"\n icon=\"quick_replies\"\n .count=${this.currentQuickReplies.length}\n >\n <temba-select\n @change=${this.handleQuickReplyChange}\n .values=${this.currentQuickReplies}\n class=\"quick-replies\"\n tags\n multi\n searchable\n expressions\n placeholder=\"Add Quick Reply\"\n ></temba-select>\n </temba-tab>`\n : null}\n <temba-tab\n name=\"Opt-in\"\n icon=\"channel_fba\"\n ?hidden=${!showOptins}\n ?checked=${this.currentOptin.length > 0}\n >\n <temba-select\n @change=${this.handleOptInChange}\n .values=${this.currentOptin}\n endpoint=\"${this.optinEndpoint}\"\n class=\"optins\"\n searchable\n clearable\n placeholder=\"Select an opt-in to use for Facebook (optional)\"\n ></temba-select>\n </temba-tab>\n\n <div slot=\"tab-right\" class=\"top-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 </temba-tabs>\n `;\n }\n\n private getCounter(): TemplateResult {\n return html`<temba-charcount\n .text=\"${this.currentText}\"\n ></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"]}