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

package/dist/form-attachments-popup/form-attachments-popup.d.ts

@@ -1,12 +1,10 @@
-import '@unicef-polymer/etools-dialog/etools-dialog';
-import '@unicef-polymer/etools-upload/etools-upload-multi';
-import '@unicef-polymer/etools-dropdown/etools-dropdown';
-import '@polymer/paper-button/paper-button';
-import '@polymer/iron-icons/iron-icons';
-import { CSSResultArray, LitElement, TemplateResult } from 'lit-element';
+import '@unicef-polymer/etools-unicef/src/etools-dialog/etools-dialog';
+import '@unicef-polymer/etools-unicef/src/etools-upload/etools-upload-multi';
+import '@unicef-polymer/etools-unicef/src/etools-dropdown/etools-dropdown';
+import { CSSResultArray, LitElement, TemplateResult } from 'lit';
 import { GenericObject } from '../lib/types/global.types';
 import { BlueprintMetadata } from '../lib/types/form-builder.types';
-export declare type FormBuilderAttachmentsPopupData = {
+export type FormBuilderAttachmentsPopupData = {
     attachments: StoredAttachment[];
     metadata: BlueprintMetadata;
     title: string;
@@ -14,14 +12,14 @@ export declare type FormBuilderAttachmentsPopupData = {
     computedPath: string[];
     errors: GenericObject[];
 };
-export declare type StoredAttachment = {
+export type StoredAttachment = {
     attachment: string | number;
     filename: string;
     file_type: number | null;
     url?: string;
     composedPath?: string[];
 };
-export declare type UploadedAttachment = {
+export type UploadedAttachment = {
     id: number;
     object_link: string;
     file_type: string;
@@ -31,18 +29,18 @@ export declare type UploadedAttachment = {
     created: string;
     attachment: number;
 };
-export declare type OfflineSavedAttachment = {
+export type OfflineSavedAttachment = {
     id: string;
     filetype: string;
     filename: string;
     extraInfo: string[];
     unsynced: boolean;
 };
-export declare type UploadFinishedDetails = {
+export type UploadFinishedDetails = {
     success: (UploadedAttachment | OfflineSavedAttachment)[];
     error: any[];
 };
-export declare type SingleUploadFinishedDetails = {
+export type SingleUploadFinishedDetails = {
     success: UploadedAttachment | OfflineSavedAttachment;
     error: any[];
 };

package/dist/form-attachments-popup/form-attachments-popup.js

@@ -1,24 +1,33 @@
-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-dialog/etools-dialog';
-import '@unicef-polymer/etools-upload/etools-upload-multi';
-import '@unicef-polymer/etools-dropdown/etools-dropdown';
-import '@polymer/paper-button/paper-button';
-import '@polymer/iron-icons/iron-icons';
-import { css, customElement, LitElement, property, query } from 'lit-element';
+import { __decorate } from "tslib";
+import '@unicef-polymer/etools-unicef/src/etools-dialog/etools-dialog';
+import '@unicef-polymer/etools-unicef/src/etools-upload/etools-upload-multi';
+import '@unicef-polymer/etools-unicef/src/etools-dropdown/etools-dropdown';
+import { deleteFileFromDexie } from '@unicef-polymer/etools-unicef/src/etools-upload/offline/dexie-operations';
+import { css, LitElement } from 'lit';
+import { property, query, customElement } from 'lit/decorators.js';
 import { clone, equals } from 'ramda';
 import { template } from './form-attachments-popup.tpl';
 import { fireEvent } from '../lib/utils/fire-custom-event';
 import { SharedStyles } from '../lib/styles/shared-styles';
 import { AttachmentsStyles } from '../lib/styles/attachments.styles';
 import { AttachmentsHelper } from './form-attachments-popup.helper';
-import { deleteFileFromDexie } from '@unicef-polymer/etools-upload/offline/dexie-operations';
 import { getTranslation } from '../lib/utils/translate';
 let FormAttachmentsPopup = class FormAttachmentsPopup extends LitElement {
+    set dialogData({ attachments, title, metadata, readonly, computedPath, errors }) {
+        this.popupTitle = title;
+        this.attachments = clone(attachments) || [];
+        this.originalAttachments = clone(attachments) || [];
+        this.metadata = clone(metadata);
+        this.readonly = Boolean(readonly);
+        this.computedPath = computedPath;
+        this.errors = clone(errors) || [];
+    }
+    get uploadUrl() {
+        return AttachmentsHelper.uploadUrl;
+    }
+    get jwtLocalStorageKey() {
+        return AttachmentsHelper.jwtLocalStorageKey;
+    }
     constructor() {
         super();
         this.dialogOpened = true;
@@ -41,21 +50,6 @@ let FormAttachmentsPopup = class FormAttachmentsPopup extends LitElement {
             this.language = window.localStorage.defaultLanguage || 'en';
         }
     }
-    set dialogData({ attachments, title, metadata, readonly, computedPath, errors }) {
-        this.popupTitle = title;
-        this.attachments = clone(attachments) || [];
-        this.originalAttachments = clone(attachments) || [];
-        this.metadata = clone(metadata);
-        this.readonly = Boolean(readonly);
-        this.computedPath = computedPath;
-        this.errors = clone(errors) || [];
-    }
-    get uploadUrl() {
-        return AttachmentsHelper.uploadUrl;
-    }
-    get jwtLocalStorageKey() {
-        return AttachmentsHelper.jwtLocalStorageKey;
-    }
     render() {
         return template.call(this);
     }

package/dist/form-attachments-popup/form-attachments-popup.tpl.d.ts

@@ -1,3 +1,7 @@
 import { FormAttachmentsPopup } from './form-attachments-popup';
 import { TemplateResult } from 'lit-html';
+import '@unicef-polymer/etools-unicef/src/etools-dialog/etools-dialog.js';
+import '@unicef-polymer/etools-unicef/src/etools-dropdown/etools-dropdown.js';
+import '@unicef-polymer/etools-unicef/src/etools-upload/etools-upload-multi';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
 export declare function template(this: FormAttachmentsPopup): TemplateResult;

package/dist/form-attachments-popup/form-attachments-popup.tpl.js

@@ -2,10 +2,18 @@ import { html } from 'lit-html';
 import { InputStyles } from '../lib/styles/input-styles';
 import { DialogStyles } from '../lib/styles/dialog.styles';
 import { getTranslation } from '../lib/utils/translate';
+import '@unicef-polymer/etools-unicef/src/etools-dialog/etools-dialog.js';
+import '@unicef-polymer/etools-unicef/src/etools-dropdown/etools-dropdown.js';
+import '@unicef-polymer/etools-unicef/src/etools-upload/etools-upload-multi';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import { buttonsStyles } from '@unicef-polymer/etools-unicef/src/styles/button-styles';
 export function template() {
     var _a;
     return html `
     ${InputStyles} ${DialogStyles}
+    <style>
+      ${buttonsStyles}
+    </style>
     <etools-dialog
       id="form-attachments-dialog"
       size="md"
@@ -49,28 +57,31 @@ export function template() {
 
               <!--        File name component          -->
               <div class="filename-container file-selector__filename">
-                <iron-icon class="file-icon" icon="attachment"></iron-icon>
+                <etools-icon class="file-icon" name="attachment"></etools-icon>
                 <span class="filename" title="${attachment.filename}">${attachment.filename}</span>
               </div>
 
               <!--         Download Button         -->
-              <paper-button
+              <sl-button
+                class="neutral"
+                variant="text"
                 ?hidden="${!attachment.url}"
                 class="download-button file-selector__download"
-                @tap="${() => this.downloadFile(attachment)}"
+                @click="${this.downloadFile(attachment)}"
               >
-                <iron-icon icon="cloud-download" class="dw-icon"></iron-icon>
+                <etools-icon name="cloud-download" class="dw-icon" slot="prefix"></etools-icon>
                 ${getTranslation(this.language, 'DOWNLOAD')}
-              </paper-button>
+              </sl-button>
 
               <!--        Delete Button          -->
-              <paper-button
+              <sl-button
+                variant="danger"
                 class="delete-button file-selector__delete"
                 ?hidden="${this.readonly}"
-                @tap="${() => this.deleteAttachment(index)}"
+                @click="${this.deleteAttachment(index)}"
               >
                 ${getTranslation(this.language, 'DELETE')}
-              </paper-button>
+              </sl-button>
             </div>
           `;
     })}

package/dist/form-fields/abstract-field-base.class.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultArray, LitElement, TemplateResult } from 'lit-element';
+import { CSSResultArray, LitElement, TemplateResult } from 'lit';
 import { FieldValidator } from '../lib/utils/validations.helper';
 /**
  * Class that contains common properties and methods for single and repeatable fields

package/dist/form-fields/abstract-field-base.class.js

@@ -1,16 +1,25 @@
-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, css, html } from 'lit-element';
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
 import { validate } from '../lib/utils/validations.helper';
 import { FlexLayoutClasses } from '../lib/styles/flex-layout-classes';
 /**
  * Class that contains common properties and methods for single and repeatable fields
  */
 export class AbstractFieldBaseClass extends LitElement {
+    set isReadonly(readonly) {
+        this._readonly = readonly;
+        this.setDefaultValue(readonly, this._defaultValue);
+        this.requestUpdate();
+    }
+    get isReadonly() {
+        return this._readonly;
+    }
+    set defaultValue(value) {
+        this._defaultValue = value;
+        this.setDefaultValue(this._readonly, value);
+        this.requestUpdate();
+    }
     constructor() {
         super();
         this.questionText = '';
@@ -25,19 +34,6 @@ export class AbstractFieldBaseClass extends LitElement {
         }
         this.handleLanguageChange = this.handleLanguageChange.bind(this);
     }
-    set isReadonly(readonly) {
-        this._readonly = readonly;
-        this.setDefaultValue(readonly, this._defaultValue);
-        this.requestUpdate();
-    }
-    get isReadonly() {
-        return this._readonly;
-    }
-    set defaultValue(value) {
-        this._defaultValue = value;
-        this.setDefaultValue(this._readonly, value);
-        this.requestUpdate();
-    }
     connectedCallback() {
         super.connectedCallback();
         document.addEventListener('language-changed', this.handleLanguageChange.bind(this));

package/dist/form-fields/field-renderer-component.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultArray, LitElement, TemplateResult } from 'lit-element';
+import { CSSResultArray, LitElement, TemplateResult } from 'lit';
 import { BlueprintField } from '../lib/types/form-builder.types';
 import { FieldValidator } from '../lib/utils/validations.helper';
 import { FieldOption } from './single-fields/scale-field';

package/dist/form-fields/field-renderer-component.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 { css, customElement, html, LitElement, property } from 'lit-element';
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
 import { FlexLayoutClasses } from '../lib/styles/flex-layout-classes';
 import { FieldTypes, StructureTypes } from '../form-groups';
 import { FormBuilderCardStyles } from '../lib/styles/form-builder-card.styles';

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

@@ -1,7 +1,9 @@
-import '@unicef-polymer/etools-upload/etools-upload';
+import '@unicef-polymer/etools-unicef/src/etools-upload/etools-upload';
 import { RepeatableBaseField } from './repeatable-base-field';
 import { StoredAttachment, UploadFinishedDetails } from '../../form-attachments-popup';
-import { TemplateResult, CSSResultArray } from 'lit-element';
+import { CSSResultArray, TemplateResult } from 'lit';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import '@unicef-polymer/etools-unicef/src/etools-upload/etools-upload-multi';
 export declare class RepeatableAttachmentField extends RepeatableBaseField<StoredAttachment> {
     get uploadUrl(): string;
     get jwtLocalStorageKey(): string;

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

@@ -1,17 +1,16 @@
-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/src/etools-upload/etools-upload';
 import { RepeatableBaseField } from './repeatable-base-field';
 import { AttachmentsHelper } from '../../form-attachments-popup';
-import { html, css, customElement } from 'lit-element';
+import { css, 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';
 import { getTranslation } from '../../lib/utils/translate';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import '@unicef-polymer/etools-unicef/src/etools-upload/etools-upload-multi';
+import { buttonsStyles } from '@unicef-polymer/etools-unicef/src/styles/button-styles';
 let RepeatableAttachmentField = class RepeatableAttachmentField extends RepeatableBaseField {
     constructor() {
         super(...arguments);
@@ -35,28 +34,31 @@ let RepeatableAttachmentField = class RepeatableAttachmentField extends Repeatab
                   <div class="layout horizontal file-container">
                     <!--        File name component          -->
                     <div class="filename-container file-selector__filename">
-                      <iron-icon class="file-icon" icon="attachment"></iron-icon>
+                      <etools-icon class="file-icon" name="attachment"></etools-icon>
                       <span class="filename" title="${value.filename}">${value.filename}</span>
                     </div>
 
                     <!--         Download Button         -->
-                    <paper-button
+                    <sl-button
+                      class="neutral"
+                      variant="text"
                       ?hidden="${!value.url}"
                       class="download-button file-selector__download"
-                      @tap="${() => this.downloadFile(value)}"
+                      @click="${this.downloadFile(value)}"
                     >
-                      <iron-icon icon="cloud-download" class="dw-icon"></iron-icon>
+                      <etools-icon name="cloud-download" class="dw-icon" slot="prefix"></etools-icon>
                       ${getTranslation(this.language, 'DOWNLOAD')}
-                    </paper-button>
+                    </sl-button>
 
                     <!--        Delete Button          -->
-                    <paper-button
+                    <sl-button
+                      variant="danger"
                       class="delete-button file-selector__delete"
                       ?hidden="${this.isReadonly}"
-                      @tap="${() => this.removeControl(index)}"
+                      @click="${this.removeControl(index)}"
                     >
                       ${getTranslation(this.language, 'DELETE')}
-                    </paper-button>
+                    </sl-button>
                   </div>
                 `
             : '')}
@@ -135,6 +137,7 @@ let RepeatableAttachmentField = class RepeatableAttachmentField extends Repeatab
             ...RepeatableBaseField.styles,
             SharedStyles,
             AttachmentsStyles,
+            buttonsStyles,
             css `
         .file-selector__type-dropdown {
           flex-basis: 25%;

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

@@ -1,4 +1,5 @@
-import { CSSResultArray, TemplateResult } from 'lit-element';
+import { CSSResultArray, TemplateResult } from 'lit';
+import '@unicef-polymer/etools-unicef/src/etools-icon-button/etools-icon-button';
 import { AbstractFieldBaseClass } from '../abstract-field-base.class';
 export declare abstract class RepeatableBaseField<T> extends AbstractFieldBaseClass<T[]> {
     set errorMessage(messages: (string | null)[]);

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

@@ -1,10 +1,7 @@
-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, html, property } from 'lit-element';
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import '@unicef-polymer/etools-unicef/src/etools-icon-button/etools-icon-button';
 import { AbstractFieldBaseClass } from '../abstract-field-base.class';
 import { fireEvent } from '../../lib/utils/fire-custom-event';
 import { getTranslation } from '../../lib/utils/translate';
@@ -28,15 +25,15 @@ export class RepeatableBaseField extends AbstractFieldBaseClass {
         <div class="question-control layout vertical center-justified start">
           ${values.map((value, index) => html `<div class="layout horizontal center full-width">
                 ${this.controlTemplate(value, index)}
-                <iron-icon
-                  icon="close"
+                <etools-icon-button
+                  name="close"
                   ?hidden="${this.isReadonly || values.length < 2}"
                   @click="${() => this.removeControl(index)}"
-                ></iron-icon>
+                ></etools-icon-button>
               </div>`)}
-          <paper-button class="add-button" ?hidden="${this.isReadonly}" @click="${() => this.addNewField()}">
+          <sl-button variant="primary" class="add-button" ?hidden="${this.isReadonly}" @click="${this.addNewField}">
             ${getTranslation(this.language, 'ADD')}
-          </paper-button>
+          </sl-button>
         </div>
       </div>
     `;

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

@@ -1,5 +1,5 @@
-import { CSSResultArray, TemplateResult } from 'lit-element';
-import '@polymer/paper-input/paper-input';
+import { CSSResultArray, TemplateResult } from 'lit';
+import '@unicef-polymer/etools-unicef/src/etools-input/etools-input';
 import { RepeatableBaseField } from './repeatable-base-field';
 export declare class RepeatableNumberField extends RepeatableBaseField<number> {
     isInteger: boolean;

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

@@ -1,11 +1,7 @@
-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 '@polymer/paper-input/paper-input';
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import '@unicef-polymer/etools-unicef/src/etools-input/etools-input';
 import { InputStyles } from '../../lib/styles/input-styles';
 import { RepeatableBaseField } from './repeatable-base-field';
 import { AbstractFieldBaseClass } from '../abstract-field-base.class';
@@ -18,7 +14,7 @@ let RepeatableNumberField = class RepeatableNumberField extends RepeatableBaseFi
     controlTemplate(value, index) {
         return html `
       ${InputStyles}
-      <paper-input
+      <etools-input
         class="no-padding-left"
         no-label-float
         placeholder="${this.isReadonly ? '—' : this.placeholder}"
@@ -29,7 +25,7 @@ let RepeatableNumberField = class RepeatableNumberField extends RepeatableBaseFi
         error-message="${this.errorMessage[index]}"
         ?readonly="${this.isReadonly}"
       >
-      </paper-input>
+      </etools-input>
     `;
     }
     valueChanged(newValue, index) {

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

@@ -1,13 +1,13 @@
-import { TemplateResult, CSSResultArray } from 'lit-element';
-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';
+import { CSSResultArray, TemplateResult } from 'lit';
+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';
 import { RepeatableBaseField } from './repeatable-base-field';
 import { FieldOption } from '..';
 export declare class RepeatableScaleField extends RepeatableBaseField<string | number | null> {
     options: (FieldOption | string | number)[];
     protected controlTemplate(value: string | null, index: number): TemplateResult;
-    protected onSelect(item: PaperRadioButtonElement, index: number): void;
+    protected onSelect(itemValue: string, index: number): void;
     protected getLabel(option: FieldOption | string | number): unknown;
     protected getValue(option: FieldOption | string | number): unknown;
     protected customValidation(): string | null;

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

@@ -1,15 +1,14 @@
-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 { repeat } from 'lit-html/directives/repeat';
-import '@polymer/paper-radio-group/paper-radio-group';
-import '@polymer/paper-radio-button/paper-radio-button';
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+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';
+import { buttonsStyles } from '@unicef-polymer/etools-unicef/src/styles/button-styles';
 import { InputStyles } from '../../lib/styles/input-styles';
 import { RepeatableBaseField } from './repeatable-base-field';
+import { getTranslation } from '../../lib/utils/translate';
 import { AbstractFieldBaseClass } from '../abstract-field-base.class';
 let RepeatableScaleField = class RepeatableScaleField extends RepeatableBaseField {
     constructor() {
@@ -20,31 +19,29 @@ let RepeatableScaleField = class RepeatableScaleField extends RepeatableBaseFiel
         return html `
       ${InputStyles}
       <div class="container">
-        <paper-radio-group
+        <sl-radio-group
           class="radio-group"
-          selected="${value}"
-          @iron-select="${({ detail }) => this.onSelect(detail.item, index)}"
+          .value="${value}"
+          @sl-change="${(e) => this.onSelect(e.target.value, index)}"
         >
           ${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
+        </sl-radio-group>
+        <sl-button
+          variant="primary"
           ?hidden="${this.isReadonly}"
           @click="${() => this.valueChanged(null, index)}"
           class="clear-button"
         >
-          <iron-icon icon="clear"></iron-icon>Clear
-        </paper-button>
+          <etools-icon name="clear" slot="prefix"></etools-icon>
+          ${getTranslation(this.language, 'CLEAR')}
+        </sl-button>
       </div>
     `;
     }
-    onSelect(item, index) {
-        const newValue = item.get('name');
-        this.valueChanged(newValue, index);
+    onSelect(itemValue, index) {
+        this.valueChanged(itemValue, index);
     }
     getLabel(option) {
         return typeof option === 'object' ? option.label : option;
@@ -59,6 +56,7 @@ let RepeatableScaleField = class RepeatableScaleField extends RepeatableBaseFiel
         // language=CSS
         return [
             ...AbstractFieldBaseClass.styles,
+            buttonsStyles,
             css `
         .container {
           position: relative;

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

@@ -1,5 +1,5 @@
-import { CSSResultArray, TemplateResult } from 'lit-element';
-import '@polymer/paper-input/paper-textarea';
+import { CSSResultArray, TemplateResult } from 'lit';
+import '@unicef-polymer/etools-unicef/src/etools-input/etools-textarea';
 import { RepeatableBaseField } from './repeatable-base-field';
 export declare class RepeatableTextField extends RepeatableBaseField<string> {
     protected controlTemplate(value: string | null, index: number): TemplateResult;

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

@@ -1,11 +1,7 @@
-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 '@polymer/paper-input/paper-textarea';
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import '@unicef-polymer/etools-unicef/src/etools-input/etools-textarea';
 import { InputStyles } from '../../lib/styles/input-styles';
 import { RepeatableBaseField } from './repeatable-base-field';
 import { AbstractFieldBaseClass } from '../abstract-field-base.class';
@@ -13,7 +9,7 @@ let RepeatableTextField = class RepeatableTextField extends RepeatableBaseField
     controlTemplate(value, index) {
         return html `
       ${InputStyles}
-      <paper-textarea
+      <etools-textarea
         id="textarea"
         class="no-padding-left"
         no-label-float
@@ -24,7 +20,7 @@ let RepeatableTextField = class RepeatableTextField extends RepeatableBaseField
         ?invalid="${this.errorMessage[index]}"
         error-message="${this.errorMessage[index]}"
       >
-      </paper-textarea>
+      </etools-textarea>
     `;
     }
     customValidation() {