@unicef-polymer/etools-form-builder 2.1.0 → 2.1.2

package/dist/form-groups/form-collapsed-card.js

@@ -1,253 +1,254 @@
-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 { html, property, customElement } from 'lit-element';
-import { clone } from 'ramda';
-import { fireEvent } from '../lib/utils/fire-custom-event';
-import { openDialog } from '../lib/utils/dialog';
-import { FormAbstractGroup, StructureTypes } from './form-abstract-group';
-import '../lib/additional-components/etools-fb-card';
-import '../lib/additional-components/confirmation-dialog';
-const PARTNER_KEY = 'partner';
-const OUTPUT_KEY = 'output';
-const INTERVENTION_KEY = 'intervention';
-let FormCollapsedCard = class FormCollapsedCard extends FormAbstractGroup {
-    constructor() {
-        super(...arguments);
-        this.isEditMode = false;
-        this._readonly = true;
-        this._value = {};
-        this.originalValue = {};
-    }
-    /**
-     * Overrides readonly property
-     * In collapsed card it must consider isEditMode property,
-     * components inside card are readonly if isEditMode is off or if card is readonly
-     */
-    set readonly(state) {
-        this._readonly = state;
-    }
-    get readonly() {
-        return this._readonly || !this.isEditMode;
-    }
-    /**
-     * Overrides errors setter
-     * In collapsed card it must consider isEditMode property,
-     * We must to enable isEditMode if errors comes from backend
-     */
-    set errors(errors) {
-        if (Array.isArray(errors)) {
-            fireEvent(this, 'toast', { text: errors[0] });
-            fireEvent(this, 'error-changed', { error: null });
-        }
-        else if (errors) {
-            this._errors = errors;
-        }
-        if (errors) {
-            this.isEditMode = true;
-        }
-    }
-    /**
-     * Overrides value property
-     * We need to save originalValue to have Cancel possibility in collapsed card.
-     * Don't override current edited value if isEditMode enabled
-     * (It can be happened if other sibling card or component updates their value during current card edition)
-     */
-    set value(value) {
-        this.originalValue = value;
-        if (!this.isEditMode) {
-            this._value = clone(value);
-        }
-    }
-    get value() {
-        return this._value;
-    }
-    /**
-     * Extends parent render method for handling additional types (StructureTypes.ATTACHMENTS_BUTTON in our case)
-     * and adds etools-card as container wrapper
-     */
-    render() {
-        return html `
-      <section class="elevation page-content card-container" elevation="1">
-        <etools-fb-card
-          card-title="${this.retrieveTitle(this.parentGroupName) + this.groupStructure.title}"
-          is-collapsible
-          ?is-editable="${!this._readonly}"
-          ?edit="${this.isEditMode}"
-          @start-edit="${() => this.startEdit()}"
-          @save="${() => this.saveChanges()}"
-          @cancel="${() => this.cancelEdit()}"
-        >
-          <!-- Open Attachments popup button -->
-          <div slot="actions" class="layout horizontal center">${this.getAdditionalButtons()}</div>
-          <div slot="postfix" class="layout horizontal center" ?hidden="${!this.groupStructure.repeatable}">
-            <paper-icon-button
-              icon="close"
-              class="attachments-warning"
-              @click="${() => this.confirmRemove(this.groupStructure.title || 'this group')}"
-            ></paper-icon-button>
-          </div>
-          <div slot="content">${this.renderGroupChildren()}</div>
-        </etools-fb-card>
-      </section>
-    `;
-    }
-    /**
-     * Filters StructureTypes.ATTACHMENTS_BUTTON type. It will be rendered as button,
-     * allows parent renderChild method to render other types
-     */
-    renderGroupChildren() {
-        return this.groupStructure.children
-            .filter(({ styling }) => !styling.includes(StructureTypes.ATTACHMENTS_BUTTON))
-            .map((child) => super.renderChild(child));
-    }
-    /**
-     * Generate open Attachments popup button.
-     * It is hidden if tab is readonly and no attachments uploaded
-     */
-    getAdditionalButtons() {
-        var _a, _b, _c, _d, _e, _f;
-        const hideAttachmentsButton = (this._readonly && !((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.attachments) === null || _b === void 0 ? void 0 : _b.length)) ||
-            !this.groupStructure.children.some(({ styling }) => styling.includes(StructureTypes.ATTACHMENTS_BUTTON));
-        return hideAttachmentsButton
-            ? html ``
-            : html `
-          <iron-icon icon="warning" class="attachments-warning" ?hidden="${!this._errors.attachments}"></iron-icon>
-          <paper-button @click="${() => this.openAttachmentsPopup()}" class="attachments-button">
-            <iron-icon icon="${((_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c.attachments) === null || _d === void 0 ? void 0 : _d.length) ? 'file-download' : 'file-upload'}"></iron-icon>
-            ${this.getAttachmentsBtnText((_f = (_e = this.value) === null || _e === void 0 ? void 0 : _e.attachments) === null || _f === void 0 ? void 0 : _f.length)}
-          </paper-button>
-        `;
-    }
-    retrieveTitle(target) {
-        switch (target) {
-            case PARTNER_KEY:
-                return `Partner: `;
-            case OUTPUT_KEY:
-                return `Output: `;
-            case INTERVENTION_KEY:
-                return `PD/SSFA: `;
-            default:
-                return '';
-        }
-    }
-    startEdit() {
-        if (this._readonly) {
-            return;
-        }
-        this.isEditMode = true;
-    }
-    /**
-     * We need to rerender view to update all changes that was happen,
-     * because only fields are updating during @value-change event.
-     * Only then we can reset all changed values to their original
-     */
-    cancelEdit() {
-        this.requestUpdate().then(() => {
-            this._value = clone(this.originalValue);
-            this.isEditMode = false;
-        });
-    }
-    /**
-     * Updates value property, stops event propagation.
-     * We need to fire value-changed event only after save button click
-     */
-    valueChanged(event, name) {
-        event.stopPropagation();
-        if (!this._value) {
-            this._value = {};
-        }
-        if (this._value[name] !== event.detail.value) {
-            this._value[name] = event.detail.value;
-        }
-    }
-    saveChanges() {
-        if (Object.keys(this._errors).length) {
-            fireEvent(this, 'toast', { text: 'Please check all fields and try again' });
-            return;
-        }
-        this.isEditMode = false;
-        fireEvent(this, 'value-changed', { value: this.value });
-    }
-    /**
-     * Tries to save changed attachments on popup confirm
-     * Generates value-changed event with originalValue clone if isEditMode enabled.
-     * In this case it will take only attachments changes and ignore other changes that may happen during card edit
-     */
-    openAttachmentsPopup() {
-        var _a;
-        if (!customElements.get('form-attachments-popup')) {
-            throw new Error('Please define "form-attachments-popup" custom element!');
-        }
-        openDialog({
-            dialog: 'form-attachments-popup',
-            dialogData: {
-                attachments: (_a = this.value) === null || _a === void 0 ? void 0 : _a.attachments,
-                metadata: this.metadata,
-                title: `Attachments for ${this.retrieveTitle(this.parentGroupName) + ': ' + this.groupStructure.title}`,
-                computedPath: this.computedPath.concat([this.groupStructure.name, 'attachments']),
-                errors: this._errors.attachments
-            },
-            readonly: this._readonly
-        }).then((response) => {
-            if (!response.confirmed) {
-                return;
-            }
-            if (!this._value) {
-                this._value = {};
-            }
-            this._value.attachments = response.attachments;
-            delete this._errors.attachments;
-            fireEvent(this, 'error-changed', { error: Object.keys(this._errors).length ? this._errors : null });
-            fireEvent(this, 'attachments-changed', { attachments: this._value.attachments });
-            if (this.isEditMode) {
-                const tmp = clone(this.originalValue) || {};
-                tmp.attachments = response.attachments;
-                fireEvent(this, 'value-changed', { value: tmp });
-            }
-            else {
-                this.saveChanges();
-            }
-            this.requestUpdate();
-        });
-    }
-    confirmRemove(groupName) {
-        openDialog({
-            dialog: 'confirmation-popup',
-            dialogData: {
-                text: `Are you sure you want to delete ${groupName}`
-            }
-        }).then((response) => {
-            if (response.confirmed) {
-                fireEvent(this, 'remove-group');
-            }
-        });
-    }
-    getAttachmentsBtnText(attachmentsCount = 0) {
-        if (attachmentsCount === 1) {
-            return `${attachmentsCount} File`;
-        }
-        else if (attachmentsCount > 1) {
-            return `${attachmentsCount} Files`;
-        }
-        else {
-            return 'Upload Files';
-        }
-    }
-};
-__decorate([
-    property()
-], FormCollapsedCard.prototype, "isEditMode", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'readonly', reflect: true })
-], FormCollapsedCard.prototype, "_readonly", void 0);
-__decorate([
-    property()
-], FormCollapsedCard.prototype, "_value", void 0);
-FormCollapsedCard = __decorate([
-    customElement('form-collapsed-card')
-], FormCollapsedCard);
-export { FormCollapsedCard };
+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 { html, property, customElement } from 'lit-element';
+import { clone } from 'ramda';
+import { fireEvent } from '../lib/utils/fire-custom-event';
+import { openDialog } from '../lib/utils/dialog';
+import { FormAbstractGroup, StructureTypes } from './form-abstract-group';
+import '../lib/additional-components/etools-fb-card';
+import '../lib/additional-components/confirmation-dialog';
+import { getTranslation } from '../lib/utils/translate';
+const PARTNER_KEY = 'partner';
+const OUTPUT_KEY = 'output';
+const INTERVENTION_KEY = 'intervention';
+let FormCollapsedCard = class FormCollapsedCard extends FormAbstractGroup {
+    constructor() {
+        super(...arguments);
+        this.isEditMode = false;
+        this._readonly = true;
+        this._value = {};
+        this.originalValue = {};
+    }
+    /**
+     * Overrides readonly property
+     * In collapsed card it must consider isEditMode property,
+     * components inside card are readonly if isEditMode is off or if card is readonly
+     */
+    set readonly(state) {
+        this._readonly = state;
+    }
+    get readonly() {
+        return this._readonly || !this.isEditMode;
+    }
+    /**
+     * Overrides errors setter
+     * In collapsed card it must consider isEditMode property,
+     * We must to enable isEditMode if errors comes from backend
+     */
+    set errors(errors) {
+        if (Array.isArray(errors)) {
+            fireEvent(this, 'toast', { text: errors[0] });
+            fireEvent(this, 'error-changed', { error: null });
+        }
+        else if (errors) {
+            this._errors = errors;
+        }
+        if (errors) {
+            this.isEditMode = true;
+        }
+    }
+    /**
+     * Overrides value property
+     * We need to save originalValue to have Cancel possibility in collapsed card.
+     * Don't override current edited value if isEditMode enabled
+     * (It can be happened if other sibling card or component updates their value during current card edition)
+     */
+    set value(value) {
+        this.originalValue = value;
+        if (!this.isEditMode) {
+            this._value = clone(value);
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    /**
+     * Extends parent render method for handling additional types (StructureTypes.ATTACHMENTS_BUTTON in our case)
+     * and adds etools-card as container wrapper
+     */
+    render() {
+        return html `
+      <section class="elevation page-content card-container" elevation="1">
+        <etools-fb-card
+          card-title="${this.retrieveTitle(this.parentGroupName) + this.groupStructure.title}"
+          is-collapsible
+          ?is-editable="${!this._readonly}"
+          ?edit="${this.isEditMode}"
+          @start-edit="${() => this.startEdit()}"
+          @save="${() => this.saveChanges()}"
+          @cancel="${() => this.cancelEdit()}"
+        >
+          <!-- Open Attachments popup button -->
+          <div slot="actions" class="layout horizontal center">${this.getAdditionalButtons()}</div>
+          <div slot="postfix" class="layout horizontal center" ?hidden="${!this.groupStructure.repeatable}">
+            <paper-icon-button
+              icon="close"
+              class="attachments-warning"
+              @click="${() => this.confirmRemove(this.groupStructure.title || getTranslation(this.language, 'THIS_GROUP'))}"
+            ></paper-icon-button>
+          </div>
+          <div slot="content">${this.renderGroupChildren()}</div>
+        </etools-fb-card>
+      </section>
+    `;
+    }
+    /**
+     * Filters StructureTypes.ATTACHMENTS_BUTTON type. It will be rendered as button,
+     * allows parent renderChild method to render other types
+     */
+    renderGroupChildren() {
+        return this.groupStructure.children
+            .filter(({ styling }) => !styling.includes(StructureTypes.ATTACHMENTS_BUTTON))
+            .map((child) => super.renderChild(child));
+    }
+    /**
+     * Generate open Attachments popup button.
+     * It is hidden if tab is readonly and no attachments uploaded
+     */
+    getAdditionalButtons() {
+        var _a, _b, _c, _d, _e, _f;
+        const hideAttachmentsButton = (this._readonly && !((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.attachments) === null || _b === void 0 ? void 0 : _b.length)) ||
+            !this.groupStructure.children.some(({ styling }) => styling.includes(StructureTypes.ATTACHMENTS_BUTTON));
+        return hideAttachmentsButton
+            ? html ``
+            : html `
+          <iron-icon icon="warning" class="attachments-warning" ?hidden="${!this._errors.attachments}"></iron-icon>
+          <paper-button @click="${() => this.openAttachmentsPopup()}" class="attachments-button">
+            <iron-icon icon="${((_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c.attachments) === null || _d === void 0 ? void 0 : _d.length) ? 'file-download' : 'file-upload'}"></iron-icon>
+            ${this.getAttachmentsBtnText((_f = (_e = this.value) === null || _e === void 0 ? void 0 : _e.attachments) === null || _f === void 0 ? void 0 : _f.length)}
+          </paper-button>
+        `;
+    }
+    retrieveTitle(target) {
+        switch (target) {
+            case PARTNER_KEY:
+                return `${getTranslation(this.language, 'PARTNER')}: `;
+            case OUTPUT_KEY:
+                return `${getTranslation(this.language, 'CP_OUTPUT')}: `;
+            case INTERVENTION_KEY:
+                return `${getTranslation(this.language, 'PD_SSFA')}: `;
+            default:
+                return '';
+        }
+    }
+    startEdit() {
+        if (this._readonly) {
+            return;
+        }
+        this.isEditMode = true;
+    }
+    /**
+     * We need to rerender view to update all changes that was happen,
+     * because only fields are updating during @value-change event.
+     * Only then we can reset all changed values to their original
+     */
+    cancelEdit() {
+        this.requestUpdate().then(() => {
+            this._value = clone(this.originalValue);
+            this.isEditMode = false;
+        });
+    }
+    /**
+     * Updates value property, stops event propagation.
+     * We need to fire value-changed event only after save button click
+     */
+    valueChanged(event, name) {
+        event.stopPropagation();
+        if (!this._value) {
+            this._value = {};
+        }
+        if (this._value[name] !== event.detail.value) {
+            this._value[name] = event.detail.value;
+        }
+    }
+    saveChanges() {
+        if (Object.keys(this._errors).length) {
+            fireEvent(this, 'toast', { text: getTranslation(this.language, 'CHECK_FIELDS_TRY_AGAIN') });
+            return;
+        }
+        this.isEditMode = false;
+        fireEvent(this, 'value-changed', { value: this.value });
+    }
+    /**
+     * Tries to save changed attachments on popup confirm
+     * Generates value-changed event with originalValue clone if isEditMode enabled.
+     * In this case it will take only attachments changes and ignore other changes that may happen during card edit
+     */
+    openAttachmentsPopup() {
+        var _a;
+        if (!customElements.get('form-attachments-popup')) {
+            throw new Error('Please define "form-attachments-popup" custom element!');
+        }
+        openDialog({
+            dialog: 'form-attachments-popup',
+            dialogData: {
+                attachments: (_a = this.value) === null || _a === void 0 ? void 0 : _a.attachments,
+                metadata: this.metadata,
+                title: `${getTranslation(this.language, 'ATTACHMENTS_FOR')} ${this.retrieveTitle(this.parentGroupName) + ': ' + this.groupStructure.title}`,
+                computedPath: this.computedPath.concat([this.groupStructure.name, 'attachments']),
+                errors: this._errors.attachments
+            },
+            readonly: this._readonly
+        }).then((response) => {
+            if (!response.confirmed) {
+                return;
+            }
+            if (!this._value) {
+                this._value = {};
+            }
+            this._value.attachments = response.attachments;
+            delete this._errors.attachments;
+            fireEvent(this, 'error-changed', { error: Object.keys(this._errors).length ? this._errors : null });
+            fireEvent(this, 'attachments-changed', { attachments: this._value.attachments });
+            if (this.isEditMode) {
+                const tmp = clone(this.originalValue) || {};
+                tmp.attachments = response.attachments;
+                fireEvent(this, 'value-changed', { value: tmp });
+            }
+            else {
+                this.saveChanges();
+            }
+            this.requestUpdate();
+        });
+    }
+    confirmRemove(groupName) {
+        openDialog({
+            dialog: 'confirmation-popup',
+            dialogData: {
+                text: `${getTranslation(this.language, 'CONFIRM_DELETE')} ${groupName}`
+            }
+        }).then((response) => {
+            if (response.confirmed) {
+                fireEvent(this, 'remove-group');
+            }
+        });
+    }
+    getAttachmentsBtnText(attachmentsCount = 0) {
+        if (attachmentsCount === 1) {
+            return `${attachmentsCount} ${getTranslation(this.language, 'FILE')}`;
+        }
+        else if (attachmentsCount > 1) {
+            return `${attachmentsCount} ${getTranslation(this.language, 'FILES')}`;
+        }
+        else {
+            return getTranslation(this.language, 'UPLOAD_FILES');
+        }
+    }
+};
+__decorate([
+    property()
+], FormCollapsedCard.prototype, "isEditMode", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'readonly', reflect: true })
+], FormCollapsedCard.prototype, "_readonly", void 0);
+__decorate([
+    property()
+], FormCollapsedCard.prototype, "_value", void 0);
+FormCollapsedCard = __decorate([
+    customElement('form-collapsed-card')
+], FormCollapsedCard);
+export { FormCollapsedCard };

