@formio/js 5.2.3 → 5.2.4-rc.0

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

@@ -5,7 +5,6 @@ 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,
@@ -13,7 +12,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,
@@ -21,7 +20,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,
@@ -29,7 +28,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,
@@ -43,9 +42,9 @@ exports.default = [
         data: {
             values: [
                 { label: 'Change', value: 'change' },
-                { label: 'Blur', value: 'blur' }
-            ]
-        }
+                { label: 'Blur', value: 'blur' },
+            ],
+        },
     },
     {
         weight: 190,
@@ -54,7 +53,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,
@@ -63,7 +62,7 @@ exports.default = [
         placeholder: 'Custom Error Message',
         type: 'textfield',
         tooltip: 'Error message displayed if any error occurred.',
-        input: true
+        input: true,
     },
     {
         type: 'panel',
@@ -85,7 +84,7 @@ exports.default = [
                 editor: 'ace',
                 hideLabel: true,
                 as: 'javascript',
-                input: true
+                input: true,
             },
             {
                 type: 'htmlelement',
@@ -96,7 +95,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',
@@ -108,11 +107,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',
@@ -125,17 +124,22 @@ 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>'
-                /* eslint-enable prefer-template */
+                    '<pre>' +
+                    JSON.stringify({
+                        if: [
+                            {
+                                '===': [
+                                    { var: 'input' },
+                                    'Bob',
+                                ],
+                            },
+                            true,
+                            "Your name must be 'Bob'!",
+                        ],
+                    }, null, 2) +
+                    '</pre>',
             },
             {
                 type: 'textarea',
@@ -144,9 +148,9 @@ exports.default = [
                 rows: 5,
                 editor: 'ace',
                 as: 'json',
-                input: true
-            }
-        ]
+                input: true,
+            },
+        ],
     },
     {
         type: 'panel',
@@ -163,7 +167,7 @@ exports.default = [
                 rows: 5,
                 editor: 'ace',
                 as: 'json',
-                input: true
+                input: true,
             },
             {
                 type: 'htmlelement',
@@ -209,9 +213,8 @@ 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,7 +42,6 @@ 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 +
@@ -57,8 +56,7 @@ 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/>'
-            /* eslint-enable prefer-template */
+                '</table><br/>',
         };
     },
     javaScriptValue(title, property, propertyJSON, weight, exampleHTML, exampleJSON, additionalParams = '', excludeJSONLogic) {
@@ -82,14 +80,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',
@@ -101,11 +99,9 @@ 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
-                        /* eslint-enable prefer-template */
+                            exampleJSON,
                     },
                     {
                         type: 'textarea',
@@ -114,10 +110,10 @@ const EditFormUtils = {
                         editor: 'ace',
                         hideLabel: true,
                         as: 'json',
-                        input: true
-                    }
-                ]
-            }
+                        input: true,
+                    },
+                ],
+            },
         ];
         if (excludeJSONLogic) {
             components.splice(2, 1);
@@ -130,8 +126,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 utils_1 = require("../../../utils");
+const index_1 = require("../../../utils/index");
 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, utils_1.fastCloneDeep)(currentValue !== null && currentValue !== void 0 ? currentValue : this.component.getValue());
+        this.currentValue = (0, index_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, utils_1.fastCloneDeep)(value);
+        this.currentValue = (0, index_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, utils_1.fastCloneDeep)(componentValue), currentValue);
+        return !lodash_1.default.isEqual((0, index_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, utils_1.fastCloneDeep)((_a = this.component.dataValue) !== null && _a !== void 0 ? _a : this.component.getValue());
+        this.currentValue = (0, index_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,7 +36,13 @@ 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 utils_1 = require("../../../utils");
-const widgets_1 = __importDefault(require("../../../widgets"));
+const index_1 = require("../../../utils/index");
+const index_2 = __importDefault(require("../../../widgets/index"));
 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,9 +24,11 @@ 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) {
@@ -50,22 +52,24 @@ 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) => {
@@ -78,8 +82,7 @@ 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,
         }));
@@ -102,11 +105,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, utils_1.convertStringToHTMLElement)(calendarIcon, `[${this._referenceAttributeName}="icon"]`);
+                return (0, index_1.convertStringToHTMLElement)(calendarIcon, `[${this._referenceAttributeName}="icon"]`);
             }
         }
         return this.component.suffix;
@@ -118,8 +121,7 @@ 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;
@@ -139,7 +141,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) {
@@ -153,13 +155,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,
             }));
         }
     }
@@ -202,7 +204,7 @@ class Input extends Multivalue_1.default {
             charcount: 'multiple',
             wordcount: 'multiple',
             prefix: 'multiple',
-            suffix: 'multiple'
+            suffix: 'multiple',
         });
         return super.attach(element);
     }
@@ -256,20 +258,22 @@ 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 (!widgets_1.default.hasOwnProperty(settings.type)) {
+        if (!index_2.default.hasOwnProperty(settings.type)) {
             return null;
         }
         // Create the widget.
-        const widget = new widgets_1.default[settings.type](settings, this.component, this, index);
+        const widget = new index_2.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 utils_1 = require("../../../utils");
+const index_1 = require("../../../utils/index");
 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,9 +29,7 @@ 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;
@@ -51,7 +49,9 @@ 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,9 +60,7 @@ class ListComponent extends Field_1.default {
     }
     getTemplateKeys() {
         const template = this.component.template;
-        this.templateKeys = this.options.readOnly && template
-            ? (0, utils_1.getItemTemplateKeys)(template)
-            : [];
+        this.templateKeys = this.options.readOnly && template ? (0, index_1.getItemTemplateKeys)(template) : [];
     }
     get requestHeaders() {
         // Create the headers object.
@@ -92,7 +90,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)
@@ -140,7 +138,6 @@ 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.`);
@@ -168,13 +165,15 @@ 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 (err) {
+                    catch (ignoreErr) {
                         console.warn(`Unable to load resources for ${this.key}`);
                     }
                 }
@@ -184,7 +183,10 @@ 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;
@@ -195,7 +197,9 @@ 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) {
@@ -221,12 +225,17 @@ 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) => {