@formio/js 5.4.1 → 5.4.3

package/lib/cjs/utils/i18n.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.I18n = void 0;
 const Evaluator_1 = require("./Evaluator");
 const i18n_1 = __importDefault(require("../i18n"));
+const lodash_1 = require("lodash");
+const core_1 = require("@formio/core");
 const i18Defaults = {};
 for (const lang in i18n_1.default.resources) {
     if (i18n_1.default.resources.hasOwnProperty(lang)) {
@@ -17,14 +19,29 @@ for (const lang in i18n_1.default.resources) {
  */
 class I18n {
     constructor(languages = {}) {
-        this.languages = i18Defaults;
+        var _a;
+        this.languages = (0, core_1.fastCloneDeep)(I18n.languages || {});
+        this.defaultKeys = ((_a = I18n.languages) === null || _a === void 0 ? void 0 : _a.en) || {};
         this.language = 'en';
         this.originalLanguage = 'en';
         this.currentLanguage = i18Defaults.en;
         this.setLanguages(languages);
         this.changeLanguage(this.language);
     }
-    setLanguages(languages) {
+    static setDefaultTranslations(languages) {
+        if ((0, lodash_1.isEmpty)(languages)) {
+            return;
+        }
+        for (const lang in languages) {
+            if (lang !== 'language' && languages.hasOwnProperty(lang)) {
+                if (!this.languages[lang]) {
+                    this.languages[lang] = {};
+                }
+                this.languages[lang] = Object.assign(Object.assign({}, languages[lang]), this.languages[lang]);
+            }
+        }
+    }
+    setLanguages(languages, noDefaultOverride) {
         if (languages.resources) {
             for (const lang in languages.resources) {
                 if (languages.resources.hasOwnProperty(lang)) {
@@ -51,7 +68,8 @@ class I18n {
                 if (!this.languages[lang]) {
                     this.languages[lang] = {};
                 }
-                this.languages[lang] = Object.assign(Object.assign({}, this.languages[lang]), languages[lang]);
+                this.languages[lang] = noDefaultOverride
+                    ? Object.assign(Object.assign({}, languages[lang]), this.languages[lang]) : Object.assign(Object.assign({}, this.languages[lang]), languages[lang]);
             }
         }
     }
@@ -60,13 +78,7 @@ class I18n {
     }
     dir(lang = '') {
         lang = lang || this.language;
-        const rtls = [
-            'ar',
-            'he',
-            'fa',
-            'ps',
-            'ur',
-        ];
+        const rtls = ['ar', 'he', 'fa', 'ps', 'ur'];
         return rtls.includes(lang) ? 'rtl' : 'ltr';
     }
     static createInstance() {
@@ -88,14 +100,23 @@ class I18n {
     }
     t(text, ...args) {
         var _a;
-        if (this.currentLanguage[text]) {
+        let currentTranslation = this.currentLanguage[text];
+        // provide compatibility with cases where the entire phrase is used as a key
+        // get the phrase that is possibly being used as a key
+        const defaultKey = this.defaultKeys[text];
+        if (defaultKey && this.currentLanguage[defaultKey]) {
+            // get translation using the phrase as a key
+            currentTranslation = this.currentLanguage[defaultKey];
+        }
+        if (currentTranslation) {
             const customTranslationFieldName = (_a = args[0]) === null || _a === void 0 ? void 0 : _a.field;
             if (customTranslationFieldName && this.currentLanguage[customTranslationFieldName]) {
                 args[0].field = this.currentLanguage[customTranslationFieldName];
             }
-            return Evaluator_1.Evaluator.interpolateString(this.currentLanguage[text], ...args);
+            return Evaluator_1.Evaluator.interpolateString(currentTranslation, ...args);
         }
         return Evaluator_1.Evaluator.interpolateString(text, ...args);
     }
 }
 exports.I18n = I18n;
+I18n.languages = i18Defaults;

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/Element.js

@@ -546,7 +546,7 @@ export default class Element {
     interpolate(string, data, options = {}) {
         if (typeof string !== 'function' &&
             (this.component.content || this.component.html) &&
-            !FormioUtils.Evaluator.templateSettings.interpolate.test(string)) {
+            !(new RegExp(FormioUtils.Evaluator.templateSettings.interpolate)).test(string)) {
             string = FormioUtils.translateHTMLTemplate(String(string), (value) => this.t(value));
         }
         if (this.component.filter === string && !this.options.building) {

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.3';
     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.3';
 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.