survey-react 1.9.96 → 1.9.97

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.96
+ * surveyjs - Survey JavaScript library v1.9.97
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1291,7 +1291,7 @@ var AdaptiveActionContainer = /** @class */ (function (_super) {
         }
     };
     AdaptiveActionContainer.prototype.initResponsivityManager = function (container) {
-        this.responsivityManager = new _utils_responsivity_manager__WEBPACK_IMPORTED_MODULE_0__["ResponsivityManager"](container, this, "& > .sv-action:not(.sv-dots) > .sv-action__content");
+        this.responsivityManager = new _utils_responsivity_manager__WEBPACK_IMPORTED_MODULE_0__["ResponsivityManager"](container, this, ":scope > .sv-action:not(.sv-dots) > .sv-action__content");
     };
     AdaptiveActionContainer.prototype.resetResponsivityManager = function () {
         if (!!this.responsivityManager) {
@@ -5102,6 +5102,7 @@ var defaultV2Css = {
     root: "sd-root-modern",
     rootMobile: "sd-root-modern--mobile",
     rootReadOnly: "sd-root--readonly",
+    rootBackgroundImage: "sd-root_background-image",
     container: "sd-container-modern",
     header: "sd-title sd-container-modern__title",
     bodyContainer: "sv-components-row",
@@ -5405,7 +5406,7 @@ var defaultV2Css = {
         root: "sd-selectbase",
         popup: "sv-dropdown-popup",
         small: "sd-row__question--small",
-        selectWrapper: "",
+        selectWrapper: "sv-dropdown_select-wrapper",
         other: "sd-input sd-comment sd-selectbase__other",
         onError: "sd-input--error",
         label: "sd-selectbase__label",
@@ -5418,6 +5419,9 @@ var defaultV2Css = {
         cleanButton: "sd-dropdown_clean-button",
         cleanButtonSvg: "sd-dropdown_clean-button-svg",
         cleanButtonIconId: "icon-clear",
+        chevronButton: "sd-dropdown_chevron-button",
+        chevronButtonSvg: "sd-dropdown_chevron-button-svg",
+        chevronButtonIconId: "icon-chevron",
         control: "sd-input sd-dropdown",
         controlInputFieldComponent: "sd-dropdown__input-field-component",
         controlValue: "sd-dropdown__value",
@@ -5576,10 +5580,14 @@ var defaultV2Css = {
         itemFixedSize: "sd-rating__item--fixed-size",
         control: "sd-input sd-dropdown",
         itemSmall: "sd-rating--small",
+        selectWrapper: "sv-dropdown_select-wrapper",
         controlValue: "sd-dropdown__value",
         controlDisabled: "sd-input--disabled",
         controlEmpty: "sd-dropdown--empty",
         filterStringInput: "sd-dropdown__filter-string-input",
+        chevronButton: "sd-dropdown_chevron-button",
+        chevronButtonSvg: "sd-dropdown_chevron-button-svg",
+        chevronButtonIconId: "icon-chevron",
         popup: "sv-dropdown-popup",
         onError: "sd-input--error",
     },
@@ -5674,6 +5682,7 @@ var defaultV2Css = {
         itemIndex: "sv-ranking-item__index sd-ranking-item__index",
         itemIndexEmptyMode: "sv-ranking-item__index--empty sd-ranking-item__index--empty",
         // itemText: "sv-ranking-item__text",
+        itemDisabled: "sv-ranking-item--disabled",
         controlLabel: "sv-ranking-item__text",
         itemGhostNode: "sv-ranking-item__ghost",
         itemIconContainer: "sv-ranking-item__icon-container",
@@ -5727,7 +5736,7 @@ var defaultV2Css = {
         root: "sd-selectbase",
         popup: "sv-dropdown-popup",
         small: "sd-row__question--small",
-        selectWrapper: "",
+        selectWrapper: "sv-dropdown_select-wrapper",
         other: "sd-input sd-comment sd-selectbase__other",
         onError: "sd-input--error",
         label: "sd-selectbase__label",
@@ -5744,6 +5753,9 @@ var defaultV2Css = {
         cleanItemButton: "sd-tagbox-item_clean-button",
         cleanItemButtonSvg: "sd-tagbox-item_clean-button-svg",
         cleanItemButtonIconId: "icon-clear_16x16",
+        chevronButton: "sd-dropdown_chevron-button",
+        chevronButtonSvg: "sd-dropdown_chevron-button-svg",
+        chevronButtonIconId: "icon-chevron",
         control: "sd-input sd-tagbox sd-dropdown",
         controlValue: "sd-tagbox__value sd-dropdown__value",
         controlValueItems: "sd-tagbox__value-items",
@@ -6494,9 +6506,9 @@ var DragDropCore = /** @class */ (function () {
         this.parentElement = parentElement;
         var shortcutText = this.getShortcutText(this.draggedElement);
         this.domAdapter.draggedElementShortcut = this.createDraggedElementShortcut(shortcutText, draggedElementNode, event);
-        this.onStartDrag();
+        this.onStartDrag(event);
     };
-    DragDropCore.prototype.onStartDrag = function () {
+    DragDropCore.prototype.onStartDrag = function (event) {
     };
     DragDropCore.prototype.isDropTargetDoesntChanged = function (newIsBottom) {
         return (this.dropTarget === this.prevDropTarget && newIsBottom === this.isBottom);
@@ -7227,6 +7239,13 @@ var DragDropRankingSelectToRank = /** @class */ (function (_super) {
     function DragDropRankingSelectToRank() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    DragDropRankingSelectToRank.prototype.onStartDrag = function (event) {
+        var target = event.target;
+        var fromContainerNode = target.closest(".sv-ranking__container--from");
+        if (!!fromContainerNode) {
+            fromContainerNode.style.minHeight = fromContainerNode.offsetHeight + "px";
+        }
+    };
     DragDropRankingSelectToRank.prototype.findDropTargetNodeByDragOverNode = function (dragOverNode) {
         if (dragOverNode.dataset.ranking === "from-container" || dragOverNode.dataset.ranking === "to-container") {
             return dragOverNode;
@@ -7284,7 +7303,7 @@ var DragDropRankingSelectToRank = /** @class */ (function (_super) {
         var fromIndex = fromChoicesArray.indexOf(this.draggedElement);
         var toIndex = toChoicesArray.indexOf(this.dropTarget);
         if (toIndex === -1)
-            toIndex = 0;
+            toIndex = toChoicesArray.length;
         rankFunction(questionModel, fromIndex, toIndex);
         this.doUIEffects(dropTargetNode, fromIndex, toIndex);
     };
@@ -8993,7 +9012,7 @@ __webpack_require__.r(__webpack_exports__);
 // import "../../main.scss";
 //import "../../modern.scss";
 var Version;
-Version = "" + "1.9.96";
+Version = "" + "1.9.97";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -15881,8 +15900,14 @@ var Helpers = /** @class */ (function () {
         return array;
     };
     Helpers.getUnbindValue = function (value) {
+        if (Array.isArray(value)) {
+            var res = [];
+            for (var i = 0; i < value.length; i++) {
+                res.push(Helpers.getUnbindValue(value[i]));
+            }
+            return res;
+        }
         if (!!value && value instanceof Object && !(value instanceof Date)) {
-            //do not return the same object instance!!!
             return JSON.parse(JSON.stringify(value));
         }
         return value;
@@ -16170,6 +16195,7 @@ var map = {
 	"./V2Check.svg": "./src/images/V2Check.svg",
 	"./V2Check_24x24.svg": "./src/images/V2Check_24x24.svg",
 	"./V2DragElement_16x16.svg": "./src/images/V2DragElement_16x16.svg",
+	"./chevron.svg": "./src/images/chevron.svg",
 	"./clear_16x16.svg": "./src/images/clear_16x16.svg",
 	"./collapseDetail.svg": "./src/images/collapseDetail.svg",
 	"./expandDetail.svg": "./src/images/expandDetail.svg",
@@ -16489,6 +16515,17 @@ module.exports = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\
 
 /***/ }),
 
+/***/ "./src/images/chevron.svg":
+/*!********************************!*\
+  !*** ./src/images/chevron.svg ***!
+  \********************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 15L17 10H7L12 15Z\"></path></svg>"
+
+/***/ }),
+
 /***/ "./src/images/clear_16x16.svg":
 /*!************************************!*\
   !*** ./src/images/clear_16x16.svg ***!
@@ -18692,7 +18729,9 @@ var JsonMetadata = /** @class */ (function () {
         return res;
     };
     JsonMetadata.prototype.getChemeRefName = function (className, isRoot) {
-        return isRoot ? "#/definitions/" + className : className + "#";
+        //Fix for #6486, according to https://niem.github.io/json/reference/json-schema/references/#:~:text=In%20a%20JSON%20schema%2C%20a,%2C%20an%20in%2Dschema%20reference
+        return "#/definitions/" + className;
+        //return isRoot ? "#/definitions/" + className : className + "#";
     };
     JsonMetadata.prototype.generateChemaClass = function (className, schemaDef, isRoot) {
         if (!!schemaDef[className])
@@ -18730,6 +18769,7 @@ var JsonError = /** @class */ (function () {
         this.message = message;
         this.description = "";
         this.at = -1;
+        this.end = -1;
     }
     JsonError.prototype.getFullDescription = function () {
         return this.message + (this.description ? "\n" + this.description : "");
@@ -18843,7 +18883,7 @@ var JsonObject = /** @class */ (function () {
         this.toObjectCore(jsonObj, obj);
         var error = this.getRequiredError(obj, jsonObj);
         if (!!error) {
-            this.addNewError(error, jsonObj);
+            this.addNewError(error, jsonObj, obj);
         }
     };
     JsonObject.prototype.toObjectCore = function (jsonObj, obj) {
@@ -18874,7 +18914,7 @@ var JsonObject = /** @class */ (function () {
             var property = this.findProperty(properties, key);
             if (!property) {
                 if (needAddErrors) {
-                    this.addNewError(new JsonUnknownPropertyError(key.toString(), objType), jsonObj);
+                    this.addNewError(new JsonUnknownPropertyError(key.toString(), objType), jsonObj, obj);
                 }
                 continue;
             }
@@ -19037,7 +19077,7 @@ var JsonObject = /** @class */ (function () {
             }
         }
         if (error) {
-            this.addNewError(error, value);
+            this.addNewError(error, value, newObj);
         }
         return error;
     };
@@ -19058,11 +19098,17 @@ var JsonObject = /** @class */ (function () {
         }
         return null;
     };
-    JsonObject.prototype.addNewError = function (error, jsonObj) {
-        if (jsonObj && jsonObj[JsonObject.positionPropertyName]) {
-            error.at = jsonObj[JsonObject.positionPropertyName].start;
-        }
+    JsonObject.prototype.addNewError = function (error, jsonObj, element) {
+        error.jsonObj = jsonObj;
+        error.element = element;
         this.errors.push(error);
+        if (!jsonObj)
+            return;
+        var posObj = jsonObj[JsonObject.positionPropertyName];
+        if (!posObj)
+            return;
+        error.at = posObj.start;
+        error.end = posObj.end;
     };
     JsonObject.prototype.valueToArray = function (value, obj, key, property) {
         if (obj[key] && !this.isValueArray(obj[key]))
@@ -21048,8 +21094,8 @@ var englishStrings = {
     noEntriesReadonlyText: "There are no entries.",
     more: "More",
     tagboxDoneButtonCaption: "OK",
-    selectToRankFromContainerPlaceholder: "All items are ranked.",
-    selectToRankToContainerPlaceholder: "Drop the items which you like not to be selected here.",
+    selectToRankEmptyRankedAreaText: "All choices are ranked",
+    selectToRankEmptyUnrankedAreaText: "Drag and drop choices here to rank them",
 };
 // Uncomment the lines below if you create a custom dictionary.
 // Replace "en" with a custom locale code (for example, "fr" or "de"),
@@ -29626,7 +29672,7 @@ function setStyles() {
         ".sv_q_dd_value": "width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative;",
         ".sv_q_dd_root": "position: relative;",
         ".sv_q_dd_select_wrapper::after": "content: \"\"; display: block;background-image: url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 10' style='enable-background:new 0 0 10 10;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23404040;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='2,2 0,4 5,9 10,4 8,2 5,5 '/%3E%3C/svg%3E%0A\"); background-repeat: no-repeat; background-position: center center; background-size: 10px 12px; width: 34px; height: 100%; position: absolute; inset-inline-end: 0; top: 0;",
-        ".sv_q_dd_filter-string-input": "outline: none; border: none; background-color: transparent; position: absolute; inset-inline-start: 0;",
+        ".sv_q_dd_filter-string-input": "outline: none; border: none; background-color: transparent; position: absolute; inset-inline-start: 0; inset-block-start: 0;",
         ".sv_q_dropdown_clean-button": "margin: auto 2em;",
         ".sv_q_tagbox__placeholder": "position: absolute; top: 0; inset-inline-start: 1em; max-width: 100%; width: auto; height: 100%; text-align: start; cursor: text; pointer-events: none;",
         ".sv_qstn .sv-q-col-1, .sv-question .sv-q-col-1": "width: 100%; display: inline-block; padding-right: 1em; box-sizing: border-box; word-break: break-word;",
@@ -29787,7 +29833,7 @@ function setStyles() {
         "sv-popup": "display: block; position: absolute; z-index: -1;",
         ".sv-popup": "position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; outline: none; z-index: 1500;",
         ".sv-popup__container": "box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1); position: absolute; padding: 0;",
-        ".sv-popup__body-content": "background-color: var(--background, #fff); border-radius: calc(0.5 * var(--base-unit, 8px)); width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; max-height: 90vh; max-width: 90vw;",
+        ".sv-popup__body-content": "background-color: var(--background, #fff); border-radius: calc(0.5 * var(--base-unit, 8px)); width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; max-height: 90vh; max-width: 100vw;",
         ".sv-popup--modal .sv-list__filter": "padding-top: 8px;",
         ".sv-popup--modal .sv-list__filter-icon": "top: 20px;",
         ".sv-popup--overlay .sv-list__filter": "padding-top: 8px;",
@@ -29941,13 +29987,14 @@ var PopupDropdownViewModel = /** @class */ (function (_super) {
         this.isTablet = width >= PopupDropdownViewModel.tabletSizeBreakpoint;
     };
     PopupDropdownViewModel.prototype._updatePosition = function () {
-        var _a;
+        var _a, _b, _c;
         if (!this.targetElement)
             return;
         var targetElementRect = this.targetElement.getBoundingClientRect();
         var popupContainer = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector(this.containerSelector);
         if (!popupContainer)
             return;
+        var fixedPopupContainer = (_b = this.container) === null || _b === void 0 ? void 0 : _b.querySelector(this.fixedPopupContainer);
         var scrollContent = popupContainer.querySelector(this.scrollingContentSelector);
         var popupComputedStyle = window.getComputedStyle(popupContainer);
         var marginLeft = (parseFloat(popupComputedStyle.marginLeft) || 0);
@@ -29958,7 +30005,8 @@ var PopupDropdownViewModel = /** @class */ (function (_super) {
         var verticalPosition = this.model.verticalPosition;
         var actualHorizontalPosition = this.getActualHorizontalPosition();
         if (!!window) {
-            height = Math.ceil(Math.min(height, window.innerHeight * 0.9, window.visualViewport.height));
+            var heightValues = [height, window.innerHeight * 0.9, (_c = window.visualViewport) === null || _c === void 0 ? void 0 : _c.height];
+            height = Math.ceil(Math.min.apply(Math, heightValues.filter(function (each) { return typeof each === "number"; })));
             verticalPosition = _utils_popup__WEBPACK_IMPORTED_MODULE_1__["PopupUtils"].updateVerticalPosition(targetElementRect, height, this.model.verticalPosition, this.model.showPointer, window.innerHeight);
         }
         this.popupDirection = _utils_popup__WEBPACK_IMPORTED_MODULE_1__["PopupUtils"].calculatePopupDirection(verticalPosition, actualHorizontalPosition);
@@ -29975,6 +30023,11 @@ var PopupDropdownViewModel = /** @class */ (function (_super) {
                 pos.left = newHorizontalDimensions.left;
             }
         }
+        if (!!fixedPopupContainer) {
+            var rect = fixedPopupContainer.getBoundingClientRect();
+            pos.top -= rect.top;
+            pos.left -= rect.left;
+        }
         this.left = pos.left + "px";
         this.top = pos.top + "px";
         if (this.showHeader) {
@@ -30594,6 +30647,7 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
     function PopupBaseViewModel(model) {
         var _this = _super.call(this) || this;
         _this.popupSelector = ".sv-popup";
+        _this.fixedPopupContainer = ".sv-popup";
         _this.containerSelector = ".sv-popup__container";
         _this.scrollingContentSelector = ".sv-popup__scrolling-content";
         _this.model = model;
@@ -32256,9 +32310,25 @@ var Question = /** @class */ (function (_super) {
      * @param onError Pass `true` if you want to focus an input field with the first validation error. Default value: `false` (focuses the first input field). Applies to question types with multiple input fields.
      */
     Question.prototype.focus = function (onError) {
+        var _this = this;
         if (onError === void 0) { onError = false; }
-        if (this.isDesignMode)
+        if (this.isDesignMode || !this.isVisible || !this.survey)
             return;
+        var page = this.page;
+        if (!page && !!this.parentQuestion) {
+            page = this.parentQuestion.page;
+        }
+        var shouldChangePage = !!page && this.survey.currentPage !== page;
+        if (shouldChangePage) {
+            this.survey.currentPage = page;
+            setTimeout(function () { return _this.focuscore(onError); }, 0);
+        }
+        else {
+            this.focuscore(onError);
+        }
+    };
+    Question.prototype.focuscore = function (onError) {
+        if (onError === void 0) { onError = false; }
         if (!!this.survey) {
             this.expandAllParents(this);
             this.survey.scrollElementToTop(this, this, null, this.id);
@@ -34433,7 +34503,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
             return null;
         var itemValue = _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"].getItemByValue(this.visibleChoices, this.value);
         this.onGetSingleSelectedItem(itemValue);
-        if (!itemValue && !selectedItemValues) {
+        if (!itemValue && (!selectedItemValues || this.value != selectedItemValues.id)) {
             this.updateSelectedItemValues();
         }
         return itemValue || selectedItemValues || (this.isOtherSelected ? this.otherItem : this.getItemIfChoicesNotContainThisValue(this.value));
@@ -35453,7 +35523,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         for (var i = 0; i < this.dependedQuestions.length; i++) {
             var q = this.dependedQuestions[i];
             q.onVisibleChoicesChanged();
-            q.clearIncorrectValuesCore();
+            q.clearIncorrectValues();
         }
         this.isUpdatingChoicesDependedQuestions = false;
     };
@@ -35548,11 +35618,11 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     };
     QuestionSelectBase.prototype.clearIncorrectValuesCore = function () {
         var val = this.value;
-        if (this.canClearValueAnUnknow(val)) {
+        if (this.canClearValueAnUnknown(val)) {
             this.clearValue();
         }
     };
-    QuestionSelectBase.prototype.canClearValueAnUnknow = function (val) {
+    QuestionSelectBase.prototype.canClearValueAnUnknown = function (val) {
         if (!this.getStoreOthersAsComment() && this.isOtherSelected)
             return false;
         return this.hasUnknownValue(val, true, true, true);
@@ -37000,7 +37070,7 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
         if (Array.isArray(val)) {
             for (var i = 0; i < val.length; i++) {
                 var rVal = this.getRealValue(val[i]);
-                if (this.canClearValueAnUnknow(rVal)) {
+                if (this.canClearValueAnUnknown(rVal)) {
                     this.addIntoInvisibleOldValues(rVal);
                 }
             }
@@ -37139,7 +37209,7 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
         var newValue = [];
         for (var i = 0; i < val.length; i++) {
             var rItemVal = this.getRealValue(val[i]);
-            var isUnkown = this.canClearValueAnUnknow(rItemVal);
+            var isUnkown = this.canClearValueAnUnknown(rItemVal);
             if ((!clearDisabled && !isUnkown) ||
                 (clearDisabled && !this.isValueDisabled(rItemVal))) {
                 newValue.push(val[i]);
@@ -37639,6 +37709,14 @@ var ComponentQuestionJSON = /** @class */ (function () {
             return question.getDisplayValue(keyAsText, value);
         return this.json.getDisplayValue(question);
     };
+    ComponentQuestionJSON.prototype.setValueToQuestion = function (val) {
+        var converter = this.json.valueToQuestion || this.json.setValue;
+        return !!converter ? converter(val) : val;
+    };
+    ComponentQuestionJSON.prototype.getValueFromQuestion = function (val) {
+        var converter = this.json.valueFromQuestion || this.json.getValue;
+        return !!converter ? converter(val) : val;
+    };
     Object.defineProperty(ComponentQuestionJSON.prototype, "isComposite", {
         get: function () {
             return !!this.json.elementsJSON || !!this.json.createElements;
@@ -38027,7 +38105,7 @@ var QuestionCustomModel = /** @class */ (function (_super) {
         if (!this.contentQuestion)
             return;
         if (this.isEmpty() && !this.contentQuestion.isEmpty()) {
-            this.value = this.contentQuestion.value;
+            this.value = this.getContentQuestionValue();
         }
     };
     QuestionCustomModel.prototype.runCondition = function (values, properties) {
@@ -38046,9 +38124,24 @@ var QuestionCustomModel = /** @class */ (function (_super) {
     };
     QuestionCustomModel.prototype.convertDataValue = function (name, newValue) {
         return this.convertDataName(name) == _super.prototype.convertDataName.call(this, name)
-            ? this.contentQuestion.value
+            ? this.getContentQuestionValue()
             : newValue;
     };
+    QuestionCustomModel.prototype.getContentQuestionValue = function () {
+        if (!this.contentQuestion)
+            return undefined;
+        var val = this.contentQuestion.value;
+        if (!!this.customQuestion)
+            val = this.customQuestion.getValueFromQuestion(val);
+        return val;
+    };
+    QuestionCustomModel.prototype.setContentQuestionValue = function (val) {
+        if (!this.contentQuestion)
+            return;
+        if (!!this.customQuestion)
+            val = this.customQuestion.setValueToQuestion(val);
+        this.contentQuestion.value = val;
+    };
     QuestionCustomModel.prototype.canSetValueToSurvey = function () {
         return false;
     };
@@ -38056,8 +38149,8 @@ var QuestionCustomModel = /** @class */ (function (_super) {
         if (updateIsAnswered === void 0) { updateIsAnswered = true; }
         _super.prototype.setQuestionValue.call(this, newValue, updateIsAnswered);
         if (!this.isLoadingFromJson && !!this.contentQuestion &&
-            !this.isTwoValueEquals(this.contentQuestion.value, newValue)) {
-            this.contentQuestion.value = this.getUnbindValue(newValue);
+            !this.isTwoValueEquals(this.getContentQuestionValue(), newValue)) {
+            this.setContentQuestionValue(this.getUnbindValue(newValue));
         }
     };
     QuestionCustomModel.prototype.onSurveyValueChanged = function (newValue) {
@@ -38068,7 +38161,7 @@ var QuestionCustomModel = /** @class */ (function (_super) {
     };
     QuestionCustomModel.prototype.getValueCore = function () {
         if (!!this.contentQuestion)
-            return this.contentQuestion.value;
+            return this.getContentQuestionValue();
         return _super.prototype.getValueCore.call(this);
     };
     QuestionCustomModel.prototype.initElement = function (el) {
@@ -38224,7 +38317,7 @@ var QuestionCompositeModel = /** @class */ (function (_super) {
         }
         _super.prototype.onSurveyLoad.call(this);
         if (!!this.contentPanel) {
-            var val = this.contentPanel.getValue();
+            var val = this.getContentPanelValue();
             if (!_helpers__WEBPACK_IMPORTED_MODULE_3__["Helpers"].isValueEmpty(val)) {
                 this.value = val;
             }
@@ -38289,12 +38382,20 @@ var QuestionCompositeModel = /** @class */ (function (_super) {
         this.settingNewValue = false;
     };
     QuestionCompositeModel.prototype.updateValueCoreWithPanelValue = function () {
-        var panelValue = this.contentPanel.getValue();
+        var panelValue = this.getContentPanelValue();
         if (this.isTwoValueEquals(this.getValueCore(), panelValue))
             return false;
         this.setValueCore(panelValue);
         return true;
     };
+    QuestionCompositeModel.prototype.getContentPanelValue = function (val) {
+        if (!val)
+            val = this.contentPanel.getValue();
+        return this.customQuestion.setValueToQuestion(val);
+    };
+    QuestionCompositeModel.prototype.getValueForContentPanel = function (val) {
+        return this.customQuestion.getValueFromQuestion(val);
+    };
     QuestionCompositeModel.prototype.setNewValueIntoQuestion = function (name, newValue) {
         var q = this.getQuestionByName(name);
         if (!!q && !this.isTwoValueEquals(newValue, q.value)) {
@@ -38316,7 +38417,7 @@ var QuestionCompositeModel = /** @class */ (function (_super) {
         }
     };
     QuestionCompositeModel.prototype.convertDataValue = function (name, newValue) {
-        var val = this.value;
+        var val = this.getValueForContentPanel(this.value);
         if (!val)
             val = {};
         if (this.isValueEmpty(newValue) && !this.isEditingSurveyElement) {
@@ -38325,19 +38426,20 @@ var QuestionCompositeModel = /** @class */ (function (_super) {
         else {
             val[name] = newValue;
         }
-        return val;
+        return this.getContentPanelValue(val);
     };
     QuestionCompositeModel.prototype.setQuestionValue = function (newValue, updateIsAnswered) {
         if (updateIsAnswered === void 0) { updateIsAnswered = true; }
         this.setValuesIntoQuestions(newValue);
         if (!this.isEditingSurveyElement && !!this.contentPanel) {
-            newValue = this.contentPanel.getValue();
+            newValue = this.getContentPanelValue();
         }
         _super.prototype.setQuestionValue.call(this, newValue, updateIsAnswered);
     };
     QuestionCompositeModel.prototype.setValuesIntoQuestions = function (newValue) {
         if (!this.contentPanel)
             return;
+        newValue = this.getValueForContentPanel(newValue);
         var oldSettingNewValue = this.settingNewValue;
         this.settingNewValue = true;
         var questions = this.contentPanel.questions;
@@ -38435,7 +38537,7 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
         _this.registerPropertyChangedHandlers(["choicesMin", "choicesMax", "choicesStep"], function () {
             _this.onVisibleChoicesChanged();
         });
-        _this.registerPropertyChangedHandlers(["value", "renderAs", "showOtherItem", "otherText", "placeholder", "choices"], function () {
+        _this.registerPropertyChangedHandlers(["value", "renderAs", "showOtherItem", "otherText", "placeholder", "choices", "visibleChoices"], function () {
             _this.updateReadOnlyText();
         });
         _this.updateReadOnlyText();
@@ -39753,6 +39855,13 @@ var QuestionFileModel = /** @class */ (function (_super) {
             }
         });
     };
+    Object.defineProperty(QuestionFileModel.prototype, "renderCapture", {
+        get: function () {
+            return this.allowCameraAccess ? "user" : undefined;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionFileModel.prototype, "multipleRendered", {
         get: function () {
             return this.allowMultiple ? "multiple" : undefined;
@@ -40052,6 +40161,9 @@ var QuestionFileModel = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: false })
     ], QuestionFileModel.prototype, "containsMultiplyFiles", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
+    ], QuestionFileModel.prototype, "allowCameraAccess", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ localizable: { defaultStr: "confirmRemoveFile" } })
     ], QuestionFileModel.prototype, "confirmRemoveMessage", void 0);
@@ -40097,6 +40209,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("file", [
     { name: "correctAnswer", visible: false },
     { name: "validators", visible: false },
     { name: "needConfirmRemoveFile:boolean" },
+    { name: "allowCameraAccess:switch", category: "general" }
 ], function () {
     return new QuestionFileModel("");
 }, "question");
@@ -45164,10 +45277,10 @@ var MatrixDropdownColumn = /** @class */ (function (_super) {
     });
     Object.defineProperty(MatrixDropdownColumn.prototype, "width", {
         get: function () {
-            return this.getPropertyValue("width", "");
+            return this.templateQuestion.width;
         },
         set: function (val) {
-            this.setPropertyValue("width", val);
+            this.templateQuestion.width = val;
         },
         enumerable: false,
         configurable: true
@@ -51244,7 +51357,7 @@ var QuestionRankingModel = /** @class */ (function (_super) {
             var target = event.target;
             if (!_this.isDragStartNodeValid(target))
                 return;
-            if (_this.allowStartDrag) {
+            if (_this.allowStartDrag && _this.canStartDragDueMaxSelectedChoices(target)) {
                 _this.dragDropRankingChoices.startDrag(event, choice, _this, node);
             }
         };
@@ -51518,6 +51631,22 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionRankingModel.prototype.canStartDragDueMaxSelectedChoices = function (target) {
+        if (!this.selectToRankEnabled)
+            return true;
+        var fromContainer = target.closest("[data-ranking='from-container']");
+        if (fromContainer) {
+            return this.checkMaxSelectedChoicesUnreached();
+        }
+        return true;
+    };
+    QuestionRankingModel.prototype.checkMaxSelectedChoicesUnreached = function () {
+        if (this.maxSelectedChoices < 1)
+            return true;
+        var val = this.value;
+        var len = !Array.isArray(val) ? 0 : val.length;
+        return len < this.maxSelectedChoices;
+    };
     //cross framework initialization
     QuestionRankingModel.prototype.afterRenderQuestionElement = function (el) {
         this.domNode = el;
@@ -51547,14 +51676,14 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         var isMovedElementUnRanked = !isMovedElementRanked;
         var fromIndex;
         var toIndex;
-        if (key === " " && isMovedElementUnRanked) {
+        if ((key === " " || key === "Enter") && isMovedElementUnRanked) {
             fromIndex = unRankingChoices.indexOf(movedElement);
             toIndex = 0;
             dnd.selectToRank(this, fromIndex, toIndex);
             this.setValueAfterKeydown(toIndex, "to-container");
             return;
         }
-        if (key === " " && isMovedElementRanked) {
+        if ((key === " " || key === "Enter") && isMovedElementRanked) {
             fromIndex = rankingChoices.indexOf(movedElement);
             dnd.unselectFromRank(this, fromIndex);
             toIndex = this.unRankingChoices.indexOf(movedElement); //'this.' leads to actual array after the 'unselectFromRank' method
@@ -51646,6 +51775,8 @@ var QuestionRankingModel = /** @class */ (function (_super) {
          * @see selectToRankAreasLayout
         */
         get: function () {
+            if (_utils_devices__WEBPACK_IMPORTED_MODULE_7__["IsMobile"])
+                return "vertical";
             return this.getPropertyValue("selectToRankAreasLayout", "horizontal");
         },
         set: function (val) {
@@ -51671,11 +51802,11 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_3__["property"])({ defaultValue: null })
     ], QuestionRankingModel.prototype, "dropTargetNodeMove", void 0);
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_3__["property"])({ localizable: { defaultStr: "selectToRankFromContainerPlaceholder" } })
-    ], QuestionRankingModel.prototype, "selectToRankFromContainerPlaceholder", void 0);
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_3__["property"])({ localizable: { defaultStr: "selectToRankEmptyRankedAreaText" } })
+    ], QuestionRankingModel.prototype, "selectToRankEmptyRankedAreaText", void 0);
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_3__["property"])({ localizable: { defaultStr: "selectToRankToContainerPlaceholder" } })
-    ], QuestionRankingModel.prototype, "selectToRankToContainerPlaceholder", void 0);
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_3__["property"])({ localizable: { defaultStr: "selectToRankEmptyUnrankedAreaText" } })
+    ], QuestionRankingModel.prototype, "selectToRankEmptyUnrankedAreaText", void 0);
     return QuestionRankingModel;
 }(_question_checkbox__WEBPACK_IMPORTED_MODULE_5__["QuestionCheckboxModel"]));
 
@@ -57556,7 +57687,9 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
                 this.renderInput(this.question["dropdownListModel"]),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_popup_popup__WEBPACK_IMPORTED_MODULE_2__["Popup"], { model: (_b = (_a = this.question) === null || _a === void 0 ? void 0 : _a.dropdownListModel) === null || _b === void 0 ? void 0 : _b.popupModel }));
         }
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.selectWrapper }, selectElement));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.selectWrapper, onClick: this.click },
+            selectElement,
+            this.createChevronButton()));
     };
     SurveyQuestionDropdownBase.prototype.renderValueElement = function (dropdownListModel) {
         if (this.question.showInputFieldComponent) {
@@ -57576,7 +57709,7 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
                 dropdownListModel.inputStringRendered = e.target.value;
             }
         };
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.question.inputId, className: this.question.getControlClass(), tabIndex: dropdownListModel.inputReadOnly ? undefined : 0, onClick: this.click, 
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.question.inputId, className: this.question.getControlClass(), tabIndex: dropdownListModel.inputReadOnly ? undefined : 0, 
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             disabled: this.question.isInputReadOnly, required: this.question.isRequired, onKeyDown: this.keyhandler, onBlur: this.blur, role: this.question.ariaRole, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy, "aria-expanded": this.question.ariaExpanded === null ? undefined : this.question.ariaExpanded === "true", "aria-controls": dropdownListModel.listElementId, "aria-activedescendant": dropdownListModel.ariaActivedescendant },
@@ -57599,6 +57732,12 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.cleanButton, style: style, onClick: this.clear },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { className: this.question.cssClasses.cleanButtonSvg, iconName: this.question.cssClasses.cleanButtonIconId, title: this.question.clearCaption, size: "auto" })));
     };
+    SurveyQuestionDropdownBase.prototype.createChevronButton = function () {
+        if (!this.question.cssClasses.chevronButtonIconId)
+            return null;
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.chevronButton },
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { className: this.question.cssClasses.chevronButtonSvg, iconName: this.question.cssClasses.chevronButtonIconId, size: 24 })));
+    };
     SurveyQuestionDropdownBase.prototype.renderOther = function (cssClasses) {
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.getCommentAreaCss(true) },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_reactquestion_comment__WEBPACK_IMPORTED_MODULE_5__["SurveyQuestionOtherValueItem"], { question: this.question, otherCss: cssClasses.other, cssClasses: cssClasses, isDisplayMode: this.isDisplayMode, isOther: true })));
@@ -57762,7 +57901,9 @@ var SurveyQuestionDropdownSelect = /** @class */ (function (_super) {
             (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("select", { id: this.question.inputId, className: this.question.getControlClass(), ref: function (select) { return (_this.setControl(select)); }, autoComplete: this.question.autocomplete, onChange: this.updateValueOnEvent, onInput: this.updateValueOnEvent, onClick: click, onKeyUp: keyup, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy, required: this.question.isRequired },
                 this.question.allowClear ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("option", { value: "" }, this.question.placeholder)) : null,
                 this.question.visibleChoices.map(function (item, i) { return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_dropdown_item__WEBPACK_IMPORTED_MODULE_4__["SurveyQuestionOptionItem"], { key: "item" + i, item: item }); })));
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.selectWrapper }, selectElement));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.selectWrapper },
+            selectElement,
+            this.createChevronButton()));
     };
     return SurveyQuestionDropdownSelect;
 }(_reactquestion_dropdown__WEBPACK_IMPORTED_MODULE_3__["SurveyQuestionDropdown"]));
@@ -59011,6 +59152,7 @@ var Survey = /** @class */ (function (_super) {
         else {
             renderResult = this.renderSurvey();
         }
+        var backgroundImage = !!this.survey.renderBackgroundImage ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.rootBackgroundImage, style: this.survey.backgroundImageStyle }) : null;
         var header = react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_survey_header_survey_header__WEBPACK_IMPORTED_MODULE_5__["SurveyHeader"], { survey: this.survey });
         var onSubmit = function (event) {
             event.preventDefault();
@@ -59021,11 +59163,9 @@ var Survey = /** @class */ (function (_super) {
         }
         var rootCss = this.survey.getRootCss();
         var cssClasses = this.rootNodeClassName ? this.rootNodeClassName + " " + rootCss : rootCss;
-        var formStyle = {
-            backgroundColor: this.survey.renderBackgroundOpacity
-        };
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.rootNodeId, ref: this.rootRef, className: cssClasses, style: this.survey.themeVariables },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("form", { onSubmit: onSubmit, style: formStyle },
+            backgroundImage,
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("form", { onSubmit: onSubmit },
                 customHeader,
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.container },
                     header,
@@ -61216,7 +61356,7 @@ var SurveyQuestionFile = /** @class */ (function (_super) {
         fileInput = (this.isDisplayMode ?
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "file", disabled: this.isDisplayMode, className: !this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss(), id: this.question.inputId, ref: function (input) { return (_this.setControl(input)); }, style: !this.isDisplayMode ? {} : { color: "transparent" }, onChange: !this.isDisplayMode ? this.question.doChange : (function () { }), multiple: this.question.allowMultiple, placeholder: this.question.title, accept: this.question.acceptedTypes })
             :
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "file", disabled: this.isDisplayMode, tabIndex: -1, className: !this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss(), id: this.question.inputId, ref: function (input) { return (_this.setControl(input)); }, style: !this.isDisplayMode ? {} : { color: "transparent" }, onChange: !this.isDisplayMode ? this.question.doChange : (function () { }), "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy, multiple: this.question.allowMultiple, title: this.question.inputTitle, accept: this.question.acceptedTypes }));
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "file", disabled: this.isDisplayMode, tabIndex: -1, className: !this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss(), id: this.question.inputId, ref: function (input) { return (_this.setControl(input)); }, style: !this.isDisplayMode ? {} : { color: "transparent" }, onChange: !this.isDisplayMode ? this.question.doChange : (function () { }), "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy, multiple: this.question.allowMultiple, title: this.question.inputTitle, accept: this.question.acceptedTypes, capture: this.question.renderCapture }));
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.fileRootCss },
             fileInput,
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.dragArea, onDrop: this.question.onDrop, onDragOver: this.question.onDragOver, onDragLeave: this.question.onDragLeave, onDragEnter: this.question.onDragEnter },
@@ -62785,12 +62925,12 @@ var SurveyQuestionRanking = /** @class */ (function (_super) {
                     this.getItems(this.question.unRankingChoices, unrankedItem),
                     this.question.unRankingChoices.length === 0 ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.containerPlaceholder },
                         " ",
-                        this.question.selectToRankFromContainerPlaceholder,
+                        this.question.selectToRankEmptyRankedAreaText,
                         " ") : null),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.containersDivider }),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.getContainerClasses("to"), "data-ranking": "to-container" },
                     this.getItems(),
-                    this.question.rankingChoices.length === 0 ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.containerPlaceholder }, this.question.selectToRankToContainerPlaceholder) : null)));
+                    this.question.rankingChoices.length === 0 ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.containerPlaceholder }, this.question.selectToRankEmptyUnrankedAreaText) : null)));
         }
     };
     SurveyQuestionRanking.prototype.getItems = function (choices, unrankedItem) {
@@ -63074,7 +63214,7 @@ var SurveyQuestionTagbox = /** @class */ (function (_super) {
         var _this = this;
         var dropdownMultiSelectListModel = dropdownListModel;
         var items = this.question.selectedChoices.map(function (choice, index) { return _this.renderItem("item" + index, choice); });
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.question.inputId, className: this.question.getControlClass(), tabIndex: dropdownListModel.inputReadOnly ? undefined : 0, onClick: this.click, 
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.question.inputId, className: this.question.getControlClass(), tabIndex: dropdownListModel.inputReadOnly ? undefined : 0, 
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             disabled: this.question.isInputReadOnly, required: this.question.isRequired, onKeyDown: this.keyhandler, onBlur: this.blur, role: this.question.ariaRole, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy, "aria-expanded": this.question.ariaExpanded === null ? undefined : this.question.ariaExpanded === "true", "aria-controls": dropdownListModel.listElementId, "aria-activedescendant": dropdownListModel.ariaActivedescendant },
@@ -68569,10 +68709,7 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "themeVariables", {
         get: function () {
-            var result = Object.assign({}, this.cssVariables);
-            result.backgroundImage = this.renderBackgroundImage;
-            result.backgroundSize = this.backgroundImageFit;
-            return result;
+            return Object.assign({}, this.cssVariables);
         },
         enumerable: false,
         configurable: true
@@ -68661,14 +68798,14 @@ var SurveyModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(SurveyModel.prototype, "renderBackgroundOpacity", {
+    Object.defineProperty(SurveyModel.prototype, "backgroundImageStyle", {
         get: function () {
-            var backgroundOpacityProperty = this.getPropertyByName("backgroundOpacity");
-            if (backgroundOpacityProperty.isDefaultValue(this.backgroundOpacity)) {
-                return "";
-            }
-            var alpha = 1 - this.backgroundOpacity;
-            return ["rgba(255, 255, 255, ", alpha, ")"].join("");
+            return {
+                opacity: this.backgroundOpacity,
+                backgroundImage: this.renderBackgroundImage,
+                backgroundSize: this.backgroundImageFit,
+                backgroundAttachment: this.backgroundImageAttachment
+            };
         },
         enumerable: false,
         configurable: true
@@ -70331,7 +70468,19 @@ var SurveyModel = /** @class */ (function (_super) {
     Object.defineProperty(SurveyModel.prototype, "areEmptyElementsHidden", {
         get: function () {
             return (this.isShowingPreview &&
-                this.showPreviewBeforeComplete == "showAnsweredQuestions");
+                this.showPreviewBeforeComplete == "showAnsweredQuestions" && this.isAnyQuestionAnswered);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyModel.prototype, "isAnyQuestionAnswered", {
+        get: function () {
+            var questions = this.getAllQuestions(true);
+            for (var i = 0; i < questions.length; i++) {
+                if (!questions[i].isEmpty())
+                    return true;
+            }
+            return false;
         },
         enumerable: false,
         configurable: true
@@ -71125,11 +71274,11 @@ var SurveyModel = /** @class */ (function (_super) {
      * @returns `false` if survey completion is cancelled within the [`onCompleting`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onCompleting) event handler; otherwise, `true`.
      * @see surveyPostId
      */
-    SurveyModel.prototype.doComplete = function (isCompleteOnTrigger) {
+    SurveyModel.prototype.doComplete = function (isCompleteOnTrigger, completeTrigger) {
         if (isCompleteOnTrigger === void 0) { isCompleteOnTrigger = false; }
         if (this.isCompleted)
             return;
-        if (!this.checkOnCompletingEvent(isCompleteOnTrigger)) {
+        if (!this.checkOnCompletingEvent(isCompleteOnTrigger, completeTrigger)) {
             this.isCompleted = false;
             return false;
         }
@@ -71137,11 +71286,11 @@ var SurveyModel = /** @class */ (function (_super) {
         this.stopTimer();
         this.isCompleted = true;
         this.clearUnusedValues();
-        this.saveDataOnComplete(isCompleteOnTrigger);
+        this.saveDataOnComplete(isCompleteOnTrigger, completeTrigger);
         this.setCookie();
         return true;
     };
-    SurveyModel.prototype.saveDataOnComplete = function (isCompleteOnTrigger) {
+    SurveyModel.prototype.saveDataOnComplete = function (isCompleteOnTrigger, completeTrigger) {
         var _this = this;
         if (isCompleteOnTrigger === void 0) { isCompleteOnTrigger = false; }
         var previousCookie = this.hasCookie;
@@ -71162,6 +71311,7 @@ var SurveyModel = /** @class */ (function (_super) {
         var savingDataStarted = false;
         var onCompleteOptions = {
             isCompleteOnTrigger: isCompleteOnTrigger,
+            completeTrigger: completeTrigger,
             showSaveInProgress: showSaveInProgress,
             showSaveError: showSaveError,
             showSaveSuccess: showSaveSuccess,
@@ -71180,11 +71330,12 @@ var SurveyModel = /** @class */ (function (_super) {
             this.navigateTo();
         }
     };
-    SurveyModel.prototype.checkOnCompletingEvent = function (isCompleteOnTrigger) {
+    SurveyModel.prototype.checkOnCompletingEvent = function (isCompleteOnTrigger, completeTrigger) {
         var options = {
             allowComplete: true,
             allow: true,
             isCompleteOnTrigger: isCompleteOnTrigger,
+            completeTrigger: completeTrigger
         };
         this.onCompleting.fire(this, options);
         return options.allowComplete && options.allow;
@@ -71329,8 +71480,8 @@ var SurveyModel = /** @class */ (function (_super) {
             this.doComplete(true);
         }
     };
-    SurveyModel.prototype.setCompleted = function () {
-        this.doComplete(true);
+    SurveyModel.prototype.setCompleted = function (trigger) {
+        this.doComplete(true, trigger);
     };
     SurveyModel.prototype.canBeCompleted = function (trigger, isCompleted) {
         if (!_settings__WEBPACK_IMPORTED_MODULE_14__["settings"].triggers.changeNavigationButtonsOnComplete)
@@ -73963,7 +74114,7 @@ var SurveyModel = /** @class */ (function (_super) {
                     }
                 }
             }
-            else if (isStrCiEqual(layoutElement.id, "progress-" + this.progressBarType)) {
+            else if (this.state === "running" && isStrCiEqual(layoutElement.id, "progress-" + this.progressBarType)) {
                 if (container === "header") {
                     if (this.isShowProgressBarOnTop && !this.isShowStartingPage) {
                         containerLayoutElements.push(layoutElement);
@@ -74052,9 +74203,6 @@ var SurveyModel = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: {} })
     ], SurveyModel.prototype, "cssVariables", void 0);
-    __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
-    ], SurveyModel.prototype, "backgroundImagePosition", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], SurveyModel.prototype, "_isMobile", void 0);
@@ -74067,6 +74215,9 @@ var SurveyModel = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], SurveyModel.prototype, "backgroundImageFit", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
+    ], SurveyModel.prototype, "backgroundImageAttachment", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], SurveyModel.prototype, "rootCss", void 0);
@@ -74321,6 +74472,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("survey", [
     { name: "width", visibleIf: function (obj) { return obj.widthMode === "static"; } },
     { name: "backgroundImage", serializationProperty: "locBackgroundImage", visible: false },
     { name: "backgroundImageFit", default: "cover", choices: ["auto", "contain", "cover"], visible: false },
+    { name: "backgroundImageAttachment", default: "scroll", choices: ["scroll", "fixed"], visible: false },
     { name: "backgroundOpacity:number", minValue: 0, maxValue: 1, default: 1, visible: false },
     { name: "showBrandInfo:boolean", default: false, visible: false }
 ]);
@@ -75652,7 +75804,7 @@ var SurveyTriggerComplete = /** @class */ (function (_super) {
         if (!this.owner)
             return;
         if (this.isRealExecution()) {
-            this.owner.setCompleted();
+            this.owner.setCompleted(this);
         }
         else {
             this.owner.canBeCompleted(this, true);