@nyaruka/temba-components 0.129.7 → 0.129.9

package/src/form/ArrayEditor.ts

@@ -1,7 +1,8 @@
 import { html, css, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { FieldConfig } from '../flow/types';
+import { FieldConfig, SelectFieldConfig } from '../flow/types';
 import { BaseListEditor, ListItem } from './BaseListEditor';
+import { FieldRenderer } from './FieldRenderer';
 
 @customElement('temba-array-editor')
 export class TembaArrayEditor extends BaseListEditor<ListItem> {
@@ -19,6 +20,12 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
     allItems: any[]
   ) => any[];
 
+  @property({ type: Function })
+  isEmptyItemFn?: (item: any) => boolean;
+
+  @property({ type: Boolean })
+  maintainEmptyItem = true; // Enable by default for better UX
+
   constructor() {
     super();
     this._items = [];
@@ -37,11 +44,36 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
 
   // Implement abstract methods
   isEmptyItem(item: ListItem): boolean {
-    return Object.values(item).every(
+    // 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
+  protected cleanItems(items: ListItem[]): any {
+    // 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(): ListItem {
     return {};
   }
@@ -83,6 +115,14 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
       return config.computeValue(item, currentValue);
     }
 
+    // For select fields, ensure we return the right type
+    if (config.type === 'select') {
+      const selectConfig = config as SelectFieldConfig;
+      if (currentValue === undefined || currentValue === null) {
+        return selectConfig.multi ? [] : '';
+      }
+    }
+
     return currentValue;
   }
 
@@ -93,36 +133,42 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
   ): TemplateResult {
     const computedValue = this.computeFieldValue(itemIndex, fieldName, config);
 
-    switch (config.type) {
-      case 'text':
-        return html`<temba-textinput
-          .value=${computedValue || ''}
-          .placeholder=${config.placeholder}
-          @change=${(e: any) =>
-            this.handleFieldChange(itemIndex, fieldName, e.target.value)}
-        ></temba-textinput>`;
-
-      case 'textarea':
-        return html`<temba-textinput
-          .value=${computedValue || ''}
-          .placeholder=${config.placeholder}
-          textarea
-          .rows=${config.rows || 3}
-          @change=${(e: any) =>
-            this.handleFieldChange(itemIndex, fieldName, e.target.value)}
-        ></temba-textinput>`;
-
-      case 'select':
-        return html`<temba-select
-          .value=${computedValue || ''}
-          .options=${config.options}
-          @change=${(e: any) =>
-            this.handleFieldChange(itemIndex, fieldName, e.target.value)}
-        ></temba-select>`;
-
-      default:
-        return html`<span>Unsupported field type: ${config.type}</span>`;
-    }
+    // Use FieldRenderer for consistent field rendering
+    return FieldRenderer.renderField(fieldName, config, computedValue, {
+      showLabel: false, // ArrayEditor doesn't show labels for individual fields
+      flavor: 'small', // ArrayEditor uses small flavor
+      extraClasses: 'form-control',
+      onChange: (e: Event) => {
+        let value: any;
+        const target = e.target as any;
+
+        // Handle different field types and their change events
+        if (config.type === 'select') {
+          // For temba-select, extract the correct value
+          if (target.tagName === 'TEMBA-SELECT') {
+            if (target.multi || target.emails || target.tags) {
+              value = target.values || [];
+            } else {
+              // Single select: extract value from first selected option
+              const values = target.values || [];
+              value =
+                values.length > 0 && values[0]
+                  ? values[0].value !== undefined
+                    ? values[0].value
+                    : values[0]
+                  : '';
+            }
+          } else {
+            value = target.value;
+          }
+        } else {
+          // For other field types, use the target value directly
+          value = target.value;
+        }
+
+        this.handleFieldChange(itemIndex, fieldName, value);
+      }
+    });
   }
 
   renderItem(item: ListItem, index: number): TemplateResult {
@@ -130,29 +176,25 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
 
     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>
     `;
   }
@@ -171,27 +213,15 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
 
   static 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 {
@@ -200,8 +230,13 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
     }
 
     .item-fields {
-      display: grid;
+      display: flex;
       gap: 12px;
+      align-items: center;
+    }
+
+    .field {
+      flex: 1;
     }
 
     .field label {
@@ -214,7 +249,7 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
 
     .add-btn,
     .remove-btn {
-      padding: 8px 16px;
+      padding: 8px;
       border: 1px solid #ccc;
       border-radius: 4px;
       background: white;
@@ -228,13 +263,8 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
     }
 
     .remove-btn {
-      background: #fff5f5;
-      border-color: #fecaca;
-      color: #dc2626;
-    }
-
-    .remove-btn:hover {
-      background: #fef2f2;
+      background: #fefefe;
+      color: #999;
     }
   `;
 }

package/src/form/BaseListEditor.ts

@@ -52,10 +52,12 @@ export abstract class BaseListEditor<
   }
 
   protected shouldShowAddButton(): boolean {
-    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(): TemplateResult {
@@ -65,7 +67,7 @@ export abstract class BaseListEditor<
       <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>
@@ -89,7 +91,8 @@ export abstract class BaseListEditor<
 
     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());
       }
     }
@@ -111,6 +114,19 @@ export abstract class BaseListEditor<
     fieldValue: any
   ) {
     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] = {