@unicef-polymer/etools-form-builder 3.1.1 → 3.1.3

package/dist/form-fields/repeatable-fields/repeatable-base-field.js

@@ -19,23 +19,23 @@ export class RepeatableBaseField extends AbstractFieldBaseClass {
     }
     render() {
         const values = this.getValues();
-        return html `
-      <div class="finding-container">
-        <div class="question layout start"><slot>${this.questionTemplate()}</slot></div>
-        <div class="question-control layout vertical center-justified start">
-          ${values.map((value, index) => html `<div class="layout horizontal center full-width">
-                ${this.controlTemplate(value, index)}
-                <etools-icon-button
-                  name="close"
-                  ?hidden="${this.isReadonly || values.length < 2}"
-                  @click="${() => this.removeControl(index)}"
-                ></etools-icon-button>
-              </div>`)}
-          <etools-button variant="primary" class="add-button" ?hidden="${this.isReadonly}" @click="${this.addNewField}">
-            ${getTranslation(this.language, 'ADD')}
-          </etools-button>
-        </div>
-      </div>
+        return html `
+      <div class="finding-container">
+        <div class="question layout start"><slot>${this.questionTemplate()}</slot></div>
+        <div class="question-control layout vertical center-justified start">
+          ${values.map((value, index) => html `<div class="layout horizontal center full-width">
+                ${this.controlTemplate(value, index)}
+                <etools-icon-button
+                  name="close"
+                  ?hidden="${this.isReadonly || values.length < 2}"
+                  @click="${() => this.removeControl(index)}"
+                ></etools-icon-button>
+              </div>`)}
+          <etools-button variant="primary" class="add-button" ?hidden="${this.isReadonly}" @click="${this.addNewField}">
+            ${getTranslation(this.language, 'ADD')}
+          </etools-button>
+        </div>
+      </div>
     `;
     }
     questionTemplate() {
@@ -104,11 +104,11 @@ export class RepeatableBaseField extends AbstractFieldBaseClass {
         // language=CSS
         return [
             ...AbstractFieldBaseClass.styles,
-            css `
-        :host(:not([is-readonly])) .question-control,
-        :host(:not([is-readonly])) .question {
-          padding-bottom: 10px;
-        }
+            css `
+        :host(:not([is-readonly])) .question-control,
+        :host(:not([is-readonly])) .question {
+          padding-bottom: 10px;
+        }
       `
         ];
     }

package/dist/form-fields/repeatable-fields/repeatable-number-field.js

@@ -11,19 +11,19 @@ let RepeatableNumberField = class RepeatableNumberField extends RepeatableBaseFi
         this.isInteger = false;
     }
     controlTemplate(value, index) {
-        return html `
-      <etools-input
-        class="no-padding-left"
-        no-label-float
-        placeholder="${this.isReadonly ? '—' : this.placeholder}"
-        .value="${value}"
-        @value-changed="${({ detail }) => this.valueChanged(detail.value, index)}"
-        placeholder="&#8212;"
-        ?invalid="${this.errorMessage[index]}"
-        error-message="${this.errorMessage[index]}"
-        ?readonly="${this.isReadonly}"
-      >
-      </etools-input>
+        return html `
+      <etools-input
+        class="no-padding-left"
+        no-label-float
+        placeholder="${this.isReadonly ? '—' : this.placeholder}"
+        .value="${value}"
+        @value-changed="${({ detail }) => this.valueChanged(detail.value, index)}"
+        placeholder="&#8212;"
+        ?invalid="${this.errorMessage[index]}"
+        error-message="${this.errorMessage[index]}"
+        ?readonly="${this.isReadonly}"
+      >
+      </etools-input>
     `;
     }
     valueChanged(newValue, index) {
@@ -45,12 +45,12 @@ let RepeatableNumberField = class RepeatableNumberField extends RepeatableBaseFi
         // language=CSS
         return [
             ...AbstractFieldBaseClass.styles,
-            css `
-        @media (max-width: 380px) {
-          .no-padding-left {
-            padding-left: 0;
-          }
-        }
+            css `
+        @media (max-width: 380px) {
+          .no-padding-left {
+            padding-left: 0;
+          }
+        }
       `
         ];
     }

package/dist/form-fields/repeatable-fields/repeatable-scale-field.js

