survey-core 1.11.7 → 1.11.8

package/survey.core.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.11.7
+ * 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
@@ -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();
         }
@@ -9842,8 +9847,8 @@ __webpack_require__.r(__webpack_exports__);
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.11.7";
-ReleaseDate = "" + "2024-07-16";
+Version = "" + "1.11.8";
+ReleaseDate = "" + "2024-07-22";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -15843,7 +15848,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) {
@@ -18353,9 +18362,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);
                     }
                 },
             });
@@ -21973,7 +21983,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) {
@@ -24191,6 +24200,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":
@@ -24219,6 +24304,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 ||
@@ -24259,6 +24345,7 @@ var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from
 
 
 
+
 var QuestionRowModel = /** @class */ (function (_super) {
     __extends(QuestionRowModel, _super);
     function QuestionRowModel(panel) {
@@ -24535,10 +24622,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");
@@ -24579,7 +24674,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
                 };
             },
@@ -24624,10 +24720,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 () {
@@ -25410,6 +25510,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();
@@ -25470,6 +25615,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();
@@ -25554,6 +25762,7 @@ var PanelModelBase = /** @class */ (function (_super) {
             return;
         this.blockAnimations();
         this.setArrayPropertyDirectly("rows", this.buildRows());
+        this.updateColumns();
         this.releaseAnimations();
     };
     PanelModelBase.prototype.blockRowsUpdates = function () {
@@ -25753,6 +25962,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)
@@ -25980,6 +26190,7 @@ var PanelModelBase = /** @class */ (function (_super) {
         if (this.wasRendered) {
             element.onFirstRendering();
         }
+        this.updateColumns();
         return true;
     };
     PanelModelBase.prototype.insertElement = function (element, dest, location) {
@@ -26096,6 +26307,7 @@ var PanelModelBase = /** @class */ (function (_super) {
             return false;
         }
         this.elements.splice(index, 1);
+        this.updateColumns();
         return true;
     };
     PanelModelBase.prototype.removeQuestion = function (question) {
@@ -26208,6 +26420,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) {
@@ -26222,6 +26444,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);
@@ -26253,6 +26478,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 () {
@@ -26272,13 +26501,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 () {
@@ -26584,7 +26825,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,
@@ -26688,6 +26929,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" },
     {
@@ -26714,6 +26960,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 },
     {
@@ -28676,6 +28927,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 () {
@@ -29283,18 +29535,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
@@ -29978,9 +30243,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);
         }
@@ -31712,13 +31978,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)
@@ -31805,6 +32064,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);
@@ -31839,6 +32101,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" },
     {
@@ -36886,6 +37153,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();
     };
@@ -37848,14 +38119,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 });
     };
@@ -37903,6 +38166,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();
     };
@@ -49515,6 +49784,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();
     };
@@ -54649,17 +54922,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") {
@@ -55618,14 +55880,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)
@@ -58050,6 +58304,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
 };
 
@@ -58743,6 +59026,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) {
@@ -58837,6 +59121,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") {
@@ -59682,12 +59976,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;
@@ -59696,11 +60002,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();
@@ -59854,7 +60158,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
                 };
@@ -59910,6 +60215,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);
@@ -59919,6 +60231,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);
@@ -63260,7 +63575,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);
@@ -64849,7 +65165,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);
@@ -68480,6 +68800,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);
@@ -68777,6 +69100,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 },
@@ -71819,7 +72143,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";
@@ -71835,6 +72159,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; });
@@ -72399,6 +72724,9 @@ function compareArrays(oldValue, newValue, getKey) {
     });
     return { reorderedItems: reorderedItems, deletedItems: deletedItems, addedItems: addedItems, mergedItems: mergedItems };
 }
+function roundTo2Decimals(number) {
+    return Math.round(number * 100) / 100;
+}