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

package/dist/assets/translations.js

@@ -62,6 +62,70 @@ const translations = {
         NUMBER_MUST_BE_LOWER_THAN: 'Le nombre doit être inférieur à {0}',
         DOCUMENT_TYPE: 'Type de document',
         SELECT_DOCUMENT_TYPE: 'Sélectionnez le type de document'
+    },
+    ar: {
+        SAVE: 'يحفظ',
+        DOWNLOAD: 'تحميل',
+        CHANGE: 'يتغير',
+        DELETE: 'يمسح',
+        CANCEL: 'يلغي',
+        OK: 'نعم',
+        ADD: 'يضيف',
+        UPLOAD_ATTACHMENTS_FAILED: 'لا يمكن تحميل المرفقات. الرجاء معاودة المحاولة في وقت لاحق',
+        REQUIRED_FIELD: 'هذه الخانة مطلوبه',
+        MUST_BE_INTEGER: 'يجب أن يكون صحيحا',
+        MUST_BE_NUMBER: 'يجب أن يكون رقما',
+        CLEAR: 'واضح',
+        GROUP_REQUIRED: 'المجموعة مطلوبة. يجب أن تكون هناك مجموعة واحدة على الأقل',
+        GROUP: 'مجموعة',
+        THIS_GROUP: 'هذه المجموعة',
+        CHECK_FIELDS_TRY_AGAIN: 'يرجى التحقق من كافة الحقول والمحاولة مرة أخرى',
+        CONFIRM_DELETE: 'هل أنت متأكد أنك تريد حذف',
+        UPLOAD_FILES: 'تحميل الملفات',
+        FILE: 'ملف',
+        FILES: 'ملفات',
+        ATTACHMENTS_FOR: 'المرفقات ل',
+        PARTNER: 'شريك',
+        CP_OUTPUT: 'إخراج سي بي',
+        PD_SPD: 'بي دي/SPD',
+        TEXT_MUST_BE_LESS_CHARS: 'يجب أن يكون النص أقل من {0} حرف',
+        DOES_NOT_MATCH_PATTERN: 'لا يتطابق مع النمط المسموح به',
+        NUMBER_MUST_BE_GREATER_THAN: 'يجب أن يكون الرقم أكبر من {0}',
+        NUMBER_MUST_BE_LOWER_THAN: 'يجب أن يكون الرقم أقل من {0}',
+        DOCUMENT_TYPE: 'نوع الوثيقة',
+        SELECT_DOCUMENT_TYPE: 'حدد نوع المستند'
+    },
+    es: {
+        SAVE: 'Guardar',
+        DOWNLOAD: 'Descargar',
+        CHANGE: 'Cambia',
+        DELETE: 'Eliminar',
+        CANCEL: 'Cancelar',
+        OK: 'Biean',
+        ADD: 'Añadir',
+        UPLOAD_ATTACHMENTS_FAILED: 'No se pueden cargar archivos adjuntos. Por favor, inténtelo de nuevo más tarde',
+        REQUIRED_FIELD: 'Este campo es obligatorio',
+        MUST_BE_INTEGER: 'Debe ser un entero',
+        MUST_BE_NUMBER: 'Tiene que ser un número',
+        CLEAR: 'Claro',
+        GROUP_REQUIRED: 'Se requiere grupo. Debe existir al menos un grupo.',
+        GROUP: 'grupo',
+        THIS_GROUP: 'este grupo',
+        CHECK_FIELDS_TRY_AGAIN: 'Por favor revisa todos los campos y vuelve a intentarlo.',
+        CONFIRM_DELETE: '¿Estás seguro de que quieres eliminar?',
+        UPLOAD_FILES: 'Subir archivos',
+        FILE: 'Archivo',
+        FILES: 'Archivos',
+        ATTACHMENTS_FOR: 'Adjuntos para',
+        PARTNER: 'Pareja',
+        CP_OUTPUT: 'Salida CP',
+        PD_SPD: 'PD/SPD',
+        TEXT_MUST_BE_LESS_CHARS: 'El texto debe tener menos de {0} caracteres',
+        DOES_NOT_MATCH_PATTERN: 'No coincide con el patrón permitido',
+        NUMBER_MUST_BE_GREATER_THAN: 'El número debe ser mayor que {0}',
+        NUMBER_MUST_BE_LOWER_THAN: 'El número debe ser inferior a {0}',
+        DOCUMENT_TYPE: 'Tipo de Documento',
+        SELECT_DOCUMENT_TYPE: 'Seleccionar tipo de documento'
     }
 };
 export default translations;

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

