@nyaruka/temba-components 0.129.8 → 0.129.10

package/out-tsc/src/form/ImagePicker.js

@@ -4,14 +4,128 @@ import { html, css } 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 {
+import { FieldElement } from './FieldElement';
+export class ImagePicker extends FieldElement {
     constructor() {
         super(...arguments);
         this.shape = 'square';
         this.showCroppie = false;
         this.uploadReader = new FileReader();
     }
+    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;
+      }
+
+      .toggle {
+        height: 110px;
+        width: 110px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .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: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: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:hover temba-icon {
+        background: #fff;
+        color: var(--color-primary-dark);
+      }
+
+      .circle .toggle.set temba-icon {
+        margin-right: -70%;
+        margin-bottom: -70%;
+      }
+
+      .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 {
+        pointer-events: none;
+        display: flex;
+      }
+
+      .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.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);
+      }
+    `;
+    }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         const picker = this;
@@ -86,18 +200,9 @@ export class ImagePicker extends FormElement {
         }
         input.value = '';
     }
-    render() {
+    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}/>
         <div class='toggle ${this.url ? 'set' : ''}  ${this.showCroppie ? 'hidden' : ''}' @click=${this.handleToggleClicked} style="background: ${this.url
             ? `url('${this.url}') center / contain no-repeat`
@@ -114,122 +219,13 @@ export class ImagePicker extends FormElement {
               <temba-icon class="submit" size="1" name=${Icon.submit} @click=${this.saveResult}></temba-icon>
             </div>
         </temba-mask>
-      </temba-field>
-    </div>
+      </div>
     `;
     }
-}
-ImagePicker.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);
-    }
-
-    .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;
-    }
-
-    .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: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: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:hover temba-icon {
-      background: #fff;
-      color: var(--color-primary-dark);
-    }
-
-    .circle .toggle.set temba-icon {
-      margin-right: -70%;
-      margin-bottom: -70%;
-    }
-
-    .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 {
-      pointer-events: none;
-      display: flex;
-    }
-
-    .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.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);
+    render() {
+        return this.renderField();
     }
