@nyaruka/temba-components 0.126.0 → 0.128.0

package/src/flow/EditorNode.ts

@@ -21,26 +21,10 @@ export class EditorNode extends RapidElement {
   @property({ type: Object })
   private ui: NodeUI;
 
-  // Drag state properties
-  private isDragging = false;
-  private dragStartPos = { x: 0, y: 0 };
-  private nodeStartPos = { left: 0, top: 0 };
-
-  // Bound event handlers to maintain proper 'this' context
-  private boundMouseMove = this.handleMouseMove.bind(this);
-  private boundMouseUp = this.handleMouseUp.bind(this);
-
-  /**
-   * Snaps a coordinate value to the nearest 20px grid position
-   */
-  private snapToGrid(value: number): number {
-    return Math.round(value / 20) * 20;
-  }
-
   static get styles() {
     return css`
+
       .node {
-        position: absolute;
         background-color: #fff;
         box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
         min-width: 200px;
@@ -49,7 +33,7 @@ export class EditorNode extends RapidElement {
         color: #333;
         cursor: move;
         user-select: none;
-        z-index: 500;
+
       }
 
       .node:hover {
@@ -64,21 +48,59 @@ export class EditorNode extends RapidElement {
         
       .action {
         max-width: 200px;
+        position: relative;
+      }
+
+      .action.sortable {
+        display: flex;
+        align-items: stretch;
+      }
+
+      .action .action-content {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
       }
 
       .action .body {
         padding: 1em;
       }
 
+      .action .drag-handle {
+        opacity: 0;
+        transition: all 200ms ease-in-out;
+        cursor: move;
+        background: rgba(0, 0, 0, 0.02);
+        max-width:0px;
+        position: absolute;
+      }
+
+      .action:hover .drag-handle {
+        opacity: 0.5;
+        padding: 0.25em;
+        max-width: 20px;
+      }
+
+      .action .drag-handle:hover {
+        opacity: 1;
+        
+      }
+
       .action .title,
       .router .title {
+        display: flex;
         color: #fff;
         padding: 5px 1px;
         text-align: center;
         font-size: 1em;
         font-weight: normal;
+
       }
 
+      .title .name {
+        flex-grow: 1;
+        }
+
       .quick-replies {
         margin-top: 0.5em;
       }
@@ -133,180 +155,89 @@ export class EditorNode extends RapidElement {
   }`;
   }
 
+  constructor() {
+    super();
+    this.handleActionOrderChanged = this.handleActionOrderChanged.bind(this);
+  }
+
   protected updated(
     changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
     super.updated(changes);
     if (changes.has('node')) {
-      this.plumber.makeTarget(this.node.uuid);
-
-      // our node was changed, see if we have new destinations
-      for (const exit of this.node.exits) {
-        if (!exit.destination_uuid) {
-          this.plumber.makeSource(exit.uuid);
-        } else {
-          this.plumber.connectIds(exit.uuid, exit.destination_uuid);
+      // make our initial connections
+      if (changes.get('node') === undefined) {
+        // this.plumber.makeTarget(this.node.uuid);
+        for (const exit of this.node.exits) {
+          if (!exit.destination_uuid) {
+            this.plumber.makeSource(exit.uuid);
+          } else {
+            this.plumber.connectIds(exit.uuid, exit.destination_uuid);
+          }
         }
       }
 
-      const ele = this.querySelector('.node');
+      const ele = this.parentElement;
       const rect = ele.getBoundingClientRect();
 
       getStore()
-        .getState()
+        ?.getState()
         .expandCanvas(
           this.ui.position.left + rect.width,
           this.ui.position.top + rect.height
         );
-
-      // Add drag event listeners to the node
-      this.addDragEventListeners();
-    }
-  }
-
-  private addDragEventListeners(): void {
-    const nodeElement = this.querySelector('.node') as HTMLElement;
-    if (!nodeElement) return;
-
-    nodeElement.addEventListener('mousedown', this.handleMouseDown.bind(this));
-    document.addEventListener('mousemove', this.boundMouseMove);
-    document.addEventListener('mouseup', this.boundMouseUp);
-  }
-
-  private handleMouseDown(event: MouseEvent): void {
-    // Only start dragging if clicking on the node itself, not on exits or other interactive elements
-    const target = event.target as HTMLElement;
-    if (target.classList.contains('exit') || target.closest('.exit')) {
-      return;
-    }
-
-    this.isDragging = true;
-    this.dragStartPos = { x: event.clientX, y: event.clientY };
-    this.nodeStartPos = {
-      left: this.ui.position.left,
-      top: this.ui.position.top
-    };
-
-    // Add dragging class for visual feedback
-    const nodeElement = this.querySelector('.node') as HTMLElement;
-    if (nodeElement) {
-      nodeElement.classList.add('dragging');
-    }
-
-    // Elevate connections for this node during dragging
-    if (this.plumber) {
-      this.plumber.elevateNodeConnections(this.node.uuid);
-    }
-
-    event.preventDefault();
-    event.stopPropagation();
-  }
-
-  private handleMouseMove(event: MouseEvent): void {
-    if (!this.isDragging) return;
-
-    const deltaX = event.clientX - this.dragStartPos.x;
-    const deltaY = event.clientY - this.dragStartPos.y;
-
-    const newLeft = this.nodeStartPos.left + deltaX;
-    const newTop = this.nodeStartPos.top + deltaY;
-
-    // Snap to 20px grid
-    const snappedLeft = this.snapToGrid(newLeft);
-    const snappedTop = this.snapToGrid(newTop);
-
-    // Update the UI position temporarily (for visual feedback)
-    const nodeElement = this.querySelector('.node') as HTMLElement;
-    if (nodeElement) {
-      nodeElement.style.left = `${snappedLeft}px`;
-      nodeElement.style.top = `${snappedTop}px`;
-    }
-
-    // Repaint connections during dragging for smooth updates
-    if (this.plumber) {
-      this.plumber.repaintEverything();
     }
   }
 
-  private handleMouseUp(event: MouseEvent): void {
-    if (!this.isDragging) return;
-
-    this.isDragging = false;
+  private handleActionOrderChanged(event: CustomEvent) {
+    const [fromIdx, toIdx] = event.detail.swap;
 
-    // Remove dragging class
-    const nodeElement = this.querySelector('.node') as HTMLElement;
-    if (nodeElement) {
-      nodeElement.classList.remove('dragging');
-    }
-
-    // Restore normal z-index for connections
-    if (this.plumber) {
-      this.plumber.restoreNodeConnections(this.node.uuid);
-    }
-
-    const deltaX = event.clientX - this.dragStartPos.x;
-    const deltaY = event.clientY - this.dragStartPos.y;
+    // swap our actions
+    const newActions = [...this.node.actions];
+    const movedAction = newActions.splice(fromIdx, 1)[0];
+    newActions.splice(toIdx, 0, movedAction);
 
-    const newLeft = this.nodeStartPos.left + deltaX;
-    const newTop = this.nodeStartPos.top + deltaY;
+    // udate our internal reprensentation, this isn't strictly necessary
+    // since the editor will update us from it's definition subscription
+    // but it makes testing a lot easier
+    this.node = { ...this.node, actions: newActions };
 
-    // Snap to 20px grid for final position
-    const snappedLeft = this.snapToGrid(newLeft);
-    const snappedTop = this.snapToGrid(newTop);
-
-    // Update the store with the new snapped position
-    const newPosition = { left: snappedLeft, top: snappedTop };
     getStore()
-      .getState()
-      .updateCanvasPositions({
-        [this.node.uuid]: newPosition
-      });
-
-    // Repaint connections if plumber is available
-    if (this.plumber) {
-      this.plumber.repaintEverything();
-    }
-
-    getStore().getState().updateNodePosition(this.node.uuid, newPosition);
-
-    // Fire a custom event with the new coordinates
-    /*this.fireCustomEvent(CustomEventType.Moved, {
-      nodeId: this.node.uuid,
-      position: newPosition,
-      oldPosition: {
-        left: this.nodeStartPos.left,
-        top: this.nodeStartPos.top
-      }
-    });*/
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-    // Clean up event listeners
-    document.removeEventListener('mousemove', this.boundMouseMove);
-    document.removeEventListener('mouseup', this.boundMouseUp);
+      ?.getState()
+      .updateNode(this.node.uuid, { ...this.node, actions: newActions });
   }
 
   private renderTitle(config: UIConfig) {
     return html`<div class="title" style="background:${config.color}">
-      ${config.name}
+      ${this.node?.actions?.length > 1
+        ? html`<temba-icon class="drag-handle" name="sort"></temba-icon>`
+        : null}
+
+      <div class="name">${config.name}</div>
     </div>`;
   }
 
-  private renderAction(node: Node, action: Action) {
+  private renderAction(node: Node, action: Action, index: number) {
     const config = EDITOR_CONFIG[action.type];
 
     if (config) {
-      return html`<div class="action ${action.type}">
-        ${this.renderTitle(config)}
-        <div class="body">
-          ${config.render
-            ? config.render(node, action)
-            : html`<pre>${action.type}</pre>`}
+      return html`<div
+        class="action sortable ${action.type}"
+        id="action-${index}"
+      >
+        <div class="action-content">
+          ${this.renderTitle(config)}
+          <div class="body">
+            ${config.render
+              ? config.render(node, action)
+              : html`<pre>${action.type}</pre>`}
+          </div>
         </div>
       </div>`;
     }
-    return html`<div>${action.type}</div>`;
+    return html`<div class="action sortable" id="action-${index}">
+      ${action.type}
+    </div>`;
   }
 
   private renderRouter(router: Router, ui: NodeUI) {
@@ -363,9 +294,16 @@ export class EditorNode extends RapidElement {
         class="node"
         style="left:${this.ui.position.left}px;top:${this.ui.position.top}px"
       >
-        ${this.node.actions.map((actionSpec) => {
-          return this.renderAction(this.node, actionSpec);
-        })}
+        ${this.node.actions.length > 0
+          ? html`<temba-sortable-list
+              dragHandle="drag-handle"
+              @temba-order-changed="${this.handleActionOrderChanged}"
+            >
+              ${this.node.actions.map((actionSpec, index) => {
+                return this.renderAction(this.node, actionSpec, index);
+              })}
+            </temba-sortable-list>`
+          : ''}
         ${this.node.router
           ? html` ${this.renderRouter(this.node.router, this.ui)}
             ${this.renderCategories(this.node)}`

package/src/flow/StickyNote.ts

@@ -0,0 +1,284 @@
+import { css, html, PropertyValueMap, TemplateResult } from 'lit';
+import { property } from 'lit/decorators.js';
+import { RapidElement } from '../RapidElement';
+import { StickyNote as StickyNoteData } from '../store/flow-definition';
+import { getStore } from '../store/Store';
+
+export class StickyNote extends RapidElement {
+  @property({ type: String })
+  public uuid: string;
+
+  @property({ type: Object })
+  public data: StickyNoteData;
+
+  @property({ type: Boolean })
+  private dragging = false;
+
+  static get styles() {
+    return css`
+      :host {
+        --sticky-color: #fef08a;
+        --sticky-border-color: #facc15;
+        --sticky-text-color: #451a03;
+        --curvature: 8px;
+      }
+
+      .sticky-note {
+        width: 200px;
+        background-color: var(--sticky-color);
+        border: 1px solid var(--sticky-border-color);
+        border-radius: var(--curvature);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+          sans-serif;
+        font-size: 12px;
+        overflow: hidden;
+        transition: transform 0.1s ease, box-shadow 0.2s ease;
+        color: var(--sticky-text-color);
+      }
+
+      .sticky-note.dragging {
+        opacity: 0.5;
+        z-index: 1000;
+        transform: rotate(0deg);
+        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+      }
+
+      .sticky-note:hover {
+        transform: translateY(0px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+      }
+
+      /* Color themes */
+      .sticky-note.yellow {
+        --sticky-color: #fef08a;
+        --sticky-border-color: #facc15;
+        --sticky-text-color: #451a03;
+      }
+      .sticky-note.blue {
+        --sticky-color: #bfdbfe;
+        --sticky-border-color: #3b82f6;
+        --sticky-text-color: #1e3a8a;
+      }
+      .sticky-note.pink {
+        --sticky-color: #fce7f3;
+        --sticky-border-color: #ec4899;
+        --sticky-text-color: #831843;
+      }
+      .sticky-note.green {
+        --sticky-color: #d1fae5;
+        --sticky-border-color: #10b981;
+        --sticky-text-color: #064e3b;
+      }
+      .sticky-note.gray {
+        --sticky-color: #f3f4f6;
+        --sticky-border-color: #6b7280;
+        --sticky-text-color: #374151;
+      }
+
+      /* Title and body containers */
+      .sticky-title-container {
+        position: relative;
+        border-bottom: 1px solid var(--sticky-border-color);
+        background-color: rgba(255, 255, 255, 0.5);
+        display: flex;
+        align-items: center;
+      }
+      .sticky-body-container {
+        position: relative;
+      }
+
+      /* Editable fields */
+      [contenteditable='true'] {
+        margin: 2px;
+        padding: 4px 8px;
+        outline: none;
+        border-radius: var(--curvature);
+        transition: background 0.2s;
+      }
+      [contenteditable='true']:focus {
+        background-color: rgba(255, 255, 255, 0.8);
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        outline-color: var(--sticky-border-color);
+      }
+
+      /* Title */
+      .sticky-title {
+        font-weight: 600;
+        font-size: 13px;
+        color: var(--sticky-text-color);
+        min-height: 20px;
+        line-height: 20px;
+        border-top-left-radius: var(--curvature);
+        border-top-right-radius: var(--curvature);
+        flex-grow: 1;
+        padding-left: 8px;
+      }
+      .sticky-title:empty::before {
+        content: 'Click to add title';
+        opacity: 0.5;
+        font-style: italic;
+      }
+      .sticky-title:focus {
+        border-bottom-left-radius: 0px;
+        border-bottom-right-radius: 0px;
+      }
+
+      /* Body */
+      .sticky-body {
+        padding: 8px 10px;
+        color: var(--sticky-text-color);
+        line-height: 1.4;
+        min-height: 48px;
+        word-wrap: break-word;
+        white-space: pre-wrap;
+      }
+      .sticky-body:empty::before {
+        content: 'Click to add note';
+        opacity: 0.5;
+        font-style: italic;
+      }
+      .sticky-body:focus {
+        border-top-left-radius: 0px;
+        border-top-right-radius: 0px;
+      }
+
+      /* Drag icon */
+      .sticky-title-container > .drag-handle {
+        --icon-color: var(--sticky-border-color);
+        cursor: move;
+        max-width: 0px;
+        overflow: hidden;
+        transition: all 0.2s ease;
+        padding-left: 0;
+      }
+
+      .sticky-note:hover .drag-handle {
+        max-width: 20px;
+        padding-left: 8px;
+      }
+
+      .sticky-note:focus-within .sticky-title-container > .drag-handle {
+        max-width: 0px;
+        padding-left: 0px;
+      }
+
+      /* Focus/active states */
+      .sticky-note:focus-within {
+        box-shadow: 0 0 0 1px var(--sticky-border-color),
+          0 10px 20px rgba(0, 0, 0, 0.3);
+      }
+
+      .sticky-note:focus-within .drag-handle {
+        max-width: 0px;
+      }
+    `;
+  }
+
+  protected updated(
+    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.updated(changes);
+    if (changes.has('data') || changes.has('uuid')) {
+      this.updateCanvasSize();
+    }
+  }
+
+  private updateCanvasSize(): void {
+    if (!this.data) {
+      return;
+    }
+
+    const element = this.querySelector('.sticky-note');
+    if (element) {
+      const rect = element.getBoundingClientRect();
+      getStore()
+        .getState()
+        .expandCanvas(
+          this.data.position.left + rect.width,
+          this.data.position.top + rect.height
+        );
+    }
+  }
+
+  private handleTitleBlur(event: FocusEvent): void {
+    const target = event.target as HTMLElement;
+    const newTitle = target.textContent || '';
+
+    if (this.data && newTitle !== this.data.title) {
+      getStore()
+        .getState()
+        .updateStickyNote(this.uuid, {
+          ...this.data,
+          title: newTitle
+        });
+    }
+    this.requestUpdate();
+  }
+
+  private handleBodyBlur(event: FocusEvent): void {
+    const target = event.target as HTMLElement;
+    const newBody = target.textContent || '';
+
+    if (this.data && newBody !== this.data.body) {
+      getStore()
+        .getState()
+        .updateStickyNote(this.uuid, {
+          ...this.data,
+          body: newBody
+        });
+    }
+    this.requestUpdate();
+  }
+
+  private handleKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      (event.target as HTMLElement).blur();
+    }
+    if (event.key === 'Escape') {
+      (event.target as HTMLElement).blur();
+    }
+  }
+
+  public render(): TemplateResult {
+    if (!this.data) {
+      return html`<div class="sticky-note" style="display: none;"></div>`;
+    }
+
+    const style = `left: ${this.data.position.left}px; top: ${this.data.position.top}px;`;
+
+    return html`
+      <div
+        class="sticky-note ${this.data.color} ${this.dragging
+          ? 'dragging'
+          : ''}"
+        style="${style}"
+        data-uuid="${this.uuid}"
+      >
+        <div class="sticky-title-container">
+          <temba-icon name="drag" class="drag-handle"></temba-icon>
+          <div
+            class="sticky-title"
+            contenteditable="true"
+            @blur="${this.handleTitleBlur}"
+            @keydown="${this.handleKeyDown}"
+            @mousedown="${(e: MouseEvent) => e.stopPropagation()}"
+            .textContent="${this.data.title}"
+          ></div>
+        </div>
+        <div class="sticky-body-container">
+          <div
+            class="sticky-body"
+            contenteditable="true"
+            @blur="${this.handleBodyBlur}"
+            @keydown="${this.handleKeyDown}"
+            @mousedown="${(e: MouseEvent) => e.stopPropagation()}"
+            .textContent="${this.data.body}"
+          ></div>
+          <div class="edit-icon" title="Edit note"></div>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/list/RunList.ts

@@ -217,7 +217,8 @@ export class RunList extends TembaList {
                   placeholder="Result Preview"
                   valueKey="key"
                   @change=${this.handleColumnChanged}
-                />
+                  style="z-index: 10;"
+                ></temba-select>
               `
             : null}
         </div>

package/src/list/SortableList.ts

@@ -108,6 +108,9 @@ export class SortableList extends RapidElement {
   @property({ type: String })
   dropTargetId: string;
 
+  @property({ type: String })
+  dragHandle: string;
+
   /**
    * 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.
@@ -260,6 +263,14 @@ export class SortableList extends RapidElement {
 
   private handleMouseDown(event: MouseEvent) {
     let ele = event.target as HTMLDivElement;
+
+    // if we have a drag handle, only allow dragging from that element
+    if (this.dragHandle) {
+      if (!ele.classList.contains(this.dragHandle)) {
+        return;
+      }
+    }
+
     ele = ele.closest('.sortable');
     if (ele) {
       event.preventDefault();

package/src/locales/es.ts

@@ -1,13 +1,18 @@
-// Do not modify this file by hand!
-// Re-generate this file by running lit-localize
-
-/* eslint-disable no-irregular-whitespace */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-export const templates = {
-  scf1453991c986b25: `Tab para completar, enter para seleccionar`,
-  s73b4d70c02f4b4e0: `No options`,
-  s8f02e3a18ffc083a: `Are not currently in a flow`,
-  s638236250662c6b3: `Have sent a message in the last`,
-  s4788ee206c4570c7: `Have not started this flow in the last 90 days`
-};
+
+    // Do not modify this file by hand!
+    // Re-generate this file by running lit-localize
+
+    
+    
+
+    /* eslint-disable no-irregular-whitespace */
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+
+    export const templates = {
+      'scf1453991c986b25': `Tab para completar, enter para seleccionar`,
+'s73b4d70c02f4b4e0': `No options`,
+'s8f02e3a18ffc083a': `Are not currently in a flow`,
+'s638236250662c6b3': `Have sent a message in the last`,
+'s4788ee206c4570c7': `Have not started this flow in the last 90 days`,
+    };
+