survey-react-ui 1.9.113 → 1.9.115

package/survey-react-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.113
+ * surveyjs - Survey JavaScript library v1.9.115
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -727,9 +727,9 @@ var Base = /** @class */ (function () {
             Array.isArray(oldValue) &&
             !!this.arraysInfo &&
             (!val || Array.isArray(val))) {
-            if (this.isTwoValueEquals(oldValue, val))
-                return;
-            this.setArrayPropertyDirectly(name, val);
+            if (!this.isTwoValueEquals(oldValue, val)) {
+                this.setArrayPropertyDirectly(name, val);
+            }
         }
         else {
             this.setPropertyValueDirectly(name, val);
@@ -1971,7 +1971,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!***************************************!*\
   !*** ./src/entries/react-ui-model.ts ***!
   \***************************************/
-/*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, CoverCellComponent, CoverComponent, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent */
+/*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2229,10 +2229,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _react_components_character_counter__WEBPACK_IMPORTED_MODULE_74__ = __webpack_require__(/*! ../react/components/character-counter */ "./src/react/components/character-counter.tsx");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CharacterCounterComponent", function() { return _react_components_character_counter__WEBPACK_IMPORTED_MODULE_74__["CharacterCounterComponent"]; });
 
-/* harmony import */ var _react_components_cover__WEBPACK_IMPORTED_MODULE_75__ = __webpack_require__(/*! ../react/components/cover */ "./src/react/components/cover.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CoverCellComponent", function() { return _react_components_cover__WEBPACK_IMPORTED_MODULE_75__["CoverCellComponent"]; });
+/* harmony import */ var _react_components_header__WEBPACK_IMPORTED_MODULE_75__ = __webpack_require__(/*! ../react/components/header */ "./src/react/components/header.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HeaderMobile", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_75__["HeaderMobile"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HeaderCell", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_75__["HeaderCell"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CoverComponent", function() { return _react_components_cover__WEBPACK_IMPORTED_MODULE_75__["CoverComponent"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Header", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_75__["Header"]; });
 
 /* harmony import */ var _react_string_viewer__WEBPACK_IMPORTED_MODULE_76__ = __webpack_require__(/*! ../react/string-viewer */ "./src/react/string-viewer.tsx");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyLocStringViewer", function() { return _react_string_viewer__WEBPACK_IMPORTED_MODULE_76__["SurveyLocStringViewer"]; });
@@ -2333,7 +2335,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!*********************************!*\
   !*** ./src/entries/react-ui.ts ***!
   \*********************************/
-/*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, CoverCellComponent, CoverComponent, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SurveyModel, SurveyWindowModel, settings, surveyLocalization, surveyStrings, Model, ResponsivityManager, VerticalResponsivityManager, unwrap */
+/*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SurveyModel, SurveyWindowModel, settings, surveyLocalization, surveyStrings, Model, ResponsivityManager, VerticalResponsivityManager, unwrap */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2517,9 +2519,11 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CharacterCounterComponent", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["CharacterCounterComponent"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CoverCellComponent", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["CoverCellComponent"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HeaderMobile", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["HeaderMobile"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CoverComponent", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["CoverComponent"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HeaderCell", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["HeaderCell"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Header", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["Header"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyLocStringViewer", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["SurveyLocStringViewer"]; });
 
@@ -2556,7 +2560,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.113", "survey-react-ui");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.115", "survey-react-ui");
 
 
 /***/ }),
@@ -5801,6 +5805,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);
@@ -7191,7 +7204,7 @@ if (!String.prototype["format"]) {
 /*!***************************!*\
   !*** ./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";
@@ -7208,6 +7221,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");
@@ -7239,7 +7253,11 @@ var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from
 function ensureLocString(target, options, key) {
     var locString = target.getLocalizableString(key);
     if (!locString) {
-        locString = target.createLocalizableString(key, target, true);
+        var defaultStr = void 0;
+        if (typeof options.localizable === "object" && options.localizable.defaultStr) {
+            defaultStr = options.localizable.defaultStr;
+        }
+        locString = target.createLocalizableString(key, target, true, defaultStr);
         if (typeof options.localizable === "object" &&
             typeof options.localizable.onGetTextCallback === "function") {
             locString.onGetTextCallback = options.localizable.onGetTextCallback;
@@ -8103,6 +8121,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;
@@ -8568,7 +8590,7 @@ var JsonMetadata = /** @class */ (function () {
         if (prop.hasChoices) {
             var enumRes = prop.getChoices(null);
             if (Array.isArray(enumRes) && enumRes.length > 0) {
-                res.enum = enumRes;
+                res.enum = this.getChoicesValues(enumRes);
             }
         }
         if (!!refType) {
@@ -8631,6 +8653,18 @@ var JsonMetadata = /** @class */ (function () {
             res.required = chemaProps.required;
         }
     };
+    JsonMetadata.prototype.getChoicesValues = function (enumRes) {
+        var res = new Array();
+        enumRes.forEach(function (item) {
+            if (typeof item === "object" && item.value !== undefined) {
+                res.push(item.value);
+            }
+            else {
+                res.push(item);
+            }
+        });
+        return res;
+    };
     return JsonMetadata;
 }());
 
@@ -8734,6 +8768,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();
@@ -8789,7 +8834,7 @@ var JsonObject = /** @class */ (function () {
                 }
                 continue;
             }
-            this.valueToObj(jsonObj[key], obj, property);
+            this.valueToObj(jsonObj[key], obj, property, jsonObj);
         }
         if (obj.endLoadingFromJson) {
             obj.endLoadingFromJson();
@@ -8863,7 +8908,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);
@@ -8871,6 +8916,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;
@@ -9696,7 +9746,7 @@ var englishStrings = {
     loadingFile: "Loading...",
     chooseFile: "Choose file(s)...",
     noFileChosen: "No file chosen",
-    fileDragAreaPlaceholder: "Drag and drop a file here or click the button below to select a file to upload.",
+    filePlaceholder: "Drag and drop a file here or click the button below to select a file to upload.",
     confirmDelete: "Do you want to delete the record?",
     keyDuplicationError: "This value should be unique.",
     addColumn: "Add Column",
@@ -9705,6 +9755,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",
@@ -9725,8 +9777,8 @@ var englishStrings = {
     signaturePlaceHolder: "Sign here",
     chooseFileCaption: "Select File",
     takePhotoCaption: "Take Photo",
-    cameraPlaceHolder: "Click the button below to take a photo using the camera.",
-    fileCameraDragAreaPlaceHolder: "Drag and drop or select a file to upload or take a photo using the camera.",
+    photoPlaceholder: "Click the button below to take a photo using the camera.",
+    fileOrPhotoPlaceholder: "Drag and drop or select a file to upload or take a photo using the camera.",
     replaceFileCaption: "Replace file",
     removeFileCaption: "Remove this file",
     booleanCheckedLabel: "Yes",
@@ -10517,106 +10569,6 @@ _element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.re
 });
 
 
-/***/ }),
-
-/***/ "./src/react/components/cover.tsx":
-/*!****************************************!*\
-  !*** ./src/react/components/cover.tsx ***!
-  \****************************************/
-/*! exports provided: CoverCellComponent, CoverComponent */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CoverCellComponent", function() { return CoverCellComponent; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CoverComponent", function() { return CoverComponent; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../reactquestion_element */ "./src/react/reactquestion_element.tsx");
-/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../element-factory */ "./src/react/element-factory.tsx");
-/* harmony import */ var _title_title_element__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./title/title-element */ "./src/react/components/title/title-element.tsx");
-var __extends = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-
-
-
-
-var CoverCellComponent = /** @class */ (function (_super) {
-    __extends(CoverCellComponent, _super);
-    function CoverCellComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Object.defineProperty(CoverCellComponent.prototype, "model", {
-        get: function () {
-            return this.props.model;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    CoverCellComponent.prototype.renderLogoImage = function () {
-        var componentName = this.model.survey.getElementWrapperComponentName(this.model.survey, "logo-image");
-        var componentData = this.model.survey.getElementWrapperComponentData(this.model.survey, "logo-image");
-        return _element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.createElement(componentName, {
-            data: componentData,
-        });
-    };
-    CoverCellComponent.prototype.render = function () {
-        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.model.css, style: this.model.style },
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: "sv-cover__cell-content", style: this.model.contentStyle },
-                this.model.showLogo ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: "sv-cover__logo" }, this.renderLogoImage())) : null,
-                this.model.showTitle ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: "sv-cover__title", style: { maxWidth: this.model.textAreaWidth } },
-                    react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_title_title_element__WEBPACK_IMPORTED_MODULE_3__["TitleElement"], { element: this.model.survey }))) : null,
-                this.model.showDescription ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: "sv-cover__description", style: { maxWidth: this.model.textAreaWidth } },
-                    react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h5", { className: this.model.survey.css.description }, _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["SurveyElementBase"].renderLocString(this.model.survey.locDescription)))) : null)));
-    };
-    return CoverCellComponent;
-}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));
-
-var CoverComponent = /** @class */ (function (_super) {
-    __extends(CoverComponent, _super);
-    function CoverComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Object.defineProperty(CoverComponent.prototype, "model", {
-        get: function () {
-            return this.props.model;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    CoverComponent.prototype.getStateElement = function () {
-        return this.model;
-    };
-    CoverComponent.prototype.renderElement = function () {
-        this.model.survey = this.props.survey;
-        if (!(this.props.survey.headerView === "advanced" && this.props.survey.renderedHasHeader)) {
-            return null;
-        }
-        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.model.coverClasses, style: { height: this.model.renderedHeight } },
-            this.model.backgroundImage ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { style: this.model.backgroundImageStyle, className: this.model.backgroundImageClasses }) : null,
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.model.contentClasses, style: { maxWidth: this.model.maxWidth } }, this.model.cells.map(function (cell, index) { return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(CoverCellComponent, { key: index, model: cell }); }))));
-    };
-    return CoverComponent;
-}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["SurveyElementBase"]));
-
-_element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.registerElement("sv-cover", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(CoverComponent, props);
-});
-
-
 /***/ }),
 
 /***/ "./src/react/components/file/file-choose-button.tsx":
