@formio/js 5.0.0-dev.5625.9910504 → 5.0.0-dev.5631.2d9a450

package/lib/mjs/Webform.js

@@ -7,7 +7,7 @@ import i18nDefaults from './i18n';
 import { Formio } from './Formio';
 import Components from './components/Components';
 import NestedDataComponent from './components/_classes/nesteddata/NestedDataComponent';
-import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, searchComponents, convertStringToHTMLElement, getArrayFromComponentPath, } from './utils/utils';
+import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, convertStringToHTMLElement, getArrayFromComponentPath, } from './utils/utils';
 import { eachComponent } from './utils/formUtils';
 // Initialize the available forms.
 Formio.forms = {};
@@ -657,7 +657,7 @@ export default class Webform extends NestedDataComponent {
         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);
@@ -834,7 +834,9 @@ export default class Webform extends NestedDataComponent {
             };
         }
         // Metadata needs to be available before setValue
-        this._submission.metadata = submission.metadata || {};
+        this._submission.metadata = submission.metadata
+            ? _.cloneDeep(submission.metadata)
+            : {};
         this.editing = !!submission._id;
         // Set the timezone in the options if available.
         if (!this.options.submissionTimezone &&
@@ -1489,16 +1491,18 @@ export default class Webform extends NestedDataComponent {
             return console.warn('You should add a URL to this button.');
         }
     }
-    triggerRecaptcha() {
+    triggerCaptcha() {
         if (!this || !this.components) {
             return;
         }
-        const recaptchaComponent = searchComponents(this.components, {
-            'component.type': 'recaptcha',
-            'component.eventType': 'formLoad'
+        const captchaComponent = [];
+        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/mjs/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/mjs/WebformBuilder.js

@@ -472,7 +472,7 @@ export default class WebformBuilder extends Component {
     }
     attach(element) {
         this.on('change', (form) => {
-            this.populateRecaptchaSettings(form);
+            this.populateCaptchaSettings(form);
             this.webform.setAlert(false);
         });
         return super.attach(element).then(() => {
@@ -923,24 +923,24 @@ export default class WebformBuilder extends Component {
         }
         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) {
             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) {
-                _.set(form, 'settings.recaptcha.isEnabled', true);
+            if (isCaptchaEnabled) {
+                _.set(form, 'settings.captcha.isEnabled', true);
             }
-            else if (_.get(form, 'settings.recaptcha.isEnabled')) {
-                _.set(form, 'settings.recaptcha.isEnabled', false);
+            else if (_.get(form, 'settings.captcha.isEnabled')) {
+                _.set(form, 'settings.captcha.isEnabled', false);
             }
         }
     }

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

@@ -2530,7 +2530,7 @@ export default class Component extends Element {
         }
         this.calculatedValue = fastCloneDeep(calculatedValue);
         if (changed) {
-            if (!flags.noPristineChangeOnModified && this.root.initialized) {
+            if (!flags.noPristineChangeOnModified) {
                 this.pristine = false;
             }
             flags.triggeredComponentId = this.id;

package/lib/mjs/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/mjs/components/button/Button.js

@@ -262,7 +262,7 @@ export default class ButtonComponent extends Field {
         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;
@@ -448,20 +448,20 @@ export default class ButtonComponent extends Field {
             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/mjs/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/mjs/components/recaptcha/ReCaptcha.form.d.ts

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

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

@@ -1,6 +1,6 @@
 import Components from '../Components';
 import ReCaptchaEditDisplay from './editForm/ReCaptcha.edit.display';
-export default function () {
+export default function (...extend) {
     return Components.baseEditForm([
         {
             key: 'display',
@@ -22,5 +22,5 @@ export default function () {
             key: 'logic',
             ignore: true
         },
-    ]);
+    ], ...extend);
 }

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

@@ -12,14 +12,7 @@ export default class ReCaptchaComponent extends Component {
         }, ...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/mjs/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/mjs/components/recaptcha/editForm/ReCaptcha.edit.display.js

@@ -1,9 +1,17 @@
 import { getContextButtons } from '../../../utils/utils';
 export 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: [
             {
@@ -27,7 +35,7 @@ export 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/mjs/components/select/editForm/Select.edit.data.js

@@ -1,14 +1,28 @@
 import _ from 'lodash';
 import { eachComponent } from '../../../utils/utils';
-const calculateSelectData = (context) => {
+const calculateSingleSelectData = (context, defaultValue) => {
     const { instance, data } = context;
-    const rawDefaultValue = instance.downloadedResources.find(resource => _.get(resource, data.valueProperty) === instance.getValue());
+    const rawDefaultValue = instance.downloadedResources.find(resource => _.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 ?? []).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/mjs/components/select/fixtures/comp22.js

@@ -6,7 +6,7 @@ export default {
     display: 'form',
     components: [{
             label: 'Select',
-            widget: 'choicesjs',
+            widget: 'html5',
             tableView: true,
             dataSrc: 'url',
             data: {

package/lib/mjs/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/mjs/components/select/fixtures/comp23.js

@@ -1,38 +1,47 @@
 export 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/mjs/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;

package/lib/mjs/components/select/fixtures/comp24.js

@@ -0,0 +1,38 @@
+export default {
+    title: 'FIO-8234',
+    name: 'fio8234',
+    path: 'fio8234',
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Select',
+            widget: 'choicesjs',
+            tableView: true,
+            dataSrc: 'resource',
+            data: {
+                resource: '665446284c9b0163c3e0c7e6',
+            },
+            template: '<span>{{ item.data.textField1 }}</span>',
+            validate: {
+                select: false,
+            },
+            key: 'select',
+            type: 'select',
+            searchField: 'data.textField2__regex',
+            input: true,
+            noRefreshOnScroll: false,
+            addResource: false,
+            reference: false,
+            valueProperty: 'data.textField2',
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        },
+    ],
+};

package/lib/mjs/components/select/fixtures/index.d.ts

@@ -20,5 +20,6 @@ import comp20 from './comp20';
 import comp21 from './comp21';
 import comp22 from './comp22';
 import comp23 from './comp23';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22, comp23 };
+import comp24 from './comp24';
+export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22, comp23, comp24 };
 export { multiSelect, multiSelectOptions } from "./comp3";

package/lib/mjs/components/select/fixtures/index.js

@@ -21,4 +21,5 @@ import comp20 from './comp20';
 import comp21 from './comp21';
 import comp22 from './comp22';
 import comp23 from './comp23';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22, comp23 };
+import comp24 from './comp24';
+export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22, comp23, comp24 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-dev.5625.9910504",
+  "version": "5.0.0-dev.5631.2d9a450",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -77,7 +77,7 @@
   "dependencies": {
     "@formio/bootstrap": "^3.0.0-rc.22",
     "@formio/choices.js": "^10.2.1",
-    "@formio/core": "^2.1.0-dev.tt.2",
+    "@formio/core": "2.0.0-dev.102.df37631",
     "@formio/text-mask-addons": "^3.8.0-formio.2",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",