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

package/dist/lib/types/form-builder.interfaces.d.ts

@@ -1,83 +1,83 @@
-import { TemplateResult } from 'lit-element';
-import { BlueprintField, BlueprintGroup, BlueprintMetadata } from './form-builder.types';
-import { GenericObject } from './global.types';
-/** Component for rendering BlueprintGroup with group.extra.type.includes('abstract') or group.name === 'root' */
-export interface IFormBuilderAbstractGroup {
-    groupStructure: BlueprintGroup;
-    metadata: BlueprintMetadata;
-    parentGroupName: string;
-    readonly: boolean;
-    value: GenericObject;
-    /**
-     * Updates groupValue object by this.value[fieldName] = event.details.value
-     * @param event - comes from event emitted by rendered BlueprintField or BlueprintGroup child of current Group
-     * @param fieldName - name field of BlueprintField or BlueprintGroup child of current Group
-     *
-     * stopsPropagation of current value-changed event it will be replaced with new event
-     * Emits value-changed event with updated groupValue
-     */
-    valueChanged(event: CustomEvent, fieldName: string): void;
-    /**
-     * Returns template for BlueprintField structure depending on their styling
-     *
-     * without styling (empty array) - standard appearance (label and helper text in left column field element in right)
-     * styling.includes('wide') - field takes all parent width
-     * styling.includes('additional') - gray background
-     *
-     * Pass value to field as this.value[BlueprintField.name]
-     * Rendered field must emit value-changed event
-     * Use it to update current group value:
-     * @value-changed="${(event) => this.valueChanged(event, BlueprintField.name)}"
-     */
-    renderField(fieldStructure: BlueprintField): TemplateResult;
-    /**
-     * Returns template for BlueprintGroup structure depending on their styling
-     *
-     * styling.includes('card') && styling.includes('collapse') - render as IFormBuilderCollapsedCard
-     * styling.includes('card') - render as IFormBuilderCard
-     * styling.includes('abstract')  - render as IFormBuilderAbstractGroup recursively
-     *
-     * Pass groupValue to group as this.value[BlueprintGroup.name]
-     * Rendered group must emit value-changed event
-     * Use it to update current group value:
-     * @value-changed="${(event) => this.valueChanged(event, BlueprintGroup.name)}"
-     */
-    renderGroup(groupStructure: BlueprintGroup, groupValue?: GenericObject): TemplateResult | TemplateResult[];
-}
-export interface IFormBuilderCard extends IFormBuilderAbstractGroup {
-    /**
-     * Overrides parent method.
-     * It must doing the same but not sending new event, only stop current.
-     * value-changed will be send latter
-     */
-    valueChanged(event: CustomEvent, fieldName: string): void;
-    /**
-     * Show toastr if card has errors, returns;
-     * Emits value-changed event for updating changed value
-     */
-    saveChanges(): void;
-}
-/**
- *  Component for rendering BlueprintGroup as DataCollectionCard.
- *  Computes Card title using parentGroupName mapping + currentGroup.name
- *  Allows to render attachment group and handles their logic
- */
-export interface IFormBuilderCollapsedCard extends IFormBuilderAbstractGroup, IFormBuilderCard {
-    /**
-     * Extend renderGroup() method. It must handle additional type:
-     *
-     * styling.includes('floating_attachments') - render group as attachment button
-     *
-     * ---
-     * if (styling.includes('floating_attachments')) { ...render attachment button... }
-     * else { super.renderGroup(groupStructure); }
-     *
-     */
-    renderGroup(groupStructure: BlueprintGroup, groupValue?: GenericObject): TemplateResult | TemplateResult[];
-    /**
-     * Use openDialog method. Call valueChanged() on popup resolve with confirmed === true
-     */
-    openAttachmentsPopup(): void;
-    cancelEdit(): void;
-    startEdit(): void;
-}
+import { TemplateResult } from 'lit-element';
+import { BlueprintField, BlueprintGroup, BlueprintMetadata } from './form-builder.types';
+import { GenericObject } from './global.types';
+/** Component for rendering BlueprintGroup with group.extra.type.includes('abstract') or group.name === 'root' */
+export interface IFormBuilderAbstractGroup {
+    groupStructure: BlueprintGroup;
+    metadata: BlueprintMetadata;
+    parentGroupName: string;
+    readonly: boolean;
+    value: GenericObject;
+    /**
+     * Updates groupValue object by this.value[fieldName] = event.details.value
+     * @param event - comes from event emitted by rendered BlueprintField or BlueprintGroup child of current Group
+     * @param fieldName - name field of BlueprintField or BlueprintGroup child of current Group
+     *
+     * stopsPropagation of current value-changed event it will be replaced with new event
+     * Emits value-changed event with updated groupValue
+     */
+    valueChanged(event: CustomEvent, fieldName: string): void;
+    /**
+     * Returns template for BlueprintField structure depending on their styling
+     *
+     * without styling (empty array) - standard appearance (label and helper text in left column field element in right)
+     * styling.includes('wide') - field takes all parent width
+     * styling.includes('additional') - gray background
+     *
+     * Pass value to field as this.value[BlueprintField.name]
+     * Rendered field must emit value-changed event
+     * Use it to update current group value:
+     * @value-changed="${(event) => this.valueChanged(event, BlueprintField.name)}"
+     */
+    renderField(fieldStructure: BlueprintField): TemplateResult;
+    /**
+     * Returns template for BlueprintGroup structure depending on their styling
+     *
+     * styling.includes('card') && styling.includes('collapse') - render as IFormBuilderCollapsedCard
+     * styling.includes('card') - render as IFormBuilderCard
+     * styling.includes('abstract')  - render as IFormBuilderAbstractGroup recursively
+     *
+     * Pass groupValue to group as this.value[BlueprintGroup.name]
+     * Rendered group must emit value-changed event
+     * Use it to update current group value:
+     * @value-changed="${(event) => this.valueChanged(event, BlueprintGroup.name)}"
+     */
+    renderGroup(groupStructure: BlueprintGroup, groupValue?: GenericObject): TemplateResult | TemplateResult[];
+}
+export interface IFormBuilderCard extends IFormBuilderAbstractGroup {
+    /**
+     * Overrides parent method.
+     * It must doing the same but not sending new event, only stop current.
+     * value-changed will be send latter
+     */
+    valueChanged(event: CustomEvent, fieldName: string): void;
+    /**
+     * Show toastr if card has errors, returns;
+     * Emits value-changed event for updating changed value
+     */
+    saveChanges(): void;
+}
+/**
+ *  Component for rendering BlueprintGroup as DataCollectionCard.
+ *  Computes Card title using parentGroupName mapping + currentGroup.name
+ *  Allows to render attachment group and handles their logic
+ */
+export interface IFormBuilderCollapsedCard extends IFormBuilderAbstractGroup, IFormBuilderCard {
+    /**
+     * Extend renderGroup() method. It must handle additional type:
+     *
+     * styling.includes('floating_attachments') - render group as attachment button
+     *
+     * ---
+     * if (styling.includes('floating_attachments')) { ...render attachment button... }
+     * else { super.renderGroup(groupStructure); }
+     *
+     */
+    renderGroup(groupStructure: BlueprintGroup, groupValue?: GenericObject): TemplateResult | TemplateResult[];
+    /**
+     * Use openDialog method. Call valueChanged() on popup resolve with confirmed === true
+     */
+    openAttachmentsPopup(): void;
+    cancelEdit(): void;
+    startEdit(): void;
+}

