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

package/lib/mjs/components/file/File.d.ts

@@ -7,6 +7,27 @@ export default class FileComponent extends Field {
         weight: number;
         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[];
     support: {
         filereader: boolean;
         formdata: boolean;
@@ -54,7 +75,6 @@ export default class FileComponent extends Field {
     validateMaxSize(file: any, val: any): boolean;
     upload(files: any): void;
     filesUploading: any[] | undefined;
-    abortUpload: any;
     getFile(fileInfo: any): any;
     focus(): void;
 }

package/lib/mjs/components/file/File.js

@@ -1,5 +1,5 @@
 import Field from '../_classes/field/Field';
-import { uniqueName } from '../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes, uniqueName } from '../../utils/utils';
 import download from 'downloadjs';
 import _ from 'lodash';
 import fileProcessor from '../../providers/processor/fileProcessor';
@@ -54,11 +54,18 @@ export default class FileComponent extends Field {
         };
     }
     static get serverConditionSettings() {
+        return FileComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
         return {
-            ...super.serverConditionSettings,
+            ...super.conditionOperatorsSettings,
             operators: ['isEmpty', 'isNotEmpty'],
         };
     }
+    static savedValueTypes(schema) {
+        schema = schema || {};
+        return getComponentSavedTypes(schema) || [componentValueTypes.object];
+    }
     init() {
         super.init();
         webViewCamera = navigator.camera || Camera;
@@ -353,8 +360,10 @@ export default class FileComponent extends Field {
         this.refs.fileStatusRemove.forEach((fileStatusRemove, index) => {
             this.addEventListener(fileStatusRemove, 'click', (event) => {
                 event.preventDefault();
-                if (this.abortUpload) {
-                    this.abortUpload();
+                const fileUpload = this.statuses[index];
+                _.pull(this.filesUploading, fileUpload.originalName);
+                if (fileUpload.abort) {
+                    fileUpload.abort();
                 }
                 this.statuses.splice(index, 1);
                 this.redraw();
@@ -560,6 +569,7 @@ export default class FileComponent extends Field {
                 const fileName = uniqueName(file.name, this.component.fileNameTemplate, this.evalContext());
                 const escapedFileName = file.name ? file.name.replaceAll('<', '&lt;').replaceAll('>', '&gt;') : file.name;
                 const fileUpload = {
+                    abort: () => null,
                     originalName: escapedFileName,
                     name: fileName,
                     size: file.size,
@@ -678,7 +688,7 @@ export default class FileComponent extends Field {
                             }
                         }
                     }
-                    fileUpload.message = this.t('Starting upload.');
+                    fileUpload.message = this.t('Starting upload...');
                     this.redraw();
                     const filePromise = fileService.uploadFile(storage, processedFile || file, fileName, dir, 
                     // Progress callback
@@ -691,9 +701,7 @@ export default class FileComponent extends Field {
                     // Upload start callback
                     () => {
                         this.emit('fileUploadingStart', filePromise);
-                    }, 
-                    // Abort upload callback
-                    (abort) => this.abortUpload = abort).then((fileInfo) => {
+                    }, (abort) => fileUpload.abort = abort).then((fileInfo) => {
                         const index = this.statuses.indexOf(fileUpload);
                         if (index !== -1) {
                             this.statuses.splice(index, 1);

package/lib/mjs/components/form/Form.d.ts

@@ -7,6 +7,7 @@ export default class FormComponent extends Component {
         weight: number;
         schema: any;
     };
+    static savedValueTypes(): string[];
     init(): any;
     formObj: any;
     valueChanged: boolean | undefined;

package/lib/mjs/components/form/Form.js

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import Component from '../_classes/component/Component';
 import ComponentModal from '../_classes/componentModal/ComponentModal';
 import EventEmitter from 'eventemitter3';
-import { isMongoId, eachComponent, getStringFromComponentPath, getArrayFromComponentPath } from '../../utils/utils';
+import { isMongoId, eachComponent, getStringFromComponentPath, getArrayFromComponentPath, componentValueTypes } from '../../utils/utils';
 import { Formio } from '../../Formio';
 import Form from '../../Form';
 export default class FormComponent extends Component {
@@ -28,6 +28,9 @@ export default class FormComponent extends Component {
             schema: FormComponent.schema()
         };
     }
+    static savedValueTypes() {
+        return [componentValueTypes.object];
+    }
     init() {
         super.init();
         this.formObj = {
@@ -382,7 +385,8 @@ export default class FormComponent extends Component {
         if (this.builderMode || this.isHidden() || (this.isSubFormLazyLoad() && !fromAttach)) {
             return Promise.resolve();
         }
-        if (this.hasLoadedForm && !this.isRevisionChanged) {
+        if (this.hasLoadedForm && !this.isRevisionChanged &&
+            !(this.options.pdf && this.useOriginalRevision && _.isNull(this.subForm) && !this.subFormLoading)) {
             // Pass config down to sub forms.
             if (this.root && this.root.form && this.root.form.config && !this.formObj.config) {
                 this.formObj.config = this.root.form.config;

package/lib/mjs/components/html/HTML.d.ts

@@ -8,6 +8,7 @@ export default class HTMLComponent extends Component {
         showPreview: boolean;
         schema: any;
     };
+    static savedValueTypes(): never[];
     get content(): any;
     get singleTags(): string[];
     checkRefreshOn(changed: any): void;

package/lib/mjs/components/html/HTML.js

@@ -23,6 +23,9 @@ export default class HTMLComponent extends Component {
             schema: HTMLComponent.schema()
         };
     }
+    static savedValueTypes() {
+        return [];
+    }
     get defaultSchema() {
         return HTMLComponent.schema();
     }

package/lib/mjs/components/number/Number.d.ts

@@ -8,9 +8,28 @@ export default class NumberComponent extends Input {
         schema: any;
     };
     static get serverConditionSettings(): {
-        operators: string[];
+        operators: any[];
         valueComponent(classComp: any): any;
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
     };
+    static get conditionOperatorsSettings(): {
+        operators: any[];
+        valueComponent(classComp: any): any;
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+    };
+    static savedValueTypes(schema: any): string[];
     constructor(...args: any[]);
     validators: string[];
     delimiter: any;

package/lib/mjs/components/number/Number.js

@@ -1,8 +1,8 @@
 import { createNumberMask } from '@formio/text-mask-addons';
 import { conformToMask, maskInput } from '@formio/vanilla-text-mask';
 import _ from 'lodash';
-import { getNumberDecimalLimit, getNumberSeparators } from '../../utils/utils';
 import Input from '../_classes/input/Input';
+import { getNumberSeparators, getNumberDecimalLimit, componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
 export default class NumberComponent extends Input {
     static schema(...extend) {
         return Input.schema({
@@ -28,22 +28,21 @@ export default class NumberComponent extends Input {
         };
     }
     static get serverConditionSettings() {
+        return NumberComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
         return {
-            operators: [
-                'isEqual',
-                'isNotEqual',
-                'isEmpty',
-                'isNotEmpty',
-                'greaterThan',
-                'greaterThanOrEqual',
-                'lessThan',
-                'lessThanOrEqual',
-            ],
+            ...super.conditionOperatorsSettings,
+            operators: [...super.conditionOperatorsSettings.operators, 'lessThan', 'greaterThan', 'lessThanOrEqual', 'greaterThanOrEqual'],
             valueComponent(classComp) {
                 return { ...classComp, type: 'number' };
-            },
+            }
         };
     }
+    static savedValueTypes(schema) {
+        schema = schema || {};
+        return getComponentSavedTypes(schema) || [componentValueTypes.number];
+    }
     constructor(...args) {
         super(...args);
         this.validators = this.validators.concat(['min', 'max']);

package/lib/mjs/components/panel/Panel.d.ts

@@ -7,6 +7,7 @@ export default class PanelComponent extends NestedComponent {
         weight: number;
         schema: any;
     };
+    static savedValueTypes(): never[];
     constructor(...args: any[]);
     noField: boolean;
     getComponent(path: any, fn: any, originalPath: any): Object;

package/lib/mjs/components/panel/Panel.js

@@ -33,6 +33,9 @@ export default class PanelComponent extends NestedComponent {
     get templateName() {
         return 'panel';
     }
+    static savedValueTypes() {
+        return [];
+    }
     constructor(...args) {
         super(...args);
         this.noField = true;

package/lib/mjs/components/radio/Radio.d.ts

@@ -7,6 +7,25 @@ export default class RadioComponent extends ListComponent {
         documentation: string;
         schema: any;
     };
+    static get conditionOperatorsSettings(): {
+        valueComponent(classComp: any): {
+            type: string;
+            dataSrc: string;
+            valueProperty: string;
+            dataType: any;
+            data: {
+                custom(): 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[];
     constructor(component: any, options: any, data: any);
     previousValue: any;
     get inputInfo(): {

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

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import ListComponent from '../_classes/list/ListComponent';
 import { Formio } from '../../Formio';
-import { boolValue } from '../../utils/utils';
+import { boolValue, componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
 export default class RadioComponent extends ListComponent {
     static schema(...extend) {
         return ListComponent.schema({
@@ -26,6 +26,39 @@ export default class RadioComponent extends ListComponent {
             schema: RadioComponent.schema()
         };
     }
+    static get conditionOperatorsSettings() {
+        return {
+            ...super.conditionOperatorsSettings,
+            valueComponent(classComp) {
+                return {
+                    type: 'select',
+                    dataSrc: 'custom',
+                    valueProperty: 'value',
+                    dataType: classComp.dataType || '',
+                    data: {
+                        custom() {
+                            return classComp.values;
+                        }
+                    },
+                };
+            }
+        };
+    }
+    static savedValueTypes(schema) {
+        const { boolean, string, number, object, array } = componentValueTypes;
+        const { dataType } = schema;
+        const types = getComponentSavedTypes(schema);
+        if (types) {
+            return types;
+        }
+        if (dataType === 'object') {
+            return [object, array];
+        }
+        if (componentValueTypes[dataType]) {
+            return [componentValueTypes[dataType]];
+        }
+        return [boolean, string, number, object, array];
+    }
     constructor(component, options, data) {
         super(component, options, data);
         this.previousValue = this.dataValue || null;

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

@@ -7,6 +7,7 @@ export default class ReCaptchaComponent extends Component {
         weight: number;
         schema: any;
     };
+    static savedValueTypes(): never[];
     render(): any;
     recaptchaResult: any;
     createInput(): void;

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

@@ -21,6 +21,9 @@ export default class ReCaptchaComponent extends Component {
             schema: ReCaptchaComponent.schema()
         };
     }
+    static savedValueTypes() {
+        return [];
+    }
     render() {
         this.recaptchaResult = null;
         if (this.builderMode) {

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

@@ -9,8 +9,25 @@ export default class SelectComponent extends ListComponent {
     };
     static get serverConditionSettings(): {
         valueComponent(classComp: any): any;
-        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(): {
+        valueComponent(classComp: any): any;
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+    };
+    static savedValueTypes(schema: any): any[];
     templateData: {} | undefined;
     triggerUpdate: ((...args: any[]) => any) | undefined;
     set itemsLoaded(arg: any);
@@ -40,6 +57,7 @@ export default class SelectComponent extends ListComponent {
     get isSelectResource(): boolean;
     get itemsFromUrl(): boolean;
     get isInfiniteScrollProvided(): boolean;
+    get shouldInitialLoad(): any;
     isEntireObjectDisplay(): boolean;
     selectValueAndLabel(data: any): {
         value: any;

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

@@ -1,8 +1,9 @@
 import _ from 'lodash';
 import { Formio } from '../../Formio';
 import ListComponent from '../_classes/list/ListComponent';
+import Input from '../_classes/input/Input';
 import Form from '../../Form';
-import { getRandomComponentId, boolValue, isPromise } from '../../utils/utils';
+import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
 import Choices from '../../utils/ChoicesWrapper';
 export default class SelectComponent extends ListComponent {
     static schema(...extend) {
@@ -54,13 +55,34 @@ export default class SelectComponent extends ListComponent {
         };
     }
     static get serverConditionSettings() {
+        return SelectComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
         return {
-            ...super.serverConditionSettings,
+            ...super.conditionOperatorsSettings,
             valueComponent(classComp) {
                 return { ...classComp, type: 'select' };
-            },
+            }
         };
     }
+    static savedValueTypes(schema) {
+        const { boolean, string, number, object, array } = componentValueTypes;
+        const { dataType, reference } = schema;
+        const types = getComponentSavedTypes(schema);
+        if (types) {
+            return types;
+        }
+        if (reference) {
+            return [object];
+        }
+        if (dataType === 'object') {
+            return [object, array];
+        }
+        if (componentValueTypes[dataType]) {
+            return [componentValueTypes[dataType]];
+        }
+        return [boolean, string, number, object, array];
+    }
     init() {
         super.init();
         this.templateData = {};
@@ -172,6 +194,15 @@ export default class SelectComponent extends ListComponent {
     get shouldDisabled() {
         return super.shouldDisabled || this.parentDisabled;
     }
+    get shouldInitialLoad() {
+        if (this.component.widget === 'html5' &&
+            this.isEntireObjectDisplay() &&
+            this.component.searchField &&
+            this.dataValue) {
+            return false;
+        }
+        return super.shouldLoad;
+    }
     isEntireObjectDisplay() {
         return this.component.dataSrc === 'resource' && this.valueProperty === 'data';
     }
@@ -482,7 +513,11 @@ export default class SelectComponent extends ListComponent {
         });
         // Add search capability.
         if (this.component.searchField && search) {
-            const searchValue = Array.isArray(search) ? search.join(',') : search;
+            const searchValue = Array.isArray(search)
+                ? search.join(',')
+                : typeof search === 'object'
+                    ? JSON.stringify(search)
+                    : search;
             query[this.component.searchField] = this.component.searchField.endsWith('__regex')
                 ? _.escapeRegExp(searchValue)
                 : searchValue;
@@ -803,7 +838,7 @@ export default class SelectComponent extends ListComponent {
                 this.choices.containerOuter.element.setAttribute('tabIndex', '-1');
                 this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());
             }
-            this.addFocusBlurEvents(this.focusableElement);
+            Input.prototype.addFocusBlurEvents.call(this, this.focusableElement);
             if (this.itemsFromUrl && !this.component.noRefreshOnScroll) {
                 this.scrollList = this.choices.choiceList.element;
                 this.addEventListener(this.scrollList, 'scroll', () => this.onScroll());
@@ -1195,7 +1230,7 @@ export default class SelectComponent extends ListComponent {
             !this.active &&
             !this.selectOptions.length &&
             hasValue &&
-            this.shouldLoad &&
+            this.shouldInitialLoad &&
             this.visible && (this.component.searchField || this.component.valueProperty);
     }
     setChoicesValue(value, hasPreviousValue, flags = {}) {

package/lib/mjs/components/select/fixtures/comp19.d.ts

@@ -0,0 +1,23 @@
+declare namespace _default {
+    const type: string;
+    const display: string;
+    const components: {
+        label: string;
+        widget: string;
+        tableView: boolean;
+        data: {
+            values: {
+                label: string;
+                value: string;
+            }[];
+        };
+        validateOn: string;
+        validate: {
+            custom: string;
+        };
+        key: string;
+        type: string;
+        input: boolean;
+    }[];
+}
+export default _default;

package/lib/mjs/components/select/fixtures/comp19.js

@@ -0,0 +1,34 @@
+export default {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Select',
+            widget: 'choicesjs',
+            tableView: true,
+            data: {
+                values: [
+                    {
+                        label: 'Banana',
+                        value: 'banana'
+                    },
+                    {
+                        label: 'Apple',
+                        value: 'apple'
+                    },
+                    {
+                        label: 'Pineapple',
+                        value: 'pineapple'
+                    }
+                ]
+            },
+            validateOn: 'blur',
+            validate: {
+                custom: "valid = data.select == 'apple' ? true : 'You must select an apple';"
+            },
+            key: 'select',
+            type: 'select',
+            input: true
+        },
+    ]
+};

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

@@ -15,5 +15,6 @@ import comp15 from './comp15';
 import comp16 from './comp16';
 import comp17 from './comp17';
 import comp18 from './comp18';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18 };
+import comp19 from './comp19';
+export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19 };
 export { multiSelect, multiSelectOptions } from "./comp3";

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

@@ -16,4 +16,5 @@ import comp15 from './comp15';
 import comp16 from './comp16';
 import comp17 from './comp17';
 import comp18 from './comp18';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18 };
+import comp19 from './comp19';
+export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19 };

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

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

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) {
@@ -20,8 +21,11 @@ export default class SelectBoxesComponent extends RadioComponent {
         };
     }
     static get serverConditionSettings() {
+        return SelectBoxesComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
         return {
-            ...super.serverConditionSettings,
+            ...super.conditionOperatorsSettings,
             valueComponent(classComp) {
                 return {
                     type: 'select',
@@ -35,6 +39,9 @@ export default class SelectBoxesComponent extends RadioComponent {
             }
         };
     }
+    static savedValueTypes(schema) {
+        return getComponentSavedTypes(schema) || [componentValueTypes.object];
+    }
     constructor(...args) {
         super(...args);
         this.validators = this.validators.concat('minSelectedCount', 'maxSelectedCount', 'availableValueProperty');

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;