package/dist/form-groups/index.d.ts

@@ -1,3 +1,3 @@
-export * from './form-abstract-group';
-export * from './form-card';
-export * from './form-collapsed-card';
+export * from './form-abstract-group';
+export * from './form-card';
+export * from './form-collapsed-card';

package/dist/form-groups/index.js

@@ -1,3 +1,3 @@
-export * from './form-abstract-group';
-export * from './form-card';
-export * from './form-collapsed-card';
+export * from './form-abstract-group';
+export * from './form-card';
+export * from './form-collapsed-card';

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export * from './form-fields';
-export * from './form-groups';
-export * from './form-attachments-popup';
+export * from './form-fields';
+export * from './form-groups';
+export * from './form-attachments-popup';

package/dist/index.js

@@ -1,3 +1,3 @@
-export * from './form-fields';
-export * from './form-groups';
-export * from './form-attachments-popup';
+export * from './form-fields';
+export * from './form-groups';
+export * from './form-attachments-popup';

package/dist/lib/additional-components/confirmation-dialog.d.ts

@@ -1,16 +1,18 @@
-import { LitElement, CSSResultArray } from 'lit-element';
-export declare class ConfirmationDialog extends LitElement {
-    dialogOpened: boolean;
-    text: string;
-    dialogTitle: string;
-    hideConfirmBtn: boolean;
-    set dialogData({ text, dialogTitle, hideConfirmBtn }: {
-        text: string;
-        dialogTitle: string;
-        hideConfirmBtn: boolean;
-    });
-    render(): unknown;
-    onClose(): void;
-    confirm(): void;
-    static get styles(): CSSResultArray;
-}
+import { LitElement, CSSResultArray } from 'lit-element';
+export declare class ConfirmationDialog extends LitElement {
+    dialogOpened: boolean;
+    language: string;
+    text: string;
+    dialogTitle: string;
+    hideConfirmBtn: boolean;
+    set dialogData({ text, dialogTitle, hideConfirmBtn }: {
+        text: string;
+        dialogTitle: string;
+        hideConfirmBtn: boolean;
+    });
+    constructor();
+    render(): unknown;
+    onClose(): void;
+    confirm(): void;
+    static get styles(): CSSResultArray;
+}