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

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

@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import { componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
 import RadioComponent from '../radio/Radio';
 export default class SelectBoxesComponent extends RadioComponent {
     static schema(...extend) {
@@ -19,6 +20,28 @@ export default class SelectBoxesComponent extends RadioComponent {
             schema: SelectBoxesComponent.schema()
         };
     }
+    static get serverConditionSettings() {
+        return SelectBoxesComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
+        return {
+            ...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 getComponentSavedTypes(schema) || [componentValueTypes.object];
+    }
     constructor(...args) {
         super(...args);
         this.validators = this.validators.concat('minSelectedCount', 'maxSelectedCount', 'availableValueProperty');
@@ -104,6 +127,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 +167,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 +187,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 +212,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

@@ -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/mjs/components/signature/Signature.js

@@ -2,6 +2,7 @@ import SignaturePad from 'signature_pad';
 import _ResizeObserver from 'resize-observer-polyfill';
 import Input from '../_classes/input/Input';
 import _ from 'lodash';
+import { componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
 export default class SignatureComponent extends Input {
     static schema(...extend) {
         return Input.schema({
@@ -28,11 +29,23 @@ export default class SignatureComponent extends Input {
             schema: SignatureComponent.schema()
         };
     }
+    static get serverConditionSettings() {
+        return SignatureComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
+        return {
+            ...super.conditionOperatorsSettings,
+            operators: ['isEmpty', 'isNotEmpty'],
+        };
+    }
+    static savedValueTypes(schema) {
+        schema = schema || {};
+        return getComponentSavedTypes(schema) || [componentValueTypes.string];
+    }
     init() {
         super.init();
         this.currentWidth = 0;
         this.scale = 1;
-        this.ratio = 1;
         if (!this.component.width) {
             this.component.width = '100%';
         }
@@ -129,9 +142,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 +238,9 @@ export default class SignatureComponent extends Input {
         super.detach();
     }
     getValueAsString(value) {
+        if (_.isUndefined(value) && this.inDataTable) {
+            return '';
+        }
         return value ? 'Yes' : 'No';
     }
     focus() {

package/lib/mjs/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/mjs/components/survey/Survey.js

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import Field from '../_classes/field/Field';
-import { boolValue } from '../../utils/utils';
+import { boolValue, componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
 export default class SurveyComponent extends Field {
     static schema(...extend) {
         return Field.schema({
@@ -21,6 +21,18 @@ export default class SurveyComponent extends Field {
             schema: SurveyComponent.schema()
         };
     }
+    static get serverConditionSettings() {
+        return SurveyComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
+        return {
+            ...super.conditionOperatorsSettings,
+            operators: ['isEmpty', 'isNotEmpty'],
+        };
+    }
+    static savedValueTypes(schema) {
+        return getComponentSavedTypes(schema) || [componentValueTypes.object];
+    }
     get defaultSchema() {
         return SurveyComponent.schema();
     }

package/lib/mjs/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/mjs/components/table/Table.js

@@ -39,9 +39,13 @@ export default class TableComponent extends NestedComponent {
             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/mjs/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/mjs/components/tabs/Tabs.js

@@ -26,9 +26,13 @@ export default class TabsComponent extends NestedComponent {
             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/mjs/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/mjs/components/tags/Tags.js

@@ -1,3 +1,4 @@
+import { componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
 import Input from '../_classes/input/Input';
 import Choices from '@formio/choices.js';
 export default class TagsComponent extends Input {
@@ -21,6 +22,19 @@ export default class TagsComponent extends Input {
             schema: TagsComponent.schema()
         };
     }
+    static get serverConditionSettings() {
+        return TagsComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
+        return {
+            ...super.conditionOperatorsSettings,
+            operators: [...super.conditionOperatorsSettings.operators, 'includes', 'notIncludes'],
+        };
+    }
+    static savedValueTypes(schema) {
+        schema = schema || {};
+        return getComponentSavedTypes(schema) || [componentValueTypes[schema.storeas] || componentValueTypes.string];
+    }
     init() {
         super.init();
     }

package/lib/mjs/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/mjs/components/textarea/TextArea.js

@@ -1,7 +1,6 @@
 /* global Quill */
 import TextFieldComponent from '../textfield/TextField';
 import _ from 'lodash';
-import NativePromise from 'native-promise-only';
 import { uniqueName, getBrowserInfo } from '../../utils/utils';
 export default class TextAreaComponent extends TextFieldComponent {
     static schema(...extend) {
@@ -112,7 +111,7 @@ export default class TextAreaComponent extends TextFieldComponent {
             this.wysiwygDefault[this.component.editor] || this.wysiwygDefault.default
             : this.component.wysiwyg;
         // Keep track of when this editor is ready.
-        this.editorsReady[index] = new NativePromise((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':
@@ -280,7 +279,7 @@ export default class TextAreaComponent extends TextFieldComponent {
                 this.setConvertedValue(value);
             return super.setValue(value, flags);
         }
-        flags.skipWysiwyg = _.isEqual(value, this.getValue());
+        flags.skipWysiwyg = value === '' && flags.resetValue ? false : _.isEqual(value, this.getValue());
         return super.setValue(value, flags);
     }
     setContent(element, content, forceSanitize) {
@@ -342,11 +341,11 @@ export default class TextAreaComponent extends TextFieldComponent {
             });
         }
         else {
-            return NativePromise.resolve(value);
+            return Promise.resolve(value);
         }
     }
     setImagesUrl(images) {
-        return NativePromise.all(_.map(images, image => {
+        return Promise.all(_.map(images, image => {
             let requestData;
             try {
                 requestData = JSON.parse(image.getAttribute('alt'));