@nyaruka/temba-components 0.130.1 → 0.130.2

package/src/flow/operators.ts

@@ -0,0 +1,215 @@
+// Flow router operator configurations
+// These define the available operators for rule-based routing in flow nodes
+
+export interface OperatorConfig {
+  type: string;
+  name: string;
+  operands: number; // Number of operands required (0 = no input needed, 1 = single value, 2 = two values)
+  categoryName?: string; // Default category name when operands is 0
+  visibility?: 'hidden' | 'visible'; // Whether to show in UI
+  filter?: string; // Feature filter requirement
+}
+
+// All available operators for flow routing
+export const OPERATORS: OperatorConfig[] = [
+  // Text operators
+  {
+    type: 'has_any_word',
+    name: 'has any of the words',
+    operands: 1
+  },
+  {
+    type: 'has_all_words',
+    name: 'has all of the words',
+    operands: 1
+  },
+  {
+    type: 'has_phrase',
+    name: 'has the phrase',
+    operands: 1
+  },
+  {
+    type: 'has_only_phrase',
+    name: 'has only the phrase',
+    operands: 1
+  },
+  {
+    type: 'has_beginning',
+    name: 'starts with',
+    operands: 1
+  },
+  {
+    type: 'has_text',
+    name: 'has some text',
+    operands: 0,
+    categoryName: 'Has Text'
+  },
+  {
+    type: 'has_pattern',
+    name: 'matches regex',
+    operands: 1
+  },
+
+  // Number operators
+  {
+    type: 'has_number',
+    name: 'has a number',
+    operands: 0,
+    categoryName: 'Has Number'
+  },
+  {
+    type: 'has_number_between',
+    name: 'has a number between',
+    operands: 2
+  },
+  {
+    type: 'has_number_lt',
+    name: 'has a number below',
+    operands: 1
+  },
+  {
+    type: 'has_number_lte',
+    name: 'has a number at or below',
+    operands: 1
+  },
+  {
+    type: 'has_number_eq',
+    name: 'has a number equal to',
+    operands: 1
+  },
+  {
+    type: 'has_number_gte',
+    name: 'has a number at or above',
+    operands: 1
+  },
+  {
+    type: 'has_number_gt',
+    name: 'has a number above',
+    operands: 1
+  },
+
+  // Date operators
+  {
+    type: 'has_date',
+    name: 'has a date',
+    operands: 0,
+    categoryName: 'Has Date'
+  },
+  {
+    type: 'has_date_lt',
+    name: 'has a date before',
+    operands: 1
+  },
+  {
+    type: 'has_date_eq',
+    name: 'has a date equal to',
+    operands: 1
+  },
+  {
+    type: 'has_date_gt',
+    name: 'has a date after',
+    operands: 1
+  },
+  {
+    type: 'has_time',
+    name: 'has a time',
+    operands: 0,
+    categoryName: 'Has Time'
+  },
+
+  // Contact data operators
+  {
+    type: 'has_phone',
+    name: 'has a phone number',
+    operands: 0,
+    categoryName: 'Has Phone'
+  },
+  {
+    type: 'has_email',
+    name: 'has an email',
+    operands: 0,
+    categoryName: 'Has Email'
+  },
+
+  // Location operators (require location feature)
+  {
+    type: 'has_state',
+    name: 'has state',
+    operands: 0,
+    categoryName: 'Has State',
+    filter: 'HAS_LOCATIONS'
+  },
+  {
+    type: 'has_district',
+    name: 'has district',
+    operands: 1,
+    categoryName: 'Has District',
+    filter: 'HAS_LOCATIONS'
+  },
+  {
+    type: 'has_ward',
+    name: 'has ward',
+    operands: 2,
+    categoryName: 'Has Ward',
+    filter: 'HAS_LOCATIONS'
+  },
+
+  // Hidden/system operators
+  {
+    type: 'has_group',
+    name: 'is in the group',
+    operands: 1,
+    visibility: 'hidden'
+  },
+  {
+    type: 'has_category',
+    name: 'has the category',
+    operands: 0,
+    visibility: 'hidden'
+  },
+  {
+    type: 'has_error',
+    name: 'has an error',
+    operands: 0,
+    categoryName: 'Has Error',
+    visibility: 'hidden'
+  },
+  {
+    type: 'has_value',
+    name: 'is not empty',
+    operands: 0,
+    categoryName: 'Not Empty',
+    visibility: 'hidden'
+  }
+];
+
+// Get operators suitable for wait_for_response rules
+export const getWaitForResponseOperators = (): OperatorConfig[] => {
+  return OPERATORS.filter(
+    (op) => op.visibility !== 'hidden' && !op.filter // For now, exclude location operators unless we support feature detection
+  );
+};
+
+// Get operator configuration by type
+export const getOperatorConfig = (type: string): OperatorConfig | undefined => {
+  return OPERATORS.find((op) => op.type === type);
+};
+
+// Convert operators to select options
+export const operatorsToSelectOptions = (operators: OperatorConfig[]) => {
+  return operators.map((op) => ({
+    value: op.type,
+    name: op.name
+  }));
+};
+
+// Create an operator object for select components
+export const createOperatorOption = (
+  type: string
+): { value: string; name: string } => {
+  const config = getOperatorConfig(type);
+  return {
+    value: type,
+    name: config ? config.name : type
+  };
+};

