@formio/js 5.2.4-rc.0 → 5.2.5

package/lib/cjs/components/_classes/component/editForm/Component.edit.validation.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = __importDefault(require("./utils"));
 const Evaluator_1 = require("../../../../utils/Evaluator");
+/* eslint-disable quotes, max-len */
 exports.default = [
     {
         weight: 10,
@@ -12,7 +13,7 @@ exports.default = [
         label: 'Required',
         tooltip: 'A required field must be filled in before the form can be submitted.',
         key: 'validate.required',
-        input: true,
+        input: true
     },
     {
         weight: 100,
@@ -20,7 +21,7 @@ exports.default = [
         label: 'Unique',
         tooltip: 'Makes sure the data submitted for this field is unique, and has not been submitted before.',
         key: 'unique',
-        input: true,
+        input: true
     },
     {
         weight: 100,
@@ -28,7 +29,7 @@ exports.default = [
         label: 'Validate When Hidden',
         tooltip: 'Validates the component when it is hidden/conditionally hidden. Vaildation errors are displayed in the error alert on the form submission. Use caution when enabling this setting, as it can cause a hidden component to be invalid with no way for the form user to correct it.',
         key: 'validateWhenHidden',
-        input: true,
+        input: true
     },
     {
         weight: 0,
@@ -42,9 +43,9 @@ exports.default = [
         data: {
             values: [
                 { label: 'Change', value: 'change' },
-                { label: 'Blur', value: 'blur' },
-            ],
-        },
+                { label: 'Blur', value: 'blur' }
+            ]
+        }
     },
     {
         weight: 190,
@@ -53,7 +54,7 @@ exports.default = [
         key: 'errorLabel',
         label: 'Error Label',
         placeholder: 'Error Label',
-        tooltip: 'The label for this field when an error occurs.',
+        tooltip: 'The label for this field when an error occurs.'
     },
     {
         weight: 200,
@@ -62,7 +63,7 @@ exports.default = [
         placeholder: 'Custom Error Message',
         type: 'textfield',
         tooltip: 'Error message displayed if any error occurred.',
-        input: true,
+        input: true
     },
     {
         type: 'panel',
@@ -84,7 +85,7 @@ exports.default = [
                 editor: 'ace',
                 hideLabel: true,
                 as: 'javascript',
-                input: true,
+                input: true
             },
             {
                 type: 'htmlelement',
@@ -95,7 +96,7 @@ exports.default = [
             <p>You must assign the <strong>valid</strong> variable as either <strong>true</strong> or an error message if validation fails.</p>
             <h5>Example:</h5>
             <pre>valid = (input === 'Joe') ? true : 'Your name must be "Joe"';</pre>
-          </small>`,
+          </small>`
             },
             {
                 type: 'well',
@@ -107,11 +108,11 @@ exports.default = [
                         tooltip: 'Check this if you wish to perform the validation ONLY on the server side. This keeps your validation logic private and secret.',
                         description: 'Check this if you wish to perform the validation ONLY on the server side. This keeps your validation logic private and secret.',
                         key: 'validate.customPrivate',
-                        input: true,
-                    },
-                ],
-            },
-        ],
+                        input: true
+                    }
+                ]
+            }
+        ]
     },
     {
         type: 'panel',
@@ -124,22 +125,17 @@ exports.default = [
             {
                 type: 'htmlelement',
                 tag: 'div',
+                /* eslint-disable prefer-template */
                 content: '<p>Execute custom logic using <a href="http://jsonlogic.com/" target="_blank" rel="noopener noreferrer">JSONLogic</a>.</p>' +
                     '<h5>Example:</h5>' +
-                    '<pre>' +
-                    JSON.stringify({
-                        if: [
-                            {
-                                '===': [
-                                    { var: 'input' },
-                                    'Bob',
-                                ],
-                            },
-                            true,
-                            "Your name must be 'Bob'!",
-                        ],
-                    }, null, 2) +
-                    '</pre>',
+                    '<pre>' + JSON.stringify({
+                    "if": [
+                        { "===": [{ "var": "input" }, "Bob"] },
+                        true,
+                        "Your name must be 'Bob'!"
+                    ]
+                }, null, 2) + '</pre>'
+                /* eslint-enable prefer-template */
             },
             {
                 type: 'textarea',
@@ -148,9 +144,9 @@ exports.default = [
                 rows: 5,
                 editor: 'ace',
                 as: 'json',
-                input: true,
-            },
-        ],
+                input: true
+            }
+        ]
     },
     {
         type: 'panel',
@@ -167,7 +163,7 @@ exports.default = [
                 rows: 5,
                 editor: 'ace',
                 as: 'json',
-                input: true,
+                input: true
             },
             {
                 type: 'htmlelement',
@@ -213,8 +209,9 @@ exports.default = [
            <li><code>{<span/>{ m<span/>axYear }}</code></li>
            <li><code>{<span/>{ r<span/>egex }}</code></li>
           </ul>
-        `,
-            },
-        ],
-    },
+        `
+            }
+        ]
+    }
 ];
