@formio/js 5.0.0-dev.5673.3d062b9 → 5.0.0-dev.5673.ae99c16

package/lib/cjs/components/_classes/multivalue/Multivalue.d.ts

@@ -1,6 +1,13 @@
 export default class Multivalue extends Field {
+    /**
+     * Normalize values coming into updateValue.
+     * @param {*} value - The value to normalize before setting.
+     * @param {Object} flags - Flags to use when normalizing the value.
+     * @param {*} emptyValue - The empty value for the field.
+     * @returns {*} - The normalized value.
+     */
+    normalizeValue(value: any, flags?: Object, emptyValue?: any): any;
     get addAnother(): string;
-    useWrapper(): any;
     /**
      * @returns {Field} - The created field.
      */
@@ -44,7 +51,7 @@ export default class Multivalue extends Field {
     attachMultiMask(index: number): boolean;
     /**
      * @param {any} input - The input element on which the mask is to be applied.
-     * @param {string} mask - The mask pattern to apply to the input element. Exit early if no mask.
+     * @param {string} mask - The mask pattern to apply to the input element. Exit early and remove previous mask if no mask.
      */
     updateMask(input: any, mask: string): void;
     /**

package/lib/cjs/components/_classes/multivalue/Multivalue.js

@@ -6,12 +6,42 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Field_1 = __importDefault(require("../field/Field"));
 const lodash_1 = __importDefault(require("lodash"));
 class Multivalue extends Field_1.default {
-    get dataValue() {
-        const parent = super.dataValue;
-        if (!parent && this.component.multiple) {
-            return [];
+    /**
+     * Normalize values coming into updateValue.
+     * @param {*} value - The value to normalize before setting.
+     * @param {Object} flags - Flags to use when normalizing the value.
+     * @param {*} emptyValue - The empty value for the field.
+     * @returns {*} - The normalized value.
+     */
+    normalizeValue(value, flags = {}, emptyValue = this.emptyValue) {
+        if (this.component.multiple) {
+            if (Array.isArray(value)) {
+                if (value.length === 0) {
+                    return [emptyValue];
+                }
+                if (this.component.storeas === 'array') {
+                    return super.normalizeValue([value], flags);
+                }
+                return super.normalizeValue(value, flags);
+            }
+            else {
+                return super.normalizeValue(value == null ? [emptyValue] : [value], flags);
+            }
         }
-        return parent;
+        else {
+            if (Array.isArray(value) && !Array.isArray(emptyValue)) {
+                if (this.component.storeas === 'string') {
+                    return super.normalizeValue(value.join(this.delimiter || ''), flags);
+                }
+                return super.normalizeValue(value[0] || emptyValue, flags);
+            }
+            else {
+                return super.normalizeValue(value, flags);
+            }
+        }
+    }
+    get dataValue() {
+        return this.normalizeValue(super.dataValue);
     }
     set dataValue(value) {
         super.dataValue = value;
@@ -31,30 +61,20 @@ class Multivalue extends Field_1.default {
     get addAnother() {
         return this.t(this.component.addAnother || 'Add Another');
     }
-    useWrapper() {
-        return this.component.hasOwnProperty('multiple') && this.component.multiple;
-    }
     /**
      * @returns {Field} - The created field.
      */
     render() {
-        // If single value field.
-        if (!this.useWrapper()) {
-            return super.render(`<div ${this._referenceAttributeName}="element">
-          ${this.renderElement(this.component.type !== 'hidden' ? this.dataValue : '')}
-        </div>`);
-        }
-        // Make sure dataValue is in the correct array format.
-        let dataValue = this.dataValue;
-        if (!Array.isArray(dataValue)) {
-            dataValue = dataValue ? [dataValue] : [];
-        }
-        // If multiple value field.
-        return super.render(this.renderTemplate('multiValueTable', {
-            rows: dataValue.map(this.renderRow.bind(this)).join(''),
-            disabled: this.disabled,
-            addAnother: this.addAnother,
-        }));
+        let dataValue = this.normalizeValue(this.dataValue);
+        return this.component.hasOwnProperty('multiple') && this.component.multiple
+            ? super.render(this.renderTemplate('multiValueTable', {
+                rows: dataValue.map(this.renderRow.bind(this)).join(''),
+                disabled: this.disabled,
+                addAnother: this.addAnother,
+            }))
+            : super.render(`<div ${this._referenceAttributeName}="element">
+            ${this.renderElement(this.component.type !== 'hidden' ? dataValue : '')}
+          </div>`);
     }
     renderElement() {
         return '';
@@ -237,10 +257,17 @@ class Multivalue extends Field_1.default {
     }
     /**
      * @param {any} input - The input element on which the mask is to be applied.
-     * @param {string} mask - The mask pattern to apply to the input element. Exit early if no mask.
+     * @param {string} mask - The mask pattern to apply to the input element. Exit early and remove previous mask if no mask.
      */
     updateMask(input, mask) {
         if (!mask) {
+            if (input.mask) {
+                input.mask.destroy();
+            }
+            if (!this.component.placeholder) {
+                input.removeAttribute('placeholder');
+            }
+            input.value = '';
             return;
         }
         this.setInputMask(input, mask, !this.component.placeholder);

package/lib/cjs/components/_classes/nested/NestedComponent.d.ts

@@ -211,11 +211,12 @@ export default class NestedComponent extends Field {
     calculateValue(data: any, flags: any, row: any): any;
     isLastPage(): boolean;
     isValid(data: any, dirty: any): any;
-    validationProcessor({ scope, data, row, instance }: {
+    validationProcessor({ scope, data, row, instance, component }: {
         scope: any;
         data: any;
         row: any;
         instance: any;
+        component: any;
     }, flags: any): void;
     /**
      * Perform a validation on all child components of this nested component.

package/lib/cjs/components/_classes/nested/NestedComponent.js

@@ -497,6 +497,7 @@ class NestedComponent extends Field_1.default {
             header: 'single',
             collapsed: this.collapsed,
             [this.nestedKey]: 'single',
+            messageContainer: 'single-scope',
         });
         let childPromise = Promise.resolve();
         if (this.refs[this.nestedKey]) {
@@ -681,8 +682,11 @@ class NestedComponent extends Field_1.default {
     isValid(data, dirty) {
         return this.getComponents().reduce((valid, comp) => comp.isValid(data, dirty) && valid, super.isValid(data, dirty));
     }
-    validationProcessor({ scope, data, row, instance }, flags) {
+    validationProcessor({ scope, data, row, instance, component }, flags) {
         const { dirty } = flags;
+        if (this.root.hasExtraPages && this.page !== this.root.page) {
+            instance = this.getComponent(component.path);
+        }
         if (!instance) {
             return;
         }

package/lib/cjs/components/_classes/nestedarray/NestedArrayComponent.d.ts

@@ -12,6 +12,9 @@ export default class NestedArrayComponent extends NestedDataComponent {
     hasAddButton(): any;
     getComponent(path: any, fn: any, originalPath: any): any;
     everyComponent(fn: any, rowIndex: any, options?: {}): void;
+    _getEmailTableHeader(options: any): string;
+    _getEmailTableBody(options: any): string;
     getComponents(rowIndex: any): any;
+    removeSubmissionMetadataRow(index: any): void;
 }
 import NestedDataComponent from '../nesteddata/NestedDataComponent';

package/lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js

@@ -149,39 +149,60 @@ class NestedArrayComponent extends NestedDataComponent_1.default {
             }
         });
     }
+    _getEmailTableHeader(options) {
+        let row = '';
+        const getHeaderCell = (component) => {
+            if (!component.isInputComponent || !component.visible || component.skipInEmail) {
+                return '';
+            }
+            const label = component.label || component.key;
+            return `<th style="padding: 5px 10px;">${label}</th>`;
+        };
+        const components = this.getComponents(0);
+        for (const component of components) {
+            if (component.isInputComponent) {
+                row += getHeaderCell(component);
+            }
+            else if ((0, utils_1.isLayoutComponent)(component) && typeof component.everyComponent === 'function') {
+                component.everyComponent((comp) => {
+                    row += getHeaderCell(comp);
+                }, options);
+            }
+        }
+        return `<thead><tr>${row}</tr></thead>`;
+    }
+    _getEmailTableBody(options) {
+        const getBodyCell = (component) => {
+            if (!component.isInputComponent || !component.visible || component.skipInEmail) {
+                return '';
+            }
+            return `<td style="padding: 5px 10px;">${component.getView(component.dataValue, options)}</td>`;
+        };
+        const rows = [];
+        for (const { components } of this.iteratableRows) {
+            let row = '';
+            for (const component of components) {
+                if (component.isInputComponent) {
+                    row += getBodyCell(component);
+                }
+                else if ((0, utils_1.isLayoutComponent)(component) && typeof component.everyComponent === 'function') {
+                    component.everyComponent((comp) => {
+                        row += getBodyCell(comp);
+                    }, options);
+                }
+            }
+            rows.push(`<tr>${row}</tr>`);
+        }
+        return `<tbody>${rows.join('')}</tbody>`;
+    }
     getValueAsString(value, options) {
-        var _a;
         if (options === null || options === void 0 ? void 0 : options.email) {
-            let result = (`
+            return `
         <table border="1" style="width:100%">
-          <thead>
-            <tr>
-      `);
-            (_a = this.component.components) === null || _a === void 0 ? void 0 : _a.forEach((component) => {
-                const label = component.label || component.key;
-                result += `<th style="padding: 5px 10px;">${label}</th>`;
-            });
-            result += (`
-          </tr>
-        </thead>
-        <tbody>
-      `);
-            this.iteratableRows.forEach(({ components }) => {
-                result += '<tr>';
-                lodash_1.default.each(components, (component) => {
-                    result += '<td style="padding:5px 10px;">';
-                    if (component.isInputComponent && component.visible && !component.skipInEmail) {
-                        result += component.getView(component.dataValue, options);
-                    }
-                    result += '</td>';
-                });
-                result += '</tr>';
-            });
-            result += (`
-          </tbody>
+          ${this._getEmailTableHeader(options)}
+          ${this._getEmailTableBody(options)}
         </table>
-      `);
-            return result;
+      `;
         }
         if (!value || !value.length) {
             return '';
@@ -197,5 +218,11 @@ class NestedArrayComponent extends NestedDataComponent_1.default {
         }
         return super.getComponents();
     }
+    removeSubmissionMetadataRow(index) {
+        const componentMetadata = lodash_1.default.get(this.root, `submission.metadata.selectData.${this.path}`, null);
+        if (lodash_1.default.isArray(componentMetadata)) {
+            componentMetadata.splice(index, 1);
+        }
+    }
 }
 exports.default = NestedArrayComponent;

package/lib/cjs/components/address/Address.d.ts

@@ -11,6 +11,12 @@ export default class AddressComponent extends ContainerComponent {
         weight: number;
         schema: any;
     };
+    static get serverConditionSettings(): {
+        operators: string[];
+    };
+    static get conditionOperatorsSettings(): {
+        operators: string[];
+    };
     static get modeSwitcherRef(): string;
     static get removeValueIconRef(): string;
     static get searchInputRef(): string;

package/lib/cjs/components/address/Address.js

@@ -97,6 +97,12 @@ class AddressComponent extends Container_1.default {
             schema: AddressComponent.schema(),
         };
     }
+    static get serverConditionSettings() {
+        return AddressComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
+        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });
+    }
     mergeSchema(component = {}) {
         let { defaultSchema } = this;
         if (component.components) {
@@ -113,6 +119,10 @@ class AddressComponent extends Container_1.default {
         if (!this.builderMode) {
             if (this.component.provider) {
                 const { provider, providerOptions, } = this.component;
+                if (lodash_1.default.get(providerOptions, 'params.subscriptionKey')) {
+                    lodash_1.default.set(providerOptions, "params['subscription-key']", lodash_1.default.get(providerOptions, 'params.subscriptionKey'));
+                    lodash_1.default.unset(providerOptions, 'params.subscriptionKey');
+                }
                 this.provider = this.initializeProvider(provider, providerOptions);
             }
             else if (this.component.map) {
@@ -184,7 +194,7 @@ class AddressComponent extends Container_1.default {
         return (this.manualModeEnabled && this.dataValue) ? this.dataValue.address : this.dataValue;
     }
     set address(value) {
-        if (this.manualModeEnabled && !this.isMultiple) {
+        if (this.manualModeEnabled && !this.isMultiple && !lodash_1.default.isEqual(value, this.emptyValue)) {
             this.dataValue.address = value;
         }
         else {

package/lib/cjs/components/address/editForm/Address.edit.provider.js

@@ -31,7 +31,7 @@ exports.default = [
     {
         type: 'textfield',
         input: true,
-        key: "providerOptions.params['subscription-key']",
+        key: "providerOptions.params.subscriptionKey",
         label: 'Subscription Key',
         placeholder: 'Enter Subscription Key',
         weight: 10,

package/lib/cjs/components/checkbox/Checkbox.d.ts

@@ -43,7 +43,7 @@ export default class CheckBoxComponent extends Field {
     attach(element: any): Promise<void>;
     input: any;
     detach(element: any): void;
-    get emptyValue(): false | null;
+    get emptyValue(): false | "";
     getValueAt(index: any): any;
     get checked(): boolean;
     setCheckedState(value: any): any;

package/lib/cjs/components/checkbox/Checkbox.js

@@ -117,7 +117,7 @@ class CheckBoxComponent extends Field_1.default {
         super.detach();
     }
     get emptyValue() {
-        return this.component.inputType === 'radio' ? null : false;
+        return this.component.inputType === 'radio' ? '' : false;
     }
     isEmpty(value = this.dataValue) {
         return super.isEmpty(value) || value === false;

package/lib/cjs/components/checkbox/fixtures/comp6.d.ts

@@ -0,0 +1,32 @@
+declare namespace _default {
+    let name: string;
+    let path: string;
+    let type: string;
+    let display: string;
+    let components: ({
+        label: string;
+        inputType: string;
+        tableView: boolean;
+        defaultValue: boolean;
+        key: string;
+        type: string;
+        name: string;
+        value: string;
+        input: boolean;
+        'some name': boolean;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        inputType?: undefined;
+        defaultValue?: undefined;
+        name?: undefined;
+        value?: undefined;
+        'some name'?: undefined;
+    })[];
+}
+export default _default;

package/lib/cjs/components/checkbox/fixtures/comp6.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    name: 'ckeckbox',
+    path: 'ckeckbox',
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Checkbox',
+            inputType: 'radio',
+            tableView: false,
+            defaultValue: false,
+            key: 'checkbox',
+            type: 'checkbox',
+            name: 'some name',
+            value: 'ok',
+            input: true,
+            'some name': false
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false
+        }
+    ],
+};

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

@@ -3,5 +3,6 @@ import comp2 from './comp2';
 import comp3 from './comp3';
 import comp4 from './comp4';
 import comp5 from './comp5';
+import comp6 from './comp6';
 import customDefaultComponent from './customDefaultComponent';
-export { comp1, comp2, comp3, comp4, comp5, customDefaultComponent };
+export { comp1, comp2, comp3, comp4, comp5, comp6, customDefaultComponent };

package/lib/cjs/components/checkbox/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.customDefaultComponent = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.customDefaultComponent = 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 customDefaultComponent_1 = __importDefault(require("./customDefaultComponent"));
@@ -16,3 +16,5 @@ const comp4_1 = __importDefault(require("./comp4"));
 exports.comp4 = comp4_1.default;
 const comp5_1 = __importDefault(require("./comp5"));
 exports.comp5 = comp5_1.default;
+const comp6_1 = __importDefault(require("./comp6"));
+exports.comp6 = comp6_1.default;

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

@@ -2,6 +2,8 @@ export default class CurrencyComponent extends NumberComponent {
     constructor(component: any, options: any, data: any);
     currencyPrefix: any;
     currencySuffix: any;
+    parseNumber(value: any): number;
+    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[];
@@ -58,10 +59,19 @@ export default class DataGridComponent extends NestedArrayComponent {
     getRows(): {}[];
     getColumns(): any[];
     hasHeader(): any;
-    loadRefs(element: any, refs: any): void;
     dragula: any;
     getComponentsContainer(): any;
+    /**
+     * Reorder values in array based on the old and new position
+     * @param {any} valuesArr - An array of values.
+     * @param {number} oldPosition - The index of the value in array before reordering.
+     * @param {number} newPosition - The index of the value in array after reordering.
+     * @param {boolean|any} movedBelow - Whether or not the value is moved below.
+     * @returns {void}
+     */
+    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,7 +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 Components_1 = __importDefault(require("../Components"));
 class DataGridComponent extends NestedArrayComponent_1.default {
     static schema(...extend) {
         return NestedArrayComponent_1.default.schema({
@@ -43,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();
@@ -260,13 +263,6 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             return hasHeader || ((col.label || col.title) && !col.hideLabel);
         }, false);
     }
-    loadRefs(element, refs) {
-        super.loadRefs(element, refs);
-        if (refs['messageContainer'] === 'single') {
-            const container = lodash_1.default.last(element.querySelectorAll(`[${this._referenceAttributeName}=messageContainer]`));
-            this.refs['messageContainer'] = container || this.refs['messageContainer'];
-        }
-    }
     attach(element) {
         this.loadRefs(element, {
             [`${this.datagridKey}-row`]: 'multiple',
@@ -275,14 +271,20 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             [`${this.datagridKey}-removeRow`]: 'multiple',
             [`${this.datagridKey}-group-header`]: 'multiple',
             [this.datagridKey]: 'multiple',
-            'messageContainer': 'single'
         });
         if (this.allowReorder) {
             this.refs[`${this.datagridKey}-row`].forEach((row, index) => {
                 row.dragInfo = { index };
             });
-            if (this.root.dragulaLib) {
-                this.dragula = this.root.dragulaLib([this.refs[`${this.datagridKey}-tbody`]], {
+            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 = [];
+                }
+                this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {
                     moves: (_draggedElement, _oldParent, clickedElement) => {
                         const clickedElementKey = clickedElement.getAttribute('data-key');
                         const oldParentKey = _oldParent.getAttribute('data-key');
@@ -291,24 +293,9 @@ class DataGridComponent extends NestedArrayComponent_1.default {
                             return clickedElement.classList.contains('formio-drag-button');
                         }
                     }
-                }).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;
-                            }
-                            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) => {
             this.addEventListener(addButton, 'click', this.addRow.bind(this));
@@ -336,6 +323,24 @@ class DataGridComponent extends NestedArrayComponent_1.default {
     getComponentsContainer() {
         return this.component.components;
     }
+    /**
+     * Reorder values in array based on the old and new position
+     * @param {any} valuesArr - An array of values.
+     * @param {number} oldPosition - The index of the value in array before reordering.
+     * @param {number} newPosition - The index of the value in array after reordering.
+     * @param {boolean|any} movedBelow - Whether or not the value is moved below.
+     * @returns {void}
+     */
+    reorderValues(valuesArr, oldPosition, newPosition, movedBelow) {
+        if (!lodash_1.default.isArray(valuesArr) || lodash_1.default.isEmpty(valuesArr)) {
+            return;
+        }
+        const draggedRowData = valuesArr[oldPosition];
+        //insert element at new position
+        valuesArr.splice(newPosition, 0, draggedRowData);
+        //remove element from old position (if was moved above, after insertion it's at +1 index)
+        valuesArr.splice(movedBelow ? oldPosition : oldPosition + 1, 1);
+    }
     onReorder(element, _target, _source, sibling) {
         if (!element.dragInfo || (sibling && !sibling.dragInfo)) {
             console.warn('There is no Drag Info available for either dragged or sibling element');
@@ -346,15 +351,32 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         const newPosition = sibling ? sibling.dragInfo.index : this.dataValue.length;
         const movedBelow = newPosition > oldPosition;
         const dataValue = (0, utils_1.fastCloneDeep)(this.dataValue);
-        const draggedRowData = dataValue[oldPosition];
-        //insert element at new position
-        dataValue.splice(newPosition, 0, draggedRowData);
-        //remove element from old position (if was moved above, after insertion it's at +1 index)
-        dataValue.splice(movedBelow ? oldPosition : oldPosition + 1, 1);
+        this.reorderValues(dataValue, oldPosition, newPosition, movedBelow);
+        //reorder select data
+        this.reorderValues(lodash_1.default.get(this.root, `submission.metadata.selectData.${this.path}`, []), oldPosition, newPosition, movedBelow);
+        // When components are reordered we need to set the dataGrid and form pristine properties to false
+        this.root.pristine = false;
+        this.pristine = false;
         //need to re-build rows to re-calculate indexes and other indexed fields for component instance (like rows for ex.)
         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;
@@ -404,7 +426,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) {
@@ -414,10 +436,11 @@ class DataGridComponent extends NestedArrayComponent_1.default {
     }
     removeRow(index) {
         const makeEmpty = index === 0 && this.rows.length === 1;
-        const flags = { isReordered: !makeEmpty, resetValue: makeEmpty };
+        const flags = { isReordered: !makeEmpty, resetValue: makeEmpty, modified: true };
         this.splice(index, flags);
         this.emit('dataGridDeleteRow', { index });
         const [row] = this.rows.splice(index, 1);
+        this.removeSubmissionMetadataRow(index);
         this.removeRowComponents(row);
         this.updateRowsComponents(index);
         this.setValue(this.dataValue, flags);