@unicef-polymer/etools-form-builder 2.1.9 → 3.0.0-rc.10

package/dist/form-fields/abstract-field-base.class.js

@@ -1,16 +1,25 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, property, css, html } from 'lit-element';
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
 import { validate } from '../lib/utils/validations.helper';
 import { FlexLayoutClasses } from '../lib/styles/flex-layout-classes';
 /**
  * Class that contains common properties and methods for single and repeatable fields
  */
 export class AbstractFieldBaseClass extends LitElement {
+    set isReadonly(readonly) {
+        this._readonly = readonly;
+        this.setDefaultValue(readonly, this._defaultValue);
+        this.requestUpdate();
+    }
+    get isReadonly() {
+        return this._readonly;
+    }
+    set defaultValue(value) {
+        this._defaultValue = value;
+        this.setDefaultValue(this._readonly, value);
+        this.requestUpdate();
+    }
     constructor() {
         super();
         this.questionText = '';
@@ -25,19 +34,6 @@ export class AbstractFieldBaseClass extends LitElement {
         }
         this.handleLanguageChange = this.handleLanguageChange.bind(this);
     }
-    set isReadonly(readonly) {
-        this._readonly = readonly;
-        this.setDefaultValue(readonly, this._defaultValue);
-        this.requestUpdate();
-    }
-    get isReadonly() {
-        return this._readonly;
-    }
-    set defaultValue(value) {
-        this._defaultValue = value;
-        this.setDefaultValue(this._readonly, value);
-        this.requestUpdate();
-    }
     connectedCallback() {
         super.connectedCallback();
         document.addEventListener('language-changed', this.handleLanguageChange.bind(this));
@@ -50,11 +46,11 @@ export class AbstractFieldBaseClass extends LitElement {
         this.language = e.detail.language;
     }
     render() {
-        return html `
-      <div class="finding-container">
-        <div class="question"><slot>${this.questionTemplate()}</slot></div>
-        <div class="question-control">${this.controlTemplate()}</div>
-      </div>
+        return html `
+      <div class="finding-container">
+        <div class="question"><slot>${this.questionTemplate()}</slot></div>
+        <div class="question-control">${this.controlTemplate()}</div>
+      </div>
     `;
     }
     questionTemplate() {
@@ -79,116 +75,116 @@ export class AbstractFieldBaseClass extends LitElement {
         // language=CSS
         return [
             FlexLayoutClasses,
-            css `
-        :host {
-          display: block;
-          width: 100%;
-          padding: 0 25px 0 45px;
-          box-sizing: border-box;
-        }
-
-        .finding-container {
-          width: 100%;
-          display: flex;
-        }
-        .flex-wrapping {
-          flex-wrap: wrap;
-        }
-
-        :host(.wide) .finding-container {
-          flex-direction: column;
-        }
-
-        :host(.wide) .question {
-          margin-bottom: -8px;
-          min-height: 0;
-        }
-
-        .question-control,
-        .question {
-          min-width: 0;
-          min-height: 57px;
-          display: flex;
-          align-items: center;
-        }
-        .question {
-          flex: 2;
-        }
-        .question-control {
-          flex: 3;
-        }
-        .add-button {
-          padding: 3px;
-          margin: 10px;
-          background: transparent;
-          color: var(--primary-color);
-          border: 1px solid;
-        }
-
-        .full-width,
-        paper-input,
-        paper-textarea {
-          width: 100%;
-        }
-
-        .question-text {
-          font-weight: 500;
-          font-size: 13px;
-          color: var(--primary-text-color);
-        }
-
-        paper-input,
-        paper-textarea {
-          outline: none !important;
-        }
-        paper-input[required],
-        paper-textarea[required] {
-          --paper-input-container-label_-_background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221235%22%20height%3D%221175%22%3E%3Cpath%20fill%3D%22%23de0000%22%20d%3D%22M0%2C449h1235l-999%2C726%20382-1175%20382%2C1175z%22%2F%3E%3C%2Fsvg%3E')
-            no-repeat 98% 14%/7px;
-          --paper-input-container-label_-_max-width: max-content;
-          --paper-input-container-label_-_padding-right: 15px;
-        }
-
-        iron-icon[icon='close'] {
-          cursor: pointer;
-        }
-
-        .error-text {
-          color: var(--error-color);
-          font-size: 12px;
-        }
-
-        @media (max-width: 1080px) {
-          :host {
-            padding: 0 15px;
-          }
-          .finding-container {
-            flex-direction: column;
-          }
-          .question,
-          .question-control {
-            flex: 0 1 auto;
-          }
-        }
-
-        @media print {
-          .question-control {
-            align-items: start;
-          }
-
-          :host(text-field) .question-control {
-            min-height: 150px;
-          }
-
-          .question-control .container paper-radio-group {
-            flex-direction: column;
-            opacity: 1 !important;
-          }
-
-          .finding-container {
-            flex-direction: column;
-          }
-        }
+            css `
+        :host {
+          display: block;
+          width: 100%;
+          padding: 0 25px 0 45px;
+          box-sizing: border-box;
+        }
+
+        .finding-container {
+          width: 100%;
+          display: flex;
+        }
+        .flex-wrapping {
+          flex-wrap: wrap;
+        }
+
+        :host(.wide) .finding-container {
+          flex-direction: column;
+        }
+
+        :host(.wide) .question {
+          margin-bottom: -8px;
+          min-height: 0;
+        }
+
+        .question-control,
+        .question {
+          min-width: 0;
+          min-height: 57px;
+          display: flex;
+          align-items: center;
+        }
+        .question {
+          flex: 2;
+        }
+        .question-control {
+          flex: 3;
+        }
+        .add-button {
+          padding: 3px;
+          margin: 10px;
+          background: transparent;
+          color: var(--primary-color);
+          border: 1px solid;
+        }
+
+        .full-width,
+        paper-input,
+        paper-textarea {
+          width: 100%;
+        }
+
+        .question-text {
+          font-weight: 500;
+          font-size: 13px;
+          color: var(--primary-text-color);
+        }
+
+        paper-input,
+        paper-textarea {
+          outline: none !important;
+        }
+        paper-input[required],
+        paper-textarea[required] {
+          --paper-input-container-label_-_background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221235%22%20height%3D%221175%22%3E%3Cpath%20fill%3D%22%23de0000%22%20d%3D%22M0%2C449h1235l-999%2C726%20382-1175%20382%2C1175z%22%2F%3E%3C%2Fsvg%3E')
+            no-repeat 98% 14%/7px;
+          --paper-input-container-label_-_max-width: max-content;
+          --paper-input-container-label_-_padding-right: 15px;
+        }
+
+        iron-icon[icon='close'] {
+          cursor: pointer;
+        }
+
+        .error-text {
+          color: var(--error-color);
+          font-size: 12px;
+        }
+
+        @media (max-width: 1080px) {
+          :host {
+            padding: 0 15px;
+          }
+          .finding-container {
+            flex-direction: column;
+          }
+          .question,
+          .question-control {
+            flex: 0 1 auto;
+          }
+        }
+
+        @media print {
+          .question-control {
+            align-items: start;
+          }
+
+          :host(text-field) .question-control {
+            min-height: 150px;
+          }
+
+          .question-control .container paper-radio-group {
+            flex-direction: column;
+            opacity: 1 !important;
+          }
+
+          .finding-container {
+            flex-direction: column;
+          }
+        }
       `
         ];
     }

package/dist/form-fields/field-renderer-component.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultArray, LitElement, TemplateResult } from 'lit-element';
+import { CSSResultArray, LitElement, TemplateResult } from 'lit';
 import { BlueprintField } from '../lib/types/form-builder.types';
 import { FieldValidator } from '../lib/utils/validations.helper';
 import { FieldOption } from './single-fields/scale-field';

