@nyaruka/temba-components 0.129.9 → 0.129.10

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}

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();
+  }
 }