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

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,179 +23,194 @@ 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 ' : '';
-        return html `
-      <div class="${`${additionalClass}${wideClass}finding-container`}">
+        const mandatoryClass = blueprintField.styling.includes(StructureTypes.MANDATORY_WARNING)
+            ? 'mandatory_warning '
+            : '';
+        return html `
+      <div class="${`${additionalClass}${wideClass}${mandatoryClass}finding-container`}">
         ${blueprintField.repeatable
-            ? this.renderRepeatableField(blueprintField)
-            : this.renderStandardField(blueprintField)}
-      </div>
+            ? 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) {
             case FieldTypes.TEXT_TYPE:
-                return html `
-          <text-field
-            class="${isWide ? 'wide' : ''}"
-            ?is-readonly="${this.readonly}"
-            ?required="${required}"
-            .placeholder="${placeholder}"
-            .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)}
-          </text-field>
+                return html `
+          <text-field
+            class="${isWide ? 'wide' : ''}"
+            ?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, isMandatory)}
+          </text-field>
         `;
             case FieldTypes.NUMBER_TYPE:
             case FieldTypes.NUMBER_FLOAT_TYPE:
             case FieldTypes.NUMBER_INTEGER_TYPE:
-                return html `
-          <number-field
-            ?is-readonly="${this.readonly}"
-            ?required="${required}"
-            .placeholder="${placeholder}"
-            .value="${this.value}"
-            .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)}
-          </number-field>
+                return html `
+          <number-field
+            ?is-readonly="${this.readonly}"
+            ?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, isMandatory)}
+          </number-field>
         `;
             case FieldTypes.BOOL_TYPE:
-                return html `
-          <boolean-field
-            ?is-readonly="${this.readonly}"
-            ?required="${required}"
-            .value="${this.value}"
-            .validators="${this.validations}"
-            .errorMessage="${this.errorMessage}"
-            .defaultValue="${(_c = this.field) === null || _c === void 0 ? void 0 : _c.default_value}"
-          >
-            ${this.renderFieldLabel(label, help_text)}
-          </boolean-field>
+                return html `
+          <boolean-field
+            ?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, isMandatory)}
+          </boolean-field>
         `;
             case FieldTypes.SCALE_TYPE:
-                return html `
-          <scale-field
-            .options="${this.options}"
-            ?is-readonly="${this.readonly}"
-            ?required="${required}"
-            .placeholder="${placeholder}"
-            .value="${this.value}"
-            .validators="${this.validations}"
-            .errorMessage="${this.errorMessage}"
-            .defaultValue="${(_d = this.field) === null || _d === void 0 ? void 0 : _d.default_value}"
-          >
-            ${this.renderFieldLabel(label, help_text)}
-          </scale-field>
+                return html `
+          <scale-field
+            .options="${this.options}"
+            ?is-readonly="${this.readonly}"
+            ?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, isMandatory)}
+          </scale-field>
         `;
             case FieldTypes.FILE_TYPE:
-                return html `
-          <attachments-field
-            ?is-readonly="${this.readonly}"
-            ?required="${required}"
-            .placeholder="${placeholder}"
-            .value="${this.value}"
-            .validators="${this.validations}"
-            .errorMessage="${this.errorMessage}"
-            .computedPath="${this.computedPath}"
-          >
-            ${this.renderFieldLabel(label, help_text)}
-          </attachments-field>
+                return html `
+          <attachments-field
+            ?is-readonly="${this.readonly}"
+            ?required="${required}"
+            .placeholder="${placeholder}"
+            .value="${this.value}"
+            .name="${name}"
+            .validators="${this.validations}"
+            .errorMessage="${this.errorMessage}"
+            .computedPath="${this.computedPath}"
+          >
+            ${this.renderFieldLabel(label, help_text, isMandatory)}
+          </attachments-field>
         `;
             default:
                 console.warn(`FormBuilderGroup: Unknown field type: ${input_type}`);
                 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) {
             case FieldTypes.TEXT_TYPE:
-                return html `
-          <repeatable-text-field
-            class="${isWide ? 'wide' : ''}"
-            ?is-readonly="${this.readonly}"
-            ?required="${required}"
-            .placeholder="${placeholder}"
-            .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)}
-          </repeatable-text-field>
+                return html `
+          <repeatable-text-field
+            class="${isWide ? 'wide' : ''}"
+            ?is-readonly="${this.readonly}"
+            ?required="${required}"
+            .placeholder="${placeholder}"
+            .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, isMandatory)}
+          </repeatable-text-field>
         `;
             case FieldTypes.NUMBER_TYPE:
             case FieldTypes.NUMBER_FLOAT_TYPE:
             case FieldTypes.NUMBER_INTEGER_TYPE:
