@formio/js 5.0.2 → 5.1.0-dev.5522.066969f

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

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import ListComponent from '../_classes/list/ListComponent';
 import { Formio } from '../../Formio';
-import { boolValue, componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
+import { boolValue, componentValueTypes, getComponentSavedTypes } from '../../utils';
 export default class RadioComponent extends ListComponent {
     static schema(...extend) {
         return ListComponent.schema({
@@ -153,6 +153,12 @@ export default class RadioComponent extends ListComponent {
             this.dataReady.then(() => res(true));
         });
     }
+    convertValues(values) {
+        if (this.options.renderMode === 'html' && this.type === 'radio') {
+            return values.map(x => ({ ...x, value: this.convertByDataType(x.value) }));
+        }
+        return values;
+    }
     render() {
         if (!this.optionsLoaded) {
             return super.render(this.renderTemplate('loader'));
@@ -160,7 +166,7 @@ export default class RadioComponent extends ListComponent {
         return super.render(this.renderTemplate('radio', {
             input: this.inputInfo,
             inline: this.component.inline,
-            values: this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions,
+            values: this.component.dataSrc === 'values' ? this.convertValues(this.component.values) : this.loadedOptions,
             value: this.dataValue,
             row: this.row,
         }));
@@ -293,6 +299,16 @@ export default class RadioComponent extends ListComponent {
         if (method.toUpperCase() === 'GET') {
             body = null;
         }
+        const limit = this.component.limit || 100;
+        const skip = this.isScrollLoading ? this.selectOptions.length : 0;
+        // Allow for url interpolation.
+        url = this.sanitize(this.interpolate(url, {
+            formioBase: Formio.getBaseUrl(),
+            search,
+            limit,
+            skip,
+            page: Math.abs(Math.floor(skip / limit))
+        }), this.shouldSanitizeValue);
         // Set ignoreCache if it is
         options.ignoreCache = this.component.ignoreCache;
         // Make the request.
@@ -355,7 +371,7 @@ export default class RadioComponent extends ListComponent {
             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.checked : (input.value.toString() === value.toString());
+                const checked = (value === undefined || value === null) ? false : (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);
@@ -396,7 +412,7 @@ export default class RadioComponent extends ListComponent {
      * @param {*} value - The value to normalize
      * @returns {*} - Returns the normalized value
      */
-    normalizeValue(value) {
+    convertByDataType(value) {
         const dataType = this.component.dataType || 'auto';
         if (value === this.emptyValue) {
             return value;
@@ -428,13 +444,17 @@ export default class RadioComponent extends ListComponent {
                 value = !(!value || value.toString() === 'false');
                 break;
         }
-        if (this.isSelectURL && this.templateData && this.templateData[value]) {
+        return value;
+    }
+    normalizeValue(value) {
+        const valueConverted = this.convertByDataType(value);
+        if (this.isSelectURL && this.templateData && this.templateData[valueConverted]) {
             const submission = this.root.submission;
             if (!submission.metadata.selectData) {
                 submission.metadata.selectData = {};
             }
-            _.set(submission.metadata.selectData, this.path, this.templateData[value]);
+            _.set(submission.metadata.selectData, this.path, this.templateData[valueConverted]);
         }
-        return super.normalizeValue(value);
+        return super.normalizeValue(valueConverted);
     }
 }

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

@@ -47,7 +47,7 @@ export default class ReCaptchaComponent extends Component {
                 this.recaptchaApiReady = Formio.requireLibrary('googleRecaptcha', 'grecaptcha', recaptchaApiScriptUrl, true);
             }
             else {
-                console.warn('There is no Site Key specified in settings in form JSON');
+                console.warn(this.t('noSiteKey'));
             }
         }
     }
@@ -60,7 +60,7 @@ export default class ReCaptchaComponent extends Component {
     async verify(actionName) {
         const siteKey = _get(this.root.form, 'settings.recaptcha.siteKey');
         if (!siteKey) {
-            console.warn('There is no Site Key specified in settings in form JSON');
+            console.warn(this.t('noSiteKey'));
             return;
         }
         if (!this.recaptchaApiReady) {

package/lib/mjs/components/recaptcha/editForm/ReCaptcha.edit.display.js

@@ -1,4 +1,4 @@
-import { getContextButtons } from '../../../utils/utils';
+import { getContextButtons } from '../../../utils';
 export default [
     {
         key: 'recaptchaInfo',

package/lib/mjs/components/select/Select.d.ts

@@ -112,7 +112,7 @@ export default class SelectComponent extends ListComponent {
     activate(): void;
     setLoadingItem(addToCurrentList?: boolean): void;
     get active(): boolean | undefined;
-    render(): import("../_classes/field/Field").default;
+    render(): string;
     wrapElement(element: any): any;
     choicesOptions(): any;
     attach(element: any): Promise<void> | undefined;
@@ -126,7 +126,6 @@ export default class SelectComponent extends ListComponent {
     get isLoadingAvailable(): any;
     onScroll(): void;
     attachRefreshOnBlur(): void;
-    addPlaceholderItem(placeholderValue: any): void;
     update(): void;
     addCurrentChoices(values: any, items: any, keyValue: any): any;
     getValueAsString(data: any, options: any): any;

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

@@ -1,9 +1,8 @@
 import _ from 'lodash';
 import { Formio } from '../../Formio';
 import ListComponent from '../_classes/list/ListComponent';
-import Input from '../_classes/input/Input';
 import Form from '../../Form';
-import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, isSelectResourceWithObjectValue, removeHTML } from '../../utils/utils';
+import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, isSelectResourceWithObjectValue, removeHTML } from '../../utils';
 import Choices from '../../utils/ChoicesWrapper';
 export default class SelectComponent extends ListComponent {
     static schema(...extend) {
@@ -532,13 +531,13 @@ export default class SelectComponent extends ListComponent {
             skip,
         };
         // Allow for url interpolation.
-        url = this.interpolate(url, {
+        url = this.sanitize(this.interpolate(url, {
             formioBase: Formio.getBaseUrl(),
             search,
             limit,
             skip,
             page: Math.abs(Math.floor(skip / limit))
-        });
+        }), this.shouldSanitizeValue);
         // Add search capability.
         if (this.component.searchField && search) {
             const searchValue = Array.isArray(search)
@@ -595,7 +594,7 @@ export default class SelectComponent extends ListComponent {
             component: this.component,
             message: err.toString(),
         });
-        console.warn(`Unable to load resources for ${this.key}`);
+        console.warn(this.t('loadResourcesError', { componentKey: this.key }));
     }
     /**
      * Get the request headers for this select dropdown.
@@ -729,7 +728,7 @@ export default class SelectComponent extends ListComponent {
             }
         }
         else if (this.component.dataSrc === 'url' || this.component.dataSrc === 'resource') {
-            this.addOption('', this.t('loading...'));
+            this.addOption('', `${this.t('loading')}...`);
         }
     }
     get active() {
@@ -773,16 +772,16 @@ export default class SelectComponent extends ListComponent {
             removeItemButton: this.component.disabled ? false : _.get(this.component, 'removeItemButton', true),
             itemSelectText: '',
             classNames: {
-                containerOuter: 'choices form-group formio-choices',
-                containerInner: this.transform('class', 'form-control ui fluid selection dropdown')
+                containerOuter: ['choices', 'form-group', 'formio-choices'],
+                containerInner: this.transform('class', 'form-control ui fluid selection dropdown').split(' '),
             },
             addItemText: false,
             allowHTML: true,
             placeholder: !!this.component.placeholder,
             placeholderValue: placeholderValue,
-            noResultsText: this.t('No results found'),
-            noChoicesText: this.t('No choices to choose from'),
-            searchPlaceholderValue: this.t('Type to search'),
+            noResultsText: this.t('noResultsFound'),
+            noChoicesText: this.t('noChoices'),
+            searchPlaceholderValue: this.t('typeToSearch'),
             shouldSort: false,
             position: (this.component.dropdown || 'auto'),
             searchEnabled: useSearch,
@@ -802,6 +801,7 @@ export default class SelectComponent extends ListComponent {
                 }),
             valueComparer: _.isEqual,
             resetScrollPosition: false,
+            duplicateItemsAllowed: false,
             ...customOptions,
         };
     }
@@ -868,7 +868,7 @@ export default class SelectComponent extends ListComponent {
                 this.choices.containerOuter.element.setAttribute('tabIndex', '-1');
                 this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());
             }
-            Input.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());
@@ -934,12 +934,6 @@ export default class SelectComponent extends ListComponent {
                 this.positionDropdown();
             });
         }
-        if (this.choices && choicesOptions.placeholderValue && this.choices._isSelectOneElement) {
-            this.addPlaceholderItem(choicesOptions.placeholderValue);
-            this.addEventListener(input, 'removeItem', () => {
-                this.addPlaceholderItem(choicesOptions.placeholderValue);
-            });
-        }
         // Add value options.
         this.addValueOptions();
         this.setChoicesValue(this.dataValue);
@@ -1025,20 +1019,6 @@ export default class SelectComponent extends ListComponent {
             });
         }
     }
-    addPlaceholderItem(placeholderValue) {
-        const items = this.choices._store.activeItems;
-        if (!items.length) {
-            this.choices._addItem({
-                value: '',
-                label: placeholderValue,
-                choiceId: 0,
-                groupId: -1,
-                customProperties: null,
-                placeholder: true,
-                keyCode: null
-            });
-        }
-    }
     /* eslint-enable max-statements */
     update() {
         if (this.component.dataSrc === 'custom') {
@@ -1219,7 +1199,7 @@ export default class SelectComponent extends ListComponent {
             return normalize[dataType]().value;
         }
         catch (err) {
-            console.warn('Failed to normalize value', err);
+            console.warn(this.t('failedToNormalize'), err);
             return value;
         }
     }
@@ -1415,7 +1395,7 @@ export default class SelectComponent extends ListComponent {
                         return (JSON.stringify(normalizedOptionValue) === JSON.stringify(value));
                     }
                     catch (err) {
-                        console.warn.error('Error while comparing items', err);
+                        console.warn.error(this.t('failedToCompareItems'), err);
                         return false;
                     }
                 };
@@ -1507,7 +1487,7 @@ export default class SelectComponent extends ListComponent {
     }
     asString(value, options = {}) {
         value = value ?? this.getValue();
-        if (options.modalPreview || this.inDataTable) {
+        if (options.modalPreview || this.inDataTable || options.email) {
             if (this.inDataTable) {
                 value = this.undoValueTyping(value);
             }

package/lib/mjs/components/select/editForm/Select.edit.data.d.ts

@@ -9,99 +9,15 @@ declare const _default: ({
         custom?: undefined;
     };
     type?: undefined;
+    as?: undefined;
+    editor?: undefined;
     weight?: undefined;
     input?: undefined;
     label?: undefined;
     tooltip?: undefined;
-    conditional?: undefined;
-    as?: undefined;
-    editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
-    reorder?: undefined;
-    components?: undefined;
-    dataSrc?: undefined;
-    authenticate?: undefined;
-    template?: undefined;
-    valueProperty?: undefined;
-    clearOnHide?: undefined;
-    lazyLoad?: undefined;
-    skipMerge?: undefined;
-    refreshOn?: undefined;
-    onSetItems?: undefined;
-    onChange?: undefined;
-    placeholder?: undefined;
-    validate?: undefined;
-    delimiter?: undefined;
-    requireDecimal?: undefined;
-    encrypted?: undefined;
-    rows?: undefined;
-    mask?: undefined;
-    tableView?: undefined;
-    alwaysEnabled?: undefined;
-} | {
-    type: string;
-    weight: number;
-    input: boolean;
-    key: string;
-    label: string;
-    tooltip: string;
-    conditional: {
-        json: {
-            '===': (string | {
-                var: string;
-            })[];
-            and?: undefined;
-            in?: undefined;
-        };
-    };
-    data?: undefined;
-    as?: undefined;
-    editor?: undefined;
+    conditional?: undefined;
     defaultValue?: undefined;
-    description?: undefined;
-    reorder?: undefined;
-    components?: undefined;
-    dataSrc?: undefined;
-    authenticate?: undefined;
-    template?: undefined;
-    valueProperty?: undefined;
-    clearOnHide?: undefined;
-    lazyLoad?: undefined;
-    skipMerge?: undefined;
-    refreshOn?: undefined;
-    onSetItems?: undefined;
-    onChange?: undefined;
-    placeholder?: undefined;
-    validate?: undefined;
-    delimiter?: undefined;
-    requireDecimal?: undefined;
-    encrypted?: undefined;
-    rows?: undefined;
-    mask?: undefined;
-    tableView?: undefined;
-    alwaysEnabled?: undefined;
-} | {
-    type: string;
-    as: string;
-    editor: string;
-    weight: number;
-    input: boolean;
-    key: string;
-    label: string;
-    tooltip: string;
-    defaultValue: {};
-    conditional: {
-        json: {
-            '===': (string | {
-                var: string;
-            })[];
-            and?: undefined;
-            in?: undefined;
-        };
-    };
-    data?: undefined;
-    description?: undefined;
     reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
@@ -172,6 +88,7 @@ declare const _default: ({
     key: string;
     tooltip: string;
     weight: number;
+    defaultValue: boolean;
     conditional: {
         json: {
             and: ({
@@ -192,7 +109,6 @@ declare const _default: ({
     data?: undefined;
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
     reorder?: undefined;
     components?: undefined;
@@ -303,8 +219,8 @@ declare const _default: ({
     };
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
+    defaultValue?: undefined;
     reorder?: undefined;
     components?: undefined;
     skipMerge?: undefined;
@@ -411,8 +327,8 @@ declare const _default: ({
     };
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
+    defaultValue?: undefined;
     reorder?: undefined;
     components?: undefined;
     authenticate?: undefined;
@@ -443,11 +359,11 @@ declare const _default: ({
         url?: undefined;
         custom?: undefined;
     };
-    conditional?: undefined;
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
+    conditional?: undefined;
+    defaultValue?: undefined;
     reorder?: undefined;
     components?: undefined;
     authenticate?: undefined;
@@ -475,11 +391,52 @@ declare const _default: ({
     placeholder: string;
     tooltip: string;
     data?: undefined;
-    conditional?: undefined;
     as?: undefined;
     editor?: undefined;
+    description?: undefined;
+    conditional?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
+    components?: undefined;
+    dataSrc?: undefined;
+    authenticate?: undefined;
+    template?: undefined;
+    valueProperty?: undefined;
+    clearOnHide?: undefined;
+    lazyLoad?: undefined;
+    skipMerge?: undefined;
+    refreshOn?: undefined;
+    onSetItems?: undefined;
+    onChange?: undefined;
+    validate?: undefined;
+    delimiter?: undefined;
+    requireDecimal?: undefined;
+    encrypted?: undefined;
+    rows?: undefined;
+    mask?: undefined;
+    tableView?: undefined;
+    alwaysEnabled?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    tooltip: string;
+    weight: number;
+    conditional: {
+        json: {
+            '===': (string | {
+                var: string;
+            })[];
+            and?: undefined;
+            in?: undefined;
+        };
+    };
+    data?: undefined;
+    as?: undefined;
+    editor?: undefined;
     description?: undefined;
+    defaultValue?: undefined;
     reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
@@ -492,6 +449,7 @@ declare const _default: ({
     refreshOn?: undefined;
     onSetItems?: undefined;
     onChange?: undefined;
+    placeholder?: undefined;
     validate?: undefined;
     delimiter?: undefined;
     requireDecimal?: undefined;
@@ -710,8 +668,8 @@ declare const _default: ({
     };
     data?: undefined;
     as?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
+    defaultValue?: undefined;
     reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
@@ -759,8 +717,8 @@ declare const _default: ({
     };
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
+    defaultValue?: undefined;
     reorder?: undefined;
     components?: undefined;
     authenticate?: undefined;
@@ -831,10 +789,10 @@ declare const _default: ({
     defaultValue: boolean;
     tooltip: string;
     data?: undefined;
-    conditional?: undefined;
     as?: undefined;
     editor?: undefined;
     description?: undefined;
+    conditional?: undefined;
     reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
@@ -927,10 +885,10 @@ declare const _default: ({
     weight: number;
     tooltip: string;
     data?: undefined;
-    conditional?: undefined;
     as?: undefined;
     editor?: undefined;
     description?: undefined;
+    conditional?: undefined;
     reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
@@ -973,8 +931,8 @@ declare const _default: ({
     data?: undefined;
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
+    defaultValue?: undefined;
     reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
@@ -1003,11 +961,11 @@ declare const _default: ({
     label: string;
     tooltip: string;
     data?: undefined;
-    conditional?: undefined;
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
+    conditional?: undefined;
+    defaultValue?: undefined;
     reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
@@ -1040,8 +998,8 @@ declare const _default: ({
     tooltip: string;
     defaultValue: {};
     data?: undefined;
-    conditional?: undefined;
     description?: undefined;
+    conditional?: undefined;
     reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
@@ -1069,15 +1027,15 @@ declare const _default: ({
     onChange(context: any): void;
     data?: undefined;
     type?: undefined;
+    as?: undefined;
+    editor?: undefined;
     weight?: undefined;
     input?: undefined;
     label?: undefined;
     tooltip?: undefined;
+    description?: undefined;
     conditional?: undefined;
-    as?: undefined;
-    editor?: undefined;
     defaultValue?: undefined;
-    description?: undefined;
     reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
@@ -1099,6 +1057,7 @@ declare const _default: ({
     alwaysEnabled?: undefined;
 } | {
     key: string;
+    type: string;
     conditional: {
         json: {
             and: ({
@@ -1149,15 +1108,14 @@ declare const _default: ({
         };
     };
     data?: undefined;
-    type?: undefined;
+    as?: undefined;
+    editor?: undefined;
     weight?: undefined;
     input?: undefined;
     label?: undefined;
     tooltip?: undefined;
-    as?: undefined;
-    editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
+    defaultValue?: undefined;
     reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
@@ -1184,15 +1142,15 @@ declare const _default: ({
     onChange(context: any): void;
     data?: undefined;
     type?: undefined;
+    as?: undefined;
+    editor?: undefined;
     weight?: undefined;
     input?: undefined;
     label?: undefined;
     tooltip?: undefined;
+    description?: undefined;
     conditional?: undefined;
-    as?: undefined;
-    editor?: undefined;
     defaultValue?: undefined;
-    description?: undefined;
     reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;