survey-core 1.10.6 → 1.11.1

package/survey.core.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.10.6
+ * surveyjs - Survey JavaScript library v1.11.1
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -726,6 +726,11 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
 
 
 
@@ -748,7 +753,9 @@ function createDropdownActionModelAdvanced(actionOptions, listOptions, popupOpti
         if (newAction.hasTitle) {
             newAction.title = item.title;
         }
-        originalSelectionChanged(item, params);
+        if (originalSelectionChanged) {
+            originalSelectionChanged(item, params);
+        }
     };
     var popupModel = createPopupModelWithListModel(listOptions, popupOptions);
     var newActionOptions = Object.assign({}, actionOptions, {
@@ -767,7 +774,9 @@ function createDropdownActionModelAdvanced(actionOptions, listOptions, popupOpti
 function createPopupModelWithListModel(listOptions, popupOptions) {
     var listModel = new _list__WEBPACK_IMPORTED_MODULE_3__["ListModel"](listOptions);
     listModel.onSelectionChanged = function (item) {
-        listOptions.onSelectionChanged(item);
+        if (listOptions.onSelectionChanged) {
+            listOptions.onSelectionChanged(item);
+        }
         popupModel.hide();
     };
     var _popupOptions = popupOptions || {};
@@ -789,6 +798,7 @@ var BaseAction = /** @class */ (function (_super) {
     function BaseAction() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.rendredIdValue = BaseAction.getNextRendredId();
+        _this.markerIconSize = 16;
         return _this;
     }
     BaseAction.getNextRendredId = function () { return BaseAction.renderedId++; };
@@ -932,6 +942,46 @@ var BaseAction = /** @class */ (function (_super) {
         }
         return args.isTrusted;
     };
+    BaseAction.prototype.showPopup = function () {
+        if (!!this.popupModel) {
+            this.popupModel.show();
+        }
+    };
+    BaseAction.prototype.hidePopup = function () {
+        if (!!this.popupModel) {
+            this.popupModel.hide();
+        }
+    };
+    BaseAction.prototype.clearPopupTimeouts = function () {
+        if (this.showPopupTimeout)
+            clearTimeout(this.showPopupTimeout);
+        if (this.hidePopupTimeout)
+            clearTimeout(this.hidePopupTimeout);
+    };
+    BaseAction.prototype.showPopupDelayed = function (delay) {
+        var _this = this;
+        this.clearPopupTimeouts();
+        this.showPopupTimeout = setTimeout(function () {
+            _this.clearPopupTimeouts();
+            _this.showPopup();
+        }, delay);
+    };
+    BaseAction.prototype.hidePopupDelayed = function (delay) {
+        var _this = this;
+        var _a;
+        if ((_a = this.popupModel) === null || _a === void 0 ? void 0 : _a.isVisible) {
+            this.clearPopupTimeouts();
+            this.hidePopupTimeout = setTimeout(function () {
+                _this.clearPopupTimeouts();
+                _this.hidePopup();
+                _this.isHovered = false;
+            }, delay);
+        }
+        else {
+            this.clearPopupTimeouts();
+            this.isHovered = false;
+        }
+    };
     BaseAction.renderedId = 1;
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
@@ -993,9 +1043,21 @@ var BaseAction = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: 24 })
     ], BaseAction.prototype, "iconSize", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
+    ], BaseAction.prototype, "markerIconName", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
+    ], BaseAction.prototype, "markerIconSize", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
     ], BaseAction.prototype, "css", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: false })
+    ], BaseAction.prototype, "isPressed", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: false })
+    ], BaseAction.prototype, "isHovered", void 0);
     return BaseAction;
 }(_base__WEBPACK_IMPORTED_MODULE_0__["Base"]));
 
@@ -1033,6 +1095,14 @@ var Action = /** @class */ (function (_super) {
     Action.prototype.createLocTitle = function () {
         return this.createLocalizableString("title", this, true);
     };
+    Action.prototype.setItems = function (items, onSelectionChanged) {
+        this.markerIconName = "icon-next_16x16";
+        this.component = "sv-list-item-group";
+        this.items = __spreadArray([], items);
+        var popupModel = createPopupModelWithListModel({ items: items, onSelectionChanged: onSelectionChanged, searchEnabled: false }, { horizontalPosition: "right", showPointer: false, canShrink: false });
+        popupModel.cssClass = "sv-popup-inner";
+        this.popupModel = popupModel;
+    };
     Action.prototype.getLocTitle = function () {
         return this.locTitleValue;
     };
@@ -1249,9 +1319,6 @@ var AdaptiveActionContainer = /** @class */ (function (_super) {
             tooltip: _surveyStrings__WEBPACK_IMPORTED_MODULE_3__["surveyLocalization"].getString("more"),
         }, {
             items: [],
-            onSelectionChanged: function (item) {
-                _this.hiddenItemSelected(item);
-            },
             allowSelection: false
         });
         return _this;
@@ -1317,11 +1384,6 @@ var AdaptiveActionContainer = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    AdaptiveActionContainer.prototype.hiddenItemSelected = function (item) {
-        if (!!item && typeof item.action === "function") {
-            item.action();
-        }
-    };
     AdaptiveActionContainer.prototype.onSet = function () {
         var _this = this;
         this.actions.forEach(function (action) { return action.updateCallback = function (isResetInitialized) { return _this.raiseUpdate(isResetInitialized); }; });
@@ -1578,6 +1640,21 @@ var ActionContainer = /** @class */ (function (_super) {
             this.sortItems();
         }
     };
+    ActionContainer.prototype.popupAfterShowCallback = function (itemValue) {
+    };
+    ActionContainer.prototype.mouseOverHandler = function (itemValue) {
+        var _this = this;
+        itemValue.isHovered = true;
+        this.actions.forEach(function (action) {
+            if (action === itemValue && !!itemValue.popupModel) {
+                itemValue.showPopupDelayed(_this.subItemsShowDelay);
+                _this.popupAfterShowCallback(itemValue);
+            }
+            else if (!!action.popupModel && action.popupModel.isVisible) {
+                action.hidePopupDelayed(_this.subItemsHideDelay);
+            }
+        });
+    };
     ActionContainer.prototype.initResponsivityManager = function (container, delayedUpdateFunction) {
         return;
     };
@@ -1613,6 +1690,12 @@ var ActionContainer = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: false })
     ], ActionContainer.prototype, "isEmpty", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: 300 })
+    ], ActionContainer.prototype, "subItemsShowDelay", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: 300 })
+    ], ActionContainer.prototype, "subItemsHideDelay", void 0);
     return ActionContainer;
 }(_base__WEBPACK_IMPORTED_MODULE_1__["Base"]));
 
