survey-react 1.9.80 → 1.9.82

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.80
+ * surveyjs - Survey JavaScript library v1.9.82
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -2859,6 +2859,8 @@ var Base = /** @class */ (function () {
             this.localizableStrings = {};
         }
         this.localizableStrings[name] = locStr;
+        var prop = this.getPropertyByName(name);
+        locStr.disableLocalization = prop && prop.isLocalizable === false;
         return locStr;
     };
     Base.prototype.getLocalizableString = function (name) {
@@ -5073,7 +5075,11 @@ var modernCss = {
         cleanButtonSvg: "sv-dropdown_clean-button-svg",
         cleanButtonIconId: "icon-clear_16x16",
         controlValue: "sv-dropdown__value",
-        controlInputFieldComponent: "sv_dropdown_control__input-field-component"
+        controlInputFieldComponent: "sv_dropdown_control__input-field-component",
+        itemSmiley: "sv-rating__item-smiley",
+        itemStar: "sv-rating__item-star",
+        itemSmileySelected: "sv-rating__item-smiley--selected",
+        itemStarSelected: "sv-rating__item-star--selected"
     },
     comment: {
         root: "sv-comment",
@@ -5382,6 +5388,8 @@ var defaultStandardCss = {
     paneldynamic: {
         root: "sv_panel_dynamic",
         title: "sv_p_title",
+        header: "sv-paneldynamic__header sv_header",
+        headerTab: "sv-paneldynamic__header-tab",
         button: "",
         buttonAdd: "sv-paneldynamic__add-btn",
         buttonRemove: "sv_p_remove_btn",
@@ -5450,10 +5458,15 @@ var defaultStandardCss = {
     rating: {
         root: "sv_q_rating",
         item: "sv_q_rating_item",
+        itemFixedSize: "sv_q_rating_item_fixed",
         selected: "active",
         minText: "sv_q_rating_min_text",
         itemText: "sv_q_rating_item_text",
         maxText: "sv_q_rating_max_text",
+        itemStar: "sv_q_rating__item-star",
+        itemStarSelected: "sv_q_rating__item-star--selected",
+        itemSmiley: "sv_q_rating__item-smiley",
+        itemSmileySelected: "sv_q_rating__item-smiley--selected",
     },
     text: {
         root: "sv_q_text_root",
@@ -5626,6 +5639,8 @@ var defaultV2Css = {
         root: "sd-paneldynamic",
         navigation: "sd-paneldynamic__navigation",
         title: "sd-title sd-element__title sd-question__title",
+        header: "sd-paneldynamic__header sd-element__header",
+        headerTab: "sd-paneldynamic__header-tab",
         button: "sd-action sd-paneldynamic__btn",
         buttonRemove: "sd-action--negative sd-paneldynamic__remove-btn",
         buttonAdd: "sd-paneldynamic__add-btn",
@@ -6005,6 +6020,7 @@ var defaultV2Css = {
         itemText: "sd-rating__item-text",
         maxText: "sd-rating__item-text sd-rating__max-text",
         itemDisabled: "sd-rating__item--disabled",
+        itemFixedSize: "sd-rating__item--fixed-size",
         control: "sd-input sd-dropdown",
         controlValue: "sd-dropdown__value",
         controlDisabled: "sd-input--disabled",
@@ -6206,6 +6222,443 @@ var DefaultTitleModel = /** @class */ (function () {
 
 
 
+/***/ }),
+
+/***/ "./src/drag-drop-helper-v1.ts":
+/*!************************************!*\
+  !*** ./src/drag-drop-helper-v1.ts ***!
+  \************************************/
+/*! exports provided: DragDropInfo */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DragDropInfo", function() { return DragDropInfo; });
+var DragDropInfo = /** @class */ (function () {
+    function DragDropInfo(source, target, nestedPanelDepth) {
+        if (nestedPanelDepth === void 0) { nestedPanelDepth = -1; }
+        this.source = source;
+        this.target = target;
+        this.nestedPanelDepth = nestedPanelDepth;
+    }
+    return DragDropInfo;
+}());
+
+
+
+/***/ }),
+
+/***/ "./src/drag-drop-page-helper-v1.ts":
+/*!*****************************************!*\
+  !*** ./src/drag-drop-page-helper-v1.ts ***!
+  \*****************************************/
+/*! exports provided: DragDropPageHelperV1 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DragDropPageHelperV1", function() { return DragDropPageHelperV1; });
+/* harmony import */ var _drag_drop_helper_v1__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./drag-drop-helper-v1 */ "./src/drag-drop-helper-v1.ts");
+/* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./settings */ "./src/settings.ts");
+
+
+var DragDropPageHelperV1 = /** @class */ (function () {
+    function DragDropPageHelperV1(page) {
+        this.page = page;
+    }
+    DragDropPageHelperV1.prototype.getDragDropInfo = function () { return this.dragDropInfo; };
+    DragDropPageHelperV1.prototype.dragDropStart = function (src, target, nestedPanelDepth) {
+        if (nestedPanelDepth === void 0) { nestedPanelDepth = -1; }
+        this.dragDropInfo = new _drag_drop_helper_v1__WEBPACK_IMPORTED_MODULE_0__["DragDropInfo"](src, target, nestedPanelDepth);
+    };
+    DragDropPageHelperV1.prototype.dragDropMoveTo = function (destination, isBottom, isEdge) {
+        if (isBottom === void 0) { isBottom = false; }
+        if (isEdge === void 0) { isEdge = false; }
+        if (!this.dragDropInfo)
+            return false;
+        this.dragDropInfo.destination = destination;
+        this.dragDropInfo.isBottom = isBottom;
+        this.dragDropInfo.isEdge = isEdge;
+        this.correctDragDropInfo(this.dragDropInfo);
+        if (!this.dragDropCanDropTagert())
+            return false;
+        if (!this.dragDropCanDropSource() || !this.dragDropAllowFromSurvey()) {
+            if (!!this.dragDropInfo.source) {
+                var row = this.page.dragDropFindRow(this.dragDropInfo.target);
+                this.page.updateRowsRemoveElementFromRow(this.dragDropInfo.target, row);
+            }
+            return false;
+        }
+        this.page.dragDropAddTarget(this.dragDropInfo);
+        return true;
+    };
+    DragDropPageHelperV1.prototype.correctDragDropInfo = function (dragDropInfo) {
+        if (!dragDropInfo.destination)
+            return;
+        var panel = dragDropInfo.destination.isPanel
+            ? dragDropInfo.destination
+            : null;
+        if (!panel)
+            return;
+        if (!dragDropInfo.target.isLayoutTypeSupported(panel.getChildrenLayoutType())) {
+            dragDropInfo.isEdge = true;
+        }
+    };
+    DragDropPageHelperV1.prototype.dragDropAllowFromSurvey = function () {
+        var dest = this.dragDropInfo.destination;
+        if (!dest || !this.page.survey)
+            return true;
+        var insertBefore = null;
+        var insertAfter = null;
+        var parent = dest.isPage || (!this.dragDropInfo.isEdge && dest.isPanel)
+            ? dest
+            : dest.parent;
+        if (!dest.isPage) {
+            var container = dest.parent;
+            if (!!container) {
+                var elements = container.elements;
+                var index = elements.indexOf(dest);
+                if (index > -1) {
+                    insertBefore = dest;
+                    insertAfter = dest;
+                    if (this.dragDropInfo.isBottom) {
+                        insertBefore =
+                            index < elements.length - 1 ? elements[index + 1] : null;
+                    }
+                    else {
+                        insertAfter = index > 0 ? elements[index - 1] : null;
+                    }
+                }
+            }
+        }
+        var options = {
+            allow: true,
+            target: this.dragDropInfo.target,
+            source: this.dragDropInfo.source,
+            parent: parent,
+            insertAfter: insertAfter,
+            insertBefore: insertBefore,
+        };
+        return this.page.survey.dragAndDropAllow(options);
+    };
+    DragDropPageHelperV1.prototype.dragDropFinish = function (isCancel) {
+        if (isCancel === void 0) { isCancel = false; }
+        if (!this.dragDropInfo)
+            return;
+        var target = this.dragDropInfo.target;
+        var src = this.dragDropInfo.source;
+        var dest = this.dragDropInfo.destination;
+        var row = this.page.dragDropFindRow(target);
+        var targetIndex = this.dragDropGetElementIndex(target, row);
+        this.page.updateRowsRemoveElementFromRow(target, row);
+        var elementsToSetSWNL = [];
+        var elementsToResetSWNL = [];
+        if (!isCancel && !!row) {
+            var isSamePanel = false;
+            if (this.page.isDesignMode && _settings__WEBPACK_IMPORTED_MODULE_1__["settings"].supportCreatorV2) {
+                var srcRow = src && src.parent && src.parent.dragDropFindRow(src);
+                if (row.panel.elements[targetIndex] && row.panel.elements[targetIndex].startWithNewLine && row.elements.length > 1 && row.panel.elements[targetIndex] === dest) {
+                    elementsToSetSWNL.push(target);
+                    elementsToResetSWNL.push(row.panel.elements[targetIndex]);
+                }
+                if (target.startWithNewLine && row.elements.length > 1 && (!row.panel.elements[targetIndex] || !row.panel.elements[targetIndex].startWithNewLine)) {
+                    elementsToResetSWNL.push(target);
+                }
+                if (srcRow && srcRow.elements[0] === src && srcRow.elements[1]) {
+                    elementsToSetSWNL.push(srcRow.elements[1]);
+                }
+                if (row.elements.length <= 1) {
+                    elementsToSetSWNL.push(target);
+                }
+                if (target.startWithNewLine && row.elements.length > 1 && row.elements[0] !== dest) {
+                    elementsToResetSWNL.push(target);
+                }
+            }
+            if (!!src && !!src.parent) {
+                this.page.survey.startMovingQuestion();
+                isSamePanel = row.panel == src.parent;
+                if (isSamePanel) {
+                    row.panel.dragDropMoveElement(src, target, targetIndex);
+                    targetIndex = -1;
+                }
+                else {
+                    src.parent.removeElement(src);
+                }
+            }
+            if (targetIndex > -1) {
+                row.panel.addElement(target, targetIndex);
+            }
+            this.page.survey.stopMovingQuestion();
+        }
+        elementsToSetSWNL.map(function (e) { e.startWithNewLine = true; });
+        elementsToResetSWNL.map(function (e) { e.startWithNewLine = false; });
+        this.dragDropInfo = null;
+        return !isCancel ? target : null;
+    };
+    DragDropPageHelperV1.prototype.dragDropGetElementIndex = function (target, row) {
+        if (!row)
+            return -1;
+        var index = row.elements.indexOf(target);
+        if (row.index == 0)
+            return index;
+        var prevRow = row.panel.rows[row.index - 1];
+        var prevElement = prevRow.elements[prevRow.elements.length - 1];
+        return index + row.panel.elements.indexOf(prevElement) + 1;
+    };
+    DragDropPageHelperV1.prototype.dragDropCanDropTagert = function () {
+        var destination = this.dragDropInfo.destination;
+        if (!destination || destination.isPage)
+            return true;
+        return this.dragDropCanDropCore(this.dragDropInfo.target, destination);
+    };
+    DragDropPageHelperV1.prototype.dragDropCanDropSource = function () {
+        var source = this.dragDropInfo.source;
+        if (!source)
+            return true;
+        var destination = this.dragDropInfo.destination;
+        if (!this.dragDropCanDropCore(source, destination))
+            return false;
+        if (this.page.isDesignMode && _settings__WEBPACK_IMPORTED_MODULE_1__["settings"].supportCreatorV2) {
+            var rowSource = this.page.dragDropFindRow(source);
+            var rowDestination = this.page.dragDropFindRow(destination);
+            if (rowSource !== rowDestination) {
+                if (!source.startWithNewLine && destination.startWithNewLine)
+                    return true;
+                if (source.startWithNewLine && !destination.startWithNewLine) {
+                    return true;
+                }
+            }
+            var row = this.page.dragDropFindRow(destination);
+            if (row && row.elements.length == 1)
+                return true;
+        }
+        return this.dragDropCanDropNotNext(source, destination, this.dragDropInfo.isEdge, this.dragDropInfo.isBottom);
+    };
+    DragDropPageHelperV1.prototype.dragDropCanDropCore = function (target, destination) {
+        if (!destination)
+            return true;
+        if (this.dragDropIsSameElement(destination, target))
+            return false;
+        if (target.isPanel) {
+            var pnl = target;
+            if (pnl.containsElement(destination) ||
+                !!pnl.getElementByName(destination.name))
+                return false;
+        }
+        return true;
+    };
+    DragDropPageHelperV1.prototype.dragDropCanDropNotNext = function (source, destination, isEdge, isBottom) {
+        if (!destination || (destination.isPanel && !isEdge))
+            return true;
+        if (typeof source.parent === "undefined" || source.parent !== destination.parent)
+            return true;
+        var pnl = source.parent;
+        var srcIndex = pnl.elements.indexOf(source);
+        var destIndex = pnl.elements.indexOf(destination);
+        if (destIndex < srcIndex && !isBottom)
+            destIndex--;
+        if (isBottom)
+            destIndex++;
+        return srcIndex < destIndex
+            ? destIndex - srcIndex > 1
+            : srcIndex - destIndex > 0;
+    };
+    DragDropPageHelperV1.prototype.dragDropIsSameElement = function (el1, el2) {
+        return el1 == el2 || el1.name == el2.name;
+    };
+    return DragDropPageHelperV1;
+}());
+
+
+
+/***/ }),
+
+/***/ "./src/drag-drop-panel-helper-v1.ts":
+/*!******************************************!*\
+  !*** ./src/drag-drop-panel-helper-v1.ts ***!
+  \******************************************/
+/*! exports provided: DragDropPanelHelperV1 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DragDropPanelHelperV1", function() { return DragDropPanelHelperV1; });
+/* harmony import */ var _drag_drop_helper_v1__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./drag-drop-helper-v1 */ "./src/drag-drop-helper-v1.ts");
+/* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./settings */ "./src/settings.ts");
+
+
+var DragDropPanelHelperV1 = /** @class */ (function () {
+    function DragDropPanelHelperV1(panel) {
+        this.panel = panel;
+    }
+    DragDropPanelHelperV1.prototype.dragDropAddTarget = function (dragDropInfo) {
+        var prevRow = this.dragDropFindRow(dragDropInfo.target);
+        if (this.dragDropAddTargetToRow(dragDropInfo, prevRow)) {
+            this.panel.updateRowsRemoveElementFromRow(dragDropInfo.target, prevRow);
+        }
+    };
+    DragDropPanelHelperV1.prototype.dragDropFindRow = function (findElement) {
+        if (!findElement || findElement.isPage)
+            return null;
+        var element = findElement;
+        var rows = this.panel.rows;
+        for (var i = 0; i < rows.length; i++) {
+            if (rows[i].elements.indexOf(element) > -1)
+                return rows[i];
+        }
+        for (var i = 0; i < this.panel.elements.length; i++) {
+            var pnl = this.panel.elements[i].getPanel();
+            if (!pnl)
+                continue;
+            var row = pnl.dragDropFindRow(element);
+            if (!!row)
+                return row;
+        }
+        return null;
+    };
+    DragDropPanelHelperV1.prototype.dragDropMoveElement = function (src, target, targetIndex) {
+        var srcIndex = src.parent.elements.indexOf(src);
+        if (targetIndex > srcIndex) {
+            targetIndex--;
+        }
+        this.panel.removeElement(src);
+        this.panel.addElement(target, targetIndex);
+    };
+    DragDropPanelHelperV1.prototype.updateRowsOnElementAdded = function (element, index, dragDropInfo, thisElement) {
+        if (!dragDropInfo) {
+            dragDropInfo = new _drag_drop_helper_v1__WEBPACK_IMPORTED_MODULE_0__["DragDropInfo"](null, element);
+            dragDropInfo.target = element;
+            dragDropInfo.isEdge = this.panel.elements.length > 1;
+            if (this.panel.elements.length < 2) {
+                dragDropInfo.destination = thisElement;
+            }
+            else {
+                dragDropInfo.isBottom = index > 0;
+                if (index == 0) {
+                    dragDropInfo.destination = this.panel.elements[1];
+                }
+                else {
+                    dragDropInfo.destination = this.panel.elements[index - 1];
+                }
+            }
+        }
+        this.dragDropAddTargetToRow(dragDropInfo, null);
+    };
+    DragDropPanelHelperV1.prototype.dragDropAddTargetToRow = function (dragDropInfo, prevRow) {
+        if (!dragDropInfo.destination)
+            return true;
+        if (this.dragDropAddTargetToEmptyPanel(dragDropInfo))
+            return true;
+        var dest = dragDropInfo.destination;
+        var destRow = this.dragDropFindRow(dest);
+        if (!destRow)
+            return true;
+        if (_settings__WEBPACK_IMPORTED_MODULE_1__["settings"].supportCreatorV2 && this.panel.isDesignMode) {
+            if (destRow.elements.length > 1)
+                return this.dragDropAddTargetToExistingRow(dragDropInfo, destRow, prevRow);
+            else
+                return this.dragDropAddTargetToNewRow(dragDropInfo, destRow, prevRow);
+        }
+        if (!dragDropInfo.target.startWithNewLine)
+            return this.dragDropAddTargetToExistingRow(dragDropInfo, destRow, prevRow);
+        return this.dragDropAddTargetToNewRow(dragDropInfo, destRow, prevRow);
+    };
+    DragDropPanelHelperV1.prototype.dragDropAddTargetToEmptyPanel = function (dragDropInfo) {
+        if (dragDropInfo.destination.isPage) {
+            this.dragDropAddTargetToEmptyPanelCore(this.panel.root, dragDropInfo.target, dragDropInfo.isBottom);
+            return true;
+        }
+        var dest = dragDropInfo.destination;
+        if (dest.isPanel && !dragDropInfo.isEdge) {
+            var panel = dest;
+            if (dragDropInfo.target["template"] === dest) {
+                return false;
+            }
+            if (dragDropInfo.nestedPanelDepth < 0 ||
+                dragDropInfo.nestedPanelDepth >= panel.depth) {
+                this.dragDropAddTargetToEmptyPanelCore(dest, dragDropInfo.target, dragDropInfo.isBottom);
+                return true;
+            }
+        }
+        return false;
+    };
+    DragDropPanelHelperV1.prototype.dragDropAddTargetToExistingRow = function (dragDropInfo, destRow, prevRow) {
+        var index = destRow.elements.indexOf(dragDropInfo.destination);
+        if (index == 0 &&
+            !dragDropInfo.isBottom) {
+            if (this.panel.isDesignMode && _settings__WEBPACK_IMPORTED_MODULE_1__["settings"].supportCreatorV2) {
+            }
+            else if (destRow.elements[0].startWithNewLine) {
+                if (destRow.index > 0) {
+                    dragDropInfo.isBottom = true;
+                    destRow = destRow.panel.rows[destRow.index - 1];
+                    dragDropInfo.destination =
+                        destRow.elements[destRow.elements.length - 1];
+                    return this.dragDropAddTargetToExistingRow(dragDropInfo, destRow, prevRow);
+                }
+                else {
+                    return this.dragDropAddTargetToNewRow(dragDropInfo, destRow, prevRow);
+                }
+            }
+        }
+        var prevRowIndex = -1;
+        if (prevRow == destRow) {
+            prevRowIndex = destRow.elements.indexOf(dragDropInfo.target);
+        }
+        if (dragDropInfo.isBottom)
+            index++;
+        var srcRow = this.panel.findRowByElement(dragDropInfo.source);
+        if (srcRow == destRow &&
+            srcRow.elements.indexOf(dragDropInfo.source) == index)
+            return false;
+        if (index == prevRowIndex)
+            return false;
+        if (prevRowIndex > -1) {
+            destRow.elements.splice(prevRowIndex, 1);
+            if (prevRowIndex < index)
+                index--;
+        }
+        destRow.elements.splice(index, 0, dragDropInfo.target);
+        destRow.updateVisible();
+        return prevRowIndex < 0;
+    };
+    DragDropPanelHelperV1.prototype.dragDropAddTargetToNewRow = function (dragDropInfo, destRow, prevRow) {
+        var targetRow = destRow.panel.createRowAndSetLazy(destRow.panel.rows.length);
+        if (this.panel.isDesignMode && _settings__WEBPACK_IMPORTED_MODULE_1__["settings"].supportCreatorV2) {
+            targetRow.setIsLazyRendering(false);
+        }
+        targetRow.addElement(dragDropInfo.target);
+        var index = destRow.index;
+        if (dragDropInfo.isBottom) {
+            index++;
+        }
+        //same row
+        if (!!prevRow && prevRow.panel == targetRow.panel && prevRow.index == index)
+            return false;
+        var srcRow = this.panel.findRowByElement(dragDropInfo.source);
+        if (!!srcRow &&
+            srcRow.panel == targetRow.panel &&
+            srcRow.elements.length == 1 &&
+            srcRow.index == index)
+            return false;
+        destRow.panel.rows.splice(index, 0, targetRow);
+        return true;
+    };
+    DragDropPanelHelperV1.prototype.dragDropAddTargetToEmptyPanelCore = function (panel, target, isBottom) {
+        var targetRow = panel.createRow();
+        targetRow.addElement(target);
+        if (panel.elements.length == 0 || isBottom) {
+            panel.rows.push(targetRow);
+        }
+        else {
+            panel.rows.splice(0, 0, targetRow);
+        }
+    };
+    return DragDropPanelHelperV1;
+}());
+
+
+
 /***/ }),
 
 /***/ "./src/dragdrop/choices.ts":
