survey-react 1.9.107 → 1.9.108

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.107
+ * surveyjs - Survey JavaScript library v1.9.108
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -734,6 +734,9 @@ function createDropdownActionModel(actionOptions, dropdownOptions, locOwner) {
 }
 function createDropdownActionModelAdvanced(actionOptions, listOptions, popupOptions, locOwner) {
     var listModel = new _list__WEBPACK_IMPORTED_MODULE_3__["ListModel"](listOptions.items, function (item) {
+        if (newAction.hasTitle) {
+            newAction.title = item.title;
+        }
         listOptions.onSelectionChanged(item);
         innerPopupModel.toggleVisibility();
     }, listOptions.allowSelection, listOptions.selectedItem, listOptions.onFilterStringChangedCallback);
@@ -968,7 +971,9 @@ var Action = /** @class */ (function (_super) {
         //Object.assign(this, item) to support IE11
         if (!!innerItem) {
             for (var key in innerItem) {
-                _this[key] = innerItem[key];
+                if (key !== "locTitle") {
+                    _this[key] = innerItem[key];
+                }
             }
         }
         if (!!_this.locTitleName) {
@@ -5403,6 +5408,7 @@ var defaultV2Css = {
     },
     checkbox: {
         root: "sd-selectbase",
+        rootMobile: "sd-selectbase--mobile",
         rootRow: "sd-selectbase--row",
         rootMultiColumn: "sd-selectbase--multi-column",
         item: "sd-item sd-checkbox sd-selectbase__item",
@@ -5425,6 +5431,7 @@ var defaultV2Css = {
     },
     radiogroup: {
         root: "sd-selectbase",
+        rootMobile: "sd-selectbase--mobile",
         rootRow: "sd-selectbase--row",
         rootMultiColumn: "sd-selectbase--multi-column",
         item: "sd-item sd-radio sd-selectbase__item",
@@ -5480,7 +5487,7 @@ var defaultV2Css = {
         checkboxItemIndeterminate: "sd-checkbox--intermediate",
         checkboxItemChecked: "sd-item--checked sd-checkbox--checked",
         checkboxItemDecorator: "sd-item__svg sd-checkbox__svg",
-        checkboxItemDisabled: "sd-checkbox--disabled",
+        checkboxItemDisabled: "sd-item--disabled sd-checkbox--disabled",
         controlCheckbox: "sd-visuallyhidden sd-item__control sd-checkbox__control",
         checkboxMaterialDecorator: "sd-item__decorator sd-checkbox__decorator",
         checkboxControlLabel: "sd-item__control-label",
@@ -5496,8 +5503,11 @@ var defaultV2Css = {
     },
     multipletext: {
         root: "sd-multipletext",
+        rootMobile: "sd-multipletext--mobile",
         itemLabel: "sd-multipletext__item-container sd-input",
         itemLabelOnError: "sd-multipletext__item-container--error",
+        itemLabelAllowFocus: "sd-multipletext__item-container--allow-focus",
+        itemLabelAnswered: "sd-multipletext__item-container--answered",
         item: "sd-multipletext__item",
         itemTitle: "sd-multipletext__item-title",
         content: "sd-multipletext__content sd-question__content",
@@ -5721,6 +5731,7 @@ var defaultV2Css = {
     expression: "sd-expression",
     file: {
         root: "sd-file",
+        rootDragging: "sd-file--dragging",
         other: "sd-input sd-comment",
         placeholderInput: "sd-visuallyhidden",
         preview: "sd-file__preview",
@@ -6780,9 +6791,7 @@ var DragDropDOMAdapter = /** @class */ (function () {
             _this.currentY = pointerMoveEvent.pageY;
             if (_this.isMicroMovement)
                 return;
-            document.body.style.setProperty("touch-action", "");
-            document.body.style.setProperty("user-select", "");
-            document.body.style.setProperty("-webkit-user-select", "");
+            _this.returnUserSelectBack();
             _this.stopLongTap();
         };
         this.stopLongTap = function (e) {
@@ -6830,9 +6839,7 @@ var DragDropDOMAdapter = /** @class */ (function () {
             }
             _this.savedTargetNode = null;
             _this.savedTargetNodeParent = null;
-            document.body.style.setProperty("touch-action", "");
-            document.body.style.setProperty("user-select", "");
-            document.body.style.setProperty("-webkit-user-select", "");
+            _this.returnUserSelectBack();
         };
         this.drop = function () {
             _this.dd.drop();
@@ -6869,8 +6876,7 @@ var DragDropDOMAdapter = /** @class */ (function () {
         this.startX = event.pageX;
         this.startY = event.pageY;
         document.body.style.setProperty("touch-action", "none", "important");
-        document.body.style.setProperty("user-select", "none", "important");
-        document.body.style.setProperty("-webkit-user-select", "none", "important");
+        document.body.style.setProperty("-webkit-touch-callout", "none", "important");
         this.timeoutID = setTimeout(function () {
             _this.doStartDrag(event, draggedElement, parentElement, draggedElementNode);
             if (!preventSaveTargetNode) {
@@ -7019,8 +7025,16 @@ var DragDropDOMAdapter = /** @class */ (function () {
             this.draggedElementShortcut.addEventListener("contextmenu", this.onContextMenu);
         }
     };
+    DragDropDOMAdapter.prototype.returnUserSelectBack = function () {
+        document.body.style.setProperty("touch-action", "auto");
+        document.body.style.setProperty("user-select", "auto");
+        document.body.style.setProperty("-webkit-user-select", "auto");
+        document.body.style.setProperty("-webkit-touch-callout", "default");
+    };
     DragDropDOMAdapter.prototype.startDrag = function (event, draggedElement, parentElement, draggedElementNode, preventSaveTargetNode) {
         if (preventSaveTargetNode === void 0) { preventSaveTargetNode = false; }
+        document.body.style.setProperty("user-select", "none", "important");
+        document.body.style.setProperty("-webkit-user-select", "none", "important");
         if (_utils_devices__WEBPACK_IMPORTED_MODULE_1__["IsTouch"]) {
             this.startLongTapProcessing(event, draggedElement, parentElement, draggedElementNode, preventSaveTargetNode);
             return;
@@ -9214,8 +9228,8 @@ __webpack_require__.r(__webpack_exports__);
 //import "../../modern.scss";
 var Version;
 var ReleaseDate;
-Version = "" + "1.9.107";
-ReleaseDate = "" + "2023-09-11";
+Version = "" + "1.9.108";
+ReleaseDate = "" + "2023-09-19";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -16058,6 +16072,32 @@ function weekday(params) {
     return date.getDay();
 }
 FunctionFactory.Instance.register("weekday", weekday);
+function getQuestionValueByContext(context, name) {
+    if (!context || !name)
+        return undefined;
+    var keys = ["row", "panel", "survey"];
+    for (var i = 0; i < keys.length; i++) {
+        var ctx = context[keys[i]];
+        if (ctx && ctx.getQuestionByName) {
+            var res = ctx.getQuestionByName(name);
+            if (res)
+                return res;
+        }
+    }
+    return null;
+}
+function displayValue(params) {
+    var q = getQuestionValueByContext(this, params[0]);
+    return q ? q.displayValue : "";
+}
+FunctionFactory.Instance.register("displayValue", displayValue);
+function propertyValue(params) {
+    if (params.length !== 2 || !params[0] || !params[1])
+        return undefined;
+    var q = getQuestionValueByContext(this, params[0]);
+    return q ? q[params[1]] : undefined;
+}
+FunctionFactory.Instance.register("propertyValue", propertyValue);
 
 
 /***/ }),
@@ -27649,6 +27689,13 @@ var PageModel = /** @class */ (function (_super) {
         this.locNavigationTitle.strChanged();
         this.locNavigationDescription.strChanged();
     };
+    Object.defineProperty(PageModel.prototype, "renderedNavigationTitle", {
+        get: function () {
+            return this.locNavigationTitle.renderedHtml || this.title || this.name;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(PageModel.prototype, "passed", {
         get: function () {
             return this.getPropertyValue("passed", false);
@@ -28287,6 +28334,13 @@ var PanelModelBase = /** @class */ (function (_super) {
             this.elements[i].locStrsChanged();
         }
     };
+    Object.defineProperty(PanelModelBase.prototype, "renderedNavigationTitle", {
+        get: function () {
+            return this.title || this.name;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(PanelModelBase.prototype, "requiredText", {
         /**
          * Returns a character or text string that indicates a required panel/page.
@@ -29494,10 +29548,10 @@ var PanelModelBase = /** @class */ (function (_super) {
         }
         this.runConditionCore(values, properties);
     };
-    PanelModelBase.prototype.onAnyValueChanged = function (name) {
+    PanelModelBase.prototype.onAnyValueChanged = function (name, questionName) {
         var els = this.elements;
         for (var i = 0; i < els.length; i++) {
-            els[i].onAnyValueChanged(name);
+            els[i].onAnyValueChanged(name, questionName);
         }
     };
     PanelModelBase.prototype.checkBindings = function (valueName, value) {
@@ -29905,20 +29959,9 @@ var PanelModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(PanelModel.prototype, "footerToolbarCss", {
-        get: function () {
-            var _a;
-            return this.footerToolbarCssValue || ((_a = this.cssClasses.panel) === null || _a === void 0 ? void 0 : _a.footer);
-        },
-        set: function (val) {
-            this.footerToolbarCssValue = val;
-        },
-        enumerable: false,
-        configurable: true
-    });
     PanelModel.prototype.getFooterToolbar = function () {
         var _this = this;
-        var _a;
+        var _a, _b;
         if (!this.footerToolbarValue) {
             var actions = this.footerActions;
             if (this.hasEditButton) {
@@ -29936,9 +29979,13 @@ var PanelModel = /** @class */ (function (_super) {
                 actions = (_a = this.survey) === null || _a === void 0 ? void 0 : _a.getUpdatedPanelFooterActions(this, actions);
             }
             this.footerToolbarValue = this.createActionContainer(this.allowAdaptiveActions);
-            // if (!!this.cssClasses.panel) {
-            this.footerToolbarValue.containerCss = this.footerToolbarCss;
-            // }
+            var footerCss = this.onGetFooterToolbarCssCallback ? this.onGetFooterToolbarCssCallback() : "";
+            if (!footerCss) {
+                footerCss = (_b = this.cssClasses.panel) === null || _b === void 0 ? void 0 : _b.footer;
+            }
+            if (footerCss) {
+                this.footerToolbarValue.containerCss = footerCss;
+            }
             this.footerToolbarValue.setItems(actions);
         }
         return this.footerToolbarValue;
@@ -31870,7 +31917,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 /**
- * A Model for a survey running in the Popup Window.
+ * A class that renders a survey in a pop-up window.
  *
  * [View Demo](https://surveyjs.io/form-library/examples/popup-survey/ (linkStyle))
  */
@@ -31880,7 +31927,11 @@ var PopupSurveyModel = /** @class */ (function (_super) {
         if (initialModel === void 0) { initialModel = null; }
         var _this = _super.call(this) || this;
         /**
-         * Set this value to negative value, for example -1, to avoid closing the popup window on completing the survey. Leave it equals to 0 (default value) to close the popup window immediately, or set it to 3, 5, 10, ... to close the popup window in 3, 5, 10 seconds.
+         * Specifies how many seconds the pop-up window should remain open after users complete the survey.
+         *
+         * Default value: 0 (the window is closed immediately)
+         *
+         * Set this property to a negative value (for instance, -1) to keep the pop-up window open without a time limit.
          */
         _this.closeOnCompleteTimeout = 0;
         if (initialModel) {
@@ -31915,8 +31966,7 @@ var PopupSurveyModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(PopupSurveyModel.prototype, "survey", {
         /**
-         * A survey object.
-         * @see SurveyModel
+         * A [`SurveyModel`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model) instance rendered in the pop-up window.
          */
         get: function () {
             return this.surveyValue;
@@ -31926,9 +31976,9 @@ var PopupSurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(PopupSurveyModel.prototype, "isShowing", {
         /**
-         * Returns true if the popup window is currently showing. Set it to true to show the popup window and false to hide it.
-         * @see show
-         * @see hide
+         * Indicates whether the pop-up survey appears on the page, regardless of its [expand state](#isExpanded).
+         *
+         * You can set this property to `true` or `false` to control visibility of the pop-up survey. Alternatively, you can use the [`show()`](#show) and [`hide()`](#hide) methods.
          */
         get: function () {
             return this.getPropertyValue("isShowing", false);
@@ -31940,26 +31990,30 @@ var PopupSurveyModel = /** @class */ (function (_super) {
         configurable: true
     });
     /**
-     * Show the popup window
+     * Shows the pop-up survey. The survey may appear [expanded or collapsed](#isExpanded).
+     *
+     * As an alternative to this method, you can set the [`isShowing`](#isShowing) property to `true`.
      * @see hide
-     * @see isShowing
      */
     PopupSurveyModel.prototype.show = function () {
         this.isShowing = true;
     };
     /**
-     * Hide the popup window
+     * Hides the pop-up survey.
+     *
+     * As an alternative to this method, you can set the [`isShowing`](#isShowing) property to `false`.
      * @see show
-     * @see isShowing
+     * @see expand
+     * @see collapse
      */
     PopupSurveyModel.prototype.hide = function () {
         this.isShowing = false;
     };
     Object.defineProperty(PopupSurveyModel.prototype, "isExpanded", {
         /**
-         * Returns true if the popup window is expanded. Set it to true to expand the popup window or false to collapse it.
-         * @see expand
-         * @see collapse
+         * Indicates whether the pop-up window is expanded or collapsed.
+         *
+         * You can set this property to `true` or `false` to control the expand state of the pop-up survey. Alternatively, you can use the [`expand()`](#expand) and [`collapse()`](#collapse) methods.
          */
         get: function () {
             return this.getPropertyValue("isExpanded", false);
@@ -31978,7 +32032,7 @@ var PopupSurveyModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(PopupSurveyModel.prototype, "title", {
         /**
-         * The popup window and survey title.
+         * A title for the pop-up window. If this property is undefined, the title is taken from [`SurveyModel`](#survey)'s [`title`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#title) property.
          */
         get: function () {
             return this.survey.title;
@@ -31997,13 +32051,19 @@ var PopupSurveyModel = /** @class */ (function (_super) {
         configurable: true
     });
     /**
-     * Expand the popup window to show the survey.
+     * Expands the pop-up window.
+     *
+     * As an alternative to this method, you can set the [`isExpanded`](#isExpanded) property to `true`.
+     * @see collapse
      */
     PopupSurveyModel.prototype.expand = function () {
         this.isExpanded = true;
     };
     /**
-     * Collapse the popup window and show survey title only.
+     * Collapses the pop-up window, leaving only the survey title visible.
+     *
+     * As an alternative to this method, you can set the [`isExpanded`](#isExpanded) property to `false`.
+     * @see expand
      */
     PopupSurveyModel.prototype.collapse = function () {
         this.isExpanded = false;
@@ -32017,7 +32077,7 @@ var PopupSurveyModel = /** @class */ (function (_super) {
          *
          * Default value: `false`
          *
-         * If you allow users to close the pop-up window, make sure to implement a UI element that opens it. This element should call the [`show()`](https://surveyjs.io/form-library/documentation/api-reference/pop-up-survey-model#show) method.
+         * If you allow users to close the pop-up window, make sure to implement a UI element that opens it. This element should call the [`show()`](#show) method or enable the [`isShowing`](#isShowing) property.
          * @see expand
          * @see collapse
          * @see hide
@@ -32897,7 +32957,15 @@ var Question = /** @class */ (function (_super) {
     Question.prototype.isReadOnlyRenderDiv = function () {
         return this.isReadOnly && _settings__WEBPACK_IMPORTED_MODULE_8__["settings"].readOnly.commentRenderMode === "div";
     };
-    Question.prototype.setIsMobile = function (val) { };
+    Question.prototype.allowMobileInDesignMode = function () {
+        return false;
+    };
+    Question.prototype.updateIsMobileFromSurvey = function () {
+        this.setIsMobile(this.survey._isMobile);
+    };
+    Question.prototype.setIsMobile = function (val) {
+        this.isMobile = val && (this.allowMobileInDesignMode() || !this.isDesignMode);
+    };
     Question.prototype.createLocTitleProperty = function () {
         var _this = this;
         var locTitleValue = _super.prototype.createLocTitleProperty.call(this);
@@ -32974,46 +33042,6 @@ var Question = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Question.prototype, "ariaRequired", {
-        get: function () {
-            return this.isRequired ? "true" : "false";
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Question.prototype, "ariaInvalid", {
-        get: function () {
-            return this.errors.length > 0 ? "true" : "false";
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Question.prototype, "ariaLabelledBy", {
-        get: function () {
-            if (this.hasTitle) {
-                return this.ariaTitleId;
-            }
-            else {
-                return null;
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Question.prototype, "ariaExpanded", {
-        get: function () {
-            return null;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Question.prototype, "ariaDescribedBy", {
-        get: function () {
-            return this.errors.length > 0 ? this.id + "_errors" : null;
-        },
-        enumerable: false,
-        configurable: true
-    });
     Question.prototype.choicesLoaded = function () { };
     Object.defineProperty(Question.prototype, "page", {
         /**
@@ -33291,6 +33319,7 @@ var Question = /** @class */ (function (_super) {
         if (!this.visible) {
             this.updateIsVisibleProp();
         }
+        this.updateIsMobileFromSurvey();
     };
     Object.defineProperty(Question.prototype, "parent", {
         /**
@@ -33941,6 +33970,12 @@ var Question = /** @class */ (function (_super) {
             .append(this.cssClasses.invisible, !this.isDesignMode && this.areInvisibleElementsShowing && !this.visible)
             .toString();
     };
+    Question.prototype.getQuestionRootCss = function () {
+        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__["CssClassBuilder"]()
+            .append(this.cssClasses.root)
+            .append(this.cssClasses.rootMobile, this.isMobile)
+            .toString();
+    };
     Question.prototype.updateElementCss = function (reNew) {
         _super.prototype.updateElementCss.call(this, reNew);
         if (reNew) {
@@ -34174,13 +34209,6 @@ var Question = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Question.prototype, "ariaRole", {
-        get: function () {
-            return "textbox";
-        },
-        enumerable: false,
-        configurable: true
-    });
     Object.defineProperty(Question.prototype, "showOtherItem", {
         /**
          * Specifies whether to display the "Other" choice item. Incompatible with the `showCommentArea` property.
@@ -35254,19 +35282,16 @@ var Question = /** @class */ (function (_super) {
         this.setQuestionValue(newValue);
         if (this.data != null && this.canSetValueToSurvey()) {
             newValue = this.valueForSurvey;
-            this.data.setValue(this.getValueName(), newValue, this.getDataLocNotification(), this.allowNotifyValueChanged);
+            this.data.setValue(this.getValueName(), newValue, this.getDataLocNotification(), this.allowNotifyValueChanged, this.name);
         }
         this.isMouseDown = false;
     };
     Question.prototype.canSetValueToSurvey = function () {
         return true;
     };
-    Question.prototype.valueFromData = function (val) {
-        return val;
-    };
-    Question.prototype.valueToData = function (val) {
-        return val;
-    };
+    Question.prototype.valueFromData = function (val) { return val; };
+    Question.prototype.valueToData = function (val) { return val; };
+    Question.prototype.convertToCorrectValue = function (val) { return val; };
     Question.prototype.onValueChanged = function () { };
     Question.prototype.onMouseDown = function () {
         this.isMouseDown = true;
@@ -35290,7 +35315,7 @@ var Question = /** @class */ (function (_super) {
         }
         if (!this.checkIsValueCorrect(newValue))
             return;
-        this.isChangingViaDefaultValue = true;
+        this.isChangingViaDefaultValue = this.isValueEmpty(newValue);
         this.setQuestionValue(this.valueFromData(newValue));
         this.isChangingViaDefaultValue = false;
         this.updateDependedQuestions();
@@ -35305,6 +35330,7 @@ var Question = /** @class */ (function (_super) {
     };
     Question.prototype.setQuestionValue = function (newValue, updateIsAnswered) {
         if (updateIsAnswered === void 0) { updateIsAnswered = true; }
+        newValue = this.convertToCorrectValue(newValue);
         var isEqual = this.isTwoValueEquals(this.questionValue, newValue);
         if (!isEqual && !this.isChangingViaDefaultValue) {
             this.setValueChangedDirectly();
@@ -35357,7 +35383,7 @@ var Question = /** @class */ (function (_super) {
         this.errors = [];
     };
     Question.prototype.clearUnusedValues = function () { };
-    Question.prototype.onAnyValueChanged = function (name) { };
+    Question.prototype.onAnyValueChanged = function (name, questionName) { };
     Question.prototype.checkBindings = function (valueName, value) {
         if (this.bindings.isEmpty() || !this.data)
             return;
@@ -35487,8 +35513,10 @@ var Question = /** @class */ (function (_super) {
                     callback();
                 }
             };
-            this.resizeObserver = new ResizeObserver(function () {
-                _this.triggerResponsiveness(false);
+            this.resizeObserver = new ResizeObserver(function (entries) {
+                window.requestAnimationFrame(function () {
+                    _this.triggerResponsiveness(false);
+                });
             });
             this.onMobileChangedCallback = function () {
                 setTimeout(function () {
@@ -35538,15 +35566,146 @@ var Question = /** @class */ (function (_super) {
             this.dependedQuestions[i].resetDependedQuestion();
         }
     };
+    Object.defineProperty(Question.prototype, "isNewA11yStructure", {
+        //a11y
+        get: function () {
+            return false;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Question.prototype, "ariaLabel", {
+        get: function () {
+            if (this.isNewA11yStructure)
+                return null;
+            return this.locTitle.renderedHtml;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Question.prototype, "ariaRole", {
+        get: function () {
+            if (this.isNewA11yStructure)
+                return null;
+            return "textbox";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Question.prototype, "ariaRequired", {
+        get: function () {
+            if (this.isNewA11yStructure)
+                return null;
+            return this.isRequired ? "true" : "false";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Question.prototype, "ariaInvalid", {
+        get: function () {
+            if (this.isNewA11yStructure)
+                return null;
+            return this.errors.length > 0 ? "true" : "false";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Question.prototype, "ariaLabelledBy", {
+        get: function () {
+            if (this.isNewA11yStructure)
+                return null;
+            if (this.hasTitle) {
+                return this.ariaTitleId;
+            }
+            else {
+                return null;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Question.prototype, "ariaExpanded", {
+        get: function () {
+            return null;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Question.prototype, "ariaDescribedBy", {
+        get: function () {
+            if (this.isNewA11yStructure)
+                return null;
+            return this.errors.length > 0 ? this.id + "_errors" : null;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Question.prototype, "a11y_input_ariaRole", {
+        //EO a11y
+        //new a11y
+        get: function () {
+            return null;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Question.prototype, "a11y_input_ariaRequired", {
+        get: function () {
+            return this.isRequired ? "true" : "false";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Question.prototype, "a11y_input_ariaInvalid", {
+        get: function () {
+            return this.errors.length > 0 ? "true" : "false";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Question.prototype, "a11y_input_ariaLabel", {
+        get: function () {
+            if (this.hasTitle && !this.parentQuestion) {
+                return null;
+            }
+            else {
+                return this.locTitle.renderedHtml;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Question.prototype, "a11y_input_ariaLabelledBy", {
+        get: function () {
+            if (this.hasTitle && !this.parentQuestion) {
+                return this.ariaTitleId;
+            }
+            else {
+                return null;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Question.prototype, "a11y_input_ariaDescribedBy", {
+        get: function () {
+            return this.errors.length > 0 ? this.id + "_errors" : null;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Question.TextPreprocessorValuesMap = {
         title: "processedTitle",
         require: "requiredText",
     };
     Question.questionCounter = 100;
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: false, onSet: function (val, target) {
-                target.setIsMobile(val);
-            } })
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({
+            defaultValue: false,
+            onSet: function (val, target) {
+                target.renderMinWidth = !val;
+            }
+        })
     ], Question.prototype, "isMobile", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
@@ -36076,6 +36235,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         _super.prototype.localeChanged.call(this);
         if (this.choicesOrder !== "none") {
             this.updateVisibleChoices();
+            this.onVisibleChoicesChanged();
         }
     };
     QuestionSelectBase.prototype.locStrsChanged = function () {
@@ -37153,7 +37313,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
                 res.push(this.copyChoiceItem(choices[i]));
             }
         }
-        if (this.choicesFromQuestionMode === "selected" && question.isOtherSelected && !!question.comment) {
+        if (this.choicesFromQuestionMode === "selected" && !this.showOtherItem && question.isOtherSelected && !!question.comment) {
             res.push(this.createItemValue(question.otherItem.value, question.comment));
         }
         return res;
@@ -37242,12 +37402,13 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         this.onVisibleChoicesChanged();
         _super.prototype.onSurveyLoad.call(this);
     };
-    QuestionSelectBase.prototype.onAnyValueChanged = function (name) {
-        _super.prototype.onAnyValueChanged.call(this, name);
+    QuestionSelectBase.prototype.onAnyValueChanged = function (name, questionName) {
+        _super.prototype.onAnyValueChanged.call(this, name, questionName);
         if (name != this.getValueName()) {
             this.runChoicesByUrl();
         }
-        if (!!name && name == this.choicesFromQuestion) {
+        var chQuestion = this.choicesFromQuestion;
+        if (!!name && chQuestion && (name === chQuestion || questionName === chQuestion)) {
             this.onVisibleChoicesChanged();
         }
     };
@@ -37743,10 +37904,13 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     });
     QuestionSelectBase.prototype.getSelectBaseRootCss = function () {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__["CssClassBuilder"]()
-            .append(this.cssClasses.root)
+            .append(this.getQuestionRootCss())
             .append(this.cssClasses.rootRow, this.rowLayout)
             .toString();
     };
+    QuestionSelectBase.prototype.allowMobileInDesignMode = function () {
+        return true;
+    };
     QuestionSelectBase.prototype.getAriaItemLabel = function (item) {
         return item.locText.renderedHtml;
     };
@@ -38728,13 +38892,6 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
     QuestionCheckboxModel.prototype.getDefaultItemComponent = function () {
         return "survey-checkbox-item";
     };
-    Object.defineProperty(QuestionCheckboxModel.prototype, "ariaRole", {
-        get: function () {
-            return "listbox";
-        },
-        enumerable: false,
-        configurable: true
-    });
     QuestionCheckboxModel.prototype.getType = function () {
         return "checkbox";
     };
@@ -39349,6 +39506,21 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionCheckboxModel.prototype, "isNewA11yStructure", {
+        //a11y
+        get: function () {
+            return true;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(QuestionCheckboxModel.prototype, "a11y_input_ariaRole", {
+        get: function () {
+            return "listbox";
+        },
+        enumerable: false,
+        configurable: true
+    });
     return QuestionCheckboxModel;
 }(_question_baseselect__WEBPACK_IMPORTED_MODULE_2__["QuestionCheckboxBase"]));
 
@@ -39550,6 +39722,7 @@ var QuestionCommentModel = /** @class */ (function (_super) {
         }
         _super.prototype.setNewValue.call(this, newValue);
     };
+    QuestionCommentModel.prototype.getValueSeparator = function () { return "\n"; };
     Object.defineProperty(QuestionCommentModel.prototype, "className", {
         get: function () {
             return (this.cssClasses ? this.getControlClass() : "panel-comment-root") || undefined;
@@ -40009,10 +40182,10 @@ var QuestionCustomModel = /** @class */ (function (_super) {
     QuestionCustomModel.prototype.getElement = function () {
         return this.contentQuestion;
     };
-    QuestionCustomModel.prototype.onAnyValueChanged = function (name) {
-        _super.prototype.onAnyValueChanged.call(this, name);
+    QuestionCustomModel.prototype.onAnyValueChanged = function (name, questionName) {
+        _super.prototype.onAnyValueChanged.call(this, name, questionName);
         if (!!this.contentQuestion) {
-            this.contentQuestion.onAnyValueChanged(name);
+            this.contentQuestion.onAnyValueChanged(name, questionName);
         }
     };
     QuestionCustomModel.prototype.getQuestionByName = function (name) {
@@ -40054,6 +40227,12 @@ var QuestionCustomModel = /** @class */ (function (_super) {
             _super.prototype.focus.call(this, onError);
         }
     };
+    QuestionCustomModel.prototype.afterRender = function (el) {
+        _super.prototype.afterRender.call(this, el);
+        if (!!this.contentQuestion) {
+            this.contentQuestion.afterRender(el);
+        }
+    };
     Object.defineProperty(QuestionCustomModel.prototype, "contentQuestion", {
         get: function () {
             return this.questionWrapper;
@@ -40266,11 +40445,11 @@ var QuestionCompositeModel = /** @class */ (function (_super) {
             questions[i].clearValueIfInvisible(reason);
         }
     };
-    QuestionCompositeModel.prototype.onAnyValueChanged = function (name) {
-        _super.prototype.onAnyValueChanged.call(this, name);
+    QuestionCompositeModel.prototype.onAnyValueChanged = function (name, questionName) {
+        _super.prototype.onAnyValueChanged.call(this, name, questionName);
         var questions = this.contentPanel.questions;
         for (var i = 0; i < questions.length; i++) {
-            questions[i].onAnyValueChanged(name);
+            questions[i].onAnyValueChanged(name, questionName);
         }
     };
     Object.defineProperty(QuestionCompositeModel.prototype, "hasSingleInput", {
@@ -41305,6 +41484,11 @@ var QuestionExpressionModel = /** @class */ (function (_super) {
         }
         return val.toString();
     };
+    QuestionExpressionModel.prototype.convertToCorrectValue = function (val) {
+        if (Array.isArray(val))
+            return val.join(", ");
+        return val;
+    };
     return QuestionExpressionModel;
 }(_question__WEBPACK_IMPORTED_MODULE_1__["Question"]));
 
@@ -41602,7 +41786,14 @@ var QuestionFileModel = /** @class */ (function (_super) {
          */
         _this.onUploadStateChanged = _this.addEvent();
         _this.onStateChanged = _this.addEvent();
-        _this.mobileFileNavigator = new _actions_container__WEBPACK_IMPORTED_MODULE_7__["ActionContainer"]();
+        _this.fileNavigator = new _actions_container__WEBPACK_IMPORTED_MODULE_7__["ActionContainer"]();
+        _this.prevPreviewLength = 0;
+        _this.calcAvailableItemsCount = function (availableWidth, itemWidth, gap) {
+            var itemsCount = Math.floor(availableWidth / (itemWidth + gap));
+            if ((itemsCount + 1) * (itemWidth + gap) - gap <= availableWidth)
+                itemsCount++;
+            return itemsCount;
+        };
         _this.dragCounter = 0;
         _this.onDragEnter = function (event) {
             if (!_this.isInputReadOnly) {
@@ -41662,7 +41853,7 @@ var QuestionFileModel = /** @class */ (function (_super) {
             id: "prevPage",
             iconSize: 16,
             action: function () {
-                _this.indexToShow = _this.previewValue.length && ((_this.indexToShow - 1 + _this.previewValue.length) % _this.previewValue.length) || 0;
+                _this.indexToShow = _this.previewValue.length && ((_this.indexToShow - 1 + _this.pagesCount) % _this.pagesCount) || 0;
                 _this.fileIndexAction.title = _this.getFileIndexCaption();
             }
         });
@@ -41670,16 +41861,26 @@ var QuestionFileModel = /** @class */ (function (_super) {
             id: "nextPage",
             iconSize: 16,
             action: function () {
-                _this.indexToShow = _this.previewValue.length && ((_this.indexToShow + 1) % _this.previewValue.length) || 0;
+                _this.indexToShow = _this.previewValue.length && ((_this.indexToShow + 1) % _this.pagesCount) || 0;
                 _this.fileIndexAction.title = _this.getFileIndexCaption();
             }
         });
-        _this.mobileFileNavigator.actions = [_this.prevFileAction, _this.fileIndexAction, _this.nextFileAction];
+        _this.fileNavigator.actions = [_this.prevFileAction, _this.fileIndexAction, _this.nextFileAction];
         return _this;
     }
-    Object.defineProperty(QuestionFileModel.prototype, "mobileFileNavigatorVisible", {
+    Object.defineProperty(QuestionFileModel.prototype, "fileNavigatorVisible", {
+        get: function () {
+            var isUploading = this.isUploading;
+            var containsMultipleFiles = this.containsMultiplyFiles;
+            var needToShowFileNavigator = this.pageSize < this.previewValue.length;
+            return !isUploading && containsMultipleFiles && needToShowFileNavigator && this.isDefaultV2Theme;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(QuestionFileModel.prototype, "pagesCount", {
         get: function () {
-            return this.isMobile && this.containsMultiplyFiles;
+            return Math.ceil(this.previewValue.length / this.pageSize);
         },
         enumerable: false,
         configurable: true
@@ -41691,15 +41892,40 @@ var QuestionFileModel = /** @class */ (function (_super) {
         //this.mobileFileNavigator.cssClasses = this.survey.getCss().actionBar;
     };
     QuestionFileModel.prototype.getFileIndexCaption = function () {
-        return this.getLocalizationFormatString("indexText", this.indexToShow + 1, this.previewValue.length);
+        return this.getLocalizationFormatString("indexText", this.indexToShow + 1, this.pagesCount);
+    };
+    QuestionFileModel.prototype.updateFileNavigator = function () {
+        this.indexToShow = this.previewValue.length && ((this.indexToShow + this.pagesCount) % this.pagesCount) || 0;
+        this.fileIndexAction.title = this.getFileIndexCaption();
     };
     QuestionFileModel.prototype.previewValueChanged = function () {
-        this.indexToShow = this.previewValue.length > 0 ? (this.indexToShow > 0 ? this.indexToShow - 1 : 0) : 0;
+        var _this = this;
+        if (this.previewValue.length !== this.prevPreviewLength) {
+            if (this.previewValue.length > 0) {
+                if (this.prevPreviewLength > this.previewValue.length) {
+                    this.indexToShow = this.indexToShow >= this.pagesCount && this.indexToShow > 0 ? this.pagesCount - 1 : this.indexToShow;
+                }
+                else {
+                    this.indexToShow = Math.floor(this.prevPreviewLength / this.pageSize);
+                }
+            }
+            else {
+                this.indexToShow = 0;
+            }
+        }
         this.fileIndexAction.title = this.getFileIndexCaption();
         this.containsMultiplyFiles = this.previewValue.length > 1;
+        if (this.previewValue.length > 0 && !this.calculatedGapBetweenItems && !this.calculatedItemWidth) {
+            setTimeout(function () {
+                _this.processResponsiveness(0, _this._width);
+            });
+        }
+        this.prevPreviewLength = this.previewValue.length;
     };
     QuestionFileModel.prototype.isPreviewVisible = function (index) {
-        return !this.isMobile || index === this.indexToShow;
+        var isFileNavigatorVisible = this.fileNavigatorVisible;
+        var isPreviewVisible = (this.indexToShow * this.pageSize <= index && index < (this.indexToShow + 1) * this.pageSize);
+        return !isFileNavigatorVisible || isPreviewVisible;
     };
     QuestionFileModel.prototype.getType = function () {
         return "file";
@@ -42176,6 +42402,7 @@ var QuestionFileModel = /** @class */ (function (_super) {
         get: function () {
             return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_5__["CssClassBuilder"]()
                 .append(this.cssClasses.root)
+                .append(this.cssClasses.rootDragging, this.isDragging)
                 .append(this.cssClasses.single, !this.allowMultiple)
                 .append(this.cssClasses.singleImage, !this.allowMultiple && this.isAnswered && this.canPreviewImage(this.value[0]))
                 .append(this.cssClasses.mobile, this.isMobile)
@@ -42215,6 +42442,47 @@ var QuestionFileModel = /** @class */ (function (_super) {
         _super.prototype.endLoadingFromJson.call(this);
         this.loadPreview(this.value);
     };
+    QuestionFileModel.prototype.needResponsiveness = function () {
+        return this.supportResponsiveness() && this.isDefaultV2Theme;
+    };
+    QuestionFileModel.prototype.supportResponsiveness = function () {
+        return true;
+    };
+    QuestionFileModel.prototype.getObservedElementSelector = function () {
+        return Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["classesToSelector"])(this.cssClasses.dragArea);
+    };
+    QuestionFileModel.prototype.getFileListSelector = function () {
+        return Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["classesToSelector"])(this.cssClasses.fileList);
+    };
+    QuestionFileModel.prototype.triggerResponsiveness = function (hard) {
+        if (hard) {
+            this.calculatedGapBetweenItems = undefined;
+            this.calculatedItemWidth = undefined;
+        }
+        _super.prototype.triggerResponsiveness.call(this);
+    };
+    QuestionFileModel.prototype.processResponsiveness = function (_, availableWidth) {
+        var _this = this;
+        this._width = availableWidth;
+        if (this.rootElement) {
+            if ((!this.calculatedGapBetweenItems || !this.calculatedItemWidth) && this.allowMultiple) {
+                var fileListSelector = this.getFileListSelector();
+                var fileListElement = fileListSelector ? this.rootElement.querySelector(this.getFileListSelector()) : undefined;
+                if (fileListElement) {
+                    this.calculatedGapBetweenItems = Math.ceil(Number.parseFloat(window.getComputedStyle(fileListElement).gap));
+                    var firstVisibleItem = Array.from(fileListElement.children).filter(function (_, index) { return _this.isPreviewVisible(index); })[0];
+                    if (firstVisibleItem) {
+                        this.calculatedItemWidth = Math.ceil(Number.parseFloat(window.getComputedStyle(firstVisibleItem).width));
+                    }
+                }
+            }
+        }
+        if (this.calculatedGapBetweenItems && this.calculatedItemWidth) {
+            this.pageSize = this.calcAvailableItemsCount(availableWidth, this.calculatedItemWidth, this.calculatedGapBetweenItems);
+            return true;
+        }
+        return false;
+    };
     QuestionFileModel.prototype.afterRender = function (el) {
         this.rootElement = el;
         _super.prototype.afterRender.call(this, el);
@@ -42252,6 +42520,11 @@ var QuestionFileModel = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: 0 })
     ], QuestionFileModel.prototype, "indexToShow", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: 1, onSet: function (_, target) {
+                target.updateFileNavigator();
+            } })
+    ], QuestionFileModel.prototype, "pageSize", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: false })
     ], QuestionFileModel.prototype, "containsMultiplyFiles", void 0);
@@ -44809,10 +45082,10 @@ var MatrixDropdownRowModelBase = /** @class */ (function () {
             questions[i].clearValue();
         }
     };
-    MatrixDropdownRowModelBase.prototype.onAnyValueChanged = function (name) {
+    MatrixDropdownRowModelBase.prototype.onAnyValueChanged = function (name, questionName) {
         var questions = this.questions;
         for (var i = 0; i < questions.length; i++) {
-            questions[i].onAnyValueChanged(name);
+            questions[i].onAnyValueChanged(name, questionName);
         }
     };
     MatrixDropdownRowModelBase.prototype.getDataValueCore = function (valuesHash, key) {
@@ -44878,7 +45151,7 @@ var MatrixDropdownRowModelBase = /** @class */ (function () {
         var isDeleting = newColumnValue == null && !changedQuestion ||
             isComment && !newColumnValue && !!changedQuestion && changedQuestion.autoOtherMode;
         this.data.onRowChanged(this, changedName, newValue, isDeleting);
-        this.onAnyValueChanged(MatrixDropdownRowModelBase.RowVariableName);
+        this.onAnyValueChanged(MatrixDropdownRowModelBase.RowVariableName, "");
     };
     MatrixDropdownRowModelBase.prototype.updateQuestionsValue = function (name, newColumnValue, isComment) {
         if (!this.detailPanel)
@@ -46614,7 +46887,7 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
             ? null
             : newValue;
     };
-    QuestionMatrixDropdownModelBase.prototype.onAnyValueChanged = function (name) {
+    QuestionMatrixDropdownModelBase.prototype.onAnyValueChanged = function (name, questionName) {
         if (this.isUpdateLocked ||
             this.isDoingonAnyValueChanged ||
             !this.generatedVisibleRows)
@@ -46622,11 +46895,11 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
         this.isDoingonAnyValueChanged = true;
         var rows = this.visibleRows;
         for (var i = 0; i < rows.length; i++) {
-            rows[i].onAnyValueChanged(name);
+            rows[i].onAnyValueChanged(name, questionName);
         }
         var totalRow = this.visibleTotalRow;
         if (!!totalRow) {
-            totalRow.onAnyValueChanged(name);
+            totalRow.onAnyValueChanged(name, questionName);
         }
         this.isDoingonAnyValueChanged = false;
     };
@@ -46813,6 +47086,7 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
             return this.detailPanel;
         var panel = this.createNewDetailPanel();
         panel.readOnly = this.isReadOnly;
+        panel.setSurveyImpl(row);
         var json = this.detailPanel.toJSON();
         new _jsonobject__WEBPACK_IMPORTED_MODULE_0__["JsonObject"]().toObject(json, panel);
         panel.renderWidth = "100%";
@@ -50921,6 +51195,9 @@ var QuestionMultipleTextModel = /** @class */ (function (_super) {
         }
         return res;
     };
+    QuestionMultipleTextModel.prototype.allowMobileInDesignMode = function () {
+        return true;
+    };
     //IMultipleTextData
     QuestionMultipleTextModel.prototype.getMultipleTextValue = function (name) {
         if (!this.value)
@@ -50984,7 +51261,12 @@ var QuestionMultipleTextModel = /** @class */ (function (_super) {
         // do nothing
     };
     QuestionMultipleTextModel.prototype.getItemLabelCss = function (item) {
-        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_7__["CssClassBuilder"]().append(this.cssClasses.itemLabel).append(this.cssClasses.itemLabelOnError, item.editor.errors.length > 0).toString();
+        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_7__["CssClassBuilder"]()
+            .append(this.cssClasses.itemLabel)
+            .append(this.cssClasses.itemLabelAnswered, item.editor.isAnswered)
+            .append(this.cssClasses.itemLabelAllowFocus, !this.isDesignMode)
+            .append(this.cssClasses.itemLabelOnError, item.editor.errors.length > 0)
+            .toString();
     };
     QuestionMultipleTextModel.prototype.getItemCss = function () {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_7__["CssClassBuilder"]().append(this.cssClasses.item).toString();
@@ -52041,6 +52323,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         }
     };
     QuestionPanelDynamicModel.prototype.setIsMobile = function (val) {
+        _super.prototype.setIsMobile.call(this, val);
         (this.panels || []).forEach(function (panel) { return panel.elements.forEach(function (element) {
             if (element instanceof _question__WEBPACK_IMPORTED_MODULE_4__["Question"]) {
                 element.isMobile = val;
@@ -52939,11 +53222,11 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         }
         this.isValueChangingInternally = false;
     };
-    QuestionPanelDynamicModel.prototype.onAnyValueChanged = function (name) {
-        _super.prototype.onAnyValueChanged.call(this, name);
+    QuestionPanelDynamicModel.prototype.onAnyValueChanged = function (name, questionName) {
+        _super.prototype.onAnyValueChanged.call(this, name, questionName);
         for (var i = 0; i < this.panels.length; i++) {
-            this.panels[i].onAnyValueChanged(name);
-            this.panels[i].onAnyValueChanged(QuestionPanelDynamicItem.ItemVariableName);
+            this.panels[i].onAnyValueChanged(name, questionName);
+            this.panels[i].onAnyValueChanged(QuestionPanelDynamicItem.ItemVariableName, "");
         }
     };
     QuestionPanelDynamicModel.prototype.hasKeysDuplicated = function (fireCallback, rec) {
@@ -53177,7 +53460,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         panel.onGetFooterActionsCallback = function () {
             return _this.getPanelActions(panel);
         };
-        panel.footerToolbarCss = this.cssClasses.panelFooter;
+        panel.onGetFooterToolbarCssCallback = function () { return _this.cssClasses.panelFooter; };
         panel.registerPropertyChangedHandlers(["visible"], function () {
             if (panel.visible)
                 _this.onPanelAdded(panel);
@@ -53844,20 +54127,6 @@ var QuestionRadiogroupModel = /** @class */ (function (_super) {
     QuestionRadiogroupModel.prototype.getType = function () {
         return "radiogroup";
     };
-    Object.defineProperty(QuestionRadiogroupModel.prototype, "ariaRole", {
-        get: function () {
-            return "radiogroup";
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(QuestionRadiogroupModel.prototype, "titleAriaLabel", {
-        get: function () {
-            return null;
-        },
-        enumerable: false,
-        configurable: true
-    });
     QuestionRadiogroupModel.prototype.getFirstInputElementId = function () {
         return this.inputId + "_0";
     };
@@ -53931,6 +54200,21 @@ var QuestionRadiogroupModel = /** @class */ (function (_super) {
         }
         return actions;
     };
+    Object.defineProperty(QuestionRadiogroupModel.prototype, "isNewA11yStructure", {
+        //a11y
+        get: function () {
+            return true;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(QuestionRadiogroupModel.prototype, "a11y_input_ariaRole", {
+        get: function () {
+            return "radiogroup";
+        },
+        enumerable: false,
+        configurable: true
+    });
     return QuestionRadiogroupModel;
 }(_question_baseselect__WEBPACK_IMPORTED_MODULE_2__["QuestionCheckboxBase"]));
 
@@ -54491,6 +54775,14 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionRankingModel.prototype, "isNewA11yStructure", {
+        //a11y
+        get: function () {
+            return false;
+        },
+        enumerable: false,
+        configurable: true
+    });
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_3__["property"])({ defaultValue: null })
     ], QuestionRankingModel.prototype, "currentDropTarget", void 0);
@@ -56283,6 +56575,14 @@ var QuestionTagboxModel = /** @class */ (function (_super) {
         _super.prototype.clearValue.call(this);
         this.dropdownListModel.clear();
     };
+    Object.defineProperty(QuestionTagboxModel.prototype, "isNewA11yStructure", {
+        //a11y
+        get: function () {
+            return false;
+        },
+        enumerable: false,
+        configurable: true
+    });
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: "" })
     ], QuestionTagboxModel.prototype, "readOnlyText", void 0);
@@ -57220,7 +57520,7 @@ var QuestionTextBase = /** @class */ (function (_super) {
     };
     Object.defineProperty(QuestionTextBase.prototype, "textUpdateMode", {
         /**
-         * Gets or sets a value that specifies when to update the question value.
+         * Specifies when to update the question value.
          *
          * Possible values:
          *
@@ -57293,6 +57593,12 @@ var QuestionTextBase = /** @class */ (function (_super) {
         _super.prototype.setQuestionValue.call(this, newValue, updateIsAnswered);
         this.updateRemainingCharacterCounter(newValue);
     };
+    QuestionTextBase.prototype.convertToCorrectValue = function (val) {
+        if (Array.isArray(val))
+            return val.join(this.getValueSeparator());
+        return val;
+    };
+    QuestionTextBase.prototype.getValueSeparator = function () { return ", "; };
     QuestionTextBase.prototype.checkForUndo = function (event) {
         if (this.disableNativeUndoRedo && this.isInputTextUpdate && (event.ctrlKey || event.metaKey)) {
             if ([89, 90].indexOf(event.keyCode) !== -1) {
@@ -57307,97 +57613,10 @@ var QuestionTextBase = /** @class */ (function (_super) {
             .append(this.cssClasses.controlDisabled, this.isReadOnly)
             .toString();
     };
-    Object.defineProperty(QuestionTextBase.prototype, "ariaRole", {
+    Object.defineProperty(QuestionTextBase.prototype, "isNewA11yStructure", {
         //a11y
         get: function () {
-            return null;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(QuestionTextBase.prototype, "ariaRequired", {
-        get: function () {
-            return null;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(QuestionTextBase.prototype, "ariaInvalid", {
-        get: function () {
-            return null;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(QuestionTextBase.prototype, "ariaLabel", {
-        get: function () {
-            return null;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(QuestionTextBase.prototype, "ariaLabelledBy", {
-        get: function () {
-            return null;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(QuestionTextBase.prototype, "ariaDescribedBy", {
-        get: function () {
-            return null;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(QuestionTextBase.prototype, "a11y_input_ariaRole", {
-        get: function () {
-            return "textbox";
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(QuestionTextBase.prototype, "a11y_input_ariaRequired", {
-        get: function () {
-            return this.isRequired ? "true" : "false";
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(QuestionTextBase.prototype, "a11y_input_ariaInvalid", {
-        get: function () {
-            return this.errors.length > 0 ? "true" : "false";
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(QuestionTextBase.prototype, "a11y_input_ariaLabel", {
-        get: function () {
-            if (this.hasTitle && !this.parentQuestion) {
-                return null;
-            }
-            else {
-                return this.locTitle.renderedHtml;
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(QuestionTextBase.prototype, "a11y_input_ariaLabelledBy", {
-        get: function () {
-            if (this.hasTitle && !this.parentQuestion) {
-                return this.ariaTitleId;
-            }
-            else {
-                return null;
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(QuestionTextBase.prototype, "a11y_input_ariaDescribedBy", {
-        get: function () {
-            return this.errors.length > 0 ? this.id + "_errors" : null;
+            return true;
         },
         enumerable: false,
         configurable: true
@@ -60901,6 +61120,129 @@ var SurveyElementHeader = /** @class */ (function (_super) {
 
 
 
+/***/ }),
+
+/***/ "./src/react/element.tsx":
+/*!*******************************!*\
+  !*** ./src/react/element.tsx ***!
+  \*******************************/
+/*! exports provided: SurveyRowElement */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyRowElement", function() { return SurveyRowElement; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+
+
+
+var SurveyRowElement = /** @class */ (function (_super) {
+    __extends(SurveyRowElement, _super);
+    function SurveyRowElement(props) {
+        var _this = _super.call(this, props) || this;
+        _this.element.cssClasses;
+        return _this;
+    }
+    SurveyRowElement.prototype.getStateElement = function () {
+        return this.element;
+    };
+    Object.defineProperty(SurveyRowElement.prototype, "element", {
+        get: function () {
+            return this.props.element;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyRowElement.prototype, "index", {
+        get: function () {
+            return this.props.index;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyRowElement.prototype, "row", {
+        get: function () {
+            return this.props.row;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyRowElement.prototype, "survey", {
+        get: function () {
+            return this.props.survey;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyRowElement.prototype, "creator", {
+        get: function () {
+            return this.props.creator;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyRowElement.prototype, "css", {
+        get: function () {
+            return this.props.css;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyRowElement.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+        if (!_super.prototype.shouldComponentUpdate.call(this, nextProps, nextState))
+            return false;
+        this.element.cssClasses;
+        return true;
+    };
+    SurveyRowElement.prototype.renderElement = function () {
+        var element = this.element;
+        var innerElement = this.createElement(element, this.index);
+        var css = element.cssClassesValue;
+        var focusIn = function () {
+            var el = element;
+            if (el && el.isQuestion) {
+                el.focusIn();
+            }
+        };
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: css.questionWrapper, style: element.rootStyle, "data-key": innerElement.key, key: innerElement.key, onFocus: focusIn }, this.row.isNeedRender ? innerElement : _element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.createElement(element.skeletonComponentName, { element: element, css: this.css, })));
+    };
+    SurveyRowElement.prototype.createElement = function (element, elementIndex) {
+        var index = elementIndex ? "-" + elementIndex : 0;
+        var elementType = element.getType();
+        if (!_element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.isElementRegistered(elementType)) {
+            elementType = "question";
+        }
+        return _element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.createElement(elementType, {
+            key: element.name + index,
+            element: element,
+            creator: this.creator,
+            survey: this.survey,
+            css: this.css,
+        });
+    };
+    return SurveyRowElement;
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["SurveyElementBase"]));
+
+
+
 /***/ }),
 
 /***/ "./src/react/flow-panel.tsx":
@@ -62468,7 +62810,7 @@ var SurveyProgressButtons = /** @class */ (function (_super) {
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("li", { key: "listelement" + index, className: this.getListElementCss(index), onClick: this.isListElementClickable(index)
                 ? function () { return _this.clickListElement(index); }
                 : undefined },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsPageTitle, title: page.navigationTitle || page.name }, page.navigationTitle || page.name),
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsPageTitle, title: page.renderedNavigationTitle }, page.renderedNavigationTitle),
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsPageDescription, title: page.navigationDescription }, page.navigationDescription)));
     };
     SurveyProgressButtons.prototype.isListElementClickable = function (index) {
@@ -63183,7 +63525,7 @@ var SurveyQuestionCheckbox = /** @class */ (function (_super) {
     SurveyQuestionCheckbox.prototype.renderElement = function () {
         var _this = this;
         var cssClasses = this.question.cssClasses;
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("fieldset", { role: "presentation", className: this.question.getSelectBaseRootCss(), ref: function (fieldset) { return (_this.setControl(fieldset)); } },
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("fieldset", { className: this.question.getSelectBaseRootCss(), ref: function (fieldset) { return (_this.setControl(fieldset)); }, role: this.question.a11y_input_ariaRole, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-describedby": this.question.a11y_input_ariaDescribedBy },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("legend", { role: "presentation", className: "sv-hidden" }),
             this.getHeader(),
             this.question.hasColumns
@@ -63363,8 +63705,8 @@ var SurveyQuestionCheckboxItem = /** @class */ (function (_super) {
             : this.handleOnChange;
         var itemLabel = !this.hideCaption ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.cssClasses.controlLabel }, this.renderLocString(this.item.locText, this.textStyle)) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: itemClass, role: "presentation" },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { className: labelClass, "aria-label": this.question.getAriaItemLabel(this.item) },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { className: this.cssClasses.itemControl, role: "option", type: "checkbox", name: this.question.name, value: this.item.value != "selectall" ? this.item.value : undefined, id: id, style: this.inputStyle, disabled: !this.question.getItemEnabled(this.item), checked: isChecked, onChange: onItemChanged, "aria-describedby": this.question.ariaDescribedBy }),
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { className: labelClass },
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { className: this.cssClasses.itemControl, type: "checkbox", name: this.question.name, value: this.item.value != "selectall" ? this.item.value : undefined, id: id, style: this.inputStyle, disabled: !this.question.getItemEnabled(this.item), checked: isChecked, onChange: onItemChanged }),
                 this.cssClasses.materialDecorator ?
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.cssClasses.materialDecorator }, this.question.itemSvgIcon ?
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: this.cssClasses.itemDecorator },
@@ -63493,7 +63835,7 @@ var SurveyQuestionCommentItem = /** @class */ (function (_super) {
         if (question.isReadOnlyRenderDiv()) {
             return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null, comment);
         }
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("textarea", { id: this.getId(), className: className, value: comment, disabled: this.isDisplayMode, maxLength: question.getOthersMaxLength(), placeholder: this.getPlaceholder(), onChange: handleOnChange, onBlur: function (e) { _this.onCommentChange(e); handleOnChange(e); }, onInput: function (e) { return _this.onCommentInput(e); }, "aria-required": question.isRequired, "aria-label": question.locTitle.renderedHtml, style: { resize: question.resizeStyle } }));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("textarea", { id: this.getId(), className: className, value: comment, disabled: this.isDisplayMode, maxLength: question.getOthersMaxLength(), placeholder: this.getPlaceholder(), onChange: handleOnChange, onBlur: function (e) { _this.onCommentChange(e); handleOnChange(e); }, onInput: function (e) { return _this.onCommentInput(e); }, "aria-required": question.isRequired || question.a11y_input_ariaRequired, "aria-label": question.ariaLabel || question.a11y_input_ariaLabel, style: { resize: question.resizeStyle } }));
     };
     return SurveyQuestionCommentItem;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElement"]));
@@ -64253,7 +64595,7 @@ var SurveyQuestionFile = /** @class */ (function (_super) {
         var fileDecorator = this.renderFileDecorator();
         var clearButton = this.question.showRemoveButton ? this.renderClearButton(this.question.cssClasses.removeButton) : null;
         var clearButtonBottom = this.question.showRemoveButtonBottom ? this.renderClearButton(this.question.cssClasses.removeButtonBottom) : null;
-        var mobileFileNavigator = this.question.mobileFileNavigatorVisible ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_1__["SurveyActionBar"], { model: this.question.mobileFileNavigator })) : null;
+        var fileNavigator = this.question.fileNavigatorVisible ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_1__["SurveyActionBar"], { model: this.question.fileNavigator })) : null;
         fileInput = (this.isDisplayMode ?
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "file", disabled: this.isDisplayMode, className: !this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss(), id: this.question.inputId, ref: function (input) { return (_this.setControl(input)); }, style: !this.isDisplayMode ? {} : { color: "transparent" }, onChange: !this.isDisplayMode ? this.question.doChange : (function () { }), multiple: this.question.allowMultiple, placeholder: this.question.title, accept: this.question.acceptedTypes })
             :
@@ -64265,7 +64607,7 @@ var SurveyQuestionFile = /** @class */ (function (_super) {
                 clearButton,
                 preview,
                 clearButtonBottom,
-                mobileFileNavigator)));
+                fileNavigator)));
     };
     SurveyQuestionFile.prototype.renderFileDecorator = function () {
         var loadingIndicator = this.renderLoadingIndicator();
@@ -65226,7 +65568,7 @@ var SurveyQuestionMultipleText = /** @class */ (function (_super) {
                 rows.push(this.renderRow(i, tableRows[i].cells, cssClasses));
             }
         }
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("table", { className: cssClasses.root },
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("table", { className: this.question.getQuestionRootCss() },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("tbody", null, rows)));
     };
     SurveyQuestionMultipleText.prototype.renderCell = function (cell, cssClasses, index) {
@@ -65606,7 +65948,7 @@ var SurveyQuestionRadiogroup = /** @class */ (function (_super) {
             clearButton = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null,
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "button", className: this.question.cssClasses.clearButton, onClick: function () { return _this.question.clearValue(); }, value: this.question.clearButtonCaption })));
         }
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("fieldset", { className: this.question.getSelectBaseRootCss(), role: "presentation", ref: function (fieldset) { return (_this.setControl(fieldset)); } },
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("fieldset", { className: this.question.getSelectBaseRootCss(), ref: function (fieldset) { return (_this.setControl(fieldset)); }, role: this.question.a11y_input_ariaRole, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-describedby": this.question.a11y_input_ariaDescribedBy },
             this.question.hasColumns
                 ? this.getColumnedBody(cssClasses)
                 : this.getBody(cssClasses),
@@ -65765,7 +66107,7 @@ var SurveyQuestionRadioItem = /** @class */ (function (_super) {
         var controlLabelClass = this.question.getControlLabelClass(this.item);
         var itemLabel = !this.hideCaption ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: controlLabelClass }, this.renderLocString(this.item.locText, this.textStyle)) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: itemClass, role: "presentation" },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { onMouseDown: this.handleOnMouseDown, className: labelClass, "aria-label": this.question.getAriaItemLabel(this.item) },
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { onMouseDown: this.handleOnMouseDown, className: labelClass },
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { "aria-describedby": this.question.ariaDescribedBy, className: this.cssClasses.itemControl, id: this.question.getItemId(this.item), type: "radio", name: this.question.questionName, checked: this.isChecked, value: this.item.value, disabled: !this.question.getItemEnabled(this.item), onChange: this.handleOnChange }),
                 this.cssClasses.materialDecorator ?
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.cssClasses.materialDecorator }, this.question.itemSvgIcon ?
@@ -66418,8 +66760,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
-/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
-/* harmony import */ var _reactsurveymodel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactsurveymodel */ "./src/react/reactsurveymodel.tsx");
+/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./element */ "./src/react/element.tsx");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
+/* harmony import */ var _reactsurveymodel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./reactsurveymodel */ "./src/react/reactsurveymodel.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -66439,6 +66782,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var SurveyRow = /** @class */ (function (_super) {
     __extends(SurveyRow, _super);
     function SurveyRow(props) {
@@ -66486,23 +66830,17 @@ var SurveyRow = /** @class */ (function (_super) {
     };
     SurveyRow.prototype.renderElementContent = function () {
         var _this = this;
-        var elements = this.row.visibleElements.map(function (element, index) {
-            var innerElement = _this.createElement(element, index);
-            var css = element.cssClassesValue;
-            var focusIn = function () {
-                var el = element;
-                if (el && el.isQuestion) {
-                    el.focusIn();
-                }
-            };
-            return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: css.questionWrapper, style: element.rootStyle, "data-key": innerElement.key, key: innerElement.key, onFocus: focusIn }, _this.row.isNeedRender ? innerElement : _element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.createElement(element.skeletonComponentName, { element: element, css: _this.css, })));
+        var elements = this.row.visibleElements.map(function (element, elementIndex) {
+            var index = elementIndex ? "-" + elementIndex : 0;
+            var key = element.name + index;
+            return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_element__WEBPACK_IMPORTED_MODULE_2__["SurveyRowElement"], { element: element, index: elementIndex, row: _this.row, survey: _this.survey, creator: _this.creator, css: _this.css, key: key }));
         });
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { ref: this.rootRef, className: this.row.getRowCss() }, elements));
     };
     SurveyRow.prototype.renderElement = function () {
         var survey = this.survey;
         var content = this.renderElementContent();
-        var wrapper = _reactsurveymodel__WEBPACK_IMPORTED_MODULE_3__["ReactSurveyElementsWrapper"].wrapRow(survey, content, this.row);
+        var wrapper = _reactsurveymodel__WEBPACK_IMPORTED_MODULE_4__["ReactSurveyElementsWrapper"].wrapRow(survey, content, this.row);
         return wrapper || content;
     };
     SurveyRow.prototype.componentDidMount = function () {
@@ -66537,10 +66875,10 @@ var SurveyRow = /** @class */ (function (_super) {
     SurveyRow.prototype.createElement = function (element, elementIndex) {
         var index = elementIndex ? "-" + elementIndex : 0;
         var elementType = element.getType();
-        if (!_element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.isElementRegistered(elementType)) {
+        if (!_element_factory__WEBPACK_IMPORTED_MODULE_3__["ReactElementFactory"].Instance.isElementRegistered(elementType)) {
             elementType = "question";
         }
-        return _element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.createElement(elementType, {
+        return _element_factory__WEBPACK_IMPORTED_MODULE_3__["ReactElementFactory"].Instance.createElement(elementType, {
             key: element.name + index,
             element: element,
             creator: this.creator,
@@ -69308,12 +69646,13 @@ var SurveyElement = /** @class */ (function (_super) {
     Object.defineProperty(SurveyElement.prototype, "rootStyle", {
         get: function () {
             var style = {};
+            var minWidth = this.renderMinWidth ? this.minWidth : "min(100%, " + this.minWidth + ")";
             if (this.allowRootStyle && this.renderWidth) {
                 // style["width"] = this.renderWidth;
                 style["flexGrow"] = 1;
                 style["flexShrink"] = 1;
                 style["flexBasis"] = this.renderWidth;
-                style["minWidth"] = this.minWidth;
+                style["minWidth"] = minWidth;
                 style["maxWidth"] = this.maxWidth;
             }
             return style;
@@ -69398,6 +69737,9 @@ var SurveyElement = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: true })
     ], SurveyElement.prototype, "allowRootStyle", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: true })
+    ], SurveyElement.prototype, "renderMinWidth", void 0);
     return SurveyElement;
 }(SurveyElementCore));
 
@@ -69783,7 +70125,7 @@ var SurveyModel = /** @class */ (function (_super) {
          */
         _this.onValidateQuestion = _this.addEvent();
         /**
-         * An event that is raised before errors are assigned to a question. You may add/remove/modify errors for a question.
+         * An event that is raised before errors are assigned to a question. Use this event to add/remove/modify errors.
          * @see onValidateQuestion
          */
         _this.onSettingQuestionErrors = _this.addEvent();
@@ -69795,6 +70137,7 @@ var SurveyModel = /** @class */ (function (_super) {
          * [View Demo](https://surveyjs.io/form-library/examples/javascript-server-side-form-validation/ (linkStyle))
          * @see onValidateQuestion
          * @see onValidatePanel
+         * @see isValidatingOnServer
          */
         _this.onServerValidateQuestions = _this.addEvent();
         /**
@@ -69808,11 +70151,11 @@ var SurveyModel = /** @class */ (function (_super) {
          */
         _this.onValidatePanel = _this.addEvent();
         /**
-         * Use the event to change the default error text.
+         * An event that is raised to change default error messages.
          */
         _this.onErrorCustomText = _this.addEvent();
         /**
-         * Use the this event to be notified when the survey finished validate questions on the current page. It commonly happens when a user try to go to the next page or complete the survey
+         * An event that is raised when the [current page](#currentPage) is being validated. Handle this event to be notified of current page validation.
          */
         _this.onValidatedErrorsOnCurrentPage = _this.addEvent();
         /**
@@ -69862,16 +70205,13 @@ var SurveyModel = /** @class */ (function (_super) {
          */
         _this.onProgressText = _this.addEvent();
         /**
-         * Use this event to process the markdown text.
+         * An event that is raised to convert Markdown content to HTML.
          *
          * For information on event handler parameters, refer to descriptions within the interface.
          *
          * [View Demo](https://surveyjs.io/form-library/examples/edit-survey-questions-markdown/ (linkStyle))
          */
         _this.onTextMarkdown = _this.addEvent();
-        /**
-         * Use this event to specity render component name used for text rendering.
-         */
         _this.onTextRenderAs = _this.addEvent();
         /**
          * An event that is raised after a request to save survey results on [SurveyJS Service](https://api.surveyjs.io/) has been completed. Use this event to find out if the results have been saved successfully.
@@ -69916,21 +70256,18 @@ var SurveyModel = /** @class */ (function (_super) {
          */
         _this.onClearFiles = _this.addEvent();
         /**
-         * An event that is raised after choices for radiogroup, checkbox, and dropdown has been loaded from a RESTful service and before they are assigned to a question.
-         * You may change the choices, before they are assigned or disable/enabled make visible/invisible question, based on loaded results.
+         * An event that is raised after choices are loaded from a server but before they are assigned to a choice-based question, such as [Dropdown](https://surveyjs.io/form-library/documentation/api-reference/dropdown-menu-model) or [Checkboxes](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model). Handle this event if you need to modify the loaded choices.
          */
         _this.onLoadChoicesFromServer = _this.addEvent();
         /**
-         * An event that is raised after survey is loaded from api.surveyjs.io service.
-         * You can use this event to perform manipulation with the survey model after it was loaded from the web service.
+         * An event that is raised after a survey JSON schema is loaded from the [SurveyJS Service](https://api.surveyjs.io). Use this event to modify the loaded schema.
          * @see surveyId
+         * @see clientId
          * @see loadSurveyFromService
          */
         _this.onLoadedSurveyFromService = _this.addEvent();
         /**
-         * An event that is raised on processing the text when it finds a text in brackets: `{somevalue}`. By default, it uses the value of survey question values and variables.
-         * For example, you may use the text processing in loading choices from the web. If your `choicesByUrl.url` equals to "UrlToServiceToGetAllCities/{country}/{state}",
-         * you may set on this event `options.value` to "all" or empty string when the "state" value/question is non selected by a user.
+         * An event that is raised when the survey processes [dynamic texts](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#dynamic-texts) and any text in curly brackets. Use this event, for instance, to substitute parameters in a RESTful URL with real values when you [load choices by URL](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#choicesByUrl).
          */
         _this.onProcessTextValue = _this.addEvent();
         /**
@@ -70025,7 +70362,7 @@ var SurveyModel = /** @class */ (function (_super) {
          */
         _this.onFocusInPanel = _this.addEvent();
         /**
-         * Use this event to change the visibility of an individual choice item in [Checkbox](https://surveyjs.io/Documentation/Library?id=questioncheckboxmodel), [Dropdown](https://surveyjs.io/Documentation/Library?id=questiondropdownmodel), [Radiogroup](https://surveyjs.io/Documentation/Library?id=questionradiogroupmodel), and other similar question types.
+         * An event that is raised before a [choice item](https://surveyjs.io/form-library/documentation/api-reference/questionselectbase#choices) is displayed. Use this event to change the visibility of individual choice items in [Checkboxes](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model), [Dropdown](https://surveyjs.io/form-library/documentation/api-reference/dropdown-menu-model), [Radio Button Group](https://surveyjs.io/form-library/documentation/api-reference/radio-button-question-model), and other similar question types.
          */
         _this.onShowingChoiceItem = _this.addEvent();
         /**
@@ -70154,19 +70491,16 @@ var SurveyModel = /** @class */ (function (_super) {
          */
         _this.onGetDynamicPanelTabTitle = _this.addEvent();
         /**
-         * Use this event to define, whether an answer to a question is correct or not.
-         * @see Question.value
-         * @see Question.correctAnswer
+         * An event that is raised to define whether a question answer is correct. Applies only to [quiz surveys](https://surveyjs.io/form-library/documentation/design-survey/create-a-quiz).
          */
         _this.onIsAnswerCorrect = _this.addEvent();
         /**
-         * Use this event to control drag&drop operations during design mode.
-         * @see setDesignMode
+         * An event that is raised when users drag and drop survey elements while designing the survey in [Survey Creator](https://surveyjs.io/survey-creator/documentation/overview). Use this event to control drag and drop operations.
          * @see isDesignMode
          */
         _this.onDragDropAllow = _this.addEvent();
         /**
-         * Use this event to control scrolling element to top. You can cancel the default behavior by setting options.cancel property to true.
+         * An event this is raised before a survey element (usually page) is scrolled to the top. Use this event to cancel the scroll operation.
          */
         _this.onScrollingElementToTop = _this.addEvent();
         _this.onLocaleChangedEvent = _this.addEvent();
@@ -70204,12 +70538,11 @@ var SurveyModel = /** @class */ (function (_super) {
          */
         _this.onGetMatrixRowActions = _this.addEvent();
         /**
-         * An event that is raised after the survey element content was collapsed or expanded.
-         * @see onElementContentVisibilityChanged
+         * An event that is raised after a survey element is [expanded or collapsed](https://surveyjs.io/form-library/documentation/api-reference/question#state).
          */
         _this.onElementContentVisibilityChanged = _this.addEvent();
         /**
-         * An event that is raised before expression question convert it's value into display value for rendering.
+         * An event that is raised before an [Expression](https://surveyjs.io/form-library/documentation/api-reference/expression-model) question displays a value. Use this event to override the display value.
          */
         _this.onGetExpressionDisplayValue = _this.addEvent();
         /**
@@ -70217,13 +70550,16 @@ var SurveyModel = /** @class */ (function (_super) {
          */
         _this.onPopupVisibleChanged = _this.addEvent();
         /**
-         * The list of errors on loading survey JSON. If the list is empty after loading a JSON, then the JSON is correct and has no errors.
-         * @see JsonError
+         * A list of errors in a survey JSON schema.
+         * @see ensureUniqueNames
          */
         _this.jsonErrors = null;
         _this.cssValue = null;
         /**
-         * Gets or sets whether to hide all required errors.
+         * Specifies whether to hide validation errors thrown by the Required validation in the UI.
+         *
+         * [Built-In Client-Side Validators](https://surveyjs.io/form-library/documentation/data-validation#built-in-client-side-validators (linkStyle))
+         * @see ignoreValidation
          */
         _this.hideRequiredErrors = false;
         //#endregion
@@ -70232,10 +70568,13 @@ var SurveyModel = /** @class */ (function (_super) {
         _this._isCompact = false;
         _this._isDesignMode = false;
         /**
-         * Gets or sets whether the survey must ignore validation like required questions and others, on `nextPage` and `completeLastPage` function calls. The default is `false`.
+         * Specifies whether to skip validation when you switch between pages or complete the survey programmatically or when users do that in the UI.
+         *
+         * Default value: `false`
+         * @see hideRequiredErrors
          * @see nextPage
+         * @see isPrevPage
          * @see completeLastPage
-         * @see mode
          */
         _this.ignoreValidation = false;
         _this.isNavigationButtonPressed = false;
@@ -70276,10 +70615,6 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.createLocalizableString("previewText", _this, false, true);
         _this.createLocalizableString("editText", _this, false, true);
         _this.createLocalizableString("questionTitleTemplate", _this, true);
-        _this.textPreProcessor = new _textPreProcessor__WEBPACK_IMPORTED_MODULE_5__["TextPreProcessor"]();
-        _this.textPreProcessor.onProcess = function (textValue) {
-            _this.getProcessedTextValue(textValue);
-        };
         _this.timerModelValue = new _surveyTimerModel__WEBPACK_IMPORTED_MODULE_12__["SurveyTimerModel"](_this);
         _this.timerModelValue.onTimer = function (page) {
             _this.doTimer(page);
@@ -70677,11 +71012,15 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyModel.prototype, "lazyRendering", {
         /**
-         * By default all rows are rendered no matters if they are visible or not.
-         * Set it true, and survey markup rows will be rendered only if they are visible in viewport.
-         * This feature is experimantal and might do not support all the use cases.
+         * Specifies whether to enable lazy rendering.
+         *
+         * In default mode, a survey renders the entire current page. With lazy rendering, the survey renders the page gradually as a user scrolls it. This helps reduce survey startup time and oprimizes large surveys for low-end devices.
+         *
+         * Default value: `false`
          *
          * [View Demo](https://surveyjs.io/form-library/examples/survey-lazy/ (linkStyle))
+         *
+         * > This is an experimental feature that may not work properly in certain cases.
          */
         get: function () {
             return this.lazyRenderingValue === true;
@@ -70798,7 +71137,7 @@ var SurveyModel = /** @class */ (function (_super) {
          * A cookie name used to save information about survey completion.
          *
          * When this property has a value, the survey creates a cookie with the specified name on completion. This cookie helps ensure that users do not pass the same survey twice. On the second run, they will see the [Completed Before page](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#completedBeforeHtml).
-         * @see cliendId
+         * @see clientId
          */
         get: function () {
             return this.getPropertyValue("cookieName", "");
@@ -70826,7 +71165,9 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "surveyShowDataSaving", {
         /**
-         * Gets or sets whether to show the progress on saving/sending data into the [api.surveyjs.io](https://api.surveyjs.io) service.
+         * Specifies whether to show progress when the survey sends data to [SurveyJS Service](https://api.surveyjs.io).
+         *
+         * [View Demo](https://surveyjs.io/form-library/examples/save-survey-results-and-load-surveys-from-surveyjs-service/ (linkStyle))
          * @see surveyPostId
          */
         get: function () {
@@ -71048,10 +71389,11 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyModel.prototype, "requiredText", {
         /**
-         * Gets or sets the required question mark. The required question mark is a char or string that is rendered in the required questions' titles.
-         * @see Question.title
+         * Specifies one or multiple characters that designate required questions.
          *
-         * [View Demo](https://surveyjs.io/form-library/examples/survey-processtext/ (linkStyle))
+         * Default value: `*`
+         *
+         * [View Demo](https://surveyjs.io/form-library/examples/modify-question-title/ (linkStyle))
          */
         get: function () {
             return this.getPropertyValue("requiredText", "*");
@@ -71063,16 +71405,16 @@ var SurveyModel = /** @class */ (function (_super) {
         configurable: true
     });
     SurveyModel.prototype.beforeSettingQuestionErrors = function (question, errors) {
-        this.maakeRequiredErrorsInvisibgle(errors);
+        this.makeRequiredErrorsInvisible(errors);
         this.onSettingQuestionErrors.fire(this, {
             question: question,
             errors: errors,
         });
     };
     SurveyModel.prototype.beforeSettingPanelErrors = function (question, errors) {
-        this.maakeRequiredErrorsInvisibgle(errors);
+        this.makeRequiredErrorsInvisible(errors);
     };
-    SurveyModel.prototype.maakeRequiredErrorsInvisibgle = function (errors) {
+    SurveyModel.prototype.makeRequiredErrorsInvisible = function (errors) {
         if (!this.hideRequiredErrors)
             return;
         for (var i = 0; i < errors.length; i++) {
@@ -71244,14 +71586,16 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "textUpdateMode", {
         /**
-         * Gets or sets a value that specifies how the survey updates its questions' text values.
+         * Specifies when to update the question value in questions with a text input field.
          *
-         * The following options are available:
+         * Possible values:
          *
-         * - `onBlur` (default) - the value is updated after an input loses the focus.
-         * - `onTyping` - update the value of text questions, "text" and "comment", on every key press.
+         * - `"onBlur"` (default) - Updates the value after the input field loses focus.
+         * - `"onTyping"` - Updates the value on every key press.
+         *
+         * > Do not use the `"onTyping"` mode if your survey contains many expressions. Expressions are reevaluated each time a question value is changed. In `"onTyping"` mode, the question value changes frequently. This may cause performance degradation.
          *
-         * Note, that setting to "onTyping" may lead to a performance degradation, in case you have many expressions in the survey.
+         * You can override this setting for individual questions: [`textUpdateMode`](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model#textUpdateMode).
          */
         get: function () {
             return this.getPropertyValue("textUpdateMode");
@@ -71732,15 +72076,15 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     SurveyModel.prototype.setIsMobile = function (newVal) {
         if (newVal === void 0) { newVal = true; }
-        if (this.isMobile !== newVal) {
+        if (this._isMobile !== newVal) {
             this._isMobile = newVal;
             this.updateCss();
-            this.getAllQuestions().map(function (q) { return q.isMobile = newVal; });
+            this.getAllQuestions().map(function (q) { return q.setIsMobile(newVal); });
         }
     };
     Object.defineProperty(SurveyModel.prototype, "isMobile", {
         get: function () {
-            return this._isMobile;
+            return this._isMobile && !this.isDesignMode;
         },
         enumerable: false,
         configurable: true
@@ -71847,8 +72191,8 @@ var SurveyModel = /** @class */ (function (_super) {
         configurable: true
     });
     /**
-     * Calculates a given expression and returns a result value.
-     * @param expression
+     * Calculates a given [expression](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#expressions) and returns a result value.
+     * @param expression An expression to calculate.
      */
     SurveyModel.prototype.runExpression = function (expression) {
         if (!expression)
@@ -71858,8 +72202,8 @@ var SurveyModel = /** @class */ (function (_super) {
         return new _conditions__WEBPACK_IMPORTED_MODULE_13__["ExpressionRunner"](expression).run(values, properties);
     };
     /**
-     * Calculates a given expression and returns `true` or `false`.
-     * @param expression
+     * Calculates a given [expression](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#expressions) and returns `true` or `false`.
+     * @param expression An expression to calculate.
      */
     SurveyModel.prototype.runCondition = function (expression) {
         if (!expression)
@@ -71899,9 +72243,7 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyModel.prototype, "completedBeforeHtml", {
         /**
-         * HTML content displayed to a user who has completed the survey before.
-         * @see clientId
-         * @see cookieName
+         * HTML content displayed to a user who has completed the survey before. To identify such users, the survey uses a [cookie name](#cookieName) or [client ID](#clientId).
          * @see processedCompletedBeforeHtml
          */
         get: function () {
@@ -72301,16 +72643,18 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "showProgressBar", {
         /**
-         * Gets or sets the survey progress bar position.
+         * Controls the visibility of the progress bar and specifies its position.
          *
-         * The following options are available:
+         * Possible values:
          *
-         * - `off` (default) - don't show progress bar
-         * - `top` - show progress bar in the top
-         * - `bottom` - show progress bar in the bottom
-         * - `both` - show progress bar in both sides: top and bottom.
+         * - `"off"` (default) - Hides the progress bar.
+         * - `"top"` - Displays the progress bar above survey content.
+         * - `"bottom"` - Displays the progress bar below survey content.
+         * - `"both"` - Displays the progress bar above and below survey content.
          *
          * [View Demo](https://surveyjs.io/form-library/examples/navigation-default/ (linkStyle))
+         * @see progressBarType
+         * @see progressValue
          */
         get: function () {
             return this.getPropertyValue("showProgressBar");
@@ -72323,17 +72667,18 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "progressBarType", {
         /**
-         * Gets or sets the type of info in the progress bar.
+         * Specifies the type of information displayed by the progress bar. Applies only when [`showProgressBar`](#showProgressBar) is not `"off"`.
          *
-         * The following options are available:
+         * Possible values:
          *
-         * - `pages` (default),
-         * - `questions`,
-         * - `requiredQuestions`,
-         * - `correctQuestions`,
-         * - `buttons`
+         * - `"pages"` (default) - The number of completed pages.
+         * - `"questions"` - The number of answered questions.
+         * - `"requiredQuestions"` - The number of answered [required questions](https://surveyjs.io/form-library/documentation/api-reference/question#isRequired).
+         * - `"correctQuestions"` - The number of correct questions in a [quiz](https://surveyjs.io/form-library/documentation/design-survey/create-a-quiz).
+         * - `"buttons"` - Adds jump links to the progress bar.
          *
          * [View Demo](https://surveyjs.io/form-library/examples/navigation-buttons/ (linkStyle))
+         * @see progressValue
          */
         get: function () {
             return this.getPropertyValue("progressBarType");
@@ -72461,12 +72806,12 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "mode", {
         /**
-         * Gets or sets the survey edit mode.
+         * Specifies whether users can take the survey or only view it.
          *
-         * The following options are available:
+         * Possible values:
          *
-         * - `edit` (default) - make a survey editable,
-         * - `display` - make a survey read-only.
+         * - `"edit"` (default) - Allows users to take the survey.
+         * - `"display"` - Makes the survey read-only.
          *
          * [View Demo](https://surveyjs.io/form-library/examples/survey-displaymode/ (linkStyle))
          */
@@ -72835,7 +73180,8 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyModel.prototype, "isEmpty", {
         /**
-         * Returns `true` if the survey contains no pages. The survey is empty.
+         * Returns `true` if the survey contains zero pages.
+         * @see emptySurveyText
          */
         get: function () {
             return this.pages.length == 0;
@@ -73003,9 +73349,6 @@ var SurveyModel = /** @class */ (function (_super) {
         configurable: true
     });
     Object.defineProperty(SurveyModel.prototype, "isShowingPage", {
-        /**
-         * Survey is showing a page right now. It is in "running", "preview" or starting state.
-         */
         get: function () {
             return this.state == "running" || this.state == "preview" || this.isShowStartingPage;
         },
@@ -73305,12 +73648,6 @@ var SurveyModel = /** @class */ (function (_super) {
             isAfterPreview: this.changeCurrentPageFromPreview === true
         };
     };
-    /**
-     * Returns the progress that a user made while going through the survey.
-     * It depends from progressBarType property
-     * @see progressBarType
-     * @see progressValue
-     */
     SurveyModel.prototype.getProgress = function () {
         if (this.currentPage == null)
             return 0;
@@ -73332,9 +73669,10 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyModel.prototype, "progressValue", {
         /**
-         * Returns the progress that a user made while going through the survey.
-         * It depends from progressBarType property
+         * Returns a percentage value that indicates user progress in the survey.
+         * @see showProgressBar
          * @see progressBarType
+         * @see progressText
          */
         get: function () {
             return this.getPropertyValue("progressValue", 0);
@@ -73343,9 +73681,6 @@ var SurveyModel = /** @class */ (function (_super) {
         configurable: true
     });
     Object.defineProperty(SurveyModel.prototype, "isNavigationButtonsShowing", {
-        /**
-         * Returns the navigation buttons (i.e., 'Prev', 'Next', or 'Complete' and 'Preview') position.
-         */
         get: function () {
             if (this.isDesignMode)
                 return "none";
@@ -73364,9 +73699,6 @@ var SurveyModel = /** @class */ (function (_super) {
         configurable: true
     });
     Object.defineProperty(SurveyModel.prototype, "isNavigationButtonsShowingOnTop", {
-        /**
-         * Returns true if the navigation buttons (i.e., 'Prev', 'Next', or 'Complete' and 'Preview') are shows on top.
-         */
         get: function () {
             return this.getIsNavigationButtonsShowingOn("top");
         },
@@ -73374,9 +73706,6 @@ var SurveyModel = /** @class */ (function (_super) {
         configurable: true
     });
     Object.defineProperty(SurveyModel.prototype, "isNavigationButtonsShowingOnBottom", {
-        /**
-         * Returns true if the navigation buttons (i.e., 'Prev', 'Next', or 'Complete' and 'Preview') are shows on bottom.
-         */
         get: function () {
             return this.getIsNavigationButtonsShowingOn("bottom");
         },
@@ -73388,10 +73717,6 @@ var SurveyModel = /** @class */ (function (_super) {
         return res == "both" || res == buttonPosition;
     };
     Object.defineProperty(SurveyModel.prototype, "isEditMode", {
-        /**
-         * Returns `true` if the survey is in edit mode.
-         * @see mode
-         */
         get: function () {
             return this.mode == "edit";
         },
@@ -73399,11 +73724,6 @@ var SurveyModel = /** @class */ (function (_super) {
         configurable: true
     });
     Object.defineProperty(SurveyModel.prototype, "isDisplayMode", {
-        /**
-         * Returns `true` if the survey is in display mode or in preview mode.
-         * @see mode
-         * @see showPreviewBeforeComplete
-         */
         get: function () {
             return this.mode == "display" || this.state == "preview";
         },
@@ -73419,8 +73739,7 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "isDesignMode", {
         /**
-         * Returns `true` if the survey is in design mode. It is used by SurveyJS Editor.
-         * @see setDesignMode
+         * Indicates whether the survey is being designed in [Survey Creator](https://surveyjs.io/survey-creator/documentation/overview).
          */
         get: function () {
             return this._isDesignMode;
@@ -73428,10 +73747,6 @@ var SurveyModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    /**
-     * Sets the survey into design mode.
-     * @param value use true to set the survey into the design mode.
-     */
     SurveyModel.prototype.setDesignMode = function (value) {
         if (!!this._isDesignMode != !!value) {
             this._isDesignMode = !!value;
@@ -73440,7 +73755,9 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyModel.prototype, "showInvisibleElements", {
         /**
-         * Gets or sets whether to show all elements in the survey, regardless their visibility. The default value is `false`.
+         * Specifies whether to show all survey elements, regardless of their visibility.
+         *
+         * Default value: `false`
          */
         get: function () {
             return this.getPropertyValue("showInvisibleElements", false);
@@ -73532,13 +73849,11 @@ var SurveyModel = /** @class */ (function (_super) {
         document.cookie = this.cookieName + "=;";
     };
     /**
-     * Navigates user to the next page.
-     *
-     * Returns `false` in the following cases:
+     * Switches the survey to the next page.
      *
-     * - if the current page is the last page.
-     * - if the current page contains errors (for example, a required question is empty).
-     * @see isCurrentPageValid
+     * This method returns a Boolean value that indicates whether the page was successfully switched. `false` is returned if the current page is the last page or if it contains validation errors.
+     * @returns `true` if the page was successfully switched; `false` otherwise.
+     * @see isLastPage
      * @see prevPage
      * @see completeLastPage
      */
@@ -73722,12 +74037,6 @@ var SurveyModel = /** @class */ (function (_super) {
             ? undefined
             : true;
     };
-    /**
-     * Checks whether survey elements (pages, panels, and questions) have unique question names.
-     * You can check for unique names for individual page and panel (and all their elements) or a question.
-     * If the parameter is not specified, then a survey checks that all its elements have unique names.
-     * @param element page, panel or question, it is `null` by default, that means all survey elements will be checked
-     */
     SurveyModel.prototype.ensureUniqueNames = function (element) {
         if (element === void 0) { element = null; }
         if (element == null) {
@@ -73834,8 +74143,12 @@ var SurveyModel = /** @class */ (function (_super) {
         });
     };
     /**
-     * Navigates user to a previous page. If the current page is the first page, `prevPage` returns `false`. `prevPage` does not perform any checks, required questions can be empty.
+     * Switches the survey to the previous page.
+     *
+     * This method returns a Boolean value that indicates whether the page was successfully switched. `false` is returned if the current page is the first page.
+     * @returns `true` if the page was successfully switched; `false` otherwise.
      * @see isFirstPage
+     * @see nextPage
      */
     SurveyModel.prototype.prevPage = function () {
         var _this = this;
@@ -74161,7 +74474,9 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyModel.prototype, "isFirstPage", {
         /**
-         * Gets whether the current page is the first one.
+         * Indicates whether the [current page](#currentPage) is the first page.
+         *
+         * > If the survey displays the [start page](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#start-page), this property contains `false`. Use the [`isShowStartingPage`](#isShowStartingPage) property to find out whether the start page is currently displayed.
          */
         get: function () {
             return this.getPropertyValue("isFirstPage");
@@ -74171,7 +74486,7 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "isLastPage", {
         /**
-         * Gets whether the current page is the last one.
+         * Indicates whether the [current page](#currentPage) is the last page.
          */
         get: function () {
             return this.getPropertyValue("isLastPage");
@@ -74361,8 +74676,9 @@ var SurveyModel = /** @class */ (function (_super) {
         return options.allowComplete && options.allow;
     };
     /**
-     * Starts the survey. Changes the survey mode from "starting" to "running". Call this function if your survey has a start page, otherwise this function does nothing.
+     * Starts the survey. Applies only if the survey has a [start page](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#start-page).
      * @see firstPageIsStarted
+     * @see completeLastPage
      */
     SurveyModel.prototype.start = function () {
         if (!this.firstPageIsStarted)
@@ -74381,8 +74697,7 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyModel.prototype, "isValidatingOnServer", {
         /**
-         * Gets whether the question values on the current page are validating on the server at the current moment.
-         * @see onServerValidateQuestions
+         * Indicates whether the current page is being [validated on a server](#onServerValidateQuestions).
          */
         get: function () {
             return this.getPropertyValue("isValidatingOnServer", false);
@@ -74505,13 +74820,14 @@ var SurveyModel = /** @class */ (function (_super) {
         this.doComplete(true, trigger);
     };
     SurveyModel.prototype.canBeCompleted = function (trigger, isCompleted) {
+        var _a;
         if (!_settings__WEBPACK_IMPORTED_MODULE_14__["settings"].triggers.changeNavigationButtonsOnComplete)
             return;
         var prevCanBeCompleted = this.canBeCompletedByTrigger;
         if (!this.completedByTriggers)
             this.completedByTriggers = {};
         if (isCompleted) {
-            this.completedByTriggers[trigger.id] = trigger;
+            this.completedByTriggers[trigger.id] = { trigger: trigger, pageId: (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.id };
         }
         else {
             delete this.completedByTriggers[trigger.id];
@@ -74522,9 +74838,20 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyModel.prototype, "canBeCompletedByTrigger", {
         get: function () {
+            var _a;
             if (!this.completedByTriggers)
                 return false;
-            return Object.keys(this.completedByTriggers).length > 0;
+            var keys = Object.keys(this.completedByTriggers);
+            if (keys.length === 0)
+                return false;
+            var id = (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.id;
+            if (!id)
+                return true;
+            for (var i = 0; i < keys.length; i++) {
+                if (id === this.completedByTriggers[keys[i]].pageId)
+                    return true;
+            }
+            return false;
         },
         enumerable: false,
         configurable: true
@@ -74534,15 +74861,16 @@ var SurveyModel = /** @class */ (function (_super) {
             if (!this.canBeCompletedByTrigger)
                 return undefined;
             var key = Object.keys(this.completedByTriggers)[0];
-            return this.completedByTriggers[key];
+            return this.completedByTriggers[key].trigger;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(SurveyModel.prototype, "processedCompletedHtml", {
         /**
-         * Returns the HTML content for the complete page.
-         * @see completedHtml
+         * Returns HTML content displayed on the [complete page](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#complete-page).
+         *
+         * To specify HTML content, use the [`completedHtml`](#completedHtml) property.
          */
         get: function () {
             var html = this.renderedCompletedHtml;
@@ -74553,9 +74881,9 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "processedCompletedBeforeHtml", {
         /**
-         * Returns the HTML content, that is shown to a user that had completed the survey before.
-         * @see completedHtml
-         * @see cookieName
+         * Returns HTML content displayed to a user who has completed the survey before. To identify such users, the survey uses a [cookie name](#cookieName) or [client ID](#clientId).
+         *
+         * To specify HTML content, use the [`completedBeforeHtml`](#completedBeforeHtml) property.
          */
         get: function () {
             return this.locCompletedBeforeHtml.textOrHtml;
@@ -74565,7 +74893,9 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "processedLoadingHtml", {
         /**
-         * Returns the HTML content, that is shows when a survey loads the survey JSON.
+         * Returns HTML content displayed while a survey JSON schema is being loaded from [SurveyJS Service](https://api.surveyjs.io).
+         *
+         * To specify HTML content, use the [`loadingHtml`](#loadingHtml) property.
          */
         get: function () {
             return this.locLoadingHtml.textOrHtml;
@@ -74579,7 +74909,10 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyModel.prototype, "progressText", {
         /**
-         * Returns the text for the current progress.
+         * Returns text displayed by the progress bar (for instance, "Page 2 of 3" or "Answered 3/8 questions"). Handle the [`onProgressText`](#onProgressText) event to change this text.
+         * @see progressValue
+         * @see showProgressBar
+         * @see progressBarType
          */
         get: function () {
             var res = this.getPropertyValue("progressText", "");
@@ -74668,13 +75001,15 @@ var SurveyModel = /** @class */ (function (_super) {
             var mobileWidth_1 = Number.parseFloat(window.getComputedStyle(observedElement).getPropertyValue(cssVariables.mobileWidth));
             if (!!mobileWidth_1) {
                 var isProcessed_1 = false;
-                this.resizeObserver = new ResizeObserver(function () {
-                    if (isProcessed_1 || !Object(_utils_utils__WEBPACK_IMPORTED_MODULE_15__["isContainerVisible"])(observedElement)) {
-                        isProcessed_1 = false;
-                    }
-                    else {
-                        isProcessed_1 = _this.processResponsiveness(observedElement.offsetWidth, mobileWidth_1);
-                    }
+                this.resizeObserver = new ResizeObserver(function (entries) {
+                    window.requestAnimationFrame(function () {
+                        if (isProcessed_1 || !Object(_utils_utils__WEBPACK_IMPORTED_MODULE_15__["isContainerVisible"])(observedElement)) {
+                            isProcessed_1 = false;
+                        }
+                        else {
+                            isProcessed_1 = _this.processResponsiveness(observedElement.offsetWidth, mobileWidth_1);
+                        }
+                    });
                 });
                 this.resizeObserver.observe(observedElement);
             }
@@ -75200,8 +75535,16 @@ var SurveyModel = /** @class */ (function (_super) {
         return page;
     };
     /**
-     * Removes a page from a survey.
-     * @param page
+     * Removes a page from the survey.
+     *
+     * Pass a `PageModel` object to this method. You can get this object in different ways. For example, you can call the [`getPageByName()`](#getPageByName) method to obtain a `PageModel` object with a specific name or use the [`currentPage`](#currentPage) property to access and delete the current page, as shown in the code below.
+     *
+     * ```js
+     * // Delete the current page
+     * survey.removePage(survey.currentPage);
+     * ```
+     * @param page A page to remove.
+     * @see addNewPage
      */
     SurveyModel.prototype.removePage = function (page) {
         var index = this.pages.indexOf(page);
@@ -75513,7 +75856,7 @@ var SurveyModel = /** @class */ (function (_super) {
         }
         return res;
     };
-    SurveyModel.prototype.notifyQuestionOnValueChanged = function (valueName, newValue) {
+    SurveyModel.prototype.notifyQuestionOnValueChanged = function (valueName, newValue, questionName) {
         if (this.isLoadingFromJson)
             return;
         var questions = this.getQuestionsByValueName(valueName);
@@ -75539,7 +75882,7 @@ var SurveyModel = /** @class */ (function (_super) {
         if (this.isDisposed)
             return;
         this.checkElementsBindings(valueName, newValue);
-        this.notifyElementsOnAnyValueOrVariableChanged(valueName);
+        this.notifyElementsOnAnyValueOrVariableChanged(valueName, questionName);
     };
     SurveyModel.prototype.checkElementsBindings = function (valueName, newValue) {
         this.isRunningElementsBindings = true;
@@ -75552,7 +75895,7 @@ var SurveyModel = /** @class */ (function (_super) {
             this.updateVisibleIndexAfterBindings = false;
         }
     };
-    SurveyModel.prototype.notifyElementsOnAnyValueOrVariableChanged = function (name) {
+    SurveyModel.prototype.notifyElementsOnAnyValueOrVariableChanged = function (name, questionName) {
         if (this.isEndLoadingFromJson === "processing")
             return;
         if (this.isRunningConditions) {
@@ -75560,7 +75903,7 @@ var SurveyModel = /** @class */ (function (_super) {
             return;
         }
         for (var i = 0; i < this.pages.length; i++) {
-            this.pages[i].onAnyValueChanged(name);
+            this.pages[i].onAnyValueChanged(name, questionName);
         }
         if (!this.isEndLoadingFromJson) {
             this.locStrsChanged();
@@ -75789,26 +76132,23 @@ var SurveyModel = /** @class */ (function (_super) {
         });
     };
     /**
-     * Loads the survey JSON from the [api.surveyjs.io](https://api.surveyjs.io) service.
-     * If `clientId` is not `null` and a user had completed a survey before, the survey switches to `completedbefore` state.
-     * @param surveyId [api.surveyjs.io](https://api.surveyjs.io) service surveyId
-     * @param clientId users' indentifier, for example an e-mail or a unique customer id in your web application.
-     * @see state
-     * @see onLoadedSurveyFromService
+     * Loads a survey JSON schema from the [SurveyJS Service](https://api.surveyjs.io). You can handle the [`onLoadedSurveyFromService`](#onLoadedSurveyFromService) event to modify the schema after loading if required.
+     * @param surveyId The identifier of a survey JSON schema to load. Refer to the following help topic for more information: [Store Survey Results in the SurveyJS Service](https://surveyjs.io/form-library/documentation/handle-survey-results-store#store-survey-results-in-the-surveyjs-service).
+     * @param clientId A user identifier (e-mail or other unique ID) used to determine whether the user has already taken the survey.
      */
-    SurveyModel.prototype.loadSurveyFromService = function (surveyId, cliendId) {
+    SurveyModel.prototype.loadSurveyFromService = function (surveyId, clientId) {
         if (surveyId === void 0) { surveyId = null; }
-        if (cliendId === void 0) { cliendId = null; }
+        if (clientId === void 0) { clientId = null; }
         if (surveyId) {
             this.surveyId = surveyId;
         }
-        if (cliendId) {
-            this.clientId = cliendId;
+        if (clientId) {
+            this.clientId = clientId;
         }
         var self = this;
         this.isLoading = true;
         this.onLoadingSurveyFromService();
-        if (cliendId) {
+        if (clientId) {
             this.createSurveyService().getSurveyJsonAndIsCompleted(this.surveyId, this.clientId, function (success, json, isCompleted, response) {
                 self.isLoading = false;
                 if (success) {
@@ -76224,7 +76564,7 @@ var SurveyModel = /** @class */ (function (_super) {
      * @see data
      * @see getValue
      */
-    SurveyModel.prototype.setValue = function (name, newQuestionValue, locNotification, allowNotifyValueChanged) {
+    SurveyModel.prototype.setValue = function (name, newQuestionValue, locNotification, allowNotifyValueChanged, questionName) {
         if (locNotification === void 0) { locNotification = false; }
         if (allowNotifyValueChanged === void 0) { allowNotifyValueChanged = true; }
         var newValue = newQuestionValue;
@@ -76246,7 +76586,7 @@ var SurveyModel = /** @class */ (function (_super) {
             newValue = this.getUnbindValue(newValue);
             this.setDataValueCore(this.valuesHash, name, newValue);
         }
-        this.updateOnSetValue(name, newValue, oldValue, locNotification, allowNotifyValueChanged);
+        this.updateOnSetValue(name, newValue, oldValue, locNotification, allowNotifyValueChanged, questionName);
     };
     SurveyModel.prototype.isValueEmpyOnSetValue = function (name, val) {
         if (!this.isValueEmpty(val, false))
@@ -76255,18 +76595,19 @@ var SurveyModel = /** @class */ (function (_super) {
             return true;
         return this.editingObj.getDefaultPropertyValue(name) === val;
     };
-    SurveyModel.prototype.updateOnSetValue = function (name, newValue, oldValue, locNotification, allowNotifyValueChanged) {
+    SurveyModel.prototype.updateOnSetValue = function (name, newValue, oldValue, locNotification, allowNotifyValueChanged, questionName) {
         if (locNotification === void 0) { locNotification = false; }
         if (allowNotifyValueChanged === void 0) { allowNotifyValueChanged = true; }
         this.updateQuestionValue(name, newValue);
         if (locNotification === true || this.isDisposed || this.isRunningElementsBindings)
             return;
+        questionName = questionName || name;
         var triggerKeys = {};
         triggerKeys[name] = { newValue: newValue, oldValue: oldValue };
         this.runConditionOnValueChanged(name, newValue);
         this.checkTriggers(triggerKeys, false, false, name);
         if (allowNotifyValueChanged)
-            this.notifyQuestionOnValueChanged(name, newValue);
+            this.notifyQuestionOnValueChanged(name, newValue, questionName);
         if (locNotification !== "text") {
             this.tryGoNextPageAutomatic(name);
         }
@@ -76405,8 +76746,8 @@ var SurveyModel = /** @class */ (function (_super) {
         }
     };
     /**
-     * Removes a value from the survey results.
-     * @param {string} name The name of the value. Typically it is a question name.
+     * Deletes an answer from survey results.
+     * @param {string} name An object property that stores the answer to delete. Pass a question's [`valueName`](https://surveyjs.io/form-library/documentation/api-reference/question#valueName) or [`name`](https://surveyjs.io/form-library/documentation/api-reference/question#name).
      */
     SurveyModel.prototype.clearValue = function (name) {
         this.setValue(name, null);
@@ -76619,6 +76960,20 @@ var SurveyModel = /** @class */ (function (_super) {
         res.hasAllValuesOnLastRun = this.textPreProcessor.hasAllValuesOnLastRun;
         return res;
     };
+    Object.defineProperty(SurveyModel.prototype, "textPreProcessor", {
+        get: function () {
+            var _this = this;
+            if (!this.textPreProcessorValue) {
+                this.textPreProcessorValue = new _textPreProcessor__WEBPACK_IMPORTED_MODULE_5__["TextPreProcessor"]();
+                this.textPreProcessorValue.onProcess = function (textValue) {
+                    _this.getProcessedTextValue(textValue);
+                };
+            }
+            return this.textPreProcessorValue;
+        },
+        enumerable: false,
+        configurable: true
+    });
     SurveyModel.prototype.processTextCore = function (text, returnDisplayValue, doEncoding) {
         if (doEncoding === void 0) { doEncoding = false; }
         if (this.isDesignMode)
@@ -76772,13 +77127,13 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "widthMode", {
         /**
-          * Gets or sets a value that specifies how the survey width is calculated.
+          * Specifies how to calculate the survey width.
           *
-          * The available options:
+          * Possible values:
           *
-          * - `static` - A survey has a fixed width that mostly depends upon the applied theme. Resizing a browser window does not affect the survey width.
-          * - `responsive` - A survey takes all available horizontal space. A survey stretches or shrinks horizonally according to the screen size.
-          * - `auto` - Depends on the question type and corresponds to the static or responsive mode.
+          * - `"static"` - A survey has a [fixed width](#width).
+          * - `"responsive"` - A survey occupies all available horizontal space and stretches or shrinks horizontally to fit in the screen size.
+          * - `"auto"` (default) - Survey width depends on a question type and corresponds to the `"static"` or `"responsive"` mode.
         */
         // `custom/precise` - The survey width is specified by the width property. // in-future
         get: function () {
@@ -77352,7 +77707,9 @@ var SurveyModel = /** @class */ (function (_super) {
         this.onThemeApplied.fire(this, { theme: theme });
     };
     /**
-     * Use this method to dispose survey model properly.
+     * Disposes of the survey model.
+     *
+     * Call this method to release resources if your application contains multiple survey models or if you re-create a survey model at runtime.
      */
     SurveyModel.prototype.dispose = function () {
         this.removeScrollEventListener();
@@ -77584,8 +77941,10 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("survey", [
         name: "showTOC:switch",
         default: false
     },
-    { name: "tocLocation", default: "left", choices: ["left", "right"],
-        dependsOn: ["showTOC"], visibleIf: function (survey) { return !!survey && survey.showTOC; }
+    {
+        name: "tocLocation", default: "left", choices: ["left", "right"],
+        dependsOn: ["showTOC"],
+        visibleIf: function (survey) { return !!survey && survey.showTOC; }
     },
     { name: "mode", default: "edit", choices: ["edit", "display"] },
     { name: "storeOthersAsComment:boolean", default: true },
@@ -78145,9 +78504,11 @@ function createTOCListModel(survey, onAction) {
     var _a;
     var pagesSource = survey.questionsOnPageMode === "singlePage" ? (_a = survey.pages[0]) === null || _a === void 0 ? void 0 : _a.elements : survey.pages;
     var items = (pagesSource || []).map(function (page) {
+        var _a, _b;
         return new _actions_action__WEBPACK_IMPORTED_MODULE_0__["Action"]({
             id: page.name,
-            title: (page["navigationTitle"]) || page.title || page.name,
+            locTitle: ((_a = page.locTitle) === null || _a === void 0 ? void 0 : _a.text) ? page.locTitle : (((_b = page.locNavigationTitle) === null || _b === void 0 ? void 0 : _b.text) ? page.locNavigationTitle : undefined),
+            title: page.renderedNavigationTitle,
             action: function () {
                 if (typeof document !== undefined && !!document.activeElement) {
                     !!document.activeElement.blur && document.activeElement.blur();
@@ -78323,11 +78684,17 @@ var SvgIconRegistry = /** @class */ (function () {
         this.icons = {};
         this.iconPrefix = "icon-";
     }
+    SvgIconRegistry.prototype.processId = function (iconId, iconPrefix) {
+        if (iconId.indexOf(iconPrefix) == 0)
+            iconId = iconId.substring(iconPrefix.length);
+        return iconId;
+    };
     SvgIconRegistry.prototype.registerIconFromSymbol = function (iconId, iconSymbolSvg) {
         this.icons[iconId] = iconSymbolSvg;
     };
     SvgIconRegistry.prototype.registerIconFromSvgViaElement = function (iconId, iconSvg, iconPrefix) {
         if (iconPrefix === void 0) { iconPrefix = this.iconPrefix; }
+        iconId = this.processId(iconId, iconPrefix);
         var divSvg = document.createElement("div");
         divSvg.innerHTML = iconSvg;
         var symbol = document.createElement("symbol");
@@ -78341,6 +78708,7 @@ var SvgIconRegistry = /** @class */ (function () {
     };
     SvgIconRegistry.prototype.registerIconFromSvg = function (iconId, iconSvg, iconPrefix) {
         if (iconPrefix === void 0) { iconPrefix = this.iconPrefix; }
+        iconId = this.processId(iconId, iconPrefix);
         var startStr = "<svg ";
         var endStr = "</svg>";
         iconSvg = iconSvg.trim();
@@ -79644,7 +80012,11 @@ var ResponsivityManager = /** @class */ (function () {
             setTimeout(function () { _this.process(); }, 1);
         };
         if (typeof ResizeObserver !== "undefined") {
-            this.resizeObserver = new ResizeObserver(function (_) { return _this.process(); });
+            this.resizeObserver = new ResizeObserver(function (entries) {
+                window.requestAnimationFrame(function () {
+                    _this.process();
+                });
+            });
             this.resizeObserver.observe(this.container.parentElement);
         }
     }