package/src/flow/types.ts

@@ -70,6 +70,7 @@ export interface FormData extends Record<string, any> {}
 export interface FormConfig {
   form?: Record<string, FieldConfig>;
   layout?: LayoutItem[];
+  gutter?: LayoutItem[];
   sanitize?: (formData: FormData) => void;
   validate?: (formData: FormData) => ValidationResult;
 }
@@ -78,6 +79,7 @@ export interface NodeConfig extends FormConfig {
   type: string;
   name?: string;
   color?: string;
+  dialogSize?: 'small' | 'medium' | 'large' | 'xlarge';
   action?: ActionConfig;
   router?: {
     type: 'switch' | 'random';
@@ -103,7 +105,7 @@ export interface NodeConfig extends FormConfig {
 
 // New field configuration system for generic form generation
 export interface BaseFieldConfig {
-  label?: string;
+  label?: string | ((formData: Record<string, any>) => string);
   required?: boolean;
   evaluated?: boolean;
   dependsOn?: string[];
@@ -121,6 +123,7 @@ export interface BaseFieldConfig {
 
   // Layout properties
   maxWidth?: string;
+  width?: string;
 
   // Conditional rendering
   conditions?: {
@@ -132,6 +135,7 @@ export interface BaseFieldConfig {
 export interface TextFieldConfig extends BaseFieldConfig {
   type: 'text';
   placeholder?: string;
+  flavor?: 'xsmall' | 'small' | 'large';
 }
 
 export interface TextareaFieldConfig extends BaseFieldConfig {
@@ -155,7 +159,7 @@ export interface SelectFieldConfig extends BaseFieldConfig {
   endpoint?: string;
   emails?: boolean;
   getName?: (item: any) => string;
-  flavor?: 'small' | 'large';
+  flavor?: 'xsmall' | 'small' | 'large';
   createArbitraryOption?: (input: string, options: any[]) => any;
   allowCreate?: boolean;
   getDynamicOptions?: () => Array<{ value: string; name: string }>;
@@ -176,6 +180,7 @@ export interface ArrayFieldConfig extends BaseFieldConfig {
   minItems?: number;
   maxItems?: number;
   itemLabel?: string;
+  maintainEmptyItem?: boolean;
   onItemChange?: (
     itemIndex: number,
     field: string,
@@ -189,6 +194,7 @@ export interface CheckboxFieldConfig extends BaseFieldConfig {
   type: 'checkbox';
   size?: number;
   animateChange?: string;
+  labelPadding?: string;
 }
 
 export interface MessageEditorFieldConfig extends BaseFieldConfig {
@@ -246,11 +252,13 @@ export type LayoutItem =
 export interface ActionConfig extends FormConfig {
   name: string;
   color: string;
+  dialogSize?: 'small' | 'medium' | 'large' | 'xlarge';
   evaluated?: string[];
   render?: (node: any, action: any) => TemplateResult;
 
   form?: Record<string, FieldConfig>;
   layout?: LayoutItem[]; // optional layout configuration - array of layout items
+  gutter?: LayoutItem[]; // fields to render in the dialog gutter (left side of buttons)
 
   toFormData?: (action: Action) => any;
   fromFormData?: (formData: any) => Action;

package/src/form/ArrayEditor.ts

@@ -134,52 +134,115 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
   ): TemplateResult {
     const computedValue = this.computeFieldValue(itemIndex, fieldName, config);
 
+    // Extract flavor from select config if available
+    const flavor =
+      config.type === 'select' ? (config as any).flavor || 'small' : 'small';
+
+    // Build container style with width/maxWidth if specified
+    let containerStyle = '';
+    if (config.width) {
+      containerStyle = `width: ${config.width};`;
+    } else if (config.maxWidth) {
+      containerStyle = `max-width: ${config.maxWidth};`;
+    }
+
     // 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') {
-          // Use consistent temba-select value normalization
-          value = target.values;
-        } else {
-          // For other field types, use the target value directly
-          value = target.value;
+    const fieldContent = FieldRenderer.renderField(
+      fieldName,
+      config,
+      computedValue,
+      {
+        showLabel: false, // ArrayEditor doesn't show labels for individual fields
+        flavor: 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') {
+            // Use consistent temba-select value normalization
+            value = target.values;
+          } else {
+            // For other field types, use the target value directly
+            value = target.value;
+          }
+
+          this.handleFieldChange(itemIndex, fieldName, value);
         }
-
-        this.handleFieldChange(itemIndex, fieldName, value);
       }
-    });
+    );
+
+    // Wrap in container with style if maxWidth is specified
+    if (containerStyle) {
+      return html`<div style="${containerStyle}">${fieldContent}</div>`;
+    }
+
+    return fieldContent;
   }
 
   renderItem(item: ListItem, index: number): TemplateResult {
     const canRemove = this.canRemoveItem(index);
 
+    // Render fields and track if any value fields are visible
+    const fieldElements: TemplateResult[] = [];
+    let hasVisibleValueField = false;
+
+    Object.entries(this.itemConfig).forEach(([fieldName, config]) => {
+      // Check visibility condition
+      let isVisible = true;
+      if (config.conditions?.visible) {
+        try {
+          const currentItem = this._items[index] || {};
+          isVisible = config.conditions.visible(currentItem);
+        } catch (error) {
+          console.error(`Error checking visibility for ${fieldName}:`, error);
+        }
+      }
+
+      if (isVisible) {
+        // Check if this is a value field (text input without fixed sizing)
+        const isValueField =
+          !config.width && !config.maxWidth && config.type === 'text';
+        if (isValueField) {
+          hasVisibleValueField = true;
+        }
+
+        fieldElements.push(html`
+          <div
+            class="field ${config.width ||
+            config.maxWidth ||
+            config.type === 'select'
+              ? 'field-fixed'
+              : 'field-flex'}"
+          >
+            ${this.renderArrayField(index, fieldName, config)}
+          </div>
+        `);
+      }
+    });
+
+    // If no value fields are visible, add a spacer to maintain alignment
+    if (!hasVisibleValueField) {
+      // Insert spacer after operator (first field) and before category (last field)
+      fieldElements.splice(
+        -1,
+        0,
+        html`<div class="field field-flex spacer"></div>`
+      );
+    }
+
     return html`
       <div class="array-item">
         <div class="item-fields">
-          ${Object.entries(this.itemConfig).map(
-            ([fieldName, config]) => html`
-              <div class="field">
-                ${this.renderArrayField(index, fieldName, config)}
-              </div>
-            `
-          )}
-          ${canRemove
-            ? html`
-                <button
-                  @click=${() => this.removeItem(index)}
-                  class="remove-btn"
-                >
-                  <temba-icon name="x"></temba-icon>
-                </button>
-              `
-            : ''}
+          ${fieldElements}
+          <button
+            @click=${canRemove ? () => this.removeItem(index) : undefined}
+            class="remove-btn ${canRemove ? '' : 'invisible'}"
+            ?disabled=${!canRemove}
+          >
+            <temba-icon name="x"></temba-icon>
+          </button>
         </div>
       </div>
     `;
@@ -217,12 +280,24 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
       }
 
       .field {
-        flex: 1;
+        /* Base field styles */
+      }
+
+      .field-flex {
+        flex: 1; /* Grow to fill remaining space */
+      }
+
+      .field-fixed {
+        flex: none; /* Don't grow, use content/maxWidth size */
+      }
+
+      .spacer {
+        /* Empty spacer to maintain layout alignment */
       }
 
       .add-btn,
       .remove-btn {
-        padding: 8px;
+        padding: 4px;
         border: 1px solid #ccc;
         border-radius: 4px;
         background: white;
@@ -239,6 +314,11 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
         background: #fefefe;
         color: #999;
       }
+
+      .remove-btn.invisible {
+        visibility: hidden;
+        cursor: default;
+      }
     `;
   }
 }

package/src/form/Checkbox.ts

@@ -18,6 +18,16 @@ export class Checkbox extends FieldElement {
         width: 100%;
       }
 
+      .checkbox-background {
+        position: absolute;
+        margin-top: 2px;
+        margin-left: 2px;
+        width: 12px;
+        height: 12px;
+        background: var(--checkbox-background, rgba(255, 255, 255, 0.8));
+        border-radius: 2px;
+      }
+
       .wrapper.label {
         padding: var(--checkbox-padding, 10px);
         border-radius: var(--curvature);
@@ -163,7 +173,9 @@ export class Checkbox extends FieldElement {
         @click=${this.handleClick}
       >
         <div class="checkbox-container ${this.disabled ? 'disabled' : ''}">
+          <div class="checkbox-background"></div>
           ${icon}
+
           <div class="label-and-help">
             ${this.label && String(this.label).trim()
               ? html`<div class="checkbox-label">${this.label}</div>`

package/src/form/FieldRenderer.ts

@@ -133,6 +133,7 @@ export class FieldRenderer {
       .value="${value || ''}"
       placeholder="${config.placeholder || ''}"
       .helpText="${config.helpText || ''}"
+      flavor="${config.flavor || 'default'}"
       class="${extraClasses}"
       style="${style}"
       @input="${onChange || (() => {})}"
@@ -259,12 +260,29 @@ export class FieldRenderer {
     value: any,
     context: FieldRenderContext
   ): TemplateResult {
-    const { errors = [], onChange, extraClasses, style } = context;
+    const {
+      errors = [],
+      onChange,
+      extraClasses,
+      style,
+      formData = {}
+    } = context;
+
+    // Handle dynamic labels
+    const label =
+      typeof config.label === 'function'
+        ? config.label(formData)
+        : config.label;
+
+    // Build custom style including labelPadding
+    const customStyle = config.labelPadding
+      ? `--checkbox-padding: ${config.labelPadding}; ${style || ''}`
+      : style || '';
 
     return html`<div class="form-field">
       <temba-checkbox
         name="${fieldName}"
-        label="${config.label}"
+        label="${label}"
         .helpText="${config.helpText || ''}"
         ?required="${config.required}"
         .errors="${errors}"
@@ -272,7 +290,7 @@ export class FieldRenderer {
         size="${config.size || 1.2}"
         animateChange="${config.animateChange || 'pulse'}"
         class="${extraClasses}"
-        style="${style}"
+        style="${customStyle}"
         @change="${onChange || (() => {})}"
       ></temba-checkbox>
       ${errors.length
@@ -338,6 +356,7 @@ export class FieldRenderer {
         .itemLabel="${config.itemLabel || 'Item'}"
         .minItems="${config.minItems || 0}"
         .maxItems="${config.maxItems || 0}"
+        ?maintainEmptyItem="${config.maintainEmptyItem !== false}"
         .onItemChange="${config.onItemChange}"
         .isEmptyItemFn="${config.isEmptyItem}"
         class="${extraClasses}"
@@ -404,4 +423,6 @@ export interface FieldRenderContext {
   style?: string;
   /** Additional data needed for specific field types */
   additionalData?: Record<string, any>;
+  /** Form data for dynamic field configurations */
+  formData?: Record<string, any>;
 }

package/src/form/TextInput.ts

@@ -30,6 +30,21 @@ export class TextInput extends FieldElement {
         caret-color: var(--input-caret);
       }
 
+      .xsmall {
+        --temba-textinput-padding: 6px 8px;
+        --temba-textinput-font-size: 13px;
+      }
+
+      .small {
+        --temba-textinput-padding: 6px 8px;
+        --temba-textinput-font-size: 14px;
+      }
+
+      .large {
+        --temba-textinput-padding: 10px 12px;
+        --temba-textinput-font-size: 16px;
+      }
+
       .clear-icon {
         --icon-color: var(--color-text-dark-secondary);
         cursor: pointer;
@@ -181,6 +196,9 @@ export class TextInput extends FieldElement {
   @property({ type: String })
   type = InputType.Text;
 
+  @property({ type: String })
+  flavor = 'default';
+
   counterElement: CharCount = null;
   cursorStart = -1;
   cursorEnd = -1;
@@ -482,7 +500,7 @@ export class TextInput extends FieldElement {
 
     return html`
       <div
-        class="input-container"
+        class="input-container ${this.flavor !== 'default' ? this.flavor : ''}"
         style=${styleMap(containerStyle)}
         @click=${this.handleContainerClick}
       >

package/src/form/select/Select.ts

@@ -341,6 +341,13 @@ export class Select<T extends SelectOption> extends FieldElement {
         --temba-select-min-height: 2.28em;
       }
 
+      .xsmall {
+        --temba-select-selected-padding: 4px 6px;
+        --temba-select-selected-line-height: 13px;
+        --temba-select-selected-font-size: 13px;
+        --temba-select-min-height: 0em;
+      }
+
       .info-text {
         opacity: 1;
         transition: padding-top var(--transition-speed) ease-in-out,

package/src/interfaces.ts

@@ -181,7 +181,7 @@ export interface Contact {
   last_seen_on: string;
   status: string;
 
-  anon_display?: string;
+  ref?: string; // only returned for anon workspaces
   flow?: ObjectReference;
   last_msg?: Msg;
   direction?: string;

package/src/layout/Dialog.ts

@@ -24,7 +24,8 @@ export class Dialog extends ResizeElement {
     return {
       small: '400px',
       medium: '600px',
-      large: '655px'
+      large: '655px',
+      xlarge: '800px'
     };
   }
 
@@ -413,10 +414,9 @@ export class Dialog extends ResizeElement {
 
   public render(): TemplateResult {
     const dialogStyle = {
-      width: this.width,
-      minWidth: '250px',
-      maxWidth: '600px'
+      width: this.width
     };
+
     if (!this.width) {
       dialogStyle['width'] = Dialog.widths[this.size];
     }

package/src/list/RunList.ts

@@ -155,7 +155,7 @@ export class RunList extends TembaList {
             style="width:16em;white-space:nowrap;overflow: hidden; text-overflow: ellipsis;"
           >
             <temba-contact-name
-              name=${run.contact?.name || run.contact?.anon_display || ''}
+              name=${run.contact?.name || run.contact?.ref || ''}
               urn=${run.contact?.urn || ''}
               icon-size="15"
             />
@@ -269,7 +269,7 @@ export class RunList extends TembaList {
             <temba-contact-name
               style="cursor:pointer"
               name=${this.selectedRun.contact?.name ||
-              this.selectedRun.contact?.anon_display ||
+              this.selectedRun.contact?.ref ||
               ''}
               urn=${this.selectedRun.contact?.urn || ''}
               onclick="goto(event, this)"