survey-core 1.9.114 → 1.9.116

package/survey.core.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;
             }
         }
@@ -9229,8 +9259,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
@@ -13984,6 +14014,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);
@@ -17214,7 +17253,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";
@@ -17231,6 +17270,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");
@@ -18130,6 +18170,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;
@@ -18773,6 +18817,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();
@@ -18828,7 +18883,7 @@ var JsonObject = /** @class */ (function () {
                 }
                 continue;
             }
-            this.valueToObj(jsonObj[key], obj, property);
+            this.valueToObj(jsonObj[key], obj, property, jsonObj);
         }
         if (obj.endLoadingFromJson) {
             obj.endLoadingFromJson();
@@ -18902,7 +18957,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);
@@ -18910,6 +18965,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;
@@ -20150,6 +20210,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",
@@ -20540,9 +20602,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();
@@ -20554,7 +20618,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);
@@ -20567,7 +20631,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);
@@ -26595,7 +26659,7 @@ var Question = /** @class */ (function (_super) {
         if (!!this.comment) {
             this.comment = undefined;
         }
-        this.isValueChangedDirectly = false;
+        this.setValueChangedDirectly(false);
     };
     Question.prototype.unbindValue = function () {
         this.clearValue();
@@ -26659,7 +26723,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", {
@@ -27011,13 +27075,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] == "=";
     };
@@ -27458,31 +27525,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) {
@@ -27493,6 +27575,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 ||
@@ -27955,7 +28045,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",
@@ -31814,7 +31904,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);
@@ -31822,9 +31912,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
@@ -31862,6 +31959,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();
@@ -32425,6 +32527,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;
     };
@@ -32492,6 +32595,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);
@@ -33932,6 +34045,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 /**
  * A class that describes the File Upload question type.
  *
@@ -34079,6 +34193,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();
             }
@@ -34089,6 +34204,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();
@@ -34097,10 +34213,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;
@@ -34128,8 +34243,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
@@ -34165,7 +34279,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);
@@ -34471,9 +34585,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", {
@@ -34650,7 +34765,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) {
@@ -34803,6 +34920,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)
@@ -34890,7 +35010,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 () {
@@ -35647,6 +35767,8 @@ var ImageItemValue = /** @class */ (function (_super) {
         },
         set: function (val) {
             this.setLocalizableStringText("imageLink", val);
+            this.imageNotLoaded = false;
+            this.videoNotLoaded = false;
         },
         enumerable: false,
         configurable: true
@@ -38311,7 +38433,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;
@@ -39720,7 +39842,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",
@@ -40671,7 +40793,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",
@@ -40776,6 +40898,7 @@ var QuestionMatrixDropdownRenderedCell = /** @class */ (function () {
         this.isActionsCell = false;
         this.isErrorsCell = false;
         this.isDragHandlerCell = false;
+        this.isDetailRowCell = false;
         this.classNameValue = "";
         this.idValue = QuestionMatrixDropdownRenderedCell.counter++;
     }
@@ -40936,6 +41059,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++;
@@ -40959,9 +41083,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();
@@ -41314,7 +41442,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()));
@@ -41336,7 +41464,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 () {
@@ -41406,10 +41534,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();
@@ -41422,6 +41565,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;
@@ -41455,6 +41599,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) {
@@ -41485,14 +41630,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) {
@@ -41560,13 +41719,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);
             }
         }
@@ -41596,7 +41757,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);
@@ -43039,7 +43205,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);
@@ -43267,6 +43433,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.
@@ -43880,6 +44059,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 () {
@@ -43985,6 +44165,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_4__["Serializer"].addClass("multipletextite
         name: "requiredErrorText:text",
         serializationProperty: "locRequiredErrorText",
     },
+    { name: "defaultValueExpression:expression", visible: false },
     {
         name: "minValueExpression:expression",
         category: "logic",
@@ -44010,7 +44191,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 }
@@ -44505,7 +44686,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
          */
@@ -45292,7 +45473,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");
@@ -47046,14 +47227,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,
@@ -47386,9 +47567,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);
@@ -47396,6 +47575,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");
@@ -47765,7 +47956,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");
@@ -47783,7 +47974,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
@@ -47803,7 +47994,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
@@ -47823,7 +48014,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
@@ -48650,24 +48841,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.
  *
@@ -48676,7 +48849,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;
@@ -48702,7 +48881,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 () {
@@ -48724,10 +48905,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();
         }
@@ -48741,6 +48956,7 @@ var QuestionSignaturePadModel = /** @class */ (function (_super) {
         };
         this.updateColors(signaturePad);
         signaturePad.addEventListener("beginStroke", function () {
+            _this.scaleCanvas();
             _this.isDrawingValue = true;
             canvas.focus();
         }, { once: false });
@@ -48748,24 +48964,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);
@@ -48824,6 +49028,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 () {
@@ -48944,6 +49169,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);
@@ -48972,6 +49206,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",
@@ -48984,10 +49233,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",
@@ -49248,8 +49500,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 () {
@@ -49862,6 +50115,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";
     };
@@ -50290,12 +50547,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
@@ -50525,6 +50784,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"]));
 
@@ -53512,16 +53785,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();
@@ -53530,7 +53803,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();
@@ -53539,7 +53812,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();
@@ -53631,7 +53904,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;
         /**
@@ -53651,7 +53924,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;
         /**
@@ -53670,7 +53943,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;
         /**
@@ -53728,7 +54001,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();
         /**
@@ -54157,7 +54430,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) {
@@ -60955,6 +61228,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);
@@ -60969,8 +61247,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;
@@ -60978,15 +61256,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") {
@@ -61075,27 +61353,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");
                 }
             }
         })
@@ -61194,13 +61472,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,
@@ -61220,7 +61498,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 },
@@ -61239,7 +61517,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("survey", [
     "navigateToUrl",
     {
         name: "navigateToUrlOnCondition:urlconditions",
-        className: "urlconditionitem",
+        className: "urlconditionitem", isArray: true
     },
     {
         name: "questionsOrder",
@@ -63102,7 +63380,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;
@@ -63116,9 +63394,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,
@@ -63133,19 +63415,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;
@@ -63160,6 +63434,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;
@@ -63168,8 +63445,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'){
@@ -64029,7 +64307,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;