@formio/js 5.3.0 → 5.4.0-api98.1

package/lib/cjs/translations/en.js

@@ -78,4 +78,6 @@ exports.default = {
     requiredDayEmpty: '{{ field }} is required',
     requiredMonthField: '{{ field }} is required',
     requiredYearField: '{{ field }} is required',
+    fileTooSmall: 'File is too small; it must be at least {{ size }}',
+    fileTooBig: 'File is too big; it must be at most {{ size }}'
 };

package/lib/cjs/utils/conditionOperators/IsEqualTo.d.ts

@@ -1,9 +1,7 @@
 export default class IsEqualTo extends ConditionOperator {
-    execute({ value, comparedValue, instance, path }: {
+    execute({ value, comparedValue }: {
         value: any;
         comparedValue: any;
-        instance: any;
-        path: any;
     }): any;
 }
 import ConditionOperator from './ConditionOperator';

package/lib/cjs/utils/conditionOperators/IsEqualTo.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const ConditionOperator_1 = __importDefault(require("./ConditionOperator"));
 const lodash_1 = __importDefault(require("lodash"));
-const __1 = require("../");
 class IsEqualTo extends ConditionOperator_1.default {
     static get operatorKey() {
         return 'isEqual';
@@ -13,8 +12,7 @@ class IsEqualTo extends ConditionOperator_1.default {
     static get displayedName() {
         return 'Is Equal To';
     }
-    execute({ value, comparedValue, instance, path }) {
-        var _a, _b;
+    execute({ value, comparedValue }) {
         if ((value || value === false) &&
             comparedValue &&
             typeof value !== typeof comparedValue &&
@@ -26,19 +24,15 @@ class IsEqualTo extends ConditionOperator_1.default {
                 // ignore
             }
         }
-        if ((_a = instance === null || instance === void 0 ? void 0 : instance.root) === null || _a === void 0 ? void 0 : _a.getComponent) {
-            const conditionTriggerComponent = instance.root.getComponent(path);
-            if (conditionTriggerComponent &&
-                (0, __1.isSelectResourceWithObjectValue)(conditionTriggerComponent.component) &&
-                ((_b = conditionTriggerComponent.component) === null || _b === void 0 ? void 0 : _b.template)) {
-                return (0, __1.compareSelectResourceWithObjectTypeValues)(value, comparedValue, conditionTriggerComponent.component);
-            }
-        }
         //special check for select boxes
         if (lodash_1.default.isObject(value) && comparedValue && lodash_1.default.isBoolean(value[comparedValue])) {
             return value[comparedValue];
         }
-        return lodash_1.default.isEqual(value, comparedValue);
+        const valuesAreObjects = typeof comparedValue === 'object' &&
+            comparedValue !== null &&
+            typeof value === 'object' &&
+            value !== null;
+        return valuesAreObjects ? lodash_1.default.isMatch(value, comparedValue) : lodash_1.default.isEqual(comparedValue, value);
     }
 }
 exports.default = IsEqualTo;

package/lib/cjs/utils/conditionOperators/index.d.ts

@@ -1,6 +1,7 @@
 export default ConditionOperators;
 declare const ConditionOperators: {
-    [x: string]: typeof IsEqualTo | typeof DateGreaterThan;
+    [x: string]: typeof IsEqualTo | typeof IsEmptyValue | typeof DateGreaterThan;
 };
 import IsEqualTo from './IsEqualTo';
+import IsEmptyValue from './IsEmptyValue';
 import DateGreaterThan from './DateGreaterThan';

package/lib/cjs/utils/i18n.d.ts

@@ -7,6 +7,7 @@ export class I18n {
     constructor(languages?: {});
     languages: {};
     language: string;
+    originalLanguage: string;
     currentLanguage: any;
     setLanguages(languages: any): void;
     dir(lang?: string): "rtl" | "ltr";

package/lib/cjs/utils/i18n.js

@@ -19,6 +19,7 @@ class I18n {
     constructor(languages = {}) {
         this.languages = i18Defaults;
         this.language = 'en';
+        this.originalLanguage = 'en';
         this.currentLanguage = i18Defaults.en;
         this.setLanguages(languages);
         this.changeLanguage(this.language);
@@ -72,6 +73,7 @@ class I18n {
         return new I18n();
     }
     changeLanguage(language, ready = null) {
+        this.originalLanguage = language;
         if (!this.languages[language]) {
             language = 'en';
         }

package/lib/cjs/utils/index.d.ts

@@ -5,7 +5,7 @@ declare const FormioUtils: {
     Evaluator: DefaultEvaluator;
     interpolate: typeof interpolate;
     ConditionOperators: {
-        [x: string]: typeof import("./conditionOperators/IsEqualTo").default | typeof import("./conditionOperators/DateGreaterThan").default;
+        [x: string]: typeof import("./conditionOperators/IsEqualTo").default | typeof import("./conditionOperators/IsEmptyValue").default | typeof import("./conditionOperators/DateGreaterThan").default;
     };
     _: any;
     moment: typeof moment;
@@ -150,6 +150,7 @@ declare const FormioUtils: {
     getFocusableElements(element: HTMLElement): NodeList<HTMLElement>;
     getComponentSavedTypes(fullSchema: import("@formio/core").Component): string[] | null;
     hasEncodedTimezone(value: string): boolean;
+    announceScreenReaderMessage(component: any, value: any, index?: any, forFocus?: any): undefined;
     screenReaderSpeech(text: string): void;
     firstNonNil: any;
     componentValueTypes: {

package/lib/cjs/utils/utils.d.ts

@@ -499,6 +499,15 @@ export function getComponentSavedTypes(fullSchema: import('@formio/core').Compon
  * @returns {boolean} if value has encoded timezone
  */
 export function hasEncodedTimezone(value: string): boolean;
+/**
+ * The function for announcing messages via a screen reader
+ * @param {component} component - The component instance
+ * @param {value} value - The current component value
+ * @param {index} index - The component index
+ * @param {forFocus} forFocus - Whether the component is focused or not
+ * @returns {undefined}
+ */
+export function announceScreenReaderMessage(component: any, value: any, index?: any, forFocus?: any): undefined;
 /**
  * Outputs text to screen reader
  * @param {string} text The text to output to screen readers

package/lib/cjs/utils/utils.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getContextComponents = exports.observeOverload = exports.withSwitch = exports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.removeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = void 0;
-exports.screenReaderSpeech = exports.hasEncodedTimezone = exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports.getFocusableElements = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = void 0;
+exports.screenReaderSpeech = exports.announceScreenReaderMessage = exports.hasEncodedTimezone = exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports.getFocusableElements = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = void 0;
 const lodash_1 = __importDefault(require("lodash"));
 const moment_timezone_1 = __importDefault(require("moment-timezone/moment-timezone"));
 const jstimezonedetect_1 = __importDefault(require("jstimezonedetect"));
@@ -150,7 +150,7 @@ function getConditionalPathsRecursive(conditionPaths, data) {
             if (currentData.some((element) => typeof element !== 'object')) {
                 return;
             }
-            const hasInnerDataArray = currentData.find((x) => Array.isArray(x[conditionPaths[currentLocalIndex]]));
+            const hasInnerDataArray = currentData.find((x) => x && conditionPaths && Array.isArray(x[conditionPaths[currentLocalIndex]]));
             if (hasInnerDataArray) {
                 currentData.forEach((_, indexOutside) => {
                     const innerCompDataPath = `${currentPath}[${indexOutside}].${conditionPaths[currentLocalIndex]}`;
@@ -1691,6 +1691,136 @@ function hasEncodedTimezone(value) {
         value.match(/[+|-][0-9]{2}:[0-9]{2}$/));
 }
 exports.hasEncodedTimezone = hasEncodedTimezone;
+// Types for min max validation if value = string
+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]]);
+function getWordOrCharacterLabel(isWordType, count) {
+    const base = isWordType ? "word" : "character";
+    return Math.abs(count) === 1 ? base : `${base}s`;
+}
+/**
+ * The function calculates the message values depending on the type and the current component settings.
+ * @param {component} component - The component instance
+ * @param {type} type - The type of validation max and min
+ * @param {value} value - The current component value
+ * @param {forFocus} forFocus - Whether the component is focused or not
+ * @returns {string} - The messsage string
+ */
+function getScreenReaderMessage(component, type, value) {
+    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.min${TYPES.get(type)}`
+        : "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") {
+        const currentLength = isWordType ? component.getWordCount(value) : value.length;
+        if (!isNaN(max)) {
+            const remains = max - currentLength;
+            if (value) {
+                const threshold = REMAIN_COUNT.get(type) || max;
+                if (remains > 0 && remains < threshold) {
+                    message += `${remains} ${getWordOrCharacterLabel(isWordType, remains)} remaining. `;
+                }
+                else if (remains < 0) {
+                    const removeCount = Math.abs(remains);
+                    message += `${removeCount} ${getWordOrCharacterLabel(isWordType, removeCount)} should be removed. `;
+                }
+                else if (remains === 0) {
+                    message += `No ${getWordOrCharacterLabel(isWordType, 0)} remaining.`;
+                }
+            }
+            else {
+                message += `Maximum ${max} ${getWordOrCharacterLabel(isWordType, max)}. `;
+            }
+        }
+        if (!isNaN(min)) {
+            if (value) {
+                const remains = min - currentLength;
+                if (remains > 0) {
+                    message += `${remains} ${getWordOrCharacterLabel(isWordType, remains)} should be added.`;
+                }
+                if (remains === 0) {
+                    message += ``;
+                }
+            }
+            else {
+                message += `Minimum ${min} ${getWordOrCharacterLabel(isWordType, min)}. `;
+            }
+        }
+    }
+    else if (typeof value === "number" || value === null) {
+        if (value != null && value !== "") {
+            if (!isNaN(max) && value > max) {
+                message += `Number cannot be greater than ${max}. `;
+            }
+            if (!isNaN(min) && value < min) {
+                message += `Number cannot be less than ${min}.`;
+            }
+        }
+        else {
+            if (!isNaN(min))
+                message += `Minimum value ${min}. `;
+            if (!isNaN(max))
+                message += `Maximum value ${max}. `;
+        }
+    }
+    return message.trim();
+}
+/**
+ * The function for announcing messages via a screen reader
+ * @param {component} component - The component instance
+ * @param {value} value - The current component value
+ * @param {index} index - The component index
+ * @param {forFocus} forFocus - Whether the component is focused or not
+ * @returns {undefined}
+ */
+function announceScreenReaderMessage(component, value, index = 0, forFocus = false) {
+    if (typeof value !== "string" && typeof value !== "number" && value !== null) {
+        return;
+    }
+    // The ref for announcing messages
+    const messageSpan = "announceMessage";
+    if (!component.refs[messageSpan])
+        return;
+    const el = component.refs[messageSpan][index];
+    if (!el)
+        return;
+    // Define types for validation
+    const typesToCheck = [];
+    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(" ")
+        .trim();
+    if (forFocus) {
+        setTimeout(() => {
+            el.textContent = "";
+            requestAnimationFrame(() => {
+                el.textContent = combinedMessage;
+            });
+        }, 150);
+        return;
+    }
+    clearTimeout(el._announceTimer);
+    el._announceTimer = setTimeout(() => {
+        el.textContent = "";
+        requestAnimationFrame(() => {
+            el.textContent = combinedMessage;
+        });
+    }, 500);
+}
+exports.announceScreenReaderMessage = announceScreenReaderMessage;
 /**
  * Outputs text to screen reader
  * @param {string} text The text to output to screen readers

package/lib/cjs/widgets/CalendarWidget.js

@@ -452,7 +452,8 @@ class CalendarWidget extends InputWidget_1.default {
         // If other fields are used to calculate disabled dates, we need to redraw calendar to refresh disabled dates
         if (this.settings.disableFunction && this.componentInstance && this.componentInstance.root) {
             this.changeHandler = (e) => {
-                if (e.changed && this.calendar) {
+                var _a;
+                if (e.changed && ((_a = this.calendar) === null || _a === void 0 ? void 0 : _a.config)) {
                     this.calendar.redraw();
                 }
             };

package/lib/mjs/Embed.js

@@ -14,7 +14,7 @@ export class Formio {
         Formio._formioReady = ready;
         Formio._formioReadyReject = reject;
     });
-    static version = '5.3.0';
+    static version = '5.4.0-api98.1';
     static setLicense(license, norecurse = false) {
         Formio.license = license;
         if (!norecurse && Formio.FormioClass) {
@@ -148,6 +148,34 @@ export class Formio {
         if (successMessage && successMessage.toLowerCase() !== 'false' && instance.element) {
             instance.element.innerHTML = `<div class="alert-success" role="alert">${successMessage}</div>`;
         }
+        const announcementMessage = successMessage && successMessage.toLowerCase() !== 'false'
+            ? successMessage
+            : 'Form submission complete';
+        let liveRegion = document.getElementById('formio-announcements');
+        if (!liveRegion) {
+            liveRegion = Formio.createElement('div', {
+                id: 'formio-announcements',
+                '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);'
+            });
+            document.body.appendChild(liveRegion);
+        }
+        // Announce the submission completion using VPAT clear-and-reset technique
+        liveRegion.textContent = '';
+        liveRegion.setAttribute('aria-live', 'off');
+        requestAnimationFrame(() => {
+            setTimeout(() => {
+                liveRegion.setAttribute('aria-live', 'polite');
+                liveRegion.textContent = announcementMessage;
+                setTimeout(() => {
+                    if (liveRegion) {
+                        liveRegion.textContent = '';
+                    }
+                }, 1000);
+            }, 100);
+        });
         let returnUrl = Formio.config.redirect;
         // Allow form based configuration for return url.
         if (!returnUrl &&
@@ -326,6 +354,12 @@ export class Formio {
                 mode: 'open',
             });
             options.shadowRoot = wrapper;
+            // 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.min.js`,
+                css: `${Formio.cdn.quill}/quill.snow.css`
+            };
+            await Formio.addLibrary(wrapper, quill, 'quill');
         }
         element.parentNode.removeChild(element);
         wrapper.appendChild(element);

package/lib/mjs/Form.d.ts

@@ -45,7 +45,7 @@
  * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
  * @property {boolean} [readOnly] - Set this form to readOnly.
  * @property {boolean} [noAlerts] - Disable the alerts dialog.
- * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.
+ * @property {{[key: string]: string} | { translationsUrl: string }} [i18n] - The translation file for this rendering.
  * @property {string} [template] - Custom logic for creation of elements.
  * @property {boolean} [noDefaults] - Exclude default values from the settings.
  * @property {any} [fileService] - The file service for this form.
@@ -202,6 +202,8 @@ export type FormOptions = {
      */
     i18n?: {
         [key: string]: string;
+    } | {
+        translationsUrl: string;
     } | undefined;
     /**
      * - Custom logic for creation of elements.

package/lib/mjs/Form.js

@@ -50,7 +50,7 @@ import FormioUtils from './utils';
  * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
  * @property {boolean} [readOnly] - Set this form to readOnly.
  * @property {boolean} [noAlerts] - Disable the alerts dialog.
- * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.
+ * @property {{[key: string]: string} | { translationsUrl: string }} [i18n] - The translation file for this rendering.
  * @property {string} [template] - Custom logic for creation of elements.
  * @property {boolean} [noDefaults] - Exclude default values from the settings.
  * @property {any} [fileService] - The file service for this form.
@@ -354,7 +354,7 @@ export default class Form extends Element {
             return Promise.resolve(this.instance);
         }
         this.form.display = display;
-        this.instance.destroy();
+        this.instance.destroy(true);
         this.instance = this.create(display);
         return this.setForm(this.form).then(() => {
             this.instance.emit('setDisplay', this.form.display);

package/lib/mjs/FormBuilder.d.ts

@@ -73,11 +73,11 @@ export default class FormBuilder extends Form {
     /**
      * Creates a new form builder.
      * @param {HTMLElement} element - The HTML element to place the form builder.
-     * @param {string | object} form - The form to pass to the builder
+     * @param {string | object | undefined} form - The form to pass to the builder
      * @param {FormBuilderOptions} options - The options to create this builder.
      * @returns {FormBuilder} - The form builder instance.
      */
-    constructor(element: HTMLElement, form: string | object, options: {
+    constructor(element: HTMLElement, form: string | object | undefined, options: {
         /**
          * - An array of "keys" of components that should be disabled within the form builder. Example: ['firstName', 'lastName']
          */

package/lib/mjs/FormBuilder.js

@@ -25,7 +25,7 @@ export default class FormBuilder extends Form {
     /**
      * Creates a new form builder.
      * @param {HTMLElement} element - The HTML element to place the form builder.
-     * @param {string | object} form - The form to pass to the builder
+     * @param {string | object | undefined} form - The form to pass to the builder
      * @param {FormBuilderOptions} options - The options to create this builder.
      * @returns {FormBuilder} - The form builder instance.
      */

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.3.0';
+FormioCore.version = '5.4.0-api98.1';
 CDN.defaultCDN = FormioCore.version.includes('rc')
     ? 'https://cdn.test-form.io'
     : 'https://cdn.form.io';

package/lib/mjs/PDF.js

@@ -12,9 +12,11 @@ export default class PDF extends Webform {
         // Handle an iframe submission.
         this.on('iframe-submission', (submission) => this.setValue(submission, {
             fromIframe: true,
+            noDefault: true
         }), true);
         this.on('iframe-change', (submission) => this.setValue(submission, {
             fromIframe: true,
+            noDefault: true
         }), true);
         this.on('iframe-getIframePositions', (query) => {
             const iframe = document.getElementById(`iframe-${query.formId}`);
@@ -279,7 +281,15 @@ if (typeof window !== 'undefined') {
             eventData.name &&
             eventData.formId &&
             Formio.forms.hasOwnProperty(eventData.formId)) {
-            Formio.forms[eventData.formId].emit(`iframe-${eventData.name}`, eventData.data);
+            if (eventData.compPath) {
+                const comp = Formio.forms[eventData.formId].getComponent(eventData.compPath);
+                if (comp) {
+                    comp.emit(eventData.name, eventData.data);
+                }
+            }
+            else {
+                Formio.forms[eventData.formId].emit(`iframe-${eventData.name}`, eventData.data);
+            }
         }
     });
 }

package/lib/mjs/Webform.d.ts

@@ -259,6 +259,7 @@ declare class Webform extends NestedDataComponent {
      * @returns {Promise} - The promise that is triggered when the submission is set.
      */
     setSubmission(submission: any, flags?: any): Promise<any>;
+    _submission: any;
     handleDraftError(errName: any, errDetails: any, restoreDraft: any): void;
     saveDraft(): void;
     /**
@@ -269,7 +270,6 @@ declare class Webform extends NestedDataComponent {
     get schema(): any;
     mergeData(_this: any, _that: any): void;
     editing: boolean | undefined;
-    _submission: any;
     /**
      * Build the form.
      * @returns {Promise} - The promise that is triggered when the form is built.
@@ -372,6 +372,7 @@ declare class Webform extends NestedDataComponent {
     submit(before?: boolean, options?: any): Promise<any>;
     submitUrl(URL: any, headers: any): void;
     triggerCaptcha(components?: null): void;
+    loadTranslations(): Promise<any>;
     _nosubmit: any;
     get conditions(): any;
     get variables(): any;

package/lib/mjs/Webform.js

@@ -227,7 +227,7 @@ export default class Webform extends NestedDataComponent {
             if (err) {
                 return;
             }
-            this.rebuild();
+            this.redraw();
             this.emit('languageChanged');
         });
     }
@@ -569,7 +569,9 @@ export default class Webform extends NestedDataComponent {
         }
         this.initialized = false;
         const rebuild = this.rebuild() || Promise.resolve();
-        return rebuild.then(() => {
+        return this.loadTranslations()
+            .then(() => rebuild)
+            .then(() => {
             this.emit('formLoad', form);
             if (!this.options.server) {
                 this.triggerCaptcha();
@@ -656,6 +658,8 @@ export default class Webform extends NestedDataComponent {
                     ...resolveFlags,
                 };
             }
+            this._submission = {};
+            this._data = {};
             this.onSetSubmission(submission, flags);
             return this.submissionReadyResolve(submission);
         }, (err) => this.submissionReadyReject(err))
@@ -1112,6 +1116,7 @@ export default class Webform extends NestedDataComponent {
         this.setPristine(true);
         // We want to return the submitted submission and setValue will mutate the submission so cloneDeep it here.
         this.setValue(fastCloneDeep(submission), {
+            noDefault: true,
             noValidate: true,
             noCheck: true,
         });
@@ -1120,6 +1125,32 @@ export default class Webform extends NestedDataComponent {
         if (this.draftEnabled && this.triggerSaveDraft?.cancel) {
             this.triggerSaveDraft.cancel();
         }
+        if (typeof document !== 'undefined' && document.body) {
+            const announcementMessage = this.t ? this.t('complete') : 'Form submission complete';
+            // Get or create ARIA live region for announcements
+            let liveRegion = document.getElementById('formio-announcements');
+            if (!liveRegion) {
+                liveRegion = document.createElement('div');
+                liveRegion.id = 'formio-announcements';
+                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);';
+                document.body.appendChild(liveRegion);
+            }
+            // Announce the submission completion using VPAT clear-and-reset technique
+            liveRegion.textContent = '';
+            liveRegion.setAttribute('aria-live', 'off');
+            requestAnimationFrame(() => {
+                setTimeout(() => {
+                    liveRegion.setAttribute('aria-live', 'polite');
+                    liveRegion.textContent = announcementMessage;
+                    setTimeout(() => {
+                        liveRegion.textContent = '';
+                    }, 1000);
+                }, 100);
+            });
+        }
         this.emit('submit', submission, saved);
         if (saved) {
             this.emit('submitDone', submission);
@@ -1487,6 +1518,49 @@ export default class Webform extends NestedDataComponent {
             captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);
         }
     }
+    loadTranslations() {
+        // We only need a resolve since if translations cannot load, we still want to proceed and render the for
+        let translationsLoadResolve;
+        const promise = new Promise((resolve) => {
+            translationsLoadResolve = resolve;
+        });
+        const translationsUrl = typeof this.options.i18n?.translationsUrl === 'string'
+            ? this.options.i18n.translationsUrl
+            : null;
+        if (translationsUrl) {
+            const url = this.sanitize(this.interpolate(translationsUrl, {}), this.shouldSanitizeValue);
+            Formio.makeStaticRequest(url, 'GET')
+                .then((response) => {
+                let languages = response;
+                try {
+                    if (typeof languages == 'string') {
+                        languages = JSON.parse(languages);
+                    }
+                    this.i18next.setLanguages(languages);
+                    this.i18next.changeLanguage(this.i18next.originalLanguage, (err) => {
+                        if (err) {
+                            return;
+                        }
+                        this.emit('languageChanged');
+                    });
+                    this.redraw();
+                    translationsLoadResolve();
+                }
+                catch (err) {
+                    console.warn(err.message);
+                    translationsLoadResolve();
+                }
+            })
+                .catch((err) => {
+                console.warn(err);
+                translationsLoadResolve();
+            });
+        }
+        else {
+            translationsLoadResolve();
+        }
+        return promise;
+    }
     set nosubmit(value) {
         this._nosubmit = !!value;
         this.emit('nosubmit', this._nosubmit);

package/lib/mjs/WebformBuilder.js

@@ -932,7 +932,22 @@ export default class WebformBuilder extends Component {
             rebuild = Promise.resolve();
         }
         return rebuild.then(() => {
+            // Get the updated `toIndex` after the component has been inserted/rebuilt
+            const toIndex = _.findIndex(target.formioContainer, { key: info.key });
             this.emit('addComponent', info, parent, path, index, isNew && !this.options.noNewEdit && !info.noNewEdit);
+            // If this is not a new component — it means it was moved
+            if (!isNew) {
+                const payload = {
+                    component: info,
+                    parent,
+                    path,
+                    fromIndex: index,
+                    toIndex,
+                    timestamp: new Date()
+                };
+                // New event that allows explicit tracking of reordering
+                this.emit('moveComponent', payload);
+            }
             if (!isNew || this.options.noNewEdit || info.noNewEdit) {
                 this.emit('change', this.form);
             }

package/lib/mjs/Wizard.d.ts

@@ -90,6 +90,7 @@ declare class Wizard extends Webform {
     nextPage(): Promise<void>;
     validateCurrentPage(flags?: {}): any;
     emitPrevPage(): void;
+    announceCurrentPage(): void;
     prevPage(): Promise<void>;
     cancel(noconfirm: any): Promise<void> | Promise<number>;
     getPageIndexByKey(key: any): number;