survey-react 1.9.125 → 1.9.126

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.125
+ * surveyjs - Survey JavaScript library v1.9.126
  * 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();
@@ -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",
@@ -5737,6 +5762,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 +6001,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: {
@@ -9448,8 +9479,8 @@ __webpack_require__.r(__webpack_exports__);
 //import "../../modern.scss";
 var Version;
 var ReleaseDate;
-Version = "" + "1.9.125";
-ReleaseDate = "" + "2024-01-11";
+Version = "" + "1.9.126";
+ReleaseDate = "" + "2024-01-16";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -16972,21 +17003,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;
@@ -17318,10 +17339,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 +17352,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 +17741,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 +17796,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 +17884,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 ***!
@@ -31292,6 +31349,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) {
@@ -33794,7 +33854,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 +33938,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 +33966,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 +34039,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 +34075,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 +34118,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 +36002,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 +36019,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 +39810,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 +39820,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();
@@ -41625,9 +41755,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];
@@ -46490,8 +46623,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 +46662,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 +46689,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 +47049,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;
@@ -47062,7 +47216,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 +47224,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();
@@ -55009,8 +55163,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 +55196,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 +55220,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 +55376,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 +55392,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 +55403,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 +55429,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 +55445,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 +55475,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 +55504,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 +55513,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 +55540,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 +55797,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 +55816,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();
@@ -55677,7 +55847,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             }
             var removedPanels = [];
             if (val < this.panelCount) {
-                removedPanels = this.panels.splice(val, this.panelCount - val);
+                removedPanels = this.panelsCore.splice(val, this.panelCount - val);
             }
             this.setValueAfterPanelsCreating();
             this.setValueBasedOnPanelCount();
@@ -55725,8 +55895,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 +55905,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 +56194,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 +56281,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 +56353,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 +56403,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++;
@@ -56295,7 +56465,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 +56499,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 +56522,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 +56530,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 +56547,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)
             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 +56637,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 +56663,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 +56680,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 +56710,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 +56780,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 +56808,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 +56825,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 +56835,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 +56861,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 +56875,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 +56886,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 +56902,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 +56913,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 +56934,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 +57067,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 +57076,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 +57085,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 +57125,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 +57173,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 +57228,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 +57453,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 +57469,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++) {
@@ -57746,6 +57942,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"]()
@@ -63260,8 +63459,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 +63679,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 +66317,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 +66339,6 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
-
 var PopupSurvey = /** @class */ (function (_super) {
     __extends(PopupSurvey, _super);
     function PopupSurvey(props) {
@@ -66157,46 +66356,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 +66424,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 +67074,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 +67100,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 +69032,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 +69053,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 +69095,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 +69113,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 +69123,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 +69205,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"]));
@@ -73420,7 +73638,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 +74124,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 +74224,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 +74267,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 
 
 /**
@@ -74915,8 +75141,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 +76187,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 +77743,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;
         }
@@ -80733,11 +80961,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 +82154,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 +82183,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 +82285,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 +82358,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 +82594,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 +83214,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;
 }
@@ -85012,7 +85254,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) {