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

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] = [];

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);
     }
@@ -121,37 +122,23 @@ export class AbstractFieldBaseClass extends LitElement {
           border: 1px solid;
         }
 
-        .full-width,
-        paper-input,
-        paper-textarea {
+        .full-width {
           width: 100%;
         }
 
         .question-text {
           font-weight: 500;
-          font-size: 13px;
+          font-size: var(--etools-font-size-13, 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'] {
+        etools-icon[name='close'] {
           cursor: pointer;
         }
 
         .error-text {
           color: var(--error-color);
-          font-size: 12px;
+          font-size: var(--etools-font-size-12, 12px);
         }
 
         @media (max-width: 1080px) {
@@ -176,7 +163,7 @@ export class AbstractFieldBaseClass extends LitElement {
             min-height: 150px;
           }
 
-          .question-control .container paper-radio-group {
+          .question-control .container etools-radio-group {
             flex-direction: column;
             opacity: 1 !important;
           }
@@ -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;
 }

package/dist/form-fields/field-renderer-component.js

@@ -4,6 +4,9 @@ import { property, customElement } from 'lit/decorators.js';
 import { FlexLayoutClasses } from '../lib/styles/flex-layout-classes';
 import { FieldTypes, StructureTypes } from '../form-groups';
 import { FormBuilderCardStyles } from '../lib/styles/form-builder-card.styles';
+import '@unicef-polymer/etools-unicef/src/etools-icons/etools-icon';
+import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
+import { getTranslation } from '../lib/utils/translate';
 let FieldRendererComponent = class FieldRendererComponent extends LitElement {
     constructor() {
         super(...arguments);
@@ -21,18 +24,21 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
     }
     renderField(blueprintField) {
         const additionalClass = blueprintField.styling.includes(StructureTypes.ADDITIONAL)
-            ? 'additional-field '
-            : '';
+            ? `additional-field ${blueprintField.name} `
+            : `${blueprintField.name} `;
         const wideClass = blueprintField.styling.includes(StructureTypes.WIDE) ? 'wide-field-container ' : '';
+        const mandatoryClass = blueprintField.styling.includes(StructureTypes.MANDATORY_WARNING)
+            ? 'mandatory_warning '
+            : '';
         return html `
-      <div class="${`${additionalClass}${wideClass}finding-container`}">
+      <div class="${`${additionalClass}${wideClass}${mandatoryClass}finding-container`}">
         ${blueprintField.repeatable
-            ? this.renderRepeatableField(blueprintField)
-            : this.renderStandardField(blueprintField)}
+            ? this.renderRepeatableField(blueprintField, !!mandatoryClass)
+            : this.renderStandardField(blueprintField, !!mandatoryClass)}
       </div>
     `;
     }
-    renderStandardField({ input_type, label, help_text, required, placeholder, styling }) {
+    renderStandardField({ input_type, label, help_text, required, placeholder, styling, name }, isMandatory = false) {
         var _a, _b, _c, _d;
         const isWide = styling.includes(StructureTypes.WIDE);
         switch (input_type) {
@@ -43,12 +49,13 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
             ?is-readonly="${this.readonly}"
             ?required="${required}"
             .placeholder="${placeholder}"
+            .name="${name}"
             .value="${this.value}"
             .validators="${this.validations}"
             .errorMessage="${this.errorMessage}"
             .defaultValue="${(_a = this.field) === null || _a === void 0 ? void 0 : _a.default_value}"
           >
-            ${this.renderFieldLabel(label, help_text)}
+            ${this.renderFieldLabel(label, help_text, isMandatory)}
           </text-field>
         `;
             case FieldTypes.NUMBER_TYPE:
@@ -60,12 +67,13 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
             ?required="${required}"
             .placeholder="${placeholder}"
             .value="${this.value}"
+            .name="${name}"
             .validators="${this.validations}"
             .errorMessage="${this.errorMessage}"
             .isInteger="${Boolean(input_type === FieldTypes.NUMBER_INTEGER_TYPE)}"
             .defaultValue="${(_b = this.field) === null || _b === void 0 ? void 0 : _b.default_value}"
           >
-            ${this.renderFieldLabel(label, help_text)}
+            ${this.renderFieldLabel(label, help_text, isMandatory)}
           </number-field>
         `;
             case FieldTypes.BOOL_TYPE:
@@ -74,11 +82,12 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
             ?is-readonly="${this.readonly}"
             ?required="${required}"
             .value="${this.value}"
+            .name="${name}"
             .validators="${this.validations}"
             .errorMessage="${this.errorMessage}"
             .defaultValue="${(_c = this.field) === null || _c === void 0 ? void 0 : _c.default_value}"
           >
-            ${this.renderFieldLabel(label, help_text)}
+            ${this.renderFieldLabel(label, help_text, isMandatory)}
           </boolean-field>
         `;
             case FieldTypes.SCALE_TYPE:
@@ -89,11 +98,12 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
             ?required="${required}"
             .placeholder="${placeholder}"
             .value="${this.value}"
+            .name="${name}"
             .validators="${this.validations}"
             .errorMessage="${this.errorMessage}"
             .defaultValue="${(_d = this.field) === null || _d === void 0 ? void 0 : _d.default_value}"
           >
-            ${this.renderFieldLabel(label, help_text)}
+            ${this.renderFieldLabel(label, help_text, isMandatory)}
           </scale-field>
         `;
             case FieldTypes.FILE_TYPE:
@@ -103,11 +113,12 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
             ?required="${required}"
             .placeholder="${placeholder}"
             .value="${this.value}"
+            .name="${name}"
             .validators="${this.validations}"
             .errorMessage="${this.errorMessage}"
             .computedPath="${this.computedPath}"
           >
-            ${this.renderFieldLabel(label, help_text)}
+            ${this.renderFieldLabel(label, help_text, isMandatory)}
           </attachments-field>
         `;
             default:
@@ -115,7 +126,14 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
                 return html ``;
         }
     }
-    renderRepeatableField({ input_type, label, help_text, required, placeholder, styling }) {
+    renderTooltip(isMandatory) {
+        return isMandatory
+            ? html ` <sl-tooltip placement="top" content="${getTranslation(this.language, 'PLEASE_ANSWER')}">
+          <etools-icon id="users-icon" name="info-outline"></etools-icon>
+        </sl-tooltip>`
+            : ``;
+    }
+    renderRepeatableField({ input_type, label, help_text, required, placeholder, styling }, isMandatory = false) {
         var _a, _b, _c;
         const isWide = styling.includes(StructureTypes.WIDE);
         switch (input_type) {
@@ -131,7 +149,7 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
             .errorMessage="${this.errorMessage}"
             .defaultValue="${(_a = this.field) === null || _a === void 0 ? void 0 : _a.default_value}"
           >
-            ${this.renderFieldLabel(label, help_text)}
+            ${this.renderFieldLabel(label, help_text, isMandatory)}
           </repeatable-text-field>
         `;
             case FieldTypes.NUMBER_TYPE:
@@ -149,7 +167,7 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
             .isInteger="${Boolean(input_type === FieldTypes.NUMBER_INTEGER_TYPE)}"
             .defaultValue="${(_b = this.field) === null || _b === void 0 ? void 0 : _b.default_value}"
           >
-            ${this.renderFieldLabel(label, help_text)}
+            ${this.renderFieldLabel(label, help_text, isMandatory)}
           </repeatable-number-field>
         `;
             case FieldTypes.SCALE_TYPE:
@@ -165,7 +183,7 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
             .errorMessage="${this.errorMessage}"
             .defaultValue="${(_c = this.field) === null || _c === void 0 ? void 0 : _c.default_value}"
           >
-            ${this.renderFieldLabel(label, help_text)}
+            ${this.renderFieldLabel(label, help_text, isMandatory)}
           </repeatable-scale-field>
         `;
             case FieldTypes.FILE_TYPE:
@@ -179,7 +197,7 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
             .errorMessage="${this.errorMessage}"
             .computedPath="${this.computedPath}"
           >
-            ${this.renderFieldLabel(label, help_text)}
+            ${this.renderFieldLabel(label, help_text, isMandatory)}
           </repeatable-attachments-field>
         `;
             default:
@@ -187,10 +205,10 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
                 return html ``;
         }
     }
-    renderFieldLabel(label, helperText) {
+    renderFieldLabel(label, helperText, isMandatory = false) {
         return html `
       <div class="layout vertical question-container">
-        <div class="question-text">${label}</div>
+        <div class="question-text">${this.renderTooltip(isMandatory)}${label}</div>
         <div class="question-details">${helperText}</div>
       </div>
     `;
@@ -217,7 +235,17 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
           color: var(--secondary-text-color);
           font-weight: 400;
         }
-
+        .mandatory_warning etools-icon {
+          --etools-icon-fill-color: #f59e0b !important;
+        }
+        :host(:not([readonly])) {
+          .overall {
+            background-color: #ffffff;
+            border-style: inset;
+            border-width: 0 1px 1px 1px;
+            border-color: var(--dark-divider-color);
+          }
+        }
         @media print {
           :host {
             break-inside: avoid;
@@ -233,6 +261,9 @@ __decorate([
 __decorate([
     property()
 ], FieldRendererComponent.prototype, "value", void 0);
+__decorate([
+    property()
+], FieldRendererComponent.prototype, "language", void 0);
 __decorate([
     property()
 ], FieldRendererComponent.prototype, "errorMessage", void 0);

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

@@ -83,8 +83,8 @@ let RepeatableAttachmentField = class RepeatableAttachmentField extends Repeatab
     }
     attachmentsUploaded({ success, error }) {
         success === null || success === void 0 ? void 0 : success.forEach((file, index) => {
-            var _a, _b;
-            const newIndex = ((_b = Number((_a = this.editedValues) === null || _a === void 0 ? void 0 : _a.length)) !== null && _b !== void 0 ? _b : 0) + index;
+            var _a;
+            const newIndex = (Number((_a = this.editedValues) === null || _a === void 0 ? void 0 : _a.length) || 0) + index;
             if (this.isUploadedAttachment(file)) {
                 this.valueChanged({
                     url: file.file_link,
@@ -107,7 +107,7 @@ let RepeatableAttachmentField = class RepeatableAttachmentField extends Repeatab
         });
         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/repeatable-fields/repeatable-number-field.js

@@ -2,7 +2,6 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import '@unicef-polymer/etools-unicef/src/etools-input/etools-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';
@@ -13,7 +12,6 @@ let RepeatableNumberField = class RepeatableNumberField extends RepeatableBaseFi
     }
     controlTemplate(value, index) {
         return html `
-      ${InputStyles}
       <etools-input
         class="no-padding-left"
         no-label-float

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

@@ -5,7 +5,6 @@ import { repeat } from 'lit/directives/repeat.js';
 import '@unicef-polymer/etools-unicef/src/etools-radio/etools-radio-group';
 import '@shoelace-style/shoelace/dist/components/radio/radio.js';
 import '@unicef-polymer/etools-unicef/src/etools-button/etools-button';
-import { InputStyles } from '../../lib/styles/input-styles';
 import { RepeatableBaseField } from './repeatable-base-field';
 import { getTranslation } from '../../lib/utils/translate';
 import { AbstractFieldBaseClass } from '../abstract-field-base.class';
@@ -16,7 +15,6 @@ let RepeatableScaleField = class RepeatableScaleField extends RepeatableBaseFiel
     }
     controlTemplate(value, index) {
         return html `
-      ${InputStyles}
       <div class="container">
         <etools-radio-group
           class="radio-group"

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

@@ -2,13 +2,11 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import '@unicef-polymer/etools-unicef/src/etools-input/etools-textarea';
-import { InputStyles } from '../../lib/styles/input-styles';
 import { RepeatableBaseField } from './repeatable-base-field';
 import { AbstractFieldBaseClass } from '../abstract-field-base.class';
 let RepeatableTextField = class RepeatableTextField extends RepeatableBaseField {
     controlTemplate(value, index) {
         return html `
-      ${InputStyles}
       <etools-textarea
         id="textarea"
         class="no-padding-left"
@@ -31,9 +29,6 @@ let RepeatableTextField = class RepeatableTextField extends RepeatableBaseField
         return [
             ...AbstractFieldBaseClass.styles,
             css `
-        :host(.wide) paper-textarea {
-          padding-left: 0;
-        }
         @media (max-width: 380px) {
           .no-padding-left {
             padding-left: 0;

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

@@ -2,12 +2,10 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { BaseField } from './base-field';
-import { InputStyles } from '../../lib/styles/input-styles';
 import '@shoelace-style/shoelace/dist/components/switch/switch.js';
 let BooleanField = class BooleanField extends BaseField {
     controlTemplate() {
         return html `
-      ${InputStyles}
       <sl-switch
         class="no-padding-left"
         ?checked="${this.value}"
@@ -27,9 +25,6 @@ let BooleanField = class BooleanField extends BaseField {
         return [
             ...BaseField.styles,
             css `
-        :host(.wide) paper-textarea {
-          padding-left: 0;
-        }
         @media (max-width: 380px) {
           .no-padding-left {
             padding-left: 0;