@formio/js 5.4.0 → 5.4.2

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

@@ -170,12 +170,7 @@ export default class Component extends Element {
      */
     static get conditionOperatorsSettings() {
         return {
-            operators: [
-                'isEqual',
-                'isNotEqual',
-                'isEmpty',
-                'isNotEmpty',
-            ],
+            operators: ['isEqual', 'isNotEqual', 'isEmpty', 'isNotEmpty'],
             valueComponent() {
                 return {
                     type: 'textfield',
@@ -193,9 +188,7 @@ export default class Component extends Element {
      */
     static savedValueTypes(schema) {
         schema = schema || {};
-        return (FormioUtils.getComponentSavedTypes(schema) || [
-            FormioUtils.componentValueTypes.any,
-        ]);
+        return FormioUtils.getComponentSavedTypes(schema) || [FormioUtils.componentValueTypes.any];
     }
     /**
      * Provides a table view for this component. Override if you wish to do something different than using getView
@@ -463,7 +456,9 @@ export default class Component extends Element {
     hasCondionallyHiddenLayoutParent() {
         let currentParent = this.parent;
         while (currentParent) {
-            if (currentParent._conditionallyHidden && FormioUtils.isLayoutComponent(currentParent) && currentParent.component.clearOnHide === true) {
+            if (currentParent._conditionallyHidden &&
+                FormioUtils.isLayoutComponent(currentParent) &&
+                currentParent.component.clearOnHide === true) {
                 return true;
             }
             currentParent = currentParent.parent;
@@ -587,7 +582,10 @@ export default class Component extends Element {
                 this.addons.push(addon);
             }
             else {
-                console.warn(`Addon ${name.label} does not support component of type ${this.component.type}.`);
+                console.warn(this.t('addonSupportTypeError', {
+                    type: this.component.type,
+                    label: name.label,
+                }));
             }
         }
         return addon;
@@ -641,7 +639,7 @@ export default class Component extends Element {
         return this.paths.dataPath;
     }
     set path(path) {
-        throw new Error('Should not be setting the path of a component.');
+        throw new Error(this.t('setPathError'));
     }
     set parentVisible(value) {
         this._parentVisible = value;
@@ -745,7 +743,9 @@ export default class Component extends Element {
             this._conditionallyClear = true;
             return this._conditionallyClear;
         }
-        this._conditionallyClear = this.hasSetValue ? this.hasCondionallyHiddenLayoutParent() : this.parentShouldConditionallyClear();
+        this._conditionallyClear = this.hasSetValue
+            ? this.hasCondionallyHiddenLayoutParent()
+            : this.parentShouldConditionallyClear();
         return this._conditionallyClear;
     }
     /**
@@ -780,7 +780,7 @@ export default class Component extends Element {
         return this.options.attachMode === 'builder';
     }
     get calculatedPath() {
-        console.error('component.calculatedPath was deprecated, use component.path instead.');
+        console.error(this.t('calculatedPathDeprecation'));
         return this.path;
     }
     get labelPosition() {
@@ -795,12 +795,7 @@ export default class Component extends Element {
         return margin >= 0 ? margin : 3;
     }
     get isAdvancedLabel() {
-        return [
-            'left-left',
-            'left-right',
-            'right-left',
-            'right-right',
-        ].includes(this.labelPosition);
+        return ['left-left', 'left-right', 'right-left', 'right-right'].includes(this.labelPosition);
     }
     get labelPositions() {
         return this.labelPosition.split('-');
@@ -928,16 +923,8 @@ export default class Component extends Element {
             : (type, value) => value;
     }
     getTemplate(names, modes) {
-        modes = Array.isArray(modes)
-            ? modes
-            : [
-                modes,
-            ];
-        names = Array.isArray(names)
-            ? names
-            : [
-                names,
-            ];
+        modes = Array.isArray(modes) ? modes : [modes];
+        names = Array.isArray(names) ? names : [names];
         if (!modes.includes('form')) {
             modes.push('form');
         }
@@ -959,7 +946,7 @@ export default class Component extends Element {
         const name = names[names.length - 1];
         const templatesByName = Templates.defaultTemplates[name];
         if (!templatesByName) {
-            return { template: `Unknown template: ${name}` };
+            return { template: this.t('unknownTemplate', { name }) };
         }
         const templateByMode = this.checkTemplateMode(templatesByName, modes);
         if (templateByMode) {
@@ -1028,9 +1015,7 @@ export default class Component extends Element {
         data.disabled = this.disabled;
         data.builder = this.builderMode;
         data.render = (...args) => {
-            console.warn(`Form.io 'render' template function is deprecated.
-      If you need to render template (template A) inside of another template (template B),
-      pass pre-compiled template A (use this.renderTemplate('template_A_name') as template context variable for template B`);
+            console.warn(this.t('renderTemplateFunctionDeprecation'));
             return this.renderTemplate(...args);
         };
         data.label = data.labelInfo || this.labelInfo;
@@ -1179,9 +1164,7 @@ export default class Component extends Element {
         if (this.options.pdf && submissionTimezone) {
             return submissionTimezone;
         }
-        const staticSnapshot = this.options.server ||
-            this.options.renderMode === 'html' ||
-            !!this.options.viewAsHtml;
+        const staticSnapshot = this.options.server || this.options.renderMode === 'html' || !!this.options.viewAsHtml;
         if (submissionTimezone &&
             (mode === 'submission' || (staticSnapshot && (mode === 'viewer' || mode === 'location')))) {
             return submissionTimezone;
@@ -1212,6 +1195,19 @@ export default class Component extends Element {
             }
         }
     }
+    /**
+     * Announces a message to screen readers via the component's live region.
+     * @param {string} message - The message to announce.
+     */
+    announce(message) {
+        const liveRegion = this.refs.liveRegion;
+        if (liveRegion) {
+            liveRegion.textContent = '';
+            setTimeout(() => {
+                liveRegion.textContent = message;
+            }, 50);
+        }
+    }
     /**
      * Opens the modal element.
      * @param {string} template - The template to use for the modal dialog.
@@ -1238,7 +1234,7 @@ export default class Component extends Element {
             modalLabel = { className: 'field-required' };
         }
         return this.renderModalPreview({
-            previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('Click to set value'),
+            previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('clickToSetValue'),
             messages: '',
             labelInfo: modalLabel,
         });
@@ -1263,7 +1259,7 @@ export default class Component extends Element {
      * @param {boolean} topLevel - If this is the topmost component that is being rendered.
      * @returns {string} - The rendered HTML string of a component.
      */
-    render(children = `Unknown component: ${this.component.type}`, topLevel = false) {
+    render(children = this.t('unknownComponent', { type: this.component.type }), topLevel = false) {
         const isVisible = this.visible;
         this.rendered = true;
         if (!this.builderMode && !this.previewMode && this.component.modalEdit) {
@@ -1352,6 +1348,7 @@ export default class Component extends Element {
         this.loadRefs(element, {
             messageContainer: 'single',
             tooltip: 'multiple',
+            liveRegion: 'single',
         });
         this.attachTooltips(this.refs.tooltip);
         // Attach logic.
@@ -1471,9 +1468,7 @@ export default class Component extends Element {
             return;
         }
         if (!changes.length && flags.changed) {
-            changes = [
-                flags.changed,
-            ];
+            changes = [flags.changed];
         }
         const refreshOn = flags.fromBlur
             ? this.component.refreshOnBlur
@@ -1573,10 +1568,11 @@ export default class Component extends Element {
     /**
      * Uses the widget to determine the output string.
      * @param {any} value - The current value of the component.
-     * @param {any} options - The options for getValueAsString.
+     * @param {any} _options - The options for getValueAsString.
      * @returns {any|Array<any>} - The value as a string.
      */
-    getWidgetValueAsString(value, options) {
+    // GOTCHA(G-FJS04)
+    getWidgetValueAsString(value, _options) {
         const noInputWidget = !this.refs.input || !this.refs.input[0] || !this.refs.input[0].widget;
         if (!value || noInputWidget) {
             if (!this.widget || !value) {
@@ -1591,13 +1587,13 @@ export default class Component extends Element {
             value.forEach((val, index) => {
                 const widget = this.refs.input[index] && this.refs.input[index].widget;
                 if (widget) {
-                    values.push(widget.getValueAsString(val, options));
+                    values.push(widget.getValueAsString(val));
                 }
             });
             return values;
         }
         const widget = this.refs.input[0].widget;
-        return widget.getValueAsString(value, options);
+        return widget.getValueAsString(value);
     }
     /**
      * Returns the value of the component as a string.
@@ -1888,10 +1884,7 @@ export default class Component extends Element {
         const iconset = this.options.iconset || Templates.current.defaultIconset || 'fa';
         return Templates.current.hasOwnProperty('iconClass')
             ? Templates.current.iconClass(iconset, name, spinning)
-            : [
-                'fa',
-                'bi',
-            ].includes(this.options.iconset)
+            : ['fa', 'bi'].includes(this.options.iconset)
                 ? Templates.defaultTemplates.iconClass(iconset, name, spinning)
                 : name;
     }
@@ -2073,7 +2066,10 @@ export default class Component extends Element {
      * @returns {boolean} - TRUE if the component is conditionally visible.
      */
     conditionallyVisible(data, row) {
-        data = data || this.rootValue;
+        data =
+            data ||
+                (this.root?.submissionSet && _.merge({}, this.root?.subFromServer, this.rootValue)) ||
+                this.rootValue;
         row = row || this.data;
         if (this.builderMode || this.previewMode) {
             return true;
@@ -2310,9 +2306,7 @@ export default class Component extends Element {
             };
         }
         if (!Array.isArray(messages)) {
-            messages = [
-                messages,
-            ];
+            messages = [messages];
         }
         messages = _.uniqBy(messages, (message) => message.message);
         if (this.refs.messageContainer) {
@@ -2463,30 +2457,15 @@ export default class Component extends Element {
                     toolbar: [
                         [
                             {
-                                size: [
-                                    'small',
-                                    false,
-                                    'large',
-                                    'huge',
-                                ],
+                                size: ['small', false, 'large', 'huge'],
                             },
                         ], // custom dropdown
                         [
                             {
-                                header: [
-                                    1,
-                                    2,
-                                    3,
-                                    4,
-                                    5,
-                                    6,
-                                    false,
-                                ],
+                                header: [1, 2, 3, 4, 5, 6, false],
                             },
                         ],
-                        [
-                            { font: [] },
-                        ],
+                        [{ font: [] }],
                         [
                             'bold',
                             'italic',
@@ -2496,10 +2475,7 @@ export default class Component extends Element {
                             { script: 'super' },
                             'clean',
                         ],
-                        [
-                            { color: [] },
-                            { background: [] },
-                        ],
+                        [{ color: [] }, { background: [] }],
                         [
                             { list: 'ordered' },
                             { list: 'bullet' },
@@ -2507,17 +2483,8 @@ export default class Component extends Element {
                             { indent: '+1' },
                             { align: [] },
                         ],
-                        [
-                            'blockquote',
-                            'code-block',
-                        ],
-                        [
-                            'link',
-                            'image',
-                            'video',
-                            'formula',
-                            'source',
-                        ],
+                        ['blockquote', 'code-block'],
+                        ['link', 'image', 'video', 'formula', 'source'],
                     ],
                 },
             },
@@ -2539,12 +2506,7 @@ export default class Component extends Element {
                         'imageStyle:alignCenter',
                         'imageStyle:alignRight',
                     ],
-                    styles: [
-                        'full',
-                        'alignLeft',
-                        'alignCenter',
-                        'alignRight',
-                    ],
+                    styles: ['full', 'alignLeft', 'alignCenter', 'alignRight'],
                 },
                 extraPlugins: [],
             },
@@ -2580,7 +2542,6 @@ export default class Component extends Element {
                         current.prepend(clone);
                         break;
                     }
-                    ;
                     current = current.parentNode || current.host;
                 }
                 return ClassicEditor.create(element, settings).then((editor) => {
@@ -2601,9 +2562,7 @@ export default class Component extends Element {
             },
         };
         // Lazy load the quill css.
-        Formio.requireLibrary(`quill-css-${settings.theme}`, 'Quill', [
-            { type: 'styles', src: `${Formio.cdn.quill}/quill.${settings.theme}.css` },
-        ], true);
+        Formio.requireLibrary(`quill-css-${settings.theme}`, 'Quill', [{ type: 'styles', src: `${Formio.cdn.quill}/quill.${settings.theme}.css` }], true);
         // Lazy load the quill library.
         return Formio.requireLibrary('quill', 'Quill', _.get(this.options, 'editors.quill.src', `${Formio.cdn.quill}/quill.js`), true).then(() => {
             return Formio.requireLibrary('quill-table', 'Quill', `${Formio.cdn.baseUrl}/quill/quill-table.js`, true).then(() => {
@@ -2626,8 +2585,8 @@ export default class Component extends Element {
                     };
                     // 2. hasFocus: check shadowRoot.activeElement instead of document.activeElement
                     sel.hasFocus = () => {
-                        return root.activeElement === sel.root ||
-                            (root.activeElement != null && sel.root.contains(root.activeElement));
+                        return (root.activeElement === sel.root ||
+                            (root.activeElement != null && sel.root.contains(root.activeElement)));
                     };
                     // 3. setNativeRange: use shadowRoot's selection to add/remove ranges
                     const origSetNativeRange = sel.setNativeRange.bind(sel);
@@ -2646,9 +2605,12 @@ export default class Component extends Element {
                         const { native } = sel.getNativeRange() || {};
                         endNode = endNode ?? startNode;
                         endOffset = endOffset ?? startOffset;
-                        if (native == null || force ||
-                            startNode !== native.startContainer || startOffset !== native.startOffset ||
-                            endNode !== native.endContainer || endOffset !== native.endOffset) {
+                        if (native == null ||
+                            force ||
+                            startNode !== native.startContainer ||
+                            startOffset !== native.startOffset ||
+                            endNode !== native.endContainer ||
+                            endOffset !== native.endOffset) {
                             const range = document.createRange();
                             range.setStart(startNode, startOffset);
                             range.setEnd(endNode, endOffset);
@@ -2817,9 +2779,9 @@ export default class Component extends Element {
                 this.component.defaultValue !== undefined));
     }
     /**
-    * Determine if we should add a default value for this component.
-    * @returns {boolean} - TRUE if a default value should be set
-    */
+     * Determine if we should add a default value for this component.
+     * @returns {boolean} - TRUE if a default value should be set
+     */
     get shouldAddDefaultValue() {
         return this.pristine && this.allowData && (this.hasDefaultValue || !this.options.noDefaults);
     }
@@ -3250,9 +3212,7 @@ export default class Component extends Element {
             paths: this.paths,
             scope: validationScope,
             instance: this,
-            processors: [
-                validateProcessInfo,
-            ],
+            processors: [validateProcessInfo],
         });
         const errors = validationScope.errors;
         const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));
@@ -3289,10 +3249,7 @@ export default class Component extends Element {
     interpolateErrors(errors) {
         const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));
         return this.serverErrors?.length
-            ? [
-                ...interpolatedErrors,
-                ...this.serverErrors,
-            ]
+            ? [...interpolatedErrors, ...this.serverErrors]
             : interpolatedErrors;
     }
     /**
@@ -3340,9 +3297,7 @@ export default class Component extends Element {
             instance: this,
             form: this.root ? this.root._form : {},
             scope: { errors: [] },
-            processors: [
-                validateProcessInfo,
-            ],
+            processors: [validateProcessInfo],
         };
         if (async) {
             return processOne(processContext).then(() => {
@@ -3457,9 +3412,7 @@ export default class Component extends Element {
             return;
         }
         if (dirty && !isValid) {
-            this.setErrorClasses([
-                this.refs.openModal,
-            ], dirty, !isValid, !!messages.length, this.refs.openModalWrapper);
+            this.setErrorClasses([this.refs.openModal], dirty, !isValid, !!messages.length, this.refs.openModalWrapper);
         }
         else {
             this.clearErrorClasses(this.refs.openModalWrapper);
@@ -3546,9 +3499,7 @@ export default class Component extends Element {
         }
         if (!Array.isArray(messages)) {
             if (messages) {
-                messages = [
-                    messages,
-                ];
+                messages = [messages];
             }
             else {
                 messages = [];
@@ -3644,7 +3595,7 @@ export default class Component extends Element {
     }
     // Maintain reverse compatibility.
     whenReady() {
-        console.warn('The whenReady() method has been deprecated. Please use the dataReady property instead.');
+        console.warn(this.t('whenReadyDeprecation'));
         return this.dataReady;
     }
     get dataReady() {
@@ -3657,13 +3608,7 @@ export default class Component extends Element {
      */
     asString(value) {
         value = value || this.getValue();
-        return (Array.isArray(value)
-            ? value
-            : [
-                value,
-            ])
-            .map(_.toString)
-            .join(', ');
+        return (Array.isArray(value) ? value : [value]).map(_.toString).join(', ');
     }
     /**
      * Return if the component is disabled.
@@ -3915,11 +3860,7 @@ Component.requireLibrary = function (name, property, src, polling) {
             Component.externalLibraries[name].resolve(plugin);
         }
         else {
-            src = Array.isArray(src)
-                ? src
-                : [
-                    src,
-                ];
+            src = Array.isArray(src) ? src : [src];
             src.forEach((lib) => {
                 let attrs = {};
                 let elementType = '';

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

@@ -123,9 +123,7 @@ export default [
         },
         conditional: {
             json: {
-                '!': [
-                    { var: 'data.dataSrc' },
-                ],
+                '!': [{ var: 'data.dataSrc' }],
             },
         },
     },
@@ -167,5 +165,5 @@ export default [
         tooltip: 'A JSON object containing the component settings that should be overriden when the form submission is processed on the server side.',
         defaultValue: {},
         description: '<b>Example</b>: { "clearOnHide": true }',
-    }
+    },
 ];

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

@@ -50,16 +50,10 @@ export default [
             json: {
                 and: [
                     {
-                        '!==': [
-                            { var: 'data.labelPosition' },
-                            'top',
-                        ],
+                        '!==': [{ var: 'data.labelPosition' }, 'top'],
                     },
                     {
-                        '!==': [
-                            { var: 'data.labelPosition' },
-                            'bottom',
-                        ],
+                        '!==': [{ var: 'data.labelPosition' }, 'bottom'],
                     },
                 ],
             },
@@ -83,16 +77,10 @@ export default [
             json: {
                 and: [
                     {
-                        '!==': [
-                            { var: 'data.labelPosition' },
-                            'top',
-                        ],
+                        '!==': [{ var: 'data.labelPosition' }, 'top'],
                     },
                     {
-                        '!==': [
-                            { var: 'data.labelPosition' },
-                            'bottom',
-                        ],
+                        '!==': [{ var: 'data.labelPosition' }, 'bottom'],
                     },
                 ],
             },

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

@@ -125,10 +125,7 @@ export default [
                     JSON.stringify({
                         if: [
                             {
-                                '===': [
-                                    { var: 'input' },
-                                    'Bob',
-                                ],
+                                '===': [{ var: 'input' }, 'Bob'],
                             },
                             true,
                             "Your name must be 'Bob'!",

package/lib/mjs/components/_classes/field/Field.js

@@ -35,10 +35,7 @@ export default class Field extends Component {
         if (this.root?.focusedComponent?.path === this.path) {
             try {
                 this.root.currentSelection = {
-                    selection: [
-                        element.selectionStart,
-                        element.selectionEnd,
-                    ],
+                    selection: [element.selectionStart, element.selectionEnd],
                     index,
                 };
             }

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

@@ -247,9 +247,9 @@ export default class Input extends Multivalue {
             announceScreenReaderMessage(comp, comp.dataValue, 0, true);
         });
         this.on('blur', (comp) => {
-            const el = comp.refs?.["announceMessage"]?.[0];
+            const el = comp.refs?.['announceMessage']?.[0];
             if (el) {
-                el.textContent = "";
+                el.textContent = '';
             }
         });
         return promise;

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

@@ -131,11 +131,11 @@ export default class ListComponent extends Field {
             component: this.component,
             message: err.toString(),
         });
-        console.warn(`Unable to load resources for ${this.key}`);
+        console.warn(this.t('loadResourcesError', { componentKey: this.key }));
     }
     updateItems(searchInput, forceUpdate) {
         if (!this.component.data) {
-            console.warn(`Select component ${this.key} does not have data configuration.`);
+            console.warn(this.t('noSelectDataConfiguration', { componentKey: this.key }));
             this.itemsLoadedResolve();
             return;
         }
@@ -169,7 +169,7 @@ export default class ListComponent extends Field {
                         this.loadItems(resourceUrl, searchInput, this.requestHeaders);
                     }
                     catch (ignoreErr) {
-                        console.warn(`Unable to load resources for ${this.key}`);
+                        console.warn(this.t('loadResourcesError', { componentKey: this.key }));
                     }
                 }
                 else {
@@ -218,7 +218,7 @@ export default class ListComponent extends Field {
                     return;
                 }
                 if (!window.indexedDB) {
-                    window.alert("Your browser doesn't support current version of indexedDB");
+                    window.alert(this.t('indexedDBSupportError'));
                 }
                 if (this.component.indexeddb &&
                     this.component.indexeddb.database &&