@unicef-polymer/etools-form-builder 2.1.9 → 3.0.0-rc.10

package/README.md

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

package/dist/form-attachments-popup/form-attachments-popup.d.ts

@@ -1,12 +1,10 @@
-import '@unicef-polymer/etools-dialog/etools-dialog';
-import '@unicef-polymer/etools-upload/etools-upload-multi';
-import '@unicef-polymer/etools-dropdown/etools-dropdown';
-import '@polymer/paper-button/paper-button';
-import '@polymer/iron-icons/iron-icons';
-import { CSSResultArray, LitElement, TemplateResult } from 'lit-element';
+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 { CSSResultArray, LitElement, TemplateResult } from 'lit';
 import { GenericObject } from '../lib/types/global.types';
 import { BlueprintMetadata } from '../lib/types/form-builder.types';
-export declare type FormBuilderAttachmentsPopupData = {
+export type FormBuilderAttachmentsPopupData = {
     attachments: StoredAttachment[];
     metadata: BlueprintMetadata;
     title: string;
@@ -14,14 +12,14 @@ export declare type FormBuilderAttachmentsPopupData = {
     computedPath: string[];
     errors: GenericObject[];
 };
-export declare type StoredAttachment = {
+export type StoredAttachment = {
     attachment: string | number;
     filename: string;
     file_type: number | null;
     url?: string;
     composedPath?: string[];
 };
-export declare type UploadedAttachment = {
+export type UploadedAttachment = {
     id: number;
     object_link: string;
     file_type: string;
@@ -31,18 +29,18 @@ export declare type UploadedAttachment = {
     created: string;
     attachment: number;
 };
-export declare type OfflineSavedAttachment = {
+export type OfflineSavedAttachment = {
     id: string;
     filetype: string;
     filename: string;
     extraInfo: string[];
     unsynced: boolean;
 };
-export declare type UploadFinishedDetails = {
+export type UploadFinishedDetails = {
     success: (UploadedAttachment | OfflineSavedAttachment)[];
     error: any[];
 };
-export declare type SingleUploadFinishedDetails = {
+export type SingleUploadFinishedDetails = {
     success: UploadedAttachment | OfflineSavedAttachment;
     error: any[];
 };

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

@@ -1,24 +1,33 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import '@unicef-polymer/etools-dialog/etools-dialog';
-import '@unicef-polymer/etools-upload/etools-upload-multi';
-import '@unicef-polymer/etools-dropdown/etools-dropdown';
-import '@polymer/paper-button/paper-button';
-import '@polymer/iron-icons/iron-icons';
-import { css, customElement, LitElement, property, query } from 'lit-element';
+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 { deleteFileFromDexie } from '@unicef-polymer/etools-unicef/src/etools-upload/offline/dexie-operations';
+import { css, 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 { deleteFileFromDexie } from '@unicef-polymer/etools-upload/offline/dexie-operations';
 import { getTranslation } from '../lib/utils/translate';
 let FormAttachmentsPopup = class FormAttachmentsPopup extends LitElement {
+    set dialogData({ attachments, title, metadata, readonly, computedPath, errors }) {
+        this.popupTitle = title;
+        this.attachments = clone(attachments) || [];
+        this.originalAttachments = clone(attachments) || [];
+        this.metadata = clone(metadata);
+        this.readonly = Boolean(readonly);
+        this.computedPath = computedPath;
+        this.errors = clone(errors) || [];
+    }
+    get uploadUrl() {
+        return AttachmentsHelper.uploadUrl;
+    }
+    get jwtLocalStorageKey() {
+        return AttachmentsHelper.jwtLocalStorageKey;
+    }
     constructor() {
         super();
         this.dialogOpened = true;
@@ -41,21 +50,6 @@ let FormAttachmentsPopup = class FormAttachmentsPopup extends LitElement {
             this.language = window.localStorage.defaultLanguage || 'en';
         }
     }
-    set dialogData({ attachments, title, metadata, readonly, computedPath, errors }) {
-        this.popupTitle = title;
-        this.attachments = clone(attachments) || [];
-        this.originalAttachments = clone(attachments) || [];
-        this.metadata = clone(metadata);
-        this.readonly = Boolean(readonly);
-        this.computedPath = computedPath;
-        this.errors = clone(errors) || [];
-    }
-    get uploadUrl() {
-        return AttachmentsHelper.uploadUrl;
-    }
-    get jwtLocalStorageKey() {
-        return AttachmentsHelper.jwtLocalStorageKey;
-    }
     render() {
         return template.call(this);
     }
@@ -179,54 +173,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-attachments-popup/form-attachments-popup.tpl.d.ts

@@ -1,3 +1,7 @@
 import { FormAttachmentsPopup } from './form-attachments-popup';
-import { TemplateResult } from 'lit-html';
+import { TemplateResult } from 'lit';
+import '@unicef-polymer/etools-unicef/src/etools-dialog/etools-dialog.js';
+import '@unicef-polymer/etools-unicef/src/etools-dropdown/etools-dropdown.js';
+import '@unicef-polymer/etools-unicef/src/etools-upload/etools-upload-multi';
+import '@unicef-polymer/etools-unicef/src/etools-button/etools-button';
 export declare function template(this: FormAttachmentsPopup): TemplateResult;

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

@@ -1,91 +1,102 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { InputStyles } from '../lib/styles/input-styles';
 import { DialogStyles } from '../lib/styles/dialog.styles';
 import { getTranslation } from '../lib/utils/translate';
+import '@unicef-polymer/etools-unicef/src/etools-dialog/etools-dialog.js';
+import '@unicef-polymer/etools-unicef/src/etools-dropdown/etools-dropdown.js';
+import '@unicef-polymer/etools-unicef/src/etools-upload/etools-upload-multi';
+import '@unicef-polymer/etools-unicef/src/etools-button/etools-button';
 export function template() {
     var _a;
-    return html `
-    ${InputStyles} ${DialogStyles}
-    <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 `
+    ${InputStyles} ${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">
-                <iron-icon class="file-icon" icon="attachment"></iron-icon>
-                <span class="filename" title="${attachment.filename}">${attachment.filename}</span>
-              </div>
-
-              <!--         Download Button         -->
-              <paper-button
-                ?hidden="${!attachment.url}"
-                class="download-button file-selector__download"
-                @tap="${() => this.downloadFile(attachment)}"
-              >
-                <iron-icon icon="cloud-download" class="dw-icon"></iron-icon>
-                ${getTranslation(this.language, 'DOWNLOAD')}
-              </paper-button>
-
-              <!--        Delete Button          -->
-              <paper-button
-                class="delete-button file-selector__delete"
-                ?hidden="${this.readonly}"
-                @tap="${() => this.deleteAttachment(index)}"
-              >
-                ${getTranslation(this.language, 'DELETE')}
-              </paper-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>
   `;
 }

package/dist/form-fields/abstract-field-base.class.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultArray, LitElement, TemplateResult } from 'lit-element';
+import { CSSResultArray, LitElement, TemplateResult } from 'lit';
 import { FieldValidator } from '../lib/utils/validations.helper';
 /**
  * Class that contains common properties and methods for single and repeatable fields