@nyaruka/temba-components 0.129.1 → 0.129.3

package/out-tsc/src/flow/StickyNote.js

@@ -7,6 +7,8 @@ export class StickyNote extends RapidElement {
     constructor() {
         super(...arguments);
         this.dragging = false;
+        this.selected = false;
+        this.colorPickerExpanded = false;
     }
     static get styles() {
         return css `
@@ -29,10 +31,11 @@ export class StickyNote extends RapidElement {
         overflow: hidden;
         transition: transform 0.1s ease, box-shadow 0.2s ease;
         color: var(--sticky-text-color);
+        opacity: 0.85;
       }
 
       .sticky-note.dragging {
-        opacity: 0.5;
+        opacity: 0.7;
         z-index: 1000;
         transform: rotate(0deg);
         box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
@@ -141,20 +144,16 @@ export class StickyNote extends RapidElement {
       .sticky-title-container > .drag-handle {
         --icon-color: var(--sticky-border-color);
         cursor: move;
-        max-width: 0px;
+        max-width: 20px;
+        padding-left: 8px;
         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 */
@@ -165,6 +164,83 @@ export class StickyNote extends RapidElement {
 
       .sticky-note:focus-within .drag-handle {
         max-width: 0px;
+        padding-left: 0px;
+      }
+
+      /* Color picker */
+      .color-picker {
+        position: absolute;
+        bottom: 4px;
+        right: 4px;
+        width: 8px;
+        height: 8px;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+
+        border-radius: 3px;
+        background-color: var(--sticky-color);
+        cursor: pointer;
+        transition: transform 0.2s ease;
+      }
+
+      .color-picker:hover {
+        transform: scale(1.1);
+      }
+
+      .color-options {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        display: flex;
+        gap: 4px;
+        background-color: rgba(255, 255, 255, 0.9);
+        border: 1px solid #ccc;
+        border-radius: 6px;
+        padding: 3px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        transform-origin: bottom right;
+        transform: scale(0);
+        opacity: 0;
+        transition: transform 0.2s ease, opacity 0.2s ease;
+        z-index: 1000;
+      }
+
+      .color-options.expanded {
+        transform: scale(1);
+        opacity: 1;
+      }
+
+      .color-option {
+        width: 12px;
+        height: 12px;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+        border-radius: 3px;
+        cursor: pointer;
+        transition: transform 0.15s ease, border-color 0.15s ease;
+      }
+
+      .color-option:hover {
+        transform: scale(1.1);
+        border-color: rgba(0, 0, 0, 0.4);
+      }
+
+      .color-option.yellow {
+        background-color: #fef08a;
+      }
+
+      .color-option.blue {
+        background-color: #bfdbfe;
+      }
+
+      .color-option.pink {
+        background-color: #fce7f3;
+      }
+
+      .color-option.green {
+        background-color: #d1fae5;
+      }
+
+      .color-option.gray {
+        background-color: #f3f4f6;
       }
     `;
     }
@@ -212,6 +288,15 @@ export class StickyNote extends RapidElement {
         }
         this.requestUpdate();
     }