@@ -14,27 +14,27 @@ let RepeatableScaleField = class RepeatableScaleField extends RepeatableBaseFiel
         this.options = [];
     }
     controlTemplate(value, index) {
-        return html `
-      <div class="container">
-        <etools-radio-group
-          class="radio-group"
-          .value="${value}"
-          @sl-change="${(e) => this.onSelect(e.target.value, index)}"
-        >
-          ${repeat(this.options, (option) => html `
-              <sl-radio class="radio-button" value="${this.getValue(option)}"> ${this.getLabel(option)} </sl-radio>
-            `)}
-        </etools-radio-group>
-        <etools-button
-          class="neutral clear-button"
-          variant="text"
-          ?hidden="${this.isReadonly}"
-          @click="${() => this.valueChanged(null, index)}"
-        >
-          <etools-icon name="clear" slot="prefix"></etools-icon>
-          ${getTranslation(this.language, 'CLEAR')}
-        </etools-button>
-      </div>
+        return html `
+      <div class="container">
+        <etools-radio-group
+          class="radio-group"
+          .value="${value}"
+          @sl-change="${(e) => this.onSelect(e.target.value, index)}"
+        >
+          ${repeat(this.options, (option) => html `
+              <sl-radio class="radio-button" value="${this.getValue(option)}"> ${this.getLabel(option)} </sl-radio>
+            `)}
+        </etools-radio-group>
+        <etools-button
+          class="neutral clear-button"
+          variant="text"
+          ?hidden="${this.isReadonly}"
+          @click="${() => this.valueChanged(null, index)}"
+        >
+          <etools-icon name="clear" slot="prefix"></etools-icon>
+          ${getTranslation(this.language, 'CLEAR')}
+        </etools-button>
+      </div>
     `;
     }
     onSelect(itemValue, index) {
@@ -53,42 +53,42 @@ let RepeatableScaleField = class RepeatableScaleField extends RepeatableBaseFiel
         // language=CSS
         return [
             ...AbstractFieldBaseClass.styles,
-            css `
-        .container {
-          position: relative;
-          min-height: 48px;
-          display: flex;
-          align-items: center;
-          flex-direction: row;
-        }
-
-        .radio-group {
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-        }
-
-        :host([is-readonly]) etools-radio-group {
-          pointer-events: none;
-          opacity: 0.55;
-        }
-
-        @media (max-width: 1080px) {
-          .container {
-            flex-direction: column;
-            align-items: flex-start;
-          }
-          .radio-group {
-            flex-direction: column;
-          }
-          .radio-button {
-            padding-left: 3px;
-          }
-          .clear-button {
-            margin: 0;
-            padding-left: 0;
-          }
-        }
+            css `
+        .container {
+          position: relative;
+          min-height: 48px;
+          display: flex;
+          align-items: center;
+          flex-direction: row;
+        }
+
+        .radio-group {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+        }
+
+        :host([is-readonly]) etools-radio-group {
+          pointer-events: none;
+          opacity: 0.55;
+        }
+
+        @media (max-width: 1080px) {
+          .container {
+            flex-direction: column;
+            align-items: flex-start;
+          }
+          .radio-group {
+            flex-direction: column;
+          }
+          .radio-button {
+            padding-left: 3px;
+          }
+          .clear-button {
+            margin: 0;
+            padding-left: 0;
+          }
+        }
       `
         ];
     }

package/dist/form-fields/repeatable-fields/repeatable-text-field.js

