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

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

@@ -1,124 +1,121 @@
-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 { AbstractFieldBaseClass } from '../abstract-field-base.class';
-import { fireEvent } from '../../lib/utils/fire-custom-event';
-import { getTranslation } from '../../lib/utils/translate';
-export class RepeatableBaseField extends AbstractFieldBaseClass {
-    constructor() {
-        super(...arguments);
-        this._errorMessage = [];
-        this.editedValues = null;
-    }
-    set errorMessage(messages) {
-        this._errorMessage = messages || [];
-    }
-    get errorMessage() {
-        return this.isReadonly ? [] : this._errorMessage;
-    }
-    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>
-    `;
-    }
-    questionTemplate() {
-        return html `<span class="question-text">${this.questionText}</span>`;
-    }
-    valueChanged(newValue, index) {
-        if (!this.isReadonly) {
-            this.validateField(newValue, index);
-        }
-        else {
-            this._errorMessage = [];
-        }
-        if (this.editedValues && newValue !== this.editedValues[index]) {
-            this.editedValues[index] = newValue;
-            this.setValue(this.editedValues);
-        }
-    }
-    setValue(value) {
-        this.editedValues = value;
-        this.value = value.filter((value) => Boolean(value));
-        fireEvent(this, 'value-changed', { value: this.value });
-    }
-    validateField(value, index) {
-        if (this.isArrayData(value)) {
-            return value.forEach((item, index) => this.validateField(item, index));
-        }
-        let errorMessage;
-        if (this.required && !value && value !== null && typeof value !== 'number') {
-            errorMessage = getTranslation(this.language, 'REQUIRED_FIELD');
-        }
-        else {
-            errorMessage = this.metaValidation(value);
-        }
-        const oldError = (this._errorMessage || [])[index] || null;
-        if (oldError !== errorMessage) {
-            const errors = this.editedValues.map((_, index) => (this._errorMessage && this._errorMessage[index]) || null);
-            errors.splice(index, 1, errorMessage);
-            const newErrors = errors.some((error) => error !== null) ? errors : null;
-            fireEvent(this, 'error-changed', { error: newErrors });
-            this._errorMessage = errors;
-            this.requestUpdate();
-        }
-    }
-    addNewField() {
-        this.editedValues = [...this.editedValues, null];
-    }
-    removeControl(index) {
-        this.editedValues.splice(index, 1);
-        this.value = this.editedValues.filter((value) => Boolean(value));
-        fireEvent(this, 'value-changed', { value: this.value });
-        this.requestUpdate();
-    }
-    getValues() {
-        if (this.isReadonly) {
-            this.editedValues = Array.isArray(this.value) && this.value.length ? this.value : [null];
-        }
-        else if (!this.editedValues) {
-            this.editedValues = Array.isArray(this.value) && this.value.length ? this.value : [null];
-        }
-        return this.editedValues || [null];
-    }
-    isArrayData(value) {
-        return Array.isArray(value);
-    }
-    static get styles() {
-        // language=CSS
-        return [
-            ...AbstractFieldBaseClass.styles,
-            css `
-        :host(:not([is-readonly])) .question-control,
-        :host(:not([is-readonly])) .question {
-          padding-bottom: 10px;
-        }
-      `
-        ];
-    }
-}
-__decorate([
-    property()
-], RepeatableBaseField.prototype, "_errorMessage", void 0);
-__decorate([
-    property()
-], RepeatableBaseField.prototype, "editedValues", void 0);
+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';
+export class RepeatableBaseField extends AbstractFieldBaseClass {
+    constructor() {
+        super(...arguments);
+        this._errorMessage = [];
+        this.editedValues = null;
+    }
+    set errorMessage(messages) {
+        this._errorMessage = messages || [];
+    }
+    get errorMessage() {
+        return this.isReadonly ? [] : this._errorMessage;
+    }
+    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)}
+                <etools-icon-button
+                  name="close"
+                  ?hidden="${this.isReadonly || values.length < 2}"
+                  @click="${() => this.removeControl(index)}"
+                ></etools-icon-button>
+              </div>`)}
+          <sl-button variant="primary" class="add-button" ?hidden="${this.isReadonly}" @click="${this.addNewField}">
+            ${getTranslation(this.language, 'ADD')}
+          </sl-button>
+        </div>
+      </div>
+    `;
+    }
+    questionTemplate() {
+        return html `<span class="question-text">${this.questionText}</span>`;
+    }
+    valueChanged(newValue, index) {
+        if (!this.isReadonly) {
+            this.validateField(newValue, index);
+        }
+        else {
+            this._errorMessage = [];
+        }
+        if (this.editedValues && newValue !== this.editedValues[index]) {
+            this.editedValues[index] = newValue;
+            this.setValue(this.editedValues);
+        }
+    }
+    setValue(value) {
+        this.editedValues = value;
+        this.value = value.filter((value) => Boolean(value));
+        fireEvent(this, 'value-changed', { value: this.value });
+    }
+    validateField(value, index) {
+        if (this.isArrayData(value)) {
+            return value.forEach((item, index) => this.validateField(item, index));
+        }
+        let errorMessage;
+        if (this.required && !value && value !== null && typeof value !== 'number') {
+            errorMessage = getTranslation(this.language, 'REQUIRED_FIELD');
+        }
+        else {
+            errorMessage = this.metaValidation(value);
+        }
+        const oldError = (this._errorMessage || [])[index] || null;
+        if (oldError !== errorMessage) {
+            const errors = this.editedValues.map((_, index) => (this._errorMessage && this._errorMessage[index]) || null);
+            errors.splice(index, 1, errorMessage);
+            const newErrors = errors.some((error) => error !== null) ? errors : null;
+            fireEvent(this, 'error-changed', { error: newErrors });
+            this._errorMessage = errors;
+            this.requestUpdate();
+        }
+    }
+    addNewField() {
+        this.editedValues = [...this.editedValues, null];
+    }
+    removeControl(index) {
+        this.editedValues.splice(index, 1);
+        this.value = this.editedValues.filter((value) => Boolean(value));
+        fireEvent(this, 'value-changed', { value: this.value });
+        this.requestUpdate();
+    }
+    getValues() {
+        if (this.isReadonly) {
+            this.editedValues = Array.isArray(this.value) && this.value.length ? this.value : [null];
+        }
+        else if (!this.editedValues) {
+            this.editedValues = Array.isArray(this.value) && this.value.length ? this.value : [null];
+        }
+        return this.editedValues || [null];
+    }
+    isArrayData(value) {
+        return Array.isArray(value);
+    }
+    static get styles() {
+        // language=CSS
+        return [
+            ...AbstractFieldBaseClass.styles,
+            css `
+        :host(:not([is-readonly])) .question-control,
+        :host(:not([is-readonly])) .question {
+          padding-bottom: 10px;
+        }
+      `
+        ];
+    }
+}
+__decorate([
+    property()
+], RepeatableBaseField.prototype, "_errorMessage", void 0);
+__decorate([
+    property()
+], RepeatableBaseField.prototype, "editedValues", void 0);

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

@@ -1,10 +1,10 @@
-import { CSSResultArray, TemplateResult } from 'lit-element';
-import '@polymer/paper-input/paper-input';
-import { RepeatableBaseField } from './repeatable-base-field';
-export declare class RepeatableNumberField extends RepeatableBaseField<number> {
-    isInteger: boolean;
-    protected controlTemplate(value: number | null, index: number): TemplateResult;
-    protected valueChanged(newValue: number, index: number): void;
-    protected customValidation(value: number): string | null;
-    static get styles(): CSSResultArray;
-}
+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;
+    protected controlTemplate(value: number | null, index: number): TemplateResult;
+    protected valueChanged(newValue: number, index: number): void;
+    protected customValidation(value: number): string | null;
+    static get styles(): CSSResultArray;
+}

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

@@ -1,67 +1,63 @@
-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 { 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';
-let RepeatableNumberField = class RepeatableNumberField extends RepeatableBaseField {
-    constructor() {
-        super(...arguments);
-        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>
-    `;
-    }
-    valueChanged(newValue, index) {
-        const formatted = Number(newValue);
-        const isNumber = !isNaN(formatted) && `${newValue}` !== '' && `${newValue}` !== 'null';
-        super.valueChanged(isNumber ? formatted : newValue, index);
-    }
-    customValidation(value) {
-        if (!value) {
-            return null;
-        }
-        if (isNaN(value)) {
-            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');
-    }
-    static get styles() {
-        // language=CSS
-        return [
-            ...AbstractFieldBaseClass.styles,
-            css `
-        @media (max-width: 380px) {
-          .no-padding-left {
-            padding-left: 0;
-          }
-        }
-      `
-        ];
-    }
-};
-RepeatableNumberField = __decorate([
-    customElement('repeatable-number-field')
-], RepeatableNumberField);
-export { RepeatableNumberField };
+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';
+let RepeatableNumberField = class RepeatableNumberField extends RepeatableBaseField {
+    constructor() {
+        super(...arguments);
+        this.isInteger = false;
+    }
+    controlTemplate(value, index) {
+        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) {
+        const formatted = Number(newValue);
+        const isNumber = !isNaN(formatted) && `${newValue}` !== '' && `${newValue}` !== 'null';
+        super.valueChanged(isNumber ? formatted : newValue, index);
+    }
+    customValidation(value) {
+        if (!value) {
+            return null;
+        }
+        if (isNaN(value)) {
+            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');
+    }
+    static get styles() {
+        // language=CSS
+        return [
+            ...AbstractFieldBaseClass.styles,
+            css `
+        @media (max-width: 380px) {
+          .no-padding-left {
+            padding-left: 0;
+          }
+        }
+      `
+        ];
+    }
+};
+RepeatableNumberField = __decorate([
+    customElement('repeatable-number-field')
+], RepeatableNumberField);
+export { RepeatableNumberField };

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

@@ -1,15 +1,15 @@
-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 { 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 getLabel(option: FieldOption | string | number): unknown;
-    protected getValue(option: FieldOption | string | number): unknown;
-    protected customValidation(): string | null;
-    static get styles(): CSSResultArray;
-}
+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(itemValue: string, index: number): void;
+    protected getLabel(option: FieldOption | string | number): unknown;
+    protected getValue(option: FieldOption | string | number): unknown;
+    protected customValidation(): string | null;
+    static get styles(): CSSResultArray;
+}