@unicef-polymer/etools-form-builder 3.0.0-rc.9 → 3.1.0

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

@@ -3,24 +3,23 @@ import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { BaseField } from './base-field';
 import '@unicef-polymer/etools-unicef/src/etools-input/etools-textarea';
-import { InputStyles } from '../../lib/styles/input-styles';
 let TextField = class TextField extends BaseField {
     controlTemplate() {
-        return html `
-      ${InputStyles}
-      <etools-textarea
-        id="otherInfo"
-        class="no-padding-left"
-        no-label-float
-        placeholder="${this.isReadonly ? '—' : this.placeholder}"
-        .value="${this.value}"
-        @value-changed="${({ detail }) => this.valueChanged(detail.value)}"
-        @focus="${() => (this.touched = true)}"
-        ?readonly="${this.isReadonly}"
-        ?invalid="${this.errorMessage}"
-        error-message="${this.errorMessage}"
-      >
-      </etools-textarea>
+        return html `
+      <etools-textarea
+        id="otherInfo"
+        class="no-padding-left"
+        no-label-float
+        placeholder="${this.isReadonly ? '—' : this.placeholder}"
+        .value="${this.value}"
+        @value-changed="${({ detail }) => this.valueChanged(detail.value)}"
+        @focus="${() => (this.touched = true)}"
+        ?readonly="${this.isReadonly}"
+        ?invalid="${this.errorMessage}"
+        name="${this.name}"
+        error-message="${this.errorMessage}"
+      >
+      </etools-textarea>
     `;
     }
     customValidation() {
@@ -30,15 +29,15 @@ let TextField = class TextField extends BaseField {
         // language=CSS
         return [
             ...BaseField.styles,
-            css `
-        :host(.wide) etools-textarea {
-          padding-left: 0;
-        }
-        @media (max-width: 380px) {
-          .no-padding-left {
-            padding-left: 0;
-          }
-        }
+            css `
+        :host(.wide) etools-textarea {
+          padding-left: 0;
+        }
+        @media (max-width: 380px) {
+          .no-padding-left {
+            padding-left: 0;
+          }
+        }
       `
         ];
     }

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

