survey-react 1.11.7 → 1.11.9

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.11.7
+ * surveyjs - Survey JavaScript library v1.11.9
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -894,7 +894,7 @@ var BaseAction = /** @class */ (function (_super) {
     });
     Object.defineProperty(BaseAction.prototype, "canShrink", {
         get: function () {
-            return !!this.iconName;
+            return !this.disableShrink && !!this.iconName;
         },
         enumerable: false,
         configurable: true
@@ -2688,6 +2688,9 @@ var Base = /** @class */ (function () {
         }
         if (!!this.arraysInfo) {
             for (var key in this.arraysInfo) {
+                var prop = this.getPropertyByName(key);
+                if (!prop || !prop.isSerializable)
+                    continue;
                 var items = this.getPropertyValue(key);
                 if (!items || !items.length)
                     continue;
@@ -8213,11 +8216,12 @@ var DropdownListModel = /** @class */ (function (_super) {
                 _this.filterString = newValue;
             }
         };
-        _this.qustionPropertyChangedHandler = function (sender, options) {
+        _this.questionPropertyChangedHandler = function (sender, options) {
             _this.onPropertyChangedHandler(sender, options);
         };
         _this.htmlCleanerElement = _global_variables_utils__WEBPACK_IMPORTED_MODULE_1__["DomDocumentHelper"].createElement("div");
-        question.onPropertyChanged.add(_this.qustionPropertyChangedHandler);
+        _this.question.ariaExpanded = "false";
+        question.onPropertyChanged.add(_this.questionPropertyChangedHandler);
         _this.showInputFieldComponent = _this.question.showInputFieldComponent;
         _this.listModel = _this.createListModel();
         _this.updateAfterListModelCreated(_this.listModel);
@@ -8327,6 +8331,7 @@ var DropdownListModel = /** @class */ (function (_super) {
                     _this.resetItemsSettings();
                 }
             }
+            _this.question.ariaExpanded = option.isVisible ? "true" : "false";
             _this.question.processPopupVisiblilityChanged(_this.popupModel, option.isVisible);
         });
     };
@@ -8634,7 +8639,7 @@ var DropdownListModel = /** @class */ (function (_super) {
             return;
         this._popupModel.toggleVisibility();
         this.focusItemOnClickAndPopup();
-        this.question.focus();
+        this.question.focusInputElement(false);
     };
     DropdownListModel.prototype.chevronPointerDown = function (event) {
         if (this._popupModel.isVisible) {
@@ -8802,8 +8807,8 @@ var DropdownListModel = /** @class */ (function (_super) {
     };
     DropdownListModel.prototype.dispose = function () {
         _super.prototype.dispose.call(this);
-        this.question && this.question.onPropertyChanged.remove(this.qustionPropertyChangedHandler);
-        this.qustionPropertyChangedHandler = undefined;
+        this.question && this.question.onPropertyChanged.remove(this.questionPropertyChangedHandler);
+        this.questionPropertyChangedHandler = undefined;
         if (!!this.listModel) {
             this.listModel.dispose();
         }
@@ -9955,8 +9960,8 @@ __webpack_require__.r(__webpack_exports__);
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.11.7";
-ReleaseDate = "" + "2024-07-16";
+Version = "" + "1.11.9";
+ReleaseDate = "" + "2024-07-30";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -17082,7 +17087,11 @@ function getQuestionValueByContext(context, name) {
 }
 function displayValue(params) {
     var q = getQuestionValueByContext(this, params[0]);
-    return q ? q.displayValue : "";
+    if (!q)
+        return "";
+    if (params.length > 1 && !_helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].isValueEmpty(params[1]))
+        return q.getDisplayValue(true, params[1]);
+    return q.displayValue;
 }
 FunctionFactory.Instance.register("displayValue", displayValue);
 function propertyValue(params) {
@@ -19592,9 +19601,10 @@ function property(options) {
                 },
                 set: function (val) {
                     var newValue = processComputedUpdater(this, val);
+                    var prevValue = this.getPropertyValue(key);
                     this.setPropertyValue(key, newValue);
                     if (!!options && options.onSet) {
-                        options.onSet(newValue, this);
+                        options.onSet(newValue, this, prevValue);
                     }
                 },
             });
@@ -20513,13 +20523,10 @@ var JsonMetadataClass = /** @class */ (function () {
         return prop;
     };
     JsonMetadataClass.prototype.addDependsOnProperties = function (prop, dependsOn) {
-        if (Array.isArray(dependsOn)) {
-            for (var i = 0; i < dependsOn.length; i++) {
-                this.addDependsOnProperty(prop, dependsOn[i]);
-            }
-        }
-        else {
-            this.addDependsOnProperty(prop, dependsOn);
+        var dArray = Array.isArray(dependsOn) ? dependsOn : [dependsOn];
+        prop.dependsOn = dArray;
+        for (var i = 0; i < dArray.length; i++) {
+            this.addDependsOnProperty(prop, dArray[i]);
         }
     };
     JsonMetadataClass.prototype.addDependsOnProperty = function (prop, dependsOn) {
@@ -21227,27 +21234,43 @@ var JsonObject = /** @class */ (function () {
         }
         properties = this.addDynamicProperties(obj, jsonObj, properties);
         this.options = options;
+        var processedProps = {};
+        processedProps[JsonObject.typePropertyName] = true;
+        var parentProps = {};
         for (var key in jsonObj) {
-            if (key === JsonObject.typePropertyName)
-                continue;
-            if (key === JsonObject.positionPropertyName) {
-                obj[key] = jsonObj[key];
-                continue;
-            }
-            var property = this.findProperty(properties, key);
-            if (!property) {
-                if (needAddErrors) {
-                    this.addNewError(new JsonUnknownPropertyError(key.toString(), objType), jsonObj, obj);
-                }
-                continue;
-            }
-            this.valueToObj(jsonObj[key], obj, property, jsonObj, options);
+            this.setPropertyValueToObj(jsonObj, obj, key, properties, processedProps, parentProps, objType, needAddErrors, options);
         }
         this.options = undefined;
         if (obj.endLoadingFromJson) {
             obj.endLoadingFromJson();
         }
     };
+    JsonObject.prototype.setPropertyValueToObj = function (jsonObj, obj, key, properties, processedProps, parentProps, objType, needAddErrors, options) {
+        var _this = this;
+        if (processedProps[key])
+            return;
+        if (key === JsonObject.positionPropertyName) {
+            obj[key] = jsonObj[key];
+            return;
+        }
+        var property = this.findProperty(properties, key);
+        if (!property && needAddErrors) {
+            this.addNewError(new JsonUnknownPropertyError(key.toString(), objType), jsonObj, obj);
+        }
+        if (property) {
+            var dProps = property.dependsOn;
+            if (Array.isArray(dProps)) {
+                parentProps[key] = true;
+                dProps.forEach(function (propKey) {
+                    if (!parentProps[propKey]) {
+                        _this.setPropertyValueToObj(jsonObj, obj, propKey, properties, processedProps, parentProps, objType, needAddErrors, options);
+                    }
+                });
+            }
+            this.valueToObj(jsonObj[key], obj, property, jsonObj, options);
+            processedProps[key] = true;
+        }
+    };
     JsonObject.prototype.toJsonObjectCore = function (obj, property, options) {
         if (!obj || !obj.getType)
             return obj;
@@ -30789,7 +30812,6 @@ var InputElementAdapter = /** @class */ (function () {
         this.clickHandler = function (event) {
             if (_this.inputElement.value == _this.inputMaskInstance.getMaskedValue("")) {
                 _this.inputElement.setSelectionRange(0, 0);
-                event.preventDefault();
             }
         };
         this.beforeInputHandler = function (event) {
@@ -33007,6 +33029,82 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("page", [
 }, "panelbase");
 
 
+/***/ }),
+
+/***/ "./src/panel-layout-column.ts":
+/*!************************************!*\
+  !*** ./src/panel-layout-column.ts ***!
+  \************************************/
+/*! exports provided: PanelLayoutColumnModel */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PanelLayoutColumnModel", function() { return PanelLayoutColumnModel; });
+/* harmony import */ var _jsonobject__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./jsonobject */ "./src/jsonobject.ts");
+/* harmony import */ var _base__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./base */ "./src/base.ts");
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+
+
+var PanelLayoutColumnModel = /** @class */ (function (_super) {
+    __extends(PanelLayoutColumnModel, _super);
+    function PanelLayoutColumnModel(width, questionTitleWidth) {
+        var _this = _super.call(this) || this;
+        _this.effectiveWidth = width;
+        _this.questionTitleWidth = questionTitleWidth;
+        return _this;
+    }
+    PanelLayoutColumnModel.prototype.getType = function () {
+        return "panellayoutcolumn";
+    };
+    PanelLayoutColumnModel.prototype.isEmpty = function () {
+        return !this.width && !this.questionTitleWidth;
+    };
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])()
+    ], PanelLayoutColumnModel.prototype, "width", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({
+            onSet: function (newValue, target, prevVal) {
+                if (newValue !== prevVal) {
+                    target.width = newValue;
+                }
+            }
+        })
+    ], PanelLayoutColumnModel.prototype, "effectiveWidth", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])()
+    ], PanelLayoutColumnModel.prototype, "questionTitleWidth", void 0);
+    return PanelLayoutColumnModel;
+}(_base__WEBPACK_IMPORTED_MODULE_1__["Base"]));
+
+_jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("panellayoutcolumn", [
+    { name: "effectiveWidth:number", isSerializable: false, minValue: 0 },
+    { name: "width:number", visible: false },
+    "questionTitleWidth",
+], function (value) { return new PanelLayoutColumnModel(); });
+
+
 /***/ }),
 
 /***/ "./src/panel.ts":