@@ -6289,7 +6742,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: 1000;\n      box-shadow: 0px 8px 16px 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: 1000;\n      filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.1));\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);\n      padding: 4px;\n      border-radius: 4px;\n      background: white;\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");
@@ -6874,7 +7327,7 @@ var DragDropMatrixRows = /** @class */ (function (_super) {
         var row = (draggedElementNode
             .closest("[data-sv-drop-target-matrix-row]"));
         var clone = (row.cloneNode(isDeepClone));
-        clone.style.cssText = "\n      box-shadow: rgb(0 0 0 / 10%) 0px 8px 16px;\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      filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.1));\n      box-shadow: rgb(0 0 0 / 10%) 0px 8px 16px;\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.classList.remove("sv-matrix__drag-drop--moveup");
         clone.classList.remove("sv-matrix__drag-drop--movedown");
         this.draggedElement.isDragDropMoveDown = false;
@@ -7041,7 +7494,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: 1000;\n          border-radius: 36px;\n          min-width: 100px;\n          box-shadow: 0px 8px 16px 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: 1000;\n          border-radius: 36px;\n          min-width: 100px;\n          filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.1));\n          box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);\n          background-color: var(--background, white);\n          font-family: var(--font-family, $font-family);\n        ";
         var isDeepClone = true;
         var clone = draggedElementNode.cloneNode(isDeepClone);
         draggedElementShortcut.appendChild(clone);
