@unicef-polymer/etools-form-builder 2.1.1 → 2.1.2

package/dist/assets/translations.d.ts

@@ -0,0 +1,6 @@
+declare const translations: {
+    [lang: string]: {
+        [key: string]: string;
+    };
+};
+export default translations;

package/dist/assets/translations.js

@@ -0,0 +1,67 @@
+const translations = {
+    en: {
+        SAVE: 'Save',
+        DOWNLOAD: 'Download',
+        CHANGE: 'Change',
+        DELETE: 'Delete',
+        CANCEL: 'Cancel',
+        OK: 'Ok',
+        ADD: 'Add',
+        UPLOAD_ATTACHMENTS_FAILED: 'Can not upload attachments. Please try again later',
+        REQUIRED_FIELD: 'This field is required',
+        MUST_BE_INTEGER: 'Must be an integer',
+        MUST_BE_NUMBER: 'Must be a number',
+        CLEAR: 'Clear',
+        GROUP_REQUIRED: 'Group is required. At least one group must exist',
+        GROUP: 'group',
+        THIS_GROUP: 'this group',
+        CHECK_FIELDS_TRY_AGAIN: 'Please check all fields and try again',
+        CONFIRM_DELETE: 'Are you sure you want to delete',
+        UPLOAD_FILES: 'Upload Files',
+        FILE: 'File',
+        FILES: 'Files',
+        ATTACHMENTS_FOR: 'Attachments for',
+        PARTNER: 'Partner',
+        CP_OUTPUT: 'CP Output',
+        PD_SSFA: 'PD/SSFA',
+        TEXT_MUST_BE_LESS_CHARS: 'Text must be less than {0} character',
+        DOES_NOT_MATCH_PATTERN: 'Does not match allowed pattern',
+        NUMBER_MUST_BE_GREATER_THAN: 'Number must be greater than {0}',
+        NUMBER_MUST_BE_LOWER_THAN: 'Number must be lower than {0}',
+        DOCUMENT_TYPE: 'Document type',
+        SELECT_DOCUMENT_TYPE: 'Select Document Type'
+    },
+    fr: {
+        SAVE: 'Sauvegarder',
+        DOWNLOAD: 'Télécharger',
+        CHANGE: 'Changer',
+        DELETE: 'Effacer',
+        CANCEL: 'Annuler',
+        OK: "D'accord",
+        ADD: 'Ajouter',
+        UPLOAD_ATTACHMENTS_FAILED: 'Impossible de télécharger les pièces jointes. Veuillez réessayer plus tard',
+        REQUIRED_FIELD: 'Ce champ est requis',
+        MUST_BE_INTEGER: 'Doit être un entier',
+        MUST_BE_NUMBER: 'Doit être un nombre',
+        CLEAR: 'Dégager',
+        GROUP_REQUIRED: 'Le groupe est requis. Au moins un groupe doit exister',
+        GROUP: 'groupe',
+        THIS_GROUP: 'ce groupe',
+        CHECK_FIELDS_TRY_AGAIN: 'Veuillez vérifier tous les champs et réessayer',
+        CONFIRM_DELETE: 'Etes-vous sûr que vous voulez supprimer',
+        UPLOAD_FILES: 'Télécharger des fichiers',
+        FILE: 'Dossier',
+        FILES: 'Des dossiers',
+        ATTACHMENTS_FOR: 'Pièces jointes pour',
+        PARTNER: 'Partenaire',
+        CP_OUTPUT: 'Sortie CP',
+        PD_SSFA: 'PD/SSFA',
+        TEXT_MUST_BE_LESS_CHARS: 'Le texte doit comporter moins de {0} caractères',
+        DOES_NOT_MATCH_PATTERN: 'Ne correspond pas au modèle autorisé',
+        NUMBER_MUST_BE_GREATER_THAN: 'Le nombre doit être supérieur à {0}',
+        NUMBER_MUST_BE_LOWER_THAN: 'Le nombre doit être inférieur à {0}',
+        DOCUMENT_TYPE: 'Type de document',
+        SELECT_DOCUMENT_TYPE: 'Sélectionnez le type de document'
+    }
+};
+export default translations;

package/dist/form-attachments-popup/form-attachments-popup.d.ts

