@formio/js 5.0.0-dev.5613.77144cc → 5.0.0-dev.5614.b5c93f3

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

@@ -200,7 +200,8 @@ class RadioComponent extends ListComponent_1.default {
         if (this.viewOnly || !this.refs.input || !this.refs.input.length) {
             return this.dataValue;
         }
-        let value = this.dataValue;
+        // If the input type of the component is checkbox the value should be determined by the checkboxes checked property
+        let value = this.component.inputType === 'checkbox' ? '' : this.dataValue;
         this.refs.input.forEach((input, index) => {
             if (input.checked) {
                 value = (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) ?
@@ -226,17 +227,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', '');
         }
@@ -320,7 +323,7 @@ class RadioComponent extends ListComponent_1.default {
             const value = this.dataValue;
             this.refs.wrapper.forEach((wrapper, index) => {
                 const input = this.refs.input[index];
-                const checked = (input.type === 'checkbox') ? value[input.value] : (input.value.toString() === value.toString());
+                const checked = (input.type === 'checkbox') ? value[input.value] || input.checked : (input.value.toString() === value.toString());
                 if (checked) {
                     //add class to container when selected
                     this.addClass(wrapper, this.optionSelectedClass);
@@ -357,10 +360,9 @@ class RadioComponent extends ListComponent_1.default {
         return changed;
     }
     /**
-     * Normalize values coming into updateValue.
-     *
-     * @param value
-     * @return {*}
+     * Normalize values coming into updateValue. For example, depending on the configuration, string value `"true"` will be normalized to boolean `true`.
+     * @param {*} value - The value to normalize
+     * @returns {*} - Returns the normalized value
      */
     normalizeValue(value) {
         const dataType = this.component.dataType || 'auto';

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

@@ -1,14 +1,7 @@
 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;
+    render(): string;
     recaptchaResult: any;
     createInput(): void;
     recaptchaApiReady: any;

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

@@ -1,3 +1,6 @@
-export default function _default(): {
-    components: any;
-};
+/**
+ * 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(...extend: any[]): import('@formio/core').Component[];

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

@@ -5,7 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const Components_1 = __importDefault(require("../Components"));
 const ReCaptcha_edit_display_1 = __importDefault(require("./editForm/ReCaptcha.edit.display"));
-function default_1() {
+/**
+ * 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(...extend) {
     return Components_1.default.baseEditForm([
         {
             key: 'display',
@@ -27,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.d.ts

@@ -9,23 +9,9 @@ export default class SelectComponent extends ListComponent {
     };
     static get serverConditionSettings(): {
         valueComponent(classComp: any): any;
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
     };
     static get conditionOperatorsSettings(): {
         valueComponent(classComp: any): any;
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
     };
     static savedValueTypes(schema: any): any[];
     templateData: {} | undefined;
@@ -44,21 +30,11 @@ export default class SelectComponent extends ListComponent {
     get dataReady(): any;
     get emptyValue(): {};
     get valueProperty(): any;
-    get inputInfo(): {
-        type: string;
-        component: any;
-        changeEvent: string;
-        attr: {
-            name: any;
-            type: any;
-            class: string;
-            lang: any;
-        };
-    };
+    get inputInfo(): any;
     get isSelectResource(): boolean;
     get itemsFromUrl(): boolean;
     get isInfiniteScrollProvided(): boolean;
-    get shouldInitialLoad(): any;
+    get shouldInitialLoad(): boolean;
     get selectMetadata(): any;
     isEntireObjectDisplay(): boolean;
     selectValueAndLabel(data: any): {
@@ -68,11 +44,12 @@ export default class SelectComponent extends ListComponent {
     itemTemplate(data: any, value: any): any;
     /**
      * Adds an option to the select dropdown.
-     *
-     * @param value
-     * @param label
+     * @param {*} value - The value of the new option.
+     * @param {string} label - The label of the new option.
+     * @param {object} [attrs] - Additional value attributes. Defaults to {}.
+     * @param {string} [id] - An id. Defaults to a random string.
      */
-    addOption(value: any, label: any, attrs?: {}, id?: string): void;
+    addOption(value: any, label: string, attrs?: object | undefined, id?: string | undefined): void;
     addValueOptions(items: any): boolean;
     disableInfiniteScroll(): void;
     set serverCount(value: any);
@@ -82,6 +59,7 @@ export default class SelectComponent extends ListComponent {
     set downloadedResources(value: any);
     get downloadedResources(): any;
     getSingleItemValueForHTMLMode(data: any): any;
+    itemValueForHTMLMode(value: any): any;
     get loadingError(): boolean | undefined;
     loadItems(url: any, search: any, headers: any, options: any, method: any, body: any): void;
     getCustomItems(): any;
@@ -99,7 +77,7 @@ export default class SelectComponent extends ListComponent {
     activate(): void;
     setLoadingItem(addToCurrentList?: boolean): void;
     get active(): boolean | undefined;
-    render(): any;
+    render(): import("../_classes/field/Field").default;
     wrapElement(element: any): any;
     choicesOptions(): any;
     attach(element: any): Promise<void> | undefined;
@@ -115,11 +93,8 @@ export default class SelectComponent extends ListComponent {
     attachRefreshOnBlur(): void;
     addPlaceholderItem(placeholderValue: any): void;
     update(): void;
-    /**
-     * @param {*} value
-     * @param {Array} items
-     */
-    addCurrentChoices(values: any, items: any[], keyValue: any): any;
+    addCurrentChoices(values: any, items: any, keyValue: any): any;
+    getValueAsString(data: any, options: any): any;
     normalizeSingleValue(value: any): any;
     setMetadata(value: any): any;
     updateValue(value: any, flags: any): boolean;
@@ -131,22 +106,24 @@ export default class SelectComponent extends ListComponent {
     validateValueAvailability(setting: any, value: any): boolean;
     /**
      * Performs required transformations on the initial value to use in selectOptions
-     * @param {*} value
+     * @param {*} value - The value to transform.
+     * @returns {*} - Returns the options value.
      */
     getOptionValue(value: any): any;
     /**
      * If component has static values (values, json) or custom values, returns an array of them
-     * @returns {Array<*>|undefined}
+     * @returns {Array<*>|undefined} - Returns an array of the static or custom values.
      */
     getOptionsValues(): Array<any> | undefined;
     /**
      * Output this select dropdown as a string value.
-     * @return {*}
+     * @returns {*}
      */
     isBooleanOrNumber(value: any): any;
     getNormalizedValues(): any;
     asString(value: any, options?: {}): any;
     focus(): void;
+    setErrorClasses(elements: any, dirty: any, hasError: any, hasMessages: any, element?: any): void;
 }
 import ListComponent from '../_classes/list/ListComponent';
 import Choices from '../../utils/ChoicesWrapper';

package/lib/cjs/components/select/Select.form.d.ts

@@ -1,3 +1,6 @@
-export default function _default(...extend: any[]): {
-    components: any;
-};
+/**
+ * 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(...extend: any[]): import('@formio/core').Component[];

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

@@ -7,6 +7,11 @@ const ListComponent_form_1 = __importDefault(require("../_classes/list/ListCompo
 const Select_edit_data_1 = __importDefault(require("./editForm/Select.edit.data"));
 const Select_edit_display_1 = __importDefault(require("./editForm/Select.edit.display"));
 const Select_edit_validation_1 = __importDefault(require("./editForm/Select.edit.validation"));
+/**
+ * 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(...extend) {
     return (0, ListComponent_form_1.default)([
         {

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const Formio_1 = require("../../Formio");
 const ListComponent_1 = __importDefault(require("../_classes/list/ListComponent"));
-const Input_1 = __importDefault(require("../_classes/input/Input"));
 const Form_1 = __importDefault(require("../../Form"));
 const utils_1 = require("../../utils/utils");
 const ChoicesWrapper_1 = __importDefault(require("../../utils/ChoicesWrapper"));
@@ -228,9 +227,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) {
@@ -286,9 +286,10 @@ class SelectComponent extends ListComponent_1.default {
     }
     /**
      * Adds an option to the select dropdown.
-     *
-     * @param value
-     * @param label
+     * @param {*} value - The value of the new option.
+     * @param {string} label - The label of the new option.
+     * @param {object} [attrs] - Additional value attributes. Defaults to {}.
+     * @param {string} [id] - An id. Defaults to a random string.
      */
     addOption(value, label, attrs = {}, id = (0, utils_1.getRandomComponentId)()) {
         if (lodash_1.default.isNil(label))
@@ -592,6 +593,7 @@ class SelectComponent extends ListComponent_1.default {
     }
     /**
      * Get the request headers for this select dropdown.
+     * @returns {*} - Returns the request headers for this select dropdown.
      */
     get requestHeaders() {
         // Create the headers object.
@@ -811,9 +813,7 @@ class SelectComponent extends ListComponent_1.default {
         }
         const tabIndex = input.tabIndex;
         this.addPlaceholder();
-        if (this.i18next) {
-            input.setAttribute('dir', this.i18next.dir());
-        }
+        input.setAttribute('dir', this.i18next.dir());
         if ((_c = (_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.containerOuter) === null || _b === void 0 ? void 0 : _b.element) === null || _c === void 0 ? void 0 : _c.parentNode) {
             this.choices.destroy();
         }
@@ -831,7 +831,7 @@ class SelectComponent extends ListComponent_1.default {
                 this.choices.containerOuter.element.setAttribute('tabIndex', '-1');
                 this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());
             }
-            Input_1.default.prototype.addFocusBlurEvents.call(this, this.focusableElement);
+            this.addFocusBlurEvents(this.choices.input.element);
             if (this.itemsFromUrl && !this.component.noRefreshOnScroll) {
                 this.scrollList = this.choices.choiceList.element;
                 this.addEventListener(this.scrollList, 'scroll', () => this.onScroll());
@@ -1041,10 +1041,6 @@ class SelectComponent extends ListComponent_1.default {
     get visible() {
         return super.visible;
     }
-    /**
-     * @param {*} value
-     * @param {Array} items
-     */
     addCurrentChoices(values, items, keyValue) {
         if (!values) {
             return false;
@@ -1193,10 +1189,9 @@ class SelectComponent extends ListComponent_1.default {
         }
     }
     /**
-     * Normalize values coming into updateValue.
-     *
-     * @param value
-     * @return {*}
+     * Normalize values coming into updateValue. For example, depending on the configuration, string value `"true"` will be normalized to boolean `true`.
+     * @param {*} value - The value to normalize
+     * @returns {*} - Returns the normalized value
      */
     normalizeValue(value) {
         if (this.component.multiple && Array.isArray(value)) {
@@ -1392,7 +1387,8 @@ class SelectComponent extends ListComponent_1.default {
     }
     /**
      * Performs required transformations on the initial value to use in selectOptions
-     * @param {*} value
+     * @param {*} value - The value to transform.
+     * @returns {*} - Returns the options value.
      */
     getOptionValue(value) {
         return lodash_1.default.isObject(value) && this.isEntireObjectDisplay()
@@ -1407,7 +1403,7 @@ class SelectComponent extends ListComponent_1.default {
     }
     /**
      * If component has static values (values, json) or custom values, returns an array of them
-     * @returns {Array<*>|undefined}
+     * @returns {Array<*>|undefined} - Returns an array of the static or custom values.
      */
     getOptionsValues() {
         let rawItems = [];
@@ -1447,8 +1443,7 @@ class SelectComponent extends ListComponent_1.default {
     }
     /**
      * Check if a component is eligible for multiple validation
-     *
-     * @return {boolean}
+     * @returns {boolean} - Returns FALSE for select components.
      */
     validateMultiple() {
         // Select component will contain one input when flagged as multiple.
@@ -1456,7 +1451,7 @@ class SelectComponent extends ListComponent_1.default {
     }
     /**
      * Output this select dropdown as a string value.
-     * @return {*}
+     * @returns {*}
      */
     isBooleanOrNumber(value) {
         return typeof value === 'number' || typeof value === 'boolean';
@@ -1470,6 +1465,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) {
@@ -1521,7 +1520,7 @@ class SelectComponent extends ListComponent_1.default {
         const getTemplateValue = (v) => {
             const itemTemplate = this.itemTemplate(v);
             return options.csv && itemTemplate
-                ? (0, utils_1.unescapeHTML)(itemTemplate)
+                ? (0, utils_1.removeHTML)(itemTemplate)
                 : itemTemplate;
         };
         if (Array.isArray(value)) {
@@ -1546,6 +1545,7 @@ class SelectComponent extends ListComponent_1.default {
     }
     detach() {
         var _a, _b;
+        super.detach();
         this.off('blur');
         if (this.choices) {
             if ((_b = (_a = this.choices.containerOuter) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.parentNode) {
@@ -1553,7 +1553,6 @@ class SelectComponent extends ListComponent_1.default {
             }
             this.choices = null;
         }
-        super.detach();
     }
     focus() {
         if (this.focusableElement) {

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

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

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

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

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

@@ -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;