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

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

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
+const utils_1 = require("../../utils/utils");
 const Radio_1 = __importDefault(require("../radio/Radio"));
 class SelectBoxesComponent extends Radio_1.default {
     static schema(...extend) {
@@ -24,6 +25,25 @@ class SelectBoxesComponent extends Radio_1.default {
             schema: SelectBoxesComponent.schema()
         };
     }
+    static get serverConditionSettings() {
+        return SelectBoxesComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
+        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {
+                return {
+                    type: 'select',
+                    dataSrc: 'custom',
+                    valueProperty: 'value',
+                    valueType: 'string',
+                    data: {
+                        custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`
+                    },
+                };
+            } });
+    }
+    static savedValueTypes(schema) {
+        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];
+    }
     constructor(...args) {
         super(...args);
         this.validators = this.validators.concat('minSelectedCount', 'maxSelectedCount', 'availableValueProperty');
@@ -109,6 +129,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 +169,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 +189,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 +214,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

@@ -7,6 +7,27 @@ export default class SignatureComponent extends Input {
         documentation: string;
         schema: any;
     };
+    static get serverConditionSettings(): {
+        operators: string[];
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+    };
+    static get conditionOperatorsSettings(): {
+        operators: 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[];
     currentWidth: any;
     scale: any;
     ratio: number | undefined;
@@ -17,7 +38,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

@@ -7,6 +7,7 @@ const signature_pad_1 = __importDefault(require("signature_pad"));
 const resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
 const Input_1 = __importDefault(require("../_classes/input/Input"));
 const lodash_1 = __importDefault(require("lodash"));
+const utils_1 = require("../../utils/utils");
 class SignatureComponent extends Input_1.default {
     static schema(...extend) {
         return Input_1.default.schema({
@@ -33,12 +34,21 @@ class SignatureComponent extends Input_1.default {
             schema: SignatureComponent.schema()
         };
     }
+    static get serverConditionSettings() {
+        return SignatureComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
+        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });
+    }
+    static savedValueTypes(schema) {
+        schema = schema || {};
+        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.string];
+    }
     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 +145,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 +241,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.d.ts

@@ -7,6 +7,27 @@ export default class SurveyComponent extends Field {
         documentation: string;
         schema: any;
     };
+    static get serverConditionSettings(): {
+        operators: string[];
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+    };
+    static get conditionOperatorsSettings(): {
+        operators: 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[];
     render(): any;
     setValue(value: any, flags?: {}): boolean;
     get emptyValue(): {};

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

@@ -26,6 +26,15 @@ class SurveyComponent extends Field_1.default {
             schema: SurveyComponent.schema()
         };
     }
+    static get serverConditionSettings() {
+        return SurveyComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
+        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });
+    }
+    static savedValueTypes(schema) {
+        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];
+    }
     get defaultSchema() {
         return SurveyComponent.schema();
     }

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

@@ -8,8 +8,10 @@ export default class TableComponent extends NestedComponent {
         icon: string;
         weight: number;
         documentation: string;
+        showPreview: boolean;
         schema: any;
     };
+    static savedValueTypes(): never[];
     constructor(...args: any[]);
     get cellClassName(): string;
     get tableKey(): string;

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

@@ -44,9 +44,13 @@ class TableComponent extends NestedComponent_1.default {
             icon: 'table',
             weight: 40,
             documentation: '/userguide/form-building/layout-components#table',
+            showPreview: false,
             schema: TableComponent.schema()
         };
     }
+    static savedValueTypes() {
+        return [];
+    }
     get defaultSchema() {
         return TableComponent.schema();
     }

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

@@ -5,8 +5,10 @@ export default class TabsComponent extends NestedComponent {
         icon: string;
         weight: number;
         documentation: string;
+        showPreview: boolean;
         schema: any;
     };
+    static savedValueTypes(): never[];
     constructor(...args: any[]);
     get tabKey(): string;
     get tabLikey(): string;

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

@@ -31,9 +31,13 @@ class TabsComponent extends NestedComponent_1.default {
             icon: 'folder-o',
             weight: 50,
             documentation: '/userguide/form-building/layout-components#tabs',
+            showPreview: false,
             schema: TabsComponent.schema(),
         };
     }
+    static savedValueTypes() {
+        return [];
+    }
     get defaultSchema() {
         return TabsComponent.schema();
     }

package/lib/cjs/components/tags/Tags.d.ts

@@ -7,6 +7,27 @@ export default class TagsComponent extends Input {
         weight: number;
         schema: any;
     };
+    static get serverConditionSettings(): {
+        operators: any[];
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+    };
+    static get conditionOperatorsSettings(): {
+        operators: 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[];
     get emptyValue(): "" | never[];
     get delimiter(): any;
     attachElement(element: any, index: any): void;

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

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const utils_1 = require("../../utils/utils");
 const Input_1 = __importDefault(require("../_classes/input/Input"));
 const choices_js_1 = __importDefault(require("@formio/choices.js"));
 class TagsComponent extends Input_1.default {
@@ -26,6 +27,16 @@ class TagsComponent extends Input_1.default {
             schema: TagsComponent.schema()
         };
     }
+    static get serverConditionSettings() {
+        return TagsComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
+        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [...super.conditionOperatorsSettings.operators, 'includes', 'notIncludes'] });
+    }
+    static savedValueTypes(schema) {
+        schema = schema || {};
+        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes[schema.storeas] || utils_1.componentValueTypes.string];
+    }
     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): {

package/lib/cjs/components/textarea/TextArea.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 /* global Quill */
 const TextField_1 = __importDefault(require("../textfield/TextField"));
 const lodash_1 = __importDefault(require("lodash"));
-const native_promise_only_1 = __importDefault(require("native-promise-only"));
 const utils_1 = require("../../utils/utils");
 class TextAreaComponent extends TextField_1.default {
     static schema(...extend) {
@@ -117,7 +116,7 @@ class TextAreaComponent extends TextField_1.default {
             this.wysiwygDefault[this.component.editor] || this.wysiwygDefault.default
             : this.component.wysiwyg;
         // Keep track of when this editor is ready.
-        this.editorsReady[index] = new native_promise_only_1.default((editorReady) => {
+        this.editorsReady[index] = new Promise((editorReady) => {
             // Attempt to add a wysiwyg editor. In order to add one, it must be included on the global scope.
             switch (this.component.editor) {
                 case 'ace':
@@ -285,7 +284,7 @@ class TextAreaComponent extends TextField_1.default {
                 this.setConvertedValue(value);
             return super.setValue(value, flags);
         }
-        flags.skipWysiwyg = lodash_1.default.isEqual(value, this.getValue());
+        flags.skipWysiwyg = value === '' && flags.resetValue ? false : lodash_1.default.isEqual(value, this.getValue());
         return super.setValue(value, flags);
     }
     setContent(element, content, forceSanitize) {
@@ -347,11 +346,11 @@ class TextAreaComponent extends TextField_1.default {
             });
         }
         else {
-            return native_promise_only_1.default.resolve(value);
+            return Promise.resolve(value);
         }
     }
     setImagesUrl(images) {
-        return native_promise_only_1.default.all(lodash_1.default.map(images, image => {
+        return Promise.all(lodash_1.default.map(images, image => {
             let requestData;
             try {
                 requestData = JSON.parse(image.getAttribute('alt'));