@nyaruka/temba-components 0.129.8 → 0.129.9

package/src/form/FieldRenderer.ts

@@ -0,0 +1,465 @@
+import { html, TemplateResult } from 'lit';
+import {
+  FieldConfig,
+  TextFieldConfig,
+  TextareaFieldConfig,
+  SelectFieldConfig,
+  CheckboxFieldConfig,
+  MessageEditorFieldConfig,
+  KeyValueFieldConfig,
+  ArrayFieldConfig
+} from '../flow/types';
+
+/**
+ * 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: string,
+    config: FieldConfig,
+    value: any,
+    context: FieldRenderContext = {}
+  ): TemplateResult {
+    /*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 as TextareaFieldConfig,
+          value,
+          context
+        );
+
+      case 'select':
+        return FieldRenderer.renderSelect(
+          fieldName,
+          config as SelectFieldConfig,
+          value,
+          context
+        );
+
+      case 'checkbox':
+        return FieldRenderer.renderCheckbox(
+          fieldName,
+          config as CheckboxFieldConfig,
+          value,
+          context
+        );
+
+      case 'key-value':
+        return FieldRenderer.renderKeyValue(
+          fieldName,
+          config as KeyValueFieldConfig,
+          value,
+          context
+        );
+
+      case 'array':
+        return FieldRenderer.renderArray(
+          fieldName,
+          config as ArrayFieldConfig,
+          value,
+          context
+        );
+
+      case 'message-editor':
+        return FieldRenderer.renderMessageEditor(
+          fieldName,
+          config as MessageEditorFieldConfig,
+          value,
+          context
+        );
+
+      default:
+        return html`<div>Unsupported field type: ${(config as any).type}</div>`;
+    }
+  }
+
+  private static renderTextInput(
+    fieldName: string,
+    config: TextFieldConfig,
+    value: any,
+    context: FieldRenderContext
+  ): TemplateResult {
+    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>`;
+  }
+
+  private static renderTextarea(
+    fieldName: string,
+    config: TextareaFieldConfig,
+    value: any,
+    context: FieldRenderContext
+  ): TemplateResult {
+    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>`;
+  }
+
+  private static renderSelect(
+    fieldName: string,
+    config: SelectFieldConfig,
+    value: any,
+    context: FieldRenderContext
+  ): TemplateResult {
+    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 || (() => {})}"
+      >
+        ${config.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>`;
+    }
+
+    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 || (() => {})}"
+    >
+      ${config.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>`;
+  }
+
+  private static renderCheckbox(
+    fieldName: string,
+    config: CheckboxFieldConfig,
+    value: any,
+    context: FieldRenderContext
+  ): TemplateResult {
+    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>`;
+  }
+
+  private static renderKeyValue(
+    fieldName: string,
+    config: KeyValueFieldConfig,
+    value: any,
+    context: FieldRenderContext
+  ): TemplateResult {
+    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>`;
+  }
+
+  private static renderArray(
+    fieldName: string,
+    config: ArrayFieldConfig,
+    value: any,
+    context: FieldRenderContext
+  ): TemplateResult {
+    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>`;
+  }
+
+  private static renderMessageEditor(
+    fieldName: string,
+    config: MessageEditorFieldConfig,
+    value: any,
+    context: FieldRenderContext
+  ): TemplateResult {
+    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>`;
+  }
+}
+
+/**
+ * Context object for field rendering that provides additional options
+ */
+export interface FieldRenderContext {
+  /** Array of error messages for the field */
+  errors?: string[];
+  /** Change event handler */
+  onChange?: (event: Event) => void;
+  /** Whether to show the field label */
+  showLabel?: boolean;
+  /** Flavor for components that support it (like temba-select) */
+  flavor?: string;
+  /** Additional CSS classes to apply */
+  extraClasses?: string;
+  /** Additional CSS styles to apply */
+  style?: string;
+  /** Additional data needed for specific field types */
+  additionalData?: Record<string, any>;
+}

package/src/form/FormField.ts