+/* eslint-enable quotes, max-len */

package/lib/cjs/components/_classes/component/editForm/utils.js

@@ -42,6 +42,7 @@ const EditFormUtils = {
         return {
             type: 'htmlelement',
             tag: 'div',
+            /* eslint-disable prefer-template */
             content: '<p>The following variables are available in all scripts.</p>' +
                 '<table class="table table-bordered table-condensed table-striped">' +
                 additional +
@@ -56,7 +57,8 @@ const EditFormUtils = {
                 '<tr><th>_</th><td>An instance of <a href="https://lodash.com/docs/" target="_blank" rel="noopener noreferrer">Lodash</a>.</td></tr>' +
                 '<tr><th>utils</th><td>An instance of the <a href="https://help.form.io/developers/javascript-development/javascript-utilities" target="_blank" rel="noopener noreferrer">FormioUtils</a> object.</td></tr>' +
                 '<tr><th>util</th><td>An alias for "utils".</td></tr>' +
-                '</table><br/>',
+                '</table><br/>'
+            /* eslint-enable prefer-template */
         };
     },
     javaScriptValue(title, property, propertyJSON, weight, exampleHTML, exampleJSON, additionalParams = '', excludeJSONLogic) {
@@ -80,14 +82,14 @@ const EditFormUtils = {
                         editor: 'ace',
                         hideLabel: true,
                         as: 'javascript',
-                        input: true,
+                        input: true
                     },
                     {
                         type: 'htmlelement',
                         tag: 'div',
-                        content: `<p>Enter custom javascript code.</p>${exampleHTML}`,
-                    },
-                ],
+                        content: `<p>Enter custom javascript code.</p>${exampleHTML}`
+                    }
+                ]
             },
             {
                 type: 'panel',
@@ -99,9 +101,11 @@ const EditFormUtils = {
                     {
                         type: 'htmlelement',
                         tag: 'div',
+                        /* eslint-disable prefer-template */
                         content: '<p>Execute custom logic using <a href="http://jsonlogic.com/" target="_blank" rel="noopener noreferrer">JSONLogic</a>.</p>' +
                             '<p>Full <a href="https://lodash.com/docs" target="_blank" rel="noopener noreferrer">Lodash</a> support is provided using an "_" before each operation, such as <code>{"_sum": {var: "data.a"}}</code></p>' +
-                            exampleJSON,
+                            exampleJSON
+                        /* eslint-enable prefer-template */
                     },
                     {
                         type: 'textarea',
@@ -110,10 +114,10 @@ const EditFormUtils = {
                         editor: 'ace',
                         hideLabel: true,
                         as: 'json',
-                        input: true,
-                    },
-                ],
-            },
+                        input: true
+                    }
+                ]
+            }
         ];
         if (excludeJSONLogic) {
             components.splice(2, 1);
@@ -126,8 +130,8 @@ const EditFormUtils = {
             collapsed: true,
             key: `${property}Panel`,
             weight: weight,
-            components,
+            components
         };
-    },
+    }
 };
 exports.default = EditFormUtils;

