@unicef-polymer/etools-form-builder 1.0.3 → 2.0.0-rc.5

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

@@ -0,0 +1,97 @@
+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 '@unicef-polymer/etools-upload/etools-upload';
+import { BaseField } from './base-field';
+import { AttachmentsHelper } from '../../form-attachments-popup';
+import { html, customElement } 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';
+let AttachmentField = class AttachmentField extends BaseField {
+    constructor() {
+        super(...arguments);
+        this.computedPath = [];
+    }
+    get uploadUrl() {
+        return AttachmentsHelper.uploadUrl;
+    }
+    get jwtLocalStorageKey() {
+        return AttachmentsHelper.jwtLocalStorageKey;
+    }
+    controlTemplate() {
+        return html `
+      <!--     Upload button     -->
+      <etools-upload
+        class="with-padding"
+        activate-offline
+        .uploadedFileInfo="${this.value}"
+        ?readonly="${this.isReadonly}"
+        @upload-finished="${({ detail }) => this.attachmentsUploaded(detail)}"
+        @delete-file="${() => this.valueChanged(null)}"
+        .endpointInfo="${{ endpoint: this.uploadUrl, extraInfo: { composedPath: this.computedPath } }}"
+        .jwtLocalStorageKey="${this.jwtLocalStorageKey}"
+      >
+      </etools-upload>
+    `;
+    }
+    customValidation() {
+        return null;
+    }
+    attachmentsUploaded({ success, error }) {
+        if (this.isUploadedAttachment(success)) {
+            this.valueChanged({
+                url: success.file_link,
+                attachment: success.id,
+                filename: success.filename,
+                file_type: null
+            });
+        }
+        else if (this.isOfflineSavedAttachment(success)) {
+            this.valueChanged({
+                attachment: success.id,
+                filename: success.filename,
+                composedPath: [],
+                file_type: null
+            });
+        }
+        else {
+            console.warn('Missing fields in parsed attachment');
+            this.valueChanged(null);
+        }
+        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 [...BaseField.styles, SharedStyles, AttachmentsStyles];
+    }
+};
+AttachmentField = __decorate([
+    customElement('attachments-field')
+], AttachmentField);
+export { AttachmentField };

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

@@ -0,0 +1,11 @@
+import { TemplateResult } from 'lit-element';
+import { AbstractFieldBaseClass } from '../abstract-field-base.class';
+export declare abstract class BaseField<T> extends AbstractFieldBaseClass<T> {
+    set errorMessage(message: string | null);
+    get errorMessage(): string | null;
+    protected _errorMessage: string | null;
+    protected valueChanged(newValue: T): void;
+    protected setValue(newValue: T | null): void;
+    protected validateField(value: T): void;
+    protected abstract controlTemplate(): TemplateResult;
+}

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

@@ -0,0 +1,57 @@
+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 { property } from 'lit-element';
+import { fireEvent } from '../../lib/utils/fire-custom-event';
+import { AbstractFieldBaseClass } from '../abstract-field-base.class';
+export class BaseField extends AbstractFieldBaseClass {
+    constructor() {
+        super(...arguments);
+        this._errorMessage = null;
+    }
+    set errorMessage(message) {
+        this._errorMessage = message;
+    }
+    get errorMessage() {
+        return this.isReadonly ? null : this._errorMessage;
+    }
+    valueChanged(newValue) {
+        if (!newValue && this.value === undefined) {
+            return;
+        }
+        if (!this.isReadonly && newValue !== this.value && this.touched) {
+            this.validateField(newValue);
+        }
+        else if (this.isReadonly || !this.touched) {
+            this._errorMessage = null;
+        }
+        if (newValue !== this.value) {
+            this.value = newValue;
+            fireEvent(this, 'value-changed', { value: newValue });
+        }
+    }
+    setValue(newValue) {
+        this.value = newValue;
+        fireEvent(this, 'value-changed', { value: newValue });
+    }
+    validateField(value) {
+        let errorMessage;
+        if (this.required && !value && typeof value !== 'number') {
+            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();
+        }
+    }
+}
+__decorate([
+    property()
+], BaseField.prototype, "_errorMessage", void 0);

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

@@ -0,0 +1,8 @@
+import { CSSResultArray, TemplateResult } from 'lit-element';
+import { BaseField } from './base-field';
+import '@polymer/paper-toggle-button';
+export declare class BooleanField extends BaseField<boolean> {
+    protected controlTemplate(): TemplateResult;
+    protected customValidation(): string | null;
+    static get styles(): CSSResultArray;
+}

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

