@formio/js 5.3.0 → 5.3.1

package/dist/formio.utils.min.js.LICENSE.txt

@@ -22,7 +22,7 @@
 
 /*! @license DOMPurify 3.2.6 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.6/LICENSE */
 
-/*! formiojs v5.3.0 | https://unpkg.com/formiojs@5.3.0/LICENSE.txt */
+/*! formiojs v5.3.1 | https://unpkg.com/formiojs@5.3.1/LICENSE.txt */
 
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
 

package/lib/cjs/Embed.js

@@ -453,7 +453,7 @@ Formio.formioReady = new Promise((ready, reject) => {
     _a._formioReady = ready;
     _a._formioReadyReject = reject;
 });
-Formio.version = '5.3.0';
+Formio.version = '5.3.1';
 // Create a report.
 Formio.Report = {
     create: (element, submission, options = {}) => __awaiter(void 0, void 0, void 0, function* () {

package/lib/cjs/Formio.js

@@ -11,7 +11,7 @@ const CDN_1 = __importDefault(require("./CDN"));
 const providers_1 = __importDefault(require("./providers"));
 sdk_1.Formio.cdn = new CDN_1.default();
 sdk_1.Formio.Providers = providers_1.default;
-sdk_1.Formio.version = '5.3.0';
+sdk_1.Formio.version = '5.3.1';
 CDN_1.default.defaultCDN = sdk_1.Formio.version.includes('rc')
     ? 'https://cdn.test-form.io'
     : 'https://cdn.form.io';

package/lib/cjs/PDF.js

@@ -286,7 +286,15 @@ if (typeof window !== 'undefined') {
             eventData.name &&
             eventData.formId &&
             Formio_1.Formio.forms.hasOwnProperty(eventData.formId)) {
-            Formio_1.Formio.forms[eventData.formId].emit(`iframe-${eventData.name}`, eventData.data);
+            if (eventData.compPath) {
+                const comp = Formio_1.Formio.forms[eventData.formId].getComponent(eventData.compPath);
+                if (comp) {
+                    comp.emit(eventData.name, eventData.data);
+                }
+            }
+            else {
+                Formio_1.Formio.forms[eventData.formId].emit(`iframe-${eventData.name}`, eventData.data);
+            }
         }
     });
 }

package/lib/cjs/Webform.js

@@ -259,7 +259,7 @@ class Webform extends NestedDataComponent_1.default {
             if (err) {
                 return;
             }
-            this.rebuild();
+            this.redraw();
             this.emit('languageChanged');
         });
     }

package/lib/cjs/components/_classes/component/Component.d.ts

@@ -187,6 +187,7 @@ declare class Component extends Element {
         tooltipClass: string;
         for: any;
     };
