@nyaruka/temba-components 0.131.0 → 0.131.2

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

@@ -0,0 +1,499 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { RapidElement } from '../RapidElement';
+import { CustomEventType } from '../interfaces';
+import { NODE_CONFIG, ACTION_CONFIG } from './config';
+import { ACTION_GROUPS, SPLIT_GROUPS, ACTION_GROUP_METADATA, SPLIT_GROUP_METADATA } from './types';
+/**
+ * NodeTypeSelector - A dialog for selecting which type of node to create
+ * Shows categorized lists of available actions and splits
+ */
+export class NodeTypeSelector extends RapidElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.mode = 'action';
+        this.clickPosition = { x: 0, y: 0 };
+    }
+    static get styles() {
+        return css `
+      :host {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 10001;
+        display: none;
+      }
+
+      :host([open]) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+      }
+
+      .dialog {
+        position: relative;
+        background: white;
+        border-radius: var(--curvature);
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+        max-width: 700px;
+        max-height: 80vh;
+        width: 90%;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .header {
+        padding: 1.5em;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+      }
+
+      .header h2 {
+        margin: 0;
+        font-size: 1.5rem;
+        font-weight: 600;
+        color: var(--color-text-dark);
+      }
+
+      .content {
+        overflow-y: auto;
+        overflow-x: hidden;
+        flex: 1;
+        padding: 0;
+      }
+
+      .section-regular {
+        padding: 1.5em;
+      }
+
+      .section-branching {
+        background: linear-gradient(
+          135deg,
+          rgba(170, 170, 170, 0.12),
+          rgba(170, 170, 170, 0.08)
+        );
+        padding: 1.5em;
+        margin: 0 -1.5em;
+        padding-left: 3em;
+        padding-right: 3em;
+      }
+
+      .section-header {
+        margin-bottom: 1.5em;
+        padding-top: 1em;
+      }
+
+      .section-title {
+        font-weight: 700;
+        font-size: 1.1rem;
+        color: var(--color-text-dark);
+        margin-bottom: 0.35em;
+        display: flex;
+        align-items: center;
+      }
+
+      .section-title::before {
+        content: '';
+        display: inline-block;
+        height: 1.2em;
+        background: linear-gradient(
+          135deg,
+          var(--color-primary-dark),
+          var(--color-primary)
+        );
+        border-radius: 2px;
+      }
+
+      .section-description {
+        font-size: 0.9rem;
+        color: var(--color-text);
+        opacity: 0.7;
+        margin-left: 0em;
+        padding-bottom: 1em;
+      }
+
+      .category {
+        margin-bottom: 2em;
+      }
+
+      .category:last-child {
+        margin-bottom: 0;
+      }
+
+      .category-title {
+        font-weight: 600;
+        color: var(--color-text-dark);
+        margin-bottom: 0.5em;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        font-size: 0.9rem;
+        opacity: 0.7;
+      }
+
+      .category-description {
+        font-size: 0.85rem;
+        color: var(--color-text);
+        opacity: 0.6;
+        margin-bottom: 0.75em;
+        line-height: 1.4;
+      }
+
+      .items-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        gap: 0.75em;
+      }
+
+      .node-item {
+        padding: 1em;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        border-radius: calc(var(--curvature) * 0.75);
+        cursor: pointer;
+        transition: all 0.15s ease;
+        background: white;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .node-item::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 4px;
+        height: 100%;
+        background: var(--item-color, rgba(0, 0, 0, 0.1));
+      }
+
+      .node-item:hover {
+        border-color: var(--item-color, var(--color-primary));
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        transform: translateY(-1px);
+      }
+
+      .node-item:hover::before {
+        width: 6px;
+      }
+
+      .node-item-title {
+        font-weight: 500;
+        font-size: 1rem;
+        color: var(--color-text-dark);
+        margin-bottom: 0.25em;
+      }
+
+      .node-item-type {
+        font-size: 0.75rem;
+        color: var(--color-text);
+        opacity: 0.6;
+        font-family: monospace;
+      }
+
+      .footer {
+        padding: 1em 1.5em;
+        border-top: 1px solid rgba(0, 0, 0, 0.1);
+        display: flex;
+        justify-content: flex-end;
+      }
+
+      temba-button {
+        --button-y: 0.5em;
+        --button-x: 1.25em;
+      }
+    `;
+    }
+    show(mode, position) {
+        this.mode = mode;
+        this.clickPosition = position;
+        this.open = true;
+    }
+    close() {
+        this.open = false;
+    }
+    handleNodeTypeClick(nodeType) {
+        this.fireCustomEvent(CustomEventType.Selection, {
+            nodeType,
+            position: this.clickPosition
+        });
+        this.close();
+    }
+    handleOverlayClick() {
+        this.close();
+    }
+    getCategories() {
+        if (this.mode === 'action' || this.mode === 'action-no-branching') {
+            // Group actions by group
+            const actionsByGroup = new Map();
+            const splitsByGroup = new Map();
+            // Collect regular actions (from ACTION_CONFIG, unless hideFromActions is true)
+            Object.entries(ACTION_CONFIG)
+                .filter(([_, config]) => {
+                return config.name && !config.hideFromActions && config.group;
+            })
+                .forEach(([type, config]) => {
+                const group = config.group;
+                if (!actionsByGroup.has(group)) {
+                    actionsByGroup.set(group, []);
+                }
+                actionsByGroup.get(group).push({ type, config });
+            });
+            // Collect nodes that have showAsAction=true (these appear as "with split" actions)
+            // Only if we're not in 'action-no-branching' mode
+            if (this.mode === 'action') {
+                Object.entries(NODE_CONFIG)
+                    .filter(([type, config]) => {
+                    return (type !== 'execute_actions' &&
+                        config.name &&
+                        config.showAsAction &&
+                        config.group);
+                })
+                    .forEach(([type, config]) => {
+                    const group = config.group;
+                    if (!splitsByGroup.has(group)) {
+                        splitsByGroup.set(group, []);
+                    }
+                    splitsByGroup.get(group).push({ type, config });
+                });
+            }
+            // Build categories - first regular actions, then splitting actions
+            const categories = [];
+            // Get the implicit order from ACTION_GROUPS object
+            const actionGroupOrder = Object.keys(ACTION_GROUPS);
+            // Get the implicit order of actions from ACTION_CONFIG
+            const actionConfigOrder = Object.keys(ACTION_CONFIG);
+            // Add regular action categories sorted by implicit order
+            const sortedActionCategories = Array.from(actionsByGroup.entries()).sort(([groupA], [groupB]) => {
+                const orderA = actionGroupOrder.indexOf(groupA);
+                const orderB = actionGroupOrder.indexOf(groupB);
+                return ((orderA === -1 ? 999 : orderA) - (orderB === -1 ? 999 : orderB));
+            });
+            sortedActionCategories.forEach(([group, items]) => {
+                const metadata = ACTION_GROUP_METADATA[group];
+                // Sort items within the category by their order in ACTION_CONFIG
+                const sortedItems = items.sort((a, b) => {
+                    const orderA = actionConfigOrder.indexOf(a.type);
+                    const orderB = actionConfigOrder.indexOf(b.type);
+                    return ((orderA === -1 ? 999 : orderA) - (orderB === -1 ? 999 : orderB));
+                });
+                categories.push({
+                    name: metadata.title,
+                    description: metadata.description,
+                    color: metadata.color,
+                    items: sortedItems,
+                    isBranching: false
+                });
+            });
+            // Add splitting action categories (with modified description to indicate they split)
+            // Also sorted by implicit order
+            // Get the implicit order of nodes from NODE_CONFIG
+            const nodeConfigOrder = Object.keys(NODE_CONFIG);
+            const sortedSplitCategories = Array.from(splitsByGroup.entries()).sort(([groupA], [groupB]) => {
+                const orderA = actionGroupOrder.indexOf(groupA);
+                const orderB = actionGroupOrder.indexOf(groupB);
+                return ((orderA === -1 ? 999 : orderA) - (orderB === -1 ? 999 : orderB));
+            });
+            sortedSplitCategories.forEach(([group, items]) => {
+                const metadata = ACTION_GROUP_METADATA[group];
+                // Sort items within the category by their order in NODE_CONFIG
+                const sortedItems = items.sort((a, b) => {
+                    const orderA = nodeConfigOrder.indexOf(a.type);
+                    const orderB = nodeConfigOrder.indexOf(b.type);
+                    return ((orderA === -1 ? 999 : orderA) - (orderB === -1 ? 999 : orderB));
+                });
+                categories.push({
+                    name: metadata.title,
+                    description: metadata.description,
+                    color: metadata.color,
+                    items: sortedItems,
+                    isBranching: true
+                });
+            });
+            return categories;
+        }
+        else {
+            // Group splits by group
+            const itemsByGroup = new Map();
+            Object.entries(NODE_CONFIG)
+                .filter(([type, config]) => {
+                // exclude execute_actions (it's the default action-only node)
+                // exclude nodes that have showAsAction=true (they appear in action mode)
+                return (type !== 'execute_actions' && config.name && !config.showAsAction);
+            })
+                .forEach(([type, config]) => {
+                const group = config.group || SPLIT_GROUPS.split;
+                if (!itemsByGroup.has(group)) {
+                    itemsByGroup.set(group, []);
+                }
+                itemsByGroup.get(group).push({ type, config });
+            });
+            // Convert to categories using group metadata, sorted by implicit order from SPLIT_GROUPS
+            const splitGroupOrder = Object.keys(SPLIT_GROUPS);
+            // Get the implicit order of nodes from NODE_CONFIG
+            const nodeConfigOrder = Object.keys(NODE_CONFIG);
+            return Array.from(itemsByGroup.entries())
+                .map(([group, items]) => {
+                const metadata = SPLIT_GROUP_METADATA[group] || ACTION_GROUP_METADATA[group];
+                // Sort items within the category by their order in NODE_CONFIG
+                const sortedItems = items.sort((a, b) => {
+                    const orderA = nodeConfigOrder.indexOf(a.type);
+                    const orderB = nodeConfigOrder.indexOf(b.type);
+                    return ((orderA === -1 ? 999 : orderA) - (orderB === -1 ? 999 : orderB));
+                });
+                return {
+                    name: metadata.title,
+                    description: metadata.description,
+                    color: metadata.color,
+                    items: sortedItems
+                };
+            })
+                .sort((a, b) => {
+                // Find the group key by looking up metadata by title
+                const groupA = Object.keys(SPLIT_GROUP_METADATA).find((key) => SPLIT_GROUP_METADATA[key].title === a.name);
+                const groupB = Object.keys(SPLIT_GROUP_METADATA).find((key) => SPLIT_GROUP_METADATA[key].title === b.name);
+                const orderA = splitGroupOrder.indexOf(groupA);
+                const orderB = splitGroupOrder.indexOf(groupB);
+                return ((orderA === -1 ? 999 : orderA) - (orderB === -1 ? 999 : orderB));
+            });
+        }
+    }
+    render() {
+        if (!this.open) {
+            return html ``;
+        }
+        const categories = this.getCategories();
+        const title = this.mode === 'split'
+            ? 'Select a Split'
+            : this.mode === 'action-no-branching'
+                ? 'Add Action'
+                : 'Select an Action';
+        // Separate regular and branching categories for action mode
+        const regularCategories = categories.filter((c) => !c.isBranching);
+        const branchingCategories = categories.filter((c) => c.isBranching);
+        const hasBranchingSection = branchingCategories.length > 0;
+        return html `
+      <div class="overlay" @click=${this.handleOverlayClick}></div>
+      <div class="dialog" @click=${(e) => e.stopPropagation()}>
+        <div class="header">
+          <h2>${title}</h2>
+        </div>
+        <div class="content">
+          ${this.mode === 'action' || this.mode === 'action-no-branching'
+            ? html `
+                <div class="section-regular">
+                  ${regularCategories.map((category) => html `
+                      <div class="category">
+                        <div class="category-title">${category.name}</div>
+                        <div class="category-description">
+                          ${category.description}
+                        </div>
+                        <div class="items-grid">
+                          ${category.items.map((item) => html `
+                              <div
+                                class="node-item"
+                                style="--item-color: ${category.color}"
+                                @click=${() => this.handleNodeTypeClick(item.type)}
+                              >
+                                <div class="node-item-title">
+                                  ${item.config.name}
+                                </div>
+                                <div class="node-item-type">${item.type}</div>
+                              </div>
+                            `)}
+                        </div>
+                      </div>
+                    `)}
+                </div>
+                ${hasBranchingSection
+                ? html `
+                      <div class="section-branching">
+                        <div class="section-header">
+                          <div class="section-title">Actions that Branch</div>
+                          <div class="section-description">
+                            These actions also split the flow based on their
+                            outcome
+                          </div>
+                        </div>
+                        ${branchingCategories.map((category) => html `
+                            <div class="category">
+                              <div class="category-title">${category.name}</div>
+                              <div class="category-description">
+                                ${category.description}
+                              </div>
+                              <div class="items-grid">
+                                ${category.items.map((item) => html `
+                                    <div
+                                      class="node-item"
+                                      style="--item-color: ${category.color}"
+                                      @click=${() => this.handleNodeTypeClick(item.type)}
+                                    >
+                                      <div class="node-item-title">
+                                        ${item.config.name}
+                                      </div>
+                                      <div class="node-item-type">
+                                        ${item.type}
+                                      </div>
+                                    </div>
+                                  `)}
+                              </div>
+                            </div>
+                          `)}
+                      </div>
+                    `
+                : ''}
+              `
+            : html `
+                <div class="section-regular">
+                  ${categories.map((category) => html `
+                      <div class="category">
+                        <div class="category-title">${category.name}</div>
+                        <div class="category-description">
+                          ${category.description}
+                        </div>
+                        <div class="items-grid">
+                          ${category.items.map((item) => html `
+                              <div
+                                class="node-item"
+                                style="--item-color: ${category.color}"
+                                @click=${() => this.handleNodeTypeClick(item.type)}
+                              >
+                                <div class="node-item-title">
+                                  ${item.config.name}
+                                </div>
+                                <div class="node-item-type">${item.type}</div>
+                              </div>
+                            `)}
+                        </div>
+                      </div>
+                    `)}
+                </div>
+              `}
+        </div>
+        <div class="footer">
+          <temba-button @click=${this.close} secondary>Cancel</temba-button>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NodeTypeSelector.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], NodeTypeSelector.prototype, "mode", void 0);
+__decorate([
+    state()
+], NodeTypeSelector.prototype, "clickPosition", void 0);
+//# sourceMappingURL=NodeTypeSelector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NodeTypeSelector.js","sourceRoot":"","sources":["../../../src/flow/NodeTypeSelector.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { CustomEventType } from '../interfaces';\nimport { NODE_CONFIG, ACTION_CONFIG } from './config';\nimport {\n  NodeConfig,\n  ActionConfig,\n  ACTION_GROUPS,\n  SPLIT_GROUPS,\n  ACTION_GROUP_METADATA,\n  SPLIT_GROUP_METADATA\n} from './types';\n\n/**\n * Event detail for node type selection\n */\nexport interface NodeTypeSelection {\n  nodeType: string;\n  position: { x: number; y: number };\n}\n\n/**\n * Categorizes node types for display\n */\ninterface NodeCategory {\n  name: string;\n  description: string;\n  color: string;\n  items: Array<{ type: string; config: NodeConfig | ActionConfig }>;\n  isBranching?: boolean; // true if this category contains actions that branch/split\n}\n\n/**\n * NodeTypeSelector - A dialog for selecting which type of node to create\n * Shows categorized lists of available actions and splits\n */\nexport class NodeTypeSelector extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        position: fixed;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        z-index: 10001;\n        display: none;\n      }\n\n      :host([open]) {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background: rgba(0, 0, 0, 0.5);\n      }\n\n      .dialog {\n        position: relative;\n        background: white;\n        border-radius: var(--curvature);\n        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);\n        max-width: 700px;\n        max-height: 80vh;\n        width: 90%;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .header {\n        padding: 1.5em;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n      }\n\n      .header h2 {\n        margin: 0;\n        font-size: 1.5rem;\n        font-weight: 600;\n        color: var(--color-text-dark);\n      }\n\n      .content {\n        overflow-y: auto;\n        overflow-x: hidden;\n        flex: 1;\n        padding: 0;\n      }\n\n      .section-regular {\n        padding: 1.5em;\n      }\n\n      .section-branching {\n        background: linear-gradient(\n          135deg,\n          rgba(170, 170, 170, 0.12),\n          rgba(170, 170, 170, 0.08)\n        );\n        padding: 1.5em;\n        margin: 0 -1.5em;\n        padding-left: 3em;\n        padding-right: 3em;\n      }\n\n      .section-header {\n        margin-bottom: 1.5em;\n        padding-top: 1em;\n      }\n\n      .section-title {\n        font-weight: 700;\n        font-size: 1.1rem;\n        color: var(--color-text-dark);\n        margin-bottom: 0.35em;\n        display: flex;\n        align-items: center;\n      }\n\n      .section-title::before {\n        content: '';\n        display: inline-block;\n        height: 1.2em;\n        background: linear-gradient(\n          135deg,\n          var(--color-primary-dark),\n          var(--color-primary)\n        );\n        border-radius: 2px;\n      }\n\n      .section-description {\n        font-size: 0.9rem;\n        color: var(--color-text);\n        opacity: 0.7;\n        margin-left: 0em;\n        padding-bottom: 1em;\n      }\n\n      .category {\n        margin-bottom: 2em;\n      }\n\n      .category:last-child {\n        margin-bottom: 0;\n      }\n\n      .category-title {\n        font-weight: 600;\n        color: var(--color-text-dark);\n        margin-bottom: 0.5em;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        font-size: 0.9rem;\n        opacity: 0.7;\n      }\n\n      .category-description {\n        font-size: 0.85rem;\n        color: var(--color-text);\n        opacity: 0.6;\n        margin-bottom: 0.75em;\n        line-height: 1.4;\n      }\n\n      .items-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n        gap: 0.75em;\n      }\n\n      .node-item {\n        padding: 1em;\n        border: 1px solid rgba(0, 0, 0, 0.1);\n        border-radius: calc(var(--curvature) * 0.75);\n        cursor: pointer;\n        transition: all 0.15s ease;\n        background: white;\n        position: relative;\n        overflow: hidden;\n      }\n\n      .node-item::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 4px;\n        height: 100%;\n        background: var(--item-color, rgba(0, 0, 0, 0.1));\n      }\n\n      .node-item:hover {\n        border-color: var(--item-color, var(--color-primary));\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n        transform: translateY(-1px);\n      }\n\n      .node-item:hover::before {\n        width: 6px;\n      }\n\n      .node-item-title {\n        font-weight: 500;\n        font-size: 1rem;\n        color: var(--color-text-dark);\n        margin-bottom: 0.25em;\n      }\n\n      .node-item-type {\n        font-size: 0.75rem;\n        color: var(--color-text);\n        opacity: 0.6;\n        font-family: monospace;\n      }\n\n      .footer {\n        padding: 1em 1.5em;\n        border-top: 1px solid rgba(0, 0, 0, 0.1);\n        display: flex;\n        justify-content: flex-end;\n      }\n\n      temba-button {\n        --button-y: 0.5em;\n        --button-x: 1.25em;\n      }\n    `;\n  }\n\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  @property({ type: String })\n  public mode: 'action' | 'split' | 'action-no-branching' = 'action';\n\n  @state()\n  private clickPosition = { x: 0, y: 0 };\n\n  public show(\n    mode: 'action' | 'split' | 'action-no-branching',\n    position: { x: number; y: number }\n  ) {\n    this.mode = mode;\n    this.clickPosition = position;\n    this.open = true;\n  }\n\n  public close() {\n    this.open = false;\n  }\n\n  private handleNodeTypeClick(nodeType: string) {\n    this.fireCustomEvent(CustomEventType.Selection, {\n      nodeType,\n      position: this.clickPosition\n    } as NodeTypeSelection);\n    this.close();\n  }\n\n  private handleOverlayClick() {\n    this.close();\n  }\n\n  private getCategories(): NodeCategory[] {\n    if (this.mode === 'action' || this.mode === 'action-no-branching') {\n      // Group actions by group\n      const actionsByGroup = new Map<\n        string,\n        Array<{ type: string; config: ActionConfig }>\n      >();\n      const splitsByGroup = new Map<\n        string,\n        Array<{ type: string; config: NodeConfig }>\n      >();\n\n      // Collect regular actions (from ACTION_CONFIG, unless hideFromActions is true)\n      Object.entries(ACTION_CONFIG)\n        .filter(([_, config]) => {\n          return config.name && !config.hideFromActions && config.group;\n        })\n        .forEach(([type, config]) => {\n          const group = config.group;\n          if (!actionsByGroup.has(group)) {\n            actionsByGroup.set(group, []);\n          }\n          actionsByGroup.get(group)!.push({ type, config });\n        });\n\n      // Collect nodes that have showAsAction=true (these appear as \"with split\" actions)\n      // Only if we're not in 'action-no-branching' mode\n      if (this.mode === 'action') {\n        Object.entries(NODE_CONFIG)\n          .filter(([type, config]) => {\n            return (\n              type !== 'execute_actions' &&\n              config.name &&\n              config.showAsAction &&\n              config.group\n            );\n          })\n          .forEach(([type, config]) => {\n            const group = config.group!;\n            if (!splitsByGroup.has(group)) {\n              splitsByGroup.set(group, []);\n            }\n            splitsByGroup.get(group)!.push({ type, config });\n          });\n      }\n\n      // Build categories - first regular actions, then splitting actions\n      const categories: NodeCategory[] = [];\n\n      // Get the implicit order from ACTION_GROUPS object\n      const actionGroupOrder = Object.keys(ACTION_GROUPS);\n      // Get the implicit order of actions from ACTION_CONFIG\n      const actionConfigOrder = Object.keys(ACTION_CONFIG);\n\n      // Add regular action categories sorted by implicit order\n      const sortedActionCategories = Array.from(actionsByGroup.entries()).sort(\n        ([groupA], [groupB]) => {\n          const orderA = actionGroupOrder.indexOf(groupA);\n          const orderB = actionGroupOrder.indexOf(groupB);\n          return (\n            (orderA === -1 ? 999 : orderA) - (orderB === -1 ? 999 : orderB)\n          );\n        }\n      );\n\n      sortedActionCategories.forEach(([group, items]) => {\n        const metadata = ACTION_GROUP_METADATA[group];\n        // Sort items within the category by their order in ACTION_CONFIG\n        const sortedItems = items.sort((a, b) => {\n          const orderA = actionConfigOrder.indexOf(a.type);\n          const orderB = actionConfigOrder.indexOf(b.type);\n          return (\n            (orderA === -1 ? 999 : orderA) - (orderB === -1 ? 999 : orderB)\n          );\n        });\n        categories.push({\n          name: metadata.title,\n          description: metadata.description,\n          color: metadata.color,\n          items: sortedItems,\n          isBranching: false\n        });\n      });\n\n      // Add splitting action categories (with modified description to indicate they split)\n      // Also sorted by implicit order\n      // Get the implicit order of nodes from NODE_CONFIG\n      const nodeConfigOrder = Object.keys(NODE_CONFIG);\n\n      const sortedSplitCategories = Array.from(splitsByGroup.entries()).sort(\n        ([groupA], [groupB]) => {\n          const orderA = actionGroupOrder.indexOf(groupA);\n          const orderB = actionGroupOrder.indexOf(groupB);\n          return (\n            (orderA === -1 ? 999 : orderA) - (orderB === -1 ? 999 : orderB)\n          );\n        }\n      );\n\n      sortedSplitCategories.forEach(([group, items]) => {\n        const metadata = ACTION_GROUP_METADATA[group];\n        // Sort items within the category by their order in NODE_CONFIG\n        const sortedItems = items.sort((a, b) => {\n          const orderA = nodeConfigOrder.indexOf(a.type);\n          const orderB = nodeConfigOrder.indexOf(b.type);\n          return (\n            (orderA === -1 ? 999 : orderA) - (orderB === -1 ? 999 : orderB)\n          );\n        });\n        categories.push({\n          name: metadata.title,\n          description: metadata.description,\n          color: metadata.color,\n          items: sortedItems,\n          isBranching: true\n        });\n      });\n\n      return categories;\n    } else {\n      // Group splits by group\n      const itemsByGroup = new Map<\n        string,\n        Array<{ type: string; config: NodeConfig }>\n      >();\n\n      Object.entries(NODE_CONFIG)\n        .filter(([type, config]) => {\n          // exclude execute_actions (it's the default action-only node)\n          // exclude nodes that have showAsAction=true (they appear in action mode)\n          return (\n            type !== 'execute_actions' && config.name && !config.showAsAction\n          );\n        })\n        .forEach(([type, config]) => {\n          const group = config.group || SPLIT_GROUPS.split;\n          if (!itemsByGroup.has(group)) {\n            itemsByGroup.set(group, []);\n          }\n          itemsByGroup.get(group)!.push({ type, config });\n        });\n\n      // Convert to categories using group metadata, sorted by implicit order from SPLIT_GROUPS\n      const splitGroupOrder = Object.keys(SPLIT_GROUPS);\n      // Get the implicit order of nodes from NODE_CONFIG\n      const nodeConfigOrder = Object.keys(NODE_CONFIG);\n\n      return Array.from(itemsByGroup.entries())\n        .map(([group, items]) => {\n          const metadata =\n            SPLIT_GROUP_METADATA[group] || ACTION_GROUP_METADATA[group];\n          // Sort items within the category by their order in NODE_CONFIG\n          const sortedItems = items.sort((a, b) => {\n            const orderA = nodeConfigOrder.indexOf(a.type);\n            const orderB = nodeConfigOrder.indexOf(b.type);\n            return (\n              (orderA === -1 ? 999 : orderA) - (orderB === -1 ? 999 : orderB)\n            );\n          });\n          return {\n            name: metadata.title,\n            description: metadata.description,\n            color: metadata.color,\n            items: sortedItems\n          };\n        })\n        .sort((a, b) => {\n          // Find the group key by looking up metadata by title\n          const groupA = Object.keys(SPLIT_GROUP_METADATA).find(\n            (key) => SPLIT_GROUP_METADATA[key].title === a.name\n          )!;\n          const groupB = Object.keys(SPLIT_GROUP_METADATA).find(\n            (key) => SPLIT_GROUP_METADATA[key].title === b.name\n          )!;\n          const orderA = splitGroupOrder.indexOf(groupA);\n          const orderB = splitGroupOrder.indexOf(groupB);\n          return (\n            (orderA === -1 ? 999 : orderA) - (orderB === -1 ? 999 : orderB)\n          );\n        });\n    }\n  }\n\n  public render(): TemplateResult {\n    if (!this.open) {\n      return html``;\n    }\n\n    const categories = this.getCategories();\n    const title =\n      this.mode === 'split'\n        ? 'Select a Split'\n        : this.mode === 'action-no-branching'\n        ? 'Add Action'\n        : 'Select an Action';\n\n    // Separate regular and branching categories for action mode\n    const regularCategories = categories.filter((c) => !c.isBranching);\n    const branchingCategories = categories.filter((c) => c.isBranching);\n    const hasBranchingSection = branchingCategories.length > 0;\n\n    return html`\n      <div class=\"overlay\" @click=${this.handleOverlayClick}></div>\n      <div class=\"dialog\" @click=${(e: Event) => e.stopPropagation()}>\n        <div class=\"header\">\n          <h2>${title}</h2>\n        </div>\n        <div class=\"content\">\n          ${this.mode === 'action' || this.mode === 'action-no-branching'\n            ? html`\n                <div class=\"section-regular\">\n                  ${regularCategories.map(\n                    (category) => html`\n                      <div class=\"category\">\n                        <div class=\"category-title\">${category.name}</div>\n                        <div class=\"category-description\">\n                          ${category.description}\n                        </div>\n                        <div class=\"items-grid\">\n                          ${category.items.map(\n                            (item) => html`\n                              <div\n                                class=\"node-item\"\n                                style=\"--item-color: ${category.color}\"\n                                @click=${() =>\n                                  this.handleNodeTypeClick(item.type)}\n                              >\n                                <div class=\"node-item-title\">\n                                  ${item.config.name}\n                                </div>\n                                <div class=\"node-item-type\">${item.type}</div>\n                              </div>\n                            `\n                          )}\n                        </div>\n                      </div>\n                    `\n                  )}\n                </div>\n                ${hasBranchingSection\n                  ? html`\n                      <div class=\"section-branching\">\n                        <div class=\"section-header\">\n                          <div class=\"section-title\">Actions that Branch</div>\n                          <div class=\"section-description\">\n                            These actions also split the flow based on their\n                            outcome\n                          </div>\n                        </div>\n                        ${branchingCategories.map(\n                          (category) => html`\n                            <div class=\"category\">\n                              <div class=\"category-title\">${category.name}</div>\n                              <div class=\"category-description\">\n                                ${category.description}\n                              </div>\n                              <div class=\"items-grid\">\n                                ${category.items.map(\n                                  (item) => html`\n                                    <div\n                                      class=\"node-item\"\n                                      style=\"--item-color: ${category.color}\"\n                                      @click=${() =>\n                                        this.handleNodeTypeClick(item.type)}\n                                    >\n                                      <div class=\"node-item-title\">\n                                        ${item.config.name}\n                                      </div>\n                                      <div class=\"node-item-type\">\n                                        ${item.type}\n                                      </div>\n                                    </div>\n                                  `\n                                )}\n                              </div>\n                            </div>\n                          `\n                        )}\n                      </div>\n                    `\n                  : ''}\n              `\n            : html`\n                <div class=\"section-regular\">\n                  ${categories.map(\n                    (category) => html`\n                      <div class=\"category\">\n                        <div class=\"category-title\">${category.name}</div>\n                        <div class=\"category-description\">\n                          ${category.description}\n                        </div>\n                        <div class=\"items-grid\">\n                          ${category.items.map(\n                            (item) => html`\n                              <div\n                                class=\"node-item\"\n                                style=\"--item-color: ${category.color}\"\n                                @click=${() =>\n                                  this.handleNodeTypeClick(item.type)}\n                              >\n                                <div class=\"node-item-title\">\n                                  ${item.config.name}\n                                </div>\n                                <div class=\"node-item-type\">${item.type}</div>\n                              </div>\n                            `\n                          )}\n                        </div>\n                      </div>\n                    `\n                  )}\n                </div>\n              `}\n        </div>\n        <div class=\"footer\">\n          <temba-button @click=${this.close} secondary>Cancel</temba-button>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/flow/actions/add_contact_groups.js

@@ -1,16 +1,16 @@
 import { html } from 'lit-html';
-import { COLORS } from '../types';
+import { ACTION_GROUPS } from '../types';
 import { renderNamedObjects } from '../utils';
 export const add_contact_groups = {
     name: 'Add to Group',
-    color: COLORS.update,
+    group: ACTION_GROUPS.contacts,
     render: (_node, action) => {
         return html `<div>${renderNamedObjects(action.groups, 'group')}</div>`;
     },
     // Form-level transformations - default 1:1 mapping for this case
     toFormData: (action) => {
         return {
-            groups: action.groups || [],
+            groups: action.groups || null,
             uuid: action.uuid
         };
     },

package/out-tsc/src/flow/actions/add_contact_groups.js.map

@@ -1 +1 @@
-{"version":3,"file":"add_contact_groups.js","sourceRoot":"","sources":["../../../../src/flow/actions/add_contact_groups.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAgB,MAAM,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE9C,MAAM,CAAC,MAAM,kBAAkB,GAAiB;IAC9C,IAAI,EAAE,cAAc;IACpB,KAAK,EAAE,MAAM,CAAC,MAAM;IACpB,MAAM,EAAE,CAAC,KAAW,EAAE,MAAkB,EAAE,EAAE;QAC1C,OAAO,IAAI,CAAA,QAAQ,kBAAkB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,QAAQ,CAAC;IACxE,CAAC;IAED,iEAAiE;IACjE,UAAU,EAAE,CAAC,MAAkB,EAAE,EAAE;QACjC,OAAO;YACL,MAAM,EAAE,MAAM,CAAC,MAAM,IAAI,EAAE;YAC3B,IAAI,EAAE,MAAM,CAAC,IAAI;SAClB,CAAC;IACJ,CAAC;IACD,IAAI,EAAE;QACJ,MAAM,EAAE;YACN,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,yCAAyC;YACnD,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE,EAAE;YACX,KAAK,EAAE,IAAI;YACX,UAAU,EAAE,IAAI;YAChB,QAAQ,EAAE,qBAAqB;YAC/B,QAAQ,EAAE,MAAM;YAChB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,sBAAsB;YACnC,WAAW,EAAE,IAAI;YACjB,qBAAqB,EAAE,CAAC,KAAa,EAAE,OAAc,EAAE,EAAE;gBACvD,iDAAiD;gBACjD,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAC3B,CAAC,MAAM,EAAE,EAAE,CACT,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,CAClE,CAAC;gBACF,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC;oBAC9B,OAAO;wBACL,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE;wBAClB,SAAS,EAAE,IAAI;qBAChB,CAAC;gBACJ,CAAC;gBACD,OAAO,IAAI,CAAC;YACd,CAAC;SACF;KACF;IACD,YAAY,EAAE,CAAC,QAAa,EAAc,EAAE;QAC1C,OAAO;YACL,IAAI,EAAE,QAAQ,CAAC,IAAI;YACnB,IAAI,EAAE,oBAAoB;YAC1B,MAAM,EAAE,QAAQ,CAAC,MAAM,IAAI,EAAE;SAC9B,CAAC;IACJ,CAAC;CACF,CAAC","sourcesContent":["import { html } from 'lit-html';\nimport { ActionConfig, COLORS } from '../types';\nimport { Node, AddToGroup } from '../../store/flow-definition';\nimport { renderNamedObjects } from '../utils';\n\nexport const add_contact_groups: ActionConfig = {\n  name: 'Add to Group',\n  color: COLORS.update,\n  render: (_node: Node, action: AddToGroup) => {\n    return html`<div>${renderNamedObjects(action.groups, 'group')}</div>`;\n  },\n\n  // Form-level transformations - default 1:1 mapping for this case\n  toFormData: (action: AddToGroup) => {\n    return {\n      groups: action.groups || [],\n      uuid: action.uuid\n    };\n  },\n  form: {\n    groups: {\n      type: 'select',\n      label: 'Groups',\n      helpText: 'Select the groups to add the contact to',\n      required: true,\n      options: [],\n      multi: true,\n      searchable: true,\n      endpoint: '/api/v2/groups.json',\n      valueKey: 'uuid',\n      nameKey: 'name',\n      placeholder: 'Search for groups...',\n      allowCreate: true,\n      createArbitraryOption: (input: string, options: any[]) => {\n        // Check if a label with this name already exists\n        const existing = options.find(\n          (option) =>\n            option.name.toLowerCase().trim() === input.toLowerCase().trim()\n        );\n        if (!existing && input.trim()) {\n          return {\n            name: input.trim(),\n            arbitrary: true\n          };\n        }\n        return null;\n      }\n    }\n  },\n  fromFormData: (formData: any): AddToGroup => {\n    return {\n      uuid: formData.uuid,\n      type: 'add_contact_groups',\n      groups: formData.groups || []\n    };\n  }\n};\n"]}
+{"version":3,"file":"add_contact_groups.js","sourceRoot":"","sources":["../../../../src/flow/actions/add_contact_groups.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAgB,aAAa,EAAY,MAAM,UAAU,CAAC;AAEjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE9C,MAAM,CAAC,MAAM,kBAAkB,GAAiB;IAC9C,IAAI,EAAE,cAAc;IACpB,KAAK,EAAE,aAAa,CAAC,QAAQ;IAC7B,MAAM,EAAE,CAAC,KAAW,EAAE,MAAkB,EAAE,EAAE;QAC1C,OAAO,IAAI,CAAA,QAAQ,kBAAkB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,QAAQ,CAAC;IACxE,CAAC;IAED,iEAAiE;IACjE,UAAU,EAAE,CAAC,MAAkB,EAAE,EAAE;QACjC,OAAO;YACL,MAAM,EAAE,MAAM,CAAC,MAAM,IAAI,IAAI;YAC7B,IAAI,EAAE,MAAM,CAAC,IAAI;SAClB,CAAC;IACJ,CAAC;IACD,IAAI,EAAE;QACJ,MAAM,EAAE;YACN,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,yCAAyC;YACnD,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE,EAAE;YACX,KAAK,EAAE,IAAI;YACX,UAAU,EAAE,IAAI;YAChB,QAAQ,EAAE,qBAAqB;YAC/B,QAAQ,EAAE,MAAM;YAChB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,sBAAsB;YACnC,WAAW,EAAE,IAAI;YACjB,qBAAqB,EAAE,CAAC,KAAa,EAAE,OAAc,EAAE,EAAE;gBACvD,iDAAiD;gBACjD,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAC3B,CAAC,MAAM,EAAE,EAAE,CACT,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,CAClE,CAAC;gBACF,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC;oBAC9B,OAAO;wBACL,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE;wBAClB,SAAS,EAAE,IAAI;qBAChB,CAAC;gBACJ,CAAC;gBACD,OAAO,IAAI,CAAC;YACd,CAAC;SACF;KACF;IACD,YAAY,EAAE,CAAC,QAAkB,EAAc,EAAE;QAC/C,OAAO;YACL,IAAI,EAAE,QAAQ,CAAC,IAAI;YACnB,IAAI,EAAE,oBAAoB;YAC1B,MAAM,EAAE,QAAQ,CAAC,MAAM,IAAI,EAAE;SAC9B,CAAC;IACJ,CAAC;CACF,CAAC","sourcesContent":["import { html } from 'lit-html';\nimport { ActionConfig, ACTION_GROUPS, FormData } from '../types';\nimport { Node, AddToGroup } from '../../store/flow-definition';\nimport { renderNamedObjects } from '../utils';\n\nexport const add_contact_groups: ActionConfig = {\n  name: 'Add to Group',\n  group: ACTION_GROUPS.contacts,\n  render: (_node: Node, action: AddToGroup) => {\n    return html`<div>${renderNamedObjects(action.groups, 'group')}</div>`;\n  },\n\n  // Form-level transformations - default 1:1 mapping for this case\n  toFormData: (action: AddToGroup) => {\n    return {\n      groups: action.groups || null,\n      uuid: action.uuid\n    };\n  },\n  form: {\n    groups: {\n      type: 'select',\n      label: 'Groups',\n      helpText: 'Select the groups to add the contact to',\n      required: true,\n      options: [],\n      multi: true,\n      searchable: true,\n      endpoint: '/api/v2/groups.json',\n      valueKey: 'uuid',\n      nameKey: 'name',\n      placeholder: 'Search for groups...',\n      allowCreate: true,\n      createArbitraryOption: (input: string, options: any[]) => {\n        // Check if a label with this name already exists\n        const existing = options.find(\n          (option) =>\n            option.name.toLowerCase().trim() === input.toLowerCase().trim()\n        );\n        if (!existing && input.trim()) {\n          return {\n            name: input.trim(),\n            arbitrary: true\n          };\n        }\n        return null;\n      }\n    }\n  },\n  fromFormData: (formData: FormData): AddToGroup => {\n    return {\n      uuid: formData.uuid,\n      type: 'add_contact_groups',\n      groups: formData.groups || []\n    };\n  }\n};\n"]}