@@ -0,0 +1,49 @@
+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 } from 'lit-element';
+import { BaseField } from './base-field';
+import '@polymer/paper-toggle-button';
+import { InputStyles } from '../../lib/styles/input-styles';
+let BooleanField = class BooleanField extends BaseField {
+    controlTemplate() {
+        return html `
+      ${InputStyles}
+      <paper-toggle-button
+        class="no-padding-left form-control"
+        ?checked="${this.value}"
+        @iron-change="${(event) => this.valueChanged(event.currentTarget.checked)}"
+        ?disabled="${this.isReadonly}"
+      >
+      </paper-toggle-button>
+
+      <div ?hidden="${!this.errorMessage}" class="error-text">${this.errorMessage}</div>
+    `;
+    }
+    customValidation() {
+        return null;
+    }
+    static get styles() {
+        // language=CSS
+        return [
+            ...BaseField.styles,
+            css `
+        :host(.wide) paper-textarea {
+          padding-left: 0;
+        }
+        @media (max-width: 380px) {
+          .no-padding-left {
+            padding-left: 0;
+          }
+        }
+      `
+        ];
+    }
+};
+BooleanField = __decorate([
+    customElement('boolean-field')
+], BooleanField);
+export { BooleanField };

package/dist/form-fields/{number-field.d.ts → single-fields/number-field.d.ts}

@@ -2,6 +2,7 @@ import { CSSResultArray, TemplateResult } from 'lit-element';
 import { BaseField } from './base-field';
 import '@polymer/paper-input/paper-input';
 export declare class NumberField extends BaseField<number> {
+    isInteger: boolean;
     protected controlTemplate(): TemplateResult;
     protected valueChanged(newValue: number): void;
     protected customValidation(value: number): string | null;

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

@@ -0,0 +1,66 @@
+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 } from 'lit-element';
+import { BaseField } from './base-field';
+import '@polymer/paper-input/paper-input';
+import { InputStyles } from '../../lib/styles/input-styles';
+let NumberField = class NumberField extends BaseField {
+    constructor() {
+        super(...arguments);
+        this.isInteger = false;
+    }
+    controlTemplate() {
+        return html `
+      ${InputStyles}
+      <paper-input
+        class="without-border no-padding-left form-control"
+        no-label-float
+        placeholder="${this.isReadonly ? '—' : this.placeholder}"
+        .value="${this.value}"
+        @value-changed="${({ detail }) => this.valueChanged(detail.value)}"
+        @focus="${() => (this.touched = true)}"
+        placeholder="&#8212;"
+        ?invalid="${this.errorMessage}"
+        error-message="${this.errorMessage}"
+        ?disabled="${this.isReadonly}"
+      >
+      </paper-input>
+    `;
+    }
+    valueChanged(newValue) {
+        const formatted = Number(newValue);
+        const isNumber = !isNaN(formatted) && `${newValue}` !== '' && `${newValue}` !== 'null';
+        super.valueChanged(isNumber ? formatted : newValue);
+    }
+    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 [
+            ...BaseField.styles,
+            css `
+        @media (max-width: 380px) {
+          .no-padding-left {
+            padding-left: 0;
+          }
+        }
+      `
+        ];
+    }
+};
+NumberField = __decorate([
+    customElement('number-field')
+], NumberField);
+export { NumberField };

package/dist/form-fields/{scale-field.d.ts → single-fields/scale-field.d.ts}

@@ -7,9 +7,11 @@ export declare type FieldOption = {
     value: any;
     label: string;
 };
