@formio/js 5.1.0-dev.6048.569bfc1 → 5.1.0-dev.6049.6110ca0

package/lib/cjs/components/datetime/editForm/DateTime.edit.validation.d.ts

@@ -6,36 +6,87 @@ declare const _default: ({
     persistent: boolean;
     weight: number;
     tooltip: string;
+    applyMaskOn?: undefined;
+    logic?: undefined;
     skipMerge?: undefined;
-    customConditional?: undefined;
+    tableView?: undefined;
+    validateWhenHidden?: undefined;
     enableTime?: undefined;
 } | {
+    label: string;
+    tooltip: string;
+    applyMaskOn: string;
+    key: string;
+    logic: ({
+        name: string;
+        trigger: {
+            type: string;
+            javascript: string;
+            event?: undefined;
+        };
+        actions: {
+            name: string;
+            type: string;
+            schemaDefinition: string;
+        }[];
+    } | {
+        name: string;
+        trigger: {
+            type: string;
+            event: string;
+            javascript?: undefined;
+        };
+        actions: {
+            name: string;
+            type: string;
+            customAction: string;
+        }[];
+    })[];
     type: string;
     input: boolean;
-    key: string;
-    label: string;
     skipMerge: boolean;
     weight: number;
-    tooltip: string;
-    customConditional({ data, component }: {
-        data: any;
-        component: any;
-    }): boolean;
     persistent?: undefined;
+    tableView?: undefined;
+    validateWhenHidden?: undefined;
     enableTime?: undefined;
 } | {
+    label: string;
+    tooltip: string;
+    applyMaskOn: string;
+    tableView: boolean;
+    validateWhenHidden: boolean;
+    key: string;
+    logic: ({
+        name: string;
+        trigger: {
+            type: string;
+            javascript: string;
+            event?: undefined;
+        };
+        actions: {
+            name: string;
+            type: string;
+            schemaDefinition: string;
+        }[];
+    } | {
+        name: string;
+        trigger: {
+            type: string;
+            event: string;
+            javascript?: undefined;
+        };
+        actions: {
+            name: string;
+            type: string;
+            customAction: string;
+        }[];
+    })[];
     type: string;
     input: boolean;
     enableTime: boolean;
-    key: string;
     skipMerge: boolean;
-    label: string;
     weight: number;
-    tooltip: string;
-    customConditional({ data, component }: {
-        data: any;
-        component: any;
-    }): any;
     persistent?: undefined;
 })[];
 export default _default;

package/lib/cjs/components/datetime/editForm/DateTime.edit.validation.js