+    getFieldsetLegendIds(): string;
     init(): void;
     /**
      * Disable this component.

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

@@ -507,6 +507,18 @@ class Component extends Element_1.default {
         }
         return label;
     }
+    getFieldsetLegendIds() {
+        var _a, _b;
+        const legendIds = [];
+        let currentParent = this.parent;
+        while (currentParent) {
+            if (((_a = currentParent.component) === null || _a === void 0 ? void 0 : _a.type) === 'fieldset' && ((_b = currentParent.component) === null || _b === void 0 ? void 0 : _b.legend)) {
+                legendIds.push(`l-${currentParent.id}-legend`);
+            }
+            currentParent = currentParent.parent;
+        }
+        return legendIds.reverse().join(' ');
+    }
     init() {
         var _a;
         this.disabled = this.shouldDisabled;
@@ -3677,13 +3689,14 @@ class Component extends Element_1.default {
      * @returns {*} - The components "input" DOM element information.
      */
     elementInfo() {
+        var _a;
         const attributes = {
             name: this.options.name,
             type: this.component.inputType || 'text',
             class: 'form-control',
             lang: this.options.language,
         };
-        if (this.component.placeholder) {
+        if (this.component.placeholder && !((_a = this.options) === null || _a === void 0 ? void 0 : _a.readOnly)) {
             attributes.placeholder = this.t(this.component.placeholder, { _userInput: true });
         }
         if (this.component.tabindex) {

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

@@ -20,6 +20,7 @@ class Input extends Multivalue_1.default {
         }, ...extend);
     }
     get inputInfo() {
+        var _a;
         const attr = {
             name: this.options.name,
             type: this.component.inputType || 'text',
@@ -34,7 +35,7 @@ class Input extends Multivalue_1.default {
         if (this.component.inputMode) {
             attr.inputmode = this.component.inputMode;
         }
-        if (this.component.placeholder) {
+        if (this.component.placeholder && !((_a = this.options) === null || _a === void 0 ? void 0 : _a.readOnly)) {
             attr.placeholder = this.getFormattedAttribute(this.component.placeholder);
         }
         if (this.component.tabindex) {
@@ -166,6 +167,9 @@ class Input extends Multivalue_1.default {
         }
     }
     updateValueAt(value, flags, index) {
+        if (flags.modified) {
+            (0, index_1.announceScreenReaderMessage)(this, value, index);
+        }
         flags = flags || {};
         if (lodash_1.default.get(this.component, 'showWordCount', false)) {
             if (this.refs.wordcount && this.refs.wordcount[index]) {
@@ -190,7 +194,7 @@ class Input extends Multivalue_1.default {
     updateValue(value, flags, index) {
         flags = flags || {};
         const changed = super.updateValue(value, flags);
-        this.triggerUpdateValueAt(this.dataValue, flags, index);
+        this.triggerUpdateValueAt(this.dataValue, Object.assign({}, flags), index);
         return changed;
     }
     parseValue(value) {
@@ -201,6 +205,7 @@ class Input extends Multivalue_1.default {
     }
     attach(element) {
         this.loadRefs(element, {
+            announceMessage: 'multiple',
             charcount: 'multiple',
             wordcount: 'multiple',
             prefix: 'multiple',
@@ -244,6 +249,16 @@ class Input extends Multivalue_1.default {
                 }
             });
         }
+        this.on('focus', (comp) => {
+            (0, index_1.announceScreenReaderMessage)(comp, comp.dataValue, 0, true);
+        });
+        this.on('blur', (comp) => {
+            var _a, _b;
+            const el = (_b = (_a = comp.refs) === null || _a === void 0 ? void 0 : _a["announceMessage"]) === null || _b === void 0 ? void 0 : _b[0];
+            if (el) {
+                el.textContent = "";
+            }
+        });
         return promise;
     }
     /**

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

@@ -310,6 +310,7 @@ class AddressComponent extends Container_1.default {
         return this.refs ? this.refs[AddressComponent.removeRowButtonRef] || null : null;
     }
     get searchInputAttributes() {
+        var _a;
         const attr = {
             name: this.options.name,
             type: 'text',
@@ -317,7 +318,7 @@ class AddressComponent extends Container_1.default {
             lang: this.options.language,
             tabindex: this.component.tabindex || 0,
         };
-        if (this.component.placeholder) {
+        if (this.component.placeholder && !((_a = this.options) === null || _a === void 0 ? void 0 : _a.readOnly)) {
             ((attr.placeholder = this.t(this.component.placeholder)), { _userInput: true });
         }
         if (this.disabled) {

package/lib/cjs/components/datagrid/DataGrid.js

@@ -113,6 +113,17 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         for (let dIndex = defaultValue.length; dIndex < this.minLength; dIndex++) {
             defaultValue.push({});
         }
+        if (this.component.customDefaultValue) {
+            return defaultValue;
+        }
+        if (defaultValue.length === 1 && this.columns) {
+            (0, utils_1.eachComponent)(this.components, (comp, path) => {
+                var _a;
+                if (((_a = comp.component) === null || _a === void 0 ? void 0 : _a.input) && comp.defaultValue) {
+                    lodash_1.default.set(defaultValue[0], path, comp.defaultValue);
+                }
+            });
+        }
         return defaultValue;
     }
     set disabled(disabled) {
@@ -437,7 +448,7 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         });
         (0, utils_1.screenReaderSpeech)('Row has been added');
         this.checkConditions();
-        (_a = this.triggerChange) === null || _a === void 0 ? void 0 : _a.call(this, { modified: true });
+        (_a = this.triggerChange) === null || _a === void 0 ? void 0 : _a.call(this, { modified: true, noPristineChangeOnModified: true });
         this.redraw().then(() => {
             this.focusOnNewRowElement(this.rows[index]);
         });

package/lib/cjs/components/fieldset/Fieldset.d.ts

@@ -10,6 +10,7 @@ export default class FieldsetComponent extends NestedComponent {
     };
     static savedValueTypes(): never[];
     constructor(...args: any[]);
+    attach(element: any): Promise<void>;
     noField: boolean;
 }
 import NestedComponent from '../_classes/nested/NestedComponent';

package/lib/cjs/components/fieldset/Fieldset.js

@@ -39,6 +39,13 @@ class FieldsetComponent extends NestedComponent_1.default {
     get templateName() {
         return 'fieldset';
     }
+    attach(element) {
+        return super.attach(element).then(() => {
+            if (this.component.legend && this.refs.header) {
+                this.refs.header.setAttribute('id', `l-${this.id}-legend`);
+            }
+        });
+    }
     constructor(...args) {
         super(...args);
         this.noField = true;

package/lib/cjs/components/select/Select.js

@@ -276,9 +276,9 @@ class SelectComponent extends ListComponent_1.default {
         // Inside DataTable component won't have dataValue set
         const shouldUseSelectData = (this.component.multiple && lodash_1.default.isArray(this.dataValue)
             ? this.dataValue.find((val) => this.normalizeSingleValue(value) === val)
-            : this.dataValue === this.normalizeSingleValue(value)) || this.inDataTable;
+            : this.dataValue === this.normalizeSingleValue(value)) || (this.inDataTable && !this.element);
         if (shouldUseSelectData) {
-            const selectData = this.selectData;
+            const selectData = (this.inDataTable && !this.element) ? this.component.selectData : this.selectData;
             if (selectData) {
                 const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;
                 if (!this.templateData || !this.templateData[templateValue]) {
@@ -766,7 +766,8 @@ class SelectComponent extends ListComponent_1.default {
         }
     }
     addPlaceholder() {
-        if (!this.component.placeholder) {
+        var _a;
+        if (!this.component.placeholder || ((_a = this.options) === null || _a === void 0 ? void 0 : _a.readOnly)) {
             return;
         }
         this.addOption('', this.component.placeholder, { placeholder: true });
@@ -830,10 +831,12 @@ class SelectComponent extends ListComponent_1.default {
             : element;
     }
     choicesOptions() {
+        var _a;
         const useSearch = this.component.hasOwnProperty('searchEnabled')
             ? this.component.searchEnabled
             : true;
-        const placeholderValue = this.t(this.component.placeholder, { _userInput: true });
+        const hasPlaceholder = !!this.component.placeholder && !((_a = this.options) === null || _a === void 0 ? void 0 : _a.readOnly);
+        const placeholderValue = hasPlaceholder ? this.t(this.component.placeholder, { _userInput: true }) : null;
         let customOptions = this.component.customOptions || {};
         if (typeof customOptions == 'string') {
             try {
@@ -857,7 +860,7 @@ class SelectComponent extends ListComponent_1.default {
                     'formio-choices',
                 ],
                 containerInner: this.transform('class', 'form-control ui fluid selection dropdown').split(' '),
-            }, addItemText: false, allowHTML: true, placeholder: !!this.component.placeholder, placeholderValue: placeholderValue, noResultsText: this.t('No results found'), noChoicesText: this.t('No choices to choose from'), searchPlaceholderValue: this.t('Type to search'), shouldSort: false, position: this.component.dropdown || 'auto', searchEnabled: useSearch, searchChoices: !this.component.searchField, searchFields: lodash_1.default.get(this, 'component.searchFields', [
+            }, addItemText: false, allowHTML: true, placeholder: hasPlaceholder, placeholderValue: placeholderValue, noResultsText: this.t('No results found'), noChoicesText: this.t('No choices to choose from'), searchPlaceholderValue: this.t('Type to search'), shouldSort: false, position: this.component.dropdown || 'auto', searchEnabled: useSearch, searchChoices: !this.component.searchField, searchFields: lodash_1.default.get(this, 'component.searchFields', [
                 'label',
             ]), shadowRoot: this.root ? this.root.shadowRoot : null, fuseOptions: this.component.useExactSearch
                 ? Object.assign({ tokenize: true, matchAllTokens: true }, commonFuseOptions) : Object.assign({}, lodash_1.default.get(this, 'component.fuseOptions', {}), Object.assign({ include: 'score', threshold: lodash_1.default.get(this, 'component.selectThreshold', 0.3) }, commonFuseOptions)), valueComparer: lodash_1.default.isEqual, resetScrollPosition: false, duplicateItemsAllowed: false }, customOptions);
@@ -1296,7 +1299,8 @@ class SelectComponent extends ListComponent_1.default {
     }
     setMetadata(value, flags = {}) {
         var _a, _b;
-        if (lodash_1.default.isNil(value)) {
+        if (lodash_1.default.isNil(value) ||
+            (this.inDataTable && this.component.dataSrc === 'values')) {
             return;
         }
         const valueIsObject = lodash_1.default.isObject(value);
@@ -1306,7 +1310,7 @@ class SelectComponent extends ListComponent_1.default {
         }
         // Check to see if we need to save off the template data into our metadata.
         const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;
-        const shouldSaveData = (!valueIsObject || this.component.reference) && !this.inDataTable;
+        const shouldSaveData = (!valueIsObject || this.component.reference) && !(this.inDataTable && this.row === '');
         if (!lodash_1.default.isNil(templateValue) &&
             shouldSaveData &&
             this.templateData &&
@@ -1592,7 +1596,8 @@ class SelectComponent extends ListComponent_1.default {
     asString(value, options = {}) {
         var _a;
         value = value !== null && value !== void 0 ? value : this.getValue();
-        if (options.modalPreview || this.inDataTable) {
+        if (options.modalPreview ||
+            ((this.inDataTable || this.inEditGrid) && !['values', 'custom'].includes(this.component.dataSrc))) {
             if (this.inDataTable) {
                 value = this.undoValueTyping(value);
             }

package/lib/cjs/components/tags/Tags.js

@@ -63,6 +63,7 @@ class TagsComponent extends Input_1.default {
         return this.component.delimeter || ',';
     }
     attachElement(element, index) {
+        var _a;
         super.attachElement(element, index);
         if (!element) {
             return;
@@ -76,7 +77,7 @@ class TagsComponent extends Input_1.default {
         if (!choices_js_1.default) {
             return;
         }
-        const hasPlaceholder = !!this.component.placeholder;
+        const hasPlaceholder = !!this.component.placeholder && !((_a = this.options) === null || _a === void 0 ? void 0 : _a.readOnly);
         this.choices = new choices_js_1.default(element, {
             delimiter: this.delimiter,
             editItems: true,

package/lib/cjs/package.json

@@ -1,4 +1,4 @@
 {
     "type": "commonjs",
-    "version": "5.3.0"
+    "version": "5.3.1"
 }

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/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.3.1';
     static setLicense(license, norecurse = false) {
         Formio.license = license;
         if (!norecurse && Formio.FormioClass) {

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

package/lib/mjs/PDF.js

@@ -279,7 +279,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.js

@@ -227,7 +227,7 @@ export default class Webform extends NestedDataComponent {
             if (err) {
                 return;
             }
-            this.rebuild();
+            this.redraw();
             this.emit('languageChanged');
         });
     }