@formio/js 5.1.0-dev.6159.811e953 → 5.1.0-dev.6166.dce1c56

package/lib/cjs/Element.d.ts

@@ -170,10 +170,11 @@ export default class Element {
     /**
      * Translate a text using the i18n system.
      * @param {string|Array<string>} text - The i18n identifier.
+     * @param {any} data - contextual data object containing data, component, row, etc.
      * @param {...any} args - The arguments to pass to the i18n translation.
      * @returns {string} - The translated text.
      */
-    t(text: string | Array<string>, ...args: any[]): string;
+    t(text: string | Array<string>, data: any, ...args: any[]): string;
     /**
      * Alias to create a text node.
      * @param {string} text - The text to create.

package/lib/cjs/Element.js

@@ -8,8 +8,9 @@ const moment_1 = __importDefault(require("moment"));
 const vanilla_text_mask_1 = __importDefault(require("@formio/vanilla-text-mask"));
 const EventEmitter_1 = __importDefault(require("./EventEmitter"));
 const Formio_1 = require("./Formio");
-const i18n_1 = require("./utils/i18n");
 const utils_1 = __importDefault(require("./utils"));
+const core_1 = require("@formio/core");
+const en_1 = __importDefault(require("./translations/en"));
 /**
  * The root component for all elements within the Form.io renderer.
  */
@@ -44,7 +45,7 @@ class Element {
         if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.language) {
             this.options.i18n.language = this.options.language;
         }
-        this.options.i18next = this.i18next = this.options.i18next || i18n_1.I18n.init(this.options.i18n);
+        this.options.i18next = this.i18next = this.options.i18next || core_1.I18n.init(Object.assign({ en: en_1.default }, this.options.i18n));
         /**
          * An instance of the EventEmitter class to handle the emitting and registration of events.
          * @type {EventEmitter}
@@ -392,11 +393,12 @@ class Element {
     /**
      * Translate a text using the i18n system.
      * @param {string|Array<string>} text - The i18n identifier.
+     * @param {any} data - contextual data object containing data, component, row, etc.
      * @param {...any} args - The arguments to pass to the i18n translation.
      * @returns {string} - The translated text.
      */
-    t(text, ...args) {
-        return this.i18next ? this.i18next.t(text, ...args) : text;
+    t(text, data, ...args) {
+        return this.i18next ? this.i18next.t(text, data, ...args) : text;
     }
     /**
      * Alias to create a text node.

package/lib/cjs/PDFBuilder.d.ts

@@ -51,5 +51,6 @@ export default class PDFBuilder extends WebformBuilder {
     onDropzoneDrop(e: any): boolean;
     dropEvent: any;
     onDragEnd(e: any): void;
+    repeatablePathsComps: any[] | undefined;
 }
 import WebformBuilder from './WebformBuilder';

package/lib/cjs/PDFBuilder.js

@@ -451,21 +451,21 @@ class PDFBuilder extends WebformBuilder_1.default {
         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 (!lodash_1.default.isEqual(this.repeatablePaths, repeatablePaths)) {
-            (0, utils_1.eachComponent)(this.webform.getComponents(), (comp, path) => {
-                if (this.repeatablePaths.includes(path)) {
+        if (!lodash_1.default.isEqual(this.repeatablePathsComps, repeatablePathsComps)) {
+            (0, utils_1.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;
         }
-        (0, utils_1.eachComponent)(this.webform.getComponents(), (comp, path) => {
-            if (this.repeatablePaths.includes(path)) {
+        (0, utils_1.eachComponent)(this.webform.getComponents(), (comp) => {
+            if (this.repeatablePathsComps.includes(comp)) {
                 this.webform.postMessage({
                     name: 'showBuilderErrors',
                     data: {

package/lib/cjs/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/cjs/Webform.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const compare_versions_1 = require("compare-versions");
 const EventEmitter_1 = __importDefault(require("./EventEmitter"));
-const i18n_1 = __importDefault(require("./i18n"));
+const en_1 = __importDefault(require("./translations/en"));
 const Formio_1 = require("./Formio");
 const Components_1 = __importDefault(require("./components/Components"));
 const NestedDataComponent_1 = __importDefault(require("./components/_classes/nesteddata/NestedDataComponent"));
@@ -99,7 +99,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.
@@ -369,7 +369,7 @@ class Webform extends NestedDataComponent_1.default {
      */
     addLanguage(code, lang, active = false) {
         if (this.i18next) {
-            var translations = lodash_1.default.assign((0, utils_1.fastCloneDeep)(i18n_1.default.resources.en.translation), lang);
+            var translations = lodash_1.default.assign((0, utils_1.fastCloneDeep)(en_1.default), lang);
             this.i18next.addResourceBundle(code, 'translation', translations, true, true);
             if (active) {
                 this.language = code;
@@ -1320,6 +1320,7 @@ class Webform extends NestedDataComponent_1.default {
             userAgent: navigator.userAgent,
             pathName: window.location.pathname,
             onLine: navigator.onLine,
+            language: this.language,
         });
     }
     submitForm(options = {}, local = false) {

package/lib/cjs/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/cjs/WebformBuilder.js

@@ -1125,31 +1125,43 @@ class WebformBuilder extends Component_1.default {
         // Called when we update a component.
         this.emit('updateComponent', component);
     }
-    findRepeatablePaths() {
-        const repeatablePaths = [];
+    findComponentsWithRepeatablePaths() {
+        const repeatablePaths = {};
         const keys = new Map();
         (0, utils_1.eachComponent)(this.form.components, (comp, path, components, parent, paths) => {
+            var _a, _b;
+            const isRadioCheckbox = comp.type === 'checkbox' && comp.inputType === 'radio';
             const isLayout = (0, utils_1.componentInfo)(comp).layout;
             if (!isLayout) {
                 if (keys.has(paths.dataPath)) {
-                    repeatablePaths.push(paths.dataPath);
+                    const onlyRadioCheckboxes = ((_a = repeatablePaths[paths.dataPath]) === null || _a === void 0 ? void 0 : _a.onlyRadioCheckboxes) === false ? false : isRadioCheckbox;
+                    repeatablePaths[paths.dataPath] = {
+                        comps: [...(((_b = repeatablePaths[paths.dataPath]) === null || _b === void 0 ? void 0 : _b.comps) || []), keys.get(paths.dataPath), comp],
+                        onlyRadioCheckboxes,
+                    };
                 }
                 else {
-                    keys.set(paths.dataPath, true);
+                    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;
             }

package/lib/cjs/components/Components.js

@@ -57,7 +57,7 @@ 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);
         }
@@ -75,6 +75,12 @@ 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/cjs/components/_classes/component/Component.js

@@ -2375,12 +2375,14 @@ class Component extends Element_1.default {
             ckeditor: {
                 image: {
                     toolbar: [
+                        'toggleImageCaption',
                         'imageTextAlternative',
                         '|',
-                        'imageStyle:full',
-                        'imageStyle:alignLeft',
-                        'imageStyle:alignCenter',
-                        'imageStyle:alignRight'
+                        'imageStyle:inline',
+                        'imageStyle:wrapText',
+                        'imageStyle:breakText',
+                        '|',
+                        'resizeImage'
                     ],
                     styles: [
                         'full',
@@ -2402,7 +2404,10 @@ class Component extends Element_1.default {
         if (this.component.isUploadEnabled) {
             settings.extraPlugins.push((0, uploadAdapter_1.getFormioUploadAdapterPlugin)(this.fileService, this));
         }
-        return Formio_1.Formio.requireLibrary('ckeditor', isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', lodash_1.default.get(this.options, 'editors.ckeditor.src', `${Formio_1.Formio.cdn.ckeditor}/ckeditor.js`), true)
+        Formio_1.Formio.requireLibrary(`ckeditor-css`, isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', [
+            { type: 'styles', src: `${Formio_1.Formio.cdn.ckeditor}/ckeditor.css` }
+        ], true);
+        return Formio_1.Formio.requireLibrary('ckeditor', isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', lodash_1.default.get(this.options, 'editors.ckeditor.src', `${Formio_1.Formio.cdn.ckeditor}/ckeditor.umd.js`), true)
             .then(() => {
             if (!element.parentNode) {
                 return Promise.reject();
@@ -2710,6 +2715,11 @@ class Component extends Element_1.default {
                 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;
     }
     /**

package/lib/cjs/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/cjs/components/_classes/input/Input.js

@@ -118,7 +118,7 @@ class Input extends Multivalue_1.default {
         }
         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;
@@ -163,7 +163,7 @@ class Input extends Multivalue_1.default {
             }));
         }
     }
-    updateValueAt(value, flags, index) {
+    updateValueAt(value, flags, index = 0) {
         flags = flags || {};
         if (lodash_1.default.get(this.component, 'showWordCount', false)) {
             if (this.refs.wordcount && this.refs.wordcount[index]) {

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

package/lib/cjs/components/_classes/nested/NestedComponent.js

@@ -311,6 +311,13 @@ class NestedComponent extends Field_1.default {
      */
     getComponent(path) {
         var _a;
+        // If the component is found
+        if (!this.componentMatches) {
+            this.componentMatches = {};
+        }
+        if (this.componentMatches && this.componentMatches[path]) {
+            return this.componentMatches[path];
+        }
         path = utils_1.default.getStringFromComponentPath(path);
         const matches = {
             path: undefined,
@@ -336,7 +343,8 @@ class NestedComponent extends Field_1.default {
                 return match;
             });
         });
-        return (_a = utils_1.default.getBestMatch(matches)) === null || _a === void 0 ? void 0 : _a.instance;
+        this.componentMatches[path] = (_a = utils_1.default.getBestMatch(matches)) === null || _a === void 0 ? void 0 : _a.instance;
+        return this.componentMatches[path];
     }
     /**
      * Return a component provided the Id of the component.
@@ -800,8 +808,10 @@ class NestedComponent extends Field_1.default {
         return this.data;
     }
     resetValue() {
-        super.resetValue();
+        // Reset values of child components first, then reset the parent one, otherwise it will restore the default
+        // value of parent component and clear it one by one while resetting child components
         this.getComponents().forEach((comp) => comp.resetValue());
+        super.resetValue();
         this.setPristine(true);
     }
     get dataReady() {
@@ -813,7 +823,7 @@ class NestedComponent extends Field_1.default {
             return false;
         }
         if (component.type === 'components') {
-            if (component.tree && component.hasValue(value)) {
+            if ((component.tree || component.hasInput) && component.hasValue(value)) {
                 return component.setValue(lodash_1.default.get(value, component.key), flags);
             }
             return component.setValue(value, flags);

package/lib/cjs/components/address/Address.js

@@ -249,7 +249,7 @@ class AddressComponent extends Container_1.default {
         if (this.manualMode) {
             this.restoreComponentsContext();
         }
-        if (changed || !lodash_1.default.isEmpty(value) && flags.fromSubmission) {
+        if (changed || !lodash_1.default.isEmpty(value) && flags.fromSubmission || flags.resetValue) {
             this.redraw();
         }
         return changed;

package/lib/cjs/components/datamap/DataMap.js

@@ -228,6 +228,9 @@ class DataMapComponent extends DataGrid_1.default {
         options.name += `[${rowIndex}]`;
         options.row = `${rowIndex}`;
         options.rowIndex = rowIndex;
+        options.onChange = (flags, changed, modified) => {
+            this.triggerChange({ modified });
+        };
         const components = {};
         components['__key'] = this.createComponent(this.keySchema, options, { __key: this.builderMode ? this.defaultRowKey : key });
         components['__key'].on('componentChange', (event) => {
@@ -243,7 +246,9 @@ class DataMapComponent extends DataGrid_1.default {
         valueComponent.key = key;
         const componentOptions = this.options;
         componentOptions.row = options.row;
-        components[this.valueKey] = this.createComponent(valueComponent, componentOptions, this.dataValue);
+        const componentOptionsCloned = lodash_1.default.clone(componentOptions);
+        componentOptionsCloned.onChange = options.onChange;
+        components[this.valueKey] = this.createComponent(valueComponent, componentOptionsCloned, this.dataValue);
         return components;
     }
     get canAddColumn() {
@@ -266,7 +271,7 @@ class DataMapComponent extends DataGrid_1.default {
         const index = this.rows.length;
         this.rows[index] = this.createRowComponents(this.dataValue, index);
         this.redraw();
-        this.triggerChange();
+        this.triggerChange({ modified: true });
     }
     removeRow(index) {
         const keys = Object.keys(this.dataValue);

package/lib/cjs/components/editgrid/EditGrid.d.ts

@@ -101,7 +101,6 @@ export default class EditGridComponent extends NestedArrayComponent {
     changeState(changed: any, flags: any): void;
     openWhenEmpty(): void;
     restoreRowContext(editRow: any, flags?: {}): void;
-    emptyRows(): void;
     hasChanged: (newValue: any, oldValue: any) => boolean;
 }
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';

package/lib/cjs/components/editgrid/EditGrid.js

@@ -1200,14 +1200,6 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             this.setNestedValue(component, editRow.data, flags);
         });
     }
-    emptyRows() {
-        this.editRows.forEach((editRow, index) => this.destroyComponents(false, index));
-        this.editRows = [];
-    }
-    resetValue() {
-        super.resetValue();
-        this.emptyRows();
-    }
 }
 exports.default = EditGridComponent;
 EditGridComponent.prototype.hasChanged = Component_1.default.prototype.hasChanged;

package/lib/cjs/components/radio/Radio.d.ts

@@ -16,6 +16,7 @@ export default class RadioComponent extends ListComponent {
     static savedValueTypes(schema: any): any[];
     constructor(component: any, options: any, data: any);
     previousValue: any;
+    uncheckValue(flags?: {}): void;
     get inputInfo(): any;
     get emptyValue(): string;
     get isRadio(): boolean;

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

@@ -79,13 +79,15 @@ class RadioComponent extends ListComponent_1.default {
         }
         return defaultValue;
     }
-    resetValue() {
+    uncheckValue(flags = {}) {
         this.unset();
         this.setValue(this.emptyValue, {
             noUpdateEvent: true,
             noValidate: true,
             resetValue: true
         });
+        this.triggerChange(flags);
+        this.setSelectedClasses();
     }
     get inputInfo() {
         var _a;
@@ -400,9 +402,7 @@ class RadioComponent extends ListComponent_1.default {
         this.currentValue = this.dataValue;
         const shouldResetValue = flags && flags.modified && !flags.noUpdateEvent && this.previousValue === this.currentValue;
         if (shouldResetValue) {
-            this.resetValue();
-            this.triggerChange(flags);
-            this.setSelectedClasses();
+            this.uncheckValue(flags);
         }
         this.previousValue = this.dataValue;
         return changed;

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

@@ -1232,7 +1232,7 @@ class SelectComponent extends ListComponent_1.default {
             }
             lodash_1.default.set(submission.metadata.selectData, this.path, templateData);
         }
-        if (flags.resetValue && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submission) && !this.options.readOnly) {
+        if (flags.resetValue && !flags.fromSubmission && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submission) && !this.options.readOnly) {
             const submission = this.root.submission;
             if (!submission.metadata) {
                 submission.metadata = {};

package/lib/cjs/components/textarea/TextArea.js

@@ -193,7 +193,12 @@ class TextAreaComponent extends TextField_1.default {
                                 const editorHeight = (numRows * 31) + 14;
                                 editor.ui.view.editable.editableElement.style.height = `${(editorHeight)}px`;
                             }
-                            editor.isReadOnly = isReadOnly;
+                            if (isReadOnly) {
+                                editor.enableReadOnlyMode(this.id);
+                            }
+                            else {
+                                editor.disableReadOnlyMode(this.id);
+                            }
                             editor.data.set(value);
                         }
                         editorReady(editor);

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

@@ -107,7 +107,12 @@ class TextFieldComponent extends Input_1.default {
         // If no value is provided, then set the defaultValue.
         if (!value.value) {
             const defaultValue = flags.noDefault ? this.emptyValue : this.defaultValue;
-            value.value = Array.isArray(defaultValue) ? defaultValue[0] : defaultValue;
+            if (Array.isArray(defaultValue)) {
+                value.value = lodash_1.default.isObject(defaultValue[0]) ? defaultValue[0].value : defaultValue;
+            }
+            else {
+                value.value = lodash_1.default.isObject(defaultValue) ? defaultValue.value : defaultValue;
+            }
         }
         return value;
     }

package/lib/cjs/formio.form.js

@@ -28,7 +28,7 @@ const EventEmitter_1 = __importDefault(require("./EventEmitter"));
 exports.EventEmitter = EventEmitter_1.default;
 const Webform_1 = __importDefault(require("./Webform"));
 exports.Webform = Webform_1.default;
-const i18n_1 = require("./utils/i18n");
+const core_1 = require("@formio/core");
 const utils_2 = require("./utils");
 Formio_1.Formio.loadModules = (path = `${Formio_1.Formio.getApiUrl()}/externalModules.js`, name = 'externalModules') => {
     Formio_1.Formio.requireLibrary(name, name, path, true)
@@ -103,7 +103,7 @@ function registerModule(mod, defaultFn = null, options = {}) {
                 (0, utils_2.registerEvaluator)(mod.evaluator);
                 break;
             case 'translations':
-                i18n_1.I18n.setDefaultTranslations(mod.translations);
+                core_1.I18n.setDefaultTranslations(mod.translations);
                 break;
             case 'library':
                 options.license