@nyaruka/temba-components 0.129.8 → 0.129.10

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;
+      }
+    `;
+  }
 }

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);
@@ -193,7 +194,7 @@ export class TextInput extends FormElement {
 
     this.inputElement = this.shadowRoot.querySelector('.textinput');
 
-    if (changes.has('counter')) {
+    if (changes.has('counter') && this.counter && this.counter.trim()) {
       let root = this.getParentModax() as any;
       if (root) {
         root = root.shadowRoot;
@@ -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>
     `;
   }
 }