package/dist/lib/types/form-builder.types.d.ts

@@ -1,59 +1,59 @@
-import { FieldValidator } from '../utils/validations.helper';
-import { GenericObject } from './global.types';
-/** JSON file from backend */
-export declare type ChecklistFormJson = {
-    blueprint: {
-        code: string;
-        metadata: BlueprintMetadata;
-        structure: BlueprintGroup;
-        title: string;
-    };
-    value: GenericObject;
-};
-/** --------- */
-export declare type BlueprintGroup = {
-    type: 'group';
-    extra: GenericObject;
-    styling: string[];
-    name: string;
-    repeatable: boolean;
-    required: boolean;
-    title: string | null;
-    children: (BlueprintGroup | BlueprintField | Information)[];
-};
-export declare type BlueprintField = {
-    type: 'field';
-    extra: GenericObject;
-    styling: string[];
-    name: string;
-    repeatable: boolean;
-    required: boolean;
-    input_type: 'text' | 'likert_scale' | 'bool' | 'number' | 'number-integer' | 'number-float' | 'file';
-    label: string;
-    validations: string[];
-    help_text: string;
-    placeholder: string;
-    default_value: null;
-    options_key: null;
-};
-export declare type Information = {
-    type: 'information';
-    extra: GenericObject;
-    styling: string[];
-    text: string;
-};
-/** Metadata for blueprint structure */
-export declare type BlueprintMetadata = {
-    options: GenericObject<BlueprintMetadataOptions>;
-    validations: GenericObject<FieldValidator>;
-    offline_enabled: boolean;
-    allow_multiple_responses: boolean;
-};
-export declare type BlueprintMetadataOptions = {
-    option_type: string;
-    values: BlueprintMetadataOption[];
-};
-export declare type BlueprintMetadataOption = {
-    value: string;
-    label: string;
-};
+import { FieldValidator } from '../utils/validations.helper';
+import { GenericObject } from './global.types';
+/** JSON file from backend */
+export declare type ChecklistFormJson = {
+    blueprint: {
+        code: string;
+        metadata: BlueprintMetadata;
+        structure: BlueprintGroup;
+        title: string;
+    };
+    value: GenericObject;
+};
+/** --------- */
+export declare type BlueprintGroup = {
+    type: 'group';
+    extra: GenericObject;
+    styling: string[];
+    name: string;
+    repeatable: boolean;
+    required: boolean;
+    title: string | null;
+    children: (BlueprintGroup | BlueprintField | Information)[];
+};
+export declare type BlueprintField = {
+    type: 'field';
+    extra: GenericObject;
+    styling: string[];
+    name: string;
+    repeatable: boolean;
+    required: boolean;
+    input_type: 'text' | 'likert_scale' | 'bool' | 'number' | 'number-integer' | 'number-float' | 'file';
+    label: string;
+    validations: string[];
+    help_text: string;
+    placeholder: string;
+    default_value: null;
+    options_key: null;
+};
+export declare type Information = {
+    type: 'information';
+    extra: GenericObject;
+    styling: string[];
+    text: string;
+};
+/** Metadata for blueprint structure */
+export declare type BlueprintMetadata = {
+    options: GenericObject<BlueprintMetadataOptions>;
+    validations: GenericObject<FieldValidator>;
+    offline_enabled: boolean;
+    allow_multiple_responses: boolean;
+};
+export declare type BlueprintMetadataOptions = {
+    option_type: string;
+    values: BlueprintMetadataOption[];
+};
+export declare type BlueprintMetadataOption = {
+    value: string;
+    label: string;
+};

