@nyaruka/temba-components 0.129.8 → 0.129.10

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}

package/src/form/DatePicker.ts

@@ -1,12 +1,13 @@
 import { TemplateResult, html, css, PropertyValueMap } from 'lit';
 import { property } from 'lit/decorators.js';
-import { FormElement } from './FormElement';
+import { FieldElement } from './FieldElement';
 import { getClasses } from '../utils';
 import { DateTime } from 'luxon';
 
-export class DatePicker extends FormElement {
+export class DatePicker extends FieldElement {
   static get styles() {
     return css`
+      ${super.styles}
       :host {
         display: block;
       }
@@ -205,7 +206,7 @@ export class DatePicker extends FormElement {
     this.shadowRoot.querySelector('input').focus();
   }
 
-  public render(): TemplateResult {
+  protected renderWidget(): TemplateResult {
     const classes = getClasses({ unset: !this.value });
 
     let dateWidgetValue = null;
@@ -216,42 +217,35 @@ export class DatePicker extends FormElement {
     }
 
     return html`
-      <temba-field
-        class=${getClasses({ disabled: this.disabled })}
-        name=${this.name}
-        .label="${this.label}"
-        .helpText="${this.helpText}"
-        .errors=${this.errors}
-        .widgetOnly=${this.widgetOnly}
-        .hideLabel=${this.hideLabel}
-        .disabled=${this.disabled}
-      >
-        <div class="container" @click=${this.handleClicked}>
-          <slot name="prefix"></slot>
-          <div class="input-wrapper">
-            <input
-              class=${classes}
-              name=${this.label}
-              value=${dateWidgetValue}
-              type="${this.time ? 'datetime-local' : 'date'}"
-              @change=${this.handleChange}
-              min=${this.min || undefined}
-              max=${this.max || undefined}
-            />
-          </div>
-          ${this.time
-            ? html`
-                <div class="tz-wrapper">
-                  <div class="tz">
-                    <div class="label">Time Zone</div>
-                    <div class="zone">${this.timezoneFriendly}</div>
-                  </div>
-                </div>
-              `
-            : null}
-          <slot name="postfix"></slot>
+      <div class="container" @click=${this.handleClicked}>
+        <slot name="prefix"></slot>
+        <div class="input-wrapper">
+          <input
+            class=${classes}
+            name=${this.label}
+            value=${dateWidgetValue}
+            type="${this.time ? 'datetime-local' : 'date'}"
+            @change=${this.handleChange}
+            min=${this.min || undefined}
+            max=${this.max || undefined}
+          />
         </div>
-      </temba-field>
+        ${this.time
+          ? html`
+              <div class="tz-wrapper">
+                <div class="tz">
+                  <div class="label">Time Zone</div>
+                  <div class="zone">${this.timezoneFriendly}</div>
+                </div>
+              </div>
+            `
+          : null}
+        <slot name="postfix"></slot>
+      </div>
     `;
   }
+
+  public render(): TemplateResult {
+    return this.renderField();
+  }
 }

package/src/form/{FormField.ts → FieldElement.ts}

@@ -1,12 +1,65 @@
-import { TemplateResult, html, css, LitElement } from 'lit';
+import { TemplateResult, html, css } from 'lit';
 import { property } from 'lit/decorators.js';
-import { renderMarkdown } from '../markdown';
+import { RapidElement } from '../RapidElement';
+import { renderMarkdownInline } from '../markdown';
 
 /**
- * A small wrapper to display labels and help text in a smartmin style.
- * This exists so we can display things consistently before restyling.
+ * FieldElement is a base class for form components that provides built-in
+ * field wrapper functionality, eliminating the need for manual temba-field embedding.
+ *
+ * Components extending this class only need to implement renderWidget() with their
+ * specific widget content, and the field wrapper (label, errors, help text) is
+ * automatically handled.
  */
-export class FormField extends LitElement {
+export abstract class FieldElement extends RapidElement {
+  @property({ type: String })
+  name = '';
+
+  @property({ type: String, attribute: 'help_text' })
+  helpText: string;
+
+  @property({ type: Boolean, attribute: 'widget_only' })
+  widgetOnly: boolean;
+
+  @property({ type: Array })
+  errors: string[];
+
+  // Use @property with custom getter/setter to handle both attribute and programmatic access
+  private _value: any = '';
+
+  @property({ type: String })
+  public get value() {
+    return this._value;
+  }
+
+  public set value(value) {
+    this._value = value;
+  }
+
+  @property({ attribute: false })
+  inputRoot: HTMLElement = this;
+
+  @property({ type: Boolean })
+  disabled = false;
+
+  static formAssociated = true;
+
+  protected internals: ElementInternals;
+
+  @property({ type: Boolean })
+  hideErrors = false;
+
+  @property({ type: Boolean, attribute: 'hide_label' })
+  hideLabel: boolean;
+
+  @property({ type: String })
+  label: string;
+
+  constructor() {
+    super();
+    this.internals = this.attachInternals();
+  }
+
   static get styles() {
     return css`
       :host {
@@ -29,19 +82,6 @@ export class FormField extends LitElement {
         line-height: normal;
         color: var(--color-text-help);
         margin-left: var(--help-text-margin-left);
-        margin-top: -16px;
-        opacity: 0;
-        transition: opacity ease-in-out 100ms, margin-top ease-in-out 200ms;
-        pointer-events: none;
-      }
-
-      .help-text.help-always {
-        opacity: 1;
-        margin-top: 6px;
-        margin-left: var(--help-text-margin-left);
-      }
-
-      .field:focus-within .help-text {
         margin-top: 6px;
         opacity: 1;
       }
@@ -151,36 +191,13 @@ export class FormField extends LitElement {
     `;
   }
 
-  @property({ type: Boolean, attribute: 'hide_label' })
-  hideLabel = false;
-
-  @property({ type: Boolean, attribute: 'widget_only' })
-  widgetOnly = false;
-
-  @property({ type: Array, attribute: false })
-  errors: string[] = [];
-
-  @property({ type: Boolean })
-  hideErrors = false;
-
-  @property({ type: String, attribute: 'help_text' })
-  helpText = '';
-
-  @property({ type: Boolean, attribute: 'help_always' })
-  helpAlways = true;
-
-  @property({ type: String })
-  label = '';
-
-  @property({ type: String })
-  name = '';
-
-  @property({ type: Boolean })
-  disabled = false;
-
-  updated(changedProperties: Map<string | number | symbol, unknown>): void {
+  updated(changedProperties: Map<string, any>): void {
     super.updated(changedProperties);
 
+    if (changedProperties.has('value')) {
+      this.internals.setFormValue(this.value);
+    }
+
     if (
       changedProperties.has('errors') ||
       changedProperties.has('hideErrors')
@@ -191,19 +208,50 @@ export class FormField extends LitElement {
     }
   }
 
-  public render(): TemplateResult {
+  get form() {
+    return this.internals.form;
+  }
+
+  public setValue(value: any) {
+    this.value = this.serializeValue(value);
+  }
+
+  public getDeserializedValue(): any {
+    if (!this.value || this.value === '') {
+      return null;
+    }
+    return JSON.parse(this.value);
+  }
+
+  public serializeValue(value: any): string {
+    return JSON.stringify(value);
+  }
+
+  /**
+   * Abstract method that components must implement to render their specific widget content.
+   * This replaces the need to manually embed temba-field.
+   */
+  protected abstract renderWidget(): TemplateResult;
+
+  /**
+   * Renders the complete field including label, widget, errors, and help text.
+   * Components can override this for custom layouts, but typically should just implement renderWidget().
+   */
+  protected renderField(): TemplateResult {
     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>
+            <div class="alert-error">${renderMarkdownInline(error)}</div>
           `;
         })
       : [];
 
     if (this.widgetOnly) {
       return html`
-        <div class="${this.disabled ? 'disabled' : ''}"><slot></slot></div>
+        <div class="${this.disabled ? 'disabled' : ''}">
+          ${this.renderWidget()}
+        </div>
         ${errors}
       `;
     }
@@ -221,18 +269,23 @@ export class FormField extends LitElement {
               >
             `
           : null}
-        <div class="widget">
-          <slot></slot>
-          ${errors}
-        </div>
+        <div class="widget">${this.renderWidget()} ${errors}</div>
         ${this.helpText && this.helpText !== 'None'
           ? html`
-              <div class="help-text ${this.helpAlways ? 'help-always' : null}">
-                ${this.helpText}
+              <div class="help-text">
+                ${renderMarkdownInline(this.helpText)}
               </div>
             `
           : null}
       </div>
     `;
   }
+
+  /**
+   * Main render method that automatically provides field wrapper functionality.
+   * Components extending FieldElement should not override this unless they need custom field layouts.
+   */
+  public render(): TemplateResult {
+    return this.renderField();
+  }
 }