@formio/js 5.0.0-rc.19 → 5.0.0-rc.21

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

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const ListComponent_1 = __importDefault(require("../_classes/list/ListComponent"));
-const native_promise_only_1 = __importDefault(require("native-promise-only"));
 const Formio_1 = require("../../Formio");
 const utils_1 = require("../../utils/utils");
 class RadioComponent extends ListComponent_1.default {
@@ -32,6 +31,36 @@ class RadioComponent extends ListComponent_1.default {
             schema: RadioComponent.schema()
         };
     }
+    static get conditionOperatorsSettings() {
+        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {
+                return {
+                    type: 'select',
+                    dataSrc: 'custom',
+                    valueProperty: 'value',
+                    dataType: classComp.dataType || '',
+                    data: {
+                        custom() {
+                            return classComp.values;
+                        }
+                    },
+                };
+            } });
+    }
+    static savedValueTypes(schema) {
+        const { boolean, string, number, object, array } = utils_1.componentValueTypes;
+        const { dataType } = schema;
+        const types = (0, utils_1.getComponentSavedTypes)(schema);
+        if (types) {
+            return types;
+        }
+        if (dataType === 'object') {
+            return [object, array];
+        }
+        if (utils_1.componentValueTypes[dataType]) {
+            return [utils_1.componentValueTypes[dataType]];
+        }
+        return [boolean, string, number, object, array];
+    }
     constructor(component, options, data) {
         super(component, options, data);
         this.previousValue = this.dataValue || null;
@@ -64,6 +93,10 @@ class RadioComponent extends ListComponent_1.default {
     get optionSelectedClass() {
         return 'radio-selected';
     }
+    get listData() {
+        const listData = lodash_1.default.get(this.root, 'submission.metadata.listData', {});
+        return lodash_1.default.get(listData, this.path);
+    }
     init() {
         super.init();
         this.templateData = {};
@@ -79,7 +112,7 @@ class RadioComponent extends ListComponent_1.default {
             if (typeof this.itemsLoadedResolve === 'function') {
                 this.itemsLoadedResolve();
             }
-            this.itemsLoaded = new native_promise_only_1.default((resolve) => {
+            this.itemsLoaded = new Promise((resolve) => {
                 this.itemsLoadedResolve = resolve;
             });
             if (args.length) {
@@ -87,11 +120,13 @@ class RadioComponent extends ListComponent_1.default {
             }
             return triggerUpdate(...updateArgs);
         };
-        this.itemsLoaded = new native_promise_only_1.default((resolve) => {
+        this.itemsLoaded = new Promise((resolve) => {
             this.itemsLoadedResolve = resolve;
         });
-        this.shouldLoad = true;
+        this.optionsLoaded = false;
         this.loadedOptions = [];
+        // Get the template keys for this radio component.
+        this.getTemplateKeys();
     }
     render() {
         return super.render(this.renderTemplate('radio', {
@@ -191,6 +226,13 @@ class RadioComponent extends ListComponent_1.default {
         }
     }
     loadItems(url, search, headers, options, method, body) {
+        if (this.optionsLoaded) {
+            return;
+        }
+        if (!this.shouldLoad) {
+            this.loadItemsFromMetadata();
+            return;
+        }
         // Ensure we have a method and remove any body if method is get
         method = method || 'GET';
         if (method.toUpperCase() === 'GET') {
@@ -200,33 +242,55 @@ class RadioComponent extends ListComponent_1.default {
         options.ignoreCache = this.component.ignoreCache;
         // Make the request.
         options.header = headers;
-        if (this.shouldLoad) {
-            this.loading = true;
-            Formio_1.Formio.makeRequest(this.options.formio, 'select', url, method, body, options)
-                .then((response) => {
-                this.loading = false;
-                this.error = null;
-                this.setItems(response);
-                this.shouldLoad = false;
-                this.redraw();
-            })
-                .catch((err) => {
-                this.handleLoadingError(err);
-            });
-        }
+        this.loading = true;
+        Formio_1.Formio.makeRequest(this.options.formio, 'select', url, method, body, options)
+            .then((response) => {
+            this.loading = false;
+            this.error = null;
+            this.setItems(response);
+            this.optionsLoaded = true;
+            this.redraw();
+        })
+            .catch((err) => {
+            this.handleLoadingError(err);
+        });
+    }
+    loadItemsFromMetadata() {
+        this.listData.forEach((item, i) => {
+            this.loadedOptions[i] = {
+                label: this.itemTemplate(item)
+            };
+            if (lodash_1.default.isEqual(item, this.selectData)) {
+                this.loadedOptions[i].value = this.dataValue;
+            }
+        });
+        this.optionsLoaded = true;
+        this.redraw();
     }
     setItems(items) {
+        const listData = [];
         items === null || items === void 0 ? void 0 : items.forEach((item, i) => {
             this.loadedOptions[i] = {
                 value: item[this.component.valueProperty],
                 label: this.itemTemplate(item, item[this.component.valueProperty])
             };
+            listData.push(this.templateData[item[this.component.valueProperty]]);
             if (lodash_1.default.isUndefined(item[this.component.valueProperty]) ||
                 lodash_1.default.isObject(item[this.component.valueProperty]) ||
                 (!this.isRadio && lodash_1.default.isBoolean(item[this.component.valueProperty]))) {
                 this.loadedOptions[i].invalid = true;
             }
         });
+        if (this.isSelectURL) {
+            const submission = this.root.submission;
+            if (!submission.metadata) {
+                submission.metadata = {};
+            }
+            if (!submission.metadata.listData) {
+                submission.metadata.listData = {};
+            }
+            lodash_1.default.set(submission.metadata.listData, this.path, listData);
+        }
     }
     setSelectedClasses() {
         if (this.refs.wrapper) {
@@ -289,6 +353,13 @@ class RadioComponent extends ListComponent_1.default {
         if (value === 'false') {
             value = false;
         }
+        if (this.isSelectURL && this.templateData && this.templateData[value]) {
+            const submission = this.root.submission;
+            if (!submission.metadata.selectData) {
+                submission.metadata.selectData = {};
+            }
+            lodash_1.default.set(submission.metadata.selectData, this.path, this.templateData[value]);
+        }
         return super.normalizeValue(value);
     }
 }

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

@@ -7,13 +7,14 @@ export default class ReCaptchaComponent extends Component {
         weight: number;
         schema: any;
     };
+    static savedValueTypes(): never[];
     render(): any;
     recaptchaResult: any;
     createInput(): void;
     recaptchaApiReady: any;
     createLabel(): void;
     verify(actionName: any): void;
-    recaptchaVerifiedPromise: any;
+    recaptchaVerifiedPromise: Promise<void> | undefined;
     isLoading: boolean | undefined;
     sendVerificationRequest(token: any): any;
     checkComponentValidity(data: any, dirty: any, row: any, options?: {}): any;

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

@@ -8,7 +8,6 @@ const Component_1 = __importDefault(require("../_classes/component/Component"));
 const Formio_1 = require("../../Formio");
 const get_1 = __importDefault(require("lodash/get"));
 const debounce_1 = __importDefault(require("lodash/debounce"));
-const native_promise_only_1 = __importDefault(require("native-promise-only"));
 class ReCaptchaComponent extends Component_1.default {
     static schema(...extend) {
         return Component_1.default.schema({
@@ -27,6 +26,9 @@ class ReCaptchaComponent extends Component_1.default {
             schema: ReCaptchaComponent.schema()
         };
     }
+    static savedValueTypes() {
+        return [];
+    }
     render() {
         this.recaptchaResult = null;
         if (this.builderMode) {
@@ -66,7 +68,7 @@ class ReCaptchaComponent extends Component_1.default {
             this.recaptchaApiReady = Formio_1.Formio.requireLibrary('googleRecaptcha', 'grecaptcha', recaptchaApiScriptUrl, true);
         }
         if (this.recaptchaApiReady) {
-            this.recaptchaVerifiedPromise = new native_promise_only_1.default((resolve, reject) => {
+            this.recaptchaVerifiedPromise = new Promise((resolve, reject) => {
                 this.recaptchaApiReady
                     .then(() => {
                     if (!this.isLoading) {
@@ -119,13 +121,13 @@ class ReCaptchaComponent extends Component_1.default {
         const componentData = row[this.component.key];
         if (!componentData || !componentData.token) {
             this.setCustomValidity('ReCAPTCHA: Token is not specified in submission');
-            return native_promise_only_1.default.resolve(false);
+            return Promise.resolve(false);
         }
         if (!componentData.success) {
             this.setCustomValidity('ReCAPTCHA: Token validation error');
-            return native_promise_only_1.default.resolve(false);
+            return Promise.resolve(false);
         }
-        return this.hook('validateReCaptcha', componentData.token, () => native_promise_only_1.default.resolve(true))
+        return this.hook('validateReCaptcha', componentData.token, () => Promise.resolve(true))
             .then((success) => success)
             .catch((err) => {
             this.setCustomValidity(err.message || err);

package/lib/cjs/components/resource/Resource.d.ts

@@ -1,3 +1,10 @@
 export default class ResourceComponent extends SelectComponent {
+    static get builderInfo(): {
+        title: string;
+        icon: string;
+        weight: number;
+        documentation: string;
+        schema: any;
+    };
 }
 import SelectComponent from '../select/Select';

package/lib/cjs/components/resource/Resource.js

@@ -19,7 +19,6 @@ class ResourceComponent extends Select_1.default {
     static get builderInfo() {
         return {
             title: 'Resource',
-            group: 'premium',
             icon: 'files-o',
             weight: 90,
             documentation: '/userguide/form-building/form-components#resource',

package/lib/cjs/components/resource/editForm/Resource.edit.display.js

@@ -7,7 +7,7 @@ exports.default = [
         type: 'htmlelement',
         tag: 'div',
         className: 'alert alert-danger',
-        content: 'The Resource component is deprecated. Use the Select component with data source of "Resource" instead.',
+        content: 'This component has been deprecated and will be removed in a future version of Formio.js.',
     },
     {
         type: 'select',

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

@@ -7,11 +7,32 @@ export default class SelectComponent extends ListComponent {
         documentation: string;
         schema: any;
     };
+    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;
     triggerUpdate: ((...args: any[]) => any) | undefined;
     set itemsLoaded(arg: any);
     get itemsLoaded(): any;
-    itemsLoadedResolve: any;
+    itemsLoadedResolve: ((value: any) => void) | undefined;
     isFromSearch: boolean | undefined;
     searchServerCount: any;
     defaultServerCount: any;
@@ -19,6 +40,7 @@ export default class SelectComponent extends ListComponent {
     searchDownloadedResources: any;
     defaultDownloadedResources: any;
     activated: boolean | undefined;
+    get dataReady(): any;
     get emptyValue(): {};
     get valueProperty(): any;
     get inputInfo(): {
@@ -35,6 +57,7 @@ export default class SelectComponent extends ListComponent {
     get isSelectResource(): boolean;
     get itemsFromUrl(): boolean;
     get isInfiniteScrollProvided(): boolean;
+    get shouldInitialLoad(): any;
     isEntireObjectDisplay(): boolean;
     selectValueAndLabel(data: any): {
         value: any;
@@ -55,11 +78,7 @@ export default class SelectComponent extends ListComponent {
     set downloadedResources(arg: any);
     get downloadedResources(): any;
     getSingleItemValueForHTMLMode(data: any): any;
-    getTemplateKeys(): void;
-    templateKeys: any[] | undefined;
     get loadingError(): boolean | undefined;
-    get selectData(): any;
-    get shouldLoad(): any;
     loadItems(url: any, search: any, headers: any, options: any, method: any, body: any): void;
     getCustomItems(): any;
     asyncValues: boolean | undefined;
@@ -79,6 +98,7 @@ export default class SelectComponent extends ListComponent {
     render(): any;
     wrapElement(element: any): any;
     choicesOptions(): any;
+    attach(element: any): Promise<void> | undefined;
     focusableElement: any;
     choices: Choices | null | undefined;
     scrollList: any;

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

@@ -7,7 +7,6 @@ const lodash_1 = __importDefault(require("lodash"));
 const Formio_1 = require("../../Formio");
 const ListComponent_1 = __importDefault(require("../_classes/list/ListComponent"));
 const Form_1 = __importDefault(require("../../Form"));
-const native_promise_only_1 = __importDefault(require("native-promise-only"));
 const utils_1 = require("../../utils/utils");
 const ChoicesWrapper_1 = __importDefault(require("../../utils/ChoicesWrapper"));
 class SelectComponent extends ListComponent_1.default {
@@ -59,6 +58,32 @@ class SelectComponent extends ListComponent_1.default {
             schema: SelectComponent.schema()
         };
     }
+    static get serverConditionSettings() {
+        return SelectComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
+        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {
+                return Object.assign(Object.assign({}, classComp), { type: 'select' });
+            } });
+    }
+    static savedValueTypes(schema) {
+        const { boolean, string, number, object, array } = utils_1.componentValueTypes;
+        const { dataType, reference } = schema;
+        const types = (0, utils_1.getComponentSavedTypes)(schema);
+        if (types) {
+            return types;
+        }
+        if (reference) {
+            return [object];
+        }
+        if (dataType === 'object') {
+            return [object, array];
+        }
+        if (utils_1.componentValueTypes[dataType]) {
+            return [utils_1.componentValueTypes[dataType]];
+        }
+        return [boolean, string, number, object, array];
+    }
     init() {
         super.init();
         this.templateData = {};
@@ -74,7 +99,7 @@ class SelectComponent extends ListComponent_1.default {
             if (typeof this.itemsLoadedResolve === 'function') {
                 this.itemsLoadedResolve();
             }
-            this.itemsLoaded = new native_promise_only_1.default((resolve) => {
+            this.itemsLoaded = new Promise((resolve) => {
                 this.itemsLoadedResolve = resolve;
             });
             if (args.length) {
@@ -94,7 +119,7 @@ class SelectComponent extends ListComponent_1.default {
         }
         // If this component has been activated.//
         this.activated = false;
-        this.itemsLoaded = new native_promise_only_1.default((resolve) => {
+        this.itemsLoaded = new Promise((resolve) => {
             this.itemsLoadedResolve = resolve;
         });
         if (this.isHtmlRenderMode()) {
@@ -109,7 +134,7 @@ class SelectComponent extends ListComponent_1.default {
         if (this.root &&
             this.root.submissionSet &&
             !this.attached) {
-            return native_promise_only_1.default.resolve();
+            return Promise.resolve();
         }
         return this.itemsLoaded;
     }
@@ -170,6 +195,15 @@ class SelectComponent extends ListComponent_1.default {
     get shouldDisabled() {
         return super.shouldDisabled || this.parentDisabled;
     }
+    get shouldInitialLoad() {
+        if (this.component.widget === 'html5' &&
+            this.isEntireObjectDisplay() &&
+            this.component.searchField &&
+            this.dataValue) {
+            return false;
+        }
+        return super.shouldLoad;
+    }
     isEntireObjectDisplay() {
         return this.component.dataSrc === 'resource' && this.valueProperty === 'data';
     }
@@ -194,7 +228,7 @@ class SelectComponent extends ListComponent_1.default {
             const value = (typeof itemLabel === 'string') ? this.t(itemLabel, { _userInput: true }) : itemLabel;
             return this.sanitize(value, this.shouldSanitizeValue);
         }
-        if (this.component.multiple ? this.dataValue.find((val) => value === val) : (this.dataValue === value)) {
+        if (this.component.multiple && lodash_1.default.isArray(this.dataValue) ? this.dataValue.find((val) => value === val) : (this.dataValue === value)) {
             const selectData = this.selectData;
             if (selectData) {
                 const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;
@@ -437,48 +471,9 @@ class SelectComponent extends ListComponent_1.default {
         }
         return defaultValue;
     }
-    getTemplateKeys() {
-        this.templateKeys = [];
-        if (this.options.readOnly && this.component.template) {
-            const keys = this.component.template.match(/({{\s*(.*?)\s*}})/g);
-            if (keys) {
-                keys.forEach((key) => {
-                    const propKey = key.match(/{{\s*item\.(.*?)\s*}}/);
-                    if (propKey && propKey.length > 1) {
-                        this.templateKeys.push(propKey[1]);
-                    }
-                });
-            }
-        }
-    }
     get loadingError() {
         return !this.component.refreshOn && !this.component.refreshOnBlur && this.networkError;
     }
-    get selectData() {
-        const selectData = lodash_1.default.get(this.root, 'submission.metadata.selectData', {});
-        return lodash_1.default.get(selectData, this.path);
-    }
-    get shouldLoad() {
-        if (this.loadingError) {
-            return false;
-        }
-        // Live forms should always load.
-        if (!this.options.readOnly) {
-            return true;
-        }
-        // If there are template keys, then we need to see if we have the data.
-        if (this.templateKeys && this.templateKeys.length) {
-            // See if we already have the data we need.
-            const dataValue = this.dataValue;
-            const selectData = this.selectData;
-            return this.templateKeys.reduce((shouldLoad, key) => {
-                const hasValue = lodash_1.default.has(dataValue, key) || lodash_1.default.has(selectData, key);
-                return shouldLoad || !hasValue;
-            }, false);
-        }
-        // Return that we should load.
-        return true;
-    }
     loadItems(url, search, headers, options, method, body) {
         options = options || {};
         // See if we should load items or not.
@@ -517,7 +512,11 @@ class SelectComponent extends ListComponent_1.default {
         });
         // Add search capability.
         if (this.component.searchField && search) {
-            const searchValue = Array.isArray(search) ? search.join(',') : search;
+            const searchValue = Array.isArray(search)
+                ? search.join(',')
+                : typeof search === 'object'
+                    ? JSON.stringify(search)
+                    : search;
             query[this.component.searchField] = this.component.searchField.endsWith('__regex')
                 ? lodash_1.default.escapeRegExp(searchValue)
                 : searchValue;
@@ -911,7 +910,7 @@ class SelectComponent extends ListComponent_1.default {
         const items = this.choices._store.activeItems;
         if (!items.length) {
             this.choices._addItem({
-                value: placeholderValue,
+                value: '',
                 label: placeholderValue,
                 choiceId: 0,
                 groupId: -1,
@@ -1082,7 +1081,7 @@ class SelectComponent extends ListComponent_1.default {
                 if (this.component.multiple) {
                     templateData = {};
                     const dataValue = this.dataValue;
-                    if (dataValue && dataValue.length) {
+                    if (dataValue && lodash_1.default.isArray(dataValue) && dataValue.length) {
                         dataValue.forEach((dataValueItem) => {
                             const dataValueItemValue = this.component.reference ? dataValueItem._id.toString() : dataValueItem;
                             templateData[dataValueItemValue] = this.templateData[dataValueItemValue];
@@ -1150,7 +1149,7 @@ class SelectComponent extends ListComponent_1.default {
     }
     setValue(value, flags = {}) {
         const previousValue = this.dataValue;
-        if (this.component.widget === 'html5' && (lodash_1.default.isEqual(value, previousValue) || lodash_1.default.isEqual(previousValue, {}) && lodash_1.default.isEqual(flags, {}))) {
+        if (this.component.widget === 'html5' && (lodash_1.default.isEqual(value, previousValue) || lodash_1.default.isEqual(previousValue, {}) && lodash_1.default.isEqual(flags, {})) && !flags.fromSubmission) {
             return false;
         }
         const changed = this.updateValue(value, flags);
@@ -1202,7 +1201,7 @@ class SelectComponent extends ListComponent_1.default {
             !this.active &&
             !this.selectOptions.length &&
             hasValue &&
-            this.shouldLoad &&
+            this.shouldInitialLoad &&
             this.visible && (this.component.searchField || this.component.valueProperty);
     }
     setChoicesValue(value, hasPreviousValue, flags = {}) {
@@ -1226,7 +1225,8 @@ class SelectComponent extends ListComponent_1.default {
         else {
             if (hasValue) {
                 const values = Array.isArray(value) ? value : [value];
-                if (!lodash_1.default.isEqual(this.dataValue, this.defaultValue) && this.selectOptions.length < 2) {
+                if (!lodash_1.default.isEqual(this.dataValue, this.defaultValue) && this.selectOptions.length < 2
+                    || (this.selectData && flags.fromSubmission)) {
                     const { value, label } = this.selectValueAndLabel(this.dataValue);
                     this.addOption(value, label);
                 }
@@ -1254,7 +1254,7 @@ class SelectComponent extends ListComponent_1.default {
         }
     }
     get itemsLoaded() {
-        return this._itemsLoaded || native_promise_only_1.default.resolve();
+        return this._itemsLoaded || Promise.resolve();
     }
     set itemsLoaded(promise) {
         this._itemsLoaded = promise;

package/lib/cjs/components/selectboxes/SelectBoxes.d.ts

@@ -1,4 +1,41 @@
 export default class SelectBoxesComponent extends RadioComponent {
+    static get serverConditionSettings(): {
+        valueComponent(classComp: any): {
+            type: string;
+            dataSrc: string;
+            valueProperty: string;
+            valueType: string;
+            data: {
+                custom: string;
+            };
+        };
+        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): {
+            type: string;
+            dataSrc: string;
+            valueProperty: string;
+            valueType: string;
+            data: {
+                custom: string;
+            };
+        };
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+    };
+    static savedValueTypes(schema: any): string[];
     constructor(...args: any[]);
     validators: string[];
     get emptyValue(): any;