@@ -33035,6 +33133,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _utils_animation__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./utils/animation */ "./src/utils/animation.ts");
 /* harmony import */ var _global_variables_utils__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./global_variables_utils */ "./src/global_variables_utils.ts");
 /* harmony import */ var _page__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./page */ "./src/page.ts");
+/* harmony import */ var _panel_layout_column__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./panel-layout-column */ "./src/panel-layout-column.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -33075,6 +33174,7 @@ var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from
 
 
 
+
 var QuestionRowModel = /** @class */ (function (_super) {
     __extends(QuestionRowModel, _super);
     function QuestionRowModel(panel) {
@@ -33351,10 +33451,18 @@ var PanelModelBase = /** @class */ (function (_super) {
         var _this = _super.call(this, name) || this;
         _this.isQuestionsReady = false;
         _this.questionsValue = new Array();
+        _this._columns = undefined;
+        _this._columnsReady = false;
         _this.rowsAnimation = new _utils_animation__WEBPACK_IMPORTED_MODULE_11__["AnimationGroup"](_this.getRowsAnimationOptions(), function (value) {
             _this.setPropertyValue("visibleRows", value);
         }, function () { return _this.visibleRows; });
         _this.isRandomizing = false;
+        _this.onColumnPropertyValueChangedCallback = function (name, oldValue, newValue, sender, arrayChanges) {
+            if (_this._columnsReady) {
+                _this.updateColumnWidth(_this.layoutColumns);
+                _this.updateRootStyle();
+            }
+        };
         _this.locCountRowUpdates = 0;
         _this.createNewArray("rows", function (el, index) { _this.onAddRow(el); }, function (el) { _this.onRemoveRow(el); });
         _this.createNewArray("visibleRows");
@@ -33395,7 +33503,8 @@ var PanelModelBase = /** @class */ (function (_super) {
             isAnimationEnabled: function () { return _this.animationAllowed; },
             getAnimatedElement: function (row) { return row.getRootElement(); },
             getLeaveOptions: function (_) {
-                return { cssClass: _this.cssClasses.rowFadeOut,
+                return {
+                    cssClass: _this.cssClasses.rowFadeOut,
                     onBeforeRunAnimation: beforeRunAnimation
                 };
             },
@@ -33440,10 +33549,14 @@ var PanelModelBase = /** @class */ (function (_super) {
         this.releaseAnimations();
     };
     PanelModelBase.prototype.endLoadingFromJson = function () {
+        var _this = this;
         _super.prototype.endLoadingFromJson.call(this);
         this.updateDescriptionVisibility(this.description);
         this.markQuestionListDirty();
         this.onRowsChanged();
+        this.layoutColumns.forEach(function (col) {
+            col.onPropertyValueChangedCallback = _this.onColumnPropertyValueChangedCallback;
+        });
     };
     Object.defineProperty(PanelModelBase.prototype, "hasTitle", {
         get: function () {
@@ -34226,6 +34339,51 @@ var PanelModelBase = /** @class */ (function (_super) {
             }
         }
     };
+    PanelModelBase.prototype.calcMaxRowColSpan = function () {
+        var maxRowColSpan = 0;
+        this.rows.forEach(function (row) {
+            var curRowSpan = 0;
+            var userDefinedRow = false;
+            row.elements.forEach(function (el) {
+                if (!!el.width) {
+                    userDefinedRow = true;
+                }
+                curRowSpan += (el.colSpan || 1);
+            });
+            if (!userDefinedRow && curRowSpan > maxRowColSpan)
+                maxRowColSpan = curRowSpan;
+        });
+        return maxRowColSpan;
+    };
+    PanelModelBase.prototype.updateColumnWidth = function (columns) {
+        var remainingSpace = 0, remainingColCount = 0;
+        columns.forEach(function (col) {
+            if (!col.width) {
+                remainingColCount++;
+            }
+            else {
+                remainingSpace += col.width;
+                col.setPropertyValue("effectiveWidth", col.width);
+            }
+        });
+        if (!!remainingColCount) {
+            var oneColumnWidth = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_8__["roundTo2Decimals"])((100 - remainingSpace) / remainingColCount);
+            for (var index = 0; index < columns.length; index++) {
+                if (!columns[index].width) {
+                    columns[index].setPropertyValue("effectiveWidth", oneColumnWidth);
+                }
+            }
+        }
+    };
+    PanelModelBase.prototype.updateColumns = function () {
+        this._columns = undefined;
+        this.updateRootStyle();
+    };
+    PanelModelBase.prototype.updateRootStyle = function () {
+        var _a;
+        _super.prototype.updateRootStyle.call(this);
+        (_a = this.elements) === null || _a === void 0 ? void 0 : _a.forEach(function (el) { return el.updateRootStyle(); });
+    };
     PanelModelBase.prototype.updateCustomWidgets = function () {
         for (var i = 0; i < this.elements.length; i++) {
             this.elements[i].updateCustomWidgets();
@@ -34286,6 +34444,69 @@ var PanelModelBase = /** @class */ (function (_super) {
     PanelModelBase.prototype.getQuestionTitleWidth = function () {
         return this.questionTitleWidth || this.parent && this.parent.getQuestionTitleWidth();
     };
+    Object.defineProperty(PanelModelBase.prototype, "columns", {
+        get: function () {
+            if (!this._columns) {
+                this.generateColumns();
+            }
+            return this._columns || [];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PanelModelBase.prototype.generateColumns = function () {
+        var maxRowColSpan = this.calcMaxRowColSpan();
+        var columns = [].concat(this.layoutColumns);
+        if (maxRowColSpan <= this.layoutColumns.length) {
+            columns = this.layoutColumns.slice(0, maxRowColSpan);
+        }
+        else {
+            for (var index = this.layoutColumns.length; index < maxRowColSpan; index++) {
+                var newCol = new _panel_layout_column__WEBPACK_IMPORTED_MODULE_14__["PanelLayoutColumnModel"]();
+                newCol.onPropertyValueChangedCallback = this.onColumnPropertyValueChangedCallback;
+                columns.push(newCol);
+            }
+        }
+        this._columns = columns;
+        try {
+            this._columnsReady = false;
+            this.updateColumnWidth(columns);
+        }
+        finally {
+            this._columnsReady = true;
+        }
+        this.layoutColumns = columns;
+    };
+    PanelModelBase.prototype.getColumsForElement = function (el) {
+        var row = this.findRowByElement(el);
+        if (!row || !this.survey || !this.survey.gridLayoutEnabled)
+            return [];
+        var lastExpandableElementIndex = row.elements.length - 1;
+        while (lastExpandableElementIndex >= 0) {
+            if (!row.elements[lastExpandableElementIndex].getPropertyValueWithoutDefault("colSpan")) {
+                break;
+            }
+            lastExpandableElementIndex--;
+        }
+        var elementIndex = row.elements.indexOf(el);
+        var startIndex = 0;
+        for (var index = 0; index < elementIndex; index++) {
+            startIndex += row.elements[index].colSpan;
+        }
+        var currentColSpan = el.getPropertyValueWithoutDefault("colSpan");
+        if (!currentColSpan && elementIndex === lastExpandableElementIndex) {
+            var usedSpans = 0;
+            for (var index = 0; index < row.elements.length; index++) {
+                if (index !== lastExpandableElementIndex) {
+                    usedSpans += row.elements[index].colSpan;
+                }
+            }
+            currentColSpan = this.columns.length - usedSpans;
+        }
+        var result = this.columns.slice(startIndex, startIndex + (currentColSpan || 1));
+        el.setPropertyValue("effectiveColSpan", result.length);
+        return result;
+    };
     PanelModelBase.prototype.getStartIndex = function () {
         if (!!this.parent)
             return this.parent.getQuestionStartIndex();
@@ -34370,6 +34591,7 @@ var PanelModelBase = /** @class */ (function (_super) {
             return;
         this.blockAnimations();
         this.setArrayPropertyDirectly("rows", this.buildRows());
+        this.updateColumns();
         this.releaseAnimations();
     };
     PanelModelBase.prototype.blockRowsUpdates = function () {
@@ -34569,6 +34791,7 @@ var PanelModelBase = /** @class */ (function (_super) {
         if (!this.canBuildRows())
             return;
         this.updateRowsRemoveElementFromRow(element, this.findRowByElement(element));
+        this.updateColumns();
     };
     PanelModelBase.prototype.updateRowsRemoveElementFromRow = function (element, row) {
         if (!row || !row.panel)
@@ -34796,6 +35019,7 @@ var PanelModelBase = /** @class */ (function (_super) {
         if (this.wasRendered) {
             element.onFirstRendering();
         }
+        this.updateColumns();
         return true;
     };
     PanelModelBase.prototype.insertElement = function (element, dest, location) {
@@ -34912,6 +35136,7 @@ var PanelModelBase = /** @class */ (function (_super) {
             return false;
         }
         this.elements.splice(index, 1);
+        this.updateColumns();
         return true;
     };
     PanelModelBase.prototype.removeQuestion = function (question) {
@@ -35024,6 +35249,16 @@ var PanelModelBase = /** @class */ (function (_super) {
     PanelModelBase.prototype.getCssError = function (cssClasses) {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]().append(cssClasses.error.root).toString();
     };
+    PanelModelBase.prototype.getSerializableColumnsValue = function () {
+        var tailIndex = -1;
+        for (var index = this.layoutColumns.length - 1; index >= 0; index--) {
+            if (!this.layoutColumns[index].isEmpty()) {
+                tailIndex = index;
+                break;
+            }
+        }
+        return this.layoutColumns.slice(0, tailIndex + 1);
+    };
     PanelModelBase.prototype.dispose = function () {
         _super.prototype.dispose.call(this);
         if (this.rows) {
@@ -35038,6 +35273,9 @@ var PanelModelBase = /** @class */ (function (_super) {
         this.elements.splice(0, this.elements.length);
     };
     PanelModelBase.panelCounter = 100;
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["propertyArray"])()
+    ], PanelModelBase.prototype, "layoutColumns", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: true })
     ], PanelModelBase.prototype, "showTitle", void 0);
@@ -35069,6 +35307,10 @@ var PanelModel = /** @class */ (function (_super) {
             }
         });
         _this.registerPropertyChangedHandlers(["indent", "innerIndent", "rightIndent"], function () { _this.onIndentChanged(); });
+        _this.registerPropertyChangedHandlers(["colSpan"], function () { var _a; (_a = _this.parent) === null || _a === void 0 ? void 0 : _a.updateColumns(); });
+        _this.registerPropertyChangedHandlers(["title"], function () {
+            _this.calcHasTextInTitle();
+        });
         return _this;
     }
     PanelModel.prototype.getType = function () {
@@ -35088,13 +35330,25 @@ var PanelModel = /** @class */ (function (_super) {
         }
         return _super.prototype.getSurvey.call(this, live);
     };
+    Object.defineProperty(PanelModel.prototype, "hasTextInTitle", {
+        get: function () {
+            return this.getPropertyValue("hasTextInTitle");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PanelModel.prototype.calcHasTextInTitle = function () {
+        this.setPropertyValue("hasTextInTitle", !!this.title);
+    };
     PanelModel.prototype.onSurveyLoad = function () {
         _super.prototype.onSurveyLoad.call(this);
         this.onIndentChanged();
+        this.calcHasTextInTitle();
     };
     PanelModel.prototype.onSetData = function () {
         _super.prototype.onSetData.call(this);
         this.onIndentChanged();
+        this.calcHasTextInTitle();
     };
     Object.defineProperty(PanelModel.prototype, "isPanel", {
         get: function () {
@@ -35400,7 +35654,7 @@ var PanelModel = /** @class */ (function (_super) {
         get: function () {
             return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]()
                 .append(this.getCssTitle(this.cssClasses.panel))
-                .append(this.cssClasses.panel.titleHidden, !this.title && this.isDesignMode)
+                .append(this.cssClasses.panel.titleHidden, !this.hasTextInTitle && this.isDesignMode)
                 .toString();
         },
         enumerable: false,
@@ -35504,6 +35758,12 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("panelbase", [
         default: "default",
         choices: ["default", "top", "bottom", "left", "hidden"],
     },
+    {
+        name: "layoutColumns:panellayoutcolumns",
+        className: "panellayoutcolumn", isArray: true,
+        onSerializeValue: function (obj) { return obj.getSerializableColumnsValue(); },
+        visibleIf: function (obj) { return !!obj && !!obj.survey && obj.survey.gridLayoutEnabled; }
+    },
     { name: "title:text", serializationProperty: "locTitle" },
     { name: "description:text", serializationProperty: "locDescription" },
     {
@@ -35530,6 +35790,14 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("panel", [
     "width",
     { name: "minWidth", defaultFunc: function () { return "auto"; } },
     { name: "maxWidth", defaultFunc: function () { return _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].maxWidth; } },
+    {
+        name: "colSpan:number", visible: false,
+        onSerializeValue: function (obj) { return obj.getPropertyValue("colSpan"); },
+    },
+    {
+        name: "effectiveColSpan:number", minValue: 1, isSerializable: false,
+        visibleIf: function (obj) { return !!obj && !!obj.survey && obj.survey.gridLayoutEnabled; }
+    },
     { name: "innerIndent:number", default: 0, choices: [0, 1, 2, 3] },
     { name: "indent:number", default: 0, choices: [0, 1, 2, 3], visible: false },
     {
@@ -38580,9 +38848,10 @@ var ProgressButtons = /** @class */ (function (_super) {
         if (!listContainerElement)
             return;
         var listContainerElements = element.querySelectorAll(".sd-progress-buttons__connector");
-        var circleWidth = this.showItemNumbers ? 17 : 5;
-        var sideCorrection = this.survey.isMobile ? 0 : listContainerElement.children[0].clientWidth;
-        var connectorWidth = (listContainerElement.clientWidth - sideCorrection) / (listContainerElement.children.length - 1) - circleWidth;
+        var circleWidth = this.showItemNumbers ? 36 : 20;
+        // const sideCorrection = this.survey.isMobile ? circleWidth : listContainerElement.children[0].clientWidth;
+        // const connectorWidth = (listContainerElement.clientWidth - sideCorrection) / (listContainerElement.children.length - 1) - circleWidth;
+        var connectorWidth = (listContainerElement.clientWidth - circleWidth) / (listContainerElement.children.length - 1) - circleWidth;
         for (var i = 0; i < listContainerElements.length; i++) {
             listContainerElements[i].style.width = connectorWidth + "px";
         }
@@ -38664,6 +38933,7 @@ var ProgressButtonsResponsivityManager = /** @class */ (function () {
         this.canShowItemTitles = true;
         this.processResponsiveness = function (model, options) {
             _this.viewModel.onUpdateScroller(model.isListContainerHasScroller(_this.element));
+            _this.model.clearConnectorsWidth(_this.element);
             if (!model.showItemTitles) {
                 _this.model.adjustConnectors(_this.element);
                 return;
@@ -38675,7 +38945,6 @@ var ProgressButtonsResponsivityManager = /** @class */ (function () {
                 _this.viewModel.onResize(_this.canShowItemTitles);
                 return;
             }
-            _this.model.clearConnectorsWidth(_this.element);
             if (_this.timer !== undefined) {
                 clearTimeout(_this.timer);
             }
@@ -38780,9 +39049,6 @@ var TriggerExpressionInfo = /** @class */ (function () {
     }
     return TriggerExpressionInfo;
 }());
-function querySelectorIncludingSelf(el, selector) {
-    return el.querySelector(selector) || el != _global_variables_utils__WEBPACK_IMPORTED_MODULE_14__["DomWindowHelper"].getWindow() && el.matches(selector) && el;
-}
 /**
  * A base class for all questions.
  */
@@ -38850,6 +39116,7 @@ var Question = /** @class */ (function (_super) {
             _this.updateQuestionCss();
         });
         _this.registerPropertyChangedHandlers(["isMobile"], function () { _this.onMobileChanged(); });
+        _this.registerPropertyChangedHandlers(["colSpan"], function () { var _a; (_a = _this.parent) === null || _a === void 0 ? void 0 : _a.updateColumns(); });
         return _this;
     }
     Question.getQuestionId = function () {
@@ -39457,18 +39724,31 @@ var Question = /** @class */ (function (_super) {
     Object.defineProperty(Question.prototype, "titleWidth", {
         get: function () {
             if (this.getTitleLocation() === "left") {
-                if (!!this.parent) {
+                var columns = this.parent.getColumsForElement(this);
+                var columnCount = columns.length;
+                if (columnCount !== 0 && !!columns[0].questionTitleWidth)
+                    return columns[0].questionTitleWidth;
+                var percentWidth = this.getPercentQuestionTitleWidth();
+                if (!percentWidth && !!this.parent) {
                     var width = this.parent.getQuestionTitleWidth();
                     if (width && !isNaN(width))
                         width = width + "px";
                     return width;
                 }
+                return (percentWidth / (columnCount || 1)) + "%";
             }
             return undefined;
         },
         enumerable: false,
         configurable: true
     });
+    Question.prototype.getPercentQuestionTitleWidth = function () {
+        var width = !!this.parent && this.parent.getQuestionTitleWidth();
+        if (!!width && width[width.length - 1] === "%") {
+            return parseInt(width);
+        }
+        return undefined;
+    };
     /**
      * Returns title location calculated based on the question's `titleLocation` property and the `questionTitleLocation` property of the question's containers (survey, page, or panel).
      * @see titleLocation
@@ -40152,9 +40432,10 @@ var Question = /** @class */ (function (_super) {
             this.expandAllParents();
             this.survey.scrollElementToTop(this, this, null, this.id, scrollIfVisible);
         }
-        var id = !onError
-            ? this.getFirstInputElementId()
-            : this.getFirstErrorInputElementId();
+        this.focusInputElement(onError);
+    };
+    Question.prototype.focusInputElement = function (onError) {
+        var id = !onError ? this.getFirstInputElementId() : this.getFirstErrorInputElementId();
         if (_survey_element__WEBPACK_IMPORTED_MODULE_2__["SurveyElement"].FocusElement(id)) {
             this.fireCallback(this.focusCallback);
         }
@@ -41725,7 +42006,7 @@ var Question = /** @class */ (function (_super) {
             var scrollableSelector_1 = this.getObservedElementSelector();
             if (!scrollableSelector_1)
                 return;
-            var defaultRootEl = querySelectorIncludingSelf(el, scrollableSelector_1);
+            var defaultRootEl = el.querySelector(scrollableSelector_1);
             if (!defaultRootEl)
                 return;
             var isProcessed_1 = false;
@@ -41737,7 +42018,7 @@ var Question = /** @class */ (function (_super) {
                     isProcessed_1 = false;
                 }
                 var callback = function () {
-                    var rootEl = querySelectorIncludingSelf(el, scrollableSelector_1);
+                    var rootEl = el.querySelector(scrollableSelector_1);
                     if (!requiredWidth_1 && _this.isDefaultRendering()) {
                         requiredWidth_1 = rootEl.scrollWidth;
                     }
@@ -41762,10 +42043,8 @@ var Question = /** @class */ (function (_super) {
             });
             this.onMobileChangedCallback = function () {
                 setTimeout(function () {
-                    var rootEl = querySelectorIncludingSelf(el, scrollableSelector_1);
-                    if (rootEl) {
-                        _this.processResponsiveness(requiredWidth_1, Object(_utils_utils__WEBPACK_IMPORTED_MODULE_11__["getElementWidth"])(rootEl));
-                    }
+                    var rootEl = el.querySelector(scrollableSelector_1);
+                    _this.processResponsiveness(requiredWidth_1, Object(_utils_utils__WEBPACK_IMPORTED_MODULE_11__["getElementWidth"])(rootEl));
                 }, 0);
             };
             this.resizeObserver.observe(el);
@@ -41886,13 +42165,6 @@ var Question = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Question.prototype, "ariaExpanded", {
-        get: function () {
-            return null;
-        },
-        enumerable: false,
-        configurable: true
-    });
     Object.defineProperty(Question.prototype, "ariaErrormessage", {
         get: function () {
             if (this.isNewA11yStructure)
@@ -41979,6 +42251,9 @@ var Question = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], Question.prototype, "forceIsInputReadOnly", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
+    ], Question.prototype, "ariaExpanded", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ localizable: true, onSet: function (val, target) { return target.calcRenderedCommentPlaceholder(); } })
     ], Question.prototype, "commentPlaceholder", void 0);
@@ -42013,6 +42288,14 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("question", [
     { name: "width" },
     { name: "minWidth", defaultFunc: function () { return _settings__WEBPACK_IMPORTED_MODULE_8__["settings"].minWidth; } },
     { name: "maxWidth", defaultFunc: function () { return _settings__WEBPACK_IMPORTED_MODULE_8__["settings"].maxWidth; } },
+    {
+        name: "colSpan:number", visible: false,
+        onSerializeValue: function (obj) { return obj.getPropertyValue("colSpan"); },
+    },
+    {
+        name: "effectiveColSpan:number", minValue: 1, isSerializable: false,
+        visibleIf: function (obj) { return !!obj && !!obj.survey && obj.survey.gridLayoutEnabled; }
+    },
     { name: "startWithNewLine:boolean", default: true, layout: "row" },
     { name: "indent:number", default: 0, choices: [0, 1, 2, 3], layout: "row" },
     {
@@ -42398,7 +42681,6 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         _this.isUpdatingChoicesDependedQuestions = false;
         _this.headItemsCount = 0;
         _this.footItemsCount = 0;
-        _this.allowMultiColumns = true;
         _this.prevIsOtherSelected = false;
         _this.noneItemValue = _this.createDefaultItem(_settings__WEBPACK_IMPORTED_MODULE_9__["settings"].noneItemValue, "noneText", "noneItemText");
         _this.refuseItemValue = _this.createDefaultItem(_settings__WEBPACK_IMPORTED_MODULE_9__["settings"].refuseItemValue, "refuseText", "refuseItemText");
@@ -44419,23 +44701,9 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    QuestionSelectBase.prototype.getObservedElementSelector = function () {
-        return Object(_utils_utils__WEBPACK_IMPORTED_MODULE_11__["classesToSelector"])(this.cssClasses.mainRoot);
-    };
-    QuestionSelectBase.prototype.supportResponsiveness = function () {
-        return true;
-    };
-    QuestionSelectBase.prototype.onBeforeSetCompactRenderer = function () {
-        _super.prototype.onBeforeSetDesktopRenderer.call(this);
-        this.allowMultiColumns = false;
-    };
-    QuestionSelectBase.prototype.onBeforeSetDesktopRenderer = function () {
-        _super.prototype.onBeforeSetDesktopRenderer.call(this);
-        this.allowMultiColumns = true;
-    };
     Object.defineProperty(QuestionSelectBase.prototype, "hasColumns", {
         get: function () {
-            return !this.isMobile && this.allowMultiColumns &&
+            return !this.isMobile &&
                 (this.getCurrentColCount() > 1);
         },
         enumerable: false,
@@ -44593,9 +44861,6 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ localizable: true })
     ], QuestionSelectBase.prototype, "otherPlaceholder", void 0);
-    __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])()
-    ], QuestionSelectBase.prototype, "allowMultiColumns", void 0);
     return QuestionSelectBase;
 }(_question__WEBPACK_IMPORTED_MODULE_2__["Question"]));
 
@@ -47049,6 +47314,9 @@ var QuestionCustomModelBase = /** @class */ (function (_super) {
     QuestionCustomModelBase.prototype.findQuestionByName = function (name) {
         return !!this.data ? this.data.findQuestionByName(name) : null;
     };
+    QuestionCustomModelBase.prototype.getEditingSurveyElement = function () {
+        return undefined;
+    };
     //IPanel
     QuestionCustomModelBase.prototype.addElement = function (element, index) { };
     QuestionCustomModelBase.prototype.removeElement = function (element) {
@@ -47060,6 +47328,10 @@ var QuestionCustomModelBase = /** @class */ (function (_super) {
     QuestionCustomModelBase.prototype.getQuestionTitleWidth = function () {
         return undefined;
     };
+    QuestionCustomModelBase.prototype.getColumsForElement = function (el) {
+        return [];
+    };
+    QuestionCustomModelBase.prototype.updateColumns = function () { };
     QuestionCustomModelBase.prototype.getQuestionStartIndex = function () {
         return this.getStartIndex();
     };
@@ -47427,6 +47699,40 @@ var QuestionCompositeModel = /** @class */ (function (_super) {
             this.contentPanel.updateElementCss(reNew);
         }
     };
+    QuestionCompositeModel.prototype.dispose = function () {
+        this.unConnectEditingObj();
+        _super.prototype.dispose.call(this);
+    };
+    QuestionCompositeModel.prototype.updateEditingObj = function () {
+        var _this = this;
+        var _a;
+        var obj = (_a = this.data) === null || _a === void 0 ? void 0 : _a.getEditingSurveyElement();
+        if (!obj)
+            return undefined;
+        var newObj = obj[this.getValueName()];
+        if (!!newObj && !newObj.onPropertyChanged) {
+            newObj = undefined;
+        }
+        if (newObj !== this.editingObjValue) {
+            this.unConnectEditingObj();
+            this.editingObjValue = newObj;
+            if (!!newObj) {
+                this.onEditingObjPropertyChanged = function (sender, options) {
+                    _this.setNewValueIntoQuestion(options.name, _this.editingObjValue[options.name]);
+                };
+                newObj.onPropertyChanged.add(this.onEditingObjPropertyChanged);
+            }
+        }
+        return this.editingObjValue;
+    };
+    QuestionCompositeModel.prototype.unConnectEditingObj = function () {
+        if (!!this.editingObjValue && !this.editingObjValue.isDisposed) {
+            this.editingObjValue.onPropertyChanged.remove(this.onEditingObjPropertyChanged);
+        }
+    };
+    QuestionCompositeModel.prototype.getEditingSurveyElement = function () {
+        return this.editingObjValue;
+    };
     QuestionCompositeModel.prototype.getTextProcessor = function () {
         return this.textProcessing;
     };
@@ -47486,6 +47792,11 @@ var QuestionCompositeModel = /** @class */ (function (_super) {
         }
         _super.prototype.onReadOnlyChanged.call(this);
     };
+    QuestionCompositeModel.prototype.updateValueFromSurvey = function (newValue, clearData) {
+        if (clearData === void 0) { clearData = false; }
+        this.updateEditingObj();
+        _super.prototype.updateValueFromSurvey.call(this, newValue, clearData);
+    };
     QuestionCompositeModel.prototype.onSurveyLoad = function () {
         this.isSettingValOnLoading = true;
         if (!!this.contentPanel) {
@@ -47657,7 +47968,7 @@ var QuestionCompositeModel = /** @class */ (function (_super) {
             var key = questions[i].getValueName();
             var val = !!newValue ? newValue[key] : undefined;
             var q = questions[i];
-            if (!this.isTwoValueEquals(q.value, val)) {
+            if (!this.isTwoValueEquals(q.value, val) && (val !== undefined || !q.isEmpty())) {
                 q.value = val;
             }
         }
@@ -48022,14 +48333,6 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(QuestionDropdownModel.prototype, "ariaExpanded", {
-        get: function () {
-            var popupModel = this.popupModel;
-            return !!popupModel && popupModel.isVisible ? "true" : "false";
-        },
-        enumerable: false,
-        configurable: true
-    });
     QuestionDropdownModel.prototype.onOpenedCallBack = function () {
         this.onOpened.fire(this, { question: this, choices: this.choices });
     };
@@ -48077,6 +48380,12 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
         this.lastSelectedItemValue = null;
         (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.clear();
     };
+    QuestionDropdownModel.prototype.afterRenderCore = function (el) {
+        _super.prototype.afterRenderCore.call(this, el);
+        if (!!this.dropdownListModelValue) {
+            this.dropdownListModelValue.clear();
+        }
+    };
     QuestionDropdownModel.prototype.onClick = function (e) {
         !!this.onOpenedCallBack && this.onOpenedCallBack();
     };
@@ -49381,9 +49690,11 @@ var QuestionFileModel = /** @class */ (function (_super) {
     });
     QuestionFileModel.prototype.chooseFile = function (event) {
         var _this = this;
-        if (!_global_variables_utils__WEBPACK_IMPORTED_MODULE_12__["DomDocumentHelper"].isAvailable())
+        if (!this.rootElement)
+            return;
+        var inputElement = this.rootElement.querySelector("#" + this.inputId);
+        if (!inputElement)
             return;
-        var inputElement = _global_variables_utils__WEBPACK_IMPORTED_MODULE_12__["DomDocumentHelper"].getDocument().getElementById(this.inputId);
         event.preventDefault();
         event.stopImmediatePropagation();
         if (inputElement) {
@@ -49930,9 +50241,11 @@ var QuestionFileModel = /** @class */ (function (_super) {
         return false;
     };
     QuestionFileModel.prototype.canDragDrop = function () { return !this.isInputReadOnly && this.currentMode !== "camera" && !this.isPlayingVideo; };
-    QuestionFileModel.prototype.afterRender = function (el) {
+    QuestionFileModel.prototype.afterRenderQuestionElement = function (el) {
         this.rootElement = el;
-        _super.prototype.afterRender.call(this, el);
+    };
+    QuestionFileModel.prototype.beforeDestroyQuestionElement = function (el) {
+        this.rootElement = undefined;
     };
     QuestionFileModel.prototype.clearFilesCore = function () {
         if (this.rootElement) {
@@ -52879,6 +53192,7 @@ var MatrixDropdownRowModelBase = /** @class */ (function () {
         var survey = this.getSurvey();
         return !!survey ? survey.getQuestionByName(name) : null;
     };
+    MatrixDropdownRowModelBase.prototype.getEditingSurveyElement = function () { return undefined; };
     MatrixDropdownRowModelBase.prototype.setValueCore = function (name, newColumnValue, isComment) {
         if (this.isSettingValue)
             return;
@@ -56226,30 +56540,34 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("matrixdropdownc
     },
     {
         name: "totalType",
+        visibleIf: function (obj) { return !obj.isShowInMultipleColumns; },
         default: "none",
         choices: ["none", "sum", "count", "min", "max", "avg"],
     },
-    "totalExpression:expression",
-    { name: "totalFormat", serializationProperty: "locTotalFormat" },
+    { name: "totalExpression:expression", visibleIf: function (obj) { return !obj.isShowInMultipleColumns; } },
+    { name: "totalFormat", serializationProperty: "locTotalFormat", visibleIf: function (obj) { return obj.hasTotal; } },
     {
         name: "totalDisplayStyle",
+        visibleIf: function (obj) { return obj.hasTotal; },
         default: "none",
         choices: ["none", "decimal", "currency", "percent"],
     },
     {
         name: "totalAlignment",
+        visibleIf: function (obj) { return obj.hasTotal; },
         default: "auto",
         choices: ["auto", "left", "center", "right"],
     },
     {
         name: "totalCurrency",
+        visibleIf: function (obj) { return obj.hasTotal; },
         choices: function () {
             return Object(_question_expression__WEBPACK_IMPORTED_MODULE_2__["getCurrecyCodes"])();
         },
         default: "USD",
     },
-    { name: "totalMaximumFractionDigits:number", default: -1 },
-    { name: "totalMinimumFractionDigits:number", default: -1 },
+    { name: "totalMaximumFractionDigits:number", default: -1, visibleIf: function (obj) { return obj.hasTotal; } },
+    { name: "totalMinimumFractionDigits:number", default: -1, visibleIf: function (obj) { return obj.hasTotal; } },
     { name: "renderAs", default: "default", visible: false },
 ], function () {
     return new MatrixDropdownColumn("");
@@ -59186,6 +59504,7 @@ var MultipleTextItemModel = /** @class */ (function (_super) {
         var survey = this.getSurvey();
         return !!survey ? survey.getQuestionByName(name) : null;
     };
+    MultipleTextItemModel.prototype.getEditingSurveyElement = function () { return undefined; };
     //IValidatorOwner
     MultipleTextItemModel.prototype.getValidatorTitle = function () {
         return this.title;
@@ -59689,6 +60008,10 @@ var QuestionMultipleTextModel = /** @class */ (function (_super) {
     QuestionMultipleTextModel.prototype.getQuestionTitleWidth = function () {
         return undefined;
     };
+    QuestionMultipleTextModel.prototype.getColumsForElement = function (el) {
+        return [];
+    };
+    QuestionMultipleTextModel.prototype.updateColumns = function () { };
     QuestionMultipleTextModel.prototype.getQuestionStartIndex = function () {
         return this.getStartIndex();
     };
@@ -60115,6 +60438,7 @@ var QuestionPanelDynamicItem = /** @class */ (function () {
         var survey = this.getSurvey();
         return !!survey ? survey.getQuestionByName(name) : null;
     };
+    QuestionPanelDynamicItem.prototype.getEditingSurveyElement = function () { return undefined; };
     QuestionPanelDynamicItem.prototype.getAllValues = function () {
         return this.data.getPanelItemData(this);
     };
@@ -64823,17 +65147,6 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     QuestionRatingModel.prototype.getDesktopRenderAs = function () {
         return (this.displayMode == "dropdown") ? "dropdown" : "default";
     };
-    Object.defineProperty(QuestionRatingModel.prototype, "ariaExpanded", {
-        get: function () {
-            var _a;
-            var popupModel = (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.popupModel;
-            if (!popupModel)
-                return null;
-            return popupModel.isVisible ? "true" : "false";
-        },
-        enumerable: false,
-        configurable: true
-    });
     Object.defineProperty(QuestionRatingModel.prototype, "dropdownListModel", {
         get: function () {
             if (this.renderAs === "dropdown") {
@@ -65792,14 +66105,6 @@ var QuestionTagboxModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(QuestionTagboxModel.prototype, "ariaExpanded", {
-        get: function () {
-            var popupModel = this.popupModel;
-            return !!popupModel && popupModel.isVisible ? "true" : "false";
-        },
-        enumerable: false,
-        configurable: true
-    });
     QuestionTagboxModel.prototype.getControlClass = function () {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_2__["CssClassBuilder"]()
             .append(this.cssClasses.control)
@@ -66053,6 +66358,7 @@ var QuestionTextModel = /** @class */ (function (_super) {
             _this.updateRemainingCharacterCounter(event.target.value);
         };
         _this.onKeyDown = function (event) {
+            _this.updateDateValidationMessage(event);
             _this.onKeyDownPreprocess && _this.onKeyDownPreprocess(event);
             if (_this.isInputTextUpdate) {
                 _this._isWaitingForEnter = event.keyCode === 229;
@@ -66060,6 +66366,7 @@ var QuestionTextModel = /** @class */ (function (_super) {
             _this.onTextKeyDownHandler(event);
         };
         _this.onChange = function (event) {
+            _this.updateDateValidationMessage(event);
             var elementIsFocused = event.target === _settings__WEBPACK_IMPORTED_MODULE_6__["settings"].environment.root.activeElement;
             if (elementIsFocused) {
                 if (_this.isInputTextUpdate) {
@@ -66491,6 +66798,9 @@ var QuestionTextModel = /** @class */ (function (_super) {
             };
             errors.push(maxError);
         }
+        if (!!this.dateValidationMessage) {
+            errors.push(new _error__WEBPACK_IMPORTED_MODULE_5__["CustomError"](this.dateValidationMessage, this));
+        }
         var valName = this.getValidatorTitle();
         var emailValidator = new _validator__WEBPACK_IMPORTED_MODULE_4__["EmailValidator"]();
         if (this.inputType === "email" &&
@@ -66641,6 +66951,9 @@ var QuestionTextModel = /** @class */ (function (_super) {
     };
     QuestionTextModel.prototype.setNewValue = function (newValue) {
         newValue = this.correctValueType(newValue);
+        if (!!newValue) {
+            this.dateValidationMessage = undefined;
+        }
         _super.prototype.setNewValue.call(this, newValue);
     };
     QuestionTextModel.prototype.correctValueType = function (newValue) {
@@ -66691,6 +67004,9 @@ var QuestionTextModel = /** @class */ (function (_super) {
             this.inputValue = newValue;
         }
     };
+    QuestionTextModel.prototype.updateDateValidationMessage = function (event) {
+        this.dateValidationMessage = this.isDateInputType && !!event.target ? event.target.validationMessage : undefined;
+    };
     QuestionTextModel.prototype.afterRenderQuestionElement = function (el) {
         if (!!el) {
             this.input = el instanceof HTMLInputElement ? el : el.querySelector("input");
@@ -66889,7 +67205,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("text", [
         name: "maskSettings:masksettings",
         className: "masksettings",
         visibleIndex: 1,
-        dependsOn: "inputType",
+        dependsOn: ["inputType", "maskType"],
         visibleIf: function (obj) {
             return obj.inputType === "text" || obj.inputType === "tel";
         },
@@ -68822,6 +69138,18 @@ var List = /** @class */ (function (_super) {
             this.model.initListContainerHtmlElement(this.listContainerRef.current);
         }
     };
+    List.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _a;
+        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
+        if (this.model !== prevProps.model) {
+            if (this.model && !!((_a = this.listContainerRef) === null || _a === void 0 ? void 0 : _a.current)) {
+                this.model.initListContainerHtmlElement(this.listContainerRef.current);
+            }
+            if (prevProps.model) {
+                prevProps.model.initListContainerHtmlElement(undefined);
+            }
+        }
+    };
     List.prototype.componentWillUnmount = function () {
         _super.prototype.componentWillUnmount.call(this);
         if (!!this.model) {
@@ -70977,7 +71305,7 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.question.inputId, className: this.question.getControlClass(), tabIndex: dropdownListModel.noTabIndex ? undefined : 0, 
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            disabled: this.question.isDisabledAttr, required: this.question.isRequired, onKeyDown: this.keyhandler, onBlur: this.blur, role: this.question.ariaRole, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage, "aria-expanded": this.question.ariaExpanded === null ? undefined : this.question.ariaExpanded === "true", "aria-controls": dropdownListModel.listElementId, "aria-activedescendant": dropdownListModel.ariaActivedescendant },
+            disabled: this.question.isDisabledAttr, required: this.question.isRequired, onKeyDown: this.keyhandler, onBlur: this.blur, role: this.question.ariaRole, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage, "aria-expanded": this.question.ariaExpanded, "aria-controls": dropdownListModel.listElementId, "aria-activedescendant": dropdownListModel.ariaActivedescendant },
             dropdownListModel.showHintPrefix ?
                 (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.hintPrefix },
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, dropdownListModel.hintStringPrefix))) : null,
@@ -70987,7 +71315,7 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { style: { visibility: "hidden" }, "data-bind": "text: model.filterString" }, dropdownListModel.inputStringRendered),
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, dropdownListModel.hintStringSuffix))) : null,
                 valueElement,
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), ref: function (element) { return (_this.inputElement = element); }, className: this.question.cssClasses.filterStringInput, role: dropdownListModel.filterStringEnabled ? this.question.ariaRole : undefined, "aria-expanded": this.question.ariaExpanded === null ? undefined : this.question.ariaExpanded === "true", "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-controls": dropdownListModel.listElementId, "aria-activedescendant": dropdownListModel.ariaActivedescendant, placeholder: dropdownListModel.placeholderRendered, readOnly: dropdownListModel.filterReadOnly ? true : undefined, tabIndex: dropdownListModel.noTabIndex ? undefined : -1, disabled: this.question.isDisabledAttr, inputMode: dropdownListModel.inputMode, onChange: function (e) { onInputChange(e); }, onBlur: this.blur, onFocus: this.focus })),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), ref: function (element) { return (_this.inputElement = element); }, className: this.question.cssClasses.filterStringInput, role: dropdownListModel.filterStringEnabled ? this.question.ariaRole : undefined, "aria-expanded": this.question.ariaExpanded, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-controls": dropdownListModel.listElementId, "aria-activedescendant": dropdownListModel.ariaActivedescendant, placeholder: dropdownListModel.placeholderRendered, readOnly: dropdownListModel.filterReadOnly ? true : undefined, tabIndex: dropdownListModel.noTabIndex ? undefined : -1, disabled: this.question.isDisabledAttr, inputMode: dropdownListModel.inputMode, onChange: function (e) { onInputChange(e); }, onBlur: this.blur, onFocus: this.focus })),
             this.createClearButton()));
     };
     SurveyQuestionDropdownBase.prototype.createClearButton = function () {
@@ -73331,7 +73659,7 @@ var SurveyQuestion = /** @class */ (function (_super) {
         var rootStyle = question.getRootStyle();
         var questionContent = this.wrapQuestionContent(this.renderQuestionContent());
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null,
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { ref: this.rootRef, id: question.id, className: question.getRootCss(), style: rootStyle, role: question.ariaRole, "aria-required": this.question.ariaRequired, "aria-invalid": this.question.ariaInvalid, "aria-labelledby": question.ariaLabelledBy, "aria-describedby": question.ariaDescribedBy, "aria-expanded": question.ariaExpanded === null ? undefined : question.ariaExpanded === "true" },
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { ref: this.rootRef, id: question.id, className: question.getRootCss(), style: rootStyle, role: question.ariaRole, "aria-required": this.question.ariaRequired, "aria-invalid": this.question.ariaInvalid, "aria-labelledby": question.ariaLabelledBy, "aria-describedby": question.ariaDescribedBy, "aria-expanded": question.ariaExpanded },
                 errorsAboveQuestion,
                 headerTop,
                 questionContent,
@@ -74528,19 +74856,19 @@ var SurveyQuestionElementBase = /** @class */ (function (_super) {
     SurveyQuestionElementBase.prototype.componentWillUnmount = function () {
         _super.prototype.componentWillUnmount.call(this);
         if (!!this.questionBase) {
-            var el = this.control;
-            this.questionBase.beforeDestroyQuestionElement(el);
-            if (!!el) {
-                el.removeAttribute("data-rendered");
+            var contentElement = this.content || this.control;
+            this.questionBase.beforeDestroyQuestionElement(contentElement);
+            if (!!contentElement) {
+                contentElement.removeAttribute("data-rendered");
             }
         }
     };
     SurveyQuestionElementBase.prototype.updateDomElement = function () {
-        var el = this.control;
-        if (!!el) {
-            if (el.getAttribute("data-rendered") !== "r") {
-                el.setAttribute("data-rendered", "r");
-                this.questionBase.afterRenderQuestionElement(el);
+        var contentElement = this.content || this.control;
+        if (!!contentElement) {
+            if (contentElement.getAttribute("data-rendered") !== "r") {
+                contentElement.setAttribute("data-rendered", "r");
+                this.questionBase.afterRenderQuestionElement(contentElement);
             }
         }
     };
@@ -74598,6 +74926,11 @@ var SurveyQuestionElementBase = /** @class */ (function (_super) {
             this.control = element;
         }
     };
+    SurveyQuestionElementBase.prototype.setContent = function (element) {
+        if (!!element) {
+            this.content = element;
+        }
+    };
     return SurveyQuestionElementBase;
 }(SurveyElementBase));
 
@@ -74883,7 +75216,7 @@ var SurveyQuestionFile = /** @class */ (function (_super) {
         else {
             fileInput = null;
         }
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.fileRootCss },
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.fileRootCss, ref: function (el) { return (_this.setContent(el)); } },
             fileInput,
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.dragArea, onDrop: this.question.onDrop, onDragOver: this.question.onDragOver, onDragLeave: this.question.onDragLeave, onDragEnter: this.question.onDragEnter },
                 fileDecorator,
@@ -76893,7 +77226,7 @@ var SurveyQuestionTagbox = /** @class */ (function (_super) {
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.question.inputId, className: this.question.getControlClass(), tabIndex: dropdownListModel.noTabIndex ? undefined : 0, 
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            disabled: this.question.isInputReadOnly, required: this.question.isRequired, onKeyDown: this.keyhandler, onBlur: this.blur, role: this.question.ariaRole, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage, "aria-expanded": this.question.ariaExpanded === null ? undefined : this.question.ariaExpanded === "true", "aria-controls": dropdownListModel.listElementId, "aria-activedescendant": dropdownListModel.ariaActivedescendant },
+            disabled: this.question.isInputReadOnly, required: this.question.isRequired, onKeyDown: this.keyhandler, onBlur: this.blur, role: this.question.ariaRole, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage, "aria-expanded": this.question.ariaExpanded, "aria-controls": dropdownListModel.listElementId, "aria-activedescendant": dropdownListModel.ariaActivedescendant },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.controlValue },
                 items,
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_tagbox_filter__WEBPACK_IMPORTED_MODULE_4__["TagboxFilterString"], { model: dropdownMultiSelectListModel, question: this.question })),
@@ -77767,7 +78100,7 @@ var TagboxFilterString = /** @class */ (function (_super) {
                     (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.hintSuffix },
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { style: { visibility: "hidden" }, "data-bind": "text: model.filterString" }, this.model.inputStringRendered),
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, this.model.hintStringSuffix))) : null,
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), inputMode: this.model.inputMode, ref: function (element) { return (_this.inputElement = element); }, className: this.question.cssClasses.filterStringInput, disabled: this.question.isInputReadOnly, readOnly: this.model.filterReadOnly ? true : undefined, size: !this.model.inputStringRendered ? 1 : undefined, role: this.model.filterStringEnabled ? this.question.ariaRole : undefined, "aria-expanded": this.question.ariaExpanded === null ? undefined : this.question.ariaExpanded === "true", "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-controls": this.model.listElementId, "aria-activedescendant": this.model.ariaActivedescendant, placeholder: this.model.filterStringPlaceholder, onKeyDown: function (e) { _this.keyhandler(e); }, onChange: function (e) { _this.onChange(e); }, onBlur: function (e) { _this.onBlur(e); }, onFocus: function (e) { _this.onFocus(e); } }))));
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), inputMode: this.model.inputMode, ref: function (element) { return (_this.inputElement = element); }, className: this.question.cssClasses.filterStringInput, disabled: this.question.isInputReadOnly, readOnly: this.model.filterReadOnly ? true : undefined, size: !this.model.inputStringRendered ? 1 : undefined, role: this.model.filterStringEnabled ? this.question.ariaRole : undefined, "aria-expanded": this.question.ariaExpanded, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-controls": this.model.listElementId, "aria-activedescendant": this.model.ariaActivedescendant, placeholder: this.model.filterStringPlaceholder, onKeyDown: function (e) { _this.keyhandler(e); }, onChange: function (e) { _this.onChange(e); }, onBlur: function (e) { _this.onBlur(e); }, onFocus: function (e) { _this.onFocus(e); } }))));
     };
     return TagboxFilterString;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_3__["SurveyElementBase"]));
@@ -78646,6 +78979,35 @@ var settings = {
             "#": /[a-zA-Z0-9]/
         }
     },
+    /**
+     * Specifies whether to store date-time values in the following format: `"YYYY-MM-DDThh:mm:ss.sssZ"`. Applies only to form fields with [`inputType`](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model#inputType) set to `"datetime-local"`.
+     *
+     * Default value: `false`
+     *
+     * If you enable this setting, date-time values are converted from local time to UTC when they are saved to the survey's [`data`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#data) object, while the question values remain in local time. Therefore, when you specify default values using a question's [`defaultValue`](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model#defaultValue) property, you need to use local time, but if you specify them using the `data` object, use a UTC date-time value in the following format: `"YYYY-MM-DDThh:mm:ss.sssZ"`.
+     *
+     * ```js
+     * const surveyJson = {
+     *   "elements": [{
+     *     "name": "datetime",
+     *     "type": "text",
+     *     "title": "Select a date and time",
+     *     "inputType": "datetime-local",
+     *     "defaultValue": "2024-07-16T12:15:00" // Local date-time value
+     *   }]
+     * }
+     * ```
+     *
+     * ```js
+     * import { Model } from "survey-core";
+     * const surveyJson = { ... }
+     * const survey = new Model(surveyJson);
+     *
+     * survey.data = {
+     *   datetime: "2024-07-16T12:15:00.000Z" // UTC date-time value
+     * }
+     * ```
+     */
     storeUtcDates: false
 };
 
@@ -79339,6 +79701,7 @@ var SurveyElement = /** @class */ (function (_super) {
         _this.registerPropertyChangedHandlers(["isReadOnly"], function () { _this.onReadOnlyChanged(); });
         _this.registerPropertyChangedHandlers(["errors"], function () { _this.updateVisibleErrors(); });
         _this.registerPropertyChangedHandlers(["isSingleInRow"], function () { _this.updateElementCss(false); });
+        _this.registerPropertyChangedHandlers(["minWidth", "maxWidth", "renderWidth", "allowRootStyle", "parent"], function () { _this.updateRootStyle(); });
         return _this;
     }
     SurveyElement.getProgressInfoByElements = function (children, isRequired) {
@@ -79433,6 +79796,16 @@ var SurveyElement = /** @class */ (function (_super) {
         }
         return false;
     };
+    Object.defineProperty(SurveyElement.prototype, "colSpan", {
+        get: function () {
+            return this.getPropertyValue("colSpan", 1);
+        },
+        set: function (val) {
+            this.setPropertyValue("colSpan", val);
+        },
+        enumerable: false,
+        configurable: true
+    });
     SurveyElement.prototype.onPropertyValueChanged = function (name, oldValue, newValue) {
         _super.prototype.onPropertyValueChanged.call(this, name, oldValue, newValue);
         if (name === "state") {
@@ -80278,12 +80651,24 @@ var SurveyElement = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(SurveyElement.prototype, "rootStyle", {
-        get: function () {
-            var style = {};
+    SurveyElement.prototype.updateRootStyle = function () {
+        var style = {};
+        var _width;
+        if (!!this.parent) {
+            var columns = this.parent.getColumsForElement(this);
+            _width = columns.reduce(function (sum, col) { return col.effectiveWidth + sum; }, 0);
+            if (!!_width && _width !== 100) {
+                style["flexGrow"] = 0;
+                style["flexShrink"] = 0;
+                style["flexBasis"] = _width + "%";
+                style["minWidth"] = undefined;
+                style["maxWidth"] = undefined;
+            }
+        }
+        if (Object.keys(style).length == 0) {
             var minWidth = this.minWidth;
             if (minWidth != "auto")
-                minWidth = "min(100%, " + this.minWidth + ")";
+                minWidth = "min(100%, " + minWidth + ")";
             if (this.allowRootStyle && this.renderWidth) {
                 // style["width"] = this.renderWidth;
                 style["flexGrow"] = 1;
@@ -80292,11 +80677,9 @@ var SurveyElement = /** @class */ (function (_super) {
                 style["minWidth"] = minWidth;
                 style["maxWidth"] = this.maxWidth;
             }
-            return style;
-        },
-        enumerable: false,
-        configurable: true
-    });
+        }
+        this.rootStyle = style;
+    };
     SurveyElement.prototype.isContainsSelection = function (el) {
         var elementWithSelection = undefined;
         var _document = _global_variables_utils__WEBPACK_IMPORTED_MODULE_9__["DomDocumentHelper"].getDocument();
@@ -80450,7 +80833,8 @@ var SurveyElement = /** @class */ (function (_super) {
             },
             getLeaveOptions: function () {
                 var cssClasses = _this.isPanel ? _this.cssClasses.panel : _this.cssClasses;
-                return { cssClass: cssClasses.contentFadeOut,
+                return {
+                    cssClass: cssClasses.contentFadeOut,
                     onBeforeRunAnimation: beforeRunAnimation,
                     onAfterRunAnimation: afterRunAnimation
                 };
@@ -80506,6 +80890,13 @@ var SurveyElement = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: false })
     ], SurveyElement.prototype, "isDragMe", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({
+            onSet: function (newValue, target) {
+                target.colSpan = newValue;
+            }
+        })
+    ], SurveyElement.prototype, "effectiveColSpan", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: false })
     ], SurveyElement.prototype, "hasVisibleErrors", void 0);
@@ -80515,6 +80906,9 @@ var SurveyElement = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: true })
     ], SurveyElement.prototype, "allowRootStyle", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])()
+    ], SurveyElement.prototype, "rootStyle", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])()
     ], SurveyElement.prototype, "_renderedIsExpanded", void 0);
@@ -81413,8 +81807,8 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.isNavigationButtonPressed = false;
         _this.mouseDownPage = null;
         _this.isCalculatingProgressText = false;
-        _this.isFirstPageRendering = true;
         _this.isCurrentPageRendering = true;
+        _this.isCurrentPageRendered = undefined;
         _this.isTriggerIsRunning = false;
         _this.triggerValues = null;
         _this.triggerKeys = null;
@@ -83856,7 +84250,8 @@ var SurveyModel = /** @class */ (function (_super) {
         }
         if (data) {
             for (var key in data) {
-                this.setDataValueCore(this.valuesHash, key, data[key]);
+                var dataKey = typeof key === "string" ? key.trim() : key;
+                this.setDataValueCore(this.valuesHash, dataKey, data[key]);
             }
         }
         this.updateAllQuestionsValue(clearData);
@@ -83956,9 +84351,7 @@ var SurveyModel = /** @class */ (function (_super) {
             var _this = this;
             if (this.editingObj == val)
                 return;
-            if (!!this.editingObj) {
-                this.editingObj.onPropertyChanged.remove(this.onEditingObjPropertyChanged);
-            }
+            this.unConnectEditingObj();
             this.editingObjValue = val;
             if (this.isDisposed)
                 return;
@@ -83984,6 +84377,11 @@ var SurveyModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    SurveyModel.prototype.unConnectEditingObj = function () {
+        if (!!this.editingObj && !this.editingObj.isDisposed) {
+            this.editingObj.onPropertyChanged.remove(this.onEditingObjPropertyChanged);
+        }
+    };
     Object.defineProperty(SurveyModel.prototype, "isEditingSurveyElement", {
         get: function () {
             return !!this.editingObj;
@@ -84661,6 +85059,9 @@ var SurveyModel = /** @class */ (function (_super) {
                 oldValue.passed = true;
             }
         }
+        if (this.isCurrentPageRendered === true) {
+            this.isCurrentPageRendered = false;
+        }
         this.onCurrentPageChanged.fire(this, options);
     };
     SurveyModel.prototype.notifyQuestionsOnHidingContent = function (page) {
@@ -85445,7 +85846,11 @@ var SurveyModel = /** @class */ (function (_super) {
         return this.firstPageIsStarted && this.pages.length > 0 ? 1 : 0;
     };
     SurveyModel.prototype.setupPagesForPageModes = function (isSinglePage, isFirstLoad) {
+        var _this = this;
         this.questionHashesClear();
+        if (this.firstPageIsStarted && this.pages.length > 0) {
+            this.pages[0].questions.forEach(function (q) { return _this.questionHashesAdded(q); });
+        }
         this.isLockingUpdateOnPageModes = !isFirstLoad;
         var startIndex = this.getPageStartIndex();
         _super.prototype.startLoadingFromJson.call(this);
@@ -86113,11 +86518,11 @@ var SurveyModel = /** @class */ (function (_super) {
     SurveyModel.prototype.afterRenderPage = function (htmlElement) {
         var _this = this;
         if (!this.isDesignMode && !this.focusingQuestionInfo) {
-            var doScroll_1 = !this.isFirstPageRendering;
+            var doScroll_1 = this.isCurrentPageRendered === false;
             setTimeout(function () { return _this.scrollToTopOnPageChange(doScroll_1); }, 1);
         }
         this.focusQuestionInfo();
-        this.isFirstPageRendering = false;
+        this.isCurrentPageRendered = true;
         if (this.onAfterRenderPage.isEmpty)
             return;
         this.onAfterRenderPage.fire(this, {
@@ -86655,6 +87060,7 @@ var SurveyModel = /** @class */ (function (_super) {
     SurveyModel.prototype.findQuestionByName = function (name) {
         return this.getQuestionByName(name);
     };
+    SurveyModel.prototype.getEditingSurveyElement = function () { return this.editingObjValue; };
     /**
      * Returns a question with a specified [`valueName`](https://surveyjs.io/form-library/documentation/api-reference/question#valueName).
      *
@@ -88899,6 +89305,7 @@ var SurveyModel = /** @class */ (function (_super) {
      * Call this method to release resources if your application contains multiple survey models or if you re-create a survey model at runtime.
      */
     SurveyModel.prototype.dispose = function () {
+        this.unConnectEditingObj();
         this.removeScrollEventListener();
         this.destroyResizeObserver();
         this.rootElement = undefined;
@@ -89076,6 +89483,9 @@ var SurveyModel = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], SurveyModel.prototype, "rootCss", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
+    ], SurveyModel.prototype, "gridLayoutEnabled", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], SurveyModel.prototype, "calculatedWidthMode", void 0);
@@ -89373,6 +89783,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("survey", [
         default: "auto",
         choices: ["auto", "static", "responsive"],
     },
+    { name: "gridLayoutEnabled:boolean", default: false },
     { name: "width", visibleIf: function (obj) { return obj.widthMode === "static"; } },
     { name: "fitToContainer:boolean", default: true, visible: false },
     { name: "headerView", default: "basic", choices: ["basic", "advanced"], visible: false },
@@ -91806,6 +92217,8 @@ function _setIsTouch(val) {
 function detectMouseSupport(matchMedia) {
     if (!matchMedia)
         return false;
+    if (IsMobile)
+        return false;
     var pointerQuery = matchMedia("(pointer:fine)");
     var hoverQuery = matchMedia("(any-hover:hover)");
     return !!pointerQuery && pointerQuery.matches || !!hoverQuery && hoverQuery.matches;
@@ -92415,7 +92828,7 @@ function debounce(func) {
 /*!****************************!*\
   !*** ./src/utils/utils.ts ***!
   \****************************/
-/*! exports provided: unwrap, getRenderedSize, getRenderedStyleSize, doKey2ClickBlur, doKey2ClickUp, doKey2ClickDown, sanitizeEditableContent, Logger, showConfirmDialog, configConfirmDialog, compareArrays, mergeValues, getElementWidth, isContainerVisible, classesToSelector, compareVersions, confirmAction, confirmActionAsync, detectIEOrEdge, detectIEBrowser, loadFileFromBase64, isMobile, isShadowDOM, getElement, isElementVisible, findScrollableParent, scrollElementByChildId, navigateToUrl, wrapUrlForBackgroundImage, createSvg, getIconNameFromProxy, increaseHeightByContent, getOriginalEvent, preventDefaults, findParentByClassNames, getFirstVisibleChild, chooseFiles */
+/*! exports provided: unwrap, getRenderedSize, getRenderedStyleSize, doKey2ClickBlur, doKey2ClickUp, doKey2ClickDown, sanitizeEditableContent, Logger, showConfirmDialog, configConfirmDialog, compareArrays, roundTo2Decimals, mergeValues, getElementWidth, isContainerVisible, classesToSelector, compareVersions, confirmAction, confirmActionAsync, detectIEOrEdge, detectIEBrowser, loadFileFromBase64, isMobile, isShadowDOM, getElement, isElementVisible, findScrollableParent, scrollElementByChildId, navigateToUrl, wrapUrlForBackgroundImage, createSvg, getIconNameFromProxy, increaseHeightByContent, getOriginalEvent, preventDefaults, findParentByClassNames, getFirstVisibleChild, chooseFiles */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -92431,6 +92844,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "showConfirmDialog", function() { return showConfirmDialog; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "configConfirmDialog", function() { return configConfirmDialog; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "compareArrays", function() { return compareArrays; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "roundTo2Decimals", function() { return roundTo2Decimals; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "mergeValues", function() { return mergeValues; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getElementWidth", function() { return getElementWidth; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isContainerVisible", function() { return isContainerVisible; });
@@ -92995,6 +93409,9 @@ function compareArrays(oldValue, newValue, getKey) {
     });
     return { reorderedItems: reorderedItems, deletedItems: deletedItems, addedItems: addedItems, mergedItems: mergedItems };
 }
+function roundTo2Decimals(number) {
+    return Math.round(number * 100) / 100;
+}