@@ -10668,7 +10620,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)));
     };
@@ -10744,7 +10696,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),
@@ -10765,6 +10717,144 @@ _element_factory__WEBPACK_IMPORTED_MODULE_3__["ReactElementFactory"].Instance.re
 });
 
 
+/***/ }),
+
+/***/ "./src/react/components/header.tsx":
+/*!*****************************************!*\
+  !*** ./src/react/components/header.tsx ***!
+  \*****************************************/
+/*! exports provided: HeaderMobile, HeaderCell, Header */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "HeaderMobile", function() { return HeaderMobile; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "HeaderCell", function() { return HeaderCell; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Header", function() { return Header; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../reactquestion_element */ "./src/react/reactquestion_element.tsx");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../element-factory */ "./src/react/element-factory.tsx");
+/* harmony import */ var _title_title_element__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./title/title-element */ "./src/react/components/title/title-element.tsx");
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+
+
+
+
+var HeaderMobile = /** @class */ (function (_super) {
+    __extends(HeaderMobile, _super);
+    function HeaderMobile() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(HeaderMobile.prototype, "model", {
+        get: function () {
+            return this.props.model;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    HeaderMobile.prototype.renderLogoImage = function () {
+        var componentName = this.model.survey.getElementWrapperComponentName(this.model.survey, "logo-image");
+        var componentData = this.model.survey.getElementWrapperComponentData(this.model.survey, "logo-image");
+        return _element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.createElement(componentName, {
+            data: componentData,
+        });
+    };
+    HeaderMobile.prototype.render = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: "sv-header--mobile" },
+            this.model.survey.hasLogo ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: "sv-header__logo" }, this.renderLogoImage())) : null,
+            this.model.survey.hasTitle ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: "sv-header__title", style: { maxWidth: this.model.textAreaWidth } },
+                react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_title_title_element__WEBPACK_IMPORTED_MODULE_3__["TitleElement"], { element: this.model.survey }))) : null,
+            this.model.survey.renderedHasDescription ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: "sv-header__description", style: { maxWidth: this.model.textAreaWidth } },
+                react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h5", { className: this.model.survey.css.description }, _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["SurveyElementBase"].renderLocString(this.model.survey.locDescription)))) : null));
+    };
+    return HeaderMobile;
+}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));
+
+var HeaderCell = /** @class */ (function (_super) {
+    __extends(HeaderCell, _super);
+    function HeaderCell() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(HeaderCell.prototype, "model", {
+        get: function () {
+            return this.props.model;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    HeaderCell.prototype.renderLogoImage = function () {
+        var componentName = this.model.survey.getElementWrapperComponentName(this.model.survey, "logo-image");
+        var componentData = this.model.survey.getElementWrapperComponentData(this.model.survey, "logo-image");
+        return _element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.createElement(componentName, {
+            data: componentData,
+        });
+    };
+    HeaderCell.prototype.render = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.model.css, style: this.model.style },
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: "sv-header__cell-content", style: this.model.contentStyle },
+                this.model.showLogo ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: "sv-header__logo" }, this.renderLogoImage())) : null,
+                this.model.showTitle ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: "sv-header__title", style: { maxWidth: this.model.textAreaWidth } },
+                    react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_title_title_element__WEBPACK_IMPORTED_MODULE_3__["TitleElement"], { element: this.model.survey }))) : null,
+                this.model.showDescription ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: "sv-header__description", style: { maxWidth: this.model.textAreaWidth } },
+                    react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h5", { className: this.model.survey.css.description }, _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["SurveyElementBase"].renderLocString(this.model.survey.locDescription)))) : null)));
+    };
+    return HeaderCell;
+}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));
+
+var Header = /** @class */ (function (_super) {
+    __extends(Header, _super);
+    function Header() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(Header.prototype, "model", {
+        get: function () {
+            return this.props.model;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Header.prototype.getStateElement = function () {
+        return this.model;
+    };
+    Header.prototype.renderElement = function () {
+        this.model.survey = this.props.survey;
+        if (!(this.props.survey.headerView === "advanced" && this.props.survey.renderedHasHeader)) {
+            return null;
+        }
+        var headerContent = null;
+        if (this.props.survey.isMobile) {
+            headerContent = react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(HeaderMobile, { model: this.model });
+        }
+        else {
+            headerContent = (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.model.contentClasses, style: { maxWidth: this.model.maxWidth } }, this.model.cells.map(function (cell, index) { return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(HeaderCell, { key: index, model: cell }); })));
+        }
+        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.model.headerClasses, style: { height: this.model.renderedHeight } },
+            this.model.backgroundImage ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { style: this.model.backgroundImageStyle, className: this.model.backgroundImageClasses }) : null,
+            headerContent));
+    };
+    return Header;
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["SurveyElementBase"]));
+
+_element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.registerElement("sv-header", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(Header, props);
+});
+
+
 /***/ }),
 
 /***/ "./src/react/components/list/list-item.tsx":
