@nyaruka/temba-components 0.129.8 → 0.129.9

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

@@ -11,69 +11,4 @@ export const COLORS = {
     add: '#309c42',
     remove: '#e74c3c'
 };
-// Default property type mappings
-export function getDefaultComponent(value) {
-    if (typeof value === 'boolean') {
-        return 'temba-checkbox';
-    }
-    if (typeof value === 'number') {
-        return 'temba-textinput';
-    }
-    if (Array.isArray(value)) {
-        return 'temba-select'; // For arrays, use multi-select
-    }
-    // Default to text input for strings and unknown types
-    return 'temba-textinput';
-}
-// Get component properties for default mappings with proper typing
-export function getDefaultComponentProps(value) {
-    if (typeof value === 'boolean') {
-        return {
-            widget: { type: 'temba-checkbox' }
-        };
-    }
-    if (typeof value === 'number') {
-        return {
-            widget: {
-                type: 'temba-textinput',
-                attributes: { type: 'number' }
-            }
-        };
-    }
-    if (Array.isArray(value)) {
-        if (value.length > 0 && typeof value[0] === 'string') {
-            return {
-                widget: {
-                    type: 'temba-select',
-                    attributes: { multi: true, tags: true }
-                }
-            };
-        }
-        return {
-            widget: {
-                type: 'temba-select',
-                attributes: { multi: true }
-            }
-        };
-    }
-    return {
-        widget: { type: 'temba-textinput' }
-    };
-}
-// Type guard functions for working with WidgetConfig
-export function isTextInputWidget(config) {
-    return config.type === 'temba-textinput';
-}
-export function isCompletionWidget(config) {
-    return config.type === 'temba-completion';
-}
-export function isSelectWidget(config) {
-    return config.type === 'temba-select';
-}
-export function isCheckboxWidget(config) {
-    return config.type === 'temba-checkbox';
-}
-export function isSliderWidget(config) {
-    return config.type === 'temba-slider';
-}
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/flow/types.ts"],"names":[],"mappings":"AAoRA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,SAAS;IAChB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,SAAS;IACf,GAAG,EAAE,SAAS;IACd,MAAM,EAAE,SAAS;CAClB,CAAC;AAEF,iCAAiC;AACjC,MAAM,UAAU,mBAAmB,CAAC,KAAU;IAC5C,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;QAC/B,OAAO,gBAAgB,CAAC;IAC1B,CAAC;IACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,iBAAiB,CAAC;IAC3B,CAAC;IACD,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACzB,OAAO,cAAc,CAAC,CAAC,+BAA+B;IACxD,CAAC;IACD,sDAAsD;IACtD,OAAO,iBAAiB,CAAC;AAC3B,CAAC;AAED,mEAAmE;AACnE,MAAM,UAAU,wBAAwB,CAAC,KAAU;IACjD,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;QAC/B,OAAO;YACL,MAAM,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE;SACnC,CAAC;IACJ,CAAC;IACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO;YACL,MAAM,EAAE;gBACN,IAAI,EAAE,iBAAiB;gBACvB,UAAU,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;aAC/B;SACF,CAAC;IACJ,CAAC;IACD,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACzB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,QAAQ,EAAE,CAAC;YACrD,OAAO;gBACL,MAAM,EAAE;oBACN,IAAI,EAAE,cAAc;oBACpB,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;iBACxC;aACF,CAAC;QACJ,CAAC;QACD,OAAO;YACL,MAAM,EAAE;gBACN,IAAI,EAAE,cAAc;gBACpB,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;aAC5B;SACF,CAAC;IACJ,CAAC;IACD,OAAO;QACL,MAAM,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE;KACpC,CAAC;AACJ,CAAC;AAED,qDAAqD;AACrD,MAAM,UAAU,iBAAiB,CAC/B,MAAoB;IAEpB,OAAO,MAAM,CAAC,IAAI,KAAK,iBAAiB,CAAC;AAC3C,CAAC;AAED,MAAM,UAAU,kBAAkB,CAChC,MAAoB;IAEpB,OAAO,MAAM,CAAC,IAAI,KAAK,kBAAkB,CAAC;AAC5C,CAAC;AAED,MAAM,UAAU,cAAc,CAC5B,MAAoB;IAEpB,OAAO,MAAM,CAAC,IAAI,KAAK,cAAc,CAAC;AACxC,CAAC;AAED,MAAM,UAAU,gBAAgB,CAC9B,MAAoB;IAEpB,OAAO,MAAM,CAAC,IAAI,KAAK,gBAAgB,CAAC;AAC1C,CAAC;AAED,MAAM,UAAU,cAAc,CAC5B,MAAoB;IAEpB,OAAO,MAAM,CAAC,IAAI,KAAK,cAAc,CAAC;AACxC,CAAC","sourcesContent":["import { TemplateResult } from 'lit-html';\nimport { Action } from '../store/flow-definition';\n\nexport interface ValidationResult {\n  valid: boolean;\n  errors: { [key: string]: string };\n}\n\n// Component attribute interfaces - these define what's allowed for each component type\nexport interface TextInputAttributes {\n  type?: 'text' | 'email' | 'number' | 'url' | 'tel';\n  placeholder?: string;\n  clearable?: boolean;\n  maxlength?: number;\n  gsm?: boolean;\n  autogrow?: boolean;\n  textarea?: boolean;\n  submitOnEnter?: boolean;\n}\n\nexport interface CompletionAttributes {\n  placeholder?: string;\n  clearable?: boolean;\n  maxlength?: number;\n  gsm?: boolean;\n  autogrow?: boolean;\n  textarea?: boolean;\n  expressions?: string;\n  counter?: string;\n  minHeight?: number;\n}\n\nexport interface SelectAttributes {\n  placeholder?: string;\n  multi?: boolean;\n  searchable?: boolean;\n  tags?: boolean;\n  emails?: boolean;\n  clearable?: boolean;\n  endpoint?: string;\n  valueKey?: string;\n  nameKey?: string;\n  queryParam?: string;\n  maxItems?: number;\n  maxItemsText?: string;\n  expressions?: string;\n  options?: Array<{ name: string; value: any }>;\n  sorted?: boolean;\n  allowCreate?: boolean;\n  jsonValue?: boolean;\n  spaceSelect?: boolean;\n  infoText?: string;\n}\n\nexport interface CheckboxAttributes {\n  label?: string;\n  size?: number;\n  disabled?: boolean;\n  animateChange?: string;\n}\n\nexport interface SliderAttributes {\n  min?: number;\n  max?: number;\n  range?: boolean;\n}\n\n// Widget configuration using discriminated union for type safety\nexport type WidgetConfig =\n  | { type: 'temba-textinput'; attributes?: TextInputAttributes }\n  | { type: 'temba-completion'; attributes?: CompletionAttributes }\n  | { type: 'temba-select'; attributes?: SelectAttributes }\n  | { type: 'temba-checkbox'; attributes?: CheckboxAttributes }\n  | { type: 'temba-slider'; attributes?: SliderAttributes }\n  | { type: string; attributes?: { [key: string]: any } }; // Generic fallback\n\n// Property configuration with the clean structure you want\nexport interface PropertyConfig {\n  // Form field metadata\n  label?: string;\n  helpText?: string;\n  required?: boolean;\n  maxLength?: number;\n  minLength?: number;\n  pattern?: string;\n\n  // Widget configuration\n  widget: WidgetConfig;\n\n  // Conditional behavior based on other field values\n  conditions?: {\n    // When to show this field\n    visible?: (formData: any) => boolean;\n\n    // When this field is disabled\n    disabled?: (formData: any) => boolean;\n  };\n}\n\nexport interface NodeConfig {\n  type: string;\n  name?: string;\n  color?: string;\n  action?: ActionConfig;\n  router?: {\n    type: 'switch' | 'random';\n    defaultCategory?: string;\n    operand?: string;\n    configurable?: boolean; // can the rules be configured in the UI\n    rules?: {\n      type: 'has_number_between' | 'has_string' | 'has_value' | 'has_not_value';\n      arguments: string[];\n      categoryName: string;\n    }[];\n  };\n  properties?: { [key: string]: PropertyConfig };\n  toFormData?: (node: any) => any;\n  fromFormData?: (formData: any, originalNode: any) => any;\n}\n\n// New field configuration system for generic form generation\nexport interface BaseFieldConfig {\n  label?: string;\n  required?: boolean;\n  evaluated?: boolean; // if this field supports expression evaluation\n  dependsOn?: string[]; // fields this field depends on\n  computeValue?: (\n    values: Record<string, any>,\n    currentValue: any,\n    originalValues?: Record<string, any>\n  ) => any;\n\n  // Validation properties\n  minLength?: number;\n  maxLength?: number;\n  pattern?: string;\n  helpText?: string;\n\n  // Layout properties\n  maxWidth?: string; // CSS max-width value (e.g., '200px', '50%', '10rem')\n\n  // Conditional rendering\n  conditions?: {\n    visible?: (formData: Record<string, any>) => boolean;\n    disabled?: (formData: Record<string, any>) => boolean;\n  };\n}\n\nexport interface TextFieldConfig extends BaseFieldConfig {\n  type: 'text';\n  placeholder?: string;\n}\n\nexport interface TextareaFieldConfig extends BaseFieldConfig {\n  type: 'textarea';\n  placeholder?: string;\n  rows?: number;\n  minHeight?: number;\n}\n\nexport interface SelectFieldConfig extends BaseFieldConfig {\n  type: 'select';\n  options: string[] | { value: string; label: string }[];\n  multi?: boolean;\n  clearable?: boolean;\n  searchable?: boolean;\n  tags?: boolean;\n  placeholder?: string;\n  maxItems?: number;\n  valueKey?: string;\n  nameKey?: string;\n  endpoint?: string;\n  emails?: boolean;\n  flavor?: 'small' | 'large';\n}\n\nexport interface KeyValueFieldConfig extends BaseFieldConfig {\n  type: 'key-value';\n  sortable?: boolean;\n  keyPlaceholder?: string;\n  valuePlaceholder?: string;\n  minRows?: number;\n}\n\nexport interface ArrayFieldConfig extends BaseFieldConfig {\n  type: 'array';\n  itemConfig: Record<string, FieldConfig>;\n  sortable?: boolean;\n  minItems?: number;\n  maxItems?: number;\n  itemLabel?: string;\n  onItemChange?: (\n    itemIndex: number,\n    field: string,\n    value: any,\n    allItems: any[]\n  ) => any[];\n  isEmptyItem?: (item: any) => boolean;\n}\n\nexport interface CheckboxFieldConfig extends BaseFieldConfig {\n  type: 'checkbox';\n  size?: number;\n  animateChange?: string;\n}\n\nexport interface MessageEditorFieldConfig extends BaseFieldConfig {\n  type: 'message-editor';\n  placeholder?: string;\n  minHeight?: number;\n  maxAttachments?: number;\n  accept?: string;\n  endpoint?: string;\n  counter?: string;\n  gsm?: boolean;\n  autogrow?: boolean;\n  disableCompletion?: boolean;\n}\n\nexport type FieldConfig =\n  | TextFieldConfig\n  | TextareaFieldConfig\n  | SelectFieldConfig\n  | KeyValueFieldConfig\n  | ArrayFieldConfig\n  | CheckboxFieldConfig\n  | MessageEditorFieldConfig;\n\n// Layout configurations for better form organization\n// Recursive layout system - any layout item can contain other layout items\n\nexport interface FieldItemConfig {\n  type: 'field';\n  field: string; // field name to render\n}\n\nexport interface RowLayoutConfig {\n  type: 'row';\n  items: LayoutItem[]; // can contain fields, groups, or other rows\n  gap?: string; // CSS gap value, defaults to '1rem'\n}\n\nexport interface GroupLayoutConfig {\n  type: 'group';\n  label: string;\n  items: LayoutItem[]; // can contain fields, rows, or other groups\n  collapsible?: boolean;\n  collapsed?: boolean | ((formData: any) => boolean); // initial state if collapsible - can be a function\n  helpText?: string;\n  getGroupValueCount?: (formData: any) => number; // optional function to get count for bubble display\n}\n\nexport type LayoutItem =\n  | FieldItemConfig\n  | RowLayoutConfig\n  | GroupLayoutConfig\n  | string; // string is shorthand for field\n\nexport interface ActionConfig {\n  name: string;\n  color: string;\n  evaluated?: string[];\n  render?: (node: any, action: any) => TemplateResult;\n\n  form?: Record<string, FieldConfig>;\n  layout?: LayoutItem[]; // optional layout configuration - array of layout items\n\n  // Action editor configuration (legacy)\n  // Form-level transformations\n  sanitize?: (formData: any) => any;\n  toFormData?: (action: Action) => any;\n  fromFormData?: (formData: any) => Action;\n\n  validate?: (action: Action) => ValidationResult;\n}\n\nexport const COLORS = {\n  send: '#3498db',\n  update: '#01c1af',\n  broadcast: '#8e5ea7',\n  call: '#e68628',\n  create: '#df419f',\n  save: '#1a777c',\n  split: '#aaaaaa',\n  execute: '#666666',\n  wait: '#4d7dad',\n  add: '#309c42',\n  remove: '#e74c3c'\n};\n\n// Default property type mappings\nexport function getDefaultComponent(value: any): WidgetConfig['type'] {\n  if (typeof value === 'boolean') {\n    return 'temba-checkbox';\n  }\n  if (typeof value === 'number') {\n    return 'temba-textinput';\n  }\n  if (Array.isArray(value)) {\n    return 'temba-select'; // For arrays, use multi-select\n  }\n  // Default to text input for strings and unknown types\n  return 'temba-textinput';\n}\n\n// Get component properties for default mappings with proper typing\nexport function getDefaultComponentProps(value: any): PropertyConfig {\n  if (typeof value === 'boolean') {\n    return {\n      widget: { type: 'temba-checkbox' }\n    };\n  }\n  if (typeof value === 'number') {\n    return {\n      widget: {\n        type: 'temba-textinput',\n        attributes: { type: 'number' }\n      }\n    };\n  }\n  if (Array.isArray(value)) {\n    if (value.length > 0 && typeof value[0] === 'string') {\n      return {\n        widget: {\n          type: 'temba-select',\n          attributes: { multi: true, tags: true }\n        }\n      };\n    }\n    return {\n      widget: {\n        type: 'temba-select',\n        attributes: { multi: true }\n      }\n    };\n  }\n  return {\n    widget: { type: 'temba-textinput' }\n  };\n}\n\n// Type guard functions for working with WidgetConfig\nexport function isTextInputWidget(\n  config: WidgetConfig\n): config is { type: 'temba-textinput'; attributes?: TextInputAttributes } {\n  return config.type === 'temba-textinput';\n}\n\nexport function isCompletionWidget(\n  config: WidgetConfig\n): config is { type: 'temba-completion'; attributes?: CompletionAttributes } {\n  return config.type === 'temba-completion';\n}\n\nexport function isSelectWidget(\n  config: WidgetConfig\n): config is { type: 'temba-select'; attributes?: SelectAttributes } {\n  return config.type === 'temba-select';\n}\n\nexport function isCheckboxWidget(\n  config: WidgetConfig\n): config is { type: 'temba-checkbox'; attributes?: CheckboxAttributes } {\n  return config.type === 'temba-checkbox';\n}\n\nexport function isSliderWidget(\n  config: WidgetConfig\n): config is { type: 'slider'; attributes?: SliderAttributes } {\n  return config.type === 'temba-slider';\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/flow/types.ts"],"names":[],"mappings":"AAiQA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,SAAS;IAChB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,SAAS;IACf,GAAG,EAAE,SAAS;IACd,MAAM,EAAE,SAAS;CAClB,CAAC","sourcesContent":["import { TemplateResult } from 'lit-html';\nimport { Action, Node } from '../store/flow-definition';\n\nexport interface ValidationResult {\n  valid: boolean;\n  errors: { [key: string]: string };\n}\n\n// Component attribute interfaces - these define what's allowed for each component type\nexport interface TextInputAttributes {\n  type?: 'text' | 'email' | 'number' | 'url' | 'tel';\n  placeholder?: string;\n  clearable?: boolean;\n  maxlength?: number;\n  gsm?: boolean;\n  autogrow?: boolean;\n  textarea?: boolean;\n  submitOnEnter?: boolean;\n}\n\nexport interface CompletionAttributes {\n  placeholder?: string;\n  clearable?: boolean;\n  maxlength?: number;\n  gsm?: boolean;\n  autogrow?: boolean;\n  textarea?: boolean;\n  expressions?: string;\n  counter?: string;\n  minHeight?: number;\n}\n\nexport interface SelectAttributes {\n  placeholder?: string;\n  multi?: boolean;\n  searchable?: boolean;\n  tags?: boolean;\n  emails?: boolean;\n  clearable?: boolean;\n  endpoint?: string;\n  valueKey?: string;\n  nameKey?: string;\n  queryParam?: string;\n  maxItems?: number;\n  maxItemsText?: string;\n  expressions?: string;\n  options?: Array<{ name: string; value: any }>;\n  sorted?: boolean;\n  allowCreate?: boolean;\n  jsonValue?: boolean;\n  spaceSelect?: boolean;\n  infoText?: string;\n}\n\nexport interface CheckboxAttributes {\n  label?: string;\n  size?: number;\n  disabled?: boolean;\n  animateChange?: string;\n}\n\nexport interface SliderAttributes {\n  min?: number;\n  max?: number;\n  range?: boolean;\n}\n\nexport interface FormData extends Record<string, any> {}\n\nexport interface FormConfig {\n  form?: Record<string, FieldConfig>;\n  layout?: LayoutItem[];\n  sanitize?: (formData: FormData) => void;\n  validate?: (formData: FormData) => ValidationResult;\n}\n\nexport interface NodeConfig extends FormConfig {\n  type: string;\n  name?: string;\n  color?: string;\n  action?: ActionConfig;\n  router?: {\n    type: 'switch' | 'random';\n    defaultCategory?: string;\n    operand?: string;\n    configurable?: boolean; // can the rules be configured in the UI\n    rules?: {\n      type:\n        | 'has_number_between'\n        | 'has_string'\n        | 'has_value'\n        | 'has_not_value'\n        | 'has_text';\n      arguments: string[];\n      categoryName: string;\n    }[];\n  };\n\n  toFormData?: (node: Node) => FormData;\n  fromFormData?: (formData: FormData, originalNode: Node) => Node;\n  render?: (node: Node) => TemplateResult;\n}\n\n// New field configuration system for generic form generation\nexport interface BaseFieldConfig {\n  label?: string;\n  required?: boolean;\n  evaluated?: boolean;\n  dependsOn?: string[];\n  computeValue?: (\n    values: Record<string, any>,\n    currentValue: any,\n    originalValues?: Record<string, any>\n  ) => any;\n\n  // Validation properties\n  minLength?: number;\n  maxLength?: number;\n  pattern?: string;\n  helpText?: string;\n\n  // Layout properties\n  maxWidth?: string;\n\n  // Conditional rendering\n  conditions?: {\n    visible?: (formData: Record<string, any>) => boolean;\n    disabled?: (formData: Record<string, any>) => boolean;\n  };\n}\n\nexport interface TextFieldConfig extends BaseFieldConfig {\n  type: 'text';\n  placeholder?: string;\n}\n\nexport interface TextareaFieldConfig extends BaseFieldConfig {\n  type: 'textarea';\n  placeholder?: string;\n  rows?: number;\n  minHeight?: number;\n}\n\nexport interface SelectFieldConfig extends BaseFieldConfig {\n  type: 'select';\n  options?: string[] | { value: string; label: string }[];\n  multi?: boolean;\n  clearable?: boolean;\n  searchable?: boolean;\n  tags?: boolean;\n  placeholder?: string;\n  maxItems?: number;\n  valueKey?: string;\n  nameKey?: string;\n  endpoint?: string;\n  emails?: boolean;\n  getName?: (item: any) => string;\n  flavor?: 'small' | 'large';\n  createArbitraryOption?: (input: string, options: any[]) => any;\n  allowCreate?: boolean;\n}\n\nexport interface KeyValueFieldConfig extends BaseFieldConfig {\n  type: 'key-value';\n  sortable?: boolean;\n  keyPlaceholder?: string;\n  valuePlaceholder?: string;\n  minRows?: number;\n}\n\nexport interface ArrayFieldConfig extends BaseFieldConfig {\n  type: 'array';\n  itemConfig: Record<string, FieldConfig>;\n  sortable?: boolean;\n  minItems?: number;\n  maxItems?: number;\n  itemLabel?: string;\n  onItemChange?: (\n    itemIndex: number,\n    field: string,\n    value: any,\n    allItems: any[]\n  ) => any[];\n  isEmptyItem?: (item: any) => boolean;\n}\n\nexport interface CheckboxFieldConfig extends BaseFieldConfig {\n  type: 'checkbox';\n  size?: number;\n  animateChange?: string;\n}\n\nexport interface MessageEditorFieldConfig extends BaseFieldConfig {\n  type: 'message-editor';\n  placeholder?: string;\n  minHeight?: number;\n  maxAttachments?: number;\n  accept?: string;\n  endpoint?: string;\n  counter?: string;\n  gsm?: boolean;\n  autogrow?: boolean;\n  disableCompletion?: boolean;\n}\n\nexport type FieldConfig =\n  | TextFieldConfig\n  | TextareaFieldConfig\n  | SelectFieldConfig\n  | KeyValueFieldConfig\n  | ArrayFieldConfig\n  | CheckboxFieldConfig\n  | MessageEditorFieldConfig;\n\n// Layout configurations for better form organization\n// Recursive layout system - any layout item can contain other layout items\n\nexport interface FieldItemConfig {\n  type: 'field';\n  field: string; // field name to render\n}\n\nexport interface RowLayoutConfig {\n  type: 'row';\n  items: LayoutItem[]; // can contain fields, groups, or other rows\n  gap?: string; // CSS gap value, defaults to '1rem'\n}\n\nexport interface GroupLayoutConfig {\n  type: 'group';\n  label: string;\n  items: LayoutItem[]; // can contain fields, rows, or other groups\n  collapsible?: boolean;\n  collapsed?: boolean | ((formData: any) => boolean); // initial state if collapsible - can be a function\n  helpText?: string;\n  getGroupValueCount?: (formData: any) => number; // optional function to get count for bubble display\n}\n\nexport type LayoutItem =\n  | FieldItemConfig\n  | RowLayoutConfig\n  | GroupLayoutConfig\n  | string; // string is shorthand for field\n\nexport interface ActionConfig extends FormConfig {\n  name: string;\n  color: string;\n  evaluated?: string[];\n  render?: (node: any, action: any) => TemplateResult;\n\n  form?: Record<string, FieldConfig>;\n  layout?: LayoutItem[]; // optional layout configuration - array of layout items\n\n  toFormData?: (action: Action) => any;\n  fromFormData?: (formData: any) => Action;\n}\n\nexport const COLORS = {\n  send: '#3498db',\n  update: '#01c1af',\n  broadcast: '#8e5ea7',\n  call: '#e68628',\n  create: '#df419f',\n  save: '#1a777c',\n  split: '#aaaaaa',\n  execute: '#666666',\n  wait: '#4d7dad',\n  add: '#309c42',\n  remove: '#e74c3c'\n};\n"]}

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

