@formio/js 5.0.0-bb.dev.6 → 5.0.0-dev.5543.201e658

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

@@ -10,9 +10,9 @@
  * MIT licensed
  */
 
-/*! @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 */
+/*! @license DOMPurify 3.0.9 | (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.9/LICENSE */
 
-/*! formiojs v5.0.0-bb.dev.5 | https://unpkg.com/formiojs@5.0.0-bb.dev.5/LICENSE.txt */
+/*! formiojs v5.0.0-rc.27 | https://unpkg.com/formiojs@5.0.0-rc.27/LICENSE.txt */
 
 /**
  * @license
@@ -33,4 +33,4 @@
 
 //! moment.js
 
-//! version : 0.5.43
+//! version : 0.5.45

package/lib/cjs/Form.js

@@ -125,9 +125,7 @@ class Form extends Element_1.default {
             this.element.appendChild(this.loader);
         }
         else if (this.loader) {
-            if (this.element.contains(this.loader)) {
-                this.element.removeChild(this.loader);
-            }
+            this.element.removeChild(this.loader);
             this.loader = null;
         }
     }
@@ -364,3 +362,18 @@ class Form extends Element_1.default {
     }
 }
 exports.default = Form;
+// Allow simple embedding.
+Formio_1.Formio.embedForm = (embed) => Form.embed(embed);
+/**
+ * Factory that creates a new form based on the form parameters.
+ *
+ * @param element {HMTLElement} - The HTML Element to add this form to.
+ * @param form {string|Object} - The src of the form, or a form object.
+ * @param options {Object} - The options to create this form.
+ *
+ * @return {Promise} - When the form is instance is ready.
+ */
+Formio_1.Formio.createForm = (...args) => {
+    return (new Form(...args)).ready;
+};
+Formio_1.Formio.Form = Form;

package/lib/cjs/Webform.d.ts

