@nyaruka/temba-components 0.129.9 → 0.129.11

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

@@ -1,18 +1,166 @@
-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)
+                ? [{ value: callWebhookAction.method, name: callWebhookAction.method }]
+                : [{ value: 'GET', name: '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\n        ? [{ value: callWebhookAction.method, name: callWebhookAction.method }]\n        : [{ value: 'GET', name: '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/form/ArrayEditor.js

@@ -73,7 +73,7 @@ let TembaArrayEditor = class TembaArrayEditor extends BaseListEditor {
         }
         return currentValue;
     }
-    renderField(itemIndex, fieldName, config) {
+    renderArrayField(itemIndex, fieldName, config) {
         const computedValue = this.computeFieldValue(itemIndex, fieldName, config);
         // Use FieldRenderer for consistent field rendering
         return FieldRenderer.renderField(fieldName, config, computedValue, {
@@ -120,7 +120,7 @@ let TembaArrayEditor = class TembaArrayEditor extends BaseListEditor {
         <div class="item-fields">
           ${Object.entries(this.itemConfig).map(([fieldName, config]) => html `
               <div class="field">
-                ${this.renderField(index, fieldName, config)}
+                ${this.renderArrayField(index, fieldName, config)}
               </div>
             `)}
           ${canRemove
@@ -140,70 +140,59 @@ let TembaArrayEditor = class TembaArrayEditor extends BaseListEditor {
     getContainerClass() {
         return 'array-editor';
     }
-    renderAddButton() {
-        return html `
-      <button class="add-btn" @click=${() => this.addItem()}>
-        Add ${this.itemLabel}
-      </button>
-    `;
-    }
-};
-TembaArrayEditor.styles = css `
-    .array-editor {
-    }
+    static get styles() {
+        return css `
+      ${super.styles}
 
-    .array-item {
-    }
+      .array-editor {
+      }
 
-    .item-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
+      .array-item {
+      }
 
-    .item-title {
-      font-weight: 600;
-      color: #333;
-    }
+      .item-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
 
-    .item-fields {
-      display: flex;
-      gap: 12px;
-      align-items: center;
-    }
+      .item-title {
+        font-weight: 600;
+        color: #333;
+      }
 
-    .field {
-      flex: 1;
-    }
+      .item-fields {
+        display: flex;
+        gap: 12px;
+        align-items: center;
+      }
 
-    .field label {
-      display: block;
-      margin-bottom: 4px;
-      font-weight: 500;
-      color: #555;
-      font-size: 14px;
-    }
+      .field {
+        flex: 1;
+      }
 
-    .add-btn,
-    .remove-btn {
-      padding: 8px;
-      border: 1px solid #ccc;
-      border-radius: 4px;
-      background: white;
-      cursor: pointer;
-      font-size: 14px;
-    }
+      .add-btn,
+      .remove-btn {
+        padding: 8px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        background: white;
+        cursor: pointer;
+        font-size: 14px;
+      }
 
-    .add-btn:hover,
-    .remove-btn:hover {
-      background: #f8f8f8;
-    }
+      .add-btn:hover,
+      .remove-btn:hover {
+        background: #f8f8f8;
+      }
 
-    .remove-btn {
-      background: #fefefe;
-      color: #999;
+      .remove-btn {
+        background: #fefefe;
+        color: #999;
+      }
+    `;
     }
-  `;
+};
 __decorate([
     property({ type: Object })
 ], TembaArrayEditor.prototype, "itemConfig", void 0);

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 renderField(\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.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 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"]}
+{"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"]}

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

@@ -1,7 +1,8 @@
 import { __decorate } from "tslib";
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-export class BaseListEditor extends LitElement {
+import { FieldElement } from './FieldElement';
+export class BaseListEditor extends FieldElement {
     constructor() {
         super(...arguments);
         this._items = [];
@@ -24,7 +25,7 @@ export class BaseListEditor extends LitElement {
         }
         return !this.maxItems || this._items.length < this.maxItems;
     }
-    render() {
+    renderWidget() {
         const items = this.displayItems;
         return html `
       <div class=${this.getContainerClass()}>

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

@@ -1 +1 @@
-{"version":3,"file":"BaseListEditor.js","sourceRoot":"","sources":["../../../src/form/BaseListEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, TemplateResult, html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nexport interface ListItem {\n  [key: string]: any;\n}\n\nexport interface ListEditorConfig {\n  // Determines if empty items should be automatically maintained\n  maintainEmptyItem?: boolean;\n  // Function to check if an item is considered empty\n  isEmptyItem?: (item: ListItem) => boolean;\n  // Function to create a new empty item\n  createEmptyItem?: () => ListItem;\n  // Function to clean items before emitting (e.g., filter out empty items)\n  cleanItems?: (items: ListItem[]) => ListItem[];\n  // Minimum number of items to maintain\n  minItems?: number;\n  // Maximum number of items allowed\n  maxItems?: number;\n}\n\nexport abstract class BaseListEditor<\n  T extends ListItem = ListItem\n> extends LitElement {\n  @property({ attribute: false })\n  protected _items: T[] = [];\n\n  @property({ type: Number })\n  minItems = 0;\n\n  @property({ type: Number })\n  maxItems?: number;\n\n  @property({ type: Boolean })\n  maintainEmptyItem = false;\n\n  // Abstract methods that must be implemented by subclasses\n  abstract isEmptyItem(item: T): boolean;\n  abstract createEmptyItem(): T;\n  abstract renderItem(item: T, index: number): TemplateResult;\n\n  // Optional methods that subclasses can override\n  protected getContainerClass(): string {\n    return 'base-list-editor';\n  }\n\n  protected renderAddButton(): TemplateResult {\n    return html`\n      <button class=\"add-btn\" @click=${() => this.addItem()}>Add Item</button>\n    `;\n  }\n\n  protected shouldShowAddButton(): boolean {\n    // Never show add button when maintaining empty items (auto-add behavior)\n    if (this.maintainEmptyItem) {\n      return false;\n    }\n\n    return !this.maxItems || this._items.length < this.maxItems;\n  }\n\n  render(): TemplateResult {\n    const items = this.displayItems;\n\n    return html`\n      <div class=${this.getContainerClass()}>\n        <div\n          class=\"list-items\"\n          style=\"display: grid; grid-template-columns: 1fr; gap: 8px;\"\n        >\n          ${items.map((item, index) => this.renderItem(item, index))}\n        </div>\n        ${this.shouldShowAddButton() ? this.renderAddButton() : ''}\n      </div>\n    `;\n  }\n\n  // Optional method for cleaning items before emission (can return any type)\n  protected cleanItems(items: T[]): any {\n    if (!this.maintainEmptyItem) {\n      return items;\n    }\n    // Filter out empty items for the emitted value\n    return items.filter((item) => !this.isEmptyItem(item));\n  }\n\n  // Get the items to display (may include empty items for UI)\n  protected get displayItems(): T[] {\n    const items = [...this._items];\n\n    if (this.maintainEmptyItem) {\n      const hasEmptyItem = items.some((item) => this.isEmptyItem(item));\n      // Only add empty item if we haven't reached maxItems and don't already have an empty item\n      if (!hasEmptyItem && (!this.maxItems || items.length < this.maxItems)) {\n        items.push(this.createEmptyItem());\n      }\n    }\n\n    return items;\n  }\n\n  // Handle changes to an item\n  protected handleItemChange(index: number, newItem: T) {\n    const updatedItems = [...this._items];\n    updatedItems[index] = newItem;\n    this.updateValue(updatedItems);\n  }\n\n  // Handle field changes within an item (for complex items)\n  protected handleFieldChange(\n    index: number,\n    fieldName: string,\n    fieldValue: any\n  ) {\n    const updatedItems = [...this._items];\n\n    // If editing beyond the current array (auto-generated empty row), check maxItems\n    if (index >= this._items.length) {\n      if (this.maxItems && this._items.length >= this.maxItems) {\n        // Don't allow adding new items if we've reached maxItems\n        return;\n      }\n      // Extend the array to include the new item\n      while (updatedItems.length <= index) {\n        updatedItems.push(this.createEmptyItem());\n      }\n    }\n\n    const currentItem = updatedItems[index] || this.createEmptyItem();\n\n    updatedItems[index] = {\n      ...currentItem,\n      [fieldName]: fieldValue\n    };\n\n    this.updateValue(updatedItems);\n  }\n\n  // Add a new item\n  protected addItem(item?: T) {\n    if (this.maxItems && this._items.length >= this.maxItems) {\n      return;\n    }\n\n    const newItem = item || this.createEmptyItem();\n    const updatedItems = [...this._items, newItem];\n    this.updateValue(updatedItems);\n  }\n\n  // Remove an item\n  protected removeItem(index: number) {\n    if (this._items.length <= this.minItems) {\n      return;\n    }\n\n    const updatedItems = this._items.filter((_, i) => i !== index);\n    this.updateValue(updatedItems);\n  }\n\n  // Check if an item can be removed\n  protected canRemoveItem(index: number): boolean {\n    const item = this.displayItems[index];\n\n    // Can't remove if it would go below minimum\n    if (this._items.length <= this.minItems) {\n      return false;\n    }\n\n    // Can't remove empty items if we're maintaining them\n    if (this.maintainEmptyItem && this.isEmptyItem(item)) {\n      return false;\n    }\n\n    return true;\n  }\n\n  // Update the value and emit change event\n  protected updateValue(newValue: T[]) {\n    this._items = newValue;\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: { value: this.cleanItems(newValue) },\n        bubbles: true\n      })\n    );\n  }\n\n  // Utility method for subclasses to check if two items are equal\n  protected itemsEqual(item1: T, item2: T): boolean {\n    return JSON.stringify(item1) === JSON.stringify(item2);\n  }\n}\n"]}
+{"version":3,"file":"BaseListEditor.js","sourceRoot":"","sources":["../../../src/form/BaseListEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { FieldElement } from './FieldElement';\n\nexport interface ListItem {\n  [key: string]: any;\n}\n\nexport interface ListEditorConfig {\n  // Determines if empty items should be automatically maintained\n  maintainEmptyItem?: boolean;\n  // Function to check if an item is considered empty\n  isEmptyItem?: (item: ListItem) => boolean;\n  // Function to create a new empty item\n  createEmptyItem?: () => ListItem;\n  // Function to clean items before emitting (e.g., filter out empty items)\n  cleanItems?: (items: ListItem[]) => ListItem[];\n  // Minimum number of items to maintain\n  minItems?: number;\n  // Maximum number of items allowed\n  maxItems?: number;\n}\n\nexport abstract class BaseListEditor<\n  T extends ListItem = ListItem\n> extends FieldElement {\n  @property({ attribute: false })\n  protected _items: T[] = [];\n\n  @property({ type: Number })\n  minItems = 0;\n\n  @property({ type: Number })\n  maxItems?: number;\n\n  @property({ type: Boolean })\n  maintainEmptyItem = false;\n\n  // Abstract methods that must be implemented by subclasses\n  abstract isEmptyItem(item: T): boolean;\n  abstract createEmptyItem(): T;\n  abstract renderItem(item: T, index: number): TemplateResult;\n\n  // Optional methods that subclasses can override\n  protected getContainerClass(): string {\n    return 'base-list-editor';\n  }\n\n  protected renderAddButton(): TemplateResult {\n    return html`\n      <button class=\"add-btn\" @click=${() => this.addItem()}>Add Item</button>\n    `;\n  }\n\n  protected shouldShowAddButton(): boolean {\n    // Never show add button when maintaining empty items (auto-add behavior)\n    if (this.maintainEmptyItem) {\n      return false;\n    }\n\n    return !this.maxItems || this._items.length < this.maxItems;\n  }\n\n  renderWidget(): TemplateResult {\n    const items = this.displayItems;\n    return html`\n      <div class=${this.getContainerClass()}>\n        <div\n          class=\"list-items\"\n          style=\"display: grid; grid-template-columns: 1fr; gap: 8px;\"\n        >\n          ${items.map((item, index) => this.renderItem(item, index))}\n        </div>\n        ${this.shouldShowAddButton() ? this.renderAddButton() : ''}\n      </div>\n    `;\n  }\n\n  // Optional method for cleaning items before emission (can return any type)\n  protected cleanItems(items: T[]): any {\n    if (!this.maintainEmptyItem) {\n      return items;\n    }\n    // Filter out empty items for the emitted value\n    return items.filter((item) => !this.isEmptyItem(item));\n  }\n\n  // Get the items to display (may include empty items for UI)\n  protected get displayItems(): T[] {\n    const items = [...this._items];\n\n    if (this.maintainEmptyItem) {\n      const hasEmptyItem = items.some((item) => this.isEmptyItem(item));\n      // Only add empty item if we haven't reached maxItems and don't already have an empty item\n      if (!hasEmptyItem && (!this.maxItems || items.length < this.maxItems)) {\n        items.push(this.createEmptyItem());\n      }\n    }\n\n    return items;\n  }\n\n  // Handle changes to an item\n  protected handleItemChange(index: number, newItem: T) {\n    const updatedItems = [...this._items];\n    updatedItems[index] = newItem;\n    this.updateValue(updatedItems);\n  }\n\n  // Handle field changes within an item (for complex items)\n  protected handleFieldChange(\n    index: number,\n    fieldName: string,\n    fieldValue: any\n  ) {\n    const updatedItems = [...this._items];\n\n    // If editing beyond the current array (auto-generated empty row), check maxItems\n    if (index >= this._items.length) {\n      if (this.maxItems && this._items.length >= this.maxItems) {\n        // Don't allow adding new items if we've reached maxItems\n        return;\n      }\n      // Extend the array to include the new item\n      while (updatedItems.length <= index) {\n        updatedItems.push(this.createEmptyItem());\n      }\n    }\n\n    const currentItem = updatedItems[index] || this.createEmptyItem();\n\n    updatedItems[index] = {\n      ...currentItem,\n      [fieldName]: fieldValue\n    };\n\n    this.updateValue(updatedItems);\n  }\n\n  // Add a new item\n  protected addItem(item?: T) {\n    if (this.maxItems && this._items.length >= this.maxItems) {\n      return;\n    }\n\n    const newItem = item || this.createEmptyItem();\n    const updatedItems = [...this._items, newItem];\n    this.updateValue(updatedItems);\n  }\n\n  // Remove an item\n  protected removeItem(index: number) {\n    if (this._items.length <= this.minItems) {\n      return;\n    }\n\n    const updatedItems = this._items.filter((_, i) => i !== index);\n    this.updateValue(updatedItems);\n  }\n\n  // Check if an item can be removed\n  protected canRemoveItem(index: number): boolean {\n    const item = this.displayItems[index];\n\n    // Can't remove if it would go below minimum\n    if (this._items.length <= this.minItems) {\n      return false;\n    }\n\n    // Can't remove empty items if we're maintaining them\n    if (this.maintainEmptyItem && this.isEmptyItem(item)) {\n      return false;\n    }\n\n    return true;\n  }\n\n  // Update the value and emit change event\n  protected updateValue(newValue: T[]) {\n    this._items = newValue;\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: { value: this.cleanItems(newValue) },\n        bubbles: true\n      })\n    );\n  }\n\n  // Utility method for subclasses to check if two items are equal\n  protected itemsEqual(item1: T, item2: T): boolean {\n    return JSON.stringify(item1) === JSON.stringify(item2);\n  }\n}\n"]}

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

@@ -1,9 +1,10 @@
 import { __decorate } from "tslib";
 import { html, css } from 'lit';
-import { FormElement } from './FormElement';
+import { FieldElement } from './FieldElement';
 import { property } from 'lit/decorators.js';
 import { Icon } from '../Icons';
-export class Checkbox extends FormElement {
+import { renderMarkdownInline } from '../markdown';
+export class Checkbox extends FieldElement {
     constructor() {
         super(...arguments);
         this.name = '';
@@ -13,6 +14,8 @@ export class Checkbox extends FormElement {
     }
     static get styles() {
         return css `
+      ${super.styles}
+
       :host {
         color: var(--color-text);
         display: inline-block;
@@ -31,25 +34,45 @@ export class Checkbox extends FormElement {
         background: var(--checkbox-hover-bg, #f9f9f9);
       }
 
-      temba-field {
-        --help-text-margin-left: 24px;
-        cursor: pointer;
-      }
-
       .checkbox-container {
         cursor: pointer;
         display: flex;
+        align-items: flex-start;
         user-select: none;
         -webkit-user-select: none;
       }
 
+      .checkbox-container temba-icon {
+        align-self: flex-start;
+        vertical-align: top;
+        line-height: 1;
+      }
+
+      .label-and-help {
+        flex-grow: 1;
+        margin-left: 8px;
+      }
+
       .checkbox-label {
         font-family: var(--font-family);
         padding: 0px;
-        margin-left: 8px;
+        margin: 0px;
         font-size: 14px;
         line-height: 19px;
-        flex-grow: 1;
+      }
+
+      .checkbox-help-text {
+        font-family: var(--font-family);
+        font-size: var(--help-text-size, 0.85em);
+        line-height: normal;
+        color: var(--color-text-help);
+        margin-top: 4px;
+        opacity: 1;
+      }
+
+      /* Checkbox help text should align with the checkbox icon, not indented */
+      .help-text {
+        margin-left: 0;
       }
 
       .far {
@@ -103,7 +126,7 @@ export class Checkbox extends FormElement {
         this.handleClick();
         super.click();
     }
-    render() {
+    renderWidget() {
         const icon = html `<temba-icon
       name="${this.checked
             ? Icon.checkbox_checked
@@ -112,28 +135,58 @@ export class Checkbox extends FormElement {
                 : Icon.checkbox}"
       size="${this.size}"
       animatechange="${this.animateChange}"
-    />`;
+    ></temba-icon>`;
         return html `
-      <div class="wrapper ${this.label ? 'label' : ''}">
-        <temba-field
-          name=${this.name}
-          .helpText=${this.helpText}
-          .errors=${this.errors}
-          .widgetOnly=${this.widgetOnly}
-          .helpAlways=${true}
-          ?disabled=${this.disabled}
-          @click=${this.handleClick}
-        >
-          <div class="checkbox-container ${this.disabled ? 'disabled' : ''}">
-            ${icon}
+      <div
+        class="wrapper ${this.label ? 'label' : ''}"
+        @click=${this.handleClick}
+      >
+        <div class="checkbox-container ${this.disabled ? 'disabled' : ''}">
+          ${icon}
+          <div class="label-and-help">
             ${this.label && String(this.label).trim()
             ? html `<div class="checkbox-label">${this.label}</div>`
             : null}
+            ${this.helpText && this.helpText !== 'None'
+            ? html ` <div class="checkbox-help-text">${this.helpText}</div> `
+            : null}
           </div>
-        </temba-field>
+        </div>
       </div>
     `;
     }
+    renderField() {
+        // Use standard FieldElement behavior but skip the field label since checkbox renders its own inline
+        const hasErrors = !this.hideErrors && this.errors && this.errors.length > 0;
+        const errors = hasErrors
+            ? this.errors.map((error) => {
+                return html `
+            <div class="alert-error">${renderMarkdownInline(error)}</div>
+          `;
+            })
+            : [];
+        if (this.widgetOnly) {
+            return html `
+        <div class="${this.disabled ? 'disabled' : ''}">
+          ${this.renderWidget()}
+        </div>
+        ${errors}
+      `;
+        }
+        // This matches FieldElement.renderField() but without the field label
+        return html `
+      <div
+        class="field ${this.disabled ? 'disabled' : ''} ${hasErrors
+            ? 'has-error'
+            : ''}"
+      >
+        <div class="widget">${this.renderWidget()} ${errors}</div>
+      </div>
+    `;
+    }
+    render() {
+        return this.renderField();
+    }
 }
 __decorate([
     property({ type: String })