@nyaruka/temba-components 0.129.8 → 0.129.10

package/src/flow/types.ts

@@ -1,5 +1,5 @@
 import { TemplateResult } from 'lit-html';
-import { Action } from '../store/flow-definition';
+import { Action, Node } from '../store/flow-definition';
 
 export interface ValidationResult {
   valid: boolean;
@@ -65,39 +65,16 @@ export interface SliderAttributes {
   range?: boolean;
 }
 
-// Widget configuration using discriminated union for type safety
-export type WidgetConfig =
-  | { type: 'temba-textinput'; attributes?: TextInputAttributes }
-  | { type: 'temba-completion'; attributes?: CompletionAttributes }
-  | { type: 'temba-select'; attributes?: SelectAttributes }
-  | { type: 'temba-checkbox'; attributes?: CheckboxAttributes }
-  | { type: 'temba-slider'; attributes?: SliderAttributes }
-  | { type: string; attributes?: { [key: string]: any } }; // Generic fallback
+export interface FormData extends Record<string, any> {}
 
-// Property configuration with the clean structure you want
-export interface PropertyConfig {
-  // Form field metadata
-  label?: string;
-  helpText?: string;
-  required?: boolean;
-  maxLength?: number;
-  minLength?: number;
-  pattern?: string;
-
-  // Widget configuration
-  widget: WidgetConfig;
-
-  // Conditional behavior based on other field values
-  conditions?: {
-    // When to show this field
-    visible?: (formData: any) => boolean;
-
-    // When this field is disabled
-    disabled?: (formData: any) => boolean;
-  };
+export interface FormConfig {
+  form?: Record<string, FieldConfig>;
+  layout?: LayoutItem[];
+  sanitize?: (formData: FormData) => void;
+  validate?: (formData: FormData) => ValidationResult;
 }
 
-export interface NodeConfig {
+export interface NodeConfig extends FormConfig {
   type: string;
   name?: string;
   color?: string;
@@ -108,22 +85,28 @@ export interface NodeConfig {
     operand?: string;
     configurable?: boolean; // can the rules be configured in the UI
     rules?: {
-      type: 'has_number_between' | 'has_string' | 'has_value' | 'has_not_value';
+      type:
+        | 'has_number_between'
+        | 'has_string'
+        | 'has_value'
+        | 'has_not_value'
+        | 'has_text';
       arguments: string[];
       categoryName: string;
     }[];
   };
-  properties?: { [key: string]: PropertyConfig };
-  toFormData?: (node: any) => any;
-  fromFormData?: (formData: any, originalNode: any) => any;
+
+  toFormData?: (node: Node) => FormData;
+  fromFormData?: (formData: FormData, originalNode: Node) => Node;
+  render?: (node: Node) => TemplateResult;
 }
 
 // New field configuration system for generic form generation
 export interface BaseFieldConfig {
   label?: string;
   required?: boolean;
-  evaluated?: boolean; // if this field supports expression evaluation
-  dependsOn?: string[]; // fields this field depends on
+  evaluated?: boolean;
+  dependsOn?: string[];
   computeValue?: (
     values: Record<string, any>,
     currentValue: any,
@@ -137,7 +120,7 @@ export interface BaseFieldConfig {
   helpText?: string;
 
   // Layout properties
-  maxWidth?: string; // CSS max-width value (e.g., '200px', '50%', '10rem')
+  maxWidth?: string;
 
   // Conditional rendering
   conditions?: {
@@ -160,7 +143,7 @@ export interface TextareaFieldConfig extends BaseFieldConfig {
 
 export interface SelectFieldConfig extends BaseFieldConfig {
   type: 'select';
-  options: string[] | { value: string; label: string }[];
+  options?: string[] | { value: string; label: string }[];
   multi?: boolean;
   clearable?: boolean;
   searchable?: boolean;
@@ -171,7 +154,10 @@ export interface SelectFieldConfig extends BaseFieldConfig {
   nameKey?: string;
   endpoint?: string;
   emails?: boolean;
+  getName?: (item: any) => string;
   flavor?: 'small' | 'large';
+  createArbitraryOption?: (input: string, options: any[]) => any;
+  allowCreate?: boolean;
 }
 
 export interface KeyValueFieldConfig extends BaseFieldConfig {
@@ -256,7 +242,7 @@ export type LayoutItem =
   | GroupLayoutConfig
   | string; // string is shorthand for field
 
-export interface ActionConfig {
+export interface ActionConfig extends FormConfig {
   name: string;
   color: string;
   evaluated?: string[];
@@ -265,13 +251,8 @@ export interface ActionConfig {
   form?: Record<string, FieldConfig>;
   layout?: LayoutItem[]; // optional layout configuration - array of layout items
 
-  // Action editor configuration (legacy)
-  // Form-level transformations
-  sanitize?: (formData: any) => any;
   toFormData?: (action: Action) => any;
   fromFormData?: (formData: any) => Action;
-
-  validate?: (action: Action) => ValidationResult;
 }
 
 export const COLORS = {
@@ -287,85 +268,3 @@ export const COLORS = {
   add: '#309c42',
   remove: '#e74c3c'
 };
-
-// Default property type mappings
-export function getDefaultComponent(value: any): WidgetConfig['type'] {
-  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: any): PropertyConfig {
-  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: WidgetConfig
-): config is { type: 'temba-textinput'; attributes?: TextInputAttributes } {
-  return config.type === 'temba-textinput';
-}
-
-export function isCompletionWidget(
-  config: WidgetConfig
-): config is { type: 'temba-completion'; attributes?: CompletionAttributes } {
-  return config.type === 'temba-completion';
-}
-
-export function isSelectWidget(
-  config: WidgetConfig
-): config is { type: 'temba-select'; attributes?: SelectAttributes } {
-  return config.type === 'temba-select';
-}
-
-export function isCheckboxWidget(
-  config: WidgetConfig
-): config is { type: 'temba-checkbox'; attributes?: CheckboxAttributes } {
-  return config.type === 'temba-checkbox';
-}
-
-export function isSliderWidget(
-  config: WidgetConfig
-): config is { type: 'slider'; attributes?: SliderAttributes } {
-  return config.type === 'temba-slider';
-}

package/src/form/ArrayEditor.ts

@@ -2,6 +2,7 @@ import { html, css, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 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> {
@@ -125,94 +126,49 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
     return currentValue;
   }
 
-  private renderField(
+  private renderArrayField(
     itemIndex: number,
     fieldName: string,
     config: FieldConfig
   ): 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': {
-        const selectConfig = config as SelectFieldConfig;
-        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: Event) => {
-            const target = e.target as any;
-            let value: any;
-
-            // 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]
-                    : '';
-              }
+    // 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 {
-              value = target.value;
+              // 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]
+                  : '';
             }
-
-            this.handleFieldChange(itemIndex, fieldName, value);
-          }}"
-        >
-          ${selectConfig.options?.map((option: any) => {
-            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 {
+            value = target.value;
+          }
+        } 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: ListItem, index: number): TemplateResult {
@@ -224,7 +180,7 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
           ${Object.entries(this.itemConfig).map(
             ([fieldName, config]) => html`
               <div class="field">
-                ${this.renderField(index, fieldName, config)}
+                ${this.renderArrayField(index, fieldName, config)}
               </div>
             `
           )}
@@ -247,72 +203,56 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
     return 'array-editor';
   }
 
-  protected renderAddButton(): TemplateResult {
-    return html`
-      <button class="add-btn" @click=${() => this.addItem()}>
-        Add ${this.itemLabel}
-      </button>
-    `;
-  }
+  static get styles() {
+    return css`
+      ${super.styles}
 
-  static styles = css`
-    .array-editor {
-    }
-
-    .array-item {
-    }
-
-    .item-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
+      .array-editor {
+      }
 
-    .item-title {
-      font-weight: 600;
-      color: #333;
-    }
+      .array-item {
+      }
 
-    .item-fields {
-      display: flex;
-      gap: 12px;
-      align-items: center;
-    }
+      .item-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
 
-    .field {
-      flex: 1;
-    }
+      .item-title {
+        font-weight: 600;
+        color: #333;
+      }
 
-    .field:first-child {
-      flex: 0 0 140px; /* Fixed width for type dropdown */
-    }
+      .item-fields {
+        display: flex;
+        gap: 12px;
+        align-items: center;
+      }
 
-    .field label {
-      display: block;
-      margin-bottom: 4px;
-      font-weight: 500;
-      color: #555;
-      font-size: 14px;
-    }
+      .field {
+        flex: 1;
+      }
 
-    .add-btn,
-    .remove-btn {
-      padding: 8px;
-      border: 1px solid #ccc;
-      border-radius: 4px;
-      background: white;
-      cursor: pointer;
-      font-size: 14px;
-    }
+      .add-btn,
+      .remove-btn {
+        padding: 8px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        background: white;
+        cursor: pointer;
+        font-size: 14px;
+      }
 
-    .add-btn:hover,
-    .remove-btn:hover {
-      background: #f8f8f8;
-    }
+      .add-btn:hover,
+      .remove-btn:hover {
+        background: #f8f8f8;
+      }
 
-    .remove-btn {
-      background: #fefefe;
-      color: #999;
-    }
-  `;
+      .remove-btn {
+        background: #fefefe;
+        color: #999;
+      }
+    `;
+  }
 }

package/src/form/BaseListEditor.ts

@@ -1,5 +1,6 @@
-import { LitElement, TemplateResult, html } from 'lit';
+import { TemplateResult, html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { FieldElement } from './FieldElement';
 
 export interface ListItem {
   [key: string]: any;
@@ -22,7 +23,7 @@ export interface ListEditorConfig {
 
 export abstract class BaseListEditor<
   T extends ListItem = ListItem
-> extends LitElement {
+> extends FieldElement {
   @property({ attribute: false })
   protected _items: T[] = [];
 
@@ -60,9 +61,8 @@ export abstract class BaseListEditor<
     return !this.maxItems || this._items.length < this.maxItems;
   }
 
-  render(): TemplateResult {
+  renderWidget(): TemplateResult {
     const items = this.displayItems;
-
     return html`
       <div class=${this.getContainerClass()}>
         <div

package/src/form/Checkbox.ts

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