@formio/js 5.0.0-rc.41 → 5.0.0-rc.42

package/dist/formio.utils.min.js.LICENSE.txt

@@ -10,11 +10,11 @@
  * MIT licensed
  */
 
-/*! @license DOMPurify 3.0.8 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.8/LICENSE */
+/*! @license DOMPurify 3.0.11 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.11/LICENSE */
 
-/*! @license DOMPurify 3.0.9 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.9/LICENSE */
+/*! @license DOMPurify 3.0.6 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.6/LICENSE */
 
-/*! formiojs v5.0.0-rc.41 | https://unpkg.com/formiojs@5.0.0-rc.41/LICENSE.txt */
+/*! formiojs v5.0.0-rc.42 | https://unpkg.com/formiojs@5.0.0-rc.42/LICENSE.txt */
 
 /**
  * @license

package/lib/cjs/Form.js

@@ -178,6 +178,36 @@ class Form extends Element_1.default {
             ]
         };
     }
+    /**
+    * Check Subdirectories path and provide correct options
+    *
+    * @param {string} url - The the URL of the form json.
+    * @param {form} object - The form json.
+    * @return {object} The initial options with base and project.
+    */
+    getFormInitOptions(url, form) {
+        const options = {};
+        const index = url.indexOf(form === null || form === void 0 ? void 0 : form.path);
+        // form url doesn't include form path
+        if (index === -1) {
+            return options;
+        }
+        const projectUrl = url.substring(0, index - 1);
+        const urlParts = Formio_1.Formio.getUrlParts(projectUrl);
+        // project url doesn't include subdirectories path
+        if (!urlParts || urlParts.filter(part => !!part).length < 4) {
+            return options;
+        }
+        const baseUrl = `${urlParts[1]}${urlParts[2]}`;
+        // Skip if baseUrl has already been set
+        if (baseUrl !== Formio_1.Formio.baseUrl) {
+            return {
+                base: baseUrl,
+                project: projectUrl,
+            };
+        }
+        return {};
+    }
     setForm(formParam) {
         let result;
         formParam = formParam || this.form;
@@ -202,7 +232,8 @@ class Form extends Element_1.default {
                     }
                     this.loading = false;
                     this.instance = this.instance || this.create(form.display);
-                    this.instance.url = formParam;
+                    const options = this.getFormInitOptions(formParam, form);
+                    this.instance.setUrl(formParam, options);
                     this.instance.nosubmit = false;
                     this._form = this.instance.form = form;
                     if (submission) {

package/lib/cjs/Webform.js

@@ -1005,7 +1005,7 @@ class Webform extends NestedDataComponent_1.default {
         if (!Array.isArray(errors)) {
             errors = [errors];
         }
-        errors = errors.concat(this.customErrors);
+        errors = errors.concat(this.customErrors).filter((err) => !!err);
         if (!errors.length) {
             this.setAlert(false);
             return;

package/lib/cjs/WebformBuilder.js

@@ -123,7 +123,7 @@ class WebformBuilder extends Component_1.default {
         }
         this.options.hooks = this.options.hooks || {};
         this.options.hooks.renderComponent = (html, { component, self }) => {
-            var _a;
+            var _a, _b;
             if (self.type === 'form' && !self.key) {
                 const template = this.hook('renderComponentFormTemplate', html.replace('formio-component-form', ''));
                 // The main webform shouldn't have this class as it adds extra styles.
@@ -136,6 +136,7 @@ class WebformBuilder extends Component_1.default {
                 html,
                 disableBuilderActions: (_a = self === null || self === void 0 ? void 0 : self.component) === null || _a === void 0 ? void 0 : _a.disableBuilderActions,
                 childComponent: component,
+                design: (_b = self === null || self === void 0 ? void 0 : self.options) === null || _b === void 0 ? void 0 : _b.design
             });
         };
         this.options.hooks.renderComponents = (html, { components, self }) => {
@@ -486,6 +487,7 @@ class WebformBuilder extends Component_1.default {
     attach(element) {
         this.on('change', (form) => {
             this.populateRecaptchaSettings(form);
+            this.webform.setAlert(false);
         });
         return super.attach(element).then(() => {
             this.loadRefs(element, {
@@ -819,6 +821,20 @@ class WebformBuilder extends Component_1.default {
                 return;
             }
         }
+        if (draggableComponent.uniqueComponent) {
+            let isCompAlreadyExists = false;
+            (0, formUtils_1.eachComponent)(this.webform.components, (component) => {
+                if (component.key === draggableComponent.schema.key) {
+                    isCompAlreadyExists = true;
+                    return;
+                }
+            }, true);
+            if (isCompAlreadyExists) {
+                this.webform.redraw();
+                this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.title} component to one page.`);
+                return;
+            }
+        }
         if (target !== source) {
             // Ensure the key remains unique in its new container.
             builder_1.default.uniquify(this.findNamespaceRoot(target.formioComponent), info);
@@ -851,7 +867,7 @@ class WebformBuilder extends Component_1.default {
             parent.addChildComponent(info, element, target, source, sibling);
         }
         const componentInDataGrid = parent.type === 'datagrid';
-        if (isNew && !this.options.noNewEdit && !info.noNewEdit) {
+        if (isNew && !this.options.noNewEdit && !info.noNewEdit && !(this.options.design && info.type === 'reviewpage')) {
             this.editComponent(info, target, isNew, null, null, { inDataGrid: componentInDataGrid });
         }
         // Only rebuild the parts needing to be rebuilt.

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

@@ -199,7 +199,7 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         return this.hasAddButton() && ['bottom', 'both'].includes(this.addAnotherPosition);
     }
     get canAddColumn() {
-        return this.builderMode;
+        return this.builderMode && !this.options.design;
     }
     render() {
         const columns = this.getColumns();

package/lib/cjs/components/datetime/fixtures/comp13.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Min Date',
+            tableView: false,
+            datePicker: {
+                disableWeekends: false,
+                disableWeekdays: false
+            },
+            enableMinDateInput: false,
+            enableMaxDateInput: false,
+            key: 'minDate',
+            type: 'datetime',
+            input: true,
+            widget: {
+                type: 'calendar',
+                displayInTimezone: 'viewer',
+                locale: 'en',
+                useLocaleSettings: false,
+                allowInput: true,
+                mode: 'single',
+                enableTime: true,
+                noCalendar: false,
+                format: 'yyyy-MM-dd hh:mm a',
+                hourIncrement: 1,
+                minuteIncrement: 1,
+                // eslint-disable-next-line camelcase
+                time_24hr: false,
+                minDate: null,
+                disableWeekends: false,
+                disableWeekdays: false,
+                maxDate: null
+            }
+        },
+        {
+            label: 'Max Date',
+            tableView: false,
+            enableMinDateInput: false,
+            datePicker: {
+                disableWeekends: false,
+                disableWeekdays: false
+            },
+            enableMaxDateInput: false,
+            validate: {
+                custom: "var minDate = moment(data.minDate);\nvar maxDate = moment(data.maxDate);\nvalid = maxDate.isAfter(minDate)? true : 'Max date must be after min date'"
+            },
+            key: 'maxDate',
+            type: 'datetime',
+            input: true,
+            widget: {
+                type: 'calendar',
+                displayInTimezone: 'viewer',
+                locale: 'en',
+                useLocaleSettings: false,
+                allowInput: true,
+                mode: 'single',
+                enableTime: true,
+                noCalendar: false,
+                format: 'yyyy-MM-dd hh:mm a',
+                hourIncrement: 1,
+                minuteIncrement: 1,
+                // eslint-disable-next-line camelcase
+                time_24hr: false,
+                minDate: null,
+                disableWeekends: false,
+                disableWeekdays: false,
+                maxDate: null
+            }
+        },
+        {
+            label: 'In Between Date',
+            tableView: false,
+            datePicker: {
+                disableFunction: '!moment(date).isBetween(moment(data.minDate), moment(data.maxDate))',
+                disableWeekends: false,
+                disableWeekdays: false
+            },
+            enableMinDateInput: false,
+            enableMaxDateInput: false,
+            key: 'inBetweenDate',
+            customConditional: 'show = !!data.minDate && !!data.maxDate',
+            type: 'datetime',
+            input: true,
+            widget: {
+                type: 'calendar',
+                displayInTimezone: 'viewer',
+                locale: 'en',
+                useLocaleSettings: false,
+                allowInput: true,
+                mode: 'single',
+                enableTime: true,
+                noCalendar: false,
+                format: 'yyyy-MM-dd hh:mm a',
+                hourIncrement: 1,
+                minuteIncrement: 1,
+                // eslint-disable-next-line camelcase
+                time_24hr: false,
+                minDate: null,
+                disableWeekends: false,
+                disableWeekdays: false,
+                disableFunction: '!moment(date).isBetween(moment(data.minDate), moment(data.maxDate))',
+                maxDate: null
+            }
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false
+        }
+    ],
+};

package/lib/cjs/components/datetime/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.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp3 = exports.comp2 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp1 = void 0;
+exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp3 = exports.comp2 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp1 = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const comp2_1 = __importDefault(require("./comp2"));
@@ -26,3 +26,5 @@ const comp11_1 = __importDefault(require("./comp11"));
 exports.comp11 = comp11_1.default;
 const comp12_1 = __importDefault(require("./comp12"));
 exports.comp12 = comp12_1.default;
+const comp13_1 = __importDefault(require("./comp13"));
+exports.comp13 = comp13_1.default;

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

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable max-statements */
 const lodash_1 = __importDefault(require("lodash"));
 const Component_1 = __importDefault(require("../_classes/component/Component"));
 const ComponentModal_1 = __importDefault(require("../_classes/componentModal/ComponentModal"));
@@ -197,6 +198,12 @@ class FormComponent extends Component_1.default {
         if (this.options.inEditGrid) {
             options.inEditGrid = this.options.inEditGrid;
         }
+        if (this.options.saveDraft) {
+            options.saveDraft = this.options.saveDraft;
+        }
+        if (this.options.saveDraftThrottle) {
+            options.saveDraftThrottle = this.options.saveDraftThrottle;
+        }
         return options;
     }
     render() {
@@ -396,6 +403,10 @@ class FormComponent extends Component_1.default {
                 this.subForm.nosubmit = true;
                 this.subForm.root = this.root;
                 this.subForm.localRoot = this.isNestedWizard ? this.localRoot : this.subForm;
+                if (this.parent) {
+                    this.subForm.draftEnabled = this.parent.draftEnabled;
+                    this.subForm.savingDraft = this.parent.savingDraft;
+                }
                 this.restoreValue();
                 this.valueChanged = this.hasSetValue;
                 this.onChange();
@@ -418,7 +429,7 @@ class FormComponent extends Component_1.default {
      * Load the subform.
      */
     loadSubForm(fromAttach) {
-        var _a;
+        var _a, _b, _c;
         if (this.builderMode || this.isHidden() || (this.isSubFormLazyLoad() && !fromAttach)) {
             return Promise.resolve();
         }
@@ -432,7 +443,13 @@ class FormComponent extends Component_1.default {
         }
         else if (this.formSrc) {
             this.subFormLoading = true;
-            return (new Formio_1.Formio(this.formSrc)).loadForm({ params: { live: 1 } })
+            const options = ((_b = this.root.formio) === null || _b === void 0 ? void 0 : _b.base) && ((_c = this.root.formio) === null || _c === void 0 ? void 0 : _c.projectUrl)
+                ? {
+                    base: this.root.formio.base,
+                    project: this.root.formio.projectUrl,
+                }
+                : {};
+            return (new Formio_1.Formio(this.formSrc, options)).loadForm({ params: { live: 1 } })
                 .then((formObj) => {
                 this.formObj = formObj;
                 if (this.options.pdf && this.component.useOriginalRevision) {
@@ -601,6 +618,7 @@ class FormComponent extends Component_1.default {
         return changed;
     }
     setSubFormValue(submission, flags) {
+        var _a, _b;
         const shouldLoadSubmissionById = submission
             && submission._id
             && this.subForm.formio
@@ -608,7 +626,13 @@ class FormComponent extends Component_1.default {
         if (shouldLoadSubmissionById) {
             const formId = submission.form || this.formObj.form || this.component.form;
             const submissionUrl = `${this.subForm.formio.formsUrl}/${formId}/submission/${submission._id}`;
-            this.subForm.setUrl(submissionUrl, this.options);
+            const options = ((_a = this.root.formio) === null || _a === void 0 ? void 0 : _a.base) && ((_b = this.root.formio) === null || _b === void 0 ? void 0 : _b.projectUrl)
+                ? {
+                    base: this.root.formio.base,
+                    project: this.root.formio.projectUrl,
+                }
+                : {};
+            this.subForm.setUrl(submissionUrl, Object.assign(Object.assign({}, this.options), options));
             this.subForm.loadSubmission().catch((err) => {
                 console.error(`Unable to load subform submission ${submission._id}:`, err);
             });

package/lib/cjs/components/radio/Radio.js

@@ -46,6 +46,19 @@ class RadioComponent extends ListComponent_1.default {
                 };
             } });
     }
+    static get serverConditionSettings() {
+        return Object.assign(Object.assign({}, super.serverConditionSettings), { valueComponent(classComp) {
+                return {
+                    type: 'select',
+                    dataSrc: 'custom',
+                    valueProperty: 'value',
+                    dataType: classComp.dataType || '',
+                    data: {
+                        custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`,
+                    },
+                };
+            } });
+    }
     static savedValueTypes(schema) {
         const { boolean, string, number, object, array } = utils_1.componentValueTypes;
         const { dataType } = schema;

package/lib/cjs/widgets/CalendarWidget.js

@@ -419,6 +419,14 @@ class CalendarWidget extends InputWidget_1.default {
                 }
             }
         });
+        // If other fields are used to calculate disabled dates, we need to redraw calendar to refresh disabled dates
+        if (this.settings.disableFunction && this.componentInstance && this.componentInstance.root) {
+            this.componentInstance.root.on('change', (e) => {
+                if (e.changed && this.calendar) {
+                    this.calendar.redraw();
+                }
+            });
+        }
         // Restore the calendar value from the component value.
         this.setValue(this.componentValue);
     }

package/lib/mjs/Form.js

@@ -150,6 +150,36 @@ export default class Form extends Element {
             ]
         };
     }
