@nyaruka/temba-components 0.89.0 → 0.90.0

package/out-tsc/src/mediapicker/MediaPicker.js

@@ -0,0 +1,312 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { RapidElement } from '../RapidElement';
+import { property } from 'lit/decorators.js';
+import { Icon } from '../vectoricon';
+import { DEFAULT_MEDIA_ENDPOINT, getClasses, isImageAttachment, postFormData } from '../utils';
+const verifyAccept = (type, accept) => {
+    if (accept) {
+        const allowed = accept.split(',').map((x) => x.trim());
+        return (allowed.includes(type) || allowed.includes(type.split('/')[0] + '/*'));
+    }
+    return true;
+};
+export class MediaPicker extends RapidElement {
+    constructor() {
+        super(...arguments);
+        this.endpoint = DEFAULT_MEDIA_ENDPOINT;
+        this.icon = Icon.add;
+        this.accept = ''; //e.g. ".xls,.xlsx"
+        this.max = 3;
+        this.attachments = [];
+    }
+    static get styles() {
+        return css `
+      .drop-mask {
+        border-radius: var(--curvature-widget);
+        transition: opacity ease-in-out var(--transition-speed);
+      }
+
+      .highlight .drop-mask {
+        background: rgba(210, 243, 184, 0.8);
+      }
+
+      .drop-mask > div {
+        margin: auto;
+        border-radius: var(--curvature-widget);
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.5);
+      }
+
+      .attachments {
+      }
+
+      .attachments-list {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        padding: 0.2em;
+      }
+
+      .attachment-item {
+        padding: 0.4em;
+        padding-top: 1em;
+      }
+
+      .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 {
+        --icon-color: #ccc;
+        background: #fff;
+        border-radius: 99%;
+        transition: transform 200ms linear;
+        transform: scale(0);
+        display: block;
+        margin-bottom: -24px;
+        margin-left: 10px;
+        width: 1em;
+        height: 1em;
+      }
+
+      .attachment-item:hover .remove-item {
+        transform: scale(1);
+      }
+
+      .remove-item:hover {
+        --icon-color: #333;
+        cursor: pointer;
+      }
+
+      .attachment-name {
+        align-self: center;
+        font-size: 12px;
+        padding: 2px 8px;
+      }
+
+      #upload-input {
+        display: none;
+      }
+
+      .upload-label {
+        display: flex;
+        align-items: center;
+      }
+
+      .upload-icon {
+        color: rgb(102, 102, 102);
+      }
+
+      .add-attachment {
+        padding: 1em;
+        background-color: rgba(0, 0, 0, 0.05);
+        border-radius: var(--curvature);
+        color: #aaa;
+        margin: 0.5em;
+      }
+
+      .add-attachment:hover {
+        background-color: rgba(0, 0, 0, 0.07);
+        cursor: pointer;
+      }
+    `;
+    }
+    updated(changes) {
+        super.updated(changes);
+        if (changes.has('attachments')) {
+            // wait one cycle to fire change for tests
+            setTimeout(() => {
+                this.dispatchEvent(new Event('change'));
+            }, 0);
+        }
+    }
+    getAcceptableFiles(evt) {
+        const dt = evt.dataTransfer;
+        if (dt) {
+            const files = [...dt.files];
+            return files.filter((file) => verifyAccept(file.type, this.accept));
+        }
+    }
+    handleDragEnter(evt) {
+        this.highlight(evt);
+    }
+    handleDragOver(evt) {
+        this.highlight(evt);
+    }
+    handleDragLeave(evt) {
+        this.unhighlight(evt);
+    }
+    handleDrop(evt) {
+        this.unhighlight(evt);
+        if (this.canAcceptAttachments()) {
+            this.uploadFiles(this.getAcceptableFiles(evt));
+        }
+    }
+    canAcceptAttachments() {
+        return this.attachments.length < this.max;
+    }
+    highlight(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        if (this.canAcceptAttachments()) {
+            this.pendingDrop = true;
+        }
+    }
+    unhighlight(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.pendingDrop = false;
+    }
+    addCurrentAttachment(attachmentToAdd) {
+        this.attachments.push(attachmentToAdd);
+        this.requestUpdate('attachments');
+    }
+    removeCurrentAttachment(attachmentToRemove) {
+        this.attachments = this.attachments.filter((currentAttachment) => currentAttachment !== attachmentToRemove);
+        this.requestUpdate('attachments');
+    }
+    handleRemoveFileClicked(evt) {
+        const target = evt.target;
+        const currentAttachmentToRemove = this.attachments.find(({ url }) => url === target.id);
+        if (currentAttachmentToRemove) {
+            this.removeCurrentAttachment(currentAttachmentToRemove);
+        }
+    }
+    handleUploadFileInputChanged(evt) {
+        const target = evt.target;
+        const files = target.files;
+        this.uploadFiles([...files]);
+    }
+    uploadFiles(files) {
+        let filesToUpload = [];
+        //remove duplicate files that have already been uploaded
+        filesToUpload = files.filter((file) => {
+            // check our file type against accepts
+            if (this.accept) {
+                if (!verifyAccept(file.type, this.accept)) {
+                    return false;
+                }
+            }
+            const index = this.attachments.findIndex((value) => value.filename === file.name && value.size === file.size);
+            if (index === -1) {
+                return file;
+            }
+        });
+        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.attachments.length < this.max) {
+                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);
+        })
+            .finally(() => {
+            this.uploading = false;
+        });
+    }
+    renderUploader() {
+        if (this.uploading) {
+            return html `<temba-loading units="3" size="12"></temba-loading>`;
+        }
+        else {
+            return this.attachments.length < this.max
+                ? html `<input
+              type="file"
+              id="upload-input"
+              ?multiple=${this.max > 1}
+              accept="${this.accept}"
+              @change="${this.handleUploadFileInputChanged}"
+            />
+            <label
+              id="upload-label"
+              class="actions-left upload-label"
+              for="upload-input"
+            >
+              <div class="add-attachment">
+                <temba-icon name="${this.icon}" size="1.5"></temba-icon>
+              </div>
+            </label>`
+                : null;
+        }
+    }
+    render() {
+        return html ` <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 class="attachments-list">
+          ${this.attachments.map((validAttachment) => {
+            return html `<div class="attachment-item">
+              <temba-icon
+                class="remove-item"
+                @click="${this.handleRemoveFileClicked}"
+                id="${validAttachment.url}"
+                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.renderUploader()}
+        </div>
+      </div>
+    </div>`;
+    }
+}
+__decorate([
+    property({ type: String, attribute: false })
+], MediaPicker.prototype, "endpoint", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediaPicker.prototype, "pendingDrop", void 0);
+__decorate([
+    property({ type: String })
+], MediaPicker.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], MediaPicker.prototype, "accept", void 0);
+__decorate([
+    property({ type: Number })
+], MediaPicker.prototype, "max", void 0);
+__decorate([
+    property({ type: Array })
+], MediaPicker.prototype, "attachments", void 0);
+__decorate([
+    property({ type: Boolean, attribute: false })
+], MediaPicker.prototype, "uploading", void 0);
+//# sourceMappingURL=MediaPicker.js.map

package/out-tsc/src/mediapicker/MediaPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaPicker.js","sourceRoot":"","sources":["../../../src/mediapicker/MediaPicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, css, html } from 'lit';\nimport { RapidElement } from '../RapidElement';\nimport { property } from 'lit/decorators.js';\nimport { Attachment } from '../interfaces';\nimport { Icon } from '../vectoricon';\nimport {\n  DEFAULT_MEDIA_ENDPOINT,\n  WebResponse,\n  getClasses,\n  isImageAttachment,\n  postFormData\n} from '../utils';\n\nconst verifyAccept = (type: string, accept: string): boolean => {\n  if (accept) {\n    const allowed = accept.split(',').map((x) => x.trim());\n    return (\n      allowed.includes(type) || allowed.includes(type.split('/')[0] + '/*')\n    );\n  }\n  return true;\n};\n\nexport class MediaPicker extends RapidElement {\n  static get styles() {\n    return css`\n      .drop-mask {\n        border-radius: var(--curvature-widget);\n        transition: opacity ease-in-out var(--transition-speed);\n      }\n\n      .highlight .drop-mask {\n        background: rgba(210, 243, 184, 0.8);\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      .attachments {\n      }\n\n      .attachments-list {\n        display: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n        padding: 0.2em;\n      }\n\n      .attachment-item {\n        padding: 0.4em;\n        padding-top: 1em;\n      }\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        --icon-color: #ccc;\n        background: #fff;\n        border-radius: 99%;\n        transition: transform 200ms linear;\n        transform: scale(0);\n        display: block;\n        margin-bottom: -24px;\n        margin-left: 10px;\n        width: 1em;\n        height: 1em;\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      .attachment-name {\n        align-self: center;\n        font-size: 12px;\n        padding: 2px 8px;\n      }\n\n      #upload-input {\n        display: none;\n      }\n\n      .upload-label {\n        display: flex;\n        align-items: center;\n      }\n\n      .upload-icon {\n        color: rgb(102, 102, 102);\n      }\n\n      .add-attachment {\n        padding: 1em;\n        background-color: rgba(0, 0, 0, 0.05);\n        border-radius: var(--curvature);\n        color: #aaa;\n        margin: 0.5em;\n      }\n\n      .add-attachment:hover {\n        background-color: rgba(0, 0, 0, 0.07);\n        cursor: pointer;\n      }\n    `;\n  }\n\n  @property({ type: String, attribute: false })\n  endpoint = DEFAULT_MEDIA_ENDPOINT;\n\n  @property({ type: Boolean })\n  pendingDrop: boolean;\n\n  @property({ type: String })\n  icon = Icon.add;\n\n  @property({ type: String })\n  accept = ''; //e.g. \".xls,.xlsx\"\n\n  @property({ type: Number })\n  max = 3;\n\n  @property({ type: Array })\n  attachments: Attachment[] = [];\n\n  @property({ type: Boolean, attribute: false })\n  uploading: boolean;\n\n  public updated(changes: Map<string, any>): void {\n    super.updated(changes);\n    if (changes.has('attachments')) {\n      // wait one cycle to fire change for tests\n      setTimeout(() => {\n        this.dispatchEvent(new Event('change'));\n      }, 0);\n    }\n  }\n\n  private getAcceptableFiles(evt: DragEvent): File[] {\n    const dt = evt.dataTransfer;\n    if (dt) {\n      const files = [...dt.files];\n      return files.filter((file) => verifyAccept(file.type, this.accept));\n    }\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    if (this.canAcceptAttachments()) {\n      this.uploadFiles(this.getAcceptableFiles(evt));\n    }\n  }\n\n  public canAcceptAttachments() {\n    return this.attachments.length < this.max;\n  }\n\n  private highlight(evt: DragEvent): void {\n    evt.preventDefault();\n    evt.stopPropagation();\n    if (this.canAcceptAttachments()) {\n      this.pendingDrop = true;\n    }\n  }\n\n  private unhighlight(evt: DragEvent): void {\n    evt.preventDefault();\n    evt.stopPropagation();\n    this.pendingDrop = false;\n  }\n\n  private addCurrentAttachment(attachmentToAdd: any) {\n    this.attachments.push(attachmentToAdd);\n    this.requestUpdate('attachments');\n  }\n\n  private removeCurrentAttachment(attachmentToRemove: any) {\n    this.attachments = this.attachments.filter(\n      (currentAttachment) => currentAttachment !== attachmentToRemove\n    );\n    this.requestUpdate('attachments');\n  }\n\n  private handleRemoveFileClicked(evt: Event): void {\n    const target = evt.target as HTMLDivElement;\n    const currentAttachmentToRemove = this.attachments.find(\n      ({ url }) => url === target.id\n    );\n    if (currentAttachmentToRemove) {\n      this.removeCurrentAttachment(currentAttachmentToRemove);\n    }\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 uploadFiles(files: File[]): void {\n    let filesToUpload = [];\n\n    //remove duplicate files that have already been uploaded\n    filesToUpload = files.filter((file) => {\n      // check our file type against accepts\n      if (this.accept) {\n        if (!verifyAccept(file.type, this.accept)) {\n          return false;\n        }\n      }\n\n      const index = this.attachments.findIndex(\n        (value) => value.filename === file.name && value.size === file.size\n      );\n      if (index === -1) {\n        return file;\n      }\n    });\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.attachments.length < this.max) {\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      })\n      .finally(() => {\n        this.uploading = false;\n      });\n  }\n\n  private renderUploader(): TemplateResult {\n    if (this.uploading) {\n      return html`<temba-loading units=\"3\" size=\"12\"></temba-loading>`;\n    } else {\n      return this.attachments.length < this.max\n        ? html`<input\n              type=\"file\"\n              id=\"upload-input\"\n              ?multiple=${this.max > 1}\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 class=\"add-attachment\">\n                <temba-icon name=\"${this.icon}\" size=\"1.5\"></temba-icon>\n              </div>\n            </label>`\n        : null;\n    }\n  }\n\n  public render(): TemplateResult {\n    return html` <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\">\n        <div class=\"attachments-list\">\n          ${this.attachments.map((validAttachment) => {\n            return html`<div class=\"attachment-item\">\n              <temba-icon\n                class=\"remove-item\"\n                @click=\"${this.handleRemoveFileClicked}\"\n                id=\"${validAttachment.url}\"\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.renderUploader()}\n        </div>\n      </div>\n    </div>`;\n  }\n}\n"]}

package/out-tsc/src/templates/TemplateEditor.js

@@ -17,6 +17,11 @@ export class TemplateEditor extends FormElement {
         padding: 1em;
         margin-top: 1em;
       }
+
+      .content {
+        margin-bottom: 1em;
+      }
+
       .picker {
         margin-bottom: 0.5em;
         display: block;
@@ -45,7 +50,6 @@ export class TemplateEditor extends FormElement {
       }
 
       .button-wrapper {
-        margin-top: 1em;
         background: #f9f9f9;
         border-radius: var(--curvature);
         padding: 0.5em;
@@ -101,6 +105,9 @@ export class TemplateEditor extends FormElement {
         border: 1px solid var(--color-widget-border);
         padding: 1em;
         line-height: 2.2em;
+        max-height: 50vh;
+        overflow-y: auto;
+        overflow-x: hidden;
       }
     `;
     }
@@ -142,10 +149,30 @@ export class TemplateEditor extends FormElement {
             variables: this.variables
         });
     }
+    handleAttachmentsChanged(event) {
+        const media = event.target;
+        const index = parseInt(media.getAttribute('index'));
+        if (media.attachments.length === 0) {
+            this.variables[index] = '';
+        }
+        else {
+            const attachment = media.attachments[0];
+            if (attachment.url && attachment.content_type) {
+                this.variables[index] = `${attachment.content_type}:${attachment.url}`;
+            }
+            else {
+                this.variables[index] = ``;
+            }
+        }
+        this.fireContentChange();
+    }
     handleVariableChanged(event) {
         const target = event.target;
         const variableIndex = parseInt(target.getAttribute('index'));
         this.variables[variableIndex] = target.value;
+        this.fireContentChange();
+    }
+    fireContentChange() {
         this.fireCustomEvent(CustomEventType.ContentChanged, {
             template: this.selectedTemplate,
             translation: this.translation,
@@ -153,11 +180,13 @@ export class TemplateEditor extends FormElement {
         });
     }
     renderVariables(component) {
+        var _a;
         // create a regex match based on the variable names
         const variableRegex = new RegExp(`{{(${Object.keys(component.variables || []).join('|')})}}`, 'g');
-        const parts = component.content.split(variableRegex);
+        let variables = null;
+        const parts = ((_a = component.content) === null || _a === void 0 ? void 0 : _a.split(variableRegex)) || [];
         if (parts.length > 0) {
-            const variables = parts.map((part, index) => {
+            variables = parts.map((part, index) => {
                 if (index % 2 === 0) {
                     return html `<span class="text">${part}</span>`;
                 }
@@ -174,8 +203,50 @@ export class TemplateEditor extends FormElement {
           placeholder="{{${part}}}"
         ></temba-completion>`;
             });
-            return html `<div class="content">${variables}</div>`;
         }