package/dist/lib/types/global.types.d.ts

@@ -1,4 +1,4 @@
-export declare type GenericObject<T = any> = {
-    [key: string]: T;
-};
-export declare type Callback = (...args: any) => void;
+export declare type GenericObject<T = any> = {
+    [key: string]: T;
+};
+export declare type Callback = (...args: any) => void;

package/dist/lib/utils/dialog.d.ts

@@ -1,10 +1,10 @@
-export interface IDialog<D> {
-    dialog: string;
-    dialogData?: D;
-    readonly?: boolean;
-}
-export interface IDialogResponse<R> {
-    response?: R;
-    confirmed: boolean;
-}
-export declare function openDialog<D, R = any>({ dialog, dialogData, readonly }: IDialog<D>): Promise<IDialogResponse<R>>;
+export interface IDialog<D> {
+    dialog: string;
+    dialogData?: D;
+    readonly?: boolean;
+}
+export interface IDialogResponse<R> {
+    response?: R;
+    confirmed: boolean;
+}
+export declare function openDialog<D, R = any>({ dialog, dialogData, readonly }: IDialog<D>): Promise<IDialogResponse<R>>;

package/dist/lib/utils/dialog.js

@@ -1,21 +1,21 @@
-export function openDialog({ dialog, dialogData, readonly }) {
-    return new Promise((resolve, reject) => {
-        const dialogElement = document.createElement(dialog);
-        const body = document.querySelector('body');
-        if (body) {
-            body.appendChild(dialogElement);
-        }
-        else {
-            reject(new Error('Body not exist'));
-        }
-        dialogElement.dialogData = dialogData;
-        if (readonly) {
-            dialogElement.readonly = readonly;
-        }
-        dialogElement.addEventListener('response', (e) => {
-            const event = e;
-            resolve(event.detail);
-            dialogElement.remove();
-        });
-    });
-}
+export function openDialog({ dialog, dialogData, readonly }) {
+    return new Promise((resolve, reject) => {
+        const dialogElement = document.createElement(dialog);
+        const body = document.querySelector('body');
+        if (body) {
+            body.appendChild(dialogElement);
+        }
+        else {
+            reject(new Error('Body not exist'));
+        }
+        dialogElement.dialogData = dialogData;
+        if (readonly) {
+            dialogElement.readonly = readonly;
+        }
+        dialogElement.addEventListener('response', (e) => {
+            const event = e;
+            resolve(event.detail);
+            dialogElement.remove();
+        });
+    });
+}

