@formio/js 5.0.0-dev.5687.fbf1b3d → 5.0.0-dev.5692.a9fe9c4

package/lib/cjs/Webform.js

@@ -13,6 +13,10 @@ const Components_1 = __importDefault(require("./components/Components"));
 const NestedDataComponent_1 = __importDefault(require("./components/_classes/nesteddata/NestedDataComponent"));
 const utils_1 = require("./utils/utils");
 const formUtils_1 = require("./utils/formUtils");
+// We need this here because dragula pulls in CustomEvent class that requires global to exist.
+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 = {};

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

@@ -3388,6 +3388,10 @@ class Component extends Element_1.default {
                             const disabled = this.shouldDisabled;
                             // Change states which won't be recalculated during redrawing
                             if (this.visible !== visible) {
+                                // If the logic is triggered by an event and the action sets the hidden state then the original
+                                // component definition must be changed so that the components hidden state does not get flipped back by
+                                // the fieldLogic function
+                                this.originalComponent.hidden = !visible;
                                 this.visible = visible;
                             }
                             if (this.disabled !== disabled) {

package/lib/cjs/components/_classes/component/editForm/Component.edit.display.js

@@ -190,5 +190,13 @@ exports.default = [
         key: 'tableView',
         input: true
     },
+    {
+        weight: 1600,
+        type: 'checkbox',
+        label: 'Modal Edit',
+        tooltip: 'Opens up a modal to edit the value of this component.',
+        key: 'modalEdit',
+        input: true
+    }
 ];
 /* eslint-enable max-len */

package/lib/cjs/components/_classes/component/fixtures/comp7.d.ts

@@ -0,0 +1,84 @@
+declare namespace _default {
+    let components: ({
+        label: string;
+        action: string;
+        showValidations: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        event: string;
+        input: boolean;
+        theme?: undefined;
+        collapsible?: undefined;
+        hidden?: undefined;
+        logic?: undefined;
+        collapsed?: undefined;
+        components?: undefined;
+        applyMaskOn?: undefined;
+    } | {
+        label: string;
+        action: string;
+        showValidations: boolean;
+        theme: string;
+        tableView: boolean;
+        key: string;
+        type: string;
+        event: string;
+        input: boolean;
+        collapsible?: undefined;
+        hidden?: undefined;
+        logic?: undefined;
+        collapsed?: undefined;
+        components?: undefined;
+        applyMaskOn?: undefined;
+    } | {
+        collapsible: boolean;
+        hidden: boolean;
+        key: string;
+        logic: {
+            name: string;
+            trigger: {
+                type: string;
+                event: string;
+            };
+            actions: {
+                name: string;
+                type: string;
+                property: {
+                    label: string;
+                    value: string;
+                    type: string;
+                };
+                state: boolean;
+            }[];
+        }[];
+        type: string;
+        label: string;
+        collapsed: boolean;
+        input: boolean;
+        tableView: boolean;
+        components: never[];
+        action?: undefined;
+        showValidations?: undefined;
+        event?: undefined;
+        theme?: undefined;
+        applyMaskOn?: undefined;
+    } | {
+        label: string;
+        applyMaskOn: string;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        action?: undefined;
+        showValidations?: undefined;
+        event?: undefined;
+        theme?: undefined;
+        collapsible?: undefined;
+        hidden?: undefined;
+        logic?: undefined;
+        collapsed?: undefined;
+        components?: undefined;
+    })[];
+}
+export default _default;

package/lib/cjs/components/_classes/component/fixtures/comp7.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    components: [
+        {
+            "label": "Show",
+            "action": "event",
+            "showValidations": false,
+            "tableView": false,
+            "key": "show",
+            "type": "button",
+            "event": "show",
+            "input": true
+        },
+        {
+            "label": "Hide",
+            "action": "event",
+            "showValidations": false,
+            "theme": "danger",
+            "tableView": false,
+            "key": "hide",
+            "type": "button",
+            "event": "hide",
+            "input": true
+        },
+        {
+            "collapsible": true,
+            "hidden": true,
+            "key": "panel",
+            "logic": [
+                {
+                    "name": "ShowPanel",
+                    "trigger": {
+                        "type": "event",
+                        "event": "show"
+                    },
+                    "actions": [
+                        {
+                            "name": "Show",
+                            "type": "property",
+                            "property": {
+                                "label": "Hidden",
+                                "value": "hidden",
+                                "type": "boolean"
+                            },
+                            "state": false
+                        }
+                    ]
+                },
+                {
+                    "name": "HidePanel",
+                    "trigger": {
+                        "type": "event",
+                        "event": "hide"
+                    },
+                    "actions": [
+                        {
+                            "name": "Hide",
+                            "type": "property",
+                            "property": {
+                                "label": "Hidden",
+                                "value": "hidden",
+                                "type": "boolean"
+                            },
+                            "state": true
+                        }
+                    ]
+                }
+            ],
+            "type": "panel",
+            "label": "Panel",
+            "collapsed": false,
+            "input": false,
+            "tableView": false,
+            "components": []
+        },
+        {
+            "label": "Text Field",
+            "applyMaskOn": "change",
+            "tableView": true,
+            "key": "textField1",
+            "type": "textfield",
+            "input": true
+        }
+    ]
+};

