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

package/README.md

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

package/dist/assets/translations.js

@@ -24,6 +24,8 @@ const translations = {
         PARTNER: 'Partner',
         CP_OUTPUT: 'CP Output',
         PD_SPD: 'PD/SPD',
+        GPD: 'GPD',
+        EWP_ACTIVITY: 'Key Interventions and Activities',
         TEXT_MUST_BE_LESS_CHARS: 'Text must be less than {0} character',
         DOES_NOT_MATCH_PATTERN: 'Does not match allowed pattern',
         NUMBER_MUST_BE_GREATER_THAN: 'Number must be greater than {0}',
@@ -74,6 +76,8 @@ const translations = {
         PARTNER: 'Partenaire',
         CP_OUTPUT: 'Sortie CP',
         PD_SPD: 'PD/SPD',
+        GPD: 'GPD',
+        EWP_ACTIVITY: 'Interventions et activités clés',
         TEXT_MUST_BE_LESS_CHARS: 'Le texte doit comporter moins de {0} caractères',
         DOES_NOT_MATCH_PATTERN: 'Ne correspond pas au modèle autorisé',
         NUMBER_MUST_BE_GREATER_THAN: 'Le nombre doit être supérieur à {0}',
@@ -124,6 +128,8 @@ const translations = {
         PARTNER: 'شريك',
         CP_OUTPUT: 'إخراج سي بي',
         PD_SPD: 'بي دي/SPD',
+        GPD: 'GPD',
+        EWP_ACTIVITY: 'التدخلات والأنشطة الرئيسية',
         TEXT_MUST_BE_LESS_CHARS: 'يجب أن يكون النص أقل من {0} حرف',
         DOES_NOT_MATCH_PATTERN: 'لا يتطابق مع النمط المسموح به',
         NUMBER_MUST_BE_GREATER_THAN: 'يجب أن يكون الرقم أكبر من {0}',
@@ -174,6 +180,8 @@ const translations = {
         PARTNER: 'Pareja',
         CP_OUTPUT: 'Salida CP',
         PD_SPD: 'PD/SPD',
+        GPD: 'GPD',
+        EWP_ACTIVITY: 'Intervenciones y actividades clave',
         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}',

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

@@ -64,96 +64,96 @@ let FormAttachmentsPopup = class FormAttachmentsPopup extends LitElement {
     }
     render() {
         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">
+        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>
+            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>
+        })}
+
+          <!--     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>
     `;
     }
     /**
@@ -276,54 +276,54 @@ let FormAttachmentsPopup = class FormAttachmentsPopup extends LitElement {
         return [
             SharedStyles,
             AttachmentsStyles,
-            css `
-        .file-selector__type-dropdown {
-          flex-basis: 25%;
-          padding-left: 8px;
-          padding-right: 8px;
-        }
-        .file-selector__filename {
-          flex-basis: 35%;
-        }
-        .file-selector__download {
-          flex-basis: 10%;
-        }
-        .file-selector__delete {
-          flex-basis: 10%;
-        }
-        .file-selector-container.with-type-dropdown {
-          flex-wrap: nowrap;
-        }
-        .popup-container {
-          padding: 12px 12px 0;
-        }
-        @media (max-width: 380px) {
-          .file-selector-container.with-type-dropdown {
-            justify-content: center;
-          }
-          .file-selector-container.with-type-dropdown etools-dropdown.type-dropdown {
-            flex-basis: 90%;
-          }
-          .file-selector__filename {
-            flex-basis: 90%;
-          }
-          .file-selector__download {
-            flex-basis: 5%;
-          }
-          .file-selector__delete {
-            flex-basis: 5%;
-          }
-        }
-        @media (max-width: 600px) {
-          etools-dropdown {
-            padding: 0;
-          }
-          .file-selector-container.with-type-dropdown {
-            border-bottom: 1px solid lightgrey;
-            flex-wrap: wrap;
-            padding-bottom: 10px;
-          }
-        }
+            css `
+        .file-selector__type-dropdown {
+          flex-basis: 25%;
+          padding-left: 8px;
+          padding-right: 8px;
+        }
+        .file-selector__filename {
+          flex-basis: 35%;
+        }
+        .file-selector__download {
+          flex-basis: 10%;
+        }
+        .file-selector__delete {
+          flex-basis: 10%;
+        }
+        .file-selector-container.with-type-dropdown {
+          flex-wrap: nowrap;
+        }
+        .popup-container {
+          padding: 12px 12px 0;
+        }
+        @media (max-width: 380px) {
+          .file-selector-container.with-type-dropdown {
+            justify-content: center;
+          }
+          .file-selector-container.with-type-dropdown etools-dropdown.type-dropdown {
+            flex-basis: 90%;
+          }
+          .file-selector__filename {
+            flex-basis: 90%;
+          }
+          .file-selector__download {
+            flex-basis: 5%;
+          }
+          .file-selector__delete {
+            flex-basis: 5%;
+          }
+        }
+        @media (max-width: 600px) {
+          etools-dropdown {
+            padding: 0;
+          }
+          .file-selector-container.with-type-dropdown {
+            border-bottom: 1px solid lightgrey;
+            flex-wrap: wrap;
+            padding-bottom: 10px;
+          }
+        }
       `
         ];
     }

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

