@formio/js 5.0.0-rc.57 → 5.0.0-rc.59

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

@@ -18,11 +18,9 @@
  * MIT licensed
  */
 
-/*! @license DOMPurify 3.1.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.1.3/LICENSE */
+/*! @license DOMPurify 3.1.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.1.5/LICENSE */
 
-/*! @license DOMPurify 3.1.4 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.1.4/LICENSE */
-
-/*! formiojs v5.0.0-rc.57 | https://unpkg.com/formiojs@5.0.0-rc.57/LICENSE.txt */
+/*! formiojs v5.0.0-rc.59 | https://unpkg.com/formiojs@5.0.0-rc.59/LICENSE.txt */
 
 /**
  * @license

package/lib/cjs/CDN.d.ts

@@ -10,6 +10,7 @@ declare class CDN {
         bootstrap: string;
         bootstrap4: string;
         bootstrap5: string;
+        bootswatch: string;
         'bootstrap-icons': string;
         ckeditor: string;
         flatpickr: string;

package/lib/cjs/CDN.js

@@ -11,9 +11,10 @@ class CDN {
         this.libs = {
             'js': '',
             'ace': '1.4.12',
-            'bootstrap': '5.3.2',
+            'bootstrap': '5.3.3',
             'bootstrap4': '4.6.2',
-            'bootstrap5': '5.3.2',
+            'bootstrap5': '5.3.3',
+            'bootswatch': '5.3.3',
             'bootstrap-icons': '1.11.1',
             'ckeditor': '19.0.0',
             'flatpickr': '4.6.8',
@@ -61,7 +62,9 @@ class CDN {
         if (lib) {
             url += `/${lib}`;
         }
-        if (version && version !== 'latest') {
+        // Only attach the version if this is the hosted cdn.
+        if (cdnUrl.includes('form.io') &&
+            version && version !== 'latest') {
             url += `/${version}`;
         }
         return url;

package/lib/cjs/Embed.d.ts

@@ -26,7 +26,7 @@ export class Formio {
     static addStyles(wrapper: any, href: any): Promise<void>;
     static submitDone(instance: any, submission: any): Promise<void>;
     static formioScript(script: any, builder: any): any;
-    static addLibrary(wrapper: any, lib: any, name: any): Promise<void>;
+    static addLibrary(libWrapper: any, lib: any, name: any): Promise<void>;
     static addLoader(wrapper: any): Promise<void>;
     static init(element: any, options?: {}, builder?: boolean): Promise<any>;
     static afterCreate(instance: any, wrapper: any, readyEvent: any): Promise<any>;

package/lib/cjs/Embed.js

@@ -80,6 +80,9 @@ class Formio {
     }
     static createElement(type, attrs, children) {
         const element = document.createElement(type);
+        if (!attrs) {
+            return element;
+        }
         Object.keys(attrs).forEach(key => {
             element.setAttribute(key, attrs[key]);
         });
@@ -187,21 +190,22 @@ class Formio {
         }
         return script;
     }
-    static addLibrary(wrapper, lib, name) {
+    static addLibrary(libWrapper, lib, name) {
         return __awaiter(this, void 0, void 0, function* () {
             if (!lib) {
                 return;
             }
             if (lib.dependencies) {
                 for (let i = 0; i < lib.dependencies.length; i++) {
-                    yield _a.addLibrary(wrapper, _a.cdn.libs[lib.dependencies[i]]);
+                    const libName = lib.dependencies[i];
+                    yield _a.addLibrary(libWrapper, _a.config.libs[libName], libName);
                 }
             }
             if (lib.css) {
-                yield _a.addStyles(wrapper, lib.css);
+                yield _a.addStyles((lib.global ? document.body : libWrapper), lib.css);
             }
             if (lib.js) {
-                const module = yield _a.addScript(wrapper, lib.js, lib.use ? name : false);
+                const module = yield _a.addScript((lib.global ? document.body : libWrapper), lib.js, lib.use ? name : false);
                 if (lib.use) {
                     _a.debug(`Using ${name}`);
                     const options = lib.options || {};
@@ -211,6 +215,12 @@ class Formio {
                     _a.use((typeof lib.use === 'function' ? lib.use(module) : module), options);
                 }
             }
+            if (lib.globalStyle) {
+                const style = _a.createElement('style');
+                style.type = 'text/css';
+                style.innerHTML = lib.globalStyle;
+                document.body.appendChild(style);
+            }
         });
     }
     static addLoader(wrapper) {
@@ -243,7 +253,16 @@ class Formio {
                     use: true
                 },
                 fontawesome: {
-                    css: `${_a.cdn['font-awesome']}/css/font-awesome.min.css`
+                    // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need
+                    // to do 2 things. 1.) Load the fonts from the global cdn, and 2.) add the font-face to the global styles on the page.
+                    css: `https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css`,
+                    globalStyle: `@font-face {
+                    font-family: 'FontAwesome';
+                    src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');
+                    src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
+                    font-weight: normal;
+                    font-style: normal;
+                  }`
                 },
                 bootstrap4: {
                     dependencies: ['fontawesome'],
@@ -254,9 +273,24 @@ class Formio {
                     css: `${_a.cdn.bootstrap}/css/bootstrap.min.css`
                 },
                 'bootstrap-icons': {
-                    css: `${_a.cdn['bootstrap-icons']}/css/bootstrap-icons.css`
+                    // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need
+                    // to do 2 things. 1.) Load the fonts from the global cdn, and 2.) add the font-face to the global styles on the page.
+                    css: 'https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.min.css',
+                    globalStyle: `@font-face {
+                    font-display: block;
+                    font-family: "bootstrap-icons";
+                    src: url("https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6") format("woff2"),
+                         url("https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6") format("woff");
+                }`
                 }
             };
+            // Add all bootswatch templates.
+            ['cerulean', 'cosmo', 'cyborg', 'darkly', 'flatly', 'journal', 'litera', 'lumen', 'lux', 'materia', 'minty', 'pulse', 'sandstone', 'simplex', 'sketchy', 'slate', 'solar', 'spacelab', 'superhero', 'united', 'yeti'].forEach((template) => {
+                _a.config.libs[template] = {
+                    dependencies: ['bootstrap-icons'],
+                    css: `${_a.cdn.bootswatch}/dist/${template}/bootstrap.min.css`
+                };
+            });
             const id = _a.config.id || `formio-${Math.random().toString(36).substring(7)}`;
             // Create a new wrapper and add the element inside of a new wrapper.
             let wrapper = _a.createElement('div', {
@@ -264,7 +298,7 @@ class Formio {
             });
             element.parentNode.insertBefore(wrapper, element);
             // If we include the libraries, then we will attempt to run this in shadow dom.
-            const useShadowDom = _a.config.includeLibs && (typeof wrapper.attachShadow === 'function');
+            const useShadowDom = _a.config.includeLibs && !_a.config.noshadow && (typeof wrapper.attachShadow === 'function');
             if (useShadowDom) {
                 wrapper = wrapper.attachShadow({
                     mode: 'open'

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

@@ -28,9 +28,10 @@ function embed(config = {}) {
         let scriptSrc = thisScript.src.replace(/^([^?]+).*/, '$1').split('/');
         scriptSrc.pop();
         let cdnSrc = '';