@@ -1,6 +1,7 @@
 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 '@unicef-polymer/etools-unicef/src/etools-button/etools-button';
 import { CSSResultArray, LitElement, TemplateResult } from 'lit';
 import { GenericObject } from '../lib/types/global.types';
 import { BlueprintMetadata } from '../lib/types/form-builder.types';
@@ -65,6 +66,9 @@ export declare class FormAttachmentsPopup extends LitElement {
     get uploadUrl(): string;
     get jwtLocalStorageKey(): string;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleLanguageChange(e: CustomEvent): void;
     render(): TemplateResult | void;
     /**
      * on Cancel button click

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

@@ -2,16 +2,17 @@ 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 '@unicef-polymer/etools-unicef/src/etools-button/etools-button';
 import { deleteFileFromDexie } from '@unicef-polymer/etools-unicef/src/etools-upload/offline/dexie-operations';
-import { css, LitElement } from 'lit';
+import { css, html, 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 { getTranslation } from '../lib/utils/translate';
+import { DialogStyles } from '../lib/styles/dialog.styles';
 let FormAttachmentsPopup = class FormAttachmentsPopup extends LitElement {
     set dialogData({ attachments, title, metadata, readonly, computedPath, errors }) {
         this.popupTitle = title;
@@ -47,11 +48,113 @@ let FormAttachmentsPopup = class FormAttachmentsPopup extends LitElement {
             throw new Error('Please initialize attachments popup before use');
         }
         if (!this.language) {
-            this.language = window.localStorage.defaultLanguage || 'en';
+            this.language = window.EtoolsLanguage || 'en';
         }
     }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('language-changed', this.handleLanguageChange.bind(this));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('language-changed', this.handleLanguageChange.bind(this));
+    }
+    handleLanguageChange(e) {
+        this.language = e.detail.language;
+    }
     render() {
-        return template.call(this);
+        var _a;
+        return html `
+      ${DialogStyles}
+      <style>
+        etools-icon[name='error-outline'] {
+          color: var(--etools-upload-danger-color, #ea4022);
+        }
+      </style>
+      <etools-dialog
+        id="form-attachments-dialog"
+        size="md"
+        no-padding
+        keep-dialog-open
+        ?opened="${this.dialogOpened}"
+        .okBtnText="${getTranslation(this.language, 'SAVE')}"
+        .cancelBtnText="${getTranslation(this.language, 'CANCEL')}"
+        .hideConfirmBtn="${this.readonly}"
+        dialog-title="${this.popupTitle}"
+        @close="${this.onClose}"
+        @confirm-btn-clicked="${() => this.saveChanges()}"
+      >
+        <!--  Link is used to download attachments  -->
+        <a id="link" target="_blank" hidden></a>
+
+        <div class="popup-container">
+          ${(_a = this.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment, index) => {
+            var _a, _b;
+            return html `
+              <div class="file-selector-container with-type-dropdown">
+                <!--        Type select Dropdown        -->
+                <etools-dropdown
+                  class="type-dropdown file-selector__type-dropdown"
+                  .selected="${attachment.file_type}"
+                  @etools-selected-item-changed="${({ detail }) => { var _a; return this.changeFileType(attachment, (_a = detail.selectedItem) === null || _a === void 0 ? void 0 : _a.value, index); }}"
+                  trigger-value-change-event
+                  label="${getTranslation(this.language, 'DOCUMENT_TYPE')}"
+                  placeholder="${getTranslation(this.language, 'SELECT_DOCUMENT_TYPE')}"
+                  required
+                  ?readonly="${this.readonly}"
+                  hide-search
+                  .options="${(_b = (_a = this.metadata) === null || _a === void 0 ? void 0 : _a.options.target_attachments_file_types) === null || _b === void 0 ? void 0 : _b.values}"
+                  option-label="label"
+                  option-value="value"
+                  ?invalid="${this.checkFileType(index)}"
+                  .errorMessage="${this.retrieveErrorMessage(index)}"
+                  allow-outside-scroll
+                  dynamic-align
+                ></etools-dropdown>
+
+                <!--        File name component          -->
+                <div class="filename-container file-selector__filename">
+                  <etools-icon class="file-icon" name="attachment"></etools-icon>
+                  <span class="filename" title="${attachment.filename}">${attachment.filename}</span>
+                </div>
+
+                <!--         Download Button         -->
+                <etools-button
+                  variant="text"
+                  ?hidden="${!attachment.url}"
+                  class="download-button file-selector__download"
+                  @click="${() => this.downloadFile(attachment)}"
+                >
+                  <etools-icon name="cloud-download" class="dw-icon" slot="prefix"></etools-icon>
+                  ${getTranslation(this.language, 'DOWNLOAD')}
+                </etools-button>
+
+                <!--        Delete Button          -->
+                <etools-button
+                  variant="text"
+                  class="danger delete-button file-selector__delete"
+                  ?hidden="${this.readonly}"
+                  @click="${() => this.deleteAttachment(index)}"
+                >
+                  ${getTranslation(this.language, 'DELETE')}
+                </etools-button>
+              </div>
+            `;
+        })}
+
+          <!--     Upload button     -->
+          <etools-upload-multi
+            class="with-padding"
+            activate-offline
+            ?hidden="${this.readonly}"
+            @upload-finished="${({ detail }) => this.attachmentsUploaded(detail)}"
+            .endpointInfo="${{ endpoint: this.uploadUrl, extraInfo: { composedPath: this.computedPath } }}"
+            .jwtLocalStorageKey="${this.jwtLocalStorageKey}"
+          >
+          </etools-upload-multi>
+        </div>
+      </etools-dialog>
+    `;
     }
     /**
      * on Cancel button click
@@ -73,7 +176,7 @@ let FormAttachmentsPopup = class FormAttachmentsPopup extends LitElement {
         this.attachments.forEach((attachment, index) => {
             if (!attachment.file_type) {
                 fileTypeNotSelected = true;
-                this.errors[index] = { file_type: ['This field is required'] };
+                this.errors[index] = { file_type: [getTranslation(this.language, 'REQUIRED_FIELD')] };
             }
             else {
                 this.errors[index] = [];

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

@@ -30,7 +30,7 @@ export class AbstractFieldBaseClass extends LitElement {
         this.touched = false;
         this._readonly = false;
         if (!this.language) {
-            this.language = window.localStorage.defaultLanguage || 'en';
+            this.language = window.EtoolsLanguage || 'en';
         }
         this.handleLanguageChange = this.handleLanguageChange.bind(this);
     }
@@ -121,37 +121,23 @@ export class AbstractFieldBaseClass extends LitElement {
           border: 1px solid;
         }
 
-        .full-width,
-        paper-input,
-        paper-textarea {
+        .full-width {
           width: 100%;
         }
 
         .question-text {
           font-weight: 500;
-          font-size: 13px;
+          font-size: var(--etools-font-size-13, 13px);
           color: var(--primary-text-color);
         }
 
-        paper-input,
-        paper-textarea {
-          outline: none !important;
-        }
-        paper-input[required],
-        paper-textarea[required] {
-          --paper-input-container-label_-_background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221235%22%20height%3D%221175%22%3E%3Cpath%20fill%3D%22%23de0000%22%20d%3D%22M0%2C449h1235l-999%2C726%20382-1175%20382%2C1175z%22%2F%3E%3C%2Fsvg%3E')
-            no-repeat 98% 14%/7px;
-          --paper-input-container-label_-_max-width: max-content;
-          --paper-input-container-label_-_padding-right: 15px;
-        }
-
-        iron-icon[icon='close'] {
+        etools-icon[name='close'] {
           cursor: pointer;
         }
 
         .error-text {
           color: var(--error-color);
-          font-size: 12px;
+          font-size: var(--etools-font-size-12, 12px);
         }
 
         @media (max-width: 1080px) {
@@ -176,7 +162,7 @@ export class AbstractFieldBaseClass extends LitElement {
             min-height: 150px;
           }
 
-          .question-control .container paper-radio-group {
+          .question-control .container etools-radio-group {
             flex-direction: column;
             opacity: 1 !important;
           }

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

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

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

@@ -8,9 +8,8 @@ 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-button/etools-button';
 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);
@@ -39,26 +38,25 @@ let RepeatableAttachmentField = class RepeatableAttachmentField extends Repeatab
                     </div>
 
                     <!--         Download Button         -->
-                    <sl-button
-                      class="neutral"
+                    <etools-button
+                      class="neutral download-button file-selector__download"
                       variant="text"
                       ?hidden="${!value.url}"
-                      class="download-button file-selector__download"
-                      @click="${this.downloadFile(value)}"
+                      @click="${() => this.downloadFile(value)}"
                     >
                       <etools-icon name="cloud-download" class="dw-icon" slot="prefix"></etools-icon>
                       ${getTranslation(this.language, 'DOWNLOAD')}
-                    </sl-button>
+                    </etools-button>
 
                     <!--        Delete Button          -->
-                    <sl-button
+                    <etools-button
                       variant="danger"
-                      class="delete-button file-selector__delete"
+                      class="file-selector__delete"
                       ?hidden="${this.isReadonly}"
-                      @click="${this.removeControl(index)}"
+                      @click="${() => this.removeControl(index)}"
                     >
                       ${getTranslation(this.language, 'DELETE')}
-                    </sl-button>
+                    </etools-button>
                   </div>
                 `
             : '')}
@@ -109,7 +107,7 @@ let RepeatableAttachmentField = class RepeatableAttachmentField extends Repeatab
         });
         if (error && error.length) {
             console.error(error);
-            fireEvent(this, 'toast', { text: 'Can not upload attachments. Please try again later' });
+            fireEvent(this, 'toast', { text: getTranslation(this.language, 'UPLOAD_ATTACHMENTS_FAILED') });
         }
     }
     downloadFile(attachment) {
@@ -137,7 +135,6 @@ 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.js

@@ -31,9 +31,9 @@ export class RepeatableBaseField extends AbstractFieldBaseClass {
                   @click="${() => this.removeControl(index)}"
                 ></etools-icon-button>
               </div>`)}
-          <sl-button variant="primary" class="add-button" ?hidden="${this.isReadonly}" @click="${this.addNewField}">
+          <etools-button variant="primary" class="add-button" ?hidden="${this.isReadonly}" @click="${this.addNewField}">
             ${getTranslation(this.language, 'ADD')}
-          </sl-button>
+          </etools-button>
         </div>
       </div>
     `;

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

@@ -2,7 +2,6 @@ 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';
 import { getTranslation } from '../../lib/utils/translate';
@@ -13,7 +12,6 @@ let RepeatableNumberField = class RepeatableNumberField extends RepeatableBaseFi
     }
     controlTemplate(value, index) {
         return html `
-      ${InputStyles}
       <etools-input
         class="no-padding-left"
         no-label-float

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

@@ -1,7 +1,7 @@
 import { CSSResultArray, TemplateResult } from 'lit';
-import '@shoelace-style/shoelace/dist/components/radio-group/radio-group.js';
+import '@unicef-polymer/etools-unicef/src/etools-radio/etools-radio-group';
 import '@shoelace-style/shoelace/dist/components/radio/radio.js';
-import '@shoelace-style/shoelace/dist/components/button/button.js';
+import '@unicef-polymer/etools-unicef/src/etools-button/etools-button';
 import { RepeatableBaseField } from './repeatable-base-field';
 import { FieldOption } from '..';
 export declare class RepeatableScaleField extends RepeatableBaseField<string | number | null> {

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

@@ -2,11 +2,9 @@ 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 '@unicef-polymer/etools-unicef/src/etools-radio/etools-radio-group';
 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 '@unicef-polymer/etools-unicef/src/etools-button/etools-button';
 import { RepeatableBaseField } from './repeatable-base-field';
 import { getTranslation } from '../../lib/utils/translate';
 import { AbstractFieldBaseClass } from '../abstract-field-base.class';
@@ -17,9 +15,8 @@ let RepeatableScaleField = class RepeatableScaleField extends RepeatableBaseFiel
     }
     controlTemplate(value, index) {
         return html `
-      ${InputStyles}
       <div class="container">
-        <sl-radio-group
+        <etools-radio-group
           class="radio-group"
           .value="${value}"
           @sl-change="${(e) => this.onSelect(e.target.value, index)}"
@@ -27,16 +24,16 @@ let RepeatableScaleField = class RepeatableScaleField extends RepeatableBaseFiel
           ${repeat(this.options, (option) => html `
               <sl-radio class="radio-button" value="${this.getValue(option)}"> ${this.getLabel(option)} </sl-radio>
             `)}
-        </sl-radio-group>
-        <sl-button
-          variant="primary"
+        </etools-radio-group>
+        <etools-button
+          class="neutral clear-button"
+          variant="text"
           ?hidden="${this.isReadonly}"
           @click="${() => this.valueChanged(null, index)}"
-          class="clear-button"
         >
           <etools-icon name="clear" slot="prefix"></etools-icon>
           ${getTranslation(this.language, 'CLEAR')}
-        </sl-button>
+        </etools-button>
       </div>
     `;
     }
@@ -56,7 +53,6 @@ let RepeatableScaleField = class RepeatableScaleField extends RepeatableBaseFiel
         // language=CSS
         return [
             ...AbstractFieldBaseClass.styles,
-            buttonsStyles,
             css `
         .container {
           position: relative;
@@ -72,7 +68,7 @@ let RepeatableScaleField = class RepeatableScaleField extends RepeatableBaseFiel
           flex-wrap: wrap;
         }
 
-        :host([is-readonly]) paper-radio-group {
+        :host([is-readonly]) etools-radio-group {
           pointer-events: none;
           opacity: 0.55;
         }

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

@@ -2,13 +2,11 @@ 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';
 let RepeatableTextField = class RepeatableTextField extends RepeatableBaseField {
     controlTemplate(value, index) {
         return html `
-      ${InputStyles}
       <etools-textarea
         id="textarea"
         class="no-padding-left"
@@ -31,9 +29,6 @@ let RepeatableTextField = class RepeatableTextField extends RepeatableBaseField
         return [
             ...AbstractFieldBaseClass.styles,
             css `
-        :host(.wide) paper-textarea {
-          padding-left: 0;
-        }
         @media (max-width: 380px) {
           .no-padding-left {
             padding-left: 0;

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

@@ -1,4 +1,4 @@
-import '@unicef-polymer/etools-unicef/scr/etools-upload/etools-upload';
+import '@unicef-polymer/etools-unicef/src/etools-upload/etools-upload';
 import { BaseField } from './base-field';
 import { SingleUploadFinishedDetails, StoredAttachment } from '../../form-attachments-popup';
 import { CSSResultArray, TemplateResult } from 'lit';

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

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import '@unicef-polymer/etools-unicef/scr/etools-upload/etools-upload';
+import '@unicef-polymer/etools-unicef/src/etools-upload/etools-upload';
 import { BaseField } from './base-field';
 import { AttachmentsHelper } from '../../form-attachments-popup';
 import { html } from 'lit';

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

@@ -2,12 +2,10 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { BaseField } from './base-field';
-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}
       <sl-switch
         class="no-padding-left"
         ?checked="${this.value}"
@@ -27,9 +25,6 @@ let BooleanField = class BooleanField extends BaseField {
         return [
             ...BaseField.styles,
             css `
-        :host(.wide) paper-textarea {
-          padding-left: 0;
-        }
         @media (max-width: 380px) {
           .no-padding-left {
             padding-left: 0;

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

@@ -3,7 +3,6 @@ import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { BaseField } from './base-field';
 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 {
     constructor() {
@@ -12,7 +11,6 @@ let NumberField = class NumberField extends BaseField {
     }
     controlTemplate() {
         return html `
-      ${InputStyles}
       <etools-input
         class="no-padding-left"
         no-label-float
@@ -38,7 +36,7 @@ let NumberField = class NumberField extends BaseField {
             return null;
         }
         if (isNaN(value)) {
-            return 'Must be a number';
+            return getTranslation(this.language, 'MUST_BE_NUMBER');
         }
         const integerValidation = !this.isInteger || value - Math.floor(value) === 0;
         return integerValidation ? null : getTranslation(this.language, 'MUST_BE_INTEGER');

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

@@ -1,8 +1,8 @@
 import { CSSResultArray, TemplateResult } from 'lit';
 import { BaseField } from './base-field';
-import '@shoelace-style/shoelace/dist/components/radio-group/radio-group.js';
+import '@unicef-polymer/etools-unicef/src/etools-radio/etools-radio-group';
 import '@shoelace-style/shoelace/dist/components/radio/radio.js';
-import '@shoelace-style/shoelace/dist/components/button/button.js';
+import '@unicef-polymer/etools-unicef/src/etools-button/etools-button';
 export type FieldOption = {
     value: any;
     label: string;

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

@@ -3,11 +3,9 @@ import { css, html } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
 import { BaseField } from './base-field';
 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 '@unicef-polymer/etools-unicef/src/etools-radio/etools-radio-group';
 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 '@unicef-polymer/etools-unicef/src/etools-button/etools-button';
 import { getTranslation } from '../../lib/utils/translate';
 let ScaleField = class ScaleField extends BaseField {
     constructor() {
@@ -16,9 +14,8 @@ let ScaleField = class ScaleField extends BaseField {
     }
     controlTemplate() {
         return html `
-      ${InputStyles}
       <div class="container">
-        <sl-radio-group
+        <etools-radio-group
           class="radio-group"
           .value="${this.value}"
           @sl-change="${(e) => this.onSelect(e.target.value)}"
@@ -26,16 +23,16 @@ let ScaleField = class ScaleField extends BaseField {
           ${repeat(this.options, (option) => html `
               <sl-radio class="radio-button" value="${this.getValue(option)}">${this.getLabel(option)}</sl-radio>
             `)}
-        </sl-radio-group>
-        <sl-button
-          variant="primary"
+        </etools-radio-group>
+        <etools-button
+          class="neutral clear-button"
+          variant="text"
           ?hidden="${this.isReadonly}"
           @click="${() => this.valueChanged(null)}"
-          class="clear-button"
         >
           <etools-icon name="clear" slot="prefix"></etools-icon>
           ${getTranslation(this.language, 'CLEAR')}
-        </sl-button>
+        </etools-button>
       </div>
       <div ?hidden="${!this.errorMessage}" class="error-text">${this.errorMessage}</div>
     `;
@@ -59,7 +56,6 @@ let ScaleField = class ScaleField extends BaseField {
         // language=CSS
         return [
             ...BaseField.styles,
-            buttonsStyles,
             css `
         .container {
           position: relative;
@@ -75,7 +71,7 @@ let ScaleField = class ScaleField extends BaseField {
           flex-wrap: wrap;
         }
 
-        :host([is-readonly]) paper-radio-group {
+        :host([is-readonly]) etools-radio-group {
           pointer-events: none;
           opacity: 0.55;
         }

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

@@ -3,11 +3,9 @@ import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { BaseField } from './base-field';
 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}
       <etools-textarea
         id="otherInfo"
         class="no-padding-left"