@formio/js 5.0.0-dev.5543.201e658 → 5.0.0-dev.5543.3c780dd

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

@@ -1,6 +1,6 @@
 /*!
- * Signature Pad v4.1.7 | https://github.com/szimek/signature_pad
- * (c) 2023 Szymon Nowak | Released under the MIT license
+ * Signature Pad v4.2.0 | https://github.com/szimek/signature_pad
+ * (c) 2024 Szymon Nowak | Released under the MIT license
  */
 
 /*!

package/lib/cjs/Form.d.ts

@@ -62,6 +62,14 @@ export default class Form extends Element {
             content: any;
         }[];
     };
+    /**
+    * 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: string, form: any): object;
     setForm(formParam: any): any;
     _form: any;
     getSubmission(formio: any, opts: any): any;

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

@@ -694,12 +694,13 @@ class Webform extends NestedDataComponent_1.default {
      * @param {userId} - The user id where we need to restore the draft from.
      */
     restoreDraft(userId) {
-        if (!this.formio) {
+        const formio = this.formio || this.options.formio;
+        if (!formio) {
             this.handleDraftError('restoreDraftInstanceError', null, true);
             return;
         }
         this.savingDraft = true;
-        this.formio.loadSubmissions({
+        formio.loadSubmissions({
             params: {
                 state: 'draft',
                 owner: userId

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

@@ -198,7 +198,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.d.ts

@@ -0,0 +1,123 @@
+declare namespace _default {
+    const type: string;
+    const display: string;
+    const components: ({
+        label: string;
+        tableView: boolean;
+        datePicker: {
+            disableWeekends: boolean;
+            disableWeekdays: boolean;
+            disableFunction?: undefined;
+        };
+        enableMinDateInput: boolean;
+        enableMaxDateInput: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        widget: {
+            type: string;
+            displayInTimezone: string;
+            locale: string;
+            useLocaleSettings: boolean;
+            allowInput: boolean;
+            mode: string;
+            enableTime: boolean;
+            noCalendar: boolean;
+            format: string;
+            hourIncrement: number;
+            minuteIncrement: number;
+            time_24hr: boolean;
+            minDate: null;
+            disableWeekends: boolean;
+            disableWeekdays: boolean;
+            maxDate: null;
+            disableFunction?: undefined;
+        };
+        validate?: undefined;
+        disableOnInvalid?: undefined;
+    } | {
+        label: string;
+        tableView: boolean;
+        enableMinDateInput: boolean;
+        datePicker: {
+            disableWeekends: boolean;
+            disableWeekdays: boolean;
+            disableFunction?: undefined;
+        };
+        enableMaxDateInput: boolean;
+        validate: {
+            custom: string;
+        };
+        key: string;
+        type: string;
+        input: boolean;
+        widget: {
+            type: string;
+            displayInTimezone: string;
+            locale: string;
+            useLocaleSettings: boolean;
+            allowInput: boolean;
+            mode: string;
+            enableTime: boolean;
+            noCalendar: boolean;
+            format: string;
+            hourIncrement: number;
+            minuteIncrement: number;
+            time_24hr: boolean;
+            minDate: null;
+            disableWeekends: boolean;
+            disableWeekdays: boolean;
+            maxDate: null;
+            disableFunction?: undefined;
+        };
+        disableOnInvalid?: undefined;
+    } | {
+        label: string;
+        tableView: boolean;
+        datePicker: {
+            disableFunction: string;
+            disableWeekends: boolean;
+            disableWeekdays: boolean;
+        };
+        enableMinDateInput: boolean;
+        enableMaxDateInput: boolean;
+        key: string;
+        customConditional: string;
+        type: string;
+        input: boolean;
+        widget: {
+            type: string;
+            displayInTimezone: string;
+            locale: string;
+            useLocaleSettings: boolean;
+            allowInput: boolean;
+            mode: string;
+            enableTime: boolean;
+            noCalendar: boolean;
+            format: string;
+            hourIncrement: number;
+            minuteIncrement: number;
+            time_24hr: boolean;
+            minDate: null;
+            disableWeekends: boolean;
+            disableWeekdays: boolean;
+            disableFunction: string;
+            maxDate: null;
+        };
+        validate?: undefined;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        datePicker?: undefined;
+        enableMinDateInput?: undefined;
+        enableMaxDateInput?: undefined;
+        widget?: undefined;
+        validate?: undefined;
+    })[];
+}
+export default _default;

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.d.ts

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

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

@@ -142,6 +142,7 @@ class FormComponent extends Component_1.default {
             return this.subForm.getComponent(path, fn, originalPathStr);
         }
     }
+    /* eslint-disable max-statements */
     getSubOptions(options = {}) {
         options.parentPath = `${this.path}.data.`;
         options.events = this.createEmitter();
@@ -195,8 +196,16 @@ class FormComponent extends Component_1.default {
         if (this.options.preview) {
             options.preview = this.options.preview;
         }
+        if (this.options.saveDraft) {
+            options.saveDraft = this.options.saveDraft;
+            options.formio = new Formio_1.Formio(this.formSrc);
+        }
+        if (this.options.saveDraftThrottle) {
+            options.saveDraftThrottle = this.options.saveDraftThrottle;
+        }
         return options;
     }
+    /* eslint-enable max-statements */
     render() {
         if (this.builderMode) {
             return super.render(this.component.label || 'Nested form');
@@ -416,7 +425,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();
         }
@@ -430,7 +439,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) {
@@ -603,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
@@ -610,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.d.ts

@@ -25,6 +25,24 @@ export default class RadioComponent extends ListComponent {
         isPrototypeOf(v: Object): boolean;
         propertyIsEnumerable(v: PropertyKey): boolean;
     };
+    static get serverConditionSettings(): {
+        valueComponent(classComp: any): {
+            type: string;
+            dataSrc: string;
+            valueProperty: string;
+            dataType: any;
+            data: {
+                custom: string;
+            };
+        };
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+    };
     static savedValueTypes(schema: any): any[];
     constructor(component: any, options: any, data: any);
     previousValue: any;

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.d.ts

@@ -62,6 +62,14 @@ export default class Form extends Element {
             content: any;
         }[];
     };
+    /**
+    * 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: string, form: any): object;
     setForm(formParam: any): any;
     _form: any;
     getSubmission(formio: any, opts: any): any;

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

@@ -694,12 +694,13 @@ export default class Webform extends NestedDataComponent {
      * @param {userId} - The user id where we need to restore the draft from.
      */
     restoreDraft(userId) {
-        if (!this.formio) {
+        const formio = this.formio || this.options.formio;
+        if (!formio) {
             this.handleDraftError('restoreDraftInstanceError', null, true);
             return;
         }
         this.savingDraft = true;
-        this.formio.loadSubmissions({
+        formio.loadSubmissions({
             params: {
                 state: 'draft',
                 owner: userId