@formio/js 5.0.0-rc.18 → 5.0.0-rc.20

package/lib/cjs/validator/Validator.d.ts

@@ -21,7 +21,7 @@ export class ValidationChecker {
             key: string;
             hasLabel: boolean;
             message(component: any): any;
-            check(component: any, setting: any, value: any): any;
+            check(component: any, setting: any, value: any): true | Promise<any>;
         };
         multiple: {
             key: string;
@@ -170,7 +170,35 @@ export class ValidationChecker {
         };
     };
     checkValidator(component: any, validator: any, setting: any, value: any, data: any, index: any, row: any, async: any): any;
-    validate(component: any, validatorName: any, value: any, data: any, index: any, row: any, async: any, conditionallyVisible: any, validationObj: any): any;
+    validate(component: any, validatorName: any, value: any, data: any, index: any, row: any, async: any, conditionallyVisible: any, validationObj: any): false | {
+        message: string;
+        level: string;
+        path: any;
+        context: {
+            validator: any;
+            hasLabel: any;
+            setting: any;
+            key: any;
+            label: any;
+            value: any;
+            index: any;
+            input: any;
+        };
+    } | Promise<false | {
+        message: string;
+        level: string;
+        path: any;
+        context: {
+            validator: any;
+            hasLabel: any;
+            setting: any;
+            key: any;
+            label: any;
+            value: any;
+            index: any;
+            input: any;
+        };
+    }>;
     checkComponent(component: any, data: any, row: any, includeWarnings?: boolean, async?: boolean): any;
     /**
      * Use the new validations engine to evaluate any errors.

package/lib/cjs/validator/Validator.js

@@ -7,10 +7,9 @@ exports.ValidationChecker = exports.default = void 0;
 const lodash_1 = __importDefault(require("lodash"));
 const utils_1 = require("../utils/utils");
 const moment_1 = __importDefault(require("moment"));
-const native_promise_only_1 = __importDefault(require("native-promise-only"));
 const fetch_ponyfill_1 = __importDefault(require("fetch-ponyfill"));
 const { fetch, Headers, Request } = (0, fetch_ponyfill_1.default)({
-    Promise: native_promise_only_1.default
+    Promise: Promise
 });
 const calendarUtils_1 = require("../utils/calendarUtils");
 const Rules_1 = __importDefault(require("./Rules"));
@@ -75,7 +74,8 @@ class ValidationChecker {
                     if (!this.config.db) {
                         return true;
                     }
-                    return new native_promise_only_1.default(resolve => {
+                    return new Promise(resolve => {
+                        var _a;
                         const form = this.config.form;
                         const submission = this.config.submission;
                         const path = `data.${component.path}`;
@@ -101,10 +101,19 @@ class ValidationChecker {
                         };
                         // Build the query
                         const query = { form: form._id };
+                        let collationOptions = {};
                         if (lodash_1.default.isString(value)) {
                             if (component.component.dbIndex) {
                                 addPathQueryParams(value, query, path);
                             }
+                            // These are kind of hacky but provides for a more efficient "unique" validation when the string is an email,
+                            // because we (by and large) only have to worry about ASCII and partial unicode; this way, we can use collation-
+                            // aware indexes with case insensitive email searches to make things like login and registration a whole lot faster
+                            else if (component.component.type === 'email' ||
+                                (component.component.type === 'textfield' && ((_a = component.component.validate) === null || _a === void 0 ? void 0 : _a.pattern) === '[A-Za-z0-9]+')) {
+                                addPathQueryParams(value, query, path);
+                                collationOptions = { collation: { locale: 'en', strength: 2 } };
+                            }
                             else {
                                 addPathQueryParams({
                                     $regex: new RegExp(`^${(0, utils_1.escapeRegExCharacters)(value)}$`),
@@ -132,8 +141,7 @@ class ValidationChecker {
                         // Only search for non-deleted items
                         query.deleted = { $eq: null };
                         query.state = 'submitted';
-                        // Try to find an existing value within the form
-                        this.config.db.findOne(query, (err, result) => {
+                        const uniqueValidationCallback = (err, result) => {
                             if (err) {
                                 return resolve(false);
                             }
@@ -150,6 +158,21 @@ class ValidationChecker {
                             else {
                                 return resolve(true);
                             }
+                        };
+                        // Try to find an existing value within the form
+                        this.config.db.findOne(query, null, collationOptions, (err, result) => {
+                            if (err && collationOptions.collation) {
+                                // presume this error comes from db compatibility, try again as regex
+                                delete query[path];
+                                addPathQueryParams({
+                                    $regex: new RegExp(`^${(0, utils_1.escapeRegExCharacters)(value)}$`),
+                                    $options: 'i'
+                                }, query, path);
+                                this.config.db.findOne(query, uniqueValidationCallback);
+                            }
+                            else {
+                                return uniqueValidationCallback(err, result);
+                            }
                         });
                     }).catch(() => false);
                 }
@@ -825,7 +848,7 @@ class ValidationChecker {
             return '';
         };
         if (async) {
-            return native_promise_only_1.default.resolve(resultOrPromise).then(processResult);
+            return Promise.resolve(resultOrPromise).then(processResult);
         }
         else {
             return processResult(resultOrPromise);
@@ -867,7 +890,7 @@ class ValidationChecker {
             }
         };
         if (async) {
-            return native_promise_only_1.default.resolve(resultOrPromise).then(processResult);
+            return Promise.resolve(resultOrPromise).then(processResult);
         }
         else {
             return processResult(resultOrPromise);
@@ -880,7 +903,7 @@ class ValidationChecker {
             && !lodash_1.default.defaultTo(component.component.persistent, true);
         // If we're server-side and it's not a persistent component, don't run validation at all
         if (isServerSidePersistent || component.component.validate === false) {
-            return async ? native_promise_only_1.default.resolve([]) : [];
+            return async ? Promise.resolve([]) : [];
         }
         data = data || component.rootValue;
         row = row || component.data;
@@ -1001,7 +1024,7 @@ class ValidationChecker {
         };
         // Wait for results if using async mode, otherwise process and return immediately
         if (async) {
-            return native_promise_only_1.default.all(resultsOrPromises).then(formatResults);
+            return Promise.all(resultsOrPromises).then(formatResults);
         }
         else {
             return formatResults(resultsOrPromises);

package/lib/cjs/validator/rules/Select.js

@@ -4,10 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = require("../../utils/utils");
-const native_promise_only_1 = __importDefault(require("native-promise-only"));
 const fetch_ponyfill_1 = __importDefault(require("fetch-ponyfill"));
 const { fetch, Headers, Request } = (0, fetch_ponyfill_1.default)({
-    Promise: native_promise_only_1.default
+    Promise: Promise
 });
 const lodash_1 = __importDefault(require("lodash"));
 const Rule_1 = __importDefault(require("./Rule"));

package/lib/cjs/validator/rules/Unique.d.ts

@@ -1,5 +1,5 @@
 export default class Unique extends Rule {
     defaultMessage: string;
-    check(value: any): any;
+    check(value: any): true | Promise<any>;
 }
 import Rule from './Rule';

package/lib/cjs/validator/rules/Unique.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = require("../../utils/utils");
 const lodash_1 = __importDefault(require("lodash"));
-const native_promise_only_1 = __importDefault(require("native-promise-only"));
 const Rule_1 = __importDefault(require("./Rule"));
 class Unique extends Rule_1.default {
     constructor() {
@@ -21,7 +20,7 @@ class Unique extends Rule_1.default {
         if (!this.config.db) {
             return true;
         }
-        return new native_promise_only_1.default(resolve => {
+        return new Promise(resolve => {
             const form = this.config.form;
             const submission = this.config.submission;
             const path = `data.${this.component.path}`;

package/lib/cjs/widgets/CalendarWidget.d.ts

@@ -30,6 +30,7 @@ export default class CalendarWidget extends InputWidget {
      * @return {boolean} TRUE if the zones are loading, FALSE otherwise.
      */
     loadZones(): boolean;