-export declare class ScaleField extends BaseField<string | null> {
-    options: FieldOption[];
+export declare class ScaleField extends BaseField<string | number | null> {
+    options: (FieldOption | string | number)[];
     protected controlTemplate(): TemplateResult;
+    protected getLabel(option: FieldOption | string | number): unknown;
+    protected getValue(option: FieldOption | string | number): unknown;
     protected onSelect(item: PaperRadioButtonElement): void;
     protected customValidation(): string | null;
     static get styles(): CSSResultArray;

package/dist/form-fields/{scale-field.js → single-fields/scale-field.js}

@@ -4,13 +4,13 @@ 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 { html, property, css } from 'lit-element';
+import { html, property, css, customElement } from 'lit-element';
 import { BaseField } from './base-field';
 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';
-export class ScaleField extends BaseField {
+import { InputStyles } from '../../lib/styles/input-styles';
+let ScaleField = class ScaleField extends BaseField {
     constructor() {
         super(...arguments);
         this.options = [];
@@ -25,7 +25,9 @@ export class ScaleField extends BaseField {
           @iron-select="${({ detail }) => this.onSelect(detail.item)}"
         >
           ${repeat(this.options, (option) => html `
-              <paper-radio-button class="radio-button" name="${option.value}"> ${option.label} </paper-radio-button>
+              <paper-radio-button class="radio-button" name="${this.getValue(option)}">
+                ${this.getLabel(option)}
+              </paper-radio-button>
             `)}
         </paper-radio-group>
 
@@ -33,10 +35,20 @@ export class ScaleField extends BaseField {
           <iron-icon icon="clear"></iron-icon>Clear
         </paper-button>
       </div>
+      <div ?hidden="${!this.errorMessage}" class="error-text">${this.errorMessage}</div>
     `;
     }
+    getLabel(option) {
+        return typeof option === 'object' ? option.label : option;
+    }
+    getValue(option) {
+        return typeof option === 'object' ? option.value : option;
+    }
     onSelect(item) {
         const newValue = item.get('name');
+        if (newValue !== this.value) {
+            this.touched = true;
+        }
         this.valueChanged(newValue);
     }
     customValidation() {
@@ -85,7 +97,11 @@ export class ScaleField extends BaseField {
       `
         ];
     }
-}
+};
 __decorate([
     property({ type: Array })
 ], ScaleField.prototype, "options", void 0);
+ScaleField = __decorate([
+    customElement('scale-field')
+], ScaleField);
+export { ScaleField };

package/dist/form-fields/{wide-field.js → single-fields/text-field.js}

@@ -4,48 +4,51 @@ 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 { html, property } from 'lit-element';
+import { css, customElement, html } from 'lit-element';
 import { BaseField } from './base-field';
 import '@polymer/paper-input/paper-textarea';
-import { InputStyles } from '../lib/styles/input-styles';
-export class WideField extends BaseField {
-    constructor() {
-        super(...arguments);
-        this.label = '';
-        this.placeholder = '';
-    }
-    render() {
+import { InputStyles } from '../../lib/styles/input-styles';
+let TextField = class TextField extends BaseField {
+    controlTemplate() {
         return html `
       ${InputStyles}
       <paper-textarea
-        class="wide-input disabled-as-readonly form-control"
-        always-float-label
-        .value="${this.value}"
-        label="${this.label}"
+        id="textarea"
+        class="no-padding-left form-control"
+        no-label-float
         placeholder="${this.isReadonly ? '—' : this.placeholder}"
-        ?required="${this.required}"
+        .value="${this.value}"
+        @value-changed="${({ detail }) => this.valueChanged(detail.value)}"
+        @focus="${() => (this.touched = true)}"
+        placeholder="&#8212;"
         ?disabled="${this.isReadonly}"
         ?invalid="${this.errorMessage}"
         error-message="${this.errorMessage}"
-        @value-changed="${({ detail }) => this.valueChanged(detail.value)}"
       >
       </paper-textarea>
     `;
     }
-    controlTemplate() {
-        return html ``;
-    }
     customValidation() {
         return null;
     }
     static get styles() {
         // language=CSS
-        return [...BaseField.styles];
+        return [
+            ...BaseField.styles,
+            css `
+        :host(.wide) paper-textarea {
+          padding-left: 0;
+        }
+        @media (max-width: 380px) {
+          .no-padding-left {
+            padding-left: 0;
+          }
+        }
+      `
+        ];
     }
-}
-__decorate([
-    property()
-], WideField.prototype, "label", void 0);
-__decorate([
-    property()
-], WideField.prototype, "placeholder", void 0);
+};
+TextField = __decorate([
+    customElement('text-field')
+], TextField);
+export { TextField };

package/dist/form-groups/form-abstract-group.d.ts

@@ -1,11 +1,10 @@
 import { LitElement, TemplateResult, CSSResultArray } from 'lit-element';
-import '../form-fields/text-field';
-import '../form-fields/number-field';
-import '../form-fields/scale-field';
-import '../form-fields/wide-field';
+import '../form-fields/single-fields/text-field';
+import '../form-fields/single-fields/number-field';
+import '../form-fields/single-fields/scale-field';
 import '@polymer/paper-input/paper-textarea';
 import { IFormBuilderAbstractGroup } from '../lib/types/form-builder.interfaces';
-import { BlueprintField, BlueprintGroup, BlueprintMetadata } from '../lib/types/form-builder.types';
+import { BlueprintField, BlueprintGroup, BlueprintMetadata, Information } from '../lib/types/form-builder.types';
 import { GenericObject } from '../lib/types/global.types';
 export declare enum FieldTypes {
     FILE_TYPE = "file",
@@ -47,14 +46,15 @@ export declare class FormAbstractGroup extends LitElement implements IFormBuilde
      */
     set errors(errors: GenericObject | string[] | null);
     render(): TemplateResult;
-    renderChild(child: BlueprintGroup | BlueprintField): TemplateResult;
+    renderChild(child: BlueprintGroup | BlueprintField | Information): TemplateResult | TemplateResult[];
     renderField(blueprintField: BlueprintField): TemplateResult;
-    renderWideField({ name, label, placeholder, required, validations }: BlueprintField): TemplateResult;
-    renderStandardField({ input_type, name, label, help_text, options_key, required, validations }: BlueprintField): TemplateResult;
-    renderFieldLabel(label: string, helperText: string): TemplateResult;
-    renderGroup(groupStructure: BlueprintGroup): TemplateResult;
-    valueChanged(event: CustomEvent, name: string): void;
-    errorChanged(event: CustomEvent, name: string): void;
+    renderInformation(information: Information): TemplateResult;
+    renderGroup(groupStructure: BlueprintGroup): TemplateResult | TemplateResult[];
+    getGroupTemplate(groupStructure: BlueprintGroup, index?: number): TemplateResult;
+    valueChanged(event: CustomEvent, name: string, index?: number): void;
+    errorChanged(event: CustomEvent, name: string, index?: number): void;
+    addGroup(name: string): void;
+    removeGroup(group: BlueprintGroup, index?: number): void;
     protected getErrorMessage(fieldName: string): string | null;
     static get styles(): CSSResultArray;
 }