@nyaruka/temba-components 0.129.7 → 0.129.9

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

@@ -1 +1 @@
-{"version":3,"file":"MediaPicker.js","sourceRoot":"","sources":["../../../src/form/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, CustomEventType } from '../interfaces';\nimport { Icon } from '../Icons';\nimport {\n  DEFAULT_MEDIA_ENDPOINT,\n  WebResponse,\n  getClasses,\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        align-items: center;\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    if (changes.has('uploading')) {\n      this.dispatchEvent(\n        new CustomEvent(CustomEventType.Loading, {\n          detail: { loading: this.uploading }\n        })\n      );\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              <temba-thumbnail\n                attachment=\"${validAttachment.content_type}:${validAttachment.url}\"\n              ></temba-thumbnail>\n            </div>`;\n          })}\n          ${this.renderUploader()}\n        </div>\n      </div>\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"MediaPicker.js","sourceRoot":"","sources":["../../../src/form/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, CustomEventType } from '../interfaces';\nimport { Icon } from '../Icons';\nimport {\n  DEFAULT_MEDIA_ENDPOINT,\n  WebResponse,\n  getClasses,\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      }\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        align-items: center;\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: Boolean })\n  ignoreDrops = false;\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    if (changes.has('uploading')) {\n      this.dispatchEvent(\n        new CustomEvent(CustomEventType.Loading, {\n          detail: { loading: this.uploading }\n        })\n      );\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    if (this.ignoreDrops) {\n      return;\n    }\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    if (this.ignoreDrops) {\n      return;\n    }\n\n    evt.preventDefault();\n    evt.stopPropagation();\n    if (this.canAcceptAttachments()) {\n      this.pendingDrop = true;\n    }\n  }\n\n  private unhighlight(evt: DragEvent): void {\n    if (this.ignoreDrops) {\n      return;\n    }\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              <temba-thumbnail\n                attachment=\"${validAttachment.content_type}:${validAttachment.url}\"\n              ></temba-thumbnail>\n            </div>`;\n          })}\n          ${this.renderUploader()}\n        </div>\n      </div>\n    </div>`;\n  }\n}\n"]}

package/out-tsc/src/form/MessageEditor.js