@@ -11,35 +11,44 @@ exports.default = [
         tooltip: 'Enables to use input for moment functions instead of calendar.'
     },
     {
-        type: 'datetime',
-        input: true,
+        label: 'Minimum Date',
+        tooltip: "The minimum date that can be picked. You can also use Moment.js functions. For example: moment().subtract(10, 'days')",
+        applyMaskOn: 'change',
         key: 'datePicker.minDate',
-        label: 'Use calendar to set minDate',
-        skipMerge: true,
-        weight: 10,
-        tooltip: 'Enables to use calendar to set date.',
-        customConditional({ data, component }) {
-            if (component.datePicker && component.datePicker.minDate && component.datePicker.minDate.indexOf('moment') !== -1) {
-                return false;
-            }
-            return !data.enableMinDateInput;
-        },
-    },
-    {
+        logic: [
+            {
+                name: 'check input mode',
+                trigger: {
+                    type: 'javascript',
+                    javascript: "if (component.datePicker && component.datePicker.minDate && component.datePicker.minDate.indexOf('moment') !== -1) {\r\n  result = false;\r\n}\r\nelse {\r\n  result = !data.enableMinDateInput;\r\n}",
+                },
+                actions: [
+                    {
+                        name: 'change component',
+                        type: 'mergeComponentSchema',
+                        schemaDefinition: "schema = {\n  type: 'datetime',\n  label: 'Use calendar to set minDate',\n  enableDate: true,\n  enableTime: true,\n  tooltip: 'Enables to use calendar to set date.',\n  widget: {\n    type: 'calendar',\n    displayInTimezone: 'viewer',\n    locale: 'en',\n    useLocaleSettings: false,\n    allowInput: true,\n    mode: 'single',\n    enableTime: true,\n    noCalendar: false,\n    format: 'yyyy-MM-dd hh:mm a',\n    hourIncrement: 1,\n    minuteIncrement: 1,\n    time_24hr: false,\n    disableWeekends: false,\n    disableWeekdays: false,\n    maxDate: null,\n  },\n};",
+                    },
+                ],
+            },
+            {
+                name: 'clear value',
+                trigger: {
+                    type: 'event',
+                    event: 'componentChange',
+                },
+                actions: [
+                    {
+                        name: 'reset value',
+                        type: 'customAction',
+                        customAction: "var isDateInput = instance.component?.type === 'datetime';\nvar enableInput = data.enableMinDateInput;\nvar allowReset = result[0].component && result[0].component.key === 'enableMinDateInput' && !result[0].flags?.fromSubmission;\nif(((enableInput && isDateInput) || (!enableInput && !isDateInput)) && allowReset) {\n  instance.resetValue()\n}\n",
+                    },
+                ],
+            },
+        ],
         type: 'textfield',
         input: true,
-        enableTime: false,
-        key: 'datePicker.minDate',
         skipMerge: true,
-        label: 'Minimum Date',
         weight: 10,
-        tooltip: 'The minimum date that can be picked. You can also use Moment.js functions. For example: \n \n moment().subtract(10, \'days\')',
-        customConditional({ data, component }) {
-            if (component.datePicker && component.datePicker.minDate && component.datePicker.minDate.indexOf('moment') !== -1) {
-                return true;
-            }
-            return data.enableMinDateInput;
-        },
     },
     {
         type: 'checkbox',
@@ -51,34 +60,46 @@ exports.default = [
         tooltip: 'Enables to use input for moment functions instead of calendar.'
     },
     {
-        type: 'datetime',
-        input: true,
+        label: 'Maximum Date',
+        tooltip: "The maximum date that can be picked. You can also use Moment.js functions. For example: moment().add(10, 'days')",
+        applyMaskOn: 'change',
+        tableView: true,
+        validateWhenHidden: false,
         key: 'datePicker.maxDate',
-        skipMerge: true,
-        label: 'Use calendar to set maxDate',
-        weight: 20,
-        tooltip: 'Enables to use calendar to set date.',
-        customConditional({ data, component }) {
-            if (component.datePicker && component.datePicker.maxDate && component.datePicker.maxDate.indexOf('moment') !== -1) {
-                return false;
-            }
-            return !data.enableMaxDateInput;
-        },
-    },
-    {
+        logic: [
+            {
+                name: 'check input mode',
+                trigger: {
+                    type: 'javascript',
+                    javascript: "if (component.datePicker && component.datePicker.maxDate && component.datePicker.maxDate.indexOf('moment') !== -1) {\r\n  result = false;\r\n}\r\nelse {\r\n  result = !data.enableMaxDateInput;\r\n}",
+                },
+                actions: [
+                    {
+                        name: 'change component',
+                        type: 'mergeComponentSchema',
+                        schemaDefinition: "schema = {\n  type: 'datetime',\n  label: 'Use calendar to set maxDate',\n  enableDate: true,\n  enableTime: true,\n  tooltip: 'Enables to use calendar to set date.',\n  widget: {\n    type: 'calendar',\n    displayInTimezone: 'viewer',\n    locale: 'en',\n    useLocaleSettings: false,\n    allowInput: true,\n    mode: 'single',\n    enableTime: true,\n    noCalendar: false,\n    format: 'yyyy-MM-dd hh:mm a',\n    hourIncrement: 1,\n    minuteIncrement: 1,\n    time_24hr: false,\n    disableWeekends: false,\n    disableWeekdays: false,\n    maxDate: null,\n  },\n};",
+                    },
+                ],
+            },
+            {
+                name: 'clear value',
+                trigger: {
+                    type: 'event',
+                    event: 'componentChange',
+                },
+                actions: [
+                    {
+                        name: 'reset value',
+                        type: 'customAction',
+                        customAction: "var isDateInput = instance.component?.type === 'datetime';\nvar enableInput = data.enableMaxDateInput;\nvar allowReset = result[0].component && result[0].component.key === 'enableMaxDateInput' && !result[0].flags?.fromSubmission;\nif(((enableInput && isDateInput) || (!enableInput && !isDateInput)) && allowReset) {\n  instance.resetValue()\n}\n",
+                    },
+                ],
+            },
+        ],
         type: 'textfield',
         input: true,
         enableTime: false,
-        key: 'datePicker.maxDate',
         skipMerge: true,
-        label: 'Maximum Date',
-        tooltip: 'The maximum date that can be picked. You can also use Moment.js functions. For example: \n \n moment().add(10, \'days\')',
         weight: 20,
-        customConditional({ data, component }) {
-            if (component.datePicker && component.datePicker.maxDate && component.datePicker.maxDate.indexOf('moment') !== -1) {
-                return true;
-            }
-            return data.enableMaxDateInput;
-        },
     }
 ];

