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

package/README.md

@@ -1 +1 @@
-# Etools FM Form Builder Components
+# Etools FM Form Builder Components

package/dist/assets/translations.js

@@ -29,7 +29,8 @@ const translations = {
         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'
+        SELECT_DOCUMENT_TYPE: 'Select Document Type',
+        PLEASE_ANSWER: 'Important: Please provide the answer if available'
     },
     fr: {
         SAVE: 'Sauvegarder',
@@ -61,7 +62,74 @@ const translations = {
         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'
+        SELECT_DOCUMENT_TYPE: 'Sélectionnez le type de document',
+        PLEASE_ANSWER: 'Important : veuillez fournir la réponse si disponible'
+    },
+    ar: {
+        SAVE: 'يحفظ',
+        DOWNLOAD: 'تحميل',
+        CHANGE: 'يتغير',
+        DELETE: 'يمسح',
+        CANCEL: 'يلغي',
+        OK: 'نعم',
+        ADD: 'يضيف',
+        UPLOAD_ATTACHMENTS_FAILED: 'لا يمكن تحميل المرفقات. الرجاء معاودة المحاولة في وقت لاحق',
+        REQUIRED_FIELD: 'هذه الخانة مطلوبه',
+        MUST_BE_INTEGER: 'يجب أن يكون صحيحا',
+        MUST_BE_NUMBER: 'يجب أن يكون رقما',
+        CLEAR: 'واضح',
+        GROUP_REQUIRED: 'المجموعة مطلوبة. يجب أن تكون هناك مجموعة واحدة على الأقل',
+        GROUP: 'مجموعة',
+        THIS_GROUP: 'هذه المجموعة',
+        CHECK_FIELDS_TRY_AGAIN: 'يرجى التحقق من كافة الحقول والمحاولة مرة أخرى',
+        CONFIRM_DELETE: 'هل أنت متأكد أنك تريد حذف',
+        UPLOAD_FILES: 'تحميل الملفات',
+        FILE: 'ملف',
+        FILES: 'ملفات',
+        ATTACHMENTS_FOR: 'المرفقات ل',
+        PARTNER: 'شريك',
+        CP_OUTPUT: 'إخراج سي بي',
+        PD_SPD: 'بي دي/SPD',
+        TEXT_MUST_BE_LESS_CHARS: 'يجب أن يكون النص أقل من {0} حرف',
+        DOES_NOT_MATCH_PATTERN: 'لا يتطابق مع النمط المسموح به',
+        NUMBER_MUST_BE_GREATER_THAN: 'يجب أن يكون الرقم أكبر من {0}',
+        NUMBER_MUST_BE_LOWER_THAN: 'يجب أن يكون الرقم أقل من {0}',
+        DOCUMENT_TYPE: 'نوع الوثيقة',
+        SELECT_DOCUMENT_TYPE: 'حدد نوع المستند',
+        PLEASE_ANSWER: 'هام: يرجى تقديم الإجابة إذا كانت متوفرة'
+    },
+    es: {
+        SAVE: 'Guardar',
+        DOWNLOAD: 'Descargar',
+        CHANGE: 'Cambia',
+        DELETE: 'Eliminar',
+        CANCEL: 'Cancelar',
+        OK: 'Biean',
+        ADD: 'Añadir',
+        UPLOAD_ATTACHMENTS_FAILED: 'No se pueden cargar archivos adjuntos. Por favor, inténtelo de nuevo más tarde',
+        REQUIRED_FIELD: 'Este campo es obligatorio',
+        MUST_BE_INTEGER: 'Debe ser un entero',
+        MUST_BE_NUMBER: 'Tiene que ser un número',
+        CLEAR: 'Claro',
+        GROUP_REQUIRED: 'Se requiere grupo. Debe existir al menos un grupo.',
+        GROUP: 'grupo',
+        THIS_GROUP: 'este grupo',
+        CHECK_FIELDS_TRY_AGAIN: 'Por favor revisa todos los campos y vuelve a intentarlo.',
+        CONFIRM_DELETE: '¿Estás seguro de que quieres eliminar?',
+        UPLOAD_FILES: 'Subir archivos',
+        FILE: 'Archivo',
+        FILES: 'Archivos',
+        ATTACHMENTS_FOR: 'Adjuntos para',
+        PARTNER: 'Pareja',
+        CP_OUTPUT: 'Salida CP',
+        PD_SPD: 'PD/SPD',
+        TEXT_MUST_BE_LESS_CHARS: 'El texto debe tener menos de {0} caracteres',
+        DOES_NOT_MATCH_PATTERN: 'No coincide con el patrón permitido',
+        NUMBER_MUST_BE_GREATER_THAN: 'El número debe ser mayor que {0}',
+        NUMBER_MUST_BE_LOWER_THAN: 'El número debe ser inferior a {0}',
+        DOCUMENT_TYPE: 'Tipo de Documento',
+        SELECT_DOCUMENT_TYPE: 'Seleccionar tipo de documento',
+        PLEASE_ANSWER: 'Importante: proporcione la respuesta si está disponible.'
     }
 };
 export default translations;

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

