@nyaruka/temba-components 0.129.7 → 0.129.8

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

@@ -28,17 +28,21 @@ export const send_msg = {
     },
     form: {
         text: {
-            type: 'textarea',
-            label: 'Message Text',
-            helpText: 'Enter the message to send. You can use expressions like @contact.name',
+            type: 'message-editor',
+            label: 'Message',
+            helpText: 'Enter the message to send with optional attachments. You can use expressions like @contact.name',
             required: true,
             evaluated: true,
-            minHeight: 175
+            placeholder: 'Type your message here...',
+            maxAttachments: 10,
+            accept: '',
+            endpoint: '/api/v2/media.json',
+            counter: 'temba-charcount',
+            gsm: true,
+            autogrow: true
         },
         quick_replies: {
             type: 'select',
-            label: 'Quick Replies',
-            helpText: 'Add quick reply options for this message',
             options: [],
             multi: true,
             tags: true,
@@ -46,6 +50,123 @@ export const send_msg = {
             placeholder: 'Add quick replies...',
             maxItems: 10,
             evaluated: true
+        },
+        runtime_attachments: {
+            type: 'array',
+            helpText: 'Add dynamic attachments using expressions',
+            itemLabel: 'Attachment',
+            maxItems: 10,
+            isEmptyItem: (item) => {
+                return !item.expression || item.expression.trim() === '';
+            },
+            itemConfig: {
+                type: {
+                    type: 'select',
+                    options: [
+                        { value: 'image', label: 'Image' },
+                        { value: 'audio', label: 'Audio' },
+                        { value: 'video', label: 'Video' },
+                        { value: 'document', label: 'Document' }
+                    ],
+                    required: true,
+                    searchable: false
+                },
+                expression: {
+                    type: 'text',
+                    placeholder: 'Expression (e.g. @contact.photo)',
+                    required: true,
+                    evaluated: true
+                }
+            }
+        }
+    },
+    layout: [
+        'text',
+        {
+            type: 'group',
+            label: 'Quick Replies',
+            items: ['quick_replies'],
+            collapsible: true,
+            collapsed: (formData) => {
+                // Collapse only if there are no quick replies
+                return !formData.quick_replies || formData.quick_replies.length === 0;
+            },
+            getGroupValueCount: (formData) => {
+                var _a;
+                return ((_a = formData.quick_replies) === null || _a === void 0 ? void 0 : _a.length) || 0;
+            }
+        },
+        {
+            type: 'group',
+            label: 'Runtime Attachments',
+            items: ['runtime_attachments'],
+            collapsible: true,
+            collapsed: true,
+            helpText: 'Add dynamic attachments that are evaluated at runtime',
+            getGroupValueCount: (formData) => {
+                var _a;
+                return (((_a = formData.runtime_attachments) === null || _a === void 0 ? void 0 : _a.filter((item) => item && item.expression && item.expression.trim() !== '').length) || 0);
+            }
+        }
+    ],
+    toFormData: (action) => {
+        // Extract runtime attachments from the text field attachments
+        const runtimeAttachments = [];
+        const staticAttachments = [];
+        if (action.attachments && Array.isArray(action.attachments)) {
+            action.attachments.forEach((attachment) => {
+                if (typeof attachment === 'string' && attachment.includes(':')) {
+                    const colonIndex = attachment.indexOf(':');
+                    const contentType = attachment.substring(0, colonIndex);
+                    const value = attachment.substring(colonIndex + 1);
+                    if (!contentType.includes('/')) {
+                        // This is a runtime attachment
+                        runtimeAttachments.push({
+                            type: contentType,
+                            expression: value
+                        });
+                    }
+                    else {
+                        // This is a static attachment
+                        staticAttachments.push(attachment);
+                    }
+                }
+            });
+        }
+        return {
+            uuid: action.uuid,
+            text: action.text || '',
+            attachments: staticAttachments,
+            runtime_attachments: runtimeAttachments,
+            quick_replies: (action.quick_replies || []).map((reply) => ({
+                name: reply,
+                value: reply
+            }))
+        };
+    },
+    fromFormData: (data) => {
+        const result = {
+            uuid: data.uuid,
+            type: 'send_msg',
+            text: data.text || '',
+            attachments: [],
+            quick_replies: (data.quick_replies || []).map((reply) => typeof reply === 'string' ? reply : reply.value || reply.name || reply)
+        };
+        // Combine static attachments from text field with runtime attachments
+        const staticAttachments = data.attachments || [];
+        const runtimeAttachments = (data.runtime_attachments || [])
+            .filter((item) => item && item.type && item.expression) // Filter out invalid items
+            .map((item) => `${item.type}:${item.expression}`);
+        result.attachments = [...staticAttachments, ...runtimeAttachments];
+        // Remove quick_replies if empty to match original format
+        if (result.quick_replies.length === 0) {
+            delete result.quick_replies;
+        }
+        return result;
+    },
+    sanitize: (formData) => {
+        if (formData.text && typeof formData.text === 'string') {
+            formData.text = formData.text.trim();
         }
     },
     validate: (action) => {
@@ -53,6 +174,26 @@ export const send_msg = {
         if (!action.text || action.text.trim() === '') {
             errors.text = 'Message text is required';
         }
+        const attachments = action.attachments || [];
+        if (attachments.length > 10) {
+            const staticAttachments = attachments.filter((attachment) => typeof attachment === 'string' &&
+                attachment.substring(0, attachment.indexOf(':')).includes('/'));
+            const runtimeAttachments = attachments.filter((attachment) => typeof attachment === 'string' &&
+                !attachment.substring(0, attachment.indexOf(':')).includes('/'));
+            if (runtimeAttachments.length > 0) {
+                errors.runtime_attachments =
+                    'Each message can only have up to 10 attachments';
+            }
+            if (staticAttachments.length > 0) {
+                const message = 'Each message can only have up to 10 total attachments';
+                if (errors.text) {
+                    errors.text += ` ${message}`;
+                }
+                else {
+                    errors.text = message;
+                }
+            }
+        }
         return {
             valid: Object.keys(errors).length === 0,
             errors

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

@@ -1 +1 @@
-{"version":3,"file":"send_msg.js","sourceRoot":"","sources":["../../../../src/flow/actions/send_msg.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAChE,OAAO,EAAgB,MAAM,EAAoB,MAAM,UAAU,CAAC;AAGlE,MAAM,CAAC,MAAM,QAAQ,GAAiB;IACpC,IAAI,EAAE,cAAc;IACpB,KAAK,EAAE,MAAM,CAAC,IAAI;IAClB,MAAM,EAAE,CAAC,KAAW,EAAE,MAAe,EAAE,EAAE;;QACvC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QAChD,OAAO,IAAI,CAAA;QACP,UAAU,CAAC,IAAI,CAAC;QAChB,CAAA,MAAA,MAAM,CAAC,aAAa,0CAAE,MAAM,IAAG,CAAC;YAChC,CAAC,CAAC,IAAI,CAAA;cACA,MAAM,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBACnC,OAAO,IAAI,CAAA,4BAA4B,KAAK,QAAQ,CAAC;YACvD,CAAC,CAAC;cACA,MAAM,CAAC,QAAQ;gBACf,CAAC,CAAC,IAAI,CAAA;;;;mDAI+B,MAAM,CAAC,QAAQ,CAAC,IAAI;uBAChD;gBACT,CAAC,CAAC,IAAI;iBACH;YACT,CAAC,CAAC,IAAI;KACT,CAAC;IACJ,CAAC;IACD,IAAI,EAAE;QACJ,IAAI,EAAE;YACJ,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,cAAc;YACrB,QAAQ,EACN,uEAAuE;YACzE,QAAQ,EAAE,IAAI;YACd,SAAS,EAAE,IAAI;YACf,SAAS,EAAE,GAAG;SACf;QACD,aAAa,EAAE;YACb,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,eAAe;YACtB,QAAQ,EAAE,0CAA0C;YACpD,OAAO,EAAE,EAAE;YACX,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,IAAI;YACV,UAAU,EAAE,IAAI;YAChB,WAAW,EAAE,sBAAsB;YACnC,QAAQ,EAAE,EAAE;YACZ,SAAS,EAAE,IAAI;SAChB;KACF;IACD,QAAQ,EAAE,CAAC,MAAe,EAAoB,EAAE;QAC9C,MAAM,MAAM,GAA8B,EAAE,CAAC;QAE7C,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;YAC9C,MAAM,CAAC,IAAI,GAAG,0BAA0B,CAAC;QAC3C,CAAC;QAED,OAAO;YACL,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,KAAK,CAAC;YACvC,MAAM;SACP,CAAC;IACJ,CAAC;CACF,CAAC","sourcesContent":["import { html } from 'lit-html';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport { ActionConfig, COLORS, ValidationResult } from '../types';\nimport { Node, SendMsg } from '../../store/flow-definition';\n\nexport const send_msg: ActionConfig = {\n  name: 'Send Message',\n  color: COLORS.send,\n  render: (_node: Node, action: SendMsg) => {\n    const text = action.text.replace(/\\n/g, '<br>');\n    return html`\n      ${unsafeHTML(text)}\n      ${action.quick_replies?.length > 0\n        ? html`<div class=\"quick-replies\">\n            ${action.quick_replies.map((reply) => {\n              return html`<div class=\"quick-reply\">${reply}</div>`;\n            })}\n            ${action.template\n              ? html`<div\n                  style=\"border: 1px solid var(--color-widget-border);padding: 0.5em;margin-top: 1em;border-radius: var(--curvature); display:flex;background: rgba(0,0,0,.03);\"\n                >\n                  <temba-icon name=\"channel_wac\"></temba-icon>\n                  <div style=\"margin-left:0.5em\">${action.template.name}</div>\n                </div>`\n              : null}\n          </div>`\n        : null}\n    `;\n  },\n  form: {\n    text: {\n      type: 'textarea',\n      label: 'Message Text',\n      helpText:\n        'Enter the message to send. You can use expressions like @contact.name',\n      required: true,\n      evaluated: true,\n      minHeight: 175\n    },\n    quick_replies: {\n      type: 'select',\n      label: 'Quick Replies',\n      helpText: 'Add quick reply options for this message',\n      options: [],\n      multi: true,\n      tags: true,\n      searchable: true,\n      placeholder: 'Add quick replies...',\n      maxItems: 10,\n      evaluated: true\n    }\n  },\n  validate: (action: SendMsg): ValidationResult => {\n    const errors: { [key: string]: string } = {};\n\n    if (!action.text || action.text.trim() === '') {\n      errors.text = 'Message text is required';\n    }\n\n    return {\n      valid: Object.keys(errors).length === 0,\n      errors\n    };\n  }\n};\n"]}
+{"version":3,"file":"send_msg.js","sourceRoot":"","sources":["../../../../src/flow/actions/send_msg.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit-html';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport { ActionConfig, COLORS, ValidationResult } from '../types';\nimport { Node, SendMsg } from '../../store/flow-definition';\n\nexport const send_msg: ActionConfig = {\n  name: 'Send Message',\n  color: COLORS.send,\n  render: (_node: Node, action: SendMsg) => {\n    const text = action.text.replace(/\\n/g, '<br>');\n    return html`\n      ${unsafeHTML(text)}\n      ${action.quick_replies?.length > 0\n        ? html`<div class=\"quick-replies\">\n            ${action.quick_replies.map((reply) => {\n              return html`<div class=\"quick-reply\">${reply}</div>`;\n            })}\n            ${action.template\n              ? html`<div\n                  style=\"border: 1px solid var(--color-widget-border);padding: 0.5em;margin-top: 1em;border-radius: var(--curvature); display:flex;background: rgba(0,0,0,.03);\"\n                >\n                  <temba-icon name=\"channel_wac\"></temba-icon>\n                  <div style=\"margin-left:0.5em\">${action.template.name}</div>\n                </div>`\n              : null}\n          </div>`\n        : null}\n    `;\n  },\n  form: {\n    text: {\n      type: 'message-editor',\n      label: 'Message',\n      helpText:\n        'Enter the message to send with optional attachments. You can use expressions like @contact.name',\n      required: true,\n      evaluated: true,\n      placeholder: 'Type your message here...',\n      maxAttachments: 10,\n      accept: '',\n      endpoint: '/api/v2/media.json',\n      counter: 'temba-charcount',\n      gsm: true,\n      autogrow: true\n    },\n    quick_replies: {\n      type: 'select',\n      options: [],\n      multi: true,\n      tags: true,\n      searchable: true,\n      placeholder: 'Add quick replies...',\n      maxItems: 10,\n      evaluated: true\n    },\n    runtime_attachments: {\n      type: 'array',\n      helpText: 'Add dynamic attachments using expressions',\n      itemLabel: 'Attachment',\n      maxItems: 10,\n      isEmptyItem: (item: any) => {\n        return !item.expression || item.expression.trim() === '';\n      },\n      itemConfig: {\n        type: {\n          type: 'select',\n          options: [\n            { value: 'image', label: 'Image' },\n            { value: 'audio', label: 'Audio' },\n            { value: 'video', label: 'Video' },\n            { value: 'document', label: 'Document' }\n          ],\n          required: true,\n          searchable: false\n        },\n        expression: {\n          type: 'text',\n          placeholder: 'Expression (e.g. @contact.photo)',\n          required: true,\n          evaluated: true\n        }\n      }\n    }\n  },\n  layout: [\n    'text',\n    {\n      type: 'group',\n      label: 'Quick Replies',\n      items: ['quick_replies'],\n      collapsible: true,\n      collapsed: (formData: any) => {\n        // Collapse only if there are no quick replies\n        return !formData.quick_replies || formData.quick_replies.length === 0;\n      },\n      getGroupValueCount: (formData: any) => {\n        return formData.quick_replies?.length || 0;\n      }\n    },\n    {\n      type: 'group',\n      label: 'Runtime Attachments',\n      items: ['runtime_attachments'],\n      collapsible: true,\n      collapsed: true,\n      helpText: 'Add dynamic attachments that are evaluated at runtime',\n      getGroupValueCount: (formData: any) => {\n        return (\n          formData.runtime_attachments?.filter(\n            (item: any) =>\n              item && item.expression && item.expression.trim() !== ''\n          ).length || 0\n        );\n      }\n    }\n  ],\n  toFormData: (action: SendMsg) => {\n    // Extract runtime attachments from the text field attachments\n    const runtimeAttachments: { type: string; expression: string }[] = [];\n    const staticAttachments: string[] = [];\n\n    if (action.attachments && Array.isArray(action.attachments)) {\n      action.attachments.forEach((attachment) => {\n        if (typeof attachment === 'string' && attachment.includes(':')) {\n          const colonIndex = attachment.indexOf(':');\n          const contentType = attachment.substring(0, colonIndex);\n          const value = attachment.substring(colonIndex + 1);\n\n          if (!contentType.includes('/')) {\n            // This is a runtime attachment\n            runtimeAttachments.push({\n              type: contentType,\n              expression: value\n            });\n          } else {\n            // This is a static attachment\n            staticAttachments.push(attachment);\n          }\n        }\n      });\n    }\n\n    return {\n      uuid: action.uuid,\n      text: action.text || '',\n      attachments: staticAttachments,\n      runtime_attachments: runtimeAttachments,\n      quick_replies: (action.quick_replies || []).map((reply) => ({\n        name: reply,\n        value: reply\n      }))\n    };\n  },\n  fromFormData: (data: Record<string, any>) => {\n    const result = {\n      uuid: data.uuid,\n      type: 'send_msg',\n      text: data.text || '',\n      attachments: [],\n      quick_replies: (data.quick_replies || []).map((reply: any) =>\n        typeof reply === 'string' ? reply : reply.value || reply.name || reply\n      )\n    };\n\n    // Combine static attachments from text field with runtime attachments\n    const staticAttachments = data.attachments || [];\n    const runtimeAttachments = (data.runtime_attachments || [])\n      .filter((item: any) => item && item.type && item.expression) // Filter out invalid items\n      .map(\n        (item: { type: string; expression: string }) =>\n          `${item.type}:${item.expression}`\n      );\n\n    result.attachments = [...staticAttachments, ...runtimeAttachments];\n\n    // Remove quick_replies if empty to match original format\n    if (result.quick_replies.length === 0) {\n      delete (result as any).quick_replies;\n    }\n\n    return result as SendMsg;\n  },\n  sanitize: (formData: any): void => {\n    if (formData.text && typeof formData.text === 'string') {\n      formData.text = formData.text.trim();\n    }\n  },\n  validate: (action: SendMsg): ValidationResult => {\n    const errors: { [key: string]: string } = {};\n\n    if (!action.text || action.text.trim() === '') {\n      errors.text = 'Message text is required';\n    }\n\n    const attachments = action.attachments || [];\n    if (attachments.length > 10) {\n      const staticAttachments = attachments.filter(\n        (attachment) =>\n          typeof attachment === 'string' &&\n          attachment.substring(0, attachment.indexOf(':')).includes('/')\n      );\n\n      const runtimeAttachments = attachments.filter(\n        (attachment) =>\n          typeof attachment === 'string' &&\n          !attachment.substring(0, attachment.indexOf(':')).includes('/')\n      );\n\n      if (runtimeAttachments.length > 0) {\n        errors.runtime_attachments =\n          'Each message can only have up to 10 attachments';\n      }\n\n      if (staticAttachments.length > 0) {\n        const message = 'Each message can only have up to 10 total attachments';\n        if (errors.text) {\n          errors.text += ` ${message}`;\n        } else {\n          errors.text = message;\n        }\n      }\n    }\n\n    return {\n      valid: Object.keys(errors).length === 0,\n      errors\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;AAEF,iCAAiC;AACjC,MAAM,UAAU,mBAAmB,CAAC,KAAU;IAC5C,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;QAC/B,OAAO,gBAAgB,CAAC;IAC1B,CAAC;IACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,iBAAiB,CAAC;IAC3B,CAAC;IACD,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACzB,OAAO,cAAc,CAAC,CAAC,+BAA+B;IACxD,CAAC;IACD,sDAAsD;IACtD,OAAO,iBAAiB,CAAC;AAC3B,CAAC;AAED,mEAAmE;AACnE,MAAM,UAAU,wBAAwB,CAAC,KAAU;IACjD,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;QAC/B,OAAO;YACL,MAAM,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE;SACnC,CAAC;IACJ,CAAC;IACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO;YACL,MAAM,EAAE;gBACN,IAAI,EAAE,iBAAiB;gBACvB,UAAU,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;aAC/B;SACF,CAAC;IACJ,CAAC;IACD,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACzB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,QAAQ,EAAE,CAAC;YACrD,OAAO;gBACL,MAAM,EAAE;oBACN,IAAI,EAAE,cAAc;oBACpB,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;iBACxC;aACF,CAAC;QACJ,CAAC;QACD,OAAO;YACL,MAAM,EAAE;gBACN,IAAI,EAAE,cAAc;gBACpB,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;aAC5B;SACF,CAAC;IACJ,CAAC;IACD,OAAO;QACL,MAAM,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE;KACpC,CAAC;AACJ,CAAC;AAED,qDAAqD;AACrD,MAAM,UAAU,iBAAiB,CAC/B,MAAoB;IAEpB,OAAO,MAAM,CAAC,IAAI,KAAK,iBAAiB,CAAC;AAC3C,CAAC;AAED,MAAM,UAAU,kBAAkB,CAChC,MAAoB;IAEpB,OAAO,MAAM,CAAC,IAAI,KAAK,kBAAkB,CAAC;AAC5C,CAAC;AAED,MAAM,UAAU,cAAc,CAC5B,MAAoB;IAEpB,OAAO,MAAM,CAAC,IAAI,KAAK,cAAc,CAAC;AACxC,CAAC;AAED,MAAM,UAAU,gBAAgB,CAC9B,MAAoB;IAEpB,OAAO,MAAM,CAAC,IAAI,KAAK,gBAAgB,CAAC;AAC1C,CAAC;AAED,MAAM,UAAU,cAAc,CAC5B,MAAoB;IAEpB,OAAO,MAAM,CAAC,IAAI,KAAK,cAAc,CAAC;AACxC,CAAC","sourcesContent":["import { TemplateResult } from 'lit-html';\nimport { Action } 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\n// Widget configuration using discriminated union for type safety\nexport type WidgetConfig =\n  | { type: 'temba-textinput'; attributes?: TextInputAttributes }\n  | { type: 'temba-completion'; attributes?: CompletionAttributes }\n  | { type: 'temba-select'; attributes?: SelectAttributes }\n  | { type: 'temba-checkbox'; attributes?: CheckboxAttributes }\n  | { type: 'temba-slider'; attributes?: SliderAttributes }\n  | { type: string; attributes?: { [key: string]: any } }; // Generic fallback\n\n// Property configuration with the clean structure you want\nexport interface PropertyConfig {\n  // Form field metadata\n  label?: string;\n  helpText?: string;\n  required?: boolean;\n  maxLength?: number;\n  minLength?: number;\n  pattern?: string;\n\n  // Widget configuration\n  widget: WidgetConfig;\n\n  // Conditional behavior based on other field values\n  conditions?: {\n    // When to show this field\n    visible?: (formData: any) => boolean;\n\n    // When this field is disabled\n    disabled?: (formData: any) => boolean;\n  };\n}\n\nexport interface NodeConfig {\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: 'has_number_between' | 'has_string' | 'has_value' | 'has_not_value';\n      arguments: string[];\n      categoryName: string;\n    }[];\n  };\n  properties?: { [key: string]: PropertyConfig };\n  toFormData?: (node: any) => any;\n  fromFormData?: (formData: any, originalNode: any) => any;\n}\n\n// New field configuration system for generic form generation\nexport interface BaseFieldConfig {\n  label?: string;\n  required?: boolean;\n  evaluated?: boolean; // if this field supports expression evaluation\n  dependsOn?: string[]; // fields this field depends on\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; // CSS max-width value (e.g., '200px', '50%', '10rem')\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  searchable?: boolean;\n  tags?: boolean;\n  placeholder?: string;\n  maxItems?: number;\n  valueKey?: string;\n  nameKey?: string;\n  endpoint?: string;\n  emails?: 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}\n\nexport interface CheckboxFieldConfig extends BaseFieldConfig {\n  type: 'checkbox';\n  size?: number;\n  animateChange?: string;\n}\n\nexport type FieldConfig =\n  | TextFieldConfig\n  | TextareaFieldConfig\n  | SelectFieldConfig\n  | KeyValueFieldConfig\n  | ArrayFieldConfig\n  | CheckboxFieldConfig;\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; // initial state if collapsible\n  helpText?: string;\n}\n\nexport type LayoutItem =\n  | FieldItemConfig\n  | RowLayoutConfig\n  | GroupLayoutConfig\n  | string; // string is shorthand for field\n\nexport interface ActionConfig {\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  // Action editor configuration (legacy)\n  // Form-level transformations\n  toFormData?: (action: Action) => any;\n  fromFormData?: (formData: any) => Action;\n\n  validate?: (action: Action) => ValidationResult;\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\n// Default property type mappings\nexport function getDefaultComponent(value: any): WidgetConfig['type'] {\n  if (typeof value === 'boolean') {\n    return 'temba-checkbox';\n  }\n  if (typeof value === 'number') {\n    return 'temba-textinput';\n  }\n  if (Array.isArray(value)) {\n    return 'temba-select'; // For arrays, use multi-select\n  }\n  // Default to text input for strings and unknown types\n  return 'temba-textinput';\n}\n\n// Get component properties for default mappings with proper typing\nexport function getDefaultComponentProps(value: any): PropertyConfig {\n  if (typeof value === 'boolean') {\n    return {\n      widget: { type: 'temba-checkbox' }\n    };\n  }\n  if (typeof value === 'number') {\n    return {\n      widget: {\n        type: 'temba-textinput',\n        attributes: { type: 'number' }\n      }\n    };\n  }\n  if (Array.isArray(value)) {\n    if (value.length > 0 && typeof value[0] === 'string') {\n      return {\n        widget: {\n          type: 'temba-select',\n          attributes: { multi: true, tags: true }\n        }\n      };\n    }\n    return {\n      widget: {\n        type: 'temba-select',\n        attributes: { multi: true }\n      }\n    };\n  }\n  return {\n    widget: { type: 'temba-textinput' }\n  };\n}\n\n// Type guard functions for working with WidgetConfig\nexport function isTextInputWidget(\n  config: WidgetConfig\n): config is { type: 'temba-textinput'; attributes?: TextInputAttributes } {\n  return config.type === 'temba-textinput';\n}\n\nexport function isCompletionWidget(\n  config: WidgetConfig\n): config is { type: 'temba-completion'; attributes?: CompletionAttributes } {\n  return config.type === 'temba-completion';\n}\n\nexport function isSelectWidget(\n  config: WidgetConfig\n): config is { type: 'temba-select'; attributes?: SelectAttributes } {\n  return config.type === 'temba-select';\n}\n\nexport function isCheckboxWidget(\n  config: WidgetConfig\n): config is { type: 'temba-checkbox'; attributes?: CheckboxAttributes } {\n  return config.type === 'temba-checkbox';\n}\n\nexport function isSliderWidget(\n  config: WidgetConfig\n): config is { type: 'slider'; attributes?: SliderAttributes } {\n  return config.type === 'temba-slider';\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/flow/types.ts"],"names":[],"mappings":"AAoRA,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;AAEF,iCAAiC;AACjC,MAAM,UAAU,mBAAmB,CAAC,KAAU;IAC5C,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;QAC/B,OAAO,gBAAgB,CAAC;IAC1B,CAAC;IACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,iBAAiB,CAAC;IAC3B,CAAC;IACD,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACzB,OAAO,cAAc,CAAC,CAAC,+BAA+B;IACxD,CAAC;IACD,sDAAsD;IACtD,OAAO,iBAAiB,CAAC;AAC3B,CAAC;AAED,mEAAmE;AACnE,MAAM,UAAU,wBAAwB,CAAC,KAAU;IACjD,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;QAC/B,OAAO;YACL,MAAM,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE;SACnC,CAAC;IACJ,CAAC;IACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO;YACL,MAAM,EAAE;gBACN,IAAI,EAAE,iBAAiB;gBACvB,UAAU,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;aAC/B;SACF,CAAC;IACJ,CAAC;IACD,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACzB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,QAAQ,EAAE,CAAC;YACrD,OAAO;gBACL,MAAM,EAAE;oBACN,IAAI,EAAE,cAAc;oBACpB,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;iBACxC;aACF,CAAC;QACJ,CAAC;QACD,OAAO;YACL,MAAM,EAAE;gBACN,IAAI,EAAE,cAAc;gBACpB,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;aAC5B;SACF,CAAC;IACJ,CAAC;IACD,OAAO;QACL,MAAM,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE;KACpC,CAAC;AACJ,CAAC;AAED,qDAAqD;AACrD,MAAM,UAAU,iBAAiB,CAC/B,MAAoB;IAEpB,OAAO,MAAM,CAAC,IAAI,KAAK,iBAAiB,CAAC;AAC3C,CAAC;AAED,MAAM,UAAU,kBAAkB,CAChC,MAAoB;IAEpB,OAAO,MAAM,CAAC,IAAI,KAAK,kBAAkB,CAAC;AAC5C,CAAC;AAED,MAAM,UAAU,cAAc,CAC5B,MAAoB;IAEpB,OAAO,MAAM,CAAC,IAAI,KAAK,cAAc,CAAC;AACxC,CAAC;AAED,MAAM,UAAU,gBAAgB,CAC9B,MAAoB;IAEpB,OAAO,MAAM,CAAC,IAAI,KAAK,gBAAgB,CAAC;AAC1C,CAAC;AAED,MAAM,UAAU,cAAc,CAC5B,MAAoB;IAEpB,OAAO,MAAM,CAAC,IAAI,KAAK,cAAc,CAAC;AACxC,CAAC","sourcesContent":["import { TemplateResult } from 'lit-html';\nimport { Action } 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\n// Widget configuration using discriminated union for type safety\nexport type WidgetConfig =\n  | { type: 'temba-textinput'; attributes?: TextInputAttributes }\n  | { type: 'temba-completion'; attributes?: CompletionAttributes }\n  | { type: 'temba-select'; attributes?: SelectAttributes }\n  | { type: 'temba-checkbox'; attributes?: CheckboxAttributes }\n  | { type: 'temba-slider'; attributes?: SliderAttributes }\n  | { type: string; attributes?: { [key: string]: any } }; // Generic fallback\n\n// Property configuration with the clean structure you want\nexport interface PropertyConfig {\n  // Form field metadata\n  label?: string;\n  helpText?: string;\n  required?: boolean;\n  maxLength?: number;\n  minLength?: number;\n  pattern?: string;\n\n  // Widget configuration\n  widget: WidgetConfig;\n\n  // Conditional behavior based on other field values\n  conditions?: {\n    // When to show this field\n    visible?: (formData: any) => boolean;\n\n    // When this field is disabled\n    disabled?: (formData: any) => boolean;\n  };\n}\n\nexport interface NodeConfig {\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: 'has_number_between' | 'has_string' | 'has_value' | 'has_not_value';\n      arguments: string[];\n      categoryName: string;\n    }[];\n  };\n  properties?: { [key: string]: PropertyConfig };\n  toFormData?: (node: any) => any;\n  fromFormData?: (formData: any, originalNode: any) => any;\n}\n\n// New field configuration system for generic form generation\nexport interface BaseFieldConfig {\n  label?: string;\n  required?: boolean;\n  evaluated?: boolean; // if this field supports expression evaluation\n  dependsOn?: string[]; // fields this field depends on\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; // CSS max-width value (e.g., '200px', '50%', '10rem')\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  flavor?: 'small' | 'large';\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 {\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  // Action editor configuration (legacy)\n  // Form-level transformations\n  sanitize?: (formData: any) => any;\n  toFormData?: (action: Action) => any;\n  fromFormData?: (formData: any) => Action;\n\n  validate?: (action: Action) => ValidationResult;\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\n// Default property type mappings\nexport function getDefaultComponent(value: any): WidgetConfig['type'] {\n  if (typeof value === 'boolean') {\n    return 'temba-checkbox';\n  }\n  if (typeof value === 'number') {\n    return 'temba-textinput';\n  }\n  if (Array.isArray(value)) {\n    return 'temba-select'; // For arrays, use multi-select\n  }\n  // Default to text input for strings and unknown types\n  return 'temba-textinput';\n}\n\n// Get component properties for default mappings with proper typing\nexport function getDefaultComponentProps(value: any): PropertyConfig {\n  if (typeof value === 'boolean') {\n    return {\n      widget: { type: 'temba-checkbox' }\n    };\n  }\n  if (typeof value === 'number') {\n    return {\n      widget: {\n        type: 'temba-textinput',\n        attributes: { type: 'number' }\n      }\n    };\n  }\n  if (Array.isArray(value)) {\n    if (value.length > 0 && typeof value[0] === 'string') {\n      return {\n        widget: {\n          type: 'temba-select',\n          attributes: { multi: true, tags: true }\n        }\n      };\n    }\n    return {\n      widget: {\n        type: 'temba-select',\n        attributes: { multi: true }\n      }\n    };\n  }\n  return {\n    widget: { type: 'temba-textinput' }\n  };\n}\n\n// Type guard functions for working with WidgetConfig\nexport function isTextInputWidget(\n  config: WidgetConfig\n): config is { type: 'temba-textinput'; attributes?: TextInputAttributes } {\n  return config.type === 'temba-textinput';\n}\n\nexport function isCompletionWidget(\n  config: WidgetConfig\n): config is { type: 'temba-completion'; attributes?: CompletionAttributes } {\n  return config.type === 'temba-completion';\n}\n\nexport function isSelectWidget(\n  config: WidgetConfig\n): config is { type: 'temba-select'; attributes?: SelectAttributes } {\n  return config.type === 'temba-select';\n}\n\nexport function isCheckboxWidget(\n  config: WidgetConfig\n): config is { type: 'temba-checkbox'; attributes?: CheckboxAttributes } {\n  return config.type === 'temba-checkbox';\n}\n\nexport function isSliderWidget(\n  config: WidgetConfig\n): config is { type: 'slider'; attributes?: SliderAttributes } {\n  return config.type === 'temba-slider';\n}\n"]}

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

@@ -7,6 +7,7 @@ let TembaArrayEditor = class TembaArrayEditor extends BaseListEditor {
         super();
         this.itemConfig = {};
         this.itemLabel = 'Item';
+        this.maintainEmptyItem = true; // Enable by default for better UX
         this._items = [];
     }
     // External API
@@ -19,7 +20,25 @@ let TembaArrayEditor = class TembaArrayEditor extends BaseListEditor {
     }
     // Implement abstract methods
     isEmptyItem(item) {
-        return Object.values(item).every((value) => value === undefined || value === null || value === '');
+        // Use configurable function if provided
+        if (this.isEmptyItemFn) {
+            return this.isEmptyItemFn(item);
+        }
+        // Default behavior: check if all values are empty
+        const values = Object.values(item);
+        if (values.length === 0) {
+            return true;
+        }
+        return values.every((value) => value === undefined || value === null || value === '');
+    }
+    // Override cleanItems to be more permissive for form data
+    cleanItems(items) {
+        // For runtime attachments, keep items that have at least one non-empty field
+        return items.filter((item) => {
+            const values = Object.values(item);
+            return (values.length > 0 &&
+                values.some((value) => value !== undefined && value !== null && value !== ''));
+        });
     }
     createEmptyItem() {
         return {};
@@ -44,9 +63,17 @@ let TembaArrayEditor = class TembaArrayEditor extends BaseListEditor {
         if (config.computeValue) {
             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 ? [] : '';
+            }
+        }
         return currentValue;
     }
     renderField(itemIndex, fieldName, config) {
+        var _a;
         const computedValue = this.computeFieldValue(itemIndex, fieldName, config);
         switch (config.type) {
             case 'text':
@@ -63,12 +90,64 @@ let TembaArrayEditor = class TembaArrayEditor extends BaseListEditor {
           .rows=${config.rows || 3}
           @change=${(e) => this.handleFieldChange(itemIndex, fieldName, e.target.value)}
         ></temba-textinput>`;
-            case 'select':
+            case 'select': {
+                const selectConfig = config;
+                const fieldValue = this.computeFieldValue(itemIndex, fieldName, config);
                 return html `<temba-select
-          .value=${computedValue || ''}
-          .options=${config.options}
-          @change=${(e) => this.handleFieldChange(itemIndex, fieldName, e.target.value)}
-        ></temba-select>`;
+          class="form-control"
+          ?clearable="${selectConfig.clearable || false}"
+          ?searchable="${selectConfig.searchable || false}"
+          ?tags="${selectConfig.tags || false}"
+          ?multi="${selectConfig.multi || false}"
+          ?emails="${selectConfig.emails || false}"
+          placeholder="${selectConfig.placeholder || ''}"
+          maxItems="${selectConfig.maxItems || 0}"
+          valueKey="${selectConfig.valueKey || 'value'}"
+          nameKey="${selectConfig.nameKey || 'name'}"
+          endpoint="${selectConfig.endpoint || ''}"
+          value="${fieldValue || ''}"
+          flavor="small"
+          @change="${(e) => {
+                    const target = e.target;
+                    let value;
+                    // 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;
+                    }
+                    this.handleFieldChange(itemIndex, fieldName, value);
+                }}"
+        >
+          ${(_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>`;
+            }
             default:
                 return html `<span>Unsupported field type: ${config.type}</span>`;
         }
@@ -77,27 +156,23 @@ let TembaArrayEditor = class TembaArrayEditor extends BaseListEditor {
         const canRemove = this.canRemoveItem(index);
         return html `
       <div class="array-item">
-        <div class="item-header">
-          <span class="item-title">${this.itemLabel} ${index + 1}</span>
+        <div class="item-fields">
+          ${Object.entries(this.itemConfig).map(([fieldName, config]) => html `
+              <div class="field">
+                ${this.renderField(index, fieldName, config)}
+              </div>
+            `)}
           ${canRemove
             ? html `
                 <button
                   @click=${() => this.removeItem(index)}
                   class="remove-btn"
                 >
-                  Remove
+                  <temba-icon name="x"></temba-icon>
                 </button>
               `
             : ''}
         </div>
-        <div class="item-fields">
-          ${Object.entries(this.itemConfig).map(([fieldName, config]) => html `
-              <div class="field">
-                <label>${config.label}${config.required ? ' *' : ''}</label>
-                ${this.renderField(index, fieldName, config)}
-              </div>
-            `)}
-        </div>
       </div>
     `;
     }
@@ -114,27 +189,15 @@ let TembaArrayEditor = class TembaArrayEditor extends BaseListEditor {
 };
 TembaArrayEditor.styles = css `
     .array-editor {
-      border: 1px solid #e0e0e0;
-      border-radius: 6px;
-      padding: 16px;
-      background: #fafafa;
     }
 
     .array-item {
-      border: 1px solid #d0d0d0;
-      border-radius: 4px;
-      padding: 16px;
-      margin-bottom: 12px;
-      background: white;
     }
 
     .item-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 12px;
-      padding-bottom: 8px;
-      border-bottom: 1px solid #eee;
     }
 
     .item-title {
@@ -143,8 +206,17 @@ TembaArrayEditor.styles = css `
     }
 
     .item-fields {
-      display: grid;
+      display: flex;
       gap: 12px;
+      align-items: center;
+    }
+
+    .field {
+      flex: 1;
+    }
+
+    .field:first-child {
+      flex: 0 0 140px; /* Fixed width for type dropdown */
     }
 
     .field label {
@@ -157,7 +229,7 @@ TembaArrayEditor.styles = css `
 
     .add-btn,
     .remove-btn {
-      padding: 8px 16px;
+      padding: 8px;
       border: 1px solid #ccc;
       border-radius: 4px;
       background: white;
@@ -171,13 +243,8 @@ TembaArrayEditor.styles = css `
     }
 
     .remove-btn {
-      background: #fff5f5;
-      border-color: #fecaca;
-      color: #dc2626;
-    }
-
-    .remove-btn:hover {
-      background: #fef2f2;
+      background: #fefefe;
+      color: #999;
     }
   `;
 __decorate([
@@ -189,6 +256,12 @@ __decorate([
 __decorate([
     property({ type: Function })
 ], TembaArrayEditor.prototype, "onItemChange", void 0);
+__decorate([
+    property({ type: Function })
+], TembaArrayEditor.prototype, "isEmptyItemFn", void 0);
+__decorate([
+    property({ type: Boolean })
+], TembaArrayEditor.prototype, "maintainEmptyItem", void 0);
 __decorate([
     property({ type: Array })
 ], TembaArrayEditor.prototype, "value", null);

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 } from '../flow/types';\nimport { BaseListEditor, ListItem } from './BaseListEditor';\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  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    return Object.values(item).every(\n      (value) => value === undefined || value === null || value === ''\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    return currentValue;\n  }\n\n  private renderField(\n    itemIndex: number,\n    fieldName: string,\n    config: FieldConfig\n  ): TemplateResult {\n    const computedValue = this.computeFieldValue(itemIndex, fieldName, config);\n\n    switch (config.type) {\n      case 'text':\n        return html`<temba-textinput\n          .value=${computedValue || ''}\n          .placeholder=${config.placeholder}\n          @change=${(e: any) =>\n            this.handleFieldChange(itemIndex, fieldName, e.target.value)}\n        ></temba-textinput>`;\n\n      case 'textarea':\n        return html`<temba-textinput\n          .value=${computedValue || ''}\n          .placeholder=${config.placeholder}\n          textarea\n          .rows=${config.rows || 3}\n          @change=${(e: any) =>\n            this.handleFieldChange(itemIndex, fieldName, e.target.value)}\n        ></temba-textinput>`;\n\n      case 'select':\n        return html`<temba-select\n          .value=${computedValue || ''}\n          .options=${config.options}\n          @change=${(e: any) =>\n            this.handleFieldChange(itemIndex, fieldName, e.target.value)}\n        ></temba-select>`;\n\n      default:\n        return html`<span>Unsupported field type: ${config.type}</span>`;\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-header\">\n          <span class=\"item-title\">${this.itemLabel} ${index + 1}</span>\n          ${canRemove\n            ? html`\n                <button\n                  @click=${() => this.removeItem(index)}\n                  class=\"remove-btn\"\n                >\n                  Remove\n                </button>\n              `\n            : ''}\n        </div>\n        <div class=\"item-fields\">\n          ${Object.entries(this.itemConfig).map(\n            ([fieldName, config]) => html`\n              <div class=\"field\">\n                <label>${config.label}${config.required ? ' *' : ''}</label>\n                ${this.renderField(index, fieldName, config)}\n              </div>\n            `\n          )}\n        </div>\n      </div>\n    `;\n  }\n\n  protected getContainerClass(): string {\n    return 'array-editor';\n  }\n\n  protected renderAddButton(): TemplateResult {\n    return html`\n      <button class=\"add-btn\" @click=${() => this.addItem()}>\n        Add ${this.itemLabel}\n      </button>\n    `;\n  }\n\n  static styles = css`\n    .array-editor {\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      padding: 16px;\n      background: #fafafa;\n    }\n\n    .array-item {\n      border: 1px solid #d0d0d0;\n      border-radius: 4px;\n      padding: 16px;\n      margin-bottom: 12px;\n      background: white;\n    }\n\n    .item-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 12px;\n      padding-bottom: 8px;\n      border-bottom: 1px solid #eee;\n    }\n\n    .item-title {\n      font-weight: 600;\n      color: #333;\n    }\n\n    .item-fields {\n      display: grid;\n      gap: 12px;\n    }\n\n    .field label {\n      display: block;\n      margin-bottom: 4px;\n      font-weight: 500;\n      color: #555;\n      font-size: 14px;\n    }\n\n    .add-btn,\n    .remove-btn {\n      padding: 8px 16px;\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: #fff5f5;\n      border-color: #fecaca;\n      color: #dc2626;\n    }\n\n    .remove-btn:hover {\n      background: #fef2f2;\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, SelectFieldConfig } from '../flow/types';\nimport { BaseListEditor, ListItem } from './BaseListEditor';\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 renderField(\n    itemIndex: number,\n    fieldName: string,\n    config: FieldConfig\n  ): TemplateResult {\n    const computedValue = this.computeFieldValue(itemIndex, fieldName, config);\n\n    switch (config.type) {\n      case 'text':\n        return html`<temba-textinput\n          .value=${computedValue || ''}\n          .placeholder=${config.placeholder}\n          @change=${(e: any) =>\n            this.handleFieldChange(itemIndex, fieldName, e.target.value)}\n        ></temba-textinput>`;\n\n      case 'textarea':\n        return html`<temba-textinput\n          .value=${computedValue || ''}\n          .placeholder=${config.placeholder}\n          textarea\n          .rows=${config.rows || 3}\n          @change=${(e: any) =>\n            this.handleFieldChange(itemIndex, fieldName, e.target.value)}\n        ></temba-textinput>`;\n\n      case 'select': {\n        const selectConfig = config as SelectFieldConfig;\n        const fieldValue = this.computeFieldValue(itemIndex, fieldName, config);\n\n        return html`<temba-select\n          class=\"form-control\"\n          ?clearable=\"${selectConfig.clearable || false}\"\n          ?searchable=\"${selectConfig.searchable || false}\"\n          ?tags=\"${selectConfig.tags || false}\"\n          ?multi=\"${selectConfig.multi || false}\"\n          ?emails=\"${selectConfig.emails || false}\"\n          placeholder=\"${selectConfig.placeholder || ''}\"\n          maxItems=\"${selectConfig.maxItems || 0}\"\n          valueKey=\"${selectConfig.valueKey || 'value'}\"\n          nameKey=\"${selectConfig.nameKey || 'name'}\"\n          endpoint=\"${selectConfig.endpoint || ''}\"\n          value=\"${fieldValue || ''}\"\n          flavor=\"small\"\n          @change=\"${(e: Event) => {\n            const target = e.target as any;\n            let value: any;\n\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\n            this.handleFieldChange(itemIndex, fieldName, value);\n          }}\"\n        >\n          ${selectConfig.options?.map((option: any) => {\n            if (typeof option === 'string') {\n              return html`<temba-option\n                name=\"${option}\"\n                value=\"${option}\"\n              ></temba-option>`;\n            } else {\n              return html`<temba-option\n                name=\"${option.label || option.name}\"\n                value=\"${option.value}\"\n              ></temba-option>`;\n            }\n          })}\n        </temba-select>`;\n      }\n\n      default:\n        return html`<span>Unsupported field type: ${config.type}</span>`;\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.renderField(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  protected renderAddButton(): TemplateResult {\n    return html`\n      <button class=\"add-btn\" @click=${() => this.addItem()}>\n        Add ${this.itemLabel}\n      </button>\n    `;\n  }\n\n  static styles = css`\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    .field:first-child {\n      flex: 0 0 140px; /* Fixed width for type dropdown */\n    }\n\n    .field label {\n      display: block;\n      margin-bottom: 4px;\n      font-weight: 500;\n      color: #555;\n      font-size: 14px;\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"]}

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

@@ -18,8 +18,11 @@ export class BaseListEditor extends LitElement {
     `;
     }
     shouldShowAddButton() {
-        return (!this.maintainEmptyItem &&
-            (!this.maxItems || this._items.length < this.maxItems));
+        // Never show add button when maintaining empty items (auto-add behavior)
+        if (this.maintainEmptyItem) {
+            return false;
+        }
+        return !this.maxItems || this._items.length < this.maxItems;
     }
     render() {
         const items = this.displayItems;
@@ -27,7 +30,7 @@ export class BaseListEditor extends LitElement {
       <div class=${this.getContainerClass()}>
         <div
           class="list-items"
-          style="gap: 8px; display: grid; grid-template-columns: 1fr;"
+          style="display: grid; grid-template-columns: 1fr; gap: 8px;"
         >
           ${items.map((item, index) => this.renderItem(item, index))}
         </div>
@@ -48,7 +51,8 @@ export class BaseListEditor extends LitElement {
         const items = [...this._items];
         if (this.maintainEmptyItem) {
             const hasEmptyItem = items.some((item) => this.isEmptyItem(item));
-            if (!hasEmptyItem) {
+            // Only add empty item if we haven't reached maxItems and don't already have an empty item
+            if (!hasEmptyItem && (!this.maxItems || items.length < this.maxItems)) {
                 items.push(this.createEmptyItem());
             }
         }
@@ -63,6 +67,17 @@ export class BaseListEditor extends LitElement {
     // Handle field changes within an item (for complex items)
     handleFieldChange(index, fieldName, fieldValue) {
         const updatedItems = [...this._items];
+        // If editing beyond the current array (auto-generated empty row), check maxItems
+        if (index >= this._items.length) {
+            if (this.maxItems && this._items.length >= this.maxItems) {
+                // Don't allow adding new items if we've reached maxItems
+                return;
+            }
+            // Extend the array to include the new item
+            while (updatedItems.length <= index) {
+                updatedItems.push(this.createEmptyItem());
+            }
+        }
         const currentItem = updatedItems[index] || this.createEmptyItem();
         updatedItems[index] = {
             ...currentItem,