@@ -10855,7 +10945,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 = {
@@ -12972,7 +13062,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 () {
@@ -13710,7 +13800,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) {
@@ -15686,7 +15776,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)
@@ -15866,7 +15956,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 },
@@ -16776,7 +16866,7 @@ var SurveyQuestionFile = /** @class */ (function (_super) {
         var actionsContainer = this.question.actionsContainerVisible ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_1__["SurveyActionBar"], { model: this.question.actionsContainer }) : null;
         var noFileChosen = this.question.isEmpty() ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.cssClasses.noFileChosen }, this.question.noFileChosenCaption)) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.getFileDecoratorCss() },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.cssClasses.dragAreaPlaceholder }, this.question.renderedPlaceholder),
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.cssClasses.dragAreaPlaceholder }, this.renderLocString(this.question.locRenderedPlaceholder)),
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.wrapper },
                 chooseButton,
                 actionsContainer,
@@ -16983,7 +17073,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)))));
@@ -17306,8 +17396,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;
@@ -18455,18 +18544,21 @@ var SurveyQuestionRankingItem = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    SurveyQuestionRankingItem.prototype.renderEmptyIcon = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", null,
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("use", { xlinkHref: this.question.dashSvgIcon })));
+    };
     SurveyQuestionRankingItem.prototype.renderElement = function () {
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { tabIndex: this.itemTabIndex, className: this.itemClass, onKeyDown: this.handleKeydown, onPointerDown: this.handlePointerDown, "data-sv-drop-target-ranking-item": this.index },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { tabIndex: -1, style: { outline: "none" } },
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.cssClasses.itemGhostNode }),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.cssClasses.itemContent },
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.cssClasses.itemIconContainer },
-                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { width: "10", height: "16", viewBox: "0 0 10 16", className: this.question.getIconHoverCss(), xmlns: "http://www.w3.org/2000/svg" },
-                            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("path", { d: "M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z" })),
-                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { width: "10", height: "24", viewBox: "0 0 10 24", className: this.question.getIconFocusCss(), xmlns: "http://www.w3.org/2000/svg" },
-                            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("path", { d: "M10 5L5 0L0 5H4V9H6V5H10Z" }),
-                            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("path", { d: "M6 19V15H4V19H0L5 24L10 19H6Z" }))),
-                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.getItemIndexClasses(this.item) }, this.unrankedItem ? "" : this.indexText),
+                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: this.question.getIconHoverCss() },
+                            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("use", { xlinkHref: this.question.dragDropSvgIcon })),
+                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: this.question.getIconFocusCss() },
+                            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("use", { xlinkHref: this.question.arrowsSvgIcon }))),
+                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.getItemIndexClasses(this.item) }, (!this.unrankedItem && this.indexText) ? this.indexText : this.renderEmptyIcon()),
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.cssClasses.controlLabel }, this.text)))));
     };
     return SurveyQuestionRankingItem;
