@nyaruka/temba-components 0.129.9 → 0.129.11

package/src/form/ArrayEditor.ts

@@ -126,7 +126,7 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
     return currentValue;
   }
 
-  private renderField(
+  private renderArrayField(
     itemIndex: number,
     fieldName: string,
     config: FieldConfig
@@ -180,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>
             `
           )}
@@ -203,68 +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 {
-    }
+      .array-editor {
+      }
 
-    .item-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
+      .array-item {
+      }
 
-    .item-title {
-      font-weight: 600;
-      color: #333;
-    }
+      .item-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
 
-    .item-fields {
-      display: flex;
-      gap: 12px;
-      align-items: center;
-    }
+      .item-title {
+        font-weight: 600;
+        color: #333;
+      }
 
-    .field {
-      flex: 1;
-    }
+      .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();
+  }
 }

package/src/form/ColorPicker.ts

@@ -1,10 +1,10 @@
 import { html, css, PropertyValueMap } from 'lit';
-import { FormElement } from './FormElement';
+import { FieldElement } from './FieldElement';
 import { property } from 'lit/decorators.js';
 import { getClasses, hslToHex } from '../utils';
 import { TextInput } from './TextInput';
 
-export class ColorPicker extends FormElement {
+export class ColorPicker extends FieldElement {
   @property({ type: Boolean })
   expanded = false;
 
@@ -24,6 +24,8 @@ export class ColorPicker extends FormElement {
 
   static get styles() {
     return css`
+      ${super.styles}
+
       :host {
         color: var(--color-text);
         display: inline-block;
@@ -38,11 +40,6 @@ export class ColorPicker extends FormElement {
         width: 5em;
       }
 
-      temba-field {
-        display: block;
-        width: 100%;
-      }
-
       .wrapper {
         border: 1px solid var(--color-widget-border);
         padding: calc(var(--curvature) / 2);
@@ -221,46 +218,37 @@ export class ColorPicker extends FormElement {
     return value;
   }
 
-  public render() {
+  protected renderWidget() {
     return html`
-      <temba-field
-        name=${this.name}
-        .helpText=${this.helpText}
-        .errors=${this.errors}
-        .widgetOnly=${this.widgetOnly}
-        .hideLabel=${this.hideLabel}
-        .disabled=${this.disabled}
-      >
-        <div style="display:flex" tabindex="0">
-          <div class=${getClasses({ wrapper: true, expanded: this.expanded })}>
-            <div class=${getClasses({ 'picker-wrapper': true })}>
-              <div
-                class=${getClasses({
-                  preview: true,
-                  selecting: this.selecting
-                })}
-                style="color:${this.labelColor};background:${this.previewColor}"
-                @click=${this.handlePreviewClick}
-              >
-                ${this.label}
-              </div>
-              <div
-                class="color-picker"
-                tabindex="0"
-                @blur=${this.handleBlur}
-                @mousemove=${this.handleMouseMove}
-                @mouseout=${this.handleMouseOut}
-                @click=${this.handleColorClick}
-              ></div>
+      <div style="display:flex" tabindex="0">
+        <div class=${getClasses({ wrapper: true, expanded: this.expanded })}>
+          <div class=${getClasses({ 'picker-wrapper': true })}>
+            <div
+              class=${getClasses({
+                preview: true,
+                selecting: this.selecting
+              })}
+              style="color:${this.labelColor};background:${this.previewColor}"
+              @click=${this.handlePreviewClick}
+            >
+              ${this.label}
             </div>
-            <temba-textinput
-              value=${this.hex}
-              @input=${this.handleHexInput}
-              placeholder="#000000"
-            ></temba-textinput>
+            <div
+              class="color-picker"
+              tabindex="0"
+              @blur=${this.handleBlur}
+              @mousemove=${this.handleMouseMove}
+              @mouseout=${this.handleMouseOut}
+              @click=${this.handleColorClick}
+            ></div>
           </div>
+          <temba-textinput
+            value=${this.hex}
+            @input=${this.handleHexInput}
+            placeholder="#000000"
+          ></temba-textinput>
         </div>
-      </temba-field>
+      </div>
     `;
   }
 }

package/src/form/Completion.ts

@@ -8,7 +8,7 @@ import {
   executeCompletionQuery
 } from '../excellent/helpers';
 
-import { FormElement } from './FormElement';
+import { FieldElement } from './FieldElement';
 import { CompletionOption, Position } from '../interfaces';
 import { styleMap } from 'lit-html/directives/style-map.js';
 import { msg } from '@lit/localize';
@@ -16,9 +16,10 @@ import { msg } from '@lit/localize';
 /**
  * Completion is a text input that handles excellent completion options in a popup
  */
-export class Completion extends FormElement {
+export class Completion extends FieldElement {
   static get styles() {
     return css`
+      ${super.styles}
       :host {
         display: block;
       }
@@ -69,7 +70,6 @@ export class Completion extends FormElement {
       }
 
       code {
-        background: rgba(0, 0, 0, 0.1);
         padding: 1px 5px;
         border-radius: var(--curvature);
       }
@@ -106,9 +106,6 @@ export class Completion extends FormElement {
   @property({ type: String })
   name = '';
 
-  @property({ type: String })
-  value = '';
-
   @property({ type: Boolean })
   textarea: boolean;
 
@@ -259,7 +256,7 @@ export class Completion extends FormElement {
     }
   }
 
-  public render(): TemplateResult {
+  protected renderWidget(): TemplateResult {
     const anchorStyles = this.anchorPosition
       ? {
           top: `${this.anchorPosition.top}px`,
@@ -270,55 +267,51 @@ export class Completion extends FormElement {
     const visible = this.options && this.options.length > 0;
 
     return html`
-      <temba-field
-        name=${this.name}
-        .label=${this.label}
-        .helpText=${this.helpText}
-        .errors=${this.errors}
-        .widgetOnly=${this.widgetOnly}
-      >
-        <div class="comp-container">
-          <div id="anchor" style=${styleMap(anchorStyles)}></div>
-          <temba-textinput
-            name=${this.name}
-            placeholder=${this.placeholder}
-            gsm=${this.gsm}
-            counter=${ifDefined(this.counter)}
-            @keyup=${this.handleKeyUp}
-            @click=${this.handleClick}
-            @input=${this.handleInput}
-            @blur=${this.handleOptionCanceled}
-            maxlength="${ifDefined(this.maxLength)}"
-            .value=${this.value}
-            ?autogrow=${this.autogrow}
-            ?textarea=${this.textarea}
-            ?submitOnEnter=${this.submitOnEnter}
-            style=${this.minHeight
-              ? `--textarea-min-height: ${this.minHeight}px`
-              : ''}
-          >
-          </temba-textinput>
-          <temba-options
-            @temba-selection=${this.handleOptionSelection}
-            @temba-canceled=${this.handleOptionCanceled}
-            .renderOption=${renderCompletionOption}
-            .anchorTo=${this.anchorElement}
-            .options=${this.options}
-            ?visible=${visible}
-          >
-            ${this.currentFunction
-              ? html`
-                  <div class="current-fn">
-                    ${renderCompletionOption(this.currentFunction, true)}
-                  </div>
-                `
-              : null}
-            <div class="footer" style="${!visible ? 'display:none' : null}">
-              ${msg('Tab to complete, enter to select')}
-            </div>
-          </temba-options>
-        </div>
-      </temba-field>
+      <div class="comp-container">
+        <div id="anchor" style=${styleMap(anchorStyles)}></div>
+        <temba-textinput
+          name=${this.name}
+          placeholder=${this.placeholder}
+          gsm=${this.gsm}
+          counter=${ifDefined(this.counter)}
+          @keyup=${this.handleKeyUp}
+          @click=${this.handleClick}
+          @input=${this.handleInput}
+          @blur=${this.handleOptionCanceled}
+          maxlength="${ifDefined(this.maxLength)}"
+          .value=${this.value}
+          ?autogrow=${this.autogrow}
+          ?textarea=${this.textarea}
+          ?submitOnEnter=${this.submitOnEnter}
+          style=${this.minHeight
+            ? `--textarea-min-height: ${this.minHeight}px`
+            : ''}
+        >
+        </temba-textinput>
+        <temba-options
+          @temba-selection=${this.handleOptionSelection}
+          @temba-canceled=${this.handleOptionCanceled}
+          .renderOption=${renderCompletionOption}
+          .anchorTo=${this.anchorElement}
+          .options=${this.options}
+          ?visible=${visible}
+        >
+          ${this.currentFunction
+            ? html`
+                <div class="current-fn">
+                  ${renderCompletionOption(this.currentFunction, true)}
+                </div>
+              `
+            : null}
+          <div class="footer" style="${!visible ? 'display:none' : null}">
+            ${msg('Tab to complete, enter to select')}
+          </div>
+        </temba-options>
+      </div>
     `;
   }
+
+  public render(): TemplateResult {
+    return this.renderField();
+  }
 }

package/src/form/Compose.ts

@@ -1,5 +1,5 @@
 import { TemplateResult, html, css } from 'lit';
-import { FormElement } from './FormElement';
+import { FieldElement } from './FieldElement';
 import { property } from 'lit/decorators.js';
 import { Attachment, CustomEventType, Language, Shortcut } from '../interfaces';
 import { DEFAULT_MEDIA_ENDPOINT, getClasses } from '../utils';
@@ -20,7 +20,7 @@ export interface ComposeValue {
   variables: string[];
 }
 
-export class Compose extends FormElement {
+export class Compose extends FieldElement {
   static get styles() {
     return css`
       :host {
@@ -544,12 +544,12 @@ export class Compose extends FormElement {
   }
 
   public render(): TemplateResult {
+    return this.renderField();
+  }
+
+  protected renderWidget(): TemplateResult {
     return html`
-      <temba-field
-        name=${this.name}
-        .errors=${this.errors}
-        .widgetOnly=${this.widgetOnly}
-        .value=${this.value}
+      <div
         class=${getClasses({
           'active-template':
             !!this.currentTemplate &&
@@ -570,7 +570,7 @@ export class Compose extends FormElement {
         <div class="container">
           <div class="items actions">${this.getActions()}</div>
         </div>
-      </temba-field>
+      </div>
     `;
   }
 

package/src/form/ContactSearch.ts

@@ -5,7 +5,7 @@ import { getClasses, postJSON, stopEvent, WebResponse } from '../utils';
 import { TextInput } from './TextInput';
 import '../display/Alert';
 import { Contact, CustomEventType } from '../interfaces';
-import { FormElement } from './FormElement';
+import { FieldElement } from './FieldElement';
 import { Checkbox } from './Checkbox';
 import { msg } from '@lit/localize';
 import { OmniOption } from './select/Omnibox';
@@ -23,7 +23,7 @@ interface SummaryResponse {
   blockers: string[];
 }
 
-export class ContactSearch extends FormElement {
+export class ContactSearch extends FieldElement {
   static get styles() {
     return css`
       :host {
@@ -475,7 +475,7 @@ export class ContactSearch extends FormElement {
     }
   }
 
-  public render(): TemplateResult {
+  public renderWidget(): TemplateResult {
     let summary: TemplateResult;
     if (this.summary) {
       if (!this.summary.error) {
@@ -539,7 +539,6 @@ export class ContactSearch extends FormElement {
         this.advanced
           ? html`<div class="query">
               <temba-textinput
-                .label=${this.label}
                 .helpText=${this.helpText}
                 .widgetOnly=${this.widgetOnly}
                 .errors=${this.errors}