@@ -7257,6 +7710,18 @@ var DragDropSurveyElements = /** @class */ (function (_super) {
         new _jsonobject__WEBPACK_IMPORTED_MODULE_1__["JsonObject"]().toObject(json, newElement);
         return newElement;
     };
+    DragDropSurveyElements.prototype.findDropTargetNodeByDragOverNode = function (dragOverNode) {
+        var ghostRow = dragOverNode.closest(".svc-row--ghost");
+        if (!!ghostRow) {
+            var ghostDataAttrSelector = "[data-sv-drop-target-survey-element='sv-drag-drop-ghost-survey-element-name']";
+            var ghostNode = dragOverNode.closest(ghostDataAttrSelector) || dragOverNode.querySelector(ghostDataAttrSelector);
+            if (!!ghostNode) {
+                return ghostNode;
+            }
+        }
+        var dropTargetNode = dragOverNode.closest(this.dropTargetDataAttributeName);
+        return dropTargetNode;
+    };
     DragDropSurveyElements.prototype.getDropTargetByDataAttributeValue = function (dataAttributeValue, dropTargetNode, event) {
         this.isEdge = this.calculateIsEdge(dropTargetNode, event.clientY);
         if (!dataAttributeValue) {
@@ -7714,6 +8179,9 @@ var DropdownListModel = /** @class */ (function (_super) {
         this.listModel.resetFocusedItem();
         if (this.question.selectedItem && this.question.selectedItem.text.indexOf(newValue) >= 0) {
             this.listModel.focusedItem = this.getAvailableItems().filter(function (item) { return item.id == _this.question.selectedItem.value; })[0];
+            if (this.listModel.filterString) {
+                this.listModel.actions.map(function (a) { return a.selectedValue = false; });
+            }
             return;
         }
         if (!this.listModel.focusedItem || !this.listModel.isItemVisible(this.listModel.focusedItem)) {
@@ -7728,6 +8196,7 @@ var DropdownListModel = /** @class */ (function (_super) {
     };
     DropdownListModel.prototype.onHidePopup = function () {
         this.resetFilterString();
+        this.question.suggestedItem = null;
         this.listModel.refresh();
     };
     DropdownListModel.prototype.getAvailableItems = function () {
@@ -7870,7 +8339,8 @@ var DropdownListModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(DropdownListModel.prototype, "showHintString", {
         get: function () {
-            return !!this.question.searchEnabled && this.hintStringLC && this.hintStringLC.indexOf(this.inputStringLC) >= 0;
+            return !!this.question.searchEnabled && this.hintStringLC && this.hintStringLC.indexOf(this.inputStringLC) >= 0 ||
+                !this.question.searchEnabled && this.hintStringLC && !this.question.value;
         },
         enumerable: false,
         configurable: true
@@ -7920,6 +8390,8 @@ var DropdownListModel = /** @class */ (function (_super) {
     };
     DropdownListModel.prototype.onClick = function (event) {
         this._popupModel.toggleVisibility();
+        if (this._popupModel.isVisible && this.question.value && this.question instanceof _question_dropdown__WEBPACK_IMPORTED_MODULE_4__["QuestionDropdownModel"])
+            this.changeSelectionWithKeyboard(false);
         if (this.searchEnabled && !!event && !!event.target) {
             var input = event.target.querySelector("input");
             if (!!input) {
@@ -7942,14 +8414,20 @@ var DropdownListModel = /** @class */ (function (_super) {
     };
     DropdownListModel.prototype.changeSelectionWithKeyboard = function (reverse) {
         var _a;
+        var focusedItem = this.listModel.focusedItem;
         if (reverse) {
             this.listModel.focusPrevVisibleItem();
         }
         else {
             this.listModel.focusNextVisibleItem();
         }
+        if (this.question.value && focusedItem && this.question instanceof _question_dropdown__WEBPACK_IMPORTED_MODULE_4__["QuestionDropdownModel"]) {
+            focusedItem.selectedValue = false;
+            this.listModel.focusedItem.selectedValue = !this.listModel.filterString;
+            this.question.suggestedItem = this.listModel.focusedItem;
+        }
         this.scrollToFocusedItem();
-        if (this.question.value && this.question.searchEnabled && this.question instanceof _question_dropdown__WEBPACK_IMPORTED_MODULE_4__["QuestionDropdownModel"]) {
+        if (this.question.value && !this.listModel.filterString && this.question.searchEnabled && this.question instanceof _question_dropdown__WEBPACK_IMPORTED_MODULE_4__["QuestionDropdownModel"]) {
             this.applyInputString(this.listModel.focusedItem);
         }
         else {
@@ -7982,10 +8460,12 @@ var DropdownListModel = /** @class */ (function (_super) {
             if (event.keyCode === 13 && this.question.searchEnabled && !this.inputString && this.question instanceof _question_dropdown__WEBPACK_IMPORTED_MODULE_4__["QuestionDropdownModel"] && !this._markdownMode && this.question.value) {
                 this._popupModel.isVisible = false;
                 this.onClear(event);
+                this.question.survey.questionEditFinishCallback(this.question, event);
             }
             else {
                 this.listModel.selectFocusedItem();
                 this.onFocus(event);
+                this.question.survey.questionEditFinishCallback(this.question, event);
             }
             event.preventDefault();
             event.stopPropagation();
@@ -8203,6 +8683,10 @@ var DropdownMultiSelectListModel = /** @class */ (function (_super) {
         }
         return new _multiSelectListModel__WEBPACK_IMPORTED_MODULE_3__["MultiSelectListModel"](visibleItems, _onSelectionChanged, false, undefined, undefined, this.listElementId);
     };
+    DropdownMultiSelectListModel.prototype.resetFilterString = function () {
+        _super.prototype.resetFilterString.call(this);
+        this.inputString = null;
+    };
     Object.defineProperty(DropdownMultiSelectListModel.prototype, "shouldResetAfterCancel", {
         get: function () {
             return _utils_devices__WEBPACK_IMPORTED_MODULE_5__["IsTouch"] && !this.closeOnSelect;
@@ -8604,7 +9088,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!*************************************!*\
   !*** ./src/entries/chunks/model.ts ***!
   \*************************************/
-/*! exports provided: Version, checkLibraryVersion, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, QuestionMultipleTextModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryNavigateToPage, createTOCListModel, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, sanitizeEditableContent, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropSurveyElements, DragDropChoices */
+/*! exports provided: Version, checkLibraryVersion, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, QuestionMultipleTextModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryNavigateToPage, createTOCListModel, getTocRootCss, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, sanitizeEditableContent, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropSurveyElements, DragDropChoices */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -8899,6 +9383,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "createTOCListModel", function() { return _surveyToc__WEBPACK_IMPORTED_MODULE_55__["createTOCListModel"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getTocRootCss", function() { return _surveyToc__WEBPACK_IMPORTED_MODULE_55__["getTocRootCss"]; });
+
 /* harmony import */ var _surveyProgress__WEBPACK_IMPORTED_MODULE_56__ = __webpack_require__(/*! ../../surveyProgress */ "./src/surveyProgress.ts");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyProgressModel", function() { return _surveyProgress__WEBPACK_IMPORTED_MODULE_56__["SurveyProgressModel"]; });
 
@@ -9046,7 +9532,7 @@ __webpack_require__.r(__webpack_exports__);
 // import "../../main.scss";
 //import "../../modern.scss";
 var Version;
-Version = "" + "1.9.80";
+Version = "" + "1.9.82";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -9151,7 +9637,7 @@ function checkLibraryVersion(ver, libraryName) {
 /*!**************************************!*\
   !*** ./src/entries/core-wo-model.ts ***!
   \**************************************/
-/*! exports provided: Version, checkLibraryVersion, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, QuestionMultipleTextModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryNavigateToPage, createTOCListModel, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, sanitizeEditableContent, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropSurveyElements, DragDropChoices, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, createDropdownActionModel, createDropdownActionModelAdvanced, BaseAction, Action, ActionDropdownViewModel, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, TooltipManager, DragOrClickHelper */
+/*! exports provided: Version, checkLibraryVersion, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, QuestionMultipleTextModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryNavigateToPage, createTOCListModel, getTocRootCss, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, sanitizeEditableContent, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropSurveyElements, DragDropChoices, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, createDropdownActionModel, createDropdownActionModelAdvanced, BaseAction, Action, ActionDropdownViewModel, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, TooltipManager, DragOrClickHelper */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -9393,6 +9879,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "createTOCListModel", function() { return _chunks_model__WEBPACK_IMPORTED_MODULE_0__["createTOCListModel"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getTocRootCss", function() { return _chunks_model__WEBPACK_IMPORTED_MODULE_0__["getTocRootCss"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyProgressModel", function() { return _chunks_model__WEBPACK_IMPORTED_MODULE_0__["SurveyProgressModel"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyProgressButtonsModel", function() { return _chunks_model__WEBPACK_IMPORTED_MODULE_0__["SurveyProgressButtonsModel"]; });
@@ -9582,7 +10070,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!*****************************!*\
   !*** ./src/entries/core.ts ***!
   \*****************************/
-/*! exports provided: Version, checkLibraryVersion, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, QuestionMultipleTextModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryNavigateToPage, createTOCListModel, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, sanitizeEditableContent, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropSurveyElements, DragDropChoices, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, createDropdownActionModel, createDropdownActionModelAdvanced, BaseAction, Action, ActionDropdownViewModel, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, TooltipManager, DragOrClickHelper, Model */
+/*! exports provided: Version, checkLibraryVersion, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, QuestionMultipleTextModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryNavigateToPage, createTOCListModel, getTocRootCss, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, sanitizeEditableContent, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropSurveyElements, DragDropChoices, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, createDropdownActionModel, createDropdownActionModelAdvanced, BaseAction, Action, ActionDropdownViewModel, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, TooltipManager, DragOrClickHelper, Model */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -9824,6 +10312,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "createTOCListModel", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["createTOCListModel"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getTocRootCss", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["getTocRootCss"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyProgressModel", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["SurveyProgressModel"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyProgressButtonsModel", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["SurveyProgressButtonsModel"]; });
@@ -10373,7 +10863,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!******************************!*\
   !*** ./src/entries/react.ts ***!
   \******************************/
-/*! exports provided: Version, checkLibraryVersion, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, QuestionMultipleTextModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryNavigateToPage, createTOCListModel, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, sanitizeEditableContent, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropSurveyElements, DragDropChoices, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, createDropdownActionModel, createDropdownActionModelAdvanced, BaseAction, Action, ActionDropdownViewModel, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, TooltipManager, DragOrClickHelper, Model, bootstrapThemeName, bootstrapThemeColors, bootstrapThemeCssRules, bootstrapMaterialThemeName, bootstrapMaterialThemeColors, bootstrapMaterialThemeCssRules, defaultBootstrapCss, defaultBootstrapMaterialCss, Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionHtml, SurveyQuestionFile, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, SurveyLocStringViewer, SurveyLocStringEditor */
+/*! exports provided: Version, checkLibraryVersion, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, QuestionMultipleTextModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryNavigateToPage, createTOCListModel, getTocRootCss, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, sanitizeEditableContent, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropSurveyElements, DragDropChoices, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, createDropdownActionModel, createDropdownActionModelAdvanced, BaseAction, Action, ActionDropdownViewModel, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, TooltipManager, DragOrClickHelper, Model, bootstrapThemeName, bootstrapThemeColors, bootstrapThemeCssRules, bootstrapMaterialThemeName, bootstrapMaterialThemeColors, bootstrapMaterialThemeCssRules, defaultBootstrapCss, defaultBootstrapMaterialCss, Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionHtml, SurveyQuestionFile, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, SurveyLocStringViewer, SurveyLocStringEditor */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -10615,6 +11105,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "createTOCListModel", function() { return _core__WEBPACK_IMPORTED_MODULE_0__["createTOCListModel"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getTocRootCss", function() { return _core__WEBPACK_IMPORTED_MODULE_0__["getTocRootCss"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyProgressModel", function() { return _core__WEBPACK_IMPORTED_MODULE_0__["SurveyProgressModel"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyProgressButtonsModel", function() { return _core__WEBPACK_IMPORTED_MODULE_0__["SurveyProgressButtonsModel"]; });
@@ -17538,13 +18030,6 @@ var JsonObjectProperty = /** @class */ (function () {
             return objType;
         return objType.replace(this.classNamePart, "");
     };
-    JsonObjectProperty.prototype.getClassName = function (className) {
-        if (className)
-            className = className.toLowerCase();
-        return this.classNamePart && className.indexOf(this.classNamePart) < 0
-            ? className + this.classNamePart
-            : className;
-    };
     Object.defineProperty(JsonObjectProperty.prototype, "choices", {
         /**
          * Depricated, please use getChoices
@@ -18868,17 +19353,27 @@ var JsonObject = /** @class */ (function () {
     };
     JsonObject.prototype.createNewObj = function (value, property) {
         var result = { newObj: null, error: null };
-        var className = value[JsonObject.typePropertyName];
-        if (!className && property != null && property.className) {
-            className = property.className;
-        }
-        className = property.getClassName(className);
+        var className = this.getClassNameForNewObj(value, property);
         result.newObj = className
             ? JsonObject.metaData.createClass(className, value)
             : null;
         result.error = this.checkNewObjectOnErrors(result.newObj, value, property, className);
         return result;
     };
+    JsonObject.prototype.getClassNameForNewObj = function (value, property) {
+        var res = property != null && property.className ? property.className : undefined;
+        if (!res) {
+            res = value[JsonObject.typePropertyName];
+        }
+        if (!res)
+            return res;
+        res = res.toLowerCase();
+        var classNamePart = property.classNamePart;
+        if (classNamePart && res.indexOf(classNamePart) < 0) {
+            res += classNamePart;
+        }
+        return res;
+    };
     JsonObject.prototype.checkNewObjectOnErrors = function (newObj, value, property, className) {
         var error = null;
         if (newObj) {
@@ -19044,7 +19539,7 @@ var ListModel = /** @class */ (function (_super) {
         _this.onFilterStringChangedCallback = onFilterStringChangedCallback;
         _this.elementId = elementId;
         _this.onItemClick = function (itemValue) {
-            if (_this.isItemDisabled(itemValue) || _this.isItemSelected(itemValue)) {
+            if (_this.isItemDisabled(itemValue)) {
                 return;
             }
             _this.isExpanded = false;
@@ -19546,6 +20041,9 @@ var LocalizableString = /** @class */ (function () {
         return res;
     };
     LocalizableString.prototype.setLocaleText = function (loc, value) {
+        if (this.disableLocalization) {
+            loc = _settings__WEBPACK_IMPORTED_MODULE_2__["settings"].defaultLocaleName;
+        }
         if (!this.storeDefaultText && value == this.getLocaleTextWithDefault(loc)) {
             if (!!value || !!loc && loc !== this.defaultLoc)
                 return;
@@ -19553,7 +20051,7 @@ var LocalizableString = /** @class */ (function () {
             var oldValue_1 = this.getValue(dl);
             if (!!dl && !!oldValue_1) {
                 this.setValue(dl, value);
-                this.fireStrChanged(oldValue_1, value);
+                this.fireStrChanged(dl, oldValue_1);
             }
             return;
         }
@@ -19564,11 +20062,9 @@ var LocalizableString = /** @class */ (function () {
             !this.getValue(loc) &&
             value == this.getLocaleText(this.defaultLoc))
             return;
-        var curLoc = this.locale;
+        var curLoc = this.curLocale;
         if (!loc)
             loc = this.defaultLoc;
-        if (!curLoc)
-            curLoc = this.defaultLoc;
         var oldValue = this.onStrChanged && loc === curLoc ? this.pureText : undefined;
         delete this.htmlValues[loc];
         if (!value) {
@@ -19588,8 +20084,15 @@ var LocalizableString = /** @class */ (function () {
                 }
             }
         }
-        this.fireStrChanged(oldValue, value);
+        this.fireStrChanged(loc, oldValue);
     };
+    Object.defineProperty(LocalizableString.prototype, "curLocale", {
+        get: function () {
+            return !!this.locale ? this.locale : this.defaultLoc;
+        },
+        enumerable: false,
+        configurable: true
+    });
     LocalizableString.prototype.canRemoveLocValue = function (loc, val) {
         if (_settings__WEBPACK_IMPORTED_MODULE_2__["settings"].storeDuplicatedTranslations)
             return false;
@@ -19606,9 +20109,12 @@ var LocalizableString = /** @class */ (function () {
             return val == this.getLocaleText(this.defaultLoc);
         }
     };
-    LocalizableString.prototype.fireStrChanged = function (oldValue, value) {
+    LocalizableString.prototype.fireStrChanged = function (loc, oldValue) {
         this.strChanged();
-        if (!!this.onStrChanged && oldValue !== value) {
+        if (!this.onStrChanged)
+            return;
+        var value = this.pureText;
+        if (loc !== this.curLocale || oldValue !== value) {
             this.onStrChanged(oldValue, value);
         }
     };
@@ -19728,6 +20234,8 @@ var LocalizableString = /** @class */ (function () {
         return this.htmlValues[loc];
     };
     LocalizableString.prototype.deleteValuesEqualsToDefault = function (defaultValue) {
+        if (_settings__WEBPACK_IMPORTED_MODULE_2__["settings"].storeDuplicatedTranslations)
+            return;
         var keys = this.getValuesKeys();
         for (var i = 0; i < keys.length; i++) {
             if (keys[i] == this.defaultLoc)
@@ -20783,6 +21291,7 @@ var englishStrings = {
     progressText: "Page {0} of {1}",
     indexText: "{0} of {1}",
     panelDynamicProgressText: "{0} of {1}",
+    panelDynamicTabTextFormat: "Panel {0}",
     questionsProgressText: "Answered {0}/{1} questions",
     emptySurvey: "The survey doesn't contain visible pages or questions.",
     completingSurvey: "Thank you for completing the survey",
@@ -21390,12 +21899,12 @@ var germanSurveyStrings = {
     confirmRemoveFile: "Sind Sie sicher, dass Sie diese Datei löschen möchten: {0}?",
     confirmRemoveAllFiles: "Sind Sie sicher, dass Sie alle Dateien löschen möchten?",
     questionTitlePatternText: "Fragentitel",
-    modalCancelButtonText: "Stornieren",
+    modalCancelButtonText: "Abbrechen",
     modalApplyButtonText: "Anwenden",
     filterStringPlaceholder: "Tippe um zu suchen...",
-    // emptyMessage: "No data to display",
+    emptyMessage: "Es gibt noch keine Daten.",
     noEntriesText: "Es gibt noch keine Einträge.\nKlicken Sie auf die Schaltfläche unten, um einen neuen Eintrag hinzuzufügen.",
-    // more: "More"
+    more: "Mehr"
 };
 survey_core__WEBPACK_IMPORTED_MODULE_0__["surveyLocalization"].locales["de"] = germanSurveyStrings;
 survey_core__WEBPACK_IMPORTED_MODULE_0__["surveyLocalization"].localeNames["de"] = "deutsch";
@@ -25800,7 +26309,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _jsonobject__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./jsonobject */ "./src/jsonobject.ts");
 /* harmony import */ var _panel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./panel */ "./src/panel.ts");
 /* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
-/* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./settings */ "./src/settings.ts");
+/* harmony import */ var _drag_drop_page_helper_v1__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./drag-drop-page-helper-v1 */ "./src/drag-drop-page-helper-v1.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -25849,6 +26358,7 @@ var PageModel = /** @class */ (function (_super) {
         };
         _this.createLocalizableString("navigationTitle", _this, true);
         _this.createLocalizableString("navigationDescription", _this, true);
+        _this.dragDropPageHelper = new _drag_drop_page_helper_v1__WEBPACK_IMPORTED_MODULE_3__["DragDropPageHelperV1"](_this);
         return _this;
     }
     PageModel.prototype.getType = function () {
@@ -25874,7 +26384,7 @@ var PageModel = /** @class */ (function (_super) {
         /**
          * A caption displayed on a navigation button in the TOC or progress bar. Applies when [`showTOC`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showTOC) is `true` or when [`showProgressBar`](https://surveyjs.io/form-library/documentation/surveymodel#showProgressBar) is `true` and [`progressBarType`](https://surveyjs.io/form-library/documentation/surveymodel#progressBarType) is `"buttons"`.
          *
-         * If this property is undefined, the navigation buttons display page [titles](https://surveyjs.io/form-library/documentation/api-reference/page-model#title) or [names](https://surveyjs.io/form-library/documentation/pagemodel#name).
+         * If navigation titles are unspecified, the navigation buttons display page [titles](https://surveyjs.io/form-library/documentation/api-reference/page-model#title) or [names](https://surveyjs.io/form-library/documentation/pagemodel#name).
          */
         get: function () {
             return this.getLocalizableStringText("navigationTitle");
@@ -26129,205 +26639,19 @@ var PageModel = /** @class */ (function (_super) {
             this.survey.pageVisibilityChanged(this, this.isVisible);
         }
     };
-    PageModel.prototype.getDragDropInfo = function () { return this.dragDropInfo; };
+    PageModel.prototype.getDragDropInfo = function () { return this.dragDropPageHelper.getDragDropInfo(); };
     PageModel.prototype.dragDropStart = function (src, target, nestedPanelDepth) {
         if (nestedPanelDepth === void 0) { nestedPanelDepth = -1; }
-        this.dragDropInfo = new _panel__WEBPACK_IMPORTED_MODULE_1__["DragDropInfo"](src, target, nestedPanelDepth);
+        this.dragDropPageHelper.dragDropStart(src, target, nestedPanelDepth);
     };
     PageModel.prototype.dragDropMoveTo = function (destination, isBottom, isEdge) {
         if (isBottom === void 0) { isBottom = false; }
         if (isEdge === void 0) { isEdge = false; }
-        if (!this.dragDropInfo)
-            return false;
-        this.dragDropInfo.destination = destination;
-        this.dragDropInfo.isBottom = isBottom;
-        this.dragDropInfo.isEdge = isEdge;
-        this.correctDragDropInfo(this.dragDropInfo);
-        if (!this.dragDropCanDropTagert())
-            return false;
-        if (!this.dragDropCanDropSource() || !this.dragDropAllowFromSurvey()) {
-            if (!!this.dragDropInfo.source) {
-                var row = this.dragDropFindRow(this.dragDropInfo.target);
-                this.updateRowsRemoveElementFromRow(this.dragDropInfo.target, row);
-            }
-            return false;
-        }
-        this.dragDropAddTarget(this.dragDropInfo);
-        return true;
-    };
-    PageModel.prototype.correctDragDropInfo = function (dragDropInfo) {
-        if (!dragDropInfo.destination)
-            return;
-        var panel = dragDropInfo.destination.isPanel
-            ? dragDropInfo.destination
-            : null;
-        if (!panel)
-            return;
-        if (!dragDropInfo.target.isLayoutTypeSupported(panel.getChildrenLayoutType())) {
-            dragDropInfo.isEdge = true;
-        }
-    };
-    PageModel.prototype.dragDropAllowFromSurvey = function () {
-        var dest = this.dragDropInfo.destination;
-        if (!dest || !this.survey)
-            return true;
-        var insertBefore = null;
-        var insertAfter = null;
-        var parent = dest.isPage || (!this.dragDropInfo.isEdge && dest.isPanel)
-            ? dest
-            : dest.parent;
-        if (!dest.isPage) {
-            var container = dest.parent;
-            if (!!container) {
-                var elements = container.elements;
-                var index = elements.indexOf(dest);
-                if (index > -1) {
-                    insertBefore = dest;
-                    insertAfter = dest;
-                    if (this.dragDropInfo.isBottom) {
-                        insertBefore =
-                            index < elements.length - 1 ? elements[index + 1] : null;
-                    }
-                    else {
-                        insertAfter = index > 0 ? elements[index - 1] : null;
-                    }
-                }
-            }
-        }
-        var options = {
-            allow: true,
-            target: this.dragDropInfo.target,
-            source: this.dragDropInfo.source,
-            parent: parent,
-            insertAfter: insertAfter,
-            insertBefore: insertBefore,
-        };
-        return this.survey.dragAndDropAllow(options);
+        return this.dragDropPageHelper.dragDropMoveTo(destination, isBottom, isEdge);
     };
     PageModel.prototype.dragDropFinish = function (isCancel) {
         if (isCancel === void 0) { isCancel = false; }
-        if (!this.dragDropInfo)
-            return;
-        var target = this.dragDropInfo.target;
-        var src = this.dragDropInfo.source;
-        var dest = this.dragDropInfo.destination;
-        var row = this.dragDropFindRow(target);
-        var targetIndex = this.dragDropGetElementIndex(target, row);
-        this.updateRowsRemoveElementFromRow(target, row);
-        var elementsToSetSWNL = [];
-        var elementsToResetSWNL = [];
-        if (!isCancel && !!row) {
-            var isSamePanel = false;
-            if (this.isDesignMode && _settings__WEBPACK_IMPORTED_MODULE_3__["settings"].supportCreatorV2) {
-                var srcRow = src && src.parent && src.parent.dragDropFindRow(src);
-                if (row.panel.elements[targetIndex] && row.panel.elements[targetIndex].startWithNewLine && row.elements.length > 1 && row.panel.elements[targetIndex] === dest) {
-                    elementsToSetSWNL.push(target);
-                    elementsToResetSWNL.push(row.panel.elements[targetIndex]);
-                }
-                if (target.startWithNewLine && row.elements.length > 1 && (!row.panel.elements[targetIndex] || !row.panel.elements[targetIndex].startWithNewLine)) {
-                    elementsToResetSWNL.push(target);
-                }
-                if (srcRow && srcRow.elements[0] === src && srcRow.elements[1]) {
-                    elementsToSetSWNL.push(srcRow.elements[1]);
-                }
-                if (row.elements.length <= 1) {
-                    elementsToSetSWNL.push(target);
-                }
-                if (target.startWithNewLine && row.elements.length > 1 && row.elements[0] !== dest) {
-                    elementsToResetSWNL.push(target);
-                }
-            }
-            if (!!src && !!src.parent) {
-                this.survey.startMovingQuestion();
-                isSamePanel = row.panel == src.parent;
-                if (isSamePanel) {
-                    row.panel.dragDropMoveElement(src, target, targetIndex);
-                    targetIndex = -1;
-                }
-                else {
-                    src.parent.removeElement(src);
-                }
-            }
-            if (targetIndex > -1) {
-                row.panel.addElement(target, targetIndex);
-            }
-            this.survey.stopMovingQuestion();
-        }
-        elementsToSetSWNL.map(function (e) { e.startWithNewLine = true; });
-        elementsToResetSWNL.map(function (e) { e.startWithNewLine = false; });
-        this.dragDropInfo = null;
-        return !isCancel ? target : null;
-    };
-    PageModel.prototype.dragDropGetElementIndex = function (target, row) {
-        if (!row)
-            return -1;
-        var index = row.elements.indexOf(target);
-        if (row.index == 0)
-            return index;
-        var prevRow = row.panel.rows[row.index - 1];
-        var prevElement = prevRow.elements[prevRow.elements.length - 1];
-        return index + row.panel.elements.indexOf(prevElement) + 1;
-    };
-    PageModel.prototype.dragDropCanDropTagert = function () {
-        var destination = this.dragDropInfo.destination;
-        if (!destination || destination.isPage)
-            return true;
-        return this.dragDropCanDropCore(this.dragDropInfo.target, destination);
-    };
-    PageModel.prototype.dragDropCanDropSource = function () {
-        var source = this.dragDropInfo.source;
-        if (!source)
-            return true;
-        var destination = this.dragDropInfo.destination;
-        if (!this.dragDropCanDropCore(source, destination))
-            return false;
-        if (this.isDesignMode && _settings__WEBPACK_IMPORTED_MODULE_3__["settings"].supportCreatorV2) {
-            var rowSource = this.dragDropFindRow(source);
-            var rowDestination = this.dragDropFindRow(destination);
-            if (rowSource !== rowDestination) {
-                if (!source.startWithNewLine && destination.startWithNewLine)
-                    return true;
-                if (source.startWithNewLine && !destination.startWithNewLine) {
-                    return true;
-                }
-            }
-            var row = this.dragDropFindRow(destination);
-            if (row && row.elements.length == 1)
-                return true;
-        }
-        return this.dragDropCanDropNotNext(source, destination, this.dragDropInfo.isEdge, this.dragDropInfo.isBottom);
-    };
-    PageModel.prototype.dragDropCanDropCore = function (target, destination) {
-        if (!destination)
-            return true;
-        if (this.dragDropIsSameElement(destination, target))
-            return false;
-        if (target.isPanel) {
-            var pnl = target;
-            if (pnl.containsElement(destination) ||
-                !!pnl.getElementByName(destination.name))
-                return false;
-        }
-        return true;
-    };
-    PageModel.prototype.dragDropCanDropNotNext = function (source, destination, isEdge, isBottom) {
-        if (!destination || (destination.isPanel && !isEdge))
-            return true;
-        if (typeof source.parent === "undefined" || source.parent !== destination.parent)
-            return true;
-        var pnl = source.parent;
-        var srcIndex = pnl.elements.indexOf(source);
-        var destIndex = pnl.elements.indexOf(destination);
-        if (destIndex < srcIndex && !isBottom)
-            destIndex--;
-        if (isBottom)
-            destIndex++;
-        return srcIndex < destIndex
-            ? destIndex - srcIndex > 1
-            : srcIndex - destIndex > 0;
-    };
-    PageModel.prototype.dragDropIsSameElement = function (el1, el2) {
-        return el1 == el2 || el1.name == el2.name;
+        return this.dragDropPageHelper.dragDropFinish(isCancel);
     };
     PageModel.prototype.ensureRowsVisibility = function () {
         _super.prototype.ensureRowsVisibility.call(this);
@@ -26373,12 +26697,11 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("page", [
 /*!**********************!*\
   !*** ./src/panel.ts ***!
   \**********************/
-/*! exports provided: DragDropInfo, QuestionRowModel, PanelModelBase, PanelModel */
+/*! exports provided: QuestionRowModel, PanelModelBase, PanelModel */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DragDropInfo", function() { return DragDropInfo; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "QuestionRowModel", function() { return QuestionRowModel; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PanelModelBase", function() { return PanelModelBase; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PanelModel", function() { return PanelModel; });
@@ -26392,6 +26715,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./settings */ "./src/settings.ts");
 /* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./utils/utils */ "./src/utils/utils.ts");
 /* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
+/* harmony import */ var _drag_drop_panel_helper_v1__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./drag-drop-panel-helper-v1 */ "./src/drag-drop-panel-helper-v1.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -26423,15 +26747,6 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
-var DragDropInfo = /** @class */ (function () {
-    function DragDropInfo(source, target, nestedPanelDepth) {
-        if (nestedPanelDepth === void 0) { nestedPanelDepth = -1; }
-        this.source = source;
-        this.target = target;
-        this.nestedPanelDepth = nestedPanelDepth;
-    }
-    return DragDropInfo;
-}());
 
 var QuestionRowModel = /** @class */ (function (_super) {
     __extends(QuestionRowModel, _super);
@@ -26682,6 +26997,7 @@ var PanelModelBase = /** @class */ (function (_super) {
         _this.registerPropertyChangedHandlers(["questionStartIndex", "showQuestionNumbers"], function () {
             _this.updateVisibleIndexes();
         });
+        _this.dragDropPanelHelper = new _drag_drop_panel_helper_v1__WEBPACK_IMPORTED_MODULE_10__["DragDropPanelHelperV1"](_this);
         return _this;
     }
     PanelModelBase.getPanelId = function () {
@@ -27510,7 +27826,10 @@ var PanelModelBase = /** @class */ (function (_super) {
         element.setSurveyImpl(this.surveyImpl);
         element.parent = this;
         this.markQuestionListDirty();
-        this.updateRowsOnElementAdded(element, index);
+        if (this.canBuildRows()) {
+            var dragDropInfo = _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].supportCreatorV2 ? this.getDragDropInfo() : undefined;
+            this.dragDropPanelHelper.updateRowsOnElementAdded(element, index, dragDropInfo, this);
+        }
         if (element.isPanel) {
             var p = element;
             if (this.survey) {
@@ -27611,29 +27930,6 @@ var PanelModelBase = /** @class */ (function (_super) {
         var page = this.getPage(this.parent);
         return !!page ? page.getDragDropInfo() : undefined;
     };
-    PanelModelBase.prototype.updateRowsOnElementAdded = function (element, index) {
-        if (!this.canBuildRows())
-            return;
-        var dragDropInfo = _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].supportCreatorV2 ? this.getDragDropInfo() : undefined;
-        if (!dragDropInfo) {
-            dragDropInfo = new DragDropInfo(null, element);
-            dragDropInfo.target = element;
-            dragDropInfo.isEdge = this.elements.length > 1;
-            if (this.elements.length < 2) {
-                dragDropInfo.destination = this;
-            }
-            else {
-                dragDropInfo.isBottom = index > 0;
-                if (index == 0) {
-                    dragDropInfo.destination = this.elements[1];
-                }
-                else {
-                    dragDropInfo.destination = this.elements[index - 1];
-                }
-            }
-        }
-        this.dragDropAddTargetToRow(dragDropInfo, null);
-    };
     PanelModelBase.prototype.updateRowsOnElementRemoved = function (element) {
         if (!this.canBuildRows())
             return;
@@ -27953,147 +28249,13 @@ var PanelModelBase = /** @class */ (function (_super) {
         }
     };
     PanelModelBase.prototype.dragDropAddTarget = function (dragDropInfo) {
-        var prevRow = this.dragDropFindRow(dragDropInfo.target);
-        if (this.dragDropAddTargetToRow(dragDropInfo, prevRow)) {
-            this.updateRowsRemoveElementFromRow(dragDropInfo.target, prevRow);
-        }
+        this.dragDropPanelHelper.dragDropAddTarget(dragDropInfo);
     };
     PanelModelBase.prototype.dragDropFindRow = function (findElement) {
-        if (!findElement || findElement.isPage)
-            return null;
-        var element = findElement;
-        var rows = this.rows;
-        for (var i = 0; i < rows.length; i++) {
-            if (rows[i].elements.indexOf(element) > -1)
-                return rows[i];
-        }
-        for (var i = 0; i < this.elements.length; i++) {
-            var pnl = this.elements[i].getPanel();
-            if (!pnl)
-                continue;
-            var row = pnl.dragDropFindRow(element);
-            if (!!row)
-                return row;
-        }
-        return null;
-    };
-    PanelModelBase.prototype.dragDropAddTargetToRow = function (dragDropInfo, prevRow) {
-        if (!dragDropInfo.destination)
-            return true;
-        if (this.dragDropAddTargetToEmptyPanel(dragDropInfo))
-            return true;
-        var dest = dragDropInfo.destination;
-        var destRow = this.dragDropFindRow(dest);
-        if (!destRow)
-            return true;
-        if (_settings__WEBPACK_IMPORTED_MODULE_7__["settings"].supportCreatorV2 && this.isDesignMode) {
-            if (destRow.elements.length > 1)
-                return this.dragDropAddTargetToExistingRow(dragDropInfo, destRow, prevRow);
-            else
-                return this.dragDropAddTargetToNewRow(dragDropInfo, destRow, prevRow);
-        }
-        if (!dragDropInfo.target.startWithNewLine)
-            return this.dragDropAddTargetToExistingRow(dragDropInfo, destRow, prevRow);
-        return this.dragDropAddTargetToNewRow(dragDropInfo, destRow, prevRow);
-    };
-    PanelModelBase.prototype.dragDropAddTargetToEmptyPanel = function (dragDropInfo) {
-        if (dragDropInfo.destination.isPage) {
-            this.dragDropAddTargetToEmptyPanelCore(this.root, dragDropInfo.target, dragDropInfo.isBottom);
-            return true;
-        }
-        var dest = dragDropInfo.destination;
-        if (dest.isPanel && !dragDropInfo.isEdge) {
-            var panel = dest;
-            if (dragDropInfo.target["template"] === dest) {
-                return false;
-            }
-            if (dragDropInfo.nestedPanelDepth < 0 ||
-                dragDropInfo.nestedPanelDepth >= panel.depth) {
-                this.dragDropAddTargetToEmptyPanelCore(dest, dragDropInfo.target, dragDropInfo.isBottom);
-                return true;
-            }
-        }
-        return false;
-    };
-    PanelModelBase.prototype.dragDropAddTargetToExistingRow = function (dragDropInfo, destRow, prevRow) {
-        var index = destRow.elements.indexOf(dragDropInfo.destination);
-        if (index == 0 &&
-            !dragDropInfo.isBottom) {
-            if (this.isDesignMode && _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].supportCreatorV2) {
-            }
-            else if (destRow.elements[0].startWithNewLine) {
-                if (destRow.index > 0) {
-                    dragDropInfo.isBottom = true;
-                    destRow = destRow.panel.rows[destRow.index - 1];
-                    dragDropInfo.destination =
-                        destRow.elements[destRow.elements.length - 1];
-                    return this.dragDropAddTargetToExistingRow(dragDropInfo, destRow, prevRow);
-                }
-                else {
-                    return this.dragDropAddTargetToNewRow(dragDropInfo, destRow, prevRow);
-                }
-            }
-        }
-        var prevRowIndex = -1;
-        if (prevRow == destRow) {
-            prevRowIndex = destRow.elements.indexOf(dragDropInfo.target);
-        }
-        if (dragDropInfo.isBottom)
-            index++;
-        var srcRow = this.findRowByElement(dragDropInfo.source);
-        if (srcRow == destRow &&
-            srcRow.elements.indexOf(dragDropInfo.source) == index)
-            return false;
-        if (index == prevRowIndex)
-            return false;
-        if (prevRowIndex > -1) {
-            destRow.elements.splice(prevRowIndex, 1);
-            if (prevRowIndex < index)
-                index--;
-        }
-        destRow.elements.splice(index, 0, dragDropInfo.target);
-        destRow.updateVisible();
-        return prevRowIndex < 0;
-    };
-    PanelModelBase.prototype.dragDropAddTargetToNewRow = function (dragDropInfo, destRow, prevRow) {
-        var targetRow = destRow.panel.createRowAndSetLazy(destRow.panel.rows.length);
-        if (this.isDesignMode && _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].supportCreatorV2) {
-            targetRow.setIsLazyRendering(false);
-        }
-        targetRow.addElement(dragDropInfo.target);
-        var index = destRow.index;
-        if (dragDropInfo.isBottom) {
-            index++;
-        }
-        //same row
-        if (!!prevRow && prevRow.panel == targetRow.panel && prevRow.index == index)
-            return false;
-        var srcRow = this.findRowByElement(dragDropInfo.source);
-        if (!!srcRow &&
-            srcRow.panel == targetRow.panel &&
-            srcRow.elements.length == 1 &&
-            srcRow.index == index)
-            return false;
-        destRow.panel.rows.splice(index, 0, targetRow);
-        return true;
-    };
-    PanelModelBase.prototype.dragDropAddTargetToEmptyPanelCore = function (panel, target, isBottom) {
-        var targetRow = panel.createRow();
-        targetRow.addElement(target);
-        if (panel.elements.length == 0 || isBottom) {
-            panel.rows.push(targetRow);
-        }
-        else {
-            panel.rows.splice(0, 0, targetRow);
-        }
+        return this.dragDropPanelHelper.dragDropFindRow(findElement);
     };
     PanelModelBase.prototype.dragDropMoveElement = function (src, target, targetIndex) {
-        var srcIndex = src.parent.elements.indexOf(src);
-        if (targetIndex > srcIndex) {
-            targetIndex--;
-        }
-        this.removeElement(src);
-        this.addElement(target, targetIndex);
+        this.dragDropPanelHelper.dragDropMoveElement(src, target, targetIndex);
     };
     PanelModelBase.prototype.needResponsiveWidth = function () {
         var result = false;
@@ -30016,6 +30178,11 @@ var PopupDropdownViewModel = /** @class */ (function (_super) {
             var visualViewport = window.visualViewport;
             document.documentElement.style.setProperty("--sv-popup-overlay-height", visualViewport.height * visualViewport.scale + "px");
         };
+        _this.resizeWindowCallback = function () {
+            if (!_this.isOverlay) {
+                _this.updatePosition(true, false);
+            }
+        };
         _this.clientY = 0;
         _this.isTablet = false;
         _this.touchStartEventCallback = function (event) {
@@ -30126,6 +30293,7 @@ var PopupDropdownViewModel = /** @class */ (function (_super) {
             this.updatePosition(true, false);
         }
         this.switchFocus();
+        window.addEventListener("resize", this.resizeWindowCallback);
         if (this.shouldCreateResizeCallback) {
             window.visualViewport.addEventListener("resize", this.resizeEventCallback);
             if (this.container) {
@@ -30161,6 +30329,7 @@ var PopupDropdownViewModel = /** @class */ (function (_super) {
     };
     PopupDropdownViewModel.prototype.updateOnHiding = function () {
         _super.prototype.updateOnHiding.call(this);
+        window.removeEventListener("resize", this.resizeWindowCallback);
         if (this.shouldCreateResizeCallback) {
             window.visualViewport.removeEventListener("resize", this.resizeEventCallback);
             if (this.container) {
@@ -31223,6 +31392,7 @@ var Question = /** @class */ (function (_super) {
     Question.prototype.isReadOnlyRenderDiv = function () {
         return this.isReadOnly && _settings__WEBPACK_IMPORTED_MODULE_8__["settings"].readOnlyCommentRenderMode === "div";
     };
+    Question.prototype.setIsMobile = function (val) { };
     Question.prototype.createLocTitleProperty = function () {
         var _this = this;
         var locTitleValue = _super.prototype.createLocTitleProperty.call(this);
@@ -33427,7 +33597,7 @@ var Question = /** @class */ (function (_super) {
      *
      * Call this method after you assign new question values in code to ensure that they are acceptable.
      *
-     * > This method does not remove values that do not pass validation. Call the `validate()` method to validate newly assigned values.
+     * > This method does not remove values that fail validation. Call the `validate()` method to validate newly assigned values.
      *
      * @see validate
      */
@@ -33591,7 +33761,9 @@ var Question = /** @class */ (function (_super) {
     };
     Question.questionCounter = 100;
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: false })
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: false, onSet: function (val, target) {
+                target.setIsMobile(val);
+            } })
     ], Question.prototype, "isMobile", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ localizable: true })
@@ -34316,6 +34488,18 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         return true;
     };
     QuestionSelectBase.prototype.onSelectedItemValuesChangedHandler = function (newValue) { };
+    QuestionSelectBase.prototype.getSingleSelectedItem = function () {
+        var selectedItemValues = this.selectedItemValues;
+        if (this.isEmpty())
+            return null;
+        var itemValue = _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"].getItemByValue(this.visibleChoices, this.value);
+        this.onGetSingleSelectedItem(itemValue);
+        if (!itemValue && !selectedItemValues) {
+            this.updateSelectedItemValues();
+        }
+        return itemValue || selectedItemValues || (this.isOtherSelected ? this.otherItem : new _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"](this.value));
+    };
+    QuestionSelectBase.prototype.onGetSingleSelectedItem = function (selectedItemByValue) { };
     QuestionSelectBase.prototype.setConditionalChoicesRunner = function () {
         if (this.choicesVisibleIf) {
             if (!this.conditionChoicesVisibleIfRunner) {
@@ -37616,9 +37800,6 @@ var QuestionCustomModelBase = /** @class */ (function (_super) {
     QuestionCustomModelBase.prototype.getSurveyData = function () {
         return this;
     };
-    // getSurvey(): ISurvey {
-    //   return this.survey;
-    // }
     QuestionCustomModelBase.prototype.getTextProcessor = function () {
         return this.textProcessor;
     };
@@ -37752,6 +37933,12 @@ var QuestionCustomModel = /** @class */ (function (_super) {
             return;
         _super.prototype.setValue.call(this, name, newValue, locNotification, allowNotifyValueChanged);
     };
+    QuestionCustomModel.prototype.onSetData = function () {
+        _super.prototype.onSetData.call(this);
+        if (!!this.survey && !this.isEmpty()) {
+            this.setValue(this.name, this.value, false, this.allowNotifyValueChanged);
+        }
+    };
     QuestionCustomModel.prototype.hasErrors = function (fireCallback, rec) {
         if (fireCallback === void 0) { fireCallback = true; }
         if (rec === void 0) { rec = null; }
@@ -38300,22 +38487,15 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
         configurable: true
     });
     Object.defineProperty(QuestionDropdownModel.prototype, "selectedItem", {
-        get: function () {
-            var selectedItemValues = this.selectedItemValues;
-            if (this.isEmpty())
-                return null;
-            var itemValue = _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"].getItemByValue(this.visibleChoices, this.value);
-            if (!!itemValue) {
-                this.lastSelectedItemValue = itemValue;
-            }
-            else if (!selectedItemValues) {
-                this.updateSelectedItemValues();
-            }
-            return this.lastSelectedItemValue || selectedItemValues || (this.isOtherSelected ? this.otherItem : new _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"](this.value));
-        },
+        get: function () { return this.getSingleSelectedItem(); },
         enumerable: false,
         configurable: true
     });
+    QuestionDropdownModel.prototype.onGetSingleSelectedItem = function (selectedItemByValue) {
+        if (!!selectedItemByValue) {
+            this.lastSelectedItemValue = selectedItemByValue;
+        }
+    };
     QuestionDropdownModel.prototype.supportGoNextPageAutomatic = function () {
         return true;
     };
@@ -38426,7 +38606,7 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(QuestionDropdownModel.prototype, "selectedItemLocText", {
         get: function () {
-            var item = this.selectedItem;
+            var item = this.suggestedItem || this.selectedItem;
             return item === null || item === void 0 ? void 0 : item.locText;
         },
         enumerable: false,
@@ -38553,6 +38733,9 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: 25 })
     ], QuestionDropdownModel.prototype, "choicesLazyLoadPageSize", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])()
+    ], QuestionDropdownModel.prototype, "suggestedItem", void 0);
     return QuestionDropdownModel;
 }(_question_baseselect__WEBPACK_IMPORTED_MODULE_2__["QuestionSelectBase"]));
 
@@ -42051,7 +42234,7 @@ var MatrixDropdownTotalCell = /** @class */ (function (_super) {
         if (!!this.column.totalExpression)
             return this.column.totalExpression;
         if (this.column.totalType == "none")
-            return "";
+            return "''";
         var funName = this.column.totalType + "InArray";
         if (!_functionsfactory__WEBPACK_IMPORTED_MODULE_8__["FunctionFactory"].Instance.hasFunction(funName))
             return "";
@@ -43405,7 +43588,8 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
         return this.getColumnByName(columnName);
     };
     QuestionMatrixDropdownModelBase.prototype.getColumnWidth = function (column) {
-        return column.minWidth ? column.minWidth : this.columnMinWidth;
+        var _a;
+        return column.minWidth ? column.minWidth : this.columnMinWidth ? this.columnMinWidth : (((_a = _settings__WEBPACK_IMPORTED_MODULE_9__["settings"].matrix.columnWidthsByType[column.cellType]) === null || _a === void 0 ? void 0 : _a.minWidth) || "");
     };
     Object.defineProperty(QuestionMatrixDropdownModelBase.prototype, "choices", {
         /**
@@ -44076,12 +44260,17 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
         configurable: true
     });
     QuestionMatrixDropdownModelBase.prototype.onRowChanging = function (row, columnName, rowValue) {
-        if (!this.survey)
+        if (!this.survey && !this.cellValueChangingCallback)
             return !!rowValue ? rowValue[columnName] : null;
         var options = this.getOnCellValueChangedOptions(row, columnName, rowValue);
         var oldRowValue = this.getRowValueCore(row, this.createNewValue(), true);
         options.oldValue = !!oldRowValue ? oldRowValue[columnName] : null;
-        this.survey.matrixCellValueChanging(this, options);
+        if (!!this.cellValueChangingCallback) {
+            options.value = this.cellValueChangingCallback(row, columnName, options.value, options.oldValue);
+        }
+        if (!!this.survey) {
+            this.survey.matrixCellValueChanging(this, options);
+        }
         return options.value;
     };
     QuestionMatrixDropdownModelBase.prototype.onRowChanged = function (row, columnName, newRowValue, isDeletingValue) {
@@ -44275,10 +44464,10 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
         return this.SurveyModel.getMatrixCellTemplateData(cell);
     };
     QuestionMatrixDropdownModelBase.prototype.getCellWrapperComponentName = function (cell) {
-        return this.SurveyModel.getElementWrapperComponentName(cell, "cell");
+        return this.SurveyModel.getElementWrapperComponentName(cell, cell.row instanceof MatrixDropdownTotalRowModel ? "row-footer" : "cell");
     };
     QuestionMatrixDropdownModelBase.prototype.getCellWrapperComponentData = function (cell) {
-        return this.SurveyModel.getElementWrapperComponentData(cell, "cell");
+        return this.SurveyModel.getElementWrapperComponentData(cell, cell.row instanceof MatrixDropdownTotalRowModel ? "row-footer" : "cell");
     };
     QuestionMatrixDropdownModelBase.prototype.getColumnHeaderWrapperComponentName = function (cell) {
         return this.SurveyModel.getElementWrapperComponentName(cell, "column-header");
@@ -45136,7 +45325,14 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("matrixdropdownc
         serializationProperty: "locRequiredErrorText",
     },
     "readOnly:boolean",
-    "minWidth",
+    {
+        name: "minWidth",
+        onPropertyEditorUpdate: function (obj, editor) {
+            if (!!obj && !!editor) {
+                editor.value = obj.minWidth;
+            }
+        }
+    },
     "width",
     "visibleIf:condition",
     "enableIf:condition",
@@ -48012,6 +48208,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
 /* harmony import */ var _actions_action__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./actions/action */ "./src/actions/action.ts");
 /* harmony import */ var _base__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./base */ "./src/base.ts");
+/* harmony import */ var _actions_adaptive_container__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./actions/adaptive-container */ "./src/actions/adaptive-container.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -48050,6 +48247,7 @@ var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from
 
 
 
+
 var QuestionPanelDynamicItemTextProcessor = /** @class */ (function (_super) {
     __extends(QuestionPanelDynamicItemTextProcessor, _super);
     function QuestionPanelDynamicItemTextProcessor(data, panelItem, variableName) {
@@ -48502,6 +48700,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
                     val = this.panelCount - 1;
                 this.currentIndexValue = val;
                 this.updateFooterActions();
+                this.updateTabToolbarItemsPressedState();
                 this.fireCallback(this.currentIndexChangedCallback);
             }
         },
@@ -48785,6 +48984,13 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             _super.prototype.setValueCore.call(this, newValue);
         }
     };
+    QuestionPanelDynamicModel.prototype.setIsMobile = function (val) {
+        (this.panels || []).forEach(function (panel) { return panel.elements.forEach(function (element) {
+            if (element instanceof _question__WEBPACK_IMPORTED_MODULE_3__["Question"]) {
+                element.isMobile = val;
+            }
+        }); });
+    };
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "panelCount", {
         /**
          * The number of panels in Dynamic Panel.
@@ -48810,6 +49016,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             for (var i = this.panelCount; i < val; i++) {
                 var panel = this.createNewPanel();
                 this.panels.push(panel);
+                this.addTabFromToolbar(panel);
                 if (this.renderMode == "list" && this.panelsState != "default") {
                     if (this.panelsState === "expand") {
                         panel.expand();
@@ -48821,13 +49028,16 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
                     }
                 }
             }
-            if (val < this.panelCount)
-                this.panels.splice(val, this.panelCount - val);
+            var removedPanels = [];
+            if (val < this.panelCount) {
+                removedPanels = this.panels.splice(val, this.panelCount - val);
+            }
             this.setValueAfterPanelsCreating();
             this.setValueBasedOnPanelCount();
             this.reRunCondition();
             this.updateFooterActions();
             this.fireCallback(this.panelCountChangedCallback);
+            (removedPanels.length > 0) && this.removeTabFromToolbar(removedPanels);
         },
         enumerable: false,
         configurable: true
@@ -49069,6 +49279,19 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "tabAlign", {
+        get: function () {
+            return this.getPropertyValue("tabAlign");
+        },
+        set: function (val) {
+            this.setPropertyValue("tabAlign", val);
+            if (this.isRenderModeTab) {
+                this.additionalTitleToolbar.containerCss = this.getAdditionalTitleToolbarCss();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "isRenderModeList", {
         get: function () {
             return this.renderMode === "list";
@@ -49076,6 +49299,25 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "isRenderModeTab", {
+        get: function () {
+            return this.renderMode === "tab";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "hasTitleOnLeftTop", {
+        get: function () {
+            if (this.isRenderModeTab && !!this.panelCount)
+                return true;
+            if (!this.hasTitle)
+                return false;
+            var location = this.getTitleLocation();
+            return location === "left" || location === "top";
+        },
+        enumerable: false,
+        configurable: true
+    });
     QuestionPanelDynamicModel.prototype.setVisibleIndex = function (value) {
         if (!this.isVisible)
             return 0;
@@ -49172,6 +49414,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         this.reRunCondition();
         this.updateFooterActions();
         this.fireCallback(this.panelCountChangedCallback);
+        this.updateTabToolbar();
     };
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "defaultPanelValue", {
         /**
@@ -49367,6 +49610,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         if (this.survey)
             this.survey.dynamicPanelRemoved(this, index, panel);
         this.isValueChangingInternally = false;
+        this.removeTabFromToolbar([panel]);
     };
     QuestionPanelDynamicModel.prototype.getPanelIndex = function (val) {
         if (_helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].isNumber(val))
@@ -50024,6 +50268,18 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     QuestionPanelDynamicModel.prototype.getRootCss = function () {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]().append(_super.prototype.getRootCss.call(this)).append(this.cssClasses.empty, this.getShowNoEntriesPlaceholder()).toString();
     };
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "cssHeader", {
+        get: function () {
+            var showTab = this.isRenderModeTab && !!this.panelCount;
+            return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]()
+                .append(this.cssClasses.header)
+                .append(this.cssClasses.headerTop, this.hasTitleOnTop || showTab)
+                .append(this.cssClasses.headerTab, showTab)
+                .toString();
+        },
+        enumerable: false,
+        configurable: true
+    });
     QuestionPanelDynamicModel.prototype.getPanelWrapperCss = function () {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]()
             .append(this.cssClasses.panelWrapper)
@@ -50085,6 +50341,22 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             return true;
         return false;
     };
+    QuestionPanelDynamicModel.prototype.getAdditionalTitleToolbar = function () {
+        if (!this.isRenderModeTab)
+            return null;
+        if (!this.additionalTitleToolbarValue) {
+            this.additionalTitleToolbarValue = new _actions_adaptive_container__WEBPACK_IMPORTED_MODULE_12__["AdaptiveActionContainer"]();
+            this.additionalTitleToolbarValue.containerCss = this.getAdditionalTitleToolbarCss();
+            this.additionalTitleToolbarValue.cssClasses = {
+                item: "sv-tab-item",
+                itemPressed: "sv-tab-item--pressed",
+                itemAsIcon: "sv-tab-item--icon",
+                itemIcon: "sv-tab-item__icon",
+                itemTitle: "sv-tab-item__title"
+            };
+        }
+        return this.additionalTitleToolbarValue;
+    };
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "footerToolbar", {
         get: function () {
             if (!this.footerToolbarValue) {
@@ -50159,6 +50431,64 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         this.updateFooterActionsCallback();
         this.footerToolbarValue.setItems(items);
     };
+    QuestionPanelDynamicModel.prototype.createTabByPanel = function (panel) {
+        var _this = this;
+        if (!this.isRenderModeTab)
+            return;
+        var index = this.getPanelIndex(panel);
+        var title = this.getLocalizationFormatString("panelDynamicTabTextFormat", index + 1);
+        var newItem = new _actions_action__WEBPACK_IMPORTED_MODULE_10__["Action"]({
+            id: index.toString(),
+            css: "sv-tab-item__root",
+            pressed: index === this.currentIndex,
+            title: title,
+            action: function () {
+                _this.currentIndex = parseInt(newItem.id);
+                _this.updateTabToolbarItemsPressedState();
+            }
+        });
+        return newItem;
+    };
+    QuestionPanelDynamicModel.prototype.getAdditionalTitleToolbarCss = function () {
+        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]()
+            .append("sv-tabs-toolbar")
+            .append("sv-tabs-toolbar--left", this.tabAlign === "left")
+            .append("sv-tabs-toolbar--right", this.tabAlign === "right")
+            .append("sv-tabs-toolbar--center", this.tabAlign === "center")
+            .toString();
+    };
+    QuestionPanelDynamicModel.prototype.updateTabToolbarItemsPressedState = function () {
+        var _this = this;
+        if (!this.isRenderModeTab)
+            return;
+        this.additionalTitleToolbar.renderedActions.forEach(function (action) { return action.pressed = parseInt(action.id) === _this.currentIndex; });
+    };
+    QuestionPanelDynamicModel.prototype.updateTabToolbar = function () {
+        var _this = this;
+        if (!this.isRenderModeTab)
+            return;
+        var items = [];
+        this.panels.forEach(function (panel) { return items.push(_this.createTabByPanel(panel)); });
+        this.additionalTitleToolbar.setItems(items);
+    };
+    QuestionPanelDynamicModel.prototype.addTabFromToolbar = function (panel) {
+        if (!this.isRenderModeTab)
+            return;
+        var newItem = this.createTabByPanel(panel);
+        this.additionalTitleToolbar.actions.push(newItem);
+        this.updateTabToolbarItemsPressedState();
+    };
+    QuestionPanelDynamicModel.prototype.removeTabFromToolbar = function (panels) {
+        var _this = this;
+        if (!this.isRenderModeTab)
+            return;
+        panels.forEach(function (panel) {
+            var index = _this.getPanelIndex(panel);
+            var removedItem = _this.additionalTitleToolbar.getActionById(index.toString());
+            _this.additionalTitleToolbar.actions.splice(_this.additionalTitleToolbar.actions.indexOf(removedItem), 1);
+        });
+        this.updateTabToolbarItemsPressedState();
+    };
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "showLegacyNavigation", {
         get: function () {
             return !this.isDefaultV2Theme;
@@ -50232,7 +50562,10 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_4__["Serializer"].addClass("paneldynamic",
     {
         name: "renderMode",
         default: "list",
-        choices: ["list", "progressTop", "progressBottom", "progressTopBottom"],
+        choices: ["list", "progressTop", "progressBottom", "progressTopBottom", "tab"],
+    },
+    {
+        name: "tabAlign", default: "center", choices: ["center", "left", "right"],
     },
     {
         name: "templateTitleLocation",
@@ -50267,9 +50600,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _jsonobject__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./jsonobject */ "./src/jsonobject.ts");
 /* harmony import */ var _questionfactory__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./questionfactory */ "./src/questionfactory.ts");
 /* harmony import */ var _question_baseselect__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./question_baseselect */ "./src/question_baseselect.ts");
-/* harmony import */ var _itemvalue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./itemvalue */ "./src/itemvalue.ts");
-/* harmony import */ var _actions_action__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./actions/action */ "./src/actions/action.ts");
-/* harmony import */ var _base__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./base */ "./src/base.ts");
+/* harmony import */ var _actions_action__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./actions/action */ "./src/actions/action.ts");
+/* harmony import */ var _base__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./base */ "./src/base.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -50290,7 +50622,6 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
-
 /**
  * A class that describes the Radiogroup question type.
  *
@@ -50328,16 +50659,7 @@ var QuestionRadiogroupModel = /** @class */ (function (_super) {
         /**
          * Returns the selected choice item. If no item is selected, returns `null`.
          */
-        get: function () {
-            var selectedItemValues = this.selectedItemValues;
-            if (this.isEmpty())
-                return null;
-            var itemValue = _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"].getItemByValue(this.visibleChoices, this.value);
-            if (!itemValue && !selectedItemValues) {
-                this.updateSelectedItemValues();
-            }
-            return itemValue || selectedItemValues || (this.isOtherSelected ? this.otherItem : new _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"](this.value));
-        },
+        get: function () { return this.getSingleSelectedItem(); },
         enumerable: false,
         configurable: true
     });
@@ -50387,12 +50709,12 @@ var QuestionRadiogroupModel = /** @class */ (function (_super) {
         var _this = this;
         var actions = [];
         if (this.isDefaultV2Theme && !this.isDesignMode) {
-            var clearAction = new _actions_action__WEBPACK_IMPORTED_MODULE_4__["Action"]({
+            var clearAction = new _actions_action__WEBPACK_IMPORTED_MODULE_3__["Action"]({
                 title: this.clearButtonCaption,
                 id: "sv-clr-btn-" + this.id,
                 action: function () { _this.clearValue(); },
                 innerCss: this.cssClasses.clearButton,
-                visible: new _base__WEBPACK_IMPORTED_MODULE_5__["ComputedUpdater"](function () { return _this.canShowClearButton; })
+                visible: new _base__WEBPACK_IMPORTED_MODULE_4__["ComputedUpdater"](function () { return _this.canShowClearButton; })
             });
             actions.push(clearAction);
         }
@@ -50841,8 +51163,13 @@ var RenderedRatingItem = /** @class */ (function (_super) {
         var _this = _super.call(this) || this;
         _this.itemValue = itemValue;
         _this.locString = locString;
+        _this.locText.onStringChanged.add(_this.onStringChangedCallback.bind(_this));
+        _this.onStringChangedCallback();
         return _this;
     }
+    RenderedRatingItem.prototype.onStringChangedCallback = function () {
+        this.text = this.itemValue.text;
+    };
     Object.defineProperty(RenderedRatingItem.prototype, "value", {
         get: function () {
             return this.itemValue.getPropertyValue("value");
@@ -50857,16 +51184,12 @@ var RenderedRatingItem = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(RenderedRatingItem.prototype, "text", {
-        get: function () {
-            return this.itemValue.text;
-        },
-        enumerable: false,
-        configurable: true
-    });
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: "" })
     ], RenderedRatingItem.prototype, "highlight", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: "" })
+    ], RenderedRatingItem.prototype, "text", void 0);
     return RenderedRatingItem;
 }(_base__WEBPACK_IMPORTED_MODULE_7__["Base"]));
 
@@ -50879,21 +51202,78 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     __extends(QuestionRatingModel, _super);
     function QuestionRatingModel(name) {
         var _this = _super.call(this, name) || this;
+        _this._syncPropertiesChanging = false;
         _this.createItemValues("rateValues");
         _this.createRenderedRateItems();
         _this.createLocalizableString("ratingOptionsCaption", _this, false, true);
-        _this.registerFunctionOnPropertiesValueChanged(["rateValues", "rateMin", "rateMax",
+        _this.registerFunctionOnPropertiesValueChanged(["rateValues", "rateMin", "rateMax", "rateType",
             "minRateDescription", "maxRateDescription", "rateStep", "displayRateDescriptionsAsExtremeItems"], function () { return _this.createRenderedRateItems(); });
         _this.createLocalizableString("minRateDescription", _this, true);
         _this.createLocalizableString("maxRateDescription", _this, true);
+        _this.initPropertyDependencies();
         return _this;
     }
+    QuestionRatingModel.prototype.startLoadingFromJson = function (jsonObj) {
+        _super.prototype.startLoadingFromJson.call(this, jsonObj);
+        this.jsonObj = jsonObj;
+    };
     QuestionRatingModel.prototype.endLoadingFromJson = function () {
         _super.prototype.endLoadingFromJson.call(this);
         this.hasMinRateDescription = !!this.minRateDescription;
         this.hasMaxRateDescription = !!this.maxRateDescription;
+        if (this.jsonObj.rateMin !== undefined && this.jsonObj.rateCount !== undefined && this.jsonObj.rateMax === undefined) {
+            this.updateRateMax();
+        }
+        if (this.jsonObj.rateMax !== undefined && this.jsonObj.rateCount !== undefined && this.jsonObj.rateMin === undefined) {
+            this.updateRateMin();
+        }
+        this.updateRateCount();
         this.createRenderedRateItems();
     };
+    QuestionRatingModel.prototype.registerSychProperties = function (names, func) {
+        var _this = this;
+        this.registerFunctionOnPropertiesValueChanged(names, function () {
+            if (!_this._syncPropertiesChanging) {
+                _this._syncPropertiesChanging = true;
+                func();
+                _this._syncPropertiesChanging = false;
+            }
+        });
+    };
+    QuestionRatingModel.prototype.updateRateMax = function () {
+        this.rateMax = this.rateMin + this.rateStep * (this.rateCount - 1);
+    };
+    QuestionRatingModel.prototype.updateRateMin = function () {
+        this.rateMin = this.rateMax - this.rateStep * (this.rateCount - 1);
+    };
+    QuestionRatingModel.prototype.updateRateCount = function () {
+        if (this.rateValues.length) {
+            this.rateCount = this.rateValues.length;
+        }
+        else {
+            this.rateCount = Math.trunc((this.rateMax - this.rateMin) / (this.rateStep || 1)) + 1;
+        }
+    };
+    QuestionRatingModel.prototype.initPropertyDependencies = function () {
+        var _this = this;
+        this.registerSychProperties(["rateCount"], function () {
+            if (_this.rateValues.length == 0) {
+                _this.rateMax = _this.rateMin + _this.rateStep * (_this.rateCount - 1);
+            }
+            else {
+                if (_this.rateCount < _this.rateValues.length) {
+                    _this.rateValues.splice(_this.rateCount, _this.rateValues.length - _this.rateCount);
+                }
+                else {
+                    for (var i = _this.rateValues.length; i < _this.rateCount; i++)
+                        _this.rateValues.push(new _itemvalue__WEBPACK_IMPORTED_MODULE_0__["ItemValue"](undefined));
+                }
+            }
+        });
+        this.registerSychProperties(["rateMin", "rateMax", "rateStep", "rateValues"], function () {
+            _this.updateRateCount();
+        });
+    };
     Object.defineProperty(QuestionRatingModel.prototype, "rateValues", {
         /**
          * A list of rate values.
@@ -50914,10 +51294,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
          *
          * If you need to specify only the `value` property, you can set the `rateValues` property to an array of numbers, for example, `[ 3, 6, 10 ]`. These values are both saved in survey results and used as display text.
          *
-         * If you do not specify the `rateValues` property, rate values are generated automatically based upon the `rateMin`, `rateMax`, and `rateStep` property values.
-         * @see rateMin
-         * @see rateMax
-         * @see rateStep
+         * If you do not specify the `rateValues` property, rate values are generated automatically based upon the [`rateMin`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#rateMin), [`rateMax`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#rateMax), [`rateStep`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#rateStep), and [`rateCount`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#rateCount) property values.
          */
         get: function () {
             return this.getPropertyValue("rateValues");
@@ -50931,12 +51308,12 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionRatingModel.prototype, "rateMin", {
         /**
-         * Specifies the first rate value in the generated sequence of rate values. Applies if the `rateValues` array is empty.
+         * Specifies the first rate value in the generated sequence of rate values. Applies if the [`rateValues`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#rateValues) array is empty.
          *
          * Default value: 1
-         * @see rateValues
          * @see rateMax
          * @see rateStep
+         * @see rateCount
          */
         get: function () {
             return this.getPropertyValue("rateMin");
@@ -50949,12 +51326,12 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionRatingModel.prototype, "rateMax", {
         /**
-         * Specifies the last rate value in the generated sequence of rate values. Applies if the `rateValues` array is empty.
+         * Specifies the last rate value in the generated sequence of rate values. Applies if the [`rateValues`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#rateValues) array is empty.
          *
          * Default value: 5
-         * @see rateValues
          * @see rateMin
          * @see rateStep
+         * @see rateCount
          */
         get: function () {
             return this.getPropertyValue("rateMax");
@@ -50967,12 +51344,12 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionRatingModel.prototype, "rateStep", {
         /**
-         * Specifies a step with which to generate rate values. Applies if the `rateValues` array is empty.
+         * Specifies a step with which to generate rate values. Applies if the [`rateValues`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#rateValues) array is empty.
          *
          * Default value: 1
-         * @see rateValues
          * @see rateMin
          * @see rateMax
+         * @see rateCount
          */
         get: function () {
             return this.getPropertyValue("rateStep");
@@ -51019,6 +51396,8 @@ var QuestionRatingModel = /** @class */ (function (_super) {
             }
             rateValues = res;
         }
+        if (this.rateType == "smileys" && rateValues.length > 10)
+            rateValues = rateValues.slice(0, 10);
         this.renderedRateItems = rateValues.map(function (v, i) {
             if (_this.displayRateDescriptionsAsExtremeItems) {
                 if (i == 0)
@@ -51238,6 +51617,13 @@ var QuestionRatingModel = /** @class */ (function (_super) {
             itemHoverClass = this.cssClasses.itemSmileyHover;
             itemitemOnErrorClass = this.cssClasses.itemSmileyOnError;
         }
+        var hasFixedSize = !this.isStar &&
+            !this.isSmiley &&
+            (!this.displayRateDescriptionsAsExtremeItems ||
+                this.rateValues.length > 0 && item != this.rateValues[0] && item != this.rateValues[this.rateValues.length - 1] ||
+                this.rateValues.length == 0 && item.value != this.rateMin && item.value != this.rateMax) &&
+            item.locText.calculatedText.length <= 2 &&
+            Number.isInteger(Number(item.locText.calculatedText));
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_6__["CssClassBuilder"]()
             .append(itemClass)
             .append(itemSelectedClass, isSelected)
@@ -51246,6 +51632,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
             .append(itemHighlightedClass, isHighlighted)
             .append(itemUnhighlightedClass, isUnhighlighted)
             .append(itemitemOnErrorClass, this.errors.length > 0)
+            .append(this.cssClasses.itemFixedSize, hasFixedSize)
             .toString();
     };
     //methods for mobile view
@@ -51362,6 +51749,9 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         }
         return classes;
     };
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: 5 })
+    ], QuestionRatingModel.prototype, "rateCount", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["propertyArray"])()
     ], QuestionRatingModel.prototype, "renderedRateItems", void 0);
@@ -51400,6 +51790,10 @@ var QuestionRatingModel = /** @class */ (function (_super) {
 
 _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("rating", [
     { name: "showCommentArea:switch", layout: "row", visible: true, category: "general" },
+    {
+        name: "rateCount:number",
+        default: 5
+    },
     {
         name: "rateValues:itemvalue[]",
         baseValue: function () {
@@ -52121,6 +52515,9 @@ var QuestionTextModel = /** @class */ (function (_super) {
             if (_this.isInputTextUpdate) {
                 _this._isWaitingForEnter = event.keyCode === 229;
             }
+            if (event.keyCode === 13) {
+                _this.survey.questionEditFinishCallback(_this, event);
+            }
         };
         _this.onChange = function (event) {
             if (event.target === document.activeElement) {
@@ -55933,7 +56330,7 @@ var TitleElement = /** @class */ (function (_super) {
             };
         }
         var CustomTag = element.titleTagName;
-        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(CustomTag, { className: element.cssTitle, id: element.ariaTitleId, "aria-label": ariaLabel, tabIndex: element.titleTabIndex, "aria-expanded": element.titleAriaExpanded, role: "button", onClick: onClick, onKeyUp: onKeyUp }, titleContent));
+        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(CustomTag, { className: element.cssTitle, id: element.ariaTitleId, "aria-label": ariaLabel, tabIndex: element.titleTabIndex, "aria-expanded": element.titleAriaExpanded, role: element.titleAriaRole, onClick: onClick, onKeyUp: onKeyUp }, titleContent));
     };
     return TitleElement;
 }(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));
@@ -56404,8 +56801,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyElementHeader", function() { return SurveyElementHeader; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _components_title_title_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/title/title-element */ "./src/react/components/title/title-element.tsx");
-/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
+/* harmony import */ var _components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/action-bar/action-bar */ "./src/react/components/action-bar/action-bar.tsx");
+/* harmony import */ var _components_title_title_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/title/title-element */ "./src/react/components/title/title-element.tsx");
+/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -56424,6 +56822,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var SurveyElementHeader = /** @class */ (function (_super) {
     __extends(SurveyElementHeader, _super);
     function SurveyElementHeader() {
@@ -56438,13 +56837,15 @@ var SurveyElementHeader = /** @class */ (function (_super) {
     });
     SurveyElementHeader.prototype.render = function () {
         var element = this.element;
-        var title = element.hasTitle ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_title_title_element__WEBPACK_IMPORTED_MODULE_1__["TitleElement"], { element: element })) : null;
+        var title = element.hasTitle ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_title_title_element__WEBPACK_IMPORTED_MODULE_2__["TitleElement"], { element: element })) : null;
         var description = element.hasDescriptionUnderTitle
-            ? _reactquestion_element__WEBPACK_IMPORTED_MODULE_2__["SurveyElementBase"].renderQuestionDescription(this.element)
+            ? _reactquestion_element__WEBPACK_IMPORTED_MODULE_3__["SurveyElementBase"].renderQuestionDescription(this.element)
             : null;
+        var additionalTitleToolbarElement = !!element.additionalTitleToolbar ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_1__["SurveyActionBar"], { model: element.additionalTitleToolbar }) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: element.cssHeader, onClick: element.clickTitleFunction },
             title,
-            description));
+            description,
+            additionalTitleToolbarElement));
     };
     return SurveyElementHeader;
 }(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));
@@ -57577,8 +57978,14 @@ var Survey = /** @class */ (function (_super) {
         }
         var rootCss = this.survey.getRootCss();
         var cssClasses = this.rootNodeClassName ? this.rootNodeClassName + " " + rootCss : rootCss;
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.rootNodeId, ref: this.rootRef, className: cssClasses },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("form", { onSubmit: onSubmit },
+        var rootStyle = {
+            backgroundImage: this.survey.renderBackgroundImage
+        };
+        var formStyle = {
+            backgroundColor: this.survey.renderBackgroundOpacity
+        };
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.rootNodeId, ref: this.rootRef, className: cssClasses, style: rootStyle },
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("form", { onSubmit: onSubmit, style: formStyle },
                 customHeader,
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.container },
                     header,
@@ -57718,9 +58125,7 @@ var Survey = /** @class */ (function (_super) {
     };
     //ISurveyCreator
     Survey.prototype.createQuestionElement = function (question) {
-        return _reactquestion_factory__WEBPACK_IMPORTED_MODULE_6__["ReactQuestionFactory"].Instance.createQuestion(!question.isDefaultRendering || question.isDefaultRendering()
-            ? question.getTemplate()
-            : question.getComponentName(), {
+        return _reactquestion_factory__WEBPACK_IMPORTED_MODULE_6__["ReactQuestionFactory"].Instance.createQuestion(question.isDefaultRendering() ? question.getTemplate() : question.getComponentName(), {
             question: question,
             isDisplayMode: question.isInputReadOnly,
             creator: this,
@@ -58081,7 +58486,8 @@ var SurveyProgressToc = /** @class */ (function (_super) {
     }
     SurveyProgressToc.prototype.render = function () {
         var listModel = Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["createTOCListModel"])(this.props.model);
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.props.containerCss || "sv_progress-toc" },
+        var rootCss = Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["getTocRootCss"])(this.props.model);
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: rootCss },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_list_list__WEBPACK_IMPORTED_MODULE_4__["List"], { model: listModel })));
     };
     return SurveyProgressToc;
@@ -58492,7 +58898,7 @@ var SurveyQuestionAndErrorsCell = /** @class */ (function (_super) {
         var survey = this.question.survey;
         var wrapper = null;
         if (survey) {
-            wrapper = _reactsurveymodel__WEBPACK_IMPORTED_MODULE_2__["ReactSurveyElementsWrapper"].wrapMatrixCell(survey, element, cell);
+            wrapper = _reactsurveymodel__WEBPACK_IMPORTED_MODULE_2__["ReactSurveyElementsWrapper"].wrapMatrixCell(survey, element, cell, this.props.reason);
         }
         return wrapper !== null && wrapper !== void 0 ? wrapper : element;
     };
@@ -60295,7 +60701,7 @@ var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
         var table = this.question.renderedTable;
         if (!table.showFooter)
             return null;
-        var row = this.renderRow("footer", table.footerRow, this.question.cssClasses);
+        var row = this.renderRow("footer", table.footerRow, this.question.cssClasses, "row-footer");
         return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("tfoot", null, row);
     };
     SurveyQuestionMatrixDropdownBase.prototype.renderRows = function () {
@@ -60307,23 +60713,26 @@ var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
         }
         return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("tbody", null, rows);
     };
-    SurveyQuestionMatrixDropdownBase.prototype.renderRow = function (keyValue, row, cssClasses) {
+    SurveyQuestionMatrixDropdownBase.prototype.renderRow = function (keyValue, row, cssClasses, reason) {
         var matrixrow = [];
         var cells = row.cells;
         for (var i = 0; i < cells.length; i++) {
-            matrixrow.push(this.renderCell(cells[i], i, cssClasses));
+            matrixrow.push(this.renderCell(cells[i], i, cssClasses, reason));
         }
         var key = "row" + keyValue;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], { key: key },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_matrix_row__WEBPACK_IMPORTED_MODULE_7__["MatrixRow"], { model: row, parentMatrix: this.question }, matrixrow)));
     };
-    SurveyQuestionMatrixDropdownBase.prototype.renderCell = function (cell, index, cssClasses) {
+    SurveyQuestionMatrixDropdownBase.prototype.renderCell = function (cell, index, cssClasses, reason) {
         var key = "cell" + index;
         if (cell.hasQuestion) {
-            return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionMatrixDropdownCell, { key: key, cssClasses: cssClasses, cell: cell, creator: this.creator }));
+            return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionMatrixDropdownCell, { key: key, cssClasses: cssClasses, cell: cell, creator: this.creator, reason: reason }));
         }
-        var reason = cell.hasTitle ? "row-header" : "";
-        var cellContent = this.renderCellContent(cell, reason, cssClasses);
+        var calcReason = reason;
+        if (!calcReason) {
+            calcReason = cell.hasTitle ? "row-header" : "";
+        }
+        var cellContent = this.renderCellContent(cell, calcReason, cssClasses);
         var cellStyle = null;
         if (!!cell.width || !!cell.minWidth) {
             cellStyle = {};
@@ -60943,10 +61352,10 @@ var SurveyQuestionPanelDynamic = /** @class */ (function (_super) {
     SurveyQuestionPanelDynamic.prototype.renderNavigatorV2 = function () {
         if (this.question.panelCount === 0 || this.question["showLegacyNavigation"])
             return null;
-        var range = this.question.isRangeShowing && !this.question.isProgressTopShowing ? this.renderRange() : null;
         if (!this.question.cssClasses.footer) {
             return null;
         }
+        var range = this.question.isRangeShowing && this.question.isProgressBottomShowing ? this.renderRange() : null;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.footer },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("hr", { className: this.question.cssClasses.separator }),
             range,
@@ -62495,6 +62904,10 @@ var RendererFactory = /** @class */ (function () {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "settings", function() { return settings; });
+var columnWidthsByType = {
+    "file": { minWidth: "240px" },
+    "comment": { minWidth: "200px" }
+};
 /**
  * Global settings that apply to all surveys on the page. To specify one of the settings, use the code below:
  *
@@ -62505,6 +62918,16 @@ __webpack_require__.r(__webpack_exports__);
  * ```
  */
 var settings = {
+    /**
+     * Specifies an action to perform when users press the Enter key within a survey.
+     *
+     * Possible values:
+     *
+     * - `"moveToNextEditor"` - Moves focus to the next editor.
+     * - `"loseFocus"` - Removes focus from the current editor.
+     * - `"default"` - Behaves as a standard `<input>` element.
+     */
+    enterKeyAction: "default",
     /**
      * An object that configures string comparison.
      *
@@ -62941,6 +63364,18 @@ var settings = {
             "email",
             "impp",
         ]
+    },
+    /**
+     * Contains properties that apply to [Single-Choice](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-question-model), [Multiple-Choice](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list), and [Dynamic Matrix](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model) questions.
+     *
+     * Nested properties:
+     *
+     * - `columnWidthsByType`: `Object`\
+     * An object that specifies fixed and minimum column width based on the column type.\
+     * Example: `settings.matrix.columnWidthsByType = { "tagbox": { minWidth: "240px", width: "300px" } }`
+     */
+    matrix: {
+        columnWidthsByType: columnWidthsByType
     }
 };
 
@@ -63488,6 +63923,11 @@ var SurveyElementCore = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SurveyElementCore.prototype, "titleAriaRole", {
+        get: function () { return undefined; },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(SurveyElementCore.prototype, "ariaLabel", {
         get: function () {
             return this.locTitle.renderedHtml;
@@ -63846,6 +64286,15 @@ var SurveyElement = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SurveyElement.prototype, "titleAriaRole", {
+        get: function () {
+            if (this.isPage || this.state === "default")
+                return undefined;
+            return "button";
+        },
+        enumerable: false,
+        configurable: true
+    });
     SurveyElement.prototype.setSurveyImpl = function (value, isLight) {
         this.surveyImplValue = value;
         if (!this.surveyImplValue) {
@@ -64495,6 +64944,16 @@ var SurveyElement = /** @class */ (function (_super) {
             this.toggleState();
         }
     };
+    Object.defineProperty(SurveyElement.prototype, "additionalTitleToolbar", {
+        get: function () {
+            return this.getAdditionalTitleToolbar();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyElement.prototype.getAdditionalTitleToolbar = function () {
+        return null;
+    };
     SurveyElement.prototype.getCssTitle = function (cssClasses) {
         var isExpandable = this.state !== "default";
         var numInlineLimit = 4;
@@ -64735,9 +65194,10 @@ var SurveyModel = /** @class */ (function (_super) {
          */
         _this.onComplete = _this.addEvent();
         /**
-         * An event that is raised before the survey displays a [preview](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#preview-page). Use this event to cancel the preview.
-         *
+         * An event that is raised before the survey displays a [preview of given answers](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#preview-page). Use this event to cancel the preview.
          * @see showPreviewBeforeComplete
+         * @see showPreview
+         * @see cancelPreview
          */
         _this.onShowingPreview = _this.addEvent();
         /**
@@ -65023,7 +65483,6 @@ var SurveyModel = /** @class */ (function (_super) {
          * For information on event handler parameters, refer to descriptions within the interface.
          *
          * [View Demo](https://surveyjs.io/form-library/examples/file-delayed-upload/ (linkStyle))
-         * @see clearFiles
          * @see onDownloadFile
          * @see onUploadFiles
          */
@@ -65362,6 +65821,7 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.createHtmlLocString("completedBeforeHtml", "completingSurveyBefore", htmlCallBack);
         _this.createHtmlLocString("loadingHtml", "loadingSurvey", htmlCallBack);
         _this.createLocalizableString("logo", _this, false);
+        _this.createLocalizableString("backgroundImage", _this, false);
         _this.createLocalizableString("startSurveyText", _this, false, true);
         _this.createLocalizableString("pagePrevText", _this, false, true);
         _this.createLocalizableString("pageNextText", _this, false, true);
@@ -65412,6 +65872,7 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.registerPropertyChangedHandlers(["isLoading", "isCompleted", "isCompletedBefore", "mode", "isStartedState", "currentPage"], function () { _this.updateState(); });
         _this.registerPropertyChangedHandlers(["state", "currentPage", "showPreviewBeforeComplete"], function () { _this.onStateAndCurrentPageChanged(); });
         _this.registerPropertyChangedHandlers(["logo", "logoPosition"], function () { _this.updateHasLogo(); });
+        _this.registerPropertyChangedHandlers(["backgroundImage"], function () { _this.updateRenderBackgroundImage(); });
         _this.onGetQuestionNo.onCallbacksChanged = function () {
             _this.resetVisibleIndexes();
         };
@@ -65581,9 +66042,10 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyModel.prototype, "pages", {
         /**
-         * Returns a list of all pages in the survey, including invisible pages.
+         * Returns an array of all pages in the survey.
+         *
+         * To get an array of only visible pages, use the [`visiblePages`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#visiblePages) array.
          * @see PageModel
-         * @see visiblePages
          */
         get: function () {
             return this.getPropertyValue("pages");
@@ -65789,11 +66251,7 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "calculatedValues", {
         /**
-         * Gets or sets a list of calculated values in the survey.
-         * @see CalculatedValue
-         *
-         * For more information, refer to [Calculated Values](https://surveyjs.io/form-library/documentation/design-survey-conditional-logic#calculated-values).
-         *
+         * An array of [calculated values](https://surveyjs.io/form-library/documentation/design-survey-conditional-logic#calculated-values).
          */
         get: function () {
             return this.getPropertyValue("calculatedValues");
@@ -65806,7 +66264,9 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "surveyId", {
         /**
-         * Gets or sets an identifier of a survey model loaded from the [api.surveyjs.io](https://api.surveyjs.io) service. When specified, the survey JSON is automatically loaded from [api.surveyjs.io](https://api.surveyjs.io) service.
+         * The identifier of a survey JSON schema to load from the [SurveyJS Service](https://api.surveyjs.io).
+         *
+         * Refer to the following help topic for more information: [Store Survey Results in the SurveyJS Service](https://surveyjs.io/form-library/documentation/handle-survey-results-store#store-survey-results-in-the-surveyjs-service).
          * @see loadSurveyFromService
          * @see onLoadedSurveyFromService
          */
@@ -65821,7 +66281,9 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "surveyPostId", {
         /**
-         * Gets or sets an identifier of a survey model saved to the [api.surveyjs.io](https://api.surveyjs.io) service. When specified, the survey data is automatically saved to the [api.surveyjs.io](https://api.surveyjs.io) service.
+         * An identifier used to save survey results to the [SurveyJS Service](https://api.surveyjs.io).
+         *
+         * Refer to the following help topic for more information: [Store Survey Results in the SurveyJS Service](https://surveyjs.io/form-library/documentation/handle-survey-results-store#store-survey-results-in-the-surveyjs-service).
          * @see onComplete
          * @see surveyShowDataSaving
          */
@@ -65836,9 +66298,10 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "clientId", {
         /**
-         * Gets or sets user's identifier (e.g., e-mail or unique customer id) in your web application.
-         * If you load survey or post survey results from/to [api.surveyjs.io](https://api.surveyjs.io) service, then the library do not allow users to run the same survey the second time.
-         * On the second run, the user will see the survey complete page.
+         * A user identifier (e-mail or other unique ID).
+         *
+         * If your application works with the [SurveyJS Service](https://api.surveyjs.io), the ID ensures that users do not pass the same survey twice. On the second run, they will see the [Completed Before page](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#completedBeforeHtml).
+         * @see cookieName
          */
         get: function () {
             return this.getPropertyValue("clientId", "");
@@ -65851,9 +66314,10 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "cookieName", {
         /**
-         * Gets or sets a cookie name used to save information about completing the survey.
-         * If the property is not empty, before starting the survey, the Survey library checks if the cookie with this name exists.
-         * If it is `true`, the survey goes to complete mode and a user sees the survey complete page. On completing the survey the cookie with this name is created.
+         * A cookie name used to save information about survey completion.
+         *
+         * When this property has a value, the survey creates a cookie with the specified name on completion. This cookie helps ensure that users do not pass the same survey twice. On the second run, they will see the [Completed Before page](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#completedBeforeHtml).
+         * @see cliendId
          */
         get: function () {
             return this.getPropertyValue("cookieName", "");
@@ -66201,18 +66665,15 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "goNextPageAutomatic", {
         /**
-         * Gets or ses whether user proceeds to the next page without pressing the "Next" button after answering all page questions.
-         * The available options:
+         * Specifies whether the survey switches to the next page automatically after a user answers all questions on the current page.
          *
-         * - `true` - navigate to the next page and submit survey data automatically.
-         * - `autogonext` - navigate to the next page automatically but do not submit survey data.
-         * - `false` - do not navigate to the next page and do not submit survey data automatically.
+         * Default value: `false`
          *
-         * > If any of the following questions is answered last, the survey won't be switched to the next page: Checkbox, Boolean (rendered as Checkbox), Comment, Signature Pad, Image Picker (with Multi Select), File, Single-Choice Matrix (not all rows are answered), Dynamic Matrix, Panel Dynamic.
+         * If you enable this property, the survey is also completed automatically. Set the [`allowCompleteSurveyAutomatic`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#allowCompleteSurveyAutomatic) property to `false` if you want to disable this behavior.
          *
-         * @see showNavigationButtons
+         * > If any of the following questions is answered last, the survey does not switch to the next page: Checkbox, Boolean (rendered as Checkbox), Comment, Signature Pad, Image Picker (with Multi Select), File, Single-Choice Matrix (not all rows are answered), Dynamic Matrix, Panel Dynamic.
          *
-         * [View Demo](https://surveyjs.io/form-library/examples/survey-autonextpage/ (linkStyle))
+         * [View Demo](https://surveyjs.io/form-library/examples/automatically-move-to-next-page-if-answer-selected/ (linkStyle))
          */
         get: function () {
             return this.getPropertyValue("goNextPageAutomatic");
@@ -66225,8 +66686,9 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "allowCompleteSurveyAutomatic", {
         /**
-         * Gets or sets whether a survey is automatically completed when `goNextPageAutomatic = true`. Set it to `false` if you do not want to submit survey automatically on completing the last survey page.
-         * @see goNextPageAutomatic
+         * Specifies whether to complete the survey automatically after a user answers all questions on the last page. Applies only if the [`goNextPageAutomatic`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#goNextPageAutomatic) property is `true`.
+         *
+         * Default value: `true`
          */
         get: function () {
             return this.getPropertyValue("allowCompleteSurveyAutomatic", true);
@@ -66239,14 +66701,15 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "checkErrorsMode", {
         /**
-         * Gets or sets a value that specifies how the survey validates the question answers.
+         * Specifies when the survey validates answers.
          *
-         * The following options are available:
+         * Possible values:
+         *
+         * - `"onNextPage"` (default) - Triggers validation before the survey is switched to the next page or completed.
+         * - `"onValueChanged"` - Triggers validation each time a question value is changed.
+         * - `"onComplete"` - Triggers validation when a user clicks the Complete button. If previous pages contain errors, the survey switches to the page with the first error.
          *
-         * - `onNextPage` (default) - check errors on navigating to the next page or on completing the survey.
-         * - `onValueChanged` - check errors on every question value (i.e., answer) changing.
-         * - `onValueChanging` - check errors before setting value into survey. If there is an error, then survey data is not changed, but question value will be keeped.
-         * - `onComplete` - to validate all visible questions on complete button click. If there are errors on previous pages, then the page with the first error becomes the current.
+         * Refer to the following help topic for more information: [Data Validation](https://surveyjs.io/form-library/documentation/data-validation).
          */
         get: function () {
             return this.getPropertyValue("checkErrorsMode");
@@ -66259,9 +66722,11 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "autoGrowComment", {
         /**
-         * Specifies whether the text area of [comment](https://surveyjs.io/Documentation/Library?id=questioncommentmodel) questions/elements automatically expands its height to avoid the vertical scrollbar and to display the entire multi-line contents entered by respondents.
-         * Default value is false.
-         * @see QuestionCommentModel.autoGrow
+         * Specifies whether to increase the height of text areas to accommodate multi-line comments.
+         *
+         * Default value: `false`
+         *
+         * You can override this property for individual Comment questions: [`autoGrow`](https://surveyjs.io/form-library/documentation/api-reference/comment-field-model#autoGrow).
          */
         get: function () {
             return this.getPropertyValue("autoGrowComment");
@@ -66294,15 +66759,17 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "clearInvisibleValues", {
         /**
-         * Gets or sets a value that specifies how the invisible data is included in survey data.
+         * Specifies when to remove values of invisible questions from [survey results](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#data).
          *
-         * The following options are available:
+         * Possible values:
          *
-         * - `none` - include the invisible values into the survey data.
-         * - `onHidden` - clear the question value when it becomes invisible. If a question has value and it was invisible initially then survey clears the value on completing.
-         * - `onHiddenContainer` - clear the question value when it or its parent (page or panel) becomes invisible. If a question has value and it was invisible initially then survey clears the value on completing.
-         * - `onComplete` (default) - clear invisible question values on survey complete. In this case, the invisible questions will not be stored on the server.
-         * @see Question.visible
+         * - `"onComplete"` (default) - Clears invisible question values when the survey is complete.
+         * - `"onHidden"` - Clears a question value when the question becomes invisible. If the question is invisible initially, its value is removed on survey completion.
+         * - `"onHiddenContainer"` - Clears a question value when the question or its containter (page or panel) becomes invisible. If the question is invisible initially, its value is removed on survey completion.
+         * - `"none"` - Keeps invisible values in survey results.
+         * - `true` - Equivalent to `"onComplete"`.
+         * - `false` - Equivalent to `"none"`.
+         * @see [Conditional Visibility](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#conditional-visibility)
          * @see onComplete
          */
         get: function () {
@@ -66319,21 +66786,19 @@ var SurveyModel = /** @class */ (function (_super) {
         configurable: true
     });
     /**
-     * Call this function to remove all question values from the survey, that end-user will not be able to enter.
-     * For example the value that doesn't exists in a radiogroup/dropdown/checkbox choices or matrix rows/columns.
-     * Please note, this function doesn't clear values for invisible questions or values that doesn't associated with questions.
-     * In fact this function just call clearIncorrectValues function of all questions in the survey
-     * @param removeNonExisingRootKeys - set this parameter to true to remove keys from survey.data that doesn't have corresponded questions and calculated values
-     * @see Question.clearIncorrectValues
-     * @see Page.clearIncorrectValues
-     * @see Panel.clearIncorrectValues
+     * Removes values that cannot be assigned to a question, for example, choices unlisted in the `choices` array.
+     *
+     * Call this method after you assign new question values in code to ensure that they are acceptable.
+     *
+     * > This method does not remove values that fail validation. Call the [`validate()`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#validate) method to validate newly assigned values.
+     * @param removeNonExistingRootKeys Pass `true` to remove values that do not correspond to any question or [calculated value](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#calculated-values).
      */
-    SurveyModel.prototype.clearIncorrectValues = function (removeNonExisingRootKeys) {
-        if (removeNonExisingRootKeys === void 0) { removeNonExisingRootKeys = false; }
+    SurveyModel.prototype.clearIncorrectValues = function (removeNonExistingRootKeys) {
+        if (removeNonExistingRootKeys === void 0) { removeNonExistingRootKeys = false; }
         for (var i = 0; i < this.pages.length; i++) {
             this.pages[i].clearIncorrectValues();
         }
-        if (!removeNonExisingRootKeys)
+        if (!removeNonExistingRootKeys)
             return;
         var data = this.data;
         var hasChanges = false;
@@ -66360,7 +66825,7 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyModel.prototype, "keepIncorrectValues", {
         /**
-         * Specifies whether to keep values that cannot be assigned to questions, for example, choices unlisted in the choices array.
+         * Specifies whether to keep values that cannot be assigned to questions, for example, choices unlisted in the `choices` array.
          *
          * > This property cannot be specified in the survey JSON schema. Use dot notation to specify it.
          * @see clearIncorrectValues
@@ -66707,14 +67172,58 @@ var SurveyModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SurveyModel.prototype, "backgroundImage", {
+        /**
+         * Gets or sets a survey backgroundImage.
+         */
+        get: function () {
+            return this.getLocalizableStringText("backgroundImage");
+        },
+        set: function (value) {
+            this.setLocalizableStringText("backgroundImage", value);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyModel.prototype, "locBackgroundImage", {
+        get: function () {
+            return this.getLocalizableString("backgroundImage");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyModel.prototype.updateRenderBackgroundImage = function () {
+        this.renderBackgroundImage = ["url(", this.getLocalizableString("backgroundImage").renderedHtml, ")"].join("");
+    };
+    Object.defineProperty(SurveyModel.prototype, "backgroundOpacity", {
+        get: function () {
+            return this.getPropertyValue("backgroundOpacity");
+        },
+        set: function (val) {
+            this.setPropertyValue("backgroundOpacity", val);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyModel.prototype, "renderBackgroundOpacity", {
+        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("");
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(SurveyModel.prototype, "completedHtml", {
         /**
-         * Gets or sets the HTML content displayed on the complete page. Use this property to change the default complete page text.
+         * HTML content displayed on the [complete page](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#complete-page).
+         *
+         * [View Demo](https://surveyjs.io/form-library/examples/modify-survey-navigation-settings/ (linkStyle))
          * @see showCompletedPage
          * @see completedHtmlOnCondition
-         * @see locale
-         *
-         * [View Demo](https://surveyjs.io/form-library/examples/survey-options/ (linkStyle))
          */
         get: function () {
             return this.getLocalizableStringText("completedHtml");
@@ -66734,9 +67243,11 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "completedHtmlOnCondition", {
         /**
-         * The list of HTML condition items. If the expression of this item returns `true`, then a survey will use this item HTML instead of `completedHtml`.
-         * @see HtmlConditionItem
-         * @see completeHtml
+         * An array of objects that allows you to specify different HTML content for the [complete page](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#complete-page).
+         *
+         * Each object should include the [`expression`](https://surveyjs.io/form-library/documentation/api-reference/htmlconditionitem#expression) and [`html`](https://surveyjs.io/form-library/documentation/api-reference/htmlconditionitem#html) properties. When `expression` evaluates to `true`, the survey uses the corresponding HTML markup instead of [`completedHtml`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#completedHtml). Refer to the following help topic for more information about expressions: [Expressions](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#expressions).
+         *
+         * [View Demo](https://surveyjs.io/form-library/examples/nps-question/ (linkStyle))
          */
         get: function () {
             return this.getPropertyValue("completedHtmlOnCondition");
@@ -66797,9 +67308,10 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyModel.prototype, "completedBeforeHtml", {
         /**
-         * The HTML content displayed to an end user that has already completed the survey.
+         * HTML content displayed to a user who has completed the survey before.
          * @see clientId
-         * @see locale
+         * @see cookieName
+         * @see processedCompletedBeforeHtml
          */
         get: function () {
             return this.getLocalizableStringText("completedBeforeHtml");
@@ -66819,9 +67331,9 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "loadingHtml", {
         /**
-         * The HTML that shows on loading survey Json from the [api.surveyjs.io](https://api.surveyjs.io) service.
+         * HTML content displayed while a survey JSON schema is being loaded from the [SurveyJS Service](https://api.surveyjs.io).
          * @see surveyId
-         * @see locale
+         * @see processedLoadingHtml
          */
         get: function () {
             return this.getLocalizableStringText("loadingHtml");
@@ -66840,10 +67352,6 @@ var SurveyModel = /** @class */ (function (_super) {
         configurable: true
     });
     Object.defineProperty(SurveyModel.prototype, "defaultLoadingHtml", {
-        /**
-         * Default value for loadingHtml property
-         * @see loadingHtml
-         */
         get: function () {
             return "<h3>" + this.getLocalizationString("loadingSurvey") + "</h3>";
         },
@@ -66960,11 +67468,10 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "previewText", {
         /**
-         *  Gets or sets the 'Preview' button caption.
-         * @see locale
+         * Gets or sets a caption for the Preview button.
          * @see showPreviewBeforeComplete
-         * @see editText
          * @see showPreview
+         * @see editText
          */
         get: function () {
             return this.getLocalizableStringText("previewText");
@@ -66984,11 +67491,10 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "editText", {
         /**
-         *  Gets or sets the 'Edit' button caption.
-         * @see locale
+         * Gets or sets a caption for the Edit button displayed when the survey shows a [preview of given answers](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#preview-page).
          * @see showPreviewBeforeComplete
-         * @see previewText
          * @see cancelPreview
+         * @see previewText
          */
         get: function () {
             return this.getLocalizableStringText("editText");
@@ -67682,8 +68188,9 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyModel.prototype, "comments", {
         /**
-         * Returns all comments from the data.
-         * @see data
+         * An object with all comment values.
+         * @see Question.showCommentArea
+         * @see storeOthersAsComment
          */
         get: function () {
             var result = {};
@@ -67701,10 +68208,10 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "visiblePages", {
         /**
-         * Returns a list of visible pages. If all pages are visible, then this property returns the same list as the `pages` property.
-         * @see pages
-         * @see PageModel.visible
-         * @see PageModel.visibleIf
+         * Returns an array of visible pages without the start page.
+         *
+         * To get an array of all pages, use the [`pages`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#pages) property. If all pages are visible, the `pages` and `visiblePages` arrays are identical.
+         * @see [Conditional Visibility](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#conditional-visibility)
          */
         get: function () {
             if (this.isDesignMode)
@@ -67742,8 +68249,9 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "pageCount", {
         /**
-         * Returns the survey page count.
-         * @see visiblePageCount
+         * Returns a total number of survey pages.
+         *
+         * To get the number of visible pages, use the [`visiblePageCount`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#visiblePageCount) property.
          * @see pages
          */
         get: function () {
@@ -67754,9 +68262,11 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "visiblePageCount", {
         /**
-         * Returns a number of visible pages within the survey.
-         * @see pageCount
+         * Returns the number of visible survey pages.
+         *
+         * To get a total number of survey pages, use the [`pageCount`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#pageCount) property.
          * @see visiblePages
+         * @see [Conditional Visibility](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#conditional-visibility)
          */
         get: function () {
             return this.visiblePages.length;
@@ -67766,8 +68276,11 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "startedPage", {
         /**
-         * Returns the started page. This property works if the `firstPageIsStarted` property is set to `true`.
+         * Returns the start page. Applies only if the [`firstPageIsStarted`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#firstPageIsStarted) property is set to `true`.
+         *
+         * Refer to the following help topic for more information: [Start Page](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#start-page).
          * @see firstPageIsStarted
+         * @see activePage
          */
         get: function () {
             var page = this.firstPageIsStarted && this.pages.length > 1 ? this.pages[0] : null;
@@ -67782,7 +68295,17 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "currentPage", {
         /**
-         * Gets or sets the current survey page. If a survey is rendered, then this property returns a page that a user can see/edit.
+         * Gets or sets the current page.
+         *
+         * If you want to change the current page, set this property to a `PageModel` object. You can get this object in different ways. For example, you can call the [`getPageByName()`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#getPageByName) method to obtain a `PageModel` object with a specific name:
+         *
+         * ```js
+         * survey.currentPage = survey.getPageByName("my-page-name");
+         * ```
+         *
+         * Alternatively, you can change the current page if you set the [`currentPageNo`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#currentPageNo) property to the index of the required page.
+         *
+         * The `currentPage` property does not return the start page even if it is current. Use the [`activePage`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#activePage) property instead if your survey contains a start page.
          */
         get: function () {
             return this.getPropertyValue("currentPage", null);
@@ -67835,10 +68358,10 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyModel.prototype, "activePage", {
         /**
-         * Returns the currentPage, unless the started page is showing. In this case returns the started page.
+         * Returns [`startedPage`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#startedPage) if the survey currently displays a start page; otherwise, returns [`currentPage`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#currentPage).
+         * @see startedPage
          * @see currentPage
          * @see firstPageIsStarted
-         * @see startedPage
          */
         get: function () {
             return this.getPropertyValue("activePage");
@@ -67892,9 +68415,10 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyModel.prototype, "currentPageNo", {
         /**
-         * The zero-based index of the current page in the visible pages array.
+         * A zero-based index of the current page in the [`visiblePages`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#visiblePages) array.
          *
          * [View Demo](https://surveyjs.io/form-library/examples/survey-editprevious/ (linkStyle))
+         * @see visiblePages
          */
         get: function () {
             return this.visiblePages.indexOf(this.currentPage);
@@ -67910,13 +68434,16 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "questionsOrder", {
         /**
-         * Gets or sets the question display order. Use this property to randomize questions. You can randomize questions on a specific page.
+         * Specifies the sort order of questions in the survey.
          *
-         * The following options are available:
+         * Possible values:
          *
-         * - `random` - randomize questions
-         * - `initial` - keep questions in the same order, as in a survey model.
-         * @see SurveyPage.questionsOrder
+         * - `"initial"` (default) - Preserves the original order of questions.
+         * - `"random"` - Displays questions in random order.
+         *
+         * You can override this property for individual pages and panels.
+         * @see PageModel.questionsOrder
+         * @see PanelModel.questionsOrder
          */
         get: function () {
             return this.getPropertyValue("questionsOrder");
@@ -68076,16 +68603,13 @@ var SurveyModel = /** @class */ (function (_super) {
         this.notifier.notify(message, type, type === "error");
     };
     /**
-     * Clears the survey data and state. If the survey has a `completed` state, it will get a `running` state.
-     * @param clearData clear the data
-     * @param gotoFirstPage make the first page as a current page.
-     * @see data
-     * @see state
-     * @see currentPage
+     * Resets the survey [`state`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#state) and, optionally, [`data`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#data). If `state` is `"completed"`, it becomes `"running"`.
+     * @param clearData *Optional.* Specifies whether to clear survey data. Default value: `true`.
+     * @param goToFirstPage *Optional.* Specifies whether to switch the survey to the first page. Default value: `true`.
      */
-    SurveyModel.prototype.clear = function (clearData, gotoFirstPage) {
+    SurveyModel.prototype.clear = function (clearData, goToFirstPage) {
         if (clearData === void 0) { clearData = true; }
-        if (gotoFirstPage === void 0) { gotoFirstPage = true; }
+        if (goToFirstPage === void 0) { goToFirstPage = true; }
         this.isCompleted = false;
         this.isCompletedBefore = false;
         this.isLoading = false;
@@ -68101,7 +68625,7 @@ var SurveyModel = /** @class */ (function (_super) {
             this.pages[i].passed = false;
         }
         this.onFirstPageIsStartedChanged();
-        if (gotoFirstPage) {
+        if (goToFirstPage) {
             this.currentPage = this.firstVisiblePage;
         }
         if (clearData) {
@@ -68127,14 +68651,9 @@ var SurveyModel = /** @class */ (function (_super) {
         page.updateCustomWidgets();
     };
     SurveyModel.prototype.currentPageChanging = function (newValue, oldValue) {
-        var options = {
-            oldCurrentPage: oldValue,
-            newCurrentPage: newValue,
-            allowChanging: true,
-            allow: true,
-            isNextPage: this.isNextPage(newValue, oldValue),
-            isPrevPage: this.isPrevPage(newValue, oldValue),
-        };
+        var options = this.createPageChangeEventOptions(newValue, oldValue);
+        options.allow = true;
+        options.allowChanging = true;
         this.onCurrentPageChanging.fire(this, options);
         var allow = options.allowChanging && options.allow;
         if (allow) {
@@ -68143,26 +68662,22 @@ var SurveyModel = /** @class */ (function (_super) {
         return allow;
     };
     SurveyModel.prototype.currentPageChanged = function (newValue, oldValue) {
-        var isNextPage = this.isNextPage(newValue, oldValue);
-        if (isNextPage) {
+        var options = this.createPageChangeEventOptions(newValue, oldValue);
+        if (options.isNextPage) {
             oldValue.passed = true;
         }
-        this.onCurrentPageChanged.fire(this, {
+        this.onCurrentPageChanged.fire(this, options);
+    };
+    SurveyModel.prototype.createPageChangeEventOptions = function (newValue, oldValue) {
+        var diff = !!newValue && !!oldValue ? newValue.visibleIndex - oldValue.visibleIndex : 0;
+        return {
             oldCurrentPage: oldValue,
             newCurrentPage: newValue,
-            isNextPage: isNextPage,
-            isPrevPage: this.isPrevPage(newValue, oldValue),
-        });
-    };
-    SurveyModel.prototype.isNextPage = function (newValue, oldValue) {
-        if (!newValue || !oldValue)
-            return false;
-        return newValue.visibleIndex == oldValue.visibleIndex + 1;
-    };
-    SurveyModel.prototype.isPrevPage = function (newValue, oldValue) {
-        if (!newValue || !oldValue)
-            return false;
-        return newValue.visibleIndex + 1 == oldValue.visibleIndex;
+            isNextPage: diff === 1,
+            isPrevPage: diff === -1,
+            isGoingForward: diff > 0,
+            isGoingBackward: diff < 0
+        };
     };
     /**
      * Returns the progress that a user made while going through the survey.
@@ -68707,11 +69222,11 @@ var SurveyModel = /** @class */ (function (_super) {
         return true;
     };
     /**
-     * Completes the survey, if the current page is the last one. It returns `false` if the last page has errors.
-     * If the last page has no errors, `completeLastPage` calls `doComplete` and returns `true`.
+     * Completes the survey if it currently displays the last page and the page contains no validation errors. If both these conditions are met, this method returns `true`; otherwise, `false`.
+     *
+     * If you want to complete the survey regardless of the current page and validation errors, use the [`doComplete()`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#completeLastPage) event.
      * @see isCurrentPageValid
      * @see nextPage
-     * @see doComplete
      */
     SurveyModel.prototype.completeLastPage = function () {
         var res = this.doCurrentPageComplete(true);
@@ -68738,14 +69253,11 @@ var SurveyModel = /** @class */ (function (_super) {
         return this.navigationMouseDown();
     };
     /**
-     * Shows preview for the survey. Switches the survey to the "preview" state.
-     *
-     * Details: [Preview State](https://surveyjs.io/Documentation/Library#states-preview)
-     * @see showPreviewBeforeComplete
+     * Displays a [preview of given answers](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#preview-page). Returns `false` if the preview cannot be displayed because of validation errors.
      * @see cancelPreview
+     * @see showPreviewBeforeComplete
+     * @see onShowingPreview
      * @see state
-     * @see previewText
-     * @see editText
      */
     SurveyModel.prototype.showPreview = function () {
         this.resetNavigationButton();
@@ -68762,12 +69274,10 @@ var SurveyModel = /** @class */ (function (_super) {
         this.isShowingPreview = options.allowShowPreview && options.allow;
     };
     /**
-     * Cancels preview and switches back to the "running" state.
-     *
-     * Details: [Preview State](https://surveyjs.io/Documentation/Library#states-preview)
-     * @param curPage - A new current page. If the parameter is undefined then the last page becomes the current.
-     * @see showPreviewBeforeComplete
+     * Cancels a [preview of given answers](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#preview-page) and switches the survey to the page specified by the `curPage` parameter.
+     * @param curPage A new current page. If you do not specify this parameter, the survey displays the last page.
      * @see showPreview
+     * @see showPreviewBeforeComplete
      * @see state
      */
     SurveyModel.prototype.cancelPreview = function (curPage) {
@@ -68834,8 +69344,11 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "firstPageIsStarted", {
         /**
-         * Gets or sets whether the first survey page is a start page. Set this property to `true`, to make the first page a starting page.
-         * An end user cannot navigate to the start page and the start page does not affect a survey progress.
+         * Gets or sets a Boolean value that specifies whether the first page is a start page.
+         *
+         * Refer to the following help topic for more information: [Start Page](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#start-page).
+         * @see startedPage
+         * @see activePage
          */
         get: function () {
             return this.getPropertyValue("firstPageIsStarted");
@@ -69119,26 +69632,19 @@ var SurveyModel = /** @class */ (function (_super) {
     /**
      * Completes the survey.
      *
-     * Calling this function performs the following tasks:
+     * When you call this method, Form Library performs the following actions:
      *
-     * - writes cookie if the `cookieName` property is not empty
-     * - sets the survey into `completed` state
-     * - fires the `onComplete` event
-     * - calls `sendResult` function.
+     * 1. Saves a cookie if the [`cookieName`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#cookieName) property is set.
+     * 1. Switches the survey [`state`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#state) to `"completed"`.
+     * 1. Raises the [`onComplete`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onComplete) event.
+     * 1. Navigates the user to a URL specified by the [`navigateToUrl`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#navigateToUrl) or [`navigateToUrlOnCondition`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#navigateToUrlOnCondition) property.
+     * 1. Calls the [`sendResult()`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#sendResult) method if Form Library works with the [SurveyJS Service](https://api.surveyjs.io/).
      *
-     * Calling the `doComplete` function does not perform any validation, unlike the `completeLastPage` function.
-     * The function can return false, if you set options.allowComplete to false in onCompleting event. Otherwise it returns true.
-     * It calls `navigateToUrl` after calling `onComplete` event.
-     * In case calling `options.showSaveInProgress` callback in the `onComplete` event, `navigateToUrl` is used on calling `options.showSaveSuccess` callback.
-     * @see completeLastPage
-     * @see onCompleting
-     * @see cookieName
-     * @see state
-     * @see onComplete
+     * The `doComplete()` method completes the survey regardless of validation errors and the current page. If you need to ensure that survey results are valid and full, call the [`completeLastPage()`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#completeLastPage) method instead.
+     *
+     * @param isCompleteOnTrigger For internal use.
+     * @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
-     * @see completeLastPage
-     * @see navigateToUrl
-     * @see navigateToUrlOnCondition
      */
     SurveyModel.prototype.doComplete = function (isCompleteOnTrigger) {
         if (isCompleteOnTrigger === void 0) { isCompleteOnTrigger = false; }
@@ -69856,13 +70362,6 @@ var SurveyModel = /** @class */ (function (_super) {
             callback: callback,
         });
     };
-    /**
-     * Clears files from server.
-     * @param question question
-     * @param name question name
-     * @param value file question value
-     * @param callback call back function to get the status of the clearing operation
-     */
     SurveyModel.prototype.clearFiles = function (question, name, value, fileName, callback) {
         if (this.onClearFiles.isEmpty) {
             !!callback && callback("success", value);
@@ -69919,9 +70418,10 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     /**
      * Adds an existing page to the survey.
-     * @param page a newly added page
-     * @param index - a page index to where insert a page. It is -1 by default and the page will be added into the end.
+     * @param page A page to add.
+     * @param index An index at which to insert the page. If you do not specify this parameter, the page will be added to the end.
      * @see addNewPage
+     * @see createNewPage
      */
     SurveyModel.prototype.addPage = function (page, index) {
         if (index === void 0) { index = -1; }
@@ -69935,10 +70435,12 @@ var SurveyModel = /** @class */ (function (_super) {
         }
     };
     /**
-     * Creates a new page and adds it to a survey. Generates a new name if the `name` parameter is not specified.
-     * @param name a page name
-     * @param index - a page index to where insert a new page. It is -1 by default and the page will be added into the end.
+     * Creates a new page and adds it to the survey.
+     * @param name A page name. If you do not specify this parameter, it will be generated automatically.
+     * @param index An index at which to insert the page. If you do not specify this parameter, the page will be added to the end.
+     * @returns The created and added page.
      * @see addPage
+     * @see createNewPage
      */
     SurveyModel.prototype.addNewPage = function (name, index) {
         if (name === void 0) { name = null; }
@@ -70154,8 +70656,9 @@ var SurveyModel = /** @class */ (function (_super) {
         return result;
     };
     /**
-     * Creates and returns a new page, but do not add it into the survey.
-     * You can use addPage(page) function to add it into survey later.
+     * Creates and returns a new page but does not add it to the survey.
+     *
+     * Call the [`addPage(page)`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#addPage) method to add the created page to the survey later or the [`addNewPage(name, index)`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#addNewPage) method to create _and_ add a page to the survey.
      * @see addPage
      * @see addNewPage
      */
@@ -70617,6 +71120,7 @@ var SurveyModel = /** @class */ (function (_super) {
         this.isEndLoadingFromJson = null;
         this.updateVisibleIndexes();
         this.updateHasLogo();
+        this.updateRenderBackgroundImage();
         this.updateCurrentPage();
         this.hasDescription = !!this.description;
         this.setCalculatedWidthModeUpdater();
@@ -71094,8 +71598,11 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyModel.prototype, "clearValueOnDisableItems", {
         /**
-         * Gets or sets whether to clear value on disable items in checkbox, dropdown and radiogroup questions.
-         * By default, values are not cleared on disabled the corresponded items. This property is not persisted in survey JSON and you have to set it in code.
+         * Specifies whether to remove disabled choices from the value in [Dropdown](https://surveyjs.io/form-library/documentation/api-reference/dropdown-menu-model), [Checkboxes](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model), and [Radio Button Group](https://surveyjs.io/form-library/documentation/api-reference/radio-button-question-model) questions.
+         *
+         * Default value: `false`
+         *
+         * > This property cannot be specified in the survey JSON schema. Use dot notation to specify it.
          */
         get: function () {
             return this.getPropertyValue("clearValueOnDisableItems", false);
@@ -71829,6 +72336,20 @@ var SurveyModel = /** @class */ (function (_super) {
         }
         return true;
     };
+    SurveyModel.prototype.questionEditFinishCallback = function (question, event) {
+        if (_settings__WEBPACK_IMPORTED_MODULE_14__["settings"].enterKeyAction == "loseFocus")
+            event.target.blur();
+        if (_settings__WEBPACK_IMPORTED_MODULE_14__["settings"].enterKeyAction == "moveToNextEditor") {
+            var allQuestions = this.currentPage.questions;
+            var questionIndex = allQuestions.indexOf(question);
+            if (questionIndex > -1 && questionIndex < allQuestions.length - 1) {
+                allQuestions[questionIndex + 1].focus();
+            }
+            else {
+                event.target.blur();
+            }
+        }
+    };
     SurveyModel.prototype.getElementWrapperComponentName = function (element, reason) {
         if (reason === "logo-image") {
             return "sv-logo-image";
@@ -71942,7 +72463,7 @@ var SurveyModel = /** @class */ (function (_super) {
                     }
                 }
             }
-            else if (isStrCiEqual(layoutElement.id, "toc-navigation") && this.showTOC) {
+            else if (!this.isShowingPreview && isStrCiEqual(layoutElement.id, "toc-navigation") && this.showTOC) {
                 if (container === "left") {
                     if (["left", "both"].indexOf(this.tocLocation) !== -1) {
                         containerLayoutElements.push(layoutElement);
@@ -71996,6 +72517,9 @@ var SurveyModel = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], SurveyModel.prototype, "_isMobile", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
+    ], SurveyModel.prototype, "renderBackgroundImage", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], SurveyModel.prototype, "rootCss", void 0);
@@ -72241,6 +72765,8 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("survey", [
         choices: ["auto", "static", "responsive"],
     },
     "width",
+    { name: "backgroundImage", serializationProperty: "locBackgroundImage", visible: false },
+    { name: "backgroundOpacity:number", minValue: 0, maxValue: 1, default: 1, visible: false },
     { name: "showBrandInfo:boolean", default: false, visible: false }
 ]);
 
@@ -72654,13 +73180,14 @@ var SurveyTimerModel = /** @class */ (function (_super) {
 /*!**************************!*\
   !*** ./src/surveyToc.ts ***!
   \**************************/
-/*! exports provided: tryNavigateToPage, createTOCListModel */
+/*! exports provided: tryNavigateToPage, createTOCListModel, getTocRootCss */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "tryNavigateToPage", function() { return tryNavigateToPage; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "createTOCListModel", function() { return createTOCListModel; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getTocRootCss", function() { return getTocRootCss; });
 /* harmony import */ var _actions_action__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./actions/action */ "./src/actions/action.ts");
 /* harmony import */ var _list__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./list */ "./src/list.ts");
 
@@ -72704,6 +73231,9 @@ function createTOCListModel(survey) {
     });
     return listModel;
 }
+function getTocRootCss(survey) {
+    return "sv_progress-toc" + (" sv_progress-toc--" + (survey.tocLocation || "").toLowerCase());
+}
 
 
 /***/ }),