@unicef-polymer/etools-form-builder 2.1.0 → 2.1.2

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

@@ -1,57 +1,58 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { property } from 'lit-element';
-import { fireEvent } from '../../lib/utils/fire-custom-event';
-import { AbstractFieldBaseClass } from '../abstract-field-base.class';
-export class BaseField extends AbstractFieldBaseClass {
-    constructor() {
-        super(...arguments);
-        this._errorMessage = null;
-    }
-    set errorMessage(message) {
-        this._errorMessage = message;
-    }
-    get errorMessage() {
-        return this.isReadonly ? null : this._errorMessage;
-    }
-    valueChanged(newValue) {
-        if (!newValue && this.value === undefined) {
-            return;
-        }
-        if (!this.isReadonly && newValue !== this.value && this.touched) {
-            this.validateField(newValue);
-        }
-        else if (this.isReadonly || !this.touched) {
-            this._errorMessage = null;
-        }
-        if (newValue !== this.value) {
-            this.value = newValue;
-            fireEvent(this, 'value-changed', { value: newValue });
-        }
-    }
-    setValue(newValue) {
-        this.value = newValue;
-        fireEvent(this, 'value-changed', { value: newValue });
-    }
-    validateField(value) {
-        let errorMessage;
-        if (this.required && !value && typeof value !== 'number') {
-            errorMessage = 'This field is required!';
-        }
-        else {
-            errorMessage = this.metaValidation(value);
-        }
-        if (this._errorMessage !== errorMessage) {
-            fireEvent(this, 'error-changed', { error: errorMessage });
-            this._errorMessage = errorMessage;
-            this.requestUpdate();
-        }
-    }
-}
-__decorate([
-    property()
-], BaseField.prototype, "_errorMessage", void 0);
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { property } from 'lit-element';
+import { fireEvent } from '../../lib/utils/fire-custom-event';
+import { AbstractFieldBaseClass } from '../abstract-field-base.class';
+import { getTranslation } from '../../lib/utils/translate';
+export class BaseField extends AbstractFieldBaseClass {
+    constructor() {
+        super(...arguments);
+        this._errorMessage = null;
+    }
+    set errorMessage(message) {
+        this._errorMessage = message;
+    }
+    get errorMessage() {
+        return this.isReadonly ? null : this._errorMessage;
+    }
+    valueChanged(newValue) {
+        if (!newValue && this.value === undefined) {
+            return;
+        }
+        if (!this.isReadonly && newValue !== this.value && this.touched) {
+            this.validateField(newValue);
+        }
+        else if (this.isReadonly || !this.touched) {
+            this._errorMessage = null;
+        }
+        if (newValue !== this.value) {
+            this.value = newValue;
+            fireEvent(this, 'value-changed', { value: newValue });
+        }
+    }
+    setValue(newValue) {
+        this.value = newValue;
+        fireEvent(this, 'value-changed', { value: newValue });
+    }
+    validateField(value) {
+        let errorMessage;
+        if (this.required && !value && typeof value !== 'number') {
+            errorMessage = getTranslation(this.language, 'REQUIRED_FIELD');
+        }
+        else {
+            errorMessage = this.metaValidation(value);
+        }
+        if (this._errorMessage !== errorMessage) {
+            fireEvent(this, 'error-changed', { error: errorMessage });
+            this._errorMessage = errorMessage;
+            this.requestUpdate();
+        }
+    }
+}
+__decorate([
+    property()
+], BaseField.prototype, "_errorMessage", void 0);

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

@@ -1,8 +1,8 @@
-import { CSSResultArray, TemplateResult } from 'lit-element';
-import { BaseField } from './base-field';
-import '@polymer/paper-toggle-button';
-export declare class BooleanField extends BaseField<boolean> {
-    protected controlTemplate(): TemplateResult;
-    protected customValidation(): string | null;
-    static get styles(): CSSResultArray;
-}
+import { CSSResultArray, TemplateResult } from 'lit-element';
+import { BaseField } from './base-field';
+import '@polymer/paper-toggle-button';
+export declare class BooleanField extends BaseField<boolean> {
+    protected controlTemplate(): TemplateResult;
+    protected customValidation(): string | null;
+    static get styles(): CSSResultArray;
+}

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