@@ -1,6 +1,7 @@
 import '@unicef-polymer/etools-unicef/src/etools-dialog/etools-dialog';
 import '@unicef-polymer/etools-unicef/src/etools-upload/etools-upload-multi';
 import '@unicef-polymer/etools-unicef/src/etools-dropdown/etools-dropdown';
+import '@unicef-polymer/etools-unicef/src/etools-button/etools-button';
 import { CSSResultArray, LitElement, TemplateResult } from 'lit';
 import { GenericObject } from '../lib/types/global.types';
 import { BlueprintMetadata } from '../lib/types/form-builder.types';
@@ -65,6 +66,9 @@ export declare class FormAttachmentsPopup extends LitElement {
     get uploadUrl(): string;
     get jwtLocalStorageKey(): string;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleLanguageChange(e: CustomEvent): void;
     render(): TemplateResult | void;
     /**
      * on Cancel button click

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

@@ -2,16 +2,17 @@ import { __decorate } from "tslib";
 import '@unicef-polymer/etools-unicef/src/etools-dialog/etools-dialog';
 import '@unicef-polymer/etools-unicef/src/etools-upload/etools-upload-multi';
 import '@unicef-polymer/etools-unicef/src/etools-dropdown/etools-dropdown';
+import '@unicef-polymer/etools-unicef/src/etools-button/etools-button';
 import { deleteFileFromDexie } from '@unicef-polymer/etools-unicef/src/etools-upload/offline/dexie-operations';
-import { css, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { property, query, customElement } from 'lit/decorators.js';
 import { clone, equals } from 'ramda';
-import { template } from './form-attachments-popup.tpl';
 import { fireEvent } from '../lib/utils/fire-custom-event';
 import { SharedStyles } from '../lib/styles/shared-styles';
 import { AttachmentsStyles } from '../lib/styles/attachments.styles';
 import { AttachmentsHelper } from './form-attachments-popup.helper';
 import { getTranslation } from '../lib/utils/translate';
+import { DialogStyles } from '../lib/styles/dialog.styles';
 let FormAttachmentsPopup = class FormAttachmentsPopup extends LitElement {
     set dialogData({ attachments, title, metadata, readonly, computedPath, errors }) {
         this.popupTitle = title;
@@ -47,11 +48,113 @@ let FormAttachmentsPopup = class FormAttachmentsPopup extends LitElement {
             throw new Error('Please initialize attachments popup before use');
         }
         if (!this.language) {
-            this.language = window.localStorage.defaultLanguage || 'en';
+            this.language = window.EtoolsLanguage || 'en';
         }
     }
+    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 template.call(this);
+        var _a;
+        return html `
+      ${DialogStyles}
+      <style>
+        etools-icon[name='error-outline'] {
+          color: var(--etools-upload-danger-color, #ea4022);
+        }
+      </style>
+      <etools-dialog
+        id="form-attachments-dialog"
+        size="md"
+        no-padding
+        keep-dialog-open
+        ?opened="${this.dialogOpened}"
+        .okBtnText="${getTranslation(this.language, 'SAVE')}"
+        .cancelBtnText="${getTranslation(this.language, 'CANCEL')}"
+        .hideConfirmBtn="${this.readonly}"
+        dialog-title="${this.popupTitle}"
+        @close="${this.onClose}"
+        @confirm-btn-clicked="${() => this.saveChanges()}"
+      >
+        <!--  Link is used to download attachments  -->
+        <a id="link" target="_blank" hidden></a>
+
+        <div class="popup-container">
+          ${(_a = this.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment, index) => {
+            var _a, _b;
+            return html `
+              <div class="file-selector-container with-type-dropdown">
+                <!--        Type select Dropdown        -->
+                <etools-dropdown
+                  class="type-dropdown file-selector__type-dropdown"
+                  .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="${getTranslation(this.language, 'DOCUMENT_TYPE')}"
+                  placeholder="${getTranslation(this.language, 'SELECT_DOCUMENT_TYPE')}"
+                  required
+                  ?readonly="${this.readonly}"
+                  hide-search
+                  .options="${(_b = (_a = this.metadata) === null || _a === void 0 ? void 0 : _a.options.target_attachments_file_types) === null || _b === void 0 ? void 0 : _b.values}"
+                  option-label="label"
+                  option-value="value"
+                  ?invalid="${this.checkFileType(index)}"
+                  .errorMessage="${this.retrieveErrorMessage(index)}"
+                  allow-outside-scroll
+                  dynamic-align
+                ></etools-dropdown>
+
+                <!--        File name component          -->
+                <div class="filename-container file-selector__filename">
+                  <etools-icon class="file-icon" name="attachment"></etools-icon>
+                  <span class="filename" title="${attachment.filename}">${attachment.filename}</span>
+                </div>
+
+                <!--         Download Button         -->
+                <etools-button
+                  variant="text"
+                  ?hidden="${!attachment.url}"
+                  class="download-button file-selector__download"
+                  @click="${() => this.downloadFile(attachment)}"
+                >
+                  <etools-icon name="cloud-download" class="dw-icon" slot="prefix"></etools-icon>
+                  ${getTranslation(this.language, 'DOWNLOAD')}
+                </etools-button>
+
+                <!--        Delete Button          -->
+                <etools-button
+                  variant="text"
+                  class="danger delete-button file-selector__delete"
+                  ?hidden="${this.readonly}"
+                  @click="${() => this.deleteAttachment(index)}"
+                >
+                  ${getTranslation(this.language, 'DELETE')}
+                </etools-button>
+              </div>
+            `;
+        })}
+
+          <!--     Upload button     -->
+          <etools-upload-multi
+            class="with-padding"
+            activate-offline
+            ?hidden="${this.readonly}"
+            @upload-finished="${({ detail }) => this.attachmentsUploaded(detail)}"
+            .endpointInfo="${{ endpoint: this.uploadUrl, extraInfo: { composedPath: this.computedPath } }}"
+            .jwtLocalStorageKey="${this.jwtLocalStorageKey}"
+          >
+          </etools-upload-multi>
+        </div>
+      </etools-dialog>
+    `;
     }
     /**
      * on Cancel button click
@@ -73,7 +176,7 @@ let FormAttachmentsPopup = class FormAttachmentsPopup extends LitElement {
         this.attachments.forEach((attachment, index) => {
             if (!attachment.file_type) {
                 fileTypeNotSelected = true;
-                this.errors[index] = { file_type: ['This field is required'] };
+                this.errors[index] = { file_type: [getTranslation(this.language, 'REQUIRED_FIELD')] };
             }
             else {
                 this.errors[index] = [];
@@ -173,54 +276,54 @@ let FormAttachmentsPopup = class FormAttachmentsPopup extends LitElement {
         return [
             SharedStyles,
             AttachmentsStyles,
-            css `
-        .file-selector__type-dropdown {
-          flex-basis: 25%;
-          padding-left: 8px;
-          padding-right: 8px;
-        }
-        .file-selector__filename {
-          flex-basis: 35%;
-        }
-        .file-selector__download {
-          flex-basis: 10%;
-        }
-        .file-selector__delete {
-          flex-basis: 10%;
-        }
-        .file-selector-container.with-type-dropdown {
-          flex-wrap: nowrap;
-        }
-        .popup-container {
-          padding: 12px 12px 0;
-        }
-        @media (max-width: 380px) {
-          .file-selector-container.with-type-dropdown {
-            justify-content: center;
-          }
-          .file-selector-container.with-type-dropdown etools-dropdown.type-dropdown {
-            flex-basis: 90%;
-          }
-          .file-selector__filename {
-            flex-basis: 90%;
-          }
-          .file-selector__download {
-            flex-basis: 5%;
-          }
-          .file-selector__delete {
-            flex-basis: 5%;
-          }
-        }
-        @media (max-width: 600px) {
-          etools-dropdown {
-            padding: 0;
-          }
-          .file-selector-container.with-type-dropdown {
-            border-bottom: 1px solid lightgrey;
-            flex-wrap: wrap;
-            padding-bottom: 10px;
-          }
-        }
+            css `
+        .file-selector__type-dropdown {
+          flex-basis: 25%;
+          padding-left: 8px;
+          padding-right: 8px;
+        }
+        .file-selector__filename {
+          flex-basis: 35%;
+        }
+        .file-selector__download {
+          flex-basis: 10%;
+        }
+        .file-selector__delete {
+          flex-basis: 10%;
+        }
+        .file-selector-container.with-type-dropdown {
+          flex-wrap: nowrap;
+        }
+        .popup-container {
+          padding: 12px 12px 0;
+        }
+        @media (max-width: 380px) {
+          .file-selector-container.with-type-dropdown {
+            justify-content: center;
+          }
+          .file-selector-container.with-type-dropdown etools-dropdown.type-dropdown {
+            flex-basis: 90%;
+          }
+          .file-selector__filename {
+            flex-basis: 90%;
+          }
+          .file-selector__download {
+            flex-basis: 5%;
+          }
+          .file-selector__delete {
+            flex-basis: 5%;
+          }
+        }
+        @media (max-width: 600px) {
+          etools-dropdown {
+            padding: 0;
+          }
+          .file-selector-container.with-type-dropdown {
+            border-bottom: 1px solid lightgrey;
+            flex-wrap: wrap;
+            padding-bottom: 10px;
+          }
+        }
       `
         ];
     }

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

@@ -10,6 +10,7 @@ export declare abstract class AbstractFieldBaseClass<T> extends LitElement {
     get isReadonly(): boolean;
     required: boolean;
     placeholder: string;
+    name: string;
     value: T | null;
     validators: FieldValidator[];
     touched: boolean;

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

@@ -25,12 +25,13 @@ export class AbstractFieldBaseClass extends LitElement {
         this.questionText = '';
         this.required = false;
         this.placeholder = '';
+        this.name = '';
         this.value = null;
         this.validators = [];
         this.touched = false;
         this._readonly = false;
         if (!this.language) {
-            this.language = window.localStorage.defaultLanguage || 'en';
+            this.language = window.EtoolsLanguage || 'en';
         }
         this.handleLanguageChange = this.handleLanguageChange.bind(this);
     }
@@ -46,11 +47,11 @@ export class AbstractFieldBaseClass extends LitElement {
         this.language = e.detail.language;
     }
     render() {
-        return html `
-      <div class="finding-container">
-        <div class="question"><slot>${this.questionTemplate()}</slot></div>
-        <div class="question-control">${this.controlTemplate()}</div>
-      </div>
+        return html `
+      <div class="finding-container">
+        <div class="question"><slot>${this.questionTemplate()}</slot></div>
+        <div class="question-control">${this.controlTemplate()}</div>
+      </div>
     `;
     }
     questionTemplate() {
@@ -75,116 +76,102 @@ export class AbstractFieldBaseClass extends LitElement {
         // language=CSS
         return [
             FlexLayoutClasses,
-            css `
-        :host {
-          display: block;
-          width: 100%;
-          padding: 0 25px 0 45px;
-          box-sizing: border-box;
-        }
-
-        .finding-container {
-          width: 100%;
-          display: flex;
-        }
-        .flex-wrapping {
-          flex-wrap: wrap;
-        }
-
-        :host(.wide) .finding-container {
-          flex-direction: column;
-        }
-
-        :host(.wide) .question {
-          margin-bottom: -8px;
-          min-height: 0;
-        }
-
-        .question-control,
-        .question {
-          min-width: 0;
-          min-height: 57px;
-          display: flex;
-          align-items: center;
-        }
-        .question {
-          flex: 2;
-        }
-        .question-control {
-          flex: 3;
-        }
-        .add-button {
-          padding: 3px;
-          margin: 10px;
-          background: transparent;
-          color: var(--primary-color);
-          border: 1px solid;
-        }
-
-        .full-width,
-        paper-input,
-        paper-textarea {
-          width: 100%;
-        }
-
-        .question-text {
-          font-weight: 500;
-          font-size: 13px;
-          color: var(--primary-text-color);
-        }
-
-        paper-input,
-        paper-textarea {
-          outline: none !important;
-        }
-        paper-input[required],
-        paper-textarea[required] {
-          --paper-input-container-label_-_background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221235%22%20height%3D%221175%22%3E%3Cpath%20fill%3D%22%23de0000%22%20d%3D%22M0%2C449h1235l-999%2C726%20382-1175%20382%2C1175z%22%2F%3E%3C%2Fsvg%3E')
-            no-repeat 98% 14%/7px;
-          --paper-input-container-label_-_max-width: max-content;
-          --paper-input-container-label_-_padding-right: 15px;
-        }
-
-        iron-icon[icon='close'] {
-          cursor: pointer;
-        }
-
-        .error-text {
-          color: var(--error-color);
-          font-size: 12px;
-        }
-
-        @media (max-width: 1080px) {
-          :host {
-            padding: 0 15px;
-          }
-          .finding-container {
-            flex-direction: column;
-          }
-          .question,
-          .question-control {
-            flex: 0 1 auto;
-          }
-        }
-
-        @media print {
-          .question-control {
-            align-items: start;
-          }
-
-          :host(text-field) .question-control {
-            min-height: 150px;
-          }
-
-          .question-control .container paper-radio-group {
-            flex-direction: column;
-            opacity: 1 !important;
-          }
-
-          .finding-container {
-            flex-direction: column;
-          }
-        }
+            css `
+        :host {
+          display: block;
+          width: 100%;
+          padding: 0 25px 0 45px;
+          box-sizing: border-box;
+        }
+
+        .finding-container {
+          width: 100%;
+          display: flex;
+        }
+        .flex-wrapping {
+          flex-wrap: wrap;
+        }
+
+        :host(.wide) .finding-container {
+          flex-direction: column;
+        }
+
+        :host(.wide) .question {
+          margin-bottom: -8px;
+          min-height: 0;
+        }
+
+        .question-control,
+        .question {
+          min-width: 0;
+          min-height: 57px;
+          display: flex;
+          align-items: center;
+        }
+        .question {
+          flex: 2;
+        }
+        .question-control {
+          flex: 3;
+        }
+        .add-button {
+          padding: 3px;
+          margin: 10px;
+          background: transparent;
+          color: var(--primary-color);
+          border: 1px solid;
+        }
+
+        .full-width {
+          width: 100%;
+        }
+
+        .question-text {
+          font-weight: 500;
+          font-size: var(--etools-font-size-13, 13px);
+          color: var(--primary-text-color);
+        }
+
+        etools-icon[name='close'] {
+          cursor: pointer;
+        }
+
+        .error-text {
+          color: var(--error-color);
+          font-size: var(--etools-font-size-12, 12px);
+        }
+
+        @media (max-width: 1080px) {
+          :host {
+            padding: 0 15px;
+          }
+          .finding-container {
+            flex-direction: column;
+          }
+          .question,
+          .question-control {
+            flex: 0 1 auto;
+          }
+        }
+
+        @media print {
+          .question-control {
+            align-items: start;
+          }
+
+          :host(text-field) .question-control {
+            min-height: 150px;
+          }
+
+          .question-control .container etools-radio-group {
+            flex-direction: column;
+            opacity: 1 !important;
+          }
+
+          .finding-container {
+            flex-direction: column;
+          }
+        }
       `
         ];
     }
@@ -204,6 +191,9 @@ __decorate([
 __decorate([
     property()
 ], AbstractFieldBaseClass.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], AbstractFieldBaseClass.prototype, "name", void 0);
 __decorate([
     property()
 ], AbstractFieldBaseClass.prototype, "value", void 0);

package/dist/form-fields/field-renderer-component.d.ts

@@ -2,9 +2,12 @@ import { CSSResultArray, LitElement, TemplateResult } from 'lit';
 import { BlueprintField } from '../lib/types/form-builder.types';
 import { FieldValidator } from '../lib/utils/validations.helper';
 import { FieldOption } from './single-fields/scale-field';
+import '@unicef-polymer/etools-unicef/src/etools-icons/etools-icon';
+import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
 export declare class FieldRendererComponent extends LitElement {
     field: BlueprintField;
     value: any;
+    language: string;
     errorMessage: string | null;
     validations: FieldValidator[];
     readonly: boolean;
@@ -13,8 +16,9 @@ export declare class FieldRendererComponent extends LitElement {
     defaultValue: any;
     render(): TemplateResult;
     renderField(blueprintField: BlueprintField): TemplateResult;
-    renderStandardField({ input_type, label, help_text, required, placeholder, styling }: BlueprintField): TemplateResult;
-    renderRepeatableField({ input_type, label, help_text, required, placeholder, styling }: BlueprintField): TemplateResult;
-    renderFieldLabel(label: string, helperText: string): TemplateResult;
+    renderStandardField({ input_type, label, help_text, required, placeholder, styling, name }: BlueprintField, isMandatory?: boolean): TemplateResult;
+    renderTooltip(isMandatory: boolean): "" | TemplateResult<1>;
+    renderRepeatableField({ input_type, label, help_text, required, placeholder, styling }: BlueprintField, isMandatory?: boolean): TemplateResult;
+    renderFieldLabel(label: string, helperText: string, isMandatory?: boolean): TemplateResult;
     static get styles(): CSSResultArray;
 }