@formio/js 5.0.0-dev.5664.1af299f → 5.0.0-dev.5664.50b8944

package/lib/cjs/Formio.js

@@ -125,3 +125,4 @@ if (typeof global !== 'undefined') {
 if (typeof window !== 'undefined') {
     sdk_1.Formio.addToGlobal(window);
 }
+Embed_1.Formio._formioReady(sdk_1.Formio);

package/lib/cjs/Webform.d.ts

@@ -330,6 +330,13 @@ declare class Webform extends NestedDataComponent {
      * @returns {object} - The submission object.
      */
     get submission(): object;
+    /**
+     * Sets the submission value
+     * @param {object|null|undefined} submission - The submission to set.
+     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
+     * @returns {void}
+     */
+    onSetSubmission(submission: object | null | undefined, flags?: object | null | undefined): void;
     /**
      * Sets a submission and returns the promise when it is ready.
      * @param {any} submission - The submission to set.

package/lib/cjs/Webform.js

@@ -13,6 +13,7 @@ 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");
+const dragula_1 = __importDefault(require("dragula"));
 // Initialize the available forms.
 Formio_1.Formio.forms = {};
 // Allow people to register components.
@@ -309,6 +310,7 @@ 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() {
@@ -698,6 +700,18 @@ class Webform extends NestedDataComponent_1.default {
     set submission(submission) {
         this.setSubmission(submission);
     }
+    /**
+     * Sets the submission value
+     * @param {object|null|undefined} submission - The submission to set.
+     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
+     * @returns {void}
+     */
+    onSetSubmission(submission, flags = {}) {
+        this.submissionSet = true;
+        this.triggerChange(flags);
+        this.emit('beforeSetSubmission', submission);
+        this.setValue(submission, flags);
+    }
     /**
      * Sets a submission and returns the promise when it is ready.
      * @param {any} submission - The submission to set.
@@ -711,10 +725,7 @@ class Webform extends NestedDataComponent_1.default {
             if (resolveFlags) {
                 flags = Object.assign(Object.assign({}, flags), resolveFlags);
             }
-            this.submissionSet = true;
-            this.triggerChange(flags);
-            this.emit("beforeSetSubmission", submission);
-            this.setValue(submission, flags);
+            this.onSetSubmission(submission, flags);
             return this.submissionReadyResolve(submission);
         }, (err) => this.submissionReadyReject(err))
             .catch((err) => this.submissionReadyReject(err)));
@@ -873,7 +884,9 @@ class Webform extends NestedDataComponent_1.default {
         this.addComponents();
         this.on("submitButton", (options) => {
             this.submit(false, options).catch((e) => {
-                options.instance.loading = false;
+                if (options === null || options === void 0 ? void 0 : options.instance) {
+                    options.instance.loading = false;
+                }
                 return e !== false && e !== undefined && console.log(e);
             });
         }, true);

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

@@ -343,6 +343,12 @@ declare class Component extends Element {
      * @param {string} template - The template to use for the modal dialog.
      */
     setOpenModalElement(template?: string): void;
+    /**
+     * Renders a modal preview template and returns the markup as a string
+     * @param {object|null|undefined} ctx - The rendering context
+     * @returns {string} - The modal preview markup
+     */
+    renderModalPreview(ctx: object | null | undefined): string;
     /**
      * Returns the modal preview template.
      * @returns {string} - The modal preview template.
@@ -362,6 +368,13 @@ declare class Component extends Element {
      * @returns {string} - The rendered HTML string of a component.
      */
     render(children?: string, topLevel?: boolean): string;
+    /**
+     * Creates the tooltip instance using tippy.js and returns it
+     * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip
+     * @param {object|null|undefined} settings - tippy.js options
+     * @returns {import('tippy.js').Tippy} - tippy.js instance
+     */
+    createTooltip(tooltipEl: HTMLElement, settings?: object | null | undefined): import('tippy.js').Tippy;
     /**
      * Attaches all the tooltips provided the refs object.
      * @param {object} toolTipsRefs - The refs for the tooltips within your template.

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

@@ -1046,6 +1046,14 @@ class Component extends Element_1.default {
     setOpenModalElement(template = null) {
         this.componentModal.setOpenModalElement(template || this.getModalPreviewTemplate());
     }
+    /**
+     * Renders a modal preview template and returns the markup as a string
+     * @param {object|null|undefined} ctx - The rendering context
+     * @returns {string} - The modal preview markup
+     */
+    renderModalPreview(ctx) {
+        return this.renderTemplate('modalPreview', ctx || {});
+    }
     /**
      * Returns the modal preview template.
      * @returns {string} - The modal preview template.
@@ -1057,7 +1065,7 @@ class Component extends Element_1.default {
         if (this.hasInput && ((_a = this.component.validate) === null || _a === void 0 ? void 0 : _a.required) && !this.isPDFReadOnlyMode) {
             modalLabel = { className: 'field-required' };
         }
-        return this.renderTemplate('modalPreview', {
+        return this.renderModalPreview({
             previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('Click to set value'),
             messages: '',
             labelInfo: modalLabel,
@@ -1106,6 +1114,19 @@ class Component extends Element_1.default {
             }, topLevel);
         }
     }
+    /**
+     * Creates the tooltip instance using tippy.js and returns it
+     * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip
+     * @param {object|null|undefined} settings - tippy.js options
+     * @returns {import('tippy.js').Tippy} - tippy.js instance
+     */
+    createTooltip(tooltipEl, settings = {}) {
+        const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');
+        const tooltipDataTitle = tooltipEl.getAttribute('data-title');
+        const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)
+            .replace(/(?:\r\n|\r|\n)/g, '<br />');
+        return (0, tippy_js_1.default)(tooltipEl, Object.assign(Object.assign({ allowHTML: true, trigger: 'mouseenter click focus', placement: 'right', zIndex: 10000, interactive: true }, settings), { content: this.t(this.sanitize(tooltipText), { _userInput: true }) }));
+    }
     /**
      * Attaches all the tooltips provided the refs object.
      * @param {object} toolTipsRefs - The refs for the tooltips within your template.
@@ -1114,18 +1135,7 @@ class Component extends Element_1.default {
     attachTooltips(toolTipsRefs) {
         toolTipsRefs === null || toolTipsRefs === void 0 ? void 0 : toolTipsRefs.forEach((tooltip, index) => {
             if (tooltip) {
-                const tooltipAttribute = tooltip.getAttribute('data-tooltip');
-                const tooltipDataTitle = tooltip.getAttribute('data-title');
-                const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)
-                    .replace(/(?:\r\n|\r|\n)/g, '<br />');
-                this.tooltips[index] = (0, tippy_js_1.default)(tooltip, {
-                    allowHTML: true,
-                    trigger: 'mouseenter click focus',
-                    placement: 'right',
-                    zIndex: 10000,
-                    interactive: true,
-                    content: this.t(this.sanitize(tooltipText), { _userInput: true }),
-                });
+                this.tooltips[index] = this.createTooltip(tooltip);
             }
         });
     }
@@ -3378,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/_classes/input/Input.js

@@ -234,11 +234,33 @@ class Input extends Multivalue_1.default {
         this.addFocusBlurEvents(element);
         if (this.options.submitOnEnter) {
             this.addEventListener(element, 'keypress', (event) => {
+                var _a;
                 const key = event.keyCode || event.which;
                 if (key === 13) {
                     event.preventDefault();
                     event.stopPropagation();
-                    this.emit('submitButton');
+                    let submitButton = null;
+                    if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.everyComponent) {
+                        this.root.everyComponent((component) => {
+                            if ((component === null || component === void 0 ? void 0 : component.component.type) === 'button' &&
+                                (component === null || component === void 0 ? void 0 : component.component.action) === 'submit') {
+                                submitButton = component;
+                                return false;
+                            }
+                        });
+                    }
+                    const options = {};
+                    if (submitButton) {
+                        options.instance = submitButton;
+                        options.component = submitButton.component;
+                        options.noValidate = this.component.state === 'draft';
+                        options.state = this.component.state || 'submitted';
+                        submitButton.loading = true;
+                        this.emit('submitButton', options);
+                    }
+                    else {
+                        this.emit('submitButton', options);
+                    }
                 }
             });
         }

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

@@ -44,7 +44,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

@@ -237,10 +237,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/datagrid/DataGrid.js

@@ -366,6 +366,9 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         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/comp9.d.ts

@@ -0,0 +1,41 @@
+declare namespace _default {
+    let components: {
+        label: string;
+        reorder: boolean;
+        addAnotherPosition: string;
+        layoutFixed: boolean;
+        enableRowGroups: boolean;
+        initEmpty: boolean;
+        tableView: boolean;
+        defaultValue: {}[];
+        key: string;
+        type: string;
+        input: boolean;
+        components: ({
+            label: string;
+            applyMaskOn: string;
+            tableView: boolean;
+            key: string;
+            type: string;
+            input: boolean;
+            mask?: undefined;
+            delimiter?: undefined;
+            requireDecimal?: undefined;
+            inputFormat?: undefined;
+            truncateMultipleSpaces?: undefined;
+        } | {
+            label: string;
+            applyMaskOn: string;
+            mask: boolean;
+            tableView: boolean;
+            delimiter: boolean;
+            requireDecimal: boolean;
+            inputFormat: string;
+            truncateMultipleSpaces: boolean;
+            key: string;
+            type: string;
+            input: boolean;
+        })[];
+    }[];
+}
+export default _default;

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    "components": [
+        {
+            "label": "Data Grid",
+            "reorder": true,
+            "addAnotherPosition": "bottom",
+            "layoutFixed": false,
+            "enableRowGroups": false,
+            "initEmpty": false,
+            "tableView": false,
+            "defaultValue": [
+                {}
+            ],
+            "key": "dataGrid",
+            "type": "datagrid",
+            "input": true,
+            "components": [
+                {
+                    "label": "Text Field",
+                    "applyMaskOn": "change",
+                    "tableView": true,
+                    "key": "textField",
+                    "type": "textfield",
+                    "input": true
+                },
+                {
+                    "label": "Number",
+                    "applyMaskOn": "change",
+                    "mask": false,
+                    "tableView": false,
+                    "delimiter": false,
+                    "requireDecimal": false,
+                    "inputFormat": "plain",
+                    "truncateMultipleSpaces": false,
+                    "key": "number",
+                    "type": "number",
+                    "input": true
+                }
+            ]
+        }
+    ]
+};

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

@@ -6,6 +6,7 @@ import comp5 from './comp5';
 import comp6 from './comp6';
 import comp7 from './comp7';
 import comp8 from './comp8';
+import comp9 from './comp9';
 import withCollapsibleRowGroups from './comp-with-collapsible-groups';
 import withConditionalFieldsAndValidations from './comp-with-conditional-components-and-validations';
 import withDefValue from './comp-with-def-value';
@@ -16,4 +17,4 @@ import withAllowCalculateOverride from './comp-with-allow-calculate-override';
 import twoWithAllowCalculatedOverride from './two-comp-with-allow-calculate-override';
 import withCheckboxes from './comp-with-checkboxes';
 import withReorder from './comp-with-reorder';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, withCollapsibleRowGroups, withConditionalFieldsAndValidations, withDefValue, withLogic, withRowGroupsAndDefValue, modalWithRequiredFields, withAllowCalculateOverride, twoWithAllowCalculatedOverride, withCheckboxes, withReorder };
+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.withReorder = exports.withCheckboxes = exports.twoWithAllowCalculatedOverride = exports.withAllowCalculateOverride = exports.modalWithRequiredFields = exports.withRowGroupsAndDefValue = exports.withLogic = exports.withDefValue = exports.withConditionalFieldsAndValidations = exports.withCollapsibleRowGroups = 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"));
@@ -20,6 +20,8 @@ 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;
 const comp_with_def_value_1 = __importDefault(require("./comp-with-def-value"));
 exports.withDefValue = comp_with_def_value_1.default;
 const comp_row_groups_with_def_value_1 = __importDefault(require("./comp-row-groups-with-def-value"));

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>
               {% } %}

package/lib/cjs/components/form/Form.d.ts

@@ -90,6 +90,13 @@ export default class FormComponent extends Component {
     isHidden(): boolean;
     setValue(submission: any, flags?: {}): boolean;
     setSubFormValue(submission: any, flags: any): void;
+    /**
+     * Sets the subform value
+     * @param {object|null|undefined} submission - The submission to set.
+     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
+     * @returns {void}
+     */
+    onSetSubFormValue(submission: object | null | undefined, flags: object | null | undefined): void;
     areAllComponentsEmpty(data: any): boolean;
     updateSubFormVisibility(): void;
     /**

package/lib/cjs/components/form/Form.js

@@ -649,9 +649,18 @@ class FormComponent extends Component_1.default {
             });
         }
         else {
-            this.subForm.setValue(submission, flags);
+            this.onSetSubFormValue(submission, flags);
         }
     }
+    /**
+     * Sets the subform value
+     * @param {object|null|undefined} submission - The submission to set.
+     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
+     * @returns {void}
+     */
+    onSetSubFormValue(submission, flags) {
+        this.subForm.setValue(submission, flags);
+    }
     isEmpty(value = this.dataValue) {
         return value === null || lodash_1.default.isEqual(value, this.emptyValue) || (this.areAllComponentsEmpty(value === null || value === void 0 ? void 0 : value.data) && !(value === null || value === void 0 ? void 0 : value._id));
     }

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

@@ -48,7 +48,7 @@ class NumberComponent extends Input_1.default {
         var _a, _b;
         super(...args);
         const separators = (0, utils_1.getNumberSeparators)(this.options.language || navigator.language);
-        this.decimalSeparator = this.options.decimalSeparator = this.options.decimalSeparator
+        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) {