@@ -1,6 +1,6 @@
 import { TemplateResult, html, css, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import { renderMarkdown } from '../markdown';
+import { renderMarkdownInline } from '../markdown';
 
 /**
  * A small wrapper to display labels and help text in a smartmin style.
@@ -196,7 +196,7 @@ export class FormField extends LitElement {
     const errors = hasErrors
       ? this.errors.map((error: string) => {
           return html`
-            <div class="alert-error">${renderMarkdown(error)}</div>
+            <div class="alert-error">${renderMarkdownInline(error)}</div>
           `;
         })
       : [];
@@ -228,7 +228,7 @@ export class FormField extends LitElement {
         ${this.helpText && this.helpText !== 'None'
           ? html`
               <div class="help-text ${this.helpAlways ? 'help-always' : null}">
-                ${this.helpText}
+                ${renderMarkdownInline(this.helpText)}
               </div>
             `
           : null}

package/src/form/TextInput.ts

@@ -193,7 +193,7 @@ export class TextInput extends FormElement {
 
     this.inputElement = this.shadowRoot.querySelector('.textinput');
 
-    if (changes.has('counter')) {
+    if (changes.has('counter') && this.counter && this.counter.trim()) {
       let root = this.getParentModax() as any;
       if (root) {
         root = root.shadowRoot;

package/src/form/select/Select.ts

@@ -222,6 +222,7 @@ export class Select<T extends SelectOption> extends FormElement {
 
       .multi temba-sortable-list {
         margin: 0 !important;
+        flex-grow: 1;
       }
 
       input {
@@ -255,6 +256,12 @@ export class Select<T extends SelectOption> extends FormElement {
 
       .multi .input-wrapper {
         margin-left: 2px !important;
+        margin-right: 2px !important;
+        margin-top: 2px;
+        margin-bottom: 2px;
+        flex-shrink: 0;
+        min-width: 100px;
+        align-self: center;
       }
 
       .input-wrapper:focus-within .placeholder {
@@ -290,11 +297,6 @@ export class Select<T extends SelectOption> extends FormElement {
         box-shadow: none !important;
       }
 
-      .multi .input-wrapper {
-        flex-shrink: 0;
-        min-width: 100px;
-      }
-
       .input-wrapper .searchbox {
       }
 
@@ -310,6 +312,17 @@ export class Select<T extends SelectOption> extends FormElement {
         margin-left: 6px;
       }
 
+      .empty .placeholder {
+        display: block;
+      }
+
+      .multi .placeholder {
+        display: block;
+        margin: 2px 2px;
+        padding: 2px 8px;
+        align-self: center;
+      }
+
       .footer {
         padding: 5px 10px;
         background: var(--color-primary-light);
@@ -322,7 +335,7 @@ export class Select<T extends SelectOption> extends FormElement {
       .small {
         --temba-select-selected-padding: 6px;
         --temba-select-selected-line-height: 12px;
-        --temba-select-selected-font-size: 12px;
+        --temba-select-selected-font-size: 14px;
         --temba-select-min-height: 2.28em;
       }
 
@@ -476,15 +489,26 @@ export class Select<T extends SelectOption> extends FormElement {
   @property({ type: String, attribute: 'info_text' })
   infoText = '';
 
+  // Override the setter to ensure values is always an array
   @property({ type: Array })
-  values: T[] = [];
+  set values(newValues: any) {
+    this._values = Array.isArray(newValues) ? newValues : [];
+    this.requestUpdate('values');
+  }
+
+  get values(): T[] {
+    return this._values || [];
+  }
+
+  private _values: T[] = [];
 
   @property({ type: Object })
   selection: any;
 
   @property({ attribute: false })
-  getName: (option: any) => string = (option: any) =>
-    option[this.nameKey || 'name'];
+  getName: (option: any) => string = (option: any) => {
+    return option[this.nameKey || 'name'];
+  };
 
   @property({ attribute: false })
   isMatch: (option: any, q: string) => boolean = this.isMatchDefault;
@@ -545,7 +569,7 @@ export class Select<T extends SelectOption> extends FormElement {
   private alphaSort = (a: any, b: any) => {
     // by default, all endpoint values are sorted by name
     if (this.endpoint) {
-      return this.getName(a).localeCompare(this.getName(b));
+      return this.getNameInternal(a).localeCompare(this.getNameInternal(b));
     }
     return 0;
   };
@@ -573,7 +597,7 @@ export class Select<T extends SelectOption> extends FormElement {
   }
 
   public isMatchDefault(option: T, q: string) {
-    const name = this.getName(option) || '';
+    const name = this.getNameInternal(option) || '';
     return name.toLowerCase().indexOf(q) > -1;
   }
 
@@ -963,7 +987,9 @@ export class Select<T extends SelectOption> extends FormElement {
   }
 
   protected getNameInternal: (option: T) => string = (option: T) => {
-    return this.getName(option);
+    return this.getName
+      ? this.getName(option)
+      : option[this.nameKey || 'name'] || '';
   };
 
   private getOptionsDefault(response: WebResponse): any[] {
@@ -1493,7 +1519,7 @@ export class Select<T extends SelectOption> extends FormElement {
               name="${icon}"
               style="margin-right:0.5em;"
             ></temba-icon>`
-          : null}<span>${this.getName(option)}</span>
+          : null}<span>${this.getNameInternal(option)}</span>
       </div>
     `;
   }
@@ -1636,9 +1662,13 @@ export class Select<T extends SelectOption> extends FormElement {
 
   public render(): TemplateResult {
     const placeholder = this.values.length === 0 ? this.placeholder : '';
-    const placeholderDiv = html`
-      <div class="placeholder">${placeholder}</div>
-    `;
+
+    // Single unified placeholder - shows when empty and (not focused OR not searchable)
+    const shouldShowPlaceholder =
+      this.values.length === 0 && (!this.focused || !this.searchable);
+    const placeholderElement = shouldShowPlaceholder
+      ? html`<div class="placeholder">${placeholder}</div>`
+      : null;
 
     const clear =
       this.clearable && this.values.length > 0 && !this.isMultiMode
@@ -1683,10 +1713,9 @@ export class Select<T extends SelectOption> extends FormElement {
               .value=${this.input}
             />
             <div id="anchor" style=${styleMap(anchorStyles)}></div>
-            ${placeholderDiv}
           </div>
         `
-      : placeholderDiv;
+      : null;
 
     const items = html`${!this.isMultiMode && !this.resolving ? input : null}
     ${this.isMultiMode && this.values.length > 1
@@ -1760,9 +1789,10 @@ export class Select<T extends SelectOption> extends FormElement {
                 </div>
               `
             )}
+            ${this.searchable && this.focused ? input : null}
           </temba-sortable-list>
         `
-      : this.values.map(
+      : html`${this.values.map(
           (selected: any, index: number) => html`
             <div
               class="selected-item ${index === this.selectedIndex
@@ -1811,7 +1841,8 @@ export class Select<T extends SelectOption> extends FormElement {
             </div>
           `
         )}
-    ${this.isMultiMode ? input : null}`;
+        ${this.isMultiMode && this.searchable && this.focused ? input : null}
+        ${placeholderElement}`}`;
 
     return html`