@nyaruka/temba-components 0.129.9 → 0.129.11

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 { 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,7 +208,36 @@ 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) => {
@@ -203,7 +249,9 @@ export class FormField extends LitElement {
 
     if (this.widgetOnly) {
       return html`
-        <div class="${this.disabled ? 'disabled' : ''}"><slot></slot></div>
+        <div class="${this.disabled ? 'disabled' : ''}">
+          ${this.renderWidget()}
+        </div>
         ${errors}
       `;
     }
@@ -221,13 +269,10 @@ 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}">
+              <div class="help-text">
                 ${renderMarkdownInline(this.helpText)}
               </div>
             `
@@ -235,4 +280,12 @@ export class FormField extends LitElement {
       </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();
+  }
 }

package/src/form/FieldRenderer.ts

@@ -385,8 +385,9 @@ export class FieldRenderer {
     } = context;
 
     return html`<div class="form-field">
-      ${showLabel ? html`<label>${config.label}</label>` : ''}
       <temba-array-editor
+        name="${fieldName}"
+        .label="${showLabel ? config.label : ''}"
         .value="${value || []}"
         .itemConfig="${config.itemConfig}"
         .sortable="${config.sortable}"

package/src/form/ImagePicker.ts

@@ -3,120 +3,123 @@ import { html, css, PropertyValueMap } from 'lit';
 import { CroppieCSS } from './CroppieCSS';
 import { property } from 'lit/decorators.js';
 import { Icon } from '../Icons';
-import { FormElement } from './FormElement';
-
-export class ImagePicker extends FormElement {
-  static styles = css`
-    ${CroppieCSS}
-
-    .croppie {
-      max-width: 400px;
-      border: 0px solid #ccc;
-      border-radius: 0.5em;
-      overflow: hidden;
-      background: #fff;
-      margin-top: -20%;
-      box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1);
-    }
+import { FieldElement } from './FieldElement';
+
+export class ImagePicker extends FieldElement {
+  static get styles() {
+    return css`
+      ${super.styles}
+      ${CroppieCSS}
+
+      .croppie {
+        max-width: 400px;
+        border: 0px solid #ccc;
+        border-radius: 0.5em;
+        overflow: hidden;
+        background: #fff;
+        margin-top: -20%;
+        box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1);
+      }
 
-    .croppie .controls {
-      display: flex;
-      align-items: center;
-      flex-direction: row;
-      justify-content: center;
-      position: absolute;
-      z-index: 1;
-      width: 400px;
-      margin-top: -42px;
-    }
+      .croppie .controls {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        justify-content: center;
+        position: absolute;
+        z-index: 1;
+        width: 400px;
+        margin-top: -42px;
+      }
 
-    .toggle {
-      height: 110px;
-      width: 110px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
+      .toggle {
+        height: 110px;
+        width: 110px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
 
-    .circle .toggle {
-      border-radius: 50%;
-    }
+      .circle .toggle {
+        border-radius: 50%;
+      }
 
-    .toggle.set {
-      box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px 0px,
-        rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, inset 0 0 0 5px rgba(0, 0, 0, 0.1);
-    }
+      .toggle.set {
+        box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px 0px,
+          rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, inset 0 0 0 5px rgba(0, 0, 0, 0.1);
+      }
 
-    .toggle.set:hover {
-      box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px 0px,
-        rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, inset 0 0 0 5px rgba(0, 0, 0, 0.2);
-    }
+      .toggle.set:hover {
+        box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px 0px,
+          rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, inset 0 0 0 5px rgba(0, 0, 0, 0.2);
+      }
 
-    .toggle temba-icon {
-      color: rgba(0, 0, 0, 0.2);
-      padding: 5px;
-    }
+      .toggle temba-icon {
+        color: rgba(0, 0, 0, 0.2);
+        padding: 5px;
+      }
 
-    toggle:hover temba-icon {
-      color: rgba(0, 0, 0, 0.8);
-    }
+      toggle:hover temba-icon {
+        color: rgba(0, 0, 0, 0.8);
+      }
 
-    .toggle.set temba-icon {
-      border-radius: 50%;
-      margin-right: -90%;
-      margin-bottom: -50%;
-      background: rgba(240, 240, 240, 1);
-      box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;
-    }
+      .toggle.set temba-icon {
+        border-radius: 50%;
+        margin-right: -90%;
+        margin-bottom: -50%;
+        background: rgba(240, 240, 240, 1);
+        box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;
+      }
 
-    .toggle.set:hover temba-icon {
-      background: #fff;
-      color: var(--color-primary-dark);
-    }
+      .toggle.set:hover temba-icon {
+        background: #fff;
+        color: var(--color-primary-dark);
+      }
 
-    .circle .toggle.set temba-icon {
-      margin-right: -70%;
-      margin-bottom: -70%;
-    }
+      .circle .toggle.set temba-icon {
+        margin-right: -70%;
+        margin-bottom: -70%;
+      }
 
-    .hidden {
-      display: none;
-    }
+      .hidden {
+        display: none;
+      }
 
-    .controls temba-icon {
-      margin: 0em 0.75em;
-      background: rgba(255, 255, 255, 0.8);
-      border-radius: 50%;
-      padding: 6px;
-      transition: all 0.1s ease-in-out;
-    }
+      .controls temba-icon {
+        margin: 0em 0.75em;
+        background: rgba(255, 255, 255, 0.8);
+        border-radius: 50%;
+        padding: 6px;
+        transition: all 0.1s ease-in-out;
+      }
 
-    .controls {
-      pointer-events: none;
-      display: flex;
-    }
+      .controls {
+        pointer-events: none;
+        display: flex;
+      }
 
-    .controls temba-icon {
-      pointer-events: all;
-    }
+      .controls temba-icon {
+        pointer-events: all;
+      }
 
-    .controls temba-icon.close {
-      color: rgba(0, 0, 0, 0.2);
-      background: rgba(255, 255, 255, 0.2);
-    }
+      .controls temba-icon.close {
+        color: rgba(0, 0, 0, 0.2);
+        background: rgba(255, 255, 255, 0.2);
+      }
 
-    .controls temba-icon.submit {
-      color: rgba(0, 0, 0, 0.2);
-      box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
-    }
+      .controls temba-icon.submit {
+        color: rgba(0, 0, 0, 0.2);
+        box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
+      }
 
-    .controls temba-icon:hover {
-      color: white;
-      cursor: pointer;
-      background: var(--color-primary-dark);
-    }
-  `;
+      .controls temba-icon:hover {
+        color: white;
+        cursor: pointer;
+        background: var(--color-primary-dark);
+      }
+    `;
+  }
 
   @property({ type: String })
   tempImage: string;
@@ -221,18 +224,9 @@ export class ImagePicker extends FormElement {
     input.value = '';
   }
 
-  protected render() {
+  protected renderWidget() {
     return html`
-    <div class="wrapper ${this.shape} ${this.label ? 'label' : ''}">
-      <temba-field
-        name=${this.name}
-        label=${this.label}
-        .helpText=${this.helpText}
-        .errors=${this.errors}
-        .widgetOnly=${this.widgetOnly}
-        .helpAlways=${true}
-        ?disabled=${this.disabled}
-      >
+      <div class="wrapper ${this.shape} ${this.label ? 'label' : ''}">
         <input class='hidden' type="file" accept="image/*" capture="camera" id="file" name="file" @change=${
           this.handleFileChanged
         }/>
@@ -261,8 +255,11 @@ export class ImagePicker extends FormElement {
     }></temba-icon>
             </div>
         </temba-mask>
-      </temba-field>
-    </div>
+      </div>
     `;
   }
+
+  public render() {
+    return this.renderField();
+  }
 }

package/src/form/KeyValueEditor.ts

@@ -31,13 +31,13 @@ export class KeyValueEditor extends BaseListEditor<KeyValueItem> {
 
   // External API uses array format to preserve duplicate keys
   @property({ type: Array })
-  get value(): KeyValueItem[] {
+  get value(): KeyValueItem[] | any[] {
     return this._items.filter(
       ({ key, value }) => key.trim() !== '' || value.trim() !== ''
     );
   }
 
-  set value(newValue: KeyValueItem[] | Record<string, string>) {
+  set value(newValue: KeyValueItem[] | Record<string, string> | any) {
     if (Array.isArray(newValue)) {
       this._items = [...newValue];
     } else {
@@ -206,46 +206,50 @@ export class KeyValueEditor extends BaseListEditor<KeyValueItem> {
     return 'key-value-editor';
   }
 
-  static styles = css`
-    .key-value-editor {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-    }
+  static get styles() {
+    return css`
+      ${super.styles}
 
-    .row {
-      display: grid;
-      grid-template-columns: 1fr 1fr auto;
-      align-items: center;
-      column-gap: 6px;
-    }
+      .key-value-editor {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
 
-    .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;
-    }
+      .row {
+        display: grid;
+        grid-template-columns: 1fr 1fr auto;
+        align-items: center;
+        column-gap: 6px;
+      }
 
-    .remove-btn:hover:not(:disabled) {
-      background: #f0f0f0;
-    }
+      .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:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
+      .remove-btn:hover:not(:disabled) {
+        background: #f0f0f0;
+      }
 
-    .remove-btn-spacer {
-      width: 32px;
-      height: 32px;
-    }
-  `;
+      .remove-btn:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .remove-btn-spacer {
+        width: 32px;
+        height: 32px;
+      }
+    `;
+  }
 }