@@ -51,6 +51,7 @@ export declare class FormAttachmentsPopup extends LitElement {
     saveBtnClicked: boolean;
     attachments: StoredAttachment[];
     metadata: BlueprintMetadata;
+    language: string;
     link: HTMLLinkElement;
     readonly: boolean;
     popupTitle: string;

package/dist/form-attachments-popup/form-attachments-popup.js

@@ -17,6 +17,7 @@ import { SharedStyles } from '../lib/styles/shared-styles';
 import { AttachmentsStyles } from '../lib/styles/attachments.styles';
 import { AttachmentsHelper } from './form-attachments-popup.helper';
 import { deleteFileFromDexie } from '@unicef-polymer/etools-upload/offline/dexie-operations';
+import { getTranslation } from '../lib/utils/translate';
 let FormAttachmentsPopup = class FormAttachmentsPopup extends LitElement {
     constructor() {
         super();
@@ -36,6 +37,9 @@ let FormAttachmentsPopup = class FormAttachmentsPopup extends LitElement {
         if (!AttachmentsHelper.isInitialized) {
             throw new Error('Please initialize attachments popup before use');
         }
+        if (!this.language) {
+            this.language = window.localStorage.defaultLanguage || 'en';
+        }
     }
     set dialogData({ attachments, title, metadata, readonly, computedPath, errors }) {
         this.popupTitle = title;
@@ -148,7 +152,7 @@ let FormAttachmentsPopup = class FormAttachmentsPopup extends LitElement {
         this.attachments = [...this.attachments, ...parsedAttachments];
         if (error && error.length) {
             console.error(error);
-            fireEvent(this, 'toast', { text: 'Can not upload attachments. Please try again later' });
+            fireEvent(this, 'toast', { text: getTranslation(this.language, 'UPLOAD_ATTACHMENTS_FAILED') });
         }
     }
     deleteAttachment(index) {
@@ -239,6 +243,9 @@ __decorate([
 __decorate([
     property()
 ], FormAttachmentsPopup.prototype, "metadata", void 0);
+__decorate([
+    property()
+], FormAttachmentsPopup.prototype, "language", void 0);
 __decorate([
     query('#link')
 ], FormAttachmentsPopup.prototype, "link", void 0);

package/dist/form-attachments-popup/form-attachments-popup.tpl.js

@@ -1,6 +1,7 @@
 import { html } from 'lit-html';
 import { InputStyles } from '../lib/styles/input-styles';
 import { DialogStyles } from '../lib/styles/dialog.styles';
+import { getTranslation } from '../lib/utils/translate';
 export function template() {
     var _a;
     return html `
@@ -11,7 +12,8 @@ export function template() {
       no-padding
       keep-dialog-open
       ?opened="${this.dialogOpened}"
-      .okBtnText="Save"
+      .okBtnText="${getTranslation(this.language, 'SAVE')}"
+      .cancelBtnText="${getTranslation(this.language, 'CANCEL')}"
       .hideConfirmBtn="${this.readonly}"
       dialog-title="${this.popupTitle}"
       @close="${this.onClose}"
@@ -31,8 +33,8 @@ export function template() {
                 .selected="${attachment.file_type}"
                 @etools-selected-item-changed="${({ detail }) => { var _a; return this.changeFileType(attachment, (_a = detail.selectedItem) === null || _a === void 0 ? void 0 : _a.value, index); }}"
                 trigger-value-change-event
-                label="Document Type"
-                placeholder="Select Document Type"
+                label="${getTranslation(this.language, 'DOCUMENT_TYPE')}"
+                placeholder="${getTranslation(this.language, 'SELECT_DOCUMENT_TYPE')}"
                 required
                 ?readonly="${this.readonly}"
                 hide-search
@@ -58,7 +60,7 @@ export function template() {
                 @tap="${() => this.downloadFile(attachment)}"
               >
                 <iron-icon icon="cloud-download" class="dw-icon"></iron-icon>
-                Download
+                ${getTranslation(this.language, 'DOWNLOAD')}
               </paper-button>
 
               <!--        Delete Button          -->
@@ -67,7 +69,7 @@ export function template() {
                 ?hidden="${this.readonly}"
                 @tap="${() => this.deleteAttachment(index)}"
               >
-                Delete
+                ${getTranslation(this.language, 'DELETE')}
               </paper-button>
             </div>
           `;

package/dist/form-fields/abstract-field-base.class.d.ts

@@ -5,6 +5,7 @@ import { FieldValidator } from '../lib/utils/validations.helper';
  */
 export declare abstract class AbstractFieldBaseClass<T> extends LitElement {
     questionText: string;
+    language: string;
     set isReadonly(readonly: boolean);
     get isReadonly(): boolean;
     required: boolean;
@@ -15,6 +16,10 @@ export declare abstract class AbstractFieldBaseClass<T> extends LitElement {
     set defaultValue(value: any);
     private _defaultValue;
     private _readonly;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleLanguageChange(e: CustomEvent): void;
     protected render(): TemplateResult;
     protected questionTemplate(): TemplateResult;
     protected metaValidation(value: unknown): string | null;

package/dist/form-fields/abstract-field-base.class.js

@@ -12,7 +12,7 @@ import { FlexLayoutClasses } from '../lib/styles/flex-layout-classes';
  */
 export class AbstractFieldBaseClass extends LitElement {
     constructor() {
-        super(...arguments);
+        super();
         this.questionText = '';
         this.required = false;
         this.placeholder = '';
@@ -20,6 +20,10 @@ export class AbstractFieldBaseClass extends LitElement {
         this.validators = [];
         this.touched = false;
         this._readonly = false;
+        if (!this.language) {
+            this.language = window.localStorage.defaultLanguage || 'en';
+        }
+        this.handleLanguageChange = this.handleLanguageChange.bind(this);
     }
     set isReadonly(readonly) {
         this._readonly = readonly;
@@ -34,6 +38,17 @@ export class AbstractFieldBaseClass extends LitElement {
         this.setDefaultValue(this._readonly, value);
         this.requestUpdate();
     }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('language-changed', this.handleLanguageChange.bind(this));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('language-changed', this.handleLanguageChange.bind(this));
+    }
+    handleLanguageChange(e) {
+        this.language = e.detail.language;
+    }
     render() {
         return html `
       <div class="finding-container">
@@ -46,7 +61,7 @@ export class AbstractFieldBaseClass extends LitElement {
         return html `<span class="question-text">${this.questionText}</span>`;
     }
     metaValidation(value) {
-        const message = validate(this.validators, value);
+        const message = validate(this.validators, value, this.language);
         return message ? message : this.customValidation(value);
     }
     setDefaultValue(readonly, defaultValue) {
@@ -162,6 +177,9 @@ export class AbstractFieldBaseClass extends LitElement {
 __decorate([
     property({ type: String })
 ], AbstractFieldBaseClass.prototype, "questionText", void 0);
+__decorate([
+    property()
+], AbstractFieldBaseClass.prototype, "language", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'is-readonly' })
 ], AbstractFieldBaseClass.prototype, "isReadonly", null);

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

@@ -11,6 +11,7 @@ import { html, css, 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';
+import { getTranslation } from '../../lib/utils/translate';
 let RepeatableAttachmentField = class RepeatableAttachmentField extends RepeatableBaseField {
     constructor() {
         super(...arguments);
@@ -45,7 +46,7 @@ let RepeatableAttachmentField = class RepeatableAttachmentField extends Repeatab
                       @tap="${() => this.downloadFile(value)}"
                     >
                       <iron-icon icon="cloud-download" class="dw-icon"></iron-icon>
-                      Download
+                      ${getTranslation(this.language, 'DOWNLOAD')}
                     </paper-button>
 
                     <!--        Delete Button          -->
@@ -54,7 +55,7 @@ let RepeatableAttachmentField = class RepeatableAttachmentField extends Repeatab
                       ?hidden="${this.isReadonly}"
                       @tap="${() => this.removeControl(index)}"
                     >
-                      Delete
+                      ${getTranslation(this.language, 'DELETE')}
                     </paper-button>
                   </div>
                 `

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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { css, html, property } from 'lit-element';
 import { AbstractFieldBaseClass } from '../abstract-field-base.class';
 import { fireEvent } from '../../lib/utils/fire-custom-event';
+import { getTranslation } from '../../lib/utils/translate';
 export class RepeatableBaseField extends AbstractFieldBaseClass {
     constructor() {
         super(...arguments);
@@ -34,7 +35,7 @@ export class RepeatableBaseField extends AbstractFieldBaseClass {
                 ></iron-icon>
               </div>`)}
           <paper-button class="add-button" ?hidden="${this.isReadonly}" @click="${() => this.addNewField()}">
-            Add
+            ${getTranslation(this.language, 'ADD')}
           </paper-button>
         </div>
       </div>
@@ -66,7 +67,7 @@ export class RepeatableBaseField extends AbstractFieldBaseClass {
         }
         let errorMessage;
         if (this.required && !value && value !== null && typeof value !== 'number') {
-            errorMessage = 'This field is required!';
+            errorMessage = getTranslation(this.language, 'REQUIRED_FIELD');
         }
         else {
             errorMessage = this.metaValidation(value);

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

@@ -9,6 +9,7 @@ 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';
+import { getTranslation } from '../../lib/utils/translate';
 let RepeatableNumberField = class RepeatableNumberField extends RepeatableBaseField {
     constructor() {
         super(...arguments);
@@ -41,10 +42,10 @@ let RepeatableNumberField = class RepeatableNumberField extends RepeatableBaseFi
             return null;
         }
         if (isNaN(value)) {
-            return 'Must be a number';
+            return getTranslation(this.language, 'MUST_BE_NUMBER');
         }
         const integerValidation = !this.isInteger || value - Math.floor(value) === 0;
-        return integerValidation ? null : 'Must be an integer';
+        return integerValidation ? null : getTranslation(this.language, 'MUST_BE_INTEGER');
     }
     static get styles() {
         // language=CSS

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

@@ -11,6 +11,7 @@ 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';
+import { getTranslation } from '../../lib/utils/translate';
 let AttachmentField = class AttachmentField extends BaseField {
     constructor() {
         super(...arguments);
@@ -64,7 +65,7 @@ let AttachmentField = class AttachmentField extends BaseField {
         }
         if (error && error.length) {
             console.error(error);
-            fireEvent(this, 'toast', { text: 'Can not upload attachments. Please try again later' });
+            fireEvent(this, 'toast', { text: getTranslation(this.language, 'UPLOAD_ATTACHMENTS_FAILED') });
         }
     }
     downloadFile(attachment) {

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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { property } from 'lit-element';
 import { fireEvent } from '../../lib/utils/fire-custom-event';
 import { AbstractFieldBaseClass } from '../abstract-field-base.class';
+import { getTranslation } from '../../lib/utils/translate';
 export class BaseField extends AbstractFieldBaseClass {
     constructor() {
         super(...arguments);
@@ -40,7 +41,7 @@ export class BaseField extends AbstractFieldBaseClass {
     validateField(value) {
         let errorMessage;
         if (this.required && !value && typeof value !== 'number') {
-            errorMessage = 'This field is required!';
+            errorMessage = getTranslation(this.language, 'REQUIRED_FIELD');
         }
         else {
             errorMessage = this.metaValidation(value);

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

@@ -8,6 +8,7 @@ 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';
+import { getTranslation } from '../../lib/utils/translate';
 let NumberField = class NumberField extends BaseField {
     constructor() {
         super(...arguments);
@@ -44,7 +45,7 @@ let NumberField = class NumberField extends BaseField {
             return 'Must be a number';
         }
         const integerValidation = !this.isInteger || value - Math.floor(value) === 0;
-        return integerValidation ? null : 'Must be an integer';
+        return integerValidation ? null : getTranslation(this.language, 'MUST_BE_INTEGER');
     }
     static get styles() {
         // language=CSS

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

@@ -10,6 +10,7 @@ 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 { getTranslation } from '../../lib/utils/translate';
 let ScaleField = class ScaleField extends BaseField {
     constructor() {
         super(...arguments);
@@ -32,7 +33,7 @@ let ScaleField = class ScaleField extends BaseField {
         </paper-radio-group>
 
         <paper-button ?hidden="${this.isReadonly}" @click="${() => this.valueChanged(null)}" class="clear-button">
-          <iron-icon icon="clear"></iron-icon>Clear
+          <iron-icon icon="clear"></iron-icon>${getTranslation(this.language, 'CLEAR')}
         </paper-button>
       </div>
       <div ?hidden="${!this.errorMessage}" class="error-text">${this.errorMessage}</div>

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

@@ -27,6 +27,7 @@ export declare class FormAbstractGroup extends LitElement implements IFormBuilde
     groupStructure: BlueprintGroup;
     metadata: BlueprintMetadata;
     parentGroupName: string;
+    language: string;
     readonly: boolean;
     protected _errors: GenericObject;
     protected _value: GenericObject;
@@ -45,6 +46,10 @@ export declare class FormAbstractGroup extends LitElement implements IFormBuilde
      * @param errors
      */
     set errors(errors: GenericObject | string[] | null);
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleLanguageChange(e: CustomEvent): void;
     render(): TemplateResult;
     renderChild(child: BlueprintGroup | BlueprintField | Information): TemplateResult | TemplateResult[];
     renderField(blueprintField: BlueprintField): TemplateResult;

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

@@ -19,6 +19,7 @@ import { clone } from 'ramda';
 import { live } from 'lit-html/directives/live';
 import { openDialog } from '../lib/utils/dialog';
 import { FormBuilderCardStyles } from '../lib/styles/form-builder-card.styles';
+import { getTranslation } from '../lib/utils/translate';
 export var FieldTypes;
 (function (FieldTypes) {
     FieldTypes["FILE_TYPE"] = "file";
@@ -40,12 +41,16 @@ export var StructureTypes;
 })(StructureTypes || (StructureTypes = {}));
 let FormAbstractGroup = class FormAbstractGroup extends LitElement {
     constructor() {
-        super(...arguments);
+        super();
         this.parentGroupName = '';
         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
@@ -73,6 +78,17 @@ let FormAbstractGroup = class FormAbstractGroup extends LitElement {
             this._errors = errors;
         }
     }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('language-changed', this.handleLanguageChange.bind(this));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('language-changed', this.handleLanguageChange.bind(this));
+    }
+    handleLanguageChange(e) {
+        this.language = e.detail.language;
+    }
     render() {
         if (!this.groupStructure || !this.metadata) {
             return html ``;
@@ -122,7 +138,10 @@ let FormAbstractGroup = class FormAbstractGroup extends LitElement {
         return html `
       ${value.map((_, index) => this.getGroupTemplate(groupStructure, index))}
       <paper-button class="add-group save-button" @click="${() => this.addGroup(groupStructure.name)}">
-        Add ${!groupStructure.title || groupStructure.title.length > 15 ? 'group' : groupStructure.title}
+        ${getTranslation(this.language, 'ADD')}
+        ${!groupStructure.title || groupStructure.title.length > 15
+            ? getTranslation(this.language, 'GROUP')
+            : groupStructure.title}
       </paper-button>
     `;
     }
@@ -240,7 +259,7 @@ let FormAbstractGroup = class FormAbstractGroup extends LitElement {
             openDialog({
                 dialog: 'confirmation-popup',
                 dialogData: {
-                    text: `Group is required. At least one group must exist`,
+                    text: getTranslation(this.language, 'GROUP_REQUIRED'),
                     hideConfirmBtn: true,
                     dialogTitle: ''
                 }
@@ -338,6 +357,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], FormAbstractGroup.prototype, "parentGroupName", void 0);
+__decorate([
+    property()
+], FormAbstractGroup.prototype, "language", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'readonly' })
 ], FormAbstractGroup.prototype, "readonly", void 0);

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

@@ -10,6 +10,7 @@ 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';
 let FormCard = class FormCard extends FormAbstractGroup {
     constructor() {
         super(...arguments);
@@ -46,10 +47,12 @@ let FormCard = class FormCard extends FormAbstractGroup {
           <div
             class="remove-group"
             ?hidden="${!this.groupStructure.repeatable}"
-            @click="${() => this.confirmRemove(this.groupStructure.title || 'this group')}"
+            @click="${() => this.confirmRemove(this.groupStructure.title || getTranslation(this.language, 'THIS_GROUP'))}"
           >
             Remove
-            ${!this.groupStructure.title || this.groupStructure.title.length > 15 ? 'group' : this.groupStructure.title}
+            ${!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>
@@ -57,7 +60,9 @@ let FormCard = class FormCard extends FormAbstractGroup {
 
         <iron-collapse ?opened="${this.showSaveButton}">
           <div class="layout horizontal end-justified card-buttons actions-container">
-            <paper-button class="save-button" @tap="${() => this.saveChanges()}">Save</paper-button>
+            <paper-button class="save-button" @tap="${() => this.saveChanges()}"
+              >${getTranslation(this.language, 'SAVE')}</paper-button
+            >
           </div>
         </iron-collapse>
       </section>
@@ -77,7 +82,7 @@ let FormCard = class FormCard extends FormAbstractGroup {
     }
     saveChanges() {
         if (Object.keys(this._errors).length) {
-            fireEvent(this, 'toast', { text: 'Please check all fields and try again' });
+            fireEvent(this, 'toast', { text: getTranslation(this.language, 'CHECK_FIELDS_TRY_AGAIN') });
             return;
         }
         fireEvent(this, 'value-changed', { value: this.value });
@@ -87,7 +92,7 @@ let FormCard = class FormCard extends FormAbstractGroup {
         openDialog({
             dialog: 'confirmation-popup',
             dialogData: {
-                text: `Are you sure you want to delete ${groupName}`
+                text: `${getTranslation(this.language, 'CONFIRM_DELETE')} ${groupName}`
             }
         }).then((response) => {
             if (response.confirmed) {

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

@@ -11,6 +11,7 @@ import { openDialog } from '../lib/utils/dialog';
 import { FormAbstractGroup, StructureTypes } from './form-abstract-group';
 import '../lib/additional-components/etools-fb-card';
 import '../lib/additional-components/confirmation-dialog';
+import { getTranslation } from '../lib/utils/translate';
 const PARTNER_KEY = 'partner';
 const OUTPUT_KEY = 'output';
 const INTERVENTION_KEY = 'intervention';
@@ -87,7 +88,7 @@ let FormCollapsedCard = class FormCollapsedCard extends FormAbstractGroup {
             <paper-icon-button
               icon="close"
               class="attachments-warning"
-              @click="${() => this.confirmRemove(this.groupStructure.title || 'this group')}"
+              @click="${() => this.confirmRemove(this.groupStructure.title || getTranslation(this.language, 'THIS_GROUP'))}"
             ></paper-icon-button>
           </div>
           <div slot="content">${this.renderGroupChildren()}</div>
@@ -125,11 +126,11 @@ let FormCollapsedCard = class FormCollapsedCard extends FormAbstractGroup {
     retrieveTitle(target) {
         switch (target) {
             case PARTNER_KEY:
-                return `Partner: `;
+                return `${getTranslation(this.language, 'PARTNER')}: `;
             case OUTPUT_KEY:
-                return `CP Output: `;
+                return `${getTranslation(this.language, 'CP_OUTPUT')}: `;
             case INTERVENTION_KEY:
-                return `PD/SSFA: `;
+                return `${getTranslation(this.language, 'PD_SSFA')}: `;
             default:
                 return '';
         }
@@ -166,7 +167,7 @@ let FormCollapsedCard = class FormCollapsedCard extends FormAbstractGroup {
     }
     saveChanges() {
         if (Object.keys(this._errors).length) {
-            fireEvent(this, 'toast', { text: 'Please check all fields and try again' });
+            fireEvent(this, 'toast', { text: getTranslation(this.language, 'CHECK_FIELDS_TRY_AGAIN') });
             return;
         }
         this.isEditMode = false;
@@ -187,7 +188,7 @@ let FormCollapsedCard = class FormCollapsedCard extends FormAbstractGroup {
             dialogData: {
                 attachments: (_a = this.value) === null || _a === void 0 ? void 0 : _a.attachments,
                 metadata: this.metadata,
-                title: `Attachments for ${this.retrieveTitle(this.parentGroupName) + ': ' + this.groupStructure.title}`,
+                title: `${getTranslation(this.language, 'ATTACHMENTS_FOR')} ${this.retrieveTitle(this.parentGroupName) + ': ' + this.groupStructure.title}`,
                 computedPath: this.computedPath.concat([this.groupStructure.name, 'attachments']),
                 errors: this._errors.attachments
             },
@@ -218,7 +219,7 @@ let FormCollapsedCard = class FormCollapsedCard extends FormAbstractGroup {
         openDialog({
             dialog: 'confirmation-popup',
             dialogData: {
-                text: `Are you sure you want to delete ${groupName}`
+                text: `${getTranslation(this.language, 'CONFIRM_DELETE')} ${groupName}`
             }
         }).then((response) => {
             if (response.confirmed) {
@@ -228,13 +229,13 @@ let FormCollapsedCard = class FormCollapsedCard extends FormAbstractGroup {
     }
     getAttachmentsBtnText(attachmentsCount = 0) {
         if (attachmentsCount === 1) {
-            return `${attachmentsCount} File`;
+            return `${attachmentsCount} ${getTranslation(this.language, 'FILE')}`;
         }
         else if (attachmentsCount > 1) {
-            return `${attachmentsCount} Files`;
+            return `${attachmentsCount} ${getTranslation(this.language, 'FILES')}`;
         }
         else {
-            return 'Upload Files';
+            return getTranslation(this.language, 'UPLOAD_FILES');
         }
     }
 };

package/dist/lib/additional-components/confirmation-dialog.d.ts

@@ -1,6 +1,7 @@
 import { LitElement, CSSResultArray } from 'lit-element';
 export declare class ConfirmationDialog extends LitElement {
     dialogOpened: boolean;
+    language: string;
     text: string;
     dialogTitle: string;
     hideConfirmBtn: boolean;
@@ -9,6 +10,7 @@ export declare class ConfirmationDialog extends LitElement {
         dialogTitle: string;
         hideConfirmBtn: boolean;
     });
+    constructor();
     render(): unknown;
     onClose(): void;
     confirm(): void;

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

@@ -6,13 +6,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, property, html, css, customElement } from 'lit-element';
 import { fireEvent } from '../utils/fire-custom-event';
+import { getTranslation } from '../utils/translate';
 let ConfirmationDialog = class ConfirmationDialog extends LitElement {
     constructor() {
-        super(...arguments);
+        super();
         this.dialogOpened = true;
         this.text = '';
         this.dialogTitle = '';
         this.hideConfirmBtn = false;
+        if (!this.language) {
+            this.language = window.localStorage.defaultLanguage || 'en';
+        }
     }
     set dialogData({ text, dialogTitle = 'Are you', hideConfirmBtn = false }) {
         this.text = text;
@@ -28,7 +32,7 @@ let ConfirmationDialog = class ConfirmationDialog extends LitElement {
         no-padding
         keep-dialog-open
         ?hide-confirm-btn="${this.hideConfirmBtn}"
-        cancel-btn-text="${this.hideConfirmBtn ? 'Ok' : 'Cancel'}"
+        cancel-btn-text="${getTranslation(this.language, this.hideConfirmBtn ? 'OK' : 'CANCEL')}"
         ?opened="${this.dialogOpened}"
         theme="confirmation"
         dialog-title="${this.dialogTitle}"
@@ -59,6 +63,9 @@ let ConfirmationDialog = class ConfirmationDialog extends LitElement {
 __decorate([
     property()
 ], ConfirmationDialog.prototype, "dialogOpened", void 0);
+__decorate([
+    property()
+], ConfirmationDialog.prototype, "language", void 0);
 ConfirmationDialog = __decorate([
     customElement('confirmation-popup')
 ], ConfirmationDialog);

package/dist/lib/additional-components/etools-fb-card.d.ts

@@ -7,10 +7,15 @@ export declare class EtoolsFbCard extends LitElement {
     hideEditButton: boolean;
     collapsed: boolean;
     edit: boolean;
+    language: string;
     static get styles(): CSSResultArray;
+    constructor();
     save(): void;
     cancel(): void;
     startEdit(): void;
     toggleCollapse(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleLanguageChange(e: CustomEvent): void;
     protected render(): TemplateResult;
 }

package/dist/lib/additional-components/etools-fb-card.js

@@ -10,14 +10,19 @@ import { CardStyles } from '../styles/card-styles';
 import { elevationStyles } from '../styles/elevation-styles';
 import { FlexLayoutClasses } from '../styles/flex-layout-classes';
 import { fireEvent } from '../utils/fire-custom-event';
+import { getTranslation } from '../utils/translate';
 let EtoolsFbCard = class EtoolsFbCard extends LitElement {
     constructor() {
-        super(...arguments);
+        super();
         this.isEditable = false;
         this.isCollapsible = false;
         this.hideEditButton = false;
         this.collapsed = false;
         this.edit = false;
+        if (!this.language) {
+            this.language = window.localStorage.defaultLanguage || 'en';
+        }
+        this.handleLanguageChange = this.handleLanguageChange.bind(this);
     }
     static get styles() {
         // language=CSS
@@ -142,6 +147,17 @@ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
     toggleCollapse() {
         this.collapsed = !this.collapsed;
     }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('language-changed', this.handleLanguageChange.bind(this));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('language-changed', this.handleLanguageChange.bind(this));
+    }
+    handleLanguageChange(e) {
+        this.language = e.detail.language;
+    }
     // language=HTML
     render() {
         return html `
@@ -180,8 +196,12 @@ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
             ${this.isEditable && this.edit
             ? html `
                   <div class="layout horizontal end-justified card-buttons">
-                    <paper-button @tap="${() => this.cancel()}">Cancel</paper-button>
-                    <paper-button class="save-button" @tap="${() => this.save()}">Save</paper-button>
+                    <paper-button @tap="${() => this.cancel()}"
+                      >${getTranslation(this.language, 'CANCEL')}</paper-button
+                    >
+                    <paper-button class="save-button" @tap="${() => this.save()}"
+                      >${getTranslation(this.language, 'SAVE')}</paper-button
+                    >
                   </div>
                 `
             : ''}
@@ -209,6 +229,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], EtoolsFbCard.prototype, "edit", void 0);
+__decorate([
+    property()
+], EtoolsFbCard.prototype, "language", void 0);
 EtoolsFbCard = __decorate([
     customElement('etools-fb-card')
 ], EtoolsFbCard);

package/dist/lib/utils/translate.d.ts

@@ -0,0 +1 @@
+export declare function getTranslation(lang: string, key: string): string;

package/dist/lib/utils/translate.js

@@ -0,0 +1,9 @@
+import translations from '../../assets/translations';
+export function getTranslation(lang, key) {
+    try {
+        return translations[lang][key];
+    }
+    catch (error) {
+        return translations.en[key];
+    }
+}

package/dist/lib/utils/validations.helper.d.ts

@@ -23,4 +23,4 @@ export declare type LowerValidation = {
     allow_equality: boolean;
 };
 export declare type FieldValidator = MaxLengthValidation | RegexValidation | GreaterValidation | LowerValidation;
-export declare function validate(validators: FieldValidator[], value: any): string | null;
+export declare function validate(validators: FieldValidator[], value: any, language: string): string | null;

package/dist/lib/utils/validations.helper.js

@@ -1,3 +1,4 @@
+import { getTranslation } from './translate';
 export var Validations;
 (function (Validations) {
     Validations["MAX_LENGTH"] = "max_length";
@@ -5,30 +6,36 @@ export var Validations;
     Validations["LOWER_THAN"] = "lt";
     Validations["GREATER_THAN"] = "gt";
 })(Validations || (Validations = {}));
-export function validate(validators, value) {
+export function validate(validators, value, language) {
     let message = null;
     for (const validator of validators) {
-        message = checkValidation(validator, value);
+        message = checkValidation(validator, value, language);
         if (message) {
             break;
         }
     }
     return message;
 }
-function checkValidation(validation, value) {
+function checkValidation(validation, value, language) {
     switch (validation.name) {
         case Validations.MAX_LENGTH:
             const maxLength = Number(validation[Validations.MAX_LENGTH]) + 1;
-            return String(value).length < maxLength ? null : `Text must be less than ${maxLength} character`;
+            return String(value).length < maxLength
+                ? null
+                : getTranslation(language, 'TEXT_MUST_BE_LESS_CHARS').replace('{0}', String(maxLength));
         case Validations.REGEX:
             const regex = new RegExp(`^${validation[Validations.REGEX]}$`);
-            return regex.test(String(value)) ? null : `Doesn't match allowed pattern`;
+            return regex.test(String(value)) ? null : getTranslation(language, 'DOES_NOT_MATCH_PATTERN');
         case Validations.GREATER_THAN:
             const greaterThan = Number(validation.threshold) - Number(validation.allow_equality);
-            return Number(value) > greaterThan ? null : `Number must be greater than ${greaterThan}`;
+            return Number(value) > greaterThan
+                ? null
+                : getTranslation(language, 'NUMBER_MUST_BE_GREATER_THAN').replace('{0}', String(greaterThan));
         case Validations.LOWER_THAN:
             const lowerThan = Number(validation.threshold) + Number(validation.allow_equality);
-            return Number(value) < lowerThan ? null : `Number must be lower than ${lowerThan}`;
+            return Number(value) < lowerThan
+                ? null
+                : getTranslation(language, 'NUMBER_MUST_BE_LOWER_THAN').replace('{0}', String(lowerThan));
         default:
             return null;
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unicef-polymer/etools-form-builder",
   "description": "Etools FM Form Builder components",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "contributors": [
     "eTools Team"
   ],
@@ -28,9 +28,9 @@
     "@polymer/paper-toast": "^3.0.1",
     "@polymer/paper-toggle-button": "^3.0.1",
     "@types/ramda": "^0.26.43",
-    "@unicef-polymer/etools-dialog": "^6.0.3",
-    "@unicef-polymer/etools-dropdown": "^3.9.2",
-    "@unicef-polymer/etools-upload": "^4.3.0",
+    "@unicef-polymer/etools-dialog": "^6.0.4",
+    "@unicef-polymer/etools-dropdown": "^3.9.7",
+    "@unicef-polymer/etools-upload": "^4.4.1",
     "@webcomponents/webcomponentsjs": "^2.6.0",
     "lit-element": "^2.5.1",
     "lit-translate": "^1.2.1",
@@ -41,16 +41,16 @@
     "@typescript-eslint/eslint-plugin": "^3.10.1",
     "@typescript-eslint/parser": "^3.10.1",
     "acorn": "^8.0.4",
-    "ansi-regex": ">=5.0.1",
     "eslint": "^7.14.0",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-html": "^6.1.1",
     "eslint-plugin-lit": "^1.2.4",
     "eslint-plugin-prettier": "^3.1.3",
-    "glob-parent": ">=5.1.2",
-    "lodash": ">=4.17.21",
     "minimist": ">=0.2.1",
     "prettier": "~2.2.0",
-    "typescript": "^3.9.10"
+    "typescript": "^3.9.7",
+    "lodash": ">=4.17.21",
+    "ansi-regex": ">=5.0.1",
+    "glob-parent": ">=5.1.2"
   }
 }