@formio/js 5.0.0-dev.5620.dedc19b → 5.0.0-dev.5625.779293f

package/lib/cjs/Formio.js

@@ -114,3 +114,14 @@ sdk_1.Formio.createForm = Embed_1.Formio.createForm;
 sdk_1.Formio.submitDone = Embed_1.Formio.submitDone;
 sdk_1.Formio.addLibrary = Embed_1.Formio.addLibrary;
 sdk_1.Formio.addLoader = Embed_1.Formio.addLoader;
+sdk_1.Formio.addToGlobal = (global) => {
+    if (typeof global === 'object' && !global.Formio) {
+        global.Formio = sdk_1.Formio;
+    }
+};
+if (typeof global !== 'undefined') {
+    sdk_1.Formio.addToGlobal(global);
+}
+if (typeof window !== 'undefined') {
+    sdk_1.Formio.addToGlobal(window);
+}

package/lib/cjs/Webform.d.ts

@@ -471,7 +471,7 @@ declare class Webform extends NestedDataComponent {
      */
     submit(before: boolean, options?: {}): Promise<any>;
     submitUrl(URL: any, headers: any): void;
-    triggerRecaptcha(): void;
+    triggerCaptcha(): void;
     _nosubmit: any;
     get conditions(): any;
     get variables(): any;

package/lib/cjs/Webform.js

@@ -659,7 +659,7 @@ class Webform extends NestedDataComponent_1.default {
         const rebuild = this.rebuild() || Promise.resolve();
         return rebuild.then(() => {
             this.emit('formLoad', form);
-            this.triggerRecaptcha();
+            this.triggerCaptcha();
             // Make sure to trigger onChange after a render event occurs to speed up form rendering.
             setTimeout(() => {
                 this.onChange(flags);
@@ -787,7 +787,8 @@ class Webform extends NestedDataComponent_1.default {
         formio.loadSubmissions({
             params: {
                 state: 'draft',
-                owner: userId
+                owner: userId,
+                sort: '-created'
             }
         }).then(submissions => {
             if (submissions.length > 0 && !this.options.skipDraftRestore) {
@@ -830,7 +831,9 @@ class Webform extends NestedDataComponent_1.default {
             };
         }
         // Metadata needs to be available before setValue
-        this._submission.metadata = submission.metadata || {};
+        this._submission.metadata = submission.metadata
+            ? lodash_1.default.cloneDeep(submission.metadata)
+            : {};
         this.editing = !!submission._id;
         // Set the timezone in the options if available.
         if (!this.options.submissionTimezone &&
@@ -1489,16 +1492,18 @@ class Webform extends NestedDataComponent_1.default {
             return console.warn('You should add a URL to this button.');
         }
     }
-    triggerRecaptcha() {
+    triggerCaptcha() {
         if (!this || !this.components) {
             return;
         }
-        const recaptchaComponent = (0, utils_1.searchComponents)(this.components, {
-            'component.type': 'recaptcha',
-            'component.eventType': 'formLoad'
+        const captchaComponent = [];
+        (0, formUtils_1.eachComponent)(this.components, (component) => {
+            if (/^(re)?captcha$/.test(component.type) && component.component.eventType === 'formLoad') {
+                captchaComponent.push(component);
+            }
         });
-        if (recaptchaComponent.length > 0) {
-            recaptchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);
+        if (captchaComponent.length > 0) {
+            captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);
         }
     }
     set nosubmit(value) {

package/lib/cjs/WebformBuilder.d.ts

@@ -72,7 +72,7 @@ export default class WebformBuilder extends Component {
     onDrop(element: any, target: any, source: any, sibling: any): any;
     setForm(form: any): any;
     keyboardActionsEnabled: any;
-    populateRecaptchaSettings(form: any): void;
+    populateCaptchaSettings(form: any): void;
     removeComponent(component: any, parent: any, original: any, componentInstance: any): boolean | undefined;
     replaceDoubleQuotes(data: any, fieldsToRemoveDoubleQuotes?: any[]): any;
     updateComponent(component: any, changed: any): void;

package/lib/cjs/WebformBuilder.js

@@ -486,7 +486,7 @@ class WebformBuilder extends Component_1.default {
     }
     attach(element) {
         this.on('change', (form) => {
-            this.populateRecaptchaSettings(form);
+            this.populateCaptchaSettings(form);
             this.webform.setAlert(false);
         });
         return super.attach(element).then(() => {
@@ -939,24 +939,24 @@ class WebformBuilder extends Component_1.default {
         }
         return Promise.resolve(form);
     }
-    populateRecaptchaSettings(form) {
-        //populate isEnabled for recaptcha form settings
-        let isRecaptchaEnabled = false;
+    populateCaptchaSettings(form) {
+        //populate isEnabled for captcha form settings
+        let isCaptchaEnabled = false;
         if (this.form.components) {
             (0, formUtils_1.eachComponent)(form.components, component => {
-                if (isRecaptchaEnabled) {
+                if (isCaptchaEnabled) {
                     return;
                 }
-                if (component.type === 'recaptcha') {
-                    isRecaptchaEnabled = true;
+                if (component.type === 'captcha') {
+                    isCaptchaEnabled = true;
                     return false;
                 }
             });
-            if (isRecaptchaEnabled) {
-                lodash_1.default.set(form, 'settings.recaptcha.isEnabled', true);
+            if (isCaptchaEnabled) {
+                lodash_1.default.set(form, 'settings.captcha.isEnabled', true);
             }
-            else if (lodash_1.default.get(form, 'settings.recaptcha.isEnabled')) {
-                lodash_1.default.set(form, 'settings.recaptcha.isEnabled', false);
+            else if (lodash_1.default.get(form, 'settings.captcha.isEnabled')) {
+                lodash_1.default.set(form, 'settings.captcha.isEnabled', false);
             }
         }
     }
@@ -986,8 +986,14 @@ class WebformBuilder extends Component_1.default {
             else if (parent.formioComponent && parent.formioComponent.removeChildComponent) {
                 parent.formioComponent.removeChildComponent(component);
             }
-            if (component.input && componentInstance && componentInstance.parent) {
-                lodash_1.default.unset(componentInstance._data, componentInstance.key);
+            if (component.input && componentInstance && parent.formioComponent) {
+                const parentDefaultValue = lodash_1.default.get(parent.formioComponent, 'component.defaultValue', null);
+                if (Array.isArray(parentDefaultValue)) {
+                    parentDefaultValue.forEach(v => lodash_1.default.unset(v, componentInstance.key));
+                }
+                else if (typeof parentDefaultValue === 'object') {
+                    lodash_1.default.unset(parentDefaultValue, componentInstance.key);
+                }
             }
             const rebuild = parent.formioComponent.rebuild() || Promise.resolve();
             rebuild.then(() => {
@@ -1119,16 +1125,11 @@ class WebformBuilder extends Component_1.default {
         const repeatablePaths = this.findRepeatablePaths();
         let hasInvalidComponents = false;
         this.webform.everyComponent((comp) => {
-            var _a;
             const path = comp.path;
-            const errors = comp.visibleErrors || [];
             if (repeatablePaths.includes(path)) {
-                comp.setCustomValidity(`API Key is not unique: ${comp.key}`);
+                comp.setCustomValidity(this.t('apiKey', { key: comp.key }));
                 hasInvalidComponents = true;
             }
-            else if (errors.length && ((_a = errors[0].message) === null || _a === void 0 ? void 0 : _a.startsWith('API Key is not unique'))) {
-                comp.setCustomValidity('');
-            }
         });
         this.emit('builderFormValidityChange', hasInvalidComponents);
     }

package/lib/cjs/components/_classes/component/Component.d.ts

@@ -492,10 +492,12 @@ declare class Component extends Element {
     /**
      * Add a new input error to this element.
      *
-     * @param message
-     * @param dirty
+     * @param {{level: string, message: string}[]} messages
      */
-    addMessages(messages: any): void;
+    addMessages(messages: {
+        level: string;
+        message: string;
+    }[]): void;
     setErrorClasses(elements: any, dirty: any, hasErrors: any, hasMessages: any, element?: any): void;
     setElementInvalid(element: any, invalid: any): void;
     clearOnHide(): void;

package/lib/cjs/components/_classes/component/Component.js

@@ -1831,8 +1831,7 @@ class Component extends Element_1.default {
     /**
      * Add a new input error to this element.
      *
-     * @param message
-     * @param dirty
+     * @param {{level: string, message: string}[]} messages
      */
     addMessages(messages) {
         if (!messages) {
@@ -1851,9 +1850,6 @@ class Component extends Element_1.default {
         messages = lodash_1.default.uniqBy(messages, message => message.message);
         if (this.refs.messageContainer) {
             this.setContent(this.refs.messageContainer, messages.map((message) => {
-                if (message.message && typeof message.message === 'string') {
-                    message.message = message.message.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
-                }
                 return this.renderTemplate('message', Object.assign({}, message));
             }).join(''));
         }
@@ -2563,7 +2559,7 @@ class Component extends Element_1.default {
         }
         this.calculatedValue = (0, utils_1.fastCloneDeep)(calculatedValue);
         if (changed) {
-            if (!flags.noPristineChangeOnModified) {
+            if (!flags.noPristineChangeOnModified && this.root.initialized) {
                 this.pristine = false;
             }
             flags.triggeredComponentId = this.id;

package/lib/cjs/components/button/Button.d.ts

@@ -40,6 +40,6 @@ export default class ButtonComponent extends Field {
     openOauth(settings: any): void;
     get oauthComponentPath(): any;
     focus(): void;
-    triggerReCaptcha(): void;
+    triggerCaptcha(): void;
 }
 import Field from '../_classes/field/Field';

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

@@ -268,7 +268,7 @@ class ButtonComponent extends Field_1.default {
         super.detach();
     }
     onClick(event) {
-        this.triggerReCaptcha();
+        this.triggerCaptcha();
         // Don't click if disabled or in builder mode.
         if (this.disabled || this.options.attachMode === 'builder') {
             return;
@@ -454,20 +454,20 @@ class ButtonComponent extends Field_1.default {
             this.refs.button.focus();
         }
     }
-    triggerReCaptcha() {
+    triggerCaptcha() {
         if (!this.root) {
             return;
         }
-        let recaptchaComponent;
+        let captchaComponent;
         this.root.everyComponent((component) => {
-            if (component.component.type === 'recaptcha' &&
+            if (/^(re)?captcha$/.test(component.component.type) &&
                 component.component.eventType === 'buttonClick' &&
                 component.component.buttonKey === this.component.key) {
-                recaptchaComponent = component;
+                captchaComponent = component;
             }
         });
-        if (recaptchaComponent) {
-            recaptchaComponent.verify(`${this.component.key}Click`);
+        if (captchaComponent) {
+            captchaComponent.verify(`${this.component.key}Click`);
         }
     }
 }

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

@@ -630,9 +630,10 @@ class FormComponent extends Component_1.default {
             && submission._id
             && this.subForm.formio
             && lodash_1.default.isEmpty(submission.data);
-        if (shouldLoadSubmissionById) {
+        const shouldLoadDraftById = this.options.saveDraft && lodash_1.default.isEmpty(submission.data) && lodash_1.default.get(this.subForm, 'submission._id');
+        if (shouldLoadSubmissionById || shouldLoadDraftById) {
             const formId = submission.form || this.formObj.form || this.component.form;
-            const submissionUrl = `${this.subForm.formio.formsUrl}/${formId}/submission/${submission._id}`;
+            const submissionUrl = `${this.subForm.formio.formsUrl}/${formId}/submission/${submission._id || this.subForm.submission._id}`;
             const options = ((_a = this.root.formio) === null || _a === void 0 ? void 0 : _a.base) && ((_b = this.root.formio) === null || _b === void 0 ? void 0 : _b.projectUrl)
                 ? {
                     base: this.root.formio.base,

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

@@ -1,12 +1,5 @@
 export default class ReCaptchaComponent extends Component {
-    static get builderInfo(): {
-        title: string;
-        group: string;
-        icon: string;
-        documentation: string;
-        weight: number;
-        schema: any;
-    };
+    static get builderInfo(): {};
     static savedValueTypes(): never[];
     render(): any;
     recaptchaResult: any;

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

@@ -1,3 +1,3 @@
-export default function _default(): {
+export default function _default(...extend: any[]): {
     components: any;
 };

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

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const Components_1 = __importDefault(require("../Components"));
 const ReCaptcha_edit_display_1 = __importDefault(require("./editForm/ReCaptcha.edit.display"));
-function default_1() {
+function default_1(...extend) {
     return Components_1.default.baseEditForm([
         {
             key: 'display',
@@ -27,6 +27,6 @@ function default_1() {
             key: 'logic',
             ignore: true
         },
-    ]);
+    ], ...extend);
 }
 exports.default = default_1;

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

@@ -26,14 +26,7 @@ class ReCaptchaComponent extends Component_1.default {
         }, ...extend);
     }
     static get builderInfo() {
-        return {
-            title: 'reCAPTCHA',
-            group: 'premium',
-            icon: 'refresh',
-            documentation: '/userguide/form-building/premium-components#recaptcha',
-            weight: 40,
-            schema: ReCaptchaComponent.schema()
-        };
+        return {};
     }
     static savedValueTypes() {
         return [];

package/lib/cjs/components/recaptcha/editForm/ReCaptcha.edit.display.d.ts

@@ -1,4 +1,21 @@
 declare const _default: ({
+    key: string;
+    weight: number;
+    type: string;
+    tag: string;
+    className: string;
+    content: string;
+    label?: undefined;
+    tooltip?: undefined;
+    values?: undefined;
+    validate?: undefined;
+    input?: undefined;
+    dataSrc?: undefined;
+    valueProperty?: undefined;
+    customConditional?: undefined;
+    data?: undefined;
+    ignore?: undefined;
+} | {
     key: string;
     label: string;
     tooltip: string;
@@ -11,6 +28,9 @@ declare const _default: ({
         required: boolean;
     };
     weight: number;
+    tag?: undefined;
+    className?: undefined;
+    content?: undefined;
     input?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;
@@ -30,18 +50,24 @@ declare const _default: ({
     data: {
         custom(context: any): any[];
     };
+    tag?: undefined;
+    className?: undefined;
+    content?: undefined;
     values?: undefined;
     validate?: undefined;
     ignore?: undefined;
 } | {
     key: string;
     ignore: boolean;
+    weight?: undefined;
+    type?: undefined;
+    tag?: undefined;
+    className?: undefined;
+    content?: undefined;
     label?: undefined;
     tooltip?: undefined;
-    type?: undefined;
     values?: undefined;
     validate?: undefined;
-    weight?: undefined;
     input?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;

package/lib/cjs/components/recaptcha/editForm/ReCaptcha.edit.display.js

@@ -2,10 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = require("../../../utils/utils");
 exports.default = [
+    {
+        key: 'recaptchaInfo',
+        weight: -10,
+        type: 'htmlelement',
+        tag: 'div',
+        className: 'alert alert-danger',
+        content: 'This component has been deprecated and will be removed. Use the CAPTCHA component instead.',
+    },
     {
         key: 'eventType',
         label: 'Type of event',
-        tooltip: 'Specify type of event that this reCAPTCHA would react to',
+        tooltip: 'Specify type of event that this CAPTCHA would react to. If Button Click is selected, then the CAPTCHA widget will be displayed and verification will occur after clicking on the button.',
         type: 'radio',
         values: [
             {
@@ -29,7 +37,7 @@ exports.default = [
         key: 'buttonKey',
         dataSrc: 'custom',
         valueProperty: 'value',
-        tooltip: 'Specify key of button on this form that this reCAPTCHA should react to',
+        tooltip: 'Specify key of button on this form that this CAPTCHA should react to',
         weight: 660,
         customConditional(context) {
             return context.data.eventType === 'buttonClick';

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

@@ -1526,7 +1526,7 @@ class SelectComponent extends ListComponent_1.default {
         const getTemplateValue = (v) => {
             const itemTemplate = this.itemTemplate(v);
             return options.csv && itemTemplate
-                ? (0, utils_1.unescapeHTML)(itemTemplate)
+                ? (0, utils_1.removeHTML)(itemTemplate)
                 : itemTemplate;
         };
         if (Array.isArray(value)) {

package/lib/cjs/components/select/editForm/Select.edit.data.js

@@ -5,15 +5,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const utils_1 = require("../../../utils/utils");
-const calculateSelectData = (context) => {
+const calculateSingleSelectData = (context, defaultValue) => {
     const { instance, data } = context;
-    const rawDefaultValue = instance.downloadedResources.find(resource => lodash_1.default.get(resource, data.valueProperty) === instance.getValue());
+    const rawDefaultValue = instance.downloadedResources.find(resource => lodash_1.default.get(resource, data.valueProperty) === defaultValue);
     const options = { data: {}, noeval: true };
     instance.interpolate(data.template, {
         item: rawDefaultValue,
     }, options);
     return options.data.item;
 };
+const calculateSelectData = (context) => {
+    const { instance } = context;
+    const defaultValue = instance.getValue();
+    if (instance.component.multiple) {
+        const multiSelectData = {};
+        (defaultValue !== null && defaultValue !== void 0 ? defaultValue : []).forEach((defaultValueItem) => {
+            multiSelectData[defaultValueItem] = calculateSingleSelectData(context, defaultValueItem);
+        });
+        return multiSelectData;
+    }
+    else {
+        return calculateSingleSelectData(context, defaultValue);
+    }
+};
 const setSelectData = (context) => {
     // Wait before downloadedResources will be set
     setTimeout(() => {

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

@@ -8,7 +8,7 @@ exports.default = {
     display: 'form',
     components: [{
             label: 'Select',
-            widget: 'choicesjs',
+            widget: 'html5',
             tableView: true,
             dataSrc: 'url',
             data: {

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

@@ -10,20 +10,30 @@ declare namespace _default {
         tableView: boolean;
         dataSrc: string;
         data: {
-            resource: string;
-        };
-        template: string;
-        validate: {
-            select: boolean;
+            url: string;
+            headers: {
+                key: string;
+                value: string;
+            }[];
         };
+        multiple: boolean;
+        valueProperty: string;
+        validateWhenHidden: boolean;
         key: string;
         type: string;
-        searchField: string;
         input: boolean;
+        defaultValue: string[];
+        selectValues: string;
+        disableLimit: boolean;
         noRefreshOnScroll: boolean;
-        addResource: boolean;
-        reference: boolean;
-        valueProperty: string;
+        selectData: {
+            value1: {
+                label: string;
+            };
+            value3: {
+                label: string;
+            };
+        };
         disableOnInvalid?: undefined;
     } | {
         type: string;
@@ -35,13 +45,14 @@ declare namespace _default {
         widget?: undefined;
         dataSrc?: undefined;
         data?: undefined;
-        template?: undefined;
-        validate?: undefined;
-        searchField?: undefined;
-        noRefreshOnScroll?: undefined;
-        addResource?: undefined;
-        reference?: undefined;
+        multiple?: undefined;
         valueProperty?: undefined;
+        validateWhenHidden?: undefined;
+        defaultValue?: undefined;
+        selectValues?: undefined;
+        disableLimit?: undefined;
+        noRefreshOnScroll?: undefined;
+        selectData?: undefined;
     })[];
 }
 export default _default;

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

@@ -1,40 +1,49 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    title: 'FIO-8234',
-    name: 'fio8234',
-    path: 'fio8234',
+    title: 'FIO-8281',
+    name: 'fio8281',
+    path: 'fio8281',
     type: 'form',
     display: 'form',
-    components: [
-        {
+    components: [{
             label: 'Select',
             widget: 'choicesjs',
             tableView: true,
-            dataSrc: 'resource',
+            dataSrc: 'url',
             data: {
-                resource: '665446284c9b0163c3e0c7e6',
-            },
-            template: '<span>{{ item.data.textField1 }}</span>',
-            validate: {
-                select: false,
+                url: 'https://fake_url.com',
+                headers: [
+                    {
+                        key: '',
+                        value: ''
+                    },
+                ],
             },
+            multiple: true,
+            valueProperty: 'value',
+            validateWhenHidden: false,
             key: 'select',
             type: 'select',
-            searchField: 'data.textField2__regex',
             input: true,
+            defaultValue: ['value1', 'value3'],
+            selectValues: 'data',
+            disableLimit: false,
             noRefreshOnScroll: false,
-            addResource: false,
-            reference: false,
-            valueProperty: 'data.textField2',
-        },
-        {
+            selectData: {
+                value1: {
+                    label: 'Label 1',
+                },
+                value3: {
+                    label: 'Label 3',
+                },
+            },
+        }, {
             type: 'button',
             label: 'Submit',
             key: 'submit',
             disableOnInvalid: true,
             input: true,
             tableView: false,
-        },
-    ],
+        }]
 };

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

@@ -0,0 +1,47 @@
+declare namespace _default {
+    let title: string;
+    let name: string;
+    let path: string;
+    let type: string;
+    let display: string;
+    let components: ({
+        label: string;
+        widget: string;
+        tableView: boolean;
+        dataSrc: string;
+        data: {
+            resource: string;
+        };
+        template: string;
+        validate: {
+            select: boolean;
+        };
+        key: string;
+        type: string;
+        searchField: string;
+        input: boolean;
+        noRefreshOnScroll: boolean;
+        addResource: boolean;
+        reference: boolean;
+        valueProperty: string;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        widget?: undefined;
+        dataSrc?: undefined;
+        data?: undefined;
+        template?: undefined;
+        validate?: undefined;
+        searchField?: undefined;
+        noRefreshOnScroll?: undefined;
+        addResource?: undefined;
+        reference?: undefined;
+        valueProperty?: undefined;
+    })[];
+}
+export default _default;