@@ -6,19 +6,19 @@ import { RepeatableBaseField } from './repeatable-base-field';
 import { AbstractFieldBaseClass } from '../abstract-field-base.class';
 let RepeatableTextField = class RepeatableTextField extends RepeatableBaseField {
     controlTemplate(value, index) {
-        return html `
-      <etools-textarea
-        id="textarea"
-        class="no-padding-left"
-        no-label-float
-        placeholder="${this.isReadonly ? '—' : this.placeholder}"
-        .value="${value}"
-        @value-changed="${({ detail }) => this.valueChanged(detail.value, index)}"
-        ?readonly="${this.isReadonly}"
-        ?invalid="${this.errorMessage[index]}"
-        error-message="${this.errorMessage[index]}"
-      >
-      </etools-textarea>
+        return html `
+      <etools-textarea
+        id="textarea"
+        class="no-padding-left"
+        no-label-float
+        placeholder="${this.isReadonly ? '—' : this.placeholder}"
+        .value="${value}"
+        @value-changed="${({ detail }) => this.valueChanged(detail.value, index)}"
+        ?readonly="${this.isReadonly}"
+        ?invalid="${this.errorMessage[index]}"
+        error-message="${this.errorMessage[index]}"
+      >
+      </etools-textarea>
     `;
     }
     customValidation() {
@@ -28,12 +28,12 @@ let RepeatableTextField = class RepeatableTextField extends RepeatableBaseField
         // language=CSS
         return [
             ...AbstractFieldBaseClass.styles,
-            css `
-        @media (max-width: 380px) {
-          .no-padding-left {
-            padding-left: 0;
-          }
-        }
+            css `
+        @media (max-width: 380px) {
+          .no-padding-left {
+            padding-left: 0;
+          }
+        }
       `
         ];
     }

package/dist/form-fields/single-fields/attachment-field.js