@@ -19086,7 +19178,7 @@ var SurveyQuestionSignaturePad = /** @class */ (function (_super) {
         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 } },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.placeholder, style: { display: this.question.needShowPlaceholder() ? "" : "none" } }, this.question.placeHolderText),
+            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(),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("canvas", { tabIndex: 0, className: this.question.cssClasses.canvas })),
@@ -19412,7 +19504,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"]));
@@ -20007,8 +20099,8 @@ var settings = {
      * @param message A message to be displayed in the confirm dialog window.
      * @param callback A callback function that should be called with `true` if a user confirms an action or `false` otherwise.
      */
-    confirmActionAsync: function (message, callback) {
-        return Object(_utils_utils__WEBPACK_IMPORTED_MODULE_0__["showConfirmDialog"])(message, callback);
+    confirmActionAsync: function (message, callback, applyTitle) {
+        return Object(_utils_utils__WEBPACK_IMPORTED_MODULE_0__["showConfirmDialog"])(message, callback, applyTitle);
     },
     /**
      * A minimum width value for all survey elements.
@@ -20815,7 +20907,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;
@@ -20906,7 +21000,7 @@ var Logger = /** @class */ (function () {
     return Logger;
 }());
 
-function showConfirmDialog(message, callback) {
+function showConfirmDialog(message, callback, applyTitle) {
     var locStr = new _localizablestring__WEBPACK_IMPORTED_MODULE_0__["LocalizableString"](undefined);
     var popupViewModel = _settings__WEBPACK_IMPORTED_MODULE_1__["settings"].showDialog({
         componentName: "sv-string-viewer",
@@ -20929,7 +21023,7 @@ function showConfirmDialog(message, callback) {
     var cancelBtn = toolbar.getActionById("cancel");
     cancelBtn.title = _surveyStrings__WEBPACK_IMPORTED_MODULE_2__["surveyLocalization"].getString("cancel");
     cancelBtn.innerCss = "sv-popup__body-footer-item sv-popup__button sd-btn sd-btn--small";
-    applyBtn.title = _surveyStrings__WEBPACK_IMPORTED_MODULE_2__["surveyLocalization"].getString("ok");
+    applyBtn.title = applyTitle || _surveyStrings__WEBPACK_IMPORTED_MODULE_2__["surveyLocalization"].getString("ok");
     applyBtn.innerCss = "sv-popup__body-footer-item sv-popup__button sv-popup__button--danger sd-btn sd-btn--small sd-btn--danger";
     popupViewModel.width = "452px";
     return true;