@formio/js 5.0.0-rc.26 → 5.0.0-rc.28

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

@@ -45,9 +45,10 @@ export default class NumberComponent extends Input {
     }
     constructor(...args) {
         super(...args);
-        this.validators = this.validators.concat(['min', 'max']);
         const separators = getNumberSeparators(this.options.language || navigator.language);
-        const requireDecimal = _.get(this.component, 'requireDecimal', false);
+        this.decimalSeparator = this.options.decimalSeparator = this.options.decimalSeparator
+            || this.options.properties?.decimalSeparator
+            || separators.decimalSeparator;
         if (this.component.delimiter) {
             if (this.options.hasOwnProperty('thousandsSeparator')) {
                 console.warn("Property 'thousandsSeparator' is deprecated. Please use i18n to specify delimiter.");
@@ -57,10 +58,8 @@ 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

@@ -10,6 +10,5 @@ export default class PanelComponent extends NestedComponent {
     static savedValueTypes(): never[];
     constructor(...args: any[]);
     noField: boolean;
-    getComponent(path: any, fn: any, originalPath: any): Object;
 }
 import NestedComponent from '../_classes/nested/NestedComponent';

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

@@ -1,5 +1,5 @@
 import NestedComponent from '../_classes/nested/NestedComponent';
-import { hasInvalidComponent } from '../../utils/utils';
+import { isChildOf } from '../../utils/utils';
 import FormComponent from '../form/Form';
 export default class PanelComponent extends NestedComponent {
     static schema(...extend) {
@@ -39,17 +39,11 @@ export default class PanelComponent extends NestedComponent {
     constructor(...args) {
         super(...args);
         this.noField = true;
-        this.on('componentError', () => {
+        this.on('componentError', (err) => {
             //change collapsed value only when the panel is collapsed to avoid additional redrawing that prevents validation messages
-            if (hasInvalidComponent(this) && this.collapsed) {
+            if (isChildOf(err.instance, this) && this.collapsed) {
                 this.collapsed = false;
             }
         });
     }
-    getComponent(path, fn, originalPath) {
-        if (this.root?.parent instanceof FormComponent) {
-            path = path.replace(this._parentPath, '');
-        }
-        return super.getComponent(path, fn, originalPath);
-    }
 }

package/lib/mjs/components/panel/editForm/Panel.edit.display.d.ts

@@ -79,42 +79,17 @@ declare const _default: ({
     type: string;
     input: boolean;
     components: ({
-        type: string;
-        input: boolean;
-        label: string;
-        key: string;
-        dataSrc: string;
-        data: {
-            values: {
-                label: string;
-                value: string;
-            }[];
-        };
-        defaultValue?: undefined;
-        conditional?: undefined;
-        tooltip?: undefined;
-        weight?: undefined;
-        optionsLabelPosition?: undefined;
-        values?: undefined;
-        inline?: undefined;
-        inputType?: undefined;
-    } | {
         input: boolean;
         type: string;
         label: string;
         key: string;
         defaultValue: boolean;
-        conditional: {
-            json: {
-                '!==': (string | {
-                    var: string;
-                })[];
-                '==='?: undefined;
-            };
-        };
-        dataSrc?: undefined;
-        data?: undefined;
+        customConditional({ data, buildingForm }: {
+            data?: {} | undefined;
+            buildingForm?: {} | undefined;
+        }): boolean;
         tooltip?: undefined;
+        conditional?: undefined;
         weight?: undefined;
         optionsLabelPosition?: undefined;
         values?: undefined;
@@ -132,11 +107,8 @@ declare const _default: ({
                 '===': (boolean | {
                     var: string;
                 })[];
-                '!=='?: undefined;
             };
         };
-        dataSrc?: undefined;
-        data?: undefined;
         weight?: undefined;
         optionsLabelPosition?: undefined;
         values?: undefined;
@@ -160,10 +132,8 @@ declare const _default: ({
             cancel: boolean;
             next: boolean;
         };
-        dataSrc?: undefined;
-        data?: undefined;
-        conditional?: undefined;
         tooltip?: undefined;
+        conditional?: undefined;
     } | {
         weight: number;
         label: string;
@@ -173,8 +143,6 @@ declare const _default: ({
         inputType: string;
         defaultValue: boolean;
         tooltip: string;
-        dataSrc?: undefined;
-        data?: undefined;
         conditional?: undefined;
         optionsLabelPosition?: undefined;
         values?: undefined;

package/lib/mjs/components/panel/editForm/Panel.edit.display.js

@@ -75,28 +75,15 @@ export default [
         type: 'fieldset',
         input: false,
         components: [
-            {
-                type: 'select',
-                input: true,
-                label: 'Breadcrumb Type',
-                key: 'breadcrumb',
-                dataSrc: 'values',
-                data: {
-                    values: [
-                        { label: 'Default', value: 'default' },
-                        { label: 'Condensed', value: 'condensed' },
-                        { label: 'Hidden', value: 'none' },
-                    ]
-                }
-            },
             {
                 input: true,
                 type: 'checkbox',
                 label: 'Allow click on Breadcrumb',
                 key: 'breadcrumbClickable',
                 defaultValue: true,
-                conditional: {
-                    json: { '!==': [{ var: 'data.breadcrumb' }, 'none'] }
+                customConditional({ data = {}, buildingForm = {} }) {
+                    const formSettings = buildingForm.settings || {};
+                    return ![data.breadcrumb, formSettings.wizardBreadcrumbsType].includes('none');
                 }
             },
             {

package/lib/mjs/components/phonenumber/PhoneNumber.js

@@ -1,4 +1,5 @@
 import TextFieldComponent from '../textfield/TextField';
+import _ from 'lodash';
 export default class PhoneNumberComponent extends TextFieldComponent {
     static schema(...extend) {
         return TextFieldComponent.schema({
@@ -24,4 +25,20 @@ export default class PhoneNumberComponent extends TextFieldComponent {
     get defaultSchema() {
         return PhoneNumberComponent.schema();
     }
+    getValueAsString(value, options) {
+        if (options?.email && this.visible && !this.skipInEmail && _.isObject(value)) {
+            const result = (`
+        <table border="1" style="width:100%">
+          <tbody>
+          <tr>
+            <th style="padding: 5px 10px;">${value.maskName}</th>
+            <td style="width:100%;padding:5px 10px;">${value.value}</td>
+          </tr>
+          </tbody>
+        </table>
+      `);
+            return result;
+        }
+        return super.getValueAsString(value, options);
+    }
 }

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

@@ -97,7 +97,6 @@ export default class RadioComponent extends ListComponent {
     init() {
         super.init();
         this.templateData = {};
-        this.validators = this.validators.concat(['select', 'onlyAvailableItems', 'availableValueProperty']);
         // Trigger an update.//
         let updateArgs = [];
         const triggerUpdate = _.debounce((...args) => {
@@ -253,7 +252,6 @@ export default class RadioComponent extends ListComponent {
         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();

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

@@ -17,7 +17,7 @@ export default class ReCaptchaComponent extends Component {
     recaptchaVerifiedPromise: Promise<void> | undefined;
     isLoading: boolean | undefined;
     sendVerificationRequest(token: any): any;
-    checkComponentValidity(data: any, dirty: any, row: any, options?: {}): any;
+    checkComponentValidity(data: any, dirty: any, row: any, options?: {}, errors?: any[]): any;
     normalizeValue(newValue: any): any;
 }
 import Component from '../_classes/component/Component';

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

@@ -108,13 +108,13 @@ export default class ReCaptchaComponent extends Component {
         return Formio.makeStaticRequest(`${Formio.projectUrl}/recaptcha?recaptchaToken=${token}`)
             .then((verificationResult) => ({ verificationResult, token }));
     }
-    checkComponentValidity(data, dirty, row, options = {}) {
+    checkComponentValidity(data, dirty, row, options = {}, errors = []) {
         data = data || this.rootValue;
         row = row || this.data;
         const { async = false } = options;
         // Verification could be async only
         if (!async) {
-            return super.checkComponentValidity(data, dirty, row, options);
+            return super.checkComponentValidity(data, dirty, row, options, errors);
         }
         const componentData = row[this.component.key];
         if (!componentData || !componentData.token) {

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

@@ -86,7 +86,6 @@ export default class SelectComponent extends ListComponent {
     init() {
         super.init();
         this.templateData = {};
-        this.validators = this.validators.concat(['select', 'onlyAvailableItems']);
         // Trigger an update.
         let updateArgs = [];
         const triggerUpdate = _.debounce((...args) => {
@@ -546,7 +545,6 @@ export default class SelectComponent extends ListComponent {
         Formio.makeRequest(this.options.formio, 'select', url, method, body, options)
             .then((response) => {
             this.loading = false;
-            this.error = null;
             this.setItems(response, !!search);
         })
             .catch((err) => {
@@ -1459,6 +1457,9 @@ export default class SelectComponent extends ListComponent {
                 return '-';
             }
         }
+        if (this.isEntireObjectDisplay() && _.isObject(value)) {
+            return JSON.stringify(value);
+        }
         return !_.isNil(value)
             ? this.itemTemplate(value)
             : '-';

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

@@ -37,7 +37,6 @@ export default class SelectBoxesComponent extends RadioComponent {
     };
     static savedValueTypes(schema: any): string[];
     constructor(...args: any[]);
-    validators: string[];
     get emptyValue(): any;
     /**
      * Only empty if the values are all false.
@@ -47,6 +46,6 @@ export default class SelectBoxesComponent extends RadioComponent {
      */
     isEmpty(value?: any): boolean;
     setInputsDisabled(value: any, onlyUnchecked: any): void;
-    checkComponentValidity(data: any, dirty: any, rowData: any, options: any): boolean;
+    checkComponentValidity(data: any, dirty: any, rowData: any, options: any, errors?: any[]): boolean;
 }
 import RadioComponent from '../radio/Radio';

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

@@ -44,7 +44,6 @@ export default class SelectBoxesComponent extends RadioComponent {
     }
     constructor(...args) {
         super(...args);
-        this.validators = this.validators.concat('minSelectedCount', 'maxSelectedCount', 'availableValueProperty');
     }
     init() {
         super.init();
@@ -209,10 +208,10 @@ export default class SelectBoxesComponent extends RadioComponent {
             });
         }
     }
-    checkComponentValidity(data, dirty, rowData, options) {
+    checkComponentValidity(data, dirty, rowData, options, errors = []) {
         const minCount = this.component.validate.minSelectedCount;
         const maxCount = this.component.validate.maxSelectedCount;
-        if (!this.shouldSkipValidation(data, dirty, rowData)) {
+        if (!this.shouldSkipValidation(data, rowData, options)) {
             const isValid = this.isValid(data, dirty);
             if ((maxCount || minCount)) {
                 const count = Object.keys(this.validationValue).reduce((total, key) => {
@@ -229,19 +228,21 @@ export default class SelectBoxesComponent extends RadioComponent {
                     this.setInputsDisabled(false);
                 }
                 if (!isValid && maxCount && count > maxCount) {
-                    const message = this.t(this.component.maxSelectedCountMessage || 'You can only select up to {{maxCount}} items.', { maxCount });
+                    const message = this.t(this.component.maxSelectedCountMessage || 'You may only select up to {{maxCount}} items', { maxCount });
+                    this.errors.push({ message });
                     this.setCustomValidity(message, dirty);
                     return false;
                 }
                 else if (!isValid && minCount && count < minCount) {
                     this.setInputsDisabled(false);
-                    const message = this.t(this.component.minSelectedCountMessage || 'You must select at least {{minCount}} items.', { minCount });
+                    const message = this.t(this.component.minSelectedCountMessage || 'You must select at least {{minCount}} items', { minCount });
+                    this.errors.push({ message });
                     this.setCustomValidity(message, dirty);
                     return false;
                 }
             }
         }
-        return super.checkComponentValidity(data, dirty, rowData, options);
+        return super.checkComponentValidity(data, dirty, rowData, options, errors);
     }
     validateValueAvailability(setting, value) {
         if (!boolValue(setting) || !value) {

package/lib/mjs/components/table/editForm/Table.edit.display.d.ts

@@ -1,12 +1,32 @@
 declare const _default: ({
     key: string;
     ignore: boolean;
+    weight?: undefined;
     type?: undefined;
-    label?: undefined;
     input?: undefined;
-    weight?: undefined;
+    label?: undefined;
     placeholder?: undefined;
     tooltip?: undefined;
+    validate?: undefined;
+    autofocus?: undefined;
+    overrideEditForm?: undefined;
+    dataSrc?: undefined;
+    data?: undefined;
+    defaultValue?: undefined;
+} | {
+    weight: number;
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    placeholder: string;
+    tooltip: string;
+    validate: {
+        required: boolean;
+    };
+    autofocus: boolean;
+    overrideEditForm: boolean;
+    ignore?: undefined;
     dataSrc?: undefined;
     data?: undefined;
     defaultValue?: undefined;
@@ -19,6 +39,9 @@ declare const _default: ({
     placeholder: string;
     tooltip: string;
     ignore?: undefined;
+    validate?: undefined;
+    autofocus?: undefined;
+    overrideEditForm?: undefined;
     dataSrc?: undefined;
     data?: undefined;
     defaultValue?: undefined;
@@ -31,6 +54,9 @@ declare const _default: ({
     tooltip: string;
     ignore?: undefined;
     placeholder?: undefined;
+    validate?: undefined;
+    autofocus?: undefined;
+    overrideEditForm?: undefined;
     dataSrc?: undefined;
     data?: undefined;
     defaultValue?: undefined;
@@ -51,5 +77,8 @@ declare const _default: ({
     weight: number;
     ignore?: undefined;
     placeholder?: undefined;
+    validate?: undefined;
+    autofocus?: undefined;
+    overrideEditForm?: undefined;
 })[];
 export default _default;

package/lib/mjs/components/table/editForm/Table.edit.display.js

@@ -31,6 +31,24 @@ export default [
         key: 'tableView',
         ignore: true
     },
+    {
+        key: 'hideLabel',
+        ignore: true
+    },
+    {
+        weight: 0,
+        type: 'textfield',
+        input: true,
+        key: 'label',
+        label: 'Label',
+        placeholder: 'Field Label',
+        tooltip: 'The label for this field.',
+        validate: {
+            required: true
+        },
+        autofocus: true,
+        overrideEditForm: true
+    },
     {
         type: 'number',
         label: 'Number of Rows',
@@ -106,4 +124,8 @@ export default [
         tooltip: 'Condense the size of the table.',
         weight: 704
     },
+    {
+        key: 'hideLabel',
+        ignore: true
+    },
 ];

package/lib/mjs/components/tabs/editForm/Tabs.edit.display.d.ts

@@ -1,13 +1,33 @@
 declare const _default: ({
     key: string;
     ignore: boolean;
+    weight?: undefined;
     type?: undefined;
     input?: undefined;
     label?: undefined;
-    weight?: undefined;
+    placeholder?: undefined;
+    tooltip?: undefined;
+    validate?: undefined;
+    autofocus?: undefined;
+    overrideEditForm?: undefined;
+    reorder?: undefined;
+    components?: undefined;
+} | {
+    weight: number;
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    placeholder: string;
+    tooltip: string;
+    validate: {
+        required: boolean;
+    };
+    autofocus: boolean;
+    overrideEditForm: boolean;
+    ignore?: undefined;
     reorder?: undefined;
     components?: undefined;
-    tooltip?: undefined;
 } | {
     key: string;
     type: string;
@@ -34,7 +54,11 @@ declare const _default: ({
         };
     })[];
     ignore?: undefined;
+    placeholder?: undefined;
     tooltip?: undefined;
+    validate?: undefined;
+    autofocus?: undefined;
+    overrideEditForm?: undefined;
 } | {
     weight: number;
     type: string;
@@ -43,6 +67,10 @@ declare const _default: ({
     key: string;
     input: boolean;
     ignore?: undefined;
+    placeholder?: undefined;
+    validate?: undefined;
+    autofocus?: undefined;
+    overrideEditForm?: undefined;
     reorder?: undefined;
     components?: undefined;
 })[];

package/lib/mjs/components/tabs/editForm/Tabs.edit.display.js

@@ -31,6 +31,24 @@ export default [
         key: 'tableView',
         ignore: true
     },
+    {
+        key: 'hideLabel',
+        ignore: true
+    },
+    {
+        weight: 0,
+        type: 'textfield',
+        input: true,
+        key: 'label',
+        label: 'Label',
+        placeholder: 'Field Label',
+        tooltip: 'The label for this field.',
+        validate: {
+            required: true
+        },
+        autofocus: true,
+        overrideEditForm: true
+    },
     {
         key: 'components',
         type: 'datagrid',
@@ -63,4 +81,8 @@ export default [
         key: 'verticalLayout',
         input: true
     },
+    {
+        key: 'hideLabel',
+        ignore: true
+    },
 ];

package/lib/mjs/components/textfield/TextField.js

@@ -1,6 +1,7 @@
 import Input from '../_classes/input/Input';
 import { conformToMask } from '@formio/vanilla-text-mask';
 import * as FormioUtils from '../../utils/utils';
+import _ from 'lodash';
 export default class TextFieldComponent extends Input {
     static schema(...extend) {
         return Input.schema({
@@ -186,12 +187,6 @@ export default class TextFieldComponent extends Input {
             maskName: maskInput ? maskInput.value : undefined
         };
     }
-    getValueAsString(value, options) {
-        if (value && this.component.inputFormat === 'plain' && /<[^<>]+>/g.test(value)) {
-            value = value.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
-        }
-        return super.getValueAsString(value, options);
-    }
     isHtmlRenderMode() {
         return super.isHtmlRenderMode() ||
             ((this.options.readOnly || this.disabled) &&
@@ -226,4 +221,23 @@ export default class TextFieldComponent extends Input {
         this.dataValue = value;
         return Promise.resolve(value).then(() => super.beforeSubmit());
     }
+    getValueAsString(value, options) {
+        if (options?.email && this.visible && !this.skipInEmail && _.isObject(value)) {
+            const result = (`
+        <table border="1" style="width:100%">
+          <tbody>
+          <tr>
+            <th style="padding: 5px 10px;">${value.maskName}</th>
+            <td style="width:100%;padding:5px 10px;">${value.value}</td>
+          </tr>
+          </tbody>
+        </table>
+      `);
+            return result;
+        }
+        if (value && this.component.inputFormat === 'plain' && /<[^<>]+>/g.test(value)) {
+            value = value.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+        }
+        return super.getValueAsString(value, options);
+    }
 }

package/lib/mjs/components/time/Time.js

@@ -33,12 +33,6 @@ export default class TimeComponent extends TextFieldComponent {
             : (this.component.inputType || 'time');
         this.rawData = this.component.multiple ? [] : this.emptyValue;
     }
-    init() {
-        super.init();
-        if (this.component.inputType === 'text') {
-            this.validators.push('time');
-        }
-    }
     static get builderInfo() {
         return {
             title: 'Time',

package/lib/mjs/components/url/Url.js

@@ -20,7 +20,6 @@ export default class UrlComponent extends TextFieldComponent {
     }
     constructor(component, options, data) {
         super(component, options, data);
-        this.validators.push('url');
     }
     get defaultSchema() {
         return UrlComponent.schema();

package/lib/mjs/components/well/editForm/Well.edit.display.d.ts

@@ -1,5 +1,28 @@
-declare const _default: {
+declare const _default: ({
     key: string;
     ignore: boolean;
-}[];
+    weight?: undefined;
+    type?: undefined;
+    input?: undefined;
+    label?: undefined;
+    placeholder?: undefined;
+    tooltip?: undefined;
+    validate?: undefined;
+    autofocus?: undefined;
+    overrideEditForm?: undefined;
+} | {
+    weight: number;
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    placeholder: string;
+    tooltip: string;
+    validate: {
+        required: boolean;
+    };
+    autofocus: boolean;
+    overrideEditForm: boolean;
+    ignore?: undefined;
+})[];
 export default _default;

package/lib/mjs/components/well/editForm/Well.edit.display.js

@@ -27,4 +27,22 @@ export default [
         key: 'tableView',
         ignore: true
     },
+    {
+        key: 'hideLabel',
+        ignore: true
+    },
+    {
+        weight: 0,
+        type: 'textfield',
+        input: true,
+        key: 'label',
+        label: 'Label',
+        placeholder: 'Field Label',
+        tooltip: 'The label for this field.',
+        validate: {
+            required: true
+        },
+        autofocus: true,
+        overrideEditForm: true
+    },
 ];

package/lib/mjs/formio.embed.js

@@ -22,9 +22,11 @@ if (thisScript) {
         config.formioPath(scriptSrc);
     }
     scriptSrc = scriptSrc.join('/');
+    const debug = (query.debug === 'true' || query.debug === '1');
+    const renderer = debug ? 'formio.form' : 'formio.form.min';
     Formio.config = Object.assign({
-        script: query.script || (`${config.updatePath ? config.updatePath() : scriptSrc}/formio.form.min.js`),
-        style: query.styles || (`${config.updatePath ? config.updatePath() : scriptSrc}/formio.form.min.css`),
+        script: query.script || (`${config.updatePath ? config.updatePath() : scriptSrc}/${renderer}.js`),
+        style: query.styles || (`${config.updatePath ? config.updatePath() : scriptSrc}/${renderer}.css`),
         cdn: query.cdn,
         class: (query.class || 'formio-form-wrapper'),
         src: query.src,
@@ -35,7 +37,7 @@ if (thisScript) {
         submit: query.submit,
         includeLibs: (query.libs === 'true' || query.libs === '1'),
         template: query.template,
-        debug: (query.debug === 'true' || query.debug === '1'),
+        debug: debug,
         config: {},
         redirect: (query.return || query.redirect),
         embedCSS: (`${config.updatePath ? config.updatePath() : scriptSrc}/formio.embed.css`),