package/lib/cjs/components/_classes/component/fixtures/index.d.ts

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

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

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

@@ -61,6 +61,15 @@ export default class DataGridComponent extends NestedArrayComponent {
     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;
     focusOnNewRowElement(row: any): void;
     addRow(): void;

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

@@ -7,6 +7,7 @@ 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"));
 class DataGridComponent extends NestedArrayComponent_1.default {
     static schema(...extend) {
         return NestedArrayComponent_1.default.schema({
@@ -281,34 +282,32 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             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`]], {
-                    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');
-                        }
-                    }
-                }).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;
-                            }
-                        });
+            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');
                     }
-                });
-            }
+                }
+            }).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;
+                        }
+                    });
+                }
+            });
         }
         this.refs[`${this.datagridKey}-addRow`].forEach((addButton) => {
             this.addEventListener(addButton, 'click', this.addRow.bind(this));
@@ -336,6 +335,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,11 +363,12 @@ 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();

package/lib/cjs/components/datagrid/fixtures/comp-with-reorder.d.ts

@@ -0,0 +1,100 @@
+declare namespace _default {
+    export { form };
+    export { submission };
+}
+export default _default;
+declare namespace form {
+    let _id: string;
+    let title: string;
+    let name: string;
+    let path: string;
+    let type: string;
+    let display: string;
+    let components: ({
+        label: string;
+        reorder: boolean;
+        addAnotherPosition: string;
+        layoutFixed: boolean;
+        enableRowGroups: boolean;
+        initEmpty: boolean;
+        tableView: boolean;
+        defaultValue: {
+            select: string;
+        }[];
+        key: string;
+        type: string;
+        input: boolean;
+        components: {
+            label: string;
+            widget: string;
+            tableView: boolean;
+            dataSrc: string;
+            data: {
+                resource: string;
+            };
+            dataType: string;
+            valueProperty: string;
+            template: string;
+            validate: {
+                select: boolean;
+            };
+            key: string;
+            type: string;
+            searchField: string;
+            limit: number;
+            noRefreshOnScroll: boolean;
+            addResource: boolean;
+            reference: boolean;
+            input: boolean;
+        }[];
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        reorder?: undefined;
+        addAnotherPosition?: undefined;
+        layoutFixed?: undefined;
+        enableRowGroups?: undefined;
+        initEmpty?: undefined;
+        defaultValue?: undefined;
+        components?: undefined;
+    })[];
+    let created: string;
+    let modified: string;
+    let machineName: string;
+}
+declare namespace submission {
+    let form_1: string;
+    export { form_1 as form };
+    export namespace metadata {
+        namespace selectData {
+            let dataGrid: {
+                select: {
+                    data: {
+                        number: number;
+                    };
+                };
+            }[];
+        }
+    }
+    export namespace data {
+        let dataGrid_1: {
+            select: string;
+        }[];
+        export { dataGrid_1 as dataGrid };
+        export let dataTable: never[];
+        export let submit: boolean;
+    }
+    let _id_1: string;
+    export { _id_1 as _id };
+    export let project: string;
+    export let state: string;
+    let created_1: string;
+    export { created_1 as created };
+    let modified_1: string;
+    export { modified_1 as modified };
+}

package/lib/cjs/components/datagrid/fixtures/comp-with-reorder.js

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const form = {
+    _id: '66742f4146717b98a9fa280f',
+    title: 'test reorder',
+    name: 'testReorder',
+    path: 'testreorder',
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Data Grid',
+            reorder: true,
+            addAnotherPosition: 'bottom',
+            layoutFixed: false,
+            enableRowGroups: false,
+            initEmpty: false,
+            tableView: false,
+            defaultValue: [
+                {
+                    select: '',
+                },
+            ],
+            key: 'dataGrid',
+            type: 'datagrid',
+            input: true,
+            components: [
+                {
+                    label: 'Select',
+                    widget: 'choicesjs',
+                    tableView: true,
+                    dataSrc: 'resource',
+                    data: {
+                        resource: '66742ee946717b98a9fa1b0b',
+                    },
+                    dataType: 'string',
+                    valueProperty: 'data.textField',
+                    template: '<span>{{ item.data.number }}</span>',
+                    validate: {
+                        select: false,
+                    },
+                    key: 'select',
+                    type: 'select',
+                    searchField: 'data.textField__regex',
+                    limit: 10,
+                    noRefreshOnScroll: false,
+                    addResource: false,
+                    reference: false,
+                    input: true,
+                },
+            ],
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        },
+    ],
+    created: '2024-06-20T13:31:45.177Z',
+    modified: '2024-06-25T10:32:46.577Z',
+    machineName: 'tifwklexhyrgxbr:testReorder',
+};
+const submission = {
+    form: '66742f4146717b98a9fa280f',
+    metadata: {
+        selectData: {
+            dataGrid: [
+                {
+                    select: {
+                        data: {
+                            number: 1,
+                        },
+                    },
+                },
+                {
+                    select: {
+                        data: {
+                            number: 2,
+                        },
+                    },
+                },
+                {
+                    select: {
+                        data: {
+                            number: 3,
+                        },
+                    },
+                },
+                {
+                    select: {
+                        data: {
+                            number: 4,
+                        },
+                    },
+                },
+                {
+                    select: {
+                        data: {
+                            number: 5,
+                        },
+                    },
+                },
+            ],
+        },
+    },
+    data: {
+        dataGrid: [
+            {
+                select: '11',
+            },
+            {
+                select: '22',
+            },
+            {
+                select: '33',
+            },
+            {
+                select: '44',
+            },
+            {
+                select: '55',
+            },
+        ],
+        dataTable: [],
+        submit: true,
+    },
+    _id: '667ab5ee6a69739703d30def',
+    project: '65df46bc93bcfaa231f3db1c',
+    state: 'submitted',
+    created: '2024-06-25T12:19:58.626Z',
+    modified: '2024-06-25T12:19:58.627Z',
+};
+exports.default = {
+    form,
+    submission,
+};

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

@@ -16,4 +16,5 @@ import modalWithRequiredFields from './comp-modal-with-required-fields';
 import withAllowCalculateOverride from './comp-with-allow-calculate-override';
 import twoWithAllowCalculatedOverride from './two-comp-with-allow-calculate-override';
 import withCheckboxes from './comp-with-checkboxes';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, withCollapsibleRowGroups, withConditionalFieldsAndValidations, withDefValue, withLogic, withRowGroupsAndDefValue, modalWithRequiredFields, withAllowCalculateOverride, twoWithAllowCalculatedOverride, withCheckboxes };
+import withReorder from './comp-with-reorder';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, withCollapsibleRowGroups, withConditionalFieldsAndValidations, withDefValue, withLogic, withRowGroupsAndDefValue, modalWithRequiredFields, withAllowCalculateOverride, twoWithAllowCalculatedOverride, withCheckboxes, withReorder };

package/lib/cjs/components/datagrid/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.withCheckboxes = exports.twoWithAllowCalculatedOverride = exports.withAllowCalculateOverride = exports.modalWithRequiredFields = exports.withRowGroupsAndDefValue = exports.withLogic = exports.withDefValue = exports.withConditionalFieldsAndValidations = exports.withCollapsibleRowGroups = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.withReorder = exports.withCheckboxes = exports.twoWithAllowCalculatedOverride = exports.withAllowCalculateOverride = exports.modalWithRequiredFields = exports.withRowGroupsAndDefValue = exports.withLogic = exports.withDefValue = exports.withConditionalFieldsAndValidations = exports.withCollapsibleRowGroups = 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"));
@@ -40,3 +40,5 @@ const two_comp_with_allow_calculate_override_1 = __importDefault(require("./two-
 exports.twoWithAllowCalculatedOverride = two_comp_with_allow_calculate_override_1.default;
 const comp_with_checkboxes_1 = __importDefault(require("./comp-with-checkboxes"));
 exports.withCheckboxes = comp_with_checkboxes_1.default;
+const comp_with_reorder_1 = __importDefault(require("./comp-with-reorder"));
+exports.withReorder = comp_with_reorder_1.default;

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

@@ -5,5 +5,4 @@ import comp4 from './comp4';
 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 };
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7 };

package/lib/cjs/components/day/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.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"));
@@ -18,5 +18,3 @@ const comp6_1 = __importDefault(require("./comp6"));
 exports.comp6 = comp6_1.default;
 const comp7_1 = __importDefault(require("./comp7"));
 exports.comp7 = comp7_1.default;
-const comp8_1 = __importDefault(require("./comp8"));
-exports.comp8 = comp8_1.default;

package/lib/cjs/components/editgrid/EditGrid.js

@@ -88,7 +88,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
       {% if (!instance.options.readOnly && !instance.disabled) { %}
         <div class="col-sm-2">
           <div class="btn-group pull-right">
-            <button class="btn btn-default btn-light btn-sm editRow"><i class="{{ iconClass('pen-fill') }}"></i></button>
+            <button class="btn btn-default btn-light btn-sm editRow"><i class="{{ iconClass('edit') }}"></i></button>
             {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}
               <button class="btn btn-danger btn-sm removeRow"><i class="{{ iconClass('trash') }}"></i></button>
             {% } %}
@@ -109,7 +109,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
         {% if (!instance.options.readOnly && !instance.disabled) { %}
           <td class="editgrid-table-column">
             <div class="btn-group">
-              <button class="btn btn-default btn-light btn-sm editRow" aria-label="{{ t('Edit row') }}"><i class="{{ iconClass('pen-fill') }}"></i></button>
+              <button class="btn btn-default btn-light btn-sm editRow" aria-label="{{ t('Edit row') }}"><i class="{{ iconClass('edit') }}"></i></button>
               {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}
               <button class="btn btn-danger btn-sm removeRow" aria-label="{{ t('Remove row') }}"><i class="{{ iconClass('trash') }}"></i></button>
               {% } %}