-        if (scriptSrc[scriptSrc.length - 1] === 'js') {
+        if (['js', 'offline'].includes(scriptSrc[scriptSrc.length - 1])) {
             scriptSrc.pop();
             scriptSrc = cdnSrc = scriptSrc.join('/');
+            scriptSrc += '/js';
         }
         else {
             scriptSrc = scriptSrc.join('/');
@@ -49,6 +50,7 @@ function embed(config = {}) {
             base: query.base || 'https://api.form.io',
             submit: query.submit,
             includeLibs: (query.libs === 'true' || query.libs === '1'),
+            noshadow: (query.shadow === 'false' || query.shadow === '0'),
             template: query.template || 'bootstrap',
             debug: debug,
             config: {},

package/lib/cjs/Webform.d.ts

@@ -445,7 +445,7 @@ declare class Webform extends NestedDataComponent {
      */
     submit(before?: boolean, options?: any): 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

@@ -646,7 +646,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);
@@ -738,7 +738,7 @@ class Webform extends NestedDataComponent_1.default {
         }
         const draft = (0, utils_1.fastCloneDeep)(this.submission);
         draft.state = "draft";
-        if (!this.savingDraft) {
+        if (!this.savingDraft && !this.submitting) {
             this.emit("saveDraftBegin");
             this.savingDraft = true;
             this.formio
@@ -816,7 +816,7 @@ 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 &&
@@ -1504,16 +1504,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

@@ -73,7 +73,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);
             }
         }
     }
@@ -1119,16 +1119,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.js

@@ -3500,7 +3500,7 @@ Component.requireLibrary = function (name, property, src, polling) {
             }.bind(Component.externalLibraries[name]);
         }
         // See if the plugin already exists.
