@nyaruka/temba-components 0.129.3 → 0.129.5

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

@@ -0,0 +1,1211 @@
+import { __decorate } from "tslib";
+import { html, css } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { RapidElement } from '../RapidElement';
+import { NODE_CONFIG, ACTION_CONFIG } from './config';
+import { CustomEventType } from '../interfaces';
+import { generateUUID } from '../utils';
+export class NodeEditor extends RapidElement {
+    constructor() {
+        super(...arguments);
+        this.isOpen = false;
+        this.formData = {};
+        this.originalFormData = {};
+        this.errors = {};
+        this.groupCollapseState = {};
+    }
+    static get styles() {
+        return css `
+      .node-editor-form {
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+        gap: 15px;
+        min-width: 400px;
+        padding-bottom: 40px;
+      }
+
+      .form-field {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .form-field label {
+        font-weight: 500;
+        margin-bottom: 6px;
+        color: #333;
+        font-size: 14px;
+      }
+
+      .field-errors {
+        color: var(--color-error, tomato);
+        font-size: 12px;
+        margin-left: 5px;
+        margin-top: 15px;
+      }
+
+      .form-actions {
+        display: flex;
+        gap: 10px;
+        justify-content: flex-end;
+        margin-top: 20px;
+      }
+
+      .action-section {
+        border: 1px solid #e0e0e0;
+        border-radius: 4px;
+        padding: 15px;
+        margin: 10px 0;
+      }
+
+      .action-section h3 {
+        margin: 0 0 10px 0;
+        color: #333;
+        font-size: 14px;
+        font-weight: 600;
+      }
+
+      .router-section {
+        border: 1px solid #e0e0e0;
+        border-radius: 4px;
+        padding: 15px;
+        margin: 10px 0;
+      }
+
+      .router-section h3 {
+        margin: 0 0 10px 0;
+        color: #333;
+        font-size: 14px;
+        font-weight: 600;
+      }
+
+      .form-row {
+        display: grid;
+        gap: 1rem;
+        align-items: end;
+      }
+
+      .form-group {
+        border: 1px solid #e0e0e0;
+        border-radius: 6px;
+        overflow: hidden;
+      }
+
+      .form-group.has-errors {
+        border-color: var(--color-error, tomato);
+      }
+
+      .form-group-header {
+        background: #f8f9fa;
+        padding: 12px 15px;
+        border-bottom: 1px solid #e0e0e0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        cursor: pointer;
+        user-select: none;
+      }
+
+      .form-group-header.collapsible:hover {
+        background: #f1f3f4;
+      }
+
+      .form-group-info {
+        flex: 1;
+      }
+
+      .form-group-title {
+        font-weight: 500;
+        color: #333;
+        font-size: 14px;
+        display: flex;
+      }
+
+      .form-group-help {
+        font-size: 12px;
+        color: #666;
+        margin-top: 2px;
+      }
+
+      .form-group-toggle {
+        color: #666;
+        transition: transform 0.3s ease;
+        display: flex;
+        align-items: center;
+      }
+
+      .form-group-toggle.collapsed {
+        transform: rotate(-90deg);
+      }
+
+      .form-group-content {
+        padding: 15px;
+        display: flex;
+        flex-direction: column;
+        gap: 15px;
+        overflow: hidden;
+        transition: all 0.3s ease;
+        max-height: 1000px; /* Large enough to accommodate most content */
+        opacity: 1;
+      }
+
+      .form-group-content.collapsed {
+        max-height: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+        opacity: 0;
+      }
+
+      .group-toggle-icon {
+        color: #666;
+        transition: transform 0.3s ease;
+        cursor: pointer;
+        transform: rotate(0deg);
+      }
+
+      .group-toggle-icon.expanded {
+        transform: rotate(90deg);
+      }
+
+      .group-toggle-icon.collapsed {
+        transform: rotate(0deg);
+      }
+
+      .group-toggle-icon:hover {
+        color: #333;
+      }
+
+      .group-error-icon {
+        color: var(--color-error, tomato);
+        margin-right: 8px;
+      }
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.initializeFormData();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('node') || changedProperties.has('action')) {
+            if (this.node || this.action) {
+                this.openDialog();
+            }
+            else {
+                this.isOpen = false;
+            }
+        }
+    }
+    openDialog() {
+        this.initializeFormData();
+        this.errors = {};
+        this.isOpen = true;
+    }
+    closeDialog() {
+        this.isOpen = false;
+        this.formData = {};
+        this.errors = {};
+        this.groupCollapseState = {};
+    }
+    initializeFormData() {
+        if (this.action) {
+            // Action editing mode - use action config
+            const actionConfig = ACTION_CONFIG[this.action.type];
+            if (actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.toFormData) {
+                this.formData = actionConfig.toFormData(this.action);
+            }
+            else {
+                this.formData = { ...this.action };
+                // Apply smart transformations for select fields that expect {name, value} format
+                this.applySmartSelectTransformations(actionConfig);
+            }
+            // Convert Record objects to array format for key-value editors
+            this.processFormDataForEditing();
+            // Store a copy of the original form data for computed field comparisons
+            this.originalFormData = JSON.parse(JSON.stringify(this.formData));
+        }
+        else if (this.node) {
+            // 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);
+            }
+            else {
+                this.formData = { ...this.node };
+            }
+            // Convert Record objects to array format for key-value editors
+            this.processFormDataForEditing();
+            // Store a copy of the original form data for computed field comparisons
+            this.originalFormData = JSON.parse(JSON.stringify(this.formData));
+        }
+        // enforce immutability of formData
+        Object.keys(this.formData).forEach((key) => {
+            const value = this.formData[key];
+            if (Array.isArray(value)) {
+                this.formData[key] = [...value];
+            }
+            else if (value && typeof value === 'object') {
+                // If it's an object, ensure we don't mutate the original
+                this.formData[key] = { ...value };
+            }
+        });
+    }
+    processFormDataForEditing() {
+        const processed = { ...this.formData };
+        // Convert Record objects to key-value arrays for key-value editors
+        Object.keys(processed).forEach((key) => {
+            const value = processed[key];
+            if (value && typeof value === 'object' && !Array.isArray(value)) {
+                // Check if this field should be a key-value editor
+                const isKeyValueField = this.isKeyValueField(key);
+                if (isKeyValueField) {
+                    // Convert Record to array format
+                    processed[key] = Object.entries(value).map(([k, v]) => ({
+                        key: k,
+                        value: v
+                    }));
+                }
+            }
+        });
+        this.formData = processed;
+    }
+    applySmartSelectTransformations(actionConfig) {
+        if (!actionConfig)
+            return;
+        const fields = actionConfig.form;
+        if (!fields)
+            return;
+        Object.entries(fields).forEach(([fieldName, fieldConfig]) => {
+            if (this.shouldApplySmartSelectTransformation(fieldName, fieldConfig)) {
+                const value = this.formData[fieldName];
+                if (Array.isArray(value) &&
+                    value.length > 0 &&
+                    typeof value[0] === 'string') {
+                    // Transform string array to select options format
+                    this.formData[fieldName] = value.map((item) => ({
+                        name: item,
+                        value: item
+                    }));
+                }
+            }
+        });
+    }
+    shouldApplySmartSelectTransformation(fieldName, fieldConfig) {
+        var _a;
+        const selectConfig = fieldConfig;
+        return ((fieldConfig.type === 'select' &&
+            (selectConfig.multi || selectConfig.tags) &&
+            // Don't transform if already has explicit transformations
+            !this.action) ||
+            !((_a = ACTION_CONFIG[this.action.type]) === null || _a === void 0 ? void 0 : _a.toFormData));
+    }
+    isKeyValueField(fieldName) {
+        var _a;
+        // Check if this field is configured as a key-value type
+        if (this.action) {
+            const actionConfig = ACTION_CONFIG[this.action.type];
+            const fields = actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.form;
+            return ((_a = fields === null || fields === void 0 ? void 0 : fields[fieldName]) === null || _a === void 0 ? void 0 : _a.type) === 'key-value';
+        }
+        return false;
+    }
+    getNodeConfig() {
+        if (!this.nodeUI)
+            return null;
+        // Get node config based on the nodeUI's type
+        return this.nodeUI.type ? NODE_CONFIG[this.nodeUI.type] : null;
+    }
+    getHeaderColor() {
+        if (this.action) {
+            // Action editing mode
+            const actionConfig = ACTION_CONFIG[this.action.type];
+            return (actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.color) || '#666666';
+        }
+        else if (this.node) {
+            // Node editing mode
+            const nodeConfig = this.getNodeConfig();
+            return (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.color) || '#666666';
+        }
+        return '#666666';
+    }
+    handleDialogButtonClick(event) {
+        const button = event.detail.button;
+        if (button.name === 'Save') {
+            this.handleSave();
+        }
+        else if (button.name === 'Cancel') {
+            this.handleCancel();
+        }
+    }
+    handleSave() {
+        // Validate the form
+        const validation = this.validateForm();
+        if (!validation.valid) {
+            this.errors = validation.errors;
+            // Expand any groups that contain validation errors
+            this.expandGroupsWithErrors(validation.errors);
+            return;
+        }
+        // Process form data to convert key-value arrays to Records before saving
+        const processedFormData = this.processFormDataForSave();
+        // Determine whether to use node or action saving based on context
+        // If we have a node with a router, always use node saving (even if action is set)
+        // because router configuration is handled at the node level
+        if (this.node && this.node.router) {
+            // Node editing mode with router - use formDataToNode
+            const updatedNode = this.formDataToNode(processedFormData);
+            this.fireCustomEvent(CustomEventType.NodeSaved, {
+                node: updatedNode
+            });
+        }
+        else if (this.action) {
+            // Pure action editing mode (no router)
+            const updatedAction = this.formDataToAction(processedFormData);
+            this.fireCustomEvent(CustomEventType.ActionSaved, {
+                action: updatedAction
+            });
+        }
+        else if (this.node) {
+            // Node editing mode without router
+            const updatedNode = this.formDataToNode(processedFormData);
+            this.fireCustomEvent(CustomEventType.NodeSaved, {
+                node: updatedNode
+            });
+        }
+    }
+    processFormDataForSave() {
+        const processed = { ...this.formData };
+        // Convert key-value arrays to Records
+        Object.keys(processed).forEach((key) => {
+            const value = processed[key];
+            if (Array.isArray(value) &&
+                value.length > 0 &&
+                typeof value[0] === 'object' &&
+                'key' in value[0] &&
+                'value' in value[0]) {
+                // This is a key-value array, convert to Record
+                const record = {};
+                value.forEach(({ key: k, value: v }) => {
+                    if (k.trim() !== '' || v.trim() !== '') {
+                        record[k] = v;
+                    }
+                });
+                processed[key] = record;
+            }
+            else if (Array.isArray(value) && value.length === 0) {
+                // Empty key-value array should become empty object
+                const isKeyValueField = this.isKeyValueField(key);
+                if (isKeyValueField) {
+                    processed[key] = {};
+                }
+            }
+        });
+        return processed;
+    }
+    handleCancel() {
+        this.fireCustomEvent(CustomEventType.NodeEditCancelled, {});
+    }
+    validateForm() {
+        const errors = {};
+        if (this.action) {
+            // Action validation using fields configuration
+            const actionConfig = ACTION_CONFIG[this.action.type];
+            // Check if new field configuration system is available
+            if (actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.form) {
+                Object.entries(actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.form).forEach(([fieldName, fieldConfig]) => {
+                    const value = this.formData[fieldName];
+                    // Check required fields
+                    if (fieldConfig.required &&
+                        (!value || (Array.isArray(value) && value.length === 0))) {
+                        errors[fieldName] = `${fieldConfig.label || fieldName} is required`;
+                    }
+                    // Check minLength for text fields
+                    if (typeof value === 'string' &&
+                        fieldConfig.minLength &&
+                        value.length < fieldConfig.minLength) {
+                        errors[fieldName] = `${fieldConfig.label || fieldName} must be at least ${fieldConfig.minLength} characters`;
+                    }
+                    // Check maxLength for text fields
+                    if (typeof value === 'string' &&
+                        fieldConfig.maxLength &&
+                        value.length > fieldConfig.maxLength) {
+                        errors[fieldName] = `${fieldConfig.label || fieldName} must be no more than ${fieldConfig.maxLength} characters`;
+                    }
+                });
+            }
+            // Run custom validation if available
+            if (actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.validate) {
+                // Convert form data back to action for validation
+                let actionForValidation;
+                if (actionConfig.fromFormData) {
+                    actionForValidation = actionConfig.fromFormData(this.formData);
+                }
+                else {
+                    actionForValidation = { ...this.action, ...this.formData };
+                }
+                const customValidation = actionConfig.validate(actionForValidation);
+                Object.assign(errors, customValidation.errors);
+            }
+        }
+        else if (this.node) {
+            // Node validation
+            const nodeConfig = this.getNodeConfig();
+            // Check required fields from node properties
+            if (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.properties) {
+                Object.entries(nodeConfig.properties).forEach(([fieldName, fieldConfig]) => {
+                    const value = this.formData[fieldName];
+                    // Check required fields
+                    if (fieldConfig.required &&
+                        (!value || (Array.isArray(value) && value.length === 0))) {
+                        errors[fieldName] = `${fieldConfig.label || fieldName} is required`;
+                    }
+                });
+            }
+        }
+        // Validate key-value fields for unique keys
+        this.validateKeyValueUniqueness(errors);
+        return {
+            valid: Object.keys(errors).length === 0,
+            errors
+        };
+    }
+    validateKeyValueUniqueness(errors) {
+        // The individual key-value editors will show validation errors on duplicate keys and empty keys with values
+        // We just need to prevent form submission when there are validation issues
+        Object.entries(this.formData).forEach(([fieldName, value]) => {
+            if (Array.isArray(value) &&
+                value.length > 0 &&
+                typeof value[0] === 'object' &&
+                'key' in value[0] &&
+                'value' in value[0]) {
+                // This is a key-value array
+                let hasValidationErrors = false;
+                // Check for empty keys with values
+                value.forEach(({ key, value: itemValue }) => {
+                    if (key.trim() === '' && itemValue.trim() !== '') {
+                        hasValidationErrors = true;
+                    }
+                });
+                // Check for duplicate keys (only non-empty ones)
+                const keys = value
+                    .filter(({ key }) => key.trim() !== '') // Only check non-empty keys
+                    .map(({ key }) => key.trim());
+                const uniqueKeys = new Set(keys);
+                if (keys.length !== uniqueKeys.size) {
+                    hasValidationErrors = true;
+                }
+                if (hasValidationErrors) {
+                    errors[fieldName] = `Please resolve validation errors to continue`;
+                }
+            }
+        });
+    }
+    formDataToNode(formData = this.formData) {
+        var _a;
+        if (!this.node)
+            throw new Error('No node to update');
+        let updatedNode = { ...this.node };
+        // Handle actions using action config transformations if available
+        if (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) {
+                    const actionConfig = ACTION_CONFIG[action.type];
+                    if (actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.fromFormData) {
+                        // Use action-specific form data transformation
+                        return actionConfig.fromFormData(formData);
+                    }
+                    else {
+                        // Default transformation - merge form data with original action
+                        return { ...action, ...formData };
+                    }
+                }
+                else {
+                    // Keep other actions unchanged
+                    return action;
+                }
+            });
+        }
+        // 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);
+            }
+            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, []);
+                        }
+                        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);
+                            }
+                        }
+                        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 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;
+                }
+            }
+        }
+        else {
+            // If no router, just apply form data to node properties
+            Object.keys(formData).forEach((key) => {
+                if (key !== 'uuid' &&
+                    key !== 'actions' &&
+                    key !== 'exits' &&
+                    key !== 'router') {
+                    updatedNode[key] = formData[key];
+                }
+            });
+        }
+        return updatedNode;
+    }
+    formDataToAction(formData = this.formData) {
+        if (!this.action)
+            throw new Error('No action to update');
+        // Use action config transformation if available
+        const actionConfig = ACTION_CONFIG[this.action.type];
+        if (actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.fromFormData) {
+            return actionConfig.fromFormData(formData);
+        }
+        else {
+            // Apply smart select transformations in reverse and provide default 1:1 mapping
+            const processedFormData = this.reverseSmartSelectTransformations(formData, actionConfig);
+            return { ...this.action, ...processedFormData };
+        }
+    }
+    reverseSmartSelectTransformations(formData, actionConfig) {
+        if (!actionConfig || !actionConfig.form)
+            return formData;
+        const processed = { ...formData };
+        Object.entries(actionConfig.form).forEach(([fieldName, fieldConfig]) => {
+            if (this.shouldApplySmartSelectTransformation(fieldName, fieldConfig)) {
+                const value = processed[fieldName];
+                if (Array.isArray(value) &&
+                    value.length > 0 &&
+                    typeof value[0] === 'object' &&
+                    'value' in value[0]) {
+                    // Transform select options format back to string array
+                    processed[fieldName] = value.map((item) => item.value || item.name || item);
+                }
+            }
+        });
+        return processed;
+    }
+    handleFormFieldChange(propertyName, event) {
+        const target = event.target;
+        let value;
+        // Handle different component types like ActionEditor does
+        if (target.tagName === 'TEMBA-CHECKBOX') {
+            value = target.checked;
+        }
+        else if (target.tagName === 'TEMBA-SELECT' &&
+            (target.multi || target.emails || target.tags)) {
+            value = target.values || [];
+        }
+        else if (target.values !== undefined) {
+            value = target.values;
+        }
+        else {
+            value = target.value;
+        }
+        this.formData = {
+            ...this.formData,
+            [propertyName]: value
+        };
+        // Clear any existing error for this field
+        if (this.errors[propertyName]) {
+            const newErrors = { ...this.errors };
+            delete newErrors[propertyName];
+            this.errors = newErrors;
+        }
+        // Check for computed values in dependent fields
+        this.updateComputedFields(propertyName);
+        // Trigger re-render to handle conditional field visibility
+        this.requestUpdate();
+    }
+    updateComputedFields(changedFieldName) {
+        if (!this.action)
+            return;
+        const config = ACTION_CONFIG[this.action.type];
+        if (!(config === null || config === void 0 ? void 0 : config.form))
+            return;
+        // Check all fields to see if any depend on the changed field
+        Object.entries(config.form).forEach(([fieldName, fieldConfig]) => {
+            var _a;
+            if ((_a = fieldConfig.dependsOn) === null || _a === void 0 ? void 0 : _a.includes(changedFieldName)) {
+                if (fieldConfig.computeValue) {
+                    const currentValue = this.formData[fieldName];
+                    const computedValue = fieldConfig.computeValue(this.formData, currentValue, this.originalFormData);
+                    // Update the form data with the computed value
+                    this.formData = {
+                        ...this.formData,
+                        [fieldName]: computedValue
+                    };
+                }
+            }
+        });
+    }
+    renderNewField(fieldName, config, value) {
+        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 ``;
+                }
+            }
+            catch (error) {
+                console.error(`Error checking visibility for ${fieldName}:`, error);
+                // If there's an error, show the field by default
+            }
+        }
+        const errors = this.errors[fieldName] ? [this.errors[fieldName]] : [];
+        // Build container style with maxWidth if specified
+        const containerStyle = config.maxWidth
+            ? `max-width: ${config.maxWidth};`
+            : '';
+        const fieldContent = this.renderFieldContent(fieldName, config, value, errors);
+        // Wrap in container with style if maxWidth is specified
+        if (containerStyle) {
+            return html `<div style="${containerStyle}">${fieldContent}</div>`;
+        }
+        return fieldContent;
+    }
+    renderFieldContent(fieldName, config, value, errors) {
+        var _a;
+        switch (config.type) {
+            case 'text':
+                return html `<temba-textinput
+          name="${fieldName}"
+          label="${config.label}"
+          ?required="${config.required}"
+          .errors="${errors}"
+          .value="${value || ''}"
+          placeholder="${config.placeholder || ''}"
+          .helpText="${config.helpText || ''}"
+          @input="${(e) => this.handleFormFieldChange(fieldName, e)}"
+        ></temba-textinput>`;
+            case 'textarea': {
+                const textareaConfig = config;
+                const minHeightStyle = textareaConfig.minHeight
+                    ? `--textarea-min-height: ${textareaConfig.minHeight}px;`
+                    : '';
+                if (config.evaluated) {
+                    return html `<temba-completion
+            name="${fieldName}"
+            label="${config.label}"
+            ?required="${config.required}"
+            .errors="${errors}"
+            .value="${value || ''}"
+            placeholder="${config.placeholder || ''}"
+            textarea
+            expressions="session"
+            style="${minHeightStyle}"
+            .helpText="${config.helpText || ''}"
+            @input="${(e) => this.handleFormFieldChange(fieldName, e)}"
+          ></temba-completion>`;
+                }
+                else {
+                    return html `<temba-textinput
+            name="${fieldName}"
+            label="${config.label}"
+            ?required="${config.required}"
+            .errors="${errors}"
+            .value="${value || ''}"
+            placeholder="${config.placeholder || ''}"
+            textarea
+            .rows="${textareaConfig.rows || 3}"
+            style="${minHeightStyle}"
+            .helpText="${config.helpText || ''}"
+            @input="${(e) => this.handleFormFieldChange(fieldName, e)}"
+          ></temba-textinput>`;
+                }
+            }
+            case 'select': {
+                const selectConfig = config;
+                return html `<temba-select
+          name="${fieldName}"
+          label="${config.label}"
+          ?required="${config.required}"
+          .errors="${errors}"
+          .values="${value || (selectConfig.multi ? [] : '')}"
+          ?multi="${selectConfig.multi}"
+          ?searchable="${selectConfig.searchable}"
+          ?tags="${selectConfig.tags}"
+          ?emails="${selectConfig.emails}"
+          placeholder="${selectConfig.placeholder || ''}"
+          maxItems="${selectConfig.maxItems || 0}"
+          valueKey="${selectConfig.valueKey || 'value'}"
+          nameKey="${selectConfig.nameKey || 'name'}"
+          endpoint="${selectConfig.endpoint || ''}"
+          .helpText="${config.helpText || ''}"
+          @change="${(e) => this.handleFormFieldChange(fieldName, e)}"
+        >
+          ${(_a = selectConfig.options) === null || _a === void 0 ? void 0 : _a.map((option) => {
+                    if (typeof option === 'string') {
+                        return html `<temba-option
+                name="${option}"
+                value="${option}"
+              ></temba-option>`;
+                    }
+                    else {
+                        return html `<temba-option
+                name="${option.label || option.name}"
+                value="${option.value}"
+              ></temba-option>`;
+                    }
+                })}
+        </temba-select>`;
+            }
+            case 'key-value':
+                return html `<div class="form-field">
+          <label>${config.label}${config.required ? ' *' : ''}</label>
+          <temba-key-value-editor
+            name="${fieldName}"
+            .value="${value || []}"
+            .sortable="${config.sortable}"
+            .keyPlaceholder="${config.keyPlaceholder || 'Key'}"
+            .valuePlaceholder="${config.valuePlaceholder || 'Value'}"
+            .minRows="${config.minRows || 0}"
+            @change="${(e) => {
+                    if (e.detail) {
+                        this.handleNewFieldChange(fieldName, e.detail.value);
+                    }
+                }}"
+          ></temba-key-value-editor>
+          ${errors.length
+                    ? html `<div class="field-errors">${errors.join(', ')}</div>`
+                    : ''}
+        </div>`;
+            case 'array':
+                return html `<div class="form-field">
+          <label>${config.label}${config.required ? ' *' : ''}</label>
+          <temba-array-editor
+            .value="${value || []}"
+            .itemConfig="${config.itemConfig}"
+            .sortable="${config.sortable}"
+            .itemLabel="${config.itemLabel || 'Item'}"
+            .minItems="${config.minItems || 0}"
+            .onItemChange="${config.onItemChange}"
+            @change="${(e) => this.handleNewFieldChange(fieldName, e.detail.value)}"
+          ></temba-array-editor>
+          ${errors.length
+                    ? html `<div class="field-errors">${errors.join(', ')}</div>`
+                    : ''}
+        </div>`;
+            case 'checkbox': {
+                const checkboxConfig = config;
+                return html `<div class="form-field">
+          <temba-checkbox
+            name="${fieldName}"
+            label="${config.label}"
+            .helpText="${config.helpText || ''}"
+            ?required="${config.required}"
+            .errors="${errors}"
+            ?checked="${value || false}"
+            size="${checkboxConfig.size || 1.2}"
+            animateChange="${checkboxConfig.animateChange || 'pulse'}"
+            @change="${(e) => this.handleFormFieldChange(fieldName, e)}"
+          ></temba-checkbox>
+          ${errors.length
+                    ? html `<div class="field-errors">${errors.join(', ')}</div>`
+                    : ''}
+        </div>`;
+            }
+            default:
+                return html `<div>Unsupported field type: ${config.type}</div>`;
+        }
+    }
+    handleGroupToggle(groupLabel) {
+        this.groupCollapseState = {
+            ...this.groupCollapseState,
+            [groupLabel]: !this.groupCollapseState[groupLabel]
+        };
+    }
+    expandGroupsWithErrors(errors) {
+        if (!this.action)
+            return;
+        const config = ACTION_CONFIG[this.action.type];
+        if (!(config === null || config === void 0 ? void 0 : config.layout))
+            return;
+        const errorFields = new Set(Object.keys(errors));
+        this.expandGroupsWithErrorsRecursive(config.layout, errorFields);
+    }
+    expandGroupsWithErrorsRecursive(items, errorFields) {
+        items.forEach((item) => {
+            if (typeof item === 'object' && item.type === 'group') {
+                const fieldsInGroup = this.collectFieldsFromItems(item.items);
+                const groupHasErrors = fieldsInGroup.some((fieldName) => errorFields.has(fieldName));
+                if (groupHasErrors) {
+                    // Expand this group
+                    this.groupCollapseState = {
+                        ...this.groupCollapseState,
+                        [item.label]: false
+                    };
+                }
+                // Recursively check nested items
+                this.expandGroupsWithErrorsRecursive(item.items, errorFields);
+            }
+            else if (typeof item === 'object' && item.type === 'row') {
+                // Recursively check items in rows
+                this.expandGroupsWithErrorsRecursive(item.items, errorFields);
+            }
+        });
+    }
+    renderLayoutItem(item, config, renderedFields) {
+        if (typeof item === 'string') {
+            // String shorthand for field
+            return this.renderLayoutItem({ type: 'field', field: item }, config, renderedFields);
+        }
+        switch (item.type) {
+            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]);
+                }
+                return html ``;
+            case 'row':
+                return this.renderRow(item, config, renderedFields);
+            case 'group':
+                return this.renderGroup(item, config, renderedFields);
+            default:
+                return html ``;
+        }
+    }
+    renderRow(rowConfig, config, renderedFields) {
+        const { items, gap = '1rem' } = 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) {
+            return html ``;
+        }
+        // Calculate grid template columns based on field maxWidth constraints
+        const columns = validFields.map((fieldName) => {
+            const fieldConfig = config.form[fieldName];
+            return fieldConfig.maxWidth || '1fr';
+        });
+        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>
+    `;
+    }
+    renderGroup(groupConfig, config, renderedFields) {
+        var _a;
+        const { label, items, collapsible = false, collapsed = false, helpText } = groupConfig;
+        // Initialize collapse state if not set
+        if (collapsible && !(label in this.groupCollapseState)) {
+            this.groupCollapseState = {
+                ...this.groupCollapseState,
+                [label]: collapsed
+            };
+        }
+        const isCollapsed = collapsible
+            ? (_a = this.groupCollapseState[label]) !== null && _a !== void 0 ? _a : collapsed
+            : false;
+        // Check if any field in this group has errors
+        const fieldsInGroup = this.collectFieldsFromItems(items);
+        const groupHasErrors = fieldsInGroup.some((fieldName) => this.errors[fieldName]);
+        return html `
+      <div
+        class="form-group ${collapsible ? 'collapsible' : ''} ${groupHasErrors
+            ? 'has-errors'
+            : ''}"
+      >
+        <div
+          class="form-group-header ${collapsible ? 'clickable' : ''}"
+          @click=${collapsible
+            ? () => this.handleGroupToggle(label)
+            : undefined}
+        >
+          <div class="form-group-info">
+            <div class="form-group-title">${label}</div>
+            ${helpText
+            ? html `<div class="form-group-help">${helpText}</div>`
+            : ''}
+          </div>
+          ${groupHasErrors
+            ? html `<temba-icon
+                name="alert_warning"
+                class="group-error-icon"
+                size="1.5"
+              ></temba-icon>`
+            : ''}
+          ${collapsible && !groupHasErrors
+            ? html `<temba-icon
+                name="arrow_right"
+                size="1.5"
+                class="group-toggle-icon ${isCollapsed
+                ? 'collapsed'
+                : 'expanded'}"
+              ></temba-icon>`
+            : ''}
+        </div>
+        <div
+          class="form-group-content ${isCollapsed ? 'collapsed' : 'expanded'}"
+        >
+          ${items.map((item) => this.renderLayoutItem(item, config, renderedFields))}
+        </div>
+      </div>
+    `;
+    }
+    collectFieldsFromItems(items) {
+        const fields = [];
+        items.forEach((item) => {
+            if (typeof item === 'string') {
+                fields.push(item);
+            }
+            else if (item.type === 'field') {
+                fields.push(item.field);
+            }
+            else if (item.type === 'row') {
+                fields.push(...this.collectFieldsFromItems(item.items));
+            }
+            else if (item.type === 'group') {
+                fields.push(...this.collectFieldsFromItems(item.items));
+            }
+        });
+        return fields;
+    }
+    renderFieldRow(rowConfig, config) {
+        // This method is deprecated - use renderRow instead
+        return this.renderRow(rowConfig, config, new Set());
+    }
+    renderFieldGroup(groupConfig, config) {
+        // This method is deprecated - use renderGroup instead
+        return this.renderGroup(groupConfig, config, new Set());
+    }
+    handleNewFieldChange(fieldName, value) {
+        this.formData = {
+            ...this.formData,
+            [fieldName]: value
+        };
+        // Clear any existing error for this field
+        if (this.errors[fieldName]) {
+            const newErrors = { ...this.errors };
+            delete newErrors[fieldName];
+            this.errors = newErrors;
+        }
+        // Trigger re-render
+        this.requestUpdate();
+    }
+    renderFields() {
+        if (!this.action) {
+            return html ` <div>No action selected</div> `;
+        }
+        const config = ACTION_CONFIG[this.action.type];
+        if (!config) {
+            return html ` <div>No configuration available for this action</div> `;
+        }
+        // Use the new fields configuration system
+        if (config.form) {
+            // If layout is specified, use it
+            if (config.layout) {
+                const renderedFields = new Set();
+                return html `
+          ${config.layout.map((item) => this.renderLayoutItem(item, config, renderedFields))}
+          ${
+                /* Render any fields not explicitly placed in layout */
+                Object.entries(config.form).map(([fieldName, fieldConfig]) => {
+                    if (!renderedFields.has(fieldName)) {
+                        return this.renderNewField(fieldName, fieldConfig, this.formData[fieldName]);
+                    }
+                    return html ``;
+                })}
+        `;
+            }
+            else {
+                // Default rendering without layout
+                return html `
+          ${Object.entries(config.form).map(([fieldName, fieldConfig]) => this.renderNewField(fieldName, fieldConfig, this.formData[fieldName]))}
+        `;
+            }
+        }
+        return html ` <div>No form configuration available</div> `;
+    }
+    renderActionSection() {
+        if (!this.node || this.node.actions.length === 0) {
+            return html ``;
+        }
+        const nodeConfig = this.getNodeConfig();
+        // If node has an action config, defer to ActionEditor
+        if (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.action) {
+            const action = this.node.actions[0]; // Assume single action for now
+            return html `
+        <div class="action-section">
+          <h3>Action Configuration</h3>
+          <div class="action-preview">
+            <p><strong>Type:</strong> ${action.type}</p>
+            <p><em>Action details will be editable here</em></p>
+          </div>
+        </div>
+      `;
+        }
+        return html ``;
+    }
+    renderRouterSection() {
+        var _a;
+        if (!((_a = this.node) === null || _a === void 0 ? void 0 : _a.router)) {
+            return html ``;
+        }
+        const nodeConfig = this.getNodeConfig();
+        return html `
+      <div class="router-section">
+        <h3>Router Configuration</h3>
+        ${(nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.router)
+            ? this.renderRouterConfig()
+            : html `<p>Basic router (no advanced configuration)</p>`}
+      </div>
+    `;
+    }
+    renderRouterConfig() {
+        const nodeConfig = this.getNodeConfig();
+        if (!(nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.router))
+            return html ``;
+        // Render router configuration based on node config
+        // This is where you'd render rule and category editors
+        return html `
+      <div class="router-config">
+        <p><strong>Type:</strong> ${nodeConfig.router.type}</p>
+        ${nodeConfig.router.rules
+            ? html `
+              <div class="rules-section">
+                <h4>Rules</h4>
+                <!-- Future: Render rule editor based on nodeConfig.router.rules -->
+                <p><em>Rule editing will be implemented here</em></p>
+              </div>
+            `
+            : ''}
+      </div>
+    `;
+    }
+    render() {
+        var _a, _b;
+        if (!this.isOpen) {
+            return html ``;
+        }
+        const headerColor = this.getHeaderColor();
+        const nodeConfig = this.getNodeConfig();
+        const actionConfig = ACTION_CONFIG[(_a = this.action) === null || _a === void 0 ? void 0 : _a.type];
+        return html `
+      <temba-dialog
+        header="${(actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.name) || (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.name) || 'Edit'}"
+        .open="${this.isOpen}"
+        @temba-button-clicked=${this.handleDialogButtonClick}
+        primaryButtonName="Save"
+        cancelButtonName="Cancel"
+        style="--header-bg: ${headerColor}"
+      >
+        <div class="node-editor-form">
+          ${this.renderFields()}
+          ${((_b = nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.router) === null || _b === void 0 ? void 0 : _b.configurable)
+            ? this.renderRouterSection()
+            : null}
+        </div>
+      </temba-dialog>
+    `;
+    }
+}
+__decorate([
+    property({ type: Object })
+], NodeEditor.prototype, "action", void 0);
+__decorate([
+    property({ type: Object })
+], NodeEditor.prototype, "node", void 0);
+__decorate([
+    property({ type: Object })
+], NodeEditor.prototype, "nodeUI", void 0);
+__decorate([
+    property({ type: Boolean })
+], NodeEditor.prototype, "isOpen", void 0);
+__decorate([
+    state()
+], NodeEditor.prototype, "formData", void 0);
+__decorate([
+    state()
+], NodeEditor.prototype, "originalFormData", void 0);
+__decorate([
+    state()
+], NodeEditor.prototype, "errors", void 0);
+__decorate([
+    state()
+], NodeEditor.prototype, "groupCollapseState", void 0);
+//# sourceMappingURL=NodeEditor.js.map