@unicef-polymer/etools-form-builder 2.1.8 → 3.0.0-rc.1

package/dist/form-fields/repeatable-fields/repeatable-attachment-field.js

@@ -1,209 +1,212 @@
-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-upload/etools-upload';
-import { RepeatableBaseField } from './repeatable-base-field';
-import { AttachmentsHelper } from '../../form-attachments-popup';
-import { html, css, customElement } from 'lit-element';
-import { fireEvent } from '../../lib/utils/fire-custom-event';
-import { SharedStyles } from '../../lib/styles/shared-styles';
-import { AttachmentsStyles } from '../../lib/styles/attachments.styles';
-import { getTranslation } from '../../lib/utils/translate';
-let RepeatableAttachmentField = class RepeatableAttachmentField extends RepeatableBaseField {
-    constructor() {
-        super(...arguments);
-        this.computedPath = [];
-    }
-    get uploadUrl() {
-        return AttachmentsHelper.uploadUrl;
-    }
-    get jwtLocalStorageKey() {
-        return AttachmentsHelper.jwtLocalStorageKey;
-    }
-    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">
-          ${values.map((value, index) => value
-            ? html `
-                  <div class="layout horizontal file-container">
-                    <!--        File name component          -->
-                    <div class="filename-container file-selector__filename">
-                      <iron-icon class="file-icon" icon="attachment"></iron-icon>
-                      <span class="filename" title="${value.filename}">${value.filename}</span>
-                    </div>
-
-                    <!--         Download Button         -->
-                    <paper-button
-                      ?hidden="${!value.url}"
-                      class="download-button file-selector__download"
-                      @tap="${() => this.downloadFile(value)}"
-                    >
-                      <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.isReadonly}"
-                      @tap="${() => this.removeControl(index)}"
-                    >
-                      ${getTranslation(this.language, 'DELETE')}
-                    </paper-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>
-    `;
-    }
-    controlTemplate() {
-        return html ``;
-    }
-    customValidation() {
-        return null;
-    }
-    attachmentsUploaded({ success, error }) {
-        success === null || success === void 0 ? void 0 : success.forEach((file, index) => {
-            var _a, _b;
-            const newIndex = ((_b = Number((_a = this.editedValues) === null || _a === void 0 ? void 0 : _a.length)) !== null && _b !== void 0 ? _b : 0) + index;
-            if (this.isUploadedAttachment(file)) {
-                this.valueChanged({
-                    url: file.file_link,
-                    attachment: file.id,
-                    filename: file.filename,
-                    file_type: null
-                }, newIndex);
-            }
-            else if (this.isOfflineSavedAttachment(file)) {
-                this.valueChanged({
-                    attachment: file.id,
-                    filename: file.filename,
-                    composedPath: [],
-                    file_type: null
-                }, newIndex);
-            }
-            else {
-                console.warn('Missing fields in parsed attachment');
-            }
-        });
-        if (error && error.length) {
-            console.error(error);
-            fireEvent(this, 'toast', { text: 'Can not upload attachments. Please try again later' });
-        }
-    }
-    downloadFile(attachment) {
-        if (!(attachment === null || attachment === void 0 ? void 0 : attachment.url)) {
-            return;
-        }
-        const link = document.createElement('a');
-        link.target = '_blank';
-        link.href = attachment.url;
-        link.click();
-        window.URL.revokeObjectURL(attachment.url);
-    }
-    isUploadedAttachment(attachment) {
-        return (attachment.hasOwnProperty('filename') &&
-            attachment.hasOwnProperty('id') &&
-            attachment.hasOwnProperty('file_link') &&
-            !attachment.hasOwnProperty('unsynced'));
-    }
-    isOfflineSavedAttachment(attachment) {
-        return (attachment.hasOwnProperty('filename') && attachment.hasOwnProperty('id') && attachment.hasOwnProperty('unsynced'));
-    }
-    static get styles() {
-        // language=CSS
-        return [
-            ...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;
-          }
-        }
-      `
-        ];
-    }
-};
-RepeatableAttachmentField = __decorate([
-    customElement('repeatable-attachments-field')
-], RepeatableAttachmentField);
-export { RepeatableAttachmentField };
+import { __decorate } from "tslib";
+import '@unicef-polymer/etools-unicef/src/etools-upload/etools-upload';
+import { RepeatableBaseField } from './repeatable-base-field';
+import { AttachmentsHelper } from '../../form-attachments-popup';
+import { css, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { fireEvent } from '../../lib/utils/fire-custom-event';
+import { SharedStyles } from '../../lib/styles/shared-styles';
+import { AttachmentsStyles } from '../../lib/styles/attachments.styles';
+import { getTranslation } from '../../lib/utils/translate';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import '@unicef-polymer/etools-unicef/src/etools-upload/etools-upload-multi';
+import { buttonsStyles } from '@unicef-polymer/etools-unicef/src/styles/button-styles';
+let RepeatableAttachmentField = class RepeatableAttachmentField extends RepeatableBaseField {
+    constructor() {
+        super(...arguments);
+        this.computedPath = [];
+    }
+    get uploadUrl() {
+        return AttachmentsHelper.uploadUrl;
+    }
+    get jwtLocalStorageKey() {
+        return AttachmentsHelper.jwtLocalStorageKey;
+    }
+    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">
+          ${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         -->
+                    <sl-button
+                      class="neutral"
+                      variant="text"
+                      ?hidden="${!value.url}"
+                      class="download-button file-selector__download"
+                      @click="${this.downloadFile(value)}"
+                    >
+                      <etools-icon name="cloud-download" class="dw-icon" slot="prefix"></etools-icon>
+                      ${getTranslation(this.language, 'DOWNLOAD')}
+                    </sl-button>
+
+                    <!--        Delete Button          -->
+                    <sl-button
+                      variant="danger"
+                      class="delete-button file-selector__delete"
+                      ?hidden="${this.isReadonly}"
+                      @click="${this.removeControl(index)}"
+                    >
+                      ${getTranslation(this.language, 'DELETE')}
+                    </sl-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>
+    `;
+    }
+    controlTemplate() {
+        return html ``;
+    }
+    customValidation() {
+        return null;
+    }
+    attachmentsUploaded({ success, error }) {
+        success === null || success === void 0 ? void 0 : success.forEach((file, index) => {
+            var _a, _b;
+            const newIndex = ((_b = Number((_a = this.editedValues) === null || _a === void 0 ? void 0 : _a.length)) !== null && _b !== void 0 ? _b : 0) + index;
+            if (this.isUploadedAttachment(file)) {
+                this.valueChanged({
+                    url: file.file_link,
+                    attachment: file.id,
+                    filename: file.filename,
+                    file_type: null
+                }, newIndex);
+            }
+            else if (this.isOfflineSavedAttachment(file)) {
+                this.valueChanged({
+                    attachment: file.id,
+                    filename: file.filename,
+                    composedPath: [],
+                    file_type: null
+                }, newIndex);
+            }
+            else {
+                console.warn('Missing fields in parsed attachment');
+            }
+        });
+        if (error && error.length) {
+            console.error(error);
+            fireEvent(this, 'toast', { text: 'Can not upload attachments. Please try again later' });
+        }
+    }
+    downloadFile(attachment) {
+        if (!(attachment === null || attachment === void 0 ? void 0 : attachment.url)) {
+            return;
+        }
+        const link = document.createElement('a');
+        link.target = '_blank';
+        link.href = attachment.url;
+        link.click();
+        window.URL.revokeObjectURL(attachment.url);
+    }
+    isUploadedAttachment(attachment) {
+        return (attachment.hasOwnProperty('filename') &&
+            attachment.hasOwnProperty('id') &&
+            attachment.hasOwnProperty('file_link') &&
+            !attachment.hasOwnProperty('unsynced'));
+    }
+    isOfflineSavedAttachment(attachment) {
+        return (attachment.hasOwnProperty('filename') && attachment.hasOwnProperty('id') && attachment.hasOwnProperty('unsynced'));
+    }
+    static get styles() {
+        // language=CSS
+        return [
+            ...RepeatableBaseField.styles,
+            SharedStyles,
+            AttachmentsStyles,
+            buttonsStyles,
+            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;
+          }
+        }
+      `
+        ];
+    }
+};
+RepeatableAttachmentField = __decorate([
+    customElement('repeatable-attachments-field')
+], RepeatableAttachmentField);
+export { RepeatableAttachmentField };

package/dist/form-fields/repeatable-fields/repeatable-base-field.d.ts

@@ -1,20 +1,21 @@
-import { CSSResultArray, TemplateResult } from 'lit-element';
-import { AbstractFieldBaseClass } from '../abstract-field-base.class';
-export declare abstract class RepeatableBaseField<T> extends AbstractFieldBaseClass<T[]> {
-    set errorMessage(messages: (string | null)[]);
-    get errorMessage(): (string | null)[];
-    protected _errorMessage: (string | null)[];
-    protected editedValues: (T | null)[] | null;
-    protected render(): TemplateResult;
-    protected questionTemplate(): TemplateResult;
-    protected valueChanged(newValue: T, index: number): void;
-    protected setValue(value: (T | null)[]): void;
-    protected validateField(value: T[]): void;
-    protected validateField(value: T, index: number): void;
-    protected addNewField(): void;
-    protected removeControl(index: number): void;
-    protected getValues(): (T | null)[];
-    private isArrayData;
-    protected abstract controlTemplate(value: T | null, index: number): TemplateResult;
-    static get styles(): CSSResultArray;
-}
+import { CSSResultArray, TemplateResult } from 'lit';
+import '@unicef-polymer/etools-unicef/src/etools-icon-button/etools-icon-button';
+import { AbstractFieldBaseClass } from '../abstract-field-base.class';
+export declare abstract class RepeatableBaseField<T> extends AbstractFieldBaseClass<T[]> {
+    set errorMessage(messages: (string | null)[]);
+    get errorMessage(): (string | null)[];
+    protected _errorMessage: (string | null)[];
+    protected editedValues: (T | null)[] | null;
+    protected render(): TemplateResult;
+    protected questionTemplate(): TemplateResult;
+    protected valueChanged(newValue: T, index: number): void;
+    protected setValue(value: (T | null)[]): void;
+    protected validateField(value: T[]): void;
+    protected validateField(value: T, index: number): void;
+    protected addNewField(): void;
+    protected removeControl(index: number): void;
+    protected getValues(): (T | null)[];
+    private isArrayData;
+    protected abstract controlTemplate(value: T | null, index: number): TemplateResult;
+    static get styles(): CSSResultArray;
+}