@unicef-polymer/etools-form-builder 0.1.25 → 1.0.1

package/dist/form-groups/form-abstract-group.js

@@ -1,114 +1,114 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, property, html, css } from 'lit-element';
-import '../form-fields/text-field';
-import '../form-fields/number-field';
-import '../form-fields/scale-field';
-import '../form-fields/wide-field';
-import '@polymer/paper-input/paper-textarea';
-import { SharedStyles } from '../lib/styles/shared-styles';
-import { pageLayoutStyles } from '../lib/styles/page-layout-styles';
-import { elevationStyles } from '../lib/styles/elevation-styles';
-import { CardStyles } from '../lib/styles/card-styles';
-import { FlexLayoutClasses } from '../lib/styles/flex-layout-classes';
-import { FormBuilderCardStyles } from '..';
-import { fireEvent } from '../lib/utils/fire-custom-event';
-import { clone } from 'ramda';
-export var FieldTypes;
-(function (FieldTypes) {
-    FieldTypes["FILE_TYPE"] = "file";
-    FieldTypes["TEXT_TYPE"] = "text";
-    FieldTypes["NUMBER_TYPE"] = "number";
-    FieldTypes["BOOL_TYPE"] = "bool";
-    FieldTypes["SCALE_TYPE"] = "likert_scale";
-    FieldTypes["NUMBER_INTEGER_TYPE"] = "number-integer";
-    FieldTypes["NUMBER_FLOAT_TYPE"] = "number-float";
-})(FieldTypes || (FieldTypes = {}));
-export var StructureTypes;
-(function (StructureTypes) {
-    StructureTypes["WIDE"] = "wide";
-    StructureTypes["ADDITIONAL"] = "additional";
-    StructureTypes["CARD"] = "card";
-    StructureTypes["ABSTRACT"] = "abstract";
-    StructureTypes["COLLAPSED"] = "collapse";
-    StructureTypes["ATTACHMENTS_BUTTON"] = "floating_attachments";
-})(StructureTypes || (StructureTypes = {}));
-export class FormAbstractGroup extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.parentGroupName = '';
-        this.readonly = true;
-        this._errors = {};
-        this._value = {};
-        this.computedPath = [];
-    }
-    /**
-     * Make value property immutable
-     * @param value
-     */
-    set value(value) {
-        this._value = this.groupStructure.name === 'root' ? clone(value) : value;
-    }
-    get value() {
-        return this._value;
-    }
-    /**
-     * Setter for handling error.
-     * Normally we wouldn't have errors as string or string[] for FormGroups.
-     * In cases they appear - show toast with error text and reset it.
-     * Otherwise it will be impossible to clear that error from field elements
-     * @param errors
-     */
-    set errors(errors) {
-        if (Array.isArray(errors)) {
-            fireEvent(this, 'toast', { text: errors[0] });
-            fireEvent(this, 'error-changed', { error: null });
-        }
-        else if (errors) {
-            this._errors = errors;
-        }
-    }
-    render() {
-        if (!this.groupStructure || !this.metadata) {
-            return html ``;
-        }
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, property, html, css } from 'lit-element';
+import '../form-fields/text-field';
+import '../form-fields/number-field';
+import '../form-fields/scale-field';
+import '../form-fields/wide-field';
+import '@polymer/paper-input/paper-textarea';
+import { SharedStyles } from '../lib/styles/shared-styles';
+import { pageLayoutStyles } from '../lib/styles/page-layout-styles';
+import { elevationStyles } from '../lib/styles/elevation-styles';
+import { CardStyles } from '../lib/styles/card-styles';
+import { FlexLayoutClasses } from '../lib/styles/flex-layout-classes';
+import { FormBuilderCardStyles } from '..';
+import { fireEvent } from '../lib/utils/fire-custom-event';
+import { clone } from 'ramda';
+export var FieldTypes;
+(function (FieldTypes) {
+    FieldTypes["FILE_TYPE"] = "file";
+    FieldTypes["TEXT_TYPE"] = "text";
+    FieldTypes["NUMBER_TYPE"] = "number";
+    FieldTypes["BOOL_TYPE"] = "bool";
+    FieldTypes["SCALE_TYPE"] = "likert_scale";
+    FieldTypes["NUMBER_INTEGER_TYPE"] = "number-integer";
+    FieldTypes["NUMBER_FLOAT_TYPE"] = "number-float";
+})(FieldTypes || (FieldTypes = {}));
+export var StructureTypes;
+(function (StructureTypes) {
+    StructureTypes["WIDE"] = "wide";
+    StructureTypes["ADDITIONAL"] = "additional";
+    StructureTypes["CARD"] = "card";
+    StructureTypes["ABSTRACT"] = "abstract";
+    StructureTypes["COLLAPSED"] = "collapse";
+    StructureTypes["ATTACHMENTS_BUTTON"] = "floating_attachments";
+})(StructureTypes || (StructureTypes = {}));
+export class FormAbstractGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.parentGroupName = '';
+        this.readonly = true;
+        this._errors = {};
+        this._value = {};
+        this.computedPath = [];
+    }
+    /**
+     * Make value property immutable
+     * @param value
+     */
+    set value(value) {
+        this._value = this.groupStructure.name === 'root' ? clone(value) : value;
+    }
+    get value() {
+        return this._value;
+    }
+    /**
+     * Setter for handling error.
+     * Normally we wouldn't have errors as string or string[] for FormGroups.
+     * In cases they appear - show toast with error text and reset it.
+     * Otherwise it will be impossible to clear that error from field elements
+     * @param errors
+     */
+    set errors(errors) {
+        if (Array.isArray(errors)) {
+            fireEvent(this, 'toast', { text: errors[0] });
+            fireEvent(this, 'error-changed', { error: null });
+        }
+        else if (errors) {
+            this._errors = errors;
+        }
+    }
+    render() {
+        if (!this.groupStructure || !this.metadata) {
+            return html ``;
+        }
         return html `
       ${this.groupStructure.children.map((child) => this.renderChild(child))}
-    `;
-    }
-    renderChild(child) {
-        const type = child.type;
-        switch (child.type) {
-            case 'field':
-                return this.renderField(child);
-            case 'group':
-                return this.renderGroup(child);
-            default:
-                console.warn(`FormBuilderGroup: Unknown group type ${type}. Please, specify rendering method`);
-                return html ``;
-        }
-    }
-    renderField(blueprintField) {
-        const isWide = blueprintField.styling.includes(StructureTypes.WIDE);
-        const isAdditional = blueprintField.styling.includes(StructureTypes.ADDITIONAL);
-        if (isWide) {
+    `;
+    }
+    renderChild(child) {
+        const type = child.type;
+        switch (child.type) {
+            case 'field':
+                return this.renderField(child);
+            case 'group':
+                return this.renderGroup(child);
+            default:
+                console.warn(`FormBuilderGroup: Unknown group type ${type}. Please, specify rendering method`);
+                return html ``;
+        }
+    }
+    renderField(blueprintField) {
+        const isWide = blueprintField.styling.includes(StructureTypes.WIDE);
+        const isAdditional = blueprintField.styling.includes(StructureTypes.ADDITIONAL);
+        if (isWide) {
             return html `
         <div class="${isAdditional ? 'additional-field' : ''}">${this.renderWideField(blueprintField)}</div>
-      `;
-        }
-        else {
+      `;
+        }
+        else {
             return html `
         <div class="${isAdditional ? 'additional-field finding-container' : 'finding-container'}">
           ${this.renderStandardField(blueprintField)}
         </div>
-      `;
-        }
-    }
-    renderWideField({ name, label, placeholder, required, validations }) {
+      `;
+        }
+    }
+    renderWideField({ name, label, placeholder, required, validations }) {
         return html `
       <wide-field
         ?is-readonly="${this.readonly}"
@@ -121,12 +121,12 @@ export class FormAbstractGroup extends LitElement {
         @value-changed="${(event) => this.valueChanged(event, name)}"
         @error-changed="${(event) => this.errorChanged(event, name)}"
       ></wide-field>
-    `;
-    }
-    renderStandardField({ input_type, name, label, help_text, options_key, required, validations }) {
-        var _a;
-        switch (input_type) {
-            case FieldTypes.TEXT_TYPE:
+    `;
+    }
+    renderStandardField({ input_type, name, label, help_text, options_key, required, validations }) {
+        var _a;
+        switch (input_type) {
+            case FieldTypes.TEXT_TYPE:
                 return html `
           <text-field
             ?is-readonly="${this.readonly}"
@@ -139,10 +139,10 @@ export class FormAbstractGroup extends LitElement {
           >
             ${this.renderFieldLabel(label, help_text)}
           </text-field>
-        `;
-            case FieldTypes.NUMBER_TYPE:
-            case FieldTypes.NUMBER_FLOAT_TYPE:
-            case FieldTypes.NUMBER_INTEGER_TYPE:
+        `;
+            case FieldTypes.NUMBER_TYPE:
+            case FieldTypes.NUMBER_FLOAT_TYPE:
+            case FieldTypes.NUMBER_INTEGER_TYPE:
                 return html `
           <number-field
             ?is-readonly="${this.readonly}"
@@ -155,9 +155,9 @@ export class FormAbstractGroup extends LitElement {
           >
             ${this.renderFieldLabel(label, help_text)}
           </number-field>
-        `;
-            case FieldTypes.BOOL_TYPE:
-            case FieldTypes.SCALE_TYPE:
+        `;
+            case FieldTypes.BOOL_TYPE:
+            case FieldTypes.SCALE_TYPE:
                 return html `
           <scale-field
             .options="${((_a = this.metadata.options[options_key || '']) === null || _a === void 0 ? void 0 : _a.values) || []}"
@@ -171,25 +171,25 @@ export class FormAbstractGroup extends LitElement {
           >
             ${this.renderFieldLabel(label, help_text)}
           </scale-field>
-        `;
-            default:
-                console.warn(`FormBuilderGroup: Unknown field type: ${input_type}`);
-                return html ``;
-        }
-    }
-    renderFieldLabel(label, helperText) {
+        `;
+            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>
-    `;
-    }
-    renderGroup(groupStructure) {
-        const isAbstract = groupStructure.styling.includes(StructureTypes.ABSTRACT);
-        const isCard = groupStructure.styling.includes(StructureTypes.CARD);
-        const isCollapsed = groupStructure.styling.includes(StructureTypes.COLLAPSED);
-        if (isAbstract) {
+    `;
+    }
+    renderGroup(groupStructure) {
+        const isAbstract = groupStructure.styling.includes(StructureTypes.ABSTRACT);
+        const isCard = groupStructure.styling.includes(StructureTypes.CARD);
+        const isCollapsed = groupStructure.styling.includes(StructureTypes.COLLAPSED);
+        if (isAbstract) {
             return html `
         <form-abstract-group
           .groupStructure="${groupStructure}"
@@ -202,9 +202,9 @@ export class FormAbstractGroup extends LitElement {
           @value-changed="${(event) => this.valueChanged(event, groupStructure.name)}"
           @error-changed="${(event) => this.errorChanged(event, groupStructure.name)}"
         ></form-abstract-group>
-      `;
-        }
-        else if (isCard && isCollapsed) {
+      `;
+        }
+        else if (isCard && isCollapsed) {
             return html `
         <form-collapsed-card
           .groupStructure="${groupStructure}"
@@ -217,9 +217,9 @@ export class FormAbstractGroup extends LitElement {
           @value-changed="${(event) => this.valueChanged(event, groupStructure.name)}"
           @error-changed="${(event) => this.errorChanged(event, groupStructure.name)}"
         ></form-collapsed-card>
-      `;
-        }
-        else if (isCard) {
+      `;
+        }
+        else if (isCard) {
             return html `
         <form-card
           .groupStructure="${groupStructure}"
@@ -232,47 +232,47 @@ export class FormAbstractGroup extends LitElement {
           @value-changed="${(event) => this.valueChanged(event, groupStructure.name)}"
           @error-changed="${(event) => this.errorChanged(event, groupStructure.name)}"
         ></form-card>
-      `;
-        }
-        else {
-            console.warn(`FormBuilderGroup: Unknown group type: ${groupStructure.styling}`);
-            return html ``;
-        }
-    }
-    valueChanged(event, name) {
-        if (!this.value) {
-            this.value = {};
-        }
-        this.value[name] = event.detail.value;
-        event.stopPropagation();
-        fireEvent(this, 'value-changed', { value: this.value });
-        this.requestUpdate();
-    }
-    errorChanged(event, name) {
-        const errorMessage = event.detail.error;
-        if (errorMessage) {
-            this._errors[name] = errorMessage;
-        }
-        else {
-            delete this._errors[name];
-        }
-        event.stopPropagation();
-        const errors = Object.keys(this._errors).length ? this._errors : null;
-        fireEvent(this, 'error-changed', { error: errors });
-    }
-    getErrorMessage(fieldName) {
-        const error = this._errors && this._errors[fieldName];
-        return Array.isArray(error) ? error[0] : error || null;
-    }
-    static get styles() {
-        // language=CSS
-        return [
-            SharedStyles,
-            pageLayoutStyles,
-            elevationStyles,
-            CardStyles,
-            FlexLayoutClasses,
-            FormBuilderCardStyles,
+      `;
+        }
+        else {
+            console.warn(`FormBuilderGroup: Unknown group type: ${groupStructure.styling}`);
+            return html ``;
+        }
+    }
+    valueChanged(event, name) {
+        if (!this.value) {
+            this.value = {};
+        }
+        this.value[name] = event.detail.value;
+        event.stopPropagation();
+        fireEvent(this, 'value-changed', { value: this.value });
+        this.requestUpdate();
+    }
+    errorChanged(event, name) {
+        const errorMessage = event.detail.error;
+        if (errorMessage) {
+            this._errors[name] = errorMessage;
+        }
+        else {
+            delete this._errors[name];
+        }
+        event.stopPropagation();
+        const errors = Object.keys(this._errors).length ? this._errors : null;
+        fireEvent(this, 'error-changed', { error: errors });
+    }
+    getErrorMessage(fieldName) {
+        const error = this._errors && this._errors[fieldName];
+        return Array.isArray(error) ? error[0] : error || null;
+    }
+    static get styles() {
+        // language=CSS
+        return [
+            SharedStyles,
+            pageLayoutStyles,
+            elevationStyles,
+            CardStyles,
+            FlexLayoutClasses,
+            FormBuilderCardStyles,
             css `
         .save-button {
           margin-top: 8px;
@@ -302,25 +302,25 @@ export class FormAbstractGroup extends LitElement {
         .attachments-warning {
           color: red;
         }
-      `
-        ];
-    }
-}
-__decorate([
-    property({ type: Object })
-], FormAbstractGroup.prototype, "groupStructure", void 0);
-__decorate([
-    property({ type: Object })
-], FormAbstractGroup.prototype, "metadata", void 0);
-__decorate([
-    property({ type: String })
-], FormAbstractGroup.prototype, "parentGroupName", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'readonly', reflect: true })
-], FormAbstractGroup.prototype, "readonly", void 0);
-__decorate([
-    property()
-], FormAbstractGroup.prototype, "_errors", void 0);
-__decorate([
-    property()
-], FormAbstractGroup.prototype, "_value", void 0);
+      `
+        ];
+    }
+}
+__decorate([
+    property({ type: Object })
+], FormAbstractGroup.prototype, "groupStructure", void 0);
+__decorate([
+    property({ type: Object })
+], FormAbstractGroup.prototype, "metadata", void 0);
+__decorate([
+    property({ type: String })
+], FormAbstractGroup.prototype, "parentGroupName", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'readonly', reflect: true })
+], FormAbstractGroup.prototype, "readonly", void 0);
+__decorate([
+    property()
+], FormAbstractGroup.prototype, "_errors", void 0);
+__decorate([
+    property()
+], FormAbstractGroup.prototype, "_value", void 0);

package/dist/form-groups/form-card.d.ts

@@ -1,31 +1,31 @@
-import { TemplateResult } from 'lit-element';
-import { IFormBuilderCard } from '../lib/types/form-builder.interfaces';
-import { FormAbstractGroup } from './form-abstract-group';
-import { GenericObject } from '../lib/types/global.types';
-import '@polymer/iron-collapse';
-export declare class FormCard extends FormAbstractGroup implements IFormBuilderCard {
-    protected _value: GenericObject;
-    /**
-     * Show save button only if value was changed by user
-     */
-    private showSaveButton;
-    /**
-     * Overrides value property. Saves originalValue.
-     * We need to update inner _value only if it wasn't change
-     * @param value
-     */
-    set value(value: GenericObject);
-    get value(): GenericObject;
-    protected originalValue: GenericObject;
-    /**
-     * Extends parent render method,
-     * adds card-container html wrapper and dynamic save button
-     */
-    render(): TemplateResult;
-    /**
-     * Updates value property, stops event propagation.
-     * We need to fire value-changed event only after save button click
-     */
-    valueChanged(event: CustomEvent, name: string): void;
-    saveChanges(): void;
-}
+import { TemplateResult } from 'lit-element';
+import { IFormBuilderCard } from '../lib/types/form-builder.interfaces';
+import { FormAbstractGroup } from './form-abstract-group';
+import { GenericObject } from '../lib/types/global.types';
+import '@polymer/iron-collapse';
+export declare class FormCard extends FormAbstractGroup implements IFormBuilderCard {
+    protected _value: GenericObject;
+    /**
+     * Show save button only if value was changed by user
+     */
+    private showSaveButton;
+    /**
+     * Overrides value property. Saves originalValue.
+     * We need to update inner _value only if it wasn't change
+     * @param value
+     */
+    set value(value: GenericObject);
+    get value(): GenericObject;
+    protected originalValue: GenericObject;
+    /**
+     * Extends parent render method,
+     * adds card-container html wrapper and dynamic save button
+     */
+    render(): TemplateResult;
+    /**
+     * Updates value property, stops event propagation.
+     * We need to fire value-changed event only after save button click
+     */
+    valueChanged(event: CustomEvent, name: string): void;
+    saveChanges(): void;
+}