@formio/js 5.0.0-dev.5708.6c19568 → 5.0.0-dev.5711.e2e3657

package/lib/cjs/CDN.d.ts

@@ -13,6 +13,7 @@ declare class CDN {
         bootswatch: string;
         'bootstrap-icons': string;
         ckeditor: string;
+        dragula: string;
         flatpickr: string;
         'flatpickr-formio': string;
         'font-awesome': string;

package/lib/cjs/CDN.js

@@ -17,6 +17,7 @@ class CDN {
             'bootswatch': '5.3.3',
             'bootstrap-icons': '1.11.1',
             'ckeditor': '19.0.0',
+            'dragula': '3.7.3',
             'flatpickr': '4.6.8',
             'flatpickr-formio': '4.6.13-formio.3',
             'font-awesome': '4.7.0',

package/lib/cjs/Webform.js

@@ -17,7 +17,6 @@ const formUtils_1 = require("./utils/formUtils");
 if (typeof window !== 'undefined' && typeof window.global === 'undefined') {
     window.global = window;
 }
-const dragula_1 = __importDefault(require("dragula"));
 // Initialize the available forms.
 Formio_1.Formio.forms = {};
 // Allow people to register components.
@@ -314,7 +313,6 @@ class Webform extends NestedDataComponent_1.default {
         // Ensure the root is set to this component.
         this.root = this;
         this.localRoot = this;
-        this.root.dragulaLib = dragula_1.default;
     }
     /* eslint-enable max-statements */
     get language() {
@@ -1132,7 +1130,7 @@ class Webform extends NestedDataComponent_1.default {
         });
         const displayedErrors = [];
         if (errors.length) {
-            errors = lodash_1.default.uniqBy(errors, (error) => error.message);
+            errors = lodash_1.default.uniqBy(errors, (error) => { var _a, _b; return [error.message, (_a = error.component) === null || _a === void 0 ? void 0 : _a.id, (_b = error.context) === null || _b === void 0 ? void 0 : _b.path].join(); });
             const createListItem = (message, index) => {
                 var _a, _b, _c;
                 const err = errors[index];

package/lib/cjs/components/_classes/component/Component.d.ts

@@ -830,6 +830,7 @@ declare class Component extends Element {
     quill: any;
     get shouldSanitizeValue(): boolean;
     addAce(element: any, settings: any, onChange: any): any;
+    getDragula(): Promise<any>;
     get tree(): any;
     /**
      * The empty value for this component.

package/lib/cjs/components/_classes/component/Component.js

@@ -22,6 +22,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -2374,6 +2383,15 @@ class Component extends Element_1.default {
             return editor;
         });
     }
+    getDragula() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve) => {
+                return Formio_1.Formio.requireLibrary('dragula', 'dragula', `${Formio_1.Formio.cdn.dragula}/dragula.js`, true, (ready) => {
+                    return ready.then(resolve);
+                });
+            });
+        });
+    }
     get tree() {
         return this.component.tree || false;
     }

package/lib/cjs/components/currency/Currency.d.ts

@@ -2,6 +2,7 @@ export default class CurrencyComponent extends NumberComponent {
     constructor(component: any, options: any, data: any);
     currencyPrefix: any;
     currencySuffix: any;
+    parseValue(value: any): string | null;
     addZerosAndFormatValue(value: any): any;
     stripPrefixSuffix(value: any): any;
 }

package/lib/cjs/components/datagrid/DataGrid.d.ts

@@ -12,6 +12,7 @@ export default class DataGridComponent extends NestedArrayComponent {
     tabIndex: number;
     rows: any[] | undefined;
     columns: any[] | undefined;
+    dragulaReady: Promise<any> | undefined;
     visibleColumns: {} | undefined;
     set dataValue(value: any[]);
     get dataValue(): any[];
@@ -71,6 +72,7 @@ export default class DataGridComponent extends NestedArrayComponent {
      */
     reorderValues(valuesArr: any, oldPosition: number, newPosition: number, movedBelow: boolean | any): void;
     onReorder(element: any, _target: any, _source: any, sibling: any): void;
+    onCloned(el: any, original: any): void;
     focusOnNewRowElement(row: any): void;
     addRow(): void;
     updateComponentsRowIndex(components: any, rowIndex: any): void;

package/lib/cjs/components/datagrid/DataGrid.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const NestedArrayComponent_1 = __importDefault(require("../_classes/nestedarray/NestedArrayComponent"));
 const utils_1 = require("../../utils/utils");
-const Components_1 = require("../Components");
-const dragula_1 = __importDefault(require("dragula"));
+const Components_1 = __importDefault(require("../Components"));
 class DataGridComponent extends NestedArrayComponent_1.default {
     static schema(...extend) {
         return NestedArrayComponent_1.default.schema({
@@ -44,6 +43,9 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         if (this.initRows || !lodash_1.default.isEqual(this.dataValue, this.emptyValue)) {
             this.createRows(true);
         }
+        if (this.allowReorder) {
+            this.dragulaReady = this.getDragula();
+        }
         this.visibleColumns = {};
         this.prevHasAddButton = this.hasAddButton();
         this.checkColumns();
@@ -282,31 +284,25 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             this.refs[`${this.datagridKey}-row`].forEach((row, index) => {
                 row.dragInfo = { index };
             });
-            this.dragula = (0, dragula_1.default)([this.refs[`${this.datagridKey}-tbody`]], {
-                moves: (_draggedElement, _oldParent, clickedElement) => {
-                    const clickedElementKey = clickedElement.getAttribute('data-key');
-                    const oldParentKey = _oldParent.getAttribute('data-key');
-                    //Check if the clicked button belongs to that container, if false, it belongs to the nested container
-                    if (oldParentKey === clickedElementKey) {
-                        return clickedElement.classList.contains('formio-drag-button');
-                    }
+            this.dragulaReady.then((dragula) => {
+                // The drop event may call redraw twice which calls attach twice and because this block of code is asynchronous
+                // BOTH redraws may be called before this block of code runs (which causes this block of code to run twice sequentially).
+                // This causes two dragula() calls on the same container which breaks dragula. To fix this the return value must
+                // be saved in this.dragula and have its container contents reset if it exists
+                if (this.dragula && this.dragula.containers) {
+                    this.dragula.containers = [];
                 }
-            }).on('drop', this.onReorder.bind(this));
-            this.dragula.on('cloned', (el, original) => {
-                if (el && el.children && original && original.children) {
-                    lodash_1.default.each(original.children, (child, index) => {
-                        const styles = getComputedStyle(child, null);
-                        if (styles.cssText !== '') {
-                            el.children[index].style.cssText = styles.cssText;
+                this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {
+                    moves: (_draggedElement, _oldParent, clickedElement) => {
+                        const clickedElementKey = clickedElement.getAttribute('data-key');
+                        const oldParentKey = _oldParent.getAttribute('data-key');
+                        //Check if the clicked button belongs to that container, if false, it belongs to the nested container
+                        if (oldParentKey === clickedElementKey) {
+                            return clickedElement.classList.contains('formio-drag-button');
                         }
-                        else {
-                            const cssText = Object.values(styles).reduce((css, propertyName) => {
-                                return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;
-                            }, '');
-                            el.children[index].style.cssText = cssText;
-                        }
-                    });
-                }
+                    }
+                }).on('drop', this.onReorder.bind(this))
+                    .on('cloned', this.onCloned.bind(this));
             });
         }
         this.refs[`${this.datagridKey}-addRow`].forEach((addButton) => {
@@ -373,6 +369,22 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         this.setValue(dataValue, { isReordered: true });
         this.rebuild();
     }
+    onCloned(el, original) {
+        if (el && el.children && original && original.children) {
+            lodash_1.default.each(original.children, (child, index) => {
+                const styles = getComputedStyle(child, null);
+                if (styles.cssText !== '') {
+                    el.children[index].style.cssText = styles.cssText;
+                }
+                else {
+                    const cssText = Object.values(styles).reduce((css, propertyName) => {
+                        return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;
+                    }, '');
+                    el.children[index].style.cssText = cssText;
+                }
+            });
+        }
+    }
     focusOnNewRowElement(row) {
         Object.keys(row).find((key) => {
             const element = row[key].element;
@@ -422,7 +434,7 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             }
             component.rowIndex = rowIndex;
             component.row = `${rowIndex}-${colIndex}`;
-            component.path = Components_1.Components.getComponentPath(component);
+            component.path = Components_1.default.getComponentPath(component);
         });
     }
     updateRowsComponents(rowIndex) {

package/lib/cjs/components/datamap/DataMap.js

@@ -8,7 +8,7 @@ const DataGrid_1 = __importDefault(require("../datagrid/DataGrid"));
 const lodash_1 = __importDefault(require("lodash"));
 const eventemitter3_1 = __importDefault(require("eventemitter3"));
 const utils_1 = require("../../utils/utils");
-const Components_1 = require("../Components");
+const Components_1 = __importDefault(require("../Components"));
 class DataMapComponent extends DataGrid_1.default {
     static schema(...extend) {
         return Component_1.default.schema({
@@ -241,7 +241,7 @@ class DataMapComponent extends DataGrid_1.default {
             delete dataValue[key];
             const comp = components[this.valueKey];
             comp.component.key = newKey;
-            comp.path = Components_1.Components.calculateComponentPath(comp);
+            comp.path = Components_1.default.calculateComponentPath(comp);
             key = newKey;
         });
         const valueComponent = lodash_1.default.clone(this.component.valueComponent);

package/lib/cjs/components/number/Number.d.ts

@@ -31,7 +31,16 @@ export default class NumberComponent extends Input {
     setInputMask(input: any): void;
     getValueAt(index: any): number | null;
     setValueAt(index: any, value: any, flags?: {}): void;
-    parseValue(input: any): number;
+    /**
+     * Converts a string to a floating point number, formats the number based on the parsed float function
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) and then returns the
+     * formatted number back as a string
+     * Example Input: "123.456,22"
+     * Example Output: "123456,22"
+     * @param {string | number} input the numeric string to parse
+     * @returns {string | null} a parsed string
+     */
+    parseValue(input: string | number): string | null;
     focus(): void;
     getMaskedValue(value: any): any;
     getValueAsString(value: any, options: any): any;

package/lib/cjs/components/number/Number.js

@@ -45,19 +45,19 @@ class NumberComponent extends Input_1.default {
         return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.number];
     }
     constructor(...args) {
-        var _a, _b;
+        var _a, _b, _c;
         super(...args);
         const separators = (0, utils_1.getNumberSeparators)(this.options.language || navigator.language);
         this.decimalSeparator = this.options.decimalSeparator = this.component.decimalSymbol || this.options.decimalSeparator
             || ((_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.decimalSeparator)
             || separators.decimalSeparator;
         if (this.component.delimiter) {
-            if (this.options.hasOwnProperty('thousandsSeparator')) {
-                console.warn("Property 'thousandsSeparator' is deprecated. Please use i18n to specify delimiter.");
-            }
-            this.delimiter = ((_b = this.options.properties) === null || _b === void 0 ? void 0 : _b.thousandsSeparator) || this.options.thousandsSeparator || separators.delimiter;
+            this.delimiter = this.component.thousandsSeparator || ((_b = this.options.properties) === null || _b === void 0 ? void 0 : _b.thousandsSeparator) || this.options.thousandsSeparator || separators.delimiter;
         }
         else {
+            if (this.component.thousandsSeparator || ((_c = this.options.properties) === null || _c === void 0 ? void 0 : _c.thousandsSeparator) || this.options.thousandsSeparator) {
+                console.warn('In order for thousands separator to work properly, you must set the delimiter to true in the component json');
+            }
             this.delimiter = '';
         }
         const requireDecimal = lodash_1.default.get(this.component, 'requireDecimal', false);
@@ -79,7 +79,7 @@ class NumberComponent extends Input_1.default {
             prefix: '',
             suffix: '',
             requireDecimal: lodash_1.default.get(this.component, 'requireDecimal', false),
-            thousandsSeparatorSymbol: lodash_1.default.get(this.component, 'thousandsSeparator', this.delimiter),
+            thousandsSeparatorSymbol: this.delimiter || '',
             decimalSymbol: lodash_1.default.get(this.component, 'decimalSymbol', this.decimalSeparator),
             decimalLimit: lodash_1.default.get(this.component, 'decimalLimit', this.decimalLimit),
             allowNegative: lodash_1.default.get(this.component, 'allowNegative', true),
@@ -146,6 +146,15 @@ class NumberComponent extends Input_1.default {
     setValueAt(index, value, flags = {}) {
         return super.setValueAt(index, this.formatValue(this.parseValue(value)), flags);
     }
+    /**
+     * Converts a string to a floating point number, formats the number based on the parsed float function
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) and then returns the
+     * formatted number back as a string
+     * Example Input: "123.456,22"
+     * Example Output: "123456,22"
+     * @param {string | number} input the numeric string to parse
+     * @returns {string | null} a parsed string
+     */
     parseValue(input) {
         if (typeof input === 'string') {
             input = input.split(this.delimiter).join('').replace(this.decimalSeparator, '.');

package/lib/cjs/components/number/fixtures/comp9.d.ts

@@ -0,0 +1,18 @@
+declare namespace _default {
+    let components: {
+        label: string;
+        applyMaskOn: string;
+        mask: boolean;
+        tableView: boolean;
+        delimiter: boolean;
+        requireDecimal: boolean;
+        inputFormat: string;
+        truncateMultipleSpaces: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        decimalSymbol: string;
+        thousandsSeparator: string;
+    }[];
+}
+export default _default;

package/lib/cjs/components/number/fixtures/comp9.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    components: [
+        {
+            "label": "Number",
+            "applyMaskOn": "change",
+            "mask": false,
+            "tableView": false,
+            "delimiter": true,
+            "requireDecimal": false,
+            "inputFormat": "plain",
+            "truncateMultipleSpaces": false,
+            "key": "number",
+            "type": "number",
+            "input": true,
+            "decimalSymbol": ",",
+            "thousandsSeparator": "."
+        }
+    ]
+};

package/lib/cjs/components/number/fixtures/index.d.ts

@@ -6,4 +6,5 @@ import comp5 from './comp5';
 import comp6 from './comp6';
 import comp7 from './comp7';
 import comp8 from './comp8';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8 };
+import comp9 from './comp9';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9 };

package/lib/cjs/components/number/fixtures/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const comp2_1 = __importDefault(require("./comp2"));
@@ -20,3 +20,5 @@ const comp7_1 = __importDefault(require("./comp7"));
 exports.comp7 = comp7_1.default;
 const comp8_1 = __importDefault(require("./comp8"));
 exports.comp8 = comp8_1.default;
+const comp9_1 = __importDefault(require("./comp9"));
+exports.comp9 = comp9_1.default;

package/lib/mjs/CDN.d.ts

@@ -13,6 +13,7 @@ declare class CDN {
         bootswatch: string;
         'bootstrap-icons': string;
         ckeditor: string;
+        dragula: string;
         flatpickr: string;
         'flatpickr-formio': string;
         'font-awesome': string;

package/lib/mjs/CDN.js

@@ -16,6 +16,7 @@ class CDN {
             'bootswatch': '5.3.3',
             'bootstrap-icons': '1.11.1',
             'ckeditor': '19.0.0',
+            'dragula': '3.7.3',
             'flatpickr': '4.6.8',
             'flatpickr-formio': '4.6.13-formio.3',
             'font-awesome': '4.7.0',

package/lib/mjs/Webform.js

@@ -12,7 +12,6 @@ import { eachComponent } from "./utils/formUtils";
 if (typeof window !== 'undefined' && typeof window.global === 'undefined') {
     window.global = window;
 }
-import dragula from "dragula";
 // Initialize the available forms.
 Formio.forms = {};
 // Allow people to register components.
@@ -286,7 +285,6 @@ export default class Webform extends NestedDataComponent {
         // Ensure the root is set to this component.
         this.root = this;
         this.localRoot = this;
-        this.root.dragulaLib = dragula;
     }
     /* eslint-enable max-statements */
     get language() {
@@ -1136,7 +1134,7 @@ export default class Webform extends NestedDataComponent {
         });
         const displayedErrors = [];
         if (errors.length) {
-            errors = _.uniqBy(errors, (error) => error.message);
+            errors = _.uniqBy(errors, (error) => [error.message, error.component?.id, error.context?.path].join());
             const createListItem = (message, index) => {
                 const err = errors[index];
                 const messageFromIndex = !_.isUndefined(index) && errors && errors[index];

package/lib/mjs/components/_classes/component/Component.d.ts

@@ -830,6 +830,7 @@ declare class Component extends Element {
     quill: any;
     get shouldSanitizeValue(): boolean;
     addAce(element: any, settings: any, onChange: any): any;
+    getDragula(): Promise<any>;
     get tree(): any;
     /**
      * The empty value for this component.

package/lib/mjs/components/_classes/component/Component.js

@@ -2351,6 +2351,13 @@ export default class Component extends Element {
             return editor;
         });
     }
+    async getDragula() {
+        return new Promise((resolve) => {
+            return Formio.requireLibrary('dragula', 'dragula', `${Formio.cdn.dragula}/dragula.js`, true, (ready) => {
+                return ready.then(resolve);
+            });
+        });
+    }
     get tree() {
         return this.component.tree || false;
     }

package/lib/mjs/components/currency/Currency.d.ts

@@ -2,6 +2,7 @@ export default class CurrencyComponent extends NumberComponent {
     constructor(component: any, options: any, data: any);
     currencyPrefix: any;
     currencySuffix: any;
+    parseValue(value: any): string | null;
     addZerosAndFormatValue(value: any): any;
     stripPrefixSuffix(value: any): any;
 }

package/lib/mjs/components/datagrid/DataGrid.d.ts

@@ -12,6 +12,7 @@ export default class DataGridComponent extends NestedArrayComponent {
     tabIndex: number;
     rows: any[] | undefined;
     columns: any[] | undefined;
+    dragulaReady: Promise<any> | undefined;
     visibleColumns: {} | undefined;
     set dataValue(value: any[]);
     get dataValue(): any[];
@@ -71,6 +72,7 @@ export default class DataGridComponent extends NestedArrayComponent {
      */
     reorderValues(valuesArr: any, oldPosition: number, newPosition: number, movedBelow: boolean | any): void;
     onReorder(element: any, _target: any, _source: any, sibling: any): void;
+    onCloned(el: any, original: any): void;
     focusOnNewRowElement(row: any): void;
     addRow(): void;
     updateComponentsRowIndex(components: any, rowIndex: any): void;

package/lib/mjs/components/datagrid/DataGrid.js

@@ -1,8 +1,7 @@
 import _ from 'lodash';
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
 import { fastCloneDeep, getFocusableElements } from '../../utils/utils';
-import { Components } from '../Components';
-import dragula from 'dragula';
+import Components from '../Components';
 export default class DataGridComponent extends NestedArrayComponent {
     static schema(...extend) {
         return NestedArrayComponent.schema({
@@ -39,6 +38,9 @@ export default class DataGridComponent extends NestedArrayComponent {
         if (this.initRows || !_.isEqual(this.dataValue, this.emptyValue)) {
             this.createRows(true);
         }
+        if (this.allowReorder) {
+            this.dragulaReady = this.getDragula();
+        }
         this.visibleColumns = {};
         this.prevHasAddButton = this.hasAddButton();
         this.checkColumns();
@@ -279,31 +281,25 @@ export default class DataGridComponent extends NestedArrayComponent {
             this.refs[`${this.datagridKey}-row`].forEach((row, index) => {
                 row.dragInfo = { index };
             });
-            this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {
-                moves: (_draggedElement, _oldParent, clickedElement) => {
-                    const clickedElementKey = clickedElement.getAttribute('data-key');
-                    const oldParentKey = _oldParent.getAttribute('data-key');
-                    //Check if the clicked button belongs to that container, if false, it belongs to the nested container
-                    if (oldParentKey === clickedElementKey) {
-                        return clickedElement.classList.contains('formio-drag-button');
-                    }
+            this.dragulaReady.then((dragula) => {
+                // The drop event may call redraw twice which calls attach twice and because this block of code is asynchronous
+                // BOTH redraws may be called before this block of code runs (which causes this block of code to run twice sequentially).
+                // This causes two dragula() calls on the same container which breaks dragula. To fix this the return value must
+                // be saved in this.dragula and have its container contents reset if it exists
+                if (this.dragula && this.dragula.containers) {
+                    this.dragula.containers = [];
                 }
-            }).on('drop', this.onReorder.bind(this));
-            this.dragula.on('cloned', (el, original) => {
-                if (el && el.children && original && original.children) {
-                    _.each(original.children, (child, index) => {
-                        const styles = getComputedStyle(child, null);
-                        if (styles.cssText !== '') {
-                            el.children[index].style.cssText = styles.cssText;
+                this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {
+                    moves: (_draggedElement, _oldParent, clickedElement) => {
+                        const clickedElementKey = clickedElement.getAttribute('data-key');
+                        const oldParentKey = _oldParent.getAttribute('data-key');
+                        //Check if the clicked button belongs to that container, if false, it belongs to the nested container
+                        if (oldParentKey === clickedElementKey) {
+                            return clickedElement.classList.contains('formio-drag-button');
                         }
-                        else {
-                            const cssText = Object.values(styles).reduce((css, propertyName) => {
-                                return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;
-                            }, '');
-                            el.children[index].style.cssText = cssText;
-                        }
-                    });
-                }
+                    }
+                }).on('drop', this.onReorder.bind(this))
+                    .on('cloned', this.onCloned.bind(this));
             });
         }
         this.refs[`${this.datagridKey}-addRow`].forEach((addButton) => {
@@ -370,6 +366,22 @@ export default class DataGridComponent extends NestedArrayComponent {
         this.setValue(dataValue, { isReordered: true });
         this.rebuild();
     }
+    onCloned(el, original) {
+        if (el && el.children && original && original.children) {
+            _.each(original.children, (child, index) => {
+                const styles = getComputedStyle(child, null);
+                if (styles.cssText !== '') {
+                    el.children[index].style.cssText = styles.cssText;
+                }
+                else {
+                    const cssText = Object.values(styles).reduce((css, propertyName) => {
+                        return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;
+                    }, '');
+                    el.children[index].style.cssText = cssText;
+                }
+            });
+        }
+    }
     focusOnNewRowElement(row) {
         Object.keys(row).find((key) => {
             const element = row[key].element;

package/lib/mjs/components/datamap/DataMap.js

@@ -3,7 +3,7 @@ import DataGridComponent from '../datagrid/DataGrid';
 import _ from 'lodash';
 import EventEmitter from 'eventemitter3';
 import { componentValueTypes, getComponentSavedTypes, uniqueKey } from '../../utils/utils';
-import { Components } from '../Components';
+import Components from '../Components';
 export default class DataMapComponent extends DataGridComponent {
     static schema(...extend) {
         return Component.schema({

package/lib/mjs/components/number/Number.d.ts

@@ -31,7 +31,16 @@ export default class NumberComponent extends Input {
     setInputMask(input: any): void;
     getValueAt(index: any): number | null;
     setValueAt(index: any, value: any, flags?: {}): void;
-    parseValue(input: any): number;
+    /**
+     * Converts a string to a floating point number, formats the number based on the parsed float function
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) and then returns the
+     * formatted number back as a string
+     * Example Input: "123.456,22"
+     * Example Output: "123456,22"
+     * @param {string | number} input the numeric string to parse
+     * @returns {string | null} a parsed string
+     */
+    parseValue(input: string | number): string | null;
     focus(): void;
     getMaskedValue(value: any): any;
     getValueAsString(value: any, options: any): any;

package/lib/mjs/components/number/Number.js

@@ -50,12 +50,12 @@ export default class NumberComponent extends Input {
             || this.options.properties?.decimalSeparator
             || separators.decimalSeparator;
         if (this.component.delimiter) {
-            if (this.options.hasOwnProperty('thousandsSeparator')) {
-                console.warn("Property 'thousandsSeparator' is deprecated. Please use i18n to specify delimiter.");
-            }
-            this.delimiter = this.options.properties?.thousandsSeparator || this.options.thousandsSeparator || separators.delimiter;
+            this.delimiter = this.component.thousandsSeparator || this.options.properties?.thousandsSeparator || this.options.thousandsSeparator || separators.delimiter;
         }
         else {
+            if (this.component.thousandsSeparator || this.options.properties?.thousandsSeparator || this.options.thousandsSeparator) {
+                console.warn('In order for thousands separator to work properly, you must set the delimiter to true in the component json');
+            }
             this.delimiter = '';
         }
         const requireDecimal = _.get(this.component, 'requireDecimal', false);
@@ -77,7 +77,7 @@ export default class NumberComponent extends Input {
             prefix: '',
             suffix: '',
             requireDecimal: _.get(this.component, 'requireDecimal', false),
-            thousandsSeparatorSymbol: _.get(this.component, 'thousandsSeparator', this.delimiter),
+            thousandsSeparatorSymbol: this.delimiter || '',
             decimalSymbol: _.get(this.component, 'decimalSymbol', this.decimalSeparator),
             decimalLimit: _.get(this.component, 'decimalLimit', this.decimalLimit),
             allowNegative: _.get(this.component, 'allowNegative', true),
@@ -144,6 +144,15 @@ export default class NumberComponent extends Input {
     setValueAt(index, value, flags = {}) {
         return super.setValueAt(index, this.formatValue(this.parseValue(value)), flags);
     }
+    /**
+     * Converts a string to a floating point number, formats the number based on the parsed float function
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) and then returns the
+     * formatted number back as a string
+     * Example Input: "123.456,22"
+     * Example Output: "123456,22"
+     * @param {string | number} input the numeric string to parse
+     * @returns {string | null} a parsed string
+     */
     parseValue(input) {
         if (typeof input === 'string') {
             input = input.split(this.delimiter).join('').replace(this.decimalSeparator, '.');