@formio/js 5.0.0-dev.5695.024ad9c → 5.0.0-dev.5696.7642331

package/lib/cjs/components/time/Time.d.ts

@@ -1,12 +1,12 @@
 export default class TimeComponent extends TextFieldComponent {
-    rawData: string | never[];
+    rawData: any;
     get dataFormat(): any;
     get skipMaskValidation(): boolean;
     isNotCompleteInput(value: any): any;
     removeValue(index: any): void;
     resetRawData(index: any): void;
     setRawValue(value: any, index: any): void;
-    getRawValue(index: any): string | never[];
+    getRawValue(index: any): any;
     getValueAt(index: any): any;
     setValueAt(index: any, value: any): void;
     getStringAsValue(view: any): any;

package/lib/cjs/components/time/Time.js

@@ -30,7 +30,8 @@ class TimeComponent extends TextField_1.default {
         this.component.inputType = isEdgeBrowser && edgeVersion <= 18
             ? 'text'
             : (this.component.inputType || 'time');
-        this.rawData = this.component.multiple ? [] : this.emptyValue;
+        // If default value is given then the raw data needs to be set
+        this.rawData = this.component.multiple ? [] : this.getValueAsString(this.defaultValue) || this.emptyValue;
     }
     static get builderInfo() {
         return {
@@ -61,7 +62,7 @@ class TimeComponent extends TextField_1.default {
         return value;
     }
     get validationValue() {
-        if (Array.isArray(this.rawData) && !this.rawData.length || !this.rawData) {
+        if ((Array.isArray(this.rawData) && !this.rawData.length) || !this.rawData) {
             return this.dataValue;
         }
         return this.rawData;

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

@@ -0,0 +1,166 @@
+declare namespace _default {
+    let type: string;
+    let display: string;
+    let components: {
+        title: string;
+        breadcrumbClickable: boolean;
+        buttonSettings: {
+            previous: boolean;
+            cancel: boolean;
+            next: boolean;
+        };
+        navigateOnEnter: boolean;
+        saveOnEnter: boolean;
+        scrollToTop: boolean;
+        collapsible: boolean;
+        key: string;
+        type: string;
+        label: string;
+        components: {
+            label: string;
+            disabled: boolean;
+            alwaysEnabled: boolean;
+            tableView: boolean;
+            defaultValue: string;
+            key: string;
+            type: string;
+            input: boolean;
+            inputMask: string;
+            hideOnChildrenHidden: boolean;
+            id: string;
+            placeholder: string;
+            prefix: string;
+            customClass: string;
+            suffix: string;
+            multiple: boolean;
+            protected: boolean;
+            unique: boolean;
+            persistent: boolean;
+            hidden: boolean;
+            clearOnHide: boolean;
+            refreshOn: string;
+            redrawOn: string;
+            modalEdit: boolean;
+            dataGridLabel: boolean;
+            labelPosition: string;
+            description: string;
+            errorLabel: string;
+            tooltip: string;
+            hideLabel: boolean;
+            tabindex: string;
+            autofocus: boolean;
+            dbIndex: boolean;
+            customDefaultValue: string;
+            calculateValue: string;
+            calculateServer: boolean;
+            widget: {
+                type: string;
+            };
+            attributes: {};
+            validateOn: string;
+            validate: {
+                required: boolean;
+                custom: string;
+                customPrivate: boolean;
+                strictDateValidation: boolean;
+                multiple: boolean;
+                unique: boolean;
+                minLength: string;
+                maxLength: string;
+                pattern: string;
+            };
+            conditional: {
+                show: null;
+                when: null;
+                eq: string;
+            };
+            overlay: {
+                style: string;
+                left: string;
+                top: string;
+                width: string;
+                height: string;
+            };
+            allowCalculateOverride: boolean;
+            encrypted: boolean;
+            showCharCount: boolean;
+            showWordCount: boolean;
+            properties: {};
+            allowMultipleMasks: boolean;
+            addons: never[];
+            mask: boolean;
+            inputType: string;
+            inputFormat: string;
+            displayMask: string;
+            spellcheck: boolean;
+            truncateMultipleSpaces: boolean;
+            format: string;
+            dataFormat: string;
+        }[];
+        input: boolean;
+        tableView: boolean;
+        id: string;
+        placeholder: string;
+        prefix: string;
+        customClass: string;
+        suffix: string;
+        multiple: boolean;
+        defaultValue: null;
+        protected: boolean;
+        unique: boolean;
+        persistent: boolean;
+        hidden: boolean;
+        clearOnHide: boolean;
+        refreshOn: string;
+        redrawOn: string;
+        modalEdit: boolean;
+        dataGridLabel: boolean;
+        labelPosition: string;
+        description: string;
+        errorLabel: string;
+        tooltip: string;
+        hideLabel: boolean;
+        tabindex: string;
+        disabled: boolean;
+        autofocus: boolean;
+        dbIndex: boolean;
+        customDefaultValue: string;
+        calculateValue: string;
+        calculateServer: boolean;
+        widget: null;
+        attributes: {};
+        validateOn: string;
+        validate: {
+            required: boolean;
+            custom: string;
+            customPrivate: boolean;
+            strictDateValidation: boolean;
+            multiple: boolean;
+            unique: boolean;
+        };
+        conditional: {
+            show: null;
+            when: null;
+            eq: string;
+        };
+        overlay: {
+            style: string;
+            left: string;
+            top: string;
+            width: string;
+            height: string;
+        };
+        allowCalculateOverride: boolean;
+        encrypted: boolean;
+        showCharCount: boolean;
+        showWordCount: boolean;
+        properties: {};
+        allowMultipleMasks: boolean;
+        addons: never[];
+        tree: boolean;
+        lazyLoad: boolean;
+        theme: string;
+        breadcrumb: string;
+    }[];
+}
+export default _default;

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/translations/en.d.ts

@@ -74,5 +74,8 @@ declare namespace _default {
     let apiKey: string;
     let typeRemaining: string;
     let typeCount: string;
+    let requiredDayField: string;
+    let requiredMonthField: string;
+    let requiredYearField: string;
 }
 export default _default;

package/lib/cjs/translations/en.js

@@ -75,5 +75,8 @@ exports.default = {
     reCaptchaTokenNotSpecifiedError: 'ReCAPTCHA: Token is not specified in submission',
     apiKey: 'API Key is not unique: {{key}}',
     typeRemaining: '{{ remaining }} {{ type }} remaining.',
-    typeCount: '{{ count }} {{ type }}'
+    typeCount: '{{ count }} {{ type }}',
+    requiredDayField: '{{ field }} is required',
+    requiredMonthField: '{{ field }} is required',
+    requiredYearField: '{{ field }} is required'
 };

package/lib/cjs/utils/conditionOperators/IsEmptyValue.js

@@ -16,10 +16,11 @@ class IsEmptyValue extends ConditionOperator_1.default {
         return false;
     }
     execute({ value, instance, conditionComponentPath }) {
-        const isEmptyValue = lodash_1.default.isEmpty(value);
+        var _a;
+        const isEmptyValue = lodash_1.default.isEmpty(lodash_1.default.isNumber(value) ? String(value) : value);
         if (instance && instance.root) {
-            const conditionTriggerComponent = instance.root.getComponent(conditionComponentPath);
-            return conditionTriggerComponent ? conditionTriggerComponent.isEmpty() : isEmptyValue;
+            const conditionTriggerComponent = ((_a = instance.root) === null || _a === void 0 ? void 0 : _a.getComponent) && instance.root.getComponent(conditionComponentPath);
+            return (conditionTriggerComponent === null || conditionTriggerComponent === void 0 ? void 0 : conditionTriggerComponent.isEmpty) ? conditionTriggerComponent.isEmpty() : isEmptyValue;
         }
         return isEmptyValue;
     }

package/lib/cjs/utils/conditionOperators/IsEqualTo.js

@@ -14,7 +14,7 @@ class IsEqualTo extends ConditionOperator_1.default {
         return 'Is Equal To';
     }
     execute({ value, comparedValue, instance, conditionComponentPath }) {
-        var _a;
+        var _a, _b;
         if ((value || value === false) && comparedValue && typeof value !== typeof comparedValue && lodash_1.default.isString(comparedValue)) {
             try {
                 comparedValue = JSON.parse(comparedValue);
@@ -23,10 +23,10 @@ class IsEqualTo extends ConditionOperator_1.default {
             catch (e) { }
         }
         if (instance && instance.root) {
-            const conditionTriggerComponent = instance.root.getComponent(conditionComponentPath);
+            const conditionTriggerComponent = ((_a = instance.root) === null || _a === void 0 ? void 0 : _a.getComponent) && instance.root.getComponent(conditionComponentPath);
             if (conditionTriggerComponent
                 && (0, utils_1.isSelectResourceWithObjectValue)(conditionTriggerComponent.component)
-                && ((_a = conditionTriggerComponent.component) === null || _a === void 0 ? void 0 : _a.template)) {
+                && ((_b = conditionTriggerComponent.component) === null || _b === void 0 ? void 0 : _b.template)) {
                 if (!value || !lodash_1.default.isPlainObject(value)) {
                     return false;
                 }

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

@@ -56,16 +56,7 @@ 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;
-/**
- * Check if a simple conditional evaluates to true.
- * @param {import('@formio/core').Component} component - The component to check for the conditional.
- * @param {import('@formio/core').SimpleConditional} condition - The condition to check.
- * @param {*} row - The row data for the component.
- * @param {*} data - The full submission data.
- * @param {import('../../src/components/_classes/component/Component').Component} instance - The instance of the component.
- * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.
- */
-export function checkSimpleConditional(component: import('@formio/core').Component, condition: import('@formio/core').SimpleConditional, row: any, data: any, instance: any): boolean;
+export function checkSimpleConditional(component: any, condition: any, row: any, data: any, instance: any): boolean;
 /**
  * Returns a components normalized value.
  * @param {string} compPath - The full path to the component.

package/lib/cjs/utils/utils.js

@@ -190,6 +190,44 @@ 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.
  */
+function getConditionalPathsRecursive(conditionPaths, data) {
+    let currentGlobalIndex = 0;
+    const conditionalPathsArray = [];
+    const getConditionalPaths = (data, currentPath = '', localIndex = 0) => {
+        currentPath = currentPath.replace(/^\.+|\.+$/g, '');
+        const currentLocalIndex = localIndex;
+        const currentData = lodash_1.default.get(data, currentPath);
+        if (Array.isArray(currentData) && currentData.filter(Boolean).length > 0) {
+            if (currentData.some(element => typeof element !== 'object')) {
+                return;
+            }
+            const hasInnerDataArray = currentData.find(x => Array.isArray(x[conditionPaths[currentLocalIndex]]));
+            if (hasInnerDataArray) {
+                currentData.forEach((_, indexOutside) => {
+                    const innerCompDataPath = `${currentPath}[${indexOutside}].${conditionPaths[currentLocalIndex]}`;
+                    getConditionalPaths(data, innerCompDataPath, currentLocalIndex + 1);
+                });
+            }
+            else {
+                currentData.forEach((x, index) => {
+                    if (!lodash_1.default.isNil(x[conditionPaths[currentLocalIndex]])) {
+                        const compDataPath = `${currentPath}[${index}].${conditionPaths[currentLocalIndex]}`;
+                        conditionalPathsArray.push(compDataPath);
+                    }
+                });
+            }
+        }
+        else {
+            if (!conditionPaths[currentGlobalIndex]) {
+                return;
+            }
+            currentGlobalIndex = currentGlobalIndex + 1;
+            getConditionalPaths(data, `${currentPath}.${conditionPaths[currentGlobalIndex - 1]}`, currentGlobalIndex);
+        }
+    };
+    getConditionalPaths(data);
+    return conditionalPathsArray;
+}
 function checkSimpleConditional(component, condition, row, data, instance) {
     if (condition.when) {
         const value = getComponentActualValue(condition.when, data, row);
@@ -211,23 +249,37 @@ function checkSimpleConditional(component, condition, row, data, instance) {
             return true;
         }
         const conditionsResult = lodash_1.default.map(conditions, (cond) => {
+            var _a, _b;
             const { value: comparedValue, operator, component: conditionComponentPath } = cond;
             if (!conditionComponentPath) {
                 return true;
             }
-            const value = getComponentActualValue(conditionComponentPath, data, row);
-            const ConditionOperator = conditionOperators_1.default[operator];
-            return ConditionOperator
-                ? new ConditionOperator().getResult({ value, comparedValue, instance, component, conditionComponentPath })
-                : true;
+            const splittedConditionPath = conditionComponentPath.split('.');
+            const conditionalPaths = ((_a = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _a === void 0 ? void 0 : _a.type) === 'datagrid' || ((_b = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _b === void 0 ? void 0 : _b.type) === 'editgrid' ? [] : getConditionalPathsRecursive(splittedConditionPath, data);
+            if (conditionalPaths.length > 0) {
+                return conditionalPaths.map((path) => {
+                    const value = getComponentActualValue(path, data, row);
+                    const ConditionOperator = conditionOperators_1.default[operator];
+                    return ConditionOperator
+                        ? new ConditionOperator().getResult({ value, comparedValue, instance, component, conditionComponentPath })
+                        : true;
+                });
+            }
+            else {
+                const value = getComponentActualValue(conditionComponentPath, data, row);
+                const СonditionOperator = conditionOperators_1.default[operator];
+                return СonditionOperator
+                    ? new СonditionOperator().getResult({ value, comparedValue, instance, component, conditionComponentPath })
+                    : true;
+            }
         });
         let result = false;
         switch (conjunction) {
             case 'any':
-                result = lodash_1.default.some(conditionsResult, res => !!res);
+                result = lodash_1.default.some(conditionsResult.flat(), res => !!res);
                 break;
             default:
-                result = lodash_1.default.every(conditionsResult, res => !!res);
+                result = lodash_1.default.every(conditionsResult.flat(), res => !!res);
         }
         return show ? result : !result;
     }

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',

package/lib/mjs/Webform.js

@@ -8,7 +8,10 @@ import Components from "./components/Components";
 import NestedDataComponent from "./components/_classes/nesteddata/NestedDataComponent";
 import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, convertStringToHTMLElement, getArrayFromComponentPath, } from "./utils/utils";
 import { eachComponent } from "./utils/formUtils";
-import dragula from "dragula";
+// We need this here because dragula pulls in CustomEvent class that requires global to exist.
+if (typeof window !== 'undefined' && typeof window.global === 'undefined') {
+    window.global = window;
+}
 // Initialize the available forms.
 Formio.forms = {};
 // Allow people to register components.
@@ -282,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() {
@@ -1132,7 +1134,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];

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.

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;
     }

package/lib/mjs/components/_classes/nested/NestedComponent.d.ts

@@ -211,11 +211,12 @@ export default class NestedComponent extends Field {
     calculateValue(data: any, flags: any, row: any): any;
     isLastPage(): boolean;
     isValid(data: any, dirty: any): any;
-    validationProcessor({ scope, data, row, instance }: {
+    validationProcessor({ scope, data, row, instance, component }: {
         scope: any;
         data: any;
         row: any;
         instance: any;
+        component: any;
     }, flags: any): void;
     /**
      * Perform a validation on all child components of this nested component.