+    /**
+    * Check Subdirectories path and provide correct options
+    *
+    * @param {string} url - The the URL of the form json.
+    * @param {form} object - The form json.
+    * @return {object} The initial options with base and project.
+    */
+    getFormInitOptions(url, form) {
+        const options = {};
+        const index = url.indexOf(form?.path);
+        // form url doesn't include form path
+        if (index === -1) {
+            return options;
+        }
+        const projectUrl = url.substring(0, index - 1);
+        const urlParts = Formio.getUrlParts(projectUrl);
+        // project url doesn't include subdirectories path
+        if (!urlParts || urlParts.filter(part => !!part).length < 4) {
+            return options;
+        }
+        const baseUrl = `${urlParts[1]}${urlParts[2]}`;
+        // Skip if baseUrl has already been set
+        if (baseUrl !== Formio.baseUrl) {
+            return {
+                base: baseUrl,
+                project: projectUrl,
+            };
+        }
+        return {};
+    }
     setForm(formParam) {
         let result;
         formParam = formParam || this.form;
@@ -174,7 +204,8 @@ export default class Form extends Element {
                     }
                     this.loading = false;
                     this.instance = this.instance || this.create(form.display);
-                    this.instance.url = formParam;
+                    const options = this.getFormInitOptions(formParam, form);
+                    this.instance.setUrl(formParam, options);
                     this.instance.nosubmit = false;
                     this._form = this.instance.form = form;
                     if (submission) {

package/lib/mjs/Webform.js

@@ -1005,7 +1005,7 @@ export default class Webform extends NestedDataComponent {
         if (!Array.isArray(errors)) {
             errors = [errors];
         }
-        errors = errors.concat(this.customErrors);
+        errors = errors.concat(this.customErrors).filter((err) => !!err);
         if (!errors.length) {
             this.setAlert(false);
             return;

package/lib/mjs/WebformBuilder.js

@@ -115,6 +115,7 @@ export default class WebformBuilder extends Component {
                 html,
                 disableBuilderActions: self?.component?.disableBuilderActions,
                 childComponent: component,
+                design: self?.options?.design
             });
         };
         this.options.hooks.renderComponents = (html, { components, self }) => {
@@ -472,6 +473,7 @@ export default class WebformBuilder extends Component {
     attach(element) {
         this.on('change', (form) => {
             this.populateRecaptchaSettings(form);
+            this.webform.setAlert(false);
         });
         return super.attach(element).then(() => {
             this.loadRefs(element, {
@@ -804,6 +806,20 @@ export default class WebformBuilder extends Component {
                 return;
             }
         }
+        if (draggableComponent.uniqueComponent) {
+            let isCompAlreadyExists = false;
+            eachComponent(this.webform.components, (component) => {
+                if (component.key === draggableComponent.schema.key) {
+                    isCompAlreadyExists = true;
+                    return;
+                }
+            }, true);
+            if (isCompAlreadyExists) {
+                this.webform.redraw();
+                this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.title} component to one page.`);
+                return;
+            }
+        }
         if (target !== source) {
             // Ensure the key remains unique in its new container.
             BuilderUtils.uniquify(this.findNamespaceRoot(target.formioComponent), info);
@@ -836,7 +852,7 @@ export default class WebformBuilder extends Component {
             parent.addChildComponent(info, element, target, source, sibling);
         }
         const componentInDataGrid = parent.type === 'datagrid';
-        if (isNew && !this.options.noNewEdit && !info.noNewEdit) {
+        if (isNew && !this.options.noNewEdit && !info.noNewEdit && !(this.options.design && info.type === 'reviewpage')) {
             this.editComponent(info, target, isNew, null, null, { inDataGrid: componentInDataGrid });
         }
         // Only rebuild the parts needing to be rebuilt.

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

@@ -196,7 +196,7 @@ export default class DataGridComponent extends NestedArrayComponent {
         return this.hasAddButton() && ['bottom', 'both'].includes(this.addAnotherPosition);
     }
     get canAddColumn() {
-        return this.builderMode;
+        return this.builderMode && !this.options.design;
     }
     render() {
         const columns = this.getColumns();

package/lib/mjs/components/datetime/fixtures/comp13.js

@@ -0,0 +1,116 @@
+export default {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Min Date',
+            tableView: false,
+            datePicker: {
+                disableWeekends: false,
+                disableWeekdays: false
+            },
+            enableMinDateInput: false,
+            enableMaxDateInput: false,
+            key: 'minDate',
+            type: 'datetime',
+            input: true,
+            widget: {
+                type: 'calendar',
+                displayInTimezone: 'viewer',
+                locale: 'en',
+                useLocaleSettings: false,
+                allowInput: true,
+                mode: 'single',
+                enableTime: true,
+                noCalendar: false,
+                format: 'yyyy-MM-dd hh:mm a',
+                hourIncrement: 1,
+                minuteIncrement: 1,
+                // eslint-disable-next-line camelcase
+                time_24hr: false,
+                minDate: null,
+                disableWeekends: false,
+                disableWeekdays: false,
+                maxDate: null
+            }
+        },
+        {
+            label: 'Max Date',
+            tableView: false,
+            enableMinDateInput: false,
+            datePicker: {
+                disableWeekends: false,
+                disableWeekdays: false
+            },
+            enableMaxDateInput: false,
+            validate: {
+                custom: "var minDate = moment(data.minDate);\nvar maxDate = moment(data.maxDate);\nvalid = maxDate.isAfter(minDate)? true : 'Max date must be after min date'"
+            },
+            key: 'maxDate',
+            type: 'datetime',
+            input: true,
+            widget: {
+                type: 'calendar',
+                displayInTimezone: 'viewer',
+                locale: 'en',
+                useLocaleSettings: false,
+                allowInput: true,
+                mode: 'single',
+                enableTime: true,
+                noCalendar: false,
+                format: 'yyyy-MM-dd hh:mm a',
+                hourIncrement: 1,
+                minuteIncrement: 1,
+                // eslint-disable-next-line camelcase
+                time_24hr: false,
+                minDate: null,
+                disableWeekends: false,
+                disableWeekdays: false,
+                maxDate: null
+            }
+        },
+        {
+            label: 'In Between Date',
+            tableView: false,
+            datePicker: {
+                disableFunction: '!moment(date).isBetween(moment(data.minDate), moment(data.maxDate))',
+                disableWeekends: false,
+                disableWeekdays: false
+            },
+            enableMinDateInput: false,
+            enableMaxDateInput: false,
+            key: 'inBetweenDate',
+            customConditional: 'show = !!data.minDate && !!data.maxDate',
+            type: 'datetime',
+            input: true,
+            widget: {
+                type: 'calendar',
+                displayInTimezone: 'viewer',
+                locale: 'en',
+                useLocaleSettings: false,
+                allowInput: true,
+                mode: 'single',
+                enableTime: true,
+                noCalendar: false,
+                format: 'yyyy-MM-dd hh:mm a',
+                hourIncrement: 1,
+                minuteIncrement: 1,
+                // eslint-disable-next-line camelcase
+                time_24hr: false,
+                minDate: null,
+                disableWeekends: false,
+                disableWeekdays: false,
+                disableFunction: '!moment(date).isBetween(moment(data.minDate), moment(data.maxDate))',
+                maxDate: null
+            }
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false
+        }
+    ],
+};

package/lib/mjs/components/datetime/fixtures/index.js

@@ -9,4 +9,5 @@ import comp9 from './comp9';
 import comp10 from './comp10';
 import comp11 from './comp11';
 import comp12 from './comp12';
-export { comp1, comp10, comp11, comp12, comp2, comp3, comp5, comp6, comp7, comp8, comp9 };
+import comp13 from './comp13';
+export { comp1, comp10, comp11, comp12, comp13, comp2, comp3, comp5, comp6, comp7, comp8, comp9 };