survey-react 1.9.114 → 1.9.116

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.114
+ * surveyjs - Survey JavaScript library v1.9.116
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1062,6 +1062,8 @@ var Action = /** @class */ (function (_super) {
         this._enabled = val;
     };
     Action.prototype.getEnabled = function () {
+        if (this.enabledIf)
+            return this.enabledIf();
         return this._enabled;
     };
     Action.prototype.setComponent = function (val) {
@@ -5592,6 +5594,7 @@ var defaultV2Css = {
         root: "sd-input sd-text",
         small: "sd-row__question--small",
         controlDisabled: "sd-input--disabled",
+        constrolWithCharacterCounter: "sd-text__character-counter",
         content: "sd-text__content sd-question__content",
         remainingCharacterCounter: "sd-remaining-character-counter",
         onError: "sd-input--error"
@@ -5603,6 +5606,7 @@ var defaultV2Css = {
         itemLabelOnError: "sd-multipletext__item-container--error",
         itemLabelAllowFocus: "sd-multipletext__item-container--allow-focus",
         itemLabelAnswered: "sd-multipletext__item-container--answered",
+        itemWithCharacterCounter: "sd-multipletext-item__character-counter",
         item: "sd-multipletext__item",
         itemTitle: "sd-multipletext__item-title",
         content: "sd-multipletext__content sd-question__content",
@@ -5700,6 +5704,7 @@ var defaultV2Css = {
         rootScroll: "sd-question--scroll",
         root: "sd-table sd-matrixdropdown",
         noHeader: "sd-table--no-header",
+        hasFooter: "sd-table--has-footer",
         rootVerticalAlignTop: "sd-table--align-top",
         rootVerticalAlignMiddle: "sd-table--align-middle",
         tableWrapper: "sd-table-wrapper",
@@ -5710,6 +5715,9 @@ var defaultV2Css = {
         errorsCellBottom: "sd-table__cell--error-bottom",
         itemCell: "sd-table__cell--item",
         row: "sd-table__row",
+        expandedRow: "sd-table__row--expanded",
+        rowHasPanel: "sd-table__row--has-panel",
+        rowHasEndActions: "sd-table__row--has-end-actions",
         headerCell: "sd-table__cell sd-table__cell--header",
         rowTextCell: "sd-table__cell sd-table__cell--row-text",
         columnTitleCell: "sd-table__cell--column-title",
@@ -5721,6 +5729,8 @@ var defaultV2Css = {
         detailIconId: "icon-expanddetail",
         detailIconExpandedId: "icon-collapsedetail",
         detailPanelCell: "sd-table__cell--detail-panel",
+        detailRowCell: "sd-table__cell--detail",
+        actionsCellPrefix: "sd-table__cell-action",
         actionsCell: "sd-table__cell sd-table__cell--actions",
         actionsCellDrag: "sd-table__cell--drag",
         emptyCell: "sd-table__cell--empty",
@@ -5734,10 +5744,14 @@ var defaultV2Css = {
         empty: "sd-question--empty",
         root: "sd-table sd-matrixdynamic",
         noHeader: "sd-table--no-header",
+        hasFooter: "sd-table--has-footer",
         tableWrapper: "sd-table-wrapper",
         content: "sd-matrixdynamic__content sd-question__content",
         cell: "sd-table__cell",
         row: "sd-table__row",
+        rowHasPanel: "sd-table__row--has-panel",
+        rowHasEndActions: "sd-table__row--has-end-actions",
+        expandedRow: "sd-table__row--expanded",
         itemCell: "sd-table__cell--item",
         headerCell: "sd-table__cell sd-table__cell--header",
         rowTextCell: "sd-table__cell sd-table__cell--row-text",
@@ -5752,6 +5766,8 @@ var defaultV2Css = {
         detailIconId: "icon-expanddetail",
         detailIconExpandedId: "icon-collapsedetail",
         detailPanelCell: "sd-table__cell--detail-panel",
+        detailRowCell: "sd-table__cell--detail",
+        actionsCellPrefix: "sd-table__cell-action",
         actionsCell: "sd-table__cell sd-table__cell--actions",
         actionsCellDrag: "sd-table__cell--drag",
         buttonAdd: "sd-matrixdynamic__add-btn",
@@ -5863,6 +5879,7 @@ var defaultV2Css = {
         removeFileButton: "sd-context-btn--negative sd-file__remove-file-button",
         dragAreaPlaceholder: "sd-file__drag-area-placeholder",
         imageWrapper: "sd-file__image-wrapper",
+        imageWrapperDefaultImage: "sd-file__image-wrapper--default-image",
         single: "sd-file--single",
         singleImage: "sd-file--single-image",
         mobile: "sd-file--mobile",
@@ -6871,6 +6888,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils/utils */ "./src/utils/utils.ts");
 /* harmony import */ var _utils_devices__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils/devices */ "./src/utils/devices.ts");
 /* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../settings */ "./src/settings.ts");
+var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
 
 
 
@@ -6941,11 +6963,12 @@ var DragDropDOMAdapter = /** @class */ (function () {
             if (_utils_devices__WEBPACK_IMPORTED_MODULE_1__["IsTouch"]) {
                 _this.savedTargetNode.style.cssText = null;
                 _this.savedTargetNode && _this.savedTargetNode.parentElement.removeChild(_this.savedTargetNode);
-                _this.savedTargetNodeParent.appendChild(_this.savedTargetNode);
+                _this.insertNodeToParentAtIndex(_this.savedTargetNodeParent, _this.savedTargetNode, _this.savedTargetNodeIndex);
                 DragDropDOMAdapter.PreventScrolling = false;
             }
             _this.savedTargetNode = null;
             _this.savedTargetNodeParent = null;
+            _this.savedTargetNodeIndex = null;
             _this.returnUserSelectBack();
         };
         this.drop = function () {
@@ -6991,6 +7014,7 @@ var DragDropDOMAdapter = /** @class */ (function () {
                 _this.savedTargetNode.style.cssText =
                     "\n          position: absolute;\n          height: 1px!important;\n          width: 1px!important;\n          overflow: hidden;\n          clip: rect(1px 1px 1px 1px);\n          clip: rect(1px, 1px, 1px, 1px);\n        ";
                 _this.savedTargetNodeParent = _this.savedTargetNode.parentElement;
+                _this.savedTargetNodeIndex = _this.getNodeIndexInParent(_this.savedTargetNode);
                 _this.rootElement.appendChild(_this.savedTargetNode);
             }
             _this.stopLongTap();
@@ -7148,6 +7172,12 @@ var DragDropDOMAdapter = /** @class */ (function () {
         }
         this.doStartDrag(event, draggedElement, parentElement, draggedElementNode);
     };
+    DragDropDOMAdapter.prototype.getNodeIndexInParent = function (node) {
+        return __spreadArray([], node.parentElement.childNodes).indexOf(node);
+    };
+    DragDropDOMAdapter.prototype.insertNodeToParentAtIndex = function (parent, node, index) {
+        parent.insertBefore(node, parent.childNodes[index]);
+    };
     DragDropDOMAdapter.PreventScrolling = false;
     return DragDropDOMAdapter;
 }());
@@ -8124,7 +8154,7 @@ var DropdownListModel = /** @class */ (function (_super) {
         var _a;
         var focusedItem = this.listModel.focusedItem;
         if (!focusedItem && this.question.selectedItem) {
-            if (_itemvalue__WEBPACK_IMPORTED_MODULE_1__["ItemValue"].getItemByValue(this.question.choices, this.question.value)) {
+            if (_itemvalue__WEBPACK_IMPORTED_MODULE_1__["ItemValue"].getItemByValue(this.question.visibleChoices, this.question.value)) {
                 this.listModel.focusedItem = this.question.selectedItem;
             }
         }
@@ -9340,8 +9370,8 @@ __webpack_require__.r(__webpack_exports__);
 //import "../../modern.scss";
 var Version;
 var ReleaseDate;
-Version = "" + "1.9.114";
-ReleaseDate = "" + "2023-10-25";
+Version = "" + "1.9.116";
+ReleaseDate = "" + "2023-11-07";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -15153,6 +15183,15 @@ var UnaryOperand = /** @class */ (function (_super) {
         var uOp = op;
         return uOp.operator == this.operator && this.areOperatorsEquals(this.expression, uOp.expression);
     };
+    UnaryOperand.prototype.hasFunction = function () {
+        return this.expression.hasFunction();
+    };
+    UnaryOperand.prototype.hasAsyncFunction = function () {
+        return this.expression.hasAsyncFunction();
+    };
+    UnaryOperand.prototype.addToAsyncList = function (list) {
+        this.expression.addToAsyncList(list);
+    };
     UnaryOperand.prototype.evaluate = function (processValue) {
         var value = this.expression.evaluate(processValue);
         return this.consumer.call(this, value);
@@ -18383,7 +18422,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("itemvalue", [
 /*!***************************!*\
   !*** ./src/jsonobject.ts ***!
   \***************************/
-/*! exports provided: property, propertyArray, JsonObjectProperty, CustomPropertiesCollection, JsonMetadataClass, JsonMetadata, JsonError, JsonUnknownPropertyError, JsonMissingTypeErrorBase, JsonMissingTypeError, JsonIncorrectTypeError, JsonRequiredPropertyError, JsonObject, Serializer */
+/*! exports provided: property, propertyArray, JsonObjectProperty, CustomPropertiesCollection, JsonMetadataClass, JsonMetadata, JsonError, JsonUnknownPropertyError, JsonMissingTypeErrorBase, JsonMissingTypeError, JsonIncorrectTypeError, JsonRequiredPropertyError, JsonRequiredArrayPropertyError, JsonObject, Serializer */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -18400,6 +18439,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "JsonMissingTypeError", function() { return JsonMissingTypeError; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "JsonIncorrectTypeError", function() { return JsonIncorrectTypeError; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "JsonRequiredPropertyError", function() { return JsonRequiredPropertyError; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "JsonRequiredArrayPropertyError", function() { return JsonRequiredArrayPropertyError; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "JsonObject", function() { return JsonObject; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Serializer", function() { return Serializer; });
 /* harmony import */ var _surveyStrings__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./surveyStrings */ "./src/surveyStrings.ts");
@@ -19299,6 +19339,10 @@ var JsonMetadataClass = /** @class */ (function () {
             }
             if (propInfo.baseClassName) {
                 prop.baseClassName = propInfo.baseClassName;
+                prop.isArray = true;
+            }
+            if (prop.isArray === true) {
+                prop.isArray = true;
             }
             if (propInfo.classNamePart) {
                 prop.classNamePart = propInfo.classNamePart;
@@ -19942,6 +19986,17 @@ var JsonRequiredPropertyError = /** @class */ (function (_super) {
     return JsonRequiredPropertyError;
 }(JsonError));
 
+var JsonRequiredArrayPropertyError = /** @class */ (function (_super) {
+    __extends(JsonRequiredArrayPropertyError, _super);
+    function JsonRequiredArrayPropertyError(propertyName, className) {
+        var _this = _super.call(this, "arrayproperty", "The property '" + propertyName + "' should be an array in '" + className + "'.") || this;
+        _this.propertyName = propertyName;
+        _this.className = className;
+        return _this;
+    }
+    return JsonRequiredArrayPropertyError;
+}(JsonError));
+
 var JsonObject = /** @class */ (function () {
     function JsonObject() {
         this.errors = new Array();
@@ -19997,7 +20052,7 @@ var JsonObject = /** @class */ (function () {
                 }
                 continue;
             }
-            this.valueToObj(jsonObj[key], obj, property);
+            this.valueToObj(jsonObj[key], obj, property, jsonObj);
         }
         if (obj.endLoadingFromJson) {
             obj.endLoadingFromJson();
@@ -20071,7 +20126,7 @@ var JsonObject = /** @class */ (function () {
             }
         }
     };
-    JsonObject.prototype.valueToObj = function (value, obj, property) {
+    JsonObject.prototype.valueToObj = function (value, obj, property, jsonObj) {
         if (value === null || value === undefined)
             return;
         this.removePos(property, value);
@@ -20079,6 +20134,11 @@ var JsonObject = /** @class */ (function () {
             property.setValue(obj, value, this);
             return;
         }
+        if (property.isArray && !Array.isArray(value) && !!value) {
+            value = [value];
+            var propName = !!jsonObj && property.alternativeName && !!jsonObj[property.alternativeName] ? property.alternativeName : property.name;
+            this.addNewError(new JsonRequiredArrayPropertyError(propName, obj.getType()), !!jsonObj ? jsonObj : value, obj);
+        }
         if (this.isValueArray(value)) {
             this.valueToArray(value, obj, property.name, property);
             return;
@@ -22452,6 +22512,8 @@ var englishStrings = {
     emptyRowsText: "There are no rows.",
     addPanel: "Add new",
     removePanel: "Remove",
+    showDetails: "Show Details",
+    hideDetails: "Hide Details",
     choices_Item: "item",
     matrix_column: "Column",
     matrix_row: "Row",
@@ -28287,9 +28349,11 @@ var QuestionMatrixBaseModel = /** @class */ (function (_super) {
         return true;
     };
     QuestionMatrixBaseModel.prototype.getTableCss = function () {
+        var _a;
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_5__["CssClassBuilder"]()
             .append(this.cssClasses.root)
             .append(this.cssClasses.noHeader, !this.showHeader)
+            .append(this.cssClasses.hasFooter, !!((_a = this.renderedTable) === null || _a === void 0 ? void 0 : _a.showAddRowOnBottom))
             .append(this.cssClasses.rootAlternateRows, this.alternateRows)
             .append(this.cssClasses.rootVerticalAlignTop, (this.verticalAlign === "top"))
             .append(this.cssClasses.rootVerticalAlignMiddle, (this.verticalAlign === "middle")).toString();
@@ -28301,7 +28365,7 @@ var QuestionMatrixBaseModel = /** @class */ (function (_super) {
          * @see width
          */
         get: function () {
-            return this.getPropertyValue("columnMinWidth", "");
+            return this.getPropertyValue("columnMinWidth") || "";
         },
         set: function (val) {
             this.setPropertyValue("columnMinWidth", val);
@@ -28314,7 +28378,7 @@ var QuestionMatrixBaseModel = /** @class */ (function (_super) {
          * A width for the column that displays row titles (first column). Accepts CSS values.
          */
         get: function () {
-            return this.getPropertyValue("rowTitleWidth", "");
+            return this.getPropertyValue("rowTitleWidth") || "";
         },
         set: function (val) {
             this.setPropertyValue("rowTitleWidth", val);
@@ -35700,7 +35764,7 @@ var Question = /** @class */ (function (_super) {
         if (!!this.comment) {
             this.comment = undefined;
         }
-        this.isValueChangedDirectly = false;
+        this.setValueChangedDirectly(false);
     };
     Question.prototype.unbindValue = function () {
         this.clearValue();
@@ -35764,7 +35828,7 @@ var Question = /** @class */ (function (_super) {
     Question.prototype.clearValueIfInvisibleCore = function (reason) {
         if (this.canClearValueAsInvisible(reason)) {
             this.clearValue();
-            this.isValueChangedDirectly = undefined;
+            this.setValueChangedDirectly(undefined);
         }
     };
     Object.defineProperty(Question.prototype, "clearIfInvisible", {
@@ -36116,13 +36180,16 @@ var Question = /** @class */ (function (_super) {
     };
     Question.prototype.setDefaultValue = function () {
         var _this = this;
-        this.defaultValueRunner = this.getDefaultRunner(this.defaultValueRunner, this.defaultValueExpression);
-        this.setValueAndRunExpression(this.defaultValueRunner, this.getUnbindValue(this.defaultValue), function (val) {
+        this.setDefaultValueCore(function (val) {
             if (!_this.isTwoValueEquals(_this.value, val)) {
                 _this.value = val;
             }
         });
     };
+    Question.prototype.setDefaultValueCore = function (func) {
+        this.defaultValueRunner = this.getDefaultRunner(this.defaultValueRunner, this.defaultValueExpression);
+        this.setValueAndRunExpression(this.defaultValueRunner, this.getUnbindValue(this.defaultValue), function (val) { return func(val); });
+    };
     Question.prototype.isValueExpression = function (val) {
         return !!val && typeof val == "string" && val.length > 0 && val[0] == "=";
     };
@@ -36563,31 +36630,46 @@ var Question = /** @class */ (function (_super) {
     };
     //IQuestion
     Question.prototype.updateValueFromSurvey = function (newValue) {
+        var _this = this;
         newValue = this.getUnbindValue(newValue);
         if (!!this.valueFromDataCallback) {
             newValue = this.valueFromDataCallback(newValue);
         }
         if (!this.checkIsValueCorrect(newValue))
             return;
-        this.isChangingViaDefaultValue = this.isValueEmpty(newValue);
-        this.setQuestionValue(this.valueFromData(newValue));
-        this.isChangingViaDefaultValue = false;
+        var isEmpty = this.isValueEmpty(newValue);
+        if (!isEmpty && this.defaultValueExpression) {
+            this.setDefaultValueCore(function (val) {
+                _this.updateValueFromSurveyCore(newValue, _this.isTwoValueEquals(newValue, val));
+            });
+        }
+        else {
+            this.updateValueFromSurveyCore(newValue, isEmpty);
+        }
         this.updateDependedQuestions();
         this.updateIsAnswered();
     };
+    Question.prototype.updateValueFromSurveyCore = function (newValue, viaDefaultVal) {
+        this.isChangingViaDefaultValue = viaDefaultVal;
+        this.setQuestionValue(this.valueFromData(newValue));
+        this.isChangingViaDefaultValue = false;
+    };
     Question.prototype.updateCommentFromSurvey = function (newValue) {
         this.questionComment = newValue;
     };
     Question.prototype.onChangeQuestionValue = function (newValue) { };
-    Question.prototype.setValueChangedDirectly = function () {
-        this.isValueChangedDirectly = true;
+    Question.prototype.setValueChangedDirectly = function (val) {
+        this.isValueChangedDirectly = val;
+        if (!!this.setValueChangedDirectlyCallback) {
+            this.setValueChangedDirectlyCallback(val);
+        }
     };
     Question.prototype.setQuestionValue = function (newValue, updateIsAnswered) {
         if (updateIsAnswered === void 0) { updateIsAnswered = true; }
         newValue = this.convertToCorrectValue(newValue);
         var isEqual = this.isTwoValueEquals(this.questionValue, newValue);
-        if (!isEqual && !this.isChangingViaDefaultValue) {
-            this.setValueChangedDirectly();
+        if (!isEqual && !this.isChangingViaDefaultValue && !this.isParentChangingViaDefaultValue) {
+            this.setValueChangedDirectly(true);
         }
         this.questionValue = newValue;
         if (!isEqual) {
@@ -36598,6 +36680,14 @@ var Question = /** @class */ (function (_super) {
         if (updateIsAnswered)
             this.updateIsAnswered();
     };
+    Object.defineProperty(Question.prototype, "isParentChangingViaDefaultValue", {
+        get: function () {
+            var _a;
+            return ((_a = this.data) === null || _a === void 0 ? void 0 : _a.isChangingViaDefaultValue) === true;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Question.prototype.onSurveyValueChanged = function (newValue) { };
     Question.prototype.setVisibleIndex = function (val) {
         if (!this.isVisible ||
@@ -37060,7 +37150,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("question", [
     "enableIf:condition",
     "resetValueIf:condition",
     "setValueIf:condition",
-    { name: "setValueExpression:expression", visibleIf: function (obj) { return !!obj.setValueIf; } },
+    "setValueExpression:expression",
     "defaultValue:value",
     {
         name: "defaultValueExpression:expression",
@@ -40919,7 +41009,7 @@ var QuestionCommentModel = /** @class */ (function (_super) {
          * @see autoGrow
          */
         get: function () {
-            return this.getPropertyValue("allowResize") && (this.survey && this.survey.allowResizeComment);
+            return this.getPropertyValue("allowResize");
         },
         set: function (val) {
             this.setPropertyValue("allowResize", val);
@@ -40927,9 +41017,16 @@ var QuestionCommentModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionCommentModel.prototype, "renderedAllowResize", {
+        get: function () {
+            return this.allowResize && (this.survey && this.survey.allowResizeComment);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionCommentModel.prototype, "resizeStyle", {
         get: function () {
-            return this.allowResize ? "both" : "none";
+            return this.renderedAllowResize ? "both" : "none";
         },
         enumerable: false,
         configurable: true
@@ -40967,6 +41064,11 @@ var QuestionCommentModel = /** @class */ (function (_super) {
             event.stopPropagation();
         }
     };
+    QuestionCommentModel.prototype.setQuestionValue = function (newValue, updateIsAnswered) {
+        if (updateIsAnswered === void 0) { updateIsAnswered = true; }
+        _super.prototype.setQuestionValue.call(this, newValue, updateIsAnswered);
+        this.updateElement();
+    };
     QuestionCommentModel.prototype.onValueChanged = function () {
         _super.prototype.onValueChanged.call(this);
         this.updateElement();
@@ -41530,6 +41632,7 @@ var QuestionCustomModel = /** @class */ (function (_super) {
                 _this.onUpdateQuestionCssClasses(res, css);
             };
             res.hasCssErrorCallback = function () { return _this.errors.length > 0; };
+            res.setValueChangedDirectlyCallback = function (val) { _this.setValueChangedDirectly(val); };
         }
         return res;
     };
@@ -41597,6 +41700,16 @@ var QuestionCustomModel = /** @class */ (function (_super) {
             return this.getContentQuestionValue();
         return _super.prototype.getValueCore.call(this);
     };
+    QuestionCustomModel.prototype.setValueChangedDirectly = function (val) {
+        if (this.isSettingValueChanged)
+            return;
+        this.isSettingValueChanged = true;
+        _super.prototype.setValueChangedDirectly.call(this, val);
+        if (!!this.contentQuestion) {
+            this.contentQuestion.setValueChangedDirectly(val);
+        }
+        this.isSettingValueChanged = false;
+    };
     QuestionCustomModel.prototype.initElement = function (el) {
         var _this = this;
         _super.prototype.initElement.call(this, el);
@@ -43037,6 +43150,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 /**
  * A class that describes the File Upload question type.
  *
@@ -43184,6 +43298,7 @@ var QuestionFileModel = /** @class */ (function (_super) {
             iconSize: "auto",
             title: new _base__WEBPACK_IMPORTED_MODULE_3__["ComputedUpdater"](function () { return _this.takePhotoCaption; }),
             showTitle: new _base__WEBPACK_IMPORTED_MODULE_3__["ComputedUpdater"](function () { return !_this.isAnswered; }),
+            enabledIf: function () { return !_this.isInputReadOnly; },
             action: function () {
                 _this.startVideo();
             }
@@ -43194,6 +43309,7 @@ var QuestionFileModel = /** @class */ (function (_super) {
             iconSize: "auto",
             title: new _base__WEBPACK_IMPORTED_MODULE_3__["ComputedUpdater"](function () { return _this.clearButtonCaption; }),
             showTitle: false,
+            enabledIf: function () { return !_this.isInputReadOnly; },
             innerCss: new _base__WEBPACK_IMPORTED_MODULE_3__["ComputedUpdater"](function () { return _this.cssClasses.removeButton; }),
             action: function () {
                 _this.doClean();
@@ -43202,10 +43318,9 @@ var QuestionFileModel = /** @class */ (function (_super) {
         [_this.closeCameraAction, _this.changeCameraAction, _this.takePictureAction].forEach(function (action) {
             action.cssClasses = {};
         });
-        _this.registerFunctionOnPropertiesValueChanged(["currentMode", "isAnswered"], function () {
-            _this.updateActions();
+        _this.registerFunctionOnPropertiesValueChanged(["sourceType", "currentMode", "isAnswered"], function () {
+            _this.updateActionsVisibility();
         });
-        _this.updateActions();
         _this.actionsContainer.actions = [_this.chooseFileAction, _this.startCameraAction, _this.cleanAction];
         _this.fileNavigator.actions = [_this.prevFileAction, _this.fileIndexAction, _this.nextFileAction];
         return _this;
@@ -43233,8 +43348,7 @@ var QuestionFileModel = /** @class */ (function (_super) {
             var isUploading = this.isUploading;
             var isPlayingVideo = this.isPlayingVideo;
             var isDefaultV2Theme = this.isDefaultV2Theme;
-            var isReadOnly = this.isInputReadOnly;
-            return !isUploading && !isPlayingVideo && !isReadOnly && isDefaultV2Theme;
+            return !isUploading && !isPlayingVideo && isDefaultV2Theme;
         },
         enumerable: false,
         configurable: true
@@ -43270,7 +43384,7 @@ var QuestionFileModel = /** @class */ (function (_super) {
             if (!stream) {
                 _this.stopVideo();
             }
-        }, this.imageWidth, this.imageHeight);
+        }, Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["getRenderedSize"])(this.imageWidth), Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["getRenderedSize"])(this.imageHeight));
     };
     QuestionFileModel.prototype.stopVideo = function () {
         this.setIsPlayingVideo(false);
@@ -43576,9 +43690,10 @@ var QuestionFileModel = /** @class */ (function (_super) {
             }
         }
     };
-    QuestionFileModel.prototype.updateActions = function () {
-        this.chooseFileAction.visible = this.hasFileUI;
-        this.startCameraAction.visible = this.hasVideoUI;
+    QuestionFileModel.prototype.updateActionsVisibility = function () {
+        var isDesignMode = this.isDesignMode;
+        this.chooseFileAction.visible = (!isDesignMode && this.hasFileUI) || (isDesignMode && this.sourceType !== "camera");
+        this.startCameraAction.visible = (!isDesignMode && this.hasVideoUI) || (isDesignMode && this.sourceType !== "file");
         this.cleanAction.visible = !!this.isAnswered;
     };
     Object.defineProperty(QuestionFileModel.prototype, "inputTitle", {
@@ -43755,7 +43870,9 @@ var QuestionFileModel = /** @class */ (function (_super) {
                 if (_this.survey) {
                     _this.survey.uploadFiles(_this, _this.name, files, function (status, data) {
                         if (status === "error") {
+                            _this.errors.push(new _error__WEBPACK_IMPORTED_MODULE_4__["UploadingFileError"](data, _this));
                             _this.stateChanged("error");
+                            _this.stateChanged("loaded");
                         }
                         if (status === "success") {
                             _this.value = (_this.value || []).concat(data.map(function (r) {
@@ -43908,6 +44025,9 @@ var QuestionFileModel = /** @class */ (function (_super) {
         }
         return questionPlainData;
     };
+    QuestionFileModel.prototype.getImageWrapperCss = function (data) {
+        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_5__["CssClassBuilder"]().append(this.cssClasses.imageWrapper).append(this.cssClasses.imageWrapperDefaultImage, this.defaultImage(data)).toString();
+    };
     QuestionFileModel.prototype.getActionsContainerCss = function (css) {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_5__["CssClassBuilder"]()
             .append(css.actionsContainer)
@@ -43995,7 +44115,7 @@ var QuestionFileModel = /** @class */ (function (_super) {
     QuestionFileModel.prototype.endLoadingFromJson = function () {
         _super.prototype.endLoadingFromJson.call(this);
         this.updateCurrentMode();
-        this.updateActions();
+        this.updateActionsVisibility();
         this.loadPreview(this.value);
     };
     QuestionFileModel.prototype.needResponsiveness = function () {
@@ -44752,6 +44872,8 @@ var ImageItemValue = /** @class */ (function (_super) {
         },
         set: function (val) {
             this.setLocalizableStringText("imageLink", val);
+            this.imageNotLoaded = false;
+            this.videoNotLoaded = false;
         },
         enumerable: false,
         configurable: true
@@ -47416,7 +47538,7 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
     };
     QuestionMatrixDropdownModelBase.prototype.onStartRowAddingRemoving = function () {
         this.lockResetRenderedTable = true;
-        this.setValueChangedDirectly();
+        this.setValueChangedDirectly(true);
     };
     QuestionMatrixDropdownModelBase.prototype.onEndRowAdding = function () {
         this.lockResetRenderedTable = false;
@@ -48825,7 +48947,7 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
 _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("matrixdropdownbase", [
     {
         name: "columns:matrixdropdowncolumns",
-        className: "matrixdropdowncolumn",
+        className: "matrixdropdowncolumn", isArray: true
     },
     {
         name: "columnLayout",
@@ -49776,7 +49898,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("matrixdropdownc
     "requiredIf:condition",
     "resetValueIf:condition",
     "setValueIf:condition",
-    { name: "setValueExpression:expression", visibleIf: function (obj) { return !!obj.setValueIf; } },
+    "setValueExpression:expression",
     {
         name: "showInMultipleColumns:boolean",
         dependsOn: "cellType",
@@ -49881,6 +50003,7 @@ var QuestionMatrixDropdownRenderedCell = /** @class */ (function () {
         this.isActionsCell = false;
         this.isErrorsCell = false;
         this.isDragHandlerCell = false;
+        this.isDetailRowCell = false;
         this.classNameValue = "";
         this.idValue = QuestionMatrixDropdownRenderedCell.counter++;
     }
@@ -50041,6 +50164,7 @@ var QuestionMatrixDropdownRenderedRow = /** @class */ (function (_super) {
         var _this = _super.call(this) || this;
         _this.cssClasses = cssClasses;
         _this.isDetailRow = isDetailRow;
+        _this.hasEndActions = false;
         _this.isErrorsRow = false;
         _this.cells = [];
         _this.idValue = QuestionMatrixDropdownRenderedRow.counter++;
@@ -50064,9 +50188,13 @@ var QuestionMatrixDropdownRenderedRow = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionMatrixDropdownRenderedRow.prototype, "className", {
         get: function () {
+            var _a, _b;
             return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_5__["CssClassBuilder"]()
                 .append(this.cssClasses.row)
                 .append(this.cssClasses.detailRow, this.isDetailRow)
+                .append(this.cssClasses.rowHasPanel, (_a = this.row) === null || _a === void 0 ? void 0 : _a.hasPanel)
+                .append(this.cssClasses.expandedRow, ((_b = this.row) === null || _b === void 0 ? void 0 : _b.isDetailPanelShowing) && !this.isDetailRow)
+                .append(this.cssClasses.rowHasEndActions, this.hasEndActions)
                 .append(this.cssClasses.ghostRow, this.isGhostRow)
                 .append(this.cssClasses.rowAdditional, this.isAdditionalClasses)
                 .toString();
@@ -50419,7 +50547,7 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
             this.footerRow.cells.push(this.createHeaderCell(null));
         }
         if (this.hasActionCellInRows("start")) {
-            this.footerRow.cells.push(this.createHeaderCell(null));
+            this.footerRow.cells.push(this.createHeaderCell(null, "action"));
         }
         if (this.matrix.hasRowText) {
             this.footerRow.cells.push(this.createTextCell(this.matrix.getFooterText()));
@@ -50441,7 +50569,7 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
             }
         }
         if (this.hasActionCellInRows("end")) {
-            this.footerRow.cells.push(this.createHeaderCell(null));
+            this.footerRow.cells.push(this.createHeaderCell(null, "action"));
         }
     };
     QuestionMatrixDropdownRenderedTable.prototype.buildRows = function () {
@@ -50511,10 +50639,25 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
         return cell;
     };
     QuestionMatrixDropdownRenderedTable.prototype.getActionsCellClassName = function (cell) {
+        var _this = this;
         if (cell === void 0) { cell = null; }
-        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_5__["CssClassBuilder"]().append(this.cssClasses.actionsCell).append(this.cssClasses.actionsCellDrag, cell === null || cell === void 0 ? void 0 : cell.isDragHandlerCell).append(this.cssClasses.verticalCell, !this.matrix.isColumnLayoutHorizontal).toString();
+        var classBuilder = new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_5__["CssClassBuilder"]()
+            .append(this.cssClasses.actionsCell)
+            .append(this.cssClasses.actionsCellDrag, cell === null || cell === void 0 ? void 0 : cell.isDragHandlerCell)
+            .append(this.cssClasses.detailRowCell, cell === null || cell === void 0 ? void 0 : cell.isDetailRowCell)
+            .append(this.cssClasses.verticalCell, !this.matrix.isColumnLayoutHorizontal);
+        if (cell.isActionsCell) {
+            var actions = cell.item.value.actions;
+            if (this.cssClasses.actionsCellPrefix) {
+                actions.forEach(function (action) {
+                    classBuilder.append(_this.cssClasses.actionsCellPrefix + "--" + action.id);
+                });
+            }
+        }
+        return classBuilder.toString();
     };
-    QuestionMatrixDropdownRenderedTable.prototype.getRowActionsCell = function (rowIndex, location) {
+    QuestionMatrixDropdownRenderedTable.prototype.getRowActionsCell = function (rowIndex, location, isDetailRow) {
+        if (isDetailRow === void 0) { isDetailRow = false; }
         var rowActions = this.getRowActions(rowIndex, location);
         if (!this.isValueEmpty(rowActions)) {
             var cell = new QuestionMatrixDropdownRenderedCell();
@@ -50527,6 +50670,7 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
             cell.item = itemValue;
             cell.isActionsCell = true;
             cell.isDragHandlerCell = false;
+            cell.isDetailRowCell = isDetailRow;
             cell.className = this.getActionsCellClassName(cell);
             cell.row = this.matrix.visibleRows[rowIndex];
             return cell;
@@ -50560,6 +50704,7 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
         configurable: true
     });
     QuestionMatrixDropdownRenderedTable.prototype.setDefaultRowActions = function (row, actions) {
+        var _this = this;
         var matrix = this.matrix;
         if (this.hasRemoveRows && this.canRemoveRow(row)) {
             if (!this.showRemoveButtonAsIcon) {
@@ -50590,14 +50735,28 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
             }
         }
         if (row.hasPanel) {
-            actions.push(new _actions_action__WEBPACK_IMPORTED_MODULE_3__["Action"]({
-                id: "show-detail",
-                title: this.matrix.getLocalizationString("editText"),
-                showTitle: false,
-                location: "start",
-                component: "sv-matrix-detail-button",
-                data: { row: row, question: this.matrix },
-            }));
+            if (this.matrix.isMobile) {
+                actions.unshift(new _actions_action__WEBPACK_IMPORTED_MODULE_3__["Action"]({
+                    id: "show-detail-mobile",
+                    title: "Show Details",
+                    showTitle: true,
+                    location: "end",
+                    action: function (context) {
+                        context.title = row.isDetailPanelShowing ? _this.matrix.getLocalizationString("showDetails") : _this.matrix.getLocalizationString("hideDetails");
+                        row.showHideDetailPanelClick();
+                    },
+                }));
+            }
+            else {
+                actions.push(new _actions_action__WEBPACK_IMPORTED_MODULE_3__["Action"]({
+                    id: "show-detail",
+                    title: this.matrix.getLocalizationString("editText"),
+                    showTitle: false,
+                    location: "start",
+                    component: "sv-matrix-detail-button",
+                    data: { row: row, question: this.matrix },
+                }));
+            }
         }
     };
     QuestionMatrixDropdownRenderedTable.prototype.createErrorRow = function (row) {
@@ -50665,13 +50824,15 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
     QuestionMatrixDropdownRenderedTable.prototype.addRowActionsCell = function (row, renderedRow, location) {
         var rowIndex = this.matrix.visibleRows.indexOf(row);
         if (this.hasActionCellInRows(location)) {
-            var actions = this.getRowActionsCell(rowIndex, location);
+            var actions = this.getRowActionsCell(rowIndex, location, renderedRow.isDetailRow);
             if (!!actions) {
                 renderedRow.cells.push(actions);
+                renderedRow.hasEndActions = true;
             }
             else {
                 var cell = new QuestionMatrixDropdownRenderedCell();
                 cell.isEmpty = true;
+                cell.isDetailRowCell = renderedRow.isDetailRow;
                 renderedRow.cells.push(cell);
             }
         }
@@ -50701,7 +50862,12 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
         cell.className = this.cssClasses.detailPanelCell;
         res.cells.push(cell);
         if (!!actionsCell) {
-            res.cells.push(actionsCell);
+            if (this.matrix.isMobile) {
+                this.addRowActionsCell(row, res, "end");
+            }
+            else {
+                res.cells.push(actionsCell);
+            }
         }
         if (typeof this.matrix.onCreateDetailPanelRenderedRowCallback === "function") {
             this.matrix.onCreateDetailPanelRenderedRowCallback(res);
@@ -52144,7 +52310,7 @@ var MultipleTextEditorModel = /** @class */ (function (_super) {
 /**
  * A class that describes an item in a [Multiple Textboxes](https://surveyjs.io/form-library/documentation/api-reference/multiple-text-entry-question-model) question.
  *
- * [View Demo](/form-library/examples/multiple-text-box-question/)
+ * [View Demo](https://surveyjs.io/form-library/examples/multiple-text-box-question/)
  */
 var MultipleTextItemModel = /** @class */ (function (_super) {
     __extends(MultipleTextItemModel, _super);
@@ -52372,6 +52538,19 @@ var MultipleTextItemModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(MultipleTextItemModel.prototype, "defaultValueExpression", {
+        /**
+         * An expression used to calculate the [defaultValue](https://surveyjs.io/form-library/documentation/question#defaultValue).
+         */
+        get: function () {
+            return this.editor.defaultValueExpression;
+        },
+        set: function (val) {
+            this.editor.defaultValueExpression = val;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(MultipleTextItemModel.prototype, "minValueExpression", {
         /**
          * The minimum value specified as an expression. For example, `"minValueExpression": "today(-1)"` sets the minimum value to yesterday.
@@ -52985,6 +53164,7 @@ var QuestionMultipleTextModel = /** @class */ (function (_super) {
             .append(this.cssClasses.itemLabelAnswered, item.editor.isAnswered)
             .append(this.cssClasses.itemLabelAllowFocus, !this.isDesignMode)
             .append(this.cssClasses.itemLabelOnError, item.editor.errors.length > 0)
+            .append(this.cssClasses.itemWithCharacterCounter, !!item.getMaxLength())
             .toString();
     };
     QuestionMultipleTextModel.prototype.getItemCss = function () {
@@ -53090,6 +53270,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_4__["Serializer"].addClass("multipletextite
         name: "requiredErrorText:text",
         serializationProperty: "locRequiredErrorText",
     },
+    { name: "defaultValueExpression:expression", visible: false },
     {
         name: "minValueExpression:expression",
         category: "logic",
@@ -53115,7 +53296,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_4__["Serializer"].addClass("multipletextite
     return new MultipleTextItemModel("");
 });
 _jsonobject__WEBPACK_IMPORTED_MODULE_4__["Serializer"].addClass("multipletext", [
-    { name: "!items:textitems", className: "multipletextitem" },
+    { name: "!items:textitems", className: "multipletextitem", isArray: true },
     { name: "itemSize:number", minValue: 0 },
     { name: "colCount:number", default: 1, choices: [1, 2, 3, 4, 5] },
     { name: "itemErrorLocation", default: "default", choices: ["default", "top", "bottom"], visible: false }
@@ -53610,7 +53791,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
          *
          * If you want to customize individual tab titles, handle `SurveyModel`'s [`onGetDynamicPanelTabTitle`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onGetDynamicPanelTabTitle) event.
          *
-         * [View Demo](/form-library/examples/tabbed-interface-for-duplicate-group-option/ (linkStyle))
+         * [View Demo](https://surveyjs.io/form-library/examples/tabbed-interface-for-duplicate-group-option/ (linkStyle))
          * @see templateTitle
          * @see renderMode
          */
@@ -54397,7 +54578,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
          * - `"progressTop"` - Renders each panel as a card and displays a progress bar at the top. [View Demo](https://surveyjs.io/form-library/examples/questiontype-paneldynamic/)
          * - `"progressBottom"` - Renders each panel panel as a card and displays a progress bar at the bottom.
          * - `"progressTopBottom"` - Renders each panel as a card and displays a progress bar at the top and bottom.
-         * - `"tab"` - Renders each panel within a tab. Use the [`templateTabTitle`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#templateTabTitle) to specify a template for tab titles. [View Demo](/form-library/examples/tabbed-interface-for-duplicate-group-option/)
+         * - `"tab"` - Renders each panel within a tab. Use the [`templateTabTitle`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#templateTabTitle) to specify a template for tab titles. [View Demo](https://surveyjs.io/form-library/examples/tabbed-interface-for-duplicate-group-option/)
          */
         get: function () {
             return this.getPropertyValue("renderMode");
@@ -56151,14 +56332,14 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         get: function () {
             return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_6__["CssClassBuilder"]()
                 .append(this.cssClasses.root)
-                .append(this.cssClasses.rootMobileMod, _utils_devices__WEBPACK_IMPORTED_MODULE_7__["IsMobile"])
+                .append(this.cssClasses.rootMobileMod, this.isMobileMode())
                 .append(this.cssClasses.rootDisabled, this.isReadOnly)
                 .append(this.cssClasses.rootDesignMode, !!this.isDesignMode)
                 .append(this.cssClasses.itemOnError, this.hasCssError())
                 .append(this.cssClasses.rootDragHandleAreaIcon, _src_settings__WEBPACK_IMPORTED_MODULE_9__["settings"].rankingDragHandleArea === "icon")
                 .append(this.cssClasses.rootSelectToRankMod, this.selectToRankEnabled)
-                .append(this.cssClasses.rootSelectToRankAlignHorizontal, this.selectToRankEnabled && this.selectToRankAreasLayout === "horizontal")
-                .append(this.cssClasses.rootSelectToRankAlignVertical, this.selectToRankEnabled && this.selectToRankAreasLayout === "vertical")
+                .append(this.cssClasses.rootSelectToRankAlignHorizontal, this.selectToRankEnabled && this.renderedSelectToRankAreasLayout === "horizontal")
+                .append(this.cssClasses.rootSelectToRankAlignVertical, this.selectToRankEnabled && this.renderedSelectToRankAreasLayout === "vertical")
                 .toString();
         },
         enumerable: false,
@@ -56491,9 +56672,7 @@ var QuestionRankingModel = /** @class */ (function (_super) {
          * @see selectToRankAreasLayout
         */
         get: function () {
-            if (_utils_devices__WEBPACK_IMPORTED_MODULE_7__["IsMobile"])
-                return "vertical";
-            return this.getPropertyValue("selectToRankAreasLayout", "horizontal");
+            return this.getPropertyValue("selectToRankAreasLayout");
         },
         set: function (val) {
             this.setPropertyValue("selectToRankAreasLayout", val);
@@ -56501,6 +56680,18 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionRankingModel.prototype, "renderedSelectToRankAreasLayout", {
+        get: function () {
+            if (this.isMobileMode())
+                return "vertical";
+            return this.selectToRankAreasLayout;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    QuestionRankingModel.prototype.isMobileMode = function () {
+        return _utils_devices__WEBPACK_IMPORTED_MODULE_7__["IsMobile"];
+    };
     Object.defineProperty(QuestionRankingModel.prototype, "useFullItemSizeForShortcut", {
         get: function () {
             return this.getPropertyValue("useFullItemSizeForShortcut");
@@ -56870,7 +57061,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
          *
          * If you do not specify the `rateValues` property, rate values are generated automatically based upon the [`rateMin`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#rateMin), [`rateMax`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#rateMax), [`rateStep`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#rateStep), and [`rateCount`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#rateCount) property values.
          *
-         * [View Demo](/form-library/examples/rating-scale/ (linkStyle))
+         * [View Demo](https://surveyjs.io/form-library/examples/rating-scale/ (linkStyle))
          */
         get: function () {
             return this.getPropertyValue("rateValues");
@@ -56888,7 +57079,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
          *
          * Default value: 1
          *
-         * [View Demo](/form-library/examples/rating-scale/ (linkStyle))
+         * [View Demo](https://surveyjs.io/form-library/examples/rating-scale/ (linkStyle))
          * @see rateMax
          * @see rateStep
          * @see rateCount
@@ -56908,7 +57099,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
          *
          * Default value: 5
          *
-         * [View Demo](/form-library/examples/rating-scale/ (linkStyle))
+         * [View Demo](https://surveyjs.io/form-library/examples/rating-scale/ (linkStyle))
          * @see rateMin
          * @see rateStep
          * @see rateCount
@@ -56928,7 +57119,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
          *
          * Default value: 1
          *
-         * [View Demo](/form-library/examples/rating-scale/ (linkStyle))
+         * [View Demo](https://surveyjs.io/form-library/examples/rating-scale/ (linkStyle))
          * @see rateMin
          * @see rateMax
          * @see rateCount
@@ -57755,24 +57946,6 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 var defaultWidth = 300;
 var defaultHeight = 200;
-function resizeCanvas(canvas) {
-    var context = canvas.getContext("2d");
-    var devicePixelRatio = window.devicePixelRatio || 1;
-    var backingStoreRatio = context.webkitBackingStorePixelRatio ||
-        context.mozBackingStorePixelRatio ||
-        context.msBackingStorePixelRatio ||
-        context.oBackingStorePixelRatio ||
-        context.backingStorePixelRatio ||
-        1;
-    var ratio = devicePixelRatio / backingStoreRatio;
-    var oldWidth = canvas.width;
-    var oldHeight = canvas.height;
-    canvas.width = oldWidth * ratio;
-    canvas.height = oldHeight * ratio;
-    canvas.style.width = oldWidth + "px";
-    canvas.style.height = oldHeight + "px";
-    context.scale(ratio, ratio);
-}
 /**
  * A class that describes the Signature question type.
  *
@@ -57781,7 +57954,13 @@ function resizeCanvas(canvas) {
 var QuestionSignaturePadModel = /** @class */ (function (_super) {
     __extends(QuestionSignaturePadModel, _super);
     function QuestionSignaturePadModel(name) {
-        return _super.call(this, name) || this;
+        var _this = _super.call(this, name) || this;
+        _this.valueIsUpdatingInternally = false;
+        _this.updateValueHandler = function () {
+            _this.scaleCanvas(false, true);
+            _this.refreshCanvas();
+        };
+        return _this;
     }
     QuestionSignaturePadModel.prototype.getPenColorFromTheme = function () {
         var _survey = this.survey;
@@ -57807,7 +57986,9 @@ var QuestionSignaturePadModel = /** @class */ (function (_super) {
             var format = this.dataFormat === "jpeg" ? "image/jpeg" :
                 (this.dataFormat === "svg" ? "image/svg+xml" : "");
             var data = this.signaturePad.toDataURL(format);
+            this.valueIsUpdatingInternally = true;
             this.value = data;
+            this.valueIsUpdatingInternally = false;
         }
     };
     QuestionSignaturePadModel.prototype.getType = function () {
@@ -57829,10 +58010,44 @@ var QuestionSignaturePadModel = /** @class */ (function (_super) {
             this.updateColors(this.signaturePad);
         }
     };
+    QuestionSignaturePadModel.prototype.resizeCanvas = function () {
+        this.canvas.width = this.containerWidth;
+        this.canvas.height = this.containerHeight;
+    };
+    QuestionSignaturePadModel.prototype.scaleCanvas = function (refresh, resize) {
+        if (refresh === void 0) { refresh = true; }
+        if (resize === void 0) { resize = false; }
+        var canvas = this.canvas;
+        var scale = canvas.offsetWidth / this.containerWidth;
+        if (this.scale != scale || resize) {
+            this.scale = scale;
+            canvas.style.width = this.renderedCanvasWidth;
+            this.resizeCanvas();
+            this.signaturePad.minWidth = this.penMinWidth * scale;
+            this.signaturePad.maxWidth = this.penMaxWidth * scale;
+            canvas.getContext("2d").scale(1 / scale, 1 / scale);
+            if (refresh)
+                this.refreshCanvas();
+        }
+    };
+    QuestionSignaturePadModel.prototype.refreshCanvas = function () {
+        var data = this.value;
+        var canvas = this.canvas;
+        if (!data) {
+            canvas.getContext("2d").clearRect(0, 0, canvas.width * this.scale, canvas.height * this.scale);
+            this.signaturePad.clear();
+        }
+        else {
+            this.signaturePad.fromDataURL(data, { width: canvas.width * this.scale, height: canvas.height * this.scale });
+        }
+    };
     QuestionSignaturePadModel.prototype.initSignaturePad = function (el) {
         var _this = this;
         var canvas = el.getElementsByTagName("canvas")[0];
+        this.canvas = canvas;
+        this.resizeCanvas();
         var signaturePad = new signature_pad__WEBPACK_IMPORTED_MODULE_3__["default"](canvas, { backgroundColor: "#ffffff" });
+        this.signaturePad = signaturePad;
         if (this.isInputReadOnly) {
             signaturePad.off();
         }
@@ -57846,6 +58061,7 @@ var QuestionSignaturePadModel = /** @class */ (function (_super) {
         };
         this.updateColors(signaturePad);
         signaturePad.addEventListener("beginStroke", function () {
+            _this.scaleCanvas();
             _this.isDrawingValue = true;
             canvas.focus();
         }, { once: false });
@@ -57853,24 +58069,12 @@ var QuestionSignaturePadModel = /** @class */ (function (_super) {
             _this.isDrawingValue = false;
             _this.updateValue();
         }, { once: false });
-        var updateValueHandler = function () {
-            var data = _this.value;
-            canvas.width = _this.signatureWidth || defaultWidth;
-            canvas.height = _this.signatureHeight || defaultHeight;
-            resizeCanvas(canvas);
-            if (!data) {
-                signaturePad.clear();
-            }
-            else {
-                signaturePad.fromDataURL(data);
-            }
-        };
-        updateValueHandler();
+        this.updateValueHandler();
         this.readOnlyChangedCallback();
-        this.signaturePad = signaturePad;
         var propertyChangedHandler = function (sender, options) {
             if (options.name === "signatureWidth" || options.name === "signatureHeight" || options.name === "value") {
-                updateValueHandler();
+                if (!_this.valueIsUpdatingInternally)
+                    _this.updateValueHandler();
             }
         };
         this.onPropertyChanged.add(propertyChangedHandler);
@@ -57929,6 +58133,27 @@ var QuestionSignaturePadModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionSignaturePadModel.prototype, "containerHeight", {
+        get: function () {
+            return this.signatureHeight || defaultHeight;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(QuestionSignaturePadModel.prototype, "containerWidth", {
+        get: function () {
+            return this.signatureWidth || defaultWidth;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(QuestionSignaturePadModel.prototype, "renderedCanvasWidth", {
+        get: function () {
+            return this.signatureAutoScaleEnabled ? "100%" : this.containerWidth + "px";
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionSignaturePadModel.prototype, "height", {
         //todo: need to remove this property
         get: function () {
@@ -58049,6 +58274,15 @@ var QuestionSignaturePadModel = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: false })
     ], QuestionSignaturePadModel.prototype, "isDrawingValue", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: false })
+    ], QuestionSignaturePadModel.prototype, "signatureAutoScaleEnabled", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: 0.5 })
+    ], QuestionSignaturePadModel.prototype, "penMinWidth", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: 2.5 })
+    ], QuestionSignaturePadModel.prototype, "penMaxWidth", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({})
     ], QuestionSignaturePadModel.prototype, "showPlaceholder", void 0);
@@ -58077,6 +58311,21 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("signaturepad",
         category: "general",
         default: 200,
     },
+    {
+        name: "signatureAutoScaleEnabled:boolean",
+        category: "general",
+        default: false,
+    },
+    {
+        name: "penMinWidth:number",
+        category: "general",
+        default: 0.5,
+    },
+    {
+        name: "penMaxWidth:number",
+        category: "general",
+        default: 2.5,
+    },
     //need to remove this property
     {
         name: "height:number",
@@ -58089,10 +58338,13 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("signaturepad",
         default: true,
     },
     { name: "showPlaceholder:boolean", category: "general", default: true },
-    { name: "placeholder:text",
+    {
+        name: "placeholder:text",
         serializationProperty: "locPlaceholder",
         category: "general",
-        dependsOn: "showPlaceholder", visibleIf: function (obj) { return obj.showPlaceholder; } },
+        dependsOn: "showPlaceholder",
+        visibleIf: function (obj) { return obj.showPlaceholder; }
+    },
     {
         name: "backgroundImage:file",
         category: "general",
@@ -58353,8 +58605,9 @@ var QuestionTagboxModel = /** @class */ (function (_super) {
         }
     };
     QuestionTagboxModel.prototype.clearValue = function () {
+        var _a;
         _super.prototype.clearValue.call(this);
-        this.dropdownListModel.clear();
+        (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.clear();
     };
     Object.defineProperty(QuestionTagboxModel.prototype, "showClearButton", {
         get: function () {
@@ -58967,6 +59220,10 @@ var QuestionTextModel = /** @class */ (function (_super) {
     QuestionTextModel.prototype.hasPlaceholder = function () {
         return !this.isReadOnly && this.inputType !== "range";
     };
+    QuestionTextModel.prototype.getControlCssClassBuilder = function () {
+        return _super.prototype.getControlCssClassBuilder.call(this)
+            .append(this.cssClasses.constrolWithCharacterCounter, !!this.getMaxLength());
+    };
     QuestionTextModel.prototype.isReadOnlyRenderDiv = function () {
         return this.isReadOnly && _settings__WEBPACK_IMPORTED_MODULE_6__["settings"].readOnly.textRenderMode === "div";
     };
@@ -59395,12 +59652,14 @@ var QuestionTextBase = /** @class */ (function (_super) {
             }
         }
     };
-    QuestionTextBase.prototype.getControlClass = function () {
+    QuestionTextBase.prototype.getControlCssClassBuilder = function () {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_3__["CssClassBuilder"]()
             .append(this.cssClasses.root)
             .append(this.cssClasses.onError, this.hasCssError())
-            .append(this.cssClasses.controlDisabled, this.isReadOnly)
-            .toString();
+            .append(this.cssClasses.controlDisabled, this.isReadOnly);
+    };
+    QuestionTextBase.prototype.getControlClass = function () {
+        return this.getControlCssClassBuilder().toString();
     };
     Object.defineProperty(QuestionTextBase.prototype, "isNewA11yStructure", {
         //a11y
@@ -59630,6 +59889,20 @@ var QuestionNonValue = /** @class */ (function (_super) {
         if (path === void 0) { path = null; }
         return null;
     };
+    Object.defineProperty(QuestionNonValue.prototype, "ariaRole", {
+        get: function () {
+            return null;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(QuestionNonValue.prototype, "ariaRequired", {
+        get: function () {
+            return null;
+        },
+        enumerable: false,
+        configurable: true
+    });
     return QuestionNonValue;
 }(_question__WEBPACK_IMPORTED_MODULE_0__["Question"]));
 
@@ -60086,7 +60359,7 @@ var SurveyActionBarItem = /** @class */ (function (_super) {
         var title = this.item.tooltip || this.item.title;
         var buttonContent = this.renderButtonContent();
         var tabIndex = this.item.disableTabStop ? -1 : undefined;
-        var button = Object(_reactSurvey__WEBPACK_IMPORTED_MODULE_3__["attachKey2click"])(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { className: className, type: "button", disabled: this.item.disabled, onClick: function (args) { return _this.item.action(_this.item, _this.item.getIsTrusted(args)); }, title: title, tabIndex: tabIndex, "aria-checked": this.item.ariaChecked, "aria-expanded": this.item.ariaExpanded, role: this.item.ariaRole }, buttonContent), null, { processEsc: false });
+        var button = Object(_reactSurvey__WEBPACK_IMPORTED_MODULE_3__["attachKey2click"])(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { className: className, type: "button", disabled: this.item.disabled, onClick: function (args) { return _this.item.action(_this.item, _this.item.getIsTrusted(args)); }, title: title, tabIndex: tabIndex, "aria-checked": this.item.ariaChecked, "aria-expanded": this.item.ariaExpanded, role: this.item.ariaRole }, buttonContent), this.item, { processEsc: false });
         return button;
     };
     return SurveyActionBarItem;
@@ -60465,7 +60738,7 @@ var SurveyFileChooseButton = /** @class */ (function (_super) {
         configurable: true
     });
     SurveyFileChooseButton.prototype.render = function () {
-        return Object(_reactSurvey__WEBPACK_IMPORTED_MODULE_1__["attachKey2click"])(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { role: "button", tabIndex: 0, className: this.question.getChooseFileCss(), htmlFor: this.question.inputId, "aria-label": this.question.chooseButtonText },
+        return Object(_reactSurvey__WEBPACK_IMPORTED_MODULE_1__["attachKey2click"])(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { tabIndex: 0, className: this.question.getChooseFileCss(), htmlFor: this.question.inputId, "aria-label": this.question.chooseButtonText },
             (!!this.question.cssClasses.chooseFileIconId) ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { title: this.question.chooseButtonText, iconName: this.question.cssClasses.chooseFileIconId, size: "auto" }) : null,
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", null, this.question.chooseButtonText)));
     };
@@ -60541,7 +60814,7 @@ var SurveyFilePreview = /** @class */ (function (_super) {
                 return null;
             return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { key: _this.question.inputId + "_" + index, className: _this.question.cssClasses.preview, style: { display: _this.question.isPreviewVisible(index) ? undefined : "none" } },
                 _this.renderFileSign(_this.question.cssClasses.fileSign, val),
-                react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: _this.question.cssClasses.imageWrapper },
+                react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: _this.question.getImageWrapperCss(val) },
                     _this.question.canPreviewImage(val) ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("img", { src: val.content, style: { height: _this.question.imageHeight, width: _this.question.imageWidth }, alt: "File preview" })) : (_this.question.cssClasses.defaultImage ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { iconName: _this.question.cssClasses.defaultImageIconId, size: "auto", className: _this.question.cssClasses.defaultImage })) : null),
                     val.name && !_this.question.isReadOnly ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: _this.question.getRemoveButtonCss(), onClick: function () { return _this.question.doRemoveFile(val); } },
                         react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: _this.question.cssClasses.removeFile }, _this.question.removeFileCaption),
@@ -60790,7 +61063,7 @@ var ListItem = /** @class */ (function (_super) {
                 content.push(newElement);
             }
         }
-        var contentWrap = react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { style: contentWrapStyle, className: this.model.cssClasses.itemBody }, content);
+        var contentWrap = react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { style: contentWrapStyle, className: this.model.cssClasses.itemBody, title: this.item.locTitle.calculatedText }, content);
         var separator = this.item.needSeparator ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.model.cssClasses.itemSeparator }) : null;
         var isVisible = this.model.isItemVisible(this.item);
         var style = {
@@ -62901,7 +63174,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-controls": dropdownListModel.listElementId, "aria-activedescendant": dropdownListModel.ariaActivedescendant, placeholder: dropdownListModel.placeholderRendered, readOnly: !dropdownListModel.searchEnabled ? true : undefined, tabIndex: dropdownListModel.inputReadOnly ? undefined : -1, disabled: this.question.isInputReadOnly, 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 === null ? undefined : this.question.ariaExpanded === "true", "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-controls": dropdownListModel.listElementId, "aria-activedescendant": dropdownListModel.ariaActivedescendant, placeholder: dropdownListModel.placeholderRendered, readOnly: !dropdownListModel.searchEnabled ? true : undefined, tabIndex: dropdownListModel.inputReadOnly ? undefined : -1, disabled: this.question.isInputReadOnly, inputMode: dropdownListModel.inputMode, onChange: function (e) { onInputChange(e); }, onBlur: this.blur, onFocus: this.focus })),
             this.createClearButton()));
     };
     SurveyQuestionDropdownBase.prototype.createClearButton = function () {
@@ -63638,7 +63911,7 @@ var SurveyQuestionImagePicker = /** @class */ (function (_super) {
     SurveyQuestionImagePicker.prototype.renderElement = function () {
         var cssClasses = this.question.cssClasses;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("fieldset", { className: this.question.getSelectBaseRootCss() },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("legend", { role: "radio", "aria-label": this.question.locTitle.renderedHtml }),
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("legend", { className: "sv-hidden" }, this.question.locTitle.renderedHtml),
             this.question.hasColumns ? this.getColumns(cssClasses) : this.getItems(cssClasses)));
     };
     SurveyQuestionImagePicker.prototype.getColumns = function (cssClasses) {
@@ -65607,7 +65880,7 @@ var SurveyQuestionCheckbox = /** @class */ (function (_super) {
         var _this = this;
         var cssClasses = this.question.cssClasses;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("fieldset", { className: this.question.getSelectBaseRootCss(), ref: function (fieldset) { return (_this.setControl(fieldset)); }, role: this.question.a11y_input_ariaRole, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-describedby": this.question.a11y_input_ariaDescribedBy },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("legend", { role: "presentation", className: "sv-hidden" }),
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("legend", { className: "sv-hidden" }, this.question.locTitle.renderedHtml),
             this.getHeader(),
             this.question.hasColumns
                 ? this.getColumnedBody(cssClasses)
@@ -65787,7 +66060,7 @@ var SurveyQuestionCheckboxItem = /** @class */ (function (_super) {
         var itemLabel = !this.hideCaption ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.cssClasses.controlLabel }, this.renderLocString(this.item.locText, this.textStyle)) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: itemClass, role: "presentation" },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { className: labelClass },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { className: this.cssClasses.itemControl, type: "checkbox", name: this.question.name, value: this.item.value != "selectall" ? this.item.value : undefined, id: id, style: this.inputStyle, disabled: !this.question.getItemEnabled(this.item), checked: isChecked, onChange: onItemChanged }),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { className: this.cssClasses.itemControl, type: "checkbox", role: "option", name: this.question.name + this.item.value, value: this.item.value != "selectall" ? this.item.value : undefined, id: id, style: this.inputStyle, disabled: !this.question.getItemEnabled(this.item), checked: isChecked, onChange: onItemChanged }),
                 this.cssClasses.materialDecorator ?
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.cssClasses.materialDecorator }, this.question.itemSvgIcon ?
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: this.cssClasses.itemDecorator },
@@ -66903,7 +67176,7 @@ var SurveyQuestionMatrix = /** @class */ (function (_super) {
                 headers)));
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.tableWrapper, ref: function (root) { return (_this.setControl(root)); } },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("fieldset", null,
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("legend", { "aria-label": this.question.locTitle.renderedHtml }),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("legend", { className: "sv-hidden" }, this.question.locTitle.renderedHtml),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("table", { className: this.question.getTableCss() },
                     header,
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("tbody", null, rows)))));
@@ -67226,8 +67499,7 @@ var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
             matrixrow.push(this.renderCell(cells[i], i, cssClasses, reason));
         }
         var key = "row" + keyValue;
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], { key: key },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_matrix_row__WEBPACK_IMPORTED_MODULE_7__["MatrixRow"], { model: row, parentMatrix: this.question }, matrixrow)));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], { key: key }, (reason == "row-footer") ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("tr", null, matrixrow) : react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_matrix_row__WEBPACK_IMPORTED_MODULE_7__["MatrixRow"], { model: row, parentMatrix: this.question }, matrixrow)));
     };
     SurveyQuestionMatrixDropdownBase.prototype.renderCell = function (cell, index, cssClasses, reason) {
         var key = "cell" + index;
@@ -69007,7 +69279,7 @@ var SurveyQuestionSignaturePad = /** @class */ (function (_super) {
         var _this = this;
         var cssClasses = this.question.cssClasses;
         var clearButton = this.renderCleanButton();
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.root, ref: function (root) { return (_this.setControl(root)); }, style: { height: this.question.signatureHeight, width: this.question.signatureWidth } },
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.root, ref: function (root) { return (_this.setControl(root)); }, style: { width: this.question.renderedCanvasWidth } },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.placeholder, style: { display: this.question.needShowPlaceholder() ? "" : "none" } }, this.renderLocString(this.question.locPlaceholder)),
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null,
                 this.renderBackgroundImage(),
@@ -69017,7 +69289,7 @@ var SurveyQuestionSignaturePad = /** @class */ (function (_super) {
     SurveyQuestionSignaturePad.prototype.renderBackgroundImage = function () {
         if (!this.question.backgroundImage)
             return null;
-        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("img", { className: this.question.cssClasses.backgroundImage, src: this.question.backgroundImage, width: this.question.signatureWidth, height: this.question.signatureHeight });
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("img", { className: this.question.cssClasses.backgroundImage, src: this.question.backgroundImage, style: { width: this.question.renderedCanvasWidth } });
     };
     SurveyQuestionSignaturePad.prototype.renderCleanButton = function () {
         var _this = this;
@@ -69331,7 +69603,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.searchEnabled ? 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-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.searchEnabled ? 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-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"]));
@@ -72377,16 +72649,16 @@ var SurveyModel = /** @class */ (function (_super) {
          *
          * For information on event handler parameters, refer to descriptions within the interface.
          *
-         * [View Demo](/form-library/examples/customize-survey-with-css/ (linkStyle))
+         * [View Demo](https://surveyjs.io/form-library/examples/customize-survey-with-css/ (linkStyle))
          * @see css
          */
         _this.onUpdateQuestionCssClasses = _this.addEvent();
         /**
-         * An event that is raised before rendering a standalone panel and panels within [Dynamic Panel](/form-library/examples/duplicate-group-of-fields-in-form/). Use it to override default panel CSS classes.
+         * An event that is raised before rendering a standalone panel and panels within [Dynamic Panel](https://surveyjs.io/form-library/examples/duplicate-group-of-fields-in-form/). Use it to override default panel CSS classes.
          *
          * For information on event handler parameters, refer to descriptions within the interface.
          *
-         * [View Demo](/form-library/examples/customize-survey-with-css/ (linkStyle))
+         * [View Demo](https://surveyjs.io/form-library/examples/customize-survey-with-css/ (linkStyle))
          * @see css
          */
         _this.onUpdatePanelCssClasses = _this.addEvent();
@@ -72395,7 +72667,7 @@ var SurveyModel = /** @class */ (function (_super) {
          *
          * For information on event handler parameters, refer to descriptions within the interface.
          *
-         * [View Demo](/form-library/examples/customize-survey-with-css/ (linkStyle))
+         * [View Demo](https://surveyjs.io/form-library/examples/customize-survey-with-css/ (linkStyle))
          * @see css
          */
         _this.onUpdatePageCssClasses = _this.addEvent();
@@ -72404,7 +72676,7 @@ var SurveyModel = /** @class */ (function (_super) {
          *
          * For information on event handler parameters, refer to descriptions within the interface.
          *
-         * [View Demo](/form-library/examples/customize-survey-with-css/ (linkStyle))
+         * [View Demo](https://surveyjs.io/form-library/examples/customize-survey-with-css/ (linkStyle))
          * @see css
          */
         _this.onUpdateChoiceItemCss = _this.addEvent();
@@ -72496,7 +72768,7 @@ var SurveyModel = /** @class */ (function (_super) {
          */
         _this.onMatrixRowAdding = _this.addEvent();
         /**
-         * This event is obsolete. Use the [`onMatrixRowAdding`](/form-library/documentation/api-reference/survey-data-model#onMatrixRowAdding) event instead.
+         * This event is obsolete. Use the [`onMatrixRowAdding`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onMatrixRowAdding) event instead.
          */
         _this.onMatrixBeforeRowAdded = _this.onMatrixRowAdding;
         /**
@@ -72516,7 +72788,7 @@ var SurveyModel = /** @class */ (function (_super) {
          */
         _this.onMatrixRenderRemoveButton = _this.addEvent();
         /**
-         * This event is obsolete. Use the [`onMatrixRenderRemoveButton`](/form-library/documentation/api-reference/survey-data-model#onMatrixRenderRemoveButton) event instead.
+         * This event is obsolete. Use the [`onMatrixRenderRemoveButton`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onMatrixRenderRemoveButton) event instead.
          */
         _this.onMatrixAllowRemoveRow = _this.onMatrixRenderRemoveButton;
         /**
@@ -72535,7 +72807,7 @@ var SurveyModel = /** @class */ (function (_super) {
          */
         _this.onAfterRenderMatrixCell = _this.addEvent();
         /**
-         * This event is obsolete. Use the [`onAfterRenderMatrixCell`](/form-library/documentation/api-reference/survey-data-model#onAfterRenderMatrixCell) event instead.
+         * This event is obsolete. Use the [`onAfterRenderMatrixCell`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onAfterRenderMatrixCell) event instead.
          */
         _this.onMatrixAfterCellRender = _this.onAfterRenderMatrixCell;
         /**
@@ -72593,7 +72865,7 @@ var SurveyModel = /** @class */ (function (_super) {
          *
          * For information on event handler parameters, refer to descriptions within the interface.
          *
-         * [View Demo](/form-library/examples/tabbed-interface-for-duplicate-group-option/ (linkStyle))
+         * [View Demo](https://surveyjs.io/form-library/examples/tabbed-interface-for-duplicate-group-option/ (linkStyle))
          */
         _this.onGetDynamicPanelTabTitle = _this.addEvent();
         /**
@@ -73022,7 +73294,7 @@ var SurveyModel = /** @class */ (function (_super) {
         /**
          * Gets or sets an object in which keys are UI elements and values are CSS classes applied to them.
          *
-         * [View Demo](/form-library/examples/customize-survey-with-css/ (linkStyle))
+         * [View Demo](https://surveyjs.io/form-library/examples/customize-survey-with-css/ (linkStyle))
          */
         get: function () {
             if (!this.cssValue) {
@@ -79820,6 +80092,11 @@ var SurveyModel = /** @class */ (function (_super) {
                     }
                 }
             }
+            else if (isStrCiEqual(layoutElement.id, "advanced-header")) {
+                if (this.state === "running" && layoutElement.container === container) {
+                    containerLayoutElements.push(layoutElement);
+                }
+            }
             else {
                 if (Array.isArray(layoutElement.container) && layoutElement.container.indexOf(container) !== -1 || layoutElement.container === container) {
                     containerLayoutElements.push(layoutElement);
@@ -79834,8 +80111,8 @@ var SurveyModel = /** @class */ (function (_super) {
     /**
      * Applies a specified theme to the survey.
      *
-     * [Themes & Styles](/form-library/documentation/manage-default-themes-and-styles (linkStyle))
-     * @param theme An [`ITheme`](/form-library/documentation/api-reference/itheme) object with theme settings.
+     * [Themes & Styles](https://surveyjs.io/form-library/documentation/manage-default-themes-and-styles (linkStyle))
+     * @param theme An [`ITheme`](https://surveyjs.io/form-library/documentation/api-reference/itheme) object with theme settings.
      */
     SurveyModel.prototype.applyTheme = function (theme) {
         var _this = this;
@@ -79843,15 +80120,15 @@ var SurveyModel = /** @class */ (function (_super) {
             return;
         Object.keys(theme).forEach(function (key) {
             if (key === "header") {
-                _this.removeLayoutElement("cover");
-                var newCoverModel_1 = new _header__WEBPACK_IMPORTED_MODULE_20__["Cover"]();
-                newCoverModel_1.fromTheme(theme);
+                _this.removeLayoutElement("advanced-header");
+                var advHeader_1 = new _header__WEBPACK_IMPORTED_MODULE_20__["Cover"]();
+                advHeader_1.fromTheme(theme);
                 _this.layoutElements.push({
-                    id: "cover",
+                    id: "advanced-header",
                     container: "header",
                     component: "sv-header",
-                    data: newCoverModel_1,
-                    processResponsiveness: function (width) { return newCoverModel_1.processResponsiveness(width); }
+                    data: advHeader_1,
+                    processResponsiveness: function (width) { return advHeader_1.processResponsiveness(width); }
                 });
             }
             if (key === "isPanelless") {
@@ -79940,27 +80217,27 @@ var SurveyModel = /** @class */ (function (_super) {
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({
             onSet: function (newValue, target) {
                 if (newValue === "advanced") {
-                    var layoutElement = target.layoutElements.filter(function (a) { return a.id === "cover"; })[0];
+                    var layoutElement = target.layoutElements.filter(function (a) { return a.id === "advanced-header"; })[0];
                     if (!layoutElement) {
-                        var cover = new _header__WEBPACK_IMPORTED_MODULE_20__["Cover"]();
-                        cover.logoPositionX = target.logoPosition === "right" ? "right" : "left";
-                        cover.logoPositionY = "middle";
-                        cover.titlePositionX = target.logoPosition === "right" ? "left" : "right";
-                        cover.titlePositionY = "middle";
-                        cover.descriptionPositionX = target.logoPosition === "right" ? "left" : "right";
-                        cover.descriptionPositionY = "middle";
-                        cover.survey = target;
+                        var advHeader = new _header__WEBPACK_IMPORTED_MODULE_20__["Cover"]();
+                        advHeader.logoPositionX = target.logoPosition === "right" ? "right" : "left";
+                        advHeader.logoPositionY = "middle";
+                        advHeader.titlePositionX = target.logoPosition === "right" ? "left" : "right";
+                        advHeader.titlePositionY = "middle";
+                        advHeader.descriptionPositionX = target.logoPosition === "right" ? "left" : "right";
+                        advHeader.descriptionPositionY = "middle";
+                        advHeader.survey = target;
                         target.layoutElements.unshift({
-                            id: "cover",
+                            id: "advanced-header",
                             container: "header",
                             component: "sv-header",
-                            data: cover,
-                            processResponsiveness: function (width) { return cover.processResponsiveness(width); }
+                            data: advHeader,
+                            processResponsiveness: function (width) { return advHeader.processResponsiveness(width); }
                         });
                     }
                 }
                 else {
-                    target.removeLayoutElement("cover");
+                    target.removeLayoutElement("advanced-header");
                 }
             }
         })
@@ -80059,13 +80336,13 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("survey", [
     },
     {
         name: "completedHtmlOnCondition:htmlconditions",
-        className: "htmlconditionitem",
+        className: "htmlconditionitem", isArray: true
     },
     { name: "loadingHtml:html", serializationProperty: "locLoadingHtml" },
-    { name: "pages:surveypages", className: "page" },
+    { name: "pages:surveypages", className: "page", isArray: true },
     {
-        name: "questions",
-        alternativeName: "elements",
+        name: "elements",
+        alternativeName: "questions",
         baseClassName: "question",
         visible: false,
         isLightSerializable: false,
@@ -80085,7 +80362,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("survey", [
     },
     {
         name: "calculatedValues:calculatedvalues",
-        className: "calculatedvalue",
+        className: "calculatedvalue", isArray: true
     },
     { name: "surveyId", visible: false },
     { name: "surveyPostId", visible: false },
@@ -80104,7 +80381,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("survey", [
     "navigateToUrl",
     {
         name: "navigateToUrlOnCondition:urlconditions",
-        className: "urlconditionitem",
+        className: "urlconditionitem", isArray: true
     },
     {
         name: "questionsOrder",
@@ -81967,7 +82244,7 @@ var Camera = /** @class */ (function () {
             this.hasCameraCallback(callback);
         }
     };
-    Camera.prototype.getMediaConstraints = function (videoEl) {
+    Camera.prototype.getMediaConstraints = function (videoSize) {
         var devices = Camera.cameraList;
         if (!Array.isArray(devices) || devices.length < 1)
             return undefined;
@@ -81981,9 +82258,13 @@ var Camera = /** @class */ (function () {
         else {
             videoConstraints.facingMode = Camera.cameraFacingMode;
         }
-        if (videoEl) {
-            videoConstraints.width = { exact: videoEl.width ? videoEl.width : videoEl.scrollWidth };
-            videoConstraints.height = { exact: videoEl.height ? videoEl.height : videoEl.scrollHeight };
+        if (videoSize) {
+            if (videoSize === null || videoSize === void 0 ? void 0 : videoSize.height) {
+                videoConstraints.height = { ideal: videoSize.height };
+            }
+            if (videoSize === null || videoSize === void 0 ? void 0 : videoSize.width) {
+                videoConstraints.width = { ideal: videoSize.width };
+            }
         }
         return {
             video: videoConstraints,
@@ -81998,19 +82279,11 @@ var Camera = /** @class */ (function () {
             callback(undefined);
             return;
         }
-        if (imageWidth) {
-            videoEl.width = imageWidth;
-        }
-        else {
-            videoEl.style.width = "100%";
-        }
-        if (imageHeight) {
-            videoEl.height = imageHeight;
-        }
-        else {
-            videoEl.style.height = "100%";
-        }
-        var mediaConstraints = this.getMediaConstraints(videoEl);
+        videoEl.style.width = "100%";
+        videoEl.style.height = "auto";
+        videoEl.style.height = "100%";
+        videoEl.style.objectFit = "contain";
+        var mediaConstraints = this.getMediaConstraints({ width: imageWidth, height: imageHeight });
         navigator.mediaDevices.getUserMedia(mediaConstraints).then(function (stream) {
             var _a;
             videoEl.srcObject = stream;
@@ -82025,6 +82298,9 @@ var Camera = /** @class */ (function () {
             callback(undefined);
         });
     };
+    Camera.prototype.getImageSize = function (videoEl) {
+        return { width: videoEl.videoWidth, height: videoEl.videoHeight };
+    };
     Camera.prototype.snap = function (videoElementId, callback) {
         if ("undefined" === typeof document)
             return false;
@@ -82033,8 +82309,9 @@ var Camera = /** @class */ (function () {
         if (!videoEl)
             return false;
         var canvasEl = root.createElement("canvas");
-        canvasEl.height = videoEl.scrollHeight;
-        canvasEl.width = videoEl.scrollWidth;
+        var imageSize = this.getImageSize(videoEl);
+        canvasEl.height = imageSize.height;
+        canvasEl.width = imageSize.width;
         var context = canvasEl.getContext("2d");
         /*
         if(this._facingMode == 'user'){
@@ -82894,7 +83171,9 @@ function increaseHeightByContent(element, getComputedStyle) {
         getComputedStyle = function (elt) { return window.getComputedStyle(elt); };
     var style = getComputedStyle(element);
     element.style.height = "auto";
-    element.style.height = (element.scrollHeight + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth)) + "px";
+    if (!!element.scrollHeight) {
+        element.style.height = (element.scrollHeight + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth)) + "px";
+    }
 }
 function getOriginalEvent(event) {
     return event.originalEvent || event;