@nyaruka/temba-components 0.131.0 → 0.131.2

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

@@ -3,6 +3,7 @@ import { html, css } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { NODE_CONFIG, ACTION_CONFIG } from './config';
+import { ACTION_GROUP_METADATA, SPLIT_GROUP_METADATA } from './types';
 import { CustomEventType } from '../interfaces';
 import { generateUUID } from '../utils';
 import { FieldRenderer } from '../form/FieldRenderer';
@@ -16,6 +17,7 @@ export class NodeEditor extends RapidElement {
         this.errors = {};
         this.groupCollapseState = {};
         this.groupHoverState = {};
+        this.revealedOptionalFields = new Set();
     }
     static get styles() {
         return css `
@@ -25,7 +27,6 @@ export class NodeEditor extends RapidElement {
         flex-direction: column;
         gap: 15px;
         min-width: 400px;
-        padding-bottom: 40px;
 
         --color-bubble-bg: rgba(var(--primary-rgb), 0.7);
         --color-bubble-border: rgba(0, 0, 0, 0.2);
@@ -88,6 +89,28 @@ export class NodeEditor extends RapidElement {
         align-items: center;
       }
 
+      .form-row-wrapper {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .form-row-label {
+        margin-bottom: 5px;
+        margin-left: 4px;
+        display: block;
+        font-weight: 400;
+        font-size: var(--label-size);
+        letter-spacing: 0.05em;
+        line-height: normal;
+        color: var(--color-label, #777);
+      }
+
+      .form-row-help {
+        font-size: 12px;
+        color: #666;
+        margin-top: 6px;
+      }
+
       .form-group {
         border: 1px solid #e0e0e0;
         border-radius: 6px;
@@ -276,6 +299,21 @@ export class NodeEditor extends RapidElement {
       .gutter-fields temba-select {
         min-width: 120px;
       }
+
+      .optional-field-link {
+        margin: 10px 0;
+      }
+
+      .optional-field-link a {
+        color: var(--color-link-primary, #0066cc);
+        text-decoration: none;
+        font-size: 13px;
+        cursor: pointer;
+      }
+
+      .optional-field-link a:hover {
+        text-decoration: underline;
+      }
     `;
     }
     connectedCallback() {
@@ -326,7 +364,7 @@ export class NodeEditor extends RapidElement {
             // Node editing mode - use node config
             const nodeConfig = this.getNodeConfig();
             if (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.toFormData) {
-                this.formData = nodeConfig.toFormData(this.node);
+                this.formData = nodeConfig.toFormData(this.node, this.nodeUI);
             }
             else {
                 this.formData = { ...this.node };
@@ -433,8 +471,12 @@ export class NodeEditor extends RapidElement {
         return this.nodeUI.type ? NODE_CONFIG[this.nodeUI.type] : null;
     }
     getHeaderColor() {
+        var _a, _b;
         const config = this.getConfig();
-        return (config === null || config === void 0 ? void 0 : config.color) || '#666666';
+        return (config === null || config === void 0 ? void 0 : config.group)
+            ? ((_a = ACTION_GROUP_METADATA[config.group]) === null || _a === void 0 ? void 0 : _a.color) ||
+                ((_b = SPLIT_GROUP_METADATA[config.group]) === null || _b === void 0 ? void 0 : _b.color)
+            : '#aaaaaa';
     }
     handleDialogButtonClick(event) {
         const button = event.detail.button;
@@ -462,8 +504,14 @@ export class NodeEditor extends RapidElement {
         if (this.node && this.node.router) {
             // Node editing mode with router - use formDataToNode
             const updatedNode = this.formDataToNode(processedFormData);
+            // Generate UI config if the node config provides a toUIConfig function
+            const nodeConfig = this.getNodeConfig();
+            const uiConfig = (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.toUIConfig)
+                ? nodeConfig.toUIConfig(processedFormData)
+                : undefined;
             this.fireCustomEvent(CustomEventType.NodeSaved, {
-                node: updatedNode
+                node: updatedNode,
+                uiConfig
             });
         }
         else if (this.action) {
@@ -476,8 +524,14 @@ export class NodeEditor extends RapidElement {
         else if (this.node) {
             // Node editing mode without router
             const updatedNode = this.formDataToNode(processedFormData);
+            // Generate UI config if the node config provides a toUIConfig function
+            const nodeConfig = this.getNodeConfig();
+            const uiConfig = (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.toUIConfig)
+                ? nodeConfig.toUIConfig(processedFormData)
+                : undefined;
             this.fireCustomEvent(CustomEventType.NodeSaved, {
-                node: updatedNode
+                node: updatedNode,
+                uiConfig
             });
         }
     }
@@ -642,8 +696,14 @@ export class NodeEditor extends RapidElement {
         if (!this.node)
             throw new Error('No node to update');
         let updatedNode = { ...this.node };
+        // Check if node config has fromFormData - if so, it handles the entire transformation
+        const nodeConfig = this.getNodeConfig();
+        const nodeHasFromFormData = (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.fromFormData) !== undefined;
         // Handle actions using action config transformations if available
-        if (this.node.actions && this.node.actions.length > 0) {
+        // Skip this if the node has its own fromFormData (which handles actions itself)
+        if (!nodeHasFromFormData &&
+            this.node.actions &&
+            this.node.actions.length > 0) {
             updatedNode.actions = this.node.actions.map((action) => {
                 // If we're editing a specific action, only transform that one
                 if (this.action && action.uuid === this.action.uuid) {
@@ -664,53 +724,83 @@ export class NodeEditor extends RapidElement {
             });
         }
         // Handle router configuration using node config
-        if (this.node.router) {
-            const nodeConfig = this.getNodeConfig();
-            if (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.fromFormData) {
-                // Use node-specific form data transformation
-                updatedNode = nodeConfig.fromFormData(formData, updatedNode);
+        if (nodeHasFromFormData) {
+            // Use node-specific form data transformation
+            // When a node has fromFormData, it's responsible for creating the entire
+            // node structure including actions and router (regardless of whether router exists yet)
+            updatedNode = nodeConfig.fromFormData(formData, updatedNode);
+        }
+        else if (this.node.router) {
+            // Default router handling when no nodeConfig.fromFormData
+            updatedNode.router = { ...this.node.router };
+            // Apply form data to router fields if they exist
+            if (formData.result_name !== undefined) {
+                updatedNode.router.result_name = formData.result_name;
             }
-            else {
-                // Default router handling
-                updatedNode.router = { ...this.node.router };
-                // Apply form data to router fields if they exist
-                if (formData.result_name !== undefined) {
-                    updatedNode.router.result_name = formData.result_name;
-                }
-                // Handle preconfigured rules from node config
-                if ((_a = nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.router) === null || _a === void 0 ? void 0 : _a.rules) {
-                    // Build a complete new set of categories and exits based on node config
-                    const existingCategories = updatedNode.router.categories || [];
-                    const existingExits = updatedNode.exits || [];
-                    const newCategories = [];
-                    const newExits = [];
-                    // Group rules by category name to handle multiple rules pointing to the same category
-                    const categoryNameToRules = new Map();
-                    nodeConfig.router.rules.forEach((rule) => {
-                        if (!categoryNameToRules.has(rule.categoryName)) {
-                            categoryNameToRules.set(rule.categoryName, []);
+            // Handle preconfigured rules from node config
+            if ((_a = nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.router) === null || _a === void 0 ? void 0 : _a.rules) {
+                // Build a complete new set of categories and exits based on node config
+                const existingCategories = updatedNode.router.categories || [];
+                const existingExits = updatedNode.exits || [];
+                const newCategories = [];
+                const newExits = [];
+                // Group rules by category name to handle multiple rules pointing to the same category
+                const categoryNameToRules = new Map();
+                nodeConfig.router.rules.forEach((rule) => {
+                    if (!categoryNameToRules.has(rule.categoryName)) {
+                        categoryNameToRules.set(rule.categoryName, []);
+                    }
+                    categoryNameToRules.get(rule.categoryName).push(rule);
+                });
+                // Create categories for all unique category names
+                categoryNameToRules.forEach((rules, categoryName) => {
+                    // Check if category already exists to preserve its UUID and exit_uuid
+                    const existingCategory = existingCategories.find((cat) => cat.name === categoryName);
+                    if (existingCategory) {
+                        // Preserve existing category and its associated exit
+                        newCategories.push(existingCategory);
+                        const associatedExit = existingExits.find((exit) => exit.uuid === existingCategory.exit_uuid);
+                        if (associatedExit) {
+                            newExits.push(associatedExit);
                         }
-                        categoryNameToRules.get(rule.categoryName).push(rule);
-                    });
-                    // Create categories for all unique category names
-                    categoryNameToRules.forEach((rules, categoryName) => {
-                        // Check if category already exists to preserve its UUID and exit_uuid
-                        const existingCategory = existingCategories.find((cat) => cat.name === categoryName);
-                        if (existingCategory) {
-                            // Preserve existing category and its associated exit
-                            newCategories.push(existingCategory);
-                            const associatedExit = existingExits.find((exit) => exit.uuid === existingCategory.exit_uuid);
+                    }
+                    else {
+                        // Create new category and exit
+                        const categoryUuid = generateUUID();
+                        const exitUuid = generateUUID();
+                        newCategories.push({
+                            uuid: categoryUuid,
+                            name: categoryName,
+                            exit_uuid: exitUuid
+                        });
+                        newExits.push({
+                            uuid: exitUuid,
+                            destination_uuid: null
+                        });
+                    }
+                });
+                // Add default category if specified
+                if (nodeConfig.router.defaultCategory) {
+                    // Check if default category already exists in our new list
+                    const existingDefault = newCategories.find((cat) => cat.name === nodeConfig.router.defaultCategory);
+                    if (!existingDefault) {
+                        // Check if it exists in the original categories
+                        const originalDefault = existingCategories.find((cat) => cat.name === nodeConfig.router.defaultCategory);
+                        if (originalDefault) {
+                            // Preserve existing default category and its exit
+                            newCategories.push(originalDefault);
+                            const associatedExit = existingExits.find((exit) => exit.uuid === originalDefault.exit_uuid);
                             if (associatedExit) {
                                 newExits.push(associatedExit);
                             }
                         }
                         else {
-                            // Create new category and exit
+                            // Create new default category and exit
                             const categoryUuid = generateUUID();
                             const exitUuid = generateUUID();
                             newCategories.push({
                                 uuid: categoryUuid,
-                                name: categoryName,
+                                name: nodeConfig.router.defaultCategory,
                                 exit_uuid: exitUuid
                             });
                             newExits.push({
@@ -718,42 +808,11 @@ export class NodeEditor extends RapidElement {
                                 destination_uuid: null
                             });
                         }
-                    });
-                    // Add default category if specified
-                    if (nodeConfig.router.defaultCategory) {
-                        // Check if default category already exists in our new list
-                        const existingDefault = newCategories.find((cat) => cat.name === nodeConfig.router.defaultCategory);
-                        if (!existingDefault) {
-                            // Check if it exists in the original categories
-                            const originalDefault = existingCategories.find((cat) => cat.name === nodeConfig.router.defaultCategory);
-                            if (originalDefault) {
-                                // Preserve existing default category and its exit
-                                newCategories.push(originalDefault);
-                                const associatedExit = existingExits.find((exit) => exit.uuid === originalDefault.exit_uuid);
-                                if (associatedExit) {
-                                    newExits.push(associatedExit);
-                                }
-                            }
-                            else {
-                                // Create new default category and exit
-                                const categoryUuid = generateUUID();
-                                const exitUuid = generateUUID();
-                                newCategories.push({
-                                    uuid: categoryUuid,
-                                    name: nodeConfig.router.defaultCategory,
-                                    exit_uuid: exitUuid
-                                });
-                                newExits.push({
-                                    uuid: exitUuid,
-                                    destination_uuid: null
-                                });
-                            }
-                        }
                     }
-                    // Replace the entire categories and exits lists with our complete new sets
-                    updatedNode.router.categories = newCategories;
-                    updatedNode.exits = newExits;
                 }
+                // Replace the entire categories and exits lists with our complete new sets
+                updatedNode.router.categories = newCategories;
+                updatedNode.exits = newExits;
             }
         }
         else {
@@ -862,21 +921,28 @@ export class NodeEditor extends RapidElement {
             }
         });
     }
-    renderNewField(fieldName, config, value) {
+    /**
+     * Helper method to check if a field is visible based on its conditions
+     */
+    isFieldVisible(fieldName, config) {
         var _a;
-        // Check visibility condition
         if ((_a = config.conditions) === null || _a === void 0 ? void 0 : _a.visible) {
             try {
-                const isVisible = config.conditions.visible(this.formData);
-                if (!isVisible) {
-                    return html ``;
-                }
+                return config.conditions.visible(this.formData);
             }
             catch (error) {
                 console.error(`Error checking visibility for ${fieldName}:`, error);
                 // If there's an error, show the field by default
+                return true;
             }
         }
+        return true;
+    }
+    renderNewField(fieldName, config, value) {
+        // Check visibility condition
+        if (!this.isFieldVisible(fieldName, config)) {
+            return html ``;
+        }
         const errors = this.errors[fieldName] ? [this.errors[fieldName]] : [];
         // Build container style with maxWidth if specified
         const containerStyle = config.maxWidth
@@ -889,6 +955,35 @@ export class NodeEditor extends RapidElement {
         }
         return fieldContent;
     }
+    renderOptionalField(fieldName, config, value) {
+        // If the field has a value or has been revealed, show it
+        const hasValue = value && value.toString().trim() !== '';
+        const isRevealed = this.revealedOptionalFields.has(fieldName);
+        if (hasValue || isRevealed) {
+            // Render the field normally
+            return this.renderNewField(fieldName, config, value);
+        }
+        // Show the "Save as..." link
+        return html `
+      <div class="optional-field-link">
+        <a
+          href="#"
+          @click="${(e) => {
+            e.preventDefault();
+            this.revealOptionalField(fieldName);
+        }}"
+        >
+          ${config.optionalLink}
+        </a>
+      </div>
+    `;
+    }
+    revealOptionalField(fieldName) {
+        this.revealedOptionalFields = new Set([
+            ...this.revealedOptionalFields,
+            fieldName
+        ]);
+    }
     renderFieldContent(fieldName, config, value, errors) {
         // Use FieldRenderer for consistent field rendering
         return FieldRenderer.renderField(fieldName, config, value, {
@@ -977,7 +1072,12 @@ export class NodeEditor extends RapidElement {
             case 'field':
                 if (config.form[item.field] && !renderedFields.has(item.field)) {
                     renderedFields.add(item.field);
-                    return this.renderNewField(item.field, config.form[item.field], this.formData[item.field]);
+                    const fieldConfig = config.form[item.field];
+                    // Handle optional link fields
+                    if (fieldConfig.optionalLink) {
+                        return this.renderOptionalField(item.field, fieldConfig, this.formData[item.field]);
+                    }
+                    return this.renderNewField(item.field, fieldConfig, this.formData[item.field]);
                 }
                 return html ``;
             case 'row':
@@ -989,24 +1089,68 @@ export class NodeEditor extends RapidElement {
         }
     }
     renderRow(rowConfig, config, renderedFields) {
-        const { items, gap = '1rem' } = rowConfig;
+        const { items, gap = '1rem', label, helpText } = rowConfig;
         // Collect all fields from this row for width calculations
         const fieldsInRow = this.collectFieldsFromItems(items);
         const validFields = fieldsInRow.filter((fieldName) => { var _a; return (_a = config.form) === null || _a === void 0 ? void 0 : _a[fieldName]; });
-        if (validFields.length === 0) {
+        // Filter for visible fields only to handle conditional visibility
+        const visibleFields = validFields.filter((fieldName) => {
+            const fieldConfig = config.form[fieldName];
+            return this.isFieldVisible(fieldName, fieldConfig);
+        });
+        if (visibleFields.length === 0) {
             return html ``;
         }
-        // Calculate grid template columns based on field maxWidth constraints
-        const columns = validFields.map((fieldName) => {
+        // Build a map of field flex styles
+        // Fields with maxWidth get flex: 0 0 {maxWidth} (fixed)
+        // Fields without maxWidth get flex: 1 1 0 (grow to fill space)
+        const fieldFlexStyles = new Map();
+        visibleFields.forEach((fieldName) => {
             const fieldConfig = config.form[fieldName];
-            return fieldConfig.maxWidth || '1fr';
+            if (fieldConfig.maxWidth) {
+                // Fixed width field: no grow, no shrink, basis = maxWidth
+                fieldFlexStyles.set(fieldName, `flex: 0 0 ${fieldConfig.maxWidth};`);
+            }
+            else {
+                // Flexible field: grow to fill remaining space
+                fieldFlexStyles.set(fieldName, `flex: 1 1 0;`);
+            }
         });
+        const rowContent = html `
+      <div class="form-row" style="display: flex; gap: ${gap};">
+        ${items.map((item) => {
+            // Get the field name from the item
+            const fieldName = typeof item === 'string'
+                ? item
+                : item.type === 'field'
+                    ? item.field
+                    : null;
+            // Get flex style for this field if it's a visible field
+            const flexStyle = fieldName && fieldFlexStyles.has(fieldName)
+                ? fieldFlexStyles.get(fieldName)
+                : '';
+            const itemContent = this.renderLayoutItem(item, config, renderedFields);
+            // Wrap in a div with flex style if we have a flex style
+            return flexStyle
+                ? html `<div style="${flexStyle}">${itemContent}</div>`
+                : itemContent;
+        })}
+      </div>
+    `;
+        // If no label or helpText, return just the row content
+        if (!label && !helpText) {
+            return rowContent;
+        }
+        // Otherwise, wrap with label on top, content, then helpText below (matching field pattern)
         return html `
-      <div
-        class="form-row"
-        style="display: grid; grid-template-columns: ${columns.join(' ')}; gap: ${gap};"
-      >
-        ${items.map((item) => this.renderLayoutItem(item, config, renderedFields))}
+      <div class="form-row-wrapper">
+        ${label ? html `<label class="form-row-label">${label}</label>` : ''}
+        ${rowContent}
+        ${helpText
+            ? html `<div class="form-row-help">
+              ${renderMarkdownInline(helpText)}
+            </div>`
+            : ''}
       </div>
     `;
     }
@@ -1351,4 +1495,7 @@ __decorate([
 __decorate([
     state()
 ], NodeEditor.prototype, "groupHoverState", void 0);
+__decorate([
+    state()
+], NodeEditor.prototype, "revealedOptionalFields", void 0);
 //# sourceMappingURL=NodeEditor.js.map