@unicef-polymer/etools-form-builder 3.0.0-rc.22 → 3.0.0-rc.24

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,8 @@ 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: 'يحفظ',
@@ -93,7 +95,8 @@ const translations = {
         NUMBER_MUST_BE_GREATER_THAN: 'يجب أن يكون الرقم أكبر من {0}',
         NUMBER_MUST_BE_LOWER_THAN: 'يجب أن يكون الرقم أقل من {0}',
         DOCUMENT_TYPE: 'نوع الوثيقة',
-        SELECT_DOCUMENT_TYPE: 'حدد نوع المستند'
+        SELECT_DOCUMENT_TYPE: 'حدد نوع المستند',
+        PLEASE_ANSWER: 'هام: يرجى تقديم الإجابة إذا كانت متوفرة'
     },
     es: {
         SAVE: 'Guardar',
@@ -125,7 +128,8 @@ const translations = {
         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'
+        SELECT_DOCUMENT_TYPE: 'Seleccionar tipo de documento',
+        PLEASE_ANSWER: 'Importante: proporcione la respuesta si está disponible.'
     }
 };
 export default translations;

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,6 +25,7 @@ export class AbstractFieldBaseClass extends LitElement {
         this.questionText = '';
         this.required = false;
         this.placeholder = '';
+        this.name = '';
         this.value = null;
         this.validators = [];
         this.touched = false;
@@ -190,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);
@@ -20,19 +23,22 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
         return this.renderField(this.field);
     }
     renderField(blueprintField) {
-        const additionalClass = blueprintField.styling.includes(StructureTypes.ADDITIONAL)
-            ? 'additional-field '
-            : '';
+        let additionalClass = blueprintField.styling.includes(StructureTypes.ADDITIONAL)
+            ? `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/single-fields/text-field.js

@@ -16,6 +16,7 @@ let TextField = class TextField extends BaseField {
         @focus="${() => (this.touched = true)}"
         ?readonly="${this.isReadonly}"
         ?invalid="${this.errorMessage}"
+        name="${this.name}"
         error-message="${this.errorMessage}"
       >
       </etools-textarea>

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

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

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

@@ -34,6 +34,7 @@ export var StructureTypes;
     StructureTypes["ABSTRACT"] = "abstract";
     StructureTypes["COLLAPSED"] = "collapse";
     StructureTypes["ATTACHMENTS_BUTTON"] = "floating_attachments";
+    StructureTypes["MANDATORY_WARNING"] = "mandatory_warning";
 })(StructureTypes || (StructureTypes = {}));
 let FormAbstractGroup = class FormAbstractGroup extends LitElement {
     /**
@@ -133,6 +134,7 @@ let FormAbstractGroup = class FormAbstractGroup extends LitElement {
         return html `
       <field-renderer
         .field="${blueprintField}"
+        .language="${this.language}"
         ?readonly="${live(this.isReadonly())}"
         .value="${this.value && this.value[blueprintField.name]}"
         .validations="${blueprintField.validations.map((validation) => this.metadata.validations[validation])}"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unicef-polymer/etools-form-builder",
   "description": "Etools FM Form Builder components",
-  "version": "3.0.0-rc.22",
+  "version": "3.0.0-rc.24",
   "contributors": [
     "eTools Team"
   ],
@@ -38,7 +38,7 @@
     "@unicef-polymer/etools-unicef": ">=1.0.0"
   },
   "devDependencies": {
-    "@unicef-polymer/etools-unicef": "^1.0.0-rc.80",
+    "@unicef-polymer/etools-unicef": "^1.0.0-rc.64",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
     "@typescript-eslint/typescript-estree": "^5.7.0",