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

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

@@ -1,32 +1,32 @@
-import { TemplateResult } from 'lit-element';
-import { IFormBuilderCard } from '../lib/types/form-builder.interfaces';
-import { FormAbstractGroup } from './form-abstract-group';
-import { GenericObject } from '../lib/types/global.types';
-import '@polymer/iron-collapse';
-export declare class FormCard extends FormAbstractGroup implements IFormBuilderCard {
-    protected _value: GenericObject;
-    /**
-     * Show save button only if value was changed by user
-     */
-    private showSaveButton;
-    /**
-     * Overrides value property. Saves originalValue.
-     * We need to update inner _value only if it wasn't change
-     * @param value
-     */
-    set value(value: GenericObject);
-    get value(): GenericObject;
-    protected originalValue: GenericObject;
-    /**
-     * Extends parent render method,
-     * adds card-container html wrapper and dynamic save button
-     */
-    render(): TemplateResult;
-    /**
-     * Updates value property, stops event propagation.
-     * We need to fire value-changed event only after save button click
-     */
-    valueChanged(event: CustomEvent, name: string): void;
-    saveChanges(): void;
-    confirmRemove(groupName: string): void;
-}
+import { TemplateResult } from 'lit-element';
+import { IFormBuilderCard } from '../lib/types/form-builder.interfaces';
+import { FormAbstractGroup } from './form-abstract-group';
+import { GenericObject } from '../lib/types/global.types';
+import '@polymer/iron-collapse';
+export declare class FormCard extends FormAbstractGroup implements IFormBuilderCard {
+    protected _value: GenericObject;
+    /**
+     * Show save button only if value was changed by user
+     */
+    private showSaveButton;
+    /**
+     * Overrides value property. Saves originalValue.
+     * We need to update inner _value only if it wasn't change
+     * @param value
+     */
+    set value(value: GenericObject);
+    get value(): GenericObject;
+    protected originalValue: GenericObject;
+    /**
+     * Extends parent render method,
+     * adds card-container html wrapper and dynamic save button
+     */
+    render(): TemplateResult;
+    /**
+     * Updates value property, stops event propagation.
+     * We need to fire value-changed event only after save button click
+     */
+    valueChanged(event: CustomEvent, name: string): void;
+    saveChanges(): void;
+    confirmRemove(groupName: string): void;
+}

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