@@ -21,7 +21,8 @@ export declare enum StructureTypes {
     CARD = "card",
     ABSTRACT = "abstract",
     COLLAPSED = "collapse",
-    ATTACHMENTS_BUTTON = "floating_attachments"
+    ATTACHMENTS_BUTTON = "floating_attachments",
+    MANDATORY_WARNING = "mandatory_warning"
 }
 export declare class FormAbstractGroup extends LitElement implements IFormBuilderAbstractGroup {
     groupStructure: BlueprintGroup;

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

@@ -34,6 +34,7 @@ export var StructureTypes;
     StructureTypes["ABSTRACT"] = "abstract";
     StructureTypes["COLLAPSED"] = "collapse";
     StructureTypes["ATTACHMENTS_BUTTON"] = "floating_attachments";
+    StructureTypes["MANDATORY_WARNING"] = "mandatory_warning";
 })(StructureTypes || (StructureTypes = {}));
 let FormAbstractGroup = class FormAbstractGroup extends LitElement {
     /**
@@ -79,7 +80,7 @@ let FormAbstractGroup = class FormAbstractGroup extends LitElement {
         this._value = {};
         this.computedPath = [];
         if (!this.language) {
-            this.language = window.localStorage.defaultLanguage || 'en';
+            this.language = window.EtoolsLanguage || 'en';
         }
         this.handleLanguageChange = this.handleLanguageChange.bind(this);
     }
@@ -110,8 +111,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) {
@@ -130,18 +131,19 @@ let FormAbstractGroup = class FormAbstractGroup extends LitElement {
     }
     renderField(blueprintField) {
         var _a;
-        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>
+        return html `
+      <field-renderer
+        .field="${blueprintField}"
+        .language="${this.language}"
+        ?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) {
@@ -152,18 +154,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))}
-      <etools-button
-        variant="primary"
-        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}
-      </etools-button>
+            : groupStructure.title}
+      </etools-button>
     `;
     }
     getGroupTemplate(groupStructure, index) {
@@ -179,52 +181,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.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>
+            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.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>
+            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.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>
+            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 {
@@ -305,68 +307,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;
-        }
-        etools-icon-button[name='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: var(--etools-font-size-18, 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.js

@@ -47,32 +47,38 @@ let FormCard = class FormCard extends FormAbstractGroup {
         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 `
+      <style>
+        .card-buttons {
+          padding: 12px 24px;
+          padding-top: 0;
+        }
+      </style>
+      <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}
-            <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>
+            : 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.js

@@ -73,31 +73,31 @@ let FormCollapsedCard = class FormCollapsedCard extends FormAbstractGroup {
      * and adds etools-card as container wrapper
      */
     render() {
-        return html `
-      <section class="elevation page-content card-container" elevation="1">
-        <etools-fb-card
-          card-title="${this.retrieveTitle(this.parentGroupName) + this.groupStructure.title}"
-          is-collapsible
-          ?is-editable="${!this.readonly}"
-          ?edit="${this.isEditMode}"
-          .collapsed="${this.collapsed}"
-          @start-edit="${() => this.startEdit()}"
-          @save="${() => this.saveChanges()}"
-          @cancel="${() => this.cancelEdit()}"
-        >
-          <!-- Open Attachments popup button -->
-          <div slot="actions" class="layout horizontal center">${this.getAdditionalButtons()}</div>
-          <div slot="postfix" class="layout horizontal center" ?hidden="${!this.groupStructure.repeatable}">
-            <etools-icon-button
-              class="attachments-warning"
-              name="close"
-              @click="${() => this.confirmRemove(this.groupStructure.title || getTranslation(this.language, 'THIS_GROUP'))}"
-            >
-            </etools-icon-button>
-          </div>
-          <div slot="content">${this.renderGroupChildren()}</div>
-        </etools-fb-card>
-      </section>
+        return html `
+      <section class="elevation page-content card-container" elevation="1">
+        <etools-fb-card
+          card-title="${this.retrieveTitle(this.parentGroupName) + this.groupStructure.title}"
+          is-collapsible
+          ?is-editable="${!this.readonly}"
+          ?edit="${this.isEditMode}"
+          .collapsed="${this.collapsed}"
+          @start-edit="${() => this.startEdit()}"
+          @save="${() => this.saveChanges()}"
+          @cancel="${() => this.cancelEdit()}"
+        >
+          <!-- Open Attachments popup button -->
+          <div slot="actions" class="layout horizontal center">${this.getAdditionalButtons()}</div>
+          <div slot="postfix" class="layout horizontal center" ?hidden="${!this.groupStructure.repeatable}">
+            <etools-icon-button
+              class="attachments-warning"
+              name="close"
+              @click="${() => this.confirmRemove(this.groupStructure.title || getTranslation(this.language, 'THIS_GROUP'))}"
+            >
+            </etools-icon-button>
+          </div>
+          <div slot="content">${this.renderGroupChildren()}</div>
+        </etools-fb-card>
+      </section>
     `;
     }
     /**
@@ -119,15 +119,15 @@ let FormCollapsedCard = class FormCollapsedCard extends FormAbstractGroup {
             !this.groupStructure.children.some(({ styling }) => styling.includes(StructureTypes.ATTACHMENTS_BUTTON));
         return hideAttachmentsButton
             ? html ``
-            : html `
-          <etools-icon id="attachments-warning" name="warning" ?hidden="${!this._errors.attachments}"></etools-icon>
-          <etools-button id="primary" variant="text" class="primary" @click="${this.openAttachmentsPopup}">
-            <etools-icon
-              slot="prefix"
-              name="${((_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c.attachments) === null || _d === void 0 ? void 0 : _d.length) ? 'file-download' : 'file-upload'}"
-            ></etools-icon>
-            ${this.getAttachmentsBtnText((_f = (_e = this.value) === null || _e === void 0 ? void 0 : _e.attachments) === null || _f === void 0 ? void 0 : _f.length)}
-          </etools-button>
+            : html `
+          <etools-icon id="attachments-warning" name="warning" ?hidden="${!this._errors.attachments}"></etools-icon>
+          <etools-button id="primary" variant="text" class="primary" @click="${this.openAttachmentsPopup}">
+            <etools-icon
+              slot="prefix"
+              name="${((_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c.attachments) === null || _d === void 0 ? void 0 : _d.length) ? 'file-download' : 'file-upload'}"
+            ></etools-icon>
+            ${this.getAttachmentsBtnText((_f = (_e = this.value) === null || _e === void 0 ? void 0 : _e.attachments) === null || _f === void 0 ? void 0 : _f.length)}
+          </etools-button>
         `;
     }
     retrieveTitle(target) {

package/dist/lib/additional-components/confirmation-dialog.js

@@ -17,26 +17,26 @@ let ConfirmationDialog = class ConfirmationDialog extends LitElement {
         this.dialogTitle = '';
         this.hideConfirmBtn = false;
         if (!this.language) {
-            this.language = window.localStorage.defaultLanguage || 'en';
+            this.language = window.EtoolsLanguage || 'en';
         }
     }
     render() {
-        return html `
-      <etools-dialog
-        id="confirmation-dialog"
-        size="md"
-        no-padding
-        keep-dialog-open
-        ?hide-confirm-btn="${this.hideConfirmBtn}"
-        cancel-btn-text="${getTranslation(this.language, this.hideConfirmBtn ? 'OK' : 'CANCEL')}"
-        ?opened="${this.dialogOpened}"
-        theme="confirmation"
-        dialog-title="${this.dialogTitle}"
-        @close="${this.onClose}"
-        @confirm-btn-clicked="${() => this.confirm()}"
-      >
-        <div class="confirmation-message">${this.text}</div>
-      </etools-dialog>
+        return html `
+      <etools-dialog
+        id="confirmation-dialog"
+        size="md"
+        no-padding
+        keep-dialog-open
+        ?hide-confirm-btn="${this.hideConfirmBtn}"
+        cancel-btn-text="${getTranslation(this.language, this.hideConfirmBtn ? 'OK' : 'CANCEL')}"
+        ?opened="${this.dialogOpened}"
+        theme="confirmation"
+        dialog-title="${this.dialogTitle}"
+        @close="${this.onClose}"
+        @confirm-btn-clicked="${() => this.confirm()}"
+      >
+        <div class="confirmation-message">${this.text}</div>
+      </etools-dialog>
     `;
     }
     onClose() {
@@ -48,10 +48,10 @@ let ConfirmationDialog = class ConfirmationDialog extends LitElement {
     static get styles() {
         // language=CSS
         return [
-            css `
-        .confirmation-message {
-          padding-left: 24px;
-        }
+            css `
+        .confirmation-message {
+          padding-left: 24px;
+        }
       `
         ];
     }