@formio/js 5.0.0-dev.5673.3d062b9 → 5.0.0-dev.5676.625f434

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

@@ -3388,6 +3388,10 @@ class Component extends Element_1.default {
                             const disabled = this.shouldDisabled;
                             // Change states which won't be recalculated during redrawing
                             if (this.visible !== visible) {
+                                // If the logic is triggered by an event and the action sets the hidden state then the original
+                                // component definition must be changed so that the components hidden state does not get flipped back by
+                                // the fieldLogic function
+                                this.originalComponent.hidden = !visible;
                                 this.visible = visible;
                             }
                             if (this.disabled !== disabled) {

package/lib/cjs/components/_classes/component/fixtures/comp7.d.ts

@@ -0,0 +1,84 @@
+declare namespace _default {
+    let components: ({
+        label: string;
+        action: string;
+        showValidations: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        event: string;
+        input: boolean;
+        theme?: undefined;
+        collapsible?: undefined;
+        hidden?: undefined;
+        logic?: undefined;
+        collapsed?: undefined;
+        components?: undefined;
+        applyMaskOn?: undefined;
+    } | {
+        label: string;
+        action: string;
+        showValidations: boolean;
+        theme: string;
+        tableView: boolean;
+        key: string;
+        type: string;
+        event: string;
+        input: boolean;
+        collapsible?: undefined;
+        hidden?: undefined;
+        logic?: undefined;
+        collapsed?: undefined;
+        components?: undefined;
+        applyMaskOn?: undefined;
+    } | {
+        collapsible: boolean;
+        hidden: boolean;
+        key: string;
+        logic: {
+            name: string;
+            trigger: {
+                type: string;
+                event: string;
+            };
+            actions: {
+                name: string;
+                type: string;
+                property: {
+                    label: string;
+                    value: string;
+                    type: string;
+                };
+                state: boolean;
+            }[];
+        }[];
+        type: string;
+        label: string;
+        collapsed: boolean;
+        input: boolean;
+        tableView: boolean;
+        components: never[];
+        action?: undefined;
+        showValidations?: undefined;
+        event?: undefined;
+        theme?: undefined;
+        applyMaskOn?: undefined;
+    } | {
+        label: string;
+        applyMaskOn: string;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        action?: undefined;
+        showValidations?: undefined;
+        event?: undefined;
+        theme?: undefined;
+        collapsible?: undefined;
+        hidden?: undefined;
+        logic?: undefined;
+        collapsed?: undefined;
+        components?: undefined;
+    })[];
+}
+export default _default;

package/lib/cjs/components/_classes/component/fixtures/comp7.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    components: [
+        {
+            "label": "Show",
+            "action": "event",
+            "showValidations": false,
+            "tableView": false,
+            "key": "show",
+            "type": "button",
+            "event": "show",
+            "input": true
+        },
+        {
+            "label": "Hide",
+            "action": "event",
+            "showValidations": false,
+            "theme": "danger",
+            "tableView": false,
+            "key": "hide",
+            "type": "button",
+            "event": "hide",
+            "input": true
+        },
+        {
+            "collapsible": true,
+            "hidden": true,
+            "key": "panel",
+            "logic": [
+                {
+                    "name": "ShowPanel",
+                    "trigger": {
+                        "type": "event",
+                        "event": "show"
+                    },
+                    "actions": [
+                        {
+                            "name": "Show",
+                            "type": "property",
+                            "property": {
+                                "label": "Hidden",
+                                "value": "hidden",
+                                "type": "boolean"
+                            },
+                            "state": false
+                        }
+                    ]
+                },
+                {
+                    "name": "HidePanel",
+                    "trigger": {
+                        "type": "event",
+                        "event": "hide"
+                    },
+                    "actions": [
+                        {
+                            "name": "Hide",
+                            "type": "property",
+                            "property": {
+                                "label": "Hidden",
+                                "value": "hidden",
+                                "type": "boolean"
+                            },
+                            "state": true
+                        }
+                    ]
+                }
+            ],
+            "type": "panel",
+            "label": "Panel",
+            "collapsed": false,
+            "input": false,
+            "tableView": false,
+            "components": []
+        },
+        {
+            "label": "Text Field",
+            "applyMaskOn": "change",
+            "tableView": true,
+            "key": "textField1",
+            "type": "textfield",
+            "input": true
+        }
+    ]
+};

package/lib/cjs/components/_classes/component/fixtures/index.d.ts

@@ -4,4 +4,5 @@ import comp3 from './comp3';
 import comp4 from './comp4';
 import comp5 from './comp5';
 import comp6 from './comp6';
-export { comp1, comp2, comp3, comp4, comp5, comp6 };
+import comp7 from './comp7';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7 };

