survey-react 1.9.121 → 1.9.123

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.121
+ * surveyjs - Survey JavaScript library v1.9.123
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1891,7 +1891,7 @@ var Base = /** @class */ (function () {
      * Returns `true` if a passed `value` is an empty string, array, or object or if it equals to `undefined` or `null`.
      *
      * @param value A value to be checked.
-     * @param trimString (Optional) When this parameter is `true`, the method ignores whitespace characters at the beginning and end of a string value. Pass `false` to disable this functionality.
+     * @param trimString *(Optional)* When this parameter is `true`, the method ignores whitespace characters at the beginning and end of a string value. Pass `false` to disable this functionality.
      */
     Base.prototype.isValueEmpty = function (value, trimString) {
         if (trimString === void 0) { trimString = true; }
@@ -2029,10 +2029,12 @@ var Base = /** @class */ (function () {
      * The JSON object should contain only serializable properties of this SurveyJS object. Event handlers and properties that do not belong to the SurveyJS object are ignored.
      *
      * @param json A JSON object with properties that you want to apply to the current SurveyJS object.
+     * @param options An object with configuration options.
+     * @param {boolean} options.validatePropertyValues Pass `true` if you want to validate property values. Use the [`jsonErrors`](#jsonErrors) array to access validation errors.
      * @see toJSON
      */
-    Base.prototype.fromJSON = function (json) {
-        new _jsonobject__WEBPACK_IMPORTED_MODULE_2__["JsonObject"]().toObject(json, this);
+    Base.prototype.fromJSON = function (json, options) {
+        new _jsonobject__WEBPACK_IMPORTED_MODULE_2__["JsonObject"]().toObject(json, this, options);
         this.onSurveyLoad();
     };
     Base.prototype.onSurveyLoad = function () { };
@@ -2098,7 +2100,7 @@ var Base = /** @class */ (function () {
      * If the property is not found or does not have a value, this method returns either `undefined`, `defaultValue` specified in the property configuration, or a value passed as the `defaultValue` parameter.
      *
      * @param name A property name.
-     * @param defaultValue (Optional) A value to return if the property is not found or does not have a value.
+     * @param defaultValue *(Optional)* A value to return if the property is not found or does not have a value.
      */
     Base.prototype.getPropertyValue = function (name, defaultValue) {
         if (defaultValue === void 0) { defaultValue = null; }
@@ -2369,7 +2371,7 @@ var Base = /** @class */ (function () {
      * Registers a function to call when a property value changes.
      * @param propertyNames An array of one or multiple property names.
      * @param handler A function to call when one of the listed properties change.
-     * @param key (Optional) A key that identifies the current registration. If a function for one of the properties is already registered with the same key, the function will be overwritten. You can also use the key to subsequently unregister handlers.
+     * @param key *(Optional)* A key that identifies the current registration. If a function for one of the properties is already registered with the same key, the function will be overwritten. You can also use the key to subsequently unregister handlers.
      * @see unregisterPropertyChangedHandlers
      */
     Base.prototype.registerPropertyChangedHandlers = function (propertyNames, handler, key) {
@@ -2381,7 +2383,7 @@ var Base = /** @class */ (function () {
     /**
      * Unregisters value change event handlers for the specified properties.
      * @param propertyNames An array of one or multiple property names.
-     * @param key (Optional) A key of the registration that you want to cancel.
+     * @param key *(Optional)* A key of the registration that you want to cancel.
      * @see registerPropertyChangedHandlers
      */
     Base.prototype.unregisterPropertyChangedHandlers = function (propertyNames, key) {
@@ -3135,7 +3137,7 @@ var XmlParser = /** @class */ (function () {
  * }
  * ```
  *
- * Typically, you should assign this object to a question's [`choicesByUrl`](https://surveyjs.io/Documentation/Library?id=QuestionSelectBase#choicesByUrl) property.
+ * Typically, you should assign this object to a question's [`choicesByUrl`](https://surveyjs.io/Documentation/Library?id=QuestionSelectBase#choicesByUrl) property. You can also specify additional application-wide settings using the [`settings.web`](https://surveyjs.io/form-library/documentation/api-reference/settings#web) object.
  */
 var ChoicesRestful = /** @class */ (function (_super) {
     __extends(ChoicesRestful, _super);
@@ -3193,6 +3195,16 @@ var ChoicesRestful = /** @class */ (function (_super) {
             }
         }
     };
+    Object.defineProperty(ChoicesRestful, "onBeforeSendRequest", {
+        get: function () {
+            return _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].web.onBeforeRequestChoices;
+        },
+        set: function (val) {
+            _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].web.onBeforeRequestChoices = val;
+        },
+        enumerable: false,
+        configurable: true
+    });
     ChoicesRestful.getCachedItemsResult = function (obj) {
         var hash = obj.objHash;
         var res = ChoicesRestful.itemsResult[hash];
@@ -3329,8 +3341,8 @@ var ChoicesRestful = /** @class */ (function (_super) {
             }
         };
         var options = { request: xhr };
-        if (!!ChoicesRestful.onBeforeSendRequest) {
-            ChoicesRestful.onBeforeSendRequest(this, options);
+        if (!!_settings__WEBPACK_IMPORTED_MODULE_4__["settings"].web.onBeforeRequestChoices) {
+            _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].web.onBeforeRequestChoices(this, options);
         }
         this.beforeSendRequest();
         options.request.send();
@@ -3533,6 +3545,11 @@ var ChoicesRestful = /** @class */ (function (_super) {
         configurable: true
     });
     Object.defineProperty(ChoicesRestful.prototype, "allowEmptyResponse", {
+        /**
+         * Specifies whether the service is allowed to return an empty response or an empty array in a response.
+         *
+         * Default value: `false`
+         */
         get: function () {
             return this.getPropertyValue("allowEmptyResponse");
         },
@@ -3767,10 +3784,10 @@ var ChoicesRestfull = /** @class */ (function (_super) {
     };
     Object.defineProperty(ChoicesRestfull, "onBeforeSendRequest", {
         get: function () {
-            return ChoicesRestful.onBeforeSendRequest;
+            return _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].web.onBeforeRequestChoices;
         },
         set: function (val) {
-            ChoicesRestful.onBeforeSendRequest = val;
+            _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].web.onBeforeRequestChoices = val;
         },
         enumerable: false,
         configurable: true
@@ -5821,6 +5838,9 @@ var defaultV2Css = {
         rootDropdown: "sd-scrollable-container sd-scrollable-container--compact sd-selectbase",
         root: "sd-scrollable-container sd-rating",
         rootWrappable: "sd-scrollable-container sd-rating sd-rating--wrappable",
+        rootLabelsTop: "sd-rating--labels-top",
+        rootLabelsBottom: "sd-rating--labels-bottom",
+        rootLabelsDiagonal: "sd-rating--labels-diagonal",
         item: "sd-rating__item",
         itemOnError: "sd-rating__item--error",
         itemHover: "sd-rating__item--allowhover",
@@ -8488,7 +8508,7 @@ var DropdownMultiSelectListModel = /** @class */ (function (_super) {
         if (!_onSelectionChanged) {
             _onSelectionChanged = function (item, status) {
                 _this.resetFilterString();
-                if (item.value === "selectall") {
+                if (item.id === "selectall") {
                     _this.selectAllItems();
                 }
                 else if (status === "added" && item.value === _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].noneItemValue) {
@@ -9423,8 +9443,8 @@ __webpack_require__.r(__webpack_exports__);
 //import "../../modern.scss";
 var Version;
 var ReleaseDate;
-Version = "" + "1.9.121";
-ReleaseDate = "" + "2023-12-12";
+Version = "" + "1.9.123";
+ReleaseDate = "" + "2023-12-26";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -16551,7 +16571,7 @@ var Cover = /** @class */ (function (_super) {
     Cover.prototype.updateHeaderClasses = function () {
         this.headerClasses = new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_2__["CssClassBuilder"]()
             .append("sv-header")
-            .append("sv-header__without-background", (this.backgroundColor === "trasparent") && !this.backgroundImage)
+            .append("sv-header__without-background", (this.backgroundColor === "transparent") && !this.backgroundImage)
             .append("sv-header__overlap", this.overlapEnabled)
             .toString();
     };
@@ -16670,6 +16690,13 @@ var Cover = /** @class */ (function (_super) {
             this.actualHeight = this.calculateActualHeight(logoHeight, titleHeight, descriptionHeight);
         }
     };
+    Object.defineProperty(Cover.prototype, "hasBackground", {
+        get: function () {
+            return !!this.backgroundImage || this.backgroundColor !== "transparent";
+        },
+        enumerable: false,
+        configurable: true
+    });
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: 0 })
     ], Cover.prototype, "actualHeight", void 0);
@@ -16927,7 +16954,7 @@ var Helpers = /** @class */ (function () {
         if (x["equals"])
             return x.equals(y);
         if (!!x.toJSON && !!y.toJSON && !!x.getType && !!y.getType) {
-            if (x.isDiposed || y.isDiposed)
+            if (x.isDisposed || y.isDisposed)
                 return false;
             if (x.getType() !== y.getType())
                 return false;
@@ -18335,7 +18362,7 @@ var ItemValue = /** @class */ (function (_super) {
     };
     Object.defineProperty(ItemValue.prototype, "visibleIf", {
         get: function () {
-            return this.getPropertyValue("visibleIf", "");
+            return this.getPropertyValueWithoutDefault("visibleIf") || "";
         },
         set: function (val) {
             this.setPropertyValue("visibleIf", val);
@@ -18345,7 +18372,7 @@ var ItemValue = /** @class */ (function (_super) {
     });
     Object.defineProperty(ItemValue.prototype, "enableIf", {
         get: function () {
-            return this.getPropertyValue("enableIf", "");
+            return this.getPropertyValueWithoutDefault("enableIf") || "";
         },
         set: function (val) {
             this.setPropertyValue("enableIf", val);
@@ -18355,7 +18382,8 @@ var ItemValue = /** @class */ (function (_super) {
     });
     Object.defineProperty(ItemValue.prototype, "isVisible", {
         get: function () {
-            return this.getPropertyValue("isVisible", true);
+            var res = this.getPropertyValueWithoutDefault("isVisible");
+            return res !== undefined ? res : true;
         },
         enumerable: false,
         configurable: true
@@ -18365,7 +18393,8 @@ var ItemValue = /** @class */ (function (_super) {
     };
     Object.defineProperty(ItemValue.prototype, "isEnabled", {
         get: function () {
-            return this.getPropertyValue("isEnabled", true);
+            var res = this.getPropertyValueWithoutDefault("isEnabled");
+            return res !== undefined ? res : true;
         },
         enumerable: false,
         configurable: true
@@ -18510,7 +18539,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("itemvalue", [
 /*!***************************!*\
   !*** ./src/jsonobject.ts ***!
   \***************************/
-/*! exports provided: property, propertyArray, JsonObjectProperty, CustomPropertiesCollection, JsonMetadataClass, JsonMetadata, JsonError, JsonUnknownPropertyError, JsonMissingTypeErrorBase, JsonMissingTypeError, JsonIncorrectTypeError, JsonRequiredPropertyError, JsonRequiredArrayPropertyError, JsonObject, Serializer */
+/*! exports provided: property, propertyArray, JsonObjectProperty, CustomPropertiesCollection, JsonMetadataClass, JsonMetadata, JsonError, JsonUnknownPropertyError, JsonMissingTypeErrorBase, JsonMissingTypeError, JsonIncorrectTypeError, JsonRequiredPropertyError, JsonRequiredArrayPropertyError, JsonIncorrectPropertyValueError, JsonObject, Serializer */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -18528,6 +18557,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "JsonIncorrectTypeError", function() { return JsonIncorrectTypeError; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "JsonRequiredPropertyError", function() { return JsonRequiredPropertyError; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "JsonRequiredArrayPropertyError", function() { return JsonRequiredArrayPropertyError; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "JsonIncorrectPropertyValueError", function() { return JsonIncorrectPropertyValueError; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "JsonObject", function() { return JsonObject; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Serializer", function() { return Serializer; });
 /* harmony import */ var _surveyStrings__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./surveyStrings */ "./src/surveyStrings.ts");
@@ -18864,6 +18894,12 @@ var JsonObjectProperty = /** @class */ (function () {
             }
         }
     };
+    JsonObjectProperty.prototype.validateValue = function (value) {
+        var choices = this.choices;
+        if (!Array.isArray(choices) || choices.length === 0)
+            return true;
+        return choices.indexOf(value) > -1;
+    };
     JsonObjectProperty.prototype.getObjType = function (objType) {
         if (!this.classNamePart)
             return objType;
@@ -19941,8 +19977,8 @@ var JsonMetadata = /** @class */ (function () {
     };
     JsonMetadata.prototype.getChemeRefName = function (className, isRoot) {
         //Fix for #6486, according to https://niem.github.io/json/reference/json-schema/references/#:~:text=In%20a%20JSON%20schema%2C%20a,%2C%20an%20in%2Dschema%20reference
-        return "#/definitions/" + className;
-        //return isRoot ? "#/definitions/" + className : className + "#";
+        //Checked by https://www.jsonschemavalidator.net/
+        return isRoot ? "#/definitions/" + className : className;
     };
     JsonMetadata.prototype.generateChemaClass = function (className, schemaDef, isRoot) {
         if (!!schemaDef[className])
@@ -20097,6 +20133,17 @@ var JsonRequiredArrayPropertyError = /** @class */ (function (_super) {
     return JsonRequiredArrayPropertyError;
 }(JsonError));
 
+var JsonIncorrectPropertyValueError = /** @class */ (function (_super) {
+    __extends(JsonIncorrectPropertyValueError, _super);
+    function JsonIncorrectPropertyValueError(property, value) {
+        var _this = _super.call(this, "incorrectvalue", "The property value: '" + value + "' is incorrect for property '" + property.name + "'.") || this;
+        _this.property = property;
+        _this.value = value;
+        return _this;
+    }
+    return JsonIncorrectPropertyValueError;
+}(JsonError));
+
 var JsonObject = /** @class */ (function () {
     function JsonObject() {
         this.errors = new Array();
@@ -20113,14 +20160,14 @@ var JsonObject = /** @class */ (function () {
         if (storeDefaults === void 0) { storeDefaults = false; }
         return this.toJsonObjectCore(obj, null, storeDefaults);
     };
-    JsonObject.prototype.toObject = function (jsonObj, obj) {
-        this.toObjectCore(jsonObj, obj);
+    JsonObject.prototype.toObject = function (jsonObj, obj, options) {
+        this.toObjectCore(jsonObj, obj, options);
         var error = this.getRequiredError(obj, jsonObj);
         if (!!error) {
             this.addNewError(error, jsonObj, obj);
         }
     };
-    JsonObject.prototype.toObjectCore = function (jsonObj, obj) {
+    JsonObject.prototype.toObjectCore = function (jsonObj, obj, options) {
         if (!jsonObj)
             return;
         var properties = null;
@@ -20138,6 +20185,7 @@ var JsonObject = /** @class */ (function () {
             obj.startLoadingFromJson(jsonObj);
         }
         properties = this.addDynamicProperties(obj, jsonObj, properties);
+        this.options = options;
         for (var key in jsonObj) {
             if (key === JsonObject.typePropertyName)
                 continue;
@@ -20152,8 +20200,9 @@ var JsonObject = /** @class */ (function () {
                 }
                 continue;
             }
-            this.valueToObj(jsonObj[key], obj, property, jsonObj);
+            this.valueToObj(jsonObj[key], obj, property, jsonObj, options);
         }
+        this.options = undefined;
         if (obj.endLoadingFromJson) {
             obj.endLoadingFromJson();
         }
@@ -20226,7 +20275,7 @@ var JsonObject = /** @class */ (function () {
             }
         }
     };
-    JsonObject.prototype.valueToObj = function (value, obj, property, jsonObj) {
+    JsonObject.prototype.valueToObj = function (value, obj, property, jsonObj, options) {
         if (value === null || value === undefined)
             return;
         this.removePos(property, value);
@@ -20240,17 +20289,22 @@ var JsonObject = /** @class */ (function () {
             this.addNewError(new JsonRequiredArrayPropertyError(propName, obj.getType()), !!jsonObj ? jsonObj : value, obj);
         }
         if (this.isValueArray(value)) {
-            this.valueToArray(value, obj, property.name, property);
+            this.valueToArray(value, obj, property.name, property, options);
             return;
         }
         var newObj = this.createNewObj(value, property);
         if (newObj.newObj) {
-            this.toObjectCore(value, newObj.newObj);
+            this.toObjectCore(value, newObj.newObj, options);
             value = newObj.newObj;
         }
         if (!newObj.error) {
             if (property != null) {
                 property.setValue(obj, value, this);
+                if (!!options && options.validatePropertyValues) {
+                    if (!property.validateValue(value)) {
+                        this.addNewError(new JsonIncorrectPropertyValueError(property, value), jsonObj, obj);
+                    }
+                }
             }
             else {
                 obj[property.name] = value;
@@ -20349,17 +20403,17 @@ var JsonObject = /** @class */ (function () {
         error.at = posObj.start;
         error.end = posObj.end;
     };
-    JsonObject.prototype.valueToArray = function (value, obj, key, property) {
+    JsonObject.prototype.valueToArray = function (value, obj, key, property, options) {
         if (obj[key] && !this.isValueArray(obj[key]))
             return;
         if (obj[key] && value.length > 0)
             obj[key].splice(0, obj[key].length);
         var valueRes = obj[key] ? obj[key] : [];
-        this.addValuesIntoArray(value, valueRes, property);
+        this.addValuesIntoArray(value, valueRes, property, options);
         if (!obj[key])
             obj[key] = valueRes;
     };
-    JsonObject.prototype.addValuesIntoArray = function (value, result, property) {
+    JsonObject.prototype.addValuesIntoArray = function (value, result, property, options) {
         for (var i = 0; i < value.length; i++) {
             var newValue = this.createNewObj(value[i], property);
             if (newValue.newObj) {
@@ -20370,7 +20424,7 @@ var JsonObject = /** @class */ (function () {
                     newValue.newObj.valueName = value[i].valueName.toString();
                 }
                 result.push(newValue.newObj);
-                this.toObjectCore(value[i], newValue.newObj);
+                this.toObjectCore(value[i], newValue.newObj, options);
             }
             else {
                 if (!newValue.error) {
@@ -21212,14 +21266,21 @@ var LocalizableString = /** @class */ (function () {
         if (this.htmlValues[loc] !== undefined)
             return !!this.htmlValues[loc];
         var renderedText = this.calculatedText;
-        if (!renderedText)
+        if (!renderedText) {
+            this.setHtmlValue(loc, "");
             return false;
-        if (!!this.getLocalizationName() && renderedText === this.getLocalizationStr())
+        }
+        if (!!this.getLocalizationName() && renderedText === this.getLocalizationStr()) {
+            this.setHtmlValue(loc, "");
             return false;
+        }
         var res = this.owner.getMarkdownHtml(renderedText, this.name);
-        this.htmlValues[loc] = res;
+        this.setHtmlValue(loc, res);
         return !!res;
     };
+    LocalizableString.prototype.setHtmlValue = function (loc, val) {
+        this.htmlValues[loc] = val;
+    };
     LocalizableString.prototype.getHtmlValue = function () {
         var loc = this.locale;
         if (!loc)
@@ -35939,9 +36000,9 @@ var Question = /** @class */ (function (_super) {
             return false;
         if (!!this.page && this.page.isStartPage)
             return false;
-        if (!this.survey || !this.valueName)
+        if (!this.survey)
             return true;
-        return !this.survey.hasVisibleQuestionByValueName(this.valueName);
+        return !this.survey.hasVisibleQuestionByValueName(this.getValueName());
     };
     Object.defineProperty(Question.prototype, "isParentVisible", {
         /**
@@ -36770,6 +36831,9 @@ var Question = /** @class */ (function (_super) {
         if (this.questionComment === newValue)
             return;
         this.questionComment = newValue;
+        this.setCommentIntoData(newValue);
+    };
+    Question.prototype.setCommentIntoData = function (newValue) {
         if (this.data != null) {
             this.data.setComment(this.getValueName(), newValue, this.isSurveyInputTextUpdate ? "text" : false);
         }
@@ -38153,7 +38217,16 @@ var QuestionSelectBase = /** @class */ (function (_super) {
             if (this.getStoreOthersAsComment() && !this.autoOtherMode) {
                 this.prevOtherValue = this.otherValue;
             }
-            this.otherValue = "";
+            this.makeCommentEmpty = true;
+            this.otherValueCore = "";
+            this.setPropertyValue("comment", "");
+        }
+    };
+    QuestionSelectBase.prototype.setValueCore = function (newValue) {
+        _super.prototype.setValueCore.call(this, newValue);
+        if (this.makeCommentEmpty) {
+            this.setCommentIntoData("");
+            this.makeCommentEmpty = false;
         }
     };
     QuestionSelectBase.prototype.setNewValue = function (newValue) {
@@ -38276,9 +38349,9 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     };
     Object.defineProperty(QuestionSelectBase.prototype, "choicesByUrl", {
         /**
-         * Configures access to a RESTful service that returns choice items. Refer to the [ChoicesRestful](https://surveyjs.io/form-library/documentation/choicesrestful) class description for more information.
+         * Configures access to a RESTful service that returns choice items. Refer to the [`ChoicesRestful`](https://surveyjs.io/form-library/documentation/choicesrestful) class description for more information. You can also specify additional application-wide settings using the [`settings.web`](https://surveyjs.io/form-library/documentation/api-reference/settings#web) object.
          *
-         * [View Demo](https://surveyjs.io/form-library/examples/questiontype-dropdownrestfull/ (linkStyle))
+         * [View Demo](https://surveyjs.io/form-library/examples/dropdown-menu-load-data-from-restful-service/ (linkStyle))
          * @see choices
          * @see [settings.specialChoicesOrder](https://surveyjs.io/form-library/documentation/api-reference/settings#specialChoicesOrder)
          */
@@ -39565,21 +39638,6 @@ var QuestionCheckboxBase = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    QuestionCheckboxBase.prototype.clickItemHandler = function (item, checked) {
-        var newValue = [].concat(this.renderedValue || []);
-        var index = newValue.indexOf(item.value);
-        if (checked) {
-            if (index < 0) {
-                newValue.push(item.value);
-            }
-        }
-        else {
-            if (index > -1) {
-                newValue.splice(index, 1);
-            }
-        }
-        this.renderedValue = newValue;
-    };
     QuestionCheckboxBase.prototype.onParentChanged = function () {
         _super.prototype.onParentChanged.call(this);
         if (this.isFlowLayout) {
@@ -40413,9 +40471,10 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
     __extends(QuestionCheckboxModel, _super);
     function QuestionCheckboxModel(name) {
         var _this = _super.call(this, name) || this;
-        _this.selectAllItemValue = new _itemvalue__WEBPACK_IMPORTED_MODULE_4__["ItemValue"]("selectall");
         _this.invisibleOldValues = {};
         _this.isChangingValueOnClearIncorrect = false;
+        _this.selectAllItemValue = new _itemvalue__WEBPACK_IMPORTED_MODULE_4__["ItemValue"]("");
+        _this.selectAllItemValue.id = "selectall";
         var selectAllItemText = _this.createLocalizableString("selectAllText", _this.selectAllItem, true, "selectAllItemText");
         _this.selectAllItem.locOwner = _this;
         _this.selectAllItem.setLocText(selectAllItemText);
@@ -40573,6 +40632,31 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
         }
         this.renderedValue = val;
     };
+    QuestionCheckboxModel.prototype.clickItemHandler = function (item, checked) {
+        if (item === this.selectAllItem) {
+            if (checked === true || checked === false) {
+                this.isAllSelected = checked;
+            }
+            else {
+                this.toggleSelectAll();
+            }
+        }
+        else {
+            var newValue = [].concat(this.renderedValue || []);
+            var index = newValue.indexOf(item.value);
+            if (checked) {
+                if (index < 0) {
+                    newValue.push(item.value);
+                }
+            }
+            else {
+                if (index > -1) {
+                    newValue.splice(index, 1);
+                }
+            }
+            this.renderedValue = newValue;
+        }
+    };
     QuestionCheckboxModel.prototype.isItemSelectedCore = function (item) {
         if (item === this.selectAllItem)
             return this.isAllSelected;
@@ -41573,6 +41657,16 @@ var QuestionCustomModelBase = /** @class */ (function (_super) {
             this.getElement().localeChanged();
         }
     };
+    QuestionCustomModelBase.prototype.addUsedLocales = function (locales) {
+        _super.prototype.addUsedLocales.call(this, locales);
+        if (!!this.getElement()) {
+            this.getElement().addUsedLocales(locales);
+        }
+    };
+    QuestionCustomModelBase.prototype.needResponsiveWidth = function () {
+        var el = this.getElement();
+        return !!el ? el.needResponsiveWidth() : false;
+    };
     QuestionCustomModelBase.prototype.createWrapper = function () { };
     QuestionCustomModelBase.prototype.onPropertyValueChanged = function (name, oldValue, newValue) {
         _super.prototype.onPropertyValueChanged.call(this, name, oldValue, newValue);
@@ -43405,6 +43499,9 @@ function dataUrl2File(dataUrl, fileName, type) {
     var buffer = new Uint8Array(str.split("").map(function (c) { return c.charCodeAt(0); })).buffer;
     return new File([buffer], fileName, { type: type });
 }
+/**
+ * A base class for question types that support file upload: `QuestionFileModel` and `QuestionSignaturePadModel`.
+ */
 var QuestionFileModelBase = /** @class */ (function (_super) {
     __extends(QuestionFileModelBase, _super);
     function QuestionFileModelBase() {
@@ -45490,10 +45587,8 @@ var QuestionImagePickerModel = /** @class */ (function (_super) {
          *
          * Possible values:
          *
-         * - `"image"` - Images in one of the following formats: JPEG, GIF, PNG, APNG, SVG, BMP, ICO.
+         * - `"image"` (default) - Images in one of the following formats: JPEG, GIF, PNG, APNG, SVG, BMP, ICO.
          * - `"video"` - Videos in one of the following formats: MP4, MOV, WMV, FLV, AVI, MKV.
-         * - `"youtube"` - Links to YouTube videos.
-         * - `"auto"` (default) - Selects one of the above based on the `imageLink` property value of each choice item.
          */
         get: function () {
             return this.getPropertyValue("contentMode");
@@ -46106,13 +46201,15 @@ var QuestionMatrixModel = /** @class */ (function (_super) {
         var isChecked = row.value == column.value;
         var isDisabled = this.isReadOnly;
         var allowHover = !isChecked && !isDisabled;
+        var hasCellText = this.hasCellText;
+        var css = this.cssClasses;
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_11__["CssClassBuilder"]()
-            .append(this.cssClasses.cell, this.hasCellText)
-            .append(this.hasCellText ? this.cssClasses.cellText : this.cssClasses.label)
-            .append(this.cssClasses.itemOnError, !this.hasCellText && this.hasCssError())
-            .append(this.hasCellText ? this.cssClasses.cellTextSelected : this.cssClasses.itemChecked, isChecked)
-            .append(this.hasCellText ? this.cssClasses.cellTextDisabled : this.cssClasses.itemDisabled, isDisabled)
-            .append(this.cssClasses.itemHover, allowHover && !this.hasCellText)
+            .append(css.cell, hasCellText)
+            .append(hasCellText ? css.cellText : css.label)
+            .append(css.itemOnError, !hasCellText && this.hasCssError())
+            .append(hasCellText ? css.cellTextSelected : css.itemChecked, isChecked)
+            .append(hasCellText ? css.cellTextDisabled : css.itemDisabled, isDisabled)
+            .append(css.itemHover, allowHover && !hasCellText)
             .toString();
     };
     Object.defineProperty(QuestionMatrixModel.prototype, "itemSvgIcon", {
@@ -47205,7 +47302,7 @@ var MatrixDropdownRowModelBase = /** @class */ (function () {
         if (this.data.isValidateOnValueChanging && this.hasQuestonError(changedQuestion))
             return;
         var isDeleting = newColumnValue == null && !changedQuestion ||
-            isComment && !newColumnValue && !!changedQuestion && changedQuestion.autoOtherMode;
+            isComment && !newColumnValue && !!changedQuestion;
         this.data.onRowChanged(this, changedName, newValue, isDeleting);
         if (changedName) {
             this.runTriggers(MatrixDropdownTotalRowModel.RowVariableName + "." + changedName, newValue);
@@ -47906,6 +48003,7 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
         this.resetRenderedTable();
         this.fireCallback(this.columnsChangedCallback);
     };
+    //For internal use
     QuestionMatrixDropdownModelBase.prototype.resetRenderedTable = function () {
         if (this.lockResetRenderedTable || this.isUpdateLocked)
             return;
@@ -49373,16 +49471,17 @@ function onUpdateSelectBaseCellQuestion(cellQuestion, column, question, data) {
         cellQuestion.choicesByUrl.run(data.getTextProcessor());
     }
 }
+function onUpdateSelectDropdownCellQuestion(cellQuestion, column, question, data) {
+    onUpdateSelectBaseCellQuestion(cellQuestion, column, question, data);
+    if (!!cellQuestion.locPlaceholder && cellQuestion.locPlaceholder.isEmpty && !question.locPlaceholder.isEmpty) {
+        cellQuestion.optionsCaption = question.optionsCaption;
+    }
+}
 var matrixDropdownColumnTypes = {
     dropdown: {
         onCellQuestionUpdate: function (cellQuestion, column, question, data) {
-            onUpdateSelectBaseCellQuestion(cellQuestion, column, question, data);
-            if (!!cellQuestion.locPlaceholder &&
-                cellQuestion.locPlaceholder.isEmpty &&
-                !question.locPlaceholder.isEmpty) {
-                cellQuestion.optionsCaption = question.optionsCaption;
-            }
-        },
+            onUpdateSelectDropdownCellQuestion(cellQuestion, column, question, data);
+        }
     },
     checkbox: {
         onCellQuestionUpdate: function (cellQuestion, column, question, data) {
@@ -49398,7 +49497,11 @@ var matrixDropdownColumnTypes = {
                 column.colCount > -1 ? column.colCount : question.columnColCount;
         },
     },
-    tagbox: {},
+    tagbox: {
+        onCellQuestionUpdate: function (cellQuestion, column, question, data) {
+            onUpdateSelectBaseCellQuestion(cellQuestion, column, question, data);
+        }
+    },
     text: {},
     comment: {},
     boolean: {
@@ -50456,6 +50559,8 @@ var QuestionMatrixDropdownRenderedCell = /** @class */ (function () {
                         return "";
                     return this.cell.column.locCellHint.renderedHtml;
                 }
+                if (this.hasQuestion && this.question.isVisible && this.question.title)
+                    return this.question.title;
                 return this.cell.column.title;
             }
             if (this.hasQuestion && this.question.isVisible) {
@@ -53168,7 +53273,7 @@ var QuestionMultipleTextModel = /** @class */ (function (_super) {
     /**
      * Adds a new input item.
      * @param name An item name.
-     * @param title (Optional) An item title.
+     * @param title *(Optional)* An item title.
      * @see items
      */
     QuestionMultipleTextModel.prototype.addItem = function (name, title) {
@@ -54001,7 +54106,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         _this.registerPropertyChangedHandlers(["panelsState"], function () {
             _this.setPanelsState();
         });
-        _this.registerPropertyChangedHandlers(["isMobile"], function () {
+        _this.registerPropertyChangedHandlers(["isMobile", "newPanelPosition", "showRangeInProgress", "renderMode"], function () {
             _this.updateFooterActions();
         });
         _this.registerPropertyChangedHandlers(["allowAddPanel"], function () { _this.updateNoEntriesTextDefaultLoc(); });
@@ -54356,7 +54461,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             if (this.isRenderModeList || this.useTemplatePanel)
                 return;
             var curPanel = this.getPropertyValue("currentPanel");
-            if (!!val && this.visiblePanels.indexOf(val) < 0 || val === curPanel)
+            var index = !!val ? this.visiblePanels.indexOf(val) : -1;
+            if (!!val && index < 0 || val === curPanel)
                 return;
             if (curPanel) {
                 curPanel.onHidingContent();
@@ -54365,6 +54471,13 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             this.updateFooterActions();
             this.updateTabToolbarItemsPressedState();
             this.fireCallback(this.currentIndexChangedCallback);
+            if (index > -1 && this.survey) {
+                var options = {
+                    panel: val,
+                    visiblePanelIndex: index
+                };
+                this.survey.dynamicPanelCurrentIndexChanged(this, options);
+            }
         },
         enumerable: false,
         configurable: true
@@ -54822,6 +54935,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
          * Specifies whether users are allowed to add new panels.
          *
          * Default value: `true`
+         *
+         * By default, users add new panels to the end. If you want to let users insert a new panel after the current panel, set the [`newPanelPosition`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#newPanelPosition) property to `"next"`.
          * @see canAddPanel
          * @see allowRemovePanel
          */
@@ -54834,6 +54949,26 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "newPanelPosition", {
+        /**
+         * Specifies the position of newly added panels.
+         *
+         * Possible values:
+         *
+         * - `"last"` (default) - New panels are added to the end.
+         * - `"next"` - New panels are inserted after the current panel.
+         * @see allowAddPanel
+         * @see addPanel
+         */
+        get: function () {
+            return this.getPropertyValue("newPanelPosition");
+        },
+        set: function (val) {
+            this.setPropertyValue("newPanelPosition", val);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "allowRemovePanel", {
         /**
          * Specifies whether users are allowed to delete panels.
@@ -54937,7 +55072,6 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         },
         set: function (val) {
             this.setPropertyValue("showRangeInProgress", val);
-            this.updateFooterActions();
             this.fireCallback(this.currentIndexChangedCallback);
         },
         enumerable: false,
@@ -54960,7 +55094,6 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         },
         set: function (val) {
             this.setPropertyValue("renderMode", val);
-            this.updateFooterActions();
             this.fireCallback(this.renderModeChangedCallback);
         },
         enumerable: false,
@@ -55043,7 +55176,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         get: function () {
             if (this.isDesignMode)
                 return false;
-            if (this.isDefaultV2Theme && !this.legacyNavigation && !this.isRenderModeList && this.currentIndex < this.visiblePanelCount - 1) {
+            if (this.isDefaultV2Theme && !this.legacyNavigation && !this.isRenderModeList &&
+                (this.currentIndex < this.visiblePanelCount - 1 && this.newPanelPosition !== "next")) {
                 return false;
             }
             return (this.allowAddPanel &&
@@ -55196,48 +55330,61 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         return newPanel;
     };
     /**
-     * Add a new dynamic panel based on the template Panel.
-     * @see template
+     * Adds a new panel based on the [template](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#template).
+     * @param index *(Optional)* An index at which to insert the new panel. `undefined` adds the panel to the end or inserts it after the current panel if [`renderMode`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#renderMode) is `"tab"`. A negative index (for instance, -1) adds the panel to the end in all cases, regardless of the `renderMode` value.
      * @see panelCount
      * @see panels
-     * @see renderMode
+     * @see allowAddPanel
+     * @see newPanelPosition
      */
-    QuestionPanelDynamicModel.prototype.addPanel = function () {
-        this.panelCount++;
+    QuestionPanelDynamicModel.prototype.addPanel = function (index) {
+        var curIndex = this.currentIndex;
+        if (index === undefined) {
+            index = curIndex < 0 ? this.panelCount : curIndex + 1;
+        }
+        if (index < 0 || index > this.panelCount) {
+            index = this.panelCount;
+        }
+        this.updateValueOnAddingPanel(curIndex < 0 ? this.panelCount - 1 : curIndex, index);
         if (!this.isRenderModeList) {
-            this.currentIndex = this.panelCount - 1;
+            this.currentIndex = index;
         }
+        if (this.survey)
+            this.survey.dynamicPanelAdded(this);
+        return this.panels[index];
+    };
+    QuestionPanelDynamicModel.prototype.updateValueOnAddingPanel = function (prevIndex, index) {
+        this.panelCount++;
         var newValue = this.value;
+        if (!Array.isArray(newValue) || newValue.length !== this.panelCount)
+            return;
         var hasModified = false;
+        var lastIndex = this.panelCount - 1;
+        if (index < lastIndex) {
+            hasModified = true;
+            var rec = newValue[lastIndex];
+            newValue.splice(lastIndex, 1);
+            newValue.splice(index, 0, rec);
+        }
         if (!this.isValueEmpty(this.defaultPanelValue)) {
-            if (!!newValue &&
-                Array.isArray(newValue) &&
-                newValue.length == this.panelCount) {
-                hasModified = true;
-                this.copyValue(newValue[newValue.length - 1], this.defaultPanelValue);
-            }
-        }
-        if (this.defaultValueFromLastPanel &&
-            !!newValue &&
-            Array.isArray(newValue) &&
-            newValue.length > 1 &&
-            newValue.length == this.panelCount) {
             hasModified = true;
-            this.copyValue(newValue[newValue.length - 1], newValue[newValue.length - 2]);
+            this.copyValue(newValue[index], this.defaultPanelValue);
+        }
+        if (this.defaultValueFromLastPanel && newValue.length > 1) {
+            var fromIndex = prevIndex > -1 && prevIndex <= lastIndex ? prevIndex : lastIndex;
+            hasModified = true;
+            this.copyValue(newValue[index], newValue[fromIndex]);
         }
         if (hasModified) {
             this.value = newValue;
         }
-        if (this.survey)
-            this.survey.dynamicPanelAdded(this);
-        return this.panels[this.panelCount - 1];
     };
     QuestionPanelDynamicModel.prototype.canLeaveCurrentPanel = function () {
         return !(this.renderMode !== "list" && this.currentPanel && this.currentPanel.hasErrors(true, true));
     };
-    QuestionPanelDynamicModel.prototype.copyValue = function (src, dest) {
-        for (var key in dest) {
-            src[key] = dest[key];
+    QuestionPanelDynamicModel.prototype.copyValue = function (dest, src) {
+        for (var key in src) {
+            dest[key] = src[key];
         }
     };
     /**
@@ -55253,13 +55400,23 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         var _this = this;
         if (!this.canRemovePanel)
             return;
-        if (this.confirmDelete) {
+        if (this.isRequireConfirmOnDelete(value)) {
             Object(_utils_utils__WEBPACK_IMPORTED_MODULE_9__["confirmActionAsync"])(this.confirmDeleteText, function () { _this.removePanel(value); });
         }
         else {
             this.removePanel(value);
         }
     };
+    QuestionPanelDynamicModel.prototype.isRequireConfirmOnDelete = function (val) {
+        if (!this.confirmDelete)
+            return false;
+        var index = this.getVisualPanelIndex(val);
+        if (index < 0 || index >= this.visiblePanelCount)
+            return false;
+        var panelValue = this.visiblePanels[index].getValue();
+        return !this.isValueEmpty(panelValue) &&
+            (this.isValueEmpty(this.defaultPanelValue) || !this.isTwoValueEquals(panelValue, this.defaultPanelValue));
+    };
     /**
      * Switches Dynamic Panel to the next panel. Returns `true` in case of success, or `false` if `renderMode` is `"list"` or the current panel contains validation errors.
      * @see renderMode
@@ -55489,6 +55646,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         if (this.isReadOnly || !this.allowAddPanel) {
             this.updateNoEntriesTextDefaultLoc();
         }
+        this.updateFooterActions();
         _super.prototype.onSurveyLoad.call(this);
     };
     QuestionPanelDynamicModel.prototype.onFirstRendering = function () {
@@ -56313,6 +56471,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_5__["Serializer"].addClass("paneldynamic",
     { name: "noEntriesText:text", serializationProperty: "locNoEntriesText" },
     { name: "allowAddPanel:boolean", default: true },
     { name: "allowRemovePanel:boolean", default: true },
+    { name: "newPanelPosition", choices: ["next", "last"], default: "last", category: "layout" },
     {
         name: "panelCount:number",
         isBindable: true,
@@ -57674,9 +57833,10 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     Object.defineProperty(QuestionRatingModel.prototype, "minRateDescription", {
         /**
          * Specifies a description for the minimum (first) rate value.
+         * @see rateDescriptionLocation
+         * @see displayRateDescriptionsAsExtremeItems
          * @see rateValues
          * @see rateMin
-         * @see displayRateDescriptionsAsExtremeItems
          */
         get: function () {
             return this.getLocalizableStringText("minRateDescription");
@@ -57698,9 +57858,10 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     Object.defineProperty(QuestionRatingModel.prototype, "maxRateDescription", {
         /**
          * Specifies a description for the maximum (last) rate value.
+         * @see rateDescriptionLocation
+         * @see displayRateDescriptionsAsExtremeItems
          * @see rateValues
          * @see rateMax
-         * @see displayRateDescriptionsAsExtremeItems
          */
         get: function () {
             return this.getLocalizableStringText("maxRateDescription");
@@ -57832,8 +57993,18 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         get: function () {
             var baseClass = ((this.displayMode == "buttons" || (!!this.survey && this.survey.isDesignMode)) && this.cssClasses.rootWrappable) ?
                 this.cssClasses.rootWrappable : this.cssClasses.root;
+            var rootClassModifier = "";
+            if (this.hasMaxLabel || this.hasMinLabel) {
+                if (this.rateDescriptionLocation == "top")
+                    rootClassModifier = this.cssClasses.rootLabelsTop;
+                if (this.rateDescriptionLocation == "bottom")
+                    rootClassModifier = this.cssClasses.rootLabelsBottom;
+                if (this.rateDescriptionLocation == "topBottom")
+                    rootClassModifier = this.cssClasses.rootLabelsDiagonal;
+            }
             return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_6__["CssClassBuilder"]()
                 .append(baseClass)
+                .append(rootClassModifier)
                 .append(this.cssClasses.itemSmall, this.itemSmallMode && this.rateType != "labels")
                 .toString();
         },
@@ -58162,6 +58333,9 @@ var QuestionRatingModel = /** @class */ (function (_super) {
             }
         })
     ], QuestionRatingModel.prototype, "displayMode", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
+    ], QuestionRatingModel.prototype, "rateDescriptionLocation", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
     ], QuestionRatingModel.prototype, "rateType", void 0);
@@ -58291,6 +58465,12 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("rating", [
             return obj.rateType == "labels";
         }
     },
+    {
+        name: "rateDescriptionLocation",
+        default: "leftRight",
+        category: "layout",
+        choices: ["leftRight", "top", "bottom", "topBottom"],
+    },
     {
         name: "displayMode",
         default: "auto",
@@ -58917,6 +59097,7 @@ var QuestionTagboxModel = /** @class */ (function (_super) {
         _this.onOpened = _this.addEvent();
         _this.createLocalizableString("placeholder", _this, false, true);
         _this.createLocalizableString("clearCaption", _this, false, true);
+        _this.createLocalizableString("readOnlyText", _this, true);
         _this.registerPropertyChangedHandlers(["value", "renderAs", "showOtherItem", "otherText", "placeholder", "choices", "visibleChoices"], function () {
             _this.updateReadOnlyText();
         });
@@ -58978,6 +59159,23 @@ var QuestionTagboxModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionTagboxModel.prototype, "readOnlyText", {
+        get: function () {
+            return this.getLocalizableStringText("readOnlyText");
+        },
+        set: function (val) {
+            this.setLocalizableStringText("readOnlyText", val);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(QuestionTagboxModel.prototype, "locReadOnlyText", {
+        get: function () {
+            return this.getLocalizableString("readOnlyText");
+        },
+        enumerable: false,
+        configurable: true
+    });
     QuestionTagboxModel.prototype.getType = function () {
         return "tagbox";
     };
@@ -59103,9 +59301,6 @@ var QuestionTagboxModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: "" })
-    ], QuestionTagboxModel.prototype, "readOnlyText", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])()
     ], QuestionTagboxModel.prototype, "allowClear", void 0);
@@ -63666,6 +63861,9 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
     SurveyQuestionDropdownBase.prototype.getValueCore = function () {
         return this.questionBase.renderedValue;
     };
+    SurveyQuestionDropdownBase.prototype.renderReadOnlyElement = function () {
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null, this.question.readOnlyText);
+    };
     SurveyQuestionDropdownBase.prototype.renderSelect = function (cssClasses) {
         var _a, _b;
         var selectElement = null;
@@ -63675,7 +63873,7 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
             // @ts-ignore
             selectElement = react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.question.inputId, className: this.question.getControlClass(), disabled: true },
                 text,
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null, this.question.readOnlyText));
+                this.renderReadOnlyElement());
         }
         else {
             if (!this.question["dropdownListModel"]) {
@@ -66531,9 +66729,6 @@ var SurveyQuestionCheckboxItem = /** @class */ (function (_super) {
         _this.handleOnChange = function (event) {
             _this.question.clickItemHandler(_this.item, event.target.checked);
         };
-        _this.selectAllChanged = function (event) {
-            _this.question.toggleSelectAll();
-        };
         return _this;
     }
     SurveyQuestionCheckboxItem.prototype.getStateElement = function () {
@@ -66607,16 +66802,12 @@ var SurveyQuestionCheckboxItem = /** @class */ (function (_super) {
     });
     SurveyQuestionCheckboxItem.prototype.renderCheckbox = function (isChecked, otherItem) {
         var id = this.question.getItemId(this.item);
-        var text = !this.hideCaption ? this.renderLocString(this.item.locText) : "";
         var itemClass = this.question.getItemClass(this.item);
         var labelClass = this.question.getLabelClass(this.item);
-        var onItemChanged = this.item == this.question.selectAllItem
-            ? this.selectAllChanged
-            : 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 },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { className: this.cssClasses.itemControl, type: "checkbox", role: "option", name: this.question.name + this.item.value, value: this.item.value != "selectall" ? this.item.value : undefined, id: id, style: this.inputStyle, disabled: !this.question.getItemEnabled(this.item), checked: isChecked, onChange: onItemChanged }),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { className: this.cssClasses.itemControl, type: "checkbox", role: "option", name: this.question.name + this.item.id, value: this.item.value, id: id, style: this.inputStyle, disabled: !this.question.getItemEnabled(this.item), checked: isChecked, onChange: this.handleOnChange }),
                 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 },
@@ -67833,6 +68024,9 @@ var SurveyQuestionMatrixRow = /** @class */ (function (_super) {
                 td = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("td", { key: key, className: itemClass, onClick: getHandler ? getHandler(column) : function () { } }, this.renderLocString(this.question.getCellDisplayLocText(row.name, column))));
             }
             else {
+                var mobileSpan = this.question.isMobile ?
+                    (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.cssClasses.cellResponsiveTitle }, this.renderLocString(column.locText)))
+                    : undefined;
                 td = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("td", { key: key, "data-responsive-title": column.locText.renderedHtml, className: this.question.cssClasses.cell },
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { onMouseDown: this.handleOnMouseDown, className: itemClass },
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { id: inputId, type: "radio", className: this.cssClasses.itemValue, name: row.fullName, value: column.value, disabled: this.isDisplayMode, checked: isChecked, onChange: this.handleOnChange, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.getCellAriaLabel(row.locText.renderedHtml, column.locText.renderedHtml), "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-describedby": this.question.a11y_input_ariaDescribedBy }),
@@ -67840,7 +68034,7 @@ var SurveyQuestionMatrixRow = /** @class */ (function (_super) {
                             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: this.cssClasses.itemDecorator },
                                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("use", { xlinkHref: this.question.itemSvgIcon })) :
                             null),
-                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { style: !this.question.isMobile ? { display: "none" } : undefined, className: this.question.cssClasses.cellResponsiveTitle }, this.renderLocString(column.locText)))));
+                        mobileSpan)));
             }
             tds.push(td);
         }
@@ -69409,6 +69603,14 @@ var SurveyQuestionTagbox = /** @class */ (function (_super) {
             select,
             comment));
     };
+    SurveyQuestionTagbox.prototype.renderReadOnlyElement = function () {
+        if (this.question.locReadOnlyText) {
+            return this.renderLocString(this.question.locReadOnlyText);
+        }
+        else {
+            return null;
+        }
+    };
     return SurveyQuestionTagbox;
 }(_dropdown_base__WEBPACK_IMPORTED_MODULE_2__["SurveyQuestionDropdownBase"]));
 
@@ -70437,14 +70639,8 @@ var settings = {
         showEmptyTitles: true
     },
     //#region designMode section, Obsolete properties
-    /**
-     * This property is obsolete. Use the [`settings.designMode.showEmptyDescriptions`](https://surveyjs.io/form-library/documentation/api-reference/settings#designMode) property instead.
-     */
     get allowShowEmptyDescriptionInDesignMode() { return this.designMode.showEmptyDescriptions; },
     set allowShowEmptyDescriptionInDesignMode(val) { this.designMode.showEmptyDescriptions = val; },
-    /**
-     * This property is obsolete. Use the [`settings.designMode.showEmptyTitles`](https://surveyjs.io/form-library/documentation/api-reference/settings#designMode) property instead.
-     */
     get allowShowEmptyTitleInDesignMode() { return this.designMode.showEmptyTitles; },
     set allowShowEmptyTitleInDesignMode(val) { this.designMode.showEmptyTitles = val; },
     //#endregion
@@ -70468,19 +70664,10 @@ var settings = {
         defaultLocaleName: "default"
     },
     //#region localization section, obsolete properties
-    /**
-     * This property is obsolete. Use the [`settings.localization.useLocalTimeZone`](https://surveyjs.io/form-library/documentation/api-reference/settings#localization) property instead.
-     */
     get useLocalTimeZone() { return this.localization.useLocalTimeZone; },
     set useLocalTimeZone(val) { this.localization.useLocalTimeZone = val; },
-    /**
-     * This property is obsolete. Use the [`settings.localization.storeDuplicatedTranslations`](https://surveyjs.io/form-library/documentation/api-reference/settings#localization) property instead.
-     */
     get storeDuplicatedTranslations() { return this.localization.storeDuplicatedTranslations; },
     set storeDuplicatedTranslations(val) { this.localization.storeDuplicatedTranslations = val; },
-    /**
-     * This property is obsolete. Use the [`settings.localization.defaultLocaleName`](https://surveyjs.io/form-library/documentation/api-reference/settings#localization) property instead.
-     */
     get defaultLocaleName() { return this.localization.defaultLocaleName; },
     set defaultLocaleName(val) { this.localization.defaultLocaleName = val; },
     //#endregion
@@ -70493,41 +70680,41 @@ var settings = {
      * Specifies whether to encode URL parameters when you access a web service. Default value: `true`.
      *
      * - `cacheLoadedChoices`: `boolean`\
-     * Specifies whether to cache [choices](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#choicesByUrl) loaded from a web service. Default value: `true`.
+     * Specifies whether to cache [choices loaded from a web service](https://surveyjs.io/form-library/documentation/api-reference/questionselectbase#choicesByUrl). Default value: `true`.
      *
      * - `disableQuestionWhileLoadingChoices`: `boolean`\
      * Disables a question while its choices are being loaded from a web service. Default value: `false`.
      *
      * - `surveyServiceUrl`: `string`\
      * The URL of the SurveyJS Service API endpoint.
+     *
+     * - `onBeforeRequestChoices`: `(sender: ChoicesRestful, options: { request: XMLHttpRequest })`\
+     * An event that is raised before a request for choices is send. Applies to questions with a specified [`choiceByUrl`](https://surveyjs.io/form-library/documentation/api-reference/questionselectbase#choicesByUrl) property. Use the `options.request` parameter to access and modify the `XMLHttpRequest` object. For instance, you can add authentication headers to it:
+     *
+     *     ```js
+     *     import { settings } from "survey-core";
+     *
+     *     settings.web.onBeforeSendRequest = (sender, options) => {
+     *       options.request.setRequestHeader('RequestVerificationToken', requestVerificationToken);
+     *     };
+     *     ```
      */
     web: {
+        onBeforeRequestChoices: function (sender, options) { },
         encodeUrlParams: true,
         cacheLoadedChoices: true,
         disableQuestionWhileLoadingChoices: false,
         surveyServiceUrl: "https://api.surveyjs.io/public/v1/Survey"
     },
     //#region web section, obsolete properties
-    /**
-     * This property is obsolete. Use the [`settings.web.encodeUrlParams`](https://surveyjs.io/form-library/documentation/api-reference/settings#web) property instead.
-     */
     get webserviceEncodeParameters() { return this.web.encodeUrlParams; },
     set webserviceEncodeParameters(val) { this.web.encodeUrlParams = val; },
-    /**
-     * This property is obsolete. Use the [`settings.web.cacheLoadedChoices`](https://surveyjs.io/form-library/documentation/api-reference/settings#web) property instead.
-     */
     get useCachingForChoicesRestful() { return this.web.cacheLoadedChoices; },
     set useCachingForChoicesRestful(val) { this.web.cacheLoadedChoices = val; },
     get useCachingForChoicesRestfull() { return this.web.cacheLoadedChoices; },
     set useCachingForChoicesRestfull(val) { this.web.cacheLoadedChoices = val; },
-    /**
-     * This property is obsolete. Use the [`settings.web.disableQuestionWhileLoadingChoices`](https://surveyjs.io/form-library/documentation/api-reference/settings#web) property instead.
-     */
     get disableOnGettingChoicesFromWeb() { return this.web.disableQuestionWhileLoadingChoices; },
     set disableOnGettingChoicesFromWeb(val) { this.web.disableQuestionWhileLoadingChoices = val; },
-    /**
-     * This property is obsolete. Use the [`settings.web.surveyServiceUrl`](https://surveyjs.io/form-library/documentation/api-reference/settings#web) property instead.
-     */
     get surveyServiceUrl() { return this.web.surveyServiceUrl; },
     set surveyServiceUrl(val) { this.web.surveyServiceUrl = val; },
     //#endregion
@@ -70553,19 +70740,10 @@ var settings = {
         executeSkipOnValueChanged: true
     },
     //#region triggers section, Obsolete properties
-    /**
-     * This property is obsolete. Use the [`settings.triggers.executeCompleteOnValueChanged`](https://surveyjs.io/form-library/documentation/api-reference/settings#triggers) property instead.
-     */
     get executeCompleteTriggerOnValueChanged() { return this.triggers.executeCompleteOnValueChanged; },
     set executeCompleteTriggerOnValueChanged(val) { this.triggers.executeCompleteOnValueChanged = val; },
-    /**
-     * This property is obsolete. Use the [`settings.triggers.changeNavigationButtonsOnComplete`](https://surveyjs.io/form-library/documentation/api-reference/settings#triggers) property instead.
-     */
     get changeNavigationButtonsOnCompleteTrigger() { return this.triggers.changeNavigationButtonsOnComplete; },
     set changeNavigationButtonsOnCompleteTrigger(val) { this.triggers.changeNavigationButtonsOnComplete = val; },
-    /**
-     * This property is obsolete. Use the [`settings.triggers.executeSkipOnValueChanged`](https://surveyjs.io/form-library/documentation/api-reference/settings#triggers) property instead.
-     */
     get executeSkipTriggerOnValueChanged() { return this.triggers.executeSkipOnValueChanged; },
     set executeSkipTriggerOnValueChanged(val) { this.triggers.executeSkipOnValueChanged = val; },
     //#endregion
@@ -70603,19 +70781,10 @@ var settings = {
         localizableStringSerializeAsObject: false
     },
     //#region serialization section, Obsolete properties
-    /**
-     * This property is obsolete. Use the [`settings.serialization.itemValueSerializeAsObject`](https://surveyjs.io/form-library/documentation/api-reference/settings#serialization) property instead.
-     */
     get itemValueAlwaysSerializeAsObject() { return this.serialization.itemValueSerializeAsObject; },
     set itemValueAlwaysSerializeAsObject(val) { this.serialization.itemValueSerializeAsObject = val; },
-    /**
-     * This property is obsolete. Use the [`settings.serialization.itemValueSerializeDisplayText`](https://surveyjs.io/form-library/documentation/api-reference/settings#serialization) property instead.
-     */
     get itemValueAlwaysSerializeText() { return this.serialization.itemValueSerializeDisplayText; },
     set itemValueAlwaysSerializeText(val) { this.serialization.itemValueSerializeDisplayText = val; },
-    /**
-     * This property is obsolete. Use the [`settings.serialization.localizableStringSerializeAsObject`](https://surveyjs.io/form-library/documentation/api-reference/settings#serialization) property instead.
-     */
     get serializeLocalizableStringAsObject() { return this.serialization.localizableStringSerializeAsObject; },
     set serializeLocalizableStringAsObject(val) { this.serialization.localizableStringSerializeAsObject = val; },
     //#endregion
@@ -70634,9 +70803,6 @@ var settings = {
         firstBatchSize: 3
     },
     //#region lazyRender section, Obsolete properties
-    /**
-     * This property is obsolete. Use the [`settings.lazyRender.enabled`](https://surveyjs.io/form-library/documentation/api-reference/settings#lazyRender) property instead.
-     */
     get lazyRowsRendering() { return this.lazyRender.enabled; },
     set lazyRowsRendering(val) { this.lazyRender.enabled = val; },
     get lazyRowsRenderingStartRow() { return this.lazyRender.firstBatchSize; },
@@ -70686,34 +70852,16 @@ var settings = {
         rateSize: "small",
     },
     //#region matrix section, Obsolete properties
-    /**
-     * This property is obsolete. Use the [`settings.matrix.defaultRowName`](https://surveyjs.io/form-library/documentation/api-reference/settings#matrix) property instead.
-     */
     get matrixDefaultRowName() { return this.matrix.defaultRowName; },
     set matrixDefaultRowName(val) { this.matrix.defaultRowName = val; },
-    /**
-     * This property is obsolete. Use the [`settings.matrix.defaultCellType`](https://surveyjs.io/form-library/documentation/api-reference/settings#matrix) property instead.
-     */
     get matrixDefaultCellType() { return this.matrix.defaultCellType; },
     set matrixDefaultCellType(val) { this.matrix.defaultCellType = val; },
-    /**
-     * This property is obsolete. Use the [`settings.matrix.totalsSuffix`](https://surveyjs.io/form-library/documentation/api-reference/settings#matrix) property instead.
-     */
     get matrixTotalValuePostFix() { return this.matrix.totalsSuffix; },
     set matrixTotalValuePostFix(val) { this.matrix.totalsSuffix = val; },
-    /**
-     * This property is obsolete. Use the [`settings.matrix.maxRowCount`](https://surveyjs.io/form-library/documentation/api-reference/settings#matrix) property instead.
-     */
     get matrixMaximumRowCount() { return this.matrix.maxRowCount; },
     set matrixMaximumRowCount(val) { this.matrix.maxRowCount = val; },
-    /**
-     * This property is obsolete. Use the [`settings.matrix.maxRowCountInCondition`](https://surveyjs.io/form-library/documentation/api-reference/settings#matrix) property instead.
-     */
     get matrixMaxRowCountInCondition() { return this.matrix.maxRowCountInCondition; },
     set matrixMaxRowCountInCondition(val) { this.matrix.maxRowCountInCondition = val; },
-    /**
-     * This property is obsolete. Use the [`settings.matrix.renderRemoveAsIcon`](https://surveyjs.io/form-library/documentation/api-reference/settings#matrix) property instead.
-     */
     get matrixRenderRemoveAsIcon() { return this.matrix.renderRemoveAsIcon; },
     set matrixRenderRemoveAsIcon(val) { this.matrix.renderRemoveAsIcon = val; },
     //#endregion
@@ -70735,14 +70883,8 @@ var settings = {
         maxPanelCountInCondition: 1
     },
     //#region panel section, Obsolete properties
-    /**
-     * This property is obsolete. Use the [`settings.panel.maxPanelCountInCondition`](https://surveyjs.io/form-library/documentation/api-reference/settings#panel) property instead.
-     */
     get panelDynamicMaxPanelCountInCondition() { return this.panel.maxPanelCountInCondition; },
     set panelDynamicMaxPanelCountInCondition(val) { this.panel.maxPanelCountInCondition = val; },
-    /**
-     * This property is obsolete. Use the [`settings.panel.maxPanelCount`](https://surveyjs.io/form-library/documentation/api-reference/settings#panel) property instead.
-     */
     get panelMaximumPanelCount() { return this.panel.maxPanelCount; },
     set panelMaximumPanelCount(val) { this.panel.maxPanelCount = val; },
     //#endregion
@@ -70763,14 +70905,8 @@ var settings = {
         textRenderMode: "input"
     },
     //#region readOnly section, Obsolete properties
-    /**
-     * This property is obsolete. Use the [`settings.readOnly.commentRenderMode`](https://surveyjs.io/form-library/documentation/api-reference/settings#readOnly) property instead.
-     */
     get readOnlyCommentRenderMode() { return this.readOnly.commentRenderMode; },
     set readOnlyCommentRenderMode(val) { this.readOnly.commentRenderMode = val; },
-    /**
-     * This property is obsolete. Use the [`settings.readOnly.textRenderMode`](https://surveyjs.io/form-library/documentation/api-reference/settings#readOnly) property instead.
-     */
     get readOnlyTextRenderMode() { return this.readOnly.textRenderMode; },
     set readOnlyTextRenderMode(val) { this.readOnly.textRenderMode = val; },
     //#endregion
@@ -70790,14 +70926,8 @@ var settings = {
         includeQuestionsWithHiddenTitle: false
     },
     //#region numbering section, Obsolete properties
-    /**
-     * This property is obsolete. Use the [`settings.numbering.includeQuestionsWithHiddenTitle`](https://surveyjs.io/form-library/documentation/api-reference/settings#numbering) property instead.
-     */
     get setQuestionVisibleIndexForHiddenTitle() { return this.numbering.includeQuestionsWithHiddenTitle; },
     set setQuestionVisibleIndexForHiddenTitle(val) { this.numbering.includeQuestionsWithHiddenTitle = val; },
-    /**
-     * This property is obsolete. Use the [`settings.numbering.includeQuestionsWithHiddenNumber`](https://surveyjs.io/form-library/documentation/api-reference/settings#numbering) property instead.
-     */
     get setQuestionVisibleIndexForHiddenNumber() { return this.numbering.includeQuestionsWithHiddenNumber; },
     set setQuestionVisibleIndexForHiddenNumber(val) { this.numbering.includeQuestionsWithHiddenNumber = val; },
     //#endregion
@@ -72195,6 +72325,16 @@ var SurveyElement = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SurveyElement.prototype, "cssClassesValue", {
+        get: function () {
+            return this.getPropertyValueWithoutDefault("cssClassesValue");
+        },
+        set: function (val) {
+            this.setPropertyValue("cssClassesValue", val);
+        },
+        enumerable: false,
+        configurable: true
+    });
     SurveyElement.prototype.ensureCssClassesValue = function () {
         if (!this.cssClassesValue) {
             this.cssClassesValue = this.calcCssClasses(this.css);
@@ -72248,7 +72388,7 @@ var SurveyElement = /** @class */ (function (_super) {
     SurveyElement.prototype.getIsLoadingFromJson = function () {
         if (_super.prototype.getIsLoadingFromJson.call(this))
             return true;
-        return this.survey ? this.survey.isLoadingFromJson : false;
+        return this.surveyValue ? this.surveyValue.isLoadingFromJson : false;
     };
     Object.defineProperty(SurveyElement.prototype, "name", {
         /**
@@ -72773,9 +72913,6 @@ var SurveyElement = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: false })
     ], SurveyElement.prototype, "isDragMe", void 0);
-    __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])()
-    ], SurveyElement.prototype, "cssClassesValue", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: false })
     ], SurveyElement.prototype, "hasVisibleErrors", void 0);
@@ -73545,6 +73682,10 @@ var SurveyModel = /** @class */ (function (_super) {
          * [View Demo](https://surveyjs.io/form-library/examples/tabbed-interface-for-duplicate-group-option/ (linkStyle))
          */
         _this.onGetDynamicPanelTabTitle = _this.addEvent();
+        /**
+         * An event that is raised after the current panel is changed in a [Dynamic Panel](https://surveyjs.io/form-library/examples/questiontype-paneldynamic/) question.
+         */
+        _this.onDynamicPanelCurrentIndexChanged = _this.addEvent();
         /**
          * 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).
          */
@@ -74794,7 +74935,7 @@ var SurveyModel = /** @class */ (function (_super) {
          * [Survey Localization demo](https://surveyjs.io/form-library/examples/survey-localization/ (linkStyle))
          */
         get: function () {
-            return this.getPropertyValue("locale", _surveyStrings__WEBPACK_IMPORTED_MODULE_8__["surveyLocalization"].currentLocale);
+            return this.getPropertyValueWithoutDefault("locale") || _surveyStrings__WEBPACK_IMPORTED_MODULE_8__["surveyLocalization"].currentLocale;
         },
         set: function (value) {
             if (value === _surveyStrings__WEBPACK_IMPORTED_MODULE_8__["surveyLocalization"].defaultLocale && !_surveyStrings__WEBPACK_IMPORTED_MODULE_8__["surveyLocalization"].currentLocale) {
@@ -75195,6 +75336,7 @@ var SurveyModel = /** @class */ (function (_super) {
             if (newVal !== this._isCompact) {
                 this._isCompact = newVal;
                 this.updateElementCss();
+                this.triggerResponsiveness(true);
             }
         },
         enumerable: false,
@@ -75978,7 +76120,7 @@ var SurveyModel = /** @class */ (function (_super) {
     /**
      * Merges a specified data object with the object from the [`data`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#data) property.
      *
-     * Refer to the following help topic for more information: [Merge Question Values](https://surveyjs.io/form-library/documentation/design-survey/merge-question-values).
+     * Refer to the following help topic for more information: [Populate Form Fields | Multiple Question Values](https://surveyjs.io/form-library/documentation/design-survey/pre-populate-form-fields#multiple-question-values).
      *
      * @param data A data object to merge. It should have the following structure: `{ questionName: questionValue, ... }`
      * @see setValue
@@ -77146,21 +77288,16 @@ var SurveyModel = /** @class */ (function (_super) {
         var visPages = this.visiblePages;
         var firstErrorPage = null;
         var res = true;
+        var rec = { fireCallback: fireCallback, focuseOnFirstError: focusOnFirstError, firstErrorQuestion: null, result: false };
         for (var i = 0; i < visPages.length; i++) {
-            if (!visPages[i].validate(fireCallback, false)) {
+            if (!visPages[i].validate(fireCallback, focusOnFirstError, rec)) {
                 if (!firstErrorPage)
                     firstErrorPage = visPages[i];
                 res = false;
             }
         }
-        if (focusOnFirstError && !!firstErrorPage) {
-            var questions = firstErrorPage.getQuestions(true);
-            for (var i_2 = 0; i_2 < questions.length; i_2++) {
-                if (questions[i_2].errors.length > 0) {
-                    questions[i_2].focus(true);
-                    break;
-                }
-            }
+        if (focusOnFirstError && !!firstErrorPage && !!rec.firstErrorQuestion) {
+            rec.firstErrorQuestion.focus(true);
         }
         if (!res || !onAsyncValidation)
             return res;
@@ -77538,6 +77675,7 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     SurveyModel.prototype.setupPagesForPageModes = function (isSinglePage) {
         this.questionHashesClear();
+        this.isCreatingPagesForPreview = true;
         var startIndex = this.getPageStartIndex();
         _super.prototype.startLoadingFromJson.call(this);
         var newPages = this.createPagesForQuestionOnPageMode(isSinglePage, startIndex);
@@ -77552,6 +77690,7 @@ var SurveyModel = /** @class */ (function (_super) {
         }
         this.doElementsOnLoad();
         this.updateCurrentPage();
+        this.isCreatingPagesForPreview = false;
     };
     SurveyModel.prototype.createPagesForQuestionOnPageMode = function (isSinglePage, startIndex) {
         if (isSinglePage) {
@@ -78203,7 +78342,8 @@ var SurveyModel = /** @class */ (function (_super) {
     SurveyModel.prototype.afterRenderPage = function (htmlElement) {
         var _this = this;
         if (!this.isDesignMode && !this.focusingQuestionInfo) {
-            setTimeout(function () { return _this.scrollToTopOnPageChange(!_this.isFirstPageRendering); }, 1);
+            var doScroll_1 = !this.isFirstPageRendering;
+            setTimeout(function () { return _this.scrollToTopOnPageChange(doScroll_1); }, 1);
         }
         this.focusQuestionInfo();
         this.isFirstPageRendering = false;
@@ -78422,6 +78562,10 @@ var SurveyModel = /** @class */ (function (_super) {
         options.question = question;
         this.onGetDynamicPanelTabTitle.fire(this, options);
     };
+    SurveyModel.prototype.dynamicPanelCurrentIndexChanged = function (question, options) {
+        options.question = question;
+        this.onDynamicPanelCurrentIndexChanged.fire(this, options);
+    };
     SurveyModel.prototype.dragAndDropAllow = function (options) {
         this.onDragDropAllow.fire(this, options);
         return options.allow;
@@ -78505,13 +78649,8 @@ var SurveyModel = /** @class */ (function (_super) {
      *   question,
      *   question.name,
      *   question.value,
-     *   (status, data) => {
-     *     if (status === "success") {
-     *       // Handle success
-     *     }
-     *     if (status === "error") {
-     *       // Handle error
-     *     }
+     *   (data, errors) => {
+     *     // ...
      *   }
      * );
      * ```
@@ -78700,7 +78839,7 @@ var SurveyModel = /** @class */ (function (_super) {
     /**
      * Returns a question with a specified [`name`](https://surveyjs.io/form-library/documentation/api-reference/question#name).
      * @param name A question name
-     * @param caseInsensitive (Optional) A Boolean value that specifies case sensitivity when searching for the question. Default value: `false` (uppercase and lowercase letters are treated as distinct).
+     * @param caseInsensitive *(Optional)* A Boolean value that specifies case sensitivity when searching for the question. Default value: `false` (uppercase and lowercase letters are treated as distinct).
      * @returns A question with a specified name.
      * @see getAllQuestions
      * @see getQuestionByValueName
@@ -78728,7 +78867,7 @@ var SurveyModel = /** @class */ (function (_super) {
      *
      * > Since `valueName` does not have to be unique, multiple questions can have the same `valueName` value. In this case, the `getQuestionByValueName()` method returns the first such question. If you need to get all questions with the same `valueName`, call the `getQuestionsByValueName()` method.
      * @param valueName A question's `valueName` property value.
-     * @param caseInsensitive (Optional) A Boolean value that specifies case sensitivity when searching for the question. Default value: `false` (uppercase and lowercase letters are treated as distinct).
+     * @param caseInsensitive *(Optional)* A Boolean value that specifies case sensitivity when searching for the question. Default value: `false` (uppercase and lowercase letters are treated as distinct).
      * @returns A question with a specified `valueName`.
      * @see getAllQuestions
      * @see getQuestionByName
@@ -78741,7 +78880,7 @@ var SurveyModel = /** @class */ (function (_super) {
     /**
      * Returns all questions with a specified [`valueName`](https://surveyjs.io/form-library/documentation/api-reference/question#valueName). If a question's `valueName` is undefined, its [`name`](https://surveyjs.io/form-library/documentation/api-reference/question#name) property is used.
      * @param valueName A question's `valueName` property value.
-     * @param caseInsensitive (Optional) A Boolean value that specifies case sensitivity when searching for the questions. Default value: `false` (uppercase and lowercase letters are treated as distinct).
+     * @param caseInsensitive *(Optional)* A Boolean value that specifies case sensitivity when searching for the questions. Default value: `false` (uppercase and lowercase letters are treated as distinct).
      * @returns An array of questions with a specified `valueName`.
      * @see getAllQuestions
      * @see getQuestionByName
@@ -78766,7 +78905,7 @@ var SurveyModel = /** @class */ (function (_super) {
     /**
      * Returns an array of questions with specified [names](https://surveyjs.io/form-library/documentation/api-reference/question#name).
      * @param names An array of question names.
-     * @param caseInsensitive (Optional) A Boolean value that specifies case sensitivity when searching for the questions. Default value: `false` (uppercase and lowercase letters are treated as distinct).
+     * @param caseInsensitive *(Optional)* A Boolean value that specifies case sensitivity when searching for the questions. Default value: `false` (uppercase and lowercase letters are treated as distinct).
      * @returns An array of questions with specified names
      * @see getAllQuestions
      */
@@ -78884,7 +79023,7 @@ var SurveyModel = /** @class */ (function (_super) {
     /**
      * Returns a [panel](https://surveyjs.io/form-library/documentation/api-reference/panel-model) with a specified [`name`](https://surveyjs.io/form-library/documentation/api-reference/panel-model#name).
      * @param name A panel name.
-     * @param caseInsensitive (Optional) A Boolean value that specifies case sensitivity when searching for the panel. Default value: `false` (uppercase and lowercase letters are treated as distinct).
+     * @param caseInsensitive *(Optional)* A Boolean value that specifies case sensitivity when searching for the panel. Default value: `false` (uppercase and lowercase letters are treated as distinct).
      * @returns A panel with a specified name.
      * @see getAllPanels
      */
@@ -79198,8 +79337,8 @@ var SurveyModel = /** @class */ (function (_super) {
             this.calculatedValues[i].doCalculation(this.calculatedValues, this.conditionValues, properties);
         }
         _super.prototype.runConditionCore.call(this, this.conditionValues, properties);
-        for (var i_3 = 0; i_3 < pages.length; i_3++) {
-            pages[i_3].runCondition(this.conditionValues, properties);
+        for (var i_2 = 0; i_2 < pages.length; i_2++) {
+            pages[i_2].runCondition(this.conditionValues, properties);
         }
     };
     SurveyModel.prototype.runQuestionsTriggers = function (name, value) {
@@ -79371,13 +79510,13 @@ var SurveyModel = /** @class */ (function (_super) {
             page.num = isPageVisible ? page.visibleIndex + 1 : -1;
         }
     };
-    SurveyModel.prototype.fromJSON = function (json) {
+    SurveyModel.prototype.fromJSON = function (json, options) {
         if (!json)
             return;
         this.questionHashesClear();
         this.jsonErrors = null;
         var jsonConverter = new _jsonobject__WEBPACK_IMPORTED_MODULE_1__["JsonObject"]();
-        jsonConverter.toObject(json, this);
+        jsonConverter.toObject(json, this, options);
         if (jsonConverter.errors.length > 0) {
             this.jsonErrors = jsonConverter.errors;
         }
@@ -79716,6 +79855,8 @@ var SurveyModel = /** @class */ (function (_super) {
     SurveyModel.prototype.setValue = function (name, newQuestionValue, locNotification, allowNotifyValueChanged, questionName) {
         if (locNotification === void 0) { locNotification = false; }
         if (allowNotifyValueChanged === void 0) { allowNotifyValueChanged = true; }
+        if (this.isCreatingPagesForPreview)
+            return;
         var newValue = newQuestionValue;
         if (allowNotifyValueChanged) {
             newValue = this.questionOnValueChanging(name, newQuestionValue);
@@ -80448,6 +80589,9 @@ var SurveyModel = /** @class */ (function (_super) {
         return this.getLocalizationFormatString(strName, surveySpent, surveyLimit);
     };
     SurveyModel.prototype.getDisplayClockTime = function (val) {
+        if (val < 0) {
+            val = 0;
+        }
         var min = Math.floor(val / 60);
         var sec = val % 60;
         var secStr = sec.toString();
@@ -80803,7 +80947,19 @@ var SurveyModel = /** @class */ (function (_super) {
                 }
             }
             else if (this.state === "running" && isStrCiEqual(layoutElement.id, "progress-" + this.progressBarType)) {
-                if (container === "center") {
+                var headerLayoutElement = this.layoutElements.filter(function (a) { return a.id === "advanced-header"; })[0];
+                var advHeader = headerLayoutElement && headerLayoutElement.data;
+                var isBelowHeader = !advHeader || advHeader.hasBackground;
+                if (container === "header" && !isBelowHeader) {
+                    layoutElement.index = -150;
+                    if (this.isShowProgressBarOnTop && !this.isShowStartingPage) {
+                        containerLayoutElements.push(layoutElement);
+                    }
+                }
+                if (container === "center" && isBelowHeader) {
+                    if (!!layoutElement.index) {
+                        delete layoutElement.index;
+                    }
                     if (this.isShowProgressBarOnTop && !this.isShowStartingPage) {
                         containerLayoutElements.push(layoutElement);
                     }
@@ -81086,7 +81242,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("survey", [
         onSetValue: function (obj, value, jsonConverter) {
             obj.pages.splice(0, obj.pages.length);
             var page = obj.addNewPage("");
-            jsonConverter.toObject({ questions: value }, page);
+            jsonConverter.toObject({ questions: value }, page, jsonConverter === null || jsonConverter === void 0 ? void 0 : jsonConverter.options);
         },
     },
     {