@nyaruka/temba-components 0.129.9 → 0.129.10

package/src/form/MessageEditor.ts

@@ -1,7 +1,7 @@
 import { TemplateResult, css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { FormElement } from './FormElement';
+import { FieldElement } from './FieldElement';
 import { Completion } from './Completion';
 import { MediaPicker } from './MediaPicker';
 import { Attachment } from '../interfaces';
@@ -12,9 +12,10 @@ import { Icon } from '../Icons';
  * MessageEditor is a composed component that combines temba-completion and temba-media-picker
  * for editing messages with text completion and file attachments
  */
-export class MessageEditor extends FormElement {
+export class MessageEditor extends FieldElement {
   static get styles() {
     return css`
+      ${super.styles}
       :host {
         display: block;
       }
@@ -130,9 +131,6 @@ export class MessageEditor extends FormElement {
   @property({ type: String })
   name = '';
 
-  @property({ type: String })
-  value = '';
-
   @property({ type: String })
   placeholder = '';
 
@@ -373,77 +371,73 @@ export class MessageEditor extends FormElement {
   }
 
   public render(): TemplateResult {
+    return this.renderField();
+  }
+
+  protected renderWidget(): TemplateResult {
     const hasAttachments = this.hasStaticAttachments();
 
     return html`
-      <temba-field
-        name=${this.name}
-        .label=${this.label}
-        .helpText=${this.helpText}
-        .errors=${this.errors}
-        .widgetOnly=${this.widgetOnly}
+      <div
+        class=${getClasses({
+          'message-editor-container': true,
+          highlight: this.pendingDrop,
+          'has-attachments': hasAttachments
+        })}
+        @dragenter=${this.handleDragEnter}
+        @dragover=${this.handleDragOver}
+        @dragleave=${this.handleDragLeave}
+        @drop=${this.handleDrop}
       >
-        <div
-          class=${getClasses({
-            'message-editor-container': true,
-            highlight: this.pendingDrop,
-            'has-attachments': hasAttachments
-          })}
-          @dragenter=${this.handleDragEnter}
-          @dragover=${this.handleDragOver}
-          @dragleave=${this.handleDragLeave}
-          @drop=${this.handleDrop}
-        >
-          <div class="completion-wrapper">
-            <temba-completion
-              name=${this.name}
-              .value=${this.value}
-              placeholder=${this.placeholder}
-              ?textarea=${this.textarea}
-              ?autogrow=${this.autogrow}
-              ?session=${this.session}
-              ?submitOnEnter=${this.submitOnEnter}
-              ?gsm=${this.gsm}
-              ?disableCompletion=${this.disableCompletion}
-              maxlength=${ifDefined(this.maxLength)}
-              counter=${ifDefined(this.counter)}
-              minHeight=${ifDefined(this.minHeight)}
-              widgetOnly
-              @change=${this.handleCompletionChange}
-            ></temba-completion>
-          </div>
-
-          <div class="media-wrapper ">
-            <temba-media-picker
+        <div class="completion-wrapper">
+          <temba-completion
+            name=${this.name}
+            .value=${this.value}
+            placeholder=${this.placeholder}
+            ?textarea=${this.textarea}
+            ?autogrow=${this.autogrow}
+            ?session=${this.session}
+            ?submitOnEnter=${this.submitOnEnter}
+            ?gsm=${this.gsm}
+            ?disableCompletion=${this.disableCompletion}
+            maxlength=${ifDefined(this.maxLength)}
+            counter=${ifDefined(this.counter)}
+            minHeight=${ifDefined(this.minHeight)}
+            widgetOnly
+            @change=${this.handleCompletionChange}
+          ></temba-completion>
+        </div>
+
+        <div class="media-wrapper ">
+          <temba-media-picker
+            .accept=${this.accept}
+            .max=${this.maxAttachments}
+            .endpoint=${this.endpoint}
+            @change=${this.handleMediaChange}
+            ignoreDrops
+          ></temba-media-picker>
+        </div>
+        <temba-icon
+          class="attachment-icon"
+          name=${Icon.attachment}
+          size="1.2"
+          @click=${this.handleAttachmentIconClick}
+        ></temba-icon>
+
+        <div class="drop-overlay"></div>
+
+        <!-- Hidden media picker for handling uploads when no attachments are shown -->
+        ${!hasAttachments
+          ? html`<temba-media-picker
+              style="display: none;"
               .accept=${this.accept}
               .max=${this.maxAttachments}
               .endpoint=${this.endpoint}
               @change=${this.handleMediaChange}
               ignoreDrops
-            ></temba-media-picker>
-          </div>
-          <temba-icon
-            class="attachment-icon"
-            name=${Icon.attachment}
-            size="1.2"
-            @click=${this.handleAttachmentIconClick}
-          ></temba-icon>
-
-          <div class="drop-overlay"></div>
-
-          <!-- Hidden media picker for handling uploads when no attachments are shown -->
-          ${!hasAttachments
-            ? html`<temba-media-picker
-                style="display: none;"
-                .accept=${this.accept}
-                .max=${this.maxAttachments}
-                .endpoint=${this.endpoint}
-                @change=${this.handleMediaChange}
-                ignoreDrops
-              ></temba-media-picker>`
-            : ''}
-        </div>
-      </temba-field>
+            ></temba-media-picker>`
+          : ''}
+      </div>
     `;
   }
 }

package/src/form/TembaSlider.ts

@@ -1,10 +1,10 @@
 import { css, html, TemplateResult } from 'lit';
 import { styleMap } from 'lit-html/directives/style-map.js';
 import { property } from 'lit/decorators.js';
-import { FormElement } from './FormElement';
+import { FieldElement } from './FieldElement';
 import { getClasses } from '../utils';
 
-export class TembaSlider extends FormElement {
+export class TembaSlider extends FieldElement {
   static get styles() {
     return css`
       :host {
@@ -142,7 +142,7 @@ export class TembaSlider extends FormElement {
     this.requestUpdate();
   }
 
-  public render(): TemplateResult {
+  public renderWidget(): TemplateResult {
     return html` <div class="${getClasses({ grabbed: this.grabbed })}">
       <div
         style=${styleMap({ left: this.circleX + 'px' })}

package/src/form/TemplateEditor.ts

@@ -1,9 +1,9 @@
 import { property } from 'lit/decorators.js';
-import { FormElement } from './FormElement';
 import { TemplateResult, html, css, LitElement } from 'lit';
 import { CustomEventType } from '../interfaces';
 import { MediaPicker } from './MediaPicker';
 import { getClasses } from '../utils';
+import { FieldElement } from './FieldElement';
 
 interface Component {
   name: string;
@@ -28,7 +28,7 @@ interface Template {
   base_translation: Translation;
 }
 
-export class TemplateEditor extends FormElement {
+export class TemplateEditor extends FieldElement {
   static shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true
@@ -457,7 +457,7 @@ export class TemplateEditor extends FormElement {
     </div>`;
   }
 
-  public render(): TemplateResult {
+  public renderWidget(): TemplateResult {
     let content = null;
     if (this.translation) {
       content = this.renderComponents(this.translation.components);

package/src/form/TextInput.ts

@@ -2,7 +2,7 @@ import { TemplateResult, html, css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { styleMap } from 'lit-html/directives/style-map.js';
-import { FormElement } from './FormElement';
+import { FieldElement } from './FieldElement';
 import { Modax } from '../layout/Modax';
 import { sanitizeUnintendedUnicode } from '../utils';
 import { CharCount } from '../display/CharCount';
@@ -13,9 +13,10 @@ export enum InputType {
   Number = 'number'
 }
 
-export class TextInput extends FormElement {
+export class TextInput extends FieldElement {
   static get styles() {
     return css`
+      ${super.styles}
       .input-container {
         border-radius: var(--curvature-widget);
         cursor: var(--input-cursor);
@@ -368,9 +369,15 @@ export class TextInput extends FormElement {
 
   // TODO make this a formelement and have contactsearch set the root
   public render(): TemplateResult {
-    const containerStyle = {
-      height: `${this.textarea ? '100%' : 'auto'}`
-    };
+    return this.renderField();
+  }
+
+  protected renderWidget() {
+    const containerStyle: any = {};
+    if (this.counter) {
+      containerStyle['--counter-background'] =
+        'var(--color-widget-border, transparent)';
+    }
 
     const clear =
       this.clearable && this.inputElement && this.inputElement.value
@@ -474,31 +481,21 @@ export class TextInput extends FormElement {
     }
 
     return html`
-      <temba-field
-        name=${this.name}
-        .label="${this.label}"
-        .helpText="${this.helpText}"
-        .errors=${this.errors}
-        .widgetOnly=${this.widgetOnly}
-        .hideLabel=${this.hideLabel}
-        .disabled=${this.disabled}
+      <div
+        class="input-container"
+        style=${styleMap(containerStyle)}
+        @click=${this.handleContainerClick}
       >
-        <div
-          class="input-container"
-          style=${styleMap(containerStyle)}
-          @click=${this.handleContainerClick}
+        <slot name="prefix"></slot>
+
+        ${input} ${clear}
+        <slot name="type" class="type-icon"
+          >${this.type === InputType.Number
+            ? html`<temba-icon name="number"></temba-icon>`
+            : null}</slot
         >
-          <slot name="prefix"></slot>
-
-          ${input} ${clear}
-          <slot name="type" class="type-icon"
-            >${this.type === InputType.Number
-              ? html`<temba-icon name="number"></temba-icon>`
-              : null}</slot
-          >
-          <slot></slot>
-        </div>
-      </temba-field>
+        <slot></slot>
+      </div>
     `;
   }
 }

package/src/form/select/Select.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
-import { TemplateResult, html, css, CSSResult, CSSResultArray } from 'lit';
+import { TemplateResult, html, css } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import {
   getUrl,
@@ -11,7 +11,7 @@ import {
 import '../../display/Options';
 import '../../list/SortableList';
 import { EventHandler } from '../../RapidElement';
-import { FormElement } from '../../form/FormElement';
+import { FieldElement } from '../../form/FieldElement';
 
 import { lru } from 'tiny-lru';
 import { CompletionOption, CustomEventType, Position } from '../../interfaces';
@@ -35,11 +35,13 @@ export interface SelectOption {
   arbitrary?: boolean;
 }
 
-export class Select<T extends SelectOption> extends FormElement {
+export class Select<T extends SelectOption> extends FieldElement {
   private hiddenInputs: HTMLInputElement[] = [];
 
-  static get styles(): CSSResult | CSSResultArray {
+  static get styles() {
     return css`
+      ${super.styles}
+
       :host {
         --transition-speed: 0;
         font-family: var(--font-family);
@@ -1660,7 +1662,7 @@ export class Select<T extends SelectOption> extends FormElement {
     }
   }
 
-  public render(): TemplateResult {
+  protected renderWidget(): TemplateResult {
     const placeholder = this.values.length === 0 ? this.placeholder : '';
 
     // Single unified placeholder - shows when empty and (not focused OR not searchable)
@@ -1845,16 +1847,6 @@ export class Select<T extends SelectOption> extends FormElement {
         ${placeholderElement}`}`;
 
     return html`
-            
-      <temba-field
-        name=${this.name}
-        .label=${this.label}
-        .helpText=${this.helpText}
-        .errors=${this.errors}
-        .widgetOnly=${this.widgetOnly}
-        .hideErrors=${this.hideErrors}
-        ?disabled=${this.disabled}
-      >
         <slot></slot>
         <div class="wrapper-bg">
         
@@ -1948,7 +1940,10 @@ export class Select<T extends SelectOption> extends FormElement {
           : null
       }
     </temba-options>
-  </temba-field>
-  `;
+    `;
+  }
+
+  public render(): TemplateResult {
+    return this.renderField();
   }
 }

package/src/form/select/UserSelect.ts

@@ -1,4 +1,4 @@
-import { css, CSSResultArray, html, TemplateResult } from 'lit';
+import { css, html, TemplateResult } from 'lit';
 import { Select, SelectOption } from './Select';
 import { property } from 'lit/decorators.js';
 import { getFullName } from '../../display/TembaUser';
@@ -10,16 +10,15 @@ export interface UserOption extends SelectOption {
 }
 
 export class UserSelect extends Select<UserOption> {
-  static get styles(): CSSResultArray {
-    return [
-      super.styles,
-      css`
-        :host {
-          width: 150px;
-          display: block;
-        }
-      `
-    ];
+  static get styles() {
+    return css`
+      ${super.styles}
+
+      :host {
+        width: 150px;
+        display: block;
+      }
+    `;
   }
 
   @property({ type: String })

package/src/form/select/WorkspaceSelect.ts

@@ -1,4 +1,4 @@
-import { css, CSSResultArray, html, TemplateResult } from 'lit';
+import { css, html, TemplateResult } from 'lit';
 import { Select, SelectOption } from './Select';
 import { property } from 'lit/decorators.js';
 import { getScrollParent } from '../../utils';
@@ -10,15 +10,14 @@ export interface WorkspaceOption extends SelectOption {
 }
 
 export class WorkspaceSelect extends Select<WorkspaceOption> {
-  static get styles(): CSSResultArray {
-    return [
-      super.styles,
-      css`
-        :host {
-          border: 0px solid blue;
-        }
-      `
-    ];
+  static get styles() {
+    return css`
+      ${super.styles}
+
+      :host {
+        border: 0px solid blue;
+      }
+    `;
   }
 
   @property({ type: String })

package/src/live/ContactChat.ts

@@ -22,11 +22,11 @@ import {
   AirtimeTransferredEvent,
   CallEvent,
   ChannelEvent,
+  ChatStartedEvent,
   ContactEvent,
   ContactGroupsEvent,
   ContactHistoryPage,
   ContactLanguageChangedEvent,
-  FlowEvent,
   MsgEvent,
   NameChangedEvent,
   OptInEvent,
@@ -51,36 +51,35 @@ export const BODY_SNIPPET_LENGTH = 250;
 */
 
 export enum Events {
-  MESSAGE_CREATED = 'msg_created',
-  MESSAGE_RECEIVED = 'msg_received',
+  AIRTIME_TRANSFERRED = 'airtime_transferred',
   BROADCAST_CREATED = 'broadcast_created',
-  IVR_CREATED = 'ivr_created',
   CALL_CREATED = 'call_created',
+  CALL_MISSED = 'call_missed',
   CALL_RECEIVED = 'call_received',
+  CHAT_STARTED = 'chat_started',
   CONTACT_FIELD_CHANGED = 'contact_field_changed',
   CONTACT_GROUPS_CHANGED = 'contact_groups_changed',
+  CONTACT_LANGUAGE_CHANGED = 'contact_language_changed',
   CONTACT_NAME_CHANGED = 'contact_name_changed',
   CONTACT_URNS_CHANGED = 'contact_urns_changed',
-  CHANNEL_EVENT = 'channel_event',
-  CONTACT_LANGUAGE_CHANGED = 'contact_language_changed',
-  AIRTIME_TRANSFERRED = 'airtime_transferred',
+  IVR_CREATED = 'ivr_created',
+  MSG_CREATED = 'msg_created',
+  MSG_RECEIVED = 'msg_received',
   NOTE_CREATED = 'note_created',
+  OPTIN_REQUESTED = 'optin_requested',
+  OPTIN_STARTED = 'optin_started',
+  OPTIN_STOPPED = 'optin_stopped',
+  RUN_ENDED = 'run_ended',
+  RUN_STARTED = 'run_started',
   TICKET_ASSIGNED = 'ticket_assigned',
-  TICKET_NOTE_ADDED = 'ticket_note_added',
   TICKET_CLOSED = 'ticket_closed',
+  TICKET_NOTE_ADDED = 'ticket_note_added',
   TICKET_OPENED = 'ticket_opened',
   TICKET_REOPENED = 'ticket_reopened',
   TICKET_TOPIC_CHANGED = 'ticket_topic_changed',
-  OPTIN_STARTED = 'optin_started',
-  OPTIN_STOPPED = 'optin_stopped',
-  OPTIN_REQUESTED = 'optin_requested',
-  RUN_STARTED = 'run_started',
-  RUN_ENDED = 'run_ended',
 
   // deprecated
-  CALL_STARTED = 'call_started',
-  FLOW_ENTERED = 'flow_entered',
-  FLOW_EXITED = 'flow_exited'
+  CHANNEL_EVENT = 'channel_event'
 }
 
 const renderInfoList = (singular: string, plural: string, items: any[]) => {
@@ -123,18 +122,6 @@ const renderChannelEvent = (event: ChannelEvent): string => {
   }
 };
 
-const renderFlowEvent = (event: FlowEvent): string => {
-  let verb = 'Interrupted';
-  if (event.status !== 'I') {
-    if (event.type === Events.FLOW_ENTERED) {
-      verb = 'Started';
-    } else {
-      verb = 'Completed';
-    }
-  }
-  return `${verb} [**${event.flow.name}**](/flow/editor/${event.flow.uuid}/)`;
-};
-
 const renderRunEvent = (event: RunEvent): string => {
   let verb = 'Started';
   if (event.type === Events.RUN_ENDED) {
@@ -150,6 +137,14 @@ const renderRunEvent = (event: RunEvent): string => {
   return `${verb} [**${event.flow.name}**](/flow/editor/${event.flow.uuid}/)`;
 };
 
+const renderChatStartedEvent = (event: ChatStartedEvent): string => {
+  if (event.params) {
+    return `Chat referral`;
+  } else {
+    return `Chat started`;
+  }
+};
+
 const renderUpdateEvent = (event: UpdateFieldEvent): string => {
   return event.value
     ? `Updated **${event.field.name}** to **${event.value.text}**`
@@ -227,9 +222,11 @@ export const renderContactLanguageChangedEvent = (
 
 export const renderCallEvent = (event: CallEvent): string => {
   if (event.type === Events.CALL_CREATED) {
-    return `Call Started`;
+    return `Call started`;
+  } else if (event.type === Events.CALL_MISSED) {
+    return `Call missed`;
   } else if (event.type === Events.CALL_RECEIVED) {
-    return `Call Answered`;
+    return `Call answered`;
   }
 };
 
@@ -665,13 +662,6 @@ export class ContactChat extends ContactStoreElement {
           text: `Topic changed to **${(event as TicketEvent).topic.name}**`
         };
         break;
-      case Events.FLOW_ENTERED:
-      case Events.FLOW_EXITED:
-        message = {
-          type: MessageType.Inline,
-          text: renderFlowEvent(event as FlowEvent)
-        };
-        break;
       case Events.RUN_STARTED:
       case Events.RUN_ENDED:
         message = {
@@ -710,22 +700,23 @@ export class ContactChat extends ContactStoreElement {
         };
         break;
       case Events.CALL_CREATED:
+      case Events.CALL_MISSED:
       case Events.CALL_RECEIVED:
         message = {
           type: MessageType.Inline,
           text: renderCallEvent(event as CallEvent)
         };
         break;
-      case Events.CALL_STARTED: // deprecated
+      case Events.CHANNEL_EVENT:
         message = {
           type: MessageType.Inline,
-          text: `Started Call`
+          text: renderChannelEvent(event as ChannelEvent)
         };
         break;
-      case Events.CHANNEL_EVENT:
+      case Events.CHAT_STARTED:
         message = {
           type: MessageType.Inline,
-          text: renderChannelEvent(event as ChannelEvent)
+          text: renderChatStartedEvent(event as ChatStartedEvent)
         };
         break;
       case Events.CONTACT_LANGUAGE_CHANGED:

package/src/live/ContactFieldEditor.ts

@@ -1,12 +1,12 @@
 import { css, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
-import { FormElement } from '../form/FormElement';
 import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import { InputType, TextInput } from '../form/TextInput';
 import { Icon } from '../Icons';
 import { getClasses, WebResponse } from '../utils';
 import { Select } from '../form/select/Select';
+import { FieldElement } from '../form/FieldElement';
 
 enum Status {
   Success = 'success',
@@ -380,7 +380,7 @@ export class ContactFieldEditor extends RapidElement {
   public handleSubmit() {
     const input = this.shadowRoot.querySelector(
       'temba-textinput, temba-datepicker'
-    ) as FormElement;
+    ) as FieldElement;
 
     if (input.value !== this.value) {
       this.dirty = true;

package/temba-modules.ts

@@ -6,7 +6,7 @@ import { Completion } from './src/form/Completion';
 import { Modax } from './src/layout/Modax';
 import { Dialog } from './src/layout/Dialog';
 import { Button } from './src/display/Button';
-import { FormField } from './src/form/FormField';
+import { FieldElement } from './src/form/FieldElement';
 import { Loading } from './src/display/Loading';
 import { CharCount } from './src/display/CharCount';
 import { Options } from './src/display/Options';
@@ -103,7 +103,8 @@ addCustomElement('temba-field-manager', FieldManager);
 addCustomElement('temba-urn', ContactUrn);
 addCustomElement('temba-content-menu', ContentMenu);
 
-addCustomElement('temba-field', FormField);
+// Note: FieldElement is a base class and not directly instantiated as a custom element
+export { FieldElement };
 addCustomElement('temba-dialog', Dialog);
 addCustomElement('temba-modax', Modax);
 addCustomElement('temba-charcount', CharCount);

package/test/temba-checkbox.test.ts

@@ -165,4 +165,30 @@ describe('temba-checkbox', () => {
     data = new FormData(form);
     expect(data.get('my-cb')).to.equal('5');
   });
+
+  it('aligns help text with label when both are present', async () => {
+    const el: Checkbox = await fixture(html`
+      <temba-checkbox
+        label="Checkbox with help"
+        help_text="This help text should align with the label text"
+      >
+      </temba-checkbox>
+    `);
+
+    expect(el.label).to.equal('Checkbox with help');
+    expect(el.helpText).to.equal(
+      'This help text should align with the label text'
+    );
+
+    // Verify help text element exists and has proper alignment styles
+    const helpTextEl = el.shadowRoot.querySelector(
+      '.checkbox-help-text'
+    ) as HTMLElement;
+    expect(helpTextEl).to.not.be.null;
+    expect(helpTextEl.textContent.trim()).to.equal(
+      'This help text should align with the label text'
+    );
+
+    await assertScreenshot('checkbox/checkbox-with-help-text', getClip(el));
+  });
 });

package/test/temba-integration-markdown.test.ts

@@ -16,10 +16,8 @@ describe('FormElement markdown integration', () => {
 
     await checkbox.updateComplete;
 
-    // Check that errors are rendered with markdown
-    const errorElements = checkbox.shadowRoot
-      .querySelectorAll('temba-field')[0]
-      .shadowRoot.querySelectorAll('.alert-error');
+    // Check that errors are rendered with markdown directly in checkbox shadow root
+    const errorElements = checkbox.shadowRoot.querySelectorAll('.alert-error');
     expect(errorElements.length).to.equal(2);
 
     // First error should have bold text and link