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

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

@@ -1,12 +1,11 @@
 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 NativePromise from 'native-promise-only';
 import fileProcessor from '../../providers/processor/fileProcessor';
 import BMF from 'browser-md5-file';
 let Camera;
-let webViewCamera = navigator.camera || Camera;
+let webViewCamera = 'undefined' !== typeof window ? navigator.camera : Camera;
 // canvas.toBlob polyfill.
 let htmlCanvasElement;
 if (typeof window !== 'undefined') {
@@ -54,6 +53,19 @@ export default class FileComponent extends Field {
             schema: FileComponent.schema(),
         };
     }
+    static get serverConditionSettings() {
+        return FileComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
+        return {
+            ...super.conditionOperatorsSettings,
+            operators: ['isEmpty', 'isNotEmpty'],
+        };
+    }
+    static savedValueTypes(schema) {
+        schema = schema || {};
+        return getComponentSavedTypes(schema) || [componentValueTypes.object];
+    }
     init() {
         super.init();
         webViewCamera = navigator.camera || Camera;
@@ -71,7 +83,7 @@ export default class FileComponent extends Field {
         this.fileDropHidden = false;
     }
     get dataReady() {
-        return this.filesReady || NativePromise.resolve();
+        return this.filesReady || Promise.resolve();
     }
     get defaultSchema() {
         return FileComponent.schema();
@@ -138,7 +150,7 @@ export default class FileComponent extends Field {
         videoStream.getVideoTracks().forEach((track) => track.stop());
     }
     getFrame(videoPlayer) {
-        return new NativePromise((resolve) => {
+        return new Promise((resolve) => {
             const canvas = document.createElement('canvas');
             canvas.height = videoPlayer.videoHeight;
             canvas.width = videoPlayer.videoWidth;
@@ -192,7 +204,7 @@ export default class FileComponent extends Field {
         });
     }
     browseFiles(attrs = {}) {
-        return new NativePromise((resolve) => {
+        return new Promise((resolve) => {
             const fileInput = this.ce('input', {
                 type: 'file',
                 style: 'height: 0; width: 0; visibility: hidden;',
@@ -237,9 +249,12 @@ export default class FileComponent extends Field {
         if (this.component.multiple) {
             options.multiple = true;
         }
+        if (this.component.capture) {
+            options.capture = this.component.capture;
+        }
         //use "accept" attribute only for desktop devices because of its limited support by mobile browsers
+        const filePattern = this.component.filePattern.trim() || '';
         if (!this.isMobile.any) {
-            const filePattern = this.component.filePattern.trim() || '';
             const imagesPattern = 'image/*';
             if (this.imageUpload && (!filePattern || filePattern === '*')) {
                 options.accept = imagesPattern;
@@ -251,11 +266,23 @@ export default class FileComponent extends Field {
                 options.accept = filePattern;
             }
         }
+        // if input capture is set, we need the "accept" attribute to determine which device to launch
+        else if (this.component.capture) {
+            if (filePattern.includes('video')) {
+                options.accept = 'video/*';
+            }
+            else if (filePattern.includes('audio')) {
+                options.accept = 'audio/*';
+            }
+            else {
+                options.accept = 'image/*';
+            }
+        }
         return options;
     }
     deleteFile(fileInfo) {
         const { options = {} } = this.component;
-        if (fileInfo && (['url', 'indexeddb'].includes(this.component.storage))) {
+        if (fileInfo && (['url', 'indexeddb', 's3', 'googledrive', 'azure'].includes(this.component.storage))) {
             const { fileService } = this;
             if (fileService && typeof fileService.deleteFile === 'function') {
                 fileService.deleteFile(fileInfo, options);
@@ -333,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();
@@ -412,7 +441,7 @@ export default class FileComponent extends Field {
         const fileService = this.fileService;
         if (fileService) {
             const loadingImages = [];
-            this.filesReady = new NativePromise((resolve, reject) => {
+            this.filesReady = new Promise((resolve, reject) => {
                 this.filesReadyResolve = resolve;
                 this.filesReadyReject = reject;
             });
@@ -420,7 +449,7 @@ export default class FileComponent extends Field {
                 loadingImages.push(this.loadImage(this.dataValue[index]).then((url) => (image.src = url)));
             });
             if (loadingImages.length) {
-                NativePromise.all(loadingImages).then(() => {
+                Promise.all(loadingImages).then(() => {
                     this.filesReadyResolve();
                 }).catch(() => this.filesReadyReject());
             }
@@ -540,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,
@@ -658,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
@@ -671,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/file/editForm/File.edit.file.d.ts

@@ -14,6 +14,10 @@ declare const _default: ({
     conditional?: undefined;
     rows?: undefined;
     editor?: undefined;
+    optionsLabelPosition?: undefined;
+    inline?: undefined;
+    defaultValue?: undefined;
+    values?: undefined;
     components?: undefined;
 } | {
     type: string;
@@ -38,6 +42,10 @@ declare const _default: ({
     data?: undefined;
     rows?: undefined;
     editor?: undefined;
+    optionsLabelPosition?: undefined;
+    inline?: undefined;
+    defaultValue?: undefined;
+    values?: undefined;
     components?: undefined;
 } | {
     type: string;
@@ -62,6 +70,10 @@ declare const _default: ({
     data?: undefined;
     rows?: undefined;
     editor?: undefined;
+    optionsLabelPosition?: undefined;
+    inline?: undefined;
+    defaultValue?: undefined;
+    values?: undefined;
     components?: undefined;
 } | {
     type: string;
@@ -86,6 +98,10 @@ declare const _default: ({
     valueProperty?: undefined;
     dataSrc?: undefined;
     data?: undefined;
+    optionsLabelPosition?: undefined;
+    inline?: undefined;
+    defaultValue?: undefined;
+    values?: undefined;
     components?: undefined;
 } | {
     type: string;
@@ -110,6 +126,10 @@ declare const _default: ({
     data?: undefined;
     rows?: undefined;
     editor?: undefined;
+    optionsLabelPosition?: undefined;
+    inline?: undefined;
+    defaultValue?: undefined;
+    values?: undefined;
     components?: undefined;
 } | {
     type: string;
@@ -125,6 +145,10 @@ declare const _default: ({
     conditional?: undefined;
     rows?: undefined;
     editor?: undefined;
+    optionsLabelPosition?: undefined;
+    inline?: undefined;
+    defaultValue?: undefined;
+    values?: undefined;
     components?: undefined;
 } | {
     type: string;
@@ -140,6 +164,10 @@ declare const _default: ({
     conditional?: undefined;
     rows?: undefined;
     editor?: undefined;
+    optionsLabelPosition?: undefined;
+    inline?: undefined;
+    defaultValue?: undefined;
+    values?: undefined;
     components?: undefined;
 } | {
     type: string;
@@ -164,6 +192,10 @@ declare const _default: ({
     data?: undefined;
     rows?: undefined;
     editor?: undefined;
+    optionsLabelPosition?: undefined;
+    inline?: undefined;
+    defaultValue?: undefined;
+    values?: undefined;
     components?: undefined;
 } | {
     type: string;
@@ -188,6 +220,32 @@ declare const _default: ({
     data?: undefined;
     rows?: undefined;
     editor?: undefined;
+    optionsLabelPosition?: undefined;
+    inline?: undefined;
+    defaultValue?: undefined;
+    values?: undefined;
+    components?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    tooltip: string;
+    optionsLabelPosition: string;
+    inline: boolean;
+    defaultValue: boolean;
+    values: {
+        label: string;
+        value: string;
+    }[];
+    placeholder?: undefined;
+    weight?: undefined;
+    valueProperty?: undefined;
+    dataSrc?: undefined;
+    data?: undefined;
+    conditional?: undefined;
+    rows?: undefined;
+    editor?: undefined;
     components?: undefined;
 } | {
     type: string;
@@ -209,5 +267,9 @@ declare const _default: ({
     conditional?: undefined;
     rows?: undefined;
     editor?: undefined;
+    optionsLabelPosition?: undefined;
+    inline?: undefined;
+    defaultValue?: undefined;
+    values?: undefined;
 })[];
 export default _default;

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

@@ -78,8 +78,11 @@ export default [
         input: true,
         weight: 15,
         placeholder: `{
-  "withCredentials": true
-}`,
+      "withCredentials": true,
+      "headers": {
+        "Authorization": "Basic <key>"
+      }
+    }`,
         conditional: {
             json: {
                 '===': [{
@@ -204,6 +207,30 @@ export default [
             json: { '==': [{ var: 'data.webcam' }, true] }
         }
     },
+    {
+        type: 'radio',
+        input: true,
+        key: 'capture',
+        label: 'Enable device capture',
+        tooltip: 'This will allow a mobile device to open the camera or microphone directly in capture mode.',
+        optionsLabelPosition: 'right',
+        inline: true,
+        defaultValue: false,
+        values: [
+            {
+                label: 'Disabled',
+                value: 'false'
+            },
+            {
+                label: 'Environment (rear camera)',
+                value: 'environment'
+            },
+            {
+                label: 'User (front camera)',
+                value: 'user'
+            }
+        ]
+    },
     {
         type: 'datagrid',
         input: true,

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

@@ -7,14 +7,17 @@ export default class FormComponent extends Component {
         weight: number;
         schema: any;
     };
+    static savedValueTypes(): string[];
     init(): any;
     formObj: any;
     valueChanged: boolean | undefined;
     subForm: any;
     formSrc: any;
+    get dataReady(): any;
     get emptyValue(): {
         data: {};
     };
+    get ready(): any;
     get useOriginalRevision(): any;
     setFormRevision(rev: any): void;
     subFormRevision: any;
@@ -26,6 +29,7 @@ export default class FormComponent extends Component {
      * Prints out the value of form components as a datagrid value.
      */
     getValueAsString(value: any): any;
+    attach(element: any): Promise<any>;
     get hasLoadedForm(): any;
     get isRevisionChanged(): any;
     subFormReady: any;

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

@@ -2,8 +2,7 @@ import _ from 'lodash';
 import Component from '../_classes/component/Component';
 import ComponentModal from '../_classes/componentModal/ComponentModal';
 import EventEmitter from 'eventemitter3';
-import NativePromise from 'native-promise-only';
-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 {
@@ -29,6 +28,9 @@ export default class FormComponent extends Component {
             schema: FormComponent.schema()
         };
     }
+    static savedValueTypes() {
+        return [componentValueTypes.object];
+    }
     init() {
         super.init();
         this.formObj = {
@@ -94,7 +96,7 @@ export default class FormComponent extends Component {
         return this.createSubForm();
     }
     get dataReady() {
-        return this.subFormReady || NativePromise.resolve();
+        return this.subFormReady || Promise.resolve();
     }
     get defaultValue() {
         // Not not provide a default value unless the subform is ready so that it will initialize correctly.
@@ -107,7 +109,7 @@ export default class FormComponent extends Component {
         return { data: {} };
     }
     get ready() {
-        return this.subFormReady || NativePromise.resolve();
+        return this.subFormReady || Promise.resolve();
     }
     get useOriginalRevision() {
         return this.component?.useOriginalRevision && !!this.formObj?.revisions;
@@ -381,14 +383,14 @@ export default class FormComponent extends Component {
      */
     loadSubForm(fromAttach) {
         if (this.builderMode || this.isHidden() || (this.isSubFormLazyLoad() && !fromAttach)) {
-            return NativePromise.resolve();
+            return Promise.resolve();
         }
-        if (this.hasLoadedForm && !this.isRevisionChanged && !(this.options.pdf && _.isUndefined(this.subFormRevision))) {
+        if (this.hasLoadedForm && !this.isRevisionChanged) {
             // 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;
             }
-            return NativePromise.resolve(this.formObj);
+            return Promise.resolve(this.formObj);
         }
         else if (this.formSrc) {
             this.subFormLoading = true;
@@ -403,7 +405,7 @@ export default class FormComponent extends Component {
                 return null;
             });
         }
-        return NativePromise.resolve();
+        return Promise.resolve();
     }
     get subFormData() {
         return this.dataValue?.data || {};
@@ -465,7 +467,7 @@ export default class FormComponent extends Component {
             return this.subForm.getSubmission();
         }
         else {
-            return NativePromise.resolve(this.dataValue);
+            return Promise.resolve(this.dataValue);
         }
     }
     /**
@@ -490,7 +492,7 @@ export default class FormComponent extends Component {
                     this.subForm.showAllErrors = true;
                     if (rejectOnError) {
                         this.subForm.onSubmissionError(err);
-                        return NativePromise.reject(err);
+                        return Promise.reject(err);
                     }
                     else {
                         return {};
@@ -519,7 +521,7 @@ export default class FormComponent extends Component {
         // This submission has already been submitted, so just return the reference data.
         if (isAlreadySubmitted && !this.subForm?.wizard) {
             this.dataValue = submission;
-            return NativePromise.resolve(this.dataValue);
+            return Promise.resolve(this.dataValue);
         }
         return this.submitSubForm(false)
             .then(() => {

package/lib/mjs/components/hidden/Hidden.d.ts

@@ -5,6 +5,7 @@ export default class HiddenComponent extends Input {
         icon: string;
         weight: number;
         documentation: string;
+        showPreview: boolean;
         schema: any;
     };
     get inputInfo(): {

package/lib/mjs/components/hidden/Hidden.js

@@ -14,6 +14,7 @@ export default class HiddenComponent extends Input {
             icon: 'user-secret',
             weight: 0,
             documentation: '/userguide/form-building/data-components#hidden',
+            showPreview: false,
             schema: HiddenComponent.schema()
         };
     }

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

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

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

@@ -19,9 +19,13 @@ export default class HTMLComponent extends Component {
             icon: 'code',
             weight: 0,
             documentation: '/userguide/form-building/layout-components#html-element',
+            showPreview: false,
             schema: HTMLComponent.schema()
         };
     }
+    static savedValueTypes() {
+        return [];
+    }
     get defaultSchema() {
         return HTMLComponent.schema();
     }

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

@@ -7,11 +7,34 @@ export default class NumberComponent extends Input {
         weight: number;
         schema: any;
     };
+    static get serverConditionSettings(): {
+        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[];
-    decimalSeparator: any;
     delimiter: any;
     decimalLimit: any;
+    decimalSeparator: any;
     numberMask: any;
     /**
      * Creates the number mask for normal numbers.

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

@@ -1,8 +1,8 @@
-import { maskInput, conformToMask } from '@formio/vanilla-text-mask';
-import _ from 'lodash';
 import { createNumberMask } from '@formio/text-mask-addons';
+import { conformToMask, maskInput } from '@formio/vanilla-text-mask';
+import _ from 'lodash';
 import Input from '../_classes/input/Input';
-import { getNumberSeparators, getNumberDecimalLimit } from '../../utils/utils';
+import { getNumberSeparators, getNumberDecimalLimit, componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
 export default class NumberComponent extends Input {
     static schema(...extend) {
         return Input.schema({
@@ -27,13 +27,27 @@ export default class NumberComponent extends Input {
             schema: NumberComponent.schema()
         };
     }
+    static get serverConditionSettings() {
+        return NumberComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
+        return {
+            ...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']);
         const separators = getNumberSeparators(this.options.language || navigator.language);
-        this.decimalSeparator = this.options.decimalSeparator = this.options.decimalSeparator
-            || this.options.properties?.decimalSeparator
-            || separators.decimalSeparator;
+        const requireDecimal = _.get(this.component, 'requireDecimal', false);
         if (this.component.delimiter) {
             if (this.options.hasOwnProperty('thousandsSeparator')) {
                 console.warn("Property 'thousandsSeparator' is deprecated. Please use i18n to specify delimiter.");
@@ -43,8 +57,10 @@ export default class NumberComponent extends Input {
         else {
             this.delimiter = '';
         }
-        const requireDecimal = _.get(this.component, 'requireDecimal', false);
         this.decimalLimit = getNumberDecimalLimit(this.component, requireDecimal ? 2 : 20);
+        this.decimalSeparator = this.decimalLimit !== 0 ?
+            this.options.decimalSeparator || this.options.properties?.decimalSeparator || separators.decimalSeparator :
+            '';
         // Currencies to override BrowserLanguage Config. Object key {}
         if (_.has(this.options, `languageOverride.${this.options.language}`)) {
             const override = _.get(this.options, `languageOverride.${this.options.language}`);

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/phonenumber/PhoneNumber.form.js

@@ -15,6 +15,15 @@ export default function (...extend) {
                 }
             ]
         },
+        {
+            key: 'data',
+            components: [
+                {
+                    key: 'case',
+                    ignore: true
+                }
+            ]
+        },
         {
             key: 'validation',
             components: PhoneNumberEditValidation

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(): {
@@ -23,11 +42,12 @@ export default class RadioComponent extends ListComponent {
     get emptyValue(): string;
     get isRadio(): boolean;
     get optionSelectedClass(): string;
+    get listData(): any;
     templateData: {} | undefined;
     triggerUpdate: ((...args: any[]) => any) | undefined;
-    itemsLoaded: any;
-    itemsLoadedResolve: any;
-    shouldLoad: boolean | undefined;
+    itemsLoaded: Promise<any> | undefined;
+    itemsLoadedResolve: ((value: any) => void) | undefined;
+    optionsLoaded: boolean | undefined;
     loadedOptions: any[] | undefined;
     render(): any;
     detach(element: any): void;
@@ -36,6 +56,7 @@ export default class RadioComponent extends ListComponent {
     getValueAsString(value: any): any;
     setValueAt(index: any, value: any): void;
     loadItems(url: any, search: any, headers: any, options: any, method: any, body: any): void;
+    loadItemsFromMetadata(): void;
     setItems(items: any): void;
     setSelectedClasses(): void;
     updateValue(value: any, flags: any): boolean;