@@ -1,108 +1,113 @@
-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 { fireEvent } from '../lib/utils/fire-custom-event';
-import { clone, equals } from 'ramda';
-import { FormAbstractGroup } from './form-abstract-group';
-import '@polymer/iron-collapse';
-import { openDialog } from '../lib/utils/dialog';
-let FormCard = class FormCard extends FormAbstractGroup {
-    constructor() {
-        super(...arguments);
-        this._value = {};
-        /**
-         * Show save button only if value was changed by user
-         */
-        this.showSaveButton = false;
-        this.originalValue = {};
-    }
-    /**
-     * Overrides value property. Saves originalValue.
-     * We need to update inner _value only if it wasn't change
-     * @param value
-     */
-    set value(value) {
-        if (!this.showSaveButton) {
-            this._value = clone(value);
-        }
-        this.originalValue = value;
-    }
-    get value() {
-        return this._value;
-    }
-    /**
-     * Extends parent render method,
-     * adds card-container html wrapper and dynamic save button
-     */
-    render() {
-        return html `
-      <section class="elevation page-content card-container form-card" elevation="1">
-        <div class="card-header">
-          <div class="title">${this.groupStructure.title}</div>
-          <div
-            class="remove-group"
-            ?hidden="${!this.groupStructure.repeatable}"
-            @click="${() => this.confirmRemove(this.groupStructure.title || 'this group')}"
-          >
-            Remove
-            ${!this.groupStructure.title || this.groupStructure.title.length > 15 ? 'group' : this.groupStructure.title}
-            <paper-icon-button icon="delete" class="attachments-warning"></paper-icon-button>
-          </div>
-        </div>
-        ${super.render()}
-
-        <iron-collapse ?opened="${this.showSaveButton}">
-          <div class="layout horizontal end-justified card-buttons actions-container">
-            <paper-button class="save-button" @tap="${() => this.saveChanges()}">Save</paper-button>
-          </div>
-        </iron-collapse>
-      </section>
-    `;
-    }
-    /**
-     * Updates value property, stops event propagation.
-     * We need to fire value-changed event only after save button click
-     */
-    valueChanged(event, name) {
-        if (!this._value) {
-            this._value = {};
-        }
-        this._value[name] = event.detail.value;
-        event.stopPropagation();
-        this.showSaveButton = !equals(this.value, this.originalValue);
-    }
-    saveChanges() {
-        if (Object.keys(this._errors).length) {
-            fireEvent(this, 'toast', { text: 'Please check all fields and try again' });
-            return;
-        }
-        fireEvent(this, 'value-changed', { value: this.value });
-        this.showSaveButton = false;
-    }
-    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');
-            }
-        });
-    }
-};
-__decorate([
-    property()
-], FormCard.prototype, "_value", void 0);
-__decorate([
-    property()
-], FormCard.prototype, "showSaveButton", void 0);
-FormCard = __decorate([
-    customElement('form-card')
-], FormCard);
-export { FormCard };
+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 { fireEvent } from '../lib/utils/fire-custom-event';
+import { clone, equals } from 'ramda';
+import { FormAbstractGroup } from './form-abstract-group';
+import '@polymer/iron-collapse';
+import { openDialog } from '../lib/utils/dialog';
+import { getTranslation } from '../lib/utils/translate';
+let FormCard = class FormCard extends FormAbstractGroup {
+    constructor() {
+        super(...arguments);
+        this._value = {};
+        /**
+         * Show save button only if value was changed by user
+         */
+        this.showSaveButton = false;
+        this.originalValue = {};
+    }
+    /**
+     * Overrides value property. Saves originalValue.
+     * We need to update inner _value only if it wasn't change
+     * @param value
+     */
+    set value(value) {
+        if (!this.showSaveButton) {
+            this._value = clone(value);
+        }
+        this.originalValue = value;
+    }
+    get value() {
+        return this._value;
+    }
+    /**
+     * Extends parent render method,
+     * adds card-container html wrapper and dynamic save button
+     */
+    render() {
+        return html `
+      <section class="elevation page-content card-container form-card" elevation="1">
+        <div class="card-header">
+          <div class="title">${this.groupStructure.title}</div>
+          <div
+            class="remove-group"
+            ?hidden="${!this.groupStructure.repeatable}"
+            @click="${() => this.confirmRemove(this.groupStructure.title || getTranslation(this.language, 'THIS_GROUP'))}"
+          >
+            Remove
+            ${!this.groupStructure.title || this.groupStructure.title.length > 15
+            ? getTranslation(this.language, 'GROUP')
+            : this.groupStructure.title}
+            <paper-icon-button icon="delete" class="attachments-warning"></paper-icon-button>
+          </div>
+        </div>
+        ${super.render()}
+
+        <iron-collapse ?opened="${this.showSaveButton}">
+          <div class="layout horizontal end-justified card-buttons actions-container">
+            <paper-button class="save-button" @tap="${() => this.saveChanges()}"
+              >${getTranslation(this.language, 'SAVE')}</paper-button
+            >
+          </div>
+        </iron-collapse>
+      </section>
+    `;
+    }
+    /**
+     * Updates value property, stops event propagation.
+     * We need to fire value-changed event only after save button click
+     */
+    valueChanged(event, name) {
+        if (!this._value) {
+            this._value = {};
+        }
+        this._value[name] = event.detail.value;
+        event.stopPropagation();
+        this.showSaveButton = !equals(this.value, this.originalValue);
+    }
+    saveChanges() {
+        if (Object.keys(this._errors).length) {
+            fireEvent(this, 'toast', { text: getTranslation(this.language, 'CHECK_FIELDS_TRY_AGAIN') });
+            return;
+        }
+        fireEvent(this, 'value-changed', { value: this.value });
+        this.showSaveButton = false;
+    }
+    confirmRemove(groupName) {
+        openDialog({
+            dialog: 'confirmation-popup',
+            dialogData: {
+                text: `${getTranslation(this.language, 'CONFIRM_DELETE')} ${groupName}`
+            }
+        }).then((response) => {
+            if (response.confirmed) {
+                fireEvent(this, 'remove-group');
+            }
+        });
+    }
+};
+__decorate([
+    property()
+], FormCard.prototype, "_value", void 0);
+__decorate([
+    property()
+], FormCard.prototype, "showSaveButton", void 0);
+FormCard = __decorate([
+    customElement('form-card')
+], FormCard);
+export { FormCard };

