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

package/lib/cjs/components/index.d.ts

@@ -44,7 +44,6 @@ declare namespace _default {
     export { TextAreaComponent as textarea };
     export { TextFieldComponent as textfield };
     export { TimeComponent as time };
-    export { TreeComponent as tree };
     export { UnknownComponent as unknown };
     export { UrlComponent as url };
     export { WellComponent as well };
@@ -94,7 +93,6 @@ import TagsComponent from './tags/Tags';
 import TextAreaComponent from './textarea/TextArea';
 import TextFieldComponent from './textfield/TextField';
 import TimeComponent from './time/Time';
-import TreeComponent from './tree/Tree';
 import UnknownComponent from './unknown/Unknown';
 import UrlComponent from './url/Url';
 import WellComponent from './well/Well';

package/lib/cjs/components/index.js

@@ -47,7 +47,6 @@ const Tags_1 = __importDefault(require("./tags/Tags"));
 const TextArea_1 = __importDefault(require("./textarea/TextArea"));
 const TextField_1 = __importDefault(require("./textfield/TextField"));
 const Time_1 = __importDefault(require("./time/Time"));
-const Tree_1 = __importDefault(require("./tree/Tree"));
 const Unknown_1 = __importDefault(require("./unknown/Unknown"));
 const Url_1 = __importDefault(require("./url/Url"));
 const Well_1 = __importDefault(require("./well/Well"));
@@ -97,7 +96,6 @@ exports.default = {
     textarea: TextArea_1.default,
     textfield: TextField_1.default,
     time: Time_1.default,
-    tree: Tree_1.default,
     unknown: Unknown_1.default,
     url: Url_1.default,
     well: Well_1.default,

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

@@ -31,10 +31,9 @@ export default class NumberComponent extends Input {
     };
     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/cjs/components/number/Number.js

@@ -47,22 +47,21 @@ class NumberComponent extends Input_1.default {
     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);
-        const requireDecimal = lodash_1.default.get(this.component, 'requireDecimal', false);
+        this.decimalSeparator = this.options.decimalSeparator = this.options.decimalSeparator
+            || ((_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.decimalSeparator)
+            || separators.decimalSeparator;
         if (this.component.delimiter) {
             if (this.options.hasOwnProperty('thousandsSeparator')) {
                 console.warn("Property 'thousandsSeparator' is deprecated. Please use i18n to specify delimiter.");
             }
-            this.delimiter = ((_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.thousandsSeparator) || this.options.thousandsSeparator || separators.delimiter;
+            this.delimiter = ((_b = this.options.properties) === null || _b === void 0 ? void 0 : _b.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/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/cjs/components/panel/Panel.js

@@ -44,19 +44,12 @@ class PanelComponent extends NestedComponent_1.default {
     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 ((0, utils_1.hasInvalidComponent)(this) && this.collapsed) {
+            if ((0, utils_1.isChildOf)(err.instance, this) && this.collapsed) {
                 this.collapsed = false;
             }
         });
     }
-    getComponent(path, fn, originalPath) {
-        var _a;
-        if (((_a = this.root) === null || _a === void 0 ? void 0 : _a.parent) instanceof Form_1.default) {
-            path = path.replace(this._parentPath, '');
-        }
-        return super.getComponent(path, fn, originalPath);
-    }
 }
 exports.default = PanelComponent;

package/lib/cjs/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/cjs/components/panel/editForm/Panel.edit.display.js

@@ -80,28 +80,15 @@ exports.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/cjs/components/phonenumber/PhoneNumber.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const TextField_1 = __importDefault(require("../textfield/TextField"));
+const lodash_1 = __importDefault(require("lodash"));
 class PhoneNumberComponent extends TextField_1.default {
     static schema(...extend) {
         return TextField_1.default.schema({
@@ -29,5 +30,21 @@ class PhoneNumberComponent extends TextField_1.default {
     get defaultSchema() {
         return PhoneNumberComponent.schema();
     }
+    getValueAsString(value, options) {
+        if ((options === null || options === void 0 ? void 0 : options.email) && this.visible && !this.skipInEmail && lodash_1.default.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);
+    }
 }
 exports.default = PhoneNumberComponent;

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

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

package/lib/cjs/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/cjs/components/recaptcha/ReCaptcha.js

@@ -110,13 +110,13 @@ class ReCaptchaComponent extends Component_1.default {
         return Formio_1.Formio.makeStaticRequest(`${Formio_1.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/cjs/components/select/Select.js

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

package/lib/cjs/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/cjs/components/selectboxes/SelectBoxes.js

@@ -46,7 +46,6 @@ class SelectBoxesComponent extends Radio_1.default {
     }
     constructor(...args) {
         super(...args);
-        this.validators = this.validators.concat('minSelectedCount', 'maxSelectedCount', 'availableValueProperty');
     }
     init() {
         super.init();
@@ -211,10 +210,10 @@ class SelectBoxesComponent extends Radio_1.default {
             });
         }
     }
-    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) => {
@@ -231,19 +230,21 @@ class SelectBoxesComponent extends Radio_1.default {
                     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 (!(0, utils_1.boolValue)(setting) || !value) {

package/lib/cjs/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/cjs/components/table/editForm/Table.edit.display.js

@@ -33,6 +33,24 @@ exports.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',
@@ -108,4 +126,8 @@ exports.default = [
         tooltip: 'Condense the size of the table.',
         weight: 704
     },
+    {
+        key: 'hideLabel',
+        ignore: true
+    },
 ];

package/lib/cjs/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/cjs/components/tabs/editForm/Tabs.edit.display.js

@@ -33,6 +33,24 @@ exports.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',
@@ -65,4 +83,8 @@ exports.default = [
         key: 'verticalLayout',
         input: true
     },
+    {
+        key: 'hideLabel',
+        ignore: true
+    },
 ];

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

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Input_1 = __importDefault(require("../_classes/input/Input"));
 const vanilla_text_mask_1 = require("@formio/vanilla-text-mask");
 const FormioUtils = __importStar(require("../../utils/utils"));
+const lodash_1 = __importDefault(require("lodash"));
 class TextFieldComponent extends Input_1.default {
     static schema(...extend) {
         return Input_1.default.schema({
@@ -207,12 +208,6 @@ class TextFieldComponent extends Input_1.default {
             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) &&
@@ -247,5 +242,24 @@ class TextFieldComponent extends Input_1.default {
         this.dataValue = value;
         return Promise.resolve(value).then(() => super.beforeSubmit());
     }
+    getValueAsString(value, options) {
+        if ((options === null || options === void 0 ? void 0 : options.email) && this.visible && !this.skipInEmail && lodash_1.default.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);
+    }
 }
 exports.default = TextFieldComponent;

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

@@ -32,12 +32,6 @@ class TimeComponent extends TextField_1.default {
             : (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/cjs/components/url/Url.js

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

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