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

package/dist/form-fields/single-fields/attachment-field.d.ts

@@ -1,7 +1,7 @@
-import '@unicef-polymer/etools-upload/etools-upload';
+import '@unicef-polymer/etools-unicef/scr/etools-upload/etools-upload';
 import { BaseField } from './base-field';
 import { SingleUploadFinishedDetails, StoredAttachment } from '../../form-attachments-popup';
-import { TemplateResult, CSSResultArray } from 'lit-element';
+import { CSSResultArray, TemplateResult } from 'lit';
 export declare class AttachmentField extends BaseField<StoredAttachment | null> {
     get uploadUrl(): string;
     get jwtLocalStorageKey(): string;

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

@@ -1,13 +1,9 @@
-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 { __decorate } from "tslib";
+import '@unicef-polymer/etools-unicef/scr/etools-upload/etools-upload';
 import { BaseField } from './base-field';
 import { AttachmentsHelper } from '../../form-attachments-popup';
-import { html, customElement } from 'lit-element';
+import { 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';

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

@@ -1,4 +1,4 @@
-import { TemplateResult } from 'lit-element';
+import { TemplateResult } from 'lit';
 import { AbstractFieldBaseClass } from '../abstract-field-base.class';
 export declare abstract class BaseField<T> extends AbstractFieldBaseClass<T> {
     set errorMessage(message: string | null);

package/dist/form-fields/single-fields/base-field.js

@@ -1,10 +1,5 @@
-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 { property } from 'lit-element';
+import { __decorate } from "tslib";
+import { property } from 'lit/decorators.js';
 import { fireEvent } from '../../lib/utils/fire-custom-event';
 import { AbstractFieldBaseClass } from '../abstract-field-base.class';
 import { getTranslation } from '../../lib/utils/translate';

package/dist/form-fields/single-fields/boolean-field.d.ts

@@ -1,6 +1,6 @@
-import { CSSResultArray, TemplateResult } from 'lit-element';
+import { CSSResultArray, TemplateResult } from 'lit';
 import { BaseField } from './base-field';
-import '@polymer/paper-toggle-button';
+import '@shoelace-style/shoelace/dist/components/switch/switch.js';
 export declare class BooleanField extends BaseField<boolean> {
     protected controlTemplate(): TemplateResult;
     protected customValidation(): string | null;

package/dist/form-fields/single-fields/boolean-field.js

@@ -1,24 +1,20 @@
-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 } from 'lit-element';
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import { BaseField } from './base-field';
-import '@polymer/paper-toggle-button';
 import { InputStyles } from '../../lib/styles/input-styles';
+import '@shoelace-style/shoelace/dist/components/switch/switch.js';
 let BooleanField = class BooleanField extends BaseField {
     controlTemplate() {
         return html `
       ${InputStyles}
-      <paper-toggle-button
+      <sl-switch
         class="no-padding-left"
         ?checked="${this.value}"
-        @iron-change="${(event) => this.valueChanged(event.currentTarget.checked)}"
+        @sl-change="${(e) => this.valueChanged(e.target.checked)}"
         ?disabled="${this.isReadonly}"
       >
-      </paper-toggle-button>
+      </sl-switch>
 
       <div ?hidden="${!this.errorMessage}" class="error-text">${this.errorMessage}</div>
     `;

package/dist/form-fields/single-fields/number-field.d.ts

@@ -1,6 +1,6 @@
-import { CSSResultArray, TemplateResult } from 'lit-element';
+import { CSSResultArray, TemplateResult } from 'lit';
 import { BaseField } from './base-field';
-import '@polymer/paper-input/paper-input';
+import '@unicef-polymer/etools-unicef/src/etools-input/etools-input';
 export declare class NumberField extends BaseField<number> {
     isInteger: boolean;
     protected controlTemplate(): TemplateResult;

package/dist/form-fields/single-fields/number-field.js

@@ -1,12 +1,8 @@
-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 } from 'lit-element';
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import { BaseField } from './base-field';
-import '@polymer/paper-input/paper-input';
+import '@unicef-polymer/etools-unicef/src/etools-input/etools-input';
 import { InputStyles } from '../../lib/styles/input-styles';
 import { getTranslation } from '../../lib/utils/translate';
 let NumberField = class NumberField extends BaseField {
@@ -17,7 +13,7 @@ let NumberField = class NumberField extends BaseField {
     controlTemplate() {
         return html `
       ${InputStyles}
-      <paper-input
+      <etools-input
         class="no-padding-left"
         no-label-float
         placeholder="${this.isReadonly ? '—' : this.placeholder}"
@@ -29,7 +25,7 @@ let NumberField = class NumberField extends BaseField {
         error-message="${this.errorMessage}"
         ?readonly="${this.isReadonly}"
       >
-      </paper-input>
+      </etools-input>
     `;
     }
     valueChanged(newValue) {

package/dist/form-fields/single-fields/scale-field.d.ts

@@ -1,9 +1,9 @@
-import { TemplateResult, CSSResultArray } from 'lit-element';
+import { CSSResultArray, TemplateResult } from 'lit';
 import { BaseField } from './base-field';
-import '@polymer/paper-radio-group/paper-radio-group';
-import '@polymer/paper-radio-button/paper-radio-button';
-import { PaperRadioButtonElement } from '@polymer/paper-radio-button/paper-radio-button';
-export declare type FieldOption = {
+import '@shoelace-style/shoelace/dist/components/radio-group/radio-group.js';
+import '@shoelace-style/shoelace/dist/components/radio/radio.js';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+export type FieldOption = {
     value: any;
     label: string;
 };
@@ -12,7 +12,7 @@ export declare class ScaleField extends BaseField<string | number | null> {
     protected controlTemplate(): TemplateResult;
     protected getLabel(option: FieldOption | string | number): unknown;
     protected getValue(option: FieldOption | string | number): unknown;
-    protected onSelect(item: PaperRadioButtonElement): void;
+    protected onSelect(itemValue: string): void;
     protected customValidation(): string | null;
     static get styles(): CSSResultArray;
 }

package/dist/form-fields/single-fields/scale-field.js

@@ -1,14 +1,12 @@
-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, css, customElement } from 'lit-element';
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
 import { BaseField } from './base-field';
-import { repeat } from 'lit-html/directives/repeat';
-import '@polymer/paper-radio-group/paper-radio-group';
-import '@polymer/paper-radio-button/paper-radio-button';
+import { repeat } from 'lit/directives/repeat.js';
+import '@shoelace-style/shoelace/dist/components/radio-group/radio-group.js';
+import { buttonsStyles } from '@unicef-polymer/etools-unicef/src/styles/button-styles';
+import '@shoelace-style/shoelace/dist/components/radio/radio.js';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
 import { InputStyles } from '../../lib/styles/input-styles';
 import { getTranslation } from '../../lib/utils/translate';
 let ScaleField = class ScaleField extends BaseField {
@@ -20,21 +18,24 @@ let ScaleField = class ScaleField extends BaseField {
         return html `
       ${InputStyles}
       <div class="container">
-        <paper-radio-group
+        <sl-radio-group
           class="radio-group"
-          selected="${this.value}"
-          @iron-select="${({ detail }) => this.onSelect(detail.item)}"
+          .value="${this.value}"
+          @sl-change="${(e) => this.onSelect(e.target.value)}"
         >
           ${repeat(this.options, (option) => html `
-              <paper-radio-button class="radio-button" name="${this.getValue(option)}">
-                ${this.getLabel(option)}
-              </paper-radio-button>
+              <sl-radio class="radio-button" value="${this.getValue(option)}">${this.getLabel(option)}</sl-radio>
             `)}
-        </paper-radio-group>
-
-        <paper-button ?hidden="${this.isReadonly}" @click="${() => this.valueChanged(null)}" class="clear-button">
-          <iron-icon icon="clear"></iron-icon>${getTranslation(this.language, 'CLEAR')}
-        </paper-button>
+        </sl-radio-group>
+        <sl-button
+          variant="primary"
+          ?hidden="${this.isReadonly}"
+          @click="${() => this.valueChanged(null)}"
+          class="clear-button"
+        >
+          <etools-icon name="clear" slot="prefix"></etools-icon>
+          ${getTranslation(this.language, 'CLEAR')}
+        </sl-button>
       </div>
       <div ?hidden="${!this.errorMessage}" class="error-text">${this.errorMessage}</div>
     `;
@@ -45,12 +46,11 @@ let ScaleField = class ScaleField extends BaseField {
     getValue(option) {
         return typeof option === 'object' ? option.value : option;
     }
-    onSelect(item) {
-        const newValue = item.get('name');
-        if (newValue !== this.value) {
+    onSelect(itemValue) {
+        if (itemValue !== this.value) {
             this.touched = true;
         }
-        this.valueChanged(newValue);
+        this.valueChanged(itemValue);
     }
     customValidation() {
         return null;
@@ -59,6 +59,7 @@ let ScaleField = class ScaleField extends BaseField {
         // language=CSS
         return [
             ...BaseField.styles,
+            buttonsStyles,
             css `
         .container {
           position: relative;

package/dist/form-fields/single-fields/text-field.d.ts

@@ -1,6 +1,6 @@
-import { CSSResultArray, TemplateResult } from 'lit-element';
+import { CSSResultArray, TemplateResult } from 'lit';
 import { BaseField } from './base-field';
-import '@polymer/paper-input/paper-textarea';
+import '@unicef-polymer/etools-unicef/src/etools-input/etools-textarea';
 export declare class TextField extends BaseField<string> {
     protected controlTemplate(): TemplateResult;
     protected customValidation(): string | null;

package/dist/form-fields/single-fields/text-field.js

@@ -1,31 +1,26 @@
-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 } from 'lit-element';
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import { BaseField } from './base-field';
-import '@polymer/paper-input/paper-textarea';
+import '@unicef-polymer/etools-unicef/src/etools-input/etools-textarea';
 import { InputStyles } from '../../lib/styles/input-styles';
 let TextField = class TextField extends BaseField {
     controlTemplate() {
         return html `
       ${InputStyles}
-      <paper-textarea
-        id="textarea"
+      <etools-textarea
+        id="otherInfo"
         class="no-padding-left"
         no-label-float
         placeholder="${this.isReadonly ? '—' : this.placeholder}"
         .value="${this.value}"
         @value-changed="${({ detail }) => this.valueChanged(detail.value)}"
         @focus="${() => (this.touched = true)}"
-        placeholder="&#8212;"
         ?readonly="${this.isReadonly}"
         ?invalid="${this.errorMessage}"
         error-message="${this.errorMessage}"
       >
-      </paper-textarea>
+      </etools-textarea>
     `;
     }
     customValidation() {
@@ -36,7 +31,7 @@ let TextField = class TextField extends BaseField {
         return [
             ...BaseField.styles,
             css `
-        :host(.wide) paper-textarea {
+        :host(.wide) etools-textarea {
           padding-left: 0;
         }
         @media (max-width: 380px) {

package/dist/form-groups/form-abstract-group.d.ts

@@ -1,8 +1,8 @@
-import { LitElement, TemplateResult, CSSResultArray } from 'lit-element';
+import { CSSResultArray, LitElement, TemplateResult } from 'lit';
 import '../form-fields/single-fields/text-field';
 import '../form-fields/single-fields/number-field';
 import '../form-fields/single-fields/scale-field';
-import '@polymer/paper-input/paper-textarea';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
 import { IFormBuilderAbstractGroup } from '../lib/types/form-builder.interfaces';
 import { BlueprintField, BlueprintGroup, BlueprintMetadata, Information } from '../lib/types/form-builder.types';
 import { GenericObject } from '../lib/types/global.types';

package/dist/form-groups/form-abstract-group.js

@@ -1,14 +1,11 @@
-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 '../form-fields/single-fields/text-field';
 import '../form-fields/single-fields/number-field';
 import '../form-fields/single-fields/scale-field';
-import '@polymer/paper-input/paper-textarea';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import { buttonsStyles } from '@unicef-polymer/etools-unicef/src/styles/button-styles';
 import { SharedStyles } from '../lib/styles/shared-styles';
 import { pageLayoutStyles } from '../lib/styles/page-layout-styles';
 import { elevationStyles } from '../lib/styles/elevation-styles';
@@ -16,7 +13,7 @@ import { CardStyles } from '../lib/styles/card-styles';
 import { FlexLayoutClasses } from '../lib/styles/flex-layout-classes';
 import { fireEvent } from '../lib/utils/fire-custom-event';
 import { clone } from 'ramda';
-import { live } from 'lit-html/directives/live';
+import { live } from 'lit/directives/live.js';
 import { openDialog } from '../lib/utils/dialog';
 import { FormBuilderCardStyles } from '../lib/styles/form-builder-card.styles';
 import { getTranslation } from '../lib/utils/translate';
@@ -40,19 +37,6 @@ export var StructureTypes;
     StructureTypes["ATTACHMENTS_BUTTON"] = "floating_attachments";
 })(StructureTypes || (StructureTypes = {}));
 let FormAbstractGroup = class FormAbstractGroup extends LitElement {
-    constructor() {
-        super();
-        this.parentGroupName = '';
-        this.collapsed = false;
-        this.readonly = false;
-        this._errors = {};
-        this._value = {};
-        this.computedPath = [];
-        if (!this.language) {
-            this.language = window.localStorage.defaultLanguage || 'en';
-        }
-        this.handleLanguageChange = this.handleLanguageChange.bind(this);
-    }
     /**
      * Make value property immutable
      * @param value
@@ -84,6 +68,19 @@ let FormAbstractGroup = class FormAbstractGroup extends LitElement {
             this._errors = errors;
         }
     }
+    constructor() {
+        super();
+        this.parentGroupName = '';
+        this.collapsed = false;
+        this.readonly = false;
+        this._errors = {};
+        this._value = {};
+        this.computedPath = [];
+        if (!this.language) {
+            this.language = window.localStorage.defaultLanguage || 'en';
+        }
+        this.handleLanguageChange = this.handleLanguageChange.bind(this);
+    }
     connectedCallback() {
         super.connectedCallback();
         document.addEventListener('language-changed', this.handleLanguageChange.bind(this));
@@ -155,12 +152,12 @@ let FormAbstractGroup = class FormAbstractGroup extends LitElement {
         const value = (this.value && this.value[groupStructure.name]) || [{}];
         return html `
       ${value.map((_, index) => this.getGroupTemplate(groupStructure, index))}
-      <paper-button class="add-group save-button" @click="${() => this.addGroup(groupStructure.name)}">
+      <sl-button variant="primary" class="add-group save-button" @click="${() => this.addGroup(groupStructure.name)}">
         ${getTranslation(this.language, 'ADD')}
         ${!groupStructure.title || groupStructure.title.length > 15
             ? getTranslation(this.language, 'GROUP')
             : groupStructure.title}
-      </paper-button>
+      </sl-button>
     `;
     }
     getGroupTemplate(groupStructure, index) {
@@ -302,6 +299,7 @@ let FormAbstractGroup = class FormAbstractGroup extends LitElement {
             CardStyles,
             FlexLayoutClasses,
             FormBuilderCardStyles,
+            buttonsStyles,
             css `
         :host {
           display: flex;

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

@@ -1,8 +1,10 @@
-import { TemplateResult } from 'lit-element';
+import { CSSResultArray, TemplateResult } from 'lit';
 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';
+import '@unicef-polymer/etools-unicef/src/etools-collapse/etools-collapse';
+import '@unicef-polymer/etools-unicef/src/etools-icons/etools-icon';
+import '@unicef-polymer/etools-unicef/src/etools-icon-button/etools-icon-button';
 export declare class FormCard extends FormAbstractGroup implements IFormBuilderCard {
     protected _value: GenericObject;
     /**
@@ -21,6 +23,7 @@ export declare class FormCard extends FormAbstractGroup implements IFormBuilderC
      * Extends parent render method,
      * adds card-container html wrapper and dynamic save button
      */
+    static get styles(): CSSResultArray;
     render(): TemplateResult;
     /**
      * Updates value property, stops event propagation.

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

@@ -1,16 +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 { html, property, customElement } from 'lit-element';
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
 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';
+import '@unicef-polymer/etools-unicef/src/etools-collapse/etools-collapse';
+import '@unicef-polymer/etools-unicef/src/etools-icons/etools-icon';
+import '@unicef-polymer/etools-unicef/src/etools-icon-button/etools-icon-button';
+import { buttonsStyles } from '@unicef-polymer/etools-unicef/src/styles/button-styles';
 let FormCard = class FormCard extends FormAbstractGroup {
     constructor() {
         super(...arguments);
@@ -39,6 +38,9 @@ let FormCard = class FormCard extends FormAbstractGroup {
      * Extends parent render method,
      * adds card-container html wrapper and dynamic save button
      */
+    static get styles() {
+        return [buttonsStyles];
+    }
     render() {
         return html `
       <section class="elevation page-content card-container form-card" elevation="1">
@@ -53,18 +55,18 @@ let FormCard = class FormCard extends FormAbstractGroup {
             ${!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>
+            <etools-icon-button class="attachments-warning" name="delete"></etools-icon-button>
           </div>
         </div>
         ${super.render()}
 
-        <iron-collapse ?opened="${this.showSaveButton}">
+        <etools-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
-            >
+            <sl-button variant="primary" @click="${this.saveChanges}">
+              ${getTranslation(this.language, 'SAVE')}
+            </sl-button>
           </div>
-        </iron-collapse>
+        </etools-collapse>
       </section>
     `;
     }

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

@@ -1,9 +1,10 @@
-import { TemplateResult } from 'lit-element';
+import { TemplateResult } from 'lit';
 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';
+import '@unicef-polymer/etools-unicef/src/etools-icon-button/etools-icon-button';
 export declare class FormCollapsedCard extends FormAbstractGroup implements IFormBuilderCollapsedCard, IFormBuilderCard {
     collapsed: boolean;
     /**
@@ -11,8 +12,8 @@ export declare class FormCollapsedCard extends FormAbstractGroup implements IFor
      * 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;
+    set setReadonly(state: boolean);
+    get getReadonly(): boolean;
     protected isEditMode: boolean;
     protected _readonly: boolean;
     /**

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';
@@ -29,10 +26,10 @@ let FormCollapsedCard = class FormCollapsedCard extends FormAbstractGroup {
      * 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) {
+    set setReadonly(state) {
         this._readonly = state;
     }
-    get readonly() {
+    get getReadonly() {
         return this._readonly || !this.isEditMode;
     }
     /**
@@ -87,11 +84,12 @@ let FormCollapsedCard = class FormCollapsedCard extends FormAbstractGroup {
           <!-- 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"
+            <etools-icon-button
               class="attachments-warning"
+              name="close"
               @click="${() => this.confirmRemove(this.groupStructure.title || getTranslation(this.language, 'THIS_GROUP'))}"
-            ></paper-icon-button>
+            >
+            </etools-icon-button>
           </div>
           <div slot="content">${this.renderGroupChildren()}</div>
         </etools-fb-card>
@@ -118,11 +116,14 @@ let FormCollapsedCard = class FormCollapsedCard extends FormAbstractGroup {
         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>
+          <etools-icon id="attachments-warning" name="warning" ?hidden="${!this._errors.attachments}"></etools-icon>
+          <sl-button id="primary" variant="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)}
-          </paper-button>
+          </sl-button>
         `;
     }
     retrieveTitle(target) {
@@ -149,7 +150,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;
         });

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;