@unicef-polymer/etools-form-builder 1.0.2 → 2.0.0-rc.3

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';

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,9 +1,4 @@
 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() {

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,25 +4,34 @@ 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 `
@@ -33,33 +42,23 @@ export class BaseField extends LitElement {
     `;
     }
     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 [
@@ -80,8 +79,18 @@ export class BaseField extends LitElement {
           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;
@@ -92,7 +101,15 @@ export class BaseField extends LitElement {
         .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%;
@@ -121,6 +138,15 @@ export class BaseField extends LitElement {
           --paper-input-container-underline_-_border-color: rgba(0, 0, 0, 0.2) !important;
         }
 
+        iron-icon[icon='close'] {
+          cursor: pointer;
+        }
+
+        .error-text {
+          color: var(--error-color);
+          font-size: 12px;
+        }
+
         @media (max-width: 1080px) {
           :host {
             padding: 0 15px;
@@ -139,16 +165,16 @@ export class BaseField extends LitElement {
 }
 __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);

package/dist/form-fields/custom-elements.define.js

@@ -1,11 +1,23 @@
 /**
  * Form field elements
  */
-import { TextField } from './text-field';
-import { NumberField } from './number-field';
-import { ScaleField } from './scale-field';
-import { WideField } from './wide-field';
+import { TextField } from './single-fields/text-field';
+import { NumberField } from './single-fields/number-field';
+import { ScaleField } from './single-fields/scale-field';
+import { BooleanField } from './single-fields/boolean-field';
+import { FieldRendererComponent } from './field-renderer-component';
+import { RepeatableTextField } from './repeatable-fields/repeatable-text-field';
+import { RepeatableNumberField } from './repeatable-fields/repeatable-number-field';
+import { RepeatableScaleField } from './repeatable-fields/repeatable-scale-field';
+import { AttachmentField } from './single-fields/attachment-field';
+import { RepeatableAttachmentField } from './repeatable-fields/repeatable-attachment-field';
 window.customElements.define('number-field', NumberField);
 window.customElements.define('text-field', TextField);
 window.customElements.define('scale-field', ScaleField);
-window.customElements.define('wide-field', WideField);
+window.customElements.define('boolean-field', BooleanField);
+window.customElements.define('attachments-field', AttachmentField);
+window.customElements.define('field-renderer', FieldRendererComponent);
+window.customElements.define('repeatable-text-field', RepeatableTextField);
+window.customElements.define('repeatable-number-field', RepeatableNumberField);
+window.customElements.define('repeatable-scale-field', RepeatableScaleField);
+window.customElements.define('repeatable-attachments-field', RepeatableAttachmentField);

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

@@ -0,0 +1,20 @@
+import { CSSResultArray, LitElement, TemplateResult } from 'lit-element';
+import { BlueprintField } from '../lib/types/form-builder.types';
+import { FieldValidator } from '../lib/utils/validations.helper';
+import { FieldOption } from './single-fields/scale-field';
+export declare class FieldRendererComponent extends LitElement {
+    field: BlueprintField;
+    value: any;
+    errorMessage: string | null;
+    validations: FieldValidator[];
+    readonly: boolean;
+    options: (FieldOption | string | number)[];
+    computedPath: string[];
+    defaultValue: any;
+    render(): TemplateResult;
+    renderField(blueprintField: BlueprintField): TemplateResult;
+    renderStandardField({ input_type, label, help_text, required, placeholder, styling }: BlueprintField): TemplateResult;
+    renderRepeatableField({ input_type, label, help_text, required, placeholder, styling }: BlueprintField): TemplateResult;
+    renderFieldLabel(label: string, helperText: string): TemplateResult;
+    static get styles(): CSSResultArray;
+}

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

@@ -0,0 +1,245 @@
+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, html, LitElement, property } from 'lit-element';
+import { FieldTypes, StructureTypes } from '../form-groups';
+import { FlexLayoutClasses } from '../lib/styles/flex-layout-classes';
+import { FormBuilderCardStyles } from '..';
+export class FieldRendererComponent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.errorMessage = null;
+        this.validations = [];
+        this.readonly = false;
+        this.options = [];
+        this.computedPath = [];
+    }
+    render() {
+        if (!this.field) {
+            return html ``;
+        }
+        return this.renderField(this.field);
+    }
+    renderField(blueprintField) {
+        const additionalClass = blueprintField.styling.includes(StructureTypes.ADDITIONAL)
+            ? 'additional-field '
+            : '';
+        const wideClass = blueprintField.styling.includes(StructureTypes.WIDE) ? 'wide-field-container ' : '';
+        return html `
+      <div class="${`${additionalClass}${wideClass}finding-container`}">
+        ${blueprintField.repeatable
+            ? this.renderRepeatableField(blueprintField)
+            : this.renderStandardField(blueprintField)}
+      </div>
+    `;
+    }
+    renderStandardField({ input_type, label, help_text, required, placeholder, styling }) {
+        var _a, _b, _c, _d;
+        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>
+        `;
+            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>
+        `;
+            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>
+        `;
+            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>
+        `;
+            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>
+        `;
+            default:
+                console.warn(`FormBuilderGroup: Unknown field type: ${input_type}`);
+                return html ``;
+        }
+    }
+    renderRepeatableField({ input_type, label, help_text, required, placeholder, styling }) {
+        var _a, _b, _c;
+        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>
+        `;
+            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>
+        `;
+            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>
+        `;
+            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>
+        `;
+            default:
+                console.warn(`FormBuilderGroup: Unknown field type: ${input_type}`);
+                return html ``;
+        }
+    }
+    renderFieldLabel(label, helperText) {
+        return html `
+      <div class="layout vertical question-container">
+        <div class="question-text">${label}</div>
+        <div class="question-details">${helperText}</div>
+      </div>
+    `;
+    }
+    static get styles() {
+        // language=CSS
+        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;
+        }
+      `
+        ];
+    }
+}
+__decorate([
+    property()
+], FieldRendererComponent.prototype, "field", void 0);
+__decorate([
+    property()
+], FieldRendererComponent.prototype, "value", void 0);
+__decorate([
+    property()
+], FieldRendererComponent.prototype, "errorMessage", void 0);
+__decorate([
+    property()
+], FieldRendererComponent.prototype, "validations", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'readonly' })
+], FieldRendererComponent.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Array })
+], FieldRendererComponent.prototype, "options", void 0);