package/dist/form-groups/form-collapsed-card.d.ts

@@ -1,70 +1,70 @@
-import { TemplateResult } from 'lit-element';
-import { IFormBuilderCard, IFormBuilderCollapsedCard } from '../lib/types/form-builder.interfaces';
-import { FormAbstractGroup } from './form-abstract-group';
-import '../lib/additional-components/etools-fb-card';
-import { GenericObject } from '../lib/types/global.types';
-import '../lib/additional-components/confirmation-dialog';
-export declare class FormCollapsedCard extends FormAbstractGroup implements IFormBuilderCollapsedCard, IFormBuilderCard {
-    /**
-     * 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: boolean);
-    get readonly(): boolean;
-    protected isEditMode: boolean;
-    protected _readonly: boolean;
-    /**
-     * Overrides errors setter
-     * In collapsed card it must consider isEditMode property,
-     * We must to enable isEditMode if errors comes from backend
-     */
-    set errors(errors: GenericObject | string[] | null);
-    /**
-     * 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: GenericObject);
-    get value(): GenericObject;
-    protected _value: GenericObject;
-    protected originalValue: GenericObject;
-    /**
-     * Extends parent render method for handling additional types (StructureTypes.ATTACHMENTS_BUTTON in our case)
-     * and adds etools-card as container wrapper
-     */
-    render(): TemplateResult;
-    /**
-     * Filters StructureTypes.ATTACHMENTS_BUTTON type. It will be rendered as button,
-     * allows parent renderChild method to render other types
-     */
-    renderGroupChildren(): (TemplateResult | TemplateResult[])[];
-    /**
-     * Generate open Attachments popup button.
-     * It is hidden if tab is readonly and no attachments uploaded
-     */
-    getAdditionalButtons(): TemplateResult;
-    retrieveTitle(target: string): string;
-    startEdit(): void;
-    /**
-     * 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(): void;
-    /**
-     * Updates value property, stops event propagation.
-     * We need to fire value-changed event only after save button click
-     */
-    valueChanged(event: CustomEvent, name: string): void;
-    saveChanges(): void;
-    /**
-     * 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(): void;
-    confirmRemove(groupName: string): void;
-    protected getAttachmentsBtnText(attachmentsCount?: number): string;
-}
+import { TemplateResult } from 'lit-element';
+import { IFormBuilderCard, IFormBuilderCollapsedCard } from '../lib/types/form-builder.interfaces';
+import { FormAbstractGroup } from './form-abstract-group';
+import '../lib/additional-components/etools-fb-card';
+import { GenericObject } from '../lib/types/global.types';
+import '../lib/additional-components/confirmation-dialog';
+export declare class FormCollapsedCard extends FormAbstractGroup implements IFormBuilderCollapsedCard, IFormBuilderCard {
+    /**
+     * 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: boolean);
+    get readonly(): boolean;
+    protected isEditMode: boolean;
+    protected _readonly: boolean;
+    /**
+     * Overrides errors setter
+     * In collapsed card it must consider isEditMode property,
+     * We must to enable isEditMode if errors comes from backend
+     */
+    set errors(errors: GenericObject | string[] | null);
+    /**
+     * 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: GenericObject);
+    get value(): GenericObject;
+    protected _value: GenericObject;
+    protected originalValue: GenericObject;
+    /**
+     * Extends parent render method for handling additional types (StructureTypes.ATTACHMENTS_BUTTON in our case)
+     * and adds etools-card as container wrapper
+     */
+    render(): TemplateResult;
+    /**
+     * Filters StructureTypes.ATTACHMENTS_BUTTON type. It will be rendered as button,
+     * allows parent renderChild method to render other types
+     */
+    renderGroupChildren(): (TemplateResult | TemplateResult[])[];
+    /**
+     * Generate open Attachments popup button.
+     * It is hidden if tab is readonly and no attachments uploaded
+     */
+    getAdditionalButtons(): TemplateResult;
+    retrieveTitle(target: string): string;
+    startEdit(): void;
+    /**
+     * 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(): void;
+    /**
+     * Updates value property, stops event propagation.
+     * We need to fire value-changed event only after save button click
+     */
+    valueChanged(event: CustomEvent, name: string): void;
+    saveChanges(): void;
+    /**
+     * 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(): void;
+    confirmRemove(groupName: string): void;
+    protected getAttachmentsBtnText(attachmentsCount?: number): string;
+}