@formio/js 5.0.0-dev.5704.492ccdf → 5.0.0-dev.5704.50db01f

package/lib/cjs/components/time/fixtures/comp4.js

@@ -0,0 +1,171 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    "type": "form",
+    "display": "wizard",
+    "components": [
+        {
+            "title": "Page 1",
+            "breadcrumbClickable": true,
+            "buttonSettings": {
+                "previous": true,
+                "cancel": true,
+                "next": true
+            },
+            "navigateOnEnter": false,
+            "saveOnEnter": false,
+            "scrollToTop": false,
+            "collapsible": false,
+            "key": "page1",
+            "type": "panel",
+            "label": "Page 1",
+            "components": [
+                {
+                    "label": "Time",
+                    "disabled": true,
+                    "alwaysEnabled": false,
+                    "tableView": true,
+                    "defaultValue": "03:03 PM",
+                    "key": "time1",
+                    "type": "time",
+                    "input": true,
+                    "inputMask": "99:99",
+                    "hideOnChildrenHidden": false,
+                    "id": "efw9yyq",
+                    "placeholder": "",
+                    "prefix": "",
+                    "customClass": "",
+                    "suffix": "",
+                    "multiple": false,
+                    "protected": false,
+                    "unique": false,
+                    "persistent": true,
+                    "hidden": false,
+                    "clearOnHide": true,
+                    "refreshOn": "",
+                    "redrawOn": "",
+                    "modalEdit": false,
+                    "dataGridLabel": false,
+                    "labelPosition": "top",
+                    "description": "",
+                    "errorLabel": "",
+                    "tooltip": "",
+                    "hideLabel": false,
+                    "tabindex": "",
+                    "autofocus": false,
+                    "dbIndex": false,
+                    "customDefaultValue": "",
+                    "calculateValue": "",
+                    "calculateServer": false,
+                    "widget": {
+                        "type": "input"
+                    },
+                    "attributes": {},
+                    "validateOn": "change",
+                    "validate": {
+                        "required": false,
+                        "custom": "",
+                        "customPrivate": false,
+                        "strictDateValidation": false,
+                        "multiple": false,
+                        "unique": false,
+                        "minLength": "",
+                        "maxLength": "",
+                        "pattern": ""
+                    },
+                    "conditional": {
+                        "show": null,
+                        "when": null,
+                        "eq": ""
+                    },
+                    "overlay": {
+                        "style": "",
+                        "left": "",
+                        "top": "",
+                        "width": "",
+                        "height": ""
+                    },
+                    "allowCalculateOverride": false,
+                    "encrypted": false,
+                    "showCharCount": false,
+                    "showWordCount": false,
+                    "properties": {},
+                    "allowMultipleMasks": false,
+                    "addons": [],
+                    "mask": false,
+                    "inputType": "time",
+                    "inputFormat": "plain",
+                    "displayMask": "",
+                    "spellcheck": true,
+                    "truncateMultipleSpaces": false,
+                    "format": "HH:mm",
+                    "dataFormat": "HH:mm:ss"
+                }
+            ],
+            "input": false,
+            "tableView": false,
+            "id": "e7vej1d",
+            "placeholder": "",
+            "prefix": "",
+            "customClass": "",
+            "suffix": "",
+            "multiple": false,
+            "defaultValue": null,
+            "protected": false,
+            "unique": false,
+            "persistent": false,
+            "hidden": false,
+            "clearOnHide": false,
+            "refreshOn": "",
+            "redrawOn": "",
+            "modalEdit": false,
+            "dataGridLabel": false,
+            "labelPosition": "top",
+            "description": "",
+            "errorLabel": "",
+            "tooltip": "",
+            "hideLabel": false,
+            "tabindex": "",
+            "disabled": false,
+            "autofocus": false,
+            "dbIndex": false,
+            "customDefaultValue": "",
+            "calculateValue": "",
+            "calculateServer": false,
+            "widget": null,
+            "attributes": {},
+            "validateOn": "change",
+            "validate": {
+                "required": false,
+                "custom": "",
+                "customPrivate": false,
+                "strictDateValidation": false,
+                "multiple": false,
+                "unique": false
+            },
+            "conditional": {
+                "show": null,
+                "when": null,
+                "eq": ""
+            },
+            "overlay": {
+                "style": "",
+                "left": "",
+                "top": "",
+                "width": "",
+                "height": ""
+            },
+            "allowCalculateOverride": false,
+            "encrypted": false,
+            "showCharCount": false,
+            "showWordCount": false,
+            "properties": {},
+            "allowMultipleMasks": false,
+            "addons": [],
+            "tree": false,
+            "lazyLoad": false,
+            "theme": "default",
+            "breadcrumb": "default"
+        }
+    ],
+};

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

