survey-react 1.11.6 → 1.11.8

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.11.6
+ * surveyjs - Survey JavaScript library v1.11.8
  * 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
@@ -2298,6 +2298,8 @@ var Base = /** @class */ (function () {
         if (!prop || prop.isCustom && this.isCreating)
             return undefined;
         var dValue = prop.defaultValue;
+        if (!!prop.defaultValueFunc)
+            return dValue;
         if (!this.isPropertyEmpty(dValue) && !Array.isArray(dValue))
             return dValue;
         var locStr = this.localizableStrings ? this.localizableStrings[name] : undefined;
@@ -2686,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;
@@ -8211,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);
@@ -8325,6 +8331,7 @@ var DropdownListModel = /** @class */ (function (_super) {
                     _this.resetItemsSettings();
                 }
             }
+            _this.question.ariaExpanded = option.isVisible ? "true" : "false";
             _this.question.processPopupVisiblilityChanged(_this.popupModel, option.isVisible);
         });
     };
@@ -8632,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) {
@@ -8800,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();
         }
@@ -9953,8 +9960,8 @@ __webpack_require__.r(__webpack_exports__);
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.11.6";
-ReleaseDate = "" + "2024-07-10";
+Version = "" + "1.11.8";
+ReleaseDate = "" + "2024-07-22";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -17080,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 && !!params[1])
+        return q.getDisplayValue(true, params[1]);
+    return q.displayValue;
 }
 FunctionFactory.Instance.register("displayValue", displayValue);
 function propertyValue(params) {
@@ -19590,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);
                     }
                 },
             });
