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

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.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/cjs/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/cjs/components/select/fixtures/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.comp22 = exports.comp21 = exports.comp20 = exports.comp19 = exports.comp18 = exports.comp17 = exports.comp16 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp2 = exports.comp1 = exports.multiSelectOptions = exports.multiSelect = void 0;
+exports.comp24 = exports.comp23 = exports.comp22 = exports.comp21 = exports.comp20 = exports.comp19 = exports.comp18 = exports.comp17 = exports.comp16 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp2 = exports.comp1 = exports.multiSelectOptions = exports.multiSelect = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const comp2_1 = __importDefault(require("./comp2"));
@@ -49,3 +49,7 @@ const comp21_1 = __importDefault(require("./comp21"));
 exports.comp21 = comp21_1.default;
 const comp22_1 = __importDefault(require("./comp22"));
 exports.comp22 = comp22_1.default;
+const comp23_1 = __importDefault(require("./comp23"));
+exports.comp23 = comp23_1.default;
+const comp24_1 = __importDefault(require("./comp24"));
+exports.comp24 = comp24_1.default;

package/lib/cjs/components/selectboxes/SelectBoxes.js

@@ -162,11 +162,14 @@ class SelectBoxesComponent extends Radio_1.default {
         }
         return changed;
     }
-    getValueAsString(value) {
+    getValueAsString(value, options = {}) {
         if (!value) {
             return '';
         }
         if (this.isSelectURL) {
+            if (options.modalPreview && this.loadedOptions) {
+                return this.loadedOptions.filter((option) => value[option.value]).map((option) => option.label).join(', ');
+            }
             return (0, lodash_1.default)(value).pickBy((val) => val).keys().join(', ');
         }
         return (0, lodash_1.default)(this.component.values || [])

package/lib/cjs/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/cjs/translations/en.js

@@ -73,4 +73,5 @@ exports.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}}'
 };

package/lib/cjs/utils/utils.d.ts

@@ -31,6 +31,12 @@ export function getElementRect(element: HTMLElement): {
     width: number;
     height: number;
 };
+/**
+ * Get non HTMLElement property in the window object
+ * @param {string} property - The window property to fetch the script plugin from.
+ * @returns {any | undefined} - The HTML Element property on the window object.
+ */
+export function getScriptPlugin(property: string): any | undefined;
 /**
  * Determines the boolean value of a setting.
  * @param {string|boolean} value - A string or boolean value to convert to boolean.

package/lib/cjs/utils/utils.js

@@ -30,8 +30,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.observeOverload = exports.withSwitch = exports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.moment = exports.ConditionOperators = exports.jsonLogic = void 0;
-exports.isSelectResourceWithObjectValue = exports.getItemTemplateKeys = exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isInsideScopingComponent = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = void 0;
+exports.withSwitch = exports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.moment = exports.ConditionOperators = exports.jsonLogic = void 0;
+exports.isSelectResourceWithObjectValue = exports.getItemTemplateKeys = exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isInsideScopingComponent = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = exports.observeOverload = void 0;
 const lodash_1 = __importDefault(require("lodash"));
 exports._ = lodash_1.default;
 const fetch_ponyfill_1 = __importDefault(require("fetch-ponyfill"));
@@ -126,6 +126,20 @@ function getElementRect(element) {
     };
 }
 exports.getElementRect = getElementRect;
+/**
+ * Get non HTMLElement property in the window object
+ * @param {string} property - The window property to fetch the script plugin from.
+ * @returns {any | undefined} - The HTML Element property on the window object.
+ */
+function getScriptPlugin(property) {
+    const obj = window[property];
+    if (typeof HTMLElement === 'object' ? obj instanceof HTMLElement : //DOM2
+        obj && typeof obj === 'object' && true && obj.nodeType === 1 && typeof obj.nodeName === 'string') {
+        return undefined;
+    }
+    return obj;
+}
+exports.getScriptPlugin = getScriptPlugin;
 /**
  * Determines the boolean value of a setting.
  * @param {string|boolean} value - A string or boolean value to convert to boolean.

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

@@ -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/mjs/Webform.js

@@ -6,7 +6,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 = {};
@@ -644,7 +644,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);
@@ -742,7 +742,7 @@ export default class Webform extends NestedDataComponent {
         }
         const draft = fastCloneDeep(this.submission);
         draft.state = "draft";
-        if (!this.savingDraft) {
+        if (!this.savingDraft && !this.submitting) {
             this.emit("saveDraftBegin");
             this.savingDraft = true;
             this.formio
@@ -820,7 +820,7 @@ 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 &&
@@ -1504,16 +1504,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

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

@@ -6,7 +6,7 @@ import isMobile from 'ismobilejs';
 import { processOne, processOneSync, validateProcessInfo } from '@formio/core/process';
 import { Formio } from '../../../Formio';
 import * as FormioUtils from '../../../utils/utils';
-import { fastCloneDeep, boolValue, getComponentPath, isInsideScopingComponent, currentTimezone } from '../../../utils/utils';
+import { fastCloneDeep, boolValue, getComponentPath, isInsideScopingComponent, currentTimezone, getScriptPlugin } from '../../../utils/utils';
 import Element from '../../../Element';
 import ComponentModal from '../componentModal/ComponentModal';
 import Widgets from '../../../widgets';
@@ -3463,7 +3463,7 @@ Component.requireLibrary = function (name, property, src, polling) {
             }.bind(Component.externalLibraries[name]);
         }
         // See if the plugin already exists.
-        const plugin = _.get(window, property);
+        const plugin = getScriptPlugin(property);
         if (plugin) {
             Component.externalLibraries[name].resolve(plugin);
         }
@@ -3506,7 +3506,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 = _.get(window, property);
+                    const plugin = getScriptPlugin(property);
                     if (plugin) {
                         Component.externalLibraries[name].resolve(plugin);
                     }

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

@@ -267,7 +267,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;
@@ -453,20 +453,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/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/mjs/components/radio/Radio.js

@@ -226,17 +226,19 @@ export default class RadioComponent extends ListComponent {
         }
         return false;
     }
-    getValueAsString(value) {
+    getValueAsString(value, options = {}) {
         if (_.isObject(value)) {
             value = JSON.stringify(value);
         }
         else if (!_.isString(value)) {
             value = _.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 = _.find(this.component.values, (v) => v.value === value);
+        const values = isModalPreviewWithUrlDataSource ? this.loadedOptions : this.component.values;
+        const option = _.find(values, (v) => v.value === value);
         if (!value) {
             return _.get(option, 'label', '');
         }

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

package/lib/mjs/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/mjs/components/recaptcha/ReCaptcha.form.js

@@ -2,9 +2,10 @@ import Components from '../Components';
 import ReCaptchaEditDisplay from './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.
  */
-export default function () {
+export default function (...extend) {
     return Components.baseEditForm([
         {
             key: 'display',
@@ -26,5 +27,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;
@@ -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/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: [
             {
@@ -15,6 +23,9 @@ export default [
                 value: 'buttonClick'
             }
         ],
+        validate: {
+            required: true
+        },
         weight: 650
     },
     {
@@ -24,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) {
@@ -1492,6 +1493,10 @@ export default class SelectComponent extends ListComponent {
     }
     asString(value, options = {}) {
         value = 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/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: {