survey-react 1.9.96 → 1.9.98

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.96
+ * surveyjs - Survey JavaScript library v1.9.98
  * 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) {
@@ -2921,7 +2921,7 @@ var CalculatedValue = /** @class */ (function (_super) {
             return;
         this.expressionRunner = new _conditions__WEBPACK_IMPORTED_MODULE_2__["ExpressionRunner"](this.expression);
         this.expressionRunner.onRunComplete = function (newValue) {
-            if (!_helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].isTwoValueEquals(newValue, _this.value)) {
+            if (!_helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].isTwoValueEquals(newValue, _this.value, false, true)) {
                 _this.setValue(newValue);
             }
             _this.unlocCalculation();
@@ -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",
@@ -6292,12 +6304,12 @@ var DragDropChoices = /** @class */ (function (_super) {
         }
         var draggedElementShortcut = document.createElement("div");
         // draggedElementShortcut.innerText = text;
-        draggedElementShortcut.style.cssText = " \n          cursor: grabbing;\n          position: absolute;\n          z-index: 10000;\n          font-family: var(--font-family, $font-family);\n        ";
+        draggedElementShortcut.style.cssText = " \n          cursor: grabbing;\n          position: absolute;\n          z-index: 10000;\n          font-family: var(--font-family, 'Open Sans');\n        ";
         var isDeepClone = true;
         var clone = (draggedElementNode
             .closest("[data-sv-drop-target-item-value]")
             .cloneNode(isDeepClone));
-        clone.style.cssText = "\n      min-width: 100px;\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);\n      background-color: var(--background, white);\n      border-radius: 36px;\n      padding-right: 16px;\n      margin-left: 0;\n    ";
+        clone.style.cssText = "\n      min-width: 100px;\n      box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));\n      background-color: var(--sjs-general-backcolor, var(--background, #fff));\n      border-radius: calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));\n      padding-right: calc(2* var(--sjs-base-unit, var(--base-unit, 8px)));\n      margin-left: 0;\n    ";
         var dragIcon = clone.querySelector(".svc-item-value-controls__drag-icon");
         dragIcon.style.visibility = "visible";
         var removeIcon = clone.querySelector(".svc-item-value-controls__remove");
@@ -6315,7 +6327,7 @@ var DragDropChoices = /** @class */ (function (_super) {
     };
     DragDropChoices.prototype.createImagePickerShortcut = function (item, text, draggedElementNode, event) {
         var draggedElementShortcut = document.createElement("div");
-        draggedElementShortcut.style.cssText = " \n      cursor: grabbing;\n      position: absolute;\n      z-index: 10000;\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1), 0px 2px 6px rgba(0, 0, 0, 0.1);\n      padding: 4px;\n      border-radius: 4px;\n      background: white;\n    ";
+        draggedElementShortcut.style.cssText = " \n      cursor: grabbing;\n      position: absolute;\n      z-index: 10000;\n      box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));\n      background-color: var(--sjs-general-backcolor, var(--background, #fff));\n      padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));\n      border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));\n    ";
         var itemValueNode = draggedElementNode.closest("[data-sv-drop-target-item-value]");
         var controlsNode = itemValueNode.querySelector(".svc-image-item-value-controls");
         var imageContainerNode = itemValueNode.querySelector(".sd-imagepicker__image-container");
@@ -6486,7 +6498,9 @@ var DragDropCore = /** @class */ (function () {
         configurable: true
     });
     DragDropCore.prototype.startDrag = function (event, draggedElement, parentElement, draggedElementNode, preventSaveTargetNode) {
+        var _a;
         if (preventSaveTargetNode === void 0) { preventSaveTargetNode = false; }
+        this.domAdapter.rootContainer = (_a = this.survey) === null || _a === void 0 ? void 0 : _a.rootElement;
         this.domAdapter.startDrag(event, draggedElement, parentElement, draggedElementNode, preventSaveTargetNode);
     };
     DragDropCore.prototype.dragInit = function (event, draggedElement, parentElement, draggedElementNode) {
@@ -6494,9 +6508,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);
@@ -6674,12 +6688,12 @@ var DragDropDOMAdapter = /** @class */ (function () {
             if (_utils_devices__WEBPACK_IMPORTED_MODULE_1__["IsTouch"]) {
                 _this.draggedElementShortcut.removeEventListener("contextmenu", _this.onContextMenu);
             }
-            _settings__WEBPACK_IMPORTED_MODULE_2__["settings"].environment.rootElement.removeChild(_this.draggedElementShortcut);
+            _this.draggedElementShortcut.parentElement.removeChild(_this.draggedElementShortcut);
             _this.dd.clear();
             _this.draggedElementShortcut = null;
             _this.scrollIntervalId = null;
             if (_utils_devices__WEBPACK_IMPORTED_MODULE_1__["IsTouch"]) {
-                _this.savedTargetNode && _settings__WEBPACK_IMPORTED_MODULE_2__["settings"].environment.rootElement.removeChild(_this.savedTargetNode);
+                _this.savedTargetNode && _this.savedTargetNode.parentElement.removeChild(_this.savedTargetNode);
                 DragDropDOMAdapter.PreventScrolling = false;
             }
             document.body.style.setProperty("touch-action", "");
@@ -6692,6 +6706,18 @@ var DragDropDOMAdapter = /** @class */ (function () {
         };
         this.draggedElementShortcut = null;
     }
+    Object.defineProperty(DragDropDOMAdapter.prototype, "rootElement", {
+        get: function () {
+            if (Object(_utils_utils__WEBPACK_IMPORTED_MODULE_0__["isShadowDOM"])(_settings__WEBPACK_IMPORTED_MODULE_2__["settings"].environment.root)) {
+                return _settings__WEBPACK_IMPORTED_MODULE_2__["settings"].environment.root.host;
+            }
+            else {
+                return this.rootContainer || _settings__WEBPACK_IMPORTED_MODULE_2__["settings"].environment.root.documentElement || document.body;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DragDropDOMAdapter.prototype, "isMicroMovement", {
         // see https://stackoverflow.com/questions/6042202/how-to-distinguish-mouse-click-and-drag
         get: function () {
@@ -6717,7 +6743,7 @@ var DragDropDOMAdapter = /** @class */ (function () {
                 _this.savedTargetNode = event.target;
                 _this.savedTargetNode.style.cssText =
                     "\n          position: absolute;\n          height: 1px!important;\n          width: 1px!important;\n          overflow: hidden;\n          clip: rect(1px 1px 1px 1px);\n          clip: rect(1px, 1px, 1px, 1px);\n        ";
-                _settings__WEBPACK_IMPORTED_MODULE_2__["settings"].environment.rootElement.appendChild(_this.savedTargetNode);
+                _this.rootElement.appendChild(_this.savedTargetNode);
             }
             _this.stopLongTap();
         }, this.longTap ? 500 : 0);
@@ -6725,6 +6751,8 @@ var DragDropDOMAdapter = /** @class */ (function () {
         document.addEventListener("pointermove", this.stopLongTapIfMoveEnough);
     };
     DragDropDOMAdapter.prototype.moveShortcutElement = function (event) {
+        var rootElementX = this.rootElement.getBoundingClientRect().x;
+        var rootElementY = this.rootElement.getBoundingClientRect().y;
         this.doScroll(event.clientY, event.clientX);
         var shortcutHeight = this.draggedElementShortcut.offsetHeight;
         var shortcutWidth = this.draggedElementShortcut.offsetWidth;
@@ -6735,50 +6763,56 @@ var DragDropDOMAdapter = /** @class */ (function () {
             shortcutXOffset = shortcutWidth / 2;
             shortcutYOffset = shortcutHeight / 2;
         }
-        var documentBottom = (Object(_utils_utils__WEBPACK_IMPORTED_MODULE_0__["isShadowDOM"])(_settings__WEBPACK_IMPORTED_MODULE_2__["settings"].environment.root) ? _settings__WEBPACK_IMPORTED_MODULE_2__["settings"].environment.root.host : _settings__WEBPACK_IMPORTED_MODULE_2__["settings"].environment.root.documentElement).clientHeight;
-        var documentRight = (Object(_utils_utils__WEBPACK_IMPORTED_MODULE_0__["isShadowDOM"])(_settings__WEBPACK_IMPORTED_MODULE_2__["settings"].environment.root) ? _settings__WEBPACK_IMPORTED_MODULE_2__["settings"].environment.root.host : _settings__WEBPACK_IMPORTED_MODULE_2__["settings"].environment.root.documentElement).clientWidth;
-        var shortcutBottomCoordinate = this.getShortcutBottomCoordinate(event.clientY, shortcutHeight, shortcutYOffset);
-        var shortcutRightCoordinate = this.getShortcutRightCoordinate(event.clientX, shortcutWidth, shortcutXOffset);
-        if (shortcutRightCoordinate >= documentRight) {
+        var documentBottom = document.documentElement.clientHeight;
+        var documentRight = document.documentElement.clientWidth;
+        var pageX = event.pageX;
+        var pageY = event.pageY;
+        var clientX = event.clientX;
+        var clientY = event.clientY;
+        var shortcutBottomCoordinate = this.getShortcutBottomCoordinate(clientY, shortcutHeight, shortcutYOffset);
+        var shortcutRightCoordinate = this.getShortcutRightCoordinate(clientX, shortcutWidth, shortcutXOffset);
+        if (shortcutRightCoordinate >= documentRight) { // right boundary
             this.draggedElementShortcut.style.left =
-                event.pageX -
-                    event.clientX +
-                    documentRight -
-                    shortcutWidth +
+                // pageX -
+                // clientX +
+                documentRight -
+                    shortcutWidth -
+                    rootElementX +
                     "px";
             this.draggedElementShortcut.style.top =
-                event.pageY - shortcutYOffset + "px";
+                /*pageY*/ clientY - shortcutYOffset - rootElementY + "px";
             return;
         }
-        if (event.clientX - shortcutXOffset <= 0) {
+        if (clientX - shortcutXOffset <= 0) { // left boundary
             this.draggedElementShortcut.style.left =
-                event.pageX - event.clientX + "px";
+                pageX - clientX - rootElementX + "px";
             this.draggedElementShortcut.style.top =
-                event.pageY - shortcutYOffset + "px";
+                /*pageY*/ clientY - rootElementY - shortcutYOffset + "px";
             return;
         }
-        if (shortcutBottomCoordinate >= documentBottom) {
+        if (shortcutBottomCoordinate >= documentBottom) { // bottom boundary
             this.draggedElementShortcut.style.left =
-                event.pageX - shortcutXOffset + "px";
+                /*pageX*/ clientX - shortcutXOffset - rootElementX + "px";
             this.draggedElementShortcut.style.top =
-                event.pageY -
-                    event.clientY +
-                    documentBottom -
-                    shortcutHeight +
+                // pageY -
+                // clientY +
+                documentBottom -
+                    shortcutHeight -
+                    rootElementY +
                     "px";
             return;
         }
-        if (event.clientY - shortcutYOffset <= 0) {
+        if (clientY - shortcutYOffset <= 0) { // top  boundary
             this.draggedElementShortcut.style.left =
-                event.pageX - shortcutXOffset + "px";
+                clientX - shortcutXOffset - rootElementX + "px";
             this.draggedElementShortcut.style.top =
-                event.pageY - event.clientY + "px";
+                pageY - clientY - rootElementY + "px";
             return;
         }
         this.draggedElementShortcut.style.left =
-            event.pageX - shortcutXOffset + "px";
+            clientX - rootElementX - shortcutXOffset + "px";
         this.draggedElementShortcut.style.top =
-            event.pageY - shortcutYOffset + "px";
+            clientY - rootElementY - shortcutYOffset + "px";
     };
     DragDropDOMAdapter.prototype.getShortcutBottomCoordinate = function (currentY, shortcutHeight, shortcutYOffset) {
         return currentY + shortcutHeight - shortcutYOffset;
@@ -6789,7 +6823,7 @@ var DragDropDOMAdapter = /** @class */ (function () {
     DragDropDOMAdapter.prototype.doScroll = function (clientY, clientX) {
         var _this = this;
         cancelAnimationFrame(this.scrollIntervalId);
-        var startScrollBoundary = 50;
+        var startScrollBoundary = 100;
         this.draggedElementShortcut.hidden = true;
         var dragOverNode = document.elementFromPoint(clientX, clientY);
         this.draggedElementShortcut.hidden = false;
@@ -6834,7 +6868,7 @@ var DragDropDOMAdapter = /** @class */ (function () {
         if (event.which === 3)
             return; //right mouse btn
         this.dd.dragInit(event, draggedElement, parentElement, draggedElementNode);
-        document.body.append(this.draggedElementShortcut);
+        this.rootElement.append(this.draggedElementShortcut);
         this.moveShortcutElement(event);
         document.addEventListener("pointermove", this.dragOver);
         document.addEventListener("pointercancel", this.handlePointerCancel);
@@ -6917,13 +6951,13 @@ var DragDropMatrixRows = /** @class */ (function (_super) {
         var _this = this;
         var draggedElementShortcut = document.createElement("div");
         // draggedElementShortcut.innerText = text;
-        draggedElementShortcut.style.cssText = " \n          cursor: grabbing;\n          position: absolute;\n          z-index: 10000;\n          font-family: var(--font-family, $font-family);\n        ";
+        draggedElementShortcut.style.cssText = " \n          cursor: grabbing;\n          position: absolute;\n          z-index: 10000;\n          font-family: var(--font-family, 'Open Sans');\n        ";
         var isDeepClone = true;
         if (!!draggedElementNode) {
             var row = (draggedElementNode
                 .closest("[data-sv-drop-target-matrix-row]"));
             var clone = (row.cloneNode(isDeepClone));
-            clone.style.cssText = "\n        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1), 0px 2px 6px rgba(0, 0, 0, 0.1);\n        background-color: white;\n        display: flex;\n        flex-grow: 0;\n        flex-shrink: 0;\n        align-items: center;\n        line-height: 0;\n        width: " + row.offsetWidth + "px;\n      ";
+            clone.style.cssText = "\n        box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));\n        background-color: var(--sjs-general-backcolor, var(--background, #fff));\n        display: flex;\n        flex-grow: 0;\n        flex-shrink: 0;\n        align-items: center;\n        line-height: 0;\n        width: " + row.offsetWidth + "px;\n      ";
             clone.classList.remove("sv-matrix__drag-drop--moveup");
             clone.classList.remove("sv-matrix__drag-drop--movedown");
             this.draggedElement.isDragDropMoveDown = false;
@@ -7093,7 +7127,7 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
     DragDropRankingChoices.prototype.createDraggedElementShortcut = function (text, draggedElementNode, event) {
         var draggedElementShortcut = document.createElement("div");
         draggedElementShortcut.className = this.shortcutClass + " sv-ranking-shortcut";
-        draggedElementShortcut.style.cssText = " \n          cursor: grabbing;\n          position: absolute;\n          z-index: 10000;\n          border-radius: 36px;\n          min-width: 100px;\n          box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1), 0px 2px 6px rgba(0, 0, 0, 0.1);\n          background-color: var(--background, white);\n          font-family: var(--font-family, $font-family);\n        ";
+        draggedElementShortcut.style.cssText = " \n          cursor: grabbing;\n          position: absolute;\n          z-index: 10000;\n          border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));\n          min-width: 100px;\n          box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));\n          background-color: var(--sjs-general-backcolor, var(--background, #fff));\n          font-family: var(--font-family, 'Open Sans');\n        ";
         var isDeepClone = true;
         var clone = draggedElementNode.cloneNode(isDeepClone);
         draggedElementShortcut.appendChild(clone);
@@ -7227,6 +7261,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 +7325,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 +9034,7 @@ __webpack_require__.r(__webpack_exports__);
 // import "../../main.scss";
 //import "../../modern.scss";
 var Version;
-Version = "" + "1.9.96";
+Version = "" + "1.9.98";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -15881,8 +15922,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 +16217,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 +16537,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 +18751,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 +18791,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 +18905,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 +18936,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 +19099,7 @@ var JsonObject = /** @class */ (function () {
             }
         }
         if (error) {
-            this.addNewError(error, value);
+            this.addNewError(error, value, newObj);
         }
         return error;
     };
@@ -19058,11 +19120,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 +21116,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"),
@@ -24957,91 +25025,96 @@ __webpack_require__.r(__webpack_exports__);
 // These strings are commented out. Uncomment and edit them if you want to add your translations.
 
 var turkishSurveyStrings = {
-    pagePrevText: "Geri",
-    pageNextText: "İleri",
-    completeText: "Anketi Tamamla",
-    previewText: "Ön izleme",
+    pagePrevText: "Önceki",
+    pageNextText: "Sonraki",
+    completeText: "Tamamla",
+    previewText: "Önizleme",
     editText: "Düzenle",
     startSurveyText: "Başlat",
     otherItemText: "Diğer (açıklayınız)",
-    noneItemText: "Yok",
-    selectAllItemText: "Hepsini seç",
-    progressText: "Sayfa {0} / {1}",
-    // indexText: "{0} of {1}",
-    panelDynamicProgressText: "Kayıt {0} / {1}",
-    questionsProgressText: "Soruları cevapladı {0} / {1}",
+    noneItemText: "Hiçbiri",
+    selectAllItemText: "Tümünü Seç",
+    progressText: "Sayfa {0}/{1}",
+    indexText: "{0}/{1}",
+    panelDynamicProgressText: "{0}/{1}",
+    panelDynamicTabTextFormat: "Panel {panelIndex}",
+    questionsProgressText: "{0}/{1} soru yanıtlandı",
     emptySurvey: "Ankette görüntülenecek sayfa ya da soru mevcut değil.",
-    completingSurvey: "Anketimizi tamamladığınız için teşekkür ederiz.",
-    completingSurveyBefore: "Kayıtlarımız, bu anketi zaten tamamladığınızı gösteriyor.",
-    loadingSurvey: "Anket sunucudan yükleniyor ...",
-    placeholder: "Seçiniz ...",
-    // ratingOptionsCaption: "Select...",
+    completingSurvey: "Anketi tamamladığınız için teşekkür ederiz",
+    completingSurveyBefore: "Kayıtlarımız bu anketi zaten tamamladığınızı gösteriyor.",
+    loadingSurvey: "Anket Yükleniyor...",
+    placeholder: "Seçiniz...",
+    ratingOptionsCaption: "Seçiniz...",
     value: "değer",
-    requiredError: "Lütfen soruya cevap veriniz",
+    requiredError: "Lütfen soruya cevap verin.",
     requiredErrorInPanel: "Lütfen en az bir soruyu yanıtlayın.",
-    requiredInAllRowsError: "Lütfen tüm satırlardaki soruları cevaplayınız.",
-    numericError: "Girilen değer numerik olmalıdır",
-    // minError: "The value should not be less than {0}",
-    // maxError: "The value should not be greater than {0}",
-    textMinLength: "En az {0} sembol giriniz.",
-    textMaxLength: "Lütfen {0} karakterden az girin.",
-    textMinMaxLength: "Lütfen {0} ’den fazla ve {1} ’den az karakter girin.",
+    requiredInAllRowsError: "Lütfen tüm satırlardaki soruları cevaplayın.",
+    numericError: "Değer sayısal olmalıdır.",
+    minError: "Değer {0}'den küçük olmamalıdır",
+    maxError: "Değer {0}'dan büyük olmamalıdır",
+    textMinLength: "Lütfen en az {0} karakter girin.",
+    textMaxLength: "Lütfen en fazla {0} karakter girin.",
+    textMinMaxLength: "Lütfen {0}’den fazla ve {1}’den az karakter girin.",
     minRowCountError: "Lütfen en az {0} satırı doldurun.",
-    minSelectError: "Lütfen en az {0} seçeneği seçiniz.",
-    maxSelectError: "Lütfen {0} adetten fazla seçmeyiniz.",
-    numericMinMax: "The '{0}' should be equal or more than {1} and equal or less than {2}",
+    minSelectError: "Lütfen en az {0} seçeneği seçin.",
+    maxSelectError: "Lütfen en fazla {0} seçeneği seçin.",
+    numericMinMax: "'{0}', {1}'e eşit veya daha büyük ve {2}'ye eşit veya daha küçük olmalıdır",
     numericMin: "'{0}' değeri {1} değerine eşit veya büyük olmalıdır",
     numericMax: "'{0}' değeri {1} değerine eşit ya da küçük olmalıdır.",
-    invalidEmail: "Lütfen geçerli bir eposta adresi giriniz.",
+    invalidEmail: "Lütfen geçerli bir e-posta adresi girin.",
     invalidExpression: "İfade: {0} 'true' döndürmelidir.",
-    urlRequestError: "Talebi şu hatayı döndü '{0}'. {1}",
-    urlGetChoicesError: "Talep herhangi bir veri dönmedi ya da 'path' özelliği hatalı.",
+    urlRequestError: "İstek '{0}' hatasını döndürdü. {1}",
+    urlGetChoicesError: "İstek boş veri döndürdü veya 'path' özelliği yanlış",
     exceedMaxSize: "Dosya boyutu {0} değerini geçemez.",
-    otherRequiredError: "Lütfen diğer değerleri giriniz.",
-    uploadingFile: "Dosyanız yükleniyor. LÜtfen birkaç saniye bekleyin ve tekrar deneyin.",
+    otherRequiredError: "Lütfen diğer değerleri girin.",
+    uploadingFile: "Dosyanız yükleniyor. Lütfen birkaç saniye bekleyin ve tekrar deneyin.",
     loadingFile: "Yükleniyor...",
-    chooseFile: "Dosyaları seçin ...",
+    chooseFile: "Dosyaları seçin...",
     noFileChosen: "Dosya seçili değil",
-    // fileDragAreaPlaceholder: "Drop a file here or click the button below to load the file.",
+    fileDragAreaPlaceholder: "Buraya bir dosya bırakın veya dosyayı yüklemek için aşağıdaki düğmeyi tıklayın.",
     confirmDelete: "Kaydı silmek istiyor musunuz?",
     keyDuplicationError: "Bu değer benzersiz olmalıdır.",
-    addColumn: "Sütun ekleyin",
+    addColumn: "Sütun Ekle",
     addRow: "Satır Ekle",
     removeRow: "Kaldır",
-    // emptyRowsText: "There are no rows.",
+    emptyRowsText: "Satır yok.",
     addPanel: "Yeni ekle",
-    removePanel: "Kaldırmak",
-    choices_Item: "eşya",
+    removePanel: "Kaldır",
+    choices_Item: "öğe",
     matrix_column: "Sütun",
-    matrix_row: "Kürek çekmek",
-    // multipletext_itemname: "text",
-    savingData: "Sonuçlar sunucuya kaydediliyor ...",
-    savingDataError: "Bir hata oluştu ve sonuçları kaydedemedik.",
+    matrix_row: "Satır",
+    multipletext_itemname: "metin",
+    savingData: "Sonuçlar sunucuya kaydediliyor...",
+    savingDataError: "Bir hata oluştu ve sonuçlar kaydedilemedi.",
     savingDataSuccess: "Sonuçlar başarıyla kaydedildi!",
     saveAgainButton: "Tekrar deneyin",
-    timerMin: "min",
+    timerMin: "dakika",
     timerSec: "saniye",
     timerSpentAll: "Bu sayfada {0} ve toplamda {1} harcadınız.",
     timerSpentPage: "Bu sayfaya {0} harcadınız.",
     timerSpentSurvey: "Toplamda {0} harcadınız.",
-    timerLimitAll: "Bu sayfaya {0} / {1} ve toplamda {2} / {3} harcadınız.",
-    timerLimitPage: "Bu sayfaya {0} / {1} harcadınız.",
-    timerLimitSurvey: "Toplamda {0} / {1} harcadınız.",
-    clearCaption: "Açık",
-    // signaturePlaceHolder: "Sign here",
+    timerLimitAll: "Bu sayfaya {0}/{1} ve toplamda {2}/{3} harcadınız.",
+    timerLimitPage: "Bu sayfaya {0}/{1} harcadınız.",
+    timerLimitSurvey: "Toplamda {0}/{1} harcadınız.",
+    clearCaption: "Temizle",
+    signaturePlaceHolder: "Burayı imzalayın",
     chooseFileCaption: "Dosya seçin",
     removeFileCaption: "Bu dosyayı kaldır",
     booleanCheckedLabel: "Evet",
     booleanUncheckedLabel: "Hayır",
     confirmRemoveFile: "Bu dosyayı kaldırmak istediğinizden emin misiniz: {0}?",
     confirmRemoveAllFiles: "Tüm dosyaları kaldırmak istediğinizden emin misiniz?",
-    questionTitlePatternText: "Soru başlığı",
-    // modalCancelButtonText: "Cancel",
-    // modalApplyButtonText: "Apply",
-    // filterStringPlaceholder: "Type to search...",
-    // emptyMessage: "No data to display",
-    // noEntriesText: "There are no entries yet.\nClick the button below to add a new entry.",
-    // more: "More"
+    questionTitlePatternText: "Soru Başlığı",
+    modalCancelButtonText: "İptal",
+    modalApplyButtonText: "Uygula",
+    filterStringPlaceholder: "Aramak için yazın...",
+    emptyMessage: "Görüntülenecek veri yok",
+    noEntriesText: "Henüz giriş yok.\nYeni bir giriş eklemek için aşağıdaki düğmeyi tıklayın.",
+    noEntriesReadonlyText: "Giriş yok.",
+    more: "Daha fazla",
+    tagboxDoneButtonCaption: "TAMAM",
+    selectToRankEmptyRankedAreaText: "Tüm seçenekler sıralanmıştır",
+    selectToRankEmptyUnrankedAreaText: "Seçimleri sıralamak için buraya sürükleyip bırakın",
 };
 survey_core__WEBPACK_IMPORTED_MODULE_0__["surveyLocalization"].locales["tr"] = turkishSurveyStrings;
 survey_core__WEBPACK_IMPORTED_MODULE_0__["surveyLocalization"].localeNames["tr"] = "türkçe";
@@ -28332,7 +28405,7 @@ var PanelModel = /** @class */ (function (_super) {
             if (this.hasEditButton) {
                 actions.push({
                     id: "cancel-preview",
-                    title: this.survey.editText,
+                    locTitle: this.survey.locEditText,
                     innerCss: this.survey.cssNavigationEdit,
                     action: function () { _this.cancelPreview(); }
                 });
@@ -29626,7 +29699,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 +29860,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 +30014,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 +30032,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 +30050,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 +30674,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 +32337,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);
@@ -33023,7 +33120,7 @@ var Question = /** @class */ (function (_super) {
         var _this = this;
         this.defaultValueRunner = this.getDefaultRunner(this.defaultValueRunner, this.defaultValueExpression);
         this.setValueAndRunExpression(this.defaultValueRunner, this.getUnbindValue(this.defaultValue), function (val) {
-            if (!_helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].isTwoValueEquals(_this.value, val)) {
+            if (!_this.isTwoValueEquals(_this.value, val)) {
                 _this.value = val;
             }
         });
@@ -33057,7 +33154,7 @@ var Question = /** @class */ (function (_super) {
         if (!setFunc) {
             setFunc = function (val) {
                 _this.runExpressionSetValue(val, function (val) {
-                    if (!_helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].isTwoValueEquals(_this.value, val)) {
+                    if (!_this.isTwoValueEquals(_this.value, val)) {
                         _this.value = val;
                     }
                 });
@@ -34433,7 +34530,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));
@@ -35116,6 +35213,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         return str == "" && val ? val : str;
     };
     QuestionSelectBase.prototype.getDisplayArrayValue = function (keysAsText, value, onGetValueCallback) {
+        var _this = this;
         var items = this.visibleChoices;
         var strs = [];
         var vals = [];
@@ -35123,7 +35221,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
             vals.push(!onGetValueCallback ? value[i] : onGetValueCallback(i));
         }
         if (_helpers__WEBPACK_IMPORTED_MODULE_8__["Helpers"].isTwoValueEquals(this.value, vals)) {
-            this.getMultipleSelectedItems().forEach(function (item) { return strs.push(item.locText.textOrHtml); });
+            this.getMultipleSelectedItems().forEach(function (item) { return strs.push(_this.getItemDisplayValue(item)); });
         }
         if (strs.length === 0) {
             for (var i = 0; i < vals.length; i++) {
@@ -35135,6 +35233,11 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         }
         return strs.join(", ");
     };
+    QuestionSelectBase.prototype.getItemDisplayValue = function (item) {
+        if (item === this.otherItem && this.comment)
+            return this.comment;
+        return item.locText.textOrHtml;
+    };
     QuestionSelectBase.prototype.getFilteredChoices = function () {
         return this.filteredChoicesValue
             ? this.filteredChoicesValue
@@ -35453,7 +35556,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 +35651,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 +37103,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 +37242,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 +37742,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 +38138,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 +38157,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 +38182,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 +38194,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 +38350,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 +38415,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 +38450,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 +38459,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 +38570,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 +39888,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 +40194,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 +40242,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 +45310,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
@@ -48566,7 +48712,7 @@ var QuestionPanelDynamicItem = /** @class */ (function () {
     QuestionPanelDynamicItem.prototype.setValue = function (name, newValue) {
         var oldItemData = this.data.getPanelItemData(this);
         var oldValue = !!oldItemData ? oldItemData[name] : undefined;
-        if (_helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].isTwoValueEquals(newValue, oldValue))
+        if (_helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].isTwoValueEquals(newValue, oldValue, false, true))
             return;
         this.data.setPanelItemData(this, name, _helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].getUnbindValue(newValue));
         var questions = this.panel.questions;
@@ -51244,7 +51390,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 +51664,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 +51709,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 +51808,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 +51835,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"]));
 
@@ -53941,7 +54105,7 @@ var QuestionTextModel = /** @class */ (function (_super) {
     });
     QuestionTextModel.prototype.updateValueOnEvent = function (event) {
         var newValue = event.target.value;
-        if (!_helpers__WEBPACK_IMPORTED_MODULE_3__["Helpers"].isTwoValueEquals(this.value, newValue)) {
+        if (!this.isTwoValueEquals(this.value, newValue)) {
             this.value = newValue;
         }
     };
@@ -57556,7 +57720,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 +57742,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 +57765,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 })));
@@ -57615,7 +57787,7 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
         if (!!this.inputElement) {
             var control = this.inputElement;
             var newValue = this.question.dropdownListModel.inputStringRendered;
-            if (!survey_core__WEBPACK_IMPORTED_MODULE_1__["Helpers"].isTwoValueEquals(newValue, control.value)) {
+            if (!survey_core__WEBPACK_IMPORTED_MODULE_1__["Helpers"].isTwoValueEquals(newValue, control.value, false, true)) {
                 control.value = this.question.dropdownListModel.inputStringRendered;
             }
         }
@@ -57762,7 +57934,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 +59185,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 +59196,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,
@@ -60957,7 +61130,7 @@ var SurveyQuestionUncontrolledElement = /** @class */ (function (_super) {
     function SurveyQuestionUncontrolledElement(props) {
         var _this = _super.call(this, props) || this;
         _this.updateValueOnEvent = function (event) {
-            if (!survey_core__WEBPACK_IMPORTED_MODULE_1__["Helpers"].isTwoValueEquals(_this.questionBase.value, event.target.value)) {
+            if (!survey_core__WEBPACK_IMPORTED_MODULE_1__["Helpers"].isTwoValueEquals(_this.questionBase.value, event.target.value, false, true)) {
                 _this.setValueCore(event.target.value);
             }
         };
@@ -60981,7 +61154,7 @@ var SurveyQuestionUncontrolledElement = /** @class */ (function (_super) {
         if (!!this.control) {
             var control = this.control;
             var newValue = this.getValueCore();
-            if (!survey_core__WEBPACK_IMPORTED_MODULE_1__["Helpers"].isTwoValueEquals(newValue, control.value)) {
+            if (!survey_core__WEBPACK_IMPORTED_MODULE_1__["Helpers"].isTwoValueEquals(newValue, control.value, false, true)) {
                 control.value = this.getValue(newValue);
             }
         }
@@ -61216,7 +61389,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 },
@@ -61529,7 +61702,6 @@ var SurveyQuestionMatrixRow = /** @class */ (function (_super) {
             var td = null;
             var column = this.question.visibleColumns[i];
             var key = "value" + i;
-            //var isChecked = Helpers.isTwoValueEquals(row.value, column.value);
             var isChecked = row.value == column.value;
             var itemClass = this.question.getItemClass(row, column);
             var inputId = this.question.inputId + "_" + row.name + "_" + i;
@@ -62785,12 +62957,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 +63246,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 },
@@ -63829,7 +64001,7 @@ var TagboxFilterString = /** @class */ (function (_super) {
         if (!!this.inputElement) {
             var control = this.inputElement;
             var newValue = this.model.inputStringRendered;
-            if (!survey_core__WEBPACK_IMPORTED_MODULE_1__["Helpers"].isTwoValueEquals(newValue, control.value)) {
+            if (!survey_core__WEBPACK_IMPORTED_MODULE_1__["Helpers"].isTwoValueEquals(newValue, control.value, false, true)) {
                 control.value = this.model.inputStringRendered;
             }
         }
@@ -64909,6 +65081,8 @@ var StylesManager = /** @class */ (function () {
         return themeMapper;
     };
     StylesManager.getIncludedThemeCss = function () {
+        if (typeof _settings__WEBPACK_IMPORTED_MODULE_1__["settings"].environment === "undefined")
+            return [];
         var rootElement = _settings__WEBPACK_IMPORTED_MODULE_1__["settings"].environment.rootElement;
         var themeMapper = StylesManager.getAvailableThemes();
         var element = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_2__["isShadowDOM"])(rootElement) ? rootElement.host : rootElement;
@@ -64947,6 +65121,8 @@ var StylesManager = /** @class */ (function () {
     };
     StylesManager.applyTheme = function (themeName, themeSelector) {
         if (themeName === void 0) { themeName = "default"; }
+        if (typeof _settings__WEBPACK_IMPORTED_MODULE_1__["settings"].environment === "undefined")
+            return;
         var rootElement = _settings__WEBPACK_IMPORTED_MODULE_1__["settings"].environment.rootElement;
         var element = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_2__["isShadowDOM"])(rootElement) ? rootElement.host : rootElement;
         _defaultCss_defaultV2Css__WEBPACK_IMPORTED_MODULE_0__["surveyCss"].currentType = themeName;
@@ -68569,10 +68745,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 +68834,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 +70504,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
@@ -70787,7 +70972,7 @@ var SurveyModel = /** @class */ (function (_super) {
             return false;
         if (doComplete) {
             this.currentPage.passed = true;
-            return this.doComplete(this.canBeCompletedByTrigger);
+            return this.doComplete(this.canBeCompletedByTrigger, this.completedTrigger);
         }
         this.doNextPage();
         return true;
@@ -71125,11 +71310,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 +71322,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 +71347,7 @@ var SurveyModel = /** @class */ (function (_super) {
         var savingDataStarted = false;
         var onCompleteOptions = {
             isCompleteOnTrigger: isCompleteOnTrigger,
+            completeTrigger: completeTrigger,
             showSaveInProgress: showSaveInProgress,
             showSaveError: showSaveError,
             showSaveSuccess: showSaveSuccess,
@@ -71180,11 +71366,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 +71516,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)
@@ -71339,7 +71526,7 @@ var SurveyModel = /** @class */ (function (_super) {
         if (!this.completedByTriggers)
             this.completedByTriggers = {};
         if (isCompleted) {
-            this.completedByTriggers[trigger.id] = true;
+            this.completedByTriggers[trigger.id] = trigger;
         }
         else {
             delete this.completedByTriggers[trigger.id];
@@ -71357,6 +71544,16 @@ var SurveyModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SurveyModel.prototype, "completedTrigger", {
+        get: function () {
+            if (!this.canBeCompletedByTrigger)
+                return undefined;
+            var key = Object.keys(this.completedByTriggers)[0];
+            return this.completedByTriggers[key];
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(SurveyModel.prototype, "processedCompletedHtml", {
         /**
          * Returns the HTML content for the complete page.
@@ -71499,6 +71696,7 @@ var SurveyModel = /** @class */ (function (_super) {
             survey: this,
             htmlElement: htmlElement,
         });
+        this.rootElement = htmlElement;
     };
     SurveyModel.prototype.processResponsiveness = function (width, mobileWidth) {
         var isMobile = width < mobileWidth;
@@ -73816,11 +74014,17 @@ var SurveyModel = /** @class */ (function (_super) {
             }
         }
     };
-    SurveyModel.prototype.copyTriggerValue = function (name, fromName) {
+    SurveyModel.prototype.copyTriggerValue = function (name, fromName, copyDisplayValue) {
         if (!name || !fromName)
             return;
-        var processor = new _conditionProcessValue__WEBPACK_IMPORTED_MODULE_6__["ProcessValue"]();
-        var value = processor.getValue(fromName, this.getFilteredValues());
+        var value;
+        if (copyDisplayValue) {
+            value = this.processText("{" + fromName + "}", true);
+        }
+        else {
+            var processor = new _conditionProcessValue__WEBPACK_IMPORTED_MODULE_6__["ProcessValue"]();
+            value = processor.getValue(fromName, this.getFilteredValues());
+        }
         this.setTriggerValue(name, value, false);
     };
     SurveyModel.prototype.triggerExecuted = function (trigger) {
@@ -73963,7 +74167,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 +74256,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 +74268,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 +74525,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 }
 ]);
@@ -74991,7 +75196,7 @@ var SvgIconRegistry = /** @class */ (function () {
     };
     SvgIconRegistry.prototype.renderIcons = function () {
         var containerId = "sv-icon-holder-global-container";
-        if (!_settings__WEBPACK_IMPORTED_MODULE_0__["settings"].environment.root.getElementById(containerId)) {
+        if (!!_settings__WEBPACK_IMPORTED_MODULE_0__["settings"].environment && !_settings__WEBPACK_IMPORTED_MODULE_0__["settings"].environment.root.getElementById(containerId)) {
             var iconsDiv = document.createElement("div");
             iconsDiv.id = containerId;
             iconsDiv.innerHTML = "<svg>" + this.iconsRenderedHtml() + "</svg>";
@@ -75652,7 +75857,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);
@@ -75839,13 +76044,23 @@ var SurveyTriggerCopyValue = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SurveyTriggerCopyValue.prototype, "copyDisplayValue", {
+        get: function () {
+            return this.getPropertyValue("copyDisplayValue");
+        },
+        set: function (val) {
+            this.setPropertyValue("copyDisplayValue", val);
+        },
+        enumerable: false,
+        configurable: true
+    });
     SurveyTriggerCopyValue.prototype.getType = function () {
         return "copyvaluetrigger";
     };
     SurveyTriggerCopyValue.prototype.onSuccess = function (values, properties) {
         if (!this.setToName || !this.owner)
             return;
-        this.owner.copyTriggerValue(this.setToName, this.fromName);
+        this.owner.copyTriggerValue(this.setToName, this.fromName, this.copyDisplayValue);
     };
     return SurveyTriggerCopyValue;
 }(SurveyTrigger));
@@ -75875,7 +76090,8 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("setvaluetrigger
 ], function () {
     return new SurveyTriggerSetValue();
 }, "surveytrigger");
-_jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("copyvaluetrigger", [{ name: "!fromName:questionvalue" }, { name: "!setToName:questionvalue" }], function () {
+_jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("copyvaluetrigger", [{ name: "!fromName:questionvalue" }, { name: "!setToName:questionvalue" },
+    { name: "copyDisplayValue:boolean", visible: false }], function () {
     return new SurveyTriggerCopyValue();
 }, "surveytrigger");
 _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("skiptrigger", [{ name: "!gotoName:question" }], function () {