-  `;
+}
 __decorate([
     property({ type: String })
 ], ImagePicker.prototype, "tempImage", void 0);

package/out-tsc/src/form/ImagePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImagePicker.js","sourceRoot":"","sources":["../../../src/form/ImagePicker.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-this-alias */\nimport { html, css, PropertyValueMap } from 'lit';\nimport { CroppieCSS } from './CroppieCSS';\nimport { property } from 'lit/decorators.js';\nimport { Icon } from '../Icons';\nimport { FormElement } from './FormElement';\n\nexport class ImagePicker extends FormElement {\n  static styles = css`\n    ${CroppieCSS}\n\n    .croppie {\n      max-width: 400px;\n      border: 0px solid #ccc;\n      border-radius: 0.5em;\n      overflow: hidden;\n      background: #fff;\n      margin-top: -20%;\n      box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1);\n    }\n\n    .croppie .controls {\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n      justify-content: center;\n      position: absolute;\n      z-index: 1;\n      width: 400px;\n      margin-top: -42px;\n    }\n\n    .toggle {\n      height: 110px;\n      width: 110px;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .circle .toggle {\n      border-radius: 50%;\n    }\n\n    .toggle.set {\n      box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px 0px,\n        rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, inset 0 0 0 5px rgba(0, 0, 0, 0.1);\n    }\n\n    .toggle.set:hover {\n      box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px 0px,\n        rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, inset 0 0 0 5px rgba(0, 0, 0, 0.2);\n    }\n\n    .toggle temba-icon {\n      color: rgba(0, 0, 0, 0.2);\n      padding: 5px;\n    }\n\n    toggle:hover temba-icon {\n      color: rgba(0, 0, 0, 0.8);\n    }\n\n    .toggle.set temba-icon {\n      border-radius: 50%;\n      margin-right: -90%;\n      margin-bottom: -50%;\n      background: rgba(240, 240, 240, 1);\n      box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;\n    }\n\n    .toggle.set:hover temba-icon {\n      background: #fff;\n      color: var(--color-primary-dark);\n    }\n\n    .circle .toggle.set temba-icon {\n      margin-right: -70%;\n      margin-bottom: -70%;\n    }\n\n    .hidden {\n      display: none;\n    }\n\n    .controls temba-icon {\n      margin: 0em 0.75em;\n      background: rgba(255, 255, 255, 0.8);\n      border-radius: 50%;\n      padding: 6px;\n      transition: all 0.1s ease-in-out;\n    }\n\n    .controls {\n      pointer-events: none;\n      display: flex;\n    }\n\n    .controls temba-icon {\n      pointer-events: all;\n    }\n\n    .controls temba-icon.close {\n      color: rgba(0, 0, 0, 0.2);\n      background: rgba(255, 255, 255, 0.2);\n    }\n\n    .controls temba-icon.submit {\n      color: rgba(0, 0, 0, 0.2);\n      box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);\n    }\n\n    .controls temba-icon:hover {\n      color: white;\n      cursor: pointer;\n      background: var(--color-primary-dark);\n    }\n  `;\n\n  @property({ type: String })\n  tempImage: string;\n\n  @property({ type: String })\n  url: string;\n\n  @property({ type: String })\n  shape = 'square';\n\n  @property({ type: Boolean, attribute: false })\n  showCroppie = false;\n\n  uploadReader = new FileReader();\n  croppie: any;\n\n  protected firstUpdated(\n    changed: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changed);\n    const picker = this;\n\n    this.uploadReader.onload = function () {\n      picker.launchCroppie(picker.uploadReader.result as any);\n    };\n  }\n\n  public updated(changed: Map<string, any>): void {\n    super.updated(changed);\n    if (changed.has('url')) {\n      this.setAttribute('url', this.url);\n    }\n  }\n\n  private closeCroppie() {\n    this.showCroppie = false;\n    const wrapper = this.shadowRoot.querySelector('.croppie .embed');\n    if (wrapper.firstChild) {\n      wrapper.removeChild(wrapper.firstChild);\n    }\n  }\n\n  private launchCroppie(url: string) {\n    const wrapper = this.shadowRoot.querySelector('.croppie .embed');\n    if (wrapper.firstChild) {\n      wrapper.removeChild(wrapper.firstChild);\n    }\n    this.showCroppie = true;\n    const ele = document.createElement('div');\n    wrapper.appendChild(ele);\n\n    const Croppie = (window as any).Croppie;\n    this.croppie = new Croppie(ele, {\n      enableExif: true,\n      viewport: {\n        width: 300,\n        height: 300,\n        type: this.shape\n      },\n      boundary: {\n        width: 400,\n        height: 400\n      }\n    });\n\n    this.croppie.bind({ url });\n  }\n\n  private saveResult() {\n    const picker = this;\n    this.croppie\n      .result({\n        type: 'blob',\n        size: 'viewport',\n        format: 'webp',\n        quality: 1,\n        circle: false\n      })\n      .then(function (resp: any) {\n        const blob = resp;\n        picker.url = URL.createObjectURL(blob);\n\n        // const blob = dataURItoBlob(resp);\n        const fd = new FormData();\n        fd.append(picker.name, blob, 'filename.webp');\n\n        picker.value = fd;\n        picker.closeCroppie();\n      });\n  }\n\n  private handleToggleClicked() {\n    const fileInput = this.shadowRoot.querySelector('#file');\n    (fileInput as any).click();\n  }\n\n  private handleFileChanged(e: Event) {\n    const input = e.target as any;\n    if (input.files.length > 0) {\n      this.uploadReader.readAsDataURL(input.files[0]);\n    }\n    input.value = '';\n  }\n\n  protected render() {\n    return html`\n    <div class=\"wrapper ${this.shape} ${this.label ? 'label' : ''}\">\n      <temba-field\n        name=${this.name}\n        label=${this.label}\n        .helpText=${this.helpText}\n        .errors=${this.errors}\n        .widgetOnly=${this.widgetOnly}\n        .helpAlways=${true}\n        ?disabled=${this.disabled}\n      >\n        <input class='hidden' type=\"file\" accept=\"image/*\" capture=\"camera\" id=\"file\" name=\"file\" @change=${\n          this.handleFileChanged\n        }/>\n        <div class='toggle ${this.url ? 'set' : ''}  ${\n      this.showCroppie ? 'hidden' : ''\n    }' @click=${this.handleToggleClicked} style=\"background: ${\n      this.url\n        ? `url('${this.url}') center / contain no-repeat`\n        : 'rgba(0, 0, 0, 0.1)'\n    }\">\n          <temba-icon name=${Icon.upload_image} size=\"1.5\"></temba-icon>\n        </div>\n        \n        <temba-mask ?show=${this.showCroppie} class=\"${\n      this.showCroppie ? 'editing' : ''\n    }\">\n          <div class='croppie'>\n            <div class='embed'></div>\n            <div class='controls'>\n              <temba-icon class=\"close\" size=\"1\" name=${Icon.close} @click=${\n      this.closeCroppie\n    }></temba-icon>\n              <div style=\"flex-grow:1\"></div>\n              <temba-icon class=\"submit\" size=\"1\" name=${Icon.submit} @click=${\n      this.saveResult\n    }></temba-icon>\n            </div>\n        </temba-mask>\n      </temba-field>\n    </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ImagePicker.js","sourceRoot":"","sources":["../../../src/form/ImagePicker.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-this-alias */\nimport { html, css, PropertyValueMap } from 'lit';\nimport { CroppieCSS } from './CroppieCSS';\nimport { property } from 'lit/decorators.js';\nimport { Icon } from '../Icons';\nimport { FieldElement } from './FieldElement';\n\nexport class ImagePicker extends FieldElement {\n  static get styles() {\n    return css`\n      ${super.styles}\n      ${CroppieCSS}\n\n      .croppie {\n        max-width: 400px;\n        border: 0px solid #ccc;\n        border-radius: 0.5em;\n        overflow: hidden;\n        background: #fff;\n        margin-top: -20%;\n        box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1);\n      }\n\n      .croppie .controls {\n        display: flex;\n        align-items: center;\n        flex-direction: row;\n        justify-content: center;\n        position: absolute;\n        z-index: 1;\n        width: 400px;\n        margin-top: -42px;\n      }\n\n      .toggle {\n        height: 110px;\n        width: 110px;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .circle .toggle {\n        border-radius: 50%;\n      }\n\n      .toggle.set {\n        box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px 0px,\n          rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, inset 0 0 0 5px rgba(0, 0, 0, 0.1);\n      }\n\n      .toggle.set:hover {\n        box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px 0px,\n          rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, inset 0 0 0 5px rgba(0, 0, 0, 0.2);\n      }\n\n      .toggle temba-icon {\n        color: rgba(0, 0, 0, 0.2);\n        padding: 5px;\n      }\n\n      toggle:hover temba-icon {\n        color: rgba(0, 0, 0, 0.8);\n      }\n\n      .toggle.set temba-icon {\n        border-radius: 50%;\n        margin-right: -90%;\n        margin-bottom: -50%;\n        background: rgba(240, 240, 240, 1);\n        box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;\n      }\n\n      .toggle.set:hover temba-icon {\n        background: #fff;\n        color: var(--color-primary-dark);\n      }\n\n      .circle .toggle.set temba-icon {\n        margin-right: -70%;\n        margin-bottom: -70%;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      .controls temba-icon {\n        margin: 0em 0.75em;\n        background: rgba(255, 255, 255, 0.8);\n        border-radius: 50%;\n        padding: 6px;\n        transition: all 0.1s ease-in-out;\n      }\n\n      .controls {\n        pointer-events: none;\n        display: flex;\n      }\n\n      .controls temba-icon {\n        pointer-events: all;\n      }\n\n      .controls temba-icon.close {\n        color: rgba(0, 0, 0, 0.2);\n        background: rgba(255, 255, 255, 0.2);\n      }\n\n      .controls temba-icon.submit {\n        color: rgba(0, 0, 0, 0.2);\n        box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);\n      }\n\n      .controls temba-icon:hover {\n        color: white;\n        cursor: pointer;\n        background: var(--color-primary-dark);\n      }\n    `;\n  }\n\n  @property({ type: String })\n  tempImage: string;\n\n  @property({ type: String })\n  url: string;\n\n  @property({ type: String })\n  shape = 'square';\n\n  @property({ type: Boolean, attribute: false })\n  showCroppie = false;\n\n  uploadReader = new FileReader();\n  croppie: any;\n\n  protected firstUpdated(\n    changed: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changed);\n    const picker = this;\n\n    this.uploadReader.onload = function () {\n      picker.launchCroppie(picker.uploadReader.result as any);\n    };\n  }\n\n  public updated(changed: Map<string, any>): void {\n    super.updated(changed);\n    if (changed.has('url')) {\n      this.setAttribute('url', this.url);\n    }\n  }\n\n  private closeCroppie() {\n    this.showCroppie = false;\n    const wrapper = this.shadowRoot.querySelector('.croppie .embed');\n    if (wrapper.firstChild) {\n      wrapper.removeChild(wrapper.firstChild);\n    }\n  }\n\n  private launchCroppie(url: string) {\n    const wrapper = this.shadowRoot.querySelector('.croppie .embed');\n    if (wrapper.firstChild) {\n      wrapper.removeChild(wrapper.firstChild);\n    }\n    this.showCroppie = true;\n    const ele = document.createElement('div');\n    wrapper.appendChild(ele);\n\n    const Croppie = (window as any).Croppie;\n    this.croppie = new Croppie(ele, {\n      enableExif: true,\n      viewport: {\n        width: 300,\n        height: 300,\n        type: this.shape\n      },\n      boundary: {\n        width: 400,\n        height: 400\n      }\n    });\n\n    this.croppie.bind({ url });\n  }\n\n  private saveResult() {\n    const picker = this;\n    this.croppie\n      .result({\n        type: 'blob',\n        size: 'viewport',\n        format: 'webp',\n        quality: 1,\n        circle: false\n      })\n      .then(function (resp: any) {\n        const blob = resp;\n        picker.url = URL.createObjectURL(blob);\n\n        // const blob = dataURItoBlob(resp);\n        const fd = new FormData();\n        fd.append(picker.name, blob, 'filename.webp');\n\n        picker.value = fd;\n        picker.closeCroppie();\n      });\n  }\n\n  private handleToggleClicked() {\n    const fileInput = this.shadowRoot.querySelector('#file');\n    (fileInput as any).click();\n  }\n\n  private handleFileChanged(e: Event) {\n    const input = e.target as any;\n    if (input.files.length > 0) {\n      this.uploadReader.readAsDataURL(input.files[0]);\n    }\n    input.value = '';\n  }\n\n  protected renderWidget() {\n    return html`\n      <div class=\"wrapper ${this.shape} ${this.label ? 'label' : ''}\">\n        <input class='hidden' type=\"file\" accept=\"image/*\" capture=\"camera\" id=\"file\" name=\"file\" @change=${\n          this.handleFileChanged\n        }/>\n        <div class='toggle ${this.url ? 'set' : ''}  ${\n      this.showCroppie ? 'hidden' : ''\n    }' @click=${this.handleToggleClicked} style=\"background: ${\n      this.url\n        ? `url('${this.url}') center / contain no-repeat`\n        : 'rgba(0, 0, 0, 0.1)'\n    }\">\n          <temba-icon name=${Icon.upload_image} size=\"1.5\"></temba-icon>\n        </div>\n        \n        <temba-mask ?show=${this.showCroppie} class=\"${\n      this.showCroppie ? 'editing' : ''\n    }\">\n          <div class='croppie'>\n            <div class='embed'></div>\n            <div class='controls'>\n              <temba-icon class=\"close\" size=\"1\" name=${Icon.close} @click=${\n      this.closeCroppie\n    }></temba-icon>\n              <div style=\"flex-grow:1\"></div>\n              <temba-icon class=\"submit\" size=\"1\" name=${Icon.submit} @click=${\n      this.saveResult\n    }></temba-icon>\n            </div>\n        </temba-mask>\n      </div>\n    `;\n  }\n\n  public render() {\n    return this.renderField();\n  }\n}\n"]}

package/out-tsc/src/form/KeyValueEditor.js

@@ -158,49 +158,53 @@ let KeyValueEditor = class KeyValueEditor extends BaseListEditor {
     getContainerClass() {
         return 'key-value-editor';
     }
-};
-KeyValueEditor.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:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
 
-    .remove-btn-spacer {
-      width: 32px;
-      height: 32px;
+      .remove-btn-spacer {
+        width: 32px;
+        height: 32px;
+      }
+    `;
     }
-  `;
+};
 __decorate([
     property({ type: String })
 ], KeyValueEditor.prototype, "keyPlaceholder", void 0);

package/out-tsc/src/form/KeyValueEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyValueEditor.js","sourceRoot":"","sources":["../../../src/form/KeyValueEditor.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,cAAc,EAAY,MAAM,kBAAkB,CAAC;AAQrD,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,cAA4B;IAgB9D;QACE,KAAK,EAAE,CAAC;QAfV,mBAAc,GAAG,KAAK,CAAC;QAGvB,qBAAgB,GAAG,OAAO,CAAC;QAG3B,mBAAc,GAAG,IAAI,CAAC;QAGd,cAAS,GAAgC,EAAE,CAAC;QAEpD,oCAAoC;QACpC,sBAAiB,GAAG,IAAI,CAAC;QAIvB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;IACnB,CAAC;IAED,4DAA4D;IAE5D,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,CACvB,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAC7D,CAAC;IACJ,CAAC;IAED,IAAI,KAAK,CAAC,QAAiD;QACzD,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC5B,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC;QAC9B,CAAC;aAAM,CAAC;YACN,iCAAiC;YACjC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;gBAClE,GAAG;gBACH,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;aACzD,CAAC,CAAC,CAAC;QACN,CAAC;QACD,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,6BAA6B;IAC7B,WAAW,CAAC,IAAkB;QAC5B,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;IAC5D,CAAC;IAED,eAAe;QACb,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;IAChC,CAAC;IAED,wEAAwE;IAC9D,UAAU,CAAC,KAAqB;QACxC,OAAO,KAAK,CAAC,MAAM,CACjB,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAC7D,CAAC;IACJ,CAAC;IAED,+DAA+D;IAC/D,QAAQ;QACN,MAAM,MAAM,GAA2B,EAAE,CAAC;QAC1C,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE;YACrC,IAAI,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;gBAC7C,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;YACtB,CAAC;QACH,CAAC,CAAC,CAAC;QACH,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,kFAAkF;IAClF,YAAY;QACV,MAAM,YAAY,GAAgC,EAAE,CAAC;QAErD,mCAAmC;QACnC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;YAC5C,IAAI,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;gBAC7C,YAAY,CAAC,KAAK,CAAC,GAAG,wCAAwC,CAAC;YACjE,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,iDAAiD;QACjD,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM;aAC7B,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;aACrD,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC;QAEnC,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAoB,CAAC;QAC7C,YAAY,CAAC,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE;YACtC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;gBACvB,QAAQ,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;YACxB,CAAC;YACD,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC,CAAC,CAAC;QAEH,kCAAkC;QAClC,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE;YAChC,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACvB,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;oBACxB,kEAAkE;oBAClE,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC;wBACzB,YAAY,CAAC,KAAK,CAAC,GAAG,kBAAkB,GAAG,GAAG,CAAC;oBACjD,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,SAAS,GAAG,YAAY,CAAC;QAC9B,OAAO,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC;IAChD,CAAC;IAED,mBAAmB;IACnB,cAAc;QACZ,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;IACtB,CAAC;IAED,8DAA8D;IACpD,WAAW,CAAC,QAAwB;QAC5C,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;QAEvB,iDAAiD;QACjD,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,YAAY,EAAE,CAAC;QAEpB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;YAC5C,OAAO,EAAE,IAAI;SACd,CAAC,CACH,CAAC;QACF,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,eAAe,CAAC,KAAa,EAAE,MAAc;QACnD,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;QAChC,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;QAEjC,2DAA2D;QAC3D,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;YAC1B,MAAM,YAAY,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;YAC3C,OAAO,YAAY,CAAC,KAAK,CAAC,CAAC;YAC3B,IAAI,CAAC,SAAS,GAAG,YAAY,CAAC;QAChC,CAAC;QAED,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE;YAC3B,GAAG,EAAE,MAAM;YACX,KAAK,EAAE,WAAW,CAAC,KAAK;SACzB,CAAC,CAAC;IACL,CAAC;IAEO,iBAAiB,CAAC,KAAa,EAAE,QAAgB;QACvD,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;QAChC,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;QAEjC,+DAA+D;QAC/D,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;YAC1B,MAAM,YAAY,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;YAC3C,OAAO,YAAY,CAAC,KAAK,CAAC,CAAC;YAC3B,IAAI,CAAC,SAAS,GAAG,YAAY,CAAC;QAChC,CAAC;QAED,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE;YAC3B,GAAG,EAAE,WAAW,CAAC,GAAG;YACpB,KAAK,EAAE,QAAQ;SAChB,CAAC,CAAC;IACL,CAAC;IAED,UAAU,CAAC,IAAkB,EAAE,KAAa;QAC1C,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC5C,MAAM,QAAQ,GACZ,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAE5E,OAAO,IAAI,CAAA;;;mBAGI,IAAI,CAAC,GAAG;yBACF,IAAI,CAAC,cAAc;oBACxB,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE;oBAC1B,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;;;mBAGxD,IAAI,CAAC,KAAK;yBACJ,IAAI,CAAC,gBAAgB;oBAC1B,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;;UAEnE,SAAS;YACT,CAAC,CAAC,IAAI,CAAA;kDACkC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;;;aAGjE;YACH,CAAC,CAAC,IAAI,CAAA,uCAAuC;;KAElD,CAAC;IACJ,CAAC;IAES,iBAAiB;QACzB,OAAO,kBAAkB,CAAC;IAC5B,CAAC;;AAEM,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyClB,AAzCY,CAyCX;AA7OF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACJ;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDACA;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sDACN;AAGd;IADP,KAAK,EAAE;iDAC4C;AAYpD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CAKzB;AA3BU,cAAc;IAD1B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,cAAc,CAgP1B","sourcesContent":["import { html, css, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { BaseListEditor, ListItem } from './BaseListEditor';\n\ninterface KeyValueItem extends ListItem {\n  key: string;\n  value: string;\n}\n\n@customElement('temba-key-value-editor')\nexport class KeyValueEditor extends BaseListEditor<KeyValueItem> {\n  @property({ type: String })\n  keyPlaceholder = 'Key';\n\n  @property({ type: String })\n  valuePlaceholder = 'Value';\n\n  @property({ type: Boolean })\n  showValidation = true;\n\n  @state()\n  private keyErrors: { [index: number]: string } = {};\n\n  // Configure to maintain empty items\n  maintainEmptyItem = true;\n\n  constructor() {\n    super();\n    this._items = [];\n  }\n\n  // External API uses array format to preserve duplicate keys\n  @property({ type: Array })\n  get value(): KeyValueItem[] {\n    return this._items.filter(\n      ({ key, value }) => key.trim() !== '' || value.trim() !== ''\n    );\n  }\n\n  set value(newValue: KeyValueItem[] | Record<string, string>) {\n    if (Array.isArray(newValue)) {\n      this._items = [...newValue];\n    } else {\n      // Convert Record to array format\n      this._items = Object.entries(newValue || {}).map(([key, value]) => ({\n        key,\n        value: typeof value === 'string' ? value : String(value)\n      }));\n    }\n    this.requestUpdate();\n  }\n\n  // Implement abstract methods\n  isEmptyItem(item: KeyValueItem): boolean {\n    return item.key.trim() === '' && item.value.trim() === '';\n  }\n\n  createEmptyItem(): KeyValueItem {\n    return { key: '', value: '' };\n  }\n\n  // Override cleanItems to return array format to preserve duplicate keys\n  protected cleanItems(items: KeyValueItem[]): KeyValueItem[] {\n    return items.filter(\n      ({ key, value }) => key.trim() !== '' || value.trim() !== ''\n    );\n  }\n\n  // Method to convert to Record format for final form submission\n  toRecord(): Record<string, string> {\n    const result: Record<string, string> = {};\n    this._items.forEach(({ key, value }) => {\n      if (key.trim() !== '' || value.trim() !== '') {\n        result[key] = value;\n      }\n    });\n    return result;\n  }\n\n  // Method to validate and set key errors for duplicates and empty keys with values\n  validateKeys(): boolean {\n    const newKeyErrors: { [index: number]: string } = {};\n\n    // Check for empty keys with values\n    this._items.forEach(({ key, value }, index) => {\n      if (key.trim() === '' && value.trim() !== '') {\n        newKeyErrors[index] = 'Key is required when value is provided';\n      }\n    });\n\n    // Check for duplicate keys (only non-empty ones)\n    const nonEmptyKeys = this._items\n      .map(({ key }, index) => ({ key: key.trim(), index }))\n      .filter(({ key }) => key !== '');\n\n    const keyCount = new Map<string, number[]>();\n    nonEmptyKeys.forEach(({ key, index }) => {\n      if (!keyCount.has(key)) {\n        keyCount.set(key, []);\n      }\n      keyCount.get(key)!.push(index);\n    });\n\n    // Mark duplicate keys with errors\n    keyCount.forEach((indices, key) => {\n      if (indices.length > 1) {\n        indices.forEach((index) => {\n          // Only show duplicate error if there's no empty key error already\n          if (!newKeyErrors[index]) {\n            newKeyErrors[index] = `Duplicate key \"${key}\"`;\n          }\n        });\n      }\n    });\n\n    this.keyErrors = newKeyErrors;\n    return Object.keys(newKeyErrors).length === 0;\n  }\n\n  // Clear key errors\n  clearKeyErrors(): void {\n    this.keyErrors = {};\n  }\n\n  // Override updateValue to emit array format and validate keys\n  protected updateValue(newValue: KeyValueItem[]) {\n    this._items = newValue;\n\n    // Clear errors and re-validate when items change\n    this.clearKeyErrors();\n    this.validateKeys();\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: { value: this.cleanItems(newValue) },\n        bubbles: true\n      })\n    );\n    this.requestUpdate();\n  }\n\n  private handleKeyChange(index: number, newKey: string) {\n    const items = this.displayItems;\n    const currentItem = items[index];\n\n    // Clear any existing error for this key when it's modified\n    if (this.keyErrors[index]) {\n      const newKeyErrors = { ...this.keyErrors };\n      delete newKeyErrors[index];\n      this.keyErrors = newKeyErrors;\n    }\n\n    this.handleItemChange(index, {\n      key: newKey,\n      value: currentItem.value\n    });\n  }\n\n  private handleValueChange(index: number, newValue: string) {\n    const items = this.displayItems;\n    const currentItem = items[index];\n\n    // Clear any existing error for this key when value is modified\n    if (this.keyErrors[index]) {\n      const newKeyErrors = { ...this.keyErrors };\n      delete newKeyErrors[index];\n      this.keyErrors = newKeyErrors;\n    }\n\n    this.handleItemChange(index, {\n      key: currentItem.key,\n      value: newValue\n    });\n  }\n\n  renderItem(item: KeyValueItem, index: number): TemplateResult {\n    const canRemove = this.canRemoveItem(index);\n    const keyError =\n      this.showValidation && this.keyErrors[index] ? this.keyErrors[index] : '';\n\n    return html`\n      <div class=\"row\">\n        <temba-textinput\n          .value=${item.key}\n          .placeholder=${this.keyPlaceholder}\n          .errors=${keyError ? [keyError] : []}\n          @change=${(e: any) => this.handleKeyChange(index, e.target.value)}\n        ></temba-textinput>\n        <temba-textinput\n          .value=${item.value}\n          .placeholder=${this.valuePlaceholder}\n          @change=${(e: any) => this.handleValueChange(index, e.target.value)}\n        ></temba-textinput>\n        ${canRemove\n          ? html`\n              <button class=\"remove-btn\" @click=${() => this.removeItem(index)}>\n                ×\n              </button>\n            `\n          : html`<div class=\"remove-btn-spacer\"></div>`}\n      </div>\n    `;\n  }\n\n  protected getContainerClass(): string {\n    return 'key-value-editor';\n  }\n\n  static styles = css`\n    .key-value-editor {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .row {\n      display: grid;\n      grid-template-columns: 1fr 1fr auto;\n      align-items: center;\n      column-gap: 6px;\n    }\n\n    .remove-btn {\n      width: 32px;\n      height: 32px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      background: #f8f8f8;\n      color: #666;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 18px;\n    }\n\n    .remove-btn:hover:not(:disabled) {\n      background: #f0f0f0;\n    }\n\n    .remove-btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .remove-btn-spacer {\n      width: 32px;\n      height: 32px;\n    }\n  `;\n}\n"]}
+{"version":3,"file":"KeyValueEditor.js","sourceRoot":"","sources":["../../../src/form/KeyValueEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { BaseListEditor, ListItem } from './BaseListEditor';\n\ninterface KeyValueItem extends ListItem {\n  key: string;\n  value: string;\n}\n\n@customElement('temba-key-value-editor')\nexport class KeyValueEditor extends BaseListEditor<KeyValueItem> {\n  @property({ type: String })\n  keyPlaceholder = 'Key';\n\n  @property({ type: String })\n  valuePlaceholder = 'Value';\n\n  @property({ type: Boolean })\n  showValidation = true;\n\n  @state()\n  private keyErrors: { [index: number]: string } = {};\n\n  // Configure to maintain empty items\n  maintainEmptyItem = true;\n\n  constructor() {\n    super();\n    this._items = [];\n  }\n\n  // External API uses array format to preserve duplicate keys\n  @property({ type: Array })\n  get value(): KeyValueItem[] | any[] {\n    return this._items.filter(\n      ({ key, value }) => key.trim() !== '' || value.trim() !== ''\n    );\n  }\n\n  set value(newValue: KeyValueItem[] | Record<string, string> | any) {\n    if (Array.isArray(newValue)) {\n      this._items = [...newValue];\n    } else {\n      // Convert Record to array format\n      this._items = Object.entries(newValue || {}).map(([key, value]) => ({\n        key,\n        value: typeof value === 'string' ? value : String(value)\n      }));\n    }\n    this.requestUpdate();\n  }\n\n  // Implement abstract methods\n  isEmptyItem(item: KeyValueItem): boolean {\n    return item.key.trim() === '' && item.value.trim() === '';\n  }\n\n  createEmptyItem(): KeyValueItem {\n    return { key: '', value: '' };\n  }\n\n  // Override cleanItems to return array format to preserve duplicate keys\n  protected cleanItems(items: KeyValueItem[]): KeyValueItem[] {\n    return items.filter(\n      ({ key, value }) => key.trim() !== '' || value.trim() !== ''\n    );\n  }\n\n  // Method to convert to Record format for final form submission\n  toRecord(): Record<string, string> {\n    const result: Record<string, string> = {};\n    this._items.forEach(({ key, value }) => {\n      if (key.trim() !== '' || value.trim() !== '') {\n        result[key] = value;\n      }\n    });\n    return result;\n  }\n\n  // Method to validate and set key errors for duplicates and empty keys with values\n  validateKeys(): boolean {\n    const newKeyErrors: { [index: number]: string } = {};\n\n    // Check for empty keys with values\n    this._items.forEach(({ key, value }, index) => {\n      if (key.trim() === '' && value.trim() !== '') {\n        newKeyErrors[index] = 'Key is required when value is provided';\n      }\n    });\n\n    // Check for duplicate keys (only non-empty ones)\n    const nonEmptyKeys = this._items\n      .map(({ key }, index) => ({ key: key.trim(), index }))\n      .filter(({ key }) => key !== '');\n\n    const keyCount = new Map<string, number[]>();\n    nonEmptyKeys.forEach(({ key, index }) => {\n      if (!keyCount.has(key)) {\n        keyCount.set(key, []);\n      }\n      keyCount.get(key)!.push(index);\n    });\n\n    // Mark duplicate keys with errors\n    keyCount.forEach((indices, key) => {\n      if (indices.length > 1) {\n        indices.forEach((index) => {\n          // Only show duplicate error if there's no empty key error already\n          if (!newKeyErrors[index]) {\n            newKeyErrors[index] = `Duplicate key \"${key}\"`;\n          }\n        });\n      }\n    });\n\n    this.keyErrors = newKeyErrors;\n    return Object.keys(newKeyErrors).length === 0;\n  }\n\n  // Clear key errors\n  clearKeyErrors(): void {\n    this.keyErrors = {};\n  }\n\n  // Override updateValue to emit array format and validate keys\n  protected updateValue(newValue: KeyValueItem[]) {\n    this._items = newValue;\n\n    // Clear errors and re-validate when items change\n    this.clearKeyErrors();\n    this.validateKeys();\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: { value: this.cleanItems(newValue) },\n        bubbles: true\n      })\n    );\n    this.requestUpdate();\n  }\n\n  private handleKeyChange(index: number, newKey: string) {\n    const items = this.displayItems;\n    const currentItem = items[index];\n\n    // Clear any existing error for this key when it's modified\n    if (this.keyErrors[index]) {\n      const newKeyErrors = { ...this.keyErrors };\n      delete newKeyErrors[index];\n      this.keyErrors = newKeyErrors;\n    }\n\n    this.handleItemChange(index, {\n      key: newKey,\n      value: currentItem.value\n    });\n  }\n\n  private handleValueChange(index: number, newValue: string) {\n    const items = this.displayItems;\n    const currentItem = items[index];\n\n    // Clear any existing error for this key when value is modified\n    if (this.keyErrors[index]) {\n      const newKeyErrors = { ...this.keyErrors };\n      delete newKeyErrors[index];\n      this.keyErrors = newKeyErrors;\n    }\n\n    this.handleItemChange(index, {\n      key: currentItem.key,\n      value: newValue\n    });\n  }\n\n  renderItem(item: KeyValueItem, index: number): TemplateResult {\n    const canRemove = this.canRemoveItem(index);\n    const keyError =\n      this.showValidation && this.keyErrors[index] ? this.keyErrors[index] : '';\n\n    return html`\n      <div class=\"row\">\n        <temba-textinput\n          .value=${item.key}\n          .placeholder=${this.keyPlaceholder}\n          .errors=${keyError ? [keyError] : []}\n          @change=${(e: any) => this.handleKeyChange(index, e.target.value)}\n        ></temba-textinput>\n        <temba-textinput\n          .value=${item.value}\n          .placeholder=${this.valuePlaceholder}\n          @change=${(e: any) => this.handleValueChange(index, e.target.value)}\n        ></temba-textinput>\n        ${canRemove\n          ? html`\n              <button class=\"remove-btn\" @click=${() => this.removeItem(index)}>\n                ×\n              </button>\n            `\n          : html`<div class=\"remove-btn-spacer\"></div>`}\n      </div>\n    `;\n  }\n\n  protected getContainerClass(): string {\n    return 'key-value-editor';\n  }\n\n  static get styles() {\n    return css`\n      ${super.styles}\n\n      .key-value-editor {\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n      }\n\n      .row {\n        display: grid;\n        grid-template-columns: 1fr 1fr auto;\n        align-items: center;\n        column-gap: 6px;\n      }\n\n      .remove-btn {\n        width: 32px;\n        height: 32px;\n        border: 1px solid #ccc;\n        border-radius: 4px;\n        background: #f8f8f8;\n        color: #666;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 18px;\n      }\n\n      .remove-btn:hover:not(:disabled) {\n        background: #f0f0f0;\n      }\n\n      .remove-btn:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n\n      .remove-btn-spacer {\n        width: 32px;\n        height: 32px;\n      }\n    `;\n  }\n}\n"]}

package/out-tsc/src/form/MessageEditor.js

@@ -2,18 +2,17 @@ import { __decorate } from "tslib";
 import { 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 { getClasses } from '../utils';
 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 {
     constructor() {
         super(...arguments);
         this.name = '';
-        this.value = '';
         this.placeholder = '';
         this.textarea = true;
         this.autogrow = true;
@@ -28,6 +27,7 @@ export class MessageEditor extends FormElement {
     }
     static get styles() {
         return css `
+      ${super.styles}
       :host {
         display: block;
       }
@@ -292,85 +292,77 @@ export class MessageEditor extends FormElement {
         }
     }
     render() {
+        return this.renderField();
+    }
+    renderWidget() {
         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({
+      <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>
+        @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
+            .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>
 
-          <div class="media-wrapper ">
-            <temba-media-picker
+        <!-- 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>`
+            ></temba-media-picker>`
             : ''}
-        </div>
-      </temba-field>
+      </div>
     `;
     }
 }
 __decorate([
     property({ type: String })
 ], MessageEditor.prototype, "name", void 0);
-__decorate([
-    property({ type: String })
-], MessageEditor.prototype, "value", void 0);
 __decorate([
     property({ type: String })
 ], MessageEditor.prototype, "placeholder", void 0);