@@ -50,11 +50,11 @@ export class AbstractFieldBaseClass extends LitElement {
         this.language = e.detail.language;
     }
     render() {
-        return html `
-      <div class="finding-container">
-        <div class="question"><slot>${this.questionTemplate()}</slot></div>
-        <div class="question-control">${this.controlTemplate()}</div>
-      </div>
+        return html `
+      <div class="finding-container">
+        <div class="question"><slot>${this.questionTemplate()}</slot></div>
+        <div class="question-control">${this.controlTemplate()}</div>
+      </div>
     `;
     }
     questionTemplate() {
@@ -79,101 +79,101 @@ export class AbstractFieldBaseClass extends LitElement {
         // language=CSS
         return [
             FlexLayoutClasses,
-            css `
-        :host {
-          display: block;
-          width: 100%;
-          padding: 0 25px 0 45px;
-          box-sizing: border-box;
-        }
-
-        .finding-container {
-          width: 100%;
-          display: flex;
-        }
-        .flex-wrapping {
-          flex-wrap: wrap;
-        }
-
-        :host(.wide) .finding-container {
-          flex-direction: column;
-        }
-
-        :host(.wide) .question {
-          min-height: 0;
-        }
-
-        .question-control,
-        .question {
-          min-width: 0;
-          min-height: 57px;
-          display: flex;
-          align-items: center;
-        }
-        .question {
-          flex: 2;
-        }
-        .question-control {
-          flex: 3;
-        }
-        .add-button {
-          padding: 3px;
-          margin: 10px;
-          background: transparent;
-          color: var(--primary-color);
-          border: 1px solid;
-        }
-
-        .full-width {
-          width: 100%;
-        }
-
-        .question-text {
-          font-weight: 500;
-          font-size: var(--etools-font-size-13, 13px);
-          color: var(--primary-text-color);
-        }
-
-        etools-icon[name='close'] {
-          cursor: pointer;
-        }
-
-        .error-text {
-          color: var(--error-color);
-          font-size: var(--etools-font-size-12, 12px);
-        }
-
-        @media (max-width: 1080px) {
-          :host {
-            padding: 0 15px;
-          }
-          .finding-container {
-            flex-direction: column;
-          }
-          .question,
-          .question-control {
-            flex: 0 1 auto;
-          }
-        }
-
-        @media print {
-          .question-control {
-            align-items: start;
-          }
-
-          :host(text-field) .question-control {
-            min-height: 150px;
-          }
-
-          .question-control .container etools-radio-group {
-            flex-direction: column;
-            opacity: 1 !important;
-          }
-
-          .finding-container {
-            flex-direction: column;
-          }
-        }
+            css `
+        :host {
+          display: block;
+          width: 100%;
+          padding: 0 25px 0 45px;
+          box-sizing: border-box;
+        }
+
+        .finding-container {
+          width: 100%;
+          display: flex;
+        }
+        .flex-wrapping {
+          flex-wrap: wrap;
+        }
+
+        :host(.wide) .finding-container {
+          flex-direction: column;
+        }
+
+        :host(.wide) .question {
+          min-height: 0;
+        }
+
+        .question-control,
+        .question {
+          min-width: 0;
+          min-height: 57px;
+          display: flex;
+          align-items: center;
+        }
+        .question {
+          flex: 2;
+        }
+        .question-control {
+          flex: 3;
+        }
+        .add-button {
+          padding: 3px;
+          margin: 10px;
+          background: transparent;
+          color: var(--primary-color);
+          border: 1px solid;
+        }
+
+        .full-width {
+          width: 100%;
+        }
+
+        .question-text {
+          font-weight: 500;
+          font-size: var(--etools-font-size-13, 13px);
+          color: var(--primary-text-color);
+        }
+
+        etools-icon[name='close'] {
+          cursor: pointer;
+        }
+
+        .error-text {
+          color: var(--error-color);
+          font-size: var(--etools-font-size-12, 12px);
+        }
+
+        @media (max-width: 1080px) {
+          :host {
+            padding: 0 15px;
+          }
+          .finding-container {
+            flex-direction: column;
+          }
+          .question,
+          .question-control {
+            flex: 0 1 auto;
+          }
+        }
+
+        @media print {
+          .question-control {
+            align-items: start;
+          }
+
+          :host(text-field) .question-control {
+            min-height: 150px;
+          }
+
+          .question-control .container etools-radio-group {
+            flex-direction: column;
+            opacity: 1 !important;
+          }
+
+          .finding-container {
+            flex-direction: column;
+          }
+        }
       `
         ];
     }

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

@@ -4,6 +4,7 @@ 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';
+import '@unicef-polymer/etools-unicef/src/etools-info-tooltip/etools-info-tooltip';
 export declare class FieldRendererComponent extends LitElement {
     field: BlueprintField;
     value: any;
@@ -16,9 +17,9 @@ export declare class FieldRendererComponent extends LitElement {
     defaultValue: any;
     render(): TemplateResult;
     renderField(blueprintField: BlueprintField): TemplateResult;
-    renderStandardField({ input_type, label, help_text, required, placeholder, styling, name }: BlueprintField, isMandatory?: boolean, isAdditionalField?: boolean): TemplateResult;
+    renderStandardField({ input_type, label, help_text, required, placeholder, styling, name, tooltip }: BlueprintField, isMandatory?: boolean, isAdditionalField?: 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;
+    renderRepeatableField({ input_type, label, help_text, required, placeholder, styling, tooltip }: BlueprintField, isMandatory?: boolean): TemplateResult;
+    renderFieldLabel(label: string, helperText: string, isMandatory?: boolean, tooltip?: string): TemplateResult;
     static get styles(): CSSResultArray;
 }