package/lib/cjs/components/_classes/componentModal/ComponentModal.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
-const index_1 = require("../../../utils/index");
+const utils_1 = require("../../../utils");
 class ComponentModal {
     static render(component, data, topLevel) {
         const children = component.renderTemplate('component', data, topLevel);
@@ -15,7 +15,7 @@ class ComponentModal {
         this.isOpened = isOpened;
         this.component = component;
         this.element = element;
-        this.currentValue = (0, index_1.fastCloneDeep)(currentValue !== null && currentValue !== void 0 ? currentValue : this.component.getValue());
+        this.currentValue = (0, utils_1.fastCloneDeep)(currentValue !== null && currentValue !== void 0 ? currentValue : this.component.getValue());
         this.dataLoaded = false;
         this.init();
     }
@@ -42,7 +42,7 @@ class ComponentModal {
         if (this.dataLoaded && this.currentValue === value) {
             return;
         }
-        this.currentValue = (0, index_1.fastCloneDeep)(value);
+        this.currentValue = (0, utils_1.fastCloneDeep)(value);
         this.dataLoaded = true;
         this.updateView();
     }
@@ -95,13 +95,13 @@ class ComponentModal {
             componentValue = this.component.getValue().data;
             currentValue = this.currentValue.data;
         }
-        return !lodash_1.default.isEqual((0, index_1.fastCloneDeep)(componentValue), currentValue);
+        return !lodash_1.default.isEqual((0, utils_1.fastCloneDeep)(componentValue), currentValue);
     }
     setOpenEventListener() {
         var _a;
         this.component.removeEventListener(this.refs.openModal, 'click', this.openModalListener);
         this.component.loadRefs((_a = this.refs.openModalWrapper) !== null && _a !== void 0 ? _a : this.element, {
-            openModal: 'single',
+            'openModal': 'single',
         });
         this.component.addEventListener(this.refs.openModal, 'click', this.openModalListener);
     }
@@ -178,7 +178,7 @@ class ComponentModal {
     saveModalValueHandler(event) {
         var _a;
         event.preventDefault();
-        this.currentValue = (0, index_1.fastCloneDeep)((_a = this.component.dataValue) !== null && _a !== void 0 ? _a : this.component.getValue());
+        this.currentValue = (0, utils_1.fastCloneDeep)((_a = this.component.dataValue) !== null && _a !== void 0 ? _a : this.component.getValue());
         this.closeModal();
     }
 }

package/lib/cjs/components/_classes/field/Field.js

@@ -36,13 +36,7 @@ class Field extends Component_1.default {
         var _a, _b;
         if (((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.focusedComponent) === null || _b === void 0 ? void 0 : _b.path) === this.path) {
             try {
-                this.root.currentSelection = {
-                    selection: [
-                        element.selectionStart,
-                        element.selectionEnd,
-                    ],
-                    index,
-                };
+                this.root.currentSelection = { selection: [element.selectionStart, element.selectionEnd], index };
             }
             catch (e) {
                 if (!(e instanceof DOMException)) {

package/lib/cjs/components/_classes/input/Input.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const Multivalue_1 = __importDefault(require("../multivalue/Multivalue"));
-const index_1 = require("../../../utils/index");
-const index_2 = __importDefault(require("../../../widgets/index"));
+const utils_1 = require("../../../utils");
+const widgets_1 = __importDefault(require("../../../widgets"));
 const lodash_1 = __importDefault(require("lodash"));
 class Input extends Multivalue_1.default {
     constructor(component, options, data) {
@@ -15,8 +15,8 @@ class Input extends Multivalue_1.default {
     static schema(...extend) {
         return Multivalue_1.default.schema({
             widget: {
-                type: 'input',
-            },
+                type: 'input'
+            }
         }, ...extend);
     }
     get inputInfo() {
@@ -24,11 +24,9 @@ class Input extends Multivalue_1.default {
             name: this.options.name,
             type: this.component.inputType || 'text',
             class: 'form-control',
-            lang: this.options.language,
+            lang: this.options.language
         };
-        if (this.options.attachMode === 'builder' ||
-            this.options.building ||
-            lodash_1.default.get(this.root, 'form.settings.disableAutocomplete')) {
+        if (this.options.attachMode === 'builder' || this.options.building || lodash_1.default.get(this.root, 'form.settings.disableAutocomplete')) {
             attr.autocomplete = this.autocompleteDisableAttrName;
         }
         if (this.component.inputMode) {
@@ -52,24 +50,22 @@ class Input extends Multivalue_1.default {
             type: 'input',
             changeEvent: 'input',
             content: '',
-            attr,
+            attr
         };
     }
     get autocompleteDisableAttrName() {
         return 'off';
     }
     get maskOptions() {
-        return lodash_1.default.map(this.component.inputMasks, (mask) => {
+        return lodash_1.default.map(this.component.inputMasks, mask => {
             return {
                 label: mask.label,
-                value: mask.label,
+                value: mask.label
             };
         });
     }
     get isMultipleMasksField() {
-        return (this.component.allowMultipleMasks &&
-            !!this.component.inputMasks &&
-            !!this.component.inputMasks.length);
+        return this.component.allowMultipleMasks && !!this.component.inputMasks && !!this.component.inputMasks.length;
     }
     getMaskByName(maskName) {
         const inputMask = lodash_1.default.find(this.component.inputMasks, (inputMask) => {
@@ -82,7 +78,8 @@ class Input extends Multivalue_1.default {
         return super.setInputMask(input, mask, !this.component.placeholder);
     }
     getMaskOptions() {
-        return this.component.inputMasks.map((mask) => ({
+        return this.component.inputMasks
+            .map(mask => ({
             label: mask.label,
             value: mask.label,
         }));
@@ -105,11 +102,11 @@ class Input extends Multivalue_1.default {
                 // After font-awesome would be updated to v5.x, "clock-o" should be replaced with "clock"
                 className: this.iconClass(this.component.enableDate || this.component.widget.enableDate ? 'calendar' : 'clock-o'),
                 styles: '',
-                content: '',
+                content: ''
             }).trim();
             if (this.component.prefix !== calendarIcon) {
                 // converting string to HTML markup to render correctly DateTime component in portal.form.io
-                return (0, index_1.convertStringToHTMLElement)(calendarIcon, `[${this._referenceAttributeName}="icon"]`);
+                return (0, utils_1.convertStringToHTMLElement)(calendarIcon, `[${this._referenceAttributeName}="icon"]`);
             }
         }
         return this.component.suffix;
@@ -121,7 +118,8 @@ class Input extends Multivalue_1.default {
         }
         const info = this.inputInfo;
         info.attr = info.attr || {};
-        info.attr.value = this.getValueAsString(this.formatValue(this.parseValue(value))).replace(/"/g, '"');
+        info.attr.value = this.getValueAsString(this.formatValue(this.parseValue(value)))
+            .replace(/"/g, '"');
         const valueMask = this.component.inputMask;
         const displayMask = this.component.displayMask;
         const hasDifferentDisplayAndSaveFormats = valueMask && displayMask && valueMask !== displayMask;
@@ -141,7 +139,7 @@ class Input extends Multivalue_1.default {
                 input: info,
                 value: this.formatValue(this.parseValue(value)),
                 hasValueMaskInput: hasDifferentDisplayAndSaveFormats,
-                index,
+                index
             }, this.isHtmlRenderMode() ? 'html' : null);
     }
     setCounter(type, element, count, max) {
@@ -155,13 +153,13 @@ class Input extends Multivalue_1.default {
             }
             this.setContent(element, this.t(`typeRemaining`, {
                 remaining: remaining,
-                type: type,
+                type: type
             }));
         }
         else {
             this.setContent(element, this.t(`typeCount`, {
                 count: count,
-                type: type,
+                type: type
             }));
         }
     }
@@ -204,7 +202,7 @@ class Input extends Multivalue_1.default {
             charcount: 'multiple',
             wordcount: 'multiple',
             prefix: 'multiple',
-            suffix: 'multiple',
+            suffix: 'multiple'
         });
         return super.attach(element);
     }
@@ -258,22 +256,20 @@ class Input extends Multivalue_1.default {
             return null;
         }
         // Get the widget settings.
-        const settings = typeof this.component.widget === 'string'
-            ? {
-                type: this.component.widget,
-            }
-            : this.component.widget;
+        const settings = (typeof this.component.widget === 'string') ? {
+            type: this.component.widget
+        } : this.component.widget;
         if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.shadowRoot) {
             settings.shadowRoot = (_b = this.root) === null || _b === void 0 ? void 0 : _b.shadowRoot;
         }
         // Make sure we have a widget.
-        if (!index_2.default.hasOwnProperty(settings.type)) {
+        if (!widgets_1.default.hasOwnProperty(settings.type)) {
             return null;
         }
         // Create the widget.
-        const widget = new index_2.default[settings.type](settings, this.component, this, index);
+        const widget = new widgets_1.default[settings.type](settings, this.component, this, index);
         widget.on('update', () => this.updateValue(this.getValue(), {
-            modified: true,
+            modified: true
         }, index), true);
         widget.on('redraw', () => this.redraw(), true);
         return widget;

package/lib/cjs/components/_classes/list/ListComponent.form.js

@@ -14,7 +14,7 @@ function default_1(...extend) {
     return Components_1.default.baseEditForm([
         {
             key: 'data',
-            components: ListComponent_edit_data_1.default,
+            components: ListComponent_edit_data_1.default
         },
     ], ...extend);
 }

package/lib/cjs/components/_classes/list/ListComponent.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Field_1 = __importDefault(require("../field/Field"));
 const Formio_1 = require("../../../Formio");
 const lodash_1 = __importDefault(require("lodash"));
-const index_1 = require("../../../utils/index");
+const utils_1 = require("../../../utils");
 class ListComponent extends Field_1.default {
     static schema(...extend) {
         return Field_1.default.schema({
@@ -15,7 +15,7 @@ class ListComponent extends Field_1.default {
             ignoreCache: false,
             template: '<span>{{ item.label }}</span>',
             validate: {
-                onlyAvailableItems: false,
+                onlyAvailableItems: false
             },
         }, ...extend);
     }
@@ -29,7 +29,9 @@ class ListComponent extends Field_1.default {
     get dataReady() {
         // If the root submission has been set, and we are still not attached, then assume
         // that our data is ready.
-        if ((this.root && this.root.submissionSet && !this.attached) || !this.visible) {
+        if ((this.root &&
+            this.root.submissionSet &&
+            !this.attached) || !this.visible) {
             return Promise.resolve();
         }
         return this.itemsLoaded;
@@ -49,9 +51,7 @@ class ListComponent extends Field_1.default {
             const selectData = this.selectData;
             return this.templateKeys.reduce((shouldLoad, key) => {
                 const hasValue = lodash_1.default.has(dataValue, key) ||
-                    (lodash_1.default.isArray(selectData)
-                        ? selectData.every((data) => lodash_1.default.has(data, key))
-                        : lodash_1.default.has(selectData, key));
+                    (lodash_1.default.isArray(selectData) ? selectData.every((data) => lodash_1.default.has(data, key)) : lodash_1.default.has(selectData, key));
                 return shouldLoad || !hasValue;
             }, false);
         }
@@ -60,7 +60,9 @@ class ListComponent extends Field_1.default {
     }
     getTemplateKeys() {
         const template = this.component.template;
-        this.templateKeys = this.options.readOnly && template ? (0, index_1.getItemTemplateKeys)(template) : [];
+        this.templateKeys = this.options.readOnly && template
+            ? (0, utils_1.getItemTemplateKeys)(template)
+            : [];
     }
     get requestHeaders() {
         // Create the headers object.
@@ -90,7 +92,7 @@ class ListComponent extends Field_1.default {
         }
         const options = {
             noeval: true,
-            data: {},
+            data: {}
         };
         const template = this.sanitize(this.component.template
             ? this.interpolate(this.component.template, { item: data }, options)
@@ -138,6 +140,7 @@ class ListComponent extends Field_1.default {
         });
         console.warn(`Unable to load resources for ${this.key}`);
     }
+    /* eslint-disable max-statements */
     updateItems(searchInput, forceUpdate) {
         if (!this.component.data) {
             console.warn(`Select component ${this.key} does not have data configuration.`);
@@ -165,15 +168,13 @@ class ListComponent extends Field_1.default {
                     this.itemsLoadedResolve();
                     return;
                 }
-                let resourceUrl = this.options.formio
-                    ? this.options.formio.formsUrl
-                    : `${Formio_1.Formio.getProjectUrl()}/form`;
-                resourceUrl += `/${this.component.data.resource}/submission`;
+                let resourceUrl = this.options.formio ? this.options.formio.formsUrl : `${Formio_1.Formio.getProjectUrl()}/form`;
+                resourceUrl += (`/${this.component.data.resource}/submission`);
                 if (forceUpdate || this.additionalResourcesAvailable || !this.serverCount) {
                     try {
                         this.loadItems(resourceUrl, searchInput, this.requestHeaders);
                     }
-                    catch (ignoreErr) {
+                    catch (err) {
                         console.warn(`Unable to load resources for ${this.key}`);
                     }
                 }
@@ -183,10 +184,7 @@ class ListComponent extends Field_1.default {
                 break;
             }
             case 'url': {
-                if (!forceUpdate &&
-                    !this.active &&
-                    !this.calculatedValue &&
-                    this.component.type === 'select') {
+                if (!forceUpdate && !this.active && !this.calculatedValue && this.component.type === 'select') {
                     // If we are lazyLoading, wait until activated.
                     this.itemsLoadedResolve();
                     return;
@@ -197,9 +195,7 @@ class ListComponent extends Field_1.default {
                 let body;
                 if (url.startsWith('/')) {
                     // if URL starts with '/project', we should use base URL to avoid issues with URL formed like <base_url>/<project_name>/project/<project_id>/...
-                    const baseUrl = url.startsWith('/project')
-                        ? Formio_1.Formio.getBaseUrl()
-                        : Formio_1.Formio.getProjectUrl() || Formio_1.Formio.getBaseUrl();
+                    const baseUrl = url.startsWith('/project') ? Formio_1.Formio.getBaseUrl() : Formio_1.Formio.getProjectUrl() || Formio_1.Formio.getBaseUrl();
                     url = baseUrl + url;
                 }
                 if (!this.component.data.method) {
@@ -225,17 +221,12 @@ class ListComponent extends Field_1.default {
                 if (!window.indexedDB) {
                     window.alert("Your browser doesn't support current version of indexedDB");
                 }
-                if (this.component.indexeddb &&
-                    this.component.indexeddb.database &&
-                    this.component.indexeddb.table) {
+                if (this.component.indexeddb && this.component.indexeddb.database && this.component.indexeddb.table) {
                     const request = window.indexedDB.open(this.component.indexeddb.database);
                     request.onupgradeneeded = (event) => {
                         if (this.component.customOptions) {
                             const db = event.target.result;
-                            const objectStore = db.createObjectStore(this.component.indexeddb.table, {
-                                keyPath: 'myKey',
-                                autoIncrement: true,
-                            });
+                            const objectStore = db.createObjectStore(this.component.indexeddb.table, { keyPath: 'myKey', autoIncrement: true });
                             objectStore.transaction.oncomplete = () => {
                                 const transaction = db.transaction(this.component.indexeddb.table, 'readwrite');
                                 this.component.customOptions.forEach((item) => {