@formio/js 5.4.1 → 5.4.2

package/lib/cjs/utils/utils.js

@@ -1045,9 +1045,7 @@ function fieldData(data, component) {
             }
             // Convert old single field data in submissions to multiple
             if (key === parts[parts.length - 1] && component.multiple && !Array.isArray(value[key])) {
-                value[key] = [
-                    value[key],
-                ];
+                value[key] = [value[key]];
             }
             // Set the value of this key.
             value = value[key];
@@ -1057,9 +1055,7 @@ function fieldData(data, component) {
     else {
         // Convert old single field data in submissions to multiple
         if (component.multiple && !Array.isArray(data[component.key])) {
-            data[component.key] = [
-                data[component.key],
-            ];
+            data[component.key] = [data[component.key]];
         }
         // Fix for checkbox type radio submission values in tableView
         if (component.type === 'checkbox' && component.inputType === 'radio') {
@@ -1189,10 +1185,7 @@ function withSwitch(a, b) {
         state = next;
         next = prev;
     }
-    return [
-        get,
-        toggle,
-    ];
+    return [get, toggle];
 }
 exports.withSwitch = withSwitch;
 /**
@@ -1323,9 +1316,7 @@ function translateElemValue(elem, translate) {
  * @returns {void}
  */
 function translateDeepTag(tag, translate) {
-    const children = tag.children.length && [
-        ...tag.children,
-    ];
+    const children = tag.children.length && [...tag.children];
     const shouldTranslateEntireContent = children &&
         children.every((child) => child.children.length === 0 && inTextTags.some((tag) => child.nodeName === tag));
     if (!children || shouldTranslateEntireContent) {
@@ -1367,10 +1358,7 @@ function sanitize(string, options) {
     }
     // Dompurify configuration
     const sanitizeOptions = {
-        ADD_ATTR: [
-            'ref',
-            'target',
-        ],
+        ADD_ATTR: ['ref', 'target'],
         USE_PROFILES: { html: true },
     };
     // Use profiles
@@ -1463,9 +1451,7 @@ exports.isInputComponent = isInputComponent;
 function getArrayFromComponentPath(pathStr) {
     if (!pathStr || !lodash_1.default.isString(pathStr)) {
         if (!lodash_1.default.isArray(pathStr)) {
-            return [
-                pathStr,
-            ];
+            return [pathStr];
         }
         return pathStr;
     }
@@ -1666,9 +1652,7 @@ function getComponentSavedTypes(fullSchema) {
         return [];
     }
     if (schema.multiple) {
-        return [
-            exports.componentValueTypes.array,
-        ];
+        return [exports.componentValueTypes.array];
     }
     return null;
 }
@@ -1709,11 +1693,17 @@ function hasEncodedTimezone(value) {
 }
 exports.hasEncodedTimezone = hasEncodedTimezone;
 // Types for min max validation if value = string
-const TYPES = new Map([["char", "Length"], ["word", "Words"]]);
+const TYPES = new Map([
+    ['char', 'Length'],
+    ['word', 'Words'],
+]);
 // The number from which the remaining character(words) count message starts being read
-const REMAIN_COUNT = new Map([["char", 10], ["word", 5]]);
+const REMAIN_COUNT = new Map([
+    ['char', 10],
+    ['word', 5],
+]);
 function getWordOrCharacterLabel(isWordType, count) {
-    const base = isWordType ? "word" : "character";
+    const base = isWordType ? 'word' : 'character';
     return Math.abs(count) === 1 ? base : `${base}s`;
 }
 /**
@@ -1725,17 +1715,17 @@ function getWordOrCharacterLabel(isWordType, count) {
  * @returns {string} - The messsage string
  */
 function getScreenReaderMessage(component, type, value) {
-    const isWordType = type === "word";
-    const maxKey = typeof value === "string" && (type === "char" || isWordType)
+    const isWordType = type === 'word';
+    const maxKey = typeof value === 'string' && (type === 'char' || isWordType)
         ? `validate.max${TYPES.get(type)}`
-        : "validate.max";
-    const minKey = typeof value === "string" && (type === "char" || isWordType)
+        : 'validate.max';
+    const minKey = typeof value === 'string' && (type === 'char' || isWordType)
         ? `validate.min${TYPES.get(type)}`
-        : "validate.min";
+        : 'validate.min';
     const max = lodash_1.default.parseInt(lodash_1.default.get(component.component, maxKey), 10);
     const min = lodash_1.default.parseInt(lodash_1.default.get(component.component, minKey), 10);
-    let message = "";
-    if (typeof value === "string") {
+    let message = '';
+    if (typeof value === 'string') {
         const currentLength = isWordType ? component.getWordCount(value) : value.length;
         if (!isNaN(max)) {
             const remains = max - currentLength;
@@ -1771,8 +1761,8 @@ function getScreenReaderMessage(component, type, value) {
             }
         }
     }
-    else if (typeof value === "number" || value === null) {
-        if (value != null && value !== "") {
+    else if (typeof value === 'number' || value === null) {
+        if (value != null && value !== '') {
             if (!isNaN(max) && value > max) {
                 message += `Number cannot be greater than ${max}. `;
             }
@@ -1798,11 +1788,11 @@ function getScreenReaderMessage(component, type, value) {
  * @returns {undefined}
  */
 function announceScreenReaderMessage(component, value, index = 0, forFocus = false) {
-    if (typeof value !== "string" && typeof value !== "number" && value !== null) {
+    if (typeof value !== 'string' && typeof value !== 'number' && value !== null) {
         return;
     }
     // The ref for announcing messages
-    const messageSpan = "announceMessage";
+    const messageSpan = 'announceMessage';
     if (!component.refs[messageSpan])
         return;
     const el = component.refs[messageSpan][index];
@@ -1810,19 +1800,19 @@ function announceScreenReaderMessage(component, value, index = 0, forFocus = fal
         return;
     // Define types for validation
     const typesToCheck = [];
-    if (typeof value === "string")
-        typesToCheck.push("char", "word");
-    if (typeof value === "number" || value === null)
-        typesToCheck.push("number");
+    if (typeof value === 'string')
+        typesToCheck.push('char', 'word');
+    if (typeof value === 'number' || value === null)
+        typesToCheck.push('number');
     // Construct the combined message
     const combinedMessage = typesToCheck
-        .map(type => getScreenReaderMessage(component, type, value))
-        .filter(msg => msg)
-        .join(" ")
+        .map((type) => getScreenReaderMessage(component, type, value))
+        .filter((msg) => msg)
+        .join(' ')
         .trim();
     if (forFocus) {
         setTimeout(() => {
-            el.textContent = "";
+            el.textContent = '';
             setTimeout(() => {
                 el.textContent = combinedMessage;
             }, 50);
@@ -1831,7 +1821,7 @@ function announceScreenReaderMessage(component, value, index = 0, forFocus = fal
     }
     clearTimeout(el._announceTimer);
     el._announceTimer = setTimeout(() => {
-        el.textContent = "";
+        el.textContent = '';
         setTimeout(() => {
             el.textContent = combinedMessage;
         }, 50);
@@ -1844,7 +1834,7 @@ exports.announceScreenReaderMessage = announceScreenReaderMessage;
  */
 function screenReaderSpeech(text) {
     const ariaSpeechElement = document.createElement('div');
-    ariaSpeechElement.setAttribute("style", "border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;white-space: nowrap;");
+    ariaSpeechElement.setAttribute('style', 'border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;white-space: nowrap;');
     document.body.append(ariaSpeechElement);
     ariaSpeechElement.ariaLive = 'assertive';
     setTimeout(() => {

package/lib/cjs/widgets/CalendarWidget.js

@@ -128,9 +128,7 @@ class CalendarWidget extends InputWidget_1.default {
                 this.emit('blur');
             }
         };
-        Formio_1.Formio.requireLibrary('flatpickr-css', 'flatpickr', [
-            { type: 'styles', src: `${Formio_1.Formio.cdn['flatpickr-formio']}/flatpickr.min.css` },
-        ], true);
+        Formio_1.Formio.requireLibrary('flatpickr-css', 'flatpickr', [{ type: 'styles', src: `${Formio_1.Formio.cdn['flatpickr-formio']}/flatpickr.min.css` }], true);
         if (this.component.shortcutButtons) {
             this.component.shortcutButtons = this.component.shortcutButtons.filter((btn) => btn.label && btn.onClick);
         }
@@ -390,9 +388,7 @@ class CalendarWidget extends InputWidget_1.default {
         this._input.removeAttribute('id');
         this._input.removeAttribute('aria-labelledby');
         this._input.removeAttribute('aria-required');
-        const excludedFromMaskFormats = [
-            'MMMM',
-        ];
+        const excludedFromMaskFormats = ['MMMM'];
         if (!this.settings.readOnly &&
             !lodash_1.default.some(excludedFromMaskFormats, (format) => lodash_1.default.includes(this.settings.format, format))) {
             // Enforce the input mask of the format.

package/lib/mjs/Embed.js

@@ -14,7 +14,7 @@ export class Formio {
         Formio._formioReady = ready;
         Formio._formioReadyReject = reject;
     });
-    static version = '5.4.1';
+    static version = '5.4.2';
     static setLicense(license, norecurse = false) {
         Formio.license = license;
         if (!norecurse && Formio.FormioClass) {
@@ -155,10 +155,10 @@ export class Formio {
         if (!liveRegion) {
             liveRegion = Formio.createElement('div', {
                 id: 'formio-announcements',
-                'role': 'status',
+                role: 'status',
                 'aria-live': 'polite',
                 'aria-atomic': 'true',
-                style: 'position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0);'
+                style: 'position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0);',
             });
             document.body.appendChild(liveRegion);
         }
@@ -265,9 +265,7 @@ export class Formio {
         Formio.cdn = new CDN(Formio.config.cdn, Formio.config.cdnUrls || {});
         Formio.config.libs = Formio.config.libs || {
             uswds: {
-                dependencies: [
-                    'fontawesome',
-                ],
+                dependencies: ['fontawesome'],
                 js: `${Formio.cdn.uswds}/uswds.min.js`,
                 css: `${Formio.cdn.uswds}/uswds.min.css`,
                 use: true,
@@ -285,15 +283,11 @@ export class Formio {
                   }`,
             },
             bootstrap4: {
-                dependencies: [
-                    'fontawesome',
-                ],
+                dependencies: ['fontawesome'],
                 css: `${Formio.cdn.bootstrap4}/css/bootstrap.min.css`,
             },
             bootstrap: {
-                dependencies: [
-                    'bootstrap-icons',
-                ],
+                dependencies: ['bootstrap-icons'],
                 css: `${Formio.cdn.bootstrap}/css/bootstrap.min.css`,
             },
             'bootstrap-icons': {
@@ -333,9 +327,7 @@ export class Formio {
             'yeti',
         ].forEach((template) => {
             Formio.config.libs[template] = {
-                dependencies: [
-                    'bootstrap-icons',
-                ],
+                dependencies: ['bootstrap-icons'],
                 css: `${Formio.cdn.bootswatch}/dist/${template}/bootstrap.min.css`,
             };
         });
@@ -376,7 +368,7 @@ export class Formio {
             // Due to an issue with quill not loading styles in the shadowdom, we need to add quill styles and js to the shadowdom
             const quill = {
                 js: `${Formio.cdn.quill}/quill.js`,
-                css: `${Formio.cdn.quill}/quill.snow.css`
+                css: `${Formio.cdn.quill}/quill.snow.css`,
             };
             await Formio.addLibrary(wrapper, quill, 'quill');
         }

package/lib/mjs/Form.js

@@ -414,10 +414,10 @@ export default class Form extends Element {
      */
     build() {
         if (!this.instance) {
-            return Promise.reject('Form not ready. Use form.ready promise');
+            return Promise.reject(this.t('formNotReady'));
         }
         if (!this.element) {
-            return Promise.reject('No DOM element for form.');
+            return Promise.reject(this.t('noFormElement'));
         }
         // Add temporary loader.
         const template = this.options && this.options.template ? this.options.template : 'bootstrap';
@@ -435,7 +435,7 @@ export default class Form extends Element {
     }
     render() {
         if (!this.instance) {
-            return Promise.reject('Form not ready. Use form.ready promise');
+            return Promise.reject(this.t('formNotReady'));
         }
         return Promise.resolve(this.instance.render()).then((param) => {
             this.emit('render', param);
@@ -444,7 +444,7 @@ export default class Form extends Element {
     }
     attach(element) {
         if (!this.instance) {
-            return Promise.reject('Form not ready. Use form.ready promise');
+            return Promise.reject(this.t('formNotReady'));
         }
         if (this.element) {
             delete this.element.component;

package/lib/mjs/Formio.js

@@ -4,7 +4,7 @@ import CDN from './CDN';
 import Providers from './providers';
 FormioCore.cdn = new CDN();
 FormioCore.Providers = Providers;
-FormioCore.version = '5.4.1';
+FormioCore.version = '5.4.2';
 CDN.defaultCDN = FormioCore.version.includes('rc')
     ? 'https://cdn.test-form.io'
     : 'https://cdn.form.io';
@@ -83,14 +83,7 @@ FormioCore.prototype.deleteFile = function (file, options) {
     return FormioCore.pluginAlter('wrapFileRequestPromise', request, requestArgs);
 };
 // Esnure we proxy the following methods to the FormioEmbed class.
-[
-    'setBaseUrl',
-    'setApiUrl',
-    'setAppUrl',
-    'setProjectUrl',
-    'setPathType',
-    'setLicense',
-].forEach((fn) => {
+['setBaseUrl', 'setApiUrl', 'setAppUrl', 'setProjectUrl', 'setPathType', 'setLicense'].forEach((fn) => {
     const baseFn = FormioCore[fn];
     FormioCore[fn] = function (arg) {
         const retVal = FormioEmbed[fn](arg, true);

package/lib/mjs/InlineEmbed.js

@@ -27,10 +27,7 @@ export function embed(config = {}) {
         let scriptSrc = thisScript.src.replace(/^([^?]+).*/, '$1').split('/');
         scriptSrc.pop();
         let cdnSrc = '';
-        if ([
-            'js',
-            'offline',
-        ].includes(scriptSrc[scriptSrc.length - 1])) {
+        if (['js', 'offline'].includes(scriptSrc[scriptSrc.length - 1])) {
             scriptSrc.pop();
             scriptSrc = cdnSrc = scriptSrc.join('/');
             scriptSrc += '/js';

package/lib/mjs/PDF.js

@@ -1,6 +1,23 @@
 import { Formio } from './Formio';
 import Webform from './Webform';
 import { fastCloneDeep, eachComponent } from './utils';
+const getIframeOrigin = (iframeElement) => {
+    try {
+        const origin = new URL(iframeElement.src, window.location.href).origin;
+        return origin === 'null' ? null : origin;
+    }
+    catch (ignoreErr) {
+        return null;
+    }
+};
+const isTrustedIframeMessage = (event, form) => {
+    const iframeWindow = form?.iframeElement?.contentWindow;
+    const iframeOrigin = form?.iframeElement && getIframeOrigin(form.iframeElement);
+    return Boolean(iframeWindow &&
+        iframeOrigin &&
+        event.source === iframeWindow &&
+        event.origin === iframeOrigin);
+};
 export default class PDF extends Webform {
     constructor(element, options) {
         options.display = 'pdf';
@@ -12,11 +29,11 @@ export default class PDF extends Webform {
         // Handle an iframe submission.
         this.on('iframe-submission', (submission) => this.setValue(submission, {
             fromIframe: true,
-            noDefault: true
+            noDefault: true,
         }), true);
         this.on('iframe-change', (submission) => this.setValue(submission, {
             fromIframe: true,
-            noDefault: true
+            noDefault: true,
         }), true);
         this.on('iframe-getIframePositions', (query) => {
             const iframe = document.getElementById(`iframe-${query.formId}`);
@@ -162,9 +179,7 @@ export default class PDF extends Webform {
             return '';
         }
         let iframeSrc = `${this._form.settings.pdf.src}.html`;
-        const params = [
-            `id=${this.id}`,
-        ];
+        const params = [`id=${this.id}`];
         if (this.options.showCheckboxBackground || this._form.settings.showCheckboxBackground) {
             params.push('checkboxbackground=1');
         }
@@ -276,19 +291,23 @@ if (typeof window !== 'undefined') {
         catch (ignoreErr) {
             eventData = null;
         }
-        // If this form exists, then emit the event within this form.
+        // If this form exists and the message came from its PDF iframe, emit the event within this form.
         if (eventData &&
             eventData.name &&
             eventData.formId &&
             Formio.forms.hasOwnProperty(eventData.formId)) {
+            const form = Formio.forms[eventData.formId];
+            if (!isTrustedIframeMessage(event, form)) {
+                return;
+            }
             if (eventData.compPath) {
-                const comp = Formio.forms[eventData.formId].getComponent(eventData.compPath);
+                const comp = form.getComponent(eventData.compPath);
                 if (comp) {
                     comp.emit(eventData.name, eventData.data);
                 }
             }
             else {
-                Formio.forms[eventData.formId].emit(`iframe-${eventData.name}`, eventData.data);
+                form.emit(`iframe-${eventData.name}`, eventData.data);
             }
         }
     });

package/lib/mjs/PDFBuilder.js

@@ -194,10 +194,10 @@ export default class PDFBuilder extends WebformBuilder {
                 const progress = Math.floor((event.loaded / event.total) * 100);
                 this.refs.uploadProgress.style.width = `${progress}%`;
                 if (progress > 98) {
-                    this.refs.uploadProgress.innerHTML = this.t('Converting PDF. Please wait.');
+                    this.refs.uploadProgress.innerHTML = this.t('waitPdfConverting');
                 }
                 else {
-                    this.refs.uploadProgress.innerHTML = `${this.t('Uploading')} ${progress}%`;
+                    this.refs.uploadProgress.innerHTML = `${this.t('uploading')} ${progress}%`;
                 }
             }
         }, `${this.projectUrl}/upload`, {}, 'file')
@@ -241,7 +241,7 @@ export default class PDFBuilder extends WebformBuilder {
             return;
         }
         this.refs.uploadError.style.display = message ? '' : 'none';
-        this.refs.uploadError.innerHTML = message;
+        this.refs.uploadError.innerHTML = this.t(`${message}`);
     }
     createForm(options) {
         // Instantiate the webform from the PDF class instead of Webform
@@ -251,9 +251,7 @@ export default class PDFBuilder extends WebformBuilder {
         this.webform.on('attach', () => {
             // If the dropzone exists but has been removed in a PDF rebuild, reinstate it
             if (this.refs.iframeDropzone &&
-                ![
-                    ...this.refs.form.children,
-                ].includes(this.refs.iframeDropzone)) {
+                ![...this.refs.form.children].includes(this.refs.iframeDropzone)) {
                 this.prependTo(this.refs.iframeDropzone, this.refs.form);
             }
         });
@@ -369,9 +367,7 @@ export default class PDFBuilder extends WebformBuilder {
             return;
         }
         this.refs['sidebar-container'].forEach((container) => {
-            [
-                ...container.children,
-            ].forEach((el) => {
+            [...container.children].forEach((el) => {
                 el.draggable = true;
                 el.setAttribute('draggable', true);
                 this.removeEventListener(el, 'dragstart');
@@ -485,7 +481,7 @@ export default class PDFBuilder extends WebformBuilder {
                     name: 'showBuilderErrors',
                     data: {
                         compId: comp.component.id,
-                        errorMessage: `API Key is not unique: ${comp.key}`,
+                        errorMessage: `${this.t('notUniqueKey')}: ${comp.key}`,
                     },
                 });
             }

package/lib/mjs/Webform.d.ts

@@ -269,6 +269,7 @@ declare class Webform extends NestedDataComponent {
     get schema(): any;
     mergeData(_this: any, _that: any): void;
     editing: boolean | undefined;
+    subFromServer: any;
     _submission: any;
     /**
      * Build the form.

package/lib/mjs/Webform.js

@@ -265,11 +265,7 @@ export default class Webform extends NestedDataComponent {
             return false;
         }
         if (element.nodeName === 'INPUT') {
-            return ([
-                'text',
-                'email',
-                'password',
-            ].indexOf(element.type) === -1);
+            return ['text', 'email', 'password'].indexOf(element.type) === -1;
         }
         return true;
     }
@@ -542,7 +538,7 @@ export default class Webform extends NestedDataComponent {
         }
         if ('schema' in form && compareVersions(form.schema, '1.x') > 0) {
             this.ready.then(() => {
-                this.setAlert('alert alert-danger', 'Form schema is for a newer version, please upgrade your renderer. Some functionality may not work.');
+                this.setAlert('alert alert-danger', this.t('newFormSchema'));
             });
         }
         // See if they pass a module, and evaluate it if so.
@@ -739,9 +735,7 @@ export default class Webform extends NestedDataComponent {
         });
     }
     get schema() {
-        const schema = fastCloneDeep(_.omit(this._form, [
-            'components',
-        ]));
+        const schema = fastCloneDeep(_.omit(this._form, ['components']));
         schema.components = [];
         this.eachComponent((component) => schema.components.push(component.schema));
         return schema;
@@ -768,10 +762,12 @@ export default class Webform extends NestedDataComponent {
         if (!this.options.submissionTimezone && submission.metadata && submission.metadata.timezone) {
             this.options.submissionTimezone = submission.metadata.timezone;
         }
+        this.subFromServer = _.cloneDeep(submission.data);
         const changed = super.setValue(submission.data, flags);
         if (!flags.sanitize) {
             this.mergeData(this.data, submission.data);
         }
+        // GOTCHA(G-FJS01)
         submission.data = this.data;
         this._submission = submission;
         return changed;
@@ -1008,6 +1004,7 @@ export default class Webform extends NestedDataComponent {
             const component = this.getComponent(key);
             if (component) {
                 component.focus();
+                component.scrollIntoView();
             }
         }
     }
@@ -1031,9 +1028,7 @@ export default class Webform extends NestedDataComponent {
     showErrors(errors, triggerEvent) {
         this.loading = false;
         if (!Array.isArray(errors)) {
-            errors = [
-                errors,
-            ];
+            errors = [errors];
         }
         if (Array.isArray(this.errors) &&
             // do not show components validation errors in alert for draft submission
@@ -1065,11 +1060,7 @@ export default class Webform extends NestedDataComponent {
         }
         const displayedErrors = [];
         if (errors.length) {
-            errors = _.uniqBy(errors, (error) => [
-                error.message,
-                error.component?.id,
-                error.context?.path,
-            ].join());
+            errors = _.uniqBy(errors, (error) => [error.message, error.component?.id, error.context?.path].join());
             const createListItem = (message, index) => {
                 const err = errors[index];
                 const messageFromIndex = !_.isUndefined(index) && errors && errors[index];
@@ -1096,6 +1087,7 @@ export default class Webform extends NestedDataComponent {
             });
         }
         const errorsList = this.renderTemplate('errorsList', { errors: displayedErrors });
+        // GOTCHA(G-FJS02)
         // Only paint the alert from a subform when the root won't double paint it to avoid a painful flicker
         if (this === this.root || !this.root?.submitted) {
             this.root?.setAlert('danger', errorsList);
@@ -1136,7 +1128,8 @@ export default class Webform extends NestedDataComponent {
                 liveRegion.setAttribute('role', 'status');
                 liveRegion.setAttribute('aria-live', 'polite');
                 liveRegion.setAttribute('aria-atomic', 'true');
-                liveRegion.style.cssText = 'position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0);';
+                liveRegion.style.cssText =
+                    'position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0);';
                 document.body.appendChild(liveRegion);
             }
             // Announce the submission completion using VPAT clear-and-reset technique
@@ -1352,11 +1345,7 @@ export default class Webform extends NestedDataComponent {
                             };
                         }
                         // Ensure err is an array.
-                        err = Array.isArray(err)
-                            ? err
-                            : [
-                                err,
-                            ];
+                        err = Array.isArray(err) ? err : [err];
                         return reject(err);
                     }
                     this.loading = true;
@@ -1407,9 +1396,7 @@ export default class Webform extends NestedDataComponent {
             });
         }
         else if (typeof error === 'string') {
-            this.serverErrors = [
-                { fromServer: true, level: 'error', message: error },
-            ];
+            this.serverErrors = [{ fromServer: true, level: 'error', message: error }];
         }
     }
     executeSubmit(options) {
@@ -1467,7 +1454,7 @@ export default class Webform extends NestedDataComponent {
     }
     submitUrl(URL, headers) {
         if (!URL) {
-            return console.warn('Missing URL argument');
+            return console.warn(this.t('missingUrl'));
         }
         const submission = this.submission || {};
         const API_URL = URL;
@@ -1488,7 +1475,7 @@ export default class Webform extends NestedDataComponent {
             })
                 .then(() => {
                 this.emit('requestDone');
-                this.setAlert('success', '<p> Success </p>');
+                this.setAlert('success', `<p> ${this.t('success')} </p>`);
             })
                 .catch((e) => {
                 const message = `${e.statusText ? e.statusText : ''} ${e.status ? e.status : e}`;
@@ -1499,9 +1486,10 @@ export default class Webform extends NestedDataComponent {
             });
         }
         else {
-            this.emit('error', 'You should add a URL to this button.');
-            this.setAlert('warning', 'You should add a URL to this button.');
-            return console.warn('You should add a URL to this button.');
+            const message = this.t('urlNotAttachedToBtn');
+            this.emit('error', message);
+            this.setAlert('warning', message);
+            return console.warn(message);
         }
     }
     triggerCaptcha(components = null) {