package/dist/lib/utils/fire-custom-event.d.ts

@@ -1 +1 @@
-export declare function fireEvent(el: HTMLElement, eventName: string, detail?: any): void;
+export declare function fireEvent(el: HTMLElement, eventName: string, detail?: any): void;

package/dist/lib/utils/fire-custom-event.js

@@ -1,7 +1,7 @@
-export function fireEvent(el, eventName, detail) {
-    el.dispatchEvent(new CustomEvent(eventName, {
-        detail,
-        bubbles: true,
-        composed: true
-    }));
-}
+export function fireEvent(el, eventName, detail) {
+    el.dispatchEvent(new CustomEvent(eventName, {
+        detail,
+        bubbles: true,
+        composed: true
+    }));
+}

package/dist/lib/utils/translate.d.ts

@@ -0,0 +1 @@
+export declare function getTranslation(lang: string, key: string): string;

package/dist/lib/utils/translate.js

@@ -0,0 +1,9 @@
+import translations from '../../assets/translations';
+export function getTranslation(lang, key) {
+    try {
+        return translations[lang][key];
+    }
+    catch (error) {
+        return translations.en[key];
+    }
+}

package/dist/lib/utils/validations.helper.d.ts

@@ -1,26 +1,26 @@
-export declare enum Validations {
-    MAX_LENGTH = "max_length",
-    REGEX = "regex",
-    LOWER_THAN = "lt",
-    GREATER_THAN = "gt"
-}
-export declare type MaxLengthValidation = {
-    name: Validations.MAX_LENGTH;
-    [Validations.MAX_LENGTH]: number;
-};
-export declare type RegexValidation = {
-    name: Validations.REGEX;
-    [Validations.REGEX]: string;
-};
-export declare type GreaterValidation = {
-    name: Validations.GREATER_THAN;
-    threshold: number;
-    allow_equality: boolean;
-};
-export declare type LowerValidation = {
-    name: Validations.LOWER_THAN;
-    threshold: number;
-    allow_equality: boolean;
-};
-export declare type FieldValidator = MaxLengthValidation | RegexValidation | GreaterValidation | LowerValidation;
-export declare function validate(validators: FieldValidator[], value: any): string | null;
+export declare enum Validations {
+    MAX_LENGTH = "max_length",
+    REGEX = "regex",
+    LOWER_THAN = "lt",
+    GREATER_THAN = "gt"
+}
+export declare type MaxLengthValidation = {
+    name: Validations.MAX_LENGTH;
+    [Validations.MAX_LENGTH]: number;
+};
+export declare type RegexValidation = {
+    name: Validations.REGEX;
+    [Validations.REGEX]: string;
+};
+export declare type GreaterValidation = {
+    name: Validations.GREATER_THAN;
+    threshold: number;
+    allow_equality: boolean;
+};
+export declare type LowerValidation = {
+    name: Validations.LOWER_THAN;
+    threshold: number;
+    allow_equality: boolean;
+};
+export declare type FieldValidator = MaxLengthValidation | RegexValidation | GreaterValidation | LowerValidation;
+export declare function validate(validators: FieldValidator[], value: any, language: string): string | null;

