survey-react 1.9.125 → 1.9.127

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.125
+ * surveyjs - Survey JavaScript library v1.9.127
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1900,6 +1900,20 @@ var Base = /** @class */ (function () {
         }
         return _helpers__WEBPACK_IMPORTED_MODULE_1__["Helpers"].isValueEmpty(value);
     };
+    Base.prototype.equals = function (obj) {
+        if (!obj)
+            return false;
+        if (this.isDisposed || obj.isDisposed)
+            return false;
+        if (this.getType() != obj.getType())
+            return false;
+        return this.equalsCore(obj);
+    };
+    Base.prototype.equalsCore = function (obj) {
+        if (this.name !== obj.name)
+            return false;
+        return _helpers__WEBPACK_IMPORTED_MODULE_1__["Helpers"].isTwoValueEquals(this.toJSON(), obj.toJSON(), false, true, false);
+    };
     Base.prototype.trimValue = function (value) {
         if (!!value && (typeof value === "string" || value instanceof String))
             return value.trim();
@@ -2027,8 +2041,8 @@ var Base = /** @class */ (function () {
      * Returns a JSON object that corresponds to the current SurveyJS object.
      * @see fromJSON
      */
-    Base.prototype.toJSON = function () {
-        return new _jsonobject__WEBPACK_IMPORTED_MODULE_2__["JsonObject"]().toJsonObject(this);
+    Base.prototype.toJSON = function (options) {
+        return new _jsonobject__WEBPACK_IMPORTED_MODULE_2__["JsonObject"]().toJsonObject(this, options);
     };
     /**
      * Assigns a new configuration to the current SurveyJS object. This configuration is taken from a passed JSON object.
@@ -4875,14 +4889,19 @@ var modernCss = {
     },
     window: {
         root: "sv_window",
+        rootCollapsedMod: "sv_window--collapsed",
+        rootContent: "sv_window_root-content",
         body: "sv_window_content",
         header: {
-            root: "sv_window_title",
-            title: "",
-            button: "",
+            root: "sv_window_header",
+            titleCollapsed: "sv_window_header_title_collapsed",
+            buttonsContainer: "sv_window_buttons_container",
+            button: "sv_window_button",
             buttonExpanded: "",
             buttonCollapsed: "",
-        },
+            collapseButton: "sv_window_button sv_window_button_collapse",
+            closeButton: "sv_window_button sv_window_button_close"
+        }
     },
     variables: {
         mobileWidth: "--sv-mobile-width",
@@ -5268,14 +5287,19 @@ var defaultStandardCss = {
     },
     window: {
         root: "sv_window",
+        rootCollapsedMod: "sv_window--collapsed",
+        rootContent: "sv_window_root-content",
         body: "sv_window_content",
         header: {
-            root: "sv_window_title",
-            title: "",
-            button: "",
+            root: "sv_window_header",
+            titleCollapsed: "sv_window_header_title_collapsed",
+            buttonsContainer: "sv_window_buttons_container",
+            button: "sv_window_button",
             buttonExpanded: "",
             buttonCollapsed: "",
-        },
+            collapseButton: "sv_window_button sv_window_button_collapse",
+            closeButton: "sv_window_button sv_window_button_close"
+        }
     },
     variables: {
         mobileWidth: "--sv-mobile-width",
@@ -5496,6 +5520,7 @@ var defaultV2Css = {
         headerTop: "sd-question__header--location-top sd-element__header--location-top",
         headerBottom: "sd-question__header--location--bottom",
         content: "sd-question__content",
+        contentSupportContainerQueries: "sd-question__content--support-container-queries",
         contentLeft: "sd-question__content--left",
         titleNumInline: "sd-element__title--num-inline",
         titleLeftRoot: "sd-question--left",
@@ -5649,6 +5674,7 @@ var defaultV2Css = {
         small: "sd-row__question--small",
         controlDisabled: "sd-input--disabled",
         constrolWithCharacterCounter: "sd-text__character-counter",
+        characterCounterBig: "sd-text__character-counter--big",
         content: "sd-text__content sd-question__content",
         remainingCharacterCounter: "sd-remaining-character-counter",
         onError: "sd-input--error"
@@ -5737,6 +5763,7 @@ var defaultV2Css = {
         rowError: "sd-matrix__row--error",
         cell: "sd-table__cell sd-matrix__cell",
         row: "sd-table__row",
+        rowDisabled: "sd-table__row-disabled",
         headerCell: "sd-table__cell sd-table__cell--header",
         rowTextCell: "sd-table__cell sd-matrix__cell sd-table__cell--row-text",
         label: "sd-item sd-radio sd-matrix__label",
@@ -5975,13 +6002,18 @@ var defaultV2Css = {
     },
     window: {
         root: "sv_window",
+        rootCollapsedMod: "sv_window--collapsed",
+        rootContent: "sv_window_root-content",
         body: "sv_window_content",
         header: {
-            root: "sv_window_title",
-            title: "",
+            root: "sv_window_header",
+            titleCollapsed: "sv_window_header_title_collapsed",
+            buttonsContainer: "sv_window_buttons_container",
             button: "sv_window_button",
             buttonExpanded: "",
-            buttonCollapsed: ""
+            buttonCollapsed: "",
+            collapseButton: "sv_window_button sv_window_button_collapse",
+            closeButton: "sv_window_button sv_window_button_close"
         }
     },
     ranking: {
@@ -7734,17 +7766,20 @@ var DragDropRankingSelectToRank = /** @class */ (function (_super) {
         var rankingChoices = questionModel.rankingChoices;
         var unRankingChoices = questionModel.unRankingChoices;
         var item = unRankingChoices[fromIndex];
+        questionModel.isValueSetByUser = true;
         rankingChoices.splice(toIndex, 0, item);
         questionModel.setPropertyValue("rankingChoices", rankingChoices);
     };
     DragDropRankingSelectToRank.prototype.unselectFromRank = function (questionModel, fromIndex, toIndex) {
         var rankingChoices = questionModel.rankingChoices;
+        questionModel.isValueSetByUser = true;
         rankingChoices.splice(fromIndex, 1);
         questionModel.setPropertyValue("rankingChoices", rankingChoices);
     };
     DragDropRankingSelectToRank.prototype.reorderRankedItem = function (questionModel, fromIndex, toIndex) {
         var rankingChoices = questionModel.rankingChoices;
         var item = rankingChoices[fromIndex];
+        questionModel.isValueSetByUser = true;
         rankingChoices.splice(fromIndex, 1);
         rankingChoices.splice(toIndex, 0, item);
         questionModel.setPropertyValue("rankingChoices", rankingChoices);
@@ -9448,8 +9483,8 @@ __webpack_require__.r(__webpack_exports__);
 //import "../../modern.scss";
 var Version;
 var ReleaseDate;
-Version = "" + "1.9.125";
-ReleaseDate = "" + "2024-01-11";
+Version = "" + "1.9.127";
+ReleaseDate = "" + "2024-01-23";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -16972,21 +17007,11 @@ var Helpers = /** @class */ (function () {
             return x == y;
         if (!Helpers.isValueObject(x) || !Helpers.isValueObject(y))
             return false;
-        if (x["equals"])
+        if (x["equals"] && y["equals"])
             return x.equals(y);
-        if (!!x.toJSON && !!y.toJSON && !!x.getType && !!y.getType) {
-            if (x.isDisposed || y.isDisposed)
-                return false;
-            if (x.getType() !== y.getType())
-                return false;
-            if (!!x.name && x.name !== y.name)
-                return false;
-            return this.isTwoValueEquals(x.toJSON(), y.toJSON(), ignoreOrder, caseSensitive, trimStrings);
-        }
-        if (Array.isArray(x) && Array.isArray(y))
+        if (Array.isArray(x) && Array.isArray(y)) {
             return Helpers.isArraysEqual(x, y, ignoreOrder, caseSensitive, trimStrings);
-        if (!!x.equalsTo && y.equalsTo)
-            return x.equalsTo(y);
+        }
         for (var p in x) {
             if (!x.hasOwnProperty(p))
                 continue;
@@ -17262,6 +17287,27 @@ var Helpers = /** @class */ (function () {
         }
         return val;
     };
+    Helpers.compareVerions = function (ver1, ver2) {
+        if (!ver1 && !ver2)
+            return 0;
+        var ver1Ar = ver1.split(".");
+        var ver2Ar = ver2.split(".");
+        var len1 = ver1Ar.length;
+        var len2 = ver2Ar.length;
+        for (var i = 0; i < len1 && i < len2; i++) {
+            var str1 = ver1Ar[i];
+            var str2 = ver2Ar[i];
+            if (str1.length === str2.length) {
+                if (str1 !== str2) {
+                    return str1 < str2 ? -1 : 1;
+                }
+            }
+            else {
+                return str1.length < str2.length ? -1 : 1;
+            }
+        }
+        return len1 === len2 ? 0 : (len1 < len2 ? -1 : 1);
+    };
     return Helpers;
 }());
 
@@ -17318,10 +17364,12 @@ var map = {
 	"./V2DragElement_16x16.svg": "./src/images/V2DragElement_16x16.svg",
 	"./chevron.svg": "./src/images/chevron.svg",
 	"./clear_16x16.svg": "./src/images/clear_16x16.svg",
+	"./close_16x16.svg": "./src/images/close_16x16.svg",
 	"./collapseDetail.svg": "./src/images/collapseDetail.svg",
 	"./drag-n-drop.svg": "./src/images/drag-n-drop.svg",
 	"./expandDetail.svg": "./src/images/expandDetail.svg",
 	"./loading.svg": "./src/images/loading.svg",
+	"./minimize_16x16.svg": "./src/images/minimize_16x16.svg",
 	"./no-image.svg": "./src/images/no-image.svg",
 	"./ranking-arrows.svg": "./src/images/ranking-arrows.svg",
 	"./ranking-dash.svg": "./src/images/ranking-dash.svg",
@@ -17329,6 +17377,7 @@ var map = {
 	"./rating-star-small-2.svg": "./src/images/rating-star-small-2.svg",
 	"./rating-star-small.svg": "./src/images/rating-star-small.svg",
 	"./rating-star.svg": "./src/images/rating-star.svg",
+	"./restore_16x16.svg": "./src/images/restore_16x16.svg",
 	"./search.svg": "./src/images/search.svg"
 };
 
@@ -17717,6 +17766,17 @@ module.exports = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\
 
 /***/ }),
 
+/***/ "./src/images/close_16x16.svg":
+/*!************************************!*\
+  !*** ./src/images/close_16x16.svg ***!
+  \************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+module.exports = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.43 8.0025L13.7 3.7225C14.09 3.3325 14.09 2.6925 13.7 2.2925C13.31 1.9025 12.67 1.9025 12.27 2.2925L7.99 6.5725L3.72 2.3025C3.33 1.9025 2.69 1.9025 2.3 2.3025C1.9 2.6925 1.9 3.3325 2.3 3.7225L6.58 8.0025L2.3 12.2825C1.91 12.6725 1.91 13.3125 2.3 13.7125C2.69 14.1025 3.33 14.1025 3.73 13.7125L8.01 9.4325L12.29 13.7125C12.68 14.1025 13.32 14.1025 13.72 13.7125C14.11 13.3225 14.11 12.6825 13.72 12.2825L9.44 8.0025H9.43Z\"></path></svg>"
+
+/***/ }),
+
 /***/ "./src/images/collapseDetail.svg":
 /*!***************************************!*\
   !*** ./src/images/collapseDetail.svg ***!
@@ -17761,6 +17821,17 @@ module.exports = "<svg viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3
 
 /***/ }),
 
+/***/ "./src/images/minimize_16x16.svg":
+/*!***************************************!*\
+  !*** ./src/images/minimize_16x16.svg ***!
+  \***************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+module.exports = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13 9H3C2.45 9 2 8.55 2 8C2 7.45 2.45 7 3 7H13C13.55 7 14 7.45 14 8C14 8.55 13.55 9 13 9Z\"></path></svg>"
+
+/***/ }),
+
 /***/ "./src/images/no-image.svg":
 /*!*********************************!*\
   !*** ./src/images/no-image.svg ***!
@@ -17838,6 +17909,17 @@ module.exports = "<svg viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\
 
 /***/ }),
 
