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

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

@@ -1,10 +1,6 @@
-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 { __decorate } from "tslib";
+import { html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
 import { clone } from 'ramda';
 import { fireEvent } from '../lib/utils/fire-custom-event';
 import { openDialog } from '../lib/utils/dialog';
@@ -12,6 +8,7 @@ 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';
+import '@unicef-polymer/etools-unicef/src/etools-icon-button/etools-icon-button';
 const PARTNER_KEY = 'partner';
 const OUTPUT_KEY = 'output';
 const INTERVENTION_KEY = 'intervention';
@@ -19,22 +16,23 @@ let FormCollapsedCard = class FormCollapsedCard extends FormAbstractGroup {
     constructor() {
         super(...arguments);
         this.collapsed = false;
+        /**
+         * 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) {
+        //   this._readonly = state;
+        // }
+        // @dci seems to not be used, use instead getIsReadonly
+        // get readonly(): boolean {
+        //   return this._readonly || !this.isEditMode;
+        // }
         this.isEditMode = false;
-        this._readonly = true;
+        this.readonly = false;
         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,
@@ -67,35 +65,39 @@ let FormCollapsedCard = class FormCollapsedCard extends FormAbstractGroup {
     get value() {
         return this._value;
     }
+    isReadonly() {
+        return this.readonly || !this.isEditMode;
+    }
     /**
      * 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}"
-          .collapsed="${this.collapsed}"
-          @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>
+        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}"
+          .collapsed="${this.collapsed}"
+          @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}">
+            <etools-icon-button
+              class="attachments-warning"
+              name="close"
+              @click="${() => this.confirmRemove(this.groupStructure.title || getTranslation(this.language, 'THIS_GROUP'))}"
+            >
+            </etools-icon-button>
+          </div>
+          <div slot="content">${this.renderGroupChildren()}</div>
+        </etools-fb-card>
+      </section>
     `;
     }
     /**
@@ -113,16 +115,19 @@ let FormCollapsedCard = class FormCollapsedCard extends FormAbstractGroup {
      */
     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)) ||
+        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>
+            : html `
+          <etools-icon id="attachments-warning" name="warning" ?hidden="${!this._errors.attachments}"></etools-icon>
+          <etools-button id="primary" variant="text" class="primary" @click="${this.openAttachmentsPopup}">
+            <etools-icon
+              slot="prefix"
+              name="${((_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c.attachments) === null || _d === void 0 ? void 0 : _d.length) ? 'file-download' : 'file-upload'}"
+            ></etools-icon>
+            ${this.getAttachmentsBtnText((_f = (_e = this.value) === null || _e === void 0 ? void 0 : _e.attachments) === null || _f === void 0 ? void 0 : _f.length)}
+          </etools-button>
         `;
     }
     retrieveTitle(target) {
@@ -138,7 +143,7 @@ let FormCollapsedCard = class FormCollapsedCard extends FormAbstractGroup {
         }
     }
     startEdit() {
-        if (this._readonly) {
+        if (this.readonly) {
             return;
         }
         this.isEditMode = true;
@@ -149,7 +154,8 @@ let FormCollapsedCard = class FormCollapsedCard extends FormAbstractGroup {
      * Only then we can reset all changed values to their original
      */
     cancelEdit() {
-        this.requestUpdate().then(() => {
+        this.requestUpdate();
+        this.updateComplete.then(() => {
             this._value = clone(this.originalValue);
             this.isEditMode = false;
         });
@@ -194,7 +200,7 @@ let FormCollapsedCard = class FormCollapsedCard extends FormAbstractGroup {
                 computedPath: this.computedPath.concat([this.groupStructure.name, 'attachments']),
                 errors: this._errors.attachments
             },
-            readonly: this._readonly
+            readonly: this.readonly
         }).then((response) => {
             if (!response.confirmed) {
                 return;
@@ -249,7 +255,7 @@ __decorate([
 ], FormCollapsedCard.prototype, "isEditMode", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'readonly', reflect: true })
-], FormCollapsedCard.prototype, "_readonly", void 0);
+], FormCollapsedCard.prototype, "readonly", void 0);
 __decorate([
     property()
 ], FormCollapsedCard.prototype, "_value", void 0);

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

@@ -1,4 +1,4 @@
-import { LitElement, CSSResultArray } from 'lit-element';
+import { CSSResultArray, LitElement } from 'lit';
 export declare class ConfirmationDialog extends LitElement {
     dialogOpened: boolean;
     language: string;

package/dist/lib/additional-components/confirmation-dialog.js

@@ -1,13 +1,15 @@
-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 { LitElement, property, html, css, customElement } from 'lit-element';
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
 import { fireEvent } from '../utils/fire-custom-event';
 import { getTranslation } from '../utils/translate';
 let ConfirmationDialog = class ConfirmationDialog extends LitElement {
+    set dialogData({ text, dialogTitle = 'Are you', hideConfirmBtn = false }) {
+        this.text = text;
+        this.dialogTitle = dialogTitle;
+        this.hideConfirmBtn = hideConfirmBtn;
+        this.requestUpdate();
+    }
     constructor() {
         super();
         this.dialogOpened = true;
@@ -18,29 +20,23 @@ let ConfirmationDialog = class ConfirmationDialog extends LitElement {
             this.language = window.localStorage.defaultLanguage || 'en';
         }
     }
-    set dialogData({ text, dialogTitle = 'Are you', hideConfirmBtn = false }) {
-        this.text = text;
-        this.dialogTitle = dialogTitle;
-        this.hideConfirmBtn = hideConfirmBtn;
-        this.requestUpdate();
-    }
     render() {
-        return html `
-      <etools-dialog
-        id="confirmation-dialog"
-        size="md"
-        no-padding
-        keep-dialog-open
-        ?hide-confirm-btn="${this.hideConfirmBtn}"
-        cancel-btn-text="${getTranslation(this.language, this.hideConfirmBtn ? 'OK' : 'CANCEL')}"
-        ?opened="${this.dialogOpened}"
-        theme="confirmation"
-        dialog-title="${this.dialogTitle}"
-        @close="${this.onClose}"
-        @confirm-btn-clicked="${() => this.confirm()}"
-      >
-        <div class="confirmation-message">${this.text}</div>
-      </etools-dialog>
+        return html `
+      <etools-dialog
+        id="confirmation-dialog"
+        size="md"
+        no-padding
+        keep-dialog-open
+        ?hide-confirm-btn="${this.hideConfirmBtn}"
+        cancel-btn-text="${getTranslation(this.language, this.hideConfirmBtn ? 'OK' : 'CANCEL')}"
+        ?opened="${this.dialogOpened}"
+        theme="confirmation"
+        dialog-title="${this.dialogTitle}"
+        @close="${this.onClose}"
+        @confirm-btn-clicked="${() => this.confirm()}"
+      >
+        <div class="confirmation-message">${this.text}</div>
+      </etools-dialog>
     `;
     }
     onClose() {
@@ -52,10 +48,10 @@ let ConfirmationDialog = class ConfirmationDialog extends LitElement {
     static get styles() {
         // language=CSS
         return [
-            css `
-        .confirmation-message {
-          padding-left: 24px;
-        }
+            css `
+        .confirmation-message {
+          padding-left: 24px;
+        }
       `
         ];
     }

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

@@ -1,5 +1,5 @@
-import { CSSResultArray, LitElement, TemplateResult } from 'lit-element';
-import '@polymer/iron-icons/iron-icons';
+import { CSSResultArray, LitElement, TemplateResult } from 'lit';
+import '@unicef-polymer/etools-unicef/src/etools-collapse/etools-collapse';
 export declare class EtoolsFbCard extends LitElement {
     cardTitle: string;
     isEditable: boolean;

package/dist/lib/additional-components/etools-fb-card.js

@@ -1,17 +1,123 @@
-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 { css, customElement, html, LitElement, property } from 'lit-element';
-import '@polymer/iron-icons/iron-icons';
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import '@unicef-polymer/etools-unicef/src/etools-collapse/etools-collapse';
 import { CardStyles } from '../styles/card-styles';
 import { elevationStyles } from '../styles/elevation-styles';
 import { FlexLayoutClasses } from '../styles/flex-layout-classes';
 import { fireEvent } from '../utils/fire-custom-event';
 import { getTranslation } from '../utils/translate';
 let EtoolsFbCard = class EtoolsFbCard extends LitElement {
+    static get styles() {
+        // language=CSS
+        return [
+            elevationStyles,
+            CardStyles,
+            FlexLayoutClasses,
+            css `
+        :host {
+          display: block;
+        }
+        
+        etools-icon {
+            cursor: pointer;
+            margin: 6px;
+        }
+        
+        .card-container {
+          background-color: var(--primary-background-color);
+        }
+
+        .card-title-box[is-collapsible] {
+          padding-left: 17px;
+          padding-right: 25px;
+        }
+
+        .card-content {
+          padding: 0;
+        }
+
+        .card-buttons {
+          padding: 12px 24px;
+        }
+
+        .save-button {
+          --sl-color-primary-500: var(--primary-color);
+        }
+
+        .edit-button, etools-icon[name="create"] {
+          color: var(--gray-mid);
+        }
+
+        .edit-button[edit] {
+          color: var(--primary-color);
+        }
+
+        .flex-header {
+          display: flex;
+          align-items: center;
+          padding-top: auto;
+          flex-wrap: nowrap;
+        }
+        .flex-header__collapse {
+          flex-basis: auto;
+        }
+        .flex-header__title {
+          font-size: 18px;
+          flex-basis: auto;
+          flex-grow: 1;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+        .flex-header__actions {
+          order: 1;
+          width: auto;
+          display: flex;
+          flex-basis: auto;
+        }
+        .flex-header__postfix {
+          order: 3;
+        }
+        .flex-header__edit {
+          order: 2;
+        }
+        @media (max-width: 380px) {
+          .card-title-box[is-collapsible] {
+            padding-left: 0;
+            padding-right: 0;
+          }
+          .flex-header {
+            align-items: baseline;
+            padding-top: 10px;
+            flex-wrap: wrap;
+          }
+          .flex-header__collapse {
+            flex-basis: 20%;
+          }
+          .flex-header__title {
+            flex-basis: 60%;
+            overflow: unset;
+            white-space: unset;
+            text-overflow: unset;
+          }
+          .flex-header__actions {
+            order: 2;
+            width: 100%;
+            border-top: 1px solid lightgrey;
+            justify-content: flex-end;
+          }
+          .flex-header__postfix {
+            order: 3;
+          }
+          .flex-header__edit {
+            order: 1;
+            flex-basis: 20%;
+          }
+        }
+      `
+        ];
+    }
     constructor() {
         super();
         this.isEditable = false;
@@ -24,112 +130,6 @@ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
         }
         this.handleLanguageChange = this.handleLanguageChange.bind(this);
     }
-    static get styles() {
-        // language=CSS
-        return [
-            elevationStyles,
-            CardStyles,
-            FlexLayoutClasses,
-            css `
-        :host {
-          display: block;
-        }
-
-        .card-container {
-          background-color: var(--primary-background-color);
-        }
-
-        .card-title-box[is-collapsible] {
-          padding-left: 17px;
-          padding-right: 25px;
-        }
-
-        .card-content {
-          padding: 0;
-        }
-
-        .card-buttons {
-          padding: 12px 24px;
-        }
-
-        .save-button {
-          color: var(--primary-background-color);
-          background-color: var(--primary-color);
-        }
-
-        .edit-button {
-          color: var(--gray-mid);
-        }
-
-        .edit-button[edit] {
-          color: var(--primary-color);
-        }
-
-        .flex-header {
-          display: flex;
-          align-items: center;
-          padding-top: auto;
-          flex-wrap: nowrap;
-        }
-        .flex-header__collapse {
-          flex-basis: auto;
-        }
-        .flex-header__title {
-          font-size: 18px;
-          flex-basis: auto;
-          flex-grow: 1;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-        }
-        .flex-header__actions {
-          order: 1;
-          width: auto;
-          display: flex;
-          flex-basis: auto;
-        }
-        .flex-header__postfix {
-          order: 3;
-        }
-        .flex-header__edit {
-          order: 2;
-        }
-        @media (max-width: 380px) {
-          .card-title-box[is-collapsible] {
-            padding-left: 0;
-            padding-right: 0;
-          }
-          .flex-header {
-            align-items: baseline;
-            padding-top: 10px;
-            flex-wrap: wrap;
-          }
-          .flex-header__collapse {
-            flex-basis: 20%;
-          }
-          .flex-header__title {
-            flex-basis: 60%;
-            overflow: unset;
-            white-space: unset;
-            text-overflow: unset;
-          }
-          .flex-header__actions {
-            order: 2;
-            width: 100%;
-            border-top: 1px solid lightgrey;
-            justify-content: flex-end;
-          }
-          .flex-header__postfix {
-            order: 3;
-          }
-          .flex-header__edit {
-            order: 1;
-            flex-basis: 20%;
-          }
-        }
-      `
-        ];
-    }
     save() {
         fireEvent(this, 'save');
     }
@@ -161,54 +161,45 @@ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
     }
     // language=HTML
     render() {
-        return html `
-      <div class="elevation card-container" elevation="1">
-        <header class="card-title-box with-bottom-line flex-header" ?is-collapsible="${this.isCollapsible}">
+        return html `
+      <div class="elevation card-container" elevation="1">
+        <header class="card-title-box with-bottom-line flex-header" ?is-collapsible="${this.isCollapsible}">
           ${this.isCollapsible
-            ? html `
-                <paper-icon-button
-                  class="flex-header__collapse"
-                  @tap="${() => this.toggleCollapse()}"
-                  icon="${this.collapsed ? 'expand-more' : 'expand-less'}"
-                ></paper-icon-button>
+            ? html `
+                <etools-icon name="${this.collapsed ? 'expand-more' : 'expand-less'}" @click="${() => this.toggleCollapse()}"></etools-icon>
               `
-            : ''}
-          <div class="flex-header__title">${this.cardTitle}</div>
-          <div class="flex-header__actions"><slot name="actions"></slot></div>
-          <div class="layout horizontal center flex-header__edit">
+            : ''}
+          <div class="flex-header__title">${this.cardTitle}</div>
+          <div class="flex-header__actions"><slot name="actions"></slot></div>
+          <div class="layout horizontal center flex-header__edit">
             ${this.isEditable
-            ? html `
-                  <paper-icon-button
-                    icon="create"
-                    ?edit=${this.edit}
-                    ?hidden="${this.hideEditButton}"
-                    class="edit-button"
-                    @tap="${() => this.startEdit()}"
-                  ></paper-icon-button>
+            ? html `
+                    <etools-icon  slot="trigger" ?hidden="${this.hideEditButton}" @click="${() => this.startEdit()}" name="create"></etools-icon>
                 `
-            : ''}
-          </div>
-          <div class="flex-header__postfix"><slot name="postfix"></slot></div>
-        </header>
-        <iron-collapse ?opened="${!this.collapsed}">
-          <section class="card-content-block">
-            <slot name="content"></slot>
-
+            : ''}
+          </div>
+          <div class="flex-header__postfix"><slot name="postfix"></slot></div>
+        </header>
+        <etools-collapse ?opened="${!this.collapsed}">
+          <section class="card-content-block">
+            <slot name="content"></slot>
+
             ${this.isEditable && this.edit
-            ? html `
-                  <div class="layout horizontal end-justified card-buttons">
-                    <paper-button @tap="${() => this.cancel()}"
-                      >${getTranslation(this.language, 'CANCEL')}</paper-button
-                    >
-                    <paper-button class="save-button" @tap="${() => this.save()}"
-                      >${getTranslation(this.language, 'SAVE')}</paper-button
-                    >
-                  </div>
+            ? html `
+                  <div class="layout horizontal end-justified card-buttons">
+                    <etools-button variant="text" class="neutral" @click="${this.cancel}">
+                      ${getTranslation(this.language, 'CANCEL')}
+                    </etools-button>
+
+                    <etools-button variant="primary" class="save-button" @click="${this.save}">
+                      ${getTranslation(this.language, 'SAVE')}
+                    </etools-button>
+                  </div>
                 `
-            : ''}
-          </section>
-        </iron-collapse>
-      </div>
+            : ''}
+          </section>
+        </etools-collapse>
+      </div>
     `;
     }
 };

package/dist/lib/styles/attachments.styles.d.ts

@@ -1,2 +1,2 @@
-import { CSSResult } from 'lit-element';
+import { CSSResult } from 'lit';
 export declare const AttachmentsStyles: CSSResult;