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

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 '@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;
     get jwtLocalStorageKey(): string;

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

@@ -1,17 +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 '@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 '@unicef-polymer/etools-unicef/src/etools-button/etools-button';
+import '@unicef-polymer/etools-unicef/src/etools-upload/etools-upload-multi';
 let RepeatableAttachmentField = class RepeatableAttachmentField extends RepeatableBaseField {
     constructor() {
         super(...arguments);
@@ -26,53 +24,55 @@ let RepeatableAttachmentField = class RepeatableAttachmentField extends Repeatab
     render() {
         var _a;
         const values = this.getValues();
-        return html `
-      <div class="finding-container">
-        <div class="question layout start"><slot>${this.questionTemplate()}</slot></div>
-        <div class="question-control layout vertical center-justified start">
+        return html `
+      <div class="finding-container">
+        <div class="question layout start"><slot>${this.questionTemplate()}</slot></div>
+        <div class="question-control layout vertical center-justified start">
           ${values.map((value, index) => value
-            ? html `
-                  <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>
-                      <span class="filename" title="${value.filename}">${value.filename}</span>
-                    </div>
-
-                    <!--         Download Button         -->
-                    <paper-button
-                      ?hidden="${!value.url}"
-                      class="download-button file-selector__download"
-                      @tap="${() => this.downloadFile(value)}"
-                    >
-                      <iron-icon icon="cloud-download" class="dw-icon"></iron-icon>
-                      ${getTranslation(this.language, 'DOWNLOAD')}
-                    </paper-button>
-
-                    <!--        Delete Button          -->
-                    <paper-button
-                      class="delete-button file-selector__delete"
-                      ?hidden="${this.isReadonly}"
-                      @tap="${() => this.removeControl(index)}"
-                    >
-                      ${getTranslation(this.language, 'DELETE')}
-                    </paper-button>
-                  </div>
+            ? html `
+                  <div class="layout horizontal file-container">
+                    <!--        File name component          -->
+                    <div class="filename-container file-selector__filename">
+                      <etools-icon class="file-icon" name="attachment"></etools-icon>
+                      <span class="filename" title="${value.filename}">${value.filename}</span>
+                    </div>
+
+                    <!--         Download Button         -->
+                    <etools-button
+                      class="neutral download-button file-selector__download"
+                      variant="text"
+                      ?hidden="${!value.url}"
+                      @click="${() => this.downloadFile(value)}"
+                    >
+                      <etools-icon name="cloud-download" class="dw-icon" slot="prefix"></etools-icon>
+                      ${getTranslation(this.language, 'DOWNLOAD')}
+                    </etools-button>
+
+                    <!--        Delete Button          -->
+                    <etools-button
+                      variant="danger"
+                      class="file-selector__delete"
+                      ?hidden="${this.isReadonly}"
+                      @click="${() => this.removeControl(index)}"
+                    >
+                      ${getTranslation(this.language, 'DELETE')}
+                    </etools-button>
+                  </div>
                 `
-            : '')}
-          <!--     Upload button     -->
-          <etools-upload-multi
-            class="with-padding"
-            activate-offline
-            ?hidden="${this.isReadonly}"
-            @upload-finished="${({ detail }) => this.attachmentsUploaded(detail)}"
-            .endpointInfo="${{ endpoint: this.uploadUrl, extraInfo: { composedPath: this.computedPath } }}"
-            .jwtLocalStorageKey="${this.jwtLocalStorageKey}"
-          >
-          </etools-upload-multi>
-          <div ?hidden="${!this.isReadonly || ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length)}">—</div>
-        </div>
-      </div>
+            : '')}
+          <!--     Upload button     -->
+          <etools-upload-multi
+            class="with-padding"
+            activate-offline
+            ?hidden="${this.isReadonly}"
+            @upload-finished="${({ detail }) => this.attachmentsUploaded(detail)}"
+            .endpointInfo="${{ endpoint: this.uploadUrl, extraInfo: { composedPath: this.computedPath } }}"
+            .jwtLocalStorageKey="${this.jwtLocalStorageKey}"
+          >
+          </etools-upload-multi>
+          <div ?hidden="${!this.isReadonly || ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length)}">—</div>
+        </div>
+      </div>
     `;
     }
     controlTemplate() {
@@ -135,70 +135,70 @@ let RepeatableAttachmentField = class RepeatableAttachmentField extends Repeatab
             ...RepeatableBaseField.styles,
             SharedStyles,
             AttachmentsStyles,
-            css `
-        .file-selector__type-dropdown {
-          flex-basis: 25%;
-          padding-left: 8px;
-          padding-right: 8px;
-        }
-
-        .file-selector__filename {
-          flex-basis: 35%;
-        }
-
-        .file-selector__download {
-          flex-basis: 10%;
-        }
-
-        .file-selector__delete {
-          flex-basis: 10%;
-        }
-
-        .file-selector-container.with-type-dropdown {
-          flex-wrap: nowrap;
-        }
-
-        .popup-container {
-          padding: 12px 12px 0;
-        }
-
-        .file-container {
-          padding: 8px 0;
-        }
-
-        @media (max-width: 380px) {
-          .file-selector-container.with-type-dropdown {
-            justify-content: center;
-          }
-
-          .file-selector-container.with-type-dropdown etools-dropdown.type-dropdown {
-            flex-basis: 90%;
-          }
-
-          .file-selector__filename {
-            flex-basis: 90%;
-          }
-
-          .file-selector__download {
-            flex-basis: 5%;
-          }
-
-          .file-selector__delete {
-            flex-basis: 5%;
-          }
-        }
-
-        @media (max-width: 600px) {
-          etools-dropdown {
-            padding: 0;
-          }
-
-          .file-selector-container.with-type-dropdown {
-            border-bottom: 1px solid lightgrey;
-            flex-wrap: wrap;
-            padding-bottom: 10px;
-          }
-        }
+            css `
+        .file-selector__type-dropdown {
+          flex-basis: 25%;
+          padding-left: 8px;
+          padding-right: 8px;
+        }
+
+        .file-selector__filename {
+          flex-basis: 35%;
+        }
+
+        .file-selector__download {
+          flex-basis: 10%;
+        }
+
+        .file-selector__delete {
+          flex-basis: 10%;
+        }
+
+        .file-selector-container.with-type-dropdown {
+          flex-wrap: nowrap;
+        }
+
+        .popup-container {
+          padding: 12px 12px 0;
+        }
+
+        .file-container {
+          padding: 8px 0;
+        }
+
+        @media (max-width: 380px) {
+          .file-selector-container.with-type-dropdown {
+            justify-content: center;
+          }
+
+          .file-selector-container.with-type-dropdown etools-dropdown.type-dropdown {
+            flex-basis: 90%;
+          }
+
+          .file-selector__filename {
+            flex-basis: 90%;
+          }
+
+          .file-selector__download {
+            flex-basis: 5%;
+          }
+
+          .file-selector__delete {
+            flex-basis: 5%;
+          }
+        }
+
+        @media (max-width: 600px) {
+          etools-dropdown {
+            padding: 0;
+          }
+
+          .file-selector-container.with-type-dropdown {
+            border-bottom: 1px solid lightgrey;
+            flex-wrap: wrap;
+            padding-bottom: 10px;
+          }
+        }
       `
         ];
     }

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';
@@ -22,23 +19,23 @@ export class RepeatableBaseField extends AbstractFieldBaseClass {
     }
     render() {
         const values = this.getValues();
-        return html `
-      <div class="finding-container">
-        <div class="question layout start"><slot>${this.questionTemplate()}</slot></div>
-        <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"
-                  ?hidden="${this.isReadonly || values.length < 2}"
-                  @click="${() => this.removeControl(index)}"
-                ></iron-icon>
-              </div>`)}
-          <paper-button class="add-button" ?hidden="${this.isReadonly}" @click="${() => this.addNewField()}">
-            ${getTranslation(this.language, 'ADD')}
-          </paper-button>
-        </div>
-      </div>
+        return html `
+      <div class="finding-container">
+        <div class="question layout start"><slot>${this.questionTemplate()}</slot></div>
+        <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)}
+                <etools-icon-button
+                  name="close"
+                  ?hidden="${this.isReadonly || values.length < 2}"
+                  @click="${() => this.removeControl(index)}"
+                ></etools-icon-button>
+              </div>`)}
+          <etools-button variant="primary" class="add-button" ?hidden="${this.isReadonly}" @click="${this.addNewField}">
+            ${getTranslation(this.language, 'ADD')}
+          </etools-button>
+        </div>
+      </div>
     `;
     }
     questionTemplate() {
@@ -107,11 +104,11 @@ export class RepeatableBaseField extends AbstractFieldBaseClass {
         // language=CSS
         return [
             ...AbstractFieldBaseClass.styles,
-            css `
-        :host(:not([is-readonly])) .question-control,
-        :host(:not([is-readonly])) .question {
-          padding-bottom: 10px;
-        }
+            css `
+        :host(:not([is-readonly])) .question-control,
+        :host(:not([is-readonly])) .question {
+          padding-bottom: 10px;
+        }
       `
         ];
     }

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';
@@ -16,20 +12,20 @@ let RepeatableNumberField = class RepeatableNumberField extends RepeatableBaseFi
         this.isInteger = false;
     }
     controlTemplate(value, index) {
-        return html `
-      ${InputStyles}
-      <paper-input
-        class="no-padding-left"
-        no-label-float
-        placeholder="${this.isReadonly ? '—' : this.placeholder}"
-        .value="${value}"
-        @value-changed="${({ detail }) => this.valueChanged(detail.value, index)}"
-        placeholder="&#8212;"
-        ?invalid="${this.errorMessage[index]}"
-        error-message="${this.errorMessage[index]}"
-        ?readonly="${this.isReadonly}"
-      >
-      </paper-input>
+        return html `
+      ${InputStyles}
+      <etools-input
+        class="no-padding-left"
+        no-label-float
+        placeholder="${this.isReadonly ? '—' : this.placeholder}"
+        .value="${value}"
+        @value-changed="${({ detail }) => this.valueChanged(detail.value, index)}"
+        placeholder="&#8212;"
+        ?invalid="${this.errorMessage[index]}"
+        error-message="${this.errorMessage[index]}"
+        ?readonly="${this.isReadonly}"
+      >
+      </etools-input>
     `;
     }
     valueChanged(newValue, index) {
@@ -51,12 +47,12 @@ let RepeatableNumberField = class RepeatableNumberField extends RepeatableBaseFi
         // language=CSS
         return [
             ...AbstractFieldBaseClass.styles,
-            css `
-        @media (max-width: 380px) {
-          .no-padding-left {
-            padding-left: 0;
-          }
-        }
+            css `
+        @media (max-width: 380px) {
+          .no-padding-left {
+            padding-left: 0;
+          }
+        }
       `
         ];
     }

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 '@unicef-polymer/etools-unicef/src/etools-radio/etools-radio-group';
+import '@shoelace-style/shoelace/dist/components/radio/radio.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> {
     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,13 @@
-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 '@unicef-polymer/etools-unicef/src/etools-radio/etools-radio-group';
+import '@shoelace-style/shoelace/dist/components/radio/radio.js';
+import '@unicef-polymer/etools-unicef/src/etools-button/etools-button';
 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() {
@@ -17,34 +15,32 @@ let RepeatableScaleField = class RepeatableScaleField extends RepeatableBaseFiel
         this.options = [];
     }
     controlTemplate(value, index) {
-        return html `
-      ${InputStyles}
-      <div class="container">
-        <paper-radio-group
-          class="radio-group"
-          selected="${value}"
-          @iron-select="${({ detail }) => this.onSelect(detail.item, index)}"
-        >
-          ${repeat(this.options, (option) => html `
-              <paper-radio-button class="radio-button" name="${this.getValue(option)}">
-                ${this.getLabel(option)}
-              </paper-radio-button>
-            `)}
-        </paper-radio-group>
-
-        <paper-button
-          ?hidden="${this.isReadonly}"
-          @click="${() => this.valueChanged(null, index)}"
-          class="clear-button"
-        >
-          <iron-icon icon="clear"></iron-icon>Clear
-        </paper-button>
-      </div>
+        return html `
+      ${InputStyles}
+      <div class="container">
+        <etools-radio-group
+          class="radio-group"
+          .value="${value}"
+          @sl-change="${(e) => this.onSelect(e.target.value, index)}"
+        >
+          ${repeat(this.options, (option) => html `
+              <sl-radio class="radio-button" value="${this.getValue(option)}"> ${this.getLabel(option)} </sl-radio>
+            `)}
+        </etools-radio-group>
+        <etools-button
+          class="neutral clear-button"
+          variant="text"
+          ?hidden="${this.isReadonly}"
+          @click="${() => this.valueChanged(null, index)}"
+        >
+          <etools-icon name="clear" slot="prefix"></etools-icon>
+          ${getTranslation(this.language, 'CLEAR')}
+        </etools-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,42 +55,42 @@ let RepeatableScaleField = class RepeatableScaleField extends RepeatableBaseFiel
         // language=CSS
         return [
             ...AbstractFieldBaseClass.styles,
-            css `
-        .container {
-          position: relative;
-          min-height: 48px;
-          display: flex;
-          align-items: center;
-          flex-direction: row;
-        }
-
-        .radio-group {
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-        }
-
-        :host([is-readonly]) paper-radio-group {
-          pointer-events: none;
-          opacity: 0.55;
-        }
-
-        @media (max-width: 1080px) {
-          .container {
-            flex-direction: column;
-            align-items: flex-start;
-          }
-          .radio-group {
-            flex-direction: column;
-          }
-          .radio-button {
-            padding-left: 3px;
-          }
-          .clear-button {
-            margin: 0;
-            padding-left: 0;
-          }
-        }
+            css `
+        .container {
+          position: relative;
+          min-height: 48px;
+          display: flex;
+          align-items: center;
+          flex-direction: row;
+        }
+
+        .radio-group {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+        }
+
+        :host([is-readonly]) etools-radio-group {
+          pointer-events: none;
+          opacity: 0.55;
+        }
+
+        @media (max-width: 1080px) {
+          .container {
+            flex-direction: column;
+            align-items: flex-start;
+          }
+          .radio-group {
+            flex-direction: column;
+          }
+          .radio-button {
+            padding-left: 3px;
+          }
+          .clear-button {
+            margin: 0;
+            padding-left: 0;
+          }
+        }
       `
         ];
     }

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;