+/***/ "./src/images/restore_16x16.svg":
+/*!**************************************!*\
+  !*** ./src/images/restore_16x16.svg ***!
+  \**************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+module.exports = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 13H4C2.9 13 2 12.1 2 11V5C2 3.9 2.9 3 4 3H12C13.1 3 14 3.9 14 5V11C14 12.1 13.1 13 12 13ZM4 5V11H12V5H4Z\"></path></svg>"
+
+/***/ }),
+
 /***/ "./src/images/search.svg":
 /*!*******************************!*\
   !*** ./src/images/search.svg ***!
@@ -19000,6 +19082,21 @@ var JsonObjectProperty = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    JsonObjectProperty.prototype.isAvailableInVersion = function (ver) {
+        if (!!this.alternativeName)
+            return true;
+        return this.isAvailableInVersionCore(ver);
+    };
+    JsonObjectProperty.prototype.getSerializedName = function (ver) {
+        if (!this.alternativeName)
+            return this.name;
+        return this.isAvailableInVersionCore(ver) ? this.name : this.alternativeName;
+    };
+    JsonObjectProperty.prototype.isAvailableInVersionCore = function (ver) {
+        if (!ver || !this.version)
+            return true;
+        return _helpers__WEBPACK_IMPORTED_MODULE_2__["Helpers"].compareVerions(this.version, ver) <= 0;
+    };
     Object.defineProperty(JsonObjectProperty.prototype, "isLocalizable", {
         get: function () {
             return this.isLocalizableValue != null ? this.isLocalizableValue : false;
@@ -19080,6 +19177,7 @@ var JsonObjectProperty = /** @class */ (function () {
         "className",
         "alternativeName",
         "layout",
+        "version",
         "classNamePart",
         "baseClassName",
         "defaultValue",
@@ -19528,6 +19626,9 @@ var JsonMetadataClass = /** @class */ (function () {
             if (propInfo.layout) {
                 prop.layout = propInfo.layout;
             }
+            if (propInfo.version) {
+                prop.version = propInfo.version;
+            }
             if (propInfo.dependsOn) {
                 this.addDependsOnProperties(prop, propInfo.dependsOn);
             }
@@ -19672,36 +19773,54 @@ var JsonMetadata = /** @class */ (function () {
     JsonMetadata.prototype.getPropertiesByObj = function (obj) {
         if (!obj || !obj.getType)
             return [];
-        var res = {};
         var props = this.getProperties(obj.getType());
-        for (var i = 0; i < props.length; i++) {
-            res[props[i].name] = props[i];
-        }
-        var dynamicProps = !!obj.getDynamicType
-            ? this.getProperties(obj.getDynamicType())
-            : null;
-        if (dynamicProps && dynamicProps.length > 0) {
-            for (var i = 0; i < dynamicProps.length; i++) {
-                var dProp = dynamicProps[i];
-                if (!!res[dProp.name])
-                    continue;
-                res[dProp.name] = dProp;
+        var dynamicProps = this.getDynamicPropertiesByObj(obj);
+        return [].concat(props).concat(dynamicProps);
+    };
+    JsonMetadata.prototype.addDynamicPropertiesIntoObj = function (dest, src, props) {
+        var _this = this;
+        props.forEach(function (prop) {
+            _this.addDynamicPropertyIntoObj(dest, src, prop.name, false);
+            if (prop.serializationProperty) {
+                _this.addDynamicPropertyIntoObj(dest, src, prop.serializationProperty, true);
+            }
+            if (prop.alternativeName) {
+                _this.addDynamicPropertyIntoObj(dest, src, prop.alternativeName, false);
             }
+        });
+    };
+    JsonMetadata.prototype.addDynamicPropertyIntoObj = function (dest, src, propName, isReadOnly) {
+        var desc = {
+            configurable: true,
+            get: function () {
+                return src[propName];
+            },
+        };
+        if (!isReadOnly) {
+            desc["set"] = function (v) {
+                src[propName] = v;
+            };
         }
-        return Object.keys(res).map(function (key) { return res[key]; });
+        Object.defineProperty(dest, propName, desc);
     };
     JsonMetadata.prototype.getDynamicPropertiesByObj = function (obj, dynamicType) {
         if (dynamicType === void 0) { dynamicType = null; }
-        if (!obj || !obj.getType || (!obj.getDynamicType && !dynamicType))
+        if (!obj || !obj.getType)
+            return [];
+        if (!!obj.getDynamicProperties)
+            return obj.getDynamicProperties();
+        if (!obj.getDynamicType && !dynamicType)
             return [];
-        var objType = obj.getType();
         var dType = !!dynamicType ? dynamicType : obj.getDynamicType();
-        if (!dType)
+        return this.getDynamicPropertiesByTypes(obj.getType(), dType);
+    };
+    JsonMetadata.prototype.getDynamicPropertiesByTypes = function (objType, dynamicType, invalidNames) {
+        if (!dynamicType)
             return [];
-        var cacheType = dType + "-" + objType;
+        var cacheType = dynamicType + "-" + objType;
         if (this.dynamicPropsCache[cacheType])
             return this.dynamicPropsCache[cacheType];
-        var dynamicProps = this.getProperties(dType);
+        var dynamicProps = this.getProperties(dynamicType);
         if (!dynamicProps || dynamicProps.length == 0)
             return [];
         var hash = {};
@@ -19710,9 +19829,11 @@ var JsonMetadata = /** @class */ (function () {
             hash[props[i].name] = props[i];
         }
         var res = [];
-        for (var i = 0; i < dynamicProps.length; i++) {
-            var dProp = dynamicProps[i];
-            if (!hash[dProp.name]) {
+        if (!invalidNames)
+            invalidNames = [];
+        for (var i_1 = 0; i_1 < dynamicProps.length; i_1++) {
+            var dProp = dynamicProps[i_1];
+            if (!hash[dProp.name] && invalidNames.indexOf(dProp.name) < 0) {
                 res.push(dProp);
             }
         }
@@ -20207,9 +20328,8 @@ var JsonObject = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
-    JsonObject.prototype.toJsonObject = function (obj, storeDefaults) {
-        if (storeDefaults === void 0) { storeDefaults = false; }
-        return this.toJsonObjectCore(obj, null, storeDefaults);
+    JsonObject.prototype.toJsonObject = function (obj, options) {
+        return this.toJsonObjectCore(obj, null, options);
     };
     JsonObject.prototype.toObject = function (jsonObj, obj, options) {
         this.toObjectCore(jsonObj, obj, options);
@@ -20258,8 +20378,7 @@ var JsonObject = /** @class */ (function () {
             obj.endLoadingFromJson();
         }
     };
-    JsonObject.prototype.toJsonObjectCore = function (obj, property, storeDefaults) {
-        if (storeDefaults === void 0) { storeDefaults = false; }
+    JsonObject.prototype.toJsonObjectCore = function (obj, property, options) {
         if (!obj || !obj.getType)
             return obj;
         if (typeof obj.getData === "function")
@@ -20268,61 +20387,67 @@ var JsonObject = /** @class */ (function () {
         if (property != null && !property.className) {
             result[JsonObject.typePropertyName] = property.getObjType(obj.getType());
         }
-        this.propertiesToJson(obj, Serializer.getProperties(obj.getType()), result, storeDefaults);
-        this.propertiesToJson(obj, this.getDynamicProperties(obj), result, storeDefaults);
+        var storeDefaults = options === true;
+        if (!options || options === true) {
+            options = {};
+        }
+        if (storeDefaults) {
+            options.storeDefaults = storeDefaults;
+        }
+        this.propertiesToJson(obj, Serializer.getProperties(obj.getType()), result, options);
+        this.propertiesToJson(obj, this.getDynamicProperties(obj), result, options);
         return result;
     };
     JsonObject.prototype.getDynamicProperties = function (obj) {
         return Serializer.getDynamicPropertiesByObj(obj);
     };
-    JsonObject.prototype.addDynamicProperties = function (obj, jsonObj, properties) {
-        if (!obj.getDynamicPropertyName)
-            return properties;
-        var dynamicPropName = obj.getDynamicPropertyName();
-        if (!dynamicPropName)
-            return properties;
-        if (jsonObj[dynamicPropName]) {
-            obj[dynamicPropName] = jsonObj[dynamicPropName];
-        }
-        var dynamicProperties = this.getDynamicProperties(obj);
-        var res = [];
-        for (var i = 0; i < properties.length; i++) {
-            res.push(properties[i]);
-        }
-        for (var i = 0; i < dynamicProperties.length; i++) {
-            res.push(dynamicProperties[i]);
+    JsonObject.prototype.addDynamicProperties = function (obj, jsonObj, props) {
+        if (!obj.getDynamicPropertyName && !obj.getDynamicProperties)
+            return props;
+        if (obj.getDynamicPropertyName) {
+            var dynamicPropName = obj.getDynamicPropertyName();
+            if (!dynamicPropName)
+                return props;
+            if (dynamicPropName && jsonObj[dynamicPropName]) {
+                obj[dynamicPropName] = jsonObj[dynamicPropName];
+            }
         }
-        return res;
+        var dynamicProps = this.getDynamicProperties(obj);
+        return dynamicProps.length === 0 ? props : [].concat(props).concat(dynamicProps);
     };
-    JsonObject.prototype.propertiesToJson = function (obj, properties, json, storeDefaults) {
-        if (storeDefaults === void 0) { storeDefaults = false; }
+    JsonObject.prototype.propertiesToJson = function (obj, properties, json, options) {
         for (var i = 0; i < properties.length; i++) {
-            this.valueToJson(obj, json, properties[i], storeDefaults);
+            this.valueToJson(obj, json, properties[i], options);
         }
     };
-    JsonObject.prototype.valueToJson = function (obj, result, property, storeDefaults) {
-        if (storeDefaults === void 0) { storeDefaults = false; }
-        if (property.isSerializable === false ||
-            (property.isLightSerializable === false && this.lightSerializing))
+    JsonObject.prototype.valueToJson = function (obj, result, prop, options) {
+        if (!options)
+            options = {};
+        if (prop.isSerializable === false || (prop.isLightSerializable === false && this.lightSerializing))
+            return;
+        if (options.version && !prop.isAvailableInVersion(options.version))
             return;
-        var value = property.getSerializableValue(obj);
-        if (!storeDefaults && property.isDefaultValueByObj(obj, value))
+        var value = prop.getSerializableValue(obj);
+        if (!options.storeDefaults && prop.isDefaultValueByObj(obj, value))
             return;
         if (this.isValueArray(value)) {
             var arrValue = [];
             for (var i = 0; i < value.length; i++) {
-                arrValue.push(this.toJsonObjectCore(value[i], property, storeDefaults));
+                arrValue.push(this.toJsonObjectCore(value[i], prop, options));
             }
             value = arrValue.length > 0 ? arrValue : null;
         }
         else {
-            value = this.toJsonObjectCore(value, property, storeDefaults);
+            value = this.toJsonObjectCore(value, prop, options);
         }
+        if (value === undefined || value === null)
+            return;
+        var name = prop.getSerializedName(options.version);
         var hasValue = typeof obj["getPropertyValue"] === "function" &&
-            obj["getPropertyValue"](property.name, null) !== null;
-        if ((storeDefaults && hasValue) || !property.isDefaultValueByObj(obj, value)) {
-            if (!Serializer.onSerializingProperty || !Serializer.onSerializingProperty(obj, property, value, result)) {
-                result[property.name] = value;
+            obj["getPropertyValue"](name, null) !== null;
+        if ((options.storeDefaults && hasValue) || !prop.isDefaultValueByObj(obj, value)) {
+            if (!Serializer.onSerializingProperty || !Serializer.onSerializingProperty(obj, prop, value, result)) {
+                result[name] = this.removePosOnValueToJson(prop, value);
             }
         }
     };
@@ -20362,6 +20487,14 @@ var JsonObject = /** @class */ (function () {
             }
         }
     };
+    JsonObject.prototype.removePosOnValueToJson = function (property, value) {
+        if (!property.isCustom || !value)
+            return value;
+        if (!!value[JsonObject.positionPropertyName]) {
+            delete value[JsonObject.positionPropertyName];
+        }
+        return value;
+    };
     JsonObject.prototype.removePos = function (property, value) {
         if (!property || !property.type || property.type.indexOf("value") < 0)
             return;
@@ -31292,6 +31425,9 @@ var PanelModelBase = /** @class */ (function (_super) {
         else {
             this.elements.splice(index, 0, element);
         }
+        if (this.wasRendered) {
+            element.onFirstRendering();
+        }
         return true;
     };
     PanelModelBase.prototype.insertElementAfter = function (element, after) {
@@ -33467,8 +33603,8 @@ var PopupDropdownViewModel = /** @class */ (function (_super) {
         this.popupDirection = _utils_popup__WEBPACK_IMPORTED_MODULE_1__["PopupUtils"].calculatePopupDirection(verticalPosition, actualHorizontalPosition);
         var pos = _utils_popup__WEBPACK_IMPORTED_MODULE_1__["PopupUtils"].calculatePosition(targetElementRect, height, width + marginLeft + marginRight, verticalPosition, actualHorizontalPosition, this.showHeader, this.model.positionMode);
         if (!!window) {
-            var newVerticalDimensions = _utils_popup__WEBPACK_IMPORTED_MODULE_1__["PopupUtils"].getCorrectedVerticalDimensions(pos.top, height, window.innerHeight);
-            if (!!newVerticalDimensions.height) {
+            var newVerticalDimensions = _utils_popup__WEBPACK_IMPORTED_MODULE_1__["PopupUtils"].getCorrectedVerticalDimensions(pos.top, height, window.innerHeight, verticalPosition);
+            if (!!newVerticalDimensions) {
                 this.height = newVerticalDimensions.height + "px";
                 pos.top = newVerticalDimensions.top;
             }
@@ -33794,7 +33930,7 @@ var PopupSurveyModel = /** @class */ (function (_super) {
         else {
             _this.surveyValue = _this.createSurvey(jsonObj);
         }
-        _this.surveyValue.showTitle = false;
+        //this.surveyValue.showTitle = false;
         if ("undefined" !== typeof document) {
             _this.windowElement = document.createElement("div");
         }
@@ -33878,6 +34014,13 @@ var PopupSurveyModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(PopupSurveyModel.prototype, "isCollapsed", {
+        get: function () {
+            return !this.isExpanded;
+        },
+        enumerable: false,
+        configurable: true
+    });
     PopupSurveyModel.prototype.onExpandedChanged = function () {
         if (!!this.expandedChangedCallback) {
             this.expandedChangedCallback();
@@ -33899,11 +34042,22 @@ var PopupSurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(PopupSurveyModel.prototype, "locTitle", {
         get: function () {
+            if (this.survey.locTitle.isEmpty)
+                return null;
             return this.survey.locTitle;
         },
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(PopupSurveyModel.prototype, "locDescription", {
+        get: function () {
+            if (this.survey.locTitle.isEmpty)
+                return null;
+            return this.survey.locDescription;
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * Expands the pop-up window.
      *
@@ -33961,7 +34115,24 @@ var PopupSurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(PopupSurveyModel.prototype, "cssRoot", {
         get: function () {
-            return this.getPropertyValue("cssRoot", "");
+            var result = this.getPropertyValue("cssRoot", "");
+            if (this.isCollapsed)
+                result += " " + this.getPropertyValue("cssRootCollapsedMod", "");
+            return result;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PopupSurveyModel.prototype, "cssRootCollapsedMod", {
+        get: function () {
+            return this.getPropertyValue("cssRootCollapsedMod");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PopupSurveyModel.prototype, "cssRootContent", {
+        get: function () {
+            return this.getPropertyValue("cssRootContent");
         },
         enumerable: false,
         configurable: true
@@ -33980,16 +34151,30 @@ var PopupSurveyModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(PopupSurveyModel.prototype, "cssHeaderTitle", {
+    Object.defineProperty(PopupSurveyModel.prototype, "cssHeaderTitleCollapsed", {
+        get: function () {
+            return this.getPropertyValue("cssHeaderTitleCollapsed", "");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PopupSurveyModel.prototype, "cssHeaderButtonsContainer", {
+        get: function () {
+            return this.getPropertyValue("cssHeaderButtonsContainer", "");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PopupSurveyModel.prototype, "cssHeaderCollapseButton", {
         get: function () {
-            return this.getPropertyValue("cssHeaderTitle", "");
+            return this.getPropertyValue("cssHeaderCollapseButton", "");
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(PopupSurveyModel.prototype, "cssHeaderButton", {
+    Object.defineProperty(PopupSurveyModel.prototype, "cssHeaderCloseButton", {
         get: function () {
-            return this.getPropertyValue("cssHeaderButton", "");
+            return this.getPropertyValue("cssHeaderCloseButton", "");
         },
         enumerable: false,
         configurable: true
@@ -34009,13 +34194,17 @@ var PopupSurveyModel = /** @class */ (function (_super) {
             return;
         var cssWindow = this.css.window;
         this.setPropertyValue("cssRoot", cssWindow.root);
+        this.setPropertyValue("cssRootCollapsedMod", cssWindow.rootCollapsedMod);
+        this.setPropertyValue("cssRootContent", cssWindow.rootContent);
         this.setPropertyValue("cssBody", cssWindow.body);
         var cssHeader = cssWindow.header;
         if (!cssHeader)
             return;
         this.setPropertyValue("cssHeaderRoot", cssHeader.root);
-        this.setPropertyValue("cssHeaderTitle", cssHeader.title);
-        this.setPropertyValue("cssHeaderButton", cssHeader.button);
+        this.setPropertyValue("cssHeaderTitleCollapsed", cssHeader.titleCollapsed);
+        this.setPropertyValue("cssHeaderButtonsContainer", cssHeader.buttonsContainer);
+        this.setPropertyValue("cssHeaderCollapseButton", cssHeader.collapseButton);
+        this.setPropertyValue("cssHeaderCloseButton", cssHeader.closeButton);
         this.updateCssButton();
     };
     PopupSurveyModel.prototype.updateCssButton = function () {
@@ -35889,6 +36078,9 @@ var Question = /** @class */ (function (_super) {
             .append(cssClasses.headerBottom, this.hasTitleOnBottom)
             .toString();
     };
+    Question.prototype.supportContainerQueries = function () {
+        return false;
+    };
     Object.defineProperty(Question.prototype, "cssContent", {
         get: function () {
             this.ensureElementCss();
@@ -35903,6 +36095,7 @@ var Question = /** @class */ (function (_super) {
     Question.prototype.getCssContent = function (cssClasses) {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__["CssClassBuilder"]()
             .append(cssClasses.content)
+            .append(cssClasses.contentSupportContainerQueries, this.supportContainerQueries())
             .append(cssClasses.contentLeft, this.hasTitleOnLeft)
             .toString();
     };
@@ -39693,7 +39886,6 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         if (this.isValueEmpty(this.cachedValueForUrlRequests)) {
             this.cachedValueForUrlRequests = this.value;
         }
-        this.isFirstLoadChoicesFromUrl = false;
         var cachedValues = this.createCachedValueForUrlRequests(this.cachedValueForUrlRequests, checkCachedValuesOnExisting);
         if (array && (array.length > 0 || this.choicesByUrl.allowEmptyResponse)) {
             newChoices = new Array();
@@ -39704,6 +39896,20 @@ var QuestionSelectBase = /** @class */ (function (_super) {
                 newChoices[i].locOwner = this;
             }
         }
+        this.setChoicesFromUrl(newChoices, errors, cachedValues);
+    };
+    QuestionSelectBase.prototype.canAvoidSettChoicesFromUrl = function (newChoices) {
+        if (this.isFirstLoadChoicesFromUrl)
+            return false;
+        var chocesAreEmpty = !newChoices || Array.isArray(newChoices) && newChoices.length === 0;
+        if (chocesAreEmpty && !this.isEmpty())
+            return false;
+        return _helpers__WEBPACK_IMPORTED_MODULE_8__["Helpers"].isTwoValueEquals(this.choicesFromUrl, newChoices);
+    };
+    QuestionSelectBase.prototype.setChoicesFromUrl = function (newChoices, errors, cachedValues) {
+        if (this.canAvoidSettChoicesFromUrl(newChoices))
+            return;
+        this.isFirstLoadChoicesFromUrl = false;
         this.choicesFromUrl = newChoices;
         this.filterItems();
         this.onVisibleChoicesChanged();
@@ -40746,6 +40952,21 @@ var QuestionBooleanModel = /** @class */ (function (_super) {
     QuestionBooleanModel.prototype.createActionContainer = function (allowAdaptiveActions) {
         return _super.prototype.createActionContainer.call(this, this.renderAs !== "checkbox");
     };
+    Object.defineProperty(QuestionBooleanModel.prototype, "isNewA11yStructure", {
+        //a11y
+        get: function () {
+            return true;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(QuestionBooleanModel.prototype, "a11y_input_ariaRole", {
+        get: function () {
+            return "switch";
+        },
+        enumerable: false,
+        configurable: true
+    });
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], QuestionBooleanModel.prototype, "booleanValueRendered", void 0);
@@ -41625,9 +41846,12 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
         var res = [];
         var visItems = this.visibleChoices;
         for (var i = 0; i < visItems.length; i++) {
+            var item = visItems[i];
+            if (item === this.selectAllItem)
+                continue;
             var val = visItems[i].value;
             if (_helpers__WEBPACK_IMPORTED_MODULE_3__["Helpers"].isTwoValueEquals(val, this.invisibleOldValues[val])) {
-                if (!this.isItemSelected(visItems[i])) {
+                if (!this.isItemSelected(item)) {
                     res.push(val);
                 }
                 delete this.invisibleOldValues[val];
@@ -42158,6 +42382,35 @@ var ComponentQuestionJSON = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    ComponentQuestionJSON.prototype.getDynamicProperties = function () {
+        if (!Array.isArray(this.dynamicProperties)) {
+        }
+        this.dynamicProperties = this.calcDynamicProperties();
+        return this.dynamicProperties;
+    };
+    ComponentQuestionJSON.prototype.calcDynamicProperties = function () {
+        var baseProps = this.json.inheritBaseProps;
+        if (!baseProps || !this.json.questionJSON)
+            return [];
+        var type = this.json.questionJSON.type;
+        if (!type)
+            return [];
+        if (Array.isArray(baseProps)) {
+            var props_1 = [];
+            baseProps.forEach(function (name) {
+                var prop = _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].findProperty(type, name);
+                if (prop) {
+                    props_1.push(prop);
+                }
+            });
+            return props_1;
+        }
+        var invalidNames = [];
+        for (var key in this.json.questionJSON) {
+            invalidNames.push(key);
+        }
+        return _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].getDynamicPropertiesByTypes(this.name, type, invalidNames);
+    };
     return ComponentQuestionJSON;
 }());
 
@@ -42499,8 +42752,15 @@ var QuestionCustomModel = /** @class */ (function (_super) {
     QuestionCustomModel.prototype.getTemplate = function () {
         return "custom";
     };
+    QuestionCustomModel.prototype.getDynamicProperties = function () {
+        return this.customQuestion.getDynamicProperties() || [];
+    };
+    QuestionCustomModel.prototype.getDynamicType = function () {
+        return this.questionWrapper ? this.questionWrapper.getType() : "question";
+    };
     QuestionCustomModel.prototype.createWrapper = function () {
         this.questionWrapper = this.createQuestion();
+        this.createDynamicProperties(this.questionWrapper);
     };
     QuestionCustomModel.prototype.getElement = function () {
         return this.contentQuestion;
@@ -42675,6 +42935,14 @@ var QuestionCustomModel = /** @class */ (function (_super) {
         }
         this.isSettingValueChanged = false;
     };
+    QuestionCustomModel.prototype.createDynamicProperties = function (el) {
+        if (!el)
+            return;
+        var props = this.getDynamicProperties();
+        if (Array.isArray(props)) {
+            _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addDynamicPropertiesIntoObj(this, el, props);
+        }
+    };
     QuestionCustomModel.prototype.initElement = function (el) {
         var _this = this;
         _super.prototype.initElement.call(this, el);
@@ -43171,7 +43439,7 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
         }
     };
     QuestionDropdownModel.prototype.supportGoNextPageAutomatic = function () {
-        return true;
+        return !this.isOtherSelected;
     };
     QuestionDropdownModel.prototype.getChoices = function () {
         var items = _super.prototype.getChoices.call(this);
@@ -44036,6 +44304,9 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("expression", [
             return getCurrecyCodes();
         },
         default: "USD",
+        visibleIf: function (obj) {
+            return obj.displayStyle === "currency";
+        }
     },
     { name: "maximumFractionDigits:number", default: -1 },
     { name: "minimumFractionDigits:number", default: -1 },
@@ -44309,7 +44580,7 @@ var QuestionFileModel = /** @class */ (function (_super) {
         };
         _this.doClean = function () {
             if (_this.needConfirmRemoveFile) {
-                Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["confirmActionAsync"])(_this.confirmRemoveAllMessage, function () { _this.clearFilesCore(); });
+                Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["confirmActionAsync"])(_this.confirmRemoveAllMessage, function () { _this.clearFilesCore(); }, undefined, _this.getLocale());
                 return;
             }
             _this.clearFilesCore();
@@ -45199,7 +45470,7 @@ var QuestionFileModel = /** @class */ (function (_super) {
     QuestionFileModel.prototype.doRemoveFile = function (data) {
         var _this = this;
         if (this.needConfirmRemoveFile) {
-            Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["confirmActionAsync"])(this.getConfirmRemoveMessage(data.name), function () { _this.removeFileCore(data); });
+            Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["confirmActionAsync"])(this.getConfirmRemoveMessage(data.name), function () { _this.removeFileCore(data); }, undefined, this.getLocale());
             return;
         }
         this.removeFileCore(data);
@@ -46490,8 +46761,8 @@ var MatrixRowModel = /** @class */ (function (_super) {
     __extends(MatrixRowModel, _super);
     function MatrixRowModel(item, fullName, data, value) {
         var _this = _super.call(this) || this;
-        _this.fullName = fullName;
         _this.item = item;
+        _this.fullName = fullName;
         _this.data = data;
         _this.value = value;
         _this.cellClick = function (column) {
@@ -46529,8 +46800,24 @@ var MatrixRowModel = /** @class */ (function (_super) {
             return this.getPropertyValue("value");
         },
         set: function (val) {
-            val = this.data.getCorrectedRowValue(val);
-            this.setPropertyValue("value", val);
+            if (!this.isReadOnly) {
+                this.setValueDirectly(this.data.getCorrectedRowValue(val));
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    MatrixRowModel.prototype.setValueDirectly = function (val) {
+        this.setPropertyValue("value", val);
+    };
+    Object.defineProperty(MatrixRowModel.prototype, "isReadOnly", {
+        get: function () { return !this.item.enabled || this.data.isInputReadOnly; },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MatrixRowModel.prototype, "rowTextClasses", {
+        get: function () {
+            return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_11__["CssClassBuilder"]().append(this.data.cssClasses.rowTextCell).toString();
         },
         enumerable: false,
         configurable: true
@@ -46540,6 +46827,7 @@ var MatrixRowModel = /** @class */ (function (_super) {
             var cssClasses = this.data.cssClasses;
             return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_11__["CssClassBuilder"]().append(cssClasses.row)
                 .append(cssClasses.rowError, this.data.hasErrorInRow(this))
+                .append(cssClasses.rowDisabled, this.isReadOnly)
                 .toString();
         },
         enumerable: false,
@@ -46899,6 +47187,10 @@ var QuestionMatrixModel = /** @class */ (function (_super) {
         }
         return res;
     };
+    QuestionMatrixModel.prototype.runItemsCondition = function (values, properties) {
+        _itemvalue__WEBPACK_IMPORTED_MODULE_1__["ItemValue"].runEnabledConditionsForItems(this.rows, undefined, values, properties);
+        return _super.prototype.runItemsCondition.call(this, values, properties);
+    };
     QuestionMatrixModel.prototype.getVisibleRows = function () {
         var result = new Array();
         var val = this.value;
@@ -46940,6 +47232,11 @@ var QuestionMatrixModel = /** @class */ (function (_super) {
         configurable: true
     });
     Object.defineProperty(QuestionMatrixModel.prototype, "cells", {
+        /**
+         * An array of matrix cells. Use this array to get or set cell values.
+         *
+         * [View Demo](https://surveyjs.io/form-library/examples/questiontype-matrix-rubric/ (linkStyle))
+         */
         get: function () {
             return this.cellsValue;
         },
@@ -47062,7 +47359,7 @@ var QuestionMatrixModel = /** @class */ (function (_super) {
         if (!val)
             val = {};
         if (this.rows.length == 0) {
-            this.generatedVisibleRows[0].value = val;
+            this.generatedVisibleRows[0].setValueDirectly(val);
         }
         else {
             for (var i = 0; i < this.generatedVisibleRows.length; i++) {
@@ -47070,7 +47367,7 @@ var QuestionMatrixModel = /** @class */ (function (_super) {
                 var rowVal = val[row.name];
                 if (this.isValueEmpty(rowVal))
                     rowVal = null;
-                this.generatedVisibleRows[i].value = rowVal;
+                this.generatedVisibleRows[i].setValueDirectly(rowVal);
             }
         }
         this.updateIsAnswered();
@@ -51148,32 +51445,8 @@ var MatrixDropdownColumn = /** @class */ (function (_super) {
         }
     };
     MatrixDropdownColumn.prototype.addProperties = function (curCellType) {
-        var question = this.templateQuestion;
-        var properties = this.getProperties(curCellType);
-        for (var i = 0; i < properties.length; i++) {
-            var prop = properties[i];
-            this.addProperty(question, prop.name, false);
-            if (prop.serializationProperty) {
-                this.addProperty(question, prop.serializationProperty, true);
-            }
-            if (prop.alternativeName) {
-                this.addProperty(question, prop.alternativeName, false);
-            }
-        }
-    };
-    MatrixDropdownColumn.prototype.addProperty = function (question, propName, isReadOnly) {
-        var desc = {
-            configurable: true,
-            get: function () {
-                return question[propName];
-            },
-        };
-        if (!isReadOnly) {
-            desc["set"] = function (v) {
-                question[propName] = v;
-            };
-        }
-        Object.defineProperty(this, propName, desc);
+        var props = this.getProperties(curCellType);
+        _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addDynamicPropertiesIntoObj(this, this.templateQuestion, props);
     };
     return MatrixDropdownColumn;
 }(_base__WEBPACK_IMPORTED_MODULE_1__["Base"]));
@@ -53118,7 +53391,7 @@ var QuestionMatrixDynamicModel = /** @class */ (function (_super) {
             confirmDelete = this.isRequireConfirmOnRowDelete(index);
         }
         if (confirmDelete) {
-            Object(_utils_utils__WEBPACK_IMPORTED_MODULE_5__["confirmActionAsync"])(this.confirmDeleteText, function () { _this.removeRowAsync(index, row); });
+            Object(_utils_utils__WEBPACK_IMPORTED_MODULE_5__["confirmActionAsync"])(this.confirmDeleteText, function () { _this.removeRowAsync(index, row); }, undefined, this.getLocale());
             return;
         }
         this.removeRowAsync(index, row);
@@ -55009,8 +55282,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         configurable: true
     });
     QuestionPanelDynamicModel.prototype.getFirstQuestionToFocus = function (withError) {
-        for (var i = 0; i < this.visiblePanels.length; i++) {
-            var res = this.visiblePanels[i].getFirstQuestionToFocus(withError);
+        for (var i = 0; i < this.visiblePanelsCore.length; i++) {
+            var res = this.visiblePanelsCore[i].getFirstQuestionToFocus(withError);
             if (!!res)
                 return res;
         }
@@ -55042,12 +55315,12 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         }
     };
     QuestionPanelDynamicModel.prototype.onTemplateElementPropertyChanged = function (element, options) {
-        if (this.isLoadingFromJson || this.useTemplatePanel || this.panels.length == 0)
+        if (this.isLoadingFromJson || this.useTemplatePanel || this.panelsCore.length == 0)
             return;
         var property = _jsonobject__WEBPACK_IMPORTED_MODULE_5__["Serializer"].findProperty(element.getType(), options.name);
         if (!property)
             return;
-        var panels = this.panels;
+        var panels = this.panelsCore;
         for (var i = 0; i < panels.length; i++) {
             var question = panels[i].getQuestionByName(element.name);
             if (!!question && question[options.name] !== options.newValue) {
@@ -55066,7 +55339,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         return "paneldynamic";
     };
     QuestionPanelDynamicModel.prototype.clearOnDeletingContainer = function () {
-        this.panels.forEach(function (panel) {
+        this.panelsCore.forEach(function (panel) {
             panel.clearOnDeletingContainer();
         });
     };
@@ -55222,8 +55495,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "items", {
         get: function () {
             var res = [];
-            for (var i = 0; i < this.panels.length; i++) {
-                res.push(this.panels[i].data);
+            for (var i = 0; i < this.panelsCore.length; i++) {
+                res.push(this.panelsCore[i].data);
             }
             return res;
         },
@@ -55238,7 +55511,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
          * @see panelCount
          */
         get: function () {
-            return this.getPropertyValue("panels");
+            this.buildPanelsFirstTime(this.canBuildPanels);
+            return this.panelsCore;
         },
         enumerable: false,
         configurable: true
@@ -55248,6 +55522,21 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
          * An array of currently visible panels ([`PanelModel`](https://surveyjs.io/form-library/documentation/api-reference/panel-model) objects).
          * @see templateVisibleIf
          */
+        get: function () {
+            this.buildPanelsFirstTime(this.canBuildPanels);
+            return this.visiblePanelsCore;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "panelsCore", {
+        get: function () {
+            return this.getPropertyValue("panels");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "visiblePanelsCore", {
         get: function () {
             return this.getPropertyValue("visiblePanels");
         },
@@ -55259,14 +55548,14 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         if (!panel.visible)
             return;
         var index = 0;
-        var panels = this.panels;
+        var panels = this.panelsCore;
         for (var i = 0; i < panels.length; i++) {
             if (panels[i] === panel)
                 break;
             if (panels[i].visible)
                 index++;
         }
-        this.visiblePanels.splice(index, 0, panel);
+        this.visiblePanelsCore.splice(index, 0, panel);
         this.addTabFromToolbar(panel, index);
         if (!this.currentPanel) {
             this.currentPanel = panel;
@@ -55275,14 +55564,14 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     QuestionPanelDynamicModel.prototype.onPanelRemoved = function (panel) {
         var index = this.onPanelRemovedCore(panel);
         if (this.currentPanel === panel) {
-            var visPanels = this.visiblePanels;
+            var visPanels = this.visiblePanelsCore;
             if (index >= visPanels.length)
                 index = visPanels.length - 1;
             this.currentPanel = index >= 0 ? visPanels[index] : null;
         }
     };
     QuestionPanelDynamicModel.prototype.onPanelRemovedCore = function (panel) {
-        var visPanels = this.visiblePanels;
+        var visPanels = this.visiblePanelsCore;
         var index = visPanels.indexOf(panel);
         if (index > -1) {
             visPanels.splice(index, 1);
@@ -55305,14 +55594,14 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
                 return -1;
             if (this.useTemplatePanel)
                 return 0;
-            return this.visiblePanels.indexOf(this.currentPanel);
+            return this.visiblePanelsCore.indexOf(this.currentPanel);
         },
         set: function (val) {
             if (val < 0 || this.visiblePanelCount < 1)
                 return;
             if (val >= this.visiblePanelCount)
                 val = this.visiblePanelCount - 1;
-            this.currentPanel = this.visiblePanels[val];
+            this.currentPanel = this.visiblePanelsCore[val];
         },
         enumerable: false,
         configurable: true
@@ -55334,7 +55623,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
                 return null;
             var res = this.getPropertyValue("currentPanel", null);
             if (!res && this.visiblePanelCount > 0) {
-                res = this.visiblePanels[0];
+                res = this.visiblePanelsCore[0];
                 this.currentPanel = res;
             }
             return res;
@@ -55343,7 +55632,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             if (this.isRenderModeList || this.useTemplatePanel)
                 return;
             var curPanel = this.getPropertyValue("currentPanel");
-            var index = !!val ? this.visiblePanels.indexOf(val) : -1;
+            var index = !!val ? this.visiblePanelsCore.indexOf(val) : -1;
             if (!!val && index < 0 || val === curPanel)
                 return;
             if (curPanel) {
@@ -55370,7 +55659,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             this.currentPanel.onHidingContent();
         }
         else {
-            this.visiblePanels.forEach(function (panel) { return panel.onHidingContent(); });
+            this.visiblePanelsCore.forEach(function (panel) { return panel.onHidingContent(); });
         }
     };
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "confirmDelete", {
@@ -55627,13 +55916,13 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     };
     QuestionPanelDynamicModel.prototype.setIsMobile = function (val) {
         _super.prototype.setIsMobile.call(this, val);
-        (this.panels || []).forEach(function (panel) { return panel.getQuestions(true).forEach(function (question) {
+        (this.panelsCore || []).forEach(function (panel) { return panel.getQuestions(true).forEach(function (question) {
             question.setIsMobile(val);
         }); });
     };
     QuestionPanelDynamicModel.prototype.themeChanged = function (theme) {
         _super.prototype.themeChanged.call(this, theme);
-        (this.panels || []).forEach(function (panel) {
+        (this.panelsCore || []).forEach(function (panel) {
             return panel.getQuestions(true).forEach(function (question) {
                 question.themeChanged(theme);
             });
@@ -55646,24 +55935,24 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
          * @see maxPanelCount
          */
         get: function () {
-            return this.isLoadingFromJson || this.useTemplatePanel
+            return !this.canBuildPanels || this.wasNotRenderedInSurvey
                 ? this.getPropertyValue("panelCount")
-                : this.panels.length;
+                : this.panelsCore.length;
         },
         set: function (val) {
             if (val < 0)
                 return;
-            if (this.isLoadingFromJson || this.useTemplatePanel) {
+            if (!this.canBuildPanels || this.wasNotRenderedInSurvey) {
                 this.setPropertyValue("panelCount", val);
                 return;
             }
-            if (val == this.panels.length || this.useTemplatePanel)
+            if (val == this.panelsCore.length || this.useTemplatePanel)
                 return;
             this.updateBindings("panelCount", val);
             this.prepareValueForPanelCreating();
             for (var i = this.panelCount; i < val; i++) {
                 var panel = this.createNewPanel();
-                this.panels.push(panel);
+                this.panelsCore.push(panel);
                 if (this.renderMode == "list" && this.panelsState != "default") {
                     if (this.panelsState === "expand") {
                         panel.expand();
@@ -55675,9 +55964,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
                     }
                 }
             }
-            var removedPanels = [];
             if (val < this.panelCount) {
-                removedPanels = this.panels.splice(val, this.panelCount - val);
+                this.panelsCore.splice(val, this.panelCount - val);
             }
             this.setValueAfterPanelsCreating();
             this.setValueBasedOnPanelCount();
@@ -55725,8 +56013,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             : new QuestionPanelDynamicTemplateSurveyImpl(this));
     };
     QuestionPanelDynamicModel.prototype.setPanelsSurveyImpl = function () {
-        for (var i = 0; i < this.panels.length; i++) {
-            var panel = this.panels[i];
+        for (var i = 0; i < this.panelsCore.length; i++) {
+            var panel = this.panelsCore[i];
             if (panel == this.template)
                 continue;
             panel.setSurveyImpl(panel.data);
@@ -55735,12 +56023,12 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     QuestionPanelDynamicModel.prototype.setPanelsState = function () {
         if (this.useTemplatePanel || this.renderMode != "list" || !this.templateTitle)
             return;
-        for (var i = 0; i < this.panels.length; i++) {
+        for (var i = 0; i < this.panelsCore.length; i++) {
             var state = this.panelsState;
             if (state === "firstExpanded") {
                 state = i === 0 ? "expanded" : "collapsed";
             }
-            this.panels[i].state = state;
+            this.panelsCore[i].state = state;
         }
     };
     QuestionPanelDynamicModel.prototype.setValueBasedOnPanelCount = function () {
@@ -56024,8 +56312,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         if (!this.isVisible)
             return 0;
         var startIndex = this.showQuestionNumbers == "onSurvey" ? value : 0;
-        for (var i = 0; i < this.visiblePanels.length; i++) {
-            var counter = this.setPanelVisibleIndex(this.visiblePanels[i], startIndex, this.showQuestionNumbers != "off");
+        for (var i = 0; i < this.visiblePanelsCore.length; i++) {
+            var counter = this.setPanelVisibleIndex(this.visiblePanelsCore[i], startIndex, this.showQuestionNumbers != "off");
             if (this.showQuestionNumbers == "onSurvey") {
                 startIndex += counter;
             }
@@ -56111,7 +56399,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
                 panels.push(this.createNewPanel());
             }
         }
-        (_a = this.panels).splice.apply(_a, __spreadArray([0, this.panels.length], panels));
+        (_a = this.panelsCore).splice.apply(_a, __spreadArray([0, this.panelsCore.length], panels));
         this.setValueAfterPanelsCreating();
         this.setPanelsState();
         this.reRunCondition();
@@ -56183,7 +56471,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         return true;
     };
     QuestionPanelDynamicModel.prototype.getProgressInfo = function () {
-        return _survey_element__WEBPACK_IMPORTED_MODULE_1__["SurveyElement"].getProgressInfoByElements(this.visiblePanels, this.isRequired);
+        return _survey_element__WEBPACK_IMPORTED_MODULE_1__["SurveyElement"].getProgressInfoByElements(this.visiblePanelsCore, this.isRequired);
     };
     QuestionPanelDynamicModel.prototype.isRowEmpty = function (val) {
         for (var prop in val) {
@@ -56233,7 +56521,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         }
         if (this.survey)
             this.survey.dynamicPanelAdded(this);
-        return this.panels[index];
+        return this.panelsCore[index];
     };
     QuestionPanelDynamicModel.prototype.updateValueOnAddingPanel = function (prevIndex, index) {
         this.panelCount++;
@@ -56283,7 +56571,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         if (!this.canRemovePanel)
             return;
         if (this.isRequireConfirmOnDelete(value)) {
-            Object(_utils_utils__WEBPACK_IMPORTED_MODULE_9__["confirmActionAsync"])(this.confirmDeleteText, function () { _this.removePanel(value); });
+            Object(_utils_utils__WEBPACK_IMPORTED_MODULE_9__["confirmActionAsync"])(this.confirmDeleteText, function () { _this.removePanel(value); }, undefined, this.getLocale());
         }
         else {
             this.removePanel(value);
@@ -56295,7 +56583,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         var index = this.getVisualPanelIndex(val);
         if (index < 0 || index >= this.visiblePanelCount)
             return false;
-        var panelValue = this.visiblePanels[index].getValue();
+        var panelValue = this.visiblePanelsCore[index].getValue();
         return !this.isValueEmpty(panelValue) &&
             (this.isValueEmpty(this.defaultPanelValue) || !this.isTwoValueEquals(panelValue, this.defaultPanelValue));
     };
@@ -56329,13 +56617,13 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         var visIndex = this.getVisualPanelIndex(value);
         if (visIndex < 0 || visIndex >= this.visiblePanelCount)
             return;
-        var panel = this.visiblePanels[visIndex];
-        var index = this.panels.indexOf(panel);
+        var panel = this.visiblePanelsCore[visIndex];
+        var index = this.panelsCore.indexOf(panel);
         if (index < 0)
             return;
         if (this.survey && !this.survey.dynamicPanelRemoving(this, index, panel))
             return;
-        this.panels.splice(index, 1);
+        this.panelsCore.splice(index, 1);
         this.updateBindings("panelCount", this.panelCount);
         var value = this.value;
         if (!value || !Array.isArray(value) || index >= value.length)
@@ -56352,7 +56640,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     QuestionPanelDynamicModel.prototype.getVisualPanelIndex = function (val) {
         if (_helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].isNumber(val))
             return val;
-        var visPanels = this.visiblePanels;
+        var visPanels = this.visiblePanelsCore;
         for (var i = 0; i < visPanels.length; i++) {
             if (visPanels[i] === val || visPanels[i].data === val)
                 return i;
@@ -56360,15 +56648,15 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         return -1;
     };
     QuestionPanelDynamicModel.prototype.getPanelIndexById = function (id) {
-        for (var i = 0; i < this.panels.length; i++) {
-            if (this.panels[i].id === id)
+        for (var i = 0; i < this.panelsCore.length; i++) {
+            if (this.panelsCore[i].id === id)
                 return i;
         }
         return -1;
     };
     QuestionPanelDynamicModel.prototype.locStrsChanged = function () {
         _super.prototype.locStrsChanged.call(this);
-        var panels = this.panels;
+        var panels = this.panelsCore;
         for (var i = 0; i < panels.length; i++) {
             panels[i].locStrsChanged();
         }
@@ -56377,23 +56665,23 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         }
     };
     QuestionPanelDynamicModel.prototype.clearIncorrectValues = function () {
-        for (var i = 0; i < this.panels.length; i++) {
+        for (var i = 0; i < this.panelsCore.length; i++) {
             this.clearIncorrectValuesInPanel(i);
         }
     };
     QuestionPanelDynamicModel.prototype.clearErrors = function () {
         _super.prototype.clearErrors.call(this);
-        for (var i = 0; i < this.panels.length; i++) {
-            this.panels[i].clearErrors();
+        for (var i = 0; i < this.panelsCore.length; i++) {
+            this.panelsCore[i].clearErrors();
         }
     };
     QuestionPanelDynamicModel.prototype.getQuestionFromArray = function (name, index) {
-        if (index >= this.panelCount)
+        if (index < 0 || index >= this.panelsCore.length)
             return null;
-        return this.panels[index].getQuestionByName(name);
+        return this.panelsCore[index].getQuestionByName(name);
     };
     QuestionPanelDynamicModel.prototype.clearIncorrectValuesInPanel = function (index) {
-        var panel = this.panels[index];
+        var panel = this.panelsCore[index];
         panel.clearIncorrectValues();
         var val = this.value;
         var values = !!val && index < val.length ? val[index] : null;
@@ -56467,7 +56755,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         }
     };
     QuestionPanelDynamicModel.prototype.collectNestedQuestionsCore = function (questions, visibleOnly) {
-        var panels = visibleOnly ? this.visiblePanels : this.panels;
+        var panels = visibleOnly ? this.visiblePanelsCore : this.panelsCore;
         if (!Array.isArray(panels))
             return;
         panels.forEach(function (panel) {
@@ -56493,8 +56781,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     QuestionPanelDynamicModel.prototype.onReadOnlyChanged = function () {
         var readOnly = this.isReadOnly;
         this.template.readOnly = readOnly;
-        for (var i = 0; i < this.panels.length; i++) {
-            this.panels[i].readOnly = readOnly;
+        for (var i = 0; i < this.panelsCore.length; i++) {
+            this.panelsCore[i].readOnly = readOnly;
         }
         this.updateNoEntriesTextDefaultLoc();
         this.updateFooterActions();
@@ -56510,6 +56798,17 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     QuestionPanelDynamicModel.prototype.onSurveyLoad = function () {
         this.template.readOnly = this.isReadOnly;
         this.template.onSurveyLoad();
+        this.buildPanelsFirstTime();
+        _super.prototype.onSurveyLoad.call(this);
+    };
+    QuestionPanelDynamicModel.prototype.buildPanelsFirstTime = function (force) {
+        if (force === void 0) { force = false; }
+        if (this.hasPanelBuildFirstTime)
+            return;
+        if (!force && this.wasNotRenderedInSurvey)
+            return;
+        this.hasPanelBuildFirstTime = true;
+        this.isBuildingPanelsFirstTime = true;
         if (this.getPropertyValue("panelCount") > 0) {
             this.panelCount = this.getPropertyValue("panelCount");
         }
@@ -56529,28 +56828,43 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             this.updateNoEntriesTextDefaultLoc();
         }
         this.updateFooterActions();
-        _super.prototype.onSurveyLoad.call(this);
+        this.isBuildingPanelsFirstTime = false;
     };
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "wasNotRenderedInSurvey", {
+        get: function () {
+            return !this.hasPanelBuildFirstTime && !this.wasRendered && !!this.survey;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "canBuildPanels", {
+        get: function () {
+            return !this.isLoadingFromJson && !this.useTemplatePanel;
+        },
+        enumerable: false,
+        configurable: true
+    });
     QuestionPanelDynamicModel.prototype.onFirstRendering = function () {
+        _super.prototype.onFirstRendering.call(this);
+        this.buildPanelsFirstTime();
         this.template.onFirstRendering();
-        for (var i = 0; i < this.panels.length; i++) {
-            this.panels[i].onFirstRendering();
+        for (var i = 0; i < this.panelsCore.length; i++) {
+            this.panelsCore[i].onFirstRendering();
         }
-        _super.prototype.onFirstRendering.call(this);
     };
     QuestionPanelDynamicModel.prototype.localeChanged = function () {
         _super.prototype.localeChanged.call(this);
-        for (var i = 0; i < this.panels.length; i++) {
-            this.panels[i].localeChanged();
+        for (var i = 0; i < this.panelsCore.length; i++) {
+            this.panelsCore[i].localeChanged();
         }
     };
     QuestionPanelDynamicModel.prototype.runCondition = function (values, properties) {
         _super.prototype.runCondition.call(this, values, properties);
-        this.runPanelsCondition(this.panels, values, properties);
+        this.runPanelsCondition(this.panelsCore, values, properties);
     };
     QuestionPanelDynamicModel.prototype.runTriggers = function (name, value) {
         _super.prototype.runTriggers.call(this, name, value);
-        this.visiblePanels.forEach(function (p) {
+        this.visiblePanelsCore.forEach(function (p) {
             p.questions.forEach(function (q) { return q.runTriggers(name, value); });
         });
     };
@@ -56584,18 +56898,18 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     };
     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, questionName);
-            this.panels[i].onAnyValueChanged(QuestionPanelDynamicItem.ItemVariableName, "");
+        for (var i = 0; i < this.panelsCore.length; i++) {
+            this.panelsCore[i].onAnyValueChanged(name, questionName);
+            this.panelsCore[i].onAnyValueChanged(QuestionPanelDynamicItem.ItemVariableName, "");
         }
     };
     QuestionPanelDynamicModel.prototype.hasKeysDuplicated = function (fireCallback, rec) {
         if (rec === void 0) { rec = null; }
         var keyValues = [];
         var res;
-        for (var i = 0; i < this.panels.length; i++) {
+        for (var i = 0; i < this.panelsCore.length; i++) {
             res =
-                this.isValueDuplicated(this.panels[i], keyValues, rec, fireCallback) ||
+                this.isValueDuplicated(this.panelsCore[i], keyValues, rec, fireCallback) ||
                     res;
         }
         return res;
@@ -56612,7 +56926,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     QuestionPanelDynamicModel.prototype.hasErrors = function (fireCallback, rec) {
         if (fireCallback === void 0) { fireCallback = true; }
         if (rec === void 0) { rec = null; }
-        if (this.isValueChangingInternally)
+        if (this.isValueChangingInternally || this.isBuildingPanelsFirstTime)
             return false;
         var res = false;
         if (!!this.changingValueQuestion) {
@@ -56629,7 +56943,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         var res = _super.prototype.getContainsErrors.call(this);
         if (res)
             return res;
-        var panels = this.panels;
+        var panels = this.panelsCore;
         for (var i = 0; i < panels.length; i++) {
             if (panels[i].containsErrors)
                 return true;
@@ -56639,7 +56953,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     QuestionPanelDynamicModel.prototype.getIsAnswered = function () {
         if (!_super.prototype.getIsAnswered.call(this))
             return false;
-        var panels = this.visiblePanels;
+        var panels = this.visiblePanelsCore;
         for (var i = 0; i < panels.length; i++) {
             var visibleQuestions = [];
             panels[i].addQuestionsToList(visibleQuestions, true);
@@ -56665,8 +56979,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         _super.prototype.clearValueIfInvisible.call(this, reason);
     };
     QuestionPanelDynamicModel.prototype.clearValueInPanelsIfInvisible = function (reason) {
-        for (var i = 0; i < this.panels.length; i++) {
-            var questions = this.panels[i].questions;
+        for (var i = 0; i < this.panelsCore.length; i++) {
+            var questions = this.panelsCore[i].questions;
             this.isSetPanelItemData = {};
             for (var j = 0; j < questions.length; j++) {
                 var q = questions[j];
@@ -56679,8 +56993,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     QuestionPanelDynamicModel.prototype.getIsRunningValidators = function () {
         if (_super.prototype.getIsRunningValidators.call(this))
             return true;
-        for (var i = 0; i < this.panels.length; i++) {
-            var questions = this.panels[i].questions;
+        for (var i = 0; i < this.panelsCore.length; i++) {
+            var questions = this.panelsCore[i].questions;
             for (var j = 0; j < questions.length; j++) {
                 if (questions[j].isRunningValidators)
                     return true;
@@ -56690,7 +57004,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     };
     QuestionPanelDynamicModel.prototype.getAllErrors = function () {
         var result = _super.prototype.getAllErrors.call(this);
-        var panels = this.visiblePanels;
+        var panels = this.visiblePanelsCore;
         for (var i = 0; i < panels.length; i++) {
             var questions = panels[i].questions;
             for (var j = 0; j < questions.length; j++) {
@@ -56706,7 +57020,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         var values = this.getUnbindValue(value);
         if (!values || !Array.isArray(values))
             return values;
-        for (var i = 0; i < this.panels.length && i < values.length; i++) {
+        for (var i = 0; i < this.panelsCore.length && i < values.length; i++) {
             var val = values[i];
             if (!val)
                 continue;
@@ -56717,7 +57031,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     QuestionPanelDynamicModel.prototype.getPanelDisplayValue = function (panelIndex, val, keysAsText) {
         if (!val)
             return val;
-        var panel = this.panels[panelIndex];
+        var panel = this.panelsCore[panelIndex];
         var keys = Object.keys(val);
         for (var i = 0; i < keys.length; i++) {
             var key = keys[i];
@@ -56738,7 +57052,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     };
     QuestionPanelDynamicModel.prototype.hasErrorInPanels = function (fireCallback, rec) {
         var res = false;
-        var panels = this.visiblePanels;
+        var panels = this.visiblePanelsCore;
         var keyValues = [];
         for (var i = 0; i < panels.length; i++) {
             this.setOnCompleteAsyncInPanel(panels[i]);
@@ -56871,8 +57185,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             return;
         _super.prototype.setQuestionValue.call(this, newValue, false);
         this.setPanelCountBasedOnValue();
-        for (var i = 0; i < this.panels.length; i++) {
-            this.panelUpdateValueFromSurvey(this.panels[i]);
+        for (var i = 0; i < this.panelsCore.length; i++) {
+            this.panelUpdateValueFromSurvey(this.panelsCore[i]);
         }
         this.updateIsAnswered();
     };
@@ -56880,8 +57194,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         if (newValue === undefined && this.isAllPanelsEmpty())
             return;
         _super.prototype.onSurveyValueChanged.call(this, newValue);
-        for (var i = 0; i < this.panels.length; i++) {
-            this.panelSurveyValueChanged(this.panels[i]);
+        for (var i = 0; i < this.panelsCore.length; i++) {
+            this.panelSurveyValueChanged(this.panelsCore[i]);
         }
         if (newValue === undefined) {
             this.setValueBasedOnPanelCount();
@@ -56889,8 +57203,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         this.updateIsReady();
     };
     QuestionPanelDynamicModel.prototype.isAllPanelsEmpty = function () {
-        for (var i = 0; i < this.panels.length; i++) {
-            if (!_helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].isValueEmpty(this.panels[i].getValue()))
+        for (var i = 0; i < this.panelsCore.length; i++) {
+            if (!_helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].isValueEmpty(this.panelsCore[i].getValue()))
                 return false;
         }
         return true;
@@ -56929,7 +57243,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         return res > -1 ? res : this.items.length;
     };
     QuestionPanelDynamicModel.prototype.getVisibleItemIndex = function (item) {
-        var visPanels = this.visiblePanels;
+        var visPanels = this.visiblePanelsCore;
         for (var i = 0; i < visPanels.length; i++) {
             if (visPanels[i].data === item)
                 return i;
@@ -56977,8 +57291,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         else {
             delete qValue[index][name];
         }
-        if (index >= 0 && index < this.panels.length) {
-            this.changingValueQuestion = this.panels[index].getQuestionByValueName(name);
+        if (index >= 0 && index < this.panelsCore.length) {
+            this.changingValueQuestion = this.panelsCore[index].getQuestionByValueName(name);
         }
         this.value = qValue;
         this.changingValueQuestion = null;
@@ -57032,8 +57346,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     };
     QuestionPanelDynamicModel.prototype.updateElementCss = function (reNew) {
         _super.prototype.updateElementCss.call(this, reNew);
-        for (var i = 0; i < this.panels.length; i++) {
-            var el = this.panels[i];
+        for (var i = 0; i < this.panelsCore.length; i++) {
+            var el = this.panelsCore[i];
             el.updateElementCss(reNew);
         }
     };
@@ -57257,7 +57571,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             return;
         if (this.currentIndex < 0 || this.currentIndex >= this.visiblePanelCount)
             return;
-        var panel = this.visiblePanels[this.currentIndex];
+        var panel = this.visiblePanelsCore[this.currentIndex];
         this.additionalTitleToolbar.renderedActions.forEach(function (action) {
             var isActive = action.id === panel.id;
             action.pressed = isActive;
@@ -57273,9 +57587,9 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         if (!this.isRenderModeTab)
             return;
         var items = [];
-        var visPanels = this.visiblePanels;
+        var visPanels = this.visiblePanelsCore;
         var _loop_1 = function (i) {
-            this_1.visiblePanels.forEach(function (panel) { return items.push(_this.createTabByPanel(visPanels[i], i)); });
+            this_1.visiblePanelsCore.forEach(function (panel) { return items.push(_this.createTabByPanel(visPanels[i], i)); });
         };
         var this_1 = this;
         for (var i = 0; i < visPanels.length; i++) {
@@ -57518,7 +57832,7 @@ var QuestionRadiogroupModel = /** @class */ (function (_super) {
         configurable: true
     });
     QuestionRadiogroupModel.prototype.supportGoNextPageAutomatic = function () {
-        return this.isMouseDown === true;
+        return this.isMouseDown === true && !this.isOtherSelected;
     };
     QuestionRadiogroupModel.prototype.setNewComment = function (newValue) {
         this.isMouseDown = true;
@@ -57646,8 +57960,11 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         _this.domNode = null;
         _this.onVisibleChoicesChanged = function () {
             _super.prototype.onVisibleChoicesChanged.call(_this);
+            if (_this.carryForwardStartUnranked && !_this.isValueSetByUser && !_this.selectToRankEnabled) {
+                _this.value = [];
+            }
             // ranking question with only one choice doesn't make sense
-            if (_this.visibleChoices.length === 1) {
+            if (_this.visibleChoices.length === 1 && !_this.selectToRankEnabled) {
                 _this.value = [];
                 _this.value.push(_this.visibleChoices[0].value);
                 _this.updateRankingChoices();
@@ -57720,12 +58037,14 @@ var QuestionRankingModel = /** @class */ (function (_super) {
                 itemsNodes[index].focus();
             }
         };
+        _this.isValueSetByUser = false;
         _this.setValue = function () {
             var value = [];
             _this.rankingChoices.forEach(function (choice) {
                 value.push(choice.value);
             });
             _this.value = value;
+            _this.isValueSetByUser = true;
         };
         _this.createNewArray("rankingChoices");
         _this.registerFunctionOnPropertyValueChanged("selectToRankEnabled", function () {
@@ -57746,6 +58065,9 @@ var QuestionRankingModel = /** @class */ (function (_super) {
             return undefined;
         return 0;
     };
+    QuestionRankingModel.prototype.supportContainerQueries = function () {
+        return this.selectToRankEnabled;
+    };
     Object.defineProperty(QuestionRankingModel.prototype, "rootClass", {
         get: function () {
             return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_6__["CssClassBuilder"]()
@@ -58155,6 +58477,9 @@ var QuestionRankingModel = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_3__["property"])({ defaultValue: null })
     ], QuestionRankingModel.prototype, "dropTargetNodeMove", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_3__["property"])({ defaultValue: true })
+    ], QuestionRankingModel.prototype, "carryForwardStartUnranked", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_3__["property"])({ localizable: { defaultStr: "selectToRankEmptyRankedAreaText" } })
     ], QuestionRankingModel.prototype, "selectToRankEmptyRankedAreaText", void 0);
@@ -60776,8 +61101,10 @@ var QuestionTextModel = /** @class */ (function (_super) {
         return !this.isReadOnly && this.inputType !== "range";
     };
     QuestionTextModel.prototype.getControlCssClassBuilder = function () {
+        var maxLength = this.getMaxLength();
         return _super.prototype.getControlCssClassBuilder.call(this)
-            .append(this.cssClasses.constrolWithCharacterCounter, !!this.getMaxLength());
+            .append(this.cssClasses.constrolWithCharacterCounter, !!maxLength)
+            .append(this.cssClasses.characterCounterBig, maxLength > 99);
     };
     QuestionTextModel.prototype.isReadOnlyRenderDiv = function () {
         return this.isReadOnly && _settings__WEBPACK_IMPORTED_MODULE_6__["settings"].readOnly.textRenderMode === "div";
@@ -61722,7 +62049,7 @@ var SurveyQuestionBoolean = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { className: itemClass, onClick: this.handleOnClick },
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { ref: this.checkRef, type: "checkbox", name: this.question.name, value: this.question.booleanValue === null
                         ? ""
-                        : this.question.booleanValue, id: this.question.inputId, className: cssClasses.control, disabled: this.isDisplayMode, checked: this.question.booleanValue || false, onChange: this.handleOnChange, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy }),
+                        : this.question.booleanValue, id: this.question.inputId, className: cssClasses.control, disabled: this.isDisplayMode, checked: this.question.booleanValue || false, onChange: this.handleOnChange, 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"]("div", { className: cssClasses.sliderGhost, onClick: function (event) { return _this.handleOnLabelClick(event, false); } },
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.getLabelCss(false) }, this.renderLocString(this.question.locLabelFalse))),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.switch, onClick: this.handleOnSwitchClick },
@@ -63260,8 +63587,9 @@ var SurveyQuestionPanelDynamicAddButton = /** @class */ (function (_super) {
     SurveyQuestionPanelDynamicAddButton.prototype.renderElement = function () {
         if (!this.question.canAddPanel)
             return null;
+        var btnText = this.renderLocString(this.question.locPanelAddText);
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { type: "button", className: this.question.getAddButtonCss(), onClick: this.handleClick },
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: this.question.cssClasses.buttonAddText }, this.question.panelAddText)));
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: this.question.cssClasses.buttonAddText }, btnText)));
     };
     return SurveyQuestionPanelDynamicAddButton;
 }(SurveyQuestionPanelDynamicAction));
@@ -63479,8 +63807,9 @@ var SurveyQuestionPanelDynamicRemoveButton = /** @class */ (function (_super) {
         return _this;
     }
     SurveyQuestionPanelDynamicRemoveButton.prototype.renderElement = function () {
+        var btnText = this.renderLocString(this.question.locPanelRemoveText);
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { className: this.question.getPanelRemoveButtonCss(), onClick: this.handleClick, type: "button" },
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: this.question.cssClasses.buttonRemoveText }, this.question.panelRemoveText),
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: this.question.cssClasses.buttonRemoveText }, btnText),
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: this.question.cssClasses.iconRemove })));
     };
     return SurveyQuestionPanelDynamicRemoveButton;
@@ -66116,10 +66445,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyWindow", function() { return SurveyWindow; });
 /* 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 _reactSurvey__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactSurvey */ "./src/react/reactSurvey.tsx");
-/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
-/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! survey-core */ "./src/entries/core.ts");
-/* harmony import */ var _components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
+/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-core */ "./src/entries/core.ts");
+/* harmony import */ var _reactSurvey__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactSurvey */ "./src/react/reactSurvey.tsx");
+/* harmony import */ var _components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -66139,7 +66467,6 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
-
 var PopupSurvey = /** @class */ (function (_super) {
     __extends(PopupSurvey, _super);
     function PopupSurvey(props) {
@@ -66157,46 +66484,65 @@ var PopupSurvey = /** @class */ (function (_super) {
         return _super.prototype.canRender.call(this) && this.popup.isShowing;
     };
     PopupSurvey.prototype.renderElement = function () {
+        var _this = this;
         var header = this.renderWindowHeader();
-        var body = this.popup.isExpanded ? this.renderBody() : null;
-        var style = {
-            position: "fixed",
-            bottom: 3,
-            right: 10
-        };
+        var body = this.renderBody();
+        var style = {};
         if (!!this.popup.renderedWidth) {
             style.width = this.popup.renderedWidth;
             style.maxWidth = this.popup.renderedWidth;
         }
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.popup.cssRoot, style: style },
-            header,
-            body));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.popup.cssRoot, style: style, onScroll: function () { return _this.popup.onScroll(); } },
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.popup.cssRootContent },
+                header,
+                body)));
     };
     PopupSurvey.prototype.renderWindowHeader = function () {
-        var _this = this;
-        var styleA = { width: "100%", cursor: "pointer" };
-        var styleTitle = { paddingRight: "10px" };
-        var glyphClassName = this.popup.cssButton;
-        glyphClassName = "glyphicon pull-right " + glyphClassName;
-        var title = _reactquestion_element__WEBPACK_IMPORTED_MODULE_2__["SurveyElementBase"].renderLocString(this.survey.locTitle);
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.popup.cssHeaderRoot },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { onClick: this.handleOnExpanded, style: styleA },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.popup.cssHeaderTitle, style: styleTitle }, title),
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: glyphClassName, "aria-hidden": "true" })),
-            this.popup.allowClose ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.popup.cssHeaderButton, onClick: function () { _this.popup.hide(); }, style: { transform: "rotate(45deg)", float: "right", cursor: "pointer", width: "24px", height: "24px" } },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_4__["SvgIcon"], { iconName: "icon-expanddetail", size: 16 }))) : null,
-            this.popup.isExpanded ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.popup.cssHeaderButton, onClick: this.handleOnExpanded, style: { float: "right", cursor: "pointer", width: "24px", height: "24px" } },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_4__["SvgIcon"], { iconName: "icon-collapsedetail", size: 16 }))) : null));
+        var popup = this.popup;
+        var headerCss = popup.cssHeaderRoot;
+        var titleCollapsed = null;
+        var expandCollapseIcon;
+        var closeButton = null;
+        if (popup.isCollapsed) {
+            headerCss += " " + popup.cssRootCollapsedMod;
+            titleCollapsed = this.renderTitleCollapsed(popup);
+            expandCollapseIcon = this.renderExpandIcon();
+        }
+        else {
+            expandCollapseIcon = this.renderCollapseIcon();
+        }
+        if (popup.allowClose) {
+            closeButton = this.renderCloseButton(this.popup);
+        }
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: popup.cssHeaderRoot },
+            titleCollapsed,
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: popup.cssHeaderButtonsContainer },
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: popup.cssHeaderCollapseButton, onClick: this.handleOnExpanded }, expandCollapseIcon),
+                closeButton)));
+    };
+    PopupSurvey.prototype.renderTitleCollapsed = function (popup) {
+        if (!popup.locTitle)
+            return null;
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: popup.cssHeaderTitleCollapsed }, popup.locTitle.renderedHtml);
+    };
+    PopupSurvey.prototype.renderExpandIcon = function () {
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { iconName: "icon-restore_16x16", size: 16 });
+    };
+    PopupSurvey.prototype.renderCollapseIcon = function () {
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { iconName: "icon-minimize_16x16", size: 16 });
+    };
+    PopupSurvey.prototype.renderCloseButton = function (popup) {
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: popup.cssHeaderCloseButton, onClick: function () { popup.hide(); } },
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { iconName: "icon-close_16x16", size: 16 })));
     };
     PopupSurvey.prototype.renderBody = function () {
-        var _this = this;
-        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.popup.cssBody, onScroll: function () { return _this.popup.onScroll(); } }, this.doRender());
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.popup.cssBody }, this.doRender());
     };
     PopupSurvey.prototype.createSurvey = function (newProps) {
         if (!newProps)
             newProps = {};
         _super.prototype.createSurvey.call(this, newProps);
-        this.popup = new survey_core__WEBPACK_IMPORTED_MODULE_3__["PopupSurveyModel"](null, this.survey);
+        this.popup = new survey_core__WEBPACK_IMPORTED_MODULE_1__["PopupSurveyModel"](null, this.survey);
         if (newProps.closeOnCompleteTimeout) {
             this.popup.closeOnCompleteTimeout = newProps.closeOnCompleteTimeout;
         }
@@ -66206,7 +66552,7 @@ var PopupSurvey = /** @class */ (function (_super) {
             this.popup.expand();
     };
     return PopupSurvey;
-}(_reactSurvey__WEBPACK_IMPORTED_MODULE_1__["Survey"]));
+}(_reactSurvey__WEBPACK_IMPORTED_MODULE_2__["Survey"]));
 
 /**
  * Obsolete. Please use PopupSurvey
@@ -66856,12 +67202,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyProgressToc", function() { return SurveyProgressToc; });
 /* 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 survey_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-core */ "./src/entries/core.ts");
-/* harmony import */ var _reactSurveyNavigationBase__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactSurveyNavigationBase */ "./src/react/reactSurveyNavigationBase.tsx");
-/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
-/* harmony import */ var _components_list_list__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/list/list */ "./src/react/components/list/list.tsx");
-/* harmony import */ var _components_popup_popup__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/popup/popup */ "./src/react/components/popup/popup.tsx");
-/* harmony import */ var _components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
+/* harmony import */ var _reactSurveyNavigationBase__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactSurveyNavigationBase */ "./src/react/reactSurveyNavigationBase.tsx");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
+/* harmony import */ var _components_list_list__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/list/list */ "./src/react/components/list/list.tsx");
+/* harmony import */ var _components_popup_popup__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/popup/popup */ "./src/react/components/popup/popup.tsx");
+/* harmony import */ var _components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -66883,29 +67228,28 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
-
 var SurveyProgressToc = /** @class */ (function (_super) {
     __extends(SurveyProgressToc, _super);
     function SurveyProgressToc() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     SurveyProgressToc.prototype.render = function () {
-        var tocModel = new survey_core__WEBPACK_IMPORTED_MODULE_1__["TOCModel"](this.props.model);
+        var tocModel = this.props.model;
         var content;
         if (tocModel.isMobile) {
             content = react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { onClick: tocModel.togglePopup },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_6__["SvgIcon"], { iconName: tocModel.icon, size: 24 }),
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_popup_popup__WEBPACK_IMPORTED_MODULE_5__["Popup"], { model: tocModel.popupModel }));
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_5__["SvgIcon"], { iconName: tocModel.icon, size: 24 }),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_popup_popup__WEBPACK_IMPORTED_MODULE_4__["Popup"], { model: tocModel.popupModel }));
         }
         else {
-            content = react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_list_list__WEBPACK_IMPORTED_MODULE_4__["List"], { model: tocModel.listModel });
+            content = react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_list_list__WEBPACK_IMPORTED_MODULE_3__["List"], { model: tocModel.listModel });
         }
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: tocModel.containerCss }, content));
     };
     return SurveyProgressToc;
-}(_reactSurveyNavigationBase__WEBPACK_IMPORTED_MODULE_2__["SurveyNavigationBase"]));
+}(_reactSurveyNavigationBase__WEBPACK_IMPORTED_MODULE_1__["SurveyNavigationBase"]));
 
-_element_factory__WEBPACK_IMPORTED_MODULE_3__["ReactElementFactory"].Instance.registerElement("sv-progress-toc", function (props) {
+_element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.registerElement("sv-navigation-toc", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyProgressToc, props);
 });
 
@@ -68816,7 +69160,7 @@ var SurveyQuestionMatrix = /** @class */ (function (_super) {
         for (var i = 0; i < visibleRows.length; i++) {
             var row = visibleRows[i];
             var key = "row-" + row.name + "-" + i;
-            rows.push(react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionMatrixRow, { key: key, question: this.question, cssClasses: cssClasses, isDisplayMode: this.isDisplayMode, row: row, isFirst: i == 0 }));
+            rows.push(react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionMatrixRow, { key: key, question: this.question, cssClasses: cssClasses, row: row, isFirst: i == 0 }));
         }
         var header = !this.question.showHeader ? null : (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("thead", null,
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("tr", null,
@@ -68837,6 +69181,11 @@ var SurveyQuestionMatrixRow = /** @class */ (function (_super) {
     function SurveyQuestionMatrixRow(props) {
         return _super.call(this, props) || this;
     }
+    SurveyQuestionMatrixRow.prototype.getStateElement = function () {
+        if (!!this.row)
+            return this.row.item;
+        return _super.prototype.getStateElement.call(this);
+    };
     Object.defineProperty(SurveyQuestionMatrixRow.prototype, "question", {
         get: function () {
             return this.props.question;
@@ -68874,7 +69223,7 @@ var SurveyQuestionMatrixRow = /** @class */ (function (_super) {
                 style.minWidth = this.question.rowTitleWidth;
                 style.width = this.question.rowTitleWidth;
             }
-            rowsTD = react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("td", { style: style, className: this.question.cssClasses.rowTextCell }, this.wrapCell({ row: this.row }, rowText, "row-header"));
+            rowsTD = react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("td", { style: style, className: this.row.rowTextClasses }, this.wrapCell({ row: this.row }, rowText, "row-header"));
         }
         var tds = this.generateTds();
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("tr", { className: this.row.rowClasses || undefined },
@@ -68892,9 +69241,7 @@ var SurveyQuestionMatrixRow = /** @class */ (function (_super) {
             var key = "value" + i;
             var itemClass = this_1.question.getItemClass(row, column);
             if (this_1.question.hasCellText) {
-                var getHandler = !this_1.question.isInputReadOnly
-                    ? function (column) { return function () { return _this.cellClick(row, column); }; }
-                    : null;
+                var getHandler = function (column) { return function () { return _this.cellClick(row, column); }; };
                 td = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("td", { key: key, className: itemClass, onClick: getHandler ? getHandler(column) : function () { } }, this_1.renderLocString(this_1.question.getCellDisplayLocText(row.name, column))));
             }
             else {
@@ -68904,7 +69251,6 @@ var SurveyQuestionMatrixRow = /** @class */ (function (_super) {
                     column: column,
                     columnIndex: i,
                     cssClasses: this_1.cssClasses,
-                    isDisplayMode: this_1.isDisplayMode,
                     cellChanged: function () { _this.cellClick(_this.row, column); }
                 });
                 td = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("td", { key: key, "data-responsive-title": column.locText.renderedHtml, className: this_1.question.cssClasses.cell }, renderedCell));
@@ -68987,7 +69333,7 @@ var SurveyQuestionMatrixCell = /** @class */ (function (_super) {
             mobileSpan));
     };
     SurveyQuestionMatrixCell.prototype.renderInput = function (inputId, isChecked) {
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { id: inputId, type: "radio", className: this.cssClasses.itemValue, name: this.row.fullName, value: this.column.value, disabled: this.isDisplayMode, checked: isChecked, onChange: this.handleOnChange, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.getCellAriaLabel(this.row.locText.renderedHtml, this.column.locText.renderedHtml), "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-describedby": this.question.a11y_input_ariaDescribedBy }));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { id: inputId, type: "radio", className: this.cssClasses.itemValue, name: this.row.fullName, value: this.column.value, disabled: this.row.isReadOnly, checked: isChecked, onChange: this.handleOnChange, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.getCellAriaLabel(this.row.locText.renderedHtml, this.column.locText.renderedHtml), "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-describedby": this.question.a11y_input_ariaDescribedBy }));
     };
     return SurveyQuestionMatrixCell;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElement"]));
@@ -71016,7 +71362,7 @@ var SurveyQuestionSignaturePad = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.placeholder, style: { display: this.question.needShowPlaceholder() ? "" : "none" } }, this.renderLocString(this.question.locPlaceholder)),
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null,
                 this.renderBackgroundImage(),
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("canvas", { tabIndex: 0, className: this.question.cssClasses.canvas, onBlur: this.question.onBlur })),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("canvas", { tabIndex: -1, className: this.question.cssClasses.canvas, onBlur: this.question.onBlur })),
             clearButton,
             loadingIndicator));
     };
@@ -71961,8 +72307,8 @@ var settings = {
      * @param message A message to be displayed in the confirm dialog window.
      * @param callback A callback function that should be called with `true` if a user confirms an action or `false` otherwise.
      */
-    confirmActionAsync: function (message, callback, applyTitle) {
-        return Object(_utils_utils__WEBPACK_IMPORTED_MODULE_0__["showConfirmDialog"])(message, callback, applyTitle);
+    confirmActionAsync: function (message, callback, applyTitle, locale) {
+        return Object(_utils_utils__WEBPACK_IMPORTED_MODULE_0__["showConfirmDialog"])(message, callback, applyTitle, locale);
     },
     /**
      * A minimum width value for all survey elements.
@@ -73420,7 +73766,13 @@ var SurveyElement = /** @class */ (function (_super) {
     });
     SurveyElement.prototype.updateCustomWidgets = function () { };
     SurveyElement.prototype.onSurveyLoad = function () { };
+    Object.defineProperty(SurveyElement.prototype, "wasRendered", {
+        get: function () { return !!this.wasRenderedValue; },
+        enumerable: false,
+        configurable: true
+    });
     SurveyElement.prototype.onFirstRendering = function () {
+        this.wasRenderedValue = true;
         this.ensureCssClassesValue();
     };
     SurveyElement.prototype.endLoadingFromJson = function () {
@@ -73900,7 +74252,7 @@ var SurveyError = /** @class */ (function () {
         this.visible = true;
         this.onUpdateErrorTextCallback = undefined;
     }
-    SurveyError.prototype.equalsTo = function (error) {
+    SurveyError.prototype.equals = function (error) {
         if (!error || !error.getErrorType)
             return false;
         if (this.getErrorType() !== error.getErrorType())
@@ -74000,6 +74352,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _header__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./header */ "./src/header.ts");
 /* harmony import */ var _surveytimer__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./surveytimer */ "./src/surveytimer.ts");
 /* harmony import */ var _surveyTaskManager__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./surveyTaskManager */ "./src/surveyTaskManager.ts");
+/* harmony import */ var _surveyToc__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./surveyToc */ "./src/surveyToc.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -74042,6 +74395,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 
 
 /**
@@ -74915,8 +75269,8 @@ var SurveyModel = /** @class */ (function (_super) {
         });
         _this.addLayoutElement({
             id: "toc-navigation",
-            component: "sv-progress-toc",
-            data: _this
+            component: "sv-navigation-toc",
+            data: new _surveyToc__WEBPACK_IMPORTED_MODULE_23__["TOCModel"](_this)
         });
         _this.layoutElements.push({
             id: "navigationbuttons",
@@ -75961,6 +76315,8 @@ var SurveyModel = /** @class */ (function (_super) {
         return this.locale;
     };
     SurveyModel.prototype.locStrsChanged = function () {
+        if (this.isClearingUnsedValues)
+            return;
         _super.prototype.locStrsChanged.call(this);
         if (!this.currentPage)
             return;
@@ -77515,11 +77871,11 @@ var SurveyModel = /** @class */ (function (_super) {
         if (this.isDesignMode)
             return false;
         var index = this.visiblePages.indexOf(page);
-        if (index < 0)
+        if (index < 0 || index >= this.visiblePageCount)
             return false;
         if (index === this.currentPageNo)
             return false;
-        if (index < this.currentPageNo) {
+        if (index < this.currentPageNo || this.isValidateOnComplete) {
             this.currentPageNo = index;
             return true;
         }
@@ -79636,7 +79992,7 @@ var SurveyModel = /** @class */ (function (_super) {
         }
     };
     /**
-     * Uploads a file to server.
+     * Uploads files to a server.
      *
      * The following code shows how to call this method:
      *
@@ -80733,11 +81089,13 @@ var SurveyModel = /** @class */ (function (_super) {
         return name.substring(0, pos);
     };
     SurveyModel.prototype.clearUnusedValues = function () {
+        this.isClearingUnsedValues = true;
         var questions = this.getAllQuestions();
         for (var i = 0; i < questions.length; i++) {
             questions[i].clearUnusedValues();
         }
         this.clearInvisibleQuestionValues();
+        this.isClearingUnsedValues = false;
     };
     SurveyModel.prototype.hasVisibleQuestionByValueName = function (valueName) {
         var questions = this.getQuestionsByValueName(valueName);
@@ -81924,8 +82282,12 @@ var SurveyModel = /** @class */ (function (_super) {
         this.layoutElements.push(layoutElement);
         return existingLayoutElement;
     };
-    SurveyModel.prototype.removeLayoutElement = function (layoutElementId) {
+    SurveyModel.prototype.findLayoutElement = function (layoutElementId) {
         var layoutElement = this.layoutElements.filter(function (a) { return a.id === layoutElementId; })[0];
+        return layoutElement;
+    };
+    SurveyModel.prototype.removeLayoutElement = function (layoutElementId) {
+        var layoutElement = this.findLayoutElement(layoutElementId);
         if (!!layoutElement) {
             var layoutElementIndex = this.layoutElements.indexOf(layoutElement);
             this.layoutElements.splice(layoutElementIndex, 1);
@@ -81949,7 +82311,7 @@ var SurveyModel = /** @class */ (function (_super) {
                 }
             }
             else if (this.state === "running" && isStrCiEqual(layoutElement.id, "progress-" + this.progressBarType)) {
-                var headerLayoutElement = this.layoutElements.filter(function (a) { return a.id === "advanced-header"; })[0];
+                var headerLayoutElement = this.findLayoutElement("advanced-header");
                 var advHeader = headerLayoutElement && headerLayoutElement.data;
                 var isBelowHeader = !advHeader || advHeader.hasBackground;
                 if (container === "header" && !isBelowHeader) {
@@ -82051,6 +82413,14 @@ var SurveyModel = /** @class */ (function (_super) {
         this.removeScrollEventListener();
         this.destroyResizeObserver();
         this.rootElement = undefined;
+        if (this.layoutElements) {
+            for (var i = 0; i < this.layoutElements.length; i++) {
+                if (!!this.layoutElements[i].data && this.layoutElements[i].data !== this && this.layoutElements[i].data.dispose) {
+                    this.layoutElements[i].data.dispose();
+                }
+            }
+            this.layoutElements.splice(0, this.layoutElements.length);
+        }
         _super.prototype.dispose.call(this);
         this.editingObj = null;
         if (!this.pages)
@@ -82116,7 +82486,7 @@ var SurveyModel = /** @class */ (function (_super) {
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({
             onSet: function (newValue, target) {
                 if (newValue === "advanced") {
-                    var layoutElement = target.layoutElements.filter(function (a) { return a.id === "advanced-header"; })[0];
+                    var layoutElement = target.findLayoutElement("advanced-header");
                     if (!layoutElement) {
                         var advHeader = new _header__WEBPACK_IMPORTED_MODULE_20__["Cover"]();
                         advHeader.logoPositionX = target.logoPosition === "right" ? "right" : "left";
@@ -82352,7 +82722,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("survey", [
     {
         name: "checkErrorsMode",
         default: "onNextPage",
-        choices: ["onNextPage", "onValueChanged", "onValueChanging", "onComplete"],
+        choices: ["onNextPage", "onValueChanged", "onComplete"],
     },
     {
         name: "textUpdateMode",
@@ -82972,12 +83342,12 @@ function createTOCListModel(survey, onAction) {
         if (!!item.action()) {
             listModel.selectedItem = item;
         }
-    }, true, items.filter(function (i) { return i.id === survey.currentPage.name; })[0] || items.filter(function (i) { return i.id === pagesSource[0].name; })[0]);
+    }, true, items.filter(function (i) { return !!survey.currentPage && i.id === survey.currentPage.name; })[0] || items.filter(function (i) { return i.id === pagesSource[0].name; })[0]);
     listModel.allowSelection = false;
     listModel.locOwner = survey;
     listModel.searchEnabled = false;
     survey.onCurrentPageChanged.add(function (s, o) {
-        listModel.selectedItem = items.filter(function (i) { return i.id === survey.currentPage.name; })[0];
+        listModel.selectedItem = items.filter(function (i) { return !!survey.currentPage && i.id === survey.currentPage.name; })[0];
     });
     return listModel;
 }
@@ -83582,6 +83952,13 @@ var Trigger = /** @class */ (function (_super) {
         }
         return res;
     };
+    Object.defineProperty(Trigger.prototype, "isInternal", {
+        get: function () {
+            return this.isGhost === true;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Trigger.prototype, "operator", {
         get: function () {
             return this.getPropertyValue("operator", "equal");
@@ -84518,8 +84895,11 @@ var PopupUtils = /** @class */ (function () {
         }
         return { left: Math.round(currentLeft), top: Math.round(currentTop) };
     };
-    PopupUtils.getCorrectedVerticalDimensions = function (top, height, windowHeight) {
-        var result = { height: height, top: top };
+    PopupUtils.getCorrectedVerticalDimensions = function (top, height, windowHeight, verticalPosition) {
+        var result;
+        if (verticalPosition === "top") {
+            result = { height: height, top: top };
+        }
         if (top < 0) {
             result = { height: height + top, top: 0 };
         }
@@ -84897,7 +85277,7 @@ function confirmAction(message) {
         return _settings__WEBPACK_IMPORTED_MODULE_1__["settings"].confirmActionFunc(message);
     return confirm(message);
 }
-function confirmActionAsync(message, funcOnYes, funcOnNo) {
+function confirmActionAsync(message, funcOnYes, funcOnNo, locale) {
     var callbackFunc = function (res) {
         if (res)
             funcOnYes();
@@ -84905,7 +85285,7 @@ function confirmActionAsync(message, funcOnYes, funcOnNo) {
             funcOnNo();
     };
     if (!!_settings__WEBPACK_IMPORTED_MODULE_1__["settings"] && !!_settings__WEBPACK_IMPORTED_MODULE_1__["settings"].confirmActionAsync) {
-        if (_settings__WEBPACK_IMPORTED_MODULE_1__["settings"].confirmActionAsync(message, callbackFunc))
+        if (_settings__WEBPACK_IMPORTED_MODULE_1__["settings"].confirmActionAsync(message, callbackFunc, undefined, locale))
             return;
     }
     callbackFunc(confirmAction(message));
@@ -85012,7 +85392,7 @@ function scrollElementByChildId(id) {
         return;
     var scrollableEl = findScrollableParent(el);
     if (!!scrollableEl) {
-        scrollableEl.dispatchEvent(new CustomEvent("scroll"));
+        setTimeout(function () { return scrollableEl.dispatchEvent(new CustomEvent("scroll")); }, 10);
     }
 }
 function navigateToUrl(url) {
@@ -85254,7 +85634,7 @@ var Logger = /** @class */ (function () {
     return Logger;
 }());
 
-function showConfirmDialog(message, callback, applyTitle) {
+function showConfirmDialog(message, callback, applyTitle, locale) {
     var locStr = new _localizablestring__WEBPACK_IMPORTED_MODULE_0__["LocalizableString"](undefined);
     var popupViewModel = _settings__WEBPACK_IMPORTED_MODULE_1__["settings"].showDialog({
         componentName: "sv-string-viewer",
@@ -85275,9 +85655,9 @@ function showConfirmDialog(message, callback, applyTitle) {
     var toolbar = popupViewModel.footerToolbar;
     var applyBtn = toolbar.getActionById("apply");
     var cancelBtn = toolbar.getActionById("cancel");
-    cancelBtn.title = _surveyStrings__WEBPACK_IMPORTED_MODULE_2__["surveyLocalization"].getString("cancel");
+    cancelBtn.title = _surveyStrings__WEBPACK_IMPORTED_MODULE_2__["surveyLocalization"].getString("cancel", locale);
     cancelBtn.innerCss = "sv-popup__body-footer-item sv-popup__button sd-btn sd-btn--small";
-    applyBtn.title = applyTitle || _surveyStrings__WEBPACK_IMPORTED_MODULE_2__["surveyLocalization"].getString("ok");
+    applyBtn.title = applyTitle || _surveyStrings__WEBPACK_IMPORTED_MODULE_2__["surveyLocalization"].getString("ok", locale);
     applyBtn.innerCss = "sv-popup__body-footer-item sv-popup__button sv-popup__button--danger sd-btn sd-btn--small sd-btn--danger";
     popupViewModel.width = "452px";
     return true;