@@ -2,6 +2,7 @@ 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();
@@ -73,43 +74,17 @@ let TembaArrayEditor = class TembaArrayEditor extends BaseListEditor {
         return currentValue;
     }
     renderField(itemIndex, fieldName, config) {
-        var _a;
         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': {
-                const selectConfig = config;
-                const fieldValue = this.computeFieldValue(itemIndex, fieldName, config);
-                return html `<temba-select
-          class="form-control"
-          ?clearable="${selectConfig.clearable || false}"
-          ?searchable="${selectConfig.searchable || false}"
-          ?tags="${selectConfig.tags || false}"
-          ?multi="${selectConfig.multi || false}"
-          ?emails="${selectConfig.emails || false}"
-          placeholder="${selectConfig.placeholder || ''}"
-          maxItems="${selectConfig.maxItems || 0}"
-          valueKey="${selectConfig.valueKey || 'value'}"
-          nameKey="${selectConfig.nameKey || 'name'}"
-          endpoint="${selectConfig.endpoint || ''}"
-          value="${fieldValue || ''}"
-          flavor="small"
-          @change="${(e) => {
-                    const target = e.target;
-                    let value;
+        // 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) {
@@ -129,28 +104,14 @@ let TembaArrayEditor = class TembaArrayEditor extends BaseListEditor {
                     else {
                         value = target.value;
                     }
-                    this.handleFieldChange(itemIndex, fieldName, value);
-                }}"
-        >
-          ${(_a = selectConfig.options) === null || _a === void 0 ? void 0 : _a.map((option) => {
-                    if (typeof option === 'string') {
-                        return html `<temba-option
-                name="${option}"
-                value="${option}"
-              ></temba-option>`;
-                    }
-                    else {
-                        return html `<temba-option
-                name="${option.label || option.name}"
-                value="${option.value}"
-              ></temba-option>`;
-                    }
-                })}
-        </temba-select>`;
+                }
+                else {
+                    // For other field types, use the target value directly
+                    value = target.value;
+                }
+                this.handleFieldChange(itemIndex, fieldName, value);
             }