@@ -0,0 +1,422 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { FormElement } from './FormElement';
+import { getClasses } from '../utils';
+import { Icon } from '../Icons';
+/**
+ * MessageEditor is a composed component that combines temba-completion and temba-media-picker
+ * for editing messages with text completion and file attachments
+ */
+export class MessageEditor extends FormElement {
+    constructor() {
+        super(...arguments);
+        this.name = '';
+        this.value = '';
+        this.placeholder = '';
+        this.textarea = true;
+        this.autogrow = true;
+        this.minHeight = 60;
+        this.submitOnEnter = false;
+        this.attachments = [];
+        this.accept = '';
+        this.maxAttachments = 3;
+        this.endpoint = '';
+        this.pendingDrop = false;
+        this.uploading = false;
+    }
+    static get styles() {
+        return css `
+      :host {
+        display: block;
+      }
+
+      .message-editor-container {
+        border: 1px solid var(--color-widget-border);
+        border-radius: var(--curvature-widget);
+        background: #fff;
+        position: relative;
+        transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+      }
+
+      .message-editor-container:focus-within {
+        border-color: var(--color-focus);
+        box-shadow: var(--widget-box-shadow-focused);
+      }
+
+      .message-editor-container.highlight {
+        border-color: rgba(156, 222, 106, 0.88);
+      }
+
+      /* Hide the completion field border since we draw our own */
+      .message-editor-container temba-completion::part(field) {
+        border: none;
+        box-shadow: none;
+        border-radius: 0;
+      }
+
+      .message-editor-container temba-completion {
+        --widget-box-shadow: none;
+        --widget-box-shadow-focused: none;
+        --widget-box-shadow-focused: none;
+        --color-widget-border: transparent;
+        --color-focus: transparent;
+      }
+
+      .completion-wrapper {
+      }
+
+      .media-wrapper {
+        padding: 4px 8px;
+        background: rgba(0, 0, 0, 0.03);
+        border-top: 1px solid var(--color-widget-border);
+        border-radius: 0 0 var(--curvature-widget) var(--curvature-widget);
+        box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05);
+        margin-top: 3px;
+        display: none;
+      }
+      .has-attachments .media-wrapper {
+        display: flex;
+      }
+
+      /* Override media picker styles to integrate better */
+      .media-wrapper temba-media-picker {
+        --color-widget-border: transparent;
+      }
+
+      .media-wrapper .attachments-list {
+        padding: 0.2em 0;
+      }
+
+      .drop-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(210, 243, 184, 0.5);
+        border-radius: var(--curvature-widget);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s ease-in-out;
+        z-index: 10;
+      }
+
+      .message-editor-container.highlight .drop-overlay {
+        opacity: 1;
+      }
+
+      .drop-message {
+        background: rgba(0, 0, 0, 0.8);
+        color: white;
+        padding: 12px 24px;
+        border-radius: var(--curvature);
+        font-weight: 500;
+      }
+
+      .attachment-icon {
+        position: absolute;
+        bottom: 4px;
+        right: 4px;
+        color: var(--color-text-dark);
+        cursor: pointer;
+        padding: 6px;
+        border-radius: var(--curvature);
+        transition: background-color 0.2s ease-in-out;
+        display: block;
+      }
+
+      .has-attachments .attachment-icon {
+        display: none;
+      }
+
+      .attachment-icon:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+      }
+    `;
+    }
+    firstUpdated(changes) {
+        super.firstUpdated(changes);
+        this.completionElement = this.shadowRoot.querySelector('temba-completion');
+        // Get the visible media picker (either in media-wrapper or the hidden one)
+        this.mediaPickerElement = this.shadowRoot.querySelector('temba-media-picker');
+        // Set up proper attachment filtering and parsing
+        this.parseAndFilterAttachments();
+    }
+    /**
+     * Parse attachments and filter out runtime attachments for media picker
+     */
+    parseAndFilterAttachments() {
+        if (!this.attachments)
+            return;
+        // Filter out runtime attachments (those without '/' in content type)
+        const staticAttachments = this.attachments.filter((attachment) => {
+            if (typeof attachment === 'string') {
+                const [contentType] = attachment.split(':');
+                return contentType.includes('/');
+            }
+            return true;
+        });
+        // Convert string attachments to Attachment objects for media picker
+        const mediaAttachments = staticAttachments.map((attachment) => {
+            if (typeof attachment === 'string') {
+                // split into content type and URL
+                // e.g. "image/jpeg:http://example.com/image.jpg"
+                const colonIndex = attachment.indexOf(':');
+                const contentType = attachment.substring(0, colonIndex);
+                const url = attachment.substring(colonIndex + 1);
+                return {
+                    content_type: contentType,
+                    url: url,
+                    filename: this.getFilenameFromUrl(url),
+                    size: 0
+                };
+            }
+            return attachment;
+        });
+        if (this.mediaPickerElement) {
+            this.mediaPickerElement.attachments = mediaAttachments;
+        }
+    }
+    /**
+     * Check if there are any static attachments (excluding runtime attachments)
+     */
+    hasStaticAttachments() {
+        if (!this.attachments || this.attachments.length === 0)
+            return false;
+        return this.attachments.some((attachment) => {
+            if (typeof attachment === 'string') {
+                const [contentType] = attachment.split(':');
+                return contentType.includes('/');
+            }
+            return true;
+        });
+    }
+    getFilenameFromUrl(url) {
+        try {
+            const urlObj = new URL(url);
+            const pathname = urlObj.pathname;
+            return pathname.substring(pathname.lastIndexOf('/') + 1) || 'attachment';
+        }
+        catch (_a) {
+            return 'attachment';
+        }
+    }
+    handleCompletionChange(event) {
+        event.stopPropagation();
+        const completion = event.target;
+        this.value = completion.value;
+        this.fireEvent('change');
+    }
+    handleMediaChange(event) {
+        event.stopPropagation();
+        const mediaPicker = event.target;
+        // Convert media picker attachments back to the format expected by the form
+        const formattedAttachments = mediaPicker.attachments.map((attachment) => {
+            return `${attachment.content_type}:${attachment.url}`;
+        });
+        // Merge with any runtime attachments that were filtered out
+        const runtimeAttachments = (this.attachments || []).filter((attachment) => {
+            if (typeof attachment === 'string') {
+                const [contentType] = attachment.split(':');
+                return !contentType.includes('/');
+            }
+            return false;
+        });
+        this.attachments = [...runtimeAttachments, ...formattedAttachments];
+        this.fireEvent('change');
+    }
+    handleDragEnter(evt) {
+        this.highlight(evt);
+    }
+    handleDragOver(evt) {
+        this.highlight(evt);
+    }
+    handleDragLeave(evt) {
+        this.unhighlight(evt);
+    }
+    handleDrop(evt) {
+        this.unhighlight(evt);
+        // Forward to media picker
+        if (this.mediaPickerElement) {
+            const files = [...evt.dataTransfer.files];
+            this.mediaPickerElement.uploadFiles(files);
+        }
+    }
+    handleAttachmentIconClick() {
+        // Trigger the file picker on the media picker
+        if (this.mediaPickerElement) {
+            const uploadInput = this.mediaPickerElement.shadowRoot.querySelector('#upload-input');
+            if (uploadInput) {
+                uploadInput.click();
+            }
+        }
+    }
+    highlight(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        // Always allow highlight for testing purposes, but in real usage check media picker
+        this.pendingDrop = true;
+    }
+    unhighlight(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.pendingDrop = false;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('attachments')) {
+            // Re-query media picker since the DOM structure may have changed
+            this.mediaPickerElement = this.shadowRoot.querySelector('temba-media-picker');
+        }
+        if (changedProperties.has('uploading')) {
+            this.dispatchEvent(new CustomEvent('loading', {
+                detail: { loading: this.uploading }
+            }));
+        }
+    }
+    focus() {
+        super.focus();
+        if (this.completionElement) {
+            this.completionElement.focus();
+        }
+    }
+    click() {
+        super.click();
+        if (this.completionElement) {
+            this.completionElement.click();
+        }
+    }
+    render() {
+        const hasAttachments = this.hasStaticAttachments();
+        return html `
+      <temba-field
+        name=${this.name}
+        .label=${this.label}
+        .helpText=${this.helpText}
+        .errors=${this.errors}
+        .widgetOnly=${this.widgetOnly}
+      >
+        <div
+          class=${getClasses({
+            'message-editor-container': true,
+            highlight: this.pendingDrop,
+            'has-attachments': hasAttachments
+        })}
+          @dragenter=${this.handleDragEnter}
+          @dragover=${this.handleDragOver}
+          @dragleave=${this.handleDragLeave}
+          @drop=${this.handleDrop}
+        >
+          <div class="completion-wrapper">
+            <temba-completion
+              name=${this.name}
+              .value=${this.value}
+              placeholder=${this.placeholder}
+              ?textarea=${this.textarea}
+              ?autogrow=${this.autogrow}
+              ?session=${this.session}
+              ?submitOnEnter=${this.submitOnEnter}
+              ?gsm=${this.gsm}
+              ?disableCompletion=${this.disableCompletion}
+              maxlength=${ifDefined(this.maxLength)}
+              counter=${ifDefined(this.counter)}
+              minHeight=${ifDefined(this.minHeight)}
+              widgetOnly
+              @change=${this.handleCompletionChange}
+            ></temba-completion>
+          </div>
+
+          <div class="media-wrapper ">
+            <temba-media-picker
+              .accept=${this.accept}
+              .max=${this.maxAttachments}
+              .endpoint=${this.endpoint}
+              @change=${this.handleMediaChange}
+              ignoreDrops
+            ></temba-media-picker>
+          </div>
+          <temba-icon
+            class="attachment-icon"
+            name=${Icon.attachment}
+            size="1.2"
+            @click=${this.handleAttachmentIconClick}
+          ></temba-icon>
+
+          <div class="drop-overlay"></div>
+
+          <!-- Hidden media picker for handling uploads when no attachments are shown -->
+          ${!hasAttachments
+            ? html `<temba-media-picker
+                style="display: none;"
+                .accept=${this.accept}
+                .max=${this.maxAttachments}
+                .endpoint=${this.endpoint}
+                @change=${this.handleMediaChange}
+                ignoreDrops
+              ></temba-media-picker>`
+            : ''}
+        </div>
+      </temba-field>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], MessageEditor.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], MessageEditor.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], MessageEditor.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean })
+], MessageEditor.prototype, "textarea", void 0);
+__decorate([
+    property({ type: Boolean })
+], MessageEditor.prototype, "autogrow", void 0);
+__decorate([
+    property({ type: Number })
+], MessageEditor.prototype, "minHeight", void 0);
+__decorate([
+    property({ type: Number })
+], MessageEditor.prototype, "maxLength", void 0);
+__decorate([
+    property({ type: Boolean })
+], MessageEditor.prototype, "session", void 0);
+__decorate([
+    property({ type: Boolean })
+], MessageEditor.prototype, "submitOnEnter", void 0);
+__decorate([
+    property({ type: Boolean })
+], MessageEditor.prototype, "gsm", void 0);
+__decorate([
+    property({ type: Boolean })
+], MessageEditor.prototype, "disableCompletion", void 0);
+__decorate([
+    property({ type: String })
+], MessageEditor.prototype, "counter", void 0);
+__decorate([
+    property({ type: Array })
+], MessageEditor.prototype, "attachments", void 0);
+__decorate([
+    property({ type: String })
+], MessageEditor.prototype, "accept", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-attachments' })
+], MessageEditor.prototype, "maxAttachments", void 0);
+__decorate([
+    property({ type: String })
+], MessageEditor.prototype, "endpoint", void 0);
+__decorate([
+    property({ type: Boolean, attribute: false })
+], MessageEditor.prototype, "pendingDrop", void 0);
+__decorate([
+    property({ type: Boolean, attribute: false })
+], MessageEditor.prototype, "uploading", void 0);
+//# sourceMappingURL=MessageEditor.js.map

package/out-tsc/src/form/MessageEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageEditor.js","sourceRoot":"","sources":["../../../src/form/MessageEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { FormElement } from './FormElement';\nimport { Completion } from './Completion';\nimport { MediaPicker } from './MediaPicker';\nimport { Attachment } from '../interfaces';\nimport { getClasses } from '../utils';\nimport { Icon } from '../Icons';\n\n/**\n * MessageEditor is a composed component that combines temba-completion and temba-media-picker\n * for editing messages with text completion and file attachments\n */\nexport class MessageEditor extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n      }\n\n      .message-editor-container {\n        border: 1px solid var(--color-widget-border);\n        border-radius: var(--curvature-widget);\n        background: #fff;\n        position: relative;\n        transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\n      }\n\n      .message-editor-container:focus-within {\n        border-color: var(--color-focus);\n        box-shadow: var(--widget-box-shadow-focused);\n      }\n\n      .message-editor-container.highlight {\n        border-color: rgba(156, 222, 106, 0.88);\n      }\n\n      /* Hide the completion field border since we draw our own */\n      .message-editor-container temba-completion::part(field) {\n        border: none;\n        box-shadow: none;\n        border-radius: 0;\n      }\n\n      .message-editor-container temba-completion {\n        --widget-box-shadow: none;\n        --widget-box-shadow-focused: none;\n        --widget-box-shadow-focused: none;\n        --color-widget-border: transparent;\n        --color-focus: transparent;\n      }\n\n      .completion-wrapper {\n      }\n\n      .media-wrapper {\n        padding: 4px 8px;\n        background: rgba(0, 0, 0, 0.03);\n        border-top: 1px solid var(--color-widget-border);\n        border-radius: 0 0 var(--curvature-widget) var(--curvature-widget);\n        box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05);\n        margin-top: 3px;\n        display: none;\n      }\n      .has-attachments .media-wrapper {\n        display: flex;\n      }\n\n      /* Override media picker styles to integrate better */\n      .media-wrapper temba-media-picker {\n        --color-widget-border: transparent;\n      }\n\n      .media-wrapper .attachments-list {\n        padding: 0.2em 0;\n      }\n\n      .drop-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background: rgba(210, 243, 184, 0.5);\n        border-radius: var(--curvature-widget);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity 0.2s ease-in-out;\n        z-index: 10;\n      }\n\n      .message-editor-container.highlight .drop-overlay {\n        opacity: 1;\n      }\n\n      .drop-message {\n        background: rgba(0, 0, 0, 0.8);\n        color: white;\n        padding: 12px 24px;\n        border-radius: var(--curvature);\n        font-weight: 500;\n      }\n\n      .attachment-icon {\n        position: absolute;\n        bottom: 4px;\n        right: 4px;\n        color: var(--color-text-dark);\n        cursor: pointer;\n        padding: 6px;\n        border-radius: var(--curvature);\n        transition: background-color 0.2s ease-in-out;\n        display: block;\n      }\n\n      .has-attachments .attachment-icon {\n        display: none;\n      }\n\n      .attachment-icon:hover {\n        background-color: rgba(0, 0, 0, 0.05);\n      }\n    `;\n  }\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ type: Boolean })\n  textarea = true;\n\n  @property({ type: Boolean })\n  autogrow = true;\n\n  @property({ type: Number })\n  minHeight = 60;\n\n  @property({ type: Number })\n  maxLength: number;\n\n  @property({ type: Boolean })\n  session: boolean;\n\n  @property({ type: Boolean })\n  submitOnEnter = false;\n\n  @property({ type: Boolean })\n  gsm: boolean;\n\n  @property({ type: Boolean })\n  disableCompletion: boolean;\n\n  @property({ type: String })\n  counter: string;\n\n  @property({ type: Array })\n  attachments: (Attachment | string)[] = [];\n\n  @property({ type: String })\n  accept = '';\n\n  @property({ type: Number, attribute: 'max-attachments' })\n  maxAttachments = 3;\n\n  @property({ type: String })\n  endpoint = '';\n\n  @property({ type: Boolean, attribute: false })\n  pendingDrop = false;\n\n  @property({ type: Boolean, attribute: false })\n  uploading = false;\n\n  private completionElement: Completion;\n  private mediaPickerElement: MediaPicker;\n\n  public firstUpdated(changes: Map<string, any>) {\n    super.firstUpdated(changes);\n\n    this.completionElement = this.shadowRoot.querySelector(\n      'temba-completion'\n    ) as Completion;\n\n    // Get the visible media picker (either in media-wrapper or the hidden one)\n    this.mediaPickerElement = this.shadowRoot.querySelector(\n      'temba-media-picker'\n    ) as MediaPicker;\n\n    // Set up proper attachment filtering and parsing\n    this.parseAndFilterAttachments();\n  }\n\n  /**\n   * Parse attachments and filter out runtime attachments for media picker\n   */\n  private parseAndFilterAttachments() {\n    if (!this.attachments) return;\n\n    // Filter out runtime attachments (those without '/' in content type)\n    const staticAttachments = this.attachments.filter((attachment) => {\n      if (typeof attachment === 'string') {\n        const [contentType] = attachment.split(':');\n        return contentType.includes('/');\n      }\n      return true;\n    });\n\n    // Convert string attachments to Attachment objects for media picker\n    const mediaAttachments = staticAttachments.map((attachment) => {\n      if (typeof attachment === 'string') {\n        // split into content type and URL\n        // e.g. \"image/jpeg:http://example.com/image.jpg\"\n        const colonIndex = attachment.indexOf(':');\n        const contentType = attachment.substring(0, colonIndex);\n        const url = attachment.substring(colonIndex + 1);\n        return {\n          content_type: contentType,\n          url: url,\n          filename: this.getFilenameFromUrl(url),\n          size: 0\n        } as Attachment;\n      }\n      return attachment;\n    });\n\n    if (this.mediaPickerElement) {\n      this.mediaPickerElement.attachments = mediaAttachments;\n    }\n  }\n\n  /**\n   * Check if there are any static attachments (excluding runtime attachments)\n   */\n  private hasStaticAttachments(): boolean {\n    if (!this.attachments || this.attachments.length === 0) return false;\n\n    return this.attachments.some((attachment) => {\n      if (typeof attachment === 'string') {\n        const [contentType] = attachment.split(':');\n        return contentType.includes('/');\n      }\n      return true;\n    });\n  }\n\n  private getFilenameFromUrl(url: string): string {\n    try {\n      const urlObj = new URL(url);\n      const pathname = urlObj.pathname;\n      return pathname.substring(pathname.lastIndexOf('/') + 1) || 'attachment';\n    } catch {\n      return 'attachment';\n    }\n  }\n\n  private handleCompletionChange(event: Event) {\n    event.stopPropagation();\n    const completion = event.target as Completion;\n    this.value = completion.value;\n    this.fireEvent('change');\n  }\n\n  private handleMediaChange(event: Event) {\n    event.stopPropagation();\n    const mediaPicker = event.target as MediaPicker;\n    // Convert media picker attachments back to the format expected by the form\n    const formattedAttachments = mediaPicker.attachments.map((attachment) => {\n      return `${attachment.content_type}:${attachment.url}`;\n    });\n\n    // Merge with any runtime attachments that were filtered out\n    const runtimeAttachments = (this.attachments || []).filter((attachment) => {\n      if (typeof attachment === 'string') {\n        const [contentType] = attachment.split(':');\n        return !contentType.includes('/');\n      }\n      return false;\n    }) as string[];\n\n    this.attachments = [...runtimeAttachments, ...formattedAttachments];\n    this.fireEvent('change');\n  }\n\n  private handleDragEnter(evt: DragEvent): void {\n    this.highlight(evt);\n  }\n\n  private handleDragOver(evt: DragEvent): void {\n    this.highlight(evt);\n  }\n\n  private handleDragLeave(evt: DragEvent): void {\n    this.unhighlight(evt);\n  }\n\n  private handleDrop(evt: DragEvent): void {\n    this.unhighlight(evt);\n\n    // Forward to media picker\n    if (this.mediaPickerElement) {\n      const files = [...evt.dataTransfer.files];\n      this.mediaPickerElement.uploadFiles(files);\n    }\n  }\n\n  private handleAttachmentIconClick(): void {\n    // Trigger the file picker on the media picker\n    if (this.mediaPickerElement) {\n      const uploadInput = this.mediaPickerElement.shadowRoot.querySelector(\n        '#upload-input'\n      ) as HTMLInputElement;\n      if (uploadInput) {\n        uploadInput.click();\n      }\n    }\n  }\n\n  private highlight(evt: DragEvent): void {\n    evt.preventDefault();\n    evt.stopPropagation();\n\n    // Always allow highlight for testing purposes, but in real usage check media picker\n    this.pendingDrop = true;\n  }\n\n  private unhighlight(evt: DragEvent): void {\n    evt.preventDefault();\n    evt.stopPropagation();\n    this.pendingDrop = false;\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('attachments')) {\n      // Re-query media picker since the DOM structure may have changed\n      this.mediaPickerElement = this.shadowRoot.querySelector(\n        'temba-media-picker'\n      ) as MediaPicker;\n    }\n\n    if (changedProperties.has('uploading')) {\n      this.dispatchEvent(\n        new CustomEvent('loading', {\n          detail: { loading: this.uploading }\n        })\n      );\n    }\n  }\n\n  public focus() {\n    super.focus();\n    if (this.completionElement) {\n      this.completionElement.focus();\n    }\n  }\n\n  public click() {\n    super.click();\n    if (this.completionElement) {\n      this.completionElement.click();\n    }\n  }\n\n  public render(): TemplateResult {\n    const hasAttachments = this.hasStaticAttachments();\n\n    return html`\n      <temba-field\n        name=${this.name}\n        .label=${this.label}\n        .helpText=${this.helpText}\n        .errors=${this.errors}\n        .widgetOnly=${this.widgetOnly}\n      >\n        <div\n          class=${getClasses({\n            'message-editor-container': true,\n            highlight: this.pendingDrop,\n            'has-attachments': hasAttachments\n          })}\n          @dragenter=${this.handleDragEnter}\n          @dragover=${this.handleDragOver}\n          @dragleave=${this.handleDragLeave}\n          @drop=${this.handleDrop}\n        >\n          <div class=\"completion-wrapper\">\n            <temba-completion\n              name=${this.name}\n              .value=${this.value}\n              placeholder=${this.placeholder}\n              ?textarea=${this.textarea}\n              ?autogrow=${this.autogrow}\n              ?session=${this.session}\n              ?submitOnEnter=${this.submitOnEnter}\n              ?gsm=${this.gsm}\n              ?disableCompletion=${this.disableCompletion}\n              maxlength=${ifDefined(this.maxLength)}\n              counter=${ifDefined(this.counter)}\n              minHeight=${ifDefined(this.minHeight)}\n              widgetOnly\n              @change=${this.handleCompletionChange}\n            ></temba-completion>\n          </div>\n\n          <div class=\"media-wrapper \">\n            <temba-media-picker\n              .accept=${this.accept}\n              .max=${this.maxAttachments}\n              .endpoint=${this.endpoint}\n              @change=${this.handleMediaChange}\n              ignoreDrops\n            ></temba-media-picker>\n          </div>\n          <temba-icon\n            class=\"attachment-icon\"\n            name=${Icon.attachment}\n            size=\"1.2\"\n            @click=${this.handleAttachmentIconClick}\n          ></temba-icon>\n\n          <div class=\"drop-overlay\"></div>\n\n          <!-- Hidden media picker for handling uploads when no attachments are shown -->\n          ${!hasAttachments\n            ? html`<temba-media-picker\n                style=\"display: none;\"\n                .accept=${this.accept}\n                .max=${this.maxAttachments}\n                .endpoint=${this.endpoint}\n                @change=${this.handleMediaChange}\n                ignoreDrops\n              ></temba-media-picker>`\n            : ''}\n        </div>\n      </temba-field>\n    `;\n  }\n}\n"]}

package/out-tsc/src/form/TextInput.js

@@ -152,7 +152,7 @@ export class TextInput extends FormElement {
     firstUpdated(changes) {
         super.firstUpdated(changes);
         this.inputElement = this.shadowRoot.querySelector('.textinput');
-        if (changes.has('counter')) {
+        if (changes.has('counter') && this.counter && this.counter.trim()) {
             let root = this.getParentModax();
             if (root) {
                 root = root.shadowRoot;
@@ -161,7 +161,17 @@ export class TextInput extends FormElement {
                 root = document;
             }
             this.counterElement = root.querySelector(this.counter);
-            this.counterElement.text = this.value;
+            if (this.counterElement) {
+                this.counterElement.text = this.value;
+            }
+        }
+    }
+    updateAutogrowSize() {
+        if (this.textarea && this.autogrow) {
+            const autogrow = this.shadowRoot.querySelector('.grow-wrap > div');
+            if (autogrow) {
+                autogrow.innerText = this.value + String.fromCharCode(10);
+            }
         }
     }
     updated(changes) {
@@ -170,10 +180,7 @@ export class TextInput extends FormElement {
             if (changes.get('value') !== undefined) {
                 this.fireEvent('change');
             }
-            if (this.textarea && this.autogrow) {
-                const autogrow = this.shadowRoot.querySelector('.grow-wrap > div');
-                autogrow.innerText = this.value + String.fromCharCode(10);
-            }
+            this.updateAutogrowSize();
             if (this.cursorStart > -1 && this.cursorEnd > -1) {
                 this.inputElement.setSelectionRange(this.cursorStart, this.cursorEnd);
                 this.cursorStart = -1;