@nyaruka/temba-components 0.129.7 → 0.129.9

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

@@ -2,11 +2,13 @@ import { __decorate } from "tslib";
 import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { BaseListEditor } from './BaseListEditor';
+import { FieldRenderer } from './FieldRenderer';
 let TembaArrayEditor = class TembaArrayEditor extends BaseListEditor {
     constructor() {
         super();
         this.itemConfig = {};
         this.itemLabel = 'Item';
+        this.maintainEmptyItem = true; // Enable by default for better UX
         this._items = [];
     }
     // External API
@@ -19,7 +21,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,60 +64,76 @@ 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) {
         const computedValue = this.computeFieldValue(itemIndex, fieldName, config);
-        switch (config.type) {
-            case 'text':
-                return html `<temba-textinput
-          .value=${computedValue || ''}
-          .placeholder=${config.placeholder}
-          @change=${(e) => 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) => this.handleFieldChange(itemIndex, fieldName, e.target.value)}
-        ></temba-textinput>`;
-            case 'select':
-                return html `<temba-select
-          .value=${computedValue || ''}
-          .options=${config.options}
-          @change=${(e) => 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) => {
+                let value;
+                const target = e.target;
+                // Handle different field types and their change events
+                if (config.type === 'select') {
+                    // For temba-select, extract the correct value
+                    if (target.tagName === 'TEMBA-SELECT') {
+                        if (target.multi || target.emails || target.tags) {
+                            value = target.values || [];
+                        }
+                        else {
+                            // Single select: extract value from first selected option
+                            const values = target.values || [];
+                            value =
+                                values.length > 0 && values[0]
+                                    ? values[0].value !== undefined
+                                        ? values[0].value
+                                        : values[0]
+                                    : '';
+                        }
+                    }
+                    else {
+                        value = target.value;
+                    }
+                }
+                else {
+                    // For other field types, use the target value directly
+                    value = target.value;
+                }
+                this.handleFieldChange(itemIndex, fieldName, value);
+            }
+        });
     }
     renderItem(item, index) {
         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 +150,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 +167,13 @@ TembaArrayEditor.styles = css `
     }
 
     .item-fields {
-      display: grid;
+      display: flex;
       gap: 12px;
+      align-items: center;
+    }
+
+    .field {
+      flex: 1;
     }
 
     .field label {
@@ -157,7 +186,7 @@ TembaArrayEditor.styles = css `
 
     .add-btn,
     .remove-btn {
-      padding: 8px 16px;
+      padding: 8px;
       border: 1px solid #ccc;
       border-radius: 4px;
       background: white;
@@ -171,13 +200,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 +213,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';\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"]}

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,

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    return (\n      !this.maintainEmptyItem &&\n      (!this.maxItems || this._items.length < this.maxItems)\n    );\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=\"gap: 8px; display: grid; grid-template-columns: 1fr;\"\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      if (!hasEmptyItem) {\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    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 { 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"]}