@unicef-polymer/etools-form-builder 1.0.1 → 1.0.2

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

@@ -1,74 +1,74 @@
-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 } 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';
-const PARTNER_KEY = 'partner';
-const OUTPUT_KEY = 'output';
-const INTERVENTION_KEY = 'intervention';
-export 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() {
+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 } 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';
+const PARTNER_KEY = 'partner';
+const OUTPUT_KEY = 'output';
+const INTERVENTION_KEY = 'intervention';
+export 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
@@ -85,145 +85,145 @@ export class FormCollapsedCard extends FormAbstractGroup {
           <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;
-        const hideAttachmentsButton = (this._readonly && !this.value.attachments.length) ||
-            !this.groupStructure.children.some(({ styling }) => styling.includes(StructureTypes.ATTACHMENTS_BUTTON));
-        return hideAttachmentsButton
-            ? html ``
+    `;
+    }
+    /**
+     * 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="${((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.attachments) === null || _b === void 0 ? void 0 : _b.length) ? 'file-download' : 'file-upload'}"></iron-icon>
-            ${this.getAttachmentsBtnText((_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c.attachments) === null || _d === void 0 ? void 0 : _d.length)}
+            <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();
-        });
-    }
-    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);
+        `;
+    }
+    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();
+        });
+    }
+    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);

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,14 +1,14 @@
-/**
- * Styles
- */
-export * from './lib/styles/form-builder-card.styles';
-import './lib/styles/input-styles';
-/**
- * Form group elements
- */
-import './form-groups/custom-elements.define';
-/**
- * Form field elements
- */
-import './form-fields/custom-elements.define';
-export * from './form-fields/base-field';
+/**
+ * Styles
+ */
+export * from './lib/styles/form-builder-card.styles';
+import './lib/styles/input-styles';
+/**
+ * Form group elements
+ */
+import './form-groups/custom-elements.define';
+/**
+ * Form field elements
+ */
+import './form-fields/custom-elements.define';
+export * from './form-fields/base-field';

package/dist/index.js

@@ -1,19 +1,19 @@
-/**
- * Styles
- */
-export * from './lib/styles/form-builder-card.styles';
-import './lib/styles/input-styles';
-/**
- * Form group elements
- */
-import './form-groups/custom-elements.define';
-/**
- * Form field elements
- */
-import './form-fields/custom-elements.define';
-export * from './form-fields/base-field';
-/**
- * Attachments Popup
- */
-import { FormAttachmentsPopup } from './form-attachments-popup';
-window.customElements.define('form-attachments-popup', FormAttachmentsPopup);
+/**
+ * Styles
+ */
+export * from './lib/styles/form-builder-card.styles';
+import './lib/styles/input-styles';
+/**
+ * Form group elements
+ */
+import './form-groups/custom-elements.define';
+/**
+ * Form field elements
+ */
+import './form-fields/custom-elements.define';
+export * from './form-fields/base-field';
+/**
+ * Attachments Popup
+ */
+import { FormAttachmentsPopup } from './form-attachments-popup';
+window.customElements.define('form-attachments-popup', FormAttachmentsPopup);

package/dist/lib/additional-components/etools-fb-card.d.ts

@@ -1,16 +1,16 @@
-import { CSSResultArray, LitElement, TemplateResult } from 'lit-element';
-import '@polymer/iron-icons/iron-icons';
-export declare class EtoolsFbCard extends LitElement {
-    cardTitle: string;
-    isEditable: boolean;
-    isCollapsible: boolean;
-    hideEditButton: boolean;
-    collapsed: boolean;
-    edit: boolean;
-    static get styles(): CSSResultArray;
-    save(): void;
-    cancel(): void;
-    startEdit(): void;
-    toggleCollapse(): void;
-    protected render(): TemplateResult;
-}
+import { CSSResultArray, LitElement, TemplateResult } from 'lit-element';
+import '@polymer/iron-icons/iron-icons';
+export declare class EtoolsFbCard extends LitElement {
+    cardTitle: string;
+    isEditable: boolean;
+    isCollapsible: boolean;
+    hideEditButton: boolean;
+    collapsed: boolean;
+    edit: boolean;
+    static get styles(): CSSResultArray;
+    save(): void;
+    cancel(): void;
+    startEdit(): void;
+    toggleCollapse(): void;
+    protected render(): TemplateResult;
+}