@formio/js 5.0.0-rc.21 → 5.0.0-rc.22

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

@@ -1,6 +1,6 @@
 /*! @license DOMPurify 3.0.5 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.5/LICENSE */
 
-/*! formiojs v5.0.0-rc.21 | https://unpkg.com/formiojs@5.0.0-rc.21/LICENSE.txt */
+/*! formiojs v5.0.0-rc.22 | https://unpkg.com/formiojs@5.0.0-rc.22/LICENSE.txt */
 
 /**
  * @license

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

@@ -12,7 +12,7 @@
 
 /*! @license DOMPurify 3.0.5 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.5/LICENSE */
 
-/*! formiojs v5.0.0-rc.21 | https://unpkg.com/formiojs@5.0.0-rc.21/LICENSE.txt */
+/*! formiojs v5.0.0-rc.22 | https://unpkg.com/formiojs@5.0.0-rc.22/LICENSE.txt */
 
 /**
  * @license

package/lib/cjs/Element.js

@@ -558,6 +558,11 @@ class Element {
             && !FormioUtils.Evaluator.templateSettings.interpolate.test(string)) {
             string = FormioUtils.translateHTMLTemplate(String(string), (value) => this.t(value));
         }
+        if (this.component.filter === string && !this.options.building) {
+            const evalContext = this.evalContext(data);
+            evalContext.data = lodash_1.default.mapValues(evalContext.data, (val) => lodash_1.default.isString(val) ? encodeURIComponent(val) : val);
+            return FormioUtils.interpolate(string, evalContext, options);
+        }
         return FormioUtils.interpolate(string, this.evalContext(data), options);
     }
     /**

package/lib/cjs/components/day/Day.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const moment_1 = __importDefault(require("moment"));
 const Field_1 = __importDefault(require("../_classes/field/Field"));
+const Input_1 = __importDefault(require("../_classes/input/Input"));
 const utils_1 = require("../../utils/utils");
 class DayComponent extends Field_1.default {
     static schema(...extend) {
@@ -291,6 +292,9 @@ class DayComponent extends Field_1.default {
             this.addEventListener(this.refs.input, this.info.changeEvent, () => this.updateValue(null, {
                 modified: true
             }));
+            [this.refs.day, this.refs.month, this.refs.year].forEach((element) => {
+                Input_1.default.prototype.addFocusBlurEvents.call(this, element);
+            });
         }
         this.setValue(this.dataValue);
         // Force the disabled state with getters and setters.

package/lib/cjs/components/day/fixtures/comp5.d.ts

@@ -0,0 +1,29 @@
+declare namespace _default {
+    const type: string;
+    const display: string;
+    const components: {
+        label: string;
+        hideInputLabels: boolean;
+        inputsLabelPosition: string;
+        useLocaleSettings: boolean;
+        tableView: boolean;
+        fields: {
+            day: {
+                hide: boolean;
+                required: boolean;
+            };
+            month: {
+                hide: boolean;
+            };
+            year: {
+                hide: boolean;
+            };
+        };
+        validateOn: string;
+        key: string;
+        type: string;
+        input: boolean;
+        defaultValue: string;
+    }[];
+}
+export default _default;

package/lib/cjs/components/day/fixtures/comp5.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Day',
+            hideInputLabels: false,
+            inputsLabelPosition: 'top',
+            useLocaleSettings: false,
+            tableView: false,
+            fields: {
+                day: {
+                    hide: false,
+                    required: true
+                },
+                month: {
+                    hide: false
+                },
+                year: {
+                    hide: false
+                }
+            },
+            validateOn: 'blur',
+            key: 'day',
+            type: 'day',
+            input: true,
+            defaultValue: '00/00/0000'
+        },
+    ]
+};

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

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

package/lib/cjs/components/day/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.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+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"));
@@ -12,3 +12,5 @@ const comp3_1 = __importDefault(require("./comp3"));
 exports.comp3 = comp3_1.default;
 const comp4_1 = __importDefault(require("./comp4"));
 exports.comp4 = comp4_1.default;
+const comp5_1 = __importDefault(require("./comp5"));
+exports.comp5 = comp5_1.default;

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

@@ -392,7 +392,8 @@ class FormComponent extends Component_1.default {
         if (this.builderMode || this.isHidden() || (this.isSubFormLazyLoad() && !fromAttach)) {
             return Promise.resolve();
         }
-        if (this.hasLoadedForm && !this.isRevisionChanged) {
+        if (this.hasLoadedForm && !this.isRevisionChanged &&
+            !(this.options.pdf && this.useOriginalRevision && lodash_1.default.isNull(this.subForm) && !this.subFormLoading)) {
             // Pass config down to sub forms.
             if (this.root && this.root.form && this.root.form.config && !this.formObj.config) {
                 this.formObj.config = this.root.form.config;

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

@@ -6,6 +6,7 @@ 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"));
@@ -808,7 +809,7 @@ class SelectComponent extends ListComponent_1.default {
                 this.choices.containerOuter.element.setAttribute('tabIndex', '-1');
                 this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());
             }
-            this.addFocusBlurEvents(this.focusableElement);
+            Input_1.default.prototype.addFocusBlurEvents.call(this, this.focusableElement);
             if (this.itemsFromUrl && !this.component.noRefreshOnScroll) {
                 this.scrollList = this.choices.choiceList.element;
                 this.addEventListener(this.scrollList, 'scroll', () => this.onScroll());

package/lib/cjs/components/select/fixtures/comp19.d.ts

@@ -0,0 +1,23 @@
+declare namespace _default {
+    const type: string;
+    const display: string;
+    const components: {
+        label: string;
+        widget: string;
+        tableView: boolean;
+        data: {
+            values: {
+                label: string;
+                value: string;
+            }[];
+        };
+        validateOn: string;
+        validate: {
+            custom: string;
+        };
+        key: string;
+        type: string;
+        input: boolean;
+    }[];
+}
+export default _default;

package/lib/cjs/components/select/fixtures/comp19.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Select',
+            widget: 'choicesjs',
+            tableView: true,
+            data: {
+                values: [
+                    {
+                        label: 'Banana',
+                        value: 'banana'
+                    },
+                    {
+                        label: 'Apple',
+                        value: 'apple'
+                    },
+                    {
+                        label: 'Pineapple',
+                        value: 'pineapple'
+                    }
+                ]
+            },
+            validateOn: 'blur',
+            validate: {
+                custom: "valid = data.select == 'apple' ? true : 'You must select an apple';"
+            },
+            key: 'select',
+            type: 'select',
+            input: true
+        },
+    ]
+};

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

@@ -15,5 +15,6 @@ import comp15 from './comp15';
 import comp16 from './comp16';
 import comp17 from './comp17';
 import comp18 from './comp18';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18 };
+import comp19 from './comp19';
+export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19 };
 export { multiSelect, multiSelectOptions } from "./comp3";

package/lib/cjs/components/select/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.comp18 = exports.comp17 = exports.comp16 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp2 = exports.comp1 = exports.multiSelectOptions = exports.multiSelect = void 0;
+exports.comp19 = exports.comp18 = exports.comp17 = exports.comp16 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp2 = exports.comp1 = exports.multiSelectOptions = exports.multiSelect = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const comp2_1 = __importDefault(require("./comp2"));
@@ -41,3 +41,5 @@ const comp17_1 = __importDefault(require("./comp17"));
 exports.comp17 = comp17_1.default;
 const comp18_1 = __importDefault(require("./comp18"));
 exports.comp18 = comp18_1.default;
+const comp19_1 = __importDefault(require("./comp19"));
+exports.comp19 = comp19_1.default;

package/lib/cjs/components/tags/Tags.js

@@ -84,6 +84,8 @@ class TagsComponent extends Input_1.default {
         });
         this.choices.itemList.element.tabIndex = element.tabIndex;
         this.addEventListener(this.choices.input.element, 'blur', () => {
+            // Emit event to the native Formio input, so the listener attached in the Input.js will be invoked
+            element.dispatchEvent(new Event('blur'));
             const value = this.choices.input.value;
             const maxTagsNumber = this.component.maxTags;
             const valuesCount = this.choices.getValue(true).length;

package/lib/cjs/components/tags/fixtures/comp6.d.ts

@@ -0,0 +1,17 @@
+declare namespace _default {
+    const type: string;
+    const display: string;
+    const components: {
+        label: string;
+        tableView: boolean;
+        storeas: string;
+        validate: {
+            custom: string;
+        };
+        validateOn: string;
+        key: string;
+        type: string;
+        input: boolean;
+    }[];
+}
+export default _default;

package/lib/cjs/components/tags/fixtures/comp6.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Tags',
+            tableView: false,
+            storeas: 'array',
+            validate: {
+                custom: "valid = data && data.tags.length <= 2 ? true : 'You cannot add more than 2 items'"
+            },
+            validateOn: 'blur',
+            key: 'tags',
+            type: 'tags',
+            input: true
+        },
+    ]
+};

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

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

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

package/lib/mjs/Element.js

@@ -527,6 +527,11 @@ export default class Element {
             && !FormioUtils.Evaluator.templateSettings.interpolate.test(string)) {
             string = FormioUtils.translateHTMLTemplate(String(string), (value) => this.t(value));
         }
+        if (this.component.filter === string && !this.options.building) {
+            const evalContext = this.evalContext(data);
+            evalContext.data = _.mapValues(evalContext.data, (val) => _.isString(val) ? encodeURIComponent(val) : val);
+            return FormioUtils.interpolate(string, evalContext, options);
+        }
         return FormioUtils.interpolate(string, this.evalContext(data), options);
     }
     /**

package/lib/mjs/components/day/Day.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import moment from 'moment';
 import Field from '../_classes/field/Field';
+import Input from '../_classes/input/Input';
 import { boolValue, componentValueTypes, getComponentSavedTypes, getLocaleDateFormatInfo } from '../../utils/utils';
 export default class DayComponent extends Field {
     static schema(...extend) {
@@ -289,6 +290,9 @@ export default class DayComponent extends Field {
             this.addEventListener(this.refs.input, this.info.changeEvent, () => this.updateValue(null, {
                 modified: true
             }));
+            [this.refs.day, this.refs.month, this.refs.year].forEach((element) => {
+                Input.prototype.addFocusBlurEvents.call(this, element);
+            });
         }
         this.setValue(this.dataValue);
         // Force the disabled state with getters and setters.

package/lib/mjs/components/day/fixtures/comp5.d.ts

@@ -0,0 +1,29 @@
+declare namespace _default {
+    const type: string;
+    const display: string;
+    const components: {
+        label: string;
+        hideInputLabels: boolean;
+        inputsLabelPosition: string;
+        useLocaleSettings: boolean;
+        tableView: boolean;
+        fields: {
+            day: {
+                hide: boolean;
+                required: boolean;
+            };
+            month: {
+                hide: boolean;
+            };
+            year: {
+                hide: boolean;
+            };
+        };
+        validateOn: string;
+        key: string;
+        type: string;
+        input: boolean;
+        defaultValue: string;
+    }[];
+}
+export default _default;

package/lib/mjs/components/day/fixtures/comp5.js

@@ -0,0 +1,30 @@
+export default {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Day',
+            hideInputLabels: false,
+            inputsLabelPosition: 'top',
+            useLocaleSettings: false,
+            tableView: false,
+            fields: {
+                day: {
+                    hide: false,
+                    required: true
+                },
+                month: {
+                    hide: false
+                },
+                year: {
+                    hide: false
+                }
+            },
+            validateOn: 'blur',
+            key: 'day',
+            type: 'day',
+            input: true,
+            defaultValue: '00/00/0000'
+        },
+    ]
+};

package/lib/mjs/components/day/fixtures/index.d.ts

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

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

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

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

@@ -385,7 +385,8 @@ export default class FormComponent extends Component {
         if (this.builderMode || this.isHidden() || (this.isSubFormLazyLoad() && !fromAttach)) {
             return Promise.resolve();
         }
-        if (this.hasLoadedForm && !this.isRevisionChanged) {
+        if (this.hasLoadedForm && !this.isRevisionChanged &&
+            !(this.options.pdf && this.useOriginalRevision && _.isNull(this.subForm) && !this.subFormLoading)) {
             // Pass config down to sub forms.
             if (this.root && this.root.form && this.root.form.config && !this.formObj.config) {
                 this.formObj.config = this.root.form.config;

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

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import { Formio } from '../../Formio';
 import ListComponent from '../_classes/list/ListComponent';
+import Input from '../_classes/input/Input';
 import Form from '../../Form';
 import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
 import Choices from '../../utils/ChoicesWrapper';
@@ -837,7 +838,7 @@ export default class SelectComponent extends ListComponent {
                 this.choices.containerOuter.element.setAttribute('tabIndex', '-1');
                 this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());
             }
-            this.addFocusBlurEvents(this.focusableElement);
+            Input.prototype.addFocusBlurEvents.call(this, this.focusableElement);
             if (this.itemsFromUrl && !this.component.noRefreshOnScroll) {
                 this.scrollList = this.choices.choiceList.element;
                 this.addEventListener(this.scrollList, 'scroll', () => this.onScroll());

package/lib/mjs/components/select/fixtures/comp19.d.ts

@@ -0,0 +1,23 @@
+declare namespace _default {
+    const type: string;
+    const display: string;
+    const components: {
+        label: string;
+        widget: string;
+        tableView: boolean;
+        data: {
+            values: {
+                label: string;
+                value: string;
+            }[];
+        };
+        validateOn: string;
+        validate: {
+            custom: string;
+        };
+        key: string;
+        type: string;
+        input: boolean;
+    }[];
+}
+export default _default;

package/lib/mjs/components/select/fixtures/comp19.js

@@ -0,0 +1,34 @@
+export default {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Select',
+            widget: 'choicesjs',
+            tableView: true,
+            data: {
+                values: [
+                    {
+                        label: 'Banana',
+                        value: 'banana'
+                    },
+                    {
+                        label: 'Apple',
+                        value: 'apple'
+                    },
+                    {
+                        label: 'Pineapple',
+                        value: 'pineapple'
+                    }
+                ]
+            },
+            validateOn: 'blur',
+            validate: {
+                custom: "valid = data.select == 'apple' ? true : 'You must select an apple';"
+            },
+            key: 'select',
+            type: 'select',
+            input: true
+        },
+    ]
+};

package/lib/mjs/components/select/fixtures/index.d.ts

@@ -15,5 +15,6 @@ import comp15 from './comp15';
 import comp16 from './comp16';
 import comp17 from './comp17';
 import comp18 from './comp18';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18 };
+import comp19 from './comp19';
+export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19 };
 export { multiSelect, multiSelectOptions } from "./comp3";

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

@@ -16,4 +16,5 @@ import comp15 from './comp15';
 import comp16 from './comp16';
 import comp17 from './comp17';
 import comp18 from './comp18';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18 };
+import comp19 from './comp19';
+export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19 };

package/lib/mjs/components/tags/Tags.js

@@ -82,6 +82,8 @@ export default class TagsComponent extends Input {
         });
         this.choices.itemList.element.tabIndex = element.tabIndex;
         this.addEventListener(this.choices.input.element, 'blur', () => {
+            // Emit event to the native Formio input, so the listener attached in the Input.js will be invoked
+            element.dispatchEvent(new Event('blur'));
             const value = this.choices.input.value;
             const maxTagsNumber = this.component.maxTags;
             const valuesCount = this.choices.getValue(true).length;

package/lib/mjs/components/tags/fixtures/comp6.d.ts

@@ -0,0 +1,17 @@
+declare namespace _default {
+    const type: string;
+    const display: string;
+    const components: {
+        label: string;
+        tableView: boolean;
+        storeas: string;
+        validate: {
+            custom: string;
+        };
+        validateOn: string;
+        key: string;
+        type: string;
+        input: boolean;
+    }[];
+}
+export default _default;

package/lib/mjs/components/tags/fixtures/comp6.js

@@ -0,0 +1,18 @@
+export default {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Tags',
+            tableView: false,
+            storeas: 'array',
+            validate: {
+                custom: "valid = data && data.tags.length <= 2 ? true : 'You cannot add more than 2 items'"
+            },
+            validateOn: 'blur',
+            key: 'tags',
+            type: 'tags',
+            input: true
+        },
+    ]
+};

package/lib/mjs/components/tags/fixtures/index.d.ts

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-rc.21",
+  "version": "5.0.0-rc.22",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",