+    attach(input: any): Promise<any>;
     defaultFormat: {
         date: string;
         time: string;

package/lib/cjs/widgets/InputWidget.d.ts

@@ -8,7 +8,7 @@ export default class InputWidget extends Element {
     namespace: string;
     component: any;
     settings: any;
-    attach(input: any): any;
+    attach(input: any): Promise<void>;
     _input: any;
     get defaultSettings(): {};
     set disabled(arg: any);

package/lib/cjs/widgets/InputWidget.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const Element_1 = __importDefault(require("../Element"));
-const native_promise_only_1 = __importDefault(require("native-promise-only"));
 class InputWidget extends Element_1.default {
     static get defaultSettings() {
         return {
@@ -22,7 +21,7 @@ class InputWidget extends Element_1.default {
     }
     attach(input) {
         this._input = input;
-        return native_promise_only_1.default.resolve();
+        return Promise.resolve();
     }
     get defaultSettings() {
         return {};

package/lib/mjs/CDN.js

@@ -11,7 +11,7 @@ class CDN {
             'bootstrap': '4.6.2',
             'ckeditor': '19.0.0',
             'flatpickr': '4.6.8',
-            'flatpickr-formio': '4.6.13-formio.2',
+            'flatpickr-formio': '4.6.13-formio.3',
             'font-awesome': '4.7.0',
             'grid': 'latest',
             'moment-timezone': 'latest',

package/lib/mjs/Element.js

@@ -1,7 +1,7 @@
 import EventEmitter from './EventEmitter';
 import { Formio } from './Formio';
 import * as FormioUtils from './utils/utils';
-import i18next from 'i18next';
+import { I18n } from './utils/i18n';
 import _ from 'lodash';
 import moment from 'moment';
 import maskInput from '@formio/vanilla-text-mask';
@@ -34,7 +34,11 @@ export default class Element {
          */
         this.eventHandlers = [];
         // Use the i18next that is passed in, otherwise use the global version.
-        this.i18next = this.options.i18next || i18next;
+        this.options.i18n = this.options.i18n || {};
+        if (this.options?.language) {
+            this.options.i18n.language = this.options.language;
+        }
+        this.options.i18next = this.i18next = this.options.i18next || I18n.init(this.options.i18n);
         /**
          * An instance of the EventEmitter class to handle the emitting and registration of events.
          *

package/lib/mjs/Embed.js

@@ -205,7 +205,10 @@ export function embed(config = {}) {
                 debug('Creating form', form, config.config);
                 isReady.then(() => {
                     Formio.license = true;
-                    Formio.createForm(formElement, form, config.config).then((instance) => {
+                    Formio.createForm(formElement, form, {
+                        ...config.config,
+                        ...{ noLoader: true }
+                    }).then((instance) => {
                         const submitDone = (submission) => {
                             debug('Submision Complete', submission);
                             let returnUrl = config.redirect;

package/lib/mjs/Form.d.ts

@@ -1,5 +1,5 @@
 export default class Form extends Element {
-    static embed(embed: any): any;
+    static embed(embed: any): Promise<any>;
     /**
      * Creates an easy to use interface for embedding webforms, pdfs, and wizards into your application.
      *
@@ -17,13 +17,16 @@ export default class Form extends Element {
      * form.build();
      */
     constructor(...args: any[]);
-    ready: any;
-    readyResolve: any;
-    readyReject: any;
+    ready: Promise<any>;
+    readyResolve: (value: any) => void;
+    readyReject: (reason?: any) => void;
     instance: any;
     element: any;
     options: any;
     display: string;
+    createElement(tag: any, attrs: any, children: any): any;
+    set loading(arg: any);
+    loader: any;
     /**
      * Create a new form instance provided the display of the form.
      *
@@ -84,7 +87,7 @@ export default class Form extends Element {
      * @return {Promise<T>}
      */
     build(): Promise<T>;
-    render(): any;
+    render(): Promise<any>;
     attach(element: any): any;
 }
 import Element from './Element';

package/lib/mjs/Form.js

@@ -3,7 +3,6 @@ import { Formio } from './Formio';
 import Displays from './displays';
 import templates from './templates';
 import * as FormioUtils from './utils/utils';
-import NativePromise from 'native-promise-only';
 export default class Form extends Element {
     /**
      * Creates an easy to use interface for embedding webforms, pdfs, and wizards into your application.
@@ -30,7 +29,7 @@ export default class Form extends Element {
         if (this.options.useSessionToken) {
             Formio.useSessionToken(this.options);
         }
-        this.ready = new NativePromise((resolve, reject) => {
+        this.ready = new Promise((resolve, reject) => {
             this.readyResolve = resolve;
             this.readyReject = reject;
         });
@@ -61,6 +60,47 @@ export default class Form extends Element {
         }
         this.display = '';
     }
+    createElement(tag, attrs, children) {
+        const element = document.createElement(tag);
+        for (const attr in attrs) {
+            if (attrs.hasOwnProperty(attr)) {
+                element.setAttribute(attr, attrs[attr]);
+            }
+        }
+        (children || []).forEach(child => {
+            element.appendChild(this.createElement(child.tag, child.attrs, child.children));
+        });
+        return element;
+    }
+    set loading(load) {
+        if (!this.element || this.options.noLoader) {
+            return;
+        }
+        if (load) {
+            if (this.loader) {
+                return;
+            }
+            this.loader = this.createElement('div', {
+                'class': 'formio-loader'
+            }, [{
+                    tag: 'div',
+                    attrs: {
+                        class: 'loader-wrapper'
+                    },
+                    children: [{
+                            tag: 'div',
+                            attrs: {
+                                class: 'loader text-center'
+                            }
+                        }]
+                }]);
+            this.element.appendChild(this.loader);
+        }
+        else if (this.loader) {
+            this.element.removeChild(this.loader);
+            this.loader = null;
+        }
+    }
     /**
      * Create a new form instance provided the display of the form.
      *
@@ -116,6 +156,7 @@ export default class Form extends Element {
         if (typeof formParam === 'string') {
             const formio = new Formio(formParam);
             let error;
+            this.loading = true;
             result = this.getSubmission(formio, this.options)
                 .catch((err) => {
                 error = err;
@@ -131,6 +172,7 @@ export default class Form extends Element {
                     if (error) {
                         form = this.errorForm(error);
                     }
+                    this.loading = false;
                     this.instance = this.instance || this.create(form.display);
                     this.instance.url = formParam;
                     this.instance.nosubmit = false;
@@ -163,7 +205,7 @@ export default class Form extends Element {
         if (formio.submissionId) {
             return formio.loadSubmission(null, opts);
         }
-        return NativePromise.resolve();
+        return Promise.resolve();
     }
     /**
      * Returns the loaded forms JSON.
@@ -181,7 +223,7 @@ export default class Form extends Element {
      */
     setDisplay(display) {
         if ((this.display === display) && this.instance) {
-            return NativePromise.resolve(this.instance);
+            return Promise.resolve(this.instance);
         }
         this.form.display = display;
         this.instance.destroy();
@@ -196,7 +238,7 @@ export default class Form extends Element {
         }
     }
     static embed(embed) {
-        return new NativePromise((resolve) => {
+        return new Promise((resolve) => {
             if (!embed || !embed.src) {
                 resolve();
             }
@@ -243,10 +285,10 @@ export default class Form extends Element {
      */
     build() {
         if (!this.instance) {
-            return NativePromise.reject('Form not ready. Use form.ready promise');
+            return Promise.reject('Form not ready. Use form.ready promise');
         }
         if (!this.element) {
-            return NativePromise.reject('No DOM element for form.');
+            return Promise.reject('No DOM element for form.');
         }
         // Add temporary loader.
         const template = (this.options && this.options.template) ? this.options.template : 'bootstrap';
@@ -263,9 +305,9 @@ export default class Form extends Element {
     }
     render() {
         if (!this.instance) {
-            return NativePromise.reject('Form not ready. Use form.ready promise');
+            return Promise.reject('Form not ready. Use form.ready promise');
         }
-        return NativePromise.resolve(this.instance.render())
+        return Promise.resolve(this.instance.render())
             .then((param) => {
             this.emit('render', param);
             return param;
@@ -273,7 +315,7 @@ export default class Form extends Element {
     }
     attach(element) {
         if (!this.instance) {
-            return NativePromise.reject('Form not ready. Use form.ready promise');
+            return Promise.reject('Form not ready. Use form.ready promise');
         }
         if (this.element) {
             delete this.element.component;

package/lib/mjs/PDF.d.ts

@@ -4,9 +4,10 @@ export default class PDF extends Webform {
     init(): void;
     submitButton: any;
     attachComponents(element: any, components: any, container: any): Promise<void>;
-    iframeReady: any;
-    iframeReadyResolve: any;
-    iframeReadyReject: any;
+    attach(element: any): Promise<void>;
+    iframeReady: Promise<any> | undefined;
+    iframeReadyResolve: ((value: any) => void) | undefined;
+    iframeReadyReject: ((reason?: any) => void) | undefined;
     iframeElement: any;
     /**
      * Get the submission from the iframe.
@@ -14,6 +15,13 @@ export default class PDF extends Webform {
      * @return {Promise<any>}
      */
     getSubmission(): Promise<any>;
+    /**
+     * Ensure we have the submission from the iframe before we submit the form.
+     *
+     * @param options
+     * @return {*}
+     */
+    submitForm(options?: {}): any;
     getSrc(): string;
     setForm(form: any, flags?: {}): any;
     /**

package/lib/mjs/PDF.js

@@ -1,4 +1,3 @@
-import NativePromise from 'native-promise-only';
 import { Formio } from './Formio';
 import Webform from './Webform';
 import { fastCloneDeep, eachComponent } from './utils/utils';
@@ -56,7 +55,7 @@ export default class PDF extends Webform {
     }
     redraw() {
         this.postMessage({ name: 'redraw' });
-        return this.builderMode ? NativePromise.resolve() : super.redraw();
+        return this.builderMode ? Promise.resolve() : super.redraw();
     }
     destroy(all = false) {
         if (this.iframeElement) {
@@ -69,7 +68,7 @@ export default class PDF extends Webform {
         if (this.attached && this.builderMode && this.component.components) {
             this.destroyComponents();
             this.addComponents();
-            return NativePromise.resolve();
+            return Promise.resolve();
         }
         this.postMessage({ name: 'redraw' });
         return super.rebuild();
@@ -94,7 +93,7 @@ export default class PDF extends Webform {
             this.submitButton.refs = { ...this.refs };
             this.submitButton.attachButton();
             // Reset the iframeReady promise.
-            this.iframeReady = new NativePromise((resolve, reject) => {
+            this.iframeReady = new Promise((resolve, reject) => {
                 this.iframeReadyResolve = resolve;
                 this.iframeReadyReject = reject;
             });
@@ -143,7 +142,7 @@ export default class PDF extends Webform {
      * @return {Promise<any>}
      */
     getSubmission() {
-        return new NativePromise((resolve) => {
+        return new Promise((resolve) => {
             this.once('iframe-submission', resolve);
             this.postMessage({ name: 'getSubmission' });
         });

package/lib/mjs/PDFBuilder.js

@@ -1,5 +1,4 @@
 import _ from 'lodash';
-import NativePromise from 'native-promise-only';
 import { Formio } from './Formio';
 import WebformBuilder from './WebformBuilder';
 import { fastCloneDeep, getElementRect, getBrowserInfo } from './utils/utils';
@@ -152,7 +151,7 @@ export default class PDFBuilder extends WebformBuilder {
                     this.refs.hiddenFileInputElement.value = '';
                 });
             }
-            return NativePromise.resolve();
+            return Promise.resolve();
         }
         // Normal PDF Builder
         return super.attach(element).then(() => {
@@ -411,7 +410,7 @@ export default class PDFBuilder extends WebformBuilder {
         if (!this.dropEvent) {
             // a 'drop' event may not be emited in the chrome browser when using a Mac, therefore an additional check has been added
             // eslint-disable-next-line no-undef
-            if (!this.dropEmitted && getBrowserInfo().chrome && globalThis.navigator.userAgentData.platform === 'macOS' && iframeRect.left < e.clientX && iframeRect.top < e.clientY) {
+            if (!this.dropEmitted && (getBrowserInfo().chrome || getBrowserInfo().edge) && globalThis.navigator.userAgentData.platform === 'macOS' && iframeRect.left < e.clientX && iframeRect.top < e.clientY) {
                 this.dropEvent = e;
                 this.dropEvent.dataTransfer.effectAllowed = 'all';
                 this.dropEmitted = true;

package/lib/mjs/Webform.d.ts

@@ -132,11 +132,6 @@ declare class Webform extends NestedDataComponent {
      * @return {*}
      */
     addLanguage(code: any, lang: any, active?: boolean): any;
-    /**
-     * Perform the localization initialization.
-     * @returns {*}
-     */
-    localize(): any;
     keyboardCatchableElement(element: any): boolean;
     executeShortcuts: (event: any) => void;
     /**
@@ -308,6 +303,8 @@ declare class Webform extends NestedDataComponent {
     build(element: any): Promise<any>;
     getClassName(): string;
     render(): any;
+    redraw(): Promise<void> | Promise<boolean>;
+    attach(element: any): Promise<boolean>;
     hasRequiredFields(): boolean;
     /**
      * Sets a new alert to display in the error dialog of the form.
@@ -365,10 +362,10 @@ declare class Webform extends NestedDataComponent {
      */
     cancel(noconfirm: any): boolean;
     setMetadata(submission: any): void;
-    submitForm(options?: {}): any;
+    submitForm(options?: {}): Promise<any>;
     setServerErrors(error: any): void;
     serverErrors: any;
-    executeSubmit(options: any): any;
+    executeSubmit(options: any): Promise<object>;
     submissionInProcess: boolean | undefined;
     clearServerErrors(): void;
     /**