-        const plugin = lodash_1.default.get(window, property);
+        const plugin = (0, utils_1.getScriptPlugin)(property);
         if (plugin) {
             Component.externalLibraries[name].resolve(plugin);
         }
@@ -3543,7 +3543,7 @@ Component.requireLibrary = function (name, property, src, polling) {
             // if no callback is provided, then check periodically for the script.
             if (polling) {
                 setTimeout(function checkLibrary() {
-                    const plugin = lodash_1.default.get(window, property);
+                    const plugin = (0, utils_1.getScriptPlugin)(property);
                     if (plugin) {
                         Component.externalLibraries[name].resolve(plugin);
                     }

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

@@ -31,6 +31,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

@@ -273,7 +273,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;
@@ -459,20 +459,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/radio/Radio.d.ts

@@ -48,7 +48,7 @@ export default class RadioComponent extends ListComponent {
     detach(element: any): void;
     validateValueProperty(): boolean;
     validateValueAvailability(setting: any, value: any): boolean;
-    getValueAsString(value: any): any;
+    getValueAsString(value: any, options?: {}): any;
     setValueAt(index: any, value: any): void;
     loadItems(url: any, search: any, headers: any, options: any, method: any, body: any): void;
     loadItemsFromMetadata(): void;

package/lib/cjs/components/radio/Radio.js

@@ -226,17 +226,19 @@ class RadioComponent extends ListComponent_1.default {
         }
         return false;
     }
-    getValueAsString(value) {
+    getValueAsString(value, options = {}) {
         if (lodash_1.default.isObject(value)) {
             value = JSON.stringify(value);
         }
         else if (!lodash_1.default.isString(value)) {
             value = lodash_1.default.toString(value);
         }
-        if (this.component.dataSrc !== 'values') {
+        const isModalPreviewWithUrlDataSource = options.modalPreview && this.component.dataSrc === 'url';
+        if (this.component.dataSrc !== 'values' && !isModalPreviewWithUrlDataSource) {
             return value;
         }
-        const option = lodash_1.default.find(this.component.values, (v) => v.value === value);
+        const values = isModalPreviewWithUrlDataSource ? this.loadedOptions : this.component.values;
+        const option = lodash_1.default.find(values, (v) => v.value === value);
         if (!value) {
             return lodash_1.default.get(option, 'label', '');
         }

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(): string;
     recaptchaResult: any;

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

@@ -1,5 +1,6 @@
 /**
  * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
  * @returns {import('@formio/core').Component[]} - The edit form components.
  */
-export default function _default(): import('@formio/core').Component[];
+export default function _default(...extend: any[]): import('@formio/core').Component[];

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

@@ -7,9 +7,10 @@ const Components_1 = __importDefault(require("../Components"));
 const ReCaptcha_edit_display_1 = __importDefault(require("./editForm/ReCaptcha.edit.display"));
 /**
  * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
  * @returns {import('@formio/core').Component[]} - The edit form components.
  */
-function default_1() {
+function default_1(...extend) {
     return Components_1.default.baseEditForm([
         {
             key: 'display',
@@ -31,6 +32,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;
@@ -7,7 +24,13 @@ declare const _default: ({
         label: string;
         value: string;
     }[];
+    validate: {
+        required: boolean;
+    };
     weight: number;
+    tag?: undefined;
+    className?: undefined;
+    content?: undefined;
     input?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;
@@ -27,16 +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;
-    weight?: undefined;
+    validate?: 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: [
             {
@@ -17,6 +25,9 @@ exports.default = [
                 value: 'buttonClick'
             }
         ],
+        validate: {
+            required: true
+        },
         weight: 650
     },
     {
@@ -26,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

@@ -228,9 +228,10 @@ class SelectComponent extends ListComponent_1.default {
     }
     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() && !lodash_1.default.isObject(data.data)) ? { data: data } : data, value)
+            label: this.itemTemplate((this.isEntireObjectDisplay() && !lodash_1.default.isObject(data.data)) ? { data: data } : readOnlyResourceLabelData || data, value)
         };
     }
     itemTemplate(data, value) {
@@ -1467,6 +1468,10 @@ class SelectComponent extends ListComponent_1.default {
     asString(value, options = {}) {
         var _a;
         value = value !== null && value !== void 0 ? value : this.getValue();
+        if (options.modalPreview && this.selectData) {
+            const { label } = this.selectValueAndLabel(value);
+            return label;
+        }
         //need to convert values to strings to be able to compare values with available options that are strings
         const convertToString = (data, valueProperty) => {
             if (valueProperty) {

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(() => {