@formio/js 5.1.0-dev.6109.79f22ad → 5.1.0-dev.6112.1314654

package/lib/mjs/PDFBuilder.js

@@ -1,8 +1,7 @@
 import _ from 'lodash';
 import { Formio } from './Formio';
 import WebformBuilder from './WebformBuilder';
-import { fastCloneDeep, getElementRect, getBrowserInfo } from './utils/utils';
-import { eachComponent } from './utils/formUtils';
+import { fastCloneDeep, getElementRect, getBrowserInfo, eachComponent } from './utils';
 import BuilderUtils from './utils/builder';
 import PDF from './PDF';
 export default class PDFBuilder extends WebformBuilder {
@@ -445,21 +444,21 @@ export default class PDFBuilder extends WebformBuilder {
         e.target.style.cursor = 'default';
     }
     highlightInvalidComponents() {
-        const repeatablePaths = this.findRepeatablePaths();
+        const repeatablePathsComps = this.findComponentsWithRepeatablePaths();
         // update elements which path was duplicated if any pathes have been changed
-        if (!_.isEqual(this.repeatablePaths, repeatablePaths)) {
-            eachComponent(this.webform.getComponents(), (comp, path) => {
-                if (this.repeatablePaths.includes(path)) {
+        if (!_.isEqual(this.repeatablePathsComps, repeatablePathsComps)) {
+            eachComponent(this.webform.getComponents(), (comp) => {
+                if (this.repeatablePathsComps.includes(comp.component)) {
                     this.webform.postMessage({ name: 'updateElement', data: comp.component });
                 }
             });
-            this.repeatablePaths = repeatablePaths;
+            this.repeatablePathsComps = repeatablePathsComps;
         }
-        if (!repeatablePaths.length) {
+        if (!repeatablePathsComps.length) {
             return;
         }
-        eachComponent(this.webform.getComponents(), (comp, path) => {
-            if (this.repeatablePaths.includes(path)) {
+        eachComponent(this.webform.getComponents(), (comp) => {
+            if (this.repeatablePathsComps.includes(comp)) {
                 this.webform.postMessage({
                     name: 'showBuilderErrors',
                     data: {

package/lib/mjs/Webform.d.ts

@@ -45,7 +45,7 @@
  * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
  * @property {boolean} [readOnly] - Set this form to readOnly.
  * @property {boolean} [noAlerts] - Disable the alerts dialog.
- * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.
+ * @property {{[key: string]: string}} [enTranslation] - The translation file for this rendering.
  * @property {string} [template] - Custom logic for creation of elements.
  * @property {boolean} [noDefaults] - Exclude default values from the settings.
  * @property {any} [fileService] - The file service for this form.
@@ -586,7 +586,7 @@ export type FormOptions = {
     /**
      * - The translation file for this rendering.
      */
-    i18n?: {
+    enTranslation?: {
         [key: string]: string;
     } | undefined;
     /**

package/lib/mjs/Webform.js

@@ -1,13 +1,12 @@
 import _ from 'lodash';
-import moment from 'moment';
 import { compareVersions } from 'compare-versions';
 import EventEmitter from './EventEmitter';
-import i18nDefaults from './i18n';
+import enTranslation from './translations/en';
 import { Formio } from './Formio';
 import Components from './components/Components';
 import NestedDataComponent from './components/_classes/nesteddata/NestedDataComponent';
-import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, convertStringToHTMLElement, getArrayFromComponentPath, } from './utils/utils';
-import { eachComponent } from './utils/formUtils';
+import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, convertStringToHTMLElement, getArrayFromComponentPath, eachComponent } from './utils';
+import dayjs from "dayjs";
 // We need this here because dragula pulls in CustomEvent class that requires global to exist.
 if (typeof window !== 'undefined' && typeof window.global === 'undefined') {
     window.global = window;
@@ -95,7 +94,7 @@ function getOptions(options) {
  * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
  * @property {boolean} [readOnly] - Set this form to readOnly.
  * @property {boolean} [noAlerts] - Disable the alerts dialog.
- * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.
+ * @property {{[key: string]: string}} [enTranslation] - The translation file for this rendering.
  * @property {string} [template] - Custom logic for creation of elements.
  * @property {boolean} [noDefaults] - Exclude default values from the settings.
  * @property {any} [fileService] - The file service for this form.
@@ -342,7 +341,7 @@ export default class Webform extends NestedDataComponent {
      */
     addLanguage(code, lang, active = false) {
         if (this.i18next) {
-            var translations = _.assign(fastCloneDeep(i18nDefaults.resources.en.translation), lang);
+            var translations = _.assign(fastCloneDeep(enTranslation), lang);
             this.i18next.addResourceBundle(code, 'translation', translations, true, true);
             if (active) {
                 this.language = code;
@@ -1122,7 +1121,7 @@ export default class Webform extends NestedDataComponent {
         // Mark any components as invalid if in a custom message.
         const componentErrors = {};
         errors.forEach((err) => {
-            const path = err.path || err.context?.path || err.component?.key;
+            const path = getStringFromComponentPath(err.path) || err.context?.path || err.component?.key;
             if (!componentErrors[path]) {
                 componentErrors[path] = [];
             }
@@ -1317,13 +1316,14 @@ export default class Webform extends NestedDataComponent {
         submission.metadata = submission.metadata || {};
         _.defaults(submission.metadata, {
             timezone: _.get(this, '_submission.metadata.timezone', currentTimezone()),
-            offset: parseInt(_.get(this, '_submission.metadata.offset', moment().utcOffset()), 10),
+            offset: parseInt(_.get(this, '_submission.metadata.offset', dayjs().utcOffset()), 10),
             origin: document.location.origin,
             referrer: document.referrer,
             browserName: navigator.appName,
             userAgent: navigator.userAgent,
             pathName: window.location.pathname,
             onLine: navigator.onLine,
+            language: this.language,
         });
     }
     submitForm(options = {}, local = false) {

package/lib/mjs/WebformBuilder.d.ts

@@ -78,7 +78,7 @@ export default class WebformBuilder extends Component {
     replaceDoubleQuotes(data: any, fieldsToRemoveDoubleQuotes?: any[]): any;
     updateComponent(component: any, changed: any): void;
     originalDefaultValue: any;
-    findRepeatablePaths(): any[];
+    findComponentsWithRepeatablePaths(): any[];
     highlightInvalidComponents(): void;
     /**
      * Called when a new component is saved.

package/lib/mjs/WebformBuilder.js

@@ -3,8 +3,7 @@ import Component from './components/_classes/component/Component';
 import tippy from 'tippy.js';
 import Components from './components/Components';
 import { Formio } from './Formio';
-import { fastCloneDeep, bootstrapVersion, getArrayFromComponentPath, getStringFromComponentPath } from './utils/utils';
-import { eachComponent, getComponent } from './utils/formUtils';
+import { fastCloneDeep, bootstrapVersion, getArrayFromComponentPath, getStringFromComponentPath, eachComponent, getComponent, componentInfo } from './utils';
 import BuilderUtils from './utils/builder';
 import _ from 'lodash';
 import autoScroll from 'dom-autoscroller';
@@ -1109,28 +1108,52 @@ export default class WebformBuilder extends Component {
         // Called when we update a component.
         this.emit('updateComponent', component);
     }
-    findRepeatablePaths() {
-        const repeatablePaths = [];
+    findComponentsWithRepeatablePaths() {
+        const repeatablePaths = {};
         const keys = new Map();
         eachComponent(this.form.components, (comp, path, components, parent, paths) => {
-            if (keys.has(paths.dataPath)) {
-                repeatablePaths.push(paths.dataPath);
-            }
-            else {
-                keys.set(paths.dataPath, true);
+            const isRadioCheckbox = comp.type === 'checkbox' && comp.inputType === 'radio';
+            const isLayout = componentInfo(comp).layout;
+            if (!isLayout) {
+                if (keys.has(paths.dataPath)) {
+                    const onlyRadioCheckboxes = repeatablePaths[paths.dataPath]?.onlyRadioCheckboxes === false ? false : isRadioCheckbox;
+                    repeatablePaths[paths.dataPath] = {
+                        comps: [...(repeatablePaths[paths.dataPath]?.comps || []), keys.get(paths.dataPath), comp],
+                        onlyRadioCheckboxes,
+                    };
+                }
+                else {
+                    keys.set(paths.dataPath, comp);
+                }
             }
         }, true);
-        return repeatablePaths;
+        const componentsWithRepeatablePaths = [];
+        Object.keys(repeatablePaths).forEach((path) => {
+            const { comps, onlyRadioCheckboxes } = repeatablePaths[path];
+            if (!onlyRadioCheckboxes) {
+                componentsWithRepeatablePaths.push(...comps);
+            }
+        });
+        return componentsWithRepeatablePaths;
     }
     highlightInvalidComponents() {
-        const repeatablePaths = this.findRepeatablePaths();
+        const repeatablePathsComps = this.findComponentsWithRepeatablePaths();
         let hasInvalidComponents = false;
+        // Matches anything expect letters and  '_' at the beginning of the key and anything except of letters, numbers,
+        // '-', '.' and '_' in the rest of the key
+        const badCharacters = /^[^A-Za-z_]+|[^A-Za-z0-9\-._]+/g;
         this.webform.everyComponent((comp) => {
-            const path = comp.path;
-            if (repeatablePaths.includes(path)) {
+            if (repeatablePathsComps.includes(comp.component)) {
                 comp.setCustomValidity(this.t('apiKey', { key: comp.key }));
                 hasInvalidComponents = true;
             }
+            else if (comp.key.replace(badCharacters, '') === '') {
+                comp.setCustomValidity(this.t('apiKeyNotValid', { key: comp.key }));
+                hasInvalidComponents = true;
+            }
+            else {
+                comp.setCustomValidity();
+            }
         });
         this.emit('builderFormValidityChange', hasInvalidComponents);
     }

package/lib/mjs/Wizard.d.ts

@@ -6,7 +6,6 @@ declare class Wizard extends Webform {
     originalComponents: any[];
     page: number;
     currentPanel: any;
-    currentPanels: any[] | null;
     currentNextPage: number;
     _seenPages: number[];
     subWizards: any[];
@@ -17,7 +16,7 @@ declare class Wizard extends Webform {
     originalOptions: any;
     isLastPage(): any;
     getPages(args?: {}): any[];
-    get hasExtraPages(): boolean;
+    get hasSubWizards(): boolean;
     get localData(): any;
     get wizardKey(): string;
     set wizard(form: object);

package/lib/mjs/Wizard.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import Webform from './Webform';
 import { Formio } from './Formio';
-import { fastCloneDeep, checkCondition, firstNonNil, uniqueKey, eachComponent, } from './utils/utils';
+import { fastCloneDeep, checkCondition, firstNonNil, uniqueKey, eachComponent, } from './utils';
 export default class Wizard extends Webform {
     /**
      * Constructor for wizard-based forms.
@@ -29,7 +29,6 @@ export default class Wizard extends Webform {
         this.originalComponents = [];
         this.page = 0;
         this.currentPanel = null;
-        this.currentPanels = null;
         this.currentNextPage = 0;
         this._seenPages = [0];
         this.subWizards = [];
@@ -48,12 +47,12 @@ export default class Wizard extends Webform {
     }
     getPages(args = {}) {
         const { all = false } = args;
-        const pages = this.hasExtraPages ? this.components : this.pages;
+        const pages = this.hasSubWizards ? this.components : this.pages;
         const filteredPages = pages
             .filter(all ? _.identity : (p, index) => this._seenPages.includes(index));
         return filteredPages;
     }
-    get hasExtraPages() {
+    get hasSubWizards() {
         return !_.isEmpty(this.subWizards);
     }
     get data() {
@@ -177,9 +176,9 @@ export default class Wizard extends Webform {
     }
     render() {
         const ctx = this.renderContext;
-        if (this.component.key) {
-            ctx.panels.map(panel => {
-                if (panel.key === this.component.key) {
+        if (this.component.id) {
+            ctx.panels.forEach(panel => {
+                if (panel.id === this.component.id) {
                     this.currentPanel = panel;
                     ctx.wizardPageTooltip = this.getFormattedTooltip(panel.tooltip);
                 }
@@ -580,7 +579,7 @@ export default class Wizard extends Webform {
             this.pageFieldLogic(num);
             this.getNextPage();
             let parentNum = num;
-            if (this.hasExtraPages) {
+            if (this.hasSubWizards) {
                 const pageFromPages = this.pages[num];
                 const pageFromComponents = this.components[num];
                 if (!pageFromComponents || pageFromPages?.id !== pageFromComponents.id) {
@@ -869,23 +868,18 @@ export default class Wizard extends Webform {
             this.showErrors(errors, true, true);
         }
         // If the pages change, need to redraw the header.
-        let currentPanels;
-        let panels;
+        const currentPanels = this.pages;
+        // calling this.establishPages() updates/mutates this.pages to be the current pages
+        this.establishPages();
+        const newPanels = this.pages;
         const currentNextPage = this.currentNextPage;
-        if (this.hasExtraPages) {
-            currentPanels = this.pages.map(page => page.component.key);
-            this.establishPages();
-            panels = this.pages.map(page => page.component.key);
-        }
-        else {
-            currentPanels = this.currentPanels || this.pages.map(page => page.component.key);
-            panels = this.establishPages().map(panel => panel.key);
-            this.currentPanels = panels;
-            if (this.currentPanel?.key && this.currentPanels?.length) {
-                this.setPage(this.currentPanels.findIndex(panel => panel === this.currentPanel.key));
-            }
+        const panelsUpdated = !_.isEqual(newPanels, currentPanels);
+        if (this.currentPanel?.id && this.pages.length && (!this.hasSubWizards || (this.hasSubWizards && panelsUpdated))) {
+            const newIndex = this.pages.findIndex(page => page.id === this.currentPanel.id);
+            if (newIndex !== -1)
+                this.setPage(newIndex);
         }
-        if (!_.isEqual(panels, currentPanels) || (flags && flags.fromSubmission)) {
+        if (panelsUpdated || (flags && flags.fromSubmission)) {
             this.redrawHeader();
         }
         // If the next page changes, then make sure to redraw navigation.

package/lib/mjs/WizardBuilder.js

@@ -2,7 +2,7 @@ import WebformBuilder from './WebformBuilder';
 import Webform from './Webform';
 import BuilderUtils from './utils/builder';
 import _ from 'lodash';
-import { fastCloneDeep } from './utils/utils';
+import { fastCloneDeep } from './utils';
 export default class WizardBuilder extends WebformBuilder {
     constructor() {
         let element, options;

package/lib/mjs/components/Components.js

@@ -54,7 +54,7 @@ export default class Components {
             // eslint-disable-next-line new-cap
             comp = new Components.components['datagrid'](component, options, data);
         }
-        else if (component.tree) {
+        else if (component.tree || (component.input && Array.isArray(component.components))) {
             // eslint-disable-next-line new-cap
             comp = new Components.components['nesteddata'](component, options, data);
         }
@@ -72,6 +72,12 @@ export default class Components {
         if (comp.path) {
             comp.componentsMap[comp.path] = comp;
         }
+        // Reset the componentMatches on the root element if any new component is created.
+        let parent = comp.parent;
+        while (parent) {
+            parent.componentMatches = {};
+            parent = parent.parent;
+        }
         return comp;
     }
 }

package/lib/mjs/components/_classes/component/Component.d.ts

@@ -165,7 +165,6 @@ declare class Component extends Element {
     get componentsMap(): object;
     /**
      * Returns if the parent should conditionally clear.
-     *
      * @returns {boolean} - If the parent should conditionally clear.
      */
     parentShouldConditionallyClear(): boolean;

package/lib/mjs/components/_classes/component/Component.js

@@ -5,8 +5,8 @@ import _ from 'lodash';
 import isMobile from 'ismobilejs';
 import { processOne, processOneSync, validateProcessInfo } from '@formio/core/process';
 import { Formio } from '../../../Formio';
-import * as FormioUtils from '../../../utils/utils';
-import { fastCloneDeep, boolValue, currentTimezone, getScriptPlugin, getContextualRowData } from '../../../utils/utils';
+import FormioUtils from '../../../utils';
+import { fastCloneDeep, boolValue, currentTimezone, getScriptPlugin, getContextualRowData } from '../../../utils';
 import Element from '../../../Element';
 import ComponentModal from '../componentModal/ComponentModal';
 import Widgets from '../../../widgets';
@@ -424,7 +424,6 @@ export default class Component extends Element {
     }
     /**
      * Returns if the parent should conditionally clear.
-     *
      * @returns {boolean} - If the parent should conditionally clear.
      */
     parentShouldConditionallyClear() {
@@ -1161,9 +1160,15 @@ export default class Component extends Element {
         if (this.hasInput && this.component.validate?.required && !this.isPDFReadOnlyMode) {
             modalLabel = { className: 'field-required' };
         }
+        let messages = '';
+        if (this.errors?.length) {
+            messages = this.errors.map((err) => {
+                return err.level === 'error' ? this.renderTemplate('message', { ...err }) : '';
+            }).join('');
+        }
         return this.renderModalPreview({
             previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('clickToSetValue'),
-            messages: '',
+            messages,
             labelInfo: modalLabel,
         });
     }
@@ -2365,12 +2370,14 @@ export default class Component extends Element {
             ckeditor: {
                 image: {
                     toolbar: [
+                        'toggleImageCaption',
                         'imageTextAlternative',
                         '|',
-                        'imageStyle:full',
-                        'imageStyle:alignLeft',
-                        'imageStyle:alignCenter',
-                        'imageStyle:alignRight'
+                        'imageStyle:inline',
+                        'imageStyle:wrapText',
+                        'imageStyle:breakText',
+                        '|',
+                        'resizeImage'
                     ],
                     styles: [
                         'full',
@@ -2392,7 +2399,10 @@ export default class Component extends Element {
         if (this.component.isUploadEnabled) {
             settings.extraPlugins.push(getFormioUploadAdapterPlugin(this.fileService, this));
         }
-        return Formio.requireLibrary('ckeditor', isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', _.get(this.options, 'editors.ckeditor.src', `${Formio.cdn.ckeditor}/ckeditor.js`), true)
+        Formio.requireLibrary(`ckeditor-css`, isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', [
+            { type: 'styles', src: `${Formio.cdn.ckeditor}/ckeditor.css` }
+        ], true);
+        return Formio.requireLibrary('ckeditor', isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', _.get(this.options, 'editors.ckeditor.src', `${Formio.cdn.ckeditor}/ckeditor.umd.js`), true)
             .then(() => {
             if (!element.parentNode) {
                 return Promise.reject();
@@ -2578,6 +2588,17 @@ export default class Component extends Element {
             noUpdateEvent: true,
             noDefault: true
         });
+        if (FormioUtils.isLayoutComponent(this.component) && this.component.clearOnHide === true && !this.hasValue()) {
+            FormioUtils.eachComponent(this.components, (component) => {
+                if (component.component.clearOnHide !== false) {
+                    component.setValue(null, {
+                        noUpdateEvent: true,
+                        noDefault: true
+                    });
+                    component.unset();
+                }
+            });
+        }
         this.unset();
     }
     getCustomDefaultValue(defaultValue) {
@@ -2683,13 +2704,16 @@ export default class Component extends Element {
         }
         const isArray = Array.isArray(value);
         const valueInput = this.refs.fileLink || this.refs.input;
+        const isFilelink = !!this.refs.fileLink;
         if (isArray &&
             Array.isArray(this.defaultValue) &&
             this.refs.hasOwnProperty('input') &&
             valueInput &&
             (valueInput.length !== value.length) &&
             this.visible) {
-            this.redraw();
+            if (isFilelink || valueInput.length) {
+                this.redraw();
+            }
         }
         if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {
             this.redraw();
@@ -2700,6 +2724,11 @@ export default class Component extends Element {
                 this.setValueAt(i, isArray && !this.isSingleInputValue() ? value[i] : value, flags);
             }
         }
+        // Also reset value of the modal component, otherwise it will keep the old value locally and the preview
+        // element won't refresh
+        if (this.componentModal && flags && flags.resetValue) {
+            this.componentModal.setValue(value);
+        }
         return changed;
     }
     /**
@@ -3196,6 +3225,9 @@ export default class Component extends Element {
         data = data || this.rootValue;
         flags = flags || {};
         row = row || this.data;
+        if (flags.noCheck) {
+            return true;
+        }
         // Some components (for legacy reasons) have calls to "checkData" in inappropriate places such
         // as setValue. Historically, this was bypassed by a series of cached states around the data model
         // which caused its own problems. We need to ensure that premium and custom components do not fall into
@@ -3210,9 +3242,6 @@ export default class Component extends Element {
         if (!flags.fromBlur) {
             this.checkRefreshOn(flags.changes, flags);
         }
-        if (flags.noCheck) {
-            return true;
-        }
         this.checkComponentConditions(data, flags, row);
         if (this.id !== flags.triggeredComponentId) {
             this.calculateComponentValue(data, flags, row);

package/lib/mjs/components/_classes/component/editForm/Component.edit.conditional.js

@@ -1,5 +1,5 @@
 import EditFormUtils from './utils';
-import { getContextComponents } from '../../../../utils/utils';
+import { getContextComponents } from '../../../../utils';
 /* eslint-disable quotes, max-len */
 export default [
     {

package/lib/mjs/components/_classes/component/editForm/Component.edit.data.d.ts

@@ -82,6 +82,7 @@ declare const _default: ({
     inline?: undefined;
     defaultValue?: undefined;
     values?: undefined;
+    customConditional?: undefined;
     logic?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;
@@ -101,6 +102,7 @@ declare const _default: ({
     inline?: undefined;
     defaultValue?: undefined;
     values?: undefined;
+    customConditional?: undefined;
     logic?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;
@@ -126,6 +128,7 @@ declare const _default: ({
         value: string;
     })[];
     placeholder?: undefined;
+    customConditional?: undefined;
     logic?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;
@@ -141,6 +144,7 @@ declare const _default: ({
     tooltip: string;
     key: string;
     input: boolean;
+    customConditional: string;
     logic: ({
         name: string;
         trigger: {
@@ -211,6 +215,7 @@ declare const _default: ({
     inline?: undefined;
     defaultValue?: undefined;
     values?: undefined;
+    customConditional?: undefined;
     logic?: undefined;
     as?: undefined;
     editor?: undefined;
@@ -226,6 +231,7 @@ declare const _default: ({
     placeholder?: undefined;
     inline?: undefined;
     values?: undefined;
+    customConditional?: undefined;
     logic?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;
@@ -248,6 +254,7 @@ declare const _default: ({
     placeholder?: undefined;
     inline?: undefined;
     values?: undefined;
+    customConditional?: undefined;
     logic?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;

package/lib/mjs/components/_classes/component/editForm/Component.edit.data.js

@@ -56,6 +56,7 @@ export default [
         tooltip: 'Encrypt this field on the server. This is two way encryption which is not suitable for passwords.',
         key: 'encrypted',
         input: true,
+        customConditional: 'show = data.encrypted;',
         logic: [
             {
                 name: 'disabled',

package/lib/mjs/components/_classes/component/editForm/Component.edit.logic.js

@@ -1,5 +1,5 @@
 import EditFormUtils from './utils';
-import { getContextComponents } from '../../../../utils/utils';
+import { getContextComponents } from '../../../../utils';
 /* eslint-disable quotes, max-len */
 export default [
     {

package/lib/mjs/components/_classes/componentModal/ComponentModal.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { fastCloneDeep } from '../../../utils/utils';
+import { fastCloneDeep } from '../../../utils';
 export default class ComponentModal {
     static render(component, data, topLevel) {
         const children = component.renderTemplate('component', data, topLevel);

package/lib/mjs/components/_classes/input/Input.d.ts

@@ -25,7 +25,7 @@ export default class Input extends Multivalue {
     get suffix(): any;
     renderElement(value: any, index: any): any;
     setCounter(type: any, element: any, count: any, max: any): void;
-    updateValueAt(value: any, flags: any, index: any): void;
+    updateValueAt(value: any, flags: any, index?: number): void;
     getValueAt(index: any): any;
     updateValue(value: any, flags: any, index: any): boolean;
     parseValue(value: any): any;

package/lib/mjs/components/_classes/input/Input.js

@@ -1,5 +1,5 @@
 import Multivalue from '../multivalue/Multivalue';
-import { convertStringToHTMLElement } from '../../../utils/utils';
+import { convertStringToHTMLElement } from '../../../utils';
 import Widgets from '../../../widgets';
 import _ from 'lodash';
 export default class Input extends Multivalue {
@@ -113,7 +113,7 @@ export default class Input extends Multivalue {
         }
         const info = this.inputInfo;
         info.attr = info.attr || {};
-        info.attr.value = this.getValueAsString(this.formatValue(this.parseValue(value)))
+        info.attr.value = this.getValueAsString(this.formatValue(this.parseValue(this.isMultipleMasksField ? value.value : value)))
             .replace(/"/g, '"');
         const valueMask = this.component.inputMask;
         const displayMask = this.component.displayMask;
@@ -158,7 +158,7 @@ export default class Input extends Multivalue {
             }));
         }
     }
-    updateValueAt(value, flags, index) {
+    updateValueAt(value, flags, index = 0) {
         flags = flags || {};
         if (_.get(this.component, 'showWordCount', false)) {
             if (this.refs.wordcount && this.refs.wordcount[index]) {

package/lib/mjs/components/_classes/list/ListComponent.js

@@ -1,7 +1,7 @@
 import Field from '../field/Field';
 import { Formio } from '../../../Formio';
 import _ from 'lodash';
-import { getItemTemplateKeys } from '../../../utils/utils';
+import { getItemTemplateKeys } from '../../../utils';
 export default class ListComponent extends Field {
     static schema(...extend) {
         return Field.schema({

package/lib/mjs/components/_classes/nested/NestedComponent.d.ts

@@ -108,6 +108,7 @@ export default class NestedComponent extends Field {
      * @returns {any} - The component that is located.
      */
     getComponent(path: string): any;
+    componentMatches: {} | undefined;
     /**
      * Return a component provided the Id of the component.
      * @param {string} id - The Id of the component.