package/dist/form-fields/field-renderer-component.js

@@ -1,10 +1,6 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { css, customElement, html, LitElement, property } from 'lit-element';
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
 import { FlexLayoutClasses } from '../lib/styles/flex-layout-classes';
 import { FieldTypes, StructureTypes } from '../form-groups';
 import { FormBuilderCardStyles } from '../lib/styles/form-builder-card.styles';
@@ -28,12 +24,12 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
             ? 'additional-field '
             : '';
         const wideClass = blueprintField.styling.includes(StructureTypes.WIDE) ? 'wide-field-container ' : '';
-        return html `
-      <div class="${`${additionalClass}${wideClass}finding-container`}">
+        return html `
+      <div class="${`${additionalClass}${wideClass}finding-container`}">
         ${blueprintField.repeatable
             ? this.renderRepeatableField(blueprintField)
-            : this.renderStandardField(blueprintField)}
-      </div>
+            : this.renderStandardField(blueprintField)}
+      </div>
     `;
     }
     renderStandardField({ input_type, label, help_text, required, placeholder, styling }) {
@@ -41,78 +37,78 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
         const isWide = styling.includes(StructureTypes.WIDE);
         switch (input_type) {
             case FieldTypes.TEXT_TYPE:
-                return html `
-          <text-field
-            class="${isWide ? 'wide' : ''}"
-            ?is-readonly="${this.readonly}"
-            ?required="${required}"
-            .placeholder="${placeholder}"
-            .value="${this.value}"
-            .validators="${this.validations}"
-            .errorMessage="${this.errorMessage}"
-            .defaultValue="${(_a = this.field) === null || _a === void 0 ? void 0 : _a.default_value}"
-          >
-            ${this.renderFieldLabel(label, help_text)}
-          </text-field>
+                return html `
+          <text-field
+            class="${isWide ? 'wide' : ''}"
+            ?is-readonly="${this.readonly}"
+            ?required="${required}"
+            .placeholder="${placeholder}"
+            .value="${this.value}"
+            .validators="${this.validations}"
+            .errorMessage="${this.errorMessage}"
+            .defaultValue="${(_a = this.field) === null || _a === void 0 ? void 0 : _a.default_value}"
+          >
+            ${this.renderFieldLabel(label, help_text)}
+          </text-field>
         `;
             case FieldTypes.NUMBER_TYPE:
             case FieldTypes.NUMBER_FLOAT_TYPE:
             case FieldTypes.NUMBER_INTEGER_TYPE:
-                return html `
-          <number-field
-            ?is-readonly="${this.readonly}"
-            ?required="${required}"
-            .placeholder="${placeholder}"
-            .value="${this.value}"
-            .validators="${this.validations}"
-            .errorMessage="${this.errorMessage}"
-            .isInteger="${Boolean(input_type === FieldTypes.NUMBER_INTEGER_TYPE)}"
-            .defaultValue="${(_b = this.field) === null || _b === void 0 ? void 0 : _b.default_value}"
-          >
-            ${this.renderFieldLabel(label, help_text)}
-          </number-field>
+                return html `
+          <number-field
+            ?is-readonly="${this.readonly}"
+            ?required="${required}"
+            .placeholder="${placeholder}"
+            .value="${this.value}"
+            .validators="${this.validations}"
+            .errorMessage="${this.errorMessage}"
+            .isInteger="${Boolean(input_type === FieldTypes.NUMBER_INTEGER_TYPE)}"
+            .defaultValue="${(_b = this.field) === null || _b === void 0 ? void 0 : _b.default_value}"
+          >
+            ${this.renderFieldLabel(label, help_text)}
+          </number-field>
         `;
             case FieldTypes.BOOL_TYPE:
-                return html `
-          <boolean-field
-            ?is-readonly="${this.readonly}"
-            ?required="${required}"
-            .value="${this.value}"
-            .validators="${this.validations}"
-            .errorMessage="${this.errorMessage}"
-            .defaultValue="${(_c = this.field) === null || _c === void 0 ? void 0 : _c.default_value}"
-          >
-            ${this.renderFieldLabel(label, help_text)}
-          </boolean-field>
+                return html `
+          <boolean-field
+            ?is-readonly="${this.readonly}"
+            ?required="${required}"
+            .value="${this.value}"
+            .validators="${this.validations}"
+            .errorMessage="${this.errorMessage}"
+            .defaultValue="${(_c = this.field) === null || _c === void 0 ? void 0 : _c.default_value}"
+          >
+            ${this.renderFieldLabel(label, help_text)}
+          </boolean-field>
         `;
             case FieldTypes.SCALE_TYPE:
-                return html `
-          <scale-field
-            .options="${this.options}"
-            ?is-readonly="${this.readonly}"
-            ?required="${required}"
-            .placeholder="${placeholder}"
-            .value="${this.value}"
-            .validators="${this.validations}"
-            .errorMessage="${this.errorMessage}"
-            .defaultValue="${(_d = this.field) === null || _d === void 0 ? void 0 : _d.default_value}"
-          >
-            ${this.renderFieldLabel(label, help_text)}
-          </scale-field>
+                return html `
+          <scale-field
+            .options="${this.options}"
+            ?is-readonly="${this.readonly}"
+            ?required="${required}"
+            .placeholder="${placeholder}"
+            .value="${this.value}"
+            .validators="${this.validations}"
+            .errorMessage="${this.errorMessage}"
+            .defaultValue="${(_d = this.field) === null || _d === void 0 ? void 0 : _d.default_value}"
+          >
+            ${this.renderFieldLabel(label, help_text)}
+          </scale-field>
         `;
             case FieldTypes.FILE_TYPE:
-                return html `
-          <attachments-field
-            ?is-readonly="${this.readonly}"
-            ?required="${required}"
-            .placeholder="${placeholder}"
-            .value="${this.value}"
-            .validators="${this.validations}"
-            .errorMessage="${this.errorMessage}"
-            .computedPath="${this.computedPath}"
-          >
-            ${this.renderFieldLabel(label, help_text)}
-          </attachments-field>
+                return html `
+          <attachments-field
+            ?is-readonly="${this.readonly}"
+            ?required="${required}"
+            .placeholder="${placeholder}"
+            .value="${this.value}"
+            .validators="${this.validations}"
+            .errorMessage="${this.errorMessage}"
+            .computedPath="${this.computedPath}"
+          >
+            ${this.renderFieldLabel(label, help_text)}
+          </attachments-field>
         `;
             default:
                 console.warn(`FormBuilderGroup: Unknown field type: ${input_type}`);