@@ -282,6 +282,7 @@ declare class Webform extends NestedDataComponent {
      * @return {Promise.<TResult>}
      */
     setSubmission(submission: any, flags?: {}): Promise<TResult>;
+    handleDraftError(errName: any, errDetails: any, restoreDraft: any): void;
     /**
      * Saves a submission draft.
      */

package/lib/cjs/Webform.js

@@ -215,11 +215,13 @@ class Webform extends NestedDataComponent_1.default {
         this.language = this.i18next.language;
         // See if we need to restore the draft from a user.
         if (this.options.saveDraft && !this.options.skipDraftRestore) {
-            const user = Formio_1.Formio.getUser();
-            // Only restore a draft if the submission isn't explicitly set.
-            if (user && !this.submissionSet) {
-                this.restoreDraft(user._id);
-            }
+            this.formReady.then(() => {
+                const user = Formio_1.Formio.getUser();
+                // Only restore a draft if the submission isn't explicitly set.
+                if (user && !this.submissionSet) {
+                    this.restoreDraft(user._id);
+                }
+            });
         }
         this.component.clearOnHide = false;
         // Ensure the root is set to this component.
@@ -538,6 +540,10 @@ class Webform extends NestedDataComponent_1.default {
         if (form && form.properties) {
             this.options.properties = form.properties;
         }
+        // Use the sanitize config from the form settings or the global sanitize config if it is not provided in the options
+        if (!this.options.sanitizeConfig && !this.builderMode) {
+            this.options.sanitizeConfig = lodash_1.default.get(form, 'settings.sanitizeConfig') || lodash_1.default.get(form, 'globalSettings.sanitizeConfig');
+        }
         if ('schema' in form && (0, compare_versions_1.compareVersions)(form.schema, '1.x') > 0) {
             this.ready.then(() => {
                 this.setAlert('alert alert-danger', 'Form schema is for a newer version, please upgrade your renderer. Some functionality may not work.');
@@ -645,6 +651,11 @@ class Webform extends NestedDataComponent_1.default {
             return this.submissionReadyResolve(submission);
         }, (err) => this.submissionReadyReject(err)).catch((err) => this.submissionReadyReject(err));
     }
+    handleDraftError(errName, errDetails, restoreDraft) {
+        const errorMessage = lodash_1.default.trim(`${this.t(errName)} ${errDetails || ''}`);
+        console.warn(errorMessage);
+        this.emit(restoreDraft ? 'restoreDraftError' : 'saveDraftError', errDetails || errorMessage);
+    }
     /**
      * Saves a submission draft.
      */
@@ -653,11 +664,11 @@ class Webform extends NestedDataComponent_1.default {
             return;
         }
         if (!this.formio) {
-            console.warn(this.t('saveDraftInstanceError'));
+            this.handleDraftError('saveDraftInstanceError');
             return;
         }
         if (!Formio_1.Formio.getUser()) {
-            console.warn(this.t('saveDraftAuthError'));
+            this.handleDraftError('saveDraftAuthError');
             return;
         }
         const draft = (0, utils_1.fastCloneDeep)(this.submission);
@@ -670,6 +681,10 @@ class Webform extends NestedDataComponent_1.default {
                 this.submission._id = sub._id;
                 this.savingDraft = false;
                 this.emit('saveDraft', sub);
+            })
+                .catch(err => {
+                this.savingDraft = false;
+                this.handleDraftError('saveDraftError', err);
             });
         }
     }
@@ -680,7 +695,7 @@ class Webform extends NestedDataComponent_1.default {
      */
     restoreDraft(userId) {
         if (!this.formio) {
-            console.warn(this.t('restoreDraftInstanceError'));
+            this.handleDraftError('restoreDraftInstanceError', null, true);
             return;
         }
         this.savingDraft = true;
@@ -702,6 +717,11 @@ class Webform extends NestedDataComponent_1.default {
             this.draftEnabled = true;
             this.savingDraft = false;
             this.emit('restoreDraft', null);
+        })
+            .catch(err => {
+            this.draftEnabled = true;
+            this.savingDraft = false;
+            this.handleDraftError('restoreDraftError', err, true);
         });
     }
     get schema() {

package/lib/cjs/WebformBuilder.js

@@ -992,6 +992,7 @@ class WebformBuilder extends Component_1.default {
         }
     }
     updateComponent(component, changed) {
+        const sanitizeConfig = lodash_1.default.get(this.webform, 'form.settings.sanitizeConfig') || lodash_1.default.get(this.webform, 'form.globalSettings.sanitizeConfig');
         // Update the preview.
         if (this.preview) {
             this.preview.form = {
@@ -1003,13 +1004,14 @@ class WebformBuilder extends Component_1.default {
                         'autofocus',
                         'customConditional',
                     ])],
-                config: this.options.formConfig || {}
+                config: this.options.formConfig || {},
+                sanitizeConfig,
             };
             const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];
             this.preview.form.components.forEach(component => this.replaceDoubleQuotes(component, fieldsToRemoveDoubleQuotes));
             const previewElement = this.componentEdit.querySelector('[ref="preview"]');
             if (previewElement) {
-                this.setContent(previewElement, this.preview.render());
+                this.setContent(previewElement, this.preview.render(), null, sanitizeConfig);
                 this.preview.attach(previewElement);
             }
         }

package/lib/cjs/components/address/fixtures/comp3.js

