@formio/js 5.0.0-dev.5621.91bd945 → 5.0.0-dev.5628.7520d42

package/lib/mjs/Formio.js

@@ -107,4 +107,15 @@ FormioCore.createForm = FormioEmbed.createForm;
 FormioCore.submitDone = FormioEmbed.submitDone;
 FormioCore.addLibrary = FormioEmbed.addLibrary;
 FormioCore.addLoader = FormioEmbed.addLoader;
+FormioCore.addToGlobal = (global) => {
+    if (typeof global === 'object' && !global.Formio) {
+        global.Formio = FormioCore;
+    }
+};
+if (typeof global !== 'undefined') {
+    FormioCore.addToGlobal(global);
+}
+if (typeof window !== 'undefined') {
+    FormioCore.addToGlobal(window);
+}
 export { FormioCore as Formio };

package/lib/mjs/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/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);
             }
         }
     }
@@ -1104,14 +1104,10 @@ export default class WebformBuilder extends Component {
         let hasInvalidComponents = false;
         this.webform.everyComponent((comp) => {
             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 && errors[0].message?.startsWith('API Key is not unique')) {
-                comp.setCustomValidity('');
-            }
         });
         this.emit('builderFormValidityChange', hasInvalidComponents);
     }

package/lib/mjs/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/mjs/components/_classes/component/Component.js

@@ -1795,8 +1795,7 @@ export default class Component extends Element {
     /**
      * Add a new input error to this element.
      *
-     * @param message
-     * @param dirty
+     * @param {{level: string, message: string}[]} messages
      */
     addMessages(messages) {
         if (!messages) {

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/Select.js

@@ -226,9 +226,10 @@ export default class SelectComponent extends ListComponent {
     }
     selectValueAndLabel(data) {
         const value = this.getOptionValue((this.isEntireObjectDisplay() && !this.itemValue(data)) ? data : this.itemValue(data));
+        const readOnlyResourceLabelData = this.options.readOnly && (this.component.dataSrc === 'resource' || this.component.dataSrc === 'url') && this.selectData;
         return {
             value,
-            label: this.itemTemplate((this.isEntireObjectDisplay() && !_.isObject(data.data)) ? { data: data } : data, value)
+            label: this.itemTemplate((this.isEntireObjectDisplay() && !_.isObject(data.data)) ? { data: data } : readOnlyResourceLabelData || data, value)
         };
     }
     itemTemplate(data, value) {

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

@@ -0,0 +1,58 @@
+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: {
+            url: string;
+            headers: {
+                key: string;
+                value: string;
+            }[];
+        };
+        multiple: boolean;
+        valueProperty: string;
+        validateWhenHidden: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        defaultValue: string[];
+        selectValues: string;
+        disableLimit: boolean;
+        noRefreshOnScroll: boolean;
+        selectData: {
+            value1: {
+                label: string;
+            };
+            value3: {
+                label: string;
+            };
+        };
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        widget?: undefined;
+        dataSrc?: undefined;
+        data?: 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

@@ -0,0 +1,47 @@
+export default {
+    title: 'FIO-8281',
+    name: 'fio8281',
+    path: 'fio8281',
+    type: 'form',
+    display: 'form',
+    components: [{
+            label: 'Select',
+            widget: 'choicesjs',
+            tableView: true,
+            dataSrc: 'url',
+            data: {
+                url: 'https://fake_url.com',
+                headers: [
+                    {
+                        key: '',
+                        value: ''
+                    },
+                ],
+            },
+            multiple: true,
+            valueProperty: 'value',
+            validateWhenHidden: false,
+            key: 'select',
+            type: 'select',
+            input: true,
+            defaultValue: ['value1', 'value3'],
+            selectValues: 'data',
+            disableLimit: false,
+            noRefreshOnScroll: false,
+            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

@@ -19,5 +19,7 @@ import comp19 from './comp19';
 import comp20 from './comp20';
 import comp21 from './comp21';
 import comp22 from './comp22';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22 };
+import comp23 from './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

@@ -20,4 +20,6 @@ import comp19 from './comp19';
 import comp20 from './comp20';
 import comp21 from './comp21';
 import comp22 from './comp22';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22 };
+import comp23 from './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/lib/mjs/translations/en.d.ts

@@ -71,5 +71,6 @@ declare namespace _default {
     let submitButtonAriaLabel: string;
     let reCaptchaTokenValidationError: string;
     let reCaptchaTokenNotSpecifiedError: string;
+    let apiKey: string;
 }
 export default _default;

package/lib/mjs/translations/en.js

@@ -71,4 +71,5 @@ export default {
     submitButtonAriaLabel: 'Submit Form button. Click to submit the form',
     reCaptchaTokenValidationError: 'ReCAPTCHA: Token validation error',
     reCaptchaTokenNotSpecifiedError: 'ReCAPTCHA: Token is not specified in submission',
+    apiKey: 'API Key is not unique: {{key}}'
 };