@formio/js 5.0.0-dev.5707.d029d4d → 5.0.0-dev.5710.e2e8388

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() {

package/lib/cjs/WebformBuilder.d.ts

@@ -15,6 +15,11 @@ export default class WebformBuilder extends Component {
     arrayDataComponentPaths: any[];
     nestedDataComponents: any[];
     arrayDataComponents: any[];
+    /**
+     * Returns the query parameters for the builder existing resources request
+     * @returns {object} - The object with query parameters.
+     */
+    getExistingResourcesQuery(): object;
     allowDrop(): boolean;
     addExistingResourceFields(resources: any): void;
     attachTooltip(component: any, title: any): import("tippy.js").Instance<import("tippy.js").Props>[];

package/lib/cjs/WebformBuilder.js

@@ -203,20 +203,6 @@ class WebformBuilder extends Component_1.default {
             // Need to set up horizontal rearrangement of fields.
         };
         this.options.hooks.attachComponent = this.attachComponent.bind(this);
-        // Load resources tagged as 'builder'
-        const query = {
-            params: {
-                type: 'resource',
-                limit: 1000000,
-                select: '_id,title,name,components'
-            }
-        };
-        if (this.options && this.options.resourceTag) {
-            query.params.tags = [this.options.resourceTag];
-        }
-        else if (!this.options || !this.options.hasOwnProperty('resourceTag')) {
-            query.params.tags = ['builder'];
-        }
         const formio = new Formio_1.Formio(Formio_1.Formio.projectUrl);
         const isResourcesDisabled = this.options.builder && this.options.builder.resource === false;
         formio.loadProject().then((project) => {
@@ -234,7 +220,7 @@ class WebformBuilder extends Component_1.default {
         });
         if (!formio.noProject && !isResourcesDisabled && formio.formsUrl) {
             const resourceOptions = this.options.builder && this.options.builder.resource;
-            formio.loadForms(query)
+            formio.loadForms(this.getExistingResourcesQuery())
                 .then((resources) => {
                 if (resources.length) {
                     this.builder.resource = {
@@ -268,6 +254,27 @@ class WebformBuilder extends Component_1.default {
         this.nestedDataComponents = [];
         this.arrayDataComponents = [];
     }
+    /**
+     * Returns the query parameters for the builder existing resources request
+     * @returns {object} - The object with query parameters.
+     */
+    getExistingResourcesQuery() {
+        // Load resources tagged as 'builder'
+        const query = {
+            params: {
+                type: 'resource',
+                limit: 1000000,
+                select: '_id,title,name,components'
+            }
+        };
+        if (this.options && this.options.resourceTag) {
+            query.params.tags = [this.options.resourceTag];
+        }
+        else if (!this.options || !this.options.hasOwnProperty('resourceTag')) {
+            query.params.tags = ['builder'];
+        }
+        return query;
+    }
     allowDrop() {
         return true;
     }

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/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/editgrid/EditGrid.js

@@ -1101,7 +1101,8 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             return false;
         }
         else if (rowsEditing && this.saveEditMode && !this.component.openWhenEmpty) {
-            this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);
+            this._errors = this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);
+            errors.push(...this._errors);
             return false;
         }
         const message = this.invalid || this.invalidMessage(data, dirty, false, row);

package/lib/cjs/components/editgrid/fixtures/comp16.d.ts

@@ -0,0 +1,52 @@
+declare namespace _default {
+    let type: string;
+    let display: string;
+    let components: ({
+        title: string;
+        breadcrumbClickable: boolean;
+        buttonSettings: {
+            previous: boolean;
+            cancel: boolean;
+            next: boolean;
+        };
+        collapsible: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        label: string;
+        input: boolean;
+        components: {
+            label: string;
+            tableView: boolean;
+            rowDrafts: boolean;
+            key: string;
+            type: string;
+            input: boolean;
+            components: {
+                label: string;
+                tableView: boolean;
+                key: string;
+                type: string;
+                input: boolean;
+                alwaysEnabled: boolean;
+            }[];
+            alwaysEnabled: boolean;
+        }[];
+        alwaysEnabled: boolean;
+        showValidations?: undefined;
+    } | {
+        label: string;
+        showValidations: boolean;
+        alwaysEnabled: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        title?: undefined;
+        breadcrumbClickable?: undefined;
+        buttonSettings?: undefined;
+        collapsible?: undefined;
+        components?: undefined;
+    })[];
+}
+export default _default;

package/lib/cjs/components/editgrid/fixtures/comp16.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    type: 'form',
+    display: 'wizard',
+    components: [
+        {
+            title: 'Page 1',
+            breadcrumbClickable: true,
+            buttonSettings: {
+                previous: true,
+                cancel: true,
+                next: true
+            },
+            collapsible: false,
+            tableView: false,
+            key: 'page3',
+            type: 'panel',
+            label: 'Page 2',
+            input: false,
+            components: [
+                {
+                    label: 'Edit Grid',
+                    tableView: true,
+                    rowDrafts: false,
+                    key: 'editGrid',
+                    type: 'editgrid',
+                    input: true,
+                    components: [
+                        {
+                            label: 'Text Field',
+                            tableView: true,
+                            key: 'textField',
+                            type: 'textfield',
+                            input: true,
+                            alwaysEnabled: false
+                        }
+                    ],
+                    alwaysEnabled: false
+                }
+            ],
+            alwaysEnabled: false
+        },
+        {
+            title: 'Page 2',
+            breadcrumbClickable: true,
+            buttonSettings: {
+                previous: true,
+                cancel: true,
+                next: true
+            },
+            collapsible: false,
+            tableView: false,
+            key: 'page2',
+            type: 'panel',
+            label: 'Page 1',
+            input: false,
+            alwaysEnabled: false,
+            components: []
+        },
+        {
+            label: 'Submit',
+            showValidations: false,
+            alwaysEnabled: false,
+            tableView: false,
+            key: 'submit',
+            type: 'button',
+            input: true
+        }
+    ]
+};

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

@@ -13,8 +13,9 @@ import comp6 from './comp6';
 import comp7 from './comp7';
 import comp8 from './comp8';
 import comp9 from './comp9';
+import comp16 from './comp16';
 import compOpenWhenEmpty from './comp-openWhenEmpty';
 import withOpenWhenEmptyAndConditions from './comp-with-conditions-and-openWhenEmpty';
 import compWithCustomDefaultValue from './comp-with-custom-default-value';
 import compTestEvents from './comp-test-events';
-export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp4, comp5, comp6, comp7, comp8, comp9, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };
+export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp4, comp5, comp6, comp7, comp8, comp9, comp16, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };

package/lib/cjs/components/editgrid/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.compTestEvents = exports.compWithCustomDefaultValue = exports.withOpenWhenEmptyAndConditions = exports.compOpenWhenEmpty = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.compTestEvents = exports.compWithCustomDefaultValue = exports.withOpenWhenEmptyAndConditions = exports.compOpenWhenEmpty = exports.comp16 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = 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"));
@@ -34,6 +34,8 @@ const comp14_1 = __importDefault(require("./comp14"));
 exports.comp14 = comp14_1.default;
 const comp15_1 = __importDefault(require("./comp15"));
 exports.comp15 = comp15_1.default;
+const comp16_1 = __importDefault(require("./comp16"));
+exports.comp16 = comp16_1.default;
 const comp_with_conditions_and_openWhenEmpty_1 = __importDefault(require("./comp-with-conditions-and-openWhenEmpty"));
 exports.withOpenWhenEmptyAndConditions = comp_with_conditions_and_openWhenEmpty_1.default;
 const comp_openWhenEmpty_1 = __importDefault(require("./comp-openWhenEmpty"));

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() {

package/lib/mjs/WebformBuilder.d.ts

@@ -15,6 +15,11 @@ export default class WebformBuilder extends Component {
     arrayDataComponentPaths: any[];
     nestedDataComponents: any[];
     arrayDataComponents: any[];
+    /**
+     * Returns the query parameters for the builder existing resources request
+     * @returns {object} - The object with query parameters.
+     */
+    getExistingResourcesQuery(): object;
     allowDrop(): boolean;
     addExistingResourceFields(resources: any): void;
     attachTooltip(component: any, title: any): import("tippy.js").Instance<import("tippy.js").Props>[];

package/lib/mjs/WebformBuilder.js

@@ -182,20 +182,6 @@ export default class WebformBuilder extends Component {
             // Need to set up horizontal rearrangement of fields.
         };
         this.options.hooks.attachComponent = this.attachComponent.bind(this);
-        // Load resources tagged as 'builder'
-        const query = {
-            params: {
-                type: 'resource',
-                limit: 1000000,
-                select: '_id,title,name,components'
-            }
-        };
-        if (this.options && this.options.resourceTag) {
-            query.params.tags = [this.options.resourceTag];
-        }
-        else if (!this.options || !this.options.hasOwnProperty('resourceTag')) {
-            query.params.tags = ['builder'];
-        }
         const formio = new Formio(Formio.projectUrl);
         const isResourcesDisabled = this.options.builder && this.options.builder.resource === false;
         formio.loadProject().then((project) => {
@@ -213,7 +199,7 @@ export default class WebformBuilder extends Component {
         });
         if (!formio.noProject && !isResourcesDisabled && formio.formsUrl) {
             const resourceOptions = this.options.builder && this.options.builder.resource;
-            formio.loadForms(query)
+            formio.loadForms(this.getExistingResourcesQuery())
                 .then((resources) => {
                 if (resources.length) {
                     this.builder.resource = {
@@ -247,6 +233,27 @@ export default class WebformBuilder extends Component {
         this.nestedDataComponents = [];
         this.arrayDataComponents = [];
     }
+    /**
+     * Returns the query parameters for the builder existing resources request
+     * @returns {object} - The object with query parameters.
+     */
+    getExistingResourcesQuery() {
+        // Load resources tagged as 'builder'
+        const query = {
+            params: {
+                type: 'resource',
+                limit: 1000000,
+                select: '_id,title,name,components'
+            }
+        };
+        if (this.options && this.options.resourceTag) {
+            query.params.tags = [this.options.resourceTag];
+        }
+        else if (!this.options || !this.options.hasOwnProperty('resourceTag')) {
+            query.params.tags = ['builder'];
+        }
+        return query;
+    }
     allowDrop() {
         return true;
     }

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/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;