@@ -14,7 +14,7 @@ exports.default = {
             providerOptions: {
                 params: {
                     autocompleteOptions: {},
-                    key: 'AIzaSyBNL2e4MnmyPj9zN7SVAe428nCSLP1X144',
+                    key: '',
                 },
             },
             input: true,

package/lib/cjs/components/button/Button.js

@@ -363,9 +363,15 @@ class ButtonComponent extends Field_1.default {
             response_type: 'code',
             client_id: settings.clientId,
             redirect_uri: (settings.redirectURI && this.interpolate(settings.redirectURI)) || window.location.origin || `${window.location.protocol}//${window.location.host}`,
-            state: settings.state,
             scope: settings.scope
         };
+        if (settings.state) {
+            params.state = settings.state;
+        }
+        else if (settings.code_challenge) {
+            params.code_challenge = settings.code_challenge;
+            params.code_challenge_method = 'S256';
+        }
         /*eslint-enable camelcase */
         // Needs for the correct redirection URI for the OpenID
         const originalRedirectUri = params.redirect_uri;

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

@@ -140,7 +140,7 @@ exports.default = {
                     providerOptions: {
                         params: {
                             autocompleteOptions: {},
-                            key: 'AIzaSyBNL2e4MnmyPj9zN7SVAe428nCSLP1X144',
+                            key: '',
                         },
                     },
                     input: true,

package/lib/cjs/components/recaptcha/ReCaptcha.d.ts

@@ -13,11 +13,12 @@ export default class ReCaptchaComponent extends Component {
     createInput(): void;
     recaptchaApiReady: any;
     createLabel(): void;
-    verify(actionName: any): void;
-    recaptchaVerifiedPromise: Promise<void> | undefined;
+    verify(actionName: any): Promise<void>;
+    recaptchaVerifiedPromise: Promise<any> | undefined;
     isLoading: boolean | undefined;
+    loading: boolean | undefined;
     sendVerificationRequest(token: any): any;
-    checkComponentValidity(data: any, dirty: any, row: any, options?: {}): any;
+    checkComponentValidity(data: any, dirty: any, row: any, options?: {}): boolean | Promise<boolean>;
     normalizeValue(newValue: any): any;
 }
 import Component from '../_classes/component/Component';

package/lib/cjs/components/recaptcha/ReCaptcha.js

@@ -1,4 +1,13 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -61,46 +70,42 @@ class ReCaptchaComponent extends Component_1.default {
         return true;
     }
     verify(actionName) {
-        const siteKey = (0, get_1.default)(this.root.form, 'settings.recaptcha.siteKey');
-        if (!siteKey) {
-            console.warn('There is no Site Key specified in settings in form JSON');
-            return;
-        }
-        if (!this.recaptchaApiReady) {
-            const recaptchaApiScriptUrl = `https://www.google.com/recaptcha/api.js?render=${(0, get_1.default)(this.root.form, 'settings.recaptcha.siteKey')}`;
-            this.recaptchaApiReady = Formio_1.Formio.requireLibrary('googleRecaptcha', 'grecaptcha', recaptchaApiScriptUrl, true);
-        }
-        if (this.recaptchaApiReady) {
-            this.recaptchaVerifiedPromise = new Promise((resolve, reject) => {
-                this.recaptchaApiReady
-                    .then(() => {
+        return __awaiter(this, void 0, void 0, function* () {
+            const siteKey = (0, get_1.default)(this.root.form, 'settings.recaptcha.siteKey');
+            if (!siteKey) {
+                console.warn('There is no Site Key specified in settings in form JSON');
+                return;
+            }
+            if (!this.recaptchaApiReady) {
+                const recaptchaApiScriptUrl = `https://www.google.com/recaptcha/api.js?render=${(0, get_1.default)(this.root.form, 'settings.recaptcha.siteKey')}`;
+                this.recaptchaApiReady = Formio_1.Formio.requireLibrary('googleRecaptcha', 'grecaptcha', recaptchaApiScriptUrl, true);
+            }
+            try {
+                yield this.recaptchaApiReady;
+                this.recaptchaVerifiedPromise = new Promise((resolve, reject) => {
                     if (!this.isLoading) {
                         this.isLoading = true;
-                        grecaptcha.ready((0, debounce_1.default)(() => {
-                            grecaptcha
-                                .execute(siteKey, {
-                                action: actionName
-                            })
-                                .then((token) => {
-                                return this.sendVerificationRequest(token).then(({ verificationResult, token }) => {
-                                    this.recaptchaResult = Object.assign(Object.assign({}, verificationResult), { token });
-                                    this.updateValue(this.recaptchaResult);
-                                    return resolve(verificationResult);
-                                });
-                            })
-                                .catch(() => {
+                        grecaptcha.ready((0, debounce_1.default)(() => __awaiter(this, void 0, void 0, function* () {
+                            try {
+                                const token = yield grecaptcha.execute(siteKey, { action: actionName });
+                                const verificationResult = yield this.sendVerificationRequest(token);
+                                this.recaptchaResult = Object.assign(Object.assign({}, verificationResult), { token });
+                                this.updateValue(this.recaptchaResult);
+                                this.isLoading = false;
+                                return resolve(verificationResult);
+                            }
+                            catch (err) {
                                 this.isLoading = false;
-                            });
-                        }, 1000));
+                                reject(err);
+                            }
+                        }), 1000));
                     }
-                })
-                    .catch(() => {
-                    return reject();
                 });
-            }).then(() => {
-                this.isLoading = false;
-            });
-        }
+            }
+            catch (err) {
+                this.loading = false;
+            }
+        });
     }
     beforeSubmit() {
         if (this.recaptchaVerifiedPromise) {
@@ -110,14 +115,13 @@ class ReCaptchaComponent extends Component_1.default {
         return super.beforeSubmit();
     }
     sendVerificationRequest(token) {
-        return Formio_1.Formio.makeStaticRequest(`${Formio_1.Formio.projectUrl}/recaptcha?recaptchaToken=${token}`)
-            .then((verificationResult) => ({ verificationResult, token }));
+        return Formio_1.Formio.makeStaticRequest(`${Formio_1.Formio.projectUrl}/recaptcha?recaptchaToken=${token}`);
     }
     checkComponentValidity(data, dirty, row, options = {}) {
         data = data || this.rootValue;
         row = row || this.data;
         const { async = false } = options;
-        // Verification could be async only
+        // Verification could be async only (which for now is only the case for server-side validation)
         if (!async) {
             return super.checkComponentValidity(data, dirty, row, options);
         }
@@ -130,12 +134,8 @@ class ReCaptchaComponent extends Component_1.default {
             this.setCustomValidity(this.t('reCaptchaTokenValidationError'));
             return Promise.resolve(false);
         }
-        return this.hook('validateReCaptcha', componentData.token, () => Promise.resolve(true))
-            .then((success) => success)
-            .catch((err) => {
-            this.setCustomValidity(this.t(err.message || err));
-            return false;
-        });
+        // Any further validation will 100% not run on the client
+        return Promise.resolve(true);
     }
     normalizeValue(newValue) {
         // If a recaptcha result has already been established, then do not allow it to be reset.

package/lib/cjs/formio.form.d.ts

@@ -20,5 +20,4 @@ import Utils from './utils';
 import Form from './Form';
 import { Formio } from './Formio';
 import Licenses from './licenses';
-import EventEmitter from './EventEmitter';
-export { Components, Displays, Providers, Rules, Widgets, Templates, Conjunctions, Operators, QuickRules, Transformers, ValueSources, Utils, Form, Formio, Licenses, EventEmitter };
+export { Components, Displays, Providers, Rules, Widgets, Templates, Conjunctions, Operators, QuickRules, Transformers, ValueSources, Utils, Form, Formio, Licenses };

package/lib/cjs/formio.form.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.EventEmitter = exports.Licenses = exports.Formio = exports.Form = exports.Utils = exports.ValueSources = exports.Transformers = exports.QuickRules = exports.Operators = exports.Conjunctions = exports.Templates = exports.Widgets = exports.Rules = exports.Providers = exports.Displays = exports.Components = exports.useModule = exports.registerModule = void 0;
+exports.Licenses = exports.Formio = exports.Form = exports.Utils = exports.ValueSources = exports.Transformers = exports.QuickRules = exports.Operators = exports.Conjunctions = exports.Templates = exports.Widgets = exports.Rules = exports.Providers = exports.Displays = exports.Components = exports.useModule = exports.registerModule = void 0;
 const lodash_1 = __importDefault(require("lodash"));
 const Formio_1 = require("./Formio");
 Object.defineProperty(exports, "Formio", { enumerable: true, get: function () { return Formio_1.Formio; } });
@@ -37,8 +37,6 @@ exports.Utils = utils_1.default;
 const Evaluator_1 = __importDefault(require("./utils/Evaluator"));
 const licenses_1 = __importDefault(require("./licenses"));
 exports.Licenses = licenses_1.default;
-const EventEmitter_1 = __importDefault(require("./EventEmitter"));
-exports.EventEmitter = EventEmitter_1.default;
 Formio_1.Formio.loadModules = (path = `${Formio_1.Formio.getApiUrl()}/externalModules.js`, name = 'externalModules') => {
     Formio_1.Formio.requireLibrary(name, name, path, true)
         .then((modules) => {
@@ -167,17 +165,3 @@ exports.useModule = useModule;
  * Formio.plugins([plugin1, plugin2, etc], options);
  */
 Formio_1.Formio.use = useModule();
-// Allow simple embedding.
-Formio_1.Formio.embedForm = (embed) => Form_1.default.embed(embed);
-/**
- * Factory that creates a new form based on the form parameters.
- *
- * @param element {HMTLElement} - The HTML Element to add this form to.
- * @param form {string|Object} - The src of the form, or a form object.
- * @param options {Object} - The options to create this form.
- *
- * @return {Promise} - When the form is instance is ready.
- */
-Formio_1.Formio.createForm = (...args) => {
-    return (new Form_1.default(...args)).ready;
-};

package/lib/cjs/providers/storage/s3.d.ts

@@ -12,7 +12,10 @@ declare function s3(formio: any): {
     }>;
     completeMultipartUpload(serverResponse: any, parts: any, multipart: any): Promise<void>;
     abortMultipartUpload(serverResponse: any): void;
-    uploadParts(file: any, urls: any, headers: any, partSize: any, multipart: any, abortSignal: any): Promise<any[]>;
+    uploadParts(file: any, urls: any, headers: any, partSize: any, multipart: any, abortSignal: any): Promise<{
+        ETag: string;
+        PartNumber: number;
+    }[]>;
     downloadFile(file: any): any;
     deleteFile(fileInfo: any): any;
 };

package/lib/cjs/providers/storage/s3.js

@@ -1,27 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -37,11 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const xhr_1 = __importDefault(require("./xhr"));
 const util_1 = require("./util");
-const loadAbortControllerPolyfill = () => __awaiter(void 0, void 0, void 0, function* () {
-    if (typeof AbortController === 'undefined') {
-        yield Promise.resolve().then(() => __importStar(require('abortcontroller-polyfill/dist/polyfill-patch-fetch')));
-    }
-});
+const AbortController = window.AbortController || require('abortcontroller-polyfill/dist/cjs-ponyfill');
 function s3(formio) {
     return {
         uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback, multipartOptions) {
@@ -52,7 +25,6 @@ function s3(formio) {
                     if (response.signed) {
                         if (multipartOptions && Array.isArray(response.signed)) {
                             // patch abort callback
-                            yield loadAbortControllerPolyfill();
                             const abortController = new AbortController();
                             const abortSignal = abortController.signal;
                             if (typeof abortCallback === 'function') {

package/lib/cjs/translations/en.d.ts

@@ -57,6 +57,8 @@ declare namespace _default {
     const saveDraftInstanceError: string;
     const saveDraftAuthError: string;
     const restoreDraftInstanceError: string;
+    const saveDraftError: string;
+    const restoreDraftError: string;
     const time: string;
     const cancelButtonAriaLabel: string;
     const previousButtonAriaLabel: string;

package/lib/cjs/translations/en.js

@@ -59,6 +59,8 @@ exports.default = {
     saveDraftInstanceError: 'Cannot save draft because there is no formio instance.',
     saveDraftAuthError: 'Cannot save draft unless a user is authenticated.',
     restoreDraftInstanceError: 'Cannot restore draft because there is no formio instance.',
+    saveDraftError: 'Unable to save draft.',
+    restoreDraftError: 'Unable to restore draft.',
     time: 'Invalid time',
     cancelButtonAriaLabel: 'Cancel button. Click to reset the form',
     previousButtonAriaLabel: 'Previous button. Click to go back to the previous tab',

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

@@ -15,7 +15,7 @@ class IsEqualTo extends ConditionOperator_1.default {
     }
     execute({ value, comparedValue, instance, conditionComponentPath }) {
         var _a;
-        if (value && comparedValue && typeof value !== typeof comparedValue && lodash_1.default.isString(comparedValue)) {
+        if ((value || value === false) && comparedValue && typeof value !== typeof comparedValue && lodash_1.default.isString(comparedValue)) {
             try {
                 comparedValue = JSON.parse(comparedValue);
             }

package/lib/cjs/utils/utils.js

@@ -1255,7 +1255,8 @@ function sanitize(string, options) {
     }
     // Allowd URI Regex
     if (options.sanitizeConfig && options.sanitizeConfig.allowedUriRegex) {
-        sanitizeOptions.ALLOWED_URI_REGEXP = options.sanitizeConfig.allowedUriRegex;
+        const allowedUriRegex = options.sanitizeConfig.allowedUriRegex;
+        sanitizeOptions.ALLOWED_URI_REGEXP = lodash_1.default.isString(allowedUriRegex) ? new RegExp(allowedUriRegex) : allowedUriRegex;
     }
     // Allow to extend the existing array of elements that are safe for URI-like values
     if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addUriSafeAttr) && options.sanitizeConfig.addUriSafeAttr.length > 0) {

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

@@ -33,7 +33,7 @@ export class ValidationChecker {
             key: string;
             hasLabel: boolean;
             message(component: any): any;
-            check(component: any, setting: any, value: any, data: any, index: any, row: any, async: any): any;
+            check(component: any, setting: any, value: any, data: any, index: any, row: any, async: any): true | Promise<any>;
         };
         min: {
             key: string;

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

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

package/lib/mjs/Form.js

@@ -97,9 +97,7 @@ export default class Form extends Element {
             this.element.appendChild(this.loader);
         }
         else if (this.loader) {
-            if (this.element.contains(this.loader)) {
-                this.element.removeChild(this.loader);
-            }
+            this.element.removeChild(this.loader);
             this.loader = null;
         }
     }
@@ -335,3 +333,18 @@ export default class Form extends Element {
         delete this.ready;
     }
 }
+// Allow simple embedding.
+Formio.embedForm = (embed) => Form.embed(embed);
+/**
+ * Factory that creates a new form based on the form parameters.
+ *
+ * @param element {HMTLElement} - The HTML Element to add this form to.
+ * @param form {string|Object} - The src of the form, or a form object.
+ * @param options {Object} - The options to create this form.
+ *
+ * @return {Promise} - When the form is instance is ready.
+ */
+Formio.createForm = (...args) => {
+    return (new Form(...args)).ready;
+};
+Formio.Form = Form;

package/lib/mjs/Webform.d.ts

@@ -282,6 +282,7 @@ declare class Webform extends NestedDataComponent {
      * @return {Promise.<TResult>}
      */
     setSubmission(submission: any, flags?: {}): Promise<TResult>;
+    handleDraftError(errName: any, errDetails: any, restoreDraft: any): void;
     /**
      * Saves a submission draft.
      */

package/lib/mjs/Webform.js

@@ -183,11 +183,13 @@ export default class Webform extends NestedDataComponent {
         this.language = this.i18next.language;
         // See if we need to restore the draft from a user.
         if (this.options.saveDraft && !this.options.skipDraftRestore) {
-            const user = Formio.getUser();
-            // Only restore a draft if the submission isn't explicitly set.
-            if (user && !this.submissionSet) {
-                this.restoreDraft(user._id);
-            }
+            this.formReady.then(() => {
+                const user = Formio.getUser();
+                // Only restore a draft if the submission isn't explicitly set.
+                if (user && !this.submissionSet) {
+                    this.restoreDraft(user._id);
+                }
+            });
         }
         this.component.clearOnHide = false;
         // Ensure the root is set to this component.
@@ -532,6 +534,10 @@ export default class Webform extends NestedDataComponent {
         if (form && form.properties) {
             this.options.properties = form.properties;
         }
+        // Use the sanitize config from the form settings or the global sanitize config if it is not provided in the options
+        if (!this.options.sanitizeConfig && !this.builderMode) {
+            this.options.sanitizeConfig = _.get(form, 'settings.sanitizeConfig') || _.get(form, 'globalSettings.sanitizeConfig');
+        }
         if ('schema' in form && compareVersions(form.schema, '1.x') > 0) {
             this.ready.then(() => {
                 this.setAlert('alert alert-danger', 'Form schema is for a newer version, please upgrade your renderer. Some functionality may not work.');
@@ -645,6 +651,11 @@ export default class Webform extends NestedDataComponent {
             return this.submissionReadyResolve(submission);
         }, (err) => this.submissionReadyReject(err)).catch((err) => this.submissionReadyReject(err));
     }
+    handleDraftError(errName, errDetails, restoreDraft) {
+        const errorMessage = _.trim(`${this.t(errName)} ${errDetails || ''}`);
+        console.warn(errorMessage);
+        this.emit(restoreDraft ? 'restoreDraftError' : 'saveDraftError', errDetails || errorMessage);
+    }
     /**
      * Saves a submission draft.
      */
@@ -653,11 +664,11 @@ export default class Webform extends NestedDataComponent {
             return;
         }
         if (!this.formio) {
-            console.warn(this.t('saveDraftInstanceError'));
+            this.handleDraftError('saveDraftInstanceError');
             return;
         }
         if (!Formio.getUser()) {
-            console.warn(this.t('saveDraftAuthError'));
+            this.handleDraftError('saveDraftAuthError');
             return;
         }
         const draft = fastCloneDeep(this.submission);
@@ -670,6 +681,10 @@ export default class Webform extends NestedDataComponent {
                 this.submission._id = sub._id;
                 this.savingDraft = false;
                 this.emit('saveDraft', sub);
+            })
+                .catch(err => {
+                this.savingDraft = false;
+                this.handleDraftError('saveDraftError', err);
             });
         }
     }
@@ -680,7 +695,7 @@ export default class Webform extends NestedDataComponent {
      */
     restoreDraft(userId) {
         if (!this.formio) {
-            console.warn(this.t('restoreDraftInstanceError'));
+            this.handleDraftError('restoreDraftInstanceError', null, true);
             return;
         }
         this.savingDraft = true;
@@ -702,6 +717,11 @@ export default class Webform extends NestedDataComponent {
             this.draftEnabled = true;
             this.savingDraft = false;
             this.emit('restoreDraft', null);
+        })
+            .catch(err => {
+            this.draftEnabled = true;
+            this.savingDraft = false;
+            this.handleDraftError('restoreDraftError', err, true);
         });
     }
     get schema() {