@@ -1888,6 +1971,10 @@ var Base = /** @class */ (function () {
         this.onItemValuePropertyChanged = this.addEvent();
         this.isCreating = true;
         this.animationAllowedLock = 0;
+        //remove when knockout obsolete
+        this.supportOnElementRenderedEvent = true;
+        this.onElementRenderedEventEnabled = false;
+        this._onElementRerendered = new EventBase();
         this.bindingsValue = new Bindings(this);
         _jsonobject__WEBPACK_IMPORTED_MODULE_2__["CustomPropertiesCollection"].createProperties(this);
         this.onBaseCreating();
@@ -2816,7 +2903,7 @@ var Base = /** @class */ (function () {
         configurable: true
     });
     Base.prototype.getIsAnimationAllowed = function () {
-        return _settings__WEBPACK_IMPORTED_MODULE_3__["settings"].animationEnabled && this.animationAllowedLock >= 0 && !this.isLoadingFromJson && !this.isDisposed;
+        return _settings__WEBPACK_IMPORTED_MODULE_3__["settings"].animationEnabled && this.animationAllowedLock >= 0 && !this.isLoadingFromJson && !this.isDisposed && (!!this.onElementRerendered || !this.supportOnElementRenderedEvent);
     };
     Base.prototype.blockAnimations = function () {
         this.animationAllowedLock--;
@@ -2824,6 +2911,22 @@ var Base = /** @class */ (function () {
     Base.prototype.releaseAnimations = function () {
         this.animationAllowedLock++;
     };
+    Base.prototype.enableOnElementRenderedEvent = function () {
+        this.onElementRenderedEventEnabled = true;
+    };
+    Base.prototype.disableOnElementRenderedEvent = function () {
+        this.onElementRenderedEventEnabled = false;
+    };
+    Object.defineProperty(Base.prototype, "onElementRerendered", {
+        get: function () {
+            return this.supportOnElementRenderedEvent && this.onElementRenderedEventEnabled ? this._onElementRerendered : undefined;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Base.prototype.afterRerender = function () {
+        this.onElementRerendered.fire(this, undefined);
+    };
     Base.currentDependencis = undefined;
     return Base;
 }());
@@ -2867,8 +2970,9 @@ var Event = /** @class */ (function () {
     Event.prototype.fire = function (sender, options) {
         if (!this.callbacks)
             return;
-        for (var i = 0; i < this.callbacks.length; i++) {
-            this.callbacks[i](sender, options);
+        var callbacks = [].concat(this.callbacks);
+        for (var i = 0; i < callbacks.length; i++) {
+            callbacks[i](sender, options);
             if (!this.callbacks)
                 return;
         }
@@ -5606,6 +5710,7 @@ var defaultV2Css = {
     rowMultiple: "sd-row--multiple",
     rowCompact: "sd-row--compact",
     rowFadeIn: "sd-row--fade-in",
+    rowDelayedFadeIn: "sd-row--delayed-fade-in",
     rowFadeOut: "sd-row--fade-out",
     pageRow: "sd-page__row",
     question: {
@@ -5665,6 +5770,7 @@ var defaultV2Css = {
         disabled: "sd-question--disabled",
         readOnly: "sd-question--readonly",
         preview: "sd-question--preview",
+        noPointerEventsMode: "sd-question--no-pointer-events",
         errorsContainer: "sd-element__erbox sd-question__erbox",
         errorsContainerTop: "sd-element__erbox--above-element sd-question__erbox--above-question",
         errorsContainerBottom: "sd-question__erbox--below-question"
@@ -6119,13 +6225,13 @@ var defaultV2Css = {
         removeButtonIconId: "icon-clear",
         removeFile: "sd-hidden",
         removeFileSvg: "",
-        removeFileSvgIconId: "icon-delete",
+        removeFileSvgIconId: "icon-close_16x16",
         wrapper: "sd-file__wrapper",
         defaultImage: "sd-file__default-image",
         defaultImageIconId: "icon-defaultfile",
         leftIconId: "icon-arrowleft",
         rightIconId: "icon-arrowright",
-        removeFileButton: "sd-context-btn--negative sd-file__remove-file-button",
+        removeFileButton: "sd-context-btn--small sd-context-btn--with-border sd-context-btn--colorful sd-context-btn--negative sd-file__remove-file-button",
         dragAreaPlaceholder: "sd-file__drag-area-placeholder",
         imageWrapper: "sd-file__image-wrapper",
         imageWrapperDefaultImage: "sd-file__image-wrapper--default-image",
@@ -7686,10 +7792,11 @@ var DragDropMatrixRows = /** @class */ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DragDropRankingChoices", function() { return DragDropRankingChoices; });
-/* harmony import */ var _choices__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./choices */ "./src/dragdrop/choices.ts");
-/* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
-/* harmony import */ var _utils_devices__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils/devices */ "./src/utils/devices.ts");
-/* harmony import */ var _global_variables_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../global_variables_utils */ "./src/global_variables_utils.ts");
+/* harmony import */ var _itemvalue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../itemvalue */ "./src/itemvalue.ts");
+/* harmony import */ var _choices__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./choices */ "./src/dragdrop/choices.ts");
+/* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
+/* harmony import */ var _utils_devices__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils/devices */ "./src/utils/devices.ts");
+/* harmony import */ var _global_variables_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../global_variables_utils */ "./src/global_variables_utils.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -7709,6 +7816,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var DragDropRankingChoices = /** @class */ (function (_super) {
     __extends(DragDropRankingChoices, _super);
     function DragDropRankingChoices() {
@@ -7718,6 +7826,16 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
             var node = _this.domAdapter.draggedElementShortcut.querySelector(".sv-ranking-item");
             node.style.cursor = "grabbing";
         };
+        _this.reorderRankedItem = function (questionModel, fromIndex, toIndex) {
+            if (fromIndex == toIndex)
+                return;
+            var rankingChoices = questionModel.rankingChoices;
+            var item = rankingChoices[fromIndex];
+            questionModel.isValueSetByUser = true;
+            rankingChoices.splice(fromIndex, 1);
+            rankingChoices.splice(toIndex, 0, item);
+            _this.updateDraggedElementShortcut(toIndex + 1);
+        };
         _this.doBanDropHere = function () {
             if (_this.isDragOverRootNode) {
                 _this.allowDropHere = true;
@@ -7736,7 +7854,7 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
         configurable: true
     });
     DragDropRankingChoices.prototype.createDraggedElementShortcut = function (text, draggedElementNode, event) {
-        var draggedElementShortcut = _global_variables_utils__WEBPACK_IMPORTED_MODULE_3__["DomDocumentHelper"].createElement("div");
+        var draggedElementShortcut = _global_variables_utils__WEBPACK_IMPORTED_MODULE_4__["DomDocumentHelper"].createElement("div");
         if (!draggedElementShortcut)
             return;
         draggedElementShortcut.className = this.shortcutClass + " sv-ranking-shortcut";
@@ -7754,9 +7872,9 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
     };
     Object.defineProperty(DragDropRankingChoices.prototype, "shortcutClass", {
         get: function () {
-            return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_1__["CssClassBuilder"]()
+            return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_2__["CssClassBuilder"]()
                 .append(this.parentElement.cssClasses.root)
-                .append(this.parentElement.cssClasses.rootMobileMod, _utils_devices__WEBPACK_IMPORTED_MODULE_2__["IsMobile"])
+                .append(this.parentElement.cssClasses.rootMobileMod, _utils_devices__WEBPACK_IMPORTED_MODULE_3__["IsMobile"])
                 .toString();
         },
         enumerable: false,
@@ -7776,52 +7894,49 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
     };
     DragDropRankingChoices.prototype.isDropTargetValid = function (dropTarget, dropTargetNode) {
         var choices = this.parentElement.rankingChoices;
-        var dropTargetIndex = choices.indexOf(this.dropTarget);
-        var draggedElementIndex = choices.indexOf(this.draggedElement);
-        if (draggedElementIndex > dropTargetIndex && dropTargetNode.classList.contains("sv-dragdrop-moveup")) {
-            this.parentElement.dropTargetNodeMove = null;
-            return false;
-        }
-        if (draggedElementIndex < dropTargetIndex && dropTargetNode.classList.contains("sv-dragdrop-movedown")) {
-            this.parentElement.dropTargetNodeMove = null;
-            return false;
-        }
         if (choices.indexOf(dropTarget) === -1)
             // shouldn't allow to drop on "adorners" (selectall, none, other)
             return false;
         return true;
     };
-    DragDropRankingChoices.prototype.calculateIsBottom = function (clientY) {
-        var choices = this.parentElement.rankingChoices;
-        return (choices.indexOf(this.dropTarget) - choices.indexOf(this.draggedElement) >
-            0);
+    DragDropRankingChoices.prototype.calculateIsBottom = function (clientY, dropTargetNode) {
+        if (this.dropTarget instanceof _itemvalue__WEBPACK_IMPORTED_MODULE_0__["ItemValue"] && this.draggedElement !== this.dropTarget) {
+            var rect = dropTargetNode.getBoundingClientRect();
+            return clientY >= rect.y + rect.height / 2;
+        }
+        return _super.prototype.calculateIsBottom.call(this, clientY);
     };
-    DragDropRankingChoices.prototype.afterDragOver = function (dropTargetNode) {
-        var choices = this.parentElement.rankingChoices;
-        var dropTargetIndex = choices.indexOf(this.dropTarget);
-        var draggedElementIndex = choices.indexOf(this.draggedElement);
-        choices.splice(draggedElementIndex, 1);
-        choices.splice(dropTargetIndex, 0, this.draggedElement);
-        this.parentElement.setPropertyValue("rankingChoices", choices);
-        //return;
-        this.updateDraggedElementShortcut(dropTargetIndex + 1);
-        if (draggedElementIndex !== dropTargetIndex) {
-            dropTargetNode.classList.remove("sv-dragdrop-moveup");
-            dropTargetNode.classList.remove("sv-dragdrop-movedown");
-            this.parentElement.dropTargetNodeMove = null;
+    DragDropRankingChoices.prototype.getIndixies = function (model, fromChoicesArray, toChoicesArray) {
+        var fromIndex = fromChoicesArray.indexOf(this.draggedElement);
+        var toIndex = toChoicesArray.indexOf(this.dropTarget);
+        if (toIndex === -1) {
+            var length_1 = model.value.length;
+            toIndex = length_1;
         }
-        if (draggedElementIndex > dropTargetIndex) {
-            this.parentElement.dropTargetNodeMove = "down";
+        else if (fromChoicesArray == toChoicesArray) {
+            if (!this.isBottom && fromIndex < toIndex)
+                toIndex--;
+            if (this.isBottom && fromIndex > toIndex)
+                toIndex++;
         }
-        if (draggedElementIndex < dropTargetIndex) {
-            this.parentElement.dropTargetNodeMove = "up";
+        else if (fromChoicesArray != toChoicesArray) {
+            if (this.isBottom)
+                toIndex++;
         }
+        return { fromIndex: fromIndex, toIndex: toIndex };
+    };
+    DragDropRankingChoices.prototype.afterDragOver = function (dropTargetNode) {
+        var _a = this.getIndixies(this.parentElement, this.parentElement.rankingChoices, this.parentElement.rankingChoices), fromIndex = _a.fromIndex, toIndex = _a.toIndex;
+        this.reorderRankedItem(this.parentElement, fromIndex, toIndex);
     };
     DragDropRankingChoices.prototype.updateDraggedElementShortcut = function (newIndex) {
-        var newIndexText = newIndex !== null ? newIndex + "" : "";
-        // TODO should avoid direct DOM manipulation, do through the frameworks instead
-        var indexNode = this.domAdapter.draggedElementShortcut.querySelector(".sv-ranking-item__index");
-        indexNode.innerText = newIndexText;
+        var _a;
+        if ((_a = this.domAdapter) === null || _a === void 0 ? void 0 : _a.draggedElementShortcut) {
+            var newIndexText = newIndex !== null ? newIndex + "" : "";
+            // TODO should avoid direct DOM manipulation, do through the frameworks instead
+            var indexNode = this.domAdapter.draggedElementShortcut.querySelector(".sv-ranking-item__index");
+            indexNode.innerText = newIndexText;
+        }
     };
     DragDropRankingChoices.prototype.ghostPositionChanged = function () {
         this.parentElement.currentDropTarget = this.draggedElement;
@@ -7839,7 +7954,7 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
         _super.prototype.clear.call(this);
     };
     return DragDropRankingChoices;
-}(_choices__WEBPACK_IMPORTED_MODULE_0__["DragDropChoices"]));
+}(_choices__WEBPACK_IMPORTED_MODULE_1__["DragDropChoices"]));
 
 
 
@@ -7855,8 +7970,7 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DragDropRankingSelectToRank", function() { return DragDropRankingSelectToRank; });
-/* harmony import */ var _itemvalue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../itemvalue */ "./src/itemvalue.ts");
-/* harmony import */ var _ranking_choices__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ranking-choices */ "./src/dragdrop/ranking-choices.ts");
+/* harmony import */ var _ranking_choices__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ranking-choices */ "./src/dragdrop/ranking-choices.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -7873,7 +7987,6 @@ var __extends = (undefined && undefined.__extends) || (function () {
     };
 })();
 
-
 var DragDropRankingSelectToRank = /** @class */ (function (_super) {
     __extends(DragDropRankingSelectToRank, _super);
     function DragDropRankingSelectToRank() {
@@ -7890,19 +8003,6 @@ var DragDropRankingSelectToRank = /** @class */ (function (_super) {
             rankingChoices.splice(fromIndex, 1);
             _this.updateChoices(questionModel, rankingChoices);
         };
-        _this.reorderRankedItem = function (questionModel, fromIndex, toIndex, dropTargetNode) {
-            var rankingChoices = questionModel.rankingChoices;
-            var item = rankingChoices[fromIndex];
-            if (fromIndex == toIndex)
-                return;
-            questionModel.isValueSetByUser = true;
-            rankingChoices.splice(fromIndex, 1);
-            rankingChoices.splice(toIndex, 0, item);
-            questionModel.setPropertyValue("rankingChoices", rankingChoices);
-            if (dropTargetNode) {
-                _this.doUIEffects(dropTargetNode, fromIndex, toIndex);
-            }
-        };
         return _this;
     }
     DragDropRankingSelectToRank.prototype.findDropTargetNodeByDragOverNode = function (dragOverNode) {
@@ -7959,50 +8059,6 @@ var DragDropRankingSelectToRank = /** @class */ (function (_super) {
         var _a = this.getIndixies(questionModel, fromChoicesArray, toChoicesArray), fromIndex = _a.fromIndex, toIndex = _a.toIndex;
         rankFunction(questionModel, fromIndex, toIndex, dropTargetNode);
     };
-    DragDropRankingSelectToRank.prototype.getIndixies = function (model, fromChoicesArray, toChoicesArray) {
-        var fromIndex = fromChoicesArray.indexOf(this.draggedElement);
-        var toIndex = toChoicesArray.indexOf(this.dropTarget);
-        if (toIndex === -1) {
-            var length_1 = model.value.length;
-            toIndex = length_1;
-        }
-        else if (fromChoicesArray == toChoicesArray) {
-            if (!this.isBottom && fromIndex < toIndex)
-                toIndex--;
-            if (this.isBottom && fromIndex > toIndex)
-                toIndex++;
-        }
-        else if (fromChoicesArray != toChoicesArray) {
-            if (this.isBottom)
-                toIndex++;
-        }
-        return { fromIndex: fromIndex, toIndex: toIndex };
-    };
-    DragDropRankingSelectToRank.prototype.calculateIsBottom = function (clientY, dropTargetNode) {
-        if (this.dropTarget instanceof _itemvalue__WEBPACK_IMPORTED_MODULE_0__["ItemValue"] && this.draggedElement !== this.dropTarget) {
-            var rect = dropTargetNode.getBoundingClientRect();
-            return clientY >= rect.y + rect.height / 2;
-        }
-        return _super.prototype.calculateIsBottom.call(this, clientY);
-    };
-    DragDropRankingSelectToRank.prototype.doUIEffects = function (dropTargetNode, fromIndex, toIndex) {
-        var questionModel = this.parentElement;
-        var isDropToEmptyRankedContainer = this.dropTarget === "to-container" && questionModel.isEmpty();
-        var isNeedToShowIndexAtShortcut = !this.isDropTargetUnranked || isDropToEmptyRankedContainer;
-        var shortcutIndex = isNeedToShowIndexAtShortcut ? toIndex + 1 : null;
-        this.updateDraggedElementShortcut(shortcutIndex);
-        if (fromIndex !== toIndex) {
-            dropTargetNode.classList.remove("sv-dragdrop-moveup");
-            dropTargetNode.classList.remove("sv-dragdrop-movedown");
-            questionModel.dropTargetNodeMove = null;
-        }
-        if (fromIndex > toIndex) {
-            questionModel.dropTargetNodeMove = "down";
-        }
-        if (fromIndex < toIndex) {
-            questionModel.dropTargetNodeMove = "up";
-        }
-    };
     Object.defineProperty(DragDropRankingSelectToRank.prototype, "isDraggedElementRanked", {
         get: function () {
             return this.parentElement.rankingChoices.indexOf(this.draggedElement) !== -1;
@@ -8026,28 +8082,13 @@ var DragDropRankingSelectToRank = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DragDropRankingSelectToRank.prototype, "isDropTargetUnranked", {
-        get: function () {
-            return !this.isDropTargetRanked;
-        },
-        enumerable: false,
-        configurable: true
-    });
     DragDropRankingSelectToRank.prototype.updateChoices = function (questionModel, rankingChoices) {
         questionModel.isValueSetByUser = true;
         questionModel.rankingChoices = rankingChoices;
         questionModel.updateUnRankingChoices(rankingChoices);
     };
-    DragDropRankingSelectToRank.prototype.clear = function () {
-        var questionModel = this.parentElement;
-        if (!!questionModel) {
-            questionModel.rankingChoicesAnimation.cancel();
-            questionModel.unRankingChoicesAnimation.cancel();
-        }
-        _super.prototype.clear.call(this);
-    };
     return DragDropRankingSelectToRank;
-}(_ranking_choices__WEBPACK_IMPORTED_MODULE_1__["DragDropRankingChoices"]));
+}(_ranking_choices__WEBPACK_IMPORTED_MODULE_0__["DragDropRankingChoices"]));
 
 
 
@@ -9744,8 +9785,8 @@ __webpack_require__.r(__webpack_exports__);
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.10.6";
-ReleaseDate = "" + "2024-05-28";
+Version = "" + "1.11.1";
+ReleaseDate = "" + "2024-06-06";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -14855,7 +14896,7 @@ var FunctionOperand = /** @class */ (function (_super) {
         return this.evaluateCore(processValue);
     };
     FunctionOperand.prototype.evaluateCore = function (processValue) {
-        return _functionsfactory__WEBPACK_IMPORTED_MODULE_1__["FunctionFactory"].Instance.run(this.originalValue, this.parameters.evaluate(processValue), processValue.properties);
+        return _functionsfactory__WEBPACK_IMPORTED_MODULE_1__["FunctionFactory"].Instance.run(this.originalValue, this.parameters.evaluate(processValue), processValue.properties, this.parameters.values);
     };
     FunctionOperand.prototype.toString = function (func) {
         if (func === void 0) { func = undefined; }
@@ -15387,7 +15428,7 @@ var FunctionFactory = /** @class */ (function () {
         }
         return result.sort();
     };
-    FunctionFactory.prototype.run = function (name, params, properties) {
+    FunctionFactory.prototype.run = function (name, params, properties, originalParams) {
         if (properties === void 0) { properties = null; }
         var func = this.functionHash[name];
         if (!func) {
@@ -15402,7 +15443,7 @@ var FunctionFactory = /** @class */ (function () {
                 classRunner[key] = properties[key];
             }
         }
-        return classRunner.func(params);
+        return classRunner.func(params, originalParams);
     };
     FunctionFactory.Instance = new FunctionFactory();
     return FunctionFactory;
@@ -15474,7 +15515,7 @@ function avg(params) {
     return arr.length > 0 ? res / arr.length : 0;
 }
 FunctionFactory.Instance.register("avg", avg);
-function getInArrayParams(params) {
+function getInArrayParams(params, originalParams) {
     if (params.length < 2 || params.length > 3)
         return null;
     var arr = params[0];
@@ -15485,10 +15526,16 @@ function getInArrayParams(params) {
     var name = params[1];
     if (typeof name !== "string" && !(name instanceof String))
         return null;
-    var expression = params.length === 3 ? params[2] : undefined;
+    var expression = params.length > 2 ? params[2] : undefined;
     if (typeof expression !== "string" && !(expression instanceof String)) {
         expression = undefined;
     }
+    if (!expression) {
+        var operand = Array.isArray(originalParams) && originalParams.length > 2 ? originalParams[2] : undefined;
+        if (operand && !!operand.toString()) {
+            expression = operand.toString();
+        }
+    }
     return { data: arr, name: name, expression: expression };
 }
 function convertToNumber(val) {
@@ -15504,9 +15551,9 @@ function processItemInArray(item, name, res, func, needToConvert, condition) {
     var val = needToConvert ? convertToNumber(item[name]) : 1;
     return func(res, val);
 }
-function calcInArray(params, func, needToConvert) {
+function calcInArray(params, originalParams, func, needToConvert) {
     if (needToConvert === void 0) { needToConvert = true; }
-    var v = getInArrayParams(params);
+    var v = getInArrayParams(params, originalParams);
     if (!v)
         return undefined;
     var condition = !!v.expression ? new _conditions__WEBPACK_IMPORTED_MODULE_3__["ConditionRunner"](v.expression) : undefined;
@@ -15526,8 +15573,8 @@ function calcInArray(params, func, needToConvert) {
     }
     return res;
 }
-function sumInArray(params) {
-    var res = calcInArray(params, function (res, val) {
+function sumInArray(params, originalParams) {
+    var res = calcInArray(params, originalParams, function (res, val) {
         if (res == undefined)
             res = 0;
         if (val == undefined || val == null)
@@ -15537,8 +15584,8 @@ function sumInArray(params) {
     return res !== undefined ? res : 0;
 }
 FunctionFactory.Instance.register("sumInArray", sumInArray);
-function minInArray(params) {
-    return calcInArray(params, function (res, val) {
+function minInArray(params, originalParams) {
+    return calcInArray(params, originalParams, function (res, val) {
         if (res == undefined)
             return val;
         if (val == undefined || val == null)
@@ -15547,8 +15594,8 @@ function minInArray(params) {
     });
 }
 FunctionFactory.Instance.register("minInArray", minInArray);
-function maxInArray(params) {
-    return calcInArray(params, function (res, val) {
+function maxInArray(params, originalParams) {
+    return calcInArray(params, originalParams, function (res, val) {
         if (res == undefined)
             return val;
         if (val == undefined || val == null)
@@ -15557,8 +15604,8 @@ function maxInArray(params) {
     });
 }
 FunctionFactory.Instance.register("maxInArray", maxInArray);
-function countInArray(params) {
-    var res = calcInArray(params, function (res, val) {
+function countInArray(params, originalParams) {
+    var res = calcInArray(params, originalParams, function (res, val) {
         if (res == undefined)
             res = 0;
         if (val == undefined || val == null)
@@ -15568,11 +15615,11 @@ function countInArray(params) {
     return res !== undefined ? res : 0;
 }
 FunctionFactory.Instance.register("countInArray", countInArray);
-function avgInArray(params) {
-    var count = countInArray(params);
+function avgInArray(params, originalParams) {
+    var count = countInArray(params, originalParams);
     if (count == 0)
         return 0;
-    return sumInArray(params) / count;
+    return sumInArray(params, originalParams) / count;
 }
 FunctionFactory.Instance.register("avgInArray", avgInArray);
 function iif(params) {
@@ -15589,23 +15636,31 @@ function getDate(params) {
     return new Date(params[0]);
 }
 FunctionFactory.Instance.register("getDate", getDate);
+function dateDiffMonths(date1Param, date2Param, type) {
+    if (type === "days")
+        return diffDays([date1Param, date2Param]);
+    var date1 = !!date1Param ? new Date(date1Param) : new Date();
+    var date2 = !!date2Param ? new Date(date2Param) : new Date();
+    var age = date2.getFullYear() - date1.getFullYear();
+    type = type || "years";
+    var ageInMonths = age * 12 + date2.getMonth() - date1.getMonth();
+    if (date2.getDate() < date1.getDate()) {
+        ageInMonths -= 1;
+    }
+    return type === "months" ? ageInMonths : ~~(ageInMonths / 12);
+}
 function age(params) {
-    if (!params && params.length < 1)
-        return null;
-    if (!params[0])
+    if (!Array.isArray(params) || params.length < 1 || !params[0])
         return null;
-    var birthDate = new Date(params[0]);
-    var today = new Date();
-    var age = today.getFullYear() - birthDate.getFullYear();
-    if (age > 0) {
-        var m = today.getMonth() - birthDate.getMonth();
-        if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
-            age -= 1;
-        }
-    }
-    return age;
+    return dateDiffMonths(params[0], undefined, (params.length > 1 ? params[1] : "") || "years");
 }
 FunctionFactory.Instance.register("age", age);
+function dateDiff(params) {
+    if (!Array.isArray(params) || params.length < 2 || !params[0] || !params[1])
+        return null;
+    return dateDiffMonths(params[0], params[1], (params.length > 2 ? params[2] : "") || "days");
+}
+FunctionFactory.Instance.register("dateDiff", dateDiff);
 function isContainerReadyCore(container) {
     if (!container)
         return false;
@@ -16820,6 +16875,7 @@ var map = {
 	"./full-screen_16x16.svg": "./src/images/full-screen_16x16.svg",
 	"./loading.svg": "./src/images/loading.svg",
 	"./minimize_16x16.svg": "./src/images/minimize_16x16.svg",
+	"./next_16x16.svg": "./src/images/next_16x16.svg",
 	"./no-image.svg": "./src/images/no-image.svg",
 	"./ranking-arrows.svg": "./src/images/ranking-arrows.svg",
 	"./ranking-dash.svg": "./src/images/ranking-dash.svg",
@@ -17304,6 +17360,17 @@ module.exports = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\
 
 /***/ }),
 
+/***/ "./src/images/next_16x16.svg":
+/*!***********************************!*\
+  !*** ./src/images/next_16x16.svg ***!
+  \***********************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+module.exports = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.64648 12.6465L6.34648 13.3465L11.7465 8.04648L6.34648 2.64648L5.64648 3.34648L10.2465 8.04648L5.64648 12.6465Z\"></path></svg>"
+
+/***/ }),
+
 /***/ "./src/images/no-image.svg":
 /*!*********************************!*\
   !*** ./src/images/no-image.svg ***!
@@ -20212,8 +20279,10 @@ var defaultListCss = {
     itemWithIcon: "sv-list__item--with-icon",
     itemDisabled: "sv-list__item--disabled",
     itemFocused: "sv-list__item--focused",
+    itemHovered: "sv-list__item--hovered",
     itemTextWrap: "sv-list__item-text--wrap",
     itemIcon: "sv-list__item-icon",
+    itemMarkerIcon: "sv-list-item__marker-icon",
     itemSeparator: "sv-list__item-separator",
     itemBody: "sv-list__item-body",
     itemsContainer: "sv-list",
@@ -20239,10 +20308,17 @@ var ListModel = /** @class */ (function (_super) {
             if (_this.allowSelection) {
                 _this.selectedItem = itemValue;
             }
+            var action = itemValue.action;
+            if (!!action) {
+                action(itemValue);
+            }
             if (!!_this.onSelectionChanged) {
                 _this.onSelectionChanged(itemValue);
             }
         };
+        _this.onItemHover = function (itemValue) {
+            _this.mouseOverHandler(itemValue);
+        };
         _this.isItemDisabled = function (itemValue) {
             return itemValue.enabled !== undefined && !itemValue.enabled;
         };
@@ -20265,6 +20341,7 @@ var ListModel = /** @class */ (function (_super) {
                 .append(_this.cssClasses.itemDisabled, _this.isItemDisabled(itemValue))
                 .append(_this.cssClasses.itemFocused, _this.isItemFocused(itemValue))
                 .append(_this.cssClasses.itemSelected, _this.isItemSelected(itemValue))
+                .append(_this.cssClasses.itemHovered, itemValue.isHovered)
                 .append(_this.cssClasses.itemTextWrap, _this.textWrapEnabled)
                 .append(itemValue.css)
                 .toString();
@@ -20310,6 +20387,26 @@ var ListModel = /** @class */ (function (_super) {
     ListModel.prototype.isItemVisible = function (item) {
         return item.visible && (!this.shouldProcessFilter || this.hasText(item, this.filterString));
     };
+    ListModel.prototype.getRenderedActions = function () {
+        var actions = _super.prototype.getRenderedActions.call(this);
+        if (this.filterString) {
+            var newActions_1 = [];
+            actions.forEach(function (action) {
+                newActions_1.push(action);
+                if (action.items) {
+                    action.items.forEach(function (item) {
+                        var a = new _actions_action__WEBPACK_IMPORTED_MODULE_2__["Action"](item);
+                        if (!a.iconName) {
+                            a.iconName = action.iconName;
+                        }
+                        newActions_1.push(a);
+                    });
+                }
+            });
+            return newActions_1;
+        }
+        return actions;
+    };
     Object.defineProperty(ListModel.prototype, "visibleItems", {
         get: function () {
             var _this = this;
@@ -20370,6 +20467,14 @@ var ListModel = /** @class */ (function (_super) {
     ListModel.prototype.getDefaultCssClasses = function () {
         return defaultListCss;
     };
+    ListModel.prototype.popupAfterShowCallback = function (itemValue) {
+        this.addScrollEventListener(function () {
+            itemValue.hidePopup();
+        });
+    };
+    ListModel.prototype.onItemLeave = function (itemValue) {
+        itemValue.hidePopupDelayed(this.subItemsHideDelay);
+    };
     ListModel.prototype.areSameItems = function (item1, item2) {
         if (!!this.areSameItemsCallback)
             return this.areSameItemsCallback(item1, item2);
@@ -23768,7 +23873,7 @@ var PageModel = /** @class */ (function (_super) {
         configurable: true
     });
     PageModel.prototype.calcCssClasses = function (css) {
-        var classes = { page: {}, error: {}, pageTitle: "", pageDescription: "", row: "", rowMultiple: "", pageRow: "", rowCompact: "", rowFadeIn: "", rowFadeOut: "", rowFadeOutActive: "" };
+        var classes = { page: {}, error: {}, pageTitle: "", pageDescription: "", row: "", rowMultiple: "", pageRow: "", rowCompact: "", rowFadeIn: "", rowFadeOut: "", rowDelayedFadeIn: "" };
         this.copyCssClasses(classes.page, css.page);
         this.copyCssClasses(classes.error, css.error);
         if (!!css.pageTitle) {
@@ -23792,12 +23897,12 @@ var PageModel = /** @class */ (function (_super) {
         if (!!css.rowFadeIn) {
             classes.rowFadeIn = css.rowFadeIn;
         }
+        if (!!css.rowDelayedFadeIn) {
+            classes.rowDelayedFadeIn = css.rowDelayedFadeIn;
+        }
         if (!!css.rowFadeOut) {
             classes.rowFadeOut = css.rowFadeOut;
         }
-        if (!!css.rowFadeOutActive) {
-            classes.rowFadeOutActive = css.rowFadeOutActive;
-        }
         if (this.survey) {
             this.survey.updatePageCssClasses(this, classes);
         }
@@ -24074,8 +24179,8 @@ var QuestionRowModel = /** @class */ (function (_super) {
         _this._scrollableParent = undefined;
         _this._updateVisibility = undefined;
         _this.visibleElementsAnimation = new _utils_animation__WEBPACK_IMPORTED_MODULE_11__["AnimationGroup"](_this.getVisibleElementsAnimationOptions(), function (value) {
+            _this.setWidth(value);
             _this.setPropertyValue("visibleElements", value);
-            _this.setWidth();
         }, function () { return _this.visibleElements; });
         _this.idValue = QuestionRowModel.getRowId();
         _this.visible = panel.areInvisibleElementsShowing;
@@ -24164,7 +24269,9 @@ var QuestionRowModel = /** @class */ (function (_super) {
             el.style.setProperty("--animation-width", Object(_utils_utils__WEBPACK_IMPORTED_MODULE_8__["getElementWidth"])(el) + "px");
         };
         return {
+            getRerenderEvent: function () { return _this.onElementRerendered; },
             isAnimationEnabled: function () { return _this.animationAllowed; },
+            allowSyncRemovalAddition: false,
             getAnimatedElement: function (element) { return element.getWrapperElement(); },
             getLeaveOptions: function (element) {
                 var surveyElement = element;
@@ -24244,12 +24351,12 @@ var QuestionRowModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    QuestionRowModel.prototype.setWidth = function () {
+    QuestionRowModel.prototype.setWidth = function (visibleElement) {
         var _a;
-        var visCount = this.visibleElements.length;
+        var visCount = visibleElement.length;
         if (visCount == 0)
             return;
-        var isSingleInRow = this.visibleElements.length === 1;
+        var isSingleInRow = visibleElement.length === 1;
         var counter = 0;
         var preSetWidthElements = [];
         for (var i = 0; i < this.elements.length; i++) {
@@ -24380,6 +24487,7 @@ var PanelModelBase = /** @class */ (function (_super) {
             el.style.setProperty("--animation-height", el.offsetHeight + "px");
         };
         return {
+            getRerenderEvent: function () { return _this.onElementRerendered; },
             isAnimationEnabled: function () { return _this.animationAllowed; },
             getAnimatedElement: function (row) { return row.getRootElement(); },
             getLeaveOptions: function (_) {
@@ -24387,9 +24495,10 @@ var PanelModelBase = /** @class */ (function (_super) {
                     onBeforeRunAnimation: beforeRunAnimation
                 };
             },
-            getEnterOptions: function (_) {
+            getEnterOptions: function (_, animationInfo) {
+                var cssClasses = _this.cssClasses;
                 return {
-                    cssClass: _this.cssClasses.rowFadeIn,
+                    cssClass: new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]().append(cssClasses.rowFadeIn).append(cssClasses.rowDelayedFadeIn, animationInfo.isDeletingRunning).toString(),
                     onBeforeRunAnimation: beforeRunAnimation
                 };
             }
@@ -24653,7 +24762,7 @@ var PanelModelBase = /** @class */ (function (_super) {
         configurable: true
     });
     PanelModelBase.prototype.calcCssClasses = function (css) {
-        var classes = { panel: {}, error: {}, row: "", rowFadeIn: "", rowFadeOut: "", rowFadeOutActive: "", rowMultiple: "", pageRow: "", rowCompact: "" };
+        var classes = { panel: {}, error: {}, row: "", rowFadeIn: "", rowFadeOut: "", rowDelayedFadeIn: "", rowMultiple: "", pageRow: "", rowCompact: "" };
         this.copyCssClasses(classes.panel, css.panel);
         this.copyCssClasses(classes.error, css.error);
         if (!!css.pageRow) {
@@ -24671,8 +24780,8 @@ var PanelModelBase = /** @class */ (function (_super) {
         if (!!css.rowFadeOut) {
             classes.rowFadeOut = css.rowFadeOut;
         }
-        if (!!css.rowFadeOutActive) {
-            classes.rowFadeOutActive = css.rowFadeOutActive;
+        if (!!css.rowDelayedFadeIn) {
+            classes.rowDelayedFadeIn = css.rowDelayedFadeIn;
         }
         if (!!css.rowMultiple) {
             classes.rowMultiple = css.rowMultiple;
@@ -24992,16 +25101,13 @@ var PanelModelBase = /** @class */ (function (_super) {
             ? rec
             : {
                 fireCallback: fireCallback,
-                focuseOnFirstError: focusOnFirstError,
+                focusOnFirstError: focusOnFirstError,
                 firstErrorQuestion: null,
                 result: false,
             };
         if (rec.result !== true)
             rec.result = false;
         this.hasErrorsCore(rec);
-        if (rec.focuseOnFirstError && rec.firstErrorQuestion) {
-            rec.firstErrorQuestion.focus(true);
-        }
         return !rec.result;
     };
     PanelModelBase.prototype.validateContainerOnly = function () {
@@ -25046,13 +25152,14 @@ var PanelModelBase = /** @class */ (function (_super) {
         }
         rec.result = true;
         errors.push(new _error__WEBPACK_IMPORTED_MODULE_6__["OneAnswerRequiredError"](this.requiredErrorText, this));
-        if (rec.focuseOnFirstError && !rec.firstErrorQuestion) {
+        if (rec.focusOnFirstError && !rec.firstErrorQuestion) {
             rec.firstErrorQuestion = visQuestions[0];
         }
     };
     PanelModelBase.prototype.hasErrorsCore = function (rec) {
         var elements = this.elements;
         var element = null;
+        var firstErroredEl = null;
         for (var i = 0; i < elements.length; i++) {
             element = elements[i];
             if (!element.isVisible)
@@ -25063,6 +25170,9 @@ var PanelModelBase = /** @class */ (function (_super) {
             else {
                 var question = element;
                 if (!question.validate(rec.fireCallback, rec)) {
+                    if (!firstErroredEl) {
+                        firstErroredEl = question;
+                    }
                     if (!rec.firstErrorQuestion) {
                         rec.firstErrorQuestion = question;
                     }
@@ -25072,6 +25182,20 @@ var PanelModelBase = /** @class */ (function (_super) {
         }
         this.hasErrorsInPanels(rec);
         this.updateContainsErrors();
+        if (!firstErroredEl && this.errors.length > 0) {
+            firstErroredEl = this.getFirstQuestionToFocus(false, true);
+            if (!rec.firstErrorQuestion) {
+                rec.firstErrorQuestion = firstErroredEl;
+            }
+        }
+        if (rec.fireCallback && firstErroredEl) {
+            if (firstErroredEl === rec.firstErrorQuestion && rec.focusOnFirstError) {
+                firstErroredEl.focus(true);
+            }
+            else {
+                firstErroredEl.expandAllParents();
+            }
+        }
     };
     PanelModelBase.prototype.getContainsErrors = function () {
         var res = _super.prototype.getContainsErrors.call(this);
@@ -25584,21 +25708,10 @@ var PanelModelBase = /** @class */ (function (_super) {
         }
     };
     PanelModelBase.prototype.notifyStateChanged = function (prevState) {
-        var _this = this;
         _super.prototype.notifyStateChanged.call(this, prevState);
         if (this.isCollapsed) {
             this.questions.forEach(function (q) { return q.onHidingContent(); });
         }
-        if (this.survey != null && !this.isLoadingFromJson && this.isExpanded && prevState === "collapsed") {
-            var q_1 = this.getFirstQuestionToFocus(false);
-            if (!!q_1) {
-                setTimeout(function () {
-                    if (!_this.isDisposed && !!_this.survey) {
-                        _this.survey.scrollElementToTop(q_1, q_1, null, q_1.inputId, false);
-                    }
-                }, 15);
-            }
-        }
     };
     Object.defineProperty(PanelModelBase.prototype, "isVisible", {
         /**
@@ -26195,12 +26308,6 @@ var PanelModel = /** @class */ (function (_super) {
             this.survey.panelVisibilityChanged(this, this.isVisible);
         }
     };
-    PanelModel.prototype.hasErrorsCore = function (rec) {
-        _super.prototype.hasErrorsCore.call(this, rec);
-        if (this.isCollapsed && rec.result && rec.fireCallback) {
-            this.expand();
-        }
-    };
     PanelModel.prototype.getRenderedTitle = function (str) {
         if (!str) {
             if (this.isCollapsed || this.isExpanded)
@@ -26384,6 +26491,19 @@ var PanelModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    PanelModel.prototype.onElementExpanded = function (elementIsRendered) {
+        var _this = this;
+        if (this.survey != null && !this.isLoadingFromJson) {
+            var q_1 = this.getFirstQuestionToFocus(false);
+            if (!!q_1) {
+                setTimeout(function () {
+                    if (!_this.isDisposed && !!_this.survey) {
+                        _this.survey.scrollElementToTop(q_1, q_1, null, q_1.inputId, false, { behavior: "smooth" });
+                    }
+                }, elementIsRendered ? 0 : 15);
+            }
+        }
+    };
     PanelModel.prototype.getCssRoot = function (cssClasses) {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]()
             .append(_super.prototype.getCssRoot.call(this, cssClasses))
@@ -26526,9 +26646,10 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 var PopupDropdownViewModel = /** @class */ (function (_super) {
     __extends(PopupDropdownViewModel, _super);
-    function PopupDropdownViewModel(model, targetElement) {
+    function PopupDropdownViewModel(model, targetElement, areaElement) {
         var _this = _super.call(this, model) || this;
         _this.targetElement = targetElement;
+        _this.areaElement = areaElement;
         _this.scrollEventCallBack = function (event) {
             if (_this.isOverlay && _utils_devices__WEBPACK_IMPORTED_MODULE_3__["IsTouch"]) {
                 event.stopPropagation();
@@ -26566,11 +26687,24 @@ var PopupDropdownViewModel = /** @class */ (function (_super) {
         var width = Math.min(windowWidth, windowHeight);
         this.isTablet = width >= PopupDropdownViewModel.tabletSizeBreakpoint;
     };
+    PopupDropdownViewModel.prototype.getAvailableAreaRect = function () {
+        if (this.areaElement) {
+            var areaRect = this.areaElement.getBoundingClientRect();
+            return new _utils_popup__WEBPACK_IMPORTED_MODULE_1__["Rect"](areaRect.x, areaRect.y, areaRect.width, areaRect.height);
+        }
+        return new _utils_popup__WEBPACK_IMPORTED_MODULE_1__["Rect"](0, 0, _global_variables_utils__WEBPACK_IMPORTED_MODULE_6__["DomWindowHelper"].getInnerWidth(), _global_variables_utils__WEBPACK_IMPORTED_MODULE_6__["DomWindowHelper"].getInnerHeight());
+    };
+    PopupDropdownViewModel.prototype.getTargetElementRect = function () {
+        var rect = this.targetElement.getBoundingClientRect();
+        var areaRect = this.getAvailableAreaRect();
+        return new _utils_popup__WEBPACK_IMPORTED_MODULE_1__["Rect"](rect.left - areaRect.left, rect.top - areaRect.top, rect.width, rect.height);
+    };
     PopupDropdownViewModel.prototype._updatePosition = function () {
         var _a, _b, _c;
         if (!this.targetElement)
             return;
-        var targetElementRect = this.targetElement.getBoundingClientRect();
+        var targetElementRect = this.getTargetElementRect();
+        var area = this.getAvailableAreaRect();
         var popupContainer = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector(this.containerSelector);
         if (!popupContainer)
             return;
@@ -26587,12 +26721,13 @@ var PopupDropdownViewModel = /** @class */ (function (_super) {
         if (_global_variables_utils__WEBPACK_IMPORTED_MODULE_6__["DomWindowHelper"].isAvailable()) {
             var heightValues = [height, _global_variables_utils__WEBPACK_IMPORTED_MODULE_6__["DomWindowHelper"].getInnerHeight() * 0.9, (_c = _global_variables_utils__WEBPACK_IMPORTED_MODULE_6__["DomWindowHelper"].getVisualViewport()) === null || _c === void 0 ? void 0 : _c.height];
             height = Math.ceil(Math.min.apply(Math, heightValues.filter(function (each) { return typeof each === "number"; })));
-            verticalPosition = _utils_popup__WEBPACK_IMPORTED_MODULE_1__["PopupUtils"].updateVerticalPosition(targetElementRect, height, this.model.verticalPosition, this.model.showPointer, _global_variables_utils__WEBPACK_IMPORTED_MODULE_6__["DomWindowHelper"].getInnerHeight());
+            verticalPosition = _utils_popup__WEBPACK_IMPORTED_MODULE_1__["PopupUtils"].updateVerticalPosition(targetElementRect, height, this.model.horizontalPosition, this.model.verticalPosition, area.height);
+            actualHorizontalPosition = _utils_popup__WEBPACK_IMPORTED_MODULE_1__["PopupUtils"].updateHorizontalPosition(targetElementRect, width, this.model.horizontalPosition, area.width);
         }
         this.popupDirection = _utils_popup__WEBPACK_IMPORTED_MODULE_1__["PopupUtils"].calculatePopupDirection(verticalPosition, actualHorizontalPosition);
-        var pos = _utils_popup__WEBPACK_IMPORTED_MODULE_1__["PopupUtils"].calculatePosition(targetElementRect, height, width + marginLeft + marginRight, verticalPosition, actualHorizontalPosition, this.showHeader, this.model.positionMode);
+        var pos = _utils_popup__WEBPACK_IMPORTED_MODULE_1__["PopupUtils"].calculatePosition(targetElementRect, height, width + marginLeft + marginRight, verticalPosition, actualHorizontalPosition, this.model.positionMode);
         if (_global_variables_utils__WEBPACK_IMPORTED_MODULE_6__["DomWindowHelper"].isAvailable()) {
-            var newVerticalDimensions = _utils_popup__WEBPACK_IMPORTED_MODULE_1__["PopupUtils"].getCorrectedVerticalDimensions(pos.top, height, _global_variables_utils__WEBPACK_IMPORTED_MODULE_6__["DomWindowHelper"].getInnerHeight(), verticalPosition);
+            var newVerticalDimensions = _utils_popup__WEBPACK_IMPORTED_MODULE_1__["PopupUtils"].getCorrectedVerticalDimensions(pos.top, height, area.height, verticalPosition, this.model.canShrink);
             if (!!newVerticalDimensions) {
                 this.height = newVerticalDimensions.height + "px";
                 pos.top = newVerticalDimensions.top;
@@ -26614,6 +26749,8 @@ var PopupDropdownViewModel = /** @class */ (function (_super) {
             pos.top -= rect.top;
             pos.left -= rect.left;
         }
+        pos.left += area.left;
+        pos.top += area.top;
         this.left = pos.left + "px";
         this.top = pos.top + "px";
         if (this.showHeader) {
@@ -26651,10 +26788,11 @@ var PopupDropdownViewModel = /** @class */ (function (_super) {
     PopupDropdownViewModel.prototype.getPopupHeaderTemplate = function () {
         return "popup-pointer";
     };
-    PopupDropdownViewModel.prototype.setComponentElement = function (componentRoot, targetElement) {
+    PopupDropdownViewModel.prototype.setComponentElement = function (componentRoot, targetElement, areaElement) {
         _super.prototype.setComponentElement.call(this, componentRoot);
         if (!!componentRoot && !!componentRoot.parentElement && !this.isModal) {
             this.targetElement = targetElement || componentRoot.parentElement;
+            this.areaElement = areaElement;
         }
     };
     PopupDropdownViewModel.prototype.resetComponentElement = function () {
@@ -26812,6 +26950,7 @@ var PopupModalViewModel = /** @class */ (function (_super) {
     PopupModalViewModel.prototype.createFooterActionBar = function () {
         var _this = this;
         _super.prototype.createFooterActionBar.call(this);
+        this.footerToolbar.containerCss = "sv-footer-action-bar";
         this.footerToolbarValue.addAction({
             id: "apply",
             visibleIndex: 20,
@@ -27468,7 +27607,11 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
         this.model.onHiding();
     };
     PopupBaseViewModel.prototype.getLeaveOptions = function () {
-        return { cssClass: "sv-popup--animate-leave" };
+        return { cssClass: "sv-popup--animate-leave", onBeforeRunAnimation: function (el) {
+                el.setAttribute("inert", "");
+            },
+            onAfterRunAnimation: function (el) { return el.removeAttribute("inert"); }
+        };
     };
     PopupBaseViewModel.prototype.getEnterOptions = function () {
         return { cssClass: "sv-popup--animate-enter" };
@@ -27479,6 +27622,7 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
     PopupBaseViewModel.prototype.isAnimationEnabled = function () {
         return this.model.displayMode !== "overlay" && _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].animationEnabled;
     };
+    PopupBaseViewModel.prototype.getRerenderEvent = function () { return this.onElementRerendered; };
     PopupBaseViewModel.prototype.getAnimationContainer = function () {
         var _a;
         return (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector(this.fixedPopupContainer);
@@ -27763,7 +27907,7 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
             Object(_utils_utils__WEBPACK_IMPORTED_MODULE_5__["getElement"])(_settings__WEBPACK_IMPORTED_MODULE_4__["settings"].environment.popupMountContainer).appendChild(container);
         }
     };
-    PopupBaseViewModel.prototype.setComponentElement = function (componentRoot, targetElement) {
+    PopupBaseViewModel.prototype.setComponentElement = function (componentRoot, targetElement, areaElement) {
         if (!!componentRoot) {
             this.containerElement = componentRoot;
         }
@@ -27943,6 +28087,9 @@ var PopupModel = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: false })
     ], PopupModel.prototype, "isModal", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: true })
+    ], PopupModel.prototype, "canShrink", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: true })
     ], PopupModel.prototype, "isFocusedContent", void 0);
@@ -29417,6 +29564,7 @@ var Question = /** @class */ (function (_super) {
             .append(cssClasses.hasErrorBottom, hasError && this.getErrorLocation() == "bottom")
             .append(cssClasses.small, !this.width)
             .append(cssClasses.answered, this.isAnswered)
+            .append(cssClasses.noPointerEventsMode, this.isReadOnlyAttr)
             .toString();
     };
     Object.defineProperty(Question.prototype, "cssHeader", {
@@ -29659,7 +29807,7 @@ var Question = /** @class */ (function (_super) {
     Question.prototype.focuscore = function (onError, scrollIfVisible) {
         if (onError === void 0) { onError = false; }
         if (!!this.survey) {
-            this.expandAllParents(this);
+            this.expandAllParents();
             this.survey.scrollElementToTop(this, this, null, this.id, scrollIfVisible);
         }
         var id = !onError
@@ -29669,14 +29817,17 @@ var Question = /** @class */ (function (_super) {
             this.fireCallback(this.focusCallback);
         }
     };
-    Question.prototype.expandAllParents = function (element) {
+    Question.prototype.expandAllParents = function () {
+        this.expandAllParentsCore(this);
+    };
+    Question.prototype.expandAllParentsCore = function (element) {
         if (!element)
             return;
         if (element.isCollapsed) {
             element.expand();
         }
-        this.expandAllParents(element.parent);
-        this.expandAllParents(element.parentQuestion);
+        this.expandAllParentsCore(element.parent);
+        this.expandAllParentsCore(element.parentQuestion);
     };
     Question.prototype.focusIn = function () {
         if (!this.survey || this.isDisposed || this.isContainer)
@@ -29885,6 +30036,20 @@ var Question = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Question.prototype, "isReadOnlyAttr", {
+        get: function () {
+            return this.isReadOnly;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Question.prototype, "isDisabledAttr", {
+        get: function () {
+            return this.isDesignModeV2;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Question.prototype.onReadOnlyChanged = function () {
         this.setPropertyValue("isInputReadOnly", this.isInputReadOnly);
         _super.prototype.onReadOnlyChanged.call(this);
@@ -30500,6 +30665,13 @@ var Question = /** @class */ (function (_super) {
             return;
         this.setDefaultValue();
     };
+    Object.defineProperty(Question.prototype, "isValueDefault", {
+        get: function () {
+            return !this.isEmpty() && (this.isTwoValueEquals(this.defaultValue, this.value) || !this.isValueChangedDirectly && !!this.defaultValueExpression);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Question.prototype, "isClearValueOnHidden", {
         get: function () {
             var clearIf = this.getClearIfInvisible();
@@ -30576,9 +30748,9 @@ var Question = /** @class */ (function (_super) {
             };
         }
         if (!values)
-            values = this.data.getFilteredValues();
+            values = this.defaultValueExpression ? this.data.getFilteredValues() : {};
         if (!properties)
-            properties = this.data.getFilteredProperties();
+            properties = this.defaultValueExpression ? this.data.getFilteredProperties() : {};
         if (!!runner && runner.canRun) {
             runner.onRunComplete = function (res) {
                 if (res == undefined)
@@ -30928,13 +31100,9 @@ var Question = /** @class */ (function (_super) {
     Question.prototype.isTextValue = function () {
         return false;
     };
-    Object.defineProperty(Question.prototype, "isSurveyInputTextUpdate", {
-        get: function () {
-            return !!this.survey ? this.survey.isUpdateValueTextOnTyping : false;
-        },
-        enumerable: false,
-        configurable: true
-    });
+    Question.prototype.getIsInputTextUpdate = function () {
+        return !!this.survey ? this.survey.isUpdateValueTextOnTyping : false;
+    };
     Object.defineProperty(Question.prototype, "requireStrictCompare", {
         get: function () { return false; },
         enumerable: false,
@@ -30945,7 +31113,7 @@ var Question = /** @class */ (function (_super) {
     };
     Object.defineProperty(Question.prototype, "isInputTextUpdate", {
         get: function () {
-            return this.isSurveyInputTextUpdate && this.isTextValue();
+            return this.getIsInputTextUpdate() && this.isTextValue();
         },
         enumerable: false,
         configurable: true
@@ -30985,7 +31153,7 @@ var Question = /** @class */ (function (_super) {
     };
     Question.prototype.setCommentIntoData = function (newValue) {
         if (this.data != null) {
-            this.data.setComment(this.getValueName(), newValue, this.isSurveyInputTextUpdate ? "text" : false);
+            this.data.setComment(this.getValueName(), newValue, this.getIsInputTextUpdate() ? "text" : false);
         }
     };
     Question.prototype.getValidName = function (name) {
@@ -31991,6 +32159,15 @@ var QuestionSelectBase = /** @class */ (function (_super) {
             _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"].locStrsChanged(this.choicesFromUrl);
             _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"].locStrsChanged(this.visibleChoices);
         }
+        if (this.isUsingCarryForward) {
+            _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"].locStrsChanged(this.visibleChoices);
+        }
+    };
+    QuestionSelectBase.prototype.updatePrevOtherErrorValue = function (val) {
+        var oldVal = this.otherValue;
+        if (val !== oldVal) {
+            this.prevOtherErrorValue = oldVal;
+        }
     };
     Object.defineProperty(QuestionSelectBase.prototype, "otherValue", {
         get: function () {
@@ -31999,6 +32176,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
             return this.otherValueCore;
         },
         set: function (val) {
+            this.updatePrevOtherErrorValue(val);
             if (!this.showCommentArea) {
                 this.comment = val;
             }
@@ -32451,6 +32629,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         this.value = val ? this.otherItem.value : undefined;
     };
     QuestionSelectBase.prototype.setQuestionComment = function (newValue) {
+        this.updatePrevOtherErrorValue(newValue);
         if (this.showCommentArea) {
             _super.prototype.setQuestionComment.call(this, newValue);
             return;
@@ -32495,6 +32674,8 @@ var QuestionSelectBase = /** @class */ (function (_super) {
             return this.getPropertyValue("renderedValue", null);
         },
         set: function (val) {
+            if (this.isReadOnlyAttr)
+                return;
             this.setPropertyValue("renderedValue", val);
             var val = this.rendredValueToData(val);
             if (!this.isTwoValueEquals(val, this.value)) {
@@ -33130,6 +33311,8 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         return questionPlainData;
     };
     QuestionSelectBase.prototype.getDisplayValueCore = function (keysAsText, value) {
+        if (!this.useDisplayValuesInDynamicTexts)
+            return value;
         return this.getChoicesDisplayValue(this.visibleChoices, value);
     };
     QuestionSelectBase.prototype.getDisplayValueEmpty = function () {
@@ -33356,7 +33539,8 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     QuestionSelectBase.prototype.onCheckForErrors = function (errors, isOnValueChanged) {
         var _this = this;
         _super.prototype.onCheckForErrors.call(this, errors, isOnValueChanged);
-        if (!this.hasOther || !this.isOtherSelected || this.otherValue)
+        if (!this.hasOther || !this.isOtherSelected || this.otherValue
+            || isOnValueChanged && !this.prevOtherErrorValue)
             return;
         var otherEmptyError = new _error__WEBPACK_IMPORTED_MODULE_5__["OtherEmptyError"](this.otherErrorText, this);
         otherEmptyError.onUpdateErrorTextCallback = function (err) { err.text = _this.otherErrorText; };
@@ -33953,7 +34137,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         configurable: true
     });
     QuestionSelectBase.prototype.getItemEnabled = function (item) {
-        return !this.isInputReadOnly && item.isEnabled;
+        return !this.isDisabledAttr && item.isEnabled;
     };
     QuestionSelectBase.prototype.afterRender = function (el) {
         _super.prototype.afterRender.call(this, el);
@@ -34335,7 +34519,6 @@ var QuestionBooleanModel = /** @class */ (function (_super) {
             this.value = val == true ? this.getValueTrue() : this.getValueFalse();
             this.booleanValueRendered = val;
         }
-        this.updateThumbMargin();
     };
     Object.defineProperty(QuestionBooleanModel.prototype, "defaultValue", {
         get: function () {
@@ -34540,6 +34723,15 @@ var QuestionBooleanModel = /** @class */ (function (_super) {
             .append(this.cssClasses.labelFalse, !this.isIndeterminate && checked === this.swapOrder)
             .toString();
     };
+    QuestionBooleanModel.prototype.updateValueFromSurvey = function (newValue, clearData) {
+        if (clearData === void 0) { clearData = false; }
+        _super.prototype.updateValueFromSurvey.call(this, newValue, clearData);
+        this.updateThumbMargin();
+    };
+    QuestionBooleanModel.prototype.onValueChanged = function () {
+        _super.prototype.onValueChanged.call(this);
+        this.updateThumbMargin();
+    };
     Object.defineProperty(QuestionBooleanModel.prototype, "svgIcon", {
         get: function () {
             if (this.booleanValue && this.cssClasses.svgIconCheckedId)
@@ -35159,6 +35351,8 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
         this.renderedValue = val;
     };
     QuestionCheckboxModel.prototype.clickItemHandler = function (item, checked) {
+        if (this.isReadOnlyAttr)
+            return;
         if (item === this.selectAllItem) {
             if (checked === true || checked === false) {
                 this.isAllSelected = checked;
@@ -37043,6 +37237,9 @@ var QuestionCompositeModel = /** @class */ (function (_super) {
             this.contentPanel.getValue() : this.getValueForContentPanel(this.value);
         if (!val)
             val = {};
+        if (!val.getType) {
+            val = _helpers__WEBPACK_IMPORTED_MODULE_3__["Helpers"].getUnbindValue(val);
+        }
         if (this.isValueEmpty(newValue) && !this.isEditingSurveyElement) {
             delete val[name];
         }
@@ -38432,7 +38629,16 @@ var QuestionFileModel = /** @class */ (function (_super) {
             }
             _this.clearFilesCore();
         };
+        _this.doDownloadFileFromContainer = function (event) {
+            event.stopPropagation();
+            var currentTarget = event.currentTarget;
+            if (currentTarget && currentTarget.getElementsByTagName) {
+                var link = currentTarget.getElementsByTagName("a")[0];
+                link === null || link === void 0 ? void 0 : link.click();
+            }
+        };
         _this.doDownloadFile = function (event, data) {
+            event.stopPropagation();
             if (Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["detectIEOrEdge"])()) {
                 event.preventDefault();
                 Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["loadFileFromBase64"])(data.content, data.name);
@@ -39347,8 +39553,9 @@ var QuestionFileModel = /** @class */ (function (_super) {
         }
         this.clear();
     };
-    QuestionFileModel.prototype.doRemoveFile = function (data) {
+    QuestionFileModel.prototype.doRemoveFile = function (data, event) {
         var _this = this;
+        event.stopPropagation();
         if (this.needConfirmRemoveFile) {
             Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["confirmActionAsync"])(this.getConfirmRemoveMessage(data.name), function () { _this.removeFileCore(data); }, undefined, this.getLocale(), this.survey.rootElement);
             return;
@@ -40718,6 +40925,16 @@ var MatrixRowModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(MatrixRowModel.prototype, "isReadOnlyAttr", {
+        get: function () { return this.data.isReadOnlyAttr; },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MatrixRowModel.prototype, "isDisabledAttr", {
+        get: function () { return !this.item.enabled || this.data.isDisabledAttr; },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(MatrixRowModel.prototype, "rowTextClasses", {
         get: function () {
             return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_11__["CssClassBuilder"]().append(this.data.cssClasses.rowTextCell).toString();
@@ -41556,6 +41773,7 @@ var QuestionMatrixDropdownModel = /** @class */ (function (_super) {
     __extends(QuestionMatrixDropdownModel, _super);
     function QuestionMatrixDropdownModel(name) {
         var _this = _super.call(this, name) || this;
+        _this.defaultValuesInRows = {};
         _this.createLocalizableString("totalText", _this, true);
         _this.registerPropertyChangedHandlers(["rows"], function () {
             _this.clearGeneratedRows();
@@ -41678,6 +41896,29 @@ var QuestionMatrixDropdownModel = /** @class */ (function (_super) {
         _super.prototype.clearValueIfInvisibleCore.call(this, reason);
         this.clearInvisibleValuesInRows();
     };
+    QuestionMatrixDropdownModel.prototype.clearGeneratedRows = function () {
+        var _this = this;
+        if (!this.generatedVisibleRows)
+            return;
+        if (!this.isDisposed) {
+            this.generatedVisibleRows.forEach(function (row) {
+                _this.defaultValuesInRows[row.rowName] = row.getNamesWithDefaultValues();
+            });
+        }
+        _super.prototype.clearGeneratedRows.call(this);
+    };
+    QuestionMatrixDropdownModel.prototype.getRowValueForCreation = function (val, rowValue) {
+        var res = val[rowValue];
+        if (!res)
+            return res;
+        var names = this.defaultValuesInRows[rowValue];
+        if (!Array.isArray(names) || names.length === 0)
+            return res;
+        names.forEach(function (name) {
+            delete res[name];
+        });
+        return res;
+    };
     QuestionMatrixDropdownModel.prototype.generateRows = function () {
         var result = new Array();
         var rows = !!this.filteredRows ? this.filteredRows : this.rows;
@@ -41687,9 +41928,10 @@ var QuestionMatrixDropdownModel = /** @class */ (function (_super) {
         if (!val)
             val = {};
         for (var i = 0; i < rows.length; i++) {
-            if (this.isValueEmpty(rows[i].value))
+            var row = rows[i];
+            if (this.isValueEmpty(row.value))
                 continue;
-            result.push(this.createMatrixRow(rows[i], val[rows[i].value]));
+            result.push(this.createMatrixRow(row, this.getRowValueForCreation(val, row.value)));
         }
         return result;
     };
@@ -42150,18 +42392,22 @@ var MatrixDropdownRowModelBase = /** @class */ (function () {
             }
         }
         res.row = this.getAllValues();
+        this.applyRowVariablesToValues(res, this.rowIndex);
         return res;
     };
     MatrixDropdownRowModelBase.prototype.getFilteredProperties = function () {
         return { survey: this.getSurvey(), row: this };
     };
+    MatrixDropdownRowModelBase.prototype.applyRowVariablesToValues = function (res, rowIndex) {
+        res[MatrixDropdownRowModelBase.IndexVariableName] = rowIndex;
+        res[MatrixDropdownRowModelBase.RowValueVariableName] = this.rowName;
+    };
     MatrixDropdownRowModelBase.prototype.runCondition = function (values, properties) {
         if (!!this.data) {
             values[MatrixDropdownRowModelBase.OwnerVariableName] = this.data.value;
         }
         var rowIndex = this.rowIndex;
-        values[MatrixDropdownRowModelBase.IndexVariableName] = rowIndex;
-        values[MatrixDropdownRowModelBase.RowValueVariableName] = this.rowName;
+        this.applyRowVariablesToValues(values, rowIndex);
         var newProps = _helpers__WEBPACK_IMPORTED_MODULE_2__["Helpers"].createCopy(properties);
         newProps[MatrixDropdownRowModelBase.RowVariableName] = this;
         var rowValues = rowIndex > 0 ? this.data.getRowValue(this.rowIndex - 1) : this.value;
@@ -42176,6 +42422,15 @@ var MatrixDropdownRowModelBase = /** @class */ (function () {
             this.detailPanel.runCondition(values, newProps);
         }
     };
+    MatrixDropdownRowModelBase.prototype.getNamesWithDefaultValues = function () {
+        var res = [];
+        this.questions.forEach(function (q) {
+            if (q.isValueDefault) {
+                res.push(q.getValueName());
+            }
+        });
+        return res;
+    };
     MatrixDropdownRowModelBase.prototype.clearValue = function (keepComment) {
         var questions = this.questions;
         for (var i = 0; i < questions.length; i++) {
@@ -45408,6 +45663,13 @@ var MatrixDropdownColumn = /** @class */ (function (_super) {
                     json[prop] = _this.jsonObj[prop];
                 });
             }
+            if (json["choicesOrder"] === "random") {
+                json["choicesOrder"] = "none";
+                var visChoices = this.templateQuestion["visibleChoices"];
+                if (Array.isArray(visChoices)) {
+                    json["choices"] = visChoices;
+                }
+            }
             new _jsonobject__WEBPACK_IMPORTED_MODULE_0__["JsonObject"]().toObject(json, question);
             question.isContentElement = this.templateQuestion.isContentElement;
             this.previousChoicesId = undefined;
@@ -45430,8 +45692,12 @@ var MatrixDropdownColumn = /** @class */ (function (_super) {
         }
         if (!this.colOwner || this.isLoadingFromJson)
             return;
-        if (this.isShowInMultipleColumns && ["visibleChoices", "choices"].indexOf(name) > -1) {
-            this.colOwner.onShowInMultipleColumnsChanged(this);
+        if (this.isShowInMultipleColumns) {
+            if (name === "choicesOrder")
+                return;
+            if (["visibleChoices", "choices"].indexOf(name) > -1) {
+                this.colOwner.onShowInMultipleColumnsChanged(this);
+            }
         }
         if (!_jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].hasOriginalProperty(this, name))
             return;
@@ -45911,11 +46177,9 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
     function QuestionMatrixDropdownRenderedTable(matrix) {
         var _this = _super.call(this) || this;
         _this.matrix = matrix;
-        _this.renderedRowsChangedCallback = function () { };
         _this._renderedRows = [];
         _this.renderedRowsAnimation = new _utils_animation__WEBPACK_IMPORTED_MODULE_8__["AnimationGroup"](_this.getRenderedRowsAnimationOptions(), function (val) {
             _this._renderedRows = val;
-            _this.renderedRowsChangedCallback();
         }, function () { return _this._renderedRows; });
         _this.hasActionCellInRowsValues = {};
         _this.build();
@@ -45935,6 +46199,7 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
             isAnimationEnabled: function () {
                 return _this.animationAllowed;
             },
+            getRerenderEvent: function () { return _this.onElementRerendered; },
             getAnimatedElement: function (el) {
                 return el.getRootElement();
             },
@@ -46795,7 +47060,6 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["propertyArray"])({
             onPush: function (_, i, target) {
-                target.renderedRowsChangedCallback();
                 target.updateRenderedRows();
             },
             onRemove: function (_, i, target) {
@@ -49945,6 +50209,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
                 .toString();
         };
         return {
+            getRerenderEvent: function () { return _this.onElementRerendered; },
             getAnimatedElement: function (panel) {
                 var _a, _b;
                 if (panel && _this.cssContent) {
@@ -51449,7 +51714,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             this.setOnCompleteAsyncInPanel(panels[i]);
         }
         for (var i = 0; i < panels.length; i++) {
-            var pnlError = panels[i].hasErrors(fireCallback, !!rec && rec.focuseOnFirstError, rec);
+            var pnlError = panels[i].hasErrors(fireCallback, !!rec && rec.focusOnFirstError, rec);
             pnlError = this.isValueDuplicated(panels[i], keyValues, rec, fireCallback) || pnlError;
             if (!this.isRenderModeList && pnlError && !res) {
                 this.currentIndex = i;
@@ -52281,6 +52546,8 @@ var QuestionRadiogroupModel = /** @class */ (function (_super) {
         configurable: true
     });
     QuestionRadiogroupModel.prototype.clickItemHandler = function (item) {
+        if (this.isReadOnlyAttr)
+            return;
         this.renderedValue = item.value;
     };
     QuestionRadiogroupModel.prototype.getDefaultTitleActions = function () {
@@ -52353,6 +52620,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _src_settings__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../src/settings */ "./src/settings.ts");
 /* harmony import */ var _utils_animation__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./utils/animation */ "./src/utils/animation.ts");
 /* harmony import */ var _utils_dragOrClickHelper__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./utils/dragOrClickHelper */ "./src/utils/dragOrClickHelper.ts");
+/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./utils/utils */ "./src/utils/utils.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -52386,6 +52654,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 /**
  * A class that describes the Ranking question type.
  *
@@ -52405,33 +52674,37 @@ var QuestionRankingModel = /** @class */ (function (_super) {
             if (_this.visibleChoices.length === 1 && !_this.selectToRankEnabled) {
                 _this.value = [];
                 _this.value.push(_this.visibleChoices[0].value);
-                _this.updateRankingChoicesSync();
+                _this.updateRankingChoices();
                 return;
             }
             if (_this.isEmpty()) {
-                _this.updateRankingChoicesSync();
+                _this.updateRankingChoices();
                 return;
             }
             if (_this.selectToRankEnabled) {
-                _this.updateRankingChoicesSync();
+                _this.updateRankingChoices();
                 return;
             }
             if (_this.visibleChoices.length > _this.value.length)
                 _this.addToValueByVisibleChoices();
             if (_this.visibleChoices.length < _this.value.length)
                 _this.removeFromValueByVisibleChoices();
-            _this.updateRankingChoicesSync();
+            _this.updateRankingChoices();
         };
         _this.localeChanged = function () {
             _super.prototype.localeChanged.call(_this);
             _this.updateRankingChoicesSync();
         };
-        _this._rankingChoicesAnimation = new _utils_animation__WEBPACK_IMPORTED_MODULE_10__["AnimationGroup"](_this.getChoicesAnimation(true), function (val) {
-            _this.setPropertyValue("rankingChoices", val);
-        }, function () { return _this.rankingChoices; });
-        _this._unRankingChoicesAnimation = new _utils_animation__WEBPACK_IMPORTED_MODULE_10__["AnimationGroup"](_this.getChoicesAnimation(false), function (val) {
-            _this.setPropertyValue("unRankingChoices", val);
-        }, function () { return _this.unRankingChoices; });
+        _this._rankingChoicesAnimation = new _utils_animation__WEBPACK_IMPORTED_MODULE_10__["AnimationGroup"](_this.getChoicesAnimationOptions(true), function (val) {
+            _this._renderedRankingChoices = val;
+        }, function () { return _this.renderedRankingChoices; });
+        _this._unRankingChoicesAnimation = new _utils_animation__WEBPACK_IMPORTED_MODULE_10__["AnimationGroup"](_this.getChoicesAnimationOptions(false), function (val) {
+            _this._renderedUnRankingChoices = val;
+        }, function () { return _this.renderedUnRankingChoices; });
+        _this.rankingChoices = [];
+        _this.unRankingChoices = [];
+        _this._renderedRankingChoices = [];
+        _this._renderedUnRankingChoices = [];
         _this.handlePointerDown = function (event, choice, node) {
             var target = event.target;
             if (!_this.isDragStartNodeValid(target))
@@ -52455,6 +52728,8 @@ var QuestionRankingModel = /** @class */ (function (_super) {
             }
         };
         _this.handleKeydown = function (event, choice) {
+            if (_this.isReadOnlyAttr)
+                return;
             if (!_this.isDesignMode) {
                 var key = event.key;
                 var index = _this.rankingChoices.indexOf(choice);
@@ -52462,27 +52737,16 @@ var QuestionRankingModel = /** @class */ (function (_super) {
                     _this.handleKeydownSelectToRank(event, choice);
                     return;
                 }
-                if (key === "ArrowUp" && index) {
-                    _this.handleArrowKeys(index, choice, false);
-                    event.preventDefault();
-                }
-                if (key === "ArrowDown" && index !== _this.rankingChoices.length - 1) {
-                    _this.handleArrowKeys(index, choice, true);
-                    event.preventDefault();
+                if ((key === "ArrowUp" && index) || (key === "ArrowDown" && index !== _this.rankingChoices.length - 1)) {
+                    var toIndex = key == "ArrowUp" ? index - 1 : index + 1;
+                    _this.dragDropRankingChoices.reorderRankedItem(_this, index, toIndex);
+                    _this.setValueAfterKeydown(toIndex, "", true, event);
                 }
             }
         };
-        _this.handleArrowKeys = function (index, choice, isDown) {
-            var delta = isDown ? 1 : -1;
-            var choices = _this.rankingChoices;
-            choices.splice(index, 1);
-            choices.splice(index + delta, 0, choice);
-            _this.setValue();
-            setTimeout(function () {
-                _this.focusItem(index + delta);
-            }, 1);
-        };
         _this.focusItem = function (index, container) {
+            if (!_this.domNode)
+                return;
             if (_this.selectToRankEnabled && container) {
                 var containerSelector = "[data-ranking='" + container + "']";
                 var itemsNodes = _this.domNode.querySelectorAll(containerSelector + " " + "." + _this.cssClasses.item);
@@ -52496,16 +52760,12 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         _this.isValueSetByUser = false;
         _this.setValue = function () {
             var value = [];
-            _this.rankingChoicesAnimation.cancel();
-            _this.unRankingChoicesAnimation.cancel();
             _this.rankingChoices.forEach(function (choice) {
                 value.push(choice.value);
             });
             _this.value = value;
             _this.isValueSetByUser = true;
         };
-        _this.createNewArray("rankingChoices");
-        _this.createNewArray("unRankingChoices");
         _this.registerFunctionOnPropertyValueChanged("selectToRankEnabled", function () {
             _this.clearValue(true);
             _this.setDragDropRankingChoices();
@@ -52555,15 +52815,9 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         return true;
     };
     QuestionRankingModel.prototype.getItemClassCore = function (item, options) {
-        var itemIndex = this.rankingChoices.indexOf(item);
-        var unrankedItemIndex = this.unRankingChoices.indexOf(item);
-        var dropTargetIndex = this.rankingChoices.indexOf(this.currentDropTarget);
-        var isDrop = (this.selectToRankEnabled && itemIndex > -1 && unrankedItemIndex > -1) || this.currentDropTarget === item;
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_6__["CssClassBuilder"]()
             .append(_super.prototype.getItemClassCore.call(this, item, options))
-            .append(this.cssClasses.itemGhostMod, isDrop)
-            .append("sv-dragdrop-movedown", itemIndex === dropTargetIndex + 1 && this.dropTargetNodeMove === "down")
-            .append("sv-dragdrop-moveup", itemIndex === dropTargetIndex - 1 && this.dropTargetNodeMove === "up")
+            .append(this.cssClasses.itemGhostMod, this.currentDropTarget === item)
             .toString();
     };
     QuestionRankingModel.prototype.getContainerClasses = function (containerType) {
@@ -52571,10 +52825,10 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         var isToContainer = containerType === "to";
         var isFromContainer = containerType === "from";
         if (isToContainer) {
-            isEmpty = this.rankingChoices.length === 0;
+            isEmpty = this.renderedRankingChoices.length === 0;
         }
         else if (isFromContainer) {
-            isEmpty = this.unRankingChoices.length === 0;
+            isEmpty = this.renderedUnRankingChoices.length === 0;
         }
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_6__["CssClassBuilder"]()
             .append(this.cssClasses.container)
@@ -52635,7 +52889,12 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         _super.prototype.onSurveyValueChanged.call(this, newValue);
         if (this.isLoadingFromJson)
             return;
-        this.updateRankingChoicesSync();
+        this.updateRankingChoices();
+    };
+    QuestionRankingModel.prototype.onSurveyLoad = function () {
+        this.blockAnimations();
+        _super.prototype.onSurveyLoad.call(this);
+        this.releaseAnimations();
     };
     QuestionRankingModel.prototype.addToValueByVisibleChoices = function () {
         var newValue = this.value.slice();
@@ -52656,19 +52915,32 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         }
         this.value = newValue;
     };
-    QuestionRankingModel.prototype.getChoicesAnimation = function (isRankingChoices) {
+    QuestionRankingModel.prototype.getChoicesAnimationOptions = function (isRankingChoices) {
         var _this = this;
         return {
-            isAnimationEnabled: function () { return _this.animationAllowed; },
+            getKey: function (item) {
+                return item.value;
+            },
+            getRerenderEvent: function () {
+                return _this.onElementRerendered;
+            },
+            isAnimationEnabled: function () { return _this.animationAllowed && !_this.isDesignMode && _this.isVisible && !!_this.domNode; },
+            getReorderOptions: function (item, movedForward) {
+                var cssClass = "";
+                if (item !== _this.currentDropTarget) {
+                    cssClass = movedForward ? "sv-dragdrop-movedown" : "sv-dragdrop-moveup";
+                }
+                return { cssClass: cssClass };
+            },
             getLeaveOptions: function (item) {
-                var choices = isRankingChoices ? _this.rankingChoices : _this.unRankingChoices;
+                var choices = isRankingChoices ? _this.renderedRankingChoices : _this.renderedUnRankingChoices;
                 if (_this.renderedSelectToRankAreasLayout == "vertical" && choices.length == 1 && choices.indexOf(item) >= 0) {
                     return { cssClass: "sv-ranking-item--animate-item-removing-empty" };
                 }
                 return { cssClass: "sv-ranking-item--animate-item-removing" };
             },
             getEnterOptions: function (item) {
-                var choices = isRankingChoices ? _this.rankingChoices : _this.unRankingChoices;
+                var choices = isRankingChoices ? _this.renderedRankingChoices : _this.renderedUnRankingChoices;
                 if (_this.renderedSelectToRankAreasLayout == "vertical" && choices.length == 1 && choices.indexOf(item) >= 0) {
                     return { cssClass: "sv-ranking-item--animate-item-adding-empty" };
                 }
@@ -52676,9 +52948,20 @@ var QuestionRankingModel = /** @class */ (function (_super) {
             },
             getAnimatedElement: function (item) {
                 var _a;
-                var containerSelector = isRankingChoices ? ".sv-ranking__container--to" : ".sv-ranking__container--from";
-                return (_a = _this.getWrapperElement()) === null || _a === void 0 ? void 0 : _a.querySelector(containerSelector + " .sv-ranking-item--ghost");
-            }
+                var cssClasses = _this.cssClasses;
+                var containerSelector = "";
+                if (_this.selectToRankEnabled) {
+                    if (!isRankingChoices && cssClasses.containerFromMode) {
+                        containerSelector = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_12__["classesToSelector"])(cssClasses.containerFromMode);
+                    }
+                    else if (isRankingChoices && cssClasses.containerToMode) {
+                        containerSelector = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_12__["classesToSelector"])(cssClasses.containerToMode);
+                    }
+                }
+                var index = isRankingChoices ? _this.renderedRankingChoices.indexOf(item) : _this.renderedUnRankingChoices.indexOf(item);
+                return (_a = _this.domNode) === null || _a === void 0 ? void 0 : _a.querySelector(containerSelector + " [data-sv-drop-target-ranking-item='" + index + "']");
+            },
+            allowSyncRemovalAddition: true
         };
     };
     Object.defineProperty(QuestionRankingModel.prototype, "rankingChoicesAnimation", {
@@ -52695,26 +52978,32 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(QuestionRankingModel.prototype, "rankingChoices", {
+    Object.defineProperty(QuestionRankingModel.prototype, "renderedRankingChoices", {
         get: function () {
-            return this.getPropertyValue("rankingChoices", []);
+            return this._renderedRankingChoices;
         },
         set: function (val) {
-            this._rankingChoicesAnimation.sync(val);
+            this.rankingChoicesAnimation.sync(val);
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(QuestionRankingModel.prototype, "unRankingChoices", {
+    Object.defineProperty(QuestionRankingModel.prototype, "renderedUnRankingChoices", {
         get: function () {
-            return this.getPropertyValue("unRankingChoices", []);
+            return this._renderedUnRankingChoices;
         },
         set: function (val) {
-            this._unRankingChoicesAnimation.sync(val);
+            this.unRankingChoicesAnimation.sync(val);
         },
         enumerable: false,
         configurable: true
     });
+    QuestionRankingModel.prototype.updateRenderedRankingChoices = function () {
+        this.renderedRankingChoices = this.rankingChoices;
+    };
+    QuestionRankingModel.prototype.updateRenderedUnRankingChoices = function () {
+        this.renderedUnRankingChoices = this.unRankingChoices;
+    };
     QuestionRankingModel.prototype.updateRankingChoices = function (forceUpdate) {
         var _this = this;
         if (forceUpdate === void 0) { forceUpdate = false; }
@@ -52729,9 +53018,9 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         //   return;
         // }
         if (forceUpdate)
-            this.setPropertyValue("rankingChoices", []);
+            this.rankingChoices = [];
         if (this.isEmpty()) {
-            this.setPropertyValue("rankingChoices", this.visibleChoices);
+            this.rankingChoices = this.visibleChoices;
             return;
         }
         this.value.forEach(function (valueItem) {
@@ -52740,7 +53029,7 @@ var QuestionRankingModel = /** @class */ (function (_super) {
                     newRankingChoices.push(choice);
             });
         });
-        this.setPropertyValue("rankingChoices", newRankingChoices);
+        this.rankingChoices = newRankingChoices;
     };
     QuestionRankingModel.prototype.updateUnRankingChoices = function (newRankingChoices) {
         var unRankingChoices = [];
@@ -52820,6 +53109,7 @@ var QuestionRankingModel = /** @class */ (function (_super) {
     };
     //cross framework destroy
     QuestionRankingModel.prototype.beforeDestroyQuestionElement = function (el) {
+        this.domNode = undefined;
         _super.prototype.beforeDestroyQuestionElement.call(this, el);
     };
     QuestionRankingModel.prototype.supportSelectAll = function () { return false; };
@@ -52848,20 +53138,16 @@ var QuestionRankingModel = /** @class */ (function (_super) {
             if (!this.checkMaxSelectedChoicesUnreached() || !this.canStartDragDueItemEnabled(movedElement))
                 return;
             toIndex = this.value.length;
-            this.blockAnimations();
             dnd.selectToRank(this, fromIndex, toIndex);
-            this.releaseAnimations();
-            this.setValueAfterKeydown(toIndex, "to-container", isNeedFocus);
+            this.setValueAfterKeydown(toIndex, "to-container", isNeedFocus, event);
             return;
         }
         if (!isMovedElementRanked)
             return;
         if (key === " ") {
-            this.blockAnimations();
             dnd.unselectFromRank(this, fromIndex);
-            this.releaseAnimations();
             toIndex = this.unRankingChoices.indexOf(movedElement); //'this.' leads to actual array after the 'unselectFromRank' method
-            this.setValueAfterKeydown(toIndex, "from-container", isNeedFocus);
+            this.setValueAfterKeydown(toIndex, "from-container", isNeedFocus, event);
             return;
         }
         var delta = key === "ArrowUp" ? -1 : (key === "ArrowDown" ? 1 : 0);
@@ -52871,9 +53157,9 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         if (toIndex < 0 || toIndex >= rankingChoices.length)
             return;
         dnd.reorderRankedItem(this, fromIndex, toIndex);
-        this.setValueAfterKeydown(toIndex, "to-container", isNeedFocus);
+        this.setValueAfterKeydown(toIndex, "to-container", isNeedFocus, event);
     };
-    QuestionRankingModel.prototype.setValueAfterKeydown = function (index, container, isNeedFocus) {
+    QuestionRankingModel.prototype.setValueAfterKeydown = function (index, container, isNeedFocus, event) {
         var _this = this;
         if (isNeedFocus === void 0) { isNeedFocus = true; }
         this.setValue();
@@ -52913,6 +53199,19 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionRankingModel.prototype, "itemContentComponent", {
+        /**
+         * The name of a component used to render items.
+         */
+        get: function () {
+            return this.getPropertyValue("itemContentComponent", "sv-ranking-item-content");
+        },
+        set: function (value) {
+            this.setPropertyValue("itemContentComponent", value);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionRankingModel.prototype, "selectToRankEnabled", {
         /**
          * Specifies whether users can select choices they want to rank.
@@ -53002,11 +53301,27 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         configurable: true
     });
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_3__["property"])({ defaultValue: null })
-    ], QuestionRankingModel.prototype, "currentDropTarget", void 0);
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_3__["propertyArray"])({
+            onSet: function (val, target) { return target.updateRenderedRankingChoices(); },
+            onRemove: function (_, _i, target) { return target.updateRenderedRankingChoices(); },
+            onPush: function (_, _i, target) { return target.updateRenderedRankingChoices(); },
+        })
+    ], QuestionRankingModel.prototype, "rankingChoices", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_3__["propertyArray"])({ onSet: function (val, target) { return target.updateRenderedUnRankingChoices(); },
+            onRemove: function (_, _i, target) { return target.updateRenderedUnRankingChoices(); },
+            onPush: function (_, _i, target) { return target.updateRenderedUnRankingChoices(); },
+        })
+    ], QuestionRankingModel.prototype, "unRankingChoices", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_3__["propertyArray"])()
+    ], QuestionRankingModel.prototype, "_renderedRankingChoices", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_3__["propertyArray"])()
+    ], QuestionRankingModel.prototype, "_renderedUnRankingChoices", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_3__["property"])({ defaultValue: null })
-    ], QuestionRankingModel.prototype, "dropTargetNodeMove", void 0);
+    ], QuestionRankingModel.prototype, "currentDropTarget", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_3__["property"])({ defaultValue: true })
     ], QuestionRankingModel.prototype, "carryForwardStartUnranked", void 0);
@@ -53089,7 +53404,8 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_3__["Serializer"].addClass("ranking", [
         dependsOn: "selectToRankEnabled", visibleIf: function (obj) {
             return !!obj.selectToRankEnabled;
         }, isSerializable: true },
-    { name: "itemComponent", visible: false, default: "" }
+    { name: "itemComponent", visible: false, default: "" },
+    { name: "itemContentComponent", visible: false, default: "sv-ranking-item-content" },
 ], function () {
     return new QuestionRankingModel("");
 }, "checkbox");
@@ -53732,6 +54048,8 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         return !isNaN(val) ? parseFloat(val) : val;
     };
     QuestionRatingModel.prototype.setValueFromClick = function (value) {
+        if (this.isReadOnlyAttr)
+            return;
         if (this.value === parseFloat(value)) {
             this.clearValue(true);
         }
@@ -55793,8 +56111,11 @@ var QuestionTextModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionTextModel.prototype.getIsInputTextUpdate = function () {
+        return this.maskTypeIsEmpty ? _super.prototype.getIsInputTextUpdate.call(this) : false;
+    };
     QuestionTextModel.prototype.supportGoNextPageAutomatic = function () {
-        return !this.isSurveyInputTextUpdate &&
+        return !this.getIsInputTextUpdate() &&
             ["date", "datetime-local"].indexOf(this.inputType) < 0;
     };
     QuestionTextModel.prototype.supportGoNextPageError = function () {
@@ -56268,15 +56589,11 @@ var QuestionTextBase = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(QuestionTextBase.prototype, "isSurveyInputTextUpdate", {
-        get: function () {
-            if (this.textUpdateMode == "default")
-                return !!this.survey ? this.survey.isUpdateValueTextOnTyping : false;
-            return this.textUpdateMode == "onTyping";
-        },
-        enumerable: false,
-        configurable: true
-    });
+    QuestionTextBase.prototype.getIsInputTextUpdate = function () {
+        if (this.textUpdateMode == "default")
+            return _super.prototype.getIsInputTextUpdate.call(this);
+        return this.textUpdateMode == "onTyping";
+    };
     Object.defineProperty(QuestionTextBase.prototype, "renderedPlaceholder", {
         get: function () {
             return this.getPropertyValue("renderedPlaceholder");
@@ -58076,12 +58393,12 @@ var SurveyElement = /** @class */ (function (_super) {
         }
         return info;
     };
-    SurveyElement.ScrollElementToTop = function (elementId, scrollIfVisible) {
+    SurveyElement.ScrollElementToTop = function (elementId, scrollIfVisible, scrollIntoViewOptions) {
         var root = _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].environment.root;
         if (!elementId || typeof root === "undefined")
             return false;
         var el = root.getElementById(elementId);
-        return SurveyElement.ScrollElementToViewCore(el, false, scrollIfVisible);
+        return SurveyElement.ScrollElementToViewCore(el, false, scrollIfVisible, scrollIntoViewOptions);
     };
     SurveyElement.ScrollElementToViewCore = function (el, checkLeft, scrollIfVisible, scrollIntoViewOptions) {
         if (!el || !el.scrollIntoView)
@@ -59172,6 +59489,8 @@ var SurveyElement = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    SurveyElement.prototype.onElementExpanded = function (elementIsRendered) {
+    };
     SurveyElement.prototype.getExpandCollapseAnimationOptions = function () {
         var _this = this;
         var beforeRunAnimation = function (el) {
@@ -59182,12 +59501,16 @@ var SurveyElement = /** @class */ (function (_super) {
             _this.isAnimatingCollapseExpand = false;
         };
         return {
+            getRerenderEvent: function () { return _this.onElementRerendered; },
             getEnterOptions: function () {
                 var cssClasses = _this.isPanel ? _this.cssClasses.panel : _this.cssClasses;
                 return {
                     cssClass: cssClasses.contentFadeIn,
                     onBeforeRunAnimation: beforeRunAnimation,
-                    onAfterRunAnimation: afterRunAnimation,
+                    onAfterRunAnimation: function (el) {
+                        afterRunAnimation(el);
+                        _this.onElementExpanded(true);
+                    },
                 };
             },
             getLeaveOptions: function () {
@@ -59208,15 +59531,26 @@ var SurveyElement = /** @class */ (function (_super) {
                 }
                 return undefined;
             },
-            isAnimationEnabled: function () { return _this.animationAllowed && !_this.isDesignMode; }
+            isAnimationEnabled: function () { return _this.isExpandCollapseAnimationEnabled; }
         };
     };
+    Object.defineProperty(SurveyElement.prototype, "isExpandCollapseAnimationEnabled", {
+        get: function () {
+            return this.animationAllowed && !this.isDesignMode;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(SurveyElement.prototype, "renderedIsExpanded", {
         get: function () {
             return !!this._renderedIsExpanded;
         },
         set: function (val) {
+            var oldValue = this._renderedIsExpanded;
             this.animationCollapsed.sync(val);
+            if (!this.isExpandCollapseAnimationEnabled && !oldValue && this.renderedIsExpanded) {
+                this.onElementExpanded(false);
+            }
         },
         enumerable: false,
         configurable: true
@@ -60317,10 +60651,12 @@ var SurveyModel = /** @class */ (function (_super) {
             component: "sv-progress-requiredquestions",
             data: _this
         });
+        var tocModel = new _surveyToc__WEBPACK_IMPORTED_MODULE_24__["TOCModel"](_this);
         _this.addLayoutElement({
             id: "toc-navigation",
             component: "sv-navigation-toc",
-            data: new _surveyToc__WEBPACK_IMPORTED_MODULE_24__["TOCModel"](_this)
+            data: tocModel,
+            processResponsiveness: function (width) { return tocModel.updateStickyTOCSize(_this.rootElement); }
         });
         _this.layoutElements.push({
             id: "buttons-navigation",
@@ -63725,7 +64061,7 @@ var SurveyModel = /** @class */ (function (_super) {
         }
         var visPages = this.visiblePages;
         var res = true;
-        var rec = { fireCallback: fireCallback, focuseOnFirstError: focusOnFirstError, firstErrorQuestion: null, result: false };
+        var rec = { fireCallback: fireCallback, focusOnFirstError: focusOnFirstError, firstErrorQuestion: null, result: false };
         for (var i = 0; i < visPages.length; i++) {
             if (!visPages[i].validate(fireCallback, focusOnFirstError, rec)) {
                 res = false;
@@ -65064,7 +65400,7 @@ var SurveyModel = /** @class */ (function (_super) {
         this.onGetMatrixRowActions.fire(this, options);
         return options.actions;
     };
-    SurveyModel.prototype.scrollElementToTop = function (element, question, page, id, scrollIfVisible) {
+    SurveyModel.prototype.scrollElementToTop = function (element, question, page, id, scrollIfVisible, scrollIntoViewOptions) {
         var options = {
             element: element,
             question: question,
@@ -65074,7 +65410,7 @@ var SurveyModel = /** @class */ (function (_super) {
         };
         this.onScrollingElementToTop.fire(this, options);
         if (!options.cancel) {
-            _survey_element__WEBPACK_IMPORTED_MODULE_3__["SurveyElement"].ScrollElementToTop(options.elementId, scrollIfVisible);
+            _survey_element__WEBPACK_IMPORTED_MODULE_3__["SurveyElement"].ScrollElementToTop(options.elementId, scrollIfVisible, scrollIntoViewOptions);
         }
     };
     /**
@@ -68526,10 +68862,15 @@ function createTOCListModel(survey, onAction) {
 }
 function getTocRootCss(survey, isMobile) {
     if (isMobile === void 0) { isMobile = false; }
+    var rootCss = TOCModel.RootStyle;
     if (isMobile) {
-        return "sv_progress-toc sv_progress-toc--mobile";
+        return rootCss + " " + TOCModel.RootStyle + "--mobile";
+    }
+    rootCss += (" " + TOCModel.RootStyle + "--" + (survey.tocLocation || "").toLowerCase());
+    if (TOCModel.StickyPosition) {
+        rootCss += " " + TOCModel.RootStyle + "--sticky";
     }
-    return "sv_progress-toc" + (" sv_progress-toc--" + (survey.tocLocation || "").toLowerCase());
+    return rootCss;
 }
 var TOCModel = /** @class */ (function () {
     function TOCModel(survey) {
@@ -68543,7 +68884,37 @@ var TOCModel = /** @class */ (function () {
         this.popupModel = new _popup__WEBPACK_IMPORTED_MODULE_5__["PopupModel"]("sv-list", { model: this.listModel });
         this.popupModel.overlayDisplayMode = "overlay";
         this.popupModel.displayMode = new _base__WEBPACK_IMPORTED_MODULE_1__["ComputedUpdater"](function () { return _this.isMobile ? "overlay" : "popup"; });
+        if (TOCModel.StickyPosition) {
+            survey.onAfterRenderSurvey.add(function (s, o) { return _this.initStickyTOCSubscriptions(o.htmlElement); });
+            this.initStickyTOCSubscriptions(survey.rootElement);
+        }
     }
+    TOCModel.prototype.initStickyTOCSubscriptions = function (rootElement) {
+        var _this = this;
+        if (TOCModel.StickyPosition && !!rootElement) {
+            rootElement.addEventListener("scroll", function (event) {
+                _this.updateStickyTOCSize(rootElement);
+            });
+            this.updateStickyTOCSize(rootElement);
+        }
+    };
+    TOCModel.prototype.updateStickyTOCSize = function (rootElement) {
+        if (!rootElement) {
+            return;
+        }
+        var tocRootElement = rootElement.querySelector("." + TOCModel.RootStyle);
+        if (!!tocRootElement) {
+            tocRootElement.style.height = "";
+            if (!this.isMobile && TOCModel.StickyPosition && !!rootElement) {
+                var rootHeight = rootElement.getBoundingClientRect().height;
+                var titleSelector = this.survey.headerView === "advanced" ? ".sv-header" : ".sv_custom_header+div div." + (this.survey.css.title || "sd-title");
+                var titleElement = rootElement.querySelector(titleSelector);
+                var titleElementHeight = titleElement ? titleElement.getBoundingClientRect().height : 0;
+                var scrollCompensationHeight = rootElement.scrollTop > titleElementHeight ? 0 : titleElementHeight - rootElement.scrollTop;
+                tocRootElement.style.height = (rootHeight - scrollCompensationHeight - 2) + "px";
+            }
+        }
+    };
     Object.defineProperty(TOCModel.prototype, "isMobile", {
         get: function () {
             return this.survey.isMobile;
@@ -68562,6 +68933,8 @@ var TOCModel = /** @class */ (function () {
         this.popupModel.dispose();
         this.listModel.dispose();
     };
+    TOCModel.RootStyle = "sv_progress-toc";
+    TOCModel.StickyPosition = true;
     return TOCModel;
 }());
 
@@ -69672,8 +70045,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationBoolean", function() { return AnimationBoolean; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationGroup", function() { return AnimationGroup; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationTab", function() { return AnimationTab; });
-/* harmony import */ var _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../global_variables_utils */ "./src/global_variables_utils.ts");
-/* harmony import */ var _taskmanager__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./taskmanager */ "./src/utils/taskmanager.ts");
+/* harmony import */ var _taskmanager__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./taskmanager */ "./src/utils/taskmanager.ts");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils */ "./src/utils/utils.ts");
+/* harmony import */ var _global_variables_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../global_variables_utils */ "./src/global_variables_utils.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -69691,6 +70065,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 })();
 
 
+
 var AnimationUtils = /** @class */ (function () {
     function AnimationUtils() {
         this.cancelQueue = [];
@@ -69734,7 +70109,7 @@ var AnimationUtils = /** @class */ (function () {
         var animationsCount = this.getAnimationsCount(element);
         var onEndCallback = function (isCancel) {
             if (isCancel === void 0) { isCancel = true; }
-            options.onAfterRunAnimation && options.onAfterRunAnimation(element);
+            _this.afterAnimationRun(element, options);
             callback(isCancel);
             clearTimeout(cancelTimeout);
             _this.removeCancelCallback(onEndCallback);
@@ -69753,9 +70128,15 @@ var AnimationUtils = /** @class */ (function () {
             }, this.getAnimationDuration(element) + 10);
         }
         else {
+            this.afterAnimationRun(element, options);
             callback(true);
         }
     };
+    AnimationUtils.prototype.afterAnimationRun = function (element, options) {
+        if (element && options) {
+            options.onAfterRunAnimation && options.onAfterRunAnimation(element);
+        }
+    };
     AnimationUtils.prototype.beforeAnimationRun = function (element, options) {
         if (element && options) {
             options.onBeforeRunAnimation && options.onBeforeRunAnimation(element);
@@ -69765,7 +70146,7 @@ var AnimationUtils = /** @class */ (function () {
         return options.cssClass.replace(/\s+$/, "").split(/\s+/);
     };
     AnimationUtils.prototype.runAnimation = function (element, options, callback) {
-        if (element && options.cssClass) {
+        if (element && (options === null || options === void 0 ? void 0 : options.cssClass)) {
             this.reflow(element);
             this.getCssClasses(options).forEach(function (cssClass) {
                 element.classList.add(cssClass);
@@ -69783,30 +70164,24 @@ var AnimationUtils = /** @class */ (function () {
             });
         }
     };
-    AnimationUtils.prototype.onNextRender = function (callback, runEarly, isCancel) {
+    AnimationUtils.prototype.onNextRender = function (callback, isCancel) {
         var _this = this;
         if (isCancel === void 0) { isCancel = false; }
-        if (!isCancel && _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].isAvailable()) {
+        if (!isCancel && _global_variables_utils__WEBPACK_IMPORTED_MODULE_2__["DomWindowHelper"].isAvailable()) {
             var cancelCallback_1 = function () {
-                callback();
+                callback(true);
                 cancelAnimationFrame(latestRAF_1);
             };
-            var latestRAF_1 = _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
-                if (runEarly && runEarly()) {
-                    callback();
+            var latestRAF_1 = _global_variables_utils__WEBPACK_IMPORTED_MODULE_2__["DomWindowHelper"].requestAnimationFrame(function () {
+                latestRAF_1 = _global_variables_utils__WEBPACK_IMPORTED_MODULE_2__["DomWindowHelper"].requestAnimationFrame(function () {
+                    callback(false);
                     _this.removeCancelCallback(cancelCallback_1);
-                }
-                else {
-                    latestRAF_1 = _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
-                        callback();
-                        _this.removeCancelCallback(cancelCallback_1);
-                    });
-                }
+                });
             });
             this.addCancelCallback(cancelCallback_1);
         }
         else {
-            callback();
+            callback(true);
         }
     };
     AnimationUtils.prototype.cancel = function () {
@@ -69824,25 +70199,23 @@ var AnimationPropertyUtils = /** @class */ (function (_super) {
     }
     AnimationPropertyUtils.prototype.onEnter = function (options) {
         var _this = this;
-        this.onNextRender(function () {
-            var htmlElement = options.getAnimatedElement();
-            var enterOptions = options.getEnterOptions();
-            _this.beforeAnimationRun(htmlElement, enterOptions);
-            _this.runAnimation(htmlElement, enterOptions, function () {
-                _this.clearHtmlElement(htmlElement, enterOptions);
-            });
-        }, function () { return !!options.getAnimatedElement(); });
+        var htmlElement = options.getAnimatedElement();
+        var enterOptions = options.getEnterOptions ? options.getEnterOptions() : {};
+        this.beforeAnimationRun(htmlElement, enterOptions);
+        this.runAnimation(htmlElement, enterOptions, function () {
+            _this.clearHtmlElement(htmlElement, enterOptions);
+        });
     };
     AnimationPropertyUtils.prototype.onLeave = function (options, callback) {
         var _this = this;
         var htmlElement = options.getAnimatedElement();
-        var leaveOptions = options.getLeaveOptions();
+        var leaveOptions = options.getLeaveOptions ? options.getLeaveOptions() : {};
         this.beforeAnimationRun(htmlElement, leaveOptions);
         this.runAnimation(htmlElement, leaveOptions, function (isCancel) {
             callback();
             _this.onNextRender(function () {
                 _this.clearHtmlElement(htmlElement, leaveOptions);
-            }, undefined, isCancel);
+            }, isCancel);
         });
     };
     return AnimationPropertyUtils;
@@ -69853,40 +70226,54 @@ var AnimationGroupUtils = /** @class */ (function (_super) {
     function AnimationGroupUtils() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    AnimationGroupUtils.prototype.runGroupAnimation = function (options, addedElements, removedElements, callback) {
+    AnimationGroupUtils.prototype.runGroupAnimation = function (options, addedItems, removedItems, reorderedItems, callback) {
         var _this = this;
-        this.onNextRender(function () {
-            var addedHtmlElements = addedElements.map(function (el) { return options.getAnimatedElement(el); });
-            var enterOptions = addedElements.map(function (el) { return options.getEnterOptions(el); });
-            var removedHtmlElements = removedElements.map(function (el) { return options.getAnimatedElement(el); });
-            var leaveOptions = removedElements.map(function (el) { return options.getLeaveOptions(el); });
-            addedElements.forEach(function (_, i) {
-                _this.beforeAnimationRun(addedHtmlElements[i], enterOptions[i]);
-            });
-            removedElements.forEach(function (_, i) {
-                _this.beforeAnimationRun(removedHtmlElements[i], leaveOptions[i]);
-            });
-            var counter = addedElements.length + removedElements.length;
-            var onAnimationEndCallback = function (isCancel) {
-                if (--counter <= 0) {
-                    callback && callback();
-                    _this.onNextRender(function () {
-                        addedElements.forEach(function (_, i) {
-                            _this.clearHtmlElement(addedHtmlElements[i], enterOptions[i]);
-                        });
-                        removedElements.forEach(function (_, i) {
-                            _this.clearHtmlElement(removedHtmlElements[i], leaveOptions[i]);
-                        });
-                    }, undefined, isCancel);
-                }
-            };
-            addedElements.forEach(function (_, i) {
-                _this.runAnimation(addedHtmlElements[i], enterOptions[i], onAnimationEndCallback);
-            });
-            removedElements.forEach(function (_, i) {
-                _this.runAnimation(removedHtmlElements[i], leaveOptions[i], onAnimationEndCallback);
-            });
-        }, function () { return addedElements.length == 0 || addedElements.some(function (el) { return !!options.getAnimatedElement(el); }); });
+        var info = {
+            isAddingRunning: addedItems.length > 0,
+            isDeletingRunning: removedItems.length > 0,
+            isReorderingRunning: reorderedItems.length > 0
+        };
+        var addedHtmlElements = addedItems.map(function (el) { return options.getAnimatedElement(el); });
+        var enterOptions = addedItems.map(function (el) { return options.getEnterOptions ? options.getEnterOptions(el, info) : {}; });
+        var removedHtmlElements = removedItems.map(function (el) { return options.getAnimatedElement(el); });
+        var leaveOptions = removedItems.map(function (el) { return options.getLeaveOptions ? options.getLeaveOptions(el, info) : {}; });
+        var reorderedHtmlElements = reorderedItems.map(function (el) { return options.getAnimatedElement(el.item); });
+        var reorderedOptions = reorderedItems.map(function (el) { return options.getReorderOptions ? options.getReorderOptions(el.item, el.movedForward, info) : {}; });
+        addedItems.forEach(function (_, i) {
+            _this.beforeAnimationRun(addedHtmlElements[i], enterOptions[i]);
+        });
+        removedItems.forEach(function (_, i) {
+            _this.beforeAnimationRun(removedHtmlElements[i], leaveOptions[i]);
+        });
+        reorderedItems.forEach(function (_, i) {
+            _this.beforeAnimationRun(reorderedHtmlElements[i], reorderedOptions[i]);
+        });
+        var counter = addedItems.length + removedItems.length + reorderedHtmlElements.length;
+        var onAnimationEndCallback = function (isCancel) {
+            if (--counter <= 0) {
+                callback && callback();
+                _this.onNextRender(function () {
+                    addedItems.forEach(function (_, i) {
+                        _this.clearHtmlElement(addedHtmlElements[i], enterOptions[i]);
+                    });
+                    removedItems.forEach(function (_, i) {
+                        _this.clearHtmlElement(removedHtmlElements[i], leaveOptions[i]);
+                    });
+                    reorderedItems.forEach(function (_, i) {
+                        _this.clearHtmlElement(reorderedHtmlElements[i], reorderedOptions[i]);
+                    });
+                }, isCancel);
+            }
+        };
+        addedItems.forEach(function (_, i) {
+            _this.runAnimation(addedHtmlElements[i], enterOptions[i], onAnimationEndCallback);
+        });
+        removedItems.forEach(function (_, i) {
+            _this.runAnimation(removedHtmlElements[i], leaveOptions[i], onAnimationEndCallback);
+        });
+        reorderedItems.forEach(function (_, i) {
+            _this.runAnimation(reorderedHtmlElements[i], reorderedOptions[i], onAnimationEndCallback);
+        });
     };
     return AnimationGroupUtils;
 }(AnimationUtils));
@@ -69897,11 +70284,51 @@ var AnimationProperty = /** @class */ (function () {
         this.animationOptions = animationOptions;
         this.update = update;
         this.getCurrentValue = getCurrentValue;
-        this._debouncedSync = Object(_taskmanager__WEBPACK_IMPORTED_MODULE_1__["debounce"])(function (newValue) {
+        this._debouncedSync = Object(_taskmanager__WEBPACK_IMPORTED_MODULE_0__["debounce"])(function (newValue) {
             _this.animation.cancel();
-            _this._sync(newValue);
+            try {
+                _this._sync(newValue);
+            }
+            catch (_a) {
+                _this.update(newValue);
+            }
         });
     }
+    AnimationProperty.prototype.onNextRender = function (callback, onCancel) {
+        var _this = this;
+        var rerenderEvent = this.animationOptions.getRerenderEvent();
+        if (!rerenderEvent) {
+            if (_global_variables_utils__WEBPACK_IMPORTED_MODULE_2__["DomWindowHelper"].isAvailable()) {
+                var raf_1 = _global_variables_utils__WEBPACK_IMPORTED_MODULE_2__["DomWindowHelper"].requestAnimationFrame(function () {
+                    callback();
+                    _this.cancelCallback = undefined;
+                });
+                this.cancelCallback = function () {
+                    onCancel && onCancel();
+                    cancelAnimationFrame(raf_1);
+                    _this.cancelCallback = undefined;
+                };
+            }
+            else {
+                throw new Error("Can't get next render");
+            }
+        }
+        else {
+            var clear_1 = function () {
+                rerenderEvent.remove(nextRenderCallback_1);
+                _this.cancelCallback = undefined;
+            };
+            var nextRenderCallback_1 = function () {
+                callback();
+                clear_1();
+            };
+            this.cancelCallback = function () {
+                onCancel && onCancel();
+                clear_1();
+            };
+            rerenderEvent.add(nextRenderCallback_1);
+        }
+    };
     AnimationProperty.prototype.sync = function (newValue) {
         if (this.animationOptions.isAnimationEnabled()) {
             this._debouncedSync.run(newValue);
@@ -69912,8 +70339,9 @@ var AnimationProperty = /** @class */ (function () {
         }
     };
     AnimationProperty.prototype.cancel = function () {
-        this.animation.cancel();
         this._debouncedSync.cancel();
+        this.cancelCallback && this.cancelCallback();
+        this.animation.cancel();
     };
     return AnimationProperty;
 }());
@@ -69929,8 +70357,10 @@ var AnimationBoolean = /** @class */ (function (_super) {
         var _this = this;
         if (newValue !== this.getCurrentValue()) {
             if (newValue) {
+                this.onNextRender(function () {
+                    _this.animation.onEnter(_this.animationOptions);
+                });
                 this.update(newValue);
-                this.animation.onEnter(this.animationOptions);
             }
             else {
                 this.animation.onLeave(this.animationOptions, function () {
@@ -69954,15 +70384,34 @@ var AnimationGroup = /** @class */ (function (_super) {
     }
     AnimationGroup.prototype._sync = function (newValue) {
         var _this = this;
+        var _a, _b;
         var oldValue = this.getCurrentValue();
-        var itemsToAdd = newValue.filter(function (el) { return oldValue.indexOf(el) < 0; });
-        var deletedItems = oldValue.filter(function (el) { return newValue.indexOf(el) < 0; });
-        if (itemsToAdd.length == 0 && (deletedItems === null || deletedItems === void 0 ? void 0 : deletedItems.length) > 0) {
-            this.animation.runGroupAnimation(this.animationOptions, [], deletedItems, function () { return _this.update(newValue); });
+        var allowSyncRemovalAddition = (_a = this.animationOptions.allowSyncRemovalAddition) !== null && _a !== void 0 ? _a : true;
+        var _c = Object(_utils__WEBPACK_IMPORTED_MODULE_1__["compareArrays"])(oldValue, newValue, (_b = this.animationOptions.getKey) !== null && _b !== void 0 ? _b : (function (item) { return item; })), addedItems = _c.addedItems, deletedItems = _c.deletedItems, reorderedItems = _c.reorderedItems, mergedItems = _c.mergedItems;
+        if (!allowSyncRemovalAddition && (reorderedItems.length > 0 || addedItems.length > 0)) {
+            deletedItems = [];
+            mergedItems = newValue;
+        }
+        var runAnimationCallback = function () {
+            _this.animation.runGroupAnimation(_this.animationOptions, addedItems, deletedItems, reorderedItems, function () {
+                if (deletedItems.length > 0) {
+                    _this.update(newValue);
+                }
+            });
+        };
+        if ([addedItems, deletedItems, reorderedItems].some(function (arr) { return arr.length > 0; })) {
+            if (deletedItems.length <= 0 || reorderedItems.length > 0 || addedItems.length > 0) {
+                this.onNextRender(runAnimationCallback, function () {
+                    _this.update(newValue);
+                });
+                this.update(mergedItems);
+            }
+            else {
+                runAnimationCallback();
+            }
         }
         else {
             this.update(newValue);
-            this.animation.runGroupAnimation(this.animationOptions, itemsToAdd, []);
         }
     };
     return AnimationGroup;
@@ -69981,10 +70430,12 @@ var AnimationTab = /** @class */ (function (_super) {
         var oldValue = [].concat(this.getCurrentValue());
         if (oldValue[0] !== newValue[0]) {
             var tempValue = !!this.mergeValues ? this.mergeValues(newValue, oldValue) : [].concat(oldValue, newValue);
+            this.onNextRender(function () {
+                _this.animation.runGroupAnimation(_this.animationOptions, newValue, oldValue, [], function () {
+                    _this.update(newValue);
+                });
+            }, function () { return _this.update(newValue); });
             this.update(tempValue, true);
-            this.animation.runGroupAnimation(this.animationOptions, newValue, oldValue, function () {
-                _this.update(newValue);
-            });
         }
         else {
             this.update(newValue);
@@ -70378,16 +70829,55 @@ var DragOrClickHelper = /** @class */ (function () {
 /*!****************************!*\
   !*** ./src/utils/popup.ts ***!
   \****************************/
-/*! exports provided: PopupUtils */
+/*! exports provided: Rect, PopupUtils */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Rect", function() { return Rect; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PopupUtils", function() { return PopupUtils; });
+var Rect = /** @class */ (function () {
+    function Rect(x, y, width, height) {
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+    }
+    Object.defineProperty(Rect.prototype, "left", {
+        get: function () {
+            return this.x;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Rect.prototype, "top", {
+        get: function () {
+            return this.y;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Rect.prototype, "right", {
+        get: function () {
+            return this.x + this.width;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Rect.prototype, "bottom", {
+        get: function () {
+            return this.y + this.height;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return Rect;
+}());
+
 var PopupUtils = /** @class */ (function () {
     function PopupUtils() {
     }
-    PopupUtils.calculatePosition = function (targetRect, height, width, verticalPosition, horizontalPosition, showPointer, positionMode) {
+    PopupUtils.calculatePosition = function (targetRect, height, width, verticalPosition, horizontalPosition, positionMode) {
         if (positionMode === void 0) { positionMode = "flex"; }
         var currentLeft = targetRect.left;
         var currentTop = targetRect.top;
@@ -70405,29 +70895,33 @@ var PopupUtils = /** @class */ (function () {
             currentTop = targetRect.top - height;
         else
             currentTop = targetRect.bottom;
-        if (showPointer) {
-            if (horizontalPosition != "center" && verticalPosition != "middle") {
-                if (verticalPosition == "top") {
-                    currentTop = currentTop + targetRect.height;
-                }
-                else {
-                    currentTop = currentTop - targetRect.height;
-                }
+        if (horizontalPosition != "center" && verticalPosition != "middle") {
+            if (verticalPosition == "top") {
+                currentTop = currentTop + targetRect.height;
+            }
+            else {
+                currentTop = currentTop - targetRect.height;
             }
         }
         return { left: Math.round(currentLeft), top: Math.round(currentTop) };
     };
-    PopupUtils.getCorrectedVerticalDimensions = function (top, height, windowHeight, verticalPosition) {
+    PopupUtils.getCorrectedVerticalDimensions = function (top, height, windowHeight, verticalPosition, canShrink) {
+        if (canShrink === void 0) { canShrink = true; }
         var result;
+        var maxHeight = windowHeight - PopupUtils.bottomIndent;
         if (verticalPosition === "top") {
             result = { height: height, top: top };
         }
         if (top < 0) {
-            result = { height: height + top, top: 0 };
+            result = { height: canShrink ? height + top : height, top: 0 };
         }
         else if (height + top > windowHeight) {
-            var newHeight = Math.min(height, windowHeight - top - PopupUtils.bottomIndent);
-            result = { height: newHeight, top: top };
+            var newHeight = Math.min(height, maxHeight - top);
+            result = { height: canShrink ? newHeight : height, top: canShrink ? top : top - (height - newHeight) };
+        }
+        if (result) {
+            result.height = Math.min(result.height, maxHeight);
+            result.top = Math.max(result.top, 0);
         }
         return result;
     };
@@ -70468,18 +70962,15 @@ var PopupUtils = /** @class */ (function () {
         }
         return { width: newWidth - margins.left - margins.right, left: newLeft };
     };
-    PopupUtils.updateVerticalPosition = function (targetRect, height, verticalPosition, showPointer, windowHeight) {
-        var deltaTop = height - (targetRect.top + (showPointer ? targetRect.height : 0));
-        var deltaBottom = height +
-            targetRect.bottom -
-            (showPointer ? targetRect.height : 0) -
-            windowHeight;
+    PopupUtils.updateVerticalPosition = function (targetRect, height, horizontalPosition, verticalPosition, windowHeight) {
+        if (verticalPosition === "middle")
+            return verticalPosition;
+        var deltaTop = height - (targetRect.top + (horizontalPosition !== "center" ? targetRect.height : 0));
+        var deltaBottom = height + targetRect.bottom - (horizontalPosition !== "center" ? targetRect.height : 0) - windowHeight;
         if (deltaTop > 0 && deltaBottom <= 0 && verticalPosition == "top") {
             verticalPosition = "bottom";
         }
-        else if (deltaBottom > 0 &&
-            deltaTop <= 0 &&
-            verticalPosition == "bottom") {
+        else if (deltaBottom > 0 && deltaTop <= 0 && verticalPosition == "bottom") {
             verticalPosition = "top";
         }
         else if (deltaBottom > 0 && deltaTop > 0) {
@@ -70487,6 +70978,22 @@ var PopupUtils = /** @class */ (function () {
         }
         return verticalPosition;
     };
+    PopupUtils.updateHorizontalPosition = function (targetRect, width, horizontalPosition, windowWidth) {
+        if (horizontalPosition === "center")
+            return horizontalPosition;
+        var deltaLeft = width - targetRect.left;
+        var deltaRight = width + targetRect.right - windowWidth;
+        if (deltaLeft > 0 && deltaRight <= 0 && horizontalPosition == "left") {
+            horizontalPosition = "right";
+        }
+        else if (deltaRight > 0 && deltaLeft <= 0 && horizontalPosition == "right") {
+            horizontalPosition = "left";
+        }
+        else if (deltaRight > 0 && deltaLeft > 0) {
+            horizontalPosition = deltaLeft < deltaRight ? "left" : "right";
+        }
+        return horizontalPosition;
+    };
     PopupUtils.calculatePopupDirection = function (verticalPosition, horizontalPosition) {
         var popupDirection;
         if (horizontalPosition == "center" && verticalPosition != "middle") {
@@ -70851,7 +71358,7 @@ function debounce(func) {
 /*!****************************!*\
   !*** ./src/utils/utils.ts ***!
   \****************************/
-/*! exports provided: unwrap, getRenderedSize, getRenderedStyleSize, doKey2ClickBlur, doKey2ClickUp, doKey2ClickDown, sanitizeEditableContent, Logger, showConfirmDialog, configConfirmDialog, mergeValues, getElementWidth, isContainerVisible, classesToSelector, compareVersions, confirmAction, confirmActionAsync, detectIEOrEdge, detectIEBrowser, loadFileFromBase64, isMobile, isShadowDOM, getElement, isElementVisible, findScrollableParent, scrollElementByChildId, navigateToUrl, wrapUrlForBackgroundImage, createSvg, getIconNameFromProxy, increaseHeightByContent, getOriginalEvent, preventDefaults, findParentByClassNames, getFirstVisibleChild, chooseFiles */
+/*! exports provided: unwrap, getRenderedSize, getRenderedStyleSize, doKey2ClickBlur, doKey2ClickUp, doKey2ClickDown, sanitizeEditableContent, Logger, showConfirmDialog, configConfirmDialog, compareArrays, mergeValues, getElementWidth, isContainerVisible, classesToSelector, compareVersions, confirmAction, confirmActionAsync, detectIEOrEdge, detectIEBrowser, loadFileFromBase64, isMobile, isShadowDOM, getElement, isElementVisible, findScrollableParent, scrollElementByChildId, navigateToUrl, wrapUrlForBackgroundImage, createSvg, getIconNameFromProxy, increaseHeightByContent, getOriginalEvent, preventDefaults, findParentByClassNames, getFirstVisibleChild, chooseFiles */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -70866,6 +71373,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Logger", function() { return Logger; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "showConfirmDialog", function() { return showConfirmDialog; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "configConfirmDialog", function() { return configConfirmDialog; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "compareArrays", function() { return compareArrays; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "mergeValues", function() { return mergeValues; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getElementWidth", function() { return getElementWidth; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isContainerVisible", function() { return isContainerVisible; });
@@ -71186,6 +71694,8 @@ function preventDefaults(event) {
     event.stopPropagation();
 }
 function classesToSelector(str) {
+    if (!str)
+        return str;
     var re = /\s*?([\w-]+)\s*?/g;
     return str.replace(re, ".$1");
 }
@@ -71334,6 +71844,100 @@ function chooseFiles(input, callback) {
     };
     input.click();
 }
+function compareArrays(oldValue, newValue, getKey) {
+    var oldItemsMap = new Map();
+    var newItemsMap = new Map();
+    var commonItemsInNewMap = new Map();
+    var commonItemsInOldMap = new Map();
+    oldValue.forEach(function (item) {
+        var itemKey = getKey(item);
+        if (!oldItemsMap.has(itemKey)) {
+            oldItemsMap.set(getKey(item), item);
+        }
+        else {
+            //if keys are set incorrectly do not process comparing
+            throw new Error("keys must be unique");
+        }
+    });
+    newValue.forEach(function (item) {
+        var itemKey = getKey(item);
+        if (!newItemsMap.has(itemKey)) {
+            newItemsMap.set(itemKey, item);
+        }
+        else {
+            //if keys are set incorrectly do not process comparing
+            throw new Error("keys must be unique");
+        }
+    });
+    var addedItems = [];
+    var deletedItems = [];
+    //calculating addedItems and items that exist in both arrays
+    newItemsMap.forEach(function (item, key) {
+        if (!oldItemsMap.has(key)) {
+            addedItems.push(item);
+        }
+        else {
+            commonItemsInNewMap.set(key, commonItemsInNewMap.size);
+        }
+    });
+    //calculating deletedItems and items that exist in both arrays
+    oldItemsMap.forEach(function (item, key) {
+        if (!newItemsMap.has(key)) {
+            deletedItems.push(item);
+        }
+        else {
+            commonItemsInOldMap.set(key, commonItemsInOldMap.size);
+        }
+    });
+    //calculating reordered items
+    var reorderedItems = [];
+    commonItemsInNewMap.forEach(function (index, key) {
+        var oldIndex = commonItemsInOldMap.get(key);
+        var item = newItemsMap.get(key);
+        if (oldIndex !== index)
+            reorderedItems.push({ item: item, movedForward: oldIndex < index });
+    });
+    //calculating merged array if multiple operations are applied at once
+    var oldItemsWithCorrectOrder = new Array(oldValue.length);
+    var commonItemsIndex = 0;
+    var commonItemsKeysOrder = Array.from(commonItemsInNewMap.keys());
+    oldValue.forEach(function (item, index) {
+        if (commonItemsInNewMap.has(getKey(item))) {
+            oldItemsWithCorrectOrder[index] = newItemsMap.get(commonItemsKeysOrder[commonItemsIndex]);
+            commonItemsIndex++;
+        }
+        else {
+            oldItemsWithCorrectOrder[index] = item;
+        }
+    });
+    var valuesToInsertBeforeKey = new Map();
+    var tempValuesArray = [];
+    oldItemsWithCorrectOrder.forEach(function (item) {
+        var itemKey = getKey(item);
+        if (newItemsMap.has(itemKey)) {
+            if (tempValuesArray.length > 0) {
+                valuesToInsertBeforeKey.set(itemKey, tempValuesArray);
+                tempValuesArray = [];
+            }
+        }
+        else {
+            tempValuesArray.push(item);
+        }
+    });
+    var mergedItems = new Array();
+    newItemsMap.forEach(function (item, key) {
+        if (valuesToInsertBeforeKey.has(key)) {
+            valuesToInsertBeforeKey.get(key).forEach(function (item) {
+                mergedItems.push(item);
+            });
+        }
+        mergedItems.push(item);
+    });
+    tempValuesArray.forEach(function (item) {
+        mergedItems.push(item);
+    });
+    return { reorderedItems: reorderedItems, deletedItems: deletedItems, addedItems: addedItems, mergedItems: mergedItems };
+}