@formio/js 5.0.0-rc.18 → 5.0.0-rc.20

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

@@ -3,7 +3,6 @@ import Component from '../_classes/component/Component';
 import { Formio } from '../../Formio';
 import _get from 'lodash/get';
 import _debounce from 'lodash/debounce';
-import NativePromise from 'native-promise-only';
 export default class ReCaptchaComponent extends Component {
     static schema(...extend) {
         return Component.schema({
@@ -61,7 +60,7 @@ export default class ReCaptchaComponent extends Component {
             this.recaptchaApiReady = Formio.requireLibrary('googleRecaptcha', 'grecaptcha', recaptchaApiScriptUrl, true);
         }
         if (this.recaptchaApiReady) {
-            this.recaptchaVerifiedPromise = new NativePromise((resolve, reject) => {
+            this.recaptchaVerifiedPromise = new Promise((resolve, reject) => {
                 this.recaptchaApiReady
                     .then(() => {
                     if (!this.isLoading) {
@@ -117,13 +116,13 @@ export default class ReCaptchaComponent extends Component {
         const componentData = row[this.component.key];
         if (!componentData || !componentData.token) {
             this.setCustomValidity('ReCAPTCHA: Token is not specified in submission');
-            return NativePromise.resolve(false);
+            return Promise.resolve(false);
         }
         if (!componentData.success) {
             this.setCustomValidity('ReCAPTCHA: Token validation error');
-            return NativePromise.resolve(false);
+            return Promise.resolve(false);
         }
-        return this.hook('validateReCaptcha', componentData.token, () => NativePromise.resolve(true))
+        return this.hook('validateReCaptcha', componentData.token, () => Promise.resolve(true))
             .then((success) => success)
             .catch((err) => {
             this.setCustomValidity(err.message || err);

package/lib/mjs/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/mjs/components/resource/Resource.js

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

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

@@ -5,7 +5,7 @@ export 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/mjs/components/select/Select.d.ts

@@ -7,11 +7,15 @@ export default class SelectComponent extends ListComponent {
         documentation: string;
         schema: any;
     };
+    static get serverConditionSettings(): {
+        valueComponent(classComp: any): any;
+        operators: string[];
+    };
     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 +23,7 @@ export default class SelectComponent extends ListComponent {
     searchDownloadedResources: any;
     defaultDownloadedResources: any;
     activated: boolean | undefined;
+    get dataReady(): any;
     get emptyValue(): {};
     get valueProperty(): any;
     get inputInfo(): {
@@ -55,11 +60,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 +80,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/mjs/components/select/Select.js

@@ -2,7 +2,6 @@ import _ from 'lodash';
 import { Formio } from '../../Formio';
 import ListComponent from '../_classes/list/ListComponent';
 import Form from '../../Form';
-import NativePromise from 'native-promise-only';
 import { getRandomComponentId, boolValue, isPromise } from '../../utils/utils';
 import Choices from '../../utils/ChoicesWrapper';
 export default class SelectComponent extends ListComponent {
@@ -54,6 +53,14 @@ export default class SelectComponent extends ListComponent {
             schema: SelectComponent.schema()
         };
     }
+    static get serverConditionSettings() {
+        return {
+            ...super.serverConditionSettings,
+            valueComponent(classComp) {
+                return { ...classComp, type: 'select' };
+            },
+        };
+    }
     init() {
         super.init();
         this.templateData = {};
@@ -69,7 +76,7 @@ export default class SelectComponent extends ListComponent {
             if (typeof this.itemsLoadedResolve === 'function') {
                 this.itemsLoadedResolve();
             }
-            this.itemsLoaded = new NativePromise((resolve) => {
+            this.itemsLoaded = new Promise((resolve) => {
                 this.itemsLoadedResolve = resolve;
             });
             if (args.length) {
@@ -89,7 +96,7 @@ export default class SelectComponent extends ListComponent {
         }
         // If this component has been activated.//
         this.activated = false;
-        this.itemsLoaded = new NativePromise((resolve) => {
+        this.itemsLoaded = new Promise((resolve) => {
             this.itemsLoadedResolve = resolve;
         });
         if (this.isHtmlRenderMode()) {
@@ -104,7 +111,7 @@ export default class SelectComponent extends ListComponent {
         if (this.root &&
             this.root.submissionSet &&
             !this.attached) {
-            return NativePromise.resolve();
+            return Promise.resolve();
         }
         return this.itemsLoaded;
     }
@@ -189,7 +196,7 @@ export default class SelectComponent extends ListComponent {
             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 && _.isArray(this.dataValue) ? this.dataValue.find((val) => value === val) : (this.dataValue === value)) {
             const selectData = this.selectData;
             if (selectData) {
                 const templateValue = this.component.reference && value?._id ? value._id.toString() : value;
@@ -434,48 +441,9 @@ export default class SelectComponent extends ListComponent {
         }
         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 = _.get(this.root, 'submission.metadata.selectData', {});
-        return _.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 = _.has(dataValue, key) || _.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.
@@ -937,7 +905,7 @@ export default class SelectComponent extends ListComponent {
         const items = this.choices._store.activeItems;
         if (!items.length) {
             this.choices._addItem({
-                value: placeholderValue,
+                value: '',
                 label: placeholderValue,
                 choiceId: 0,
                 groupId: -1,
@@ -1107,7 +1075,7 @@ export default class SelectComponent extends ListComponent {
                 if (this.component.multiple) {
                     templateData = {};
                     const dataValue = this.dataValue;
-                    if (dataValue && dataValue.length) {
+                    if (dataValue && _.isArray(dataValue) && dataValue.length) {
                         dataValue.forEach((dataValueItem) => {
                             const dataValueItemValue = this.component.reference ? dataValueItem._id.toString() : dataValueItem;
                             templateData[dataValueItemValue] = this.templateData[dataValueItemValue];
@@ -1175,7 +1143,7 @@ export default class SelectComponent extends ListComponent {
     }
     setValue(value, flags = {}) {
         const previousValue = this.dataValue;
-        if (this.component.widget === 'html5' && (_.isEqual(value, previousValue) || _.isEqual(previousValue, {}) && _.isEqual(flags, {}))) {
+        if (this.component.widget === 'html5' && (_.isEqual(value, previousValue) || _.isEqual(previousValue, {}) && _.isEqual(flags, {})) && !flags.fromSubmission) {
             return false;
         }
         const changed = this.updateValue(value, flags);
@@ -1251,7 +1219,8 @@ export default class SelectComponent extends ListComponent {
         else {
             if (hasValue) {
                 const values = Array.isArray(value) ? value : [value];
-                if (!_.isEqual(this.dataValue, this.defaultValue) && this.selectOptions.length < 2) {
+                if (!_.isEqual(this.dataValue, this.defaultValue) && this.selectOptions.length < 2
+                    || (this.selectData && flags.fromSubmission)) {
                     const { value, label } = this.selectValueAndLabel(this.dataValue);
                     this.addOption(value, label);
                 }
@@ -1279,7 +1248,7 @@ export default class SelectComponent extends ListComponent {
         }
     }
     get itemsLoaded() {
-        return this._itemsLoaded || NativePromise.resolve();
+        return this._itemsLoaded || Promise.resolve();
     }
     set itemsLoaded(promise) {
         this._itemsLoaded = promise;

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

@@ -1,4 +1,16 @@
 export default class SelectBoxesComponent extends RadioComponent {
+    static get serverConditionSettings(): {
+        valueComponent(classComp: any): {
+            type: string;
+            dataSrc: string;
+            valueProperty: string;
+            valueType: string;
+            data: {
+                custom: string;
+            };
+        };
+        operators: string[];
+    };
     constructor(...args: any[]);
     validators: string[];
     get emptyValue(): any;

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

@@ -19,6 +19,22 @@ export default class SelectBoxesComponent extends RadioComponent {
             schema: SelectBoxesComponent.schema()
         };
     }
+    static get serverConditionSettings() {
+        return {
+            ...super.serverConditionSettings,
+            valueComponent(classComp) {
+                return {
+                    type: 'select',
+                    dataSrc: 'custom',
+                    valueProperty: 'value',
+                    valueType: 'string',
+                    data: {
+                        custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`
+                    },
+                };
+            }
+        };
+    }
     constructor(...args) {
         super(...args);
         this.validators = this.validators.concat('minSelectedCount', 'maxSelectedCount', 'availableValueProperty');
@@ -104,6 +120,16 @@ export default class SelectBoxesComponent extends RadioComponent {
                 value[val] = true;
             });
         }
+        const checkedValues = _.keys(_.pickBy(value, (val) => val));
+        if (this.isSelectURL && this.templateData && _.every(checkedValues, (val) => this.templateData[val])) {
+            const submission = this.root.submission;
+            if (!submission.metadata.selectData) {
+                submission.metadata.selectData = {};
+            }
+            const selectData = [];
+            checkedValues.forEach((value) => selectData.push(this.templateData[value]));
+            _.set(submission.metadata.selectData, this.path, selectData);
+        }
         return value;
     }
     /**
@@ -134,6 +160,9 @@ export default class SelectBoxesComponent extends RadioComponent {
         if (!value) {
             return '';
         }
+        if (this.isSelectURL) {
+            return _(value).pickBy((val) => val).keys().join(', ');
+        }
         return _(this.component.values || [])
             .filter((v) => value[v.value])
             .map('label')
@@ -151,7 +180,7 @@ export default class SelectBoxesComponent extends RadioComponent {
                     key = valuesKeys.find((k) => input?.value.toString() === k);
                 }
                 const isChecked = value[key];
-                if (isChecked && key) {
+                if ((isChecked && key) || (this.isSelectURL && !this.shouldLoad && this.listData && _.findIndex(this.selectData, this.listData[index]) !== -1)) {
                     //add class to container when selected
                     this.addClass(wrapper, this.optionSelectedClass);
                     //change "checked" attribute
@@ -176,31 +205,33 @@ export default class SelectBoxesComponent extends RadioComponent {
     checkComponentValidity(data, dirty, rowData, options) {
         const minCount = this.component.validate.minSelectedCount;
         const maxCount = this.component.validate.maxSelectedCount;
-        const isValid = this.isValid(data, dirty);
-        if ((maxCount || minCount) && !this.shouldSkipValidation(data, dirty, rowData)) {
-            const count = Object.keys(this.validationValue).reduce((total, key) => {
-                if (this.validationValue[key]) {
-                    total++;
+        if (!this.shouldSkipValidation(data, dirty, rowData)) {
+            const isValid = this.isValid(data, dirty);
+            if ((maxCount || minCount)) {
+                const count = Object.keys(this.validationValue).reduce((total, key) => {
+                    if (this.validationValue[key]) {
+                        total++;
+                    }
+                    return total;
+                }, 0);
+                // Disable the rest of inputs if the max amount is already checked
+                if (maxCount && count >= maxCount) {
+                    this.setInputsDisabled(true, true);
+                }
+                else if (maxCount && !this.shouldDisabled) {
+                    this.setInputsDisabled(false);
+                }
+                if (!isValid && maxCount && count > maxCount) {
+                    const message = this.t(this.component.maxSelectedCountMessage || 'You can only select up to {{maxCount}} items.', { maxCount });
+                    this.setCustomValidity(message, dirty);
+                    return false;
+                }
+                else if (!isValid && minCount && count < minCount) {
+                    this.setInputsDisabled(false);
+                    const message = this.t(this.component.minSelectedCountMessage || 'You must select at least {{minCount}} items.', { minCount });
+                    this.setCustomValidity(message, dirty);
+                    return false;
                 }
-                return total;
-            }, 0);
-            // Disable the rest of inputs if the max amount is already checked
-            if (maxCount && count >= maxCount) {
-                this.setInputsDisabled(true, true);
-            }
-            else if (maxCount && !this.shouldDisabled) {
-                this.setInputsDisabled(false);
-            }
-            if (!isValid && maxCount && count > maxCount) {
-                const message = this.t(this.component.maxSelectedCountMessage || 'You can only select up to {{maxCount}} items.', { maxCount });
-                this.setCustomValidity(message, dirty);
-                return false;
-            }
-            else if (!isValid && minCount && count < minCount) {
-                this.setInputsDisabled(false);
-                const message = this.t(this.component.minSelectedCountMessage || 'You must select at least {{minCount}} items.', { minCount });
-                this.setCustomValidity(message, dirty);
-                return false;
             }
         }
         return super.checkComponentValidity(data, dirty, rowData, options);

package/lib/mjs/components/selectboxes/fixtures/comp4.d.ts

@@ -11,39 +11,46 @@ declare namespace _default {
         key: string;
         type: string;
         input: boolean;
-        optionsLabelPosition?: undefined;
-        defaultValue?: undefined;
-        values?: undefined;
-        validate?: undefined;
         conditional?: undefined;
-        inputType?: undefined;
+        components?: undefined;
         disableOnInvalid?: undefined;
     } | {
         label: string;
-        optionsLabelPosition: string;
         tableView: boolean;
-        defaultValue: {
-            '1': boolean;
-            '2': boolean;
-            '3': boolean;
-        };
-        values: {
-            label: string;
-            value: string;
-            shortcut: string;
-        }[];
-        validate: {
-            minSelectedCount: number;
-        };
         key: string;
         conditional: {
             show: boolean;
-            when: string;
-            eq: boolean;
+            conjunction: string;
+            conditions: {
+                component: string;
+                operator: string;
+                value: boolean;
+            }[];
         };
         type: string;
         input: boolean;
-        inputType: string;
+        components: {
+            label: string;
+            optionsLabelPosition: string;
+            tableView: boolean;
+            defaultValue: {
+                '1': boolean;
+                '2': boolean;
+                '3': boolean;
+            };
+            values: {
+                label: string;
+                value: string;
+                shortcut: string;
+            }[];
+            validate: {
+                minSelectedCount: number;
+            };
+            key: string;
+            type: string;
+            input: boolean;
+            inputType: string;
+        }[];
         disableOnInvalid?: undefined;
     } | {
         type: string;
@@ -52,12 +59,8 @@ declare namespace _default {
         disableOnInvalid: boolean;
         input: boolean;
         tableView: boolean;
-        optionsLabelPosition?: undefined;
-        defaultValue?: undefined;
-        values?: undefined;
-        validate?: undefined;
         conditional?: undefined;
-        inputType?: undefined;
+        components?: undefined;
     })[];
 }
 export default _default;

package/lib/mjs/components/selectboxes/fixtures/comp4.js

@@ -14,43 +14,58 @@ export default {
             input: true
         },
         {
-            label: 'Select Boxes',
-            optionsLabelPosition: 'right',
+            label: 'Container',
             tableView: false,
-            defaultValue: {
-                '1': false,
-                '2': false,
-                '3': false
-            },
-            values: [
-                {
-                    label: '1',
-                    value: '1',
-                    shortcut: ''
-                },
-                {
-                    label: '2',
-                    value: '2',
-                    shortcut: ''
-                },
-                {
-                    label: '3',
-                    value: '3',
-                    shortcut: ''
-                }
-            ],
-            validate: {
-                minSelectedCount: 1
-            },
-            key: 'selectBoxes1',
+            key: 'container',
             conditional: {
                 show: true,
-                when: 'checkbox',
-                eq: true
+                conjunction: 'all',
+                conditions: [
+                    {
+                        component: 'checkbox',
+                        operator: 'isEqual',
+                        value: true
+                    }
+                ]
             },
-            type: 'selectboxes',
+            type: 'container',
             input: true,
-            inputType: 'checkbox'
+            components: [
+                {
+                    label: 'Select Boxes',
+                    optionsLabelPosition: 'right',
+                    tableView: false,
+                    defaultValue: {
+                        '1': false,
+                        '2': false,
+                        '3': false
+                    },
+                    values: [
+                        {
+                            label: '1',
+                            value: '1',
+                            shortcut: ''
+                        },
+                        {
+                            label: '2',
+                            value: '2',
+                            shortcut: ''
+                        },
+                        {
+                            label: '3',
+                            value: '3',
+                            shortcut: ''
+                        }
+                    ],
+                    validate: {
+                        minSelectedCount: 1
+                    },
+                    key: 'selectBoxes',
+                    type: 'selectboxes',
+                    input: true,
+                    inputType: 'checkbox'
+                }
+            ]
         },
         {
             type: 'button',

package/lib/mjs/components/selectboxes/fixtures/comp6.d.ts

@@ -0,0 +1,14 @@
+declare namespace _default {
+    const label: string;
+    const dataSrc: string;
+    namespace data {
+        const url: string;
+    }
+    const valueProperty: string;
+    const template: string;
+    const key: string;
+    const type: string;
+    const input: boolean;
+    const inputType: string;
+}
+export default _default;

package/lib/mjs/components/selectboxes/fixtures/comp6.js

@@ -0,0 +1,13 @@
+export default {
+    label: 'Select Boxes',
+    dataSrc: 'url',
+    data: {
+        url: 'https://cdn.rawgit.com/mshafrir/2646763/raw/states_titlecase.json'
+    },
+    valueProperty: 'abbreviation',
+    template: '<span>{{ item.name }}</span>',
+    key: 'selectBoxes',
+    type: 'selectboxes',
+    input: true,
+    inputType: 'checkbox',
+};

package/lib/mjs/components/selectboxes/fixtures/index.d.ts

@@ -3,4 +3,5 @@ import comp2 from './comp2';
 import comp3 from './comp3';
 import comp4 from './comp4';
 import comp5 from './comp5';
-export { comp1, comp2, comp3, comp4, comp5 };
+import comp6 from './comp6';
+export { comp1, comp2, comp3, comp4, comp5, comp6 };

package/lib/mjs/components/selectboxes/fixtures/index.js

@@ -3,4 +3,5 @@ import comp2 from './comp2';
 import comp3 from './comp3';
 import comp4 from './comp4';
 import comp5 from './comp5';
-export { comp1, comp2, comp3, comp4, comp5 };
+import comp6 from './comp6';
+export { comp1, comp2, comp3, comp4, comp5, comp6 };

package/lib/mjs/components/signature/Signature.d.ts

@@ -17,7 +17,7 @@ export default class SignatureComponent extends Input {
     checkSize(force: any, scale: any): void;
     signaturePad: SignaturePad | null | undefined;
     observer: _ResizeObserver | null | undefined;
-    getValueAsString(value: any): "Yes" | "No";
+    getValueAsString(value: any): "" | "Yes" | "No";
     focus(): void;
     setDataToSigaturePad(): void;
 }

package/lib/mjs/components/signature/Signature.js

@@ -28,11 +28,16 @@ export default class SignatureComponent extends Input {
             schema: SignatureComponent.schema()
         };
     }
+    static get serverConditionSettings() {
+        return {
+            ...super.serverConditionSettings,
+            operators: ['isEmpty', 'isNotEmpty'],
+        };
+    }
     init() {
         super.init();
         this.currentWidth = 0;
         this.scale = 1;
-        this.ratio = 1;
         if (!this.component.width) {
             this.component.width = '100%';
         }
@@ -129,9 +134,9 @@ export default class SignatureComponent extends Input {
             this.scale = force ? scale : this.scale;
             this.currentWidth = this.refs.padBody.offsetWidth;
             const width = this.currentWidth * this.scale;
-            this.refs.canvas.width = width;
             const height = this.ratio ? width / this.ratio : this.refs.padBody.offsetHeight * this.scale;
-            const maxHeight = this.refs.padBody.offsetHeight * this.scale;
+            const maxHeight = this.ratio ? height : this.refs.padBody.offsetHeight * this.scale;
+            this.refs.canvas.width = width;
             this.refs.canvas.height = height > maxHeight ? maxHeight : height;
             this.refs.canvas.style.maxWidth = `${this.currentWidth * this.scale}px`;
             this.refs.canvas.style.maxHeight = `${maxHeight}px`;
@@ -225,6 +230,9 @@ export default class SignatureComponent extends Input {
         super.detach();
     }
     getValueAsString(value) {
+        if (_.isUndefined(value) && this.inDataTable) {
+            return '';
+        }
         return value ? 'Yes' : 'No';
     }
     focus() {