@nyaruka/temba-components 0.129.9 → 0.129.11

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 })