package/dist/lib/utils/validations.helper.js

@@ -1,35 +1,42 @@
-export var Validations;
-(function (Validations) {
-    Validations["MAX_LENGTH"] = "max_length";
-    Validations["REGEX"] = "regex";
-    Validations["LOWER_THAN"] = "lt";
-    Validations["GREATER_THAN"] = "gt";
-})(Validations || (Validations = {}));
-export function validate(validators, value) {
-    let message = null;
-    for (const validator of validators) {
-        message = checkValidation(validator, value);
-        if (message) {
-            break;
-        }
-    }
-    return message;
-}
-function checkValidation(validation, value) {
-    switch (validation.name) {
-        case Validations.MAX_LENGTH:
-            const maxLength = Number(validation[Validations.MAX_LENGTH]) + 1;
-            return String(value).length < maxLength ? null : `Text must be less than ${maxLength} character`;
-        case Validations.REGEX:
-            const regex = new RegExp(`^${validation[Validations.REGEX]}$`);
-            return regex.test(String(value)) ? null : `Doesn't match allowed pattern`;
-        case Validations.GREATER_THAN:
-            const greaterThan = Number(validation.threshold) - Number(validation.allow_equality);
-            return Number(value) > greaterThan ? null : `Number must be greater than ${greaterThan}`;
-        case Validations.LOWER_THAN:
-            const lowerThan = Number(validation.threshold) + Number(validation.allow_equality);
-            return Number(value) < lowerThan ? null : `Number must be lower than ${lowerThan}`;
-        default:
-            return null;
-    }
-}
+import { getTranslation } from './translate';
+export var Validations;
+(function (Validations) {
+    Validations["MAX_LENGTH"] = "max_length";
+    Validations["REGEX"] = "regex";
+    Validations["LOWER_THAN"] = "lt";
+    Validations["GREATER_THAN"] = "gt";
+})(Validations || (Validations = {}));
+export function validate(validators, value, language) {
+    let message = null;
+    for (const validator of validators) {
+        message = checkValidation(validator, value, language);
+        if (message) {
+            break;
+        }
+    }
+    return message;
+}
+function checkValidation(validation, value, language) {
+    switch (validation.name) {
+        case Validations.MAX_LENGTH:
+            const maxLength = Number(validation[Validations.MAX_LENGTH]) + 1;
+            return String(value).length < maxLength
+                ? null
+                : getTranslation(language, 'TEXT_MUST_BE_LESS_CHARS').replace('{0}', String(maxLength));
+        case Validations.REGEX:
+            const regex = new RegExp(`^${validation[Validations.REGEX]}$`);
+            return regex.test(String(value)) ? null : getTranslation(language, 'DOES_NOT_MATCH_PATTERN');
+        case Validations.GREATER_THAN:
+            const greaterThan = Number(validation.threshold) - Number(validation.allow_equality);
+            return Number(value) > greaterThan
+                ? null
+                : getTranslation(language, 'NUMBER_MUST_BE_GREATER_THAN').replace('{0}', String(greaterThan));
+        case Validations.LOWER_THAN:
+            const lowerThan = Number(validation.threshold) + Number(validation.allow_equality);
+            return Number(value) < lowerThan
+                ? null
+                : getTranslation(language, 'NUMBER_MUST_BE_LOWER_THAN').replace('{0}', String(lowerThan));
+        default:
+            return null;
+    }
+}

package/package.json

