@formio/js 5.4.0 → 5.4.2

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

@@ -175,12 +175,7 @@ class Component extends Element_1.default {
      */
     static get conditionOperatorsSettings() {
         return {
-            operators: [
-                'isEqual',
-                'isNotEqual',
-                'isEmpty',
-                'isNotEmpty',
-            ],
+            operators: ['isEqual', 'isNotEqual', 'isEmpty', 'isNotEmpty'],
             valueComponent() {
                 return {
                     type: 'textfield',
@@ -198,9 +193,7 @@ class Component extends Element_1.default {
      */
     static savedValueTypes(schema) {
         schema = schema || {};
-        return (utils_1.default.getComponentSavedTypes(schema) || [
-            utils_1.default.componentValueTypes.any,
-        ]);
+        return utils_1.default.getComponentSavedTypes(schema) || [utils_1.default.componentValueTypes.any];
     }
     /**
      * Provides a table view for this component. Override if you wish to do something different than using getView
@@ -467,7 +460,9 @@ class Component extends Element_1.default {
     hasCondionallyHiddenLayoutParent() {
         let currentParent = this.parent;
         while (currentParent) {
-            if (currentParent._conditionallyHidden && utils_1.default.isLayoutComponent(currentParent) && currentParent.component.clearOnHide === true) {
+            if (currentParent._conditionallyHidden &&
+                utils_1.default.isLayoutComponent(currentParent) &&
+                currentParent.component.clearOnHide === true) {
                 return true;
             }
             currentParent = currentParent.parent;
@@ -592,7 +587,10 @@ class Component extends Element_1.default {
                 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;
@@ -646,7 +644,7 @@ class Component extends Element_1.default {
         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;
@@ -750,7 +748,9 @@ class Component extends Element_1.default {
             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;
     }
     /**
@@ -785,7 +785,7 @@ class Component extends Element_1.default {
         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() {
@@ -800,12 +800,7 @@ class Component extends Element_1.default {
         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('-');
@@ -933,16 +928,8 @@ class Component extends Element_1.default {
             : (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');
         }
@@ -964,7 +951,7 @@ class Component extends Element_1.default {
         const name = names[names.length - 1];
         const templatesByName = Templates_1.default.defaultTemplates[name];
         if (!templatesByName) {
-            return { template: `Unknown template: ${name}` };
+            return { template: this.t('unknownTemplate', { name }) };
         }
         const templateByMode = this.checkTemplateMode(templatesByName, modes);
         if (templateByMode) {
@@ -1033,9 +1020,7 @@ class Component extends Element_1.default {
         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;
@@ -1186,9 +1171,7 @@ class Component extends Element_1.default {
         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;
@@ -1219,6 +1202,19 @@ class Component extends Element_1.default {
             }
         }
     }
+    /**
+     * 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.
@@ -1246,7 +1242,7 @@ class Component extends Element_1.default {
             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,
         });
@@ -1271,7 +1267,7 @@ class Component extends Element_1.default {
      * @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 @@ class Component extends Element_1.default {
         this.loadRefs(element, {
             messageContainer: 'single',
             tooltip: 'multiple',
+            liveRegion: 'single',
         });
         this.attachTooltips(this.refs.tooltip);
         // Attach logic.
@@ -1475,9 +1472,7 @@ class Component extends Element_1.default {
             return;
         }
         if (!changes.length && flags.changed) {
-            changes = [
-                flags.changed,
-            ];
+            changes = [flags.changed];
         }
         const refreshOn = flags.fromBlur
             ? this.component.refreshOnBlur
@@ -1578,10 +1573,11 @@ class Component extends Element_1.default {
     /**
      * 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) {
@@ -1596,13 +1592,13 @@ class Component extends Element_1.default {
             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.
@@ -1895,10 +1891,7 @@ class Component extends Element_1.default {
         const iconset = this.options.iconset || Templates_1.default.current.defaultIconset || 'fa';
         return Templates_1.default.current.hasOwnProperty('iconClass')
             ? Templates_1.default.current.iconClass(iconset, name, spinning)
-            : [
-                'fa',
-                'bi',
-            ].includes(this.options.iconset)
+            : ['fa', 'bi'].includes(this.options.iconset)
                 ? Templates_1.default.defaultTemplates.iconClass(iconset, name, spinning)
                 : name;
     }
@@ -2081,7 +2074,11 @@ class Component extends Element_1.default {
      * @returns {boolean} - TRUE if the component is conditionally visible.
      */
     conditionallyVisible(data, row) {
-        data = data || this.rootValue;
+        var _a, _b;
+        data =
+            data ||
+                (((_a = this.root) === null || _a === void 0 ? void 0 : _a.submissionSet) && lodash_1.default.merge({}, (_b = this.root) === null || _b === void 0 ? void 0 : _b.subFromServer, this.rootValue)) ||
+                this.rootValue;
         row = row || this.data;
         if (this.builderMode || this.previewMode) {
             return true;
@@ -2318,9 +2315,7 @@ class Component extends Element_1.default {
             };
         }
         if (!Array.isArray(messages)) {
-            messages = [
-                messages,
-            ];
+            messages = [messages];
         }
         messages = lodash_1.default.uniqBy(messages, (message) => message.message);
         if (this.refs.messageContainer) {
@@ -2472,30 +2467,15 @@ class Component extends Element_1.default {
                     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',
@@ -2505,10 +2485,7 @@ class Component extends Element_1.default {
                             { script: 'super' },
                             'clean',
                         ],
-                        [
-                            { color: [] },
-                            { background: [] },
-                        ],
+                        [{ color: [] }, { background: [] }],
                         [
                             { list: 'ordered' },
                             { list: 'bullet' },
@@ -2516,17 +2493,8 @@ class Component extends Element_1.default {
                             { indent: '+1' },
                             { align: [] },
                         ],
-                        [
-                            'blockquote',
-                            'code-block',
-                        ],
-                        [
-                            'link',
-                            'image',
-                            'video',
-                            'formula',
-                            'source',
-                        ],
+                        ['blockquote', 'code-block'],
+                        ['link', 'image', 'video', 'formula', 'source'],
                     ],
                 },
             },
@@ -2548,12 +2516,7 @@ class Component extends Element_1.default {
                         'imageStyle:alignCenter',
                         'imageStyle:alignRight',
                     ],
-                    styles: [
-                        'full',
-                        'alignLeft',
-                        'alignCenter',
-                        'alignRight',
-                    ],
+                    styles: ['full', 'alignLeft', 'alignCenter', 'alignRight'],
                 },
                 extraPlugins: [],
             },
@@ -2589,7 +2552,6 @@ class Component extends Element_1.default {
                         current.prepend(clone);
                         break;
                     }
-                    ;
                     current = current.parentNode || current.host;
                 }
                 return ClassicEditor.create(element, settings).then((editor) => {
@@ -2604,9 +2566,7 @@ class Component extends Element_1.default {
         settings = lodash_1.default.merge(this.wysiwygDefault.quill, lodash_1.default.get(this.options, 'editors.quill.settings', {}), settings);
         settings = Object.assign(Object.assign({}, settings), { modules: Object.assign({ table: true }, settings.modules) });
         // Lazy load the quill css.
-        Formio_1.Formio.requireLibrary(`quill-css-${settings.theme}`, 'Quill', [
-            { type: 'styles', src: `${Formio_1.Formio.cdn.quill}/quill.${settings.theme}.css` },
-        ], true);
+        Formio_1.Formio.requireLibrary(`quill-css-${settings.theme}`, 'Quill', [{ type: 'styles', src: `${Formio_1.Formio.cdn.quill}/quill.${settings.theme}.css` }], true);
         // Lazy load the quill library.
         return Formio_1.Formio.requireLibrary('quill', 'Quill', lodash_1.default.get(this.options, 'editors.quill.src', `${Formio_1.Formio.cdn.quill}/quill.js`), true).then(() => {
             return Formio_1.Formio.requireLibrary('quill-table', 'Quill', `${Formio_1.Formio.cdn.baseUrl}/quill/quill-table.js`, true).then(() => {
@@ -2629,8 +2589,8 @@ class Component extends Element_1.default {
                     };
                     // 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);
@@ -2649,9 +2609,12 @@ class Component extends Element_1.default {
                         const { native } = sel.getNativeRange() || {};
                         endNode = endNode !== null && endNode !== void 0 ? endNode : startNode;
                         endOffset = endOffset !== null && endOffset !== void 0 ? 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);
@@ -2822,9 +2785,9 @@ class Component extends Element_1.default {
                 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);
     }
@@ -3259,9 +3222,7 @@ class Component extends Element_1.default {
             paths: this.paths,
             scope: validationScope,
             instance: this,
-            processors: [
-                process_1.validateProcessInfo,
-            ],
+            processors: [process_1.validateProcessInfo],
         });
         const errors = validationScope.errors;
         const interpolatedErrors = utils_1.default.interpolateErrors(this.component, errors, this.t.bind(this));
@@ -3299,10 +3260,7 @@ class Component extends Element_1.default {
         var _a;
         const interpolatedErrors = utils_1.default.interpolateErrors(this.component, errors, this.t.bind(this));
         return ((_a = this.serverErrors) === null || _a === void 0 ? void 0 : _a.length)
-            ? [
-                ...interpolatedErrors,
-                ...this.serverErrors,
-            ]
+            ? [...interpolatedErrors, ...this.serverErrors]
             : interpolatedErrors;
     }
     /**
@@ -3351,9 +3309,7 @@ class Component extends Element_1.default {
             instance: this,
             form: this.root ? this.root._form : {},
             scope: { errors: [] },
-            processors: [
-                process_1.validateProcessInfo,
-            ],
+            processors: [process_1.validateProcessInfo],
         };
         if (async) {
             return (0, process_1.processOne)(processContext).then(() => {
@@ -3468,9 +3424,7 @@ class Component extends Element_1.default {
             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);
@@ -3558,9 +3512,7 @@ class Component extends Element_1.default {
         }
         if (!Array.isArray(messages)) {
             if (messages) {
-                messages = [
-                    messages,
-                ];
+                messages = [messages];
             }
             else {
                 messages = [];
@@ -3659,7 +3611,7 @@ class Component extends Element_1.default {
     }
     // 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() {
@@ -3672,13 +3624,7 @@ class Component extends Element_1.default {
      */
     asString(value) {
         value = value || this.getValue();
-        return (Array.isArray(value)
-            ? value
-            : [
-                value,
-            ])
-            .map(lodash_1.default.toString)
-            .join(', ');
+        return (Array.isArray(value) ? value : [value]).map(lodash_1.default.toString).join(', ');
     }
     /**
      * Return if the component is disabled.
@@ -3933,11 +3879,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/cjs/components/_classes/component/editForm/Component.edit.data.js

@@ -128,9 +128,7 @@ exports.default = [
         },
         conditional: {
             json: {
-                '!': [
-                    { var: 'data.dataSrc' },
-                ],
+                '!': [{ var: 'data.dataSrc' }],
             },
         },
     },
@@ -172,5 +170,5 @@ exports.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/cjs/components/_classes/component/editForm/Component.edit.display.js

@@ -52,16 +52,10 @@ exports.default = [
             json: {
                 and: [
                     {
-                        '!==': [
-                            { var: 'data.labelPosition' },
-                            'top',
-                        ],
+                        '!==': [{ var: 'data.labelPosition' }, 'top'],
                     },
                     {
-                        '!==': [
-                            { var: 'data.labelPosition' },
-                            'bottom',
-                        ],
+                        '!==': [{ var: 'data.labelPosition' }, 'bottom'],
                     },
                 ],
             },
@@ -85,16 +79,10 @@ exports.default = [
             json: {
                 and: [
                     {
-                        '!==': [
-                            { var: 'data.labelPosition' },
-                            'top',
-                        ],
+                        '!==': [{ var: 'data.labelPosition' }, 'top'],
                     },
                     {
-                        '!==': [
-                            { var: 'data.labelPosition' },
-                            'bottom',
-                        ],
+                        '!==': [{ var: 'data.labelPosition' }, 'bottom'],
                     },
                 ],
             },

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

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

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

@@ -37,10 +37,7 @@ class Field extends Component_1.default {
         if (((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.focusedComponent) === null || _b === void 0 ? void 0 : _b.path) === this.path) {
             try {
                 this.root.currentSelection = {
-                    selection: [
-                        element.selectionStart,
-                        element.selectionEnd,
-                    ],
+                    selection: [element.selectionStart, element.selectionEnd],
                     index,
                 };
             }

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

@@ -254,9 +254,9 @@ class Input extends Multivalue_1.default {
         });
         this.on('blur', (comp) => {
             var _a, _b;
-            const el = (_b = (_a = comp.refs) === null || _a === void 0 ? void 0 : _a["announceMessage"]) === null || _b === void 0 ? void 0 : _b[0];
+            const el = (_b = (_a = comp.refs) === null || _a === void 0 ? void 0 : _a['announceMessage']) === null || _b === void 0 ? void 0 : _b[0];
             if (el) {
-                el.textContent = "";
+                el.textContent = '';
             }
         });
         return promise;

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

@@ -136,11 +136,11 @@ class ListComponent extends Field_1.default {
             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;
         }
@@ -174,7 +174,7 @@ class ListComponent extends Field_1.default {
                         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 {
@@ -223,7 +223,7 @@ class ListComponent extends Field_1.default {
                     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 &&