@nyaruka/temba-components 0.129.10 → 0.130.0

package/out-tsc/src/flow/nodes/split_by_ticket.js

@@ -1,18 +1,119 @@
-import { open_ticket } from '../actions/open_ticket';
+import { COLORS } from '../types';
+import { generateUUID, createSuccessFailureRouter } from '../../utils';
+import { html } from 'lit';
 export const split_by_ticket = {
     type: 'split_by_ticket',
-    action: open_ticket,
-    router: {
-        type: 'switch',
-        defaultCategory: 'Failure',
-        operand: '@locals._new_ticket',
-        rules: [
-            {
-                type: 'has_text',
-                arguments: [],
-                categoryName: 'Success'
-            }
-        ]
+    name: 'Open Ticket',
+    color: COLORS.create,
+    form: {
+        topic: {
+            type: 'select',
+            label: 'Topic',
+            required: true,
+            placeholder: 'Select a topic',
+            options: [],
+            endpoint: '/api/v2/topics.json',
+            valueKey: 'uuid',
+            nameKey: 'name',
+            maxWidth: '200px'
+        },
+        assignee: {
+            type: 'select',
+            label: 'Assignee',
+            required: false,
+            placeholder: 'Select an agent (optional)',
+            endpoint: '/api/v2/users.json',
+            valueKey: 'uuid',
+            getName: (item) => {
+                return item.name || [item.first_name, item.last_name].join(' ');
+            },
+            clearable: true
+        },
+        note: {
+            type: 'textarea',
+            label: 'Note',
+            required: false,
+            placeholder: 'Enter a note for the ticket (optional)',
+            minHeight: 100
+        }
+    },
+    layout: [{ type: 'row', items: ['topic', 'assignee'] }, 'note'],
+    render: (node) => {
+        var _a, _b;
+        const openTicketAction = (_a = node.actions) === null || _a === void 0 ? void 0 : _a.find((action) => action.type === 'open_ticket');
+        return html `
+      <div class="body">
+        ${((_b = openTicketAction === null || openTicketAction === void 0 ? void 0 : openTicketAction.topic) === null || _b === void 0 ? void 0 : _b.name) || 'Configure ticket'}
+      </div>
+    `;
+    },
+    toFormData: (node) => {
+        var _a;
+        // Extract data from the existing node structure
+        const openTicketAction = (_a = node.actions) === null || _a === void 0 ? void 0 : _a.find((action) => action.type === 'open_ticket');
+        return {
+            uuid: node.uuid,
+            topic: (openTicketAction === null || openTicketAction === void 0 ? void 0 : openTicketAction.topic)
+                ? [
+                    {
+                        uuid: openTicketAction.topic.uuid,
+                        name: openTicketAction.topic.name
+                    }
+                ]
+                : [],
+            assignee: (openTicketAction === null || openTicketAction === void 0 ? void 0 : openTicketAction.assignee)
+                ? [
+                    {
+                        uuid: openTicketAction.assignee.uuid,
+                        name: openTicketAction.assignee.name
+                    }
+                ]
+                : [],
+            note: (openTicketAction === null || openTicketAction === void 0 ? void 0 : openTicketAction.note) || ''
+        };
+    },
+    fromFormData: (formData, originalNode) => {
+        var _a, _b, _c;
+        // Find existing open_ticket action to preserve its UUID
+        const existingOpenTicketAction = (_a = originalNode.actions) === null || _a === void 0 ? void 0 : _a.find((action) => action.type === 'open_ticket');
+        const openTicketUuid = (existingOpenTicketAction === null || existingOpenTicketAction === void 0 ? void 0 : existingOpenTicketAction.uuid) || generateUUID();
+        // Create open_ticket action
+        const openTicketAction = {
+            type: 'open_ticket',
+            uuid: openTicketUuid,
+            topic: formData.topic && formData.topic.length > 0
+                ? {
+                    uuid: formData.topic[0].uuid,
+                    name: formData.topic[0].name
+                }
+                : undefined,
+            assignee: formData.assignee && formData.assignee.length > 0
+                ? {
+                    uuid: formData.assignee[0].uuid,
+                    name: formData.assignee[0].name ||
+                        [
+                            formData.assignee[0].first_name,
+                            formData.assignee[0].last_name
+                        ].join(' ')
+                }
+                : undefined,
+            note: formData.note || ''
+        };
+        // Create categories and exits for Success and Failure
+        const existingCategories = ((_b = originalNode.router) === null || _b === void 0 ? void 0 : _b.categories) || [];
+        const existingExits = originalNode.exits || [];
+        const existingCases = ((_c = originalNode.router) === null || _c === void 0 ? void 0 : _c.cases) || [];
+        const { router, exits } = createSuccessFailureRouter('@locals._new_ticket', {
+            type: 'has_text',
+            arguments: []
+        }, existingCategories, existingExits, existingCases);
+        // Return the complete node
+        return {
+            uuid: originalNode.uuid,
+            actions: [openTicketAction],
+            router: router,
+            exits: exits
+        };
     }
 };
 //# sourceMappingURL=split_by_ticket.js.map

package/out-tsc/src/flow/nodes/split_by_ticket.js.map

@@ -1 +1 @@
-{"version":3,"file":"split_by_ticket.js","sourceRoot":"","sources":["../../../../src/flow/nodes/split_by_ticket.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAGrD,MAAM,CAAC,MAAM,eAAe,GAAe;IACzC,IAAI,EAAE,iBAAiB;IACvB,MAAM,EAAE,WAAW;IACnB,MAAM,EAAE;QACN,IAAI,EAAE,QAAQ;QACd,eAAe,EAAE,SAAS;QAC1B,OAAO,EAAE,qBAAqB;QAC9B,KAAK,EAAE;YACL;gBACE,IAAI,EAAE,UAAU;gBAChB,SAAS,EAAE,EAAE;gBACb,YAAY,EAAE,SAAS;aACxB;SACF;KACF;CACF,CAAC","sourcesContent":["import { open_ticket } from '../actions/open_ticket';\nimport { NodeConfig } from '../types';\n\nexport const split_by_ticket: NodeConfig = {\n  type: 'split_by_ticket',\n  action: open_ticket,\n  router: {\n    type: 'switch',\n    defaultCategory: 'Failure',\n    operand: '@locals._new_ticket',\n    rules: [\n      {\n        type: 'has_text',\n        arguments: [],\n        categoryName: 'Success'\n      }\n    ]\n  }\n};\n"]}
+{"version":3,"file":"split_by_ticket.js","sourceRoot":"","sources":["../../../../src/flow/nodes/split_by_ticket.ts"],"names":[],"mappings":"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","sourcesContent":["import { COLORS, NodeConfig } from '../types';\nimport { Node, OpenTicket } from '../../store/flow-definition';\nimport { generateUUID, createSuccessFailureRouter } from '../../utils';\nimport { html } from 'lit';\n\nexport const split_by_ticket: NodeConfig = {\n  type: 'split_by_ticket',\n  name: 'Open Ticket',\n  color: COLORS.create,\n  form: {\n    topic: {\n      type: 'select',\n      label: 'Topic',\n      required: true,\n      placeholder: 'Select a topic',\n      options: [],\n      endpoint: '/api/v2/topics.json',\n      valueKey: 'uuid',\n      nameKey: 'name',\n      maxWidth: '200px'\n    },\n    assignee: {\n      type: 'select',\n      label: 'Assignee',\n      required: false,\n      placeholder: 'Select an agent (optional)',\n      endpoint: '/api/v2/users.json',\n      valueKey: 'uuid',\n      getName: (item: {\n        first_name?: string;\n        last_name?: string;\n        name?: string;\n      }) => {\n        return item.name || [item.first_name, item.last_name].join(' ');\n      },\n      clearable: true\n    },\n    note: {\n      type: 'textarea',\n      label: 'Note',\n      required: false,\n      placeholder: 'Enter a note for the ticket (optional)',\n      minHeight: 100\n    }\n  },\n  layout: [{ type: 'row', items: ['topic', 'assignee'] }, 'note'],\n  render: (node: Node) => {\n    const openTicketAction = node.actions?.find(\n      (action) => action.type === 'open_ticket'\n    ) as OpenTicket;\n    return html`\n      <div class=\"body\">\n        ${openTicketAction?.topic?.name || 'Configure ticket'}\n      </div>\n    `;\n  },\n  toFormData: (node: Node) => {\n    // Extract data from the existing node structure\n    const openTicketAction = node.actions?.find(\n      (action) => action.type === 'open_ticket'\n    ) as any;\n\n    return {\n      uuid: node.uuid,\n      topic: openTicketAction?.topic\n        ? [\n            {\n              uuid: openTicketAction.topic.uuid,\n              name: openTicketAction.topic.name\n            }\n          ]\n        : [],\n      assignee: openTicketAction?.assignee\n        ? [\n            {\n              uuid: openTicketAction.assignee.uuid,\n              name: openTicketAction.assignee.name\n            }\n          ]\n        : [],\n      note: openTicketAction?.note || ''\n    };\n  },\n  fromFormData: (formData: any, originalNode: Node): Node => {\n    // Find existing open_ticket action to preserve its UUID\n    const existingOpenTicketAction = originalNode.actions?.find(\n      (action) => action.type === 'open_ticket'\n    );\n    const openTicketUuid = existingOpenTicketAction?.uuid || generateUUID();\n\n    // Create open_ticket action\n    const openTicketAction: OpenTicket = {\n      type: 'open_ticket',\n      uuid: openTicketUuid,\n      topic:\n        formData.topic && formData.topic.length > 0\n          ? {\n              uuid: formData.topic[0].uuid,\n              name: formData.topic[0].name\n            }\n          : undefined,\n      assignee:\n        formData.assignee && formData.assignee.length > 0\n          ? {\n              uuid: formData.assignee[0].uuid,\n              name:\n                formData.assignee[0].name ||\n                [\n                  formData.assignee[0].first_name,\n                  formData.assignee[0].last_name\n                ].join(' ')\n            }\n          : undefined,\n      note: formData.note || ''\n    };\n\n    // Create categories and exits for Success and Failure\n    const existingCategories = originalNode.router?.categories || [];\n    const existingExits = originalNode.exits || [];\n    const existingCases = originalNode.router?.cases || [];\n\n    const { router, exits } = createSuccessFailureRouter(\n      '@locals._new_ticket',\n      {\n        type: 'has_text',\n        arguments: []\n      },\n      existingCategories,\n      existingExits,\n      existingCases\n    );\n\n    // Return the complete node\n    return {\n      uuid: originalNode.uuid,\n      actions: [openTicketAction],\n      router: router,\n      exits: exits\n    };\n  }\n};\n"]}

package/out-tsc/src/flow/nodes/split_by_webhook.js

@@ -1,18 +1,164 @@
-import { call_webhook } from '../actions/call_webhook';
+import { COLORS } from '../types';
+import { generateUUID, createSuccessFailureRouter } from '../../utils';
+import { html } from 'lit';
+const defaultPost = `@(json(object(
+  "contact", object(
+    "uuid", contact.uuid, 
+    "name", contact.name, 
+    "urn", contact.urn
+  ),
+  "flow", object(
+    "uuid", run.flow.uuid, 
+    "name", run.flow.name
+  ),
+  "results", foreach_value(results, extract_object, "value", "category")
+)))`;
 export const split_by_webhook = {
     type: 'split_by_webhook',
-    action: call_webhook,
-    router: {
-        type: 'switch',
-        defaultCategory: 'Failure',
-        operand: '@webhook.status',
-        rules: [
-            {
-                type: 'has_number_between',
-                arguments: ['200', '299'],
-                categoryName: 'Success'
+    name: 'Call Webhook',
+    color: COLORS.call,
+    form: {
+        method: {
+            type: 'select',
+            required: true,
+            options: ['GET', 'POST', 'PUT', 'DELETE', 'HEAD', 'PATCH'],
+            maxWidth: '120px',
+            searchable: false
+        },
+        url: {
+            type: 'text',
+            required: true,
+            evaluated: true,
+            placeholder: 'https://example.com/webhook'
+        },
+        headers: {
+            type: 'key-value',
+            sortable: true,
+            keyPlaceholder: 'Header name',
+            valuePlaceholder: 'Header value',
+            minRows: 0
+        },
+        body: {
+            type: 'textarea',
+            evaluated: true,
+            placeholder: 'Request body content (JSON, XML, etc.)',
+            minHeight: 200,
+            dependsOn: ['method'],
+            computeValue: (values, currentValue, originalValues) => {
+                // Check if method is POST (handle both string and select object formats)
+                const method = Array.isArray(values.method) && values.method.length > 0
+                    ? values.method[0].value || values.method[0].name
+                    : values.method;
+                if (method === 'POST') {
+                    // For POST, provide the template if body is empty or was never set by user
+                    if (!currentValue || currentValue.trim() === '') {
+                        return defaultPost;
+                    }
+                }
+                else {
+                    // For non-POST methods, clear the body if it was auto-generated or empty
+                    // Check if the original body was empty (user never specified a body)
+                    const originalBody = (originalValues === null || originalValues === void 0 ? void 0 : originalValues.body) || '';
+                    const isOriginallyEmpty = !originalBody || originalBody.trim() === '';
+                    // Clear if: originally empty, contains default template, or is currently empty
+                    if (isOriginallyEmpty ||
+                        !currentValue ||
+                        currentValue.trim() === '' ||
+                        currentValue.trim() === defaultPost.trim()) {
+                        return '';
+                    }
+                }
+                return currentValue; // Keep existing value if user has customized it
             }
-        ]
+        }
+    },
+    layout: [
+        // Row with method and URL side by side
+        { type: 'row', items: ['method', 'url'] },
+        // Advanced group with nested layouts
+        {
+            type: 'group',
+            label: 'Headers',
+            items: ['headers'],
+            collapsible: true,
+            collapsed: true,
+            helpText: 'Configure authentication or custom headers',
+            getGroupValueCount: (formData) => {
+                var _a;
+                return ((_a = formData.headers) === null || _a === void 0 ? void 0 : _a.length) || 0;
+            }
+        },
+        {
+            type: 'group',
+            label: 'Body',
+            items: ['body'],
+            collapsible: true,
+            collapsed: true,
+            helpText: 'Configure the request payload',
+            getGroupValueCount: (formData) => {
+                return !!(formData.body &&
+                    formData.body.trim() !== '' &&
+                    formData.body !== defaultPost);
+            }
+        }
+    ],
+    render: (node) => {
+        var _a;
+        const callWebhookAction = (_a = node.actions) === null || _a === void 0 ? void 0 : _a.find((action) => action.type === 'call_webhook');
+        return html `
+      <div
+        class="body"
+        style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;"
+      >
+        ${(callWebhookAction === null || callWebhookAction === void 0 ? void 0 : callWebhookAction.url) || 'Configure webhook'}
+      </div>
+    `;
+    },
+    toFormData: (node) => {
+        var _a;
+        // Extract data from the existing node structure
+        const callWebhookAction = (_a = node.actions) === null || _a === void 0 ? void 0 : _a.find((action) => action.type === 'call_webhook');
+        return {
+            uuid: node.uuid,
+            method: (callWebhookAction === null || callWebhookAction === void 0 ? void 0 : callWebhookAction.method) || 'GET',
+            url: (callWebhookAction === null || callWebhookAction === void 0 ? void 0 : callWebhookAction.url) || '',
+            headers: (callWebhookAction === null || callWebhookAction === void 0 ? void 0 : callWebhookAction.headers) || [],
+            body: (callWebhookAction === null || callWebhookAction === void 0 ? void 0 : callWebhookAction.body) || ''
+        };
+    },
+    fromFormData: (formData, originalNode) => {
+        var _a, _b, _c;
+        // Get method selection
+        const methodSelection = Array.isArray(formData.method) && formData.method.length > 0
+            ? formData.method[0]
+            : { value: 'GET', name: 'GET' };
+        // Find existing call_webhook action to preserve its UUID
+        const existingCallWebhookAction = (_a = originalNode.actions) === null || _a === void 0 ? void 0 : _a.find((action) => action.type === 'call_webhook');
+        const callWebhookUuid = (existingCallWebhookAction === null || existingCallWebhookAction === void 0 ? void 0 : existingCallWebhookAction.uuid) || generateUUID();
+        // Create call_webhook action
+        const callWebhookAction = {
+            type: 'call_webhook',
+            uuid: callWebhookUuid,
+            method: methodSelection.value,
+            url: formData.url || '',
+            headers: formData.headers || [],
+            body: formData.body || ''
+        };
+        // Create categories and exits for Success and Failure
+        const existingCategories = ((_b = originalNode.router) === null || _b === void 0 ? void 0 : _b.categories) || [];
+        const existingExits = originalNode.exits || [];
+        const existingCases = ((_c = originalNode.router) === null || _c === void 0 ? void 0 : _c.cases) || [];
+        const { router, exits } = createSuccessFailureRouter('@webhook.status', {
+            type: 'has_number_between',
+            arguments: ['200', '299']
+        }, existingCategories, existingExits, existingCases);
+        // Return the complete node
+        return {
+            uuid: originalNode.uuid,
+            actions: [callWebhookAction],
+            router: router,
+            exits: exits
+        };
     }
 };
 //# sourceMappingURL=split_by_webhook.js.map

package/out-tsc/src/flow/nodes/split_by_webhook.js.map

@@ -1 +1 @@
-{"version":3,"file":"split_by_webhook.js","sourceRoot":"","sources":["../../../../src/flow/nodes/split_by_webhook.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGvD,MAAM,CAAC,MAAM,gBAAgB,GAAe;IAC1C,IAAI,EAAE,kBAAkB;IACxB,MAAM,EAAE,YAAY;IACpB,MAAM,EAAE;QACN,IAAI,EAAE,QAAQ;QACd,eAAe,EAAE,SAAS;QAC1B,OAAO,EAAE,iBAAiB;QAC1B,KAAK,EAAE;YACL;gBACE,IAAI,EAAE,oBAAoB;gBAC1B,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;gBACzB,YAAY,EAAE,SAAS;aACxB;SACF;KACF;CACF,CAAC","sourcesContent":["import { call_webhook } from '../actions/call_webhook';\nimport { NodeConfig } from '../types';\n\nexport const split_by_webhook: NodeConfig = {\n  type: 'split_by_webhook',\n  action: call_webhook,\n  router: {\n    type: 'switch',\n    defaultCategory: 'Failure',\n    operand: '@webhook.status',\n    rules: [\n      {\n        type: 'has_number_between',\n        arguments: ['200', '299'],\n        categoryName: 'Success'\n      }\n    ]\n  }\n};\n"]}
+{"version":3,"file":"split_by_webhook.js","sourceRoot":"","sources":["../../../../src/flow/nodes/split_by_webhook.ts"],"names":[],"mappings":"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","sourcesContent":["import { COLORS, NodeConfig } from '../types';\nimport { CallWebhook, Node } from '../../store/flow-definition';\nimport { generateUUID, createSuccessFailureRouter } from '../../utils';\nimport { html } from 'lit';\n\nconst defaultPost = `@(json(object(\n  \"contact\", object(\n    \"uuid\", contact.uuid, \n    \"name\", contact.name, \n    \"urn\", contact.urn\n  ),\n  \"flow\", object(\n    \"uuid\", run.flow.uuid, \n    \"name\", run.flow.name\n  ),\n  \"results\", foreach_value(results, extract_object, \"value\", \"category\")\n)))`;\n\nexport const split_by_webhook: NodeConfig = {\n  type: 'split_by_webhook',\n  name: 'Call Webhook',\n  color: COLORS.call,\n  form: {\n    method: {\n      type: 'select',\n      required: true,\n      options: ['GET', 'POST', 'PUT', 'DELETE', 'HEAD', 'PATCH'],\n      maxWidth: '120px',\n      searchable: false\n    },\n    url: {\n      type: 'text',\n      required: true,\n      evaluated: true,\n      placeholder: 'https://example.com/webhook'\n    },\n    headers: {\n      type: 'key-value',\n      sortable: true,\n      keyPlaceholder: 'Header name',\n      valuePlaceholder: 'Header value',\n      minRows: 0\n    },\n    body: {\n      type: 'textarea',\n      evaluated: true,\n      placeholder: 'Request body content (JSON, XML, etc.)',\n      minHeight: 200,\n      dependsOn: ['method'],\n      computeValue: (\n        values: Record<string, any>,\n        currentValue: any,\n        originalValues?: Record<string, any>\n      ) => {\n        // Check if method is POST (handle both string and select object formats)\n        const method =\n          Array.isArray(values.method) && values.method.length > 0\n            ? values.method[0].value || values.method[0].name\n            : values.method;\n\n        if (method === 'POST') {\n          // For POST, provide the template if body is empty or was never set by user\n          if (!currentValue || currentValue.trim() === '') {\n            return defaultPost;\n          }\n        } else {\n          // For non-POST methods, clear the body if it was auto-generated or empty\n          // Check if the original body was empty (user never specified a body)\n          const originalBody = originalValues?.body || '';\n          const isOriginallyEmpty = !originalBody || originalBody.trim() === '';\n\n          // Clear if: originally empty, contains default template, or is currently empty\n          if (\n            isOriginallyEmpty ||\n            !currentValue ||\n            currentValue.trim() === '' ||\n            currentValue.trim() === defaultPost.trim()\n          ) {\n            return '';\n          }\n        }\n\n        return currentValue; // Keep existing value if user has customized it\n      }\n    }\n  },\n  layout: [\n    // Row with method and URL side by side\n    { type: 'row', items: ['method', 'url'] },\n    // Advanced group with nested layouts\n    {\n      type: 'group',\n      label: 'Headers',\n      items: ['headers'],\n      collapsible: true,\n      collapsed: true,\n      helpText: 'Configure authentication or custom headers',\n      getGroupValueCount: (formData: any) => {\n        return formData.headers?.length || 0;\n      }\n    },\n    {\n      type: 'group',\n      label: 'Body',\n      items: ['body'],\n      collapsible: true,\n      collapsed: true,\n      helpText: 'Configure the request payload',\n      getGroupValueCount: (formData: any) => {\n        return !!(\n          formData.body &&\n          formData.body.trim() !== '' &&\n          formData.body !== defaultPost\n        );\n      }\n    }\n  ],\n  render: (node: Node) => {\n    const callWebhookAction = node.actions?.find(\n      (action) => action.type === 'call_webhook'\n    ) as CallWebhook;\n    return html`\n      <div\n        class=\"body\"\n        style=\"word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;\"\n      >\n        ${callWebhookAction?.url || 'Configure webhook'}\n      </div>\n    `;\n  },\n  toFormData: (node: Node) => {\n    // Extract data from the existing node structure\n    const callWebhookAction = node.actions?.find(\n      (action) => action.type === 'call_webhook'\n    ) as any;\n\n    return {\n      uuid: node.uuid,\n      method: callWebhookAction?.method || 'GET',\n      url: callWebhookAction?.url || '',\n      headers: callWebhookAction?.headers || [],\n      body: callWebhookAction?.body || ''\n    };\n  },\n  fromFormData: (formData: any, originalNode: Node): Node => {\n    // Get method selection\n    const methodSelection =\n      Array.isArray(formData.method) && formData.method.length > 0\n        ? formData.method[0]\n        : { value: 'GET', name: 'GET' };\n\n    // Find existing call_webhook action to preserve its UUID\n    const existingCallWebhookAction = originalNode.actions?.find(\n      (action) => action.type === 'call_webhook'\n    );\n    const callWebhookUuid = existingCallWebhookAction?.uuid || generateUUID();\n\n    // Create call_webhook action\n    const callWebhookAction: CallWebhook = {\n      type: 'call_webhook',\n      uuid: callWebhookUuid,\n      method: methodSelection.value,\n      url: formData.url || '',\n      headers: formData.headers || [],\n      body: formData.body || ''\n    };\n\n    // Create categories and exits for Success and Failure\n    const existingCategories = originalNode.router?.categories || [];\n    const existingExits = originalNode.exits || [];\n    const existingCases = originalNode.router?.cases || [];\n\n    const { router, exits } = createSuccessFailureRouter(\n      '@webhook.status',\n      {\n        type: 'has_number_between',\n        arguments: ['200', '299']\n      },\n      existingCategories,\n      existingExits,\n      existingCases\n    );\n\n    // Return the complete node\n    return {\n      uuid: originalNode.uuid,\n      actions: [callWebhookAction],\n      router: router,\n      exits: exits\n    };\n  }\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/flow/types.ts"],"names":[],"mappings":"AAiQA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,SAAS;IAChB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,SAAS;IACf,GAAG,EAAE,SAAS;IACd,MAAM,EAAE,SAAS;CAClB,CAAC","sourcesContent":["import { TemplateResult } from 'lit-html';\nimport { Action, Node } from '../store/flow-definition';\n\nexport interface ValidationResult {\n  valid: boolean;\n  errors: { [key: string]: string };\n}\n\n// Component attribute interfaces - these define what's allowed for each component type\nexport interface TextInputAttributes {\n  type?: 'text' | 'email' | 'number' | 'url' | 'tel';\n  placeholder?: string;\n  clearable?: boolean;\n  maxlength?: number;\n  gsm?: boolean;\n  autogrow?: boolean;\n  textarea?: boolean;\n  submitOnEnter?: boolean;\n}\n\nexport interface CompletionAttributes {\n  placeholder?: string;\n  clearable?: boolean;\n  maxlength?: number;\n  gsm?: boolean;\n  autogrow?: boolean;\n  textarea?: boolean;\n  expressions?: string;\n  counter?: string;\n  minHeight?: number;\n}\n\nexport interface SelectAttributes {\n  placeholder?: string;\n  multi?: boolean;\n  searchable?: boolean;\n  tags?: boolean;\n  emails?: boolean;\n  clearable?: boolean;\n  endpoint?: string;\n  valueKey?: string;\n  nameKey?: string;\n  queryParam?: string;\n  maxItems?: number;\n  maxItemsText?: string;\n  expressions?: string;\n  options?: Array<{ name: string; value: any }>;\n  sorted?: boolean;\n  allowCreate?: boolean;\n  jsonValue?: boolean;\n  spaceSelect?: boolean;\n  infoText?: string;\n}\n\nexport interface CheckboxAttributes {\n  label?: string;\n  size?: number;\n  disabled?: boolean;\n  animateChange?: string;\n}\n\nexport interface SliderAttributes {\n  min?: number;\n  max?: number;\n  range?: boolean;\n}\n\nexport interface FormData extends Record<string, any> {}\n\nexport interface FormConfig {\n  form?: Record<string, FieldConfig>;\n  layout?: LayoutItem[];\n  sanitize?: (formData: FormData) => void;\n  validate?: (formData: FormData) => ValidationResult;\n}\n\nexport interface NodeConfig extends FormConfig {\n  type: string;\n  name?: string;\n  color?: string;\n  action?: ActionConfig;\n  router?: {\n    type: 'switch' | 'random';\n    defaultCategory?: string;\n    operand?: string;\n    configurable?: boolean; // can the rules be configured in the UI\n    rules?: {\n      type:\n        | 'has_number_between'\n        | 'has_string'\n        | 'has_value'\n        | 'has_not_value'\n        | 'has_text';\n      arguments: string[];\n      categoryName: string;\n    }[];\n  };\n\n  toFormData?: (node: Node) => FormData;\n  fromFormData?: (formData: FormData, originalNode: Node) => Node;\n  render?: (node: Node) => TemplateResult;\n}\n\n// New field configuration system for generic form generation\nexport interface BaseFieldConfig {\n  label?: string;\n  required?: boolean;\n  evaluated?: boolean;\n  dependsOn?: string[];\n  computeValue?: (\n    values: Record<string, any>,\n    currentValue: any,\n    originalValues?: Record<string, any>\n  ) => any;\n\n  // Validation properties\n  minLength?: number;\n  maxLength?: number;\n  pattern?: string;\n  helpText?: string;\n\n  // Layout properties\n  maxWidth?: string;\n\n  // Conditional rendering\n  conditions?: {\n    visible?: (formData: Record<string, any>) => boolean;\n    disabled?: (formData: Record<string, any>) => boolean;\n  };\n}\n\nexport interface TextFieldConfig extends BaseFieldConfig {\n  type: 'text';\n  placeholder?: string;\n}\n\nexport interface TextareaFieldConfig extends BaseFieldConfig {\n  type: 'textarea';\n  placeholder?: string;\n  rows?: number;\n  minHeight?: number;\n}\n\nexport interface SelectFieldConfig extends BaseFieldConfig {\n  type: 'select';\n  options?: string[] | { value: string; label: string }[];\n  multi?: boolean;\n  clearable?: boolean;\n  searchable?: boolean;\n  tags?: boolean;\n  placeholder?: string;\n  maxItems?: number;\n  valueKey?: string;\n  nameKey?: string;\n  endpoint?: string;\n  emails?: boolean;\n  getName?: (item: any) => string;\n  flavor?: 'small' | 'large';\n  createArbitraryOption?: (input: string, options: any[]) => any;\n  allowCreate?: boolean;\n}\n\nexport interface KeyValueFieldConfig extends BaseFieldConfig {\n  type: 'key-value';\n  sortable?: boolean;\n  keyPlaceholder?: string;\n  valuePlaceholder?: string;\n  minRows?: number;\n}\n\nexport interface ArrayFieldConfig extends BaseFieldConfig {\n  type: 'array';\n  itemConfig: Record<string, FieldConfig>;\n  sortable?: boolean;\n  minItems?: number;\n  maxItems?: number;\n  itemLabel?: string;\n  onItemChange?: (\n    itemIndex: number,\n    field: string,\n    value: any,\n    allItems: any[]\n  ) => any[];\n  isEmptyItem?: (item: any) => boolean;\n}\n\nexport interface CheckboxFieldConfig extends BaseFieldConfig {\n  type: 'checkbox';\n  size?: number;\n  animateChange?: string;\n}\n\nexport interface MessageEditorFieldConfig extends BaseFieldConfig {\n  type: 'message-editor';\n  placeholder?: string;\n  minHeight?: number;\n  maxAttachments?: number;\n  accept?: string;\n  endpoint?: string;\n  counter?: string;\n  gsm?: boolean;\n  autogrow?: boolean;\n  disableCompletion?: boolean;\n}\n\nexport type FieldConfig =\n  | TextFieldConfig\n  | TextareaFieldConfig\n  | SelectFieldConfig\n  | KeyValueFieldConfig\n  | ArrayFieldConfig\n  | CheckboxFieldConfig\n  | MessageEditorFieldConfig;\n\n// Layout configurations for better form organization\n// Recursive layout system - any layout item can contain other layout items\n\nexport interface FieldItemConfig {\n  type: 'field';\n  field: string; // field name to render\n}\n\nexport interface RowLayoutConfig {\n  type: 'row';\n  items: LayoutItem[]; // can contain fields, groups, or other rows\n  gap?: string; // CSS gap value, defaults to '1rem'\n}\n\nexport interface GroupLayoutConfig {\n  type: 'group';\n  label: string;\n  items: LayoutItem[]; // can contain fields, rows, or other groups\n  collapsible?: boolean;\n  collapsed?: boolean | ((formData: any) => boolean); // initial state if collapsible - can be a function\n  helpText?: string;\n  getGroupValueCount?: (formData: any) => number; // optional function to get count for bubble display\n}\n\nexport type LayoutItem =\n  | FieldItemConfig\n  | RowLayoutConfig\n  | GroupLayoutConfig\n  | string; // string is shorthand for field\n\nexport interface ActionConfig extends FormConfig {\n  name: string;\n  color: string;\n  evaluated?: string[];\n  render?: (node: any, action: any) => TemplateResult;\n\n  form?: Record<string, FieldConfig>;\n  layout?: LayoutItem[]; // optional layout configuration - array of layout items\n\n  toFormData?: (action: Action) => any;\n  fromFormData?: (formData: any) => Action;\n}\n\nexport const COLORS = {\n  send: '#3498db',\n  update: '#01c1af',\n  broadcast: '#8e5ea7',\n  call: '#e68628',\n  create: '#df419f',\n  save: '#1a777c',\n  split: '#aaaaaa',\n  execute: '#666666',\n  wait: '#4d7dad',\n  add: '#309c42',\n  remove: '#e74c3c'\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/flow/types.ts"],"names":[],"mappings":"AAkQA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,SAAS;IAChB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,SAAS;IACf,GAAG,EAAE,SAAS;IACd,MAAM,EAAE,SAAS;CAClB,CAAC","sourcesContent":["import { TemplateResult } from 'lit-html';\nimport { Action, Node } from '../store/flow-definition';\n\nexport interface ValidationResult {\n  valid: boolean;\n  errors: { [key: string]: string };\n}\n\n// Component attribute interfaces - these define what's allowed for each component type\nexport interface TextInputAttributes {\n  type?: 'text' | 'email' | 'number' | 'url' | 'tel';\n  placeholder?: string;\n  clearable?: boolean;\n  maxlength?: number;\n  gsm?: boolean;\n  autogrow?: boolean;\n  textarea?: boolean;\n  submitOnEnter?: boolean;\n}\n\nexport interface CompletionAttributes {\n  placeholder?: string;\n  clearable?: boolean;\n  maxlength?: number;\n  gsm?: boolean;\n  autogrow?: boolean;\n  textarea?: boolean;\n  expressions?: string;\n  counter?: string;\n  minHeight?: number;\n}\n\nexport interface SelectAttributes {\n  placeholder?: string;\n  multi?: boolean;\n  searchable?: boolean;\n  tags?: boolean;\n  emails?: boolean;\n  clearable?: boolean;\n  endpoint?: string;\n  valueKey?: string;\n  nameKey?: string;\n  queryParam?: string;\n  maxItems?: number;\n  maxItemsText?: string;\n  expressions?: string;\n  options?: Array<{ name: string; value: any }>;\n  sorted?: boolean;\n  allowCreate?: boolean;\n  jsonValue?: boolean;\n  spaceSelect?: boolean;\n  infoText?: string;\n}\n\nexport interface CheckboxAttributes {\n  label?: string;\n  size?: number;\n  disabled?: boolean;\n  animateChange?: string;\n}\n\nexport interface SliderAttributes {\n  min?: number;\n  max?: number;\n  range?: boolean;\n}\n\nexport interface FormData extends Record<string, any> {}\n\nexport interface FormConfig {\n  form?: Record<string, FieldConfig>;\n  layout?: LayoutItem[];\n  sanitize?: (formData: FormData) => void;\n  validate?: (formData: FormData) => ValidationResult;\n}\n\nexport interface NodeConfig extends FormConfig {\n  type: string;\n  name?: string;\n  color?: string;\n  action?: ActionConfig;\n  router?: {\n    type: 'switch' | 'random';\n    defaultCategory?: string;\n    operand?: string;\n    configurable?: boolean; // can the rules be configured in the UI\n    rules?: {\n      type:\n        | 'has_number_between'\n        | 'has_string'\n        | 'has_value'\n        | 'has_not_value'\n        | 'has_text';\n      arguments: string[];\n      categoryName: string;\n    }[];\n  };\n\n  toFormData?: (node: Node) => FormData;\n  fromFormData?: (formData: FormData, originalNode: Node) => Node;\n  render?: (node: Node) => TemplateResult;\n}\n\n// New field configuration system for generic form generation\nexport interface BaseFieldConfig {\n  label?: string;\n  required?: boolean;\n  evaluated?: boolean;\n  dependsOn?: string[];\n  computeValue?: (\n    values: Record<string, any>,\n    currentValue: any,\n    originalValues?: Record<string, any>\n  ) => any;\n\n  // Validation properties\n  minLength?: number;\n  maxLength?: number;\n  pattern?: string;\n  helpText?: string;\n\n  // Layout properties\n  maxWidth?: string;\n\n  // Conditional rendering\n  conditions?: {\n    visible?: (formData: Record<string, any>) => boolean;\n    disabled?: (formData: Record<string, any>) => boolean;\n  };\n}\n\nexport interface TextFieldConfig extends BaseFieldConfig {\n  type: 'text';\n  placeholder?: string;\n}\n\nexport interface TextareaFieldConfig extends BaseFieldConfig {\n  type: 'textarea';\n  placeholder?: string;\n  rows?: number;\n  minHeight?: number;\n}\n\nexport interface SelectFieldConfig extends BaseFieldConfig {\n  type: 'select';\n  options?: string[] | { value: string; name: string }[];\n  multi?: boolean;\n  clearable?: boolean;\n  searchable?: boolean;\n  tags?: boolean;\n  placeholder?: string;\n  maxItems?: number;\n  valueKey?: string;\n  nameKey?: string;\n  endpoint?: string;\n  emails?: boolean;\n  getName?: (item: any) => string;\n  flavor?: 'small' | 'large';\n  createArbitraryOption?: (input: string, options: any[]) => any;\n  allowCreate?: boolean;\n  getDynamicOptions?: () => Array<{ value: string; name: string }>;\n}\n\nexport interface KeyValueFieldConfig extends BaseFieldConfig {\n  type: 'key-value';\n  sortable?: boolean;\n  keyPlaceholder?: string;\n  valuePlaceholder?: string;\n  minRows?: number;\n}\n\nexport interface ArrayFieldConfig extends BaseFieldConfig {\n  type: 'array';\n  itemConfig: Record<string, FieldConfig>;\n  sortable?: boolean;\n  minItems?: number;\n  maxItems?: number;\n  itemLabel?: string;\n  onItemChange?: (\n    itemIndex: number,\n    field: string,\n    value: any,\n    allItems: any[]\n  ) => any[];\n  isEmptyItem?: (item: any) => boolean;\n}\n\nexport interface CheckboxFieldConfig extends BaseFieldConfig {\n  type: 'checkbox';\n  size?: number;\n  animateChange?: string;\n}\n\nexport interface MessageEditorFieldConfig extends BaseFieldConfig {\n  type: 'message-editor';\n  placeholder?: string;\n  minHeight?: number;\n  maxAttachments?: number;\n  accept?: string;\n  endpoint?: string;\n  counter?: string;\n  gsm?: boolean;\n  autogrow?: boolean;\n  disableCompletion?: boolean;\n}\n\nexport type FieldConfig =\n  | TextFieldConfig\n  | TextareaFieldConfig\n  | SelectFieldConfig\n  | KeyValueFieldConfig\n  | ArrayFieldConfig\n  | CheckboxFieldConfig\n  | MessageEditorFieldConfig;\n\n// Layout configurations for better form organization\n// Recursive layout system - any layout item can contain other layout items\n\nexport interface FieldItemConfig {\n  type: 'field';\n  field: string; // field name to render\n}\n\nexport interface RowLayoutConfig {\n  type: 'row';\n  items: LayoutItem[]; // can contain fields, groups, or other rows\n  gap?: string; // CSS gap value, defaults to '1rem'\n}\n\nexport interface GroupLayoutConfig {\n  type: 'group';\n  label: string;\n  items: LayoutItem[]; // can contain fields, rows, or other groups\n  collapsible?: boolean;\n  collapsed?: boolean | ((formData: any) => boolean); // initial state if collapsible - can be a function\n  helpText?: string;\n  getGroupValueCount?: (formData: any) => number; // optional function to get count for bubble display\n}\n\nexport type LayoutItem =\n  | FieldItemConfig\n  | RowLayoutConfig\n  | GroupLayoutConfig\n  | string; // string is shorthand for field\n\nexport interface ActionConfig extends FormConfig {\n  name: string;\n  color: string;\n  evaluated?: string[];\n  render?: (node: any, action: any) => TemplateResult;\n\n  form?: Record<string, FieldConfig>;\n  layout?: LayoutItem[]; // optional layout configuration - array of layout items\n\n  toFormData?: (action: Action) => any;\n  fromFormData?: (formData: any) => Action;\n}\n\nexport const COLORS = {\n  send: '#3498db',\n  update: '#01c1af',\n  broadcast: '#8e5ea7',\n  call: '#e68628',\n  create: '#df419f',\n  save: '#1a777c',\n  split: '#aaaaaa',\n  execute: '#666666',\n  wait: '#4d7dad',\n  add: '#309c42',\n  remove: '#e74c3c'\n};\n"]}

package/out-tsc/src/form/ArrayEditor.js

@@ -65,12 +65,13 @@ let TembaArrayEditor = class TembaArrayEditor extends BaseListEditor {
             return config.computeValue(item, currentValue);
         }
         // For select fields, ensure we return the right type
-        if (config.type === 'select') {
-            const selectConfig = config;
-            if (currentValue === undefined || currentValue === null) {
-                return selectConfig.multi ? [] : '';
-            }
-        }
+        /*if (config.type === 'select') {
+          console.log('computeFieldValue select', currentValue, config);
+          const selectConfig = config as SelectFieldConfig;
+          if (currentValue === undefined || currentValue === null) {
+            return selectConfig.multi ? [] : '';
+          }
+        }*/
         return currentValue;
     }
     renderArrayField(itemIndex, fieldName, config) {
@@ -85,25 +86,8 @@ let TembaArrayEditor = class TembaArrayEditor extends BaseListEditor {
                 const target = e.target;
                 // Handle different field types and their change events
                 if (config.type === 'select') {
-                    // For temba-select, extract the correct value
-                    if (target.tagName === 'TEMBA-SELECT') {
-                        if (target.multi || target.emails || target.tags) {
-                            value = target.values || [];
-                        }
-                        else {
-                            // Single select: extract value from first selected option
-                            const values = target.values || [];
-                            value =
-                                values.length > 0 && values[0]
-                                    ? values[0].value !== undefined
-                                        ? values[0].value
-                                        : values[0]
-                                    : '';
-                        }
-                    }
-                    else {
-                        value = target.value;
-                    }
+                    // Use consistent temba-select value normalization
+                    value = target.values;
                 }
                 else {
                     // For other field types, use the target value directly

package/out-tsc/src/form/ArrayEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArrayEditor.js","sourceRoot":"","sources":["../../../src/form/ArrayEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { FieldConfig, SelectFieldConfig } from '../flow/types';\nimport { BaseListEditor, ListItem } from './BaseListEditor';\nimport { FieldRenderer } from './FieldRenderer';\n\n@customElement('temba-array-editor')\nexport class TembaArrayEditor extends BaseListEditor<ListItem> {\n  @property({ type: Object })\n  itemConfig: Record<string, FieldConfig> = {};\n\n  @property({ type: String })\n  itemLabel = 'Item';\n\n  @property({ type: Function })\n  onItemChange?: (\n    itemIndex: number,\n    field: string,\n    value: any,\n    allItems: any[]\n  ) => any[];\n\n  @property({ type: Function })\n  isEmptyItemFn?: (item: any) => boolean;\n\n  @property({ type: Boolean })\n  maintainEmptyItem = true; // Enable by default for better UX\n\n  constructor() {\n    super();\n    this._items = [];\n  }\n\n  // External API\n  @property({ type: Array })\n  get value(): any[] {\n    return [...this._items];\n  }\n\n  set value(newValue: any[]) {\n    this._items = newValue || [];\n    this.requestUpdate();\n  }\n\n  // Implement abstract methods\n  isEmptyItem(item: ListItem): boolean {\n    // Use configurable function if provided\n    if (this.isEmptyItemFn) {\n      return this.isEmptyItemFn(item);\n    }\n\n    // Default behavior: check if all values are empty\n    const values = Object.values(item);\n    if (values.length === 0) {\n      return true;\n    }\n\n    return values.every(\n      (value) => value === undefined || value === null || value === ''\n    );\n  }\n\n  // Override cleanItems to be more permissive for form data\n  protected cleanItems(items: ListItem[]): any {\n    // For runtime attachments, keep items that have at least one non-empty field\n    return items.filter((item) => {\n      const values = Object.values(item);\n      return (\n        values.length > 0 &&\n        values.some(\n          (value) => value !== undefined && value !== null && value !== ''\n        )\n      );\n    });\n  }\n\n  createEmptyItem(): ListItem {\n    return {};\n  }\n\n  protected handleFieldChange(\n    itemIndex: number,\n    fieldName: string,\n    newValue: any\n  ) {\n    let updatedItems: any[];\n\n    if (this.onItemChange) {\n      updatedItems = this.onItemChange(\n        itemIndex,\n        fieldName,\n        newValue,\n        this._items\n      );\n    } else {\n      updatedItems = [...this._items];\n      updatedItems[itemIndex] = {\n        ...updatedItems[itemIndex],\n        [fieldName]: newValue\n      };\n    }\n\n    this.updateValue(updatedItems);\n  }\n\n  private computeFieldValue(\n    itemIndex: number,\n    fieldName: string,\n    config: FieldConfig\n  ): any {\n    const item = this._items[itemIndex] || {};\n    const currentValue = item[fieldName];\n\n    if (config.computeValue) {\n      return config.computeValue(item, currentValue);\n    }\n\n    // For select fields, ensure we return the right type\n    if (config.type === 'select') {\n      const selectConfig = config as SelectFieldConfig;\n      if (currentValue === undefined || currentValue === null) {\n        return selectConfig.multi ? [] : '';\n      }\n    }\n\n    return currentValue;\n  }\n\n  private renderArrayField(\n    itemIndex: number,\n    fieldName: string,\n    config: FieldConfig\n  ): TemplateResult {\n    const computedValue = this.computeFieldValue(itemIndex, fieldName, config);\n\n    // Use FieldRenderer for consistent field rendering\n    return FieldRenderer.renderField(fieldName, config, computedValue, {\n      showLabel: false, // ArrayEditor doesn't show labels for individual fields\n      flavor: 'small', // ArrayEditor uses small flavor\n      extraClasses: 'form-control',\n      onChange: (e: Event) => {\n        let value: any;\n        const target = e.target as any;\n\n        // Handle different field types and their change events\n        if (config.type === 'select') {\n          // For temba-select, extract the correct value\n          if (target.tagName === 'TEMBA-SELECT') {\n            if (target.multi || target.emails || target.tags) {\n              value = target.values || [];\n            } else {\n              // Single select: extract value from first selected option\n              const values = target.values || [];\n              value =\n                values.length > 0 && values[0]\n                  ? values[0].value !== undefined\n                    ? values[0].value\n                    : values[0]\n                  : '';\n            }\n          } else {\n            value = target.value;\n          }\n        } else {\n          // For other field types, use the target value directly\n          value = target.value;\n        }\n\n        this.handleFieldChange(itemIndex, fieldName, value);\n      }\n    });\n  }\n\n  renderItem(item: ListItem, index: number): TemplateResult {\n    const canRemove = this.canRemoveItem(index);\n\n    return html`\n      <div class=\"array-item\">\n        <div class=\"item-fields\">\n          ${Object.entries(this.itemConfig).map(\n            ([fieldName, config]) => html`\n              <div class=\"field\">\n                ${this.renderArrayField(index, fieldName, config)}\n              </div>\n            `\n          )}\n          ${canRemove\n            ? html`\n                <button\n                  @click=${() => this.removeItem(index)}\n                  class=\"remove-btn\"\n                >\n                  <temba-icon name=\"x\"></temba-icon>\n                </button>\n              `\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n\n  protected getContainerClass(): string {\n    return 'array-editor';\n  }\n\n  static get styles() {\n    return css`\n      ${super.styles}\n\n      .array-editor {\n      }\n\n      .array-item {\n      }\n\n      .item-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n      }\n\n      .item-title {\n        font-weight: 600;\n        color: #333;\n      }\n\n      .item-fields {\n        display: flex;\n        gap: 12px;\n        align-items: center;\n      }\n\n      .field {\n        flex: 1;\n      }\n\n      .add-btn,\n      .remove-btn {\n        padding: 8px;\n        border: 1px solid #ccc;\n        border-radius: 4px;\n        background: white;\n        cursor: pointer;\n        font-size: 14px;\n      }\n\n      .add-btn:hover,\n      .remove-btn:hover {\n        background: #f8f8f8;\n      }\n\n      .remove-btn {\n        background: #fefefe;\n        color: #999;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ArrayEditor.js","sourceRoot":"","sources":["../../../src/form/ArrayEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { FieldConfig } from '../flow/types';\nimport { BaseListEditor, ListItem } from './BaseListEditor';\nimport { FieldRenderer } from './FieldRenderer';\n\n@customElement('temba-array-editor')\nexport class TembaArrayEditor extends BaseListEditor<ListItem> {\n  @property({ type: Object })\n  itemConfig: Record<string, FieldConfig> = {};\n\n  @property({ type: String })\n  itemLabel = 'Item';\n\n  @property({ type: Function })\n  onItemChange?: (\n    itemIndex: number,\n    field: string,\n    value: any,\n    allItems: any[]\n  ) => any[];\n\n  @property({ type: Function })\n  isEmptyItemFn?: (item: any) => boolean;\n\n  @property({ type: Boolean })\n  maintainEmptyItem = true; // Enable by default for better UX\n\n  constructor() {\n    super();\n    this._items = [];\n  }\n\n  // External API\n  @property({ type: Array })\n  get value(): any[] {\n    return [...this._items];\n  }\n\n  set value(newValue: any[]) {\n    this._items = newValue || [];\n    this.requestUpdate();\n  }\n\n  // Implement abstract methods\n  isEmptyItem(item: ListItem): boolean {\n    // Use configurable function if provided\n    if (this.isEmptyItemFn) {\n      return this.isEmptyItemFn(item);\n    }\n\n    // Default behavior: check if all values are empty\n    const values = Object.values(item);\n    if (values.length === 0) {\n      return true;\n    }\n\n    return values.every(\n      (value) => value === undefined || value === null || value === ''\n    );\n  }\n\n  // Override cleanItems to be more permissive for form data\n  protected cleanItems(items: ListItem[]): any {\n    // For runtime attachments, keep items that have at least one non-empty field\n    return items.filter((item) => {\n      const values = Object.values(item);\n      return (\n        values.length > 0 &&\n        values.some(\n          (value) => value !== undefined && value !== null && value !== ''\n        )\n      );\n    });\n  }\n\n  createEmptyItem(): ListItem {\n    return {};\n  }\n\n  protected handleFieldChange(\n    itemIndex: number,\n    fieldName: string,\n    newValue: any\n  ) {\n    let updatedItems: any[];\n\n    if (this.onItemChange) {\n      updatedItems = this.onItemChange(\n        itemIndex,\n        fieldName,\n        newValue,\n        this._items\n      );\n    } else {\n      updatedItems = [...this._items];\n      updatedItems[itemIndex] = {\n        ...updatedItems[itemIndex],\n        [fieldName]: newValue\n      };\n    }\n\n    this.updateValue(updatedItems);\n  }\n\n  private computeFieldValue(\n    itemIndex: number,\n    fieldName: string,\n    config: FieldConfig\n  ): any {\n    const item = this._items[itemIndex] || {};\n    const currentValue = item[fieldName];\n\n    if (config.computeValue) {\n      return config.computeValue(item, currentValue);\n    }\n\n    // For select fields, ensure we return the right type\n    /*if (config.type === 'select') {\n      console.log('computeFieldValue select', currentValue, config);\n      const selectConfig = config as SelectFieldConfig;\n      if (currentValue === undefined || currentValue === null) {\n        return selectConfig.multi ? [] : '';\n      }\n    }*/\n\n    return currentValue;\n  }\n\n  private renderArrayField(\n    itemIndex: number,\n    fieldName: string,\n    config: FieldConfig\n  ): TemplateResult {\n    const computedValue = this.computeFieldValue(itemIndex, fieldName, config);\n\n    // Use FieldRenderer for consistent field rendering\n    return FieldRenderer.renderField(fieldName, config, computedValue, {\n      showLabel: false, // ArrayEditor doesn't show labels for individual fields\n      flavor: 'small', // ArrayEditor uses small flavor\n      extraClasses: 'form-control',\n      onChange: (e: Event) => {\n        let value: any;\n        const target = e.target as any;\n\n        // Handle different field types and their change events\n        if (config.type === 'select') {\n          // Use consistent temba-select value normalization\n          value = target.values;\n        } else {\n          // For other field types, use the target value directly\n          value = target.value;\n        }\n\n        this.handleFieldChange(itemIndex, fieldName, value);\n      }\n    });\n  }\n\n  renderItem(item: ListItem, index: number): TemplateResult {\n    const canRemove = this.canRemoveItem(index);\n\n    return html`\n      <div class=\"array-item\">\n        <div class=\"item-fields\">\n          ${Object.entries(this.itemConfig).map(\n            ([fieldName, config]) => html`\n              <div class=\"field\">\n                ${this.renderArrayField(index, fieldName, config)}\n              </div>\n            `\n          )}\n          ${canRemove\n            ? html`\n                <button\n                  @click=${() => this.removeItem(index)}\n                  class=\"remove-btn\"\n                >\n                  <temba-icon name=\"x\"></temba-icon>\n                </button>\n              `\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n\n  protected getContainerClass(): string {\n    return 'array-editor';\n  }\n\n  static get styles() {\n    return css`\n      ${super.styles}\n\n      .array-editor {\n      }\n\n      .array-item {\n      }\n\n      .item-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n      }\n\n      .item-title {\n        font-weight: 600;\n        color: #333;\n      }\n\n      .item-fields {\n        display: flex;\n        gap: 12px;\n        align-items: center;\n      }\n\n      .field {\n        flex: 1;\n      }\n\n      .add-btn,\n      .remove-btn {\n        padding: 8px;\n        border: 1px solid #ccc;\n        border-radius: 4px;\n        background: white;\n        cursor: pointer;\n        font-size: 14px;\n      }\n\n      .add-btn:hover,\n      .remove-btn:hover {\n        background: #f8f8f8;\n      }\n\n      .remove-btn {\n        background: #fefefe;\n        color: #999;\n      }\n    `;\n  }\n}\n"]}

package/out-tsc/src/form/FieldRenderer.js

@@ -110,75 +110,17 @@ export class FieldRenderer {
     ></temba-textinput>`;
     }
     static renderSelect(fieldName, config, value, context) {
-        var _a, _b;
         const { errors = [], onChange, showLabel = true, flavor, extraClasses, style } = context;
-        // Ensure proper value handling for multi vs single select
-        const normalizedValue = (() => {
-            if (config.multi) {
-                // Multi-select: ensure we have an array and convert strings to option objects
-                const valueArray = Array.isArray(value) ? value : value ? [value] : [];
-                return valueArray.map((val) => {
-                    if (typeof val === 'string') {
-                        // Convert string values to option objects
-                        return { name: val, value: val };
-                    }
-                    return val;
-                });
-            }
-            else {
-                // Single select: use the value as-is
-                return value || '';
-            }
-        })();
-        if (typeof normalizedValue === 'string') {
-            return html `<temba-select
-        name="${fieldName}"
-        ?required="${config.required}"
-        .errors="${errors}"
-        value="${config.multi ? '' : normalizedValue}"
-        .values="${config.multi ? normalizedValue : undefined}"
-        ?multi="${config.multi}"
-        ?searchable="${config.searchable}"
-        ?tags="${config.tags}"
-        ?emails="${config.emails}"
-        ?clearable="${config.clearable || false}"
-        label="${showLabel ? config.label : ''}"
-        placeholder="${config.placeholder || ''}"
-        maxItems="${config.maxItems || 0}"
-        valueKey="${config.valueKey || 'value'}"
-        nameKey="${config.nameKey || 'name'}"
-        endpoint="${config.endpoint || ''}"
-        .helpText="${config.helpText || ''}"
-        flavor="${flavor || config.flavor || 'small'}"
-        class="${extraClasses}"
-        style="${style}"
-        .getName=${config.getName}
-        .createArbitraryOption=${config.createArbitraryOption}
-        ?allowCreate="${config.allowCreate || false}"
-        @change="${onChange || (() => { })}"
-      >
-        ${(_a = config.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>`;
-        }
+        // Get options - use dynamic options if available, otherwise use static options
+        const optionsToRender = config.getDynamicOptions
+            ? config.getDynamicOptions()
+            : config.options;
         return html `<temba-select
       name="${fieldName}"
       label="${showLabel ? config.label : ''}"
       ?required="${config.required}"
       .errors="${errors}"
-      .values="${normalizedValue}"
+      .values=${value}
       ?multi="${config.multi}"
       ?searchable="${config.searchable}"
       ?tags="${config.tags}"
@@ -198,7 +140,7 @@ export class FieldRenderer {
       ?allowCreate="${config.allowCreate || false}"
       @change="${onChange || (() => { })}"
     >
-      ${(_b = config.options) === null || _b === void 0 ? void 0 : _b.map((option) => {
+      ${optionsToRender === null || optionsToRender === void 0 ? void 0 : optionsToRender.map((option) => {
             if (typeof option === 'string') {
                 return html `<temba-option
             name="${option}"