@nyaruka/temba-components 0.129.3 → 0.129.4

package/src/form/BaseListEditor.ts

@@ -0,0 +1,177 @@
+import { LitElement, TemplateResult, html } from 'lit';
+import { property } from 'lit/decorators.js';
+
+export interface ListItem {
+  [key: string]: any;
+}
+
+export interface ListEditorConfig {
+  // Determines if empty items should be automatically maintained
+  maintainEmptyItem?: boolean;
+  // Function to check if an item is considered empty
+  isEmptyItem?: (item: ListItem) => boolean;
+  // Function to create a new empty item
+  createEmptyItem?: () => ListItem;
+  // Function to clean items before emitting (e.g., filter out empty items)
+  cleanItems?: (items: ListItem[]) => ListItem[];
+  // Minimum number of items to maintain
+  minItems?: number;
+  // Maximum number of items allowed
+  maxItems?: number;
+}
+
+export abstract class BaseListEditor<
+  T extends ListItem = ListItem
+> extends LitElement {
+  @property({ attribute: false })
+  protected _items: T[] = [];
+
+  @property({ type: Number })
+  minItems = 0;
+
+  @property({ type: Number })
+  maxItems?: number;
+
+  @property({ type: Boolean })
+  maintainEmptyItem = false;
+
+  // Abstract methods that must be implemented by subclasses
+  abstract isEmptyItem(item: T): boolean;
+  abstract createEmptyItem(): T;
+  abstract renderItem(item: T, index: number): TemplateResult;
+
+  // Optional methods that subclasses can override
+  protected getContainerClass(): string {
+    return 'base-list-editor';
+  }
+
+  protected renderAddButton(): TemplateResult {
+    return html`
+      <button class="add-btn" @click=${() => this.addItem()}>Add Item</button>
+    `;
+  }
+
+  protected shouldShowAddButton(): boolean {
+    return (
+      !this.maintainEmptyItem &&
+      (!this.maxItems || this._items.length < this.maxItems)
+    );
+  }
+
+  render(): TemplateResult {
+    const items = this.displayItems;
+
+    return html`
+      <div class=${this.getContainerClass()}>
+        <div
+          class="list-items"
+          style="gap: 8px; display: grid; grid-template-columns: 1fr;"
+        >
+          ${items.map((item, index) => this.renderItem(item, index))}
+        </div>
+        ${this.shouldShowAddButton() ? this.renderAddButton() : ''}
+      </div>
+    `;
+  }
+
+  // Optional method for cleaning items before emission (can return any type)
+  protected cleanItems(items: T[]): any {
+    if (!this.maintainEmptyItem) {
+      return items;
+    }
+    // Filter out empty items for the emitted value
+    return items.filter((item) => !this.isEmptyItem(item));
+  }
+
+  // Get the items to display (may include empty items for UI)
+  protected get displayItems(): T[] {
+    const items = [...this._items];
+
+    if (this.maintainEmptyItem) {
+      const hasEmptyItem = items.some((item) => this.isEmptyItem(item));
+      if (!hasEmptyItem) {
+        items.push(this.createEmptyItem());
+      }
+    }
+
+    return items;
+  }
+
+  // Handle changes to an item
+  protected handleItemChange(index: number, newItem: T) {
+    const updatedItems = [...this._items];
+    updatedItems[index] = newItem;
+    this.updateValue(updatedItems);
+  }
+
+  // Handle field changes within an item (for complex items)
+  protected handleFieldChange(
+    index: number,
+    fieldName: string,
+    fieldValue: any
+  ) {
+    const updatedItems = [...this._items];
+    const currentItem = updatedItems[index] || this.createEmptyItem();
+
+    updatedItems[index] = {
+      ...currentItem,
+      [fieldName]: fieldValue
+    };
+
+    this.updateValue(updatedItems);
+  }
+
+  // Add a new item
+  protected addItem(item?: T) {
+    if (this.maxItems && this._items.length >= this.maxItems) {
+      return;
+    }
+
+    const newItem = item || this.createEmptyItem();
+    const updatedItems = [...this._items, newItem];
+    this.updateValue(updatedItems);
+  }
+
+  // Remove an item
+  protected removeItem(index: number) {
+    if (this._items.length <= this.minItems) {
+      return;
+    }
+
+    const updatedItems = this._items.filter((_, i) => i !== index);
+    this.updateValue(updatedItems);
+  }
+
+  // Check if an item can be removed
+  protected canRemoveItem(index: number): boolean {
+    const item = this.displayItems[index];
+
+    // Can't remove if it would go below minimum
+    if (this._items.length <= this.minItems) {
+      return false;
+    }
+
+    // Can't remove empty items if we're maintaining them
+    if (this.maintainEmptyItem && this.isEmptyItem(item)) {
+      return false;
+    }
+
+    return true;
+  }
+
+  // Update the value and emit change event
+  protected updateValue(newValue: T[]) {
+    this._items = newValue;
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: { value: this.cleanItems(newValue) },
+        bubbles: true
+      })
+    );
+  }
+
+  // Utility method for subclasses to check if two items are equal
+  protected itemsEqual(item1: T, item2: T): boolean {
+    return JSON.stringify(item1) === JSON.stringify(item2);
+  }
+}

