survey-react-ui 1.9.113 → 1.9.114

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-react-ui",
-  "version": "1.9.113",
+  "version": "1.9.114",
   "description": "survey.js is a JavaScript Survey Library. It is a modern way to add a survey to your website. It uses JSON for survey metadata and results.",
   "keywords": [
     "Survey",
@@ -21,7 +21,7 @@
   },
   "typings": "survey-react-ui.d.ts",
   "dependencies": {
-    "survey-core": "1.9.113",
+    "survey-core": "1.9.114",
     "react": "^16.5.0 || ^17.0.1 || ^18.1.0",
     "react-dom": "^16.5.0 || ^17.0.1 || ^18.1.0"
   }

package/survey-react-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.113
+ * surveyjs - Survey JavaScript library v1.9.114
  * 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.114", "survey-react-ui");
 
 
 /***/ }),
@@ -7239,7 +7243,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;
@@ -8568,7 +8576,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 +8639,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;
 }());
 
@@ -9696,7 +9716,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",
@@ -9725,8 +9745,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 +10537,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":
@@ -10765,6 +10685,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":
@@ -16776,7 +16834,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,
@@ -18455,18 +18513,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 +19147,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 })),
@@ -20007,8 +20068,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.
@@ -20906,7 +20967,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 +20990,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;