-            default:
-                return html `<span>Unsupported field type: ${config.type}</span>`;
-        }
+        });
     }
     renderItem(item, index) {
         const canRemove = this.canRemoveItem(index);
@@ -215,10 +176,6 @@ TembaArrayEditor.styles = css `
       flex: 1;
     }
 
-    .field:first-child {
-      flex: 0 0 140px; /* Fixed width for type dropdown */
-    }
-
     .field label {
       display: block;
       margin-bottom: 4px;

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';\n\n@customElement('temba-array-editor')\nexport class TembaArrayEditor extends BaseListEditor<ListItem> {\n  @property({ type: Object })\n  itemConfig: Record<string, FieldConfig> = {};\n\n  @property({ type: String })\n  itemLabel = 'Item';\n\n  @property({ type: Function })\n  onItemChange?: (\n    itemIndex: number,\n    field: string,\n    value: any,\n    allItems: any[]\n  ) => any[];\n\n  @property({ type: Function })\n  isEmptyItemFn?: (item: any) => boolean;\n\n  @property({ type: Boolean })\n  maintainEmptyItem = true; // Enable by default for better UX\n\n  constructor() {\n    super();\n    this._items = [];\n  }\n\n  // External API\n  @property({ type: Array })\n  get value(): any[] {\n    return [...this._items];\n  }\n\n  set value(newValue: any[]) {\n    this._items = newValue || [];\n    this.requestUpdate();\n  }\n\n  // Implement abstract methods\n  isEmptyItem(item: ListItem): boolean {\n    // Use configurable function if provided\n    if (this.isEmptyItemFn) {\n      return this.isEmptyItemFn(item);\n    }\n\n    // Default behavior: check if all values are empty\n    const values = Object.values(item);\n    if (values.length === 0) {\n      return true;\n    }\n\n    return values.every(\n      (value) => value === undefined || value === null || value === ''\n    );\n  }\n\n  // Override cleanItems to be more permissive for form data\n  protected cleanItems(items: ListItem[]): any {\n    // For runtime attachments, keep items that have at least one non-empty field\n    return items.filter((item) => {\n      const values = Object.values(item);\n      return (\n        values.length > 0 &&\n        values.some(\n          (value) => value !== undefined && value !== null && value !== ''\n        )\n      );\n    });\n  }\n\n  createEmptyItem(): ListItem {\n    return {};\n  }\n\n  protected handleFieldChange(\n    itemIndex: number,\n    fieldName: string,\n    newValue: any\n  ) {\n    let updatedItems: any[];\n\n    if (this.onItemChange) {\n      updatedItems = this.onItemChange(\n        itemIndex,\n        fieldName,\n        newValue,\n        this._items\n      );\n    } else {\n      updatedItems = [...this._items];\n      updatedItems[itemIndex] = {\n        ...updatedItems[itemIndex],\n        [fieldName]: newValue\n      };\n    }\n\n    this.updateValue(updatedItems);\n  }\n\n  private computeFieldValue(\n    itemIndex: number,\n    fieldName: string,\n    config: FieldConfig\n  ): any {\n    const item = this._items[itemIndex] || {};\n    const currentValue = item[fieldName];\n\n    if (config.computeValue) {\n      return config.computeValue(item, currentValue);\n    }\n\n    // For select fields, ensure we return the right type\n    if (config.type === 'select') {\n      const selectConfig = config as SelectFieldConfig;\n      if (currentValue === undefined || currentValue === null) {\n        return selectConfig.multi ? [] : '';\n      }\n    }\n\n    return currentValue;\n  }\n\n  private renderField(\n    itemIndex: number,\n    fieldName: string,\n    config: FieldConfig\n  ): TemplateResult {\n    const computedValue = this.computeFieldValue(itemIndex, fieldName, config);\n\n    switch (config.type) {\n      case 'text':\n        return html`<temba-textinput\n          .value=${computedValue || ''}\n          .placeholder=${config.placeholder}\n          @change=${(e: any) =>\n            this.handleFieldChange(itemIndex, fieldName, e.target.value)}\n        ></temba-textinput>`;\n\n      case 'textarea':\n        return html`<temba-textinput\n          .value=${computedValue || ''}\n          .placeholder=${config.placeholder}\n          textarea\n          .rows=${config.rows || 3}\n          @change=${(e: any) =>\n            this.handleFieldChange(itemIndex, fieldName, e.target.value)}\n        ></temba-textinput>`;\n\n      case 'select': {\n        const selectConfig = config as SelectFieldConfig;\n        const fieldValue = this.computeFieldValue(itemIndex, fieldName, config);\n\n        return html`<temba-select\n          class=\"form-control\"\n          ?clearable=\"${selectConfig.clearable || false}\"\n          ?searchable=\"${selectConfig.searchable || false}\"\n          ?tags=\"${selectConfig.tags || false}\"\n          ?multi=\"${selectConfig.multi || false}\"\n          ?emails=\"${selectConfig.emails || false}\"\n          placeholder=\"${selectConfig.placeholder || ''}\"\n          maxItems=\"${selectConfig.maxItems || 0}\"\n          valueKey=\"${selectConfig.valueKey || 'value'}\"\n          nameKey=\"${selectConfig.nameKey || 'name'}\"\n          endpoint=\"${selectConfig.endpoint || ''}\"\n          value=\"${fieldValue || ''}\"\n          flavor=\"small\"\n          @change=\"${(e: Event) => {\n            const target = e.target as any;\n            let value: any;\n\n            // For temba-select, extract the correct value\n            if (target.tagName === 'TEMBA-SELECT') {\n              if (target.multi || target.emails || target.tags) {\n                value = target.values || [];\n              } else {\n                // Single select: extract value from first selected option\n                const values = target.values || [];\n                value =\n                  values.length > 0 && values[0]\n                    ? values[0].value !== undefined\n                      ? values[0].value\n                      : values[0]\n                    : '';\n              }\n            } else {\n              value = target.value;\n            }\n\n            this.handleFieldChange(itemIndex, fieldName, value);\n          }}\"\n        >\n          ${selectConfig.options?.map((option: any) => {\n            if (typeof option === 'string') {\n              return html`<temba-option\n                name=\"${option}\"\n                value=\"${option}\"\n              ></temba-option>`;\n            } else {\n              return html`<temba-option\n                name=\"${option.label || option.name}\"\n                value=\"${option.value}\"\n              ></temba-option>`;\n            }\n          })}\n        </temba-select>`;\n      }\n\n      default:\n        return html`<span>Unsupported field type: ${config.type}</span>`;\n    }\n  }\n\n  renderItem(item: ListItem, index: number): TemplateResult {\n    const canRemove = this.canRemoveItem(index);\n\n    return html`\n      <div class=\"array-item\">\n        <div class=\"item-fields\">\n          ${Object.entries(this.itemConfig).map(\n            ([fieldName, config]) => html`\n              <div class=\"field\">\n                ${this.renderField(index, fieldName, config)}\n              </div>\n            `\n          )}\n          ${canRemove\n            ? html`\n                <button\n                  @click=${() => this.removeItem(index)}\n                  class=\"remove-btn\"\n                >\n                  <temba-icon name=\"x\"></temba-icon>\n                </button>\n              `\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n\n  protected getContainerClass(): string {\n    return 'array-editor';\n  }\n\n  protected renderAddButton(): TemplateResult {\n    return html`\n      <button class=\"add-btn\" @click=${() => this.addItem()}>\n        Add ${this.itemLabel}\n      </button>\n    `;\n  }\n\n  static styles = css`\n    .array-editor {\n    }\n\n    .array-item {\n    }\n\n    .item-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .item-title {\n      font-weight: 600;\n      color: #333;\n    }\n\n    .item-fields {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .field {\n      flex: 1;\n    }\n\n    .field:first-child {\n      flex: 0 0 140px; /* Fixed width for type dropdown */\n    }\n\n    .field label {\n      display: block;\n      margin-bottom: 4px;\n      font-weight: 500;\n      color: #555;\n      font-size: 14px;\n    }\n\n    .add-btn,\n    .remove-btn {\n      padding: 8px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      background: white;\n      cursor: pointer;\n      font-size: 14px;\n    }\n\n    .add-btn:hover,\n    .remove-btn:hover {\n      background: #f8f8f8;\n    }\n\n    .remove-btn {\n      background: #fefefe;\n      color: #999;\n    }\n  `;\n}\n"]}
+{"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/FieldRenderer.js

@@ -0,0 +1,305 @@
+import { html } from 'lit';
+/**
+ * FieldRenderer provides a consistent way to render field configurations
+ * into web components across different contexts (NodeEditor, ArrayEditor, etc.)
+ */
+export class FieldRenderer {
+    /**
+     * Renders a field based on its configuration
+     * @param fieldName - The name of the field
+     * @param config - The field configuration
+     * @param value - The current value of the field
+     * @param context - Additional context for rendering
+     * @returns A TemplateResult for the rendered field
+     */
+    static renderField(fieldName, config, value, context = {}) {
+        /*const {
+          errors = [],
+          onChange,
+          showLabel = true,
+          flavor,
+          extraClasses = '',
+          style = ''
+        } = context;*/
+        switch (config.type) {
+            case 'text':
+                return FieldRenderer.renderTextInput(fieldName, config, value, context);
+            case 'textarea':
+                return FieldRenderer.renderTextarea(fieldName, config, value, context);
+            case 'select':
+                return FieldRenderer.renderSelect(fieldName, config, value, context);
+            case 'checkbox':
+                return FieldRenderer.renderCheckbox(fieldName, config, value, context);
+            case 'key-value':
+                return FieldRenderer.renderKeyValue(fieldName, config, value, context);
+            case 'array':
+                return FieldRenderer.renderArray(fieldName, config, value, context);
+            case 'message-editor':
+                return FieldRenderer.renderMessageEditor(fieldName, config, value, context);
+            default:
+                return html `<div>Unsupported field type: ${config.type}</div>`;
+        }
+    }
+    static renderTextInput(fieldName, config, value, context) {
+        const { errors = [], onChange, showLabel = true, extraClasses, style } = context;
+        // If field supports expression evaluation, use temba-completion
+        if (config.evaluated) {
+            return html `<temba-completion
+        name="${fieldName}"
+        label="${showLabel ? config.label : ''}"
+        ?required="${config.required}"
+        .errors="${errors}"
+        .value="${value || ''}"
+        placeholder="${config.placeholder || ''}"
+        expressions="session"
+        .helpText="${config.helpText || ''}"
+        class="${extraClasses}"
+        style="${style}"
+        @input="${onChange || (() => { })}"
+      ></temba-completion>`;
+        }
+        return html `<temba-textinput
+      name="${fieldName}"
+      label="${showLabel ? config.label : ''}"
+      ?required="${config.required}"
+      .errors="${errors}"
+      .value="${value || ''}"
+      placeholder="${config.placeholder || ''}"
+      .helpText="${config.helpText || ''}"
+      class="${extraClasses}"
+      style="${style}"
+      @input="${onChange || (() => { })}"
+    ></temba-textinput>`;
+    }
+    static renderTextarea(fieldName, config, value, context) {
+        const { errors = [], onChange, showLabel = true, extraClasses, style } = context;
+        const minHeightStyle = config.minHeight
+            ? `--textarea-min-height: ${config.minHeight}px;`
+            : '';
+        const combinedStyle = `${minHeightStyle}${style}`;
+        // If field supports expression evaluation, use temba-completion
+        if (config.evaluated) {
+            return html `<temba-completion
+        name="${fieldName}"
+        label="${showLabel ? config.label : ''}"
+        ?required="${config.required}"
+        .errors="${errors}"
+        .value="${value || ''}"
+        placeholder="${config.placeholder || ''}"
+        textarea
+        expressions="session"
+        .helpText="${config.helpText || ''}"
+        class="${extraClasses}"
+        style="${combinedStyle}"
+        @input="${onChange || (() => { })}"
+      ></temba-completion>`;
+        }
+        return html `<temba-textinput
+      name="${fieldName}"
+      label="${showLabel ? config.label : ''}"
+      ?required="${config.required}"
+      .errors="${errors}"
+      .value="${value || ''}"
+      placeholder="${config.placeholder || ''}"
+      textarea
+      .rows="${config.rows || 3}"
+      .helpText="${config.helpText || ''}"
+      class="${extraClasses}"
+      style="${combinedStyle}"
+      @input="${onChange || (() => { })}"
+    ></temba-textinput>`;
+    }
+    static renderSelect(fieldName, config, value, context) {
+        var _a, _b;
+        const { errors = [], onChange, showLabel = true, flavor, extraClasses, style } = context;
+        // Ensure proper value handling for multi vs single select
+        const normalizedValue = (() => {
+            if (config.multi) {
+                // Multi-select: ensure we have an array and convert strings to option objects
+                const valueArray = Array.isArray(value) ? value : value ? [value] : [];
+                return valueArray.map((val) => {
+                    if (typeof val === 'string') {
+                        // Convert string values to option objects
+                        return { name: val, value: val };
+                    }
+                    return val;
+                });
+            }
+            else {
+                // Single select: use the value as-is
+                return value || '';
+            }
+        })();
+        if (typeof normalizedValue === 'string') {
+            return html `<temba-select
+        name="${fieldName}"
+        ?required="${config.required}"
+        .errors="${errors}"
+        value="${config.multi ? '' : normalizedValue}"
+        .values="${config.multi ? normalizedValue : undefined}"
+        ?multi="${config.multi}"
+        ?searchable="${config.searchable}"
+        ?tags="${config.tags}"
+        ?emails="${config.emails}"
+        ?clearable="${config.clearable || false}"
+        label="${showLabel ? config.label : ''}"
+        placeholder="${config.placeholder || ''}"
+        maxItems="${config.maxItems || 0}"
+        valueKey="${config.valueKey || 'value'}"
+        nameKey="${config.nameKey || 'name'}"
+        endpoint="${config.endpoint || ''}"
+        .helpText="${config.helpText || ''}"
+        flavor="${flavor || config.flavor || 'small'}"
+        class="${extraClasses}"
+        style="${style}"
+        .getName=${config.getName}
+        .createArbitraryOption=${config.createArbitraryOption}
+        ?allowCreate="${config.allowCreate || false}"
+        @change="${onChange || (() => { })}"
+      >
+        ${(_a = config.options) === null || _a === void 0 ? void 0 : _a.map((option) => {
+                if (typeof option === 'string') {
+                    return html `<temba-option
+              name="${option}"
+              value="${option}"
+            ></temba-option>`;
+                }
+                else {
+                    return html `<temba-option
+              name="${option.label || option.name}"
+              value="${option.value}"
+            ></temba-option>`;
+                }
+            })}
+      </temba-select>`;
+        }
+        return html `<temba-select
+      name="${fieldName}"
+      label="${showLabel ? config.label : ''}"
+      ?required="${config.required}"
+      .errors="${errors}"
+      .values="${normalizedValue}"
+      ?multi="${config.multi}"
+      ?searchable="${config.searchable}"
+      ?tags="${config.tags}"
+      ?emails="${config.emails}"
+      ?clearable="${config.clearable || false}"
+      placeholder="${config.placeholder || ''}"
+      maxItems="${config.maxItems || 0}"
+      valueKey="${config.valueKey || 'value'}"
+      nameKey="${config.nameKey || 'name'}"
+      endpoint="${config.endpoint || ''}"
+      .helpText="${config.helpText || ''}"
+      flavor="${flavor || config.flavor || 'small'}"
+      class="${extraClasses}"
+      style="${style}"
+      .getName=${config.getName}
+      .createArbitraryOption=${config.createArbitraryOption}
+      ?allowCreate="${config.allowCreate || false}"
+      @change="${onChange || (() => { })}"
+    >
+      ${(_b = config.options) === null || _b === void 0 ? void 0 : _b.map((option) => {
+            if (typeof option === 'string') {
+                return html `<temba-option
+            name="${option}"
+            value="${option}"
+          ></temba-option>`;
+            }
+            else {
+                return html `<temba-option
+            name="${option.label || option.name}"
+            value="${option.value}"
+          ></temba-option>`;
+            }
+        })}
+    </temba-select>`;
+    }
+    static renderCheckbox(fieldName, config, value, context) {
+        const { errors = [], onChange, extraClasses, style } = context;
+        return html `<div class="form-field">
+      <temba-checkbox
+        name="${fieldName}"
+        label="${config.label}"
+        .helpText="${config.helpText || ''}"
+        ?required="${config.required}"
+        .errors="${errors}"
+        ?checked="${value || false}"
+        size="${config.size || 1.2}"
+        animateChange="${config.animateChange || 'pulse'}"
+        class="${extraClasses}"
+        style="${style}"
+        @change="${onChange || (() => { })}"
+      ></temba-checkbox>
+      ${errors.length
+            ? html `<div class="field-errors">${errors.join(', ')}</div>`
+            : ''}
+    </div>`;
+    }
+    static renderKeyValue(fieldName, config, value, context) {
+        const { errors = [], onChange, showLabel = true, extraClasses, style } = context;
+        return html `<div class="form-field">
+      ${showLabel ? html `<label>${config.label}</label>` : ''}
+      <temba-key-value-editor
+        name="${fieldName}"
+        .value="${value || []}"
+        .sortable="${config.sortable}"
+        .keyPlaceholder="${config.keyPlaceholder || 'Key'}"
+        .valuePlaceholder="${config.valuePlaceholder || 'Value'}"
+        .minRows="${config.minRows || 0}"
+        class="${extraClasses}"
+        style="${style}"
+        @change="${onChange || (() => { })}"
+      ></temba-key-value-editor>
+      ${errors.length
+            ? html `<div class="field-errors">${errors.join(', ')}</div>`
+            : ''}
+    </div>`;
+    }
+    static renderArray(fieldName, config, value, context) {
+        const { errors = [], onChange, showLabel = true, extraClasses, style } = context;
+        return html `<div class="form-field">
+      ${showLabel ? html `<label>${config.label}</label>` : ''}
+      <temba-array-editor
+        .value="${value || []}"
+        .itemConfig="${config.itemConfig}"
+        .sortable="${config.sortable}"
+        .itemLabel="${config.itemLabel || 'Item'}"
+        .minItems="${config.minItems || 0}"
+        .maxItems="${config.maxItems || 0}"
+        .onItemChange="${config.onItemChange}"
+        .isEmptyItemFn="${config.isEmptyItem}"
+        class="${extraClasses}"
+        style="${style}"
+        @change="${onChange || (() => { })}"
+      ></temba-array-editor>
+      ${errors.length
+            ? html `<div class="field-errors">${errors.join(', ')}</div>`
+            : ''}
+    </div>`;
+    }
+    static renderMessageEditor(fieldName, config, value, context) {
+        const { errors = [], onChange, showLabel = true, extraClasses, style, additionalData = {} } = context;
+        return html `<temba-message-editor
+      name="${fieldName}"
+      label="${showLabel ? config.label : ''}"
+      ?required="${config.required}"
+      .errors="${errors}"
+      .value="${value || ''}"
+      .attachments="${additionalData.attachments || []}"
+      placeholder="${config.placeholder || ''}"
+      .helpText="${config.helpText || ''}"
+      ?autogrow="${config.autogrow}"
+      ?gsm="${config.gsm}"
+      ?disableCompletion="${config.disableCompletion}"
+      counter="${config.counter || ''}"
+      accept="${config.accept || ''}"
+      endpoint="${config.endpoint || ''}"
+      max-attachments="${config.maxAttachments || 3}"
+      minHeight="${config.minHeight || 60}"
+      class="${extraClasses}"
+      style="${style}"
+      @change="${onChange || (() => { })}"
+    ></temba-message-editor>`;
+    }
+}
+//# sourceMappingURL=FieldRenderer.js.map