@unicef-polymer/etools-form-builder 4.0.0 → 4.0.2

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

@@ -6,6 +6,7 @@ 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 '@unicef-polymer/etools-unicef/src/etools-info-tooltip/etools-info-tooltip';
 import { getTranslation } from '../lib/utils/translate';
 let FieldRendererComponent = class FieldRendererComponent extends LitElement {
     constructor() {
@@ -31,113 +32,113 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
         const mandatoryClass = blueprintField.styling.includes(StructureTypes.MANDATORY_WARNING)
             ? 'mandatory_warning '
             : '';
-        return html `
-      <div class="${`${additionalClass}${wideClass}${mandatoryClass}finding-container`}">
+        return html `
+      <div class="${`${additionalClass}${wideClass}${mandatoryClass}finding-container`}">
         ${blueprintField.repeatable
             ? this.renderRepeatableField(blueprintField, !!mandatoryClass)
-            : this.renderStandardField(blueprintField, !!mandatoryClass, isAdditionalField)}
-      </div>
+            : this.renderStandardField(blueprintField, !!mandatoryClass, isAdditionalField)}
+      </div>
     `;
     }
-    renderStandardField({ input_type, label, help_text, required, placeholder, styling, name }, isMandatory = false, isAdditionalField = false) {
+    renderStandardField({ input_type, label, help_text, required, placeholder, styling, name, tooltip }, isMandatory = false, isAdditionalField = false) {
         var _a, _b, _c, _d, _e;
         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}"
-            .name="${name}"
-            .value="${this.value}"
-            .validators="${this.validations}"
-            .errorMessage="${this.errorMessage}"
-            .defaultValue="${(_a = this.field) === null || _a === void 0 ? void 0 : _a.default_value}"
-            .showRichEditor="${isAdditionalField}"
-          >
-            ${this.renderFieldLabel(label, help_text, isMandatory)}
-          </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}"
+            .showRichEditor="${isAdditionalField}"
+          >
+            ${this.renderFieldLabel(label, help_text, isMandatory, tooltip)}
+          </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}"
-            .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>
+                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, tooltip)}
+          </number-field>
         `;
             case FieldTypes.BOOL_TYPE:
-                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>
+                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}"
-            .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>
+                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, tooltip)}
+          </scale-field>
         `;
             case FieldTypes.MULTIPLE_CHOICE_TYPE:
-                return html `
-          <choice-field
-            .options="${this.options}"
-            ?is-readonly="${this.readonly}"
-            ?required="${required}"
-            .placeholder="${placeholder}"
-            .value="${this.value}"
-            .name="${name}"
-            .validators="${this.validations}"
-            .errorMessage="${this.errorMessage}"
-            .defaultValue="${(_e = this.field) === null || _e === void 0 ? void 0 : _e.default_value}"
-          >
-            ${this.renderFieldLabel(label, help_text, isMandatory)}
-          </choice-field>
+                return html `
+          <choice-field
+            .options="${this.options}"
+            ?is-readonly="${this.readonly}"
+            ?required="${required}"
+            .placeholder="${placeholder}"
+            .value="${this.value}"
+            .name="${name}"
+            .validators="${this.validations}"
+            .errorMessage="${this.errorMessage}"
+            .defaultValue="${(_e = this.field) === null || _e === void 0 ? void 0 : _e.default_value}"
+          >
+            ${this.renderFieldLabel(label, help_text, isMandatory, tooltip)}
+          </choice-field>
         `;
             case FieldTypes.FILE_TYPE:
-                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>
+                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, tooltip)}
+          </attachments-field>
         `;
             default:
                 console.warn(`FormBuilderGroup: Unknown field type: ${input_type}`);
@@ -146,105 +147,115 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
     }
     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>
+            ? 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) {
+    renderRepeatableField({ input_type, label, help_text, required, placeholder, styling, tooltip }, isMandatory = false) {
         var _a, _b, _c, _d;
         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, isMandatory)}
-          </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, tooltip)}
+          </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, isMandatory)}
-          </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, tooltip)}
+          </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, isMandatory)}
-          </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, tooltip)}
+          </repeatable-scale-field>
         `;
             case FieldTypes.MULTIPLE_CHOICE_TYPE:
-                return html `
-          <repeatable-choice-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="${(_d = this.field) === null || _d === void 0 ? void 0 : _d.default_value}"
-          >
-            ${this.renderFieldLabel(label, help_text, isMandatory)}
-          </repeatable-choice-field>
+                return html `
+          <repeatable-choice-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="${(_d = this.field) === null || _d === void 0 ? void 0 : _d.default_value}"
+          >
+            ${this.renderFieldLabel(label, help_text, isMandatory, tooltip)}
+          </repeatable-choice-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, isMandatory)}
-          </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, tooltip)}
+          </repeatable-attachments-field>
         `;
             default:
                 console.warn(`FormBuilderGroup: Unknown field type: ${input_type}`);
                 return html ``;
         }
     }
-    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>
+    renderFieldLabel(label, helperText, isMandatory = false, tooltip) {
+        return html `
+      <div class="layout vertical question-container">
+        <div class="question-text">
+          ${this.renderTooltip(isMandatory)}
+          ${tooltip
+            ? html `
+                <etools-info-tooltip hoist to="body" class="question-tooltip">
+                  <span slot="field">${label}</span>
+                  <span slot="message">${tooltip}</span>
+                </etools-info-tooltip>
+              `
+            : html `${label}`}
+        </div>
+        <div class="question-details">${helperText}</div>
+      </div>
     `;
     }
     static get styles() {
@@ -252,38 +263,41 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
         return [
             FlexLayoutClasses,
             FormBuilderCardStyles,
-            css `
-        .additional-field {
-          padding-top: 15px;
-          padding-bottom: 20px;
-        }
-        .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: 600;
-        }
-        .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;
-          }
-        }
+            css `
+        .additional-field {
+          padding-top: 15px;
+          padding-bottom: 20px;
+        }
+        .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: 600;
+        }
+        .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);
+          }
+        }
+        .question-tooltip {
+          align-items: start;
+        }
+        @media print {
+          :host {
+            break-inside: avoid;
+          }
+        }
       `
         ];
     }