@unicef-polymer/etools-form-builder 1.0.3 → 2.1.0-rc.1

package/dist/form-attachments-popup/form-attachments-popup.d.ts

@@ -1,3 +1,8 @@
+import '@unicef-polymer/etools-dialog/etools-dialog';
+import '@unicef-polymer/etools-upload/etools-upload-multi';
+import '@unicef-polymer/etools-dropdown/etools-dropdown';
+import '@polymer/paper-button/paper-button';
+import '@polymer/iron-icons/iron-icons';
 import { CSSResultArray, LitElement, TemplateResult } from 'lit-element';
 import { GenericObject } from '../lib/types/global.types';
 import { BlueprintMetadata } from '../lib/types/form-builder.types';
@@ -33,10 +38,14 @@ export declare type OfflineSavedAttachment = {
     extraInfo: string[];
     unsynced: boolean;
 };
-declare type UploadFinishedDetails = {
+export declare type UploadFinishedDetails = {
     success: (UploadedAttachment | OfflineSavedAttachment)[];
     error: any[];
 };
+export declare type SingleUploadFinishedDetails = {
+    success: UploadedAttachment | OfflineSavedAttachment;
+    error: any[];
+};
 export declare class FormAttachmentsPopup extends LitElement {
     dialogOpened: boolean;
     saveBtnClicked: boolean;
@@ -74,4 +83,3 @@ export declare class FormAttachmentsPopup extends LitElement {
     private isOfflineSavedAttachment;
     static get styles(): CSSResultArray;
 }
-export {};

package/dist/form-attachments-popup/form-attachments-popup.js

@@ -4,6 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 '@unicef-polymer/etools-dialog/etools-dialog';
+import '@unicef-polymer/etools-upload/etools-upload-multi';
+import '@unicef-polymer/etools-dropdown/etools-dropdown';
+import '@polymer/paper-button/paper-button';
+import '@polymer/iron-icons/iron-icons';
 import { css, LitElement, property, query } from 'lit-element';
 import { clone, equals } from 'ramda';
 import { template } from './form-attachments-popup.tpl';
@@ -170,54 +175,54 @@ export class FormAttachmentsPopup extends LitElement {
         return [
             SharedStyles,
             AttachmentsStyles,
-            css `
-        .file-selector__type-dropdown {
-          flex-basis: 25%;
-          padding-left: 8px;
-          padding-right: 8px;
-        }
-        .file-selector__filename {
-          flex-basis: 35%;
-        }
-        .file-selector__download {
-          flex-basis: 10%;
-        }
-        .file-selector__delete {
-          flex-basis: 10%;
-        }
-        .file-selector-container.with-type-dropdown {
-          flex-wrap: nowrap;
-        }
-        .popup-container {
-          padding: 12px 12px 0;
-        }
-        @media (max-width: 380px) {
-          .file-selector-container.with-type-dropdown {
-            justify-content: center;
-          }
-          .file-selector-container.with-type-dropdown etools-dropdown.type-dropdown {
-            flex-basis: 90%;
-          }
-          .file-selector__filename {
-            flex-basis: 90%;
-          }
-          .file-selector__download {
-            flex-basis: 5%;
-          }
-          .file-selector__delete {
-            flex-basis: 5%;
-          }
-        }
-        @media (max-width: 600px) {
-          etools-dropdown {
-            padding: 0;
-          }
-          .file-selector-container.with-type-dropdown {
-            border-bottom: 1px solid lightgrey;
-            flex-wrap: wrap;
-            padding-bottom: 10px;
-          }
-        }
+            css `
+        .file-selector__type-dropdown {
+          flex-basis: 25%;
+          padding-left: 8px;
+          padding-right: 8px;
+        }
+        .file-selector__filename {
+          flex-basis: 35%;
+        }
+        .file-selector__download {
+          flex-basis: 10%;
+        }
+        .file-selector__delete {
+          flex-basis: 10%;
+        }
+        .file-selector-container.with-type-dropdown {
+          flex-wrap: nowrap;
+        }
+        .popup-container {
+          padding: 12px 12px 0;
+        }
+        @media (max-width: 380px) {
+          .file-selector-container.with-type-dropdown {
+            justify-content: center;
+          }
+          .file-selector-container.with-type-dropdown etools-dropdown.type-dropdown {
+            flex-basis: 90%;
+          }
+          .file-selector__filename {
+            flex-basis: 90%;
+          }
+          .file-selector__download {
+            flex-basis: 5%;
+          }
+          .file-selector__delete {
+            flex-basis: 5%;
+          }
+        }
+        @media (max-width: 600px) {
+          etools-dropdown {
+            padding: 0;
+          }
+          .file-selector-container.with-type-dropdown {
+            border-bottom: 1px solid lightgrey;
+            flex-wrap: wrap;
+            padding-bottom: 10px;
+          }
+        }
       `
         ];
     }

package/dist/form-attachments-popup/form-attachments-popup.tpl.d.ts

@@ -1,8 +1,3 @@
 import { FormAttachmentsPopup } from './form-attachments-popup';
 import { TemplateResult } from 'lit-html';
-import '@unicef-polymer/etools-upload/etools-upload-multi';
-import '@unicef-polymer/etools-dialog/etools-dialog';
-import '@unicef-polymer/etools-dropdown/etools-dropdown';
-import '@polymer/paper-button/paper-button';
-import '@polymer/iron-icons/iron-icons';
 export declare function template(this: FormAttachmentsPopup): TemplateResult;

package/dist/form-attachments-popup/form-attachments-popup.tpl.js

@@ -1,95 +1,89 @@
 import { html } from 'lit-html';
-import '@unicef-polymer/etools-upload/etools-upload-multi';
-import '@unicef-polymer/etools-dialog/etools-dialog';
-import '@unicef-polymer/etools-dropdown/etools-dropdown';
-import '@polymer/paper-button/paper-button';
-import '@polymer/iron-icons/iron-icons';
 import { InputStyles } from '../lib/styles/input-styles';
 import { DialogStyles } from '../lib/styles/dialog.styles';
 export function template() {
     var _a;
-    return html `
-    ${InputStyles} ${DialogStyles}
-    <etools-dialog
-      id="form-attachments-dialog"
-      size="md"
-      no-padding
-      keep-dialog-open
-      ?opened="${this.dialogOpened}"
-      .okBtnText="Save"
-      .hideConfirmBtn="${this.readonly}"
-      dialog-title="${this.popupTitle}"
-      @close="${this.onClose}"
-      @confirm-btn-clicked="${() => this.saveChanges()}"
-    >
-      <!--  Link is used to download attachments  -->
-      <a id="link" target="_blank" hidden></a>
-
-      <div class="popup-container">
+    return html `
+    ${InputStyles} ${DialogStyles}
+    <etools-dialog
+      id="form-attachments-dialog"
+      size="md"
+      no-padding
+      keep-dialog-open
+      ?opened="${this.dialogOpened}"
+      .okBtnText="Save"
+      .hideConfirmBtn="${this.readonly}"
+      dialog-title="${this.popupTitle}"
+      @close="${this.onClose}"
+      @confirm-btn-clicked="${() => this.saveChanges()}"
+    >
+      <!--  Link is used to download attachments  -->
+      <a id="link" target="_blank" hidden></a>
+
+      <div class="popup-container">
         ${(_a = this.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment, index) => {
         var _a, _b;
-        return html `
-            <div class="file-selector-container with-type-dropdown">
-              <!--        Type select Dropdown        -->
-              <etools-dropdown
-                class="type-dropdown disabled-as-readonly file-selector__type-dropdown"
-                .selected="${attachment.file_type}"
-                @etools-selected-item-changed="${({ detail }) => { var _a; return this.changeFileType(attachment, (_a = detail.selectedItem) === null || _a === void 0 ? void 0 : _a.value, index); }}"
-                trigger-value-change-event
-                label="Document Type"
-                placeholder="Select Document Type"
-                required
-                ?readonly="${this.readonly}"
-                ?disabled="${this.readonly}"
-                hide-search
-                .options="${(_b = (_a = this.metadata) === null || _a === void 0 ? void 0 : _a.options.target_attachments_file_types) === null || _b === void 0 ? void 0 : _b.values}"
-                option-label="label"
-                option-value="value"
-                ?invalid="${this.checkFileType(index)}"
-                .errorMessage="${this.retrieveErrorMessage(index)}"
-                allow-outside-scroll
-                dynamic-align
-              ></etools-dropdown>
-
-              <!--        File name component          -->
-              <div class="filename-container file-selector__filename">
-                <iron-icon class="file-icon" icon="attachment"></iron-icon>
-                <span class="filename" title="${attachment.filename}">${attachment.filename}</span>
-              </div>
-
-              <!--         Download Button         -->
-              <paper-button
-                ?hidden="${!attachment.url}"
-                class="download-button file-selector__download"
-                @tap="${() => this.downloadFile(attachment)}"
-              >
-                <iron-icon icon="cloud-download" class="dw-icon"></iron-icon>
-                Download
-              </paper-button>
-
-              <!--        Delete Button          -->
-              <paper-button
-                class="delete-button file-selector__delete"
-                ?hidden="${this.readonly}"
-                @tap="${() => this.deleteAttachment(index)}"
-              >
-                Delete
-              </paper-button>
-            </div>
+        return html `
+            <div class="file-selector-container with-type-dropdown">
+              <!--        Type select Dropdown        -->
+              <etools-dropdown
+                class="type-dropdown file-selector__type-dropdown"
+                .selected="${attachment.file_type}"
+                @etools-selected-item-changed="${({ detail }) => { var _a; return this.changeFileType(attachment, (_a = detail.selectedItem) === null || _a === void 0 ? void 0 : _a.value, index); }}"
+                trigger-value-change-event
+                label="Document Type"
+                placeholder="Select Document Type"
+                required
+                ?readonly="${this.readonly}"
+                hide-search
+                .options="${(_b = (_a = this.metadata) === null || _a === void 0 ? void 0 : _a.options.target_attachments_file_types) === null || _b === void 0 ? void 0 : _b.values}"
+                option-label="label"
+                option-value="value"
+                ?invalid="${this.checkFileType(index)}"
+                .errorMessage="${this.retrieveErrorMessage(index)}"
+                allow-outside-scroll
+                dynamic-align
+              ></etools-dropdown>
+
+              <!--        File name component          -->
+              <div class="filename-container file-selector__filename">
+                <iron-icon class="file-icon" icon="attachment"></iron-icon>
+                <span class="filename" title="${attachment.filename}">${attachment.filename}</span>
+              </div>
+
+              <!--         Download Button         -->
+              <paper-button
+                ?hidden="${!attachment.url}"
+                class="download-button file-selector__download"
+                @tap="${() => this.downloadFile(attachment)}"
+              >
+                <iron-icon icon="cloud-download" class="dw-icon"></iron-icon>
+                Download
+              </paper-button>
+
+              <!--        Delete Button          -->
+              <paper-button
+                class="delete-button file-selector__delete"
+                ?hidden="${this.readonly}"
+                @tap="${() => this.deleteAttachment(index)}"
+              >
+                Delete
+              </paper-button>
+            </div>
           `;
-    })}
-
-        <!--     Upload button     -->
-        <etools-upload-multi
-          class="with-padding"
-          activate-offline
-          ?hidden="${this.readonly}"
-          @upload-finished="${({ detail }) => this.attachmentsUploaded(detail)}"
-          .endpointInfo="${{ endpoint: this.uploadUrl, extraInfo: { composedPath: this.computedPath } }}"
-          .jwtLocalStorageKey="${this.jwtLocalStorageKey}"
-        >
-        </etools-upload-multi>
-      </div>
-    </etools-dialog>
+    })}
+
+        <!--     Upload button     -->
+        <etools-upload-multi
+          class="with-padding"
+          activate-offline
+          ?hidden="${this.readonly}"
+          @upload-finished="${({ detail }) => this.attachmentsUploaded(detail)}"
+          .endpointInfo="${{ endpoint: this.uploadUrl, extraInfo: { composedPath: this.computedPath } }}"
+          .jwtLocalStorageKey="${this.jwtLocalStorageKey}"
+        >
+        </etools-upload-multi>
+      </div>
+    </etools-dialog>
   `;
 }

package/dist/form-fields/abstract-field-base.class.d.ts

@@ -0,0 +1,28 @@
+import { CSSResultArray, LitElement, TemplateResult } from 'lit-element';
+import { FieldValidator } from '../lib/utils/validations.helper';
+/**
+ * Class that contains common properties and methods for single and repeatable fields
+ */
+export declare abstract class AbstractFieldBaseClass<T> extends LitElement {
+    questionText: string;
+    set isReadonly(readonly: boolean);
+    get isReadonly(): boolean;
+    required: boolean;
+    placeholder: string;
+    value: T | null;
+    validators: FieldValidator[];
+    touched: boolean;
+    set defaultValue(value: any);
+    private _defaultValue;
+    private _readonly;
+    protected render(): TemplateResult;
+    protected questionTemplate(): TemplateResult;
+    protected metaValidation(value: unknown): string | null;
+    private setDefaultValue;
+    protected abstract valueChanged(...args: any): void;
+    protected abstract customValidation(value: unknown): string | null;
+    protected abstract controlTemplate(...args: any): TemplateResult;
+    protected abstract setValue(value: T): void;
+    protected abstract validateField(value: T): void;
+    static get styles(): CSSResultArray;
+}

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

@@ -4,151 +4,172 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, html, LitElement, property } from 'lit-element';
-import { fireEvent } from '../lib/utils/fire-custom-event';
-import { FlexLayoutClasses } from '../lib/styles/flex-layout-classes';
+import { LitElement, property, css, html } from 'lit-element';
 import { validate } from '../lib/utils/validations.helper';
-export class BaseField extends LitElement {
+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 {
     constructor() {
         super(...arguments);
         this.questionText = '';
-        this.isReadonly = false;
         this.required = false;
+        this.placeholder = '';
         this.value = null;
-        this._errorMessage = null;
         this.validators = [];
+        this.touched = false;
+        this._readonly = false;
+    }
+    set isReadonly(readonly) {
+        this._readonly = readonly;
+        this.setDefaultValue(readonly, this._defaultValue);
     }
-    set errorMessage(message) {
-        this._errorMessage = message;
+    get isReadonly() {
+        return this._readonly;
     }
-    get errorMessage() {
-        return this.isReadonly ? null : this._errorMessage;
+    set defaultValue(value) {
+        this._defaultValue = value;
+        this.setDefaultValue(this._readonly, value);
+        this.requestUpdate();
     }
     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() {
-        return html ` <span class="question-text">${this.questionText}</span> `;
-    }
-    valueChanged(newValue) {
-        this.validateField(newValue);
-        if (newValue !== this.value) {
-            this.value = newValue;
-            fireEvent(this, 'value-changed', { value: newValue });
-        }
-    }
-    validateField(value) {
-        let errorMessage;
-        if (this.required && !value) {
-            errorMessage = 'This field is required!';
-        }
-        else {
-            errorMessage = this.metaValidation(value);
-        }
-        if (this._errorMessage !== errorMessage) {
-            fireEvent(this, 'error-changed', { error: errorMessage });
-            this._errorMessage = errorMessage;
-            this.requestUpdate();
-        }
+        return html `<span class="question-text">${this.questionText}</span>`;
     }
     metaValidation(value) {
         const message = validate(this.validators, value);
         return message ? message : this.customValidation(value);
     }
+    setDefaultValue(readonly, defaultValue) {
+        if (readonly || (!defaultValue && defaultValue !== 0) || this.value !== undefined) {
+            return;
+        }
+        this.getUpdateComplete().then(() => {
+            if (defaultValue === this._defaultValue && readonly === this._readonly && this.value === undefined) {
+                this.setValue(defaultValue);
+                this.validateField(defaultValue);
+            }
+        });
+    }
     static get styles() {
         // 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;
-        }
-
-        .question-control,
-        .question {
-          min-height: 57px;
-          display: flex;
-          align-items: center;
-        }
-        .question {
-          flex: 2;
-        }
-        .question-control {
-          flex: 3;
-        }
-
-        paper-input,
-        paper-textarea {
-          width: 100%;
-        }
-
-        .question-text {
-          font-weight: 500;
-          font-size: 13px;
-          color: var(--primary-text-color);
-        }
-
-        paper-input.form-control,
-        paper-textarea.form-control {
-          outline: none !important;
-        }
-        paper-input[required].form-control,
-        paper-textarea[required].form-control {
-          --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;
-        }
-        paper-input[disabled].form-control,
-        paper-textarea[disabled].form-control {
-          --paper-input-container-underline_-_border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
-          --paper-input-container-underline_-_border-color: rgba(0, 0, 0, 0.2) !important;
-        }
-
-        @media (max-width: 1080px) {
-          :host {
-            padding: 0 15px;
-          }
-          .finding-container {
-            flex-direction: column;
-          }
-          .question,
-          .question-control {
-            flex: 0 1 auto;
-          }
-        }
+            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;
+          }
+        }
       `
         ];
     }
 }
 __decorate([
     property({ type: String })
-], BaseField.prototype, "questionText", void 0);
+], AbstractFieldBaseClass.prototype, "questionText", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'is-readonly' })
-], BaseField.prototype, "isReadonly", void 0);
+], AbstractFieldBaseClass.prototype, "isReadonly", null);
 __decorate([
-    property({ type: Boolean, attribute: 'required', reflect: true })
-], BaseField.prototype, "required", void 0);
+    property({ type: Boolean, attribute: 'required' })
+], AbstractFieldBaseClass.prototype, "required", void 0);
 __decorate([
     property()
-], BaseField.prototype, "value", void 0);
+], AbstractFieldBaseClass.prototype, "placeholder", void 0);
 __decorate([
     property()
-], BaseField.prototype, "_errorMessage", void 0);
+], AbstractFieldBaseClass.prototype, "value", void 0);