package/lib/cjs/components/_classes/component/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.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.comp7 = exports.comp6 = exports.comp5 = 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"));
@@ -16,3 +16,5 @@ const comp5_1 = __importDefault(require("./comp5"));
 exports.comp5 = comp5_1.default;
 const comp6_1 = __importDefault(require("./comp6"));
 exports.comp6 = comp6_1.default;
+const comp7_1 = __importDefault(require("./comp7"));
+exports.comp7 = comp7_1.default;

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

@@ -44,7 +44,7 @@ export default class Multivalue extends Field {
     attachMultiMask(index: number): boolean;
     /**
      * @param {any} input - The input element on which the mask is to be applied.
-     * @param {string} mask - The mask pattern to apply to the input element. Exit early if no mask.
+     * @param {string} mask - The mask pattern to apply to the input element. Exit early and remove previous mask if no mask.
      */
     updateMask(input: any, mask: string): void;
     /**

package/lib/cjs/components/_classes/multivalue/Multivalue.js

@@ -237,10 +237,17 @@ class Multivalue extends Field_1.default {
     }
     /**
      * @param {any} input - The input element on which the mask is to be applied.
-     * @param {string} mask - The mask pattern to apply to the input element. Exit early if no mask.
+     * @param {string} mask - The mask pattern to apply to the input element. Exit early and remove previous mask if no mask.
      */
     updateMask(input, mask) {
         if (!mask) {
+            if (input.mask) {
+                input.mask.destroy();
+            }
+            if (!this.component.placeholder) {
+                input.removeAttribute('placeholder');
+            }
+            input.value = '';
             return;
         }
         this.setInputMask(input, mask, !this.component.placeholder);

package/lib/cjs/components/number/Number.js

@@ -48,7 +48,7 @@ class NumberComponent extends Input_1.default {
         var _a, _b;
         super(...args);
         const separators = (0, utils_1.getNumberSeparators)(this.options.language || navigator.language);
-        this.decimalSeparator = this.options.decimalSeparator = this.options.decimalSeparator
+        this.decimalSeparator = this.options.decimalSeparator = this.component.decimalSymbol || this.options.decimalSeparator
             || ((_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.decimalSeparator)
             || separators.decimalSeparator;
         if (this.component.delimiter) {

package/lib/cjs/components/number/fixtures/comp8.d.ts

@@ -0,0 +1,32 @@
+declare namespace _default {
+    let components: ({
+        label: string;
+        applyMaskOn: string;
+        mask: boolean;
+        tableView: boolean;
+        delimiter: boolean;
+        requireDecimal: boolean;
+        inputFormat: string;
+        truncateMultipleSpaces: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        decimalSymbol: string;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        applyMaskOn?: undefined;
+        mask?: undefined;
+        delimiter?: undefined;
+        requireDecimal?: undefined;
+        inputFormat?: undefined;
+        truncateMultipleSpaces?: undefined;
+        decimalSymbol?: undefined;
+    })[];
+}
+export default _default;

package/lib/cjs/components/number/fixtures/comp8.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    components: [
+        {
+            "label": "Number",
+            "applyMaskOn": "change",
+            "mask": false,
+            "tableView": false,
+            "delimiter": false,
+            "requireDecimal": false,
+            "inputFormat": "plain",
+            "truncateMultipleSpaces": false,
+            "key": "number",
+            "type": "number",
+            "input": true,
+            "decimalSymbol": "-"
+        },
+        {
+            "type": "button",
+            "label": "Submit",
+            "key": "submit",
+            "disableOnInvalid": true,
+            "input": true,
+            "tableView": false
+        }
+    ]
+};

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

@@ -5,4 +5,5 @@ import comp4 from './comp4';
 import comp5 from './comp5';
 import comp6 from './comp6';
 import comp7 from './comp7';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7 };
+import comp8 from './comp8';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8 };

package/lib/cjs/components/number/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.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = 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"));
@@ -18,3 +18,5 @@ const comp6_1 = __importDefault(require("./comp6"));
 exports.comp6 = comp6_1.default;
 const comp7_1 = __importDefault(require("./comp7"));
 exports.comp7 = comp7_1.default;
+const comp8_1 = __importDefault(require("./comp8"));
+exports.comp8 = comp8_1.default;

package/lib/cjs/components/phonenumber/fixtures/comp2.d.ts

@@ -0,0 +1,16 @@
+declare namespace _default {
+    let components: {
+        label: string;
+        applyMaskOn: string;
+        allowMultipleMasks: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        inputMasks: {
+            label: string;
+            mask: string;
+        }[];
+        input: boolean;
+    }[];
+}
+export default _default;

package/lib/cjs/components/phonenumber/fixtures/comp2.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    components: [
+        {
+            "label": "Phone Number",
+            "applyMaskOn": "change",
+            "allowMultipleMasks": true,
+            "tableView": true,
+            "key": "phoneNumber",
+            "type": "phoneNumber",
+            "inputMasks": [
+                {
+                    "label": "Canada",
+                    "mask": "(999) 999-9999"
+                },
+                {
+                    "label": "Other",
+                    "mask": ""
+                }
+            ],
+            "input": true
+        }
+    ]
+};

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

@@ -1,2 +1,3 @@
-export { comp1 };
 import comp1 from './comp1';
+import comp2 from './comp2';
+export { comp1, comp2 };

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

@@ -3,6 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.comp1 = void 0;
+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;

package/lib/cjs/components/select/Select.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const Formio_1 = require("../../Formio");
 const ListComponent_1 = __importDefault(require("../_classes/list/ListComponent"));
-const Input_1 = __importDefault(require("../_classes/input/Input"));
 const Form_1 = __importDefault(require("../../Form"));
 const utils_1 = require("../../utils/utils");
 const ChoicesWrapper_1 = __importDefault(require("../../utils/ChoicesWrapper"));
@@ -834,7 +833,7 @@ class SelectComponent extends ListComponent_1.default {
                 this.choices.containerOuter.element.setAttribute('tabIndex', '-1');
                 this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());
             }