+    handleContentMouseDown(event) {
+        // If this sticky note is selected, don't stop propagation
+        // so that group dragging can work
+        if (this.selected) {
+            return;
+        }
+        // Otherwise, stop propagation to enable editing
+        event.stopPropagation();
+    }
     handleKeyDown(event) {
         if (event.key === 'Enter' && !event.shiftKey) {
             event.preventDefault();
@@ -221,6 +306,25 @@ export class StickyNote extends RapidElement {
             event.target.blur();
         }
     }
+    handleColorPickerMouseEnter() {
+        this.colorPickerExpanded = true;
+    }
+    handleColorPickerMouseLeave() {
+        this.colorPickerExpanded = false;
+    }
+    handleColorOptionClick(event, color) {
+        event.stopPropagation();
+        if (this.data && color !== this.data.color) {
+            getStore()
+                .getState()
+                .updateStickyNote(this.uuid, {
+                ...this.data,
+                color: color
+            });
+        }
+        this.colorPickerExpanded = false;
+        this.requestUpdate();
+    }
     render() {
         if (!this.data) {
             return html `<div class="sticky-note" style="display: none;"></div>`;
@@ -241,7 +345,7 @@ export class StickyNote extends RapidElement {
             contenteditable="true"
             @blur="${this.handleTitleBlur}"
             @keydown="${this.handleKeyDown}"
-            @mousedown="${(e) => e.stopPropagation()}"
+            @mousedown="${this.handleContentMouseDown}"
             .textContent="${this.data.title}"
           ></div>
         </div>
@@ -251,10 +355,44 @@ export class StickyNote extends RapidElement {
             contenteditable="true"
             @blur="${this.handleBodyBlur}"
             @keydown="${this.handleKeyDown}"
-            @mousedown="${(e) => e.stopPropagation()}"
+            @mousedown="${this.handleContentMouseDown}"
             .textContent="${this.data.body}"
           ></div>
           <div class="edit-icon" title="Edit note"></div>
+
+          <!-- Color picker -->
+          <div
+            class="color-picker"
+            @mouseenter="${this.handleColorPickerMouseEnter}"
+            @mouseleave="${this.handleColorPickerMouseLeave}"
+          >
+            <div
+              class="color-options ${this.colorPickerExpanded
+            ? 'expanded'
+            : ''}"
+            >
+              <div
+                class="color-option yellow"
+                @click="${(e) => this.handleColorOptionClick(e, 'yellow')}"
+              ></div>
+              <div
+                class="color-option blue"
+                @click="${(e) => this.handleColorOptionClick(e, 'blue')}"
+              ></div>
+              <div
+                class="color-option pink"
+                @click="${(e) => this.handleColorOptionClick(e, 'pink')}"
+              ></div>
+              <div
+                class="color-option green"
+                @click="${(e) => this.handleColorOptionClick(e, 'green')}"
+              ></div>
+              <div
+                class="color-option gray"
+                @click="${(e) => this.handleColorOptionClick(e, 'gray')}"
+              ></div>
+            </div>
+          </div>
         </div>
       </div>
     `;
@@ -269,4 +407,10 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], StickyNote.prototype, "dragging", void 0);
+__decorate([
+    property({ type: Boolean })
+], StickyNote.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], StickyNote.prototype, "colorPickerExpanded", void 0);
 //# sourceMappingURL=StickyNote.js.map

package/out-tsc/src/flow/StickyNote.js.map

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

package/out-tsc/src/flow/config.js

@@ -1,4 +1,4 @@
-import { renderAddToGroups, renderCallWebhook, renderSendMsg, renderSetContactName, renderSetRunResult } from './render';
+import { renderAddContactUrn, renderAddInputLabels, renderAddToGroups, renderCallClassifier, renderCallLLM, renderCallResthook, renderCallWebhook, renderEnterFlow, renderOpenTicket, renderPlayAudio, renderRemoveFromGroups, renderRequestOptin, renderSayMsg, renderSendBroadcast, renderSendEmail, renderSendMsg, renderSetContactChannel, renderSetContactField, renderSetContactLanguage, renderSetContactName, renderSetContactStatus, renderSetRunResult, renderStartSession, renderTransferAirtime, renderWaitForAudio, renderWaitForDigits, renderWaitForImage, renderWaitForLocation, renderWaitForMenu, renderWaitForResponse, renderWaitForVideo } from './render';
 const COLORS = {
     send: '#3498db',
     update: '#01c1af',
@@ -15,27 +15,38 @@ const COLORS = {
 export const EDITOR_CONFIG = {
     add_input_labels: {
         name: 'Add Labels',
-        color: COLORS.update
+        color: COLORS.update,
+        render: renderAddInputLabels
     },
     add_contact_urn: {
         name: 'Add Contact URN',
-        color: COLORS.update
+        color: COLORS.update,
+        render: renderAddContactUrn
     },
     set_contact_field: {
         name: 'Update Contact Field',
-        color: COLORS.update
+        color: COLORS.update,
+        render: renderSetContactField
     },
     set_contact_channel: {
         name: 'Update Contact Channel',
-        color: COLORS.update
+        color: COLORS.update,
+        render: renderSetContactChannel
     },
     set_contact_language: {
         name: 'Update Contact Language',
-        color: COLORS.update
+        color: COLORS.update,
+        render: renderSetContactLanguage
+    },
+    set_contact_status: {
+        name: 'Update Contact Status',
+        color: COLORS.update,
+        render: renderSetContactStatus
     },
     send_broadcast: {
         name: 'Send Broadcast',
-        color: COLORS.broadcast
+        color: COLORS.broadcast,
+        render: renderSendBroadcast
     },
     set_run_result: {
         name: 'Save Flow Result',
@@ -49,36 +60,83 @@ export const EDITOR_CONFIG = {
     },
     send_email: {
         name: 'Send Email',
-        color: COLORS.broadcast
+        color: COLORS.broadcast,
+        render: renderSendEmail
     },
     start_session: {
         name: 'Start Somebody Else',
-        color: COLORS.broadcast
+        color: COLORS.broadcast,
+        render: renderStartSession
     },
     open_ticket: {
         name: 'Open Ticket',
-        color: COLORS.execute
+        color: COLORS.execute,
+        render: renderOpenTicket
     },
     call_webhook: {
         name: 'Call Webhook',
         color: COLORS.call,
         render: renderCallWebhook
     },
-    enter_flow: {
-        name: 'Enter Subflow',
-        color: COLORS.execute
+    call_classifier: {
+        name: 'Call Classifier',
+        color: COLORS.call,
+        render: renderCallClassifier
+    },
+    call_resthook: {
+        name: 'Call Resthook',
+        color: COLORS.call,
+        render: renderCallResthook
     },
     call_llm: {
         name: 'Call AI',
-        color: COLORS.call
+        color: COLORS.call,
+        render: renderCallLLM
+    },
+    enter_flow: {
+        name: 'Enter Subflow',
+        color: COLORS.execute,
+        render: renderEnterFlow
     },
     transfer_airtime: {
         name: 'Send Airtime',
-        color: COLORS.call
+        color: COLORS.call,
+        render: renderTransferAirtime
     },
     wait_for_response: {
         name: 'Wait for Response',
-        color: COLORS.wait
+        color: COLORS.wait,
+        render: renderWaitForResponse
+    },
+    wait_for_menu: {
+        name: 'Wait for Menu Selection',
+        color: COLORS.wait,
+        render: renderWaitForMenu
+    },
+    wait_for_digits: {
+        name: 'Wait for Digits',
+        color: COLORS.wait,
+        render: renderWaitForDigits
+    },
+    wait_for_audio: {
+        name: 'Wait for Audio',
+        color: COLORS.wait,
+        render: renderWaitForAudio
+    },
+    wait_for_video: {
+        name: 'Wait for Video',
+        color: COLORS.wait,
+        render: renderWaitForVideo
+    },
+    wait_for_image: {
+        name: 'Wait for Image',
+        color: COLORS.wait,
+        render: renderWaitForImage
+    },
+    wait_for_location: {
+        name: 'Wait for Location',
+        color: COLORS.wait,
+        render: renderWaitForLocation
     },
     set_contact_name: {
         name: 'Update Contact',
@@ -92,11 +150,23 @@ export const EDITOR_CONFIG = {
     },
     remove_contact_groups: {
         name: 'Remove from Group',
-        color: COLORS.remove
+        color: COLORS.remove,
+        render: renderRemoveFromGroups
     },
     request_optin: {
         name: 'Request Opt-in',
-        color: COLORS.send
+        color: COLORS.send,
+        render: renderRequestOptin
+    },
+    say_msg: {
+        name: 'Say Message',
+        color: COLORS.send,
+        render: renderSayMsg
+    },
+    play_audio: {
+        name: 'Play Audio',
+        color: COLORS.send,
+        render: renderPlayAudio
     },
     split_by_run_result: {
         name: 'Split by Flow Result',

package/out-tsc/src/flow/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sourceRoot":"","sources":["../../../src/flow/config.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult } from 'lit-html';\nimport {\n  renderAddToGroups,\n  renderCallWebhook,\n  renderSendMsg,\n  renderSetContactName,\n  renderSetRunResult\n} from './render';\n\nexport interface UIConfig {\n  name: string;\n  color: string;\n  render?: (node: any, action: any) => TemplateResult;\n}\n\nconst COLORS = {\n  send: '#3498db',\n  update: '#01c1af',\n  broadcast: '#8e5ea7',\n  call: '#e68628',\n  create: '#df419f',\n  save: '#1a777c',\n  split: '#aaaaaa',\n  execute: '#666666',\n  wait: '#4d7dad',\n  add: '#309c42',\n  remove: '#e74c3c'\n};\n\nexport const EDITOR_CONFIG: {\n  [key: string]: UIConfig;\n} = {\n  add_input_labels: {\n    name: 'Add Labels',\n    color: COLORS.update\n  },\n  add_contact_urn: {\n    name: 'Add Contact URN',\n    color: COLORS.update\n  },\n  set_contact_field: {\n    name: 'Update Contact Field',\n    color: COLORS.update\n  },\n  set_contact_channel: {\n    name: 'Update Contact Channel',\n    color: COLORS.update\n  },\n  set_contact_language: {\n    name: 'Update Contact Language',\n    color: COLORS.update\n  },\n  send_broadcast: {\n    name: 'Send Broadcast',\n    color: COLORS.broadcast\n  },\n  set_run_result: {\n    name: 'Save Flow Result',\n    color: COLORS.save,\n    render: renderSetRunResult\n  },\n  send_msg: {\n    name: 'Send Message',\n    color: COLORS.send,\n    render: renderSendMsg\n  },\n  send_email: {\n    name: 'Send Email',\n    color: COLORS.broadcast\n  },\n  start_session: {\n    name: 'Start Somebody Else',\n    color: COLORS.broadcast\n  },\n  open_ticket: {\n    name: 'Open Ticket',\n    color: COLORS.execute\n  },\n  call_webhook: {\n    name: 'Call Webhook',\n    color: COLORS.call,\n    render: renderCallWebhook\n  },\n  enter_flow: {\n    name: 'Enter Subflow',\n    color: COLORS.execute\n  },\n  call_llm: {\n    name: 'Call AI',\n    color: COLORS.call\n  },\n  transfer_airtime: {\n    name: 'Send Airtime',\n    color: COLORS.call\n  },\n  wait_for_response: {\n    name: 'Wait for Response',\n    color: COLORS.wait\n  },\n  set_contact_name: {\n    name: 'Update Contact',\n    color: '#01c1af',\n    render: renderSetContactName\n  },\n  add_contact_groups: {\n    name: 'Add to Group',\n    color: COLORS.add,\n    render: renderAddToGroups\n  },\n  remove_contact_groups: {\n    name: 'Remove from Group',\n    color: COLORS.remove\n  },\n  request_optin: {\n    name: 'Request Opt-in',\n    color: COLORS.send\n  },\n  split_by_run_result: {\n    name: 'Split by Flow Result',\n    color: COLORS.split\n  },\n  split_by_expression: {\n    name: 'Split by Expression',\n    color: COLORS.split\n  },\n  split_by_contact_field: {\n    name: 'Split by <Contact Field Name>',\n    color: COLORS.split\n  },\n  split_by_groups: {\n    name: 'Split by Group',\n    color: COLORS.split\n  },\n  split_by_scheme: {\n    name: 'Split by URN Type',\n    color: COLORS.split\n  },\n  split_by_random: {\n    name: 'Split by Random',\n    color: COLORS.split\n  }\n};\n"]}
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../../../src/flow/config.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult } from 'lit-html';\nimport {\n  renderAddContactUrn,\n  renderAddInputLabels,\n  renderAddToGroups,\n  renderCallClassifier,\n  renderCallLLM,\n  renderCallResthook,\n  renderCallWebhook,\n  renderEnterFlow,\n  renderOpenTicket,\n  renderPlayAudio,\n  renderRemoveFromGroups,\n  renderRequestOptin,\n  renderSayMsg,\n  renderSendBroadcast,\n  renderSendEmail,\n  renderSendMsg,\n  renderSetContactChannel,\n  renderSetContactField,\n  renderSetContactLanguage,\n  renderSetContactName,\n  renderSetContactStatus,\n  renderSetRunResult,\n  renderStartSession,\n  renderTransferAirtime,\n  renderWaitForAudio,\n  renderWaitForDigits,\n  renderWaitForImage,\n  renderWaitForLocation,\n  renderWaitForMenu,\n  renderWaitForResponse,\n  renderWaitForVideo\n} from './render';\n\nexport interface UIConfig {\n  name: string;\n  color: string;\n  render?: (node: any, action: any) => TemplateResult;\n}\n\nconst COLORS = {\n  send: '#3498db',\n  update: '#01c1af',\n  broadcast: '#8e5ea7',\n  call: '#e68628',\n  create: '#df419f',\n  save: '#1a777c',\n  split: '#aaaaaa',\n  execute: '#666666',\n  wait: '#4d7dad',\n  add: '#309c42',\n  remove: '#e74c3c'\n};\n\nexport const EDITOR_CONFIG: {\n  [key: string]: UIConfig;\n} = {\n  add_input_labels: {\n    name: 'Add Labels',\n    color: COLORS.update,\n    render: renderAddInputLabels\n  },\n  add_contact_urn: {\n    name: 'Add Contact URN',\n    color: COLORS.update,\n    render: renderAddContactUrn\n  },\n  set_contact_field: {\n    name: 'Update Contact Field',\n    color: COLORS.update,\n    render: renderSetContactField\n  },\n  set_contact_channel: {\n    name: 'Update Contact Channel',\n    color: COLORS.update,\n    render: renderSetContactChannel\n  },\n  set_contact_language: {\n    name: 'Update Contact Language',\n    color: COLORS.update,\n    render: renderSetContactLanguage\n  },\n  set_contact_status: {\n    name: 'Update Contact Status',\n    color: COLORS.update,\n    render: renderSetContactStatus\n  },\n  send_broadcast: {\n    name: 'Send Broadcast',\n    color: COLORS.broadcast,\n    render: renderSendBroadcast\n  },\n  set_run_result: {\n    name: 'Save Flow Result',\n    color: COLORS.save,\n    render: renderSetRunResult\n  },\n  send_msg: {\n    name: 'Send Message',\n    color: COLORS.send,\n    render: renderSendMsg\n  },\n  send_email: {\n    name: 'Send Email',\n    color: COLORS.broadcast,\n    render: renderSendEmail\n  },\n  start_session: {\n    name: 'Start Somebody Else',\n    color: COLORS.broadcast,\n    render: renderStartSession\n  },\n  open_ticket: {\n    name: 'Open Ticket',\n    color: COLORS.execute,\n    render: renderOpenTicket\n  },\n  call_webhook: {\n    name: 'Call Webhook',\n    color: COLORS.call,\n    render: renderCallWebhook\n  },\n  call_classifier: {\n    name: 'Call Classifier',\n    color: COLORS.call,\n    render: renderCallClassifier\n  },\n  call_resthook: {\n    name: 'Call Resthook',\n    color: COLORS.call,\n    render: renderCallResthook\n  },\n  call_llm: {\n    name: 'Call AI',\n    color: COLORS.call,\n    render: renderCallLLM\n  },\n  enter_flow: {\n    name: 'Enter Subflow',\n    color: COLORS.execute,\n    render: renderEnterFlow\n  },\n  transfer_airtime: {\n    name: 'Send Airtime',\n    color: COLORS.call,\n    render: renderTransferAirtime\n  },\n  wait_for_response: {\n    name: 'Wait for Response',\n    color: COLORS.wait,\n    render: renderWaitForResponse\n  },\n  wait_for_menu: {\n    name: 'Wait for Menu Selection',\n    color: COLORS.wait,\n    render: renderWaitForMenu\n  },\n  wait_for_digits: {\n    name: 'Wait for Digits',\n    color: COLORS.wait,\n    render: renderWaitForDigits\n  },\n  wait_for_audio: {\n    name: 'Wait for Audio',\n    color: COLORS.wait,\n    render: renderWaitForAudio\n  },\n  wait_for_video: {\n    name: 'Wait for Video',\n    color: COLORS.wait,\n    render: renderWaitForVideo\n  },\n  wait_for_image: {\n    name: 'Wait for Image',\n    color: COLORS.wait,\n    render: renderWaitForImage\n  },\n  wait_for_location: {\n    name: 'Wait for Location',\n    color: COLORS.wait,\n    render: renderWaitForLocation\n  },\n  set_contact_name: {\n    name: 'Update Contact',\n    color: '#01c1af',\n    render: renderSetContactName\n  },\n  add_contact_groups: {\n    name: 'Add to Group',\n    color: COLORS.add,\n    render: renderAddToGroups\n  },\n  remove_contact_groups: {\n    name: 'Remove from Group',\n    color: COLORS.remove,\n    render: renderRemoveFromGroups\n  },\n  request_optin: {\n    name: 'Request Opt-in',\n    color: COLORS.send,\n    render: renderRequestOptin\n  },\n  say_msg: {\n    name: 'Say Message',\n    color: COLORS.send,\n    render: renderSayMsg\n  },\n  play_audio: {\n    name: 'Play Audio',\n    color: COLORS.send,\n    render: renderPlayAudio\n  },\n  split_by_run_result: {\n    name: 'Split by Flow Result',\n    color: COLORS.split\n  },\n  split_by_expression: {\n    name: 'Split by Expression',\n    color: COLORS.split\n  },\n  split_by_contact_field: {\n    name: 'Split by <Contact Field Name>',\n    color: COLORS.split\n  },\n  split_by_groups: {\n    name: 'Split by Group',\n    color: COLORS.split\n  },\n  split_by_scheme: {\n    name: 'Split by URN Type',\n    color: COLORS.split\n  },\n  split_by_random: {\n    name: 'Split by Random',\n    color: COLORS.split\n  }\n};\n"]}