survey-core 1.9.125 → 1.9.126

package/survey.core.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: {
@@ -9337,8 +9368,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
@@ -15789,21 +15820,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;
@@ -16135,10 +16156,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",
@@ -16146,6 +16169,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"
 };
 
@@ -16534,6 +16558,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 ***!
@@ -16578,6 +16613,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 ***!
@@ -16655,6 +16701,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 ***!
@@ -23014,6 +23071,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) {
@@ -24158,7 +24218,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");
         }
@@ -24242,6 +24302,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();
@@ -24263,11 +24330,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.
      *
@@ -24325,7 +24403,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
@@ -24344,16 +24439,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("cssHeaderTitle", "");
+            return this.getPropertyValue("cssHeaderButtonsContainer", "");
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(PopupSurveyModel.prototype, "cssHeaderButton", {
+    Object.defineProperty(PopupSurveyModel.prototype, "cssHeaderCollapseButton", {
         get: function () {
-            return this.getPropertyValue("cssHeaderButton", "");
+            return this.getPropertyValue("cssHeaderCollapseButton", "");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PopupSurveyModel.prototype, "cssHeaderCloseButton", {
+        get: function () {
+            return this.getPropertyValue("cssHeaderCloseButton", "");
         },
         enumerable: false,
         configurable: true
@@ -24373,13 +24482,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 () {
@@ -26253,6 +26366,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();
@@ -26267,6 +26383,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();
     };
@@ -30057,7 +30174,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();
@@ -30068,6 +30184,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();
@@ -31989,9 +32119,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];
@@ -36854,8 +36987,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) {
@@ -36893,8 +37026,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
@@ -36904,6 +37053,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,
@@ -37263,6 +37413,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;
@@ -37426,7 +37580,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++) {
@@ -37434,7 +37588,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();
@@ -45373,8 +45527,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;
         }
@@ -45406,12 +45560,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) {
@@ -45430,7 +45584,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         return "paneldynamic";
     };
     QuestionPanelDynamicModel.prototype.clearOnDeletingContainer = function () {
-        this.panels.forEach(function (panel) {
+        this.panelsCore.forEach(function (panel) {
             panel.clearOnDeletingContainer();
         });
     };
@@ -45586,8 +45740,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;
         },
@@ -45602,7 +45756,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
@@ -45612,6 +45767,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");
         },
@@ -45623,14 +45793,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;
@@ -45639,14 +45809,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);
@@ -45669,14 +45839,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
@@ -45698,7 +45868,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;
@@ -45707,7 +45877,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) {
@@ -45734,7 +45904,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", {
@@ -45991,13 +46161,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);
             });
@@ -46010,24 +46180,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();
@@ -46041,7 +46211,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();
@@ -46089,8 +46259,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);
@@ -46099,12 +46269,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 () {
@@ -46388,8 +46558,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;
             }
@@ -46475,7 +46645,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();
@@ -46547,7 +46717,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) {
@@ -46597,7 +46767,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++;
@@ -46659,7 +46829,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));
     };
@@ -46693,13 +46863,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)
@@ -46716,7 +46886,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;
@@ -46724,15 +46894,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();
         }
@@ -46741,23 +46911,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;
@@ -46831,7 +47001,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) {
@@ -46857,8 +47027,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();
@@ -46874,6 +47044,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");
         }
@@ -46893,28 +47074,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); });
         });
     };
@@ -46948,18 +47144,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;
@@ -46976,7 +47172,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) {
@@ -46993,7 +47189,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;
@@ -47003,7 +47199,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);
@@ -47029,8 +47225,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];
@@ -47043,8 +47239,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;
@@ -47054,7 +47250,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++) {
@@ -47070,7 +47266,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;
@@ -47081,7 +47277,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];
@@ -47102,7 +47298,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]);
@@ -47235,8 +47431,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();
     };
@@ -47244,8 +47440,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();
@@ -47253,8 +47449,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;
@@ -47293,7 +47489,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;
@@ -47341,8 +47537,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;
@@ -47396,8 +47592,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);
         }
     };
@@ -47621,7 +47817,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;
@@ -47637,9 +47833,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++) {
@@ -48110,6 +48306,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"]()
@@ -53784,7 +53983,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 () {
@@ -54264,7 +54469,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())
@@ -54364,6 +54569,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 ||
@@ -54406,6 +54612,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 
 
 /**
@@ -55279,8 +55486,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",
@@ -56325,6 +56532,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;
@@ -57879,11 +58088,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;
         }
@@ -61097,11 +61306,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);
@@ -62288,8 +62499,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);
@@ -62313,7 +62528,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) {
@@ -62415,6 +62630,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)
@@ -62480,7 +62703,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";
@@ -62716,7 +62939,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("survey", [
     {
         name: "checkErrorsMode",
         default: "onNextPage",
-        choices: ["onNextPage", "onValueChanged", "onValueChanging", "onComplete"],
+        choices: ["onNextPage", "onValueChanged", "onComplete"],
     },
     {
         name: "textUpdateMode",
@@ -63336,12 +63559,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;
 }
@@ -65376,7 +65599,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) {