@@ -1,49 +1,49 @@
-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 { BaseField } from './base-field';
-import '@polymer/paper-toggle-button';
-import { InputStyles } from '../../lib/styles/input-styles';
-let BooleanField = class BooleanField extends BaseField {
-    controlTemplate() {
-        return html `
-      ${InputStyles}
-      <paper-toggle-button
-        class="no-padding-left"
-        ?checked="${this.value}"
-        @iron-change="${(event) => this.valueChanged(event.currentTarget.checked)}"
-        ?readonly="${this.isReadonly}"
-      >
-      </paper-toggle-button>
-
-      <div ?hidden="${!this.errorMessage}" class="error-text">${this.errorMessage}</div>
-    `;
-    }
-    customValidation() {
-        return null;
-    }
-    static get styles() {
-        // language=CSS
-        return [
-            ...BaseField.styles,
-            css `
-        :host(.wide) paper-textarea {
-          padding-left: 0;
-        }
-        @media (max-width: 380px) {
-          .no-padding-left {
-            padding-left: 0;
-          }
-        }
-      `
-        ];
-    }
-};
-BooleanField = __decorate([
-    customElement('boolean-field')
-], BooleanField);
-export { BooleanField };
+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 { BaseField } from './base-field';
+import '@polymer/paper-toggle-button';
+import { InputStyles } from '../../lib/styles/input-styles';
+let BooleanField = class BooleanField extends BaseField {
+    controlTemplate() {
+        return html `
+      ${InputStyles}
+      <paper-toggle-button
+        class="no-padding-left"
+        ?checked="${this.value}"
+        @iron-change="${(event) => this.valueChanged(event.currentTarget.checked)}"
+        ?readonly="${this.isReadonly}"
+      >
+      </paper-toggle-button>
+
+      <div ?hidden="${!this.errorMessage}" class="error-text">${this.errorMessage}</div>
+    `;
+    }
+    customValidation() {
+        return null;
+    }
+    static get styles() {
+        // language=CSS
+        return [
+            ...BaseField.styles,
+            css `
+        :host(.wide) paper-textarea {
+          padding-left: 0;
+        }
+        @media (max-width: 380px) {
+          .no-padding-left {
+            padding-left: 0;
+          }
+        }
+      `
+        ];
+    }
+};
+BooleanField = __decorate([
+    customElement('boolean-field')
+], BooleanField);
+export { BooleanField };

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

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

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

@@ -1,66 +1,67 @@
-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 { BaseField } from './base-field';
-import '@polymer/paper-input/paper-input';
-import { InputStyles } from '../../lib/styles/input-styles';
-let NumberField = class NumberField extends BaseField {
-    constructor() {
-        super(...arguments);
-        this.isInteger = false;
-    }
-    controlTemplate() {
-        return html `
-      ${InputStyles}
-      <paper-input
-        class="no-padding-left"
-        no-label-float
-        placeholder="${this.isReadonly ? '—' : this.placeholder}"
-        .value="${this.value}"
-        @value-changed="${({ detail }) => this.valueChanged(detail.value)}"
-        @focus="${() => (this.touched = true)}"
-        placeholder="&#8212;"
-        ?invalid="${this.errorMessage}"
-        error-message="${this.errorMessage}"
-        ?readonly="${this.isReadonly}"
-      >
-      </paper-input>
-    `;
-    }
-    valueChanged(newValue) {
-        const formatted = Number(newValue);
-        const isNumber = !isNaN(formatted) && `${newValue}` !== '' && `${newValue}` !== 'null';
-        super.valueChanged(isNumber ? formatted : newValue);
-    }
-    customValidation(value) {
-        if (!value) {
-            return null;
-        }
-        if (isNaN(value)) {
-            return 'Must be a number';
-        }
-        const integerValidation = !this.isInteger || value - Math.floor(value) === 0;
-        return integerValidation ? null : 'Must be an integer';
-    }
-    static get styles() {
-        // language=CSS
-        return [
-            ...BaseField.styles,
-            css `
-        @media (max-width: 380px) {
-          .no-padding-left {
-            padding-left: 0;
-          }
-        }
-      `
-        ];
-    }
-};
-NumberField = __decorate([
-    customElement('number-field')
-], NumberField);
-export { NumberField };
+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 { BaseField } from './base-field';
+import '@polymer/paper-input/paper-input';
+import { InputStyles } from '../../lib/styles/input-styles';
+import { getTranslation } from '../../lib/utils/translate';
+let NumberField = class NumberField extends BaseField {
+    constructor() {
+        super(...arguments);
+        this.isInteger = false;
+    }
+    controlTemplate() {
+        return html `
+      ${InputStyles}
+      <paper-input
+        class="no-padding-left"
+        no-label-float
+        placeholder="${this.isReadonly ? '—' : this.placeholder}"
+        .value="${this.value}"
+        @value-changed="${({ detail }) => this.valueChanged(detail.value)}"
+        @focus="${() => (this.touched = true)}"
+        placeholder="&#8212;"
+        ?invalid="${this.errorMessage}"
+        error-message="${this.errorMessage}"
+        ?readonly="${this.isReadonly}"
+      >
+      </paper-input>
+    `;
+    }
+    valueChanged(newValue) {
+        const formatted = Number(newValue);
+        const isNumber = !isNaN(formatted) && `${newValue}` !== '' && `${newValue}` !== 'null';
+        super.valueChanged(isNumber ? formatted : newValue);
+    }
+    customValidation(value) {
+        if (!value) {
+            return null;
+        }
+        if (isNaN(value)) {
+            return 'Must be a 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 [
+            ...BaseField.styles,
+            css `
+        @media (max-width: 380px) {
+          .no-padding-left {
+            padding-left: 0;
+          }
+        }
+      `
+        ];
+    }
+};
+NumberField = __decorate([
+    customElement('number-field')
+], NumberField);
+export { NumberField };

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

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