@@ -20,19 +20,19 @@ let AttachmentField = class AttachmentField extends BaseField {
         return AttachmentsHelper.jwtLocalStorageKey;
     }
     controlTemplate() {
-        return html `
-      <!--     Upload button     -->
-      <etools-upload
-        class="with-padding"
-        activate-offline
-        .uploadedFileInfo="${this.value}"
-        ?readonly="${this.isReadonly}"
-        @upload-finished="${({ detail }) => this.attachmentsUploaded(detail)}"
-        @delete-file="${() => this.valueChanged(null)}"
-        .endpointInfo="${{ endpoint: this.uploadUrl, extraInfo: { composedPath: this.computedPath } }}"
-        .jwtLocalStorageKey="${this.jwtLocalStorageKey}"
-      >
-      </etools-upload>
+        return html `
+      <!--     Upload button     -->
+      <etools-upload
+        class="with-padding"
+        activate-offline
+        .uploadedFileInfo="${this.value}"
+        ?readonly="${this.isReadonly}"
+        @upload-finished="${({ detail }) => this.attachmentsUploaded(detail)}"
+        @delete-file="${() => this.valueChanged(null)}"
+        .endpointInfo="${{ endpoint: this.uploadUrl, extraInfo: { composedPath: this.computedPath } }}"
+        .jwtLocalStorageKey="${this.jwtLocalStorageKey}"
+      >
+      </etools-upload>
     `;
     }
     customValidation() {

package/dist/form-fields/single-fields/boolean-field.js

@@ -5,16 +5,16 @@ import { BaseField } from './base-field';
 import '@shoelace-style/shoelace/dist/components/switch/switch.js';
 let BooleanField = class BooleanField extends BaseField {
     controlTemplate() {
-        return html `
-      <sl-switch
-        class="no-padding-left"
-        ?checked="${this.value}"
-        @sl-change="${(e) => this.valueChanged(e.target.checked)}"
-        ?disabled="${this.isReadonly}"
-      >
-      </sl-switch>
-
-      <div ?hidden="${!this.errorMessage}" class="error-text">${this.errorMessage}</div>
+        return html `
+      <sl-switch
+        class="no-padding-left"
+        ?checked="${this.value}"
+        @sl-change="${(e) => this.valueChanged(e.target.checked)}"
+        ?disabled="${this.isReadonly}"
+      >
+      </sl-switch>
+
+      <div ?hidden="${!this.errorMessage}" class="error-text">${this.errorMessage}</div>
     `;
     }
     customValidation() {
@@ -24,12 +24,12 @@ let BooleanField = class BooleanField extends BaseField {
         // language=CSS
         return [
             ...BaseField.styles,
-            css `
-        @media (max-width: 380px) {
-          .no-padding-left {
-            padding-left: 0;
-          }
-        }
+            css `
+        @media (max-width: 380px) {
+          .no-padding-left {
+            padding-left: 0;
+          }
+        }
       `
         ];
     }

package/dist/form-fields/single-fields/number-field.js

@@ -10,20 +10,20 @@ let NumberField = class NumberField extends BaseField {
         this.isInteger = false;
     }
     controlTemplate() {
-        return html `
-      <etools-input
-        class="no-padding-left"
-        no-label-float
-        placeholder="${this.isReadonly ? '—' : this.placeholder}"
-        .value="${this.value}"
-        @value-changed="${({ detail }) => this.valueChanged(detail.value)}"
-        @focus="${() => (this.touched = true)}"
-        placeholder="&#8212;"
-        ?invalid="${this.errorMessage}"
-        error-message="${this.errorMessage}"
-        ?readonly="${this.isReadonly}"
-      >
-      </etools-input>
+        return html `
+      <etools-input
+        class="no-padding-left"
+        no-label-float
+        placeholder="${this.isReadonly ? '—' : this.placeholder}"
+        .value="${this.value}"
+        @value-changed="${({ detail }) => this.valueChanged(detail.value)}"
+        @focus="${() => (this.touched = true)}"
+        placeholder="&#8212;"
+        ?invalid="${this.errorMessage}"
+        error-message="${this.errorMessage}"
+        ?readonly="${this.isReadonly}"
+      >
+      </etools-input>
     `;
     }
     valueChanged(newValue) {
@@ -45,12 +45,12 @@ let NumberField = class NumberField extends BaseField {
         // language=CSS
         return [
             ...BaseField.styles,
-            css `
-        @media (max-width: 380px) {
-          .no-padding-left {
-            padding-left: 0;
-          }
-        }
+            css `
+        @media (max-width: 380px) {
+          .no-padding-left {
+            padding-left: 0;
+          }
+        }
       `
         ];
     }

package/dist/form-fields/single-fields/scale-field.js

@@ -13,28 +13,28 @@ let ScaleField = class ScaleField extends BaseField {
         this.options = [];
     }
     controlTemplate() {
-        return html `
-      <div class="container">
-        <etools-radio-group
-          class="radio-group"
-          .value="${this.value}"
-          @sl-change="${(e) => this.onSelect(e.target.value)}"
-        >
-          ${repeat(this.options, (option) => html `
-              <sl-radio class="radio-button" value="${this.getValue(option)}">${this.getLabel(option)}</sl-radio>
-            `)}
-        </etools-radio-group>
-        <etools-button
-          class="neutral clear-button"
-          variant="text"
-          ?hidden="${this.isReadonly}"
-          @click="${() => this.valueChanged(null)}"
-        >
-          <etools-icon name="clear" slot="prefix"></etools-icon>
-          ${getTranslation(this.language, 'CLEAR')}
-        </etools-button>
-      </div>
-      <div ?hidden="${!this.errorMessage}" class="error-text">${this.errorMessage}</div>
+        return html `
+      <div class="container">
+        <etools-radio-group
+          class="radio-group"
+          .value="${this.value}"
+          @sl-change="${(e) => this.onSelect(e.target.value)}"
+        >
+          ${repeat(this.options, (option) => html `
+              <sl-radio class="radio-button" value="${this.getValue(option)}">${this.getLabel(option)}</sl-radio>
+            `)}
+        </etools-radio-group>
+        <etools-button
+          class="neutral clear-button"
+          variant="text"
+          ?hidden="${this.isReadonly}"
+          @click="${() => this.valueChanged(null)}"
+        >
+          <etools-icon name="clear" slot="prefix"></etools-icon>
+          ${getTranslation(this.language, 'CLEAR')}
+        </etools-button>
+      </div>
+      <div ?hidden="${!this.errorMessage}" class="error-text">${this.errorMessage}</div>
     `;
     }
     getLabel(option) {
@@ -56,42 +56,42 @@ let ScaleField = class ScaleField extends BaseField {
         // language=CSS
         return [
             ...BaseField.styles,
-            css `
-        .container {
-          position: relative;
-          min-height: 48px;
-          display: flex;
-          align-items: center;
-          flex-direction: row;
-        }
-
-        .radio-group {
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-        }
-
-        :host([is-readonly]) etools-radio-group {
-          pointer-events: none;
-          opacity: 0.55;
-        }
-
-        @media (max-width: 1080px) {
-          .container {
-            flex-direction: column;
-            align-items: flex-start;
-          }
-          .radio-group {
-            flex-direction: column;
-          }
-          .radio-button {
-            padding-left: 3px;
-          }
-          .clear-button {
-            margin: 0;
-            padding-left: 0;
-          }
-        }
+            css `
+        .container {
+          position: relative;
+          min-height: 48px;
+          display: flex;
+          align-items: center;
+          flex-direction: row;
+        }
+
+        .radio-group {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+        }
+
+        :host([is-readonly]) etools-radio-group {
+          pointer-events: none;
+          opacity: 0.55;
+        }
+
+        @media (max-width: 1080px) {
+          .container {
+            flex-direction: column;
+            align-items: flex-start;
+          }
+          .radio-group {
+            flex-direction: column;
+          }
+          .radio-button {
+            padding-left: 3px;
+          }
+          .clear-button {
+            margin: 0;
+            padding-left: 0;
+          }
+        }
       `
         ];
     }

package/dist/form-fields/single-fields/text-field.d.ts

@@ -1,8 +1,11 @@
-import { CSSResultArray, TemplateResult } from 'lit';
+import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
 import { BaseField } from './base-field';
 import '@unicef-polymer/etools-unicef/src/etools-input/etools-textarea';
+import '../../rich-editor/rich-text';
 export declare class TextField extends BaseField<string> {
+    protected originalValue: string | null;
     protected controlTemplate(): TemplateResult;
+    updated(changedProperties: PropertyValues): void;
     protected customValidation(): string | null;
     static get styles(): CSSResultArray;
 }

package/dist/form-fields/single-fields/text-field.js

@@ -1,26 +1,51 @@
 import { __decorate } from "tslib";
 import { css, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { BaseField } from './base-field';
 import '@unicef-polymer/etools-unicef/src/etools-input/etools-textarea';
+import '../../rich-editor/rich-text';
 let TextField = class TextField extends BaseField {
+    constructor() {
+        super(...arguments);
+        this.originalValue = null;
+    }
     controlTemplate() {
-        return html `
-      <etools-textarea
-        id="otherInfo"
-        class="no-padding-left"
-        no-label-float
-        placeholder="${this.isReadonly ? '—' : this.placeholder}"
-        .value="${this.value}"
-        @value-changed="${({ detail }) => this.valueChanged(detail.value)}"
-        @focus="${() => (this.touched = true)}"
-        ?readonly="${this.isReadonly}"
-        ?invalid="${this.errorMessage}"
-        name="${this.name}"
-        error-message="${this.errorMessage}"
-      >
-      </etools-textarea>
-    `;
+        return this.showRichEditor
+            ? html `<div class="finding-container no-padding-left">
+          <rich-text
+            .value="${this.originalValue}"
+            ?readonly="${this.isReadonly}"
+            @editor-changed="${({ detail }) => {
+                if (detail.value !== this.value) {
+                    this.valueChanged(detail.value);
+                }
+            }}"
+          ></rich-text>
+        </div>`
+            : html `
+          <etools-textarea
+            id="otherInfo"
+            class="no-padding-left"
+            no-label-float
+            placeholder="${this.isReadonly ? '—' : this.placeholder}"
+            .value="${this.value}"
+            @value-changed="${({ detail }) => this.valueChanged(detail.value)}"
+            @focus="${() => (this.touched = true)}"
+            ?readonly="${this.isReadonly}"
+            ?invalid="${this.errorMessage}"
+            name="${this.name}"
+            error-message="${this.errorMessage}"
+          >
+          </etools-textarea>
+        `;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // set control value only at the beginning with a proxy param (originalValue),
+        // avoid requestUpdate when .value change because will move carret
+        if (changedProperties.has('value') && this.originalValue === null) {
+            this.originalValue = this.value;
+        }
     }
     customValidation() {
         return null;
@@ -29,19 +54,22 @@ let TextField = class TextField extends BaseField {
         // language=CSS
         return [
             ...BaseField.styles,
-            css `
-        :host(.wide) etools-textarea {
-          padding-left: 0;
-        }
-        @media (max-width: 380px) {
-          .no-padding-left {
-            padding-left: 0;
-          }
-        }
+            css `
+        :host(.wide) etools-textarea {
+          padding-left: 0;
+        }
+        @media (max-width: 380px) {
+          .no-padding-left {
+            padding-left: 0;
+          }
+        }
       `
         ];
     }
 };
+__decorate([
+    property()
+], TextField.prototype, "originalValue", void 0);
 TextField = __decorate([
     customElement('text-field')
 ], TextField);