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

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

@@ -83,8 +83,11 @@ exports.default = [
         input: true,
         weight: 15,
         placeholder: `{
-  "withCredentials": true
-}`,
+      "withCredentials": true,
+      "headers": {
+        "Authorization": "Basic <key>"
+      }
+    }`,
         conditional: {
             json: {
                 '===': [{
@@ -209,6 +212,30 @@ exports.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/cjs/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/cjs/components/form/Form.js

@@ -7,7 +7,6 @@ const lodash_1 = __importDefault(require("lodash"));
 const Component_1 = __importDefault(require("../_classes/component/Component"));
 const ComponentModal_1 = __importDefault(require("../_classes/componentModal/ComponentModal"));
 const eventemitter3_1 = __importDefault(require("eventemitter3"));
-const native_promise_only_1 = __importDefault(require("native-promise-only"));
 const utils_1 = require("../../utils/utils");
 const Formio_1 = require("../../Formio");
 const Form_1 = __importDefault(require("../../Form"));
@@ -99,7 +98,7 @@ class FormComponent extends Component_1.default {
         return this.createSubForm();
     }
     get dataReady() {
-        return this.subFormReady || native_promise_only_1.default.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.
@@ -112,7 +111,7 @@ class FormComponent extends Component_1.default {
         return { data: {} };
     }
     get ready() {
-        return this.subFormReady || native_promise_only_1.default.resolve();
+        return this.subFormReady || Promise.resolve();
     }
     get useOriginalRevision() {
         var _a, _b;
@@ -388,14 +387,14 @@ class FormComponent extends Component_1.default {
      */
     loadSubForm(fromAttach) {
         if (this.builderMode || this.isHidden() || (this.isSubFormLazyLoad() && !fromAttach)) {
-            return native_promise_only_1.default.resolve();
+            return Promise.resolve();
         }
-        if (this.hasLoadedForm && !this.isRevisionChanged && !(this.options.pdf && lodash_1.default.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 native_promise_only_1.default.resolve(this.formObj);
+            return Promise.resolve(this.formObj);
         }
         else if (this.formSrc) {
             this.subFormLoading = true;
@@ -410,7 +409,7 @@ class FormComponent extends Component_1.default {
                 return null;
             });
         }
-        return native_promise_only_1.default.resolve();
+        return Promise.resolve();
     }
     get subFormData() {
         var _a;
@@ -473,7 +472,7 @@ class FormComponent extends Component_1.default {
             return this.subForm.getSubmission();
         }
         else {
-            return native_promise_only_1.default.resolve(this.dataValue);
+            return Promise.resolve(this.dataValue);
         }
     }
     /**
@@ -498,7 +497,7 @@ class FormComponent extends Component_1.default {
                     this.subForm.showAllErrors = true;
                     if (rejectOnError) {
                         this.subForm.onSubmissionError(err);
-                        return native_promise_only_1.default.reject(err);
+                        return Promise.reject(err);
                     }
                     else {
                         return {};
@@ -528,7 +527,7 @@ class FormComponent extends Component_1.default {
         // This submission has already been submitted, so just return the reference data.
         if (isAlreadySubmitted && !((_a = this.subForm) === null || _a === void 0 ? void 0 : _a.wizard)) {
             this.dataValue = submission;
-            return native_promise_only_1.default.resolve(this.dataValue);
+            return Promise.resolve(this.dataValue);
         }
         return this.submitSubForm(false)
             .then(() => {

package/lib/cjs/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/cjs/components/hidden/Hidden.js

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

package/lib/cjs/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/cjs/components/html/HTML.js

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

package/lib/cjs/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/cjs/components/number/Number.js

@@ -3,11 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const text_mask_addons_1 = require("@formio/text-mask-addons");
 const vanilla_text_mask_1 = require("@formio/vanilla-text-mask");
 const lodash_1 = __importDefault(require("lodash"));
-const text_mask_addons_1 = require("@formio/text-mask-addons");
-const Input_1 = __importDefault(require("../_classes/input/Input"));
 const utils_1 = require("../../utils/utils");
+const Input_1 = __importDefault(require("../_classes/input/Input"));
 class NumberComponent extends Input_1.default {
     static schema(...extend) {
         return Input_1.default.schema({
@@ -32,25 +32,42 @@ class NumberComponent extends Input_1.default {
             schema: NumberComponent.schema()
         };
     }
+    static get serverConditionSettings() {
+        return {
+            operators: [
+                'isEqual',
+                'isNotEqual',
+                'isEmpty',
+                'isNotEmpty',
+                'greaterThan',
+                'greaterThanOrEqual',
+                'lessThan',
+                'lessThanOrEqual',
+            ],
+            valueComponent(classComp) {
+                return Object.assign(Object.assign({}, classComp), { type: 'number' });
+            },
+        };
+    }
     constructor(...args) {
         var _a, _b;
         super(...args);
         this.validators = this.validators.concat(['min', 'max']);
         const separators = (0, utils_1.getNumberSeparators)(this.options.language || navigator.language);
-        this.decimalSeparator = this.options.decimalSeparator = this.options.decimalSeparator
-            || ((_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.decimalSeparator)
-            || separators.decimalSeparator;
+        const requireDecimal = lodash_1.default.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.");
             }
-            this.delimiter = ((_b = this.options.properties) === null || _b === void 0 ? void 0 : _b.thousandsSeparator) || this.options.thousandsSeparator || separators.delimiter;
+            this.delimiter = ((_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.thousandsSeparator) || this.options.thousandsSeparator || separators.delimiter;
         }
         else {
             this.delimiter = '';
         }
-        const requireDecimal = lodash_1.default.get(this.component, 'requireDecimal', false);
         this.decimalLimit = (0, utils_1.getNumberDecimalLimit)(this.component, requireDecimal ? 2 : 20);
+        this.decimalSeparator = this.decimalLimit !== 0 ?
+            this.options.decimalSeparator || ((_b = this.options.properties) === null || _b === void 0 ? void 0 : _b.decimalSeparator) || separators.decimalSeparator :
+            '';
         // Currencies to override BrowserLanguage Config. Object key {}
         if (lodash_1.default.has(this.options, `languageOverride.${this.options.language}`)) {
             const override = lodash_1.default.get(this.options, `languageOverride.${this.options.language}`);

package/lib/cjs/components/phonenumber/PhoneNumber.form.js

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

package/lib/cjs/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/cjs/components/radio/Radio.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const ListComponent_1 = __importDefault(require("../_classes/list/ListComponent"));
-const native_promise_only_1 = __importDefault(require("native-promise-only"));
 const Formio_1 = require("../../Formio");
 const utils_1 = require("../../utils/utils");
 class RadioComponent extends ListComponent_1.default {
@@ -64,6 +63,10 @@ class RadioComponent extends ListComponent_1.default {
     get optionSelectedClass() {
         return 'radio-selected';
     }
+    get listData() {
+        const listData = lodash_1.default.get(this.root, 'submission.metadata.listData', {});
+        return lodash_1.default.get(listData, this.path);
+    }
     init() {
         super.init();
         this.templateData = {};
@@ -79,7 +82,7 @@ class RadioComponent extends ListComponent_1.default {
             if (typeof this.itemsLoadedResolve === 'function') {
                 this.itemsLoadedResolve();
             }
-            this.itemsLoaded = new native_promise_only_1.default((resolve) => {
+            this.itemsLoaded = new Promise((resolve) => {
                 this.itemsLoadedResolve = resolve;
             });
             if (args.length) {
@@ -87,11 +90,13 @@ class RadioComponent extends ListComponent_1.default {
             }
             return triggerUpdate(...updateArgs);
         };
-        this.itemsLoaded = new native_promise_only_1.default((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', {
@@ -191,6 +196,13 @@ class RadioComponent extends ListComponent_1.default {
         }
     }
     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') {
@@ -200,33 +212,55 @@ class RadioComponent extends ListComponent_1.default {
         options.ignoreCache = this.component.ignoreCache;
         // Make the request.
         options.header = headers;
-        if (this.shouldLoad) {
-            this.loading = true;
-            Formio_1.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_1.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 (lodash_1.default.isEqual(item, this.selectData)) {
+                this.loadedOptions[i].value = this.dataValue;
+            }
+        });
+        this.optionsLoaded = true;
+        this.redraw();
     }
     setItems(items) {
+        const listData = [];
         items === null || items === void 0 ? void 0 : 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 (lodash_1.default.isUndefined(item[this.component.valueProperty]) ||
                 lodash_1.default.isObject(item[this.component.valueProperty]) ||
                 (!this.isRadio && lodash_1.default.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 = {};
+            }
+            lodash_1.default.set(submission.metadata.listData, this.path, listData);
+        }
     }
     setSelectedClasses() {
         if (this.refs.wrapper) {
@@ -289,6 +323,13 @@ class RadioComponent extends ListComponent_1.default {
         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 = {};
+            }
+            lodash_1.default.set(submission.metadata.selectData, this.path, this.templateData[value]);
+        }
         return super.normalizeValue(value);
     }
 }

package/lib/cjs/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;

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

@@ -8,7 +8,6 @@ const Component_1 = __importDefault(require("../_classes/component/Component"));
 const Formio_1 = require("../../Formio");
 const get_1 = __importDefault(require("lodash/get"));
 const debounce_1 = __importDefault(require("lodash/debounce"));
-const native_promise_only_1 = __importDefault(require("native-promise-only"));
 class ReCaptchaComponent extends Component_1.default {
     static schema(...extend) {
         return Component_1.default.schema({
@@ -66,7 +65,7 @@ class ReCaptchaComponent extends Component_1.default {
             this.recaptchaApiReady = Formio_1.Formio.requireLibrary('googleRecaptcha', 'grecaptcha', recaptchaApiScriptUrl, true);
         }
         if (this.recaptchaApiReady) {
-            this.recaptchaVerifiedPromise = new native_promise_only_1.default((resolve, reject) => {
+            this.recaptchaVerifiedPromise = new Promise((resolve, reject) => {
                 this.recaptchaApiReady
                     .then(() => {
                     if (!this.isLoading) {
@@ -119,13 +118,13 @@ class ReCaptchaComponent extends Component_1.default {
         const componentData = row[this.component.key];
         if (!componentData || !componentData.token) {
             this.setCustomValidity('ReCAPTCHA: Token is not specified in submission');
-            return native_promise_only_1.default.resolve(false);
+            return Promise.resolve(false);
         }
         if (!componentData.success) {
             this.setCustomValidity('ReCAPTCHA: Token validation error');
-            return native_promise_only_1.default.resolve(false);
+            return Promise.resolve(false);
         }
-        return this.hook('validateReCaptcha', componentData.token, () => native_promise_only_1.default.resolve(true))
+        return this.hook('validateReCaptcha', componentData.token, () => Promise.resolve(true))
             .then((success) => success)
             .catch((err) => {
             this.setCustomValidity(err.message || err);

package/lib/cjs/components/resource/Resource.d.ts

@@ -1,3 +1,10 @@
 export default class ResourceComponent extends SelectComponent {
+    static get builderInfo(): {
+        title: string;
+        icon: string;
+        weight: number;
+        documentation: string;
+        schema: any;
+    };
 }
 import SelectComponent from '../select/Select';

package/lib/cjs/components/resource/Resource.js

@@ -19,7 +19,6 @@ class ResourceComponent extends Select_1.default {
     static get builderInfo() {
         return {
             title: 'Resource',
-            group: 'premium',
             icon: 'files-o',
             weight: 90,
             documentation: '/userguide/form-building/form-components#resource',

package/lib/cjs/components/resource/editForm/Resource.edit.display.js

@@ -7,7 +7,7 @@ exports.default = [
         type: 'htmlelement',
         tag: 'div',
         className: 'alert alert-danger',
-        content: 'The Resource component is deprecated. Use the Select component with data source of "Resource" instead.',
+        content: 'This component has been deprecated and will be removed in a future version of Formio.js.',
     },
     {
         type: 'select',

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

@@ -7,11 +7,15 @@ export default class SelectComponent extends ListComponent {
         documentation: string;
         schema: any;
     };
+    static get serverConditionSettings(): {
+        valueComponent(classComp: any): any;
+        operators: string[];
+    };
     templateData: {} | undefined;
     triggerUpdate: ((...args: any[]) => any) | undefined;
     set itemsLoaded(arg: any);
     get itemsLoaded(): any;
-    itemsLoadedResolve: any;
+    itemsLoadedResolve: ((value: any) => void) | undefined;
     isFromSearch: boolean | undefined;
     searchServerCount: any;
     defaultServerCount: any;
@@ -19,6 +23,7 @@ export default class SelectComponent extends ListComponent {
     searchDownloadedResources: any;
     defaultDownloadedResources: any;
     activated: boolean | undefined;
+    get dataReady(): any;
     get emptyValue(): {};
     get valueProperty(): any;
     get inputInfo(): {
@@ -55,11 +60,7 @@ export default class SelectComponent extends ListComponent {
     set downloadedResources(arg: any);
     get downloadedResources(): any;
     getSingleItemValueForHTMLMode(data: any): any;
-    getTemplateKeys(): void;
-    templateKeys: any[] | undefined;
     get loadingError(): boolean | undefined;
-    get selectData(): any;
-    get shouldLoad(): any;
     loadItems(url: any, search: any, headers: any, options: any, method: any, body: any): void;
     getCustomItems(): any;
     asyncValues: boolean | undefined;
@@ -79,6 +80,7 @@ export default class SelectComponent extends ListComponent {
     render(): any;
     wrapElement(element: any): any;
     choicesOptions(): any;
+    attach(element: any): Promise<void> | undefined;
     focusableElement: any;
     choices: Choices | null | undefined;
     scrollList: any;