@@ -1,6 +1,7 @@
 import comp1 from './comp1';
 import comp2 from './comp2';
 import comp3 from './comp3';
+import comp4 from './comp4';
 import timeForm from './timeForm';
 import timeForm2 from './timeForm2';
-export { comp1, comp2, comp3, timeForm, timeForm2 };
+export { comp1, comp2, comp3, comp4, timeForm, timeForm2 };

package/lib/cjs/components/time/fixtures/index.js

@@ -3,13 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.timeForm2 = exports.timeForm = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.timeForm2 = exports.timeForm = 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"));
 exports.comp2 = comp2_1.default;
 const comp3_1 = __importDefault(require("./comp3"));
 exports.comp3 = comp3_1.default;
+const comp4_1 = __importDefault(require("./comp4"));
+exports.comp4 = comp4_1.default;
 const timeForm_1 = __importDefault(require("./timeForm"));
 exports.timeForm = timeForm_1.default;
 const timeForm2_1 = __importDefault(require("./timeForm2"));

package/lib/cjs/templates/Templates.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const index_1 = __importDefault(require("./index"));
 const experimental_1 = require("@formio/core/experimental");
 experimental_1.Template.addTemplates(index_1.default);
-experimental_1.Template.defaultTemplates = index_1.default.bootstrap;
+experimental_1.Template.defaultTemplates = experimental_1.Template.templates.bootstrap;
 exports.default = experimental_1.Template;

package/lib/cjs/translations/en.d.ts

@@ -75,6 +75,7 @@ declare namespace _default {
     let typeRemaining: string;
     let typeCount: string;
     let requiredDayField: string;
+    let requiredDayEmpty: string;
     let requiredMonthField: string;
     let requiredYearField: string;
 }

package/lib/cjs/translations/en.js

@@ -77,6 +77,7 @@ exports.default = {
     typeRemaining: '{{ remaining }} {{ type }} remaining.',
     typeCount: '{{ count }} {{ type }}',
     requiredDayField: '{{ field }} is required',
+    requiredDayEmpty: '{{ field }} is required',
     requiredMonthField: '{{ field }} is required',
     requiredYearField: '{{ field }} is required'
 };

package/lib/cjs/utils/utils.d.ts

@@ -56,6 +56,14 @@ export function isMongoId(text: string): boolean;
  * @param {*} rowData - The contextual row data for the component.
  */
 export function checkCalculated(component: import('@formio/core').Component, submission: import('@formio/core').Submission, rowData: any): void;
+/**
+ *
+ * @param component
+ * @param condition
+ * @param row
+ * @param data
+ * @param instance
+ */
 export function checkSimpleConditional(component: any, condition: any, row: any, data: any, instance: any): boolean;
 /**
  * Returns a components normalized value.
@@ -523,4 +531,4 @@ import jsonLogic from 'json-logic-js';
 import ConditionOperators from './conditionOperators';
 import { Evaluator } from './Evaluator';
 export const interpolate: typeof Evaluator.interpolate;
-export { jsonLogic, ConditionOperators, Evaluator, _ };
+export { jsonLogic, ConditionOperators, moment, Evaluator, _ };

package/lib/cjs/utils/utils.js

@@ -11,21 +11,9 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -37,6 +25,7 @@ exports._ = lodash_1.default;
 const json_logic_js_1 = __importDefault(require("json-logic-js"));
 exports.jsonLogic = json_logic_js_1.default;
 const moment_timezone_1 = __importDefault(require("moment-timezone/moment-timezone"));
+exports.moment = moment_timezone_1.default;
 const jstimezonedetect_1 = __importDefault(require("jstimezonedetect"));
 const operators_1 = require("./jsonlogic/operators");
 const dompurify_1 = __importDefault(require("dompurify"));
@@ -62,7 +51,6 @@ json_logic_js_1.default.add_operation('relativeMinDate', (relativeMinDate) => {
 json_logic_js_1.default.add_operation('relativeMaxDate', (relativeMaxDate) => {
     return (0, moment_timezone_1.default)().add(relativeMaxDate, 'days').toISOString();
 });
-exports.moment = __importStar(require("moment-timezone/moment-timezone"));
 /**
  * Sets the path to the component and parent schema.
  * @param {import('@formio/core').Component} component - The component to set the path for.
@@ -190,6 +178,11 @@ exports.checkCalculated = checkCalculated;
  * @param {import('../../src/components/_classes/component/Component').Component} instance - The instance of the component.
  * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.
  */