package/dist/form-fields/index.d.ts

@@ -1,5 +1,9 @@
-export * from './base-field';
-export * from './number-field';
-export * from './text-field';
-export * from './scale-field';
-export * from './wide-field';
+export * from './single-fields/base-field';
+export * from './single-fields/number-field';
+export * from './single-fields/text-field';
+export * from './single-fields/scale-field';
+export * from './repeatable-fields/repeatable-base-field';
+export * from './repeatable-fields/repeatable-text-field';
+export * from './repeatable-fields/repeatable-number-field';
+export * from './repeatable-fields/repeatable-scale-field';
+export * from './field-renderer-component';

package/dist/form-fields/index.js

@@ -1,5 +1,9 @@
-export * from './base-field';
-export * from './number-field';
-export * from './text-field';
-export * from './scale-field';
-export * from './wide-field';
+export * from './single-fields/base-field';
+export * from './single-fields/number-field';
+export * from './single-fields/text-field';
+export * from './single-fields/scale-field';
+export * from './repeatable-fields/repeatable-base-field';
+export * from './repeatable-fields/repeatable-text-field';
+export * from './repeatable-fields/repeatable-number-field';
+export * from './repeatable-fields/repeatable-scale-field';
+export * from './field-renderer-component';

package/dist/form-fields/repeatable-fields/repeatable-attachment-field.d.ts

@@ -0,0 +1,17 @@
+import '@unicef-polymer/etools-upload/etools-upload';
+import { RepeatableBaseField } from './repeatable-base-field';
+import { StoredAttachment, UploadFinishedDetails } from '../../form-attachments-popup';
+import { TemplateResult, CSSResultArray } from 'lit-element';
+export declare class RepeatableAttachmentField extends RepeatableBaseField<StoredAttachment> {
+    get uploadUrl(): string;
+    get jwtLocalStorageKey(): string;
+    computedPath: string[];
+    protected render(): TemplateResult;
+    protected controlTemplate(): TemplateResult;
+    protected customValidation(): string | null;
+    protected attachmentsUploaded({ success, error }: UploadFinishedDetails): void;
+    protected downloadFile(attachment: StoredAttachment | null): void;
+    private isUploadedAttachment;
+    private isOfflineSavedAttachment;
+    static get styles(): CSSResultArray;
+}