@@ -124,67 +120,67 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
         const isWide = styling.includes(StructureTypes.WIDE);
         switch (input_type) {
             case FieldTypes.TEXT_TYPE:
-                return html `
-          <repeatable-text-field
-            class="${isWide ? 'wide' : ''}"
-            ?is-readonly="${this.readonly}"
-            ?required="${required}"
-            .placeholder="${placeholder}"
-            .value="${this.value}"
-            .validators="${this.validations}"
-            .errorMessage="${this.errorMessage}"
-            .defaultValue="${(_a = this.field) === null || _a === void 0 ? void 0 : _a.default_value}"
-          >
-            ${this.renderFieldLabel(label, help_text)}
-          </repeatable-text-field>
+                return html `
+          <repeatable-text-field
+            class="${isWide ? 'wide' : ''}"
+            ?is-readonly="${this.readonly}"
+            ?required="${required}"
+            .placeholder="${placeholder}"
+            .value="${this.value}"
+            .validators="${this.validations}"
+            .errorMessage="${this.errorMessage}"
+            .defaultValue="${(_a = this.field) === null || _a === void 0 ? void 0 : _a.default_value}"
+          >
+            ${this.renderFieldLabel(label, help_text)}
+          </repeatable-text-field>
         `;
             case FieldTypes.NUMBER_TYPE:
             case FieldTypes.NUMBER_FLOAT_TYPE:
             case FieldTypes.NUMBER_INTEGER_TYPE:
-                return html `
-          <repeatable-number-field
-            class="${isWide ? 'wide' : ''}"
-            ?is-readonly="${this.readonly}"
-            ?required="${required}"
-            .placeholder="${placeholder}"
-            .value="${this.value}"
-            .validators="${this.validations}"
-            .errorMessage="${this.errorMessage}"
-            .isInteger="${Boolean(input_type === FieldTypes.NUMBER_INTEGER_TYPE)}"
-            .defaultValue="${(_b = this.field) === null || _b === void 0 ? void 0 : _b.default_value}"
-          >
-            ${this.renderFieldLabel(label, help_text)}
-          </repeatable-number-field>
+                return html `
+          <repeatable-number-field
+            class="${isWide ? 'wide' : ''}"
+            ?is-readonly="${this.readonly}"
+            ?required="${required}"
+            .placeholder="${placeholder}"
+            .value="${this.value}"
+            .validators="${this.validations}"
+            .errorMessage="${this.errorMessage}"
+            .isInteger="${Boolean(input_type === FieldTypes.NUMBER_INTEGER_TYPE)}"
+            .defaultValue="${(_b = this.field) === null || _b === void 0 ? void 0 : _b.default_value}"
+          >
+            ${this.renderFieldLabel(label, help_text)}
+          </repeatable-number-field>
         `;
             case FieldTypes.SCALE_TYPE:
-                return html `
-          <repeatable-scale-field
-            class="${isWide ? 'wide' : ''}"
-            .options="${this.options}"
-            ?is-readonly="${this.readonly}"
-            ?required="${required}"
-            .placeholder="${placeholder}"
-            .value="${this.value}"
-            .validators="${this.validations}"
-            .errorMessage="${this.errorMessage}"
-            .defaultValue="${(_c = this.field) === null || _c === void 0 ? void 0 : _c.default_value}"
-          >
-            ${this.renderFieldLabel(label, help_text)}
-          </repeatable-scale-field>
+                return html `
+          <repeatable-scale-field
+            class="${isWide ? 'wide' : ''}"
+            .options="${this.options}"
+            ?is-readonly="${this.readonly}"
+            ?required="${required}"
+            .placeholder="${placeholder}"
+            .value="${this.value}"
+            .validators="${this.validations}"
+            .errorMessage="${this.errorMessage}"
+            .defaultValue="${(_c = this.field) === null || _c === void 0 ? void 0 : _c.default_value}"
+          >
+            ${this.renderFieldLabel(label, help_text)}
+          </repeatable-scale-field>
         `;
             case FieldTypes.FILE_TYPE:
-                return html `
-          <repeatable-attachments-field
-            ?is-readonly="${this.readonly}"
-            ?required="${required}"
-            .placeholder="${placeholder}"
-            .value="${this.value}"
-            .validators="${this.validations}"
-            .errorMessage="${this.errorMessage}"
-            .computedPath="${this.computedPath}"
-          >
-            ${this.renderFieldLabel(label, help_text)}
-          </repeatable-attachments-field>
+                return html `
+          <repeatable-attachments-field
+            ?is-readonly="${this.readonly}"
+            ?required="${required}"
+            .placeholder="${placeholder}"
+            .value="${this.value}"
+            .validators="${this.validations}"
+            .errorMessage="${this.errorMessage}"
+            .computedPath="${this.computedPath}"
+          >
+            ${this.renderFieldLabel(label, help_text)}
+          </repeatable-attachments-field>
         `;
             default:
                 console.warn(`FormBuilderGroup: Unknown field type: ${input_type}`);
@@ -192,11 +188,11 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
         }
     }
     renderFieldLabel(label, helperText) {
-        return html `
-      <div class="layout vertical question-container">
-        <div class="question-text">${label}</div>
-        <div class="question-details">${helperText}</div>
-      </div>
+        return html `
+      <div class="layout vertical question-container">
+        <div class="question-text">${label}</div>
+        <div class="question-details">${helperText}</div>
+      </div>
     `;
     }
     static get styles() {
@@ -204,29 +200,29 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
         return [
             FlexLayoutClasses,
             FormBuilderCardStyles,
-            css `
-        .additional-field {
-          padding-top: 15px;
-          padding-bottom: 20px;
-          background-color: var(--secondary-background-color);
-        }
-        .wide-field-container {
-          padding-bottom: 10px;
-        }
-        .wide-field-container .question-container {
-          min-height: 0;
-          padding: 7px 0 0;
-        }
-        .wide-field-container .question-text {
-          color: var(--secondary-text-color);
-          font-weight: 400;
-        }
-
-        @media print {
-          :host {
-            break-inside: avoid;
-          }
-        }
+            css `
+        .additional-field {
+          padding-top: 15px;
+          padding-bottom: 20px;
+          background-color: var(--secondary-background-color);
+        }
+        .wide-field-container {
+          padding-bottom: 10px;
+        }
+        .wide-field-container .question-container {
+          min-height: 0;
+          padding: 7px 0 0;
+        }
+        .wide-field-container .question-text {
+          color: var(--secondary-text-color);
+          font-weight: 400;
+        }
+
+        @media print {
+          :host {
+            break-inside: avoid;
+          }
+        }
       `
         ];
     }