+/**
+ *
+ * @param conditionPaths
+ * @param data
+ */
 function getConditionalPathsRecursive(conditionPaths, data) {
     let currentGlobalIndex = 0;
     const conditionalPathsArray = [];
@@ -228,6 +221,14 @@ function getConditionalPathsRecursive(conditionPaths, data) {
     getConditionalPaths(data);
     return conditionalPathsArray;
 }
+/**
+ *
+ * @param component
+ * @param condition
+ * @param row
+ * @param data
+ * @param instance
+ */
 function checkSimpleConditional(component, condition, row, data, instance) {
     if (condition.when) {
         const value = getComponentActualValue(condition.when, data, row);

package/lib/mjs/CDN.d.ts

@@ -13,6 +13,7 @@ declare class CDN {
         bootswatch: string;
         'bootstrap-icons': string;
         ckeditor: string;
+        dragula: string;
         flatpickr: string;
         'flatpickr-formio': string;
         'font-awesome': string;

package/lib/mjs/CDN.js

@@ -16,6 +16,7 @@ class CDN {
             'bootswatch': '5.3.3',
             'bootstrap-icons': '1.11.1',
             'ckeditor': '19.0.0',
+            'dragula': '3.7.3',
             'flatpickr': '4.6.8',
             'flatpickr-formio': '4.6.13-formio.3',
             'font-awesome': '4.7.0',
@@ -62,8 +63,7 @@ class CDN {
             url += `/${lib}`;
         }
         // Only attach the version if this is the hosted cdn.
-        if (cdnUrl.includes('form.io') &&
-            version && version !== 'latest') {
+        if (cdnUrl.match(/cdn\.(test-)?form.io/) && version && version !== 'latest') {
             url += `/${version}`;
         }
         return url;

package/lib/mjs/Form.d.ts

@@ -398,10 +398,10 @@ export default class Form extends Element {
     getFormInitOptions(url: string, form: import('@formio/core').Form): object;
     /**
      * Sets the form to the JSON schema of a form.
-     * @param {import('@formio/core').Form} formParam - The form JSON to set this form to.
+     * @param {import('@formio/core').Form | string} formParam - The form JSON to set this form to.
      * @returns {Promise<Webform|Wizard|PDF>} - The webform instance that was created.
      */
-    setForm(formParam: import('@formio/core').Form): Promise<Webform | Wizard | PDF>;
+    setForm(formParam: import('@formio/core').Form | string): Promise<Webform | Wizard | PDF>;
     _form: any;
     getSubmission(formio: any, opts: any): any;
     /**

package/lib/mjs/Form.js

@@ -134,13 +134,13 @@ export default class Form extends Element {
         else {
             this.element = null;
         }
+        this.options = formOptions;
+        this.options.events = this.events;
         if (form) {
             this.setForm(form)
                 .then(() => this.readyResolve(this.instance))
                 .catch(this.readyReject);
         }
-        this.options = formOptions;
-        this.options.events = this.events;
         this.display = '';
     }
     createElement(tag, attrs, children) {
@@ -264,7 +264,7 @@ export default class Form extends Element {
     }
     /**
      * Sets the form to the JSON schema of a form.
-     * @param {import('@formio/core').Form} formParam - The form JSON to set this form to.
+     * @param {import('@formio/core').Form | string} formParam - The form JSON to set this form to.
      * @returns {Promise<Webform|Wizard|PDF>} - The webform instance that was created.
      */
     setForm(formParam) {
@@ -291,8 +291,14 @@ export default class Form extends Element {
                     }
                     this.loading = false;
                     this.instance = this.instance || this.create(form.display);
-                    const options = this.getFormInitOptions(formParam, form);
-                    this.instance.setUrl(formParam, options);
+                    // If we're in builder mode, instance.setUrl is not a function, so just manually set the URL.
+                    if (this.instance.setUrl) {
+                        const options = this.getFormInitOptions(formParam, form);
+                        this.instance.setUrl(formParam, options);
+                    }
+                    else {
+                        this.instance.url = formParam;
+                    }
                     this.instance.nosubmit = false;
                     this._form = this.instance.form = form;
                     if (submission) {

package/lib/mjs/PDF.js

@@ -65,7 +65,7 @@ export default class PDF extends Webform {
         super.destroy(all);
     }
     rebuild() {
-        if (this.attached && this.builderMode && this.component.components) {
+        if (this.builderMode && this.component.components) {
             this.destroyComponents();
             this.addComponents();
             return Promise.resolve();

package/lib/mjs/PDFBuilder.js

@@ -429,7 +429,7 @@ export default class PDFBuilder extends WebformBuilder {
             _.merge(schema, info);
         }
         // Set a unique key for this component.
-        BuilderUtils.uniquify([this.webform._form], schema);
+        BuilderUtils.uniquify(this.webform._form?.components || [], schema);
         this.webform._form.components.push(schema);
         schema.overlay = {
             top: layerY ? (layerY - this.itemOffsetY + HEIGHT) : (e.clientY - iframeRect.top - (this.itemOffsetY - HEIGHT) * 2),

package/lib/mjs/Webform.js

@@ -12,7 +12,6 @@ import { eachComponent } from "./utils/formUtils";
 if (typeof window !== 'undefined' && typeof window.global === 'undefined') {
     window.global = window;
 }
-import dragula from "dragula";
 // Initialize the available forms.
 Formio.forms = {};
 // Allow people to register components.
@@ -286,7 +285,6 @@ export default class Webform extends NestedDataComponent {
         // Ensure the root is set to this component.
         this.root = this;
         this.localRoot = this;
-        this.root.dragulaLib = dragula;
     }
     /* eslint-enable max-statements */
     get language() {
@@ -832,7 +830,6 @@ export default class Webform extends NestedDataComponent {
         if (!submission || !submission.data) {
             submission = {
                 data: {},
-                metadata: submission.metadata,
             };
         }
         // Metadata needs to be available before setValue
@@ -1139,7 +1136,7 @@ export default class Webform extends NestedDataComponent {
         });
         const displayedErrors = [];
         if (errors.length) {
-            errors = _.uniqBy(errors, (error) => error.message);
+            errors = _.uniqBy(errors, (error) => [error.message, error.component?.id, error.context?.path].join());
             const createListItem = (message, index) => {
                 const err = errors[index];
                 const messageFromIndex = !_.isUndefined(index) && errors && errors[index];
@@ -1253,10 +1250,14 @@ export default class Webform extends NestedDataComponent {
         }
         this.checkData(value.data, flags);
         const shouldValidate = !flags.noValidate ||
-            flags.fromIFrame ||
+            flags.fromIframe ||
             (flags.fromSubmission && this.rootPristine && this.pristine && flags.changed);
         const errors = shouldValidate
-            ? this.validate(value.data, { ...flags, process: "change" })
+            ? this.validate(value.data, {
+                ...flags,
+                noValidate: false,
+                process: 'change'
+            })
             : [];
         value.isValid = errors.length === 0;
         this.loading = false;

package/lib/mjs/WebformBuilder.js

@@ -187,7 +187,8 @@ export default class WebformBuilder extends Component {
             params: {
                 type: 'resource',
                 limit: 1000000,
-                select: '_id,title,name,components'
+                select: '_id,title,name,components',
+                'tags__ne': 'noBuilderResource'
             }
         };
         if (this.options && this.options.resourceTag) {
@@ -892,7 +893,11 @@ export default class WebformBuilder extends Component {
         if (form && form.properties) {
             this.options.properties = form.properties;
         }
-        this.keyboardActionsEnabled = _.get(this.options, 'keyboardBuilder', false) || this.options.properties?.keyboardBuilder;
+        let keyboardActionsEnabled = _.get(this.options, 'keyboardBuilder', false) || this.options.properties?.keyboardBuilder;
+        if (typeof keyboardActionsEnabled === 'string') {
+            keyboardActionsEnabled = keyboardActionsEnabled === 'true';
+        }
+        this.keyboardActionsEnabled = keyboardActionsEnabled;
         const isShowSubmitButton = !this.options.noDefaultSubmitButton
             && (!form.components.length || !form.components.find(comp => comp.key === 'submit'));
         // Ensure there is at least a submit button.
@@ -1044,7 +1049,10 @@ export default class WebformBuilder extends Component {
                     'calculateValue',
                     'conditional',
                     'customConditional',
-                    'id'
+                    'id',
+                    'fields.day.required',
+                    'fields.month.required',
+                    'fields.year.required',
                 ]));
                 const parentComponent = defaultValueComponent.parent;
                 let tabIndex = -1;
@@ -1231,6 +1239,7 @@ export default class WebformBuilder extends Component {
                     helplinks: this.helplinks,
                 }));
                 this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}="editForm"]`));
+                this.updateComponent(this.editForm.submission.data ?? component);
                 this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);
             });
         });

package/lib/mjs/Wizard.js

@@ -13,7 +13,7 @@ export default class Wizard extends Webform {
      */
     constructor(elementOrOptions = undefined, _options = undefined) {
         let element, options;
-        if (elementOrOptions instanceof HTMLElement || options) {
+        if (elementOrOptions instanceof HTMLElement || _options) {
             element = elementOrOptions;
             options = _options || {};
         }

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

@@ -830,6 +830,7 @@ declare class Component extends Element {
     quill: any;
     get shouldSanitizeValue(): boolean;
     addAce(element: any, settings: any, onChange: any): any;
+    getDragula(): Promise<any>;
     get tree(): any;
     /**
      * The empty value for this component.
@@ -1075,7 +1076,7 @@ declare class Component extends Element {
     elementInfo(): any;
     autofocus(): void;
     scrollIntoView(element?: any): void;
-    focus(index?: number): void;
+    focus(index: any): void;
     /**
      * Get `Formio` instance for working with files
      * @returns {import('@formio/core').Formio} - The Formio instance file service.

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

@@ -2351,6 +2351,13 @@ export default class Component extends Element {
             return editor;
         });
     }
+    async getDragula() {
+        return new Promise((resolve) => {
+            return Formio.requireLibrary('dragula', 'dragula', `${Formio.cdn.dragula}/dragula.js`, true, (ready) => {
+                return ready.then(resolve);
+            });
+        });
+    }
     get tree() {
         return this.component.tree || false;
     }
@@ -2981,7 +2988,7 @@ export default class Component extends Element {
                         this.parent.childErrors.push(...errors);
                     }
                     else {
-                        _.remove(this.parent.childErrors, (err) => err.component.key === this.component.key);
+                        _.remove(this.parent.childErrors, (err) => (err?.component?.key || err?.context?.key) === this.component.key);
                     }
                 }
                 this.showValidationErrors(errors, data, row, flags);
@@ -2997,7 +3004,7 @@ export default class Component extends Element {
                     this.parent.childErrors.push(...errors);
                 }
                 else {
-                    _.remove(this.parent.childErrors, (err) => err.component.key === this.component.key);
+                    _.remove(this.parent.childErrors, (err) => (err?.component?.key || err?.context?.key) === this.component.key);
                 }
             }
             return errors.length === 0;
@@ -3418,10 +3425,11 @@ export default class Component extends Element {
         const { left, top } = element.getBoundingClientRect();
         window.scrollTo(left + window.scrollX, top + window.scrollY);
     }
-    focus(index = (this.refs.input.length - 1)) {
+    focus(index) {
         if ('beforeFocus' in this.parent) {
             this.parent.beforeFocus(this);
         }
+        index = index || this.refs.input?.length - 1;
         if (this.refs.input?.length) {
             const focusingInput = this.refs.input[index];
             if (this.component.widget?.type === 'calendar') {

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

@@ -1,6 +1,5 @@
 export default class Multivalue extends Field {
     get addAnother(): string;
-    useWrapper(): any;
     /**
      * @returns {Field} - The created field.
      */