package/src/form/Checkbox.ts

@@ -75,8 +75,29 @@ export class Checkbox extends FormElement {
   @property({ type: String })
   animateChange = 'pulse';
 
+  public connectedCallback() {
+    super.connectedCallback();
+  }
+
   public updated(changes: Map<string, any>) {
     super.updated(changes);
+
+    // Normalize label property changes
+    if (changes.has('label')) {
+      // Normalize whitespace labels to empty string for proper behavior
+      if (
+        this.label &&
+        typeof this.label === 'string' &&
+        this.label.trim() === ''
+      ) {
+        this.label = '';
+      }
+      // Ensure undefined labels remain as null to match test expectations
+      if (this.label === undefined) {
+        this.label = null;
+      }
+    }
+
     if (changes.has('checked') || changes.has('value')) {
       if (this.checked || this.partial) {
         this.internals.setFormValue(this.value || '1');
@@ -113,8 +134,6 @@ export class Checkbox extends FormElement {
       animatechange="${this.animateChange}"
     />`;
 
-    this.label = this.label ? this.label.trim() : null;
-
     return html`
       <div class="wrapper ${this.label ? 'label' : ''}">
         <temba-field
@@ -128,7 +147,7 @@ export class Checkbox extends FormElement {
         >
           <div class="checkbox-container ${this.disabled ? 'disabled' : ''}">
             ${icon}
-            ${this.label
+            ${this.label && String(this.label).trim()
               ? html`<div class="checkbox-label">${this.label}</div>`
               : null}
           </div>

package/src/form/Completion.ts

@@ -124,6 +124,9 @@ export class Completion extends FormElement {
   @property({ type: Boolean })
   autogrow = false;
 
+  @property({ type: Number })
+  minHeight: number;
+
   private hiddenElement: HTMLInputElement;
   private query: string;
 
@@ -290,6 +293,9 @@ export class Completion extends FormElement {
             ?autogrow=${this.autogrow}
             ?textarea=${this.textarea}
             ?submitOnEnter=${this.submitOnEnter}
+            style=${this.minHeight
+              ? `--textarea-min-height: ${this.minHeight}px`
+              : ''}
           >
           </temba-textinput>
           <temba-options

package/src/form/FormField.ts

@@ -47,15 +47,101 @@ export class FormField extends LitElement {
       }
 
       .alert-error {
-        background: rgba(255, 181, 181, 0.17);
-        border: none;
-        border-left: 0px solid var(--color-error);
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        z-index: 1000;
+        background: white;
+        border: 1px solid var(--color-error);
         color: var(--color-error);
-        padding: 10px;
-        margin: 15px 0px;
+        padding: 8px 12px;
+        margin: 2px 0 0 0;
         border-radius: var(--curvature);
-        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
-          0 1px 2px 0 rgba(0, 0, 0, 0.06);
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+          0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        font-size: 0.85em;
+        line-height: 1.2;
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(-12px);
+        transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out,
+          transform 0.2s ease-in-out;
+      }
+
+      .field:hover .alert-error {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(2px);
+      }
+
+      /* Hide error popup when widget is focused */
+      .field:focus-within .alert-error {
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(-4px);
+      }
+
+      .field.has-error {
+        position: relative;
+        /* Set CSS custom properties that form components can use */
+        --color-widget-border: var(--color-error);
+        --widget-box-shadow-focused: var(
+          --widget-box-shadow-focused-error,
+          0 0 0 3px rgba(255, 99, 71, 0.3)
+        );
+        --color-focus: var(--color-error);
+      }
+
+      .field.has-error .widget {
+        border-radius: var(--curvature-widget);
+        position: relative;
+      }
+
+      /* Force error styling with higher specificity */
+      :host(.has-error) .field.has-error .widget .input-container,
+      :host(.has-error) .field.has-error .widget .select-container,
+      :host(.has-error) .field.has-error .widget .comp-container,
+      :host(.has-error) .field.has-error .widget .checkbox-container,
+      :host(.has-error) .field.has-error .widget .container,
+      :host(.has-error) .field.has-error .widget .range-container,
+      .field.has-error .widget .input-container,
+      .field.has-error .widget .select-container,
+      .field.has-error .widget .comp-container,
+      .field.has-error .widget .checkbox-container,
+      .field.has-error .widget .container,
+      .field.has-error .widget .range-container {
+        border-color: var(--color-error) !important;
+      }
+
+      /* When error field is focused, use error-colored focus ring */
+      :host(.has-error) .field.has-error .widget .input-container:focus-within,
+      :host(.has-error) .field.has-error .widget .select-container:focus-within,
+      :host(.has-error) .field.has-error .widget .select-container.focused,
+      :host(.has-error) .field.has-error .widget .comp-container:focus-within,
+      :host(.has-error)
+        .field.has-error
+        .widget
+        .checkbox-container:focus-within,
+      :host(.has-error) .field.has-error .widget .container:focus-within,
+      :host(.has-error) .field.has-error .widget .range-container:focus-within,
+      .field.has-error .widget .input-container:focus-within,
+      .field.has-error .widget .select-container:focus-within,
+      .field.has-error .widget .select-container.focused,
+      .field.has-error .widget .comp-container:focus-within,
+      .field.has-error .widget .checkbox-container:focus-within,
+      .field.has-error .widget .container:focus-within,
+      .field.has-error .widget .range-container:focus-within {
+        border-color: var(--color-error) !important;
+        box-shadow: var(
+          --widget-box-shadow-focused-error,
+          0 0 0 3px rgba(255, 99, 71, 0.3)
+        ) !important;
+      }
+
+      .alert-error p {
+        margin: 0;
+        padding: 0;
       }
 
       .disabled {
@@ -92,9 +178,23 @@ export class FormField extends LitElement {
   @property({ type: Boolean })
   disabled = false;
 
+  updated(changedProperties: Map<string | number | symbol, unknown>): void {
+    super.updated(changedProperties);
+
+    if (
+      changedProperties.has('errors') ||
+      changedProperties.has('hideErrors')
+    ) {
+      const hasErrors =
+        !this.hideErrors && this.errors && this.errors.length > 0;
+      this.classList.toggle('has-error', hasErrors);
+    }
+  }
+
   public render(): TemplateResult {
-    const errors = !this.hideErrors
-      ? (this.errors || []).map((error: string) => {
+    const hasErrors = !this.hideErrors && this.errors && this.errors.length > 0;
+    const errors = hasErrors
+      ? this.errors.map((error: string) => {
           return html`
             <div class="alert-error">${renderMarkdown(error)}</div>
           `;
@@ -109,7 +209,11 @@ export class FormField extends LitElement {
     }
 
     return html`
-      <div class="field ${this.disabled ? 'disabled' : ''}">
+      <div
+        class="field ${this.disabled ? 'disabled' : ''} ${hasErrors
+          ? 'has-error'
+          : ''}"
+      >
         ${!!this.name && !this.hideLabel && !!this.label
           ? html`
               <label class="control-label" for="${this.name}"
@@ -119,6 +223,7 @@ export class FormField extends LitElement {
           : null}
         <div class="widget">
           <slot></slot>
+          ${errors}
         </div>
         ${this.helpText && this.helpText !== 'None'
           ? html`
@@ -127,7 +232,6 @@ export class FormField extends LitElement {
               </div>
             `
           : null}
-        ${errors}
       </div>
     `;
   }

package/src/form/KeyValueEditor.ts

@@ -0,0 +1,251 @@
+import { html, css, TemplateResult } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { BaseListEditor, ListItem } from './BaseListEditor';
+
+interface KeyValueItem extends ListItem {
+  key: string;
+  value: string;
+}
+
+@customElement('temba-key-value-editor')
+export class KeyValueEditor extends BaseListEditor<KeyValueItem> {
+  @property({ type: String })
+  keyPlaceholder = 'Key';
+
+  @property({ type: String })
+  valuePlaceholder = 'Value';
+
+  @property({ type: Boolean })
+  showValidation = true;
+
+  @state()
+  private keyErrors: { [index: number]: string } = {};
+
+  // Configure to maintain empty items
+  maintainEmptyItem = true;
+
+  constructor() {
+    super();
+    this._items = [];
+  }
+
+  // External API uses array format to preserve duplicate keys
+  @property({ type: Array })
+  get value(): KeyValueItem[] {
+    return this._items.filter(
+      ({ key, value }) => key.trim() !== '' || value.trim() !== ''
+    );
+  }
+
+  set value(newValue: KeyValueItem[] | Record<string, string>) {
+    if (Array.isArray(newValue)) {
+      this._items = [...newValue];
+    } else {
+      // Convert Record to array format
+      this._items = Object.entries(newValue || {}).map(([key, value]) => ({
+        key,
+        value: typeof value === 'string' ? value : String(value)
+      }));
+    }
+    this.requestUpdate();
+  }
+
+  // Implement abstract methods
+  isEmptyItem(item: KeyValueItem): boolean {
+    return item.key.trim() === '' && item.value.trim() === '';
+  }
+
+  createEmptyItem(): KeyValueItem {
+    return { key: '', value: '' };
+  }
+
+  // Override cleanItems to return array format to preserve duplicate keys
+  protected cleanItems(items: KeyValueItem[]): KeyValueItem[] {
+    return items.filter(
+      ({ key, value }) => key.trim() !== '' || value.trim() !== ''
+    );
+  }
+
+  // Method to convert to Record format for final form submission
+  toRecord(): Record<string, string> {
+    const result: Record<string, string> = {};
+    this._items.forEach(({ key, value }) => {
+      if (key.trim() !== '' || value.trim() !== '') {
+        result[key] = value;
+      }
+    });
+    return result;
+  }
+
+  // Method to validate and set key errors for duplicates and empty keys with values
+  validateKeys(): boolean {
+    const newKeyErrors: { [index: number]: string } = {};
+
+    // Check for empty keys with values
+    this._items.forEach(({ key, value }, index) => {
+      if (key.trim() === '' && value.trim() !== '') {
+        newKeyErrors[index] = 'Key is required when value is provided';
+      }
+    });
+
+    // Check for duplicate keys (only non-empty ones)
+    const nonEmptyKeys = this._items
+      .map(({ key }, index) => ({ key: key.trim(), index }))
+      .filter(({ key }) => key !== '');
+
+    const keyCount = new Map<string, number[]>();
+    nonEmptyKeys.forEach(({ key, index }) => {
+      if (!keyCount.has(key)) {
+        keyCount.set(key, []);
+      }
+      keyCount.get(key)!.push(index);
+    });
+
+    // Mark duplicate keys with errors
+    keyCount.forEach((indices, key) => {
+      if (indices.length > 1) {
+        indices.forEach((index) => {
+          // Only show duplicate error if there's no empty key error already
+          if (!newKeyErrors[index]) {
+            newKeyErrors[index] = `Duplicate key "${key}"`;
+          }
+        });
+      }
+    });
+
+    this.keyErrors = newKeyErrors;
+    return Object.keys(newKeyErrors).length === 0;
+  }
+
+  // Clear key errors
+  clearKeyErrors(): void {
+    this.keyErrors = {};
+  }
+
+  // Override updateValue to emit array format and validate keys
+  protected updateValue(newValue: KeyValueItem[]) {
+    this._items = newValue;
+
+    // Clear errors and re-validate when items change
+    this.clearKeyErrors();
+    this.validateKeys();
+
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: { value: this.cleanItems(newValue) },
+        bubbles: true
+      })
+    );
+    this.requestUpdate();
+  }
+
+  private handleKeyChange(index: number, newKey: string) {
+    const items = this.displayItems;
+    const currentItem = items[index];
+
+    // Clear any existing error for this key when it's modified
+    if (this.keyErrors[index]) {
+      const newKeyErrors = { ...this.keyErrors };
+      delete newKeyErrors[index];
+      this.keyErrors = newKeyErrors;
+    }
+
+    this.handleItemChange(index, {
+      key: newKey,
+      value: currentItem.value
+    });
+  }
+
+  private handleValueChange(index: number, newValue: string) {
+    const items = this.displayItems;
+    const currentItem = items[index];
+
+    // Clear any existing error for this key when value is modified
+    if (this.keyErrors[index]) {
+      const newKeyErrors = { ...this.keyErrors };
+      delete newKeyErrors[index];
+      this.keyErrors = newKeyErrors;
+    }
+
+    this.handleItemChange(index, {
+      key: currentItem.key,
+      value: newValue
+    });
+  }
+
+  renderItem(item: KeyValueItem, index: number): TemplateResult {
+    const canRemove = this.canRemoveItem(index);
+    const keyError =
+      this.showValidation && this.keyErrors[index] ? this.keyErrors[index] : '';
+
+    return html`
+      <div class="row">
+        <temba-textinput
+          .value=${item.key}
+          .placeholder=${this.keyPlaceholder}
+          .errors=${keyError ? [keyError] : []}
+          @change=${(e: any) => this.handleKeyChange(index, e.target.value)}
+        ></temba-textinput>
+        <temba-textinput
+          .value=${item.value}
+          .placeholder=${this.valuePlaceholder}
+          @change=${(e: any) => this.handleValueChange(index, e.target.value)}
+        ></temba-textinput>
+        ${canRemove
+          ? html`
+              <button class="remove-btn" @click=${() => this.removeItem(index)}>
+                ×
+              </button>
+            `
+          : html`<div class="remove-btn-spacer"></div>`}
+      </div>
+    `;
+  }
+
+  protected getContainerClass(): string {
+    return 'key-value-editor';
+  }
+
+  static styles = css`
+    .key-value-editor {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .row {
+      display: grid;
+      grid-template-columns: 1fr 1fr auto;
+      gap: 8px;
+      align-items: center;
+    }
+
+    .remove-btn {
+      width: 32px;
+      height: 32px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      background: #f8f8f8;
+      color: #666;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+    }
+
+    .remove-btn:hover:not(:disabled) {
+      background: #f0f0f0;
+    }
+
+    .remove-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .remove-btn-spacer {
+      width: 32px;
+      height: 32px;
+    }
+  `;
+}