@formio/js 5.2.4-rc.0 → 5.2.5

package/lib/cjs/components/_classes/nesteddata/NestedDataComponent.js

@@ -10,15 +10,15 @@ const utils_1 = require("../../../utils");
 class NestedDataComponent extends NestedComponent_1.default {
     hasChanged(newValue, oldValue) {
         // If we do not have a value and are getting set to anything other than undefined or null, then we changed.
-        if (newValue !== undefined && newValue !== null && !this.hasValue()) {
+        if (newValue !== undefined &&
+            newValue !== null &&
+            !this.hasValue()) {
             return true;
         }
         return !lodash_1.default.isEqual(newValue, oldValue);
     }
     static savedValueTypes(schema) {
-        return ((0, utils_1.getComponentSavedTypes)(schema) || [
-            utils_1.componentValueTypes.object,
-        ]);
+        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];
     }
     get allowData() {
         return true;
@@ -34,24 +34,24 @@ class NestedDataComponent extends NestedComponent_1.default {
     }
     getValueAsString(value, options) {
         if (options === null || options === void 0 ? void 0 : options.email) {
-            let result = `
+            let result = (`
         <table border="1" style="width:100%">
           <tbody>
-      `;
+      `);
             this.everyComponent((component) => {
                 if (component.isInputComponent && component.visible && !component.skipInEmail) {
-                    result += `
+                    result += (`
             <tr>
               <th style="padding: 5px 10px;">${component.label}</th>
               <td style="width:100%;padding:5px 10px;">${component.getView(component.dataValue, options)}</td>
             </tr>
-          `;
+          `);
                 }
             }, Object.assign(Object.assign({}, options), { fromRoot: true }));
-            result += `
+            result += (`
           </tbody>
         </table>
-      `;
+      `);
             return result;
         }
         if (lodash_1.default.isEmpty(value)) {
@@ -64,30 +64,28 @@ class NestedDataComponent extends NestedComponent_1.default {
         return '[Complex Data]';
     }
     getDataValueAsTable(value, options) {
-        let result = `
+        let result = (`
       <table border="1" style="width:100%">
         <tbody>
-    `;
+    `);
         const htmlTagRegExp = new RegExp('<(.*?)>');
         this.everyComponent((component) => {
             if (component.isInputComponent && component.visible && !component.skipInEmail) {
                 const componentValue = component.getView(component.dataValue, options);
-                result += `
+                result += (`
           <tr>
             <th style="padding: 5px 10px;">${component.label}</th>
-            <td style="width:100%;padding:5px 10px;">${component.component &&
-                    component.component.inputFormat === 'html' &&
-                    htmlTagRegExp.test(componentValue)
+            <td style="width:100%;padding:5px 10px;">${component.component && component.component.inputFormat === 'html' && htmlTagRegExp.test(componentValue)
                     ? componentValue
                     : `<input type="text" value="${componentValue.replace(/"/g, '&quot;')}" readonly/>`}</td>
           </tr>
-        `;
+        `);
             }
         }, Object.assign(Object.assign({}, options), { fromRoot: true }));
-        result += `
+        result += (`
         </tbody>
       </table>
-    `;
+    `);
         return result;
     }
     /**

package/lib/cjs/components/address/Address.d.ts

@@ -72,7 +72,6 @@ export default class AddressComponent extends ContainerComponent {
     render(): string;
     onSelectAddress(address: any, element: any, index: any): void;
     addRow(): void;
-    attach(element: any): Promise<void>;
     addChildComponent(component: any): void;
     clearAddress(element: any, index: any): void;
     getDisplayValue(value?: any): any;

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

@@ -17,14 +17,14 @@ exports.AddressComponentMode = {
     Manual: 'manual',
 };
 const RemoveValueIconHiddenClass = 'address-autocomplete-remove-value-icon--hidden';
-const ChildConditional = "show = _.get(instance, 'parent.manualMode', false);";
+const ChildConditional = 'show = _.get(instance, \'parent.manualMode\', false);';
 class AddressComponent extends Container_1.default {
     static schema(...extend) {
         return Container_1.default.schema({
             type: 'address',
             label: 'Address',
             key: 'address',
-            switchToManualModeLabel: "Can't find address? Switch to manual mode.",
+            switchToManualModeLabel: 'Can\'t find address? Switch to manual mode.',
             provider: '',
             manualModeViewString: '',
             hideLabel: false,
@@ -84,9 +84,7 @@ class AddressComponent extends Container_1.default {
     }
     static savedValueTypes(schema) {
         schema = schema || {};
-        return ((0, utils_1.getComponentSavedTypes)(schema) || [
-            utils_1.componentValueTypes.object,
-        ]);
+        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];
     }
     static get builderInfo() {
         return {
@@ -102,10 +100,7 @@ class AddressComponent extends Container_1.default {
         return AddressComponent.conditionOperatorsSettings;
     }
     static get conditionOperatorsSettings() {
-        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [
-                'isEmpty',
-                'isNotEmpty',
-            ] });
+        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });
     }
     mergeSchema(component = {}) {
         let { defaultSchema } = this;
@@ -147,7 +142,7 @@ class AddressComponent extends Container_1.default {
             else if (map) {
                 // Fallback to legacy version where Google Maps was the only provider.
                 provider = this.component.provider = GoogleAddressProvider_1.GoogleAddressProvider.name;
-                const { key, region } = map;
+                const { key, region, } = map;
                 if (key) {
                     lodash_1.default.set(providerOptions, 'params.key', key);
                 }
@@ -205,14 +200,10 @@ class AddressComponent extends Container_1.default {
     }
     get address() {
         if (this.isMultiple) {
-            return lodash_1.default.isArray(this.dataValue)
-                ? this.dataValue
-                : [
-                    this.dataValue,
-                ];
+            return lodash_1.default.isArray(this.dataValue) ? this.dataValue : [this.dataValue];
         }
         // Manual mode is not implementing for multiple value
-        return this.manualModeEnabled && this.dataValue ? this.dataValue.address : this.dataValue;
+        return (this.manualModeEnabled && this.dataValue) ? this.dataValue.address : this.dataValue;
     }
     set address(value) {
         if (this.manualModeEnabled && !this.isMultiple && !lodash_1.default.isEqual(value, this.emptyValue)) {
@@ -225,11 +216,7 @@ class AddressComponent extends Container_1.default {
     get defaultValue() {
         let defaultValue = super.defaultValue;
         if (this.isMultiple) {
-            defaultValue = lodash_1.default.isArray(defaultValue)
-                ? defaultValue
-                : [
-                    defaultValue,
-                ];
+            defaultValue = lodash_1.default.isArray(defaultValue) ? defaultValue : [defaultValue];
         }
         return defaultValue;
     }
@@ -245,14 +232,12 @@ class AddressComponent extends Container_1.default {
     get dataValue() {
         const resultValue = lodash_1.default.get(this._data, this.path);
         if (!lodash_1.default.isArray(resultValue) && this.component.multiple) {
-            return [
-                resultValue,
-            ];
+            return [resultValue];
         }
         return super.dataValue;
     }
     normalizeValue(value) {
-        return this.manualModeEnabled && this.isValueInLegacyFormat(value)
+        return (this.manualModeEnabled && this.isValueInLegacyFormat(value))
             ? {
                 mode: exports.AddressComponentMode.Autocomplete,
                 address: value,
@@ -264,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) {
             this.redraw();
         }
         return changed;
@@ -285,7 +270,9 @@ class AddressComponent extends Container_1.default {
         return 'removeRow';
     }
     get modeSwitcher() {
-        return this.refs ? this.refs[AddressComponent.modeSwitcherRef] || null : null;
+        return this.refs
+            ? (this.refs[AddressComponent.modeSwitcherRef] || null)
+            : null;
     }
     get providerOptions() {
         return {
@@ -294,20 +281,28 @@ class AddressComponent extends Container_1.default {
             queryProperty: this.component.queryProperty,
             responseProperty: this.component.responseProperty,
             displayValueProperty: this.component.displayValueProperty,
-            autocompleteOptions: this.component.autocompleteOptions,
+            autocompleteOptions: this.component.autocompleteOptions
         };
     }
     get removeValueIcon() {
-        return this.refs ? this.refs[AddressComponent.removeValueIconRef] || null : null;
+        return this.refs
+            ? (this.refs[AddressComponent.removeValueIconRef] || null)
+            : null;
     }
     get searchInput() {
-        return this.refs ? this.refs[AddressComponent.searchInputRef] || null : null;
+        return this.refs
+            ? (this.refs[AddressComponent.searchInputRef] || null)
+            : null;
     }
     get addRowButton() {
-        return this.refs ? this.refs[AddressComponent.addRowButtonRef] || null : null;
+        return this.refs
+            ? (this.refs[AddressComponent.addRowButtonRef] || null)
+            : null;
     }
     get removeRowButton() {
-        return this.refs ? this.refs[AddressComponent.removeRowButtonRef] || null : null;
+        return this.refs
+            ? (this.refs[AddressComponent.removeRowButtonRef] || null)
+            : null;
     }
     get searchInputAttributes() {
         const attr = {
@@ -318,7 +313,7 @@ class AddressComponent extends Container_1.default {
             tabindex: this.component.tabindex || 0,
         };
         if (this.component.placeholder) {
-            ((attr.placeholder = this.t(this.component.placeholder)), { _userInput: true });
+            attr.placeholder = this.t(this.component.placeholder), { _userInput: true };
         }
         if (this.disabled) {
             attr.disabled = 'disabled';
@@ -379,16 +374,15 @@ class AddressComponent extends Container_1.default {
         return super.render(this.renderElement());
     }
     onSelectAddress(address, element, index) {
+        var _a;
         if (this.isMultiple) {
             this.address[index] = address;
-            this.address = [
-                ...this.address,
-            ];
+            this.address = [...this.address];
         }
         else {
             this.address = address;
         }
-        this.triggerChange({
+        (_a = this.triggerChange) === null || _a === void 0 ? void 0 : _a.call(this, {
             modified: true,
         });
         if (element) {
@@ -401,7 +395,7 @@ class AddressComponent extends Container_1.default {
         super.redraw();
     }
     attach(element) {
-        const result = (this.builderMode || this.manualMode ? super.attach : Field_1.default.prototype.attach).call(this, element);
+        const result = ((this.builderMode || this.manualMode) ? super.attach : Field_1.default.prototype.attach).call(this, element);
         if (!this.builderMode) {
             if (!this.provider && this.component.provider) {
                 const provider = this.component.provider;
@@ -458,19 +452,20 @@ class AddressComponent extends Container_1.default {
             }
         });
         if (this.addRowButton) {
-            this.addEventListener(this.addRowButton, 'click', (event) => {
+            this.addEventListener(this.addRowButton, 'click', event => {
                 event.preventDefault();
                 this.addRow();
             });
         }
         this.removeRowButton.forEach((removeRowButton, index) => {
-            this.addEventListener(removeRowButton, 'click', (event) => {
+            this.addEventListener(removeRowButton, 'click', event => {
                 event.preventDefault();
                 this.removeValue(index);
             });
         });
         if (this.modeSwitcher) {
             this.addEventListener(this.modeSwitcher, 'change', () => {
+                var _a;
                 if (!this.modeSwitcher) {
                     return;
                 }
@@ -482,7 +477,7 @@ class AddressComponent extends Container_1.default {
                     if (this.manualMode) {
                         this.restoreComponentsContext();
                     }
-                    this.triggerChange({
+                    (_a = this.triggerChange) === null || _a === void 0 ? void 0 : _a.call(this, {
                         modified: true,
                     });
                 }
@@ -507,7 +502,7 @@ class AddressComponent extends Container_1.default {
                     }
                 });
             });
-            lodash_1.default.each(this.refs.searchInput || [], (el) => this.addFocusBlurEvents(el));
+            lodash_1.default.each(this.refs.searchInput || [], el => this.addFocusBlurEvents(el));
         }
         return result;
     }
@@ -515,8 +510,9 @@ class AddressComponent extends Container_1.default {
         component.customConditional = ChildConditional;
     }
     redraw() {
-        const modeSwitcherInFocus = this.modeSwitcher && document.activeElement === this.modeSwitcher;
-        return super.redraw().then((result) => {
+        const modeSwitcherInFocus = (this.modeSwitcher && (document.activeElement === this.modeSwitcher));
+        return super.redraw()
+            .then((result) => {
             if (modeSwitcherInFocus && this.modeSwitcher) {
                 this.modeSwitcher.focus();
             }
@@ -524,11 +520,11 @@ class AddressComponent extends Container_1.default {
         });
     }
     clearAddress(element, index) {
-        var _a;
+        var _a, _b;
         if (!this.isEmpty()) {
-            this.triggerChange();
+            (_a = this.triggerChange) === null || _a === void 0 ? void 0 : _a.call(this);
         }
-        if ((_a = this.address) === null || _a === void 0 ? void 0 : _a[index]) {
+        if ((_b = this.address) === null || _b === void 0 ? void 0 : _b[index]) {
             this.address[index] = this.emptyValue;
         }
         else {
@@ -540,7 +536,9 @@ class AddressComponent extends Container_1.default {
         this.updateRemoveIcon(index);
     }
     getDisplayValue(value = this.address) {
-        return this.provider && !this.manualMode ? this.provider.getDisplayValue(value) : '';
+        return (this.provider && !this.manualMode)
+            ? this.provider.getDisplayValue(value)
+            : '';
     }
     validateMultiple() {
         return this.isMultiple;
@@ -563,13 +561,13 @@ class AddressComponent extends Container_1.default {
             return '';
         }
         const normalizedValue = this.normalizeValue(value);
-        const { address, mode } = this.manualModeEnabled
+        const { address, mode, } = (this.manualModeEnabled
             ? normalizedValue
             : {
                 address: normalizedValue,
                 mode: exports.AddressComponentMode.Autocomplete,
-            };
-        const valueInManualMode = mode === exports.AddressComponentMode.Manual;
+            });
+        const valueInManualMode = (mode === exports.AddressComponentMode.Manual);
         if (this.provider && !valueInManualMode) {
             return this.getDisplayValue(address);
         }
@@ -583,12 +581,9 @@ class AddressComponent extends Container_1.default {
             }
             return this.getComponents()
                 .filter((component) => component.hasValue(address))
-                .map((component) => [
-                component,
-                lodash_1.default.get(address, component.key),
-            ])
-                .filter(([component, componentValue,]) => !component.isEmpty(componentValue))
-                .map(([component, componentValue,]) => component.getValueAsString(componentValue, options))
+                .map((component) => [component, lodash_1.default.get(address, component.key)])
+                .filter(([component, componentValue]) => !component.isEmpty(componentValue))
+                .map(([component, componentValue]) => component.getValueAsString(componentValue, options))
                 .join(', ');
         }
         return super.getValueAsString(address, options);

package/lib/cjs/components/address/editForm/Address.edit.data.js

@@ -13,11 +13,11 @@ exports.default = [
         placeholder: 'Default Value',
         tooltip: 'The Default Value will be the value for this field, before user interaction. Having a default value will override the placeholder text.',
         input: true,
-        customDefaultValue: ({ instance }) => instance.manualModeEnabled
+        customDefaultValue: ({ instance }) => (instance.manualModeEnabled
             ? {
                 mode: 'autocomplete',
                 address: {},
             }
-            : {},
+            : {}),
     },
 ];

package/lib/cjs/components/address/editForm/Address.edit.display.js

@@ -15,7 +15,7 @@ exports.default = [
         type: 'textfield',
         input: true,
         key: 'switchToManualModeLabel',
-        defaultValue: "Can't find address? Switch to manual mode.",
+        defaultValue: 'Can\'t find address? Switch to manual mode.',
         label: 'Switch To Manual Mode Label',
         placeholder: 'Switch To Manual Mode Label',
         tooltip: 'The label for the checkbox used to switch to manual mode.',
@@ -30,7 +30,7 @@ exports.default = [
         input: true,
         key: 'disableClearIcon',
         label: 'Disable Clear Icon',
-        tooltip: "Clear Icon allows easily clear component's value.",
+        tooltip: 'Clear Icon allows easily clear component\'s value.',
     },
     {
         type: 'textfield',

package/lib/cjs/components/address/editForm/Address.edit.provider.js

@@ -18,9 +18,7 @@ exports.default = [
         dataSrc: 'custom',
         data: {
             custom() {
-                return lodash_1.default.values(Formio_1.Formio.Providers.getProviders('address'))
-                    .sort()
-                    .map((provider) => ({
+                return lodash_1.default.values(Formio_1.Formio.Providers.getProviders('address')).sort().map((provider) => ({
                     label: provider.displayName,
                     value: provider.name,
                 }));
@@ -33,7 +31,7 @@ exports.default = [
     {
         type: 'textfield',
         input: true,
-        key: 'subscriptionKey',
+        key: "subscriptionKey",
         label: 'Subscription Key',
         placeholder: 'Enter Subscription Key',
         weight: 10,
@@ -42,12 +40,7 @@ exports.default = [
             required: true,
         },
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'azure',
-                ],
-            },
+            json: { '===': [{ var: 'data.provider' }, 'azure'] },
         },
     },
     {
@@ -62,12 +55,7 @@ exports.default = [
             required: true,
         },
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'custom',
-                ],
-            },
+            json: { '===': [{ var: 'data.provider' }, 'custom'] },
         },
     },
     {
@@ -80,12 +68,7 @@ exports.default = [
         weight: 20,
         tooltip: 'Which query param should be used to pass as a search string. Default is `query`.',
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'custom',
-                ],
-            },
+            json: { '===': [{ var: 'data.provider' }, 'custom'] },
         },
     },
     {
@@ -97,12 +80,7 @@ exports.default = [
         weight: 30,
         tooltip: 'The property within the response data, where iterable addresses reside. For example: results.',
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'custom',
-                ],
-            },
+            json: { '===': [{ var: 'data.provider' }, 'custom'] },
         },
     },
     {
@@ -114,12 +92,7 @@ exports.default = [
         weight: 40,
         tooltip: 'The property of each address in the response to use as the display value.',
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'custom',
-                ],
-            },
+            json: { '===': [{ var: 'data.provider' }, 'custom'] },
         },
     },
     {
@@ -134,12 +107,7 @@ exports.default = [
         as: 'json',
         tooltip: 'Additional query params can be specified here in a way of JSON object.',
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'custom',
-                ],
-            },
+            json: { '===': [{ var: 'data.provider' }, 'custom'] },
         },
     },
     {
@@ -154,12 +122,7 @@ exports.default = [
             required: true,
         },
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'google',
-                ],
-            },
+            json: { '===': [{ var: 'data.provider' }, 'google'] },
         },
     },
     {
@@ -173,14 +136,9 @@ exports.default = [
         rows: 5,
         as: 'json',
         editor: 'ace',
-        tooltip: "Specify Google Maps Autocomplete options used for address searching as JSON object. Follow the <a href ='https://developers.google.com/maps/documentation/javascript/places-autocomplete' target='_blank'>link</a> for available options",
+        tooltip: 'Specify Google Maps Autocomplete options used for address searching as JSON object. Follow the <a href =\'https://developers.google.com/maps/documentation/javascript/places-autocomplete\' target=\'_blank\'>link</a> for available options',
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'google',
-                ],
-            },
+            json: { '===': [{ var: 'data.provider' }, 'google'] },
         },
     },
     {

package/lib/cjs/components/alert/Alert.js

@@ -15,7 +15,7 @@ class Alert {
     }
     get refsNames() {
         return {
-            messageRef: 'multiple',
+            messageRef: 'multiple'
         };
     }
     get alertTypes() {
@@ -23,15 +23,11 @@ class Alert {
             error: 'danger',
             success: 'success',
             info: 'info',
-            warning: 'warning',
+            warning: 'warning'
         };
     }
     showErrors(errors = [], triggerEvent = false, options = {}) {
-        errors = lodash_1.default.isArray(errors)
-            ? errors
-            : [
-                errors,
-            ];
+        errors = lodash_1.default.isArray(errors) ? errors : [errors];
         const messagesList = this.createMessagesList('error', errors);
         this.showAlert('error', messagesList, options);
         if (triggerEvent) {
@@ -46,7 +42,7 @@ class Alert {
         }
         else {
             messageElement = this.parentComponent.ce('p', {
-                ref: 'messageRef',
+                ref: 'messageRef'
             });
         }
         this.showAlert(type, messageElement, options);
@@ -62,7 +58,7 @@ class Alert {
         this.parentComponent.setContent(p, this.parentComponent.t('error'));
         const ul = this.parentComponent.ce('ul');
         const messagesList = document.createDocumentFragment();
-        errors.forEach((err) => this.appendErrorToList(err, ul));
+        errors.forEach(err => this.appendErrorToList(err, ul));
         p.appendChild(ul);
         messagesList.appendChild(p);
         return messagesList;
@@ -82,7 +78,7 @@ class Alert {
             this.clear();
         }
         if (messagesList) {
-            const { id = `${type}-list-${this.parentComponent.id}`, customClasses = `alert alert-${alertType}`, } = options;
+            const { id = `${type}-list-${this.parentComponent.id}`, customClasses = `alert alert-${alertType}` } = options;
             this.alert = this.parentComponent.ce('div', { id, class: customClasses });
             if (messagesList instanceof HTMLElement) {
                 this.parentComponent.appendTo(messagesList, this.alert);
@@ -104,17 +100,17 @@ class Alert {
                 (e) => {
                     const key = e.currentTarget.dataset.componentKey;
                     this.focusOnComponent(key);
-                },
+                }
             ], keypress: [
                 ...keyPressListeners,
                 (e) => {
                     const key = e.currentTarget.dataset.componentKey;
                     this.focusOnComponent(key);
-                },
+                }
             ] });
         if ((_c = this.refs.messageRef) === null || _c === void 0 ? void 0 : _c.length) {
-            this.refs.messageRef.forEach((el) => {
-                Object.entries(customEvents).forEach(([event, listeners,]) => {
+            this.refs.messageRef.forEach(el => {
+                Object.entries(customEvents).forEach(([event, listeners]) => {
                     listeners.forEach((listener) => this.parentComponent.addEventListener(el, event, listener));
                     this.eventListenersKeys.push(event);
                 });
@@ -125,24 +121,22 @@ class Alert {
         var _a;
         try {
             if ((_a = this.refs.messageRef) === null || _a === void 0 ? void 0 : _a.length) {
-                this.refs.messageRef.forEach((el) => {
-                    this.eventListenersKeys.forEach((event) => this.parentComponent.removeEventListener(el, event));
+                this.refs.messageRef.forEach(el => {
+                    this.eventListenersKeys.forEach(event => this.parentComponent.removeEventListener(el, event));
                 });
             }
             this.refs = {};
             this.parentComponent.removeChildFrom(this.alert, this.container);
             this.alert = null;
         }
-        catch (ignoreErr) {
+        catch (err) {
             // ignore
         }
     }
     focusOnComponent(keyOrPath) {
         var _a;
         if (keyOrPath) {
-            const path = this.parentComponent._parentPath
-                ? keyOrPath.replace(this.parentComponent._parentPath, '')
-                : keyOrPath;
+            const path = this.parentComponent._parentPath ? keyOrPath.replace(this.parentComponent._parentPath, '') : keyOrPath;
             const component = (_a = this.parentComponent.root) === null || _a === void 0 ? void 0 : _a.getComponent(path, null, keyOrPath);
             if (component && lodash_1.default.isFunction(component.focus)) {
                 component.focus();
@@ -161,7 +155,7 @@ class Alert {
             style: 'cursor: pointer',
             ref: 'messageRef',
             tabIndex: 0,
-            'aria-label': `${message}. Click to navigate to the field with following error.`,
+            'aria-label': `${message}. Click to navigate to the field with following error.`
         };
         const li = this.parentComponent.ce('li', params);
         this.parentComponent.setContent(li, message);