@@ -1,56 +1,56 @@
-{
-  "name": "@unicef-polymer/etools-form-builder",
-  "description": "Etools FM Form Builder components",
-  "version": "2.1.0",
-  "contributors": [
-    "eTools Team"
-  ],
-  "license": "BSD-3-Clause",
-  "repository": "https://github.com/unicef-polymer/fm-form-builder",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsc --skipLibCheck",
-    "lint": "eslint src/",
-    "prepare": "rm -rf ./dist && npm run build",
-    "prepublishOnly": "npm run lint"
-  },
-  "dependencies": {
-    "@polymer/iron-collapse": "^3.0.1",
-    "@polymer/iron-icons": "^3.0.1",
-    "@polymer/paper-button": "^3.0.1",
-    "@polymer/paper-input": "^3.2.1",
-    "@polymer/paper-radio-button": "^3.0.1",
-    "@polymer/paper-radio-group": "^3.0.1",
-    "@polymer/paper-toast": "^3.0.1",
-    "@polymer/paper-toggle-button": "^3.0.1",
-    "@types/ramda": "^0.26.43",
-    "@unicef-polymer/etools-dialog": "^6.0.3",
-    "@unicef-polymer/etools-dropdown": "^3.9.2",
-    "@unicef-polymer/etools-upload": "^4.3.0",
-    "@webcomponents/webcomponentsjs": "^2.6.0",
-    "lit-element": "^2.5.1",
-    "lit-translate": "^1.2.1",
-    "ramda": "^0.27.1",
-    "web-animations-js": "^2.3.2"
-  },
-  "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^3.10.1",
-    "@typescript-eslint/parser": "^3.10.1",
-    "acorn": "^8.0.4",
-    "eslint": "^7.14.0",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-html": "^6.1.1",
-    "eslint-plugin-lit": "^1.2.4",
-    "eslint-plugin-prettier": "^3.1.3",
-    "minimist": ">=0.2.1",
-    "prettier": "~2.2.0",
-    "typescript": "^3.9.7",
-    "lodash": ">=4.17.21",
-    "ansi-regex": ">=5.0.1",
-    "glob-parent": ">=5.1.2"
-  }
-}
+{
+  "name": "@unicef-polymer/etools-form-builder",
+  "description": "Etools FM Form Builder components",
+  "version": "2.1.2",
+  "contributors": [
+    "eTools Team"
+  ],
+  "license": "BSD-3-Clause",
+  "repository": "https://github.com/unicef-polymer/fm-form-builder",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc --skipLibCheck",
+    "lint": "eslint src/",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm run lint"
+  },
+  "dependencies": {
+    "@polymer/iron-collapse": "^3.0.1",
+    "@polymer/iron-icons": "^3.0.1",
+    "@polymer/paper-button": "^3.0.1",
+    "@polymer/paper-input": "^3.2.1",
+    "@polymer/paper-radio-button": "^3.0.1",
+    "@polymer/paper-radio-group": "^3.0.1",
+    "@polymer/paper-toast": "^3.0.1",
+    "@polymer/paper-toggle-button": "^3.0.1",
+    "@types/ramda": "^0.26.43",
+    "@unicef-polymer/etools-dialog": "^6.0.4",
+    "@unicef-polymer/etools-dropdown": "^3.9.7",
+    "@unicef-polymer/etools-upload": "^4.4.1",
+    "@webcomponents/webcomponentsjs": "^2.6.0",
+    "lit-element": "^2.5.1",
+    "lit-translate": "^1.2.1",
+    "ramda": "^0.27.1",
+    "web-animations-js": "^2.3.2"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^3.10.1",
+    "@typescript-eslint/parser": "^3.10.1",
+    "acorn": "^8.0.4",
+    "eslint": "^7.14.0",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-html": "^6.1.1",
+    "eslint-plugin-lit": "^1.2.4",
+    "eslint-plugin-prettier": "^3.1.3",
+    "minimist": ">=0.2.1",
+    "prettier": "~2.2.0",
+    "typescript": "^3.9.7",
+    "lodash": ">=4.17.21",
+    "ansi-regex": ">=5.0.1",
+    "glob-parent": ">=5.1.2"
+  }
+}