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

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,11 @@ class SelectComponent extends ListComponent_1.default {
             schema: SelectComponent.schema()
         };
     }
+    static get serverConditionSettings() {
+        return Object.assign(Object.assign({}, super.serverConditionSettings), { valueComponent(classComp) {
+                return Object.assign(Object.assign({}, classComp), { type: 'select' });
+            } });
+    }
     init() {
         super.init();
         this.templateData = {};
@@ -74,7 +78,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 +98,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 +113,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;
     }
@@ -194,7 +198,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 +441,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.
@@ -911,7 +876,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 +1047,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 +1115,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);
@@ -1226,7 +1191,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 +1220,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,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/cjs/components/selectboxes/SelectBoxes.js

@@ -24,6 +24,19 @@ class SelectBoxesComponent extends Radio_1.default {
             schema: SelectBoxesComponent.schema()
         };
     }
+    static get serverConditionSettings() {
+        return Object.assign(Object.assign({}, 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');
@@ -109,6 +122,16 @@ class SelectBoxesComponent extends Radio_1.default {
                 value[val] = true;
             });
         }
+        const checkedValues = lodash_1.default.keys(lodash_1.default.pickBy(value, (val) => val));
+        if (this.isSelectURL && this.templateData && lodash_1.default.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]));
+            lodash_1.default.set(submission.metadata.selectData, this.path, selectData);
+        }
         return value;
     }
     /**
@@ -139,6 +162,9 @@ class SelectBoxesComponent extends Radio_1.default {
         if (!value) {
             return '';
         }
+        if (this.isSelectURL) {
+            return (0, lodash_1.default)(value).pickBy((val) => val).keys().join(', ');
+        }
         return (0, lodash_1.default)(this.component.values || [])
             .filter((v) => value[v.value])
             .map('label')
@@ -156,7 +182,7 @@ class SelectBoxesComponent extends Radio_1.default {
                     key = valuesKeys.find((k) => (input === null || input === void 0 ? void 0 : input.value.toString()) === k);
                 }
                 const isChecked = value[key];
-                if (isChecked && key) {
+                if ((isChecked && key) || (this.isSelectURL && !this.shouldLoad && this.listData && lodash_1.default.findIndex(this.selectData, this.listData[index]) !== -1)) {
                     //add class to container when selected
                     this.addClass(wrapper, this.optionSelectedClass);
                     //change "checked" attribute
@@ -181,31 +207,33 @@ class SelectBoxesComponent extends Radio_1.default {
     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/cjs/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/cjs/components/selectboxes/fixtures/comp4.js

@@ -16,43 +16,58 @@ exports.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/cjs/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/cjs/components/selectboxes/fixtures/comp6.js

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const comp2_1 = __importDefault(require("./comp2"));
@@ -14,3 +14,5 @@ const comp4_1 = __importDefault(require("./comp4"));
 exports.comp4 = comp4_1.default;
 const comp5_1 = __importDefault(require("./comp5"));
 exports.comp5 = comp5_1.default;
+const comp6_1 = __importDefault(require("./comp6"));
+exports.comp6 = comp6_1.default;

package/lib/cjs/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/cjs/components/signature/Signature.js

@@ -33,12 +33,14 @@ class SignatureComponent extends Input_1.default {
             schema: SignatureComponent.schema()
         };
     }
+    static get serverConditionSettings() {
+        return Object.assign(Object.assign({}, super.serverConditionSettings), { operators: ['isEmpty', 'isNotEmpty'] });
+    }
     init() {
         var _a, _b, _c, _d, _e;
         super.init();
         this.currentWidth = 0;
         this.scale = 1;
-        this.ratio = 1;
         if (!this.component.width) {
             this.component.width = '100%';
         }
@@ -135,9 +137,9 @@ class SignatureComponent extends Input_1.default {
             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`;
@@ -231,6 +233,9 @@ class SignatureComponent extends Input_1.default {
         super.detach();
     }
     getValueAsString(value) {
+        if (lodash_1.default.isUndefined(value) && this.inDataTable) {
+            return '';
+        }
         return value ? 'Yes' : 'No';
     }
     focus() {

package/lib/cjs/components/survey/Survey.js

@@ -26,6 +26,9 @@ class SurveyComponent extends Field_1.default {
             schema: SurveyComponent.schema()
         };
     }
+    static get serverConditionSettings() {
+        return Object.assign(Object.assign({}, super.serverConditionSettings), { operators: ['isEmpty', 'isNotEmpty'] });
+    }
     get defaultSchema() {
         return SurveyComponent.schema();
     }

package/lib/cjs/components/table/Table.d.ts

@@ -8,6 +8,7 @@ export default class TableComponent extends NestedComponent {
         icon: string;
         weight: number;
         documentation: string;
+        showPreview: boolean;
         schema: any;
     };
     constructor(...args: any[]);

package/lib/cjs/components/table/Table.js

@@ -44,6 +44,7 @@ class TableComponent extends NestedComponent_1.default {
             icon: 'table',
             weight: 40,
             documentation: '/userguide/form-building/layout-components#table',
+            showPreview: false,
             schema: TableComponent.schema()
         };
     }

package/lib/cjs/components/tabs/Tabs.d.ts

@@ -5,6 +5,7 @@ export default class TabsComponent extends NestedComponent {
         icon: string;
         weight: number;
         documentation: string;
+        showPreview: boolean;
         schema: any;
     };
     constructor(...args: any[]);

package/lib/cjs/components/tabs/Tabs.js

@@ -31,6 +31,7 @@ class TabsComponent extends NestedComponent_1.default {
             icon: 'folder-o',
             weight: 50,
             documentation: '/userguide/form-building/layout-components#tabs',
+            showPreview: false,
             schema: TabsComponent.schema(),
         };
     }

package/lib/cjs/components/tags/Tags.js

@@ -26,6 +26,9 @@ class TagsComponent extends Input_1.default {
             schema: TagsComponent.schema()
         };
     }
+    static get serverConditionSettings() {
+        return Object.assign(Object.assign({}, super.serverConditionSettings), { operators: [...super.serverConditionSettings.operators, 'includes', 'notIncludes'] });
+    }
     init() {
         super.init();
     }

package/lib/cjs/components/textarea/TextArea.d.ts

@@ -10,6 +10,7 @@ export default class TextAreaComponent extends TextFieldComponent {
      */
     updateEditorValue(index: any, newValue: any): void;
     autoModified: boolean | undefined;
+    attachElement(element: any, index: any): any;
     imageHandler(moduleInstance: any, range: any, files: any): void;
     get isPlain(): boolean;
     get htmlView(): any;
@@ -19,8 +20,8 @@ export default class TextAreaComponent extends TextFieldComponent {
     setReadOnlyValue(value: any, index: any): void;
     get isJsonValue(): any;
     setConvertedValue(value: any, index: any): any;
-    setAsyncConvertedValue(value: any): any;
-    setImagesUrl(images: any): any;
+    setAsyncConvertedValue(value: any): Promise<any>;
+    setImagesUrl(images: any): Promise<any>;
     addAutoExpanding(textarea: any, index: any): void;
     trimBlanks(value: any): any;
     onChange(flags: any, fromRoot: any): {