-            Input_1.default.prototype.addFocusBlurEvents.call(this, this.focusableElement);
+            this.addFocusBlurEvents(this.choices.input.element);
             if (this.itemsFromUrl && !this.component.noRefreshOnScroll) {
                 this.scrollList = this.choices.choiceList.element;
                 this.addEventListener(this.scrollList, 'scroll', () => this.onScroll());

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

@@ -19,13 +19,12 @@ class DateGeaterThan extends ConditionOperator_1.default {
         return { date, comparedDate };
     }
     execute(options, functionName = 'isAfter') {
-        var _a;
         const { value, instance, conditionComponentPath } = options;
         if (!value) {
             return false;
         }
         let conditionTriggerComponent = null;
-        if ((_a = instance === null || instance === void 0 ? void 0 : instance.root) === null || _a === void 0 ? void 0 : _a.getComponent) {
+        if (instance && instance.root) {
             conditionTriggerComponent = instance.root.getComponent(conditionComponentPath);
         }
         if (conditionTriggerComponent && conditionTriggerComponent.isPartialDay && conditionTriggerComponent.isPartialDay(value)) {

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

@@ -16,9 +16,8 @@ class IsEmptyValue extends ConditionOperator_1.default {
         return false;
     }
     execute({ value, instance, conditionComponentPath }) {
-        var _a;
         const isEmptyValue = lodash_1.default.isEmpty(value);
-        if ((_a = instance === null || instance === void 0 ? void 0 : instance.root) === null || _a === void 0 ? void 0 : _a.getComponent) {
+        if (instance && instance.root) {
             const conditionTriggerComponent = instance.root.getComponent(conditionComponentPath);
             return conditionTriggerComponent ? conditionTriggerComponent.isEmpty() : 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, _b;
+        var _a;
         if ((value || value === false) && comparedValue && typeof value !== typeof comparedValue && lodash_1.default.isString(comparedValue)) {
             try {
                 comparedValue = JSON.parse(comparedValue);
@@ -22,11 +22,11 @@ class IsEqualTo extends ConditionOperator_1.default {
             // eslint-disable-next-line no-empty
             catch (e) { }
         }
-        if ((_a = instance === null || instance === void 0 ? void 0 : instance.root) === null || _a === void 0 ? void 0 : _a.getComponent) {
+        if (instance && instance.root) {
             const conditionTriggerComponent = instance.root.getComponent(conditionComponentPath);
             if (conditionTriggerComponent
                 && (0, utils_1.isSelectResourceWithObjectValue)(conditionTriggerComponent.component)
-                && ((_b = conditionTriggerComponent.component) === null || _b === void 0 ? void 0 : _b.template)) {
+                && ((_a = conditionTriggerComponent.component) === null || _a === void 0 ? void 0 : _a.template)) {
                 if (!value || !lodash_1.default.isPlainObject(value)) {
                     return false;
                 }

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

@@ -3361,6 +3361,10 @@ export default class Component extends Element {
                             const disabled = this.shouldDisabled;
                             // Change states which won't be recalculated during redrawing
                             if (this.visible !== visible) {
+                                // If the logic is triggered by an event and the action sets the hidden state then the original
+                                // component definition must be changed so that the components hidden state does not get flipped back by
+                                // the fieldLogic function
+                                this.originalComponent.hidden = !visible;
                                 this.visible = visible;
                             }
                             if (this.disabled !== disabled) {

package/lib/mjs/components/_classes/component/fixtures/comp7.d.ts

@@ -0,0 +1,84 @@
+declare namespace _default {
+    let components: ({
+        label: string;
+        action: string;
+        showValidations: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        event: string;
+        input: boolean;
+        theme?: undefined;
+        collapsible?: undefined;
+        hidden?: undefined;
+        logic?: undefined;
+        collapsed?: undefined;
+        components?: undefined;
+        applyMaskOn?: undefined;
+    } | {
+        label: string;
+        action: string;
+        showValidations: boolean;
+        theme: string;
+        tableView: boolean;
+        key: string;
+        type: string;
+        event: string;
+        input: boolean;
+        collapsible?: undefined;
+        hidden?: undefined;
+        logic?: undefined;
+        collapsed?: undefined;
+        components?: undefined;
+        applyMaskOn?: undefined;
+    } | {
+        collapsible: boolean;
+        hidden: boolean;
+        key: string;
+        logic: {
+            name: string;
+            trigger: {
+                type: string;
+                event: string;
+            };
+            actions: {
+                name: string;
+                type: string;
+                property: {
+                    label: string;
+                    value: string;
+                    type: string;
+                };
+                state: boolean;
+            }[];
+        }[];
+        type: string;
+        label: string;
+        collapsed: boolean;
+        input: boolean;
+        tableView: boolean;
+        components: never[];
+        action?: undefined;
+        showValidations?: undefined;
+        event?: undefined;
+        theme?: undefined;
+        applyMaskOn?: undefined;
+    } | {
+        label: string;
+        applyMaskOn: string;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        action?: undefined;
+        showValidations?: undefined;
+        event?: undefined;
+        theme?: undefined;
+        collapsible?: undefined;
+        hidden?: undefined;
+        logic?: undefined;
+        collapsed?: undefined;
+        components?: undefined;
+    })[];
+}
+export default _default;

package/lib/mjs/components/_classes/component/fixtures/comp7.js

@@ -0,0 +1,84 @@
+export default {
+    components: [
+        {
+            "label": "Show",
+            "action": "event",
+            "showValidations": false,
+            "tableView": false,
+            "key": "show",
+            "type": "button",
+            "event": "show",
+            "input": true
+        },
+        {
+            "label": "Hide",
+            "action": "event",
+            "showValidations": false,
+            "theme": "danger",
+            "tableView": false,
+            "key": "hide",
+            "type": "button",
+            "event": "hide",
+            "input": true
+        },
+        {
+            "collapsible": true,
+            "hidden": true,
+            "key": "panel",
+            "logic": [
+                {
+                    "name": "ShowPanel",
+                    "trigger": {
+                        "type": "event",
+                        "event": "show"
+                    },
+                    "actions": [
+                        {
+                            "name": "Show",
+                            "type": "property",
+                            "property": {
+                                "label": "Hidden",
+                                "value": "hidden",
+                                "type": "boolean"
+                            },
+                            "state": false
+                        }
+                    ]
+                },
+                {
+                    "name": "HidePanel",
+                    "trigger": {
+                        "type": "event",
+                        "event": "hide"
+                    },
+                    "actions": [
+                        {
+                            "name": "Hide",
+                            "type": "property",
+                            "property": {
+                                "label": "Hidden",
+                                "value": "hidden",
+                                "type": "boolean"
+                            },
+                            "state": true
+                        }
+                    ]
+                }
+            ],
+            "type": "panel",
+            "label": "Panel",
+            "collapsed": false,
+            "input": false,
+            "tableView": false,
+            "components": []
+        },
+        {
+            "label": "Text Field",
+            "applyMaskOn": "change",
+            "tableView": true,
+            "key": "textField1",
+            "type": "textfield",
+            "input": true
+        }
+    ]
+};

package/lib/mjs/components/_classes/component/fixtures/index.d.ts

@@ -4,4 +4,5 @@ import comp3 from './comp3';
 import comp4 from './comp4';
 import comp5 from './comp5';
 import comp6 from './comp6';
-export { comp1, comp2, comp3, comp4, comp5, comp6 };
+import comp7 from './comp7';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7 };

package/lib/mjs/components/_classes/component/fixtures/index.js

@@ -4,4 +4,5 @@ import comp3 from './comp3';
 import comp4 from './comp4';
 import comp5 from './comp5';
 import comp6 from './comp6';
-export { comp1, comp2, comp3, comp4, comp5, comp6 };
+import comp7 from './comp7';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7 };