-                return html `
-          <repeatable-number-field
-            class="${isWide ? 'wide' : ''}"
-            ?is-readonly="${this.readonly}"
-            ?required="${required}"
-            .placeholder="${placeholder}"
-            .value="${this.value}"
-            .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)}
-          </repeatable-number-field>
+                return html `
+          <repeatable-number-field
+            class="${isWide ? 'wide' : ''}"
+            ?is-readonly="${this.readonly}"
+            ?required="${required}"
+            .placeholder="${placeholder}"
+            .value="${this.value}"
+            .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, isMandatory)}
+          </repeatable-number-field>
         `;
             case FieldTypes.SCALE_TYPE:
-                return html `
-          <repeatable-scale-field
-            class="${isWide ? 'wide' : ''}"
-            .options="${this.options}"
-            ?is-readonly="${this.readonly}"
-            ?required="${required}"
-            .placeholder="${placeholder}"
-            .value="${this.value}"
-            .validators="${this.validations}"
-            .errorMessage="${this.errorMessage}"
-            .defaultValue="${(_c = this.field) === null || _c === void 0 ? void 0 : _c.default_value}"
-          >
-            ${this.renderFieldLabel(label, help_text)}
-          </repeatable-scale-field>
+                return html `
+          <repeatable-scale-field
+            class="${isWide ? 'wide' : ''}"
+            .options="${this.options}"
+            ?is-readonly="${this.readonly}"
+            ?required="${required}"
+            .placeholder="${placeholder}"
+            .value="${this.value}"
+            .validators="${this.validations}"
+            .errorMessage="${this.errorMessage}"
+            .defaultValue="${(_c = this.field) === null || _c === void 0 ? void 0 : _c.default_value}"
+          >
+            ${this.renderFieldLabel(label, help_text, isMandatory)}
+          </repeatable-scale-field>
         `;
             case FieldTypes.FILE_TYPE:
-                return html `
-          <repeatable-attachments-field
-            ?is-readonly="${this.readonly}"
-            ?required="${required}"
-            .placeholder="${placeholder}"
-            .value="${this.value}"
-            .validators="${this.validations}"
-            .errorMessage="${this.errorMessage}"
-            .computedPath="${this.computedPath}"
-          >
-            ${this.renderFieldLabel(label, help_text)}
-          </repeatable-attachments-field>
+                return html `
+          <repeatable-attachments-field
+            ?is-readonly="${this.readonly}"
+            ?required="${required}"
+            .placeholder="${placeholder}"
+            .value="${this.value}"
+            .validators="${this.validations}"
+            .errorMessage="${this.errorMessage}"
+            .computedPath="${this.computedPath}"
+          >
+            ${this.renderFieldLabel(label, help_text, isMandatory)}
+          </repeatable-attachments-field>
         `;
             default:
                 console.warn(`FormBuilderGroup: Unknown field type: ${input_type}`);
                 return html ``;
         }
     }
-    renderFieldLabel(label, helperText) {
-        return html `
-      <div class="layout vertical question-container">
-        <div class="question-text">${label}</div>
-        <div class="question-details">${helperText}</div>
-      </div>
+    renderFieldLabel(label, helperText, isMandatory = false) {
+        return html `
+      <div class="layout vertical question-container">
+        <div class="question-text">${this.renderTooltip(isMandatory)}${label}</div>
+        <div class="question-details">${helperText}</div>
+      </div>
     `;
     }
     static get styles() {
@@ -200,29 +218,39 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
         return [
             FlexLayoutClasses,
             FormBuilderCardStyles,
-            css `
-        .additional-field {
-          padding-top: 15px;
-          padding-bottom: 20px;
-          background-color: var(--secondary-background-color);
-        }
-        .wide-field-container {
-          padding-bottom: 10px;
-        }
-        .wide-field-container .question-container {
-          min-height: 0;
-          padding: 7px 0 0;
-        }
-        .wide-field-container .question-text {
-          color: var(--secondary-text-color);
-          font-weight: 400;
-        }
-
-        @media print {
-          :host {
-            break-inside: avoid;
-          }
-        }
+            css `
+        .additional-field {
+          padding-top: 15px;
+          padding-bottom: 20px;
+          background-color: var(--secondary-background-color);
+        }
+        .wide-field-container {
+          padding-bottom: 10px;
+        }
+        .wide-field-container .question-container {
+          min-height: 0;
+          padding: 7px 0 0;
+        }
+        .wide-field-container .question-text {
+          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

@@ -24,55 +24,55 @@ let RepeatableAttachmentField = class RepeatableAttachmentField extends Repeatab
     render() {
         var _a;
         const values = this.getValues();
-        return html `
-      <div class="finding-container">
-        <div class="question layout start"><slot>${this.questionTemplate()}</slot></div>
-        <div class="question-control layout vertical center-justified start">
+        return html `
+      <div class="finding-container">
+        <div class="question layout start"><slot>${this.questionTemplate()}</slot></div>
+        <div class="question-control layout vertical center-justified start">
           ${values.map((value, index) => value
-            ? html `
-                  <div class="layout horizontal file-container">
-                    <!--        File name component          -->
-                    <div class="filename-container file-selector__filename">
-                      <etools-icon class="file-icon" name="attachment"></etools-icon>
-                      <span class="filename" title="${value.filename}">${value.filename}</span>
-                    </div>
-
-                    <!--         Download Button         -->
-                    <etools-button
-                      class="neutral download-button file-selector__download"
-                      variant="text"
-                      ?hidden="${!value.url}"
-                      @click="${() => this.downloadFile(value)}"
-                    >
-                      <etools-icon name="cloud-download" class="dw-icon" slot="prefix"></etools-icon>
-                      ${getTranslation(this.language, 'DOWNLOAD')}
-                    </etools-button>
-
-                    <!--        Delete Button          -->
-                    <etools-button
-                      variant="danger"
-                      class="file-selector__delete"
-                      ?hidden="${this.isReadonly}"
-                      @click="${() => this.removeControl(index)}"
-                    >
-                      ${getTranslation(this.language, 'DELETE')}
-                    </etools-button>
-                  </div>
+            ? html `
+                  <div class="layout horizontal file-container">
+                    <!--        File name component          -->
+                    <div class="filename-container file-selector__filename">
+                      <etools-icon class="file-icon" name="attachment"></etools-icon>
+                      <span class="filename" title="${value.filename}">${value.filename}</span>
+                    </div>
+
+                    <!--         Download Button         -->
+                    <etools-button
+                      class="neutral download-button file-selector__download"
+                      variant="text"
+                      ?hidden="${!value.url}"
+                      @click="${() => this.downloadFile(value)}"
+                    >
+                      <etools-icon name="cloud-download" class="dw-icon" slot="prefix"></etools-icon>
+                      ${getTranslation(this.language, 'DOWNLOAD')}
+                    </etools-button>
+
+                    <!--        Delete Button          -->
+                    <etools-button
+                      variant="danger"
+                      class="file-selector__delete"
+                      ?hidden="${this.isReadonly}"
+                      @click="${() => this.removeControl(index)}"
+                    >
+                      ${getTranslation(this.language, 'DELETE')}
+                    </etools-button>
+                  </div>
                 `
-            : '')}
-          <!--     Upload button     -->
-          <etools-upload-multi
-            class="with-padding"
-            activate-offline
-            ?hidden="${this.isReadonly}"
-            @upload-finished="${({ detail }) => this.attachmentsUploaded(detail)}"
-            .endpointInfo="${{ endpoint: this.uploadUrl, extraInfo: { composedPath: this.computedPath } }}"
-            .jwtLocalStorageKey="${this.jwtLocalStorageKey}"
-          >
-          </etools-upload-multi>
-          <div ?hidden="${!this.isReadonly || ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length)}">—</div>
-        </div>
-      </div>
+            : '')}
+          <!--     Upload button     -->
+          <etools-upload-multi
+            class="with-padding"
+            activate-offline
+            ?hidden="${this.isReadonly}"
+            @upload-finished="${({ detail }) => this.attachmentsUploaded(detail)}"
+            .endpointInfo="${{ endpoint: this.uploadUrl, extraInfo: { composedPath: this.computedPath } }}"
+            .jwtLocalStorageKey="${this.jwtLocalStorageKey}"
+          >
+          </etools-upload-multi>
+          <div ?hidden="${!this.isReadonly || ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length)}">—</div>
+        </div>
+      </div>
     `;
     }
     controlTemplate() {
@@ -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) {
@@ -135,70 +135,70 @@ let RepeatableAttachmentField = class RepeatableAttachmentField extends Repeatab
             ...RepeatableBaseField.styles,
             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;
-        }
-
-        .file-container {
-          padding: 8px 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;
+        }
+
+        .file-container {
+          padding: 8px 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;
+          }
+        }
       `
         ];
     }