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

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

@@ -2,11 +2,10 @@ import Field from '../_classes/field/Field';
 import { 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,12 @@ export default class FileComponent extends Field {
             schema: FileComponent.schema(),
         };
     }
+    static get serverConditionSettings() {
+        return {
+            ...super.serverConditionSettings,
+            operators: ['isEmpty', 'isNotEmpty'],
+        };
+    }
     init() {
         super.init();
         webViewCamera = navigator.camera || Camera;
@@ -71,7 +76,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 +143,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 +197,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 +242,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 +259,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);
@@ -412,7 +432,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 +440,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());
             }

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

@@ -12,9 +12,11 @@ export default class FormComponent extends Component {
     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 +28,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,7 +2,6 @@ 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 { Formio } from '../../Formio';
 import Form from '../../Form';
@@ -94,7 +93,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 +106,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 +380,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 +402,7 @@ export default class FormComponent extends Component {
                 return null;
             });
         }
-        return NativePromise.resolve();
+        return Promise.resolve();
     }
     get subFormData() {
         return this.dataValue?.data || {};
@@ -465,7 +464,7 @@ export default class FormComponent extends Component {
             return this.subForm.getSubmission();
         }
         else {
-            return NativePromise.resolve(this.dataValue);
+            return Promise.resolve(this.dataValue);
         }
     }
     /**
@@ -490,7 +489,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 +518,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,6 +5,7 @@ export default class HTMLComponent extends Component {
         icon: string;
         weight: number;
         documentation: string;
+        showPreview: boolean;
         schema: any;
     };
     get content(): any;

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

@@ -19,6 +19,7 @@ export default class HTMLComponent extends Component {
             icon: 'code',
             weight: 0,
             documentation: '/userguide/form-building/layout-components#html-element',
+            showPreview: false,
             schema: HTMLComponent.schema()
         };
     }

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

@@ -7,11 +7,15 @@ export default class NumberComponent extends Input {
         weight: number;
         schema: any;
     };
+    static get serverConditionSettings(): {
+        operators: string[];
+        valueComponent(classComp: any): any;
+    };
     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 { getNumberDecimalLimit, getNumberSeparators } from '../../utils/utils';
 import Input from '../_classes/input/Input';
-import { getNumberSeparators, getNumberDecimalLimit } from '../../utils/utils';
 export default class NumberComponent extends Input {
     static schema(...extend) {
         return Input.schema({
@@ -27,13 +27,28 @@ export default class NumberComponent extends Input {
             schema: NumberComponent.schema()
         };
     }
+    static get serverConditionSettings() {
+        return {
+            operators: [
+                'isEqual',
+                'isNotEqual',
+                'isEmpty',
+                'isNotEmpty',
+                'greaterThan',
+                'greaterThanOrEqual',
+                'lessThan',
+                'lessThanOrEqual',
+            ],
+            valueComponent(classComp) {
+                return { ...classComp, type: '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 +58,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/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

@@ -23,11 +23,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 +37,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;

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

@@ -1,6 +1,5 @@
 import _ from 'lodash';
 import ListComponent from '../_classes/list/ListComponent';
-import NativePromise from 'native-promise-only';
 import { Formio } from '../../Formio';
 import { boolValue } from '../../utils/utils';
 export default class RadioComponent extends ListComponent {
@@ -58,6 +57,10 @@ export default class RadioComponent extends ListComponent {
     get optionSelectedClass() {
         return 'radio-selected';
     }
+    get listData() {
+        const listData = _.get(this.root, 'submission.metadata.listData', {});
+        return _.get(listData, this.path);
+    }
     init() {
         super.init();
         this.templateData = {};
@@ -73,7 +76,7 @@ export default class RadioComponent extends ListComponent {
             if (typeof this.itemsLoadedResolve === 'function') {
                 this.itemsLoadedResolve();
             }
-            this.itemsLoaded = new NativePromise((resolve) => {
+            this.itemsLoaded = new Promise((resolve) => {
                 this.itemsLoadedResolve = resolve;
             });
             if (args.length) {
@@ -81,11 +84,13 @@ export default class RadioComponent extends ListComponent {
             }
             return triggerUpdate(...updateArgs);
         };
-        this.itemsLoaded = new NativePromise((resolve) => {
+        this.itemsLoaded = new Promise((resolve) => {
             this.itemsLoadedResolve = resolve;
         });
-        this.shouldLoad = true;
+        this.optionsLoaded = false;
         this.loadedOptions = [];
+        // Get the template keys for this radio component.
+        this.getTemplateKeys();
     }
     render() {
         return super.render(this.renderTemplate('radio', {
@@ -185,6 +190,13 @@ export default class RadioComponent extends ListComponent {
         }
     }
     loadItems(url, search, headers, options, method, body) {
+        if (this.optionsLoaded) {
+            return;
+        }
+        if (!this.shouldLoad) {
+            this.loadItemsFromMetadata();
+            return;
+        }
         // Ensure we have a method and remove any body if method is get
         method = method || 'GET';
         if (method.toUpperCase() === 'GET') {
@@ -194,33 +206,55 @@ export default class RadioComponent extends ListComponent {
         options.ignoreCache = this.component.ignoreCache;
         // Make the request.
         options.header = headers;
-        if (this.shouldLoad) {
-            this.loading = true;
-            Formio.makeRequest(this.options.formio, 'select', url, method, body, options)
-                .then((response) => {
-                this.loading = false;
-                this.error = null;
-                this.setItems(response);
-                this.shouldLoad = false;
-                this.redraw();
-            })
-                .catch((err) => {
-                this.handleLoadingError(err);
-            });
-        }
+        this.loading = true;
+        Formio.makeRequest(this.options.formio, 'select', url, method, body, options)
+            .then((response) => {
+            this.loading = false;
+            this.error = null;
+            this.setItems(response);
+            this.optionsLoaded = true;
+            this.redraw();
+        })
+            .catch((err) => {
+            this.handleLoadingError(err);
+        });
+    }
+    loadItemsFromMetadata() {
+        this.listData.forEach((item, i) => {
+            this.loadedOptions[i] = {
+                label: this.itemTemplate(item)
+            };
+            if (_.isEqual(item, this.selectData)) {
+                this.loadedOptions[i].value = this.dataValue;
+            }
+        });
+        this.optionsLoaded = true;
+        this.redraw();
     }
     setItems(items) {
+        const listData = [];
         items?.forEach((item, i) => {
             this.loadedOptions[i] = {
                 value: item[this.component.valueProperty],
                 label: this.itemTemplate(item, item[this.component.valueProperty])
             };
+            listData.push(this.templateData[item[this.component.valueProperty]]);
             if (_.isUndefined(item[this.component.valueProperty]) ||
                 _.isObject(item[this.component.valueProperty]) ||
                 (!this.isRadio && _.isBoolean(item[this.component.valueProperty]))) {
                 this.loadedOptions[i].invalid = true;
             }
         });
+        if (this.isSelectURL) {
+            const submission = this.root.submission;
+            if (!submission.metadata) {
+                submission.metadata = {};
+            }
+            if (!submission.metadata.listData) {
+                submission.metadata.listData = {};
+            }
+            _.set(submission.metadata.listData, this.path, listData);
+        }
     }
     setSelectedClasses() {
         if (this.refs.wrapper) {
@@ -283,6 +317,13 @@ export default class RadioComponent extends ListComponent {
         if (value === 'false') {
             value = false;
         }
+        if (this.isSelectURL && this.templateData && this.templateData[value]) {
+            const submission = this.root.submission;
+            if (!submission.metadata.selectData) {
+                submission.metadata.selectData = {};
+            }
+            _.set(submission.metadata.selectData, this.path, this.templateData[value]);
+        }
         return super.normalizeValue(value);
     }
 }

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

@@ -13,7 +13,7 @@ export default class ReCaptchaComponent extends Component {
     recaptchaApiReady: any;
     createLabel(): void;
     verify(actionName: any): void;
-    recaptchaVerifiedPromise: any;
+    recaptchaVerifiedPromise: Promise<void> | undefined;
     isLoading: boolean | undefined;
     sendVerificationRequest(token: any): any;
     checkComponentValidity(data: any, dirty: any, row: any, options?: {}): any;