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

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

@@ -0,0 +1,198 @@
+import '@unicef-polymer/etools-upload/etools-upload';
+import { RepeatableBaseField } from './repeatable-base-field';
+import { AttachmentsHelper } from '../../form-attachments-popup';
+import { html, css } from 'lit-element';
+import { fireEvent } from '../../lib/utils/fire-custom-event';
+import { SharedStyles } from '../../lib/styles/shared-styles';
+import { AttachmentsStyles } from '../../lib/styles/attachments.styles';
+export class RepeatableAttachmentField extends RepeatableBaseField {
+    constructor() {
+        super(...arguments);
+        this.computedPath = [];
+    }
+    get uploadUrl() {
+        return AttachmentsHelper.uploadUrl;
+    }
+    get jwtLocalStorageKey() {
+        return AttachmentsHelper.jwtLocalStorageKey;
+    }
+    render() {
+        var _a;
+        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) => value
+            ? html `
+                  <div class="layout horizontal file-container">
+                    <!--        File name component          -->
+                    <div class="filename-container file-selector__filename">
+                      <iron-icon class="file-icon" icon="attachment"></iron-icon>
+                      <span class="filename" title="${value.filename}">${value.filename}</span>
+                    </div>
+
+                    <!--         Download Button         -->
+                    <paper-button
+                      ?hidden="${!value.url}"
+                      class="download-button file-selector__download"
+                      @tap="${() => this.downloadFile(value)}"
+                    >
+                      <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.isReadonly}"
+                      @tap="${() => this.removeControl(index)}"
+                    >
+                      Delete
+                    </paper-button>
+                  </div>
+                `
+            : '')}
+          <!--     Upload button     -->
+          <etools-upload-multi
+            class="with-padding"
+            activate-offline
+            ?hidden="${this.isReadonly}"
+            @upload-finished="${({ detail }) => this.attachmentsUploaded(detail)}"
+            .endpointInfo="${{ endpoint: this.uploadUrl, extraInfo: { composedPath: this.computedPath } }}"
+            .jwtLocalStorageKey="${this.jwtLocalStorageKey}"
+          >
+          </etools-upload-multi>
+          <div ?hidden="${!this.isReadonly || ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length)}">—</div>
+        </div>
+      </div>
+    `;
+    }
+    controlTemplate() {
+        return html ``;
+    }
+    customValidation() {
+        return null;
+    }
+    attachmentsUploaded({ success, error }) {
+        success === null || success === void 0 ? void 0 : success.forEach((file, index) => {
+            var _a, _b;
+            const newIndex = ((_b = Number((_a = this.editedValues) === null || _a === void 0 ? void 0 : _a.length)) !== null && _b !== void 0 ? _b : 0) + index;
+            if (this.isUploadedAttachment(file)) {
+                this.valueChanged({
+                    url: file.file_link,
+                    attachment: file.id,
+                    filename: file.filename,
+                    file_type: null
+                }, newIndex);
+            }
+            else if (this.isOfflineSavedAttachment(file)) {
+                this.valueChanged({
+                    attachment: file.id,
+                    filename: file.filename,
+                    composedPath: [],
+                    file_type: null
+                }, newIndex);
+            }
+            else {
+                console.warn('Missing fields in parsed attachment');
+            }
+        });
+        if (error && error.length) {
+            console.error(error);
+            fireEvent(this, 'toast', { text: 'Can not upload attachments. Please try again later' });
+        }
+    }
+    downloadFile(attachment) {
+        if (!(attachment === null || attachment === void 0 ? void 0 : attachment.url)) {
+            return;
+        }
+        const link = document.createElement('a');
+        link.target = '_blank';
+        link.href = attachment.url;
+        link.click();
+        window.URL.revokeObjectURL(attachment.url);
+    }
+    isUploadedAttachment(attachment) {
+        return (attachment.hasOwnProperty('filename') &&
+            attachment.hasOwnProperty('id') &&
+            attachment.hasOwnProperty('file_link') &&
+            !attachment.hasOwnProperty('unsynced'));
+    }
+    isOfflineSavedAttachment(attachment) {
+        return (attachment.hasOwnProperty('filename') && attachment.hasOwnProperty('id') && attachment.hasOwnProperty('unsynced'));
+    }
+    static get styles() {
+        // language=CSS
+        return [
+            ...RepeatableBaseField.styles,
+            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;
+        }
+
+        .file-container {
+          padding: 8px 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-fields/repeatable-fields/repeatable-base-field.d.ts

@@ -0,0 +1,20 @@
+import { CSSResultArray, TemplateResult } from 'lit-element';
+import { AbstractFieldBaseClass } from '../abstract-field-base.class';
+export declare abstract class RepeatableBaseField<T> extends AbstractFieldBaseClass<T[]> {
+    set errorMessage(messages: (string | null)[]);
+    get errorMessage(): (string | null)[];
+    protected _errorMessage: (string | null)[];
+    protected editedValues: (T | null)[] | null;
+    protected render(): TemplateResult;
+    protected questionTemplate(): TemplateResult;
+    protected valueChanged(newValue: T, index: number): void;
+    protected setValue(value: (T | null)[]): void;
+    protected validateField(value: T[]): void;
+    protected validateField(value: T, index: number): void;
+    protected addNewField(): void;
+    protected removeControl(index: number): void;
+    protected getValues(): (T | null)[];
+    private isArrayData;
+    protected abstract controlTemplate(value: T | null, index: number): TemplateResult;
+    static get styles(): CSSResultArray;
+}

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

@@ -0,0 +1,123 @@
+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, property } from 'lit-element';
+import { AbstractFieldBaseClass } from '../abstract-field-base.class';
+import { fireEvent } from '../../lib/utils/fire-custom-event';
+export class RepeatableBaseField extends AbstractFieldBaseClass {
+    constructor() {
+        super(...arguments);
+        this._errorMessage = [];
+        this.editedValues = null;
+    }
+    set errorMessage(messages) {
+        this._errorMessage = messages || [];
+    }
+    get errorMessage() {
+        return this.isReadonly ? [] : this._errorMessage;
+    }
+    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)}
+                <iron-icon
+                  icon="close"
+                  ?hidden="${this.isReadonly || values.length < 2}"
+                  @click="${() => this.removeControl(index)}"
+                ></iron-icon>
+              </div>`)}
+          <paper-button class="add-button" ?hidden="${this.isReadonly}" @click="${() => this.addNewField()}">
+            Add
+          </paper-button>
+        </div>
+      </div>
+    `;
+    }
+    questionTemplate() {
+        return html `<span class="question-text">${this.questionText}</span>`;
+    }
+    valueChanged(newValue, index) {
+        if (!this.isReadonly) {
+            this.validateField(newValue, index);
+        }
+        else {
+            this._errorMessage = [];
+        }
+        if (this.editedValues && newValue !== this.editedValues[index]) {
+            this.editedValues[index] = newValue;
+            this.setValue(this.editedValues);
+        }
+    }
+    setValue(value) {
+        this.editedValues = value;
+        this.value = value.filter((value) => Boolean(value));
+        fireEvent(this, 'value-changed', { value: this.value });
+    }
+    validateField(value, index) {
+        if (this.isArrayData(value)) {
+            return value.forEach((item, index) => this.validateField(item, index));
+        }
+        let errorMessage;
+        if (this.required && !value && value !== null && typeof value !== 'number') {
+            errorMessage = 'This field is required!';
+        }
+        else {
+            errorMessage = this.metaValidation(value);
+        }
+        const oldError = (this._errorMessage || [])[index] || null;
+        if (oldError !== errorMessage) {
+            const errors = this.editedValues.map((_, index) => (this._errorMessage && this._errorMessage[index]) || null);
+            errors.splice(index, 1, errorMessage);
+            const newErrors = errors.some((error) => error !== null) ? errors : null;
+            fireEvent(this, 'error-changed', { error: newErrors });
+            this._errorMessage = errors;
+            this.requestUpdate();
+        }
+    }
+    addNewField() {
+        this.editedValues = [...this.editedValues, null];
+    }
+    removeControl(index) {
+        this.editedValues.splice(index, 1);
+        this.value = this.editedValues.filter((value) => Boolean(value));
+        fireEvent(this, 'value-changed', { value: this.value });
+        this.requestUpdate();
+    }
+    getValues() {
+        if (this.isReadonly) {
+            this.editedValues = Array.isArray(this.value) && this.value.length ? this.value : [null];
+        }
+        else if (!this.editedValues) {
+            this.editedValues = Array.isArray(this.value) && this.value.length ? this.value : [null];
+        }
+        return this.editedValues || [null];
+    }
+    isArrayData(value) {
+        return Array.isArray(value);
+    }
+    static get styles() {
+        // language=CSS
+        return [
+            ...AbstractFieldBaseClass.styles,
+            css `
+        :host(:not([is-readonly])) .question-control,
+        :host(:not([is-readonly])) .question {
+          padding-bottom: 10px;
+        }
+      `
+        ];
+    }
+}
+__decorate([
+    property()
+], RepeatableBaseField.prototype, "_errorMessage", void 0);
+__decorate([
+    property()
+], RepeatableBaseField.prototype, "editedValues", void 0);

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

@@ -0,0 +1,10 @@
+import { CSSResultArray, TemplateResult } from 'lit-element';
+import '@polymer/paper-input/paper-input';
+import { RepeatableBaseField } from './repeatable-base-field';
+export declare class RepeatableNumberField extends RepeatableBaseField<number> {
+    isInteger: boolean;
+    protected controlTemplate(value: number | null, index: number): TemplateResult;
+    protected valueChanged(newValue: number, index: number): void;
+    protected customValidation(value: number): string | null;
+    static get styles(): CSSResultArray;
+}

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

@@ -0,0 +1,56 @@
+import { css, html } from 'lit-element';
+import '@polymer/paper-input/paper-input';
+import { InputStyles } from '../../lib/styles/input-styles';
+import { RepeatableBaseField } from './repeatable-base-field';
+import { AbstractFieldBaseClass } from '../abstract-field-base.class';
+export class RepeatableNumberField extends RepeatableBaseField {
+    constructor() {
+        super(...arguments);
+        this.isInteger = false;
+    }
+    controlTemplate(value, index) {
+        return html `
+      ${InputStyles}
+      <paper-input
+        class="without-border no-padding-left form-control"
+        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]}"
+        ?disabled="${this.isReadonly}"
+      >
+      </paper-input>
+    `;
+    }
+    valueChanged(newValue, index) {
+        const formatted = Number(newValue);
+        const isNumber = !isNaN(formatted) && `${newValue}` !== '' && `${newValue}` !== 'null';
+        super.valueChanged(isNumber ? formatted : newValue, index);
+    }
+    customValidation(value) {
+        if (!value) {
+            return null;
+        }
+        if (isNaN(value)) {
+            return 'Must be a number';
+        }
+        const integerValidation = !this.isInteger || value - Math.floor(value) === 0;
+        return integerValidation ? null : 'Must be an integer';
+    }
+    static get styles() {
+        // language=CSS
+        return [
+            ...AbstractFieldBaseClass.styles,
+            css `
+        @media (max-width: 380px) {
+          .no-padding-left {
+            padding-left: 0;
+          }
+        }
+      `
+        ];
+    }
+}

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

@@ -0,0 +1,15 @@
+import { TemplateResult, CSSResultArray } from 'lit-element';
+import '@polymer/paper-radio-group/paper-radio-group';
+import '@polymer/paper-radio-button/paper-radio-button';
+import { PaperRadioButtonElement } from '@polymer/paper-radio-button/paper-radio-button';
+import { RepeatableBaseField } from './repeatable-base-field';
+import { FieldOption } from '..';
+export declare class RepeatableScaleField extends RepeatableBaseField<string | number | null> {
+    options: (FieldOption | string | number)[];
+    protected controlTemplate(value: string | null, index: number): TemplateResult;
+    protected onSelect(item: PaperRadioButtonElement, index: number): void;
+    protected getLabel(option: FieldOption | string | number): unknown;
+    protected getValue(option: FieldOption | string | number): unknown;
+    protected customValidation(): string | null;
+    static get styles(): CSSResultArray;
+}

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

@@ -0,0 +1,104 @@
+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 { html, property, css } from 'lit-element';
+import { repeat } from 'lit-html/directives/repeat';
+import '@polymer/paper-radio-group/paper-radio-group';
+import '@polymer/paper-radio-button/paper-radio-button';
+import { InputStyles } from '../../lib/styles/input-styles';
+import { RepeatableBaseField } from './repeatable-base-field';
+import { AbstractFieldBaseClass } from '../abstract-field-base.class';
+export class RepeatableScaleField extends RepeatableBaseField {
+    constructor() {
+        super(...arguments);
+        this.options = [];
+    }
+    controlTemplate(value, index) {
+        return html `
+      ${InputStyles}
+      <div class="container">
+        <paper-radio-group
+          class="radio-group"
+          selected="${value}"
+          @iron-select="${({ detail }) => this.onSelect(detail.item, index)}"
+        >
+          ${repeat(this.options, (option) => html `
+              <paper-radio-button class="radio-button" name="${this.getValue(option)}">
+                ${this.getLabel(option)}
+              </paper-radio-button>
+            `)}
+        </paper-radio-group>
+
+        <paper-button
+          ?hidden="${this.isReadonly}"
+          @click="${() => this.valueChanged(null, index)}"
+          class="clear-button"
+        >
+          <iron-icon icon="clear"></iron-icon>Clear
+        </paper-button>
+      </div>
+    `;
+    }
+    onSelect(item, index) {
+        const newValue = item.get('name');
+        this.valueChanged(newValue, index);
+    }
+    getLabel(option) {
+        return typeof option === 'object' ? option.label : option;
+    }
+    getValue(option) {
+        return typeof option === 'object' ? option.value : option;
+    }
+    customValidation() {
+        return null;
+    }
+    static get styles() {
+        // 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]) paper-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;
+          }
+        }
+      `
+        ];
+    }
+}
+__decorate([
+    property({ type: Array })
+], RepeatableScaleField.prototype, "options", void 0);

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