+        else {
+            // no content, let's do params intead
+            variables = component.params.map((param) => {
+                if (param.type === 'image' ||
+                    param.type === 'document' ||
+                    param.type === 'audio' ||
+                    param.type === 'video') {
+                    const index = Object.values(component.variables)[0];
+                    let attachments = [];
+                    if (this.variables[index]) {
+                        const parts = this.variables[index].split(':');
+                        attachments = [{ url: parts[1], content_type: parts[0] }];
+                    }
+                    return html `<div
+            style="
+              display: flex; 
+              align-items: center; 
+              border-radius: var(--curvature);
+              ${attachments.length === 0
+                        ? `background-color:rgba(255,0,0,.07);`
+                        : ``}
+            "
+          >
+            <temba-media-picker
+              accept="${param.type === 'document'
+                        ? 'application/pdf'
+                        : param.type + '/*'}"
+              max="1"
+              index=${index}
+              icon="attachment_${param.type}"
+              attachments=${JSON.stringify(attachments)}
+              @change=${this.handleAttachmentsChanged.bind(this)}
+            ></temba-media-picker>
+            <div>
+              ${attachments.length == 0
+                        ? html `Attach ${param.type} to continue`
+                        : ''}
+            </div>
+          </div>`;
+                }
+            });
+        }
+        return html `<div class="content">${variables}</div> `;
     }
     renderComponents(components) {
         const nonButtons = components

package/out-tsc/src/templates/TemplateEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditor.js","sourceRoot":"","sources":["../../../src/templates/TemplateEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from 'lit/decorators.js';\nimport { FormElement } from '../FormElement';\nimport { TemplateResult, html, css, PropertyValueMap, LitElement } from 'lit';\nimport { CustomEventType } from '../interfaces';\n\ninterface Component {\n  name: string;\n  type: string;\n  content: string;\n  variables: { [key: string]: number };\n}\n\ninterface Translation {\n  locale: string;\n  status: string;\n  channel: { uuid: string; name: string };\n  components: Component[];\n  variables: { type: string }[];\n}\n\ninterface Template {\n  created_on: string;\n  modified_on: string;\n  name: string;\n  translations: Translation[];\n  uuid: string;\n}\n\nexport class TemplateEditor extends FormElement {\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true\n  };\n\n  static get styles() {\n    return css`\n      .component {\n        background: #fff;\n        border: 1px solid var(--color-widget-border);\n        border-radius: var(--curvature);\n        padding: 1em;\n        margin-top: 1em;\n      }\n      .picker {\n        margin-bottom: 0.5em;\n        display: block;\n      }\n      .param {\n        display: flex;\n        margin-bottom: 0.5em;\n        align-items: center;\n      }\n      label {\n        margin-right: 0.5em;\n      }\n\n      .content span {\n        margin-right: 0.25em;\n      }\n\n      .error-message {\n        padding-left: 0.5em;\n      }\n\n      .variable {\n        display: inline-block;\n        margin: 0.25em 0em;\n        margin-right: 0.25em;\n      }\n\n      .button-wrapper {\n        margin-top: 1em;\n        background: #f9f9f9;\n        border-radius: var(--curvature);\n        padding: 0.5em;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .button-header {\n        font-weight: normal;\n        margin-left: 0.25em;\n        margin-bottom: -0.5em;\n        font-size: 0.9em;\n        color: #777;\n      }\n\n      .buttons {\n        display: flex;\n        align-items: center;\n        flex-wrap: wrap;\n      }\n\n      .button {\n        background: #fff;\n        padding: 0.3em 1em;\n        border: 1px solid #e6e6e6;\n        border-radius: var(--curvature);\n        min-height: 23px;\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        margin-right: 0.5em;\n        margin-top: 0.5em;\n        align-items: center;\n      }\n\n      .button .display {\n        margin-right: 0.5em;\n        background: #f9f9f9;\n        padding: 0.25em 1em;\n        border-radius: var(--curvature);\n      }\n\n      temba-textinput,\n      temba-completion {\n        --temba-textinput-padding: 5px 5px;\n        --temba-textinput-font-size: 0.9em;\n        line-height: initial;\n      }\n\n      .template {\n        background: #fff;\n        border-radius: var(--curvature);\n        border: 1px solid var(--color-widget-border);\n        padding: 1em;\n        line-height: 2.2em;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  url: string;\n\n  // initial template uuid\n  @property({ type: String })\n  template: string;\n\n  @property({ type: Object })\n  selectedTemplate: Template;\n\n  @property({ type: String })\n  lang = 'eng-US';\n\n  @property({ type: Array })\n  variables: string[];\n\n  @property({ type: Object, attribute: false })\n  translation: Translation;\n\n  @property({ type: Boolean })\n  translating: boolean;\n\n  public firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changes);\n  }\n\n  public updated(changedProperties: Map<string, any>): void {\n    super.updated(changedProperties);\n  }\n\n  private handleTemplateChanged(event: CustomEvent) {\n    const prev = this.selectedTemplate;\n    this.selectedTemplate = (event.target as any).values[0] as Template;\n    const [lang, loc] = this.lang.split('-');\n    if (this.selectedTemplate) {\n      this.selectedTemplate.translations.forEach((translation) => {\n        if (\n          translation.locale === this.lang ||\n          (!loc && translation.locale.split('-')[0] === lang)\n        ) {\n          this.translation = translation;\n          // initialize our variables array\n          const newVariables = new Array(\n            (translation.variables || []).length\n          ).fill('');\n\n          if (!prev) {\n            // copy our previous variables into newVariables\n            if (this.variables) {\n              this.variables.forEach((variable, index) => {\n                newVariables[index] = variable;\n              });\n            }\n          }\n          this.variables = newVariables;\n        }\n      });\n    } else {\n      this.translation = null;\n    }\n\n    this.fireCustomEvent(CustomEventType.ContextChanged, {\n      template: this.selectedTemplate,\n      translation: this.translation,\n      variables: this.variables\n    });\n  }\n\n  private handleVariableChanged(event: CustomEvent) {\n    const target = event.target as HTMLInputElement;\n    const variableIndex = parseInt(target.getAttribute('index'));\n    this.variables[variableIndex] = target.value;\n    this.fireCustomEvent(CustomEventType.ContentChanged, {\n      template: this.selectedTemplate,\n      translation: this.translation,\n      variables: this.variables\n    });\n  }\n\n  private renderVariables(component: Component) {\n    // create a regex match based on the variable names\n    const variableRegex = new RegExp(\n      `{{(${Object.keys(component.variables || []).join('|')})}}`,\n      'g'\n    );\n    const parts = component.content.split(variableRegex);\n    if (parts.length > 0) {\n      const variables = parts.map((part, index) => {\n        if (index % 2 === 0) {\n          return html`<span class=\"text\">${part}</span>`;\n        }\n        const variableIndex = component.variables[part];\n        return html`<temba-completion\n          class=\"variable\"\n          type=\"text\"\n          value=${variableIndex < this.variables.length\n            ? this.variables[variableIndex]\n            : null}\n          @keyup=${this.handleVariableChanged}\n          name=\"${component.name}\"\n          index=\"${variableIndex}\"\n          placeholder=\"{{${part}}}\"\n        ></temba-completion>`;\n      });\n      return html`<div class=\"content\">${variables}</div>`;\n    }\n  }\n\n  public renderComponents(components: Component[]): TemplateResult {\n    const nonButtons = components\n      .filter((comp) => !comp.type.startsWith('button/'))\n      .map(\n        (component) =>\n          html`<div class=\"${component['name']}\">\n            ${this.renderVariables(component)}\n          </div>`\n      );\n    const buttonComponents = components.filter((comp) =>\n      comp.type.startsWith('button/')\n    );\n    const buttons =\n      buttonComponents.length > 0 ? this.renderButtons(buttonComponents) : null;\n    return html`<div class=\"main\">${nonButtons}</div>\n      <div class=\"buttons\">\n        ${buttons}\n        <div></div>\n      </div>`;\n  }\n\n  public renderButtons(components): TemplateResult {\n    const buttons = components.map((component) => {\n      if (component.display) {\n        return html`\n          <div class=\"button\">\n            <div class=\"display\">${component.display}</div>\n            ${this.renderVariables(component)}\n          </div>\n        `;\n      } else {\n        return html`\n          <div class=\"button\">${this.renderVariables(component)}</div>\n        `;\n      }\n    });\n    return html`<div class=\"button-wrapper\">\n      <div class=\"button-header\">Template Buttons</div>\n      <div class=\"buttons\">${buttons}</div>\n    </div>`;\n  }\n\n  public render(): TemplateResult {\n    let content = null;\n    if (this.translation) {\n      content = this.renderComponents(this.translation.components);\n    } else {\n      content = html`<div class=\"error-message\">\n        No approved translation was found for current language.\n      </div>`;\n    }\n\n    return html`\n      <div>\n        <temba-select\n          searchable\n          ?clearable=${!this.translating}\n          ?disabled=${this.translating}\n          valuekey=\"uuid\"\n          class=\"picker\"\n          value=\"${this.template}\"\n          endpoint=\"${this.url}?comps_as_list=true\"\n          shouldExclude=${(template) => template.status !== 'approved'}\n          placeholder=\"Select a template\"\n          @temba-content-changed=${this.swallowEvent}\n          @change=${this.handleTemplateChanged}\n        >\n        </temba-select>\n\n        ${this.template ? html` <div class=\"template\">${content}</div>` : null}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"TemplateEditor.js","sourceRoot":"","sources":["../../../src/templates/TemplateEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from 'lit/decorators.js';\nimport { FormElement } from '../FormElement';\nimport { TemplateResult, html, css, PropertyValueMap, LitElement } from 'lit';\nimport { CustomEventType } from '../interfaces';\nimport { MediaPicker } from '../mediapicker/MediaPicker';\n\ninterface Component {\n  name: string;\n  type: string;\n  content: string;\n  variables: { [key: string]: number };\n  params: [{ type: string }];\n}\n\ninterface Translation {\n  locale: string;\n  status: string;\n  channel: { uuid: string; name: string };\n  components: Component[];\n  variables: { type: string }[];\n}\n\ninterface Template {\n  created_on: string;\n  modified_on: string;\n  name: string;\n  translations: Translation[];\n  uuid: string;\n}\n\nexport class TemplateEditor extends FormElement {\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true\n  };\n\n  static get styles() {\n    return css`\n      .component {\n        background: #fff;\n        border: 1px solid var(--color-widget-border);\n        border-radius: var(--curvature);\n        padding: 1em;\n        margin-top: 1em;\n      }\n\n      .content {\n        margin-bottom: 1em;\n      }\n\n      .picker {\n        margin-bottom: 0.5em;\n        display: block;\n      }\n      .param {\n        display: flex;\n        margin-bottom: 0.5em;\n        align-items: center;\n      }\n      label {\n        margin-right: 0.5em;\n      }\n\n      .content span {\n        margin-right: 0.25em;\n      }\n\n      .error-message {\n        padding-left: 0.5em;\n      }\n\n      .variable {\n        display: inline-block;\n        margin: 0.25em 0em;\n        margin-right: 0.25em;\n      }\n\n      .button-wrapper {\n        background: #f9f9f9;\n        border-radius: var(--curvature);\n        padding: 0.5em;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .button-header {\n        font-weight: normal;\n        margin-left: 0.25em;\n        margin-bottom: -0.5em;\n        font-size: 0.9em;\n        color: #777;\n      }\n\n      .buttons {\n        display: flex;\n        align-items: center;\n        flex-wrap: wrap;\n      }\n\n      .button {\n        background: #fff;\n        padding: 0.3em 1em;\n        border: 1px solid #e6e6e6;\n        border-radius: var(--curvature);\n        min-height: 23px;\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        margin-right: 0.5em;\n        margin-top: 0.5em;\n        align-items: center;\n      }\n\n      .button .display {\n        margin-right: 0.5em;\n        background: #f9f9f9;\n        padding: 0.25em 1em;\n        border-radius: var(--curvature);\n      }\n\n      temba-textinput,\n      temba-completion {\n        --temba-textinput-padding: 5px 5px;\n        --temba-textinput-font-size: 0.9em;\n        line-height: initial;\n      }\n\n      .template {\n        background: #fff;\n        border-radius: var(--curvature);\n        border: 1px solid var(--color-widget-border);\n        padding: 1em;\n        line-height: 2.2em;\n        max-height: 50vh;\n        overflow-y: auto;\n        overflow-x: hidden;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  url: string;\n\n  // initial template uuid\n  @property({ type: String })\n  template: string;\n\n  @property({ type: Object })\n  selectedTemplate: Template;\n\n  @property({ type: String })\n  lang = 'eng-US';\n\n  @property({ type: Array })\n  variables: string[];\n\n  @property({ type: Object, attribute: false })\n  translation: Translation;\n\n  @property({ type: Boolean })\n  translating: boolean;\n\n  public firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changes);\n  }\n\n  public updated(changedProperties: Map<string, any>): void {\n    super.updated(changedProperties);\n  }\n\n  private handleTemplateChanged(event: CustomEvent) {\n    const prev = this.selectedTemplate;\n    this.selectedTemplate = (event.target as any).values[0] as Template;\n    const [lang, loc] = this.lang.split('-');\n    if (this.selectedTemplate) {\n      this.selectedTemplate.translations.forEach((translation) => {\n        if (\n          translation.locale === this.lang ||\n          (!loc && translation.locale.split('-')[0] === lang)\n        ) {\n          this.translation = translation;\n          // initialize our variables array\n          const newVariables = new Array(\n            (translation.variables || []).length\n          ).fill('');\n\n          if (!prev) {\n            // copy our previous variables into newVariables\n            if (this.variables) {\n              this.variables.forEach((variable, index) => {\n                newVariables[index] = variable;\n              });\n            }\n          }\n          this.variables = newVariables;\n        }\n      });\n    } else {\n      this.translation = null;\n    }\n\n    this.fireCustomEvent(CustomEventType.ContextChanged, {\n      template: this.selectedTemplate,\n      translation: this.translation,\n      variables: this.variables\n    });\n  }\n\n  private handleAttachmentsChanged(event: CustomEvent) {\n    const media = event.target as MediaPicker;\n    const index = parseInt(media.getAttribute('index'));\n\n    if (media.attachments.length === 0) {\n      this.variables[index] = '';\n    } else {\n      const attachment = media.attachments[0];\n      if (attachment.url && attachment.content_type) {\n        this.variables[index] = `${attachment.content_type}:${attachment.url}`;\n      } else {\n        this.variables[index] = ``;\n      }\n    }\n    this.fireContentChange();\n  }\n\n  private handleVariableChanged(event: CustomEvent) {\n    const target = event.target as HTMLInputElement;\n    const variableIndex = parseInt(target.getAttribute('index'));\n    this.variables[variableIndex] = target.value;\n    this.fireContentChange();\n  }\n\n  private fireContentChange() {\n    this.fireCustomEvent(CustomEventType.ContentChanged, {\n      template: this.selectedTemplate,\n      translation: this.translation,\n      variables: this.variables\n    });\n  }\n\n  private renderVariables(component: Component) {\n    // create a regex match based on the variable names\n    const variableRegex = new RegExp(\n      `{{(${Object.keys(component.variables || []).join('|')})}}`,\n      'g'\n    );\n\n    let variables = null;\n    const parts = component.content?.split(variableRegex) || [];\n    if (parts.length > 0) {\n      variables = parts.map((part, index) => {\n        if (index % 2 === 0) {\n          return html`<span class=\"text\">${part}</span>`;\n        }\n        const variableIndex = component.variables[part];\n        return html`<temba-completion\n          class=\"variable\"\n          type=\"text\"\n          value=${variableIndex < this.variables.length\n            ? this.variables[variableIndex]\n            : null}\n          @keyup=${this.handleVariableChanged}\n          name=\"${component.name}\"\n          index=\"${variableIndex}\"\n          placeholder=\"{{${part}}}\"\n        ></temba-completion>`;\n      });\n    } else {\n      // no content, let's do params intead\n      variables = component.params.map((param) => {\n        if (\n          param.type === 'image' ||\n          param.type === 'document' ||\n          param.type === 'audio' ||\n          param.type === 'video'\n        ) {\n          const index = Object.values(component.variables)[0];\n          let attachments = [];\n          if (this.variables[index]) {\n            const parts = this.variables[index].split(':');\n            attachments = [{ url: parts[1], content_type: parts[0] }];\n          }\n\n          return html`<div\n            style=\"\n              display: flex; \n              align-items: center; \n              border-radius: var(--curvature);\n              ${attachments.length === 0\n              ? `background-color:rgba(255,0,0,.07);`\n              : ``}\n            \"\n          >\n            <temba-media-picker\n              accept=\"${param.type === 'document'\n                ? 'application/pdf'\n                : param.type + '/*'}\"\n              max=\"1\"\n              index=${index}\n              icon=\"attachment_${param.type}\"\n              attachments=${JSON.stringify(attachments)}\n              @change=${this.handleAttachmentsChanged.bind(this)}\n            ></temba-media-picker>\n            <div>\n              ${attachments.length == 0\n                ? html`Attach ${param.type} to continue`\n                : ''}\n            </div>\n          </div>`;\n        }\n      });\n    }\n\n    return html`<div class=\"content\">${variables}</div> `;\n  }\n\n  public renderComponents(components: Component[]): TemplateResult {\n    const nonButtons = components\n      .filter((comp) => !comp.type.startsWith('button/'))\n      .map(\n        (component) =>\n          html`<div class=\"${component['name']}\">\n            ${this.renderVariables(component)}\n          </div>`\n      );\n    const buttonComponents = components.filter((comp) =>\n      comp.type.startsWith('button/')\n    );\n    const buttons =\n      buttonComponents.length > 0 ? this.renderButtons(buttonComponents) : null;\n    return html`<div class=\"main\">${nonButtons}</div>\n      <div class=\"buttons\">\n        ${buttons}\n        <div></div>\n      </div>`;\n  }\n\n  public renderButtons(components): TemplateResult {\n    const buttons = components.map((component) => {\n      if (component.display) {\n        return html`\n          <div class=\"button\">\n            <div class=\"display\">${component.display}</div>\n            ${this.renderVariables(component)}\n          </div>\n        `;\n      } else {\n        return html`\n          <div class=\"button\">${this.renderVariables(component)}</div>\n        `;\n      }\n    });\n    return html`<div class=\"button-wrapper\">\n      <div class=\"button-header\">Template Buttons</div>\n      <div class=\"buttons\">${buttons}</div>\n    </div>`;\n  }\n\n  public render(): TemplateResult {\n    let content = null;\n    if (this.translation) {\n      content = this.renderComponents(this.translation.components);\n    } else {\n      content = html`<div class=\"error-message\">\n        No approved translation was found for current language.\n      </div>`;\n    }\n\n    return html`\n      <div>\n        <temba-select\n          searchable\n          ?clearable=${!this.translating}\n          ?disabled=${this.translating}\n          valuekey=\"uuid\"\n          class=\"picker\"\n          value=\"${this.template}\"\n          endpoint=\"${this.url}?comps_as_list=true\"\n          shouldExclude=${(template) => template.status !== 'approved'}\n          placeholder=\"Select a template\"\n          @temba-content-changed=${this.swallowEvent}\n          @change=${this.handleTemplateChanged}\n        >\n        </temba-select>\n\n        ${this.template ? html` <div class=\"template\">${content}</div>` : null}\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/thumbnail/Thumbnail.js

@@ -13,7 +13,7 @@ export class Thumbnail extends RapidElement {
     static get styles() {
         return css `
       :host {
-        display: inline-block;
+        display: inline;
       }
 
       .zooming.wrapper {
@@ -44,19 +44,8 @@ export class Thumbnail extends RapidElement {
     }
     render() {
         if (this.zooming) {
-            return html `
-        <div
-          class="${getClasses({ wrapper: true })}"
-          style=${styleMap({
-                background: 'red',
-                borderRadius: '0',
-                boxShadow: 'var(--widget-box-shadow)'
-            })}
-        >
-          <div
-            class="thumb"
-            style=${styleMap({
-                backgroundImage: `url(${this.url})`,
+            const styles = {
+                backgroundColor: '#fafafa',
                 backgroundSize: 'contain',
                 backgroundPosition: 'center',
                 backgroundRepeat: 'no-repeat',
@@ -69,24 +58,26 @@ export class Thumbnail extends RapidElement {
                 justifyContent: 'center',
                 fontWeight: '400',
                 color: '#bbb'
+            };
+            if (this.url) {
+                styles['backgroundImage'] = `url(${this.url})`;
+            }
+            return html `
+        <div
+          class="${getClasses({ wrapper: true })}"
+          style=${styleMap({
+                background: 'red',
+                borderRadius: '0',
+                boxShadow: 'var(--widget-box-shadow)'
             })}
-          >
-            ${this.label}
-          </div>
+        >
+          <div class="thumb" style=${styleMap(styles)}>${this.label}</div>
         </div>
       `;
         }
         else {
-            return html `
-      <div class="${getClasses({ wrapper: true })}" style=${styleMap({
-                padding: 'var(--thumb-padding, 0.4em)',
-                background: '#fff',
-                borderRadius: 'var(--curvature)',
-                boxShadow: 'var(--widget-box-shadow)'
-            })}">
-
-          <div class="thumb" style=${styleMap({
-                backgroundImage: `url(${this.url})`,
+            const styles = {
+                backgroundColor: '#fafafa',
                 backgroundSize: 'cover',
                 backgroundPosition: 'center',
                 maxHeight: 'var(--thumb-size, 4em)',
@@ -98,9 +89,20 @@ export class Thumbnail extends RapidElement {
                 justifyContent: 'center',
                 fontWeight: '400',
                 color: '#bbb'
-            })}>
+            };
+            if (this.url) {
+                styles['backgroundImage'] = `url(${this.url})`;
+            }
+            return html `
+      <div class="${getClasses({ wrapper: true })}" style=${styleMap({
+                padding: 'var(--thumb-padding, 0.4em)',
+                background: '#fff',
+                borderRadius: 'var(--curvature)',
+                boxShadow: 'var(--widget-box-shadow)'
+            })}">
+          <div class="thumb" style=${styleMap(styles)}>
             ${this.label}
-            </div>
+          </div>
       </div>
     `;
         }