@@ -19785,7 +19797,7 @@ var JsonObjectProperty = /** @class */ (function () {
         }
         if (this.isLocalizable)
             return value === null || value === undefined;
-        return ((value === false && (this.type == "boolean" || this.type == "switch")) ||
+        return ((value === false && (this.type == "boolean" || this.type == "switch") && !this.defaultValueFunc) ||
             value === "" || _helpers__WEBPACK_IMPORTED_MODULE_2__["Helpers"].isValueEmpty(value));
     };
     JsonObjectProperty.prototype.getSerializableValue = function (obj) {
@@ -30787,7 +30799,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) {
@@ -30799,6 +30810,10 @@ var InputElementAdapter = /** @class */ (function () {
                 event.preventDefault();
             }
         };
+        this.changeHandler = function (event) {
+            var result = _this.inputMaskInstance.processInput({ prevValue: "", insertedChars: event.target.value, selectionStart: 0, selectionEnd: 0 });
+            _this.inputElement.value = result.value;
+        };
         var _value = value;
         if (_value === null || _value === undefined) {
             _value = "";
@@ -30832,6 +30847,7 @@ var InputElementAdapter = /** @class */ (function () {
             this.inputElement.addEventListener("beforeinput", this.beforeInputHandler);
             this.inputElement.addEventListener("click", this.clickHandler);
             this.inputElement.addEventListener("focus", this.clickHandler);
+            this.inputElement.addEventListener("change", this.changeHandler);
         }
     };
     InputElementAdapter.prototype.removeInputEventListener = function () {
@@ -30839,6 +30855,7 @@ var InputElementAdapter = /** @class */ (function () {
             this.inputElement.removeEventListener("beforeinput", this.beforeInputHandler);
             this.inputElement.removeEventListener("click", this.clickHandler);
             this.inputElement.removeEventListener("focus", this.clickHandler);
+            this.inputElement.removeEventListener("change", this.changeHandler);
         }
     };
     InputElementAdapter.prototype.dispose = function () {
@@ -32932,6 +32949,12 @@ var PageModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    PageModel.prototype.getMaxTimeToFinish = function () {
+        if (this.maxTimeToFinish !== 0)
+            return this.maxTimeToFinish;
+        var res = !!this.survey ? this.survey.maxTimeToFinishPage : 0;
+        return res > 0 ? res : 0;
+    };
     PageModel.prototype.onNumChanged = function (value) { };
     PageModel.prototype.onVisibleChanged = function () {
         if (this.isRandomizing)
@@ -32993,6 +33016,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":
@@ -33021,6 +33120,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 ||
@@ -33061,6 +33161,7 @@ var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from
 
 
 
+
 var QuestionRowModel = /** @class */ (function (_super) {
     __extends(QuestionRowModel, _super);
     function QuestionRowModel(panel) {
@@ -33337,10 +33438,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");
@@ -33381,7 +33490,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
                 };
             },
@@ -33426,10 +33536,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 () {
@@ -34017,6 +34131,23 @@ var PanelModelBase = /** @class */ (function (_super) {
             this.parent.validateContainerOnly();
         }
     };
+    PanelModelBase.prototype.onQuestionValueChanged = function (el) {
+        var index = this.questions.indexOf(el);
+        if (index < 0)
+            return;
+        var dif = 5;
+        var max = this.questions.length - 1;
+        var start = index - dif > 0 ? index - dif : 0;
+        var end = index + dif < max ? index + dif : max;
+        for (var i = start; i <= end; i++) {
+            if (i === index)
+                continue;
+            var q = this.questions[i];
+            if (q.errors.length > 0 && q.validate(false)) {
+                q.validate(true);
+            }
+        }
+    };
     PanelModelBase.prototype.hasErrorsInPanels = function (rec) {
         var errors = [];
         this.hasRequiredError(rec, errors);
@@ -34195,6 +34326,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();
@@ -34255,6 +34431,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();
@@ -34339,6 +34578,7 @@ var PanelModelBase = /** @class */ (function (_super) {
             return;
         this.blockAnimations();
         this.setArrayPropertyDirectly("rows", this.buildRows());
+        this.updateColumns();
         this.releaseAnimations();
     };
     PanelModelBase.prototype.blockRowsUpdates = function () {
@@ -34538,6 +34778,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)
@@ -34765,6 +35006,7 @@ var PanelModelBase = /** @class */ (function (_super) {
         if (this.wasRendered) {
             element.onFirstRendering();
         }
+        this.updateColumns();
         return true;
     };
     PanelModelBase.prototype.insertElement = function (element, dest, location) {
@@ -34881,6 +35123,7 @@ var PanelModelBase = /** @class */ (function (_super) {
             return false;
         }
         this.elements.splice(index, 1);
+        this.updateColumns();
         return true;
     };
     PanelModelBase.prototype.removeQuestion = function (question) {
@@ -34993,6 +35236,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) {
@@ -35007,6 +35260,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);
@@ -35038,6 +35294,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 () {
@@ -35057,13 +35317,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 () {
@@ -35369,7 +35641,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,
@@ -35473,6 +35745,11 @@ _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(); }
+    },
     { name: "title:text", serializationProperty: "locTitle" },
     { name: "description:text", serializationProperty: "locDescription" },
     {
@@ -35499,6 +35776,11 @@ _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 },
     { name: "innerIndent:number", default: 0, choices: [0, 1, 2, 3] },
     { name: "indent:number", default: 0, choices: [0, 1, 2, 3], visible: false },
     {
@@ -38819,6 +39101,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 () {
@@ -39426,14 +39709,31 @@ var Question = /** @class */ (function (_super) {
     Object.defineProperty(Question.prototype, "titleWidth", {
         get: function () {
             if (this.getTitleLocation() === "left") {
-                if (!!this.parent)
-                    return this.parent.getQuestionTitleWidth();
+                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
@@ -40117,9 +40417,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);
         }
@@ -40569,14 +40870,23 @@ var Question = /** @class */ (function (_super) {
     Question.prototype.getFilteredName = function () { return this.getValueName(); };
     Object.defineProperty(Question.prototype, "valueForSurvey", {
         get: function () {
-            if (!!this.valueToDataCallback) {
-                return this.valueToDataCallback(this.value);
-            }
-            return this.value;
+            return this.valueForSurveyCore(this.value);
         },
         enumerable: false,
         configurable: true
     });
+    Question.prototype.valueForSurveyCore = function (val) {
+        if (!!this.valueToDataCallback) {
+            return this.valueToDataCallback(val);
+        }
+        return val;
+    };
+    Question.prototype.valueFromDataCore = function (val) {
+        if (!!this.valueFromDataCallback) {
+            return this.valueFromDataCallback(val);
+        }
+        return val;
+    };
     /**
      * Sets the question's `value` and `comment` properties to `undefined`.
      * @see value
@@ -41398,6 +41708,9 @@ var Question = /** @class */ (function (_super) {
             this.updateQuestionCss();
         }
         this.isOldAnswered = undefined;
+        if (this.parent) {
+            this.parent.onQuestionValueChanged(this);
+        }
     };
     Question.prototype.checkIsValueCorrect = function (val) {
         var res = this.isValueEmpty(val, !this.allowSpaceAsAnswer) || this.isNewValueCorrect(val);
@@ -41483,9 +41796,7 @@ var Question = /** @class */ (function (_super) {
         var _this = this;
         if (clearData === void 0) { clearData = false; }
         newValue = this.getUnbindValue(newValue);
-        if (!!this.valueFromDataCallback) {
-            newValue = this.valueFromDataCallback(newValue);
-        }
+        newValue = this.valueFromDataCore(newValue);
         if (!this.checkIsValueCorrect(newValue))
             return;
         var isEmpty = this.isValueEmpty(newValue);
@@ -41841,13 +42152,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)
@@ -41934,6 +42238,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);
@@ -41968,6 +42275,11 @@ _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 },
     { name: "startWithNewLine:boolean", default: true, layout: "row" },
     { name: "indent:number", default: 0, choices: [0, 1, 2, 3], layout: "row" },
     {
@@ -44672,6 +44984,8 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("selectbase", [
             return !obj.choicesFromQuestion;
         },
     },
+    { name: "defaultValue:value", visibleIf: function (obj) { return !obj.choicesFromQuestion; }, dependsOn: "choicesFromQuestion" },
+    { name: "correctAnswer:value", visibleIf: function (obj) { return !obj.choicesFromQuestion; }, dependsOn: "choicesFromQuestion" },
     { name: "separateSpecialChoices:boolean", visible: false },
     { name: "showOtherItem:boolean", alternativeName: "hasOther" },
     { name: "showNoneItem:boolean", alternativeName: "hasNone" },
@@ -44731,8 +45045,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("selectbase", [
         default: "default",
         choices: ["default", true, false],
         visible: false,
-    },
-    // { name: "itemComponent", visible: false }
+    }
 ], null, "question");
 _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("checkboxbase", [
     {
@@ -46389,7 +46702,7 @@ var QuestionCommentModel = /** @class */ (function (_super) {
          * @see allowResize
          */
         get: function () {
-            return this.getPropertyValue("autoGrow") || (this.survey && this.survey.autoGrowComment);
+            return this.getPropertyValue("autoGrow");
         },
         set: function (val) {
             this.setPropertyValue("autoGrow", val);
@@ -46397,9 +46710,16 @@ var QuestionCommentModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionCommentModel.prototype, "renderedAutoGrow", {
+        get: function () {
+            var autoGrow = this.autoGrow;
+            return autoGrow === undefined && this.survey ? this.survey.autoGrowComment : !!autoGrow;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionCommentModel.prototype, "allowResize", {
         /**
-         * Specifies whether to display a resize handle for the comment area.
          *
          * Default value: `true` (inherited from `SurveyModel`'s [`allowResizeComment`](https://surveyjs.io/form-library/documentation/surveymodel#allowResizeComment) property)
          * @see autoGrow
@@ -46415,7 +46735,9 @@ var QuestionCommentModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionCommentModel.prototype, "renderedAllowResize", {
         get: function () {
-            return this.allowResize && (this.survey && this.survey.allowResizeComment) && !this.isPreviewStyle && !this.isReadOnlyStyle;
+            var res = this.allowResize;
+            var allowResize = res === undefined && this.survey ? this.survey.allowResizeComment : !!res;
+            return allowResize && !this.isPreviewStyle && !this.isReadOnlyStyle;
         },
         enumerable: false,
         configurable: true
@@ -46438,7 +46760,7 @@ var QuestionCommentModel = /** @class */ (function (_super) {
     };
     QuestionCommentModel.prototype.updateElement = function () {
         var _this = this;
-        if (this.element && this.autoGrow) {
+        if (this.element && this.renderedAutoGrow) {
             setTimeout(function () { return Object(_utils_utils__WEBPACK_IMPORTED_MODULE_3__["increaseHeightByContent"])(_this.element); }, 1);
         }
     };
@@ -46499,8 +46821,8 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("comment", [
         default: "default",
         choices: ["default", "onBlur", "onTyping"],
     },
-    { name: "autoGrow:boolean" },
-    { name: "allowResize:boolean", default: true },
+    { name: "autoGrow:boolean", defaultFunc: function () { return undefined; } },
+    { name: "allowResize:boolean", defaultFunc: function () { return undefined; } },
     { name: "acceptCarriageReturn:boolean", default: true, visible: false }
 ], function () {
     return new QuestionCommentModel("");
@@ -47005,6 +47327,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();
     };
@@ -47028,6 +47354,9 @@ var QuestionCustomModelBase = /** @class */ (function (_super) {
     QuestionCustomModelBase.prototype.validateContainerOnly = function () {
         // do nothing
     };
+    QuestionCustomModelBase.prototype.onQuestionValueChanged = function (el) {
+        // do nothing
+    };
     QuestionCustomModelBase.prototype.getQuestionErrorLocation = function () {
         return this.getErrorLocation();
     };
@@ -47964,14 +48293,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 });
     };
@@ -48019,6 +48340,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();
     };
@@ -53648,6 +53975,9 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionMatrixDropdownModelBase.prototype.isSelectCellType = function () {
+        return _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].isDescendantOf(this.cellType, "selectbase");
+    };
     QuestionMatrixDropdownModelBase.prototype.updateColumnsCellType = function () {
         for (var i = 0; i < this.columns.length; i++) {
             this.columns[i].defaultCellTypeChanged();
@@ -53802,13 +54132,17 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
                 break;
             columnName = path[i] + columnName;
         }
+        var question = undefined;
         var column = this.getColumnByName(columnName);
-        if (!column)
-            return null;
-        var question = column.createCellQuestion(null);
-        if (!question)
-            return null;
-        return question.getConditionJson(operator);
+        if (!!column) {
+            question = column.createCellQuestion(null);
+        }
+        else {
+            if (this.detailPanelMode !== "none") {
+                question = this.detailPanel.getQuestionByName(columnName);
+            }
+        }
+        return !!question ? question.getConditionJson(operator) : null;
     };
     QuestionMatrixDropdownModelBase.prototype.clearIncorrectValues = function () {
         var rows = this.visibleRows;
@@ -54287,7 +54621,11 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
         return questionPlainData;
     };
     QuestionMatrixDropdownModelBase.prototype.addConditionObjectsByContext = function (objects, context) {
-        var hasColumnContext = !!context && this.columns.indexOf(context) > -1;
+        var rowElements = [].concat(this.columns);
+        if (this.detailPanelMode !== "none") {
+            rowElements = rowElements.concat(this.detailPanel.questions);
+        }
+        var hasColumnContext = !!context && rowElements.indexOf(context) > -1;
         var hasContext = context === true || hasColumnContext;
         var rowsIndeces = this.getConditionObjectsRowIndeces();
         if (hasContext) {
@@ -54303,13 +54641,13 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
             var dot = hasQuestionPrefix && index === -1 ? "." : "";
             var prefixName = (hasQuestionPrefix ? this.getValueName() : "") + dot + rowName + ".";
             var prefixTitle = (hasQuestionPrefix ? this.processedTitle : "") + dot + rowText + ".";
-            for (var j = 0; j < this.columns.length; j++) {
-                var column = this.columns[j];
-                if (index === -1 && context === column)
+            for (var j = 0; j < rowElements.length; j++) {
+                var rowElement = rowElements[j];
+                if (index === -1 && context === rowElement)
                     continue;
                 var obj = {
-                    name: prefixName + column.name,
-                    text: prefixTitle + column.fullTitle,
+                    name: prefixName + rowElement.name,
+                    text: prefixTitle + rowElement.fullTitle,
                     question: this
                 };
                 if (index === -1 && context === true) {
@@ -54376,9 +54714,11 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
             var col = this.columns[i];
             if (!col.templateQuestion.hasInput)
                 continue;
+            var hasValue = !_helpers__WEBPACK_IMPORTED_MODULE_2__["Helpers"].isValueEmpty(rowValue[col.name]);
+            if (!hasValue && !!col.templateQuestion.visibleIf)
+                continue;
             res.questionCount += 1;
             res.requiredQuestionCount += col.isRequired;
-            var hasValue = !_helpers__WEBPACK_IMPORTED_MODULE_2__["Helpers"].isValueEmpty(rowValue[col.name]);
             res.answeredQuestionCount += hasValue ? 1 : 0;
             res.requiredAnsweredQuestionCount += hasValue && col.isRequired ? 1 : 0;
         }
@@ -55016,6 +55356,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("matrixdropdownb
     { name: "horizontalScroll:boolean", visible: false, },
     {
         name: "choices:itemvalue[]", uniqueProperty: "value",
+        visibleIf: function (obj) { return obj.isSelectCellType(); }
     },
     { name: "placeholder", alternativeName: "optionsCaption", serializationProperty: "locPlaceholder" },
     {
@@ -59617,6 +59958,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();
     };
@@ -59640,6 +59985,9 @@ var QuestionMultipleTextModel = /** @class */ (function (_super) {
     QuestionMultipleTextModel.prototype.validateContainerOnly = function () {
         // do nothing
     };
+    QuestionMultipleTextModel.prototype.onQuestionValueChanged = function (el) {
+        // do nothing
+    };
     QuestionMultipleTextModel.prototype.getItemLabelCss = function (item) {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_7__["CssClassBuilder"]()
             .append(this.cssClasses.itemLabel)
@@ -63074,7 +63422,7 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         _this.domNode = null;
         _this.onVisibleChoicesChanged = function () {
             _super.prototype.onVisibleChoicesChanged.call(_this);
-            if (_this.carryForwardStartUnranked && !_this.isValueSetByUser && !_this.selectToRankEnabled) {
+            if (_this.carryForwardStartUnranked && !_this.isValueSetByUser && !_this.selectToRankEnabled && !_this.defaultValue) {
                 _this.value = [];
             }
             // ranking question with only one choice doesn't make sense
@@ -64748,17 +65096,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") {
@@ -65717,14 +66054,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)
@@ -66379,6 +66708,24 @@ var QuestionTextModel = /** @class */ (function (_super) {
             this._inputValue = this.maskInstance.getMaskedValue(this.value);
         }
     };
+    QuestionTextModel.prototype.hasToConvertToUTC = function (val) {
+        return _settings__WEBPACK_IMPORTED_MODULE_6__["settings"].storeUtcDates && this.isDateTimeLocaleType() && !!val;
+    };
+    QuestionTextModel.prototype.valueForSurveyCore = function (val) {
+        if (this.hasToConvertToUTC(val)) {
+            val = new Date(val).toISOString();
+        }
+        return _super.prototype.valueForSurveyCore.call(this, val);
+    };
+    QuestionTextModel.prototype.valueFromDataCore = function (val) {
+        if (this.hasToConvertToUTC(val)) {
+            var d = new Date(val);
+            var locale_d = new Date(d.getTime() - d.getTimezoneOffset() * 60 * 1000);
+            var res = locale_d.toISOString();
+            val = res.substring(0, res.length - 2);
+        }
+        return _super.prototype.valueFromDataCore.call(this, val);
+    };
     QuestionTextModel.prototype.onCheckForErrors = function (errors, isOnValueChanged) {
         var _this = this;
         _super.prototype.onCheckForErrors.call(this, errors, isOnValueChanged);
@@ -66450,11 +66797,14 @@ var QuestionTextModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionTextModel.prototype, "isDateInputType", {
         get: function () {
-            return this.inputType === "date" || this.inputType === "datetime-local";
+            return this.inputType === "date" || this.isDateTimeLocaleType();
         },
         enumerable: false,
         configurable: true
     });
+    QuestionTextModel.prototype.isDateTimeLocaleType = function () {
+        return this.inputType === "datetime-local";
+    };
     QuestionTextModel.prototype.getCalculatedMinMax = function (minMax) {
         if (this.isValueEmpty(minMax))
             return minMax;
@@ -66506,11 +66856,10 @@ var QuestionTextModel = /** @class */ (function (_super) {
         return this.maskTypeIsEmpty ? _super.prototype.getIsInputTextUpdate.call(this) : false;
     };
     QuestionTextModel.prototype.supportGoNextPageAutomatic = function () {
-        return !this.getIsInputTextUpdate() &&
-            ["date", "datetime-local"].indexOf(this.inputType) < 0;
+        return !this.getIsInputTextUpdate() && !this.isDateInputType;
     };
     QuestionTextModel.prototype.supportGoNextPageError = function () {
-        return ["date", "datetime-local"].indexOf(this.inputType) < 0;
+        return !this.isDateInputType;
     };
     Object.defineProperty(QuestionTextModel.prototype, "dataList", {
         /**
@@ -66551,9 +66900,13 @@ var QuestionTextModel = /** @class */ (function (_super) {
     QuestionTextModel.prototype.correctValueType = function (newValue) {
         if (!newValue)
             return newValue;
-        if (this.inputType == "number" || this.inputType == "range") {
+        if (this.inputType === "number" || this.inputType === "range") {
             return _helpers__WEBPACK_IMPORTED_MODULE_3__["Helpers"].isNumber(newValue) ? _helpers__WEBPACK_IMPORTED_MODULE_3__["Helpers"].getNumber(newValue) : "";
         }
+        if (this.inputType === "month") {
+            var d = new Date(newValue);
+            return d.getFullYear() + "-" + (d.getMonth() + 1);
+        }
         return newValue;
     };
     QuestionTextModel.prototype.hasPlaceholder = function () {
@@ -70878,7 +71231,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,
@@ -70888,7 +71241,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 () {
@@ -73232,7 +73585,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,
@@ -74723,7 +75076,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./reactquestion_factory */ "./src/react/reactquestion_factory.tsx");
 /* harmony import */ var _components_loading_indicator__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/loading-indicator */ "./src/react/components/loading-indicator.tsx");
 /* harmony import */ var _components_action_bar_action_bar_item__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/action-bar/action-bar-item */ "./src/react/components/action-bar/action-bar-item.tsx");
-/* harmony import */ var _entries_react_ui_model__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../entries/react-ui-model */ "./src/entries/react-ui-model.ts");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
+/* harmony import */ var _components_file_file_choose_button__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./components/file/file-choose-button */ "./src/react/components/file/file-choose-button.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -74747,6 +75101,8 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
+// import { ReactElementFactory, SurveyFileChooseButton } from "../entries/react-ui-model";
 var SurveyQuestionFile = /** @class */ (function (_super) {
     __extends(SurveyQuestionFile, _super);
     function SurveyQuestionFile(props) {
@@ -74804,7 +75160,7 @@ var SurveyQuestionFile = /** @class */ (function (_super) {
                 noFileChosen)));
     };
     SurveyQuestionFile.prototype.renderChooseButton = function () {
-        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_entries_react_ui_model__WEBPACK_IMPORTED_MODULE_7__["SurveyFileChooseButton"], { data: { question: this.question } });
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_file_file_choose_button__WEBPACK_IMPORTED_MODULE_8__["SurveyFileChooseButton"], { data: { question: this.question } });
     };
     SurveyQuestionFile.prototype.renderClearButton = function (className) {
         return !this.question.isUploading ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("button", { type: "button", onClick: this.question.doClean, className: className },
@@ -74812,7 +75168,7 @@ var SurveyQuestionFile = /** @class */ (function (_super) {
             (!!this.question.cssClasses.removeButtonIconId) ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { iconName: this.question.cssClasses.removeButtonIconId, size: "auto", title: this.question.clearButtonCaption }) : null)) : null;
     };
     SurveyQuestionFile.prototype.renderPreview = function () {
-        return _entries_react_ui_model__WEBPACK_IMPORTED_MODULE_7__["ReactElementFactory"].Instance.createElement("sv-file-preview", { question: this.question });
+        return _element_factory__WEBPACK_IMPORTED_MODULE_7__["ReactElementFactory"].Instance.createElement("sv-file-preview", { question: this.question });
     };
     SurveyQuestionFile.prototype.renderLoadingIndicator = function () {
         return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.loadingIndicator },
@@ -76791,7 +77147,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 })),
@@ -77665,7 +78021,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"]));
@@ -78543,7 +78899,37 @@ var settings = {
             "a": /[a-zA-Z]/,
             "#": /[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
 };
 
 
@@ -79236,6 +79622,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) {
@@ -79330,6 +79717,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") {
@@ -80175,12 +80572,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;
@@ -80189,11 +80598,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();
@@ -80347,7 +80754,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
                 };
@@ -80403,6 +80811,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);
@@ -80412,6 +80827,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);
@@ -83753,7 +84171,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);
@@ -84265,7 +84684,9 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     SurveyModel.prototype.updateActivePage = function () {
         var newPage = this.isShowStartingPage ? this.startedPage : this.currentPage;
-        this.setPropertyValue("activePage", newPage);
+        if (newPage !== this.activePage) {
+            this.setPropertyValue("activePage", newPage);
+        }
     };
     SurveyModel.prototype.onStateAndCurrentPageChanged = function () {
         this.updateActivePage();
@@ -85340,7 +85761,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);
@@ -85484,7 +85909,7 @@ var SurveyModel = /** @class */ (function (_super) {
         if (this.isFirstPage || !this.showPrevButton || this.state !== "running")
             return false;
         var page = this.visiblePages[this.currentPageNo - 1];
-        return this.getPageMaxTimeToFinish(page) <= 0;
+        return page && page.getMaxTimeToFinish() <= 0;
     };
     SurveyModel.prototype.calcIsShowNextButton = function () {
         return this.state === "running" && !this.isLastPage && !this.canBeCompletedByTrigger;
@@ -87138,19 +87563,19 @@ var SurveyModel = /** @class */ (function (_super) {
         this.onLoadingSurveyFromService();
         if (clientId) {
             this.createSurveyService().getSurveyJsonAndIsCompleted(this.surveyId, this.clientId, function (success, json, isCompleted, response) {
-                self.isLoading = false;
                 if (success) {
                     self.isCompletedBefore = isCompleted == "completed";
                     self.loadSurveyFromServiceJson(json);
                 }
+                self.isLoading = false;
             });
         }
         else {
             this.createSurveyService().loadSurvey(this.surveyId, function (success, result, response) {
-                self.isLoading = false;
                 if (success) {
                     self.loadSurveyFromServiceJson(result);
                 }
+                self.isLoading = false;
             });
         }
     };
@@ -88254,7 +88679,7 @@ var SurveyModel = /** @class */ (function (_super) {
             return { spent: 0, limit: 0 };
         var pageSpent = page.timeSpent;
         var surveySpent = this.timeSpent;
-        var pageLimitSec = this.getPageMaxTimeToFinish(page);
+        var pageLimitSec = page.getMaxTimeToFinish();
         var surveyLimit = this.maxTimeToFinish;
         if (this.showTimerPanelMode == "page") {
             return { spent: pageSpent, limit: pageLimitSec };
@@ -88283,7 +88708,7 @@ var SurveyModel = /** @class */ (function (_super) {
             return "";
         var pageSpent = this.getDisplayTime(page.timeSpent);
         var surveySpent = this.getDisplayTime(this.timeSpent);
-        var pageLimitSec = this.getPageMaxTimeToFinish(page);
+        var pageLimitSec = page.getMaxTimeToFinish();
         var pageLimit = this.getDisplayTime(pageLimitSec);
         var surveyLimit = this.getDisplayTime(this.maxTimeToFinish);
         if (this.showTimerPanelMode == "page")
@@ -88304,7 +88729,7 @@ var SurveyModel = /** @class */ (function (_super) {
         return "";
     };
     SurveyModel.prototype.getTimerInfoPageText = function (page, pageSpent, pageLimit) {
-        return this.getPageMaxTimeToFinish(page) > 0
+        return !!page && page.getMaxTimeToFinish() > 0
             ? this.getLocalizationFormatString("timerLimitPage", pageSpent, pageLimit)
             : this.getLocalizationFormatString("timerSpentPage", pageSpent, pageLimit);
     };
@@ -88429,20 +88854,14 @@ var SurveyModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    SurveyModel.prototype.getPageMaxTimeToFinish = function (page) {
-        if (!page || page.maxTimeToFinish < 0)
-            return 0;
-        return page.maxTimeToFinish > 0
-            ? page.maxTimeToFinish
-            : this.maxTimeToFinishPage;
-    };
     SurveyModel.prototype.doTimer = function (page) {
         this.onTimer.fire(this, {});
-        if (this.maxTimeToFinish > 0 && this.maxTimeToFinish == this.timeSpent) {
+        if (this.maxTimeToFinish > 0 && this.maxTimeToFinish <= this.timeSpent) {
+            this.timeSpent = this.maxTimeToFinish;
             this.completeLastPage();
         }
         if (page) {
-            var pageLimit = this.getPageMaxTimeToFinish(page);
+            var pageLimit = page.getMaxTimeToFinish();
             if (pageLimit > 0 && pageLimit == page.timeSpent) {
                 if (this.isLastPage) {
                     this.completeLastPage();
@@ -88825,10 +89244,21 @@ var SurveyModel = /** @class */ (function (_super) {
             this.disposeCallback();
         }
     };
+    // private _lastScrollTop = 0;
+    SurveyModel.prototype._isElementShouldBeSticky = function (selector) {
+        if (!selector)
+            return false;
+        var topStickyContainer = this.rootElement.querySelector(selector);
+        if (!!topStickyContainer) {
+            // const scrollDirection = this.rootElement.scrollTop > this._lastScrollTop ? "down" : "up";
+            // this._lastScrollTop = this.rootElement.scrollTop;
+            return this.rootElement.scrollTop > 0 && topStickyContainer.getBoundingClientRect().y <= this.rootElement.getBoundingClientRect().y;
+        }
+        return false;
+    };
     SurveyModel.prototype.onScroll = function () {
         if (!!this.rootElement) {
-            var topStickyContainer = this.rootElement.querySelector(".sv-components-container-center");
-            if (!!topStickyContainer && topStickyContainer.getBoundingClientRect().y <= this.rootElement.getBoundingClientRect().y) {
+            if (this._isElementShouldBeSticky(".sv-components-container-center")) {
                 this.rootElement.classList && this.rootElement.classList.add("sv-root--sticky-top");
             }
             else {
@@ -88966,6 +89396,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);
@@ -89263,6 +89696,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("survey", [
         default: "auto",
         choices: ["auto", "static", "responsive"],
     },
+    { name: "gridLayoutEnabled:boolean", default: false, visible: 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 },
@@ -89571,7 +90005,7 @@ var SurveyTimerModel = /** @class */ (function (_super) {
         this.survey.onCurrentPageChanged.add(function () {
             _this.update();
         });
-        this.timerFunc = function () { _this.doTimer(); };
+        this.timerFunc = function (sender, options) { _this.doTimer(options.seconds); };
         this.setIsRunning(true);
         this.update();
         _surveytimer__WEBPACK_IMPORTED_MODULE_1__["SurveyTimer"].instance.start(this.timerFunc);
@@ -89596,12 +90030,16 @@ var SurveyTimerModel = /** @class */ (function (_super) {
         this.updateText();
         this.updateProgress();
     };
-    SurveyTimerModel.prototype.doTimer = function () {
+    SurveyTimerModel.prototype.doTimer = function (seconds) {
         var page = this.survey.currentPage;
         if (page) {
-            page.timeSpent = page.timeSpent + 1;
+            var pageMaxTime = page.getMaxTimeToFinish();
+            if (pageMaxTime > 0 && pageMaxTime < page.timeSpent + seconds) {
+                seconds = pageMaxTime - page.timeSpent;
+            }
+            page.timeSpent = page.timeSpent + seconds;
         }
-        this.spent = this.spent + 1;
+        this.spent = this.spent + seconds;
         this.update();
         if (this.onTimer) {
             this.onTimer(page);
@@ -89887,13 +90325,14 @@ var surveyTimerFunctions = {
         else {
             return setTimeout(func, delay);
         }
-    }
+    },
+    now: function () { return Date.now(); }
 };
 var SurveyTimer = /** @class */ (function () {
     function SurveyTimer() {
         this.listenerCounter = 0;
         this.timerId = -1;
-        this.onTimer = new _base__WEBPACK_IMPORTED_MODULE_0__["Event"]();
+        this.onTimer = new _base__WEBPACK_IMPORTED_MODULE_0__["EventBase"]();
     }
     Object.defineProperty(SurveyTimer, "instance", {
         get: function () {
@@ -89911,6 +90350,7 @@ var SurveyTimer = /** @class */ (function () {
         if (func) {
             this.onTimer.add(func);
         }
+        this.prevTimeInMs = surveyTimerFunctions.now();
         if (this.timerId < 0) {
             this.timerId = surveyTimerFunctions.setTimeout(function () {
                 _this.doTimer();
@@ -89936,8 +90376,14 @@ var SurveyTimer = /** @class */ (function () {
         }
         if (this.timerId < 0)
             return;
+        var newTimer = surveyTimerFunctions.now();
+        var seconds = Math.floor((newTimer - this.prevTimeInMs) / 1000);
+        this.prevTimeInMs = newTimer;
+        if (seconds < 0) {
+            seconds = 1;
+        }
         var prevItem = this.timerId;
-        this.onTimer.fire(this, {});
+        this.onTimer.fire(this, { seconds: seconds });
         //We have to check that we have the same timerId
         //It could be changed during events execution and it will lead to double timer events
         if (prevItem !== this.timerId)
@@ -92293,7 +92739,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";
@@ -92309,6 +92755,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; });
@@ -92477,7 +92924,7 @@ function navigateToUrl(url) {
     var location = _global_variables_utils__WEBPACK_IMPORTED_MODULE_3__["DomWindowHelper"].getLocation();
     if (!url || !location)
         return;
-    location.href = url;
+    location.href = encodeURIComponent(url);
 }
 function wrapUrlForBackgroundImage(url) {
     return !!url ? ["url(", url, ")"].join("") : "";
@@ -92873,6 +93320,9 @@ function compareArrays(oldValue, newValue, getKey) {
     });
     return { reorderedItems: reorderedItems, deletedItems: deletedItems, addedItems: addedItems, mergedItems: mergedItems };
 }
+function roundTo2Decimals(number) {
+    return Math.round(number * 100) / 100;
+}