@unicef-polymer/etools-form-builder 2.1.9 → 3.0.0-rc.10

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

@@ -1,14 +1,10 @@
-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, customElement } from 'lit-element';
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
 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 '@unicef-polymer/etools-unicef/src/etools-button/etools-button';
 import { SharedStyles } from '../lib/styles/shared-styles';
 import { pageLayoutStyles } from '../lib/styles/page-layout-styles';
 import { elevationStyles } from '../lib/styles/elevation-styles';
@@ -16,7 +12,7 @@ import { CardStyles } from '../lib/styles/card-styles';
 import { FlexLayoutClasses } from '../lib/styles/flex-layout-classes';
 import { fireEvent } from '../lib/utils/fire-custom-event';
 import { clone } from 'ramda';
-import { live } from 'lit-html/directives/live';
+import { live } from 'lit/directives/live.js';
 import { openDialog } from '../lib/utils/dialog';
 import { FormBuilderCardStyles } from '../lib/styles/form-builder-card.styles';
 import { getTranslation } from '../lib/utils/translate';
@@ -40,19 +36,6 @@ export var StructureTypes;
     StructureTypes["ATTACHMENTS_BUTTON"] = "floating_attachments";
 })(StructureTypes || (StructureTypes = {}));
 let FormAbstractGroup = class FormAbstractGroup extends LitElement {
-    constructor() {
-        super();
-        this.parentGroupName = '';
-        this.collapsed = false;
-        this.readonly = false;
-        this._errors = {};
-        this._value = {};
-        this.computedPath = [];
-        if (!this.language) {
-            this.language = window.localStorage.defaultLanguage || 'en';
-        }
-        this.handleLanguageChange = this.handleLanguageChange.bind(this);
-    }
     /**
      * Make value property immutable
      * @param value
@@ -68,6 +51,9 @@ let FormAbstractGroup = class FormAbstractGroup extends LitElement {
     get value() {
         return this._value;
     }
+    isReadonly() {
+        return this.readonly;
+    }
     /**
      * Setter for handling error.
      * Normally we wouldn't have errors as string or string[] for FormGroups.
@@ -84,6 +70,19 @@ let FormAbstractGroup = class FormAbstractGroup extends LitElement {
             this._errors = errors;
         }
     }
+    constructor() {
+        super();
+        this.parentGroupName = '';
+        this.collapsed = false;
+        this.readonly = false;
+        this._errors = {};
+        this._value = {};
+        this.computedPath = [];
+        if (!this.language) {
+            this.language = window.localStorage.defaultLanguage || 'en';
+        }
+        this.handleLanguageChange = this.handleLanguageChange.bind(this);
+    }
     connectedCallback() {
         super.connectedCallback();
         document.addEventListener('language-changed', this.handleLanguageChange.bind(this));
@@ -111,8 +110,8 @@ let FormAbstractGroup = class FormAbstractGroup extends LitElement {
         if (!this.groupStructure || !this.metadata) {
             return html ``;
         }
-        return html `
-      ${this.groupStructure.children.map((child) => this.renderChild(child))}
+        return html `
+      ${this.groupStructure.children.map((child) => this.renderChild(child))}
     `;
     }
     renderChild(child) {
@@ -131,18 +130,18 @@ let FormAbstractGroup = class FormAbstractGroup extends LitElement {
     }
     renderField(blueprintField) {
         var _a;
-        return html `
-      <field-renderer
-        .field="${blueprintField}"
-        ?readonly="${live(this.readonly)}"
-        .value="${this.value && this.value[blueprintField.name]}"
-        .validations="${blueprintField.validations.map((validation) => this.metadata.validations[validation])}"
-        .errorMessage="${this.getErrorMessage(blueprintField.name)}"
-        .options="${((_a = this.metadata.options[blueprintField.options_key || '']) === null || _a === void 0 ? void 0 : _a.values) || []}"
-        .computedPath="${this.computedPath.concat(this.groupStructure.name === 'root' ? [blueprintField.name] : [this.groupStructure.name, blueprintField.name])}"
-        @value-changed="${(event) => this.valueChanged(event, blueprintField.name)}"
-        @error-changed="${(event) => this.errorChanged(event, blueprintField.name)}"
-      ></field-renderer>
+        return html `
+      <field-renderer
+        .field="${blueprintField}"
+        ?readonly="${live(this.isReadonly())}"
+        .value="${this.value && this.value[blueprintField.name]}"
+        .validations="${blueprintField.validations.map((validation) => this.metadata.validations[validation])}"
+        .errorMessage="${this.getErrorMessage(blueprintField.name)}"
+        .options="${((_a = this.metadata.options[blueprintField.options_key || '']) === null || _a === void 0 ? void 0 : _a.values) || []}"
+        .computedPath="${this.computedPath.concat(this.groupStructure.name === 'root' ? [blueprintField.name] : [this.groupStructure.name, blueprintField.name])}"
+        @value-changed="${(event) => this.valueChanged(event, blueprintField.name)}"
+        @error-changed="${(event) => this.errorChanged(event, blueprintField.name)}"
+      ></field-renderer>
     `;
     }
     renderInformation(information) {
@@ -153,14 +152,18 @@ let FormAbstractGroup = class FormAbstractGroup extends LitElement {
             return this.getGroupTemplate(groupStructure);
         }
         const value = (this.value && this.value[groupStructure.name]) || [{}];
-        return html `
-      ${value.map((_, index) => this.getGroupTemplate(groupStructure, index))}
-      <paper-button class="add-group save-button" @click="${() => this.addGroup(groupStructure.name)}">
-        ${getTranslation(this.language, 'ADD')}
+        return html `
+      ${value.map((_, index) => this.getGroupTemplate(groupStructure, index))}
+      <etools-button
+        variant="primary"
+        class="add-group save-button"
+        @click="${() => this.addGroup(groupStructure.name)}"
+      >
+        ${getTranslation(this.language, 'ADD')}
         ${!groupStructure.title || groupStructure.title.length > 15
             ? getTranslation(this.language, 'GROUP')
-            : groupStructure.title}
-      </paper-button>
+            : groupStructure.title}
+      </etools-button>
     `;
     }
     getGroupTemplate(groupStructure, index) {
@@ -176,52 +179,52 @@ let FormAbstractGroup = class FormAbstractGroup extends LitElement {
             errors = errors && errors[index];
         }
         if (isAbstract) {
-            return html `
-        <form-abstract-group
-          .groupStructure="${groupStructure}"
-          .value="${value}"
-          .metadata="${this.metadata}"
-          .parentGroupName="${this.groupStructure.name}"
-          .collapsed="${this.collapsed}"
-          .computedPath="${this.computedPath.concat(this.groupStructure.name === 'root' ? [] : [this.groupStructure.name])}"
-          .readonly="${this.readonly}"
-          .errors="${errors || null}"
-          @value-changed="${(event) => this.valueChanged(event, groupStructure.name, index)}"
-          @error-changed="${(event) => this.errorChanged(event, groupStructure.name, index)}"
-        ></form-abstract-group>
+            return html `
+        <form-abstract-group
+          .groupStructure="${groupStructure}"
+          .value="${value}"
+          .metadata="${this.metadata}"
+          .parentGroupName="${this.groupStructure.name}"
+          .collapsed="${this.collapsed}"
+          .computedPath="${this.computedPath.concat(this.groupStructure.name === 'root' ? [] : [this.groupStructure.name])}"
+          .readonly="${this.isReadonly()}"
+          .errors="${errors || null}"
+          @value-changed="${(event) => this.valueChanged(event, groupStructure.name, index)}"
+          @error-changed="${(event) => this.errorChanged(event, groupStructure.name, index)}"
+        ></form-abstract-group>
       `;
         }
         else if (isCard && isCollapsed) {
-            return html `
-        <form-collapsed-card
-          .groupStructure="${groupStructure}"
-          .value="${value}"
-          .metadata="${this.metadata}"
-          .parentGroupName="${this.groupStructure.name}"
-          .collapsed="${this.collapsed}"
-          .computedPath="${this.computedPath.concat(this.groupStructure.name === 'root' ? [] : [this.groupStructure.name])}"
-          .readonly="${this.readonly}"
-          .errors="${errors || null}"
-          @remove-group="${() => this.removeGroup(groupStructure, index)}"
-          @value-changed="${(event) => this.valueChanged(event, groupStructure.name, index)}"
-          @error-changed="${(event) => this.errorChanged(event, groupStructure.name, index)}"
-        ></form-collapsed-card>
+            return html `
+        <form-collapsed-card
+          .groupStructure="${groupStructure}"
+          .value="${value}"
+          .metadata="${this.metadata}"
+          .parentGroupName="${this.groupStructure.name}"
+          .collapsed="${this.collapsed}"
+          .computedPath="${this.computedPath.concat(this.groupStructure.name === 'root' ? [] : [this.groupStructure.name])}"
+          .readonly="${this.isReadonly()}"
+          .errors="${errors || null}"
+          @remove-group="${() => this.removeGroup(groupStructure, index)}"
+          @value-changed="${(event) => this.valueChanged(event, groupStructure.name, index)}"
+          @error-changed="${(event) => this.errorChanged(event, groupStructure.name, index)}"
+        ></form-collapsed-card>
       `;
         }
         else if (isCard) {
-            return html `
-        <form-card
-          .groupStructure="${groupStructure}"
-          .value="${value}"
-          .metadata="${this.metadata}"
-          .parentGroupName="${this.groupStructure.name}"
-          .computedPath="${this.computedPath.concat(this.groupStructure.name === 'root' ? [] : [this.groupStructure.name])}"
-          .readonly="${this.readonly}"
-          .errors="${errors || null}"
-          @remove-group="${() => this.removeGroup(groupStructure, index)}"
-          @value-changed="${(event) => this.valueChanged(event, groupStructure.name, index)}"
-          @error-changed="${(event) => this.errorChanged(event, groupStructure.name, index)}"
-        ></form-card>
+            return html `
+        <form-card
+          .groupStructure="${groupStructure}"
+          .value="${value}"
+          .metadata="${this.metadata}"
+          .parentGroupName="${this.groupStructure.name}"
+          .computedPath="${this.computedPath.concat(this.groupStructure.name === 'root' ? [] : [this.groupStructure.name])}"
+          .readonly="${this.isReadonly()}"
+          .errors="${errors || null}"
+          @remove-group="${() => this.removeGroup(groupStructure, index)}"
+          @value-changed="${(event) => this.valueChanged(event, groupStructure.name, index)}"
+          @error-changed="${(event) => this.errorChanged(event, groupStructure.name, index)}"
+        ></form-card>
       `;
         }
         else {
@@ -302,68 +305,68 @@ let FormAbstractGroup = class FormAbstractGroup extends LitElement {
             CardStyles,
             FlexLayoutClasses,
             FormBuilderCardStyles,
-            css `
-        :host {
-          display: flex;
-          flex-direction: column;
-        }
-        .add-group {
-          align-self: flex-end;
-          margin-right: 23px;
-          margin-top: 20px;
-          box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
-            0 2px 4px -1px rgba(0, 0, 0, 0.4);
-        }
-        .card-header {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-        }
-        .card-header .remove-group {
-          display: flex;
-          align-items: center;
-          justify-content: flex-end;
-          padding: 0 10px 8px;
-          cursor: pointer;
-          width: min-content;
-          white-space: nowrap;
-        }
-        .card-header .title {
-          padding: 0 24px 8px;
-          font-size: 18px;
-          font-weight: bold;
-        }
-        .save-button {
-          margin-top: 8px;
-          color: var(--primary-background-color);
-          background-color: var(--primary-color);
-        }
-        .information-source {
-          padding: 0.5% 2% 0.5% 1%;
-        }
-
-        .additional-field {
-          padding-top: 15px;
-          padding-bottom: 20px;
-          background-color: var(--secondary-background-color);
-        }
-
-        .actions-container {
-          padding: 0 25px 5px 45px;
-          box-sizing: border-box;
-        }
-
-        .card-container.form-card {
-          padding: 12px 0 15px;
-        }
-
-        .attachments-warning {
-          color: red;
-        }
-        paper-icon-button[icon='close'] {
-          cursor: pointer;
-          color: var(--primary-text-color);
-        }
+            css `
+        :host {
+          display: flex;
+          flex-direction: column;
+        }
+        .add-group {
+          align-self: flex-end;
+          margin-right: 23px;
+          margin-top: 20px;
+          box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
+            0 2px 4px -1px rgba(0, 0, 0, 0.4);
+        }
+        .card-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+        .card-header .remove-group {
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          padding: 0 10px 8px;
+          cursor: pointer;
+          width: min-content;
+          white-space: nowrap;
+        }
+        .card-header .title {
+          padding: 0 24px 8px;
+          font-size: 18px;
+          font-weight: bold;
+        }
+        .save-button {
+          margin-top: 8px;
+          color: var(--primary-background-color);
+          background-color: var(--primary-color);
+        }
+        .information-source {
+          padding: 0.5% 2% 0.5% 1%;
+        }
+
+        .additional-field {
+          padding-top: 15px;
+          padding-bottom: 20px;
+          background-color: var(--secondary-background-color);
+        }
+
+        .actions-container {
+          padding: 0 25px 5px 45px;
+          box-sizing: border-box;
+        }
+
+        .card-container.form-card {
+          padding: 12px 0 15px;
+        }
+
+        .attachments-warning {
+          color: red;
+        }
+        etools-icon-button[name='close'] {
+          cursor: pointer;
+          color: var(--primary-text-color);
+        }
       `
         ];
     }

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

@@ -1,8 +1,10 @@
-import { TemplateResult } from 'lit-element';
+import { CSSResultArray, TemplateResult } from 'lit';
 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';
+import '@unicef-polymer/etools-unicef/src/etools-collapse/etools-collapse';
+import '@unicef-polymer/etools-unicef/src/etools-icons/etools-icon';
+import '@unicef-polymer/etools-unicef/src/etools-icon-button/etools-icon-button';
 export declare class FormCard extends FormAbstractGroup implements IFormBuilderCard {
     protected _value: GenericObject;
     /**
@@ -21,6 +23,7 @@ export declare class FormCard extends FormAbstractGroup implements IFormBuilderC
      * Extends parent render method,
      * adds card-container html wrapper and dynamic save button
      */
+    static get styles(): CSSResultArray;
     render(): TemplateResult;
     /**
      * Updates value property, stops event propagation.

package/dist/form-groups/form-card.js

@@ -1,16 +1,20 @@
-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, customElement } from 'lit-element';
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
 import { fireEvent } from '../lib/utils/fire-custom-event';
 import { clone, equals } from 'ramda';
 import { FormAbstractGroup } from './form-abstract-group';
-import '@polymer/iron-collapse';
 import { openDialog } from '../lib/utils/dialog';
 import { getTranslation } from '../lib/utils/translate';
+import '@unicef-polymer/etools-unicef/src/etools-collapse/etools-collapse';
+import '@unicef-polymer/etools-unicef/src/etools-icons/etools-icon';
+import '@unicef-polymer/etools-unicef/src/etools-icon-button/etools-icon-button';
+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 '../lib/styles/form-builder-card.styles';
 let FormCard = class FormCard extends FormAbstractGroup {
     constructor() {
         super(...arguments);
@@ -39,33 +43,36 @@ let FormCard = class FormCard extends FormAbstractGroup {
      * Extends parent render method,
      * adds card-container html wrapper and dynamic save button
      */
+    static get styles() {
+        return [SharedStyles, pageLayoutStyles, elevationStyles, CardStyles, FlexLayoutClasses, FormBuilderCardStyles];
+    }
     render() {
-        return html `
-      <section class="elevation page-content card-container form-card" elevation="1">
-        <div class="card-header">
-          <div class="title">${this.groupStructure.title}</div>
-          <div
-            class="remove-group"
-            ?hidden="${!this.groupStructure.repeatable}"
-            @click="${() => this.confirmRemove(this.groupStructure.title || getTranslation(this.language, 'THIS_GROUP'))}"
-          >
-            Remove
+        return html `
+      <section class="elevation page-content card-container form-card" elevation="1">
+        <div class="card-header">
+          <div class="title">${this.groupStructure.title}</div>
+          <div
+            class="remove-group"
+            ?hidden="${!this.groupStructure.repeatable}"
+            @click="${() => this.confirmRemove(this.groupStructure.title || getTranslation(this.language, 'THIS_GROUP'))}"
+          >
+            Remove
             ${!this.groupStructure.title || this.groupStructure.title.length > 15
             ? getTranslation(this.language, 'GROUP')
-            : this.groupStructure.title}
-            <paper-icon-button icon="delete" class="attachments-warning"></paper-icon-button>
-          </div>
-        </div>
-        ${super.render()}
-
-        <iron-collapse ?opened="${this.showSaveButton}">
-          <div class="layout horizontal end-justified card-buttons actions-container">
-            <paper-button class="save-button" @tap="${() => this.saveChanges()}"
-              >${getTranslation(this.language, 'SAVE')}</paper-button
-            >
-          </div>
-        </iron-collapse>
-      </section>
+            : this.groupStructure.title}
+            <etools-icon-button class="attachments-warning" name="delete"></etools-icon-button>
+          </div>
+        </div>
+        ${super.render()}
+
+        <etools-collapse ?opened="${this.showSaveButton}">
+          <div class="layout horizontal end-justified card-buttons actions-container">
+            <etools-button variant="primary" @click="${this.saveChanges}">
+              ${getTranslation(this.language, 'SAVE')}
+            </etools-button>
+          </div>
+        </etools-collapse>
+      </section>
     `;
     }
     /**

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

@@ -1,9 +1,10 @@
-import { TemplateResult } from 'lit-element';
+import { TemplateResult } from 'lit';
 import { IFormBuilderCard, IFormBuilderCollapsedCard } from '../lib/types/form-builder.interfaces';
 import { FormAbstractGroup } from './form-abstract-group';
 import '../lib/additional-components/etools-fb-card';
 import { GenericObject } from '../lib/types/global.types';
 import '../lib/additional-components/confirmation-dialog';
+import '@unicef-polymer/etools-unicef/src/etools-icon-button/etools-icon-button';
 export declare class FormCollapsedCard extends FormAbstractGroup implements IFormBuilderCollapsedCard, IFormBuilderCard {
     collapsed: boolean;
     /**
@@ -11,10 +12,8 @@ export declare class FormCollapsedCard extends FormAbstractGroup implements IFor
      * In collapsed card it must consider isEditMode property,
      * components inside card are readonly if isEditMode is off or if card is readonly
      */
-    set readonly(state: boolean);
-    get readonly(): boolean;
     protected isEditMode: boolean;
-    protected _readonly: boolean;
+    readonly: boolean;
     /**
      * Overrides errors setter
      * In collapsed card it must consider isEditMode property,
@@ -31,6 +30,7 @@ export declare class FormCollapsedCard extends FormAbstractGroup implements IFor
     get value(): GenericObject;
     protected _value: GenericObject;
     protected originalValue: GenericObject;
+    isReadonly(): boolean;
     /**
      * Extends parent render method for handling additional types (StructureTypes.ATTACHMENTS_BUTTON in our case)
      * and adds etools-card as container wrapper