package/lib/cjs/components/day/Day.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const moment_1 = __importDefault(require("moment"));
 const Field_1 = __importDefault(require("../_classes/field/Field"));
-const utils_1 = require("../../utils/utils");
+const utils_1 = require("../../utils");
 const core_1 = require("@formio/core");
 class DayComponent extends Field_1.default {
     static schema(...extend) {
@@ -53,7 +53,7 @@ class DayComponent extends Field_1.default {
         return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.string];
     }
     constructor(component, options, data) {
-        if (!options.inFormBuilder && !options.building) {
+        if (options && !options.inFormBuilder && !options.building) {
             if (component.maxDate && component.maxDate.indexOf('moment(') === -1) {
                 component.maxDate = (0, moment_1.default)(component.maxDate, 'YYYY-MM-DD').toISOString();
             }

package/lib/cjs/components/day/editForm/Day.edit.display.js

@@ -5,6 +5,14 @@ exports.default = [
         key: 'labelPosition',
         ignore: true
     },
+    {
+        key: 'labelWidth',
+        ignore: true
+    },
+    {
+        key: 'labelMargin',
+        ignore: true
+    },
     {
         weight: 15,
         type: 'checkbox',

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

@@ -9,7 +9,7 @@ const components_1 = require("@formio/bootstrap/components");
 const NestedArrayComponent_1 = __importDefault(require("../_classes/nestedarray/NestedArrayComponent"));
 const Component_1 = __importDefault(require("../_classes/component/Component"));
 const Alert_1 = __importDefault(require("../alert/Alert"));
-const utils_1 = require("../../utils/utils");
+const utils_1 = require("../../utils");
 const EditRowState = {
     New: 'new',
     Editing: 'editing',
@@ -1107,7 +1107,9 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             errors.push(...this._errors);
             return false;
         }
-        const message = this.invalid || this.invalidMessage(data, dirty, false, row);
+        // TODO: this is the only place invalidMessage gets called, and it's not clear why it's needed - we already validate the editGrid
+        // component above with super.checkComponentValidity
+        const message = this.invalid || this.invalidMessage(data, dirty, false, row, options);
         if (allRowErrors.length && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submitted) && !message) {
             this._errors = this.setCustomValidity(message, dirty);
             errors.push(...this._errors);

package/lib/cjs/components/editgrid/editForm/EditGrid.edit.display.js

@@ -35,7 +35,7 @@ exports.default = [
         weight: 1002,
         input: false,
         customConditional() {
-            return !Evaluator_1.Evaluator.noeval;
+            return !Evaluator_1.Evaluator.noeval || !Evaluator_1.Evaluator.protectedEval;
         },
     },
     {

package/lib/cjs/components/email/editForm/Email.edit.display.js

@@ -9,6 +9,18 @@ exports.default = [
         key: 'allowMultipleMasks',
         ignore: true,
     },
+    {
+        key: 'inputMasks',
+        ignore: true
+    },
+    {
+        key: 'widget.type',
+        ignore: true
+    },
+    {
+        key: 'widget',
+        ignore: true
+    },
     {
         key: 'showWordCount',
         ignore: true

package/lib/cjs/components/fieldset/editForm/Fieldset.edit.display.js

@@ -5,6 +5,14 @@ exports.default = [
         key: 'labelPosition',
         ignore: true
     },
+    {
+        key: 'labelWidth',
+        ignore: true
+    },
+    {
+        key: 'labelMargin',
+        ignore: true
+    },
     {
         key: 'placeholder',
         ignore: true

package/lib/cjs/components/file/File.js

@@ -13,7 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const Field_1 = __importDefault(require("../_classes/field/Field"));
-const utils_1 = require("../../utils/utils");
+const utils_1 = require("../../utils");
 const downloadjs_1 = __importDefault(require("downloadjs"));
 const lodash_1 = __importDefault(require("lodash"));
 const fileProcessor_1 = __importDefault(require("../../providers/processor/fileProcessor"));
@@ -907,7 +907,9 @@ class FileComponent extends Field_1.default {
         return __awaiter(this, void 0, void 0, function* () {
             return yield this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, 
             // Progress callback
-            this.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => { }, 
+            this.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => {
+                this.emit('fileUploadingStart');
+            }, 
             // Abort upload callback
             (abort) => this.abortUploads.push({
                 id: fileToSync.id,
@@ -934,6 +936,7 @@ class FileComponent extends Field_1.default {
                     fileToSync.message = this.t('succefullyUploaded');
                     fileInfo.originalName = fileToSync.originalName;
                     fileInfo.hash = fileToSync.hash;
+                    this.emit('fileUploadingEnd');
                 }
                 catch (response) {
                     fileToSync.status = 'error';
@@ -943,6 +946,7 @@ class FileComponent extends Field_1.default {
                         : response.type === 'abort'
                             ? this.t('Request was aborted')
                             : response.toString();
+                    this.emit('fileUploadingEnd');
                     this.emit('fileUploadError', {
                         fileToSync,
                         response,

package/lib/cjs/components/file/editForm/File.edit.file.d.ts

@@ -16,6 +16,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -45,6 +46,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -91,6 +93,7 @@ declare const _default: ({
     data?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -120,6 +123,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -149,6 +153,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -160,6 +165,7 @@ declare const _default: ({
     tooltip: string;
     rows: number;
     editor: string;
+    as: string;
     input: boolean;
     weight: number;
     placeholder: string;
@@ -207,6 +213,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -227,6 +234,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -247,6 +255,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -276,6 +285,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -305,6 +315,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -332,6 +343,7 @@ declare const _default: ({
     components?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
 } | {
     type: string;
     input: boolean;
@@ -353,6 +365,7 @@ declare const _default: ({
     tableView?: undefined;
     rows?: undefined;
     editor?: undefined;
+    as?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;

package/lib/cjs/components/file/editForm/File.edit.file.js

@@ -120,6 +120,7 @@ exports.default = [
         tooltip: 'Pass your custom xhr options(optional)',
         rows: 5,
         editor: 'ace',
+        as: 'json',
         input: true,
         weight: 15,
         placeholder: `{

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

@@ -98,7 +98,6 @@ export default class FormComponent extends Component {
      * @returns {void}
      */
     onSetSubFormValue(submission: object | null | undefined, flags: object | null | undefined): void;
-    areAllComponentsEmpty(data: any): boolean;
     updateSubFormVisibility(): void;
     /**
      * Determines if this form is a Nested Wizard

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

@@ -8,7 +8,7 @@ const lodash_1 = __importDefault(require("lodash"));
 const Component_1 = __importDefault(require("../_classes/component/Component"));
 const ComponentModal_1 = __importDefault(require("../_classes/componentModal/ComponentModal"));
 const eventemitter3_1 = __importDefault(require("eventemitter3"));
-const utils_1 = require("../../utils/utils");
+const utils_1 = require("../../utils");
 const Formio_1 = require("../../Formio");
 const Form_1 = __importDefault(require("../../Form"));
 class FormComponent extends Component_1.default {
@@ -101,6 +101,9 @@ class FormComponent extends Component_1.default {
         }
         return this.createSubForm();
     }
+    shouldConditionallyClearOnPristine() {
+        return !this.hasSetValue && super.shouldConditionallyClearOnPristine();
+    }
     get dataReady() {
         var _a;
         return ((_a = this.subForm) === null || _a === void 0 ? void 0 : _a.dataReady) || this.subFormReady || Promise.resolve();
@@ -115,6 +118,10 @@ class FormComponent extends Component_1.default {
     get emptyValue() {
         return { data: {} };
     }
+    // In order for the subform values to set properly, we must always say that nested forms have a default value.
+    get hasDefaultValue() {
+        return true;
+    }
     get ready() {
         return this.subFormReady || Promise.resolve();
     }
@@ -271,6 +278,9 @@ class FormComponent extends Component_1.default {
             if (this.isSubFormLazyLoad() && !this.hasLoadedForm && !this.subFormLoading) {
                 this.createSubForm(true);
             }
+            if (!this.subFormReady) {
+                return Promise.resolve();
+            }
             return this.subFormReady.then(() => {
                 this.empty(element);
                 if (this.options.builder) {
@@ -286,11 +296,13 @@ class FormComponent extends Component_1.default {
                     }
                     this.subForm.attach(element);
                     this.valueChanged = this.hasSetValue;
-                    if (!this.valueChanged && this.dataValue.state !== 'submitted') {
-                        this.setDefaultValue();
-                    }
-                    else {
-                        this.restoreValue();
+                    if (!this.shouldConditionallyClear()) {
+                        if (!this.valueChanged && this.dataValue.state !== 'submitted') {
+                            this.setDefaultValue();
+                        }
+                        else {
+                            this.restoreValue();
+                        }
                     }
                 }
                 if (!this.builderMode && this.component.modalEdit) {
@@ -399,15 +411,17 @@ class FormComponent extends Component_1.default {
             }
             // Render the form.
             return (new Form_1.default(form, this.getSubOptions())).ready.then((instance) => {
+                var _a, _b;
                 this.subForm = instance;
                 this.subForm.currentForm = this;
                 this.subForm.parentVisible = this.visible;
                 const componentsMap = this.componentsMap;
                 const formComponentsMap = this.subForm.componentsMap;
                 lodash_1.default.assign(componentsMap, formComponentsMap);
-                this.component.components = this.subForm.components.map((comp) => comp.component);
+                this.component.components = (_a = this.subForm._form) === null || _a === void 0 ? void 0 : _a.components;
+                this.component.display = (_b = this.subForm._form) === null || _b === void 0 ? void 0 : _b.display;
                 this.subForm.on('change', () => {
-                    if (this.subForm) {
+                    if (this.subForm && !this.shouldConditionallyClear()) {
                         this.dataValue = this.subForm.getValue();
                         this.triggerChange({
                             noEmit: true
@@ -520,7 +534,7 @@ class FormComponent extends Component_1.default {
      * @returns {*|boolean} - TRUE if the subform should be submitted, FALSE if it should not.
      */
     get shouldSubmit() {
-        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && (!this.conditionallyHidden() || !this.component.clearOnHide);
+        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.shouldConditionallyClear();
     }
     /**
      * Returns the data for the subform.
@@ -675,20 +689,7 @@ class FormComponent extends Component_1.default {
         }
     }
     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));
-    }
-    areAllComponentsEmpty(data) {
-        let res = true;
-        if (this.subForm) {
-            this.subForm.everyComponent((comp) => {
-                const componentValue = lodash_1.default.get(data, comp.key);
-                res &= comp.isEmpty(componentValue);
-            });
-        }
-        else {
-            res = false;
-        }
-        return res;
+        return value === null || lodash_1.default.isEqual(value, this.emptyValue);
     }
     getValue() {
         if (this.subForm) {
@@ -703,6 +704,13 @@ class FormComponent extends Component_1.default {
         }
         return errors;
     }
+    conditionallyHidden() {
+        const conditionallyHidden = super.conditionallyHidden();
+        if (this.subForm) {
+            this.subForm._conditionallyHidden = conditionallyHidden;
+        }
+        return conditionallyHidden;
+    }
     updateSubFormVisibility() {
         if (this.subForm) {
             this.subForm.parentVisible = this.visible;

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

@@ -32,10 +32,11 @@ exports.default = [
         tooltip: 'if it is checked, the subform is loaded after navigation to the page with this component within the wizard.',
         input: true,
         customConditional({ instance, data }) {
-            var _a, _b, _c, _d;
-            const formInfo = (_b = (_a = instance.root) === null || _a === void 0 ? void 0 : _a.getComponent('form')) === null || _b === void 0 ? void 0 : _b.defaultDownloadedResources.find(res => res._id === data.form);
+            var _a, _b, _c;
+            const formComp = (_a = instance.root) === null || _a === void 0 ? void 0 : _a.getComponent('form');
+            const formInfo = formComp === null || formComp === void 0 ? void 0 : formComp.defaultDownloadedResources.find(res => res._id === data.form);
             const displayMode = 'wizard';
-            return ((_d = (_c = instance.options) === null || _c === void 0 ? void 0 : _c.editForm) === null || _d === void 0 ? void 0 : _d.display) === displayMode && formInfo && formInfo.display !== displayMode;
+            return ((_c = (_b = instance.options) === null || _b === void 0 ? void 0 : _b.editForm) === null || _c === void 0 ? void 0 : _c.display) === displayMode && ((data.form && !formInfo) || (formInfo && formInfo.display !== displayMode));
         },
     },
     {

package/lib/cjs/components/hidden/editForm/Hidden.edit.display.js

@@ -5,6 +5,14 @@ exports.default = [
         key: 'labelPosition',
         ignore: true
     },
+    {
+        key: 'labelWidth',
+        ignore: true
+    },
+    {
+        key: 'labelMargin',
+        ignore: true
+    },
     {
         key: 'placeholder',
         ignore: true

package/lib/cjs/components/html/editForm/HTML.edit.display.js

@@ -5,6 +5,14 @@ exports.default = [
         key: 'labelPosition',
         ignore: true
     },
+    {
+        key: 'labelWidth',
+        ignore: true
+    },
+    {
+        key: 'labelMargin',
+        ignore: true
+    },
     {
         key: 'placeholder',
         ignore: true