@nyaruka/temba-components 0.130.3 → 0.130.5

package/src/list/SortableList.ts

@@ -1,4 +1,4 @@
-import { css, html, PropertyValueMap, TemplateResult } from 'lit';
+import { css, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
@@ -10,6 +10,7 @@ import { RapidElement } from '../RapidElement';
 // how far we have to drag before it starts
 const DRAG_THRESHOLD = 2;
 export class SortableList extends RapidElement {
+  originalDownDisplay: string;
   static get styles() {
     return css`
       :host {
@@ -19,6 +20,8 @@ export class SortableList extends RapidElement {
       .container {
         user-select: none;
         position: relative;
+        display: grid;
+        grid-template-columns: 1fr;
       }
 
       .container.horizontal {
@@ -31,58 +34,6 @@ export class SortableList extends RapidElement {
         background: var(--color-selection);
       }
 
-      .dragged-item {
-        opacity: 0;
-        pointer-events: none;
-      }
-
-      .sortable {
-        transition: all 300ms ease-in-out;
-        display: flex;
-        padding: 0.4em 0;
-      }
-
-      .container.horizontal .sortable {
-        padding: 0;
-        margin-right: 0.25em;
-        margin-bottom: 0.25em;
-      }
-
-      .drop-indicator {
-        position: absolute;
-        background: var(--color-primary-dark, #1c7cd6);
-        z-index: 1000;
-        pointer-events: none;
-      }
-
-      .container.horizontal .drop-indicator {
-        width: 2px;
-        margin-top: -5px;
-        padding-bottom: 10px;
-      }
-
-      .container:not(.horizontal) .drop-indicator {
-        height: 2px;
-        left: 0;
-      }
-
-      .sortable:hover temba-icon {
-        opacity: 1;
-        cursor: move;
-      }
-
-      .ghost {
-        position: absolute;
-        opacity: 0.7;
-        transition: none;
-        background: var(--color-background, white);
-        border: 1px solid var(--color-primary, #1c7cd6);
-        border-radius: 4px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-        pointer-events: none;
-        z-index: 999;
-      }
-
       .slot {
         flex-grow: 1;
       }
@@ -111,6 +62,9 @@ export class SortableList extends RapidElement {
   @property({ type: String })
   dragHandle: string;
 
+  @property({ type: String })
+  gap: string = '0em';
+
   /**
    * Optional callback to allow parent components to customize the ghost node.
    * Called after the ghost node is cloned but before it is appended to the DOM.
@@ -120,6 +74,8 @@ export class SortableList extends RapidElement {
 
   ghostElement: HTMLDivElement = null;
   downEle: HTMLDivElement = null;
+  originalElementRect: DOMRect = null; // Store original dimensions
+  originalDragIndex: number = -1; // Store original index before moving element
   xOffset = 0;
   yOffset = 0;
   yDown = 0;
@@ -127,7 +83,7 @@ export class SortableList extends RapidElement {
 
   draggingIdx = -1;
   draggingEle = null;
-  dropIndicator: HTMLDivElement = null;
+  dropPlaceholder: HTMLDivElement = null;
   pendingDropIndex = -1;
   pendingTargetElement: HTMLElement = null;
 
@@ -140,17 +96,135 @@ export class SortableList extends RapidElement {
     this.handleMouseDown = this.handleMouseDown.bind(this);
   }
 
-  protected firstUpdated(
-    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
-  ): void {
-    super.firstUpdated(_changedProperties);
-  }
-
   private getSortableElements(): Element[] {
-    return this.shadowRoot
+    const eles = this.shadowRoot
       .querySelector('slot')
       .assignedElements()
-      .filter((ele) => ele.classList.contains('sortable'));
+      .filter(
+        (ele) =>
+          ele.classList.contains('sortable') &&
+          !ele.classList.contains('drop-placeholder')
+      );
+    return eles;
+  }
+
+  private cloneElementWithState(element: HTMLElement): HTMLElement {
+    // First create a basic clone
+    const clone = element.cloneNode(true) as HTMLElement;
+
+    // Helper function to copy form element values recursively
+    const copyFormValues = (original: HTMLElement, cloned: HTMLElement) => {
+      try {
+        // Copy input values
+        const originalInputs = original.querySelectorAll(
+          'input, textarea, select'
+        );
+        const clonedInputs = cloned.querySelectorAll('input, textarea, select');
+
+        originalInputs.forEach((originalInput, index) => {
+          const clonedInput = clonedInputs[index] as
+            | HTMLInputElement
+            | HTMLTextAreaElement
+            | HTMLSelectElement;
+          if (clonedInput) {
+            if (originalInput instanceof HTMLInputElement) {
+              const originalHtmlInput = originalInput as HTMLInputElement;
+              const clonedHtmlInput = clonedInput as HTMLInputElement;
+
+              if (
+                originalHtmlInput.type === 'checkbox' ||
+                originalHtmlInput.type === 'radio'
+              ) {
+                clonedHtmlInput.checked = originalHtmlInput.checked;
+              } else {
+                clonedHtmlInput.value = originalHtmlInput.value;
+              }
+            } else if (originalInput instanceof HTMLTextAreaElement) {
+              (clonedInput as HTMLTextAreaElement).value = originalInput.value;
+            } else if (originalInput instanceof HTMLSelectElement) {
+              (clonedInput as HTMLSelectElement).selectedIndex =
+                originalInput.selectedIndex;
+            }
+          }
+        });
+
+        // Copy properties from all custom elements that might have a value property
+        const allOriginalElements = Array.from(original.querySelectorAll('*'));
+        const allClonedElements = Array.from(cloned.querySelectorAll('*'));
+
+        allOriginalElements.forEach((originalEl, index) => {
+          const clonedEl = allClonedElements[index];
+          if (clonedEl && originalEl) {
+            // Special handling for temba components
+            if (
+              originalEl.tagName &&
+              originalEl.tagName.toLowerCase().startsWith('temba-')
+            ) {
+              try {
+                // Copy common temba component properties
+                const tembaProps = [
+                  'value',
+                  'values',
+                  'selectedValue',
+                  'checked',
+                  'selected',
+                  'textContent'
+                ];
+                tembaProps.forEach((prop) => {
+                  if (
+                    prop in originalEl &&
+                    (originalEl as any)[prop] !== undefined
+                  ) {
+                    (clonedEl as any)[prop] = (originalEl as any)[prop];
+                  }
+                });
+
+                // Copy all attributes for temba components to preserve state
+                Array.from(originalEl.attributes).forEach((attr) => {
+                  clonedEl.setAttribute(attr.name, attr.value);
+                });
+              } catch (e) {
+                // Ignore errors when copying temba properties
+              }
+            } else {
+              // Try to copy value property for other elements
+              try {
+                if (
+                  'value' in originalEl &&
+                  (originalEl as any).value !== undefined
+                ) {
+                  (clonedEl as any).value = (originalEl as any).value;
+                }
+              } catch (e) {
+                // Ignore errors when copying properties
+              }
+
+              // Copy data attributes that might contain state
+              try {
+                Array.from(originalEl.attributes).forEach((attr) => {
+                  if (
+                    attr.name.startsWith('data-') ||
+                    attr.name.startsWith('aria-')
+                  ) {
+                    clonedEl.setAttribute(attr.name, attr.value);
+                  }
+                });
+              } catch (e) {
+                // Ignore errors when copying attributes
+              }
+            }
+          }
+        });
+      } catch (e) {
+        // If anything fails, just return the basic clone
+        console.warn('Failed to copy form values in cloneElementWithState:', e);
+      }
+    };
+
+    // Copy form values for the root element and all descendants
+    copyFormValues(element, clone);
+
+    return clone;
   }
 
   public getIds() {
@@ -208,59 +282,68 @@ export class SortableList extends RapidElement {
     }
   }
 
-  private showDropIndicator(targetElement: HTMLElement, insertAfter: boolean) {
-    this.hideDropIndicator();
+  private showDropPlaceholder(
+    targetElement: HTMLElement,
+    insertAfter: boolean
+  ) {
+    this.hideDropPlaceholder();
 
-    if (!targetElement) return;
+    if (!targetElement || !this.draggingEle) return;
 
-    const container = this.shadowRoot.querySelector('.container');
-    this.dropIndicator = document.createElement('div');
-    this.dropIndicator.className = 'drop-indicator';
+    // Don't show placeholder if we're targeting the dragging element itself
+    if (targetElement === this.draggingEle) return;
 
-    const targetRect = targetElement.getBoundingClientRect();
-    const containerRect = container.getBoundingClientRect();
+    this.dropPlaceholder = document.createElement('div');
 
-    if (this.horizontal) {
-      // For horizontal layout, show vertical line
-      this.dropIndicator.style.height = targetRect.height + 'px';
-      this.dropIndicator.style.top = targetRect.top - containerRect.top + 'px';
-
-      if (insertAfter) {
-        // Show line after target
-        this.dropIndicator.style.left =
-          targetRect.right - containerRect.left + 'px';
-      } else {
-        // Show line before target
-        this.dropIndicator.style.left =
-          targetRect.left - containerRect.left + 'px';
-      }
-    } else {
-      // For vertical layout, show horizontal line
-      this.dropIndicator.style.width = targetRect.width + 'px';
-      this.dropIndicator.style.left =
-        targetRect.left - containerRect.left + 'px';
-
-      if (insertAfter) {
-        // Show line after target
-        this.dropIndicator.style.top =
-          targetRect.bottom - containerRect.top + 'px';
-      } else {
-        // Show line before target
-        this.dropIndicator.style.top =
-          targetRect.top - containerRect.top + 'px';
-      }
+    this.dropPlaceholder.className = 'drop-placeholder sortable';
+
+    // Copy dimensions from the original element (before it was hidden)
+    if (this.originalElementRect) {
+      const rect = this.originalElementRect;
+      this.dropPlaceholder.style.width = rect.width + 'px';
+      this.dropPlaceholder.style.height = rect.height + 'px';
+      this.dropPlaceholder.style.minHeight = rect.height + 'px';
+      this.dropPlaceholder.style.borderRadius = 'var(--curvature)';
+      this.dropPlaceholder.style.flexShrink = '0';
     }
 
-    container.appendChild(this.dropIndicator);
+    // Insert the placeholder in the correct position in the DOM
+    if (insertAfter) {
+      targetElement.insertAdjacentElement('afterend', this.dropPlaceholder);
+    } else {
+      targetElement.insertAdjacentElement('beforebegin', this.dropPlaceholder);
+    }
   }
 
-  private hideDropIndicator() {
-    if (this.dropIndicator) {
-      this.dropIndicator.remove();
-      this.dropIndicator = null;
+  private hideDropPlaceholder() {
+    if (this.dropPlaceholder) {
+      this.dropPlaceholder.remove();
+      this.dropPlaceholder = null;
     }
   }
 
+  private showInitialPlaceholder() {
+    if (!this.downEle || !this.originalElementRect) return;
+
+    this.dropPlaceholder = document.createElement('div');
+    this.dropPlaceholder.className = 'drop-placeholder sortable';
+
+    // Copy dimensions from the original element
+    const rect = this.originalElementRect;
+    this.dropPlaceholder.style.width = rect.width + 'px';
+    this.dropPlaceholder.style.height = rect.height + 'px';
+    this.dropPlaceholder.style.minHeight = rect.height + 'px';
+    this.dropPlaceholder.style.borderRadius = 'var(--curvature)';
+    this.dropPlaceholder.style.flexShrink = '0';
+    this.dropPlaceholder.style.background =
+      'rgba(var(--color-primary-rgb), 0.1)';
+    this.dropPlaceholder.style.border =
+      '2px dashed rgba(var(--color-primary-rgb), 0.3)';
+
+    // Insert the placeholder right after the hidden original element
+    this.downEle.insertAdjacentElement('afterend', this.dropPlaceholder);
+  }
+
   private handleMouseDown(event: MouseEvent) {
     let ele = event.target as HTMLDivElement;
 
@@ -275,14 +358,14 @@ export class SortableList extends RapidElement {
     if (ele) {
       event.preventDefault();
       event.stopPropagation();
-
       this.downEle = ele;
       this.draggingId = ele.id;
       this.draggingIdx = this.getRowIndex(ele.id);
       this.draggingEle = ele;
 
-      // Use getBoundingClientRect for accurate offsets
+      // Use getBoundingClientRect for accurate offsets and store original dimensions
       const rect = ele.getBoundingClientRect();
+      this.originalElementRect = rect; // Store the original rect before hiding
       this.xOffset = event.clientX - rect.left;
       this.yOffset = event.clientY - rect.top;
       this.yDown = event.clientY;
@@ -304,38 +387,43 @@ export class SortableList extends RapidElement {
         id: this.downEle.id
       });
 
-      this.ghostElement = this.downEle.cloneNode(true) as HTMLDivElement;
-      this.ghostElement.classList.add('ghost');
+      // Capture the original index BEFORE hiding the element
+      this.originalDragIndex = this.getRowIndex(this.downEle.id);
 
-      // dim the original element while dragging
-      this.downEle.style.pointerEvents = 'none';
-      this.downEle.style.opacity = '0.5';
+      // Create a clone of the element to use as the ghost
+      this.ghostElement = this.cloneElementWithState(
+        this.downEle
+      ) as HTMLDivElement;
 
-      const rect = this.downEle.getBoundingClientRect();
-      this.ghostElement.style.transition = 'transform 300ms linear';
+      // Hide the original element during dragging using inline styles
+      this.originalDownDisplay = this.downEle.style.display;
+      this.downEle.style.display = 'none';
+
+      // Style the clone as a ghost
+      this.ghostElement.classList.add('ghost');
+
+      // Use the stored original dimensions for positioning
+      const rect = this.originalElementRect;
 
-      this.ghostElement.style.width = rect.width + 'px';
-      this.ghostElement.style.height = rect.height + 'px';
       this.ghostElement.style.position = 'fixed';
       this.ghostElement.style.left = event.clientX - this.xOffset + 'px';
       this.ghostElement.style.top = event.clientY - this.yOffset + 'px';
-      this.ghostElement.style.pointerEvents = 'none';
-      this.ghostElement.style.border =
-        '1px solid var(--color-primary, #1c7cd6)';
+      this.ghostElement.style.width = rect.width + 'px';
+      this.ghostElement.style.height = rect.height + 'px';
       this.ghostElement.style.zIndex = '99999';
-      this.ghostElement.style.background = '#fff';
-      this.ghostElement.style.opacity = '0.7';
-      this.ghostElement.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.2)';
-      this.ghostElement.style.borderRadius = 'var(--curvature)';
+      this.ghostElement.style.opacity = '0.8';
+      this.ghostElement.style.transform = 'scale(1.03)';
 
       // allow component to customize the ghost node
       if (this.prepareGhost) {
         this.prepareGhost(this.ghostElement);
       }
 
+      // Add the clone to document.body for dragging
       document.body.appendChild(this.ghostElement);
 
-      // this.downEle = null;
+      // Show initial placeholder in the original position to maintain layout
+      this.showInitialPlaceholder();
 
       // Add global click blocker when drag starts
       if (!this.clickBlocker) {
@@ -356,17 +444,23 @@ export class SortableList extends RapidElement {
       if (targetInfo) {
         const { element: targetElement, insertAfter } = targetInfo;
         const targetIdx = this.getRowIndex(targetElement.id);
-        const originalDragIdx = this.getRowIndex(this.draggingEle.id);
-
-        // Calculate the intended drop index
-        let dropIdx = targetIdx;
-        if (insertAfter) {
-          dropIdx += 1;
-        }
 
-        // Adjust dropIdx if dragging forward in the list
-        if (originalDragIdx < dropIdx) {
-          dropIdx -= 1;
+        // Use the original drag index we captured before moving the element
+        const originalDragIdx = this.originalDragIndex;
+
+        // Calculate where the dragged element will end up in the final array
+        // targetIdx is the position of target element in current DOM (missing dragged element)
+
+        let dropIdx;
+        if (targetIdx < originalDragIdx) {
+          // Target is before the original drag position - moving backward
+          dropIdx = insertAfter ? targetIdx + 1 : targetIdx;
+        } else {
+          // Target was originally after the drag position - moving forward
+          // When moving the dragged element forward (i.e., to a higher index), the targetIdx is based on the current DOM,
+          // which no longer includes the dragged element. This means all elements after the original position have shifted left by one,
+          // so we need to subtract 1 from targetIdx to get the correct insertion index. If inserting after the target, we use targetIdx as is.
+          dropIdx = insertAfter ? targetIdx : targetIdx - 1;
         }
 
         // Store pending drop info but don't fire event yet
@@ -374,10 +468,10 @@ export class SortableList extends RapidElement {
         this.pendingDropIndex = dropIdx;
         this.pendingTargetElement = targetElement;
 
-        // Show drop indicator
-        this.showDropIndicator(targetElement, insertAfter);
+        // Show drop placeholder
+        this.showDropPlaceholder(targetElement, insertAfter);
       } else {
-        this.hideDropIndicator();
+        this.hideDropPlaceholder();
         this.dropTargetId = null;
         this.pendingDropIndex = -1;
         this.pendingTargetElement = null;
@@ -390,16 +484,23 @@ export class SortableList extends RapidElement {
       evt.preventDefault();
       evt.stopPropagation();
 
-      // restore visibility of the dragged item
+      // Remove the ghost clone from document.body
+      if (this.ghostElement) {
+        this.ghostElement.remove();
+      }
 
+      // Restore visibility of the original element by clearing inline styles
       if (this.downEle) {
-        this.downEle.style.pointerEvents = '';
-        this.downEle.style.opacity = '1';
+        this.downEle.style.display = this.originalDownDisplay;
       }
 
+      // Clear visual effects before firing events
+      this.hideDropPlaceholder();
+
       // fire the order changed event only when dropped if we have a valid drop position
       if (this.pendingDropIndex >= 0 && this.pendingTargetElement) {
-        const originalDragIdx = this.getRowIndex(this.draggingEle.id);
+        // Use the original drag index we captured before hiding the element
+        const originalDragIdx = this.originalDragIndex;
 
         // use swap-based logic - report which indexes need to be swapped
         const fromIdx = originalDragIdx;
@@ -420,18 +521,15 @@ export class SortableList extends RapidElement {
       this.draggingId = null;
       this.dropTargetId = null;
       this.downEle = null;
+      this.originalElementRect = null;
+      this.originalDragIndex = -1;
       this.pendingDropIndex = -1;
       this.pendingTargetElement = null;
 
-      if (this.ghostElement) {
-        // Remove from body if present
-        if (this.ghostElement.parentNode) {
-          this.ghostElement.parentNode.removeChild(this.ghostElement);
-        }
-        this.ghostElement = null;
-      }
+      // Clear the ghost reference since we removed it
+      this.ghostElement = null;
 
-      this.hideDropIndicator();
+      this.hideDropPlaceholder();
 
       // Keep the click blocker active for a short time after drop
       if (this.clickBlocker) {
@@ -451,7 +549,10 @@ export class SortableList extends RapidElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="container ${this.horizontal ? 'horizontal' : ''}">
+      <div
+        class="container ${this.horizontal ? 'horizontal' : ''}"
+        style="gap: ${this.gap}"
+      >
         <slot @mousedown=${this.handleMouseDown}></slot>
       </div>
     `;

package/src/live/ContactChat.ts

@@ -789,16 +789,13 @@ export class ContactChat extends ContactStoreElement {
           text: renderChannelEvent(event as ChannelEvent)
         };
         break;
+      default:
+        console.error('Unknown event type', event);
     }
 
-    if (message && event.created_on) {
+    if (message) {
+      message.id = event.uuid;
       message.date = new Date(event.created_on);
-    } else {
-      console.error('Unknown event type', event);
-    }
-
-    if (!message.id) {
-      message.id = event.uuid || event.type + '@' + event.created_on;
     }
 
     return message;
@@ -855,9 +852,14 @@ export class ContactChat extends ContactStoreElement {
         } else if (
           event.type === 'msg_created' ||
           event.type === 'msg_received' ||
+          event.type === 'ivr_created' ||
           event.type === 'broadcast_created'
         ) {
           const msgEvent = event as MsgEvent;
+          const status = msgEvent.status || msgEvent._status;
+          const failedReason =
+            msgEvent.failed_reason_display || msgEvent._failed_reason;
+
           messages.push({
             id: event.uuid,
             type: msgEvent.type === 'msg_received' ? 'msg_in' : 'msg_out',
@@ -865,7 +867,7 @@ export class ContactChat extends ContactStoreElement {
             date: new Date(msgEvent.created_on),
             attachments: msgEvent.msg.attachments,
             text: msgEvent.msg.text,
-            sendError: msgEvent.status === 'E' || msgEvent.status === 'F',
+            sendError: status === 'E' || status === 'F',
             popup: html`<div
               style="display: flex; flex-direction: row; align-items:center; justify-content: space-between;font-size:0.9em;line-height:1em;min-width:10em"
             >
@@ -880,25 +882,30 @@ export class ContactChat extends ContactStoreElement {
                       ${msgEvent.optin.name}
                     </div>`
                   : null}
-                ${msgEvent.failed_reason_display
+                ${failedReason
                   ? html`
                       <div
                         style="margin-top:0.2em;margin-right: 0.5em;min-width:10em;max-width:15em;color:var(--color-error);font-size:0.9em"
                       >
-                        ${msgEvent.failed_reason_display}
+                        ${failedReason}
                       </div>
                     `
                   : null}
               </div>
-              ${msgEvent.logs_url
-                ? html`<a style="margin-left:0.5em" href="${msgEvent.logs_url}"
+              ${msgEvent.logs_url || msgEvent._logs_url
+                ? html`<a
+                    style="margin-left:0.5em"
+                    href="${msgEvent.logs_url || msgEvent._logs_url}"
                     ><temba-icon name="log"></temba-icon
                   ></a>`
                 : null}
             </div> `
           });
         } else {
-          messages.push(this.getEventMessage(event));
+          const msg = this.getEventMessage(event);
+          if (msg) {
+            messages.push(msg);
+          }
         }
       });