@@ -0,0 +1,8 @@
+import { CSSResultArray, TemplateResult } from 'lit-element';
+import '@polymer/paper-input/paper-textarea';
+import { RepeatableBaseField } from './repeatable-base-field';
+export declare class RepeatableTextField extends RepeatableBaseField<string> {
+    protected controlTemplate(value: string | null, index: number): TemplateResult;
+    protected customValidation(): string | null;
+    static get styles(): CSSResultArray;
+}

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

@@ -0,0 +1,43 @@
+import { css, html } from 'lit-element';
+import '@polymer/paper-input/paper-textarea';
+import { InputStyles } from '../../lib/styles/input-styles';
+import { RepeatableBaseField } from './repeatable-base-field';
+import { AbstractFieldBaseClass } from '../abstract-field-base.class';
+export class RepeatableTextField extends RepeatableBaseField {
+    controlTemplate(value, index) {
+        return html `
+      ${InputStyles}
+      <paper-textarea
+        id="textarea"
+        class="no-padding-left form-control"
+        no-label-float
+        placeholder="${this.isReadonly ? '—' : this.placeholder}"
+        .value="${value}"
+        @value-changed="${({ detail }) => this.valueChanged(detail.value, index)}"
+        ?disabled="${this.isReadonly}"
+        ?invalid="${this.errorMessage[index]}"
+        error-message="${this.errorMessage[index]}"
+      >
+      </paper-textarea>
+    `;
+    }
+    customValidation() {
+        return null;
+    }
+    static get styles() {
+        // language=CSS
+        return [
+            ...AbstractFieldBaseClass.styles,
+            css `
+        :host(.wide) paper-textarea {
+          padding-left: 0;
+        }
+        @media (max-width: 380px) {
+          .no-padding-left {
+            padding-left: 0;
+          }
+        }
+      `
+        ];
+    }
+}

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

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