survey-core 1.10.5 → 1.11.1

package/survey.core.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.10.5
+ * 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)
  */
@@ -686,13 +686,14 @@ class SignaturePad extends SignatureEventTarget {
 /*!*******************************!*\
   !*** ./src/actions/action.ts ***!
   \*******************************/
-/*! exports provided: createDropdownActionModel, createDropdownActionModelAdvanced, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel */
+/*! exports provided: createDropdownActionModel, createDropdownActionModelAdvanced, createPopupModelWithListModel, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "createDropdownActionModel", function() { return createDropdownActionModel; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "createDropdownActionModelAdvanced", function() { return createDropdownActionModelAdvanced; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "createPopupModelWithListModel", function() { return createPopupModelWithListModel; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getActionDropdownButtonTarget", function() { return getActionDropdownButtonTarget; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "BaseAction", function() { return BaseAction; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Action", function() { return Action; });
@@ -725,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;
+};
 
 
 
@@ -733,36 +739,57 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 function createDropdownActionModel(actionOptions, dropdownOptions, locOwner) {
-    return createDropdownActionModelAdvanced(actionOptions, dropdownOptions, dropdownOptions, locOwner);
+    dropdownOptions.locOwner = locOwner;
+    return createDropdownActionModelAdvanced(actionOptions, dropdownOptions, dropdownOptions);
 }
-function createDropdownActionModelAdvanced(actionOptions, listOptions, popupOptions, locOwner) {
-    var listModel = new _list__WEBPACK_IMPORTED_MODULE_3__["ListModel"](listOptions.items, function (item) {
+function createDropdownActionModelAdvanced(actionOptions, listOptions, popupOptions) {
+    var _a;
+    var originalSelectionChanged = listOptions.onSelectionChanged;
+    listOptions.onSelectionChanged = function (item) {
+        var params = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            params[_i - 1] = arguments[_i];
+        }
         if (newAction.hasTitle) {
             newAction.title = item.title;
         }
-        listOptions.onSelectionChanged(item);
-        innerPopupModel.toggleVisibility();
-    }, listOptions.allowSelection, listOptions.selectedItem);
-    listModel.locOwner = locOwner;
-    listModel.setOnFilterStringChangedCallback(listOptions.onFilterStringChangedCallback);
-    var options = popupOptions || {};
-    options.onDispose = function () { listModel.dispose(); };
-    var innerPopupModel = new _popup__WEBPACK_IMPORTED_MODULE_4__["PopupModel"]("sv-list", { model: listModel }, options);
-    innerPopupModel.displayMode = popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.displayMode;
+        if (originalSelectionChanged) {
+            originalSelectionChanged(item, params);
+        }
+    };
+    var popupModel = createPopupModelWithListModel(listOptions, popupOptions);
     var newActionOptions = Object.assign({}, actionOptions, {
         component: "sv-action-bar-item-dropdown",
-        popupModel: innerPopupModel,
+        popupModel: popupModel,
         action: function (action, isUserAction) {
             !!(actionOptions.action) && actionOptions.action();
-            innerPopupModel.isFocusedContent = !isUserAction || listModel.showFilter;
-            innerPopupModel.toggleVisibility();
-            listModel.scrollToSelectedItem();
+            popupModel.isFocusedContent = popupModel.isFocusedContent || !isUserAction;
+            popupModel.show();
         },
     });
     var newAction = new Action(newActionOptions);
-    newAction.data = listModel;
+    newAction.data = (_a = popupModel.contentComponentData) === null || _a === void 0 ? void 0 : _a.model;
     return newAction;
 }
+function createPopupModelWithListModel(listOptions, popupOptions) {
+    var listModel = new _list__WEBPACK_IMPORTED_MODULE_3__["ListModel"](listOptions);
+    listModel.onSelectionChanged = function (item) {
+        if (listOptions.onSelectionChanged) {
+            listOptions.onSelectionChanged(item);
+        }
+        popupModel.hide();
+    };
+    var _popupOptions = popupOptions || {};
+    _popupOptions.onDispose = function () { listModel.dispose(); };
+    var popupModel = new _popup__WEBPACK_IMPORTED_MODULE_4__["PopupModel"]("sv-list", { model: listModel }, _popupOptions);
+    popupModel.isFocusedContent = listModel.showFilter;
+    popupModel.onShow = function () {
+        if (!!_popupOptions.onShow)
+            _popupOptions.onShow();
+        listModel.scrollToSelectedItem();
+    };
+    return popupModel;
+}
 function getActionDropdownButtonTarget(container) {
     return container === null || container === void 0 ? void 0 : container.previousElementSibling;
 }
@@ -771,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++; };
@@ -914,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"])()
@@ -975,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"]));
 
@@ -1015,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;
     };
@@ -1231,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;
@@ -1299,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); }; });
@@ -1560,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;
     };
@@ -1595,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"]));
 
@@ -1870,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();
@@ -2798,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--;
@@ -2806,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;
 }());
@@ -2849,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;
         }
@@ -5588,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: {
@@ -5647,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"
@@ -5990,6 +6114,7 @@ var defaultV2Css = {
         dragElementDecorator: "sd-drag-element__svg",
         iconDragElement: "#icon-v2dragelement_16x16",
         footer: "sd-matrixdynamic__footer",
+        footerTotalCell: "sd-table__cell sd-table__cell--footer-total",
         emptyRowsSection: "sd-matrixdynamic__placeholder sd-question__placeholder",
         iconDrag: "sv-matrixdynamic__drag-icon",
         ghostRow: "sv-matrix-row--drag-drop-ghost-mod",
@@ -6100,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",
@@ -7667,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 ||
@@ -7690,6 +7816,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var DragDropRankingChoices = /** @class */ (function (_super) {
     __extends(DragDropRankingChoices, _super);
     function DragDropRankingChoices() {
@@ -7699,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;
@@ -7717,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";
@@ -7735,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,
@@ -7757,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;
@@ -7820,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"]));
 
 
 
@@ -7836,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 ||
@@ -7854,7 +7987,6 @@ var __extends = (undefined && undefined.__extends) || (function () {
     };
 })();
 
-
 var DragDropRankingSelectToRank = /** @class */ (function (_super) {
     __extends(DragDropRankingSelectToRank, _super);
     function DragDropRankingSelectToRank() {
@@ -7871,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) {
@@ -7940,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;
@@ -8007,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"]));
 
 
 
@@ -8264,10 +8324,17 @@ var DropdownListModel = /** @class */ (function (_super) {
                 _this.question.value = item.id;
                 if (_this.question.searchEnabled)
                     _this.applyInputString(item);
-                _this.popupModel.isVisible = false;
+                _this.popupModel.hide();
             };
         }
-        var res = new _list__WEBPACK_IMPORTED_MODULE_4__["ListModel"](visibleItems, _onSelectionChanged, false, undefined, this.listElementId);
+        var listOptions = {
+            items: visibleItems,
+            onSelectionChanged: _onSelectionChanged,
+            allowSelection: false,
+            locOwner: this.question,
+            elementId: this.listElementId
+        };
+        var res = new _list__WEBPACK_IMPORTED_MODULE_4__["ListModel"](listOptions);
         this.setOnTextSearchCallbackForListModel(res);
         res.renderElements = false;
         res.forceShowFilter = true;
@@ -8279,7 +8346,6 @@ var DropdownListModel = /** @class */ (function (_super) {
     DropdownListModel.prototype.updateAfterListModelCreated = function (model) {
         var _this = this;
         model.isItemSelected = function (action) { return !!action.selected; };
-        model.locOwner = this.question;
         model.onPropertyChanged.add(function (sender, options) {
             if (options.name == "hasVerticalScroller") {
                 _this.hasScroll = options.newValue;
@@ -8311,7 +8377,7 @@ var DropdownListModel = /** @class */ (function (_super) {
         this.question.survey.onChoicesSearch.fire(this.question.survey, options);
         this.filteredItems = options.filteredChoices;
         if (!!this.filterString && !this.popupModel.isVisible) {
-            this.popupModel.isVisible = true;
+            this.popupModel.show();
         }
         var updateAfterFilterStringChanged = function () {
             _this.setFilterStringToListModel(_this.filterString);
@@ -8532,7 +8598,7 @@ var DropdownListModel = /** @class */ (function (_super) {
     };
     DropdownListModel.prototype.onClear = function (event) {
         this.question.clearValue(true);
-        this._popupModel.isVisible = false;
+        this._popupModel.hide();
         if (event) {
             event.preventDefault();
             event.stopPropagation();
@@ -8588,19 +8654,17 @@ var DropdownListModel = /** @class */ (function (_super) {
             event.stopPropagation();
         }
         else if (event.keyCode === 40) {
-            if (!this.popupModel.isVisible) {
-                this.popupModel.toggleVisibility();
-            }
+            this.popupModel.show();
             this.changeSelectionWithKeyboard(false);
             event.preventDefault();
             event.stopPropagation();
         }
         if (event.keyCode === 9) {
-            this.popupModel.isVisible = false;
+            this.popupModel.hide();
         }
         else if (!this.popupModel.isVisible && (event.keyCode === 13 || event.keyCode === 32)) {
             if (event.keyCode === 32) {
-                this.popupModel.toggleVisibility();
+                this.popupModel.show();
                 this.changeSelectionWithKeyboard(false);
             }
             if (event.keyCode === 13) {
@@ -8611,7 +8675,7 @@ var DropdownListModel = /** @class */ (function (_super) {
         }
         else if (this.popupModel.isVisible && (event.keyCode === 13 || event.keyCode === 32 && (!this.question.searchEnabled || !this.inputString))) {
             if (event.keyCode === 13 && this.question.searchEnabled && !this.inputString && this.question instanceof _question_dropdown__WEBPACK_IMPORTED_MODULE_6__["QuestionDropdownModel"] && !this._markdownMode && this.question.value) {
-                this._popupModel.isVisible = false;
+                this._popupModel.hide();
                 this.onClear(event);
             }
             else {
@@ -8627,7 +8691,7 @@ var DropdownListModel = /** @class */ (function (_super) {
             }
         }
         else if (event.keyCode === 27) {
-            this._popupModel.isVisible = false;
+            this._popupModel.hide();
             this.hintString = "";
             this.onEscape();
         }
@@ -8655,11 +8719,11 @@ var DropdownListModel = /** @class */ (function (_super) {
     DropdownListModel.prototype.onBlur = function (event) {
         this.focused = false;
         if (this.popupModel.isVisible && _utils_devices__WEBPACK_IMPORTED_MODULE_9__["IsTouch"]) {
-            this._popupModel.isVisible = true;
+            this._popupModel.show();
             return;
         }
         Object(_utils_utils__WEBPACK_IMPORTED_MODULE_10__["doKey2ClickBlur"])(event);
-        this._popupModel.isVisible = false;
+        this._popupModel.hide();
         this.resetFilterString();
         this.inputString = null;
         this.hintString = "";
@@ -8850,7 +8914,14 @@ var DropdownMultiSelectListModel = /** @class */ (function (_super) {
                 }
             };
         }
-        var res = new _multiSelectListModel__WEBPACK_IMPORTED_MODULE_3__["MultiSelectListModel"](visibleItems, _onSelectionChanged, false, undefined, this.listElementId);
+        var listOptions = {
+            items: visibleItems,
+            onSelectionChanged: _onSelectionChanged,
+            allowSelection: false,
+            locOwner: this.question,
+            elementId: this.listElementId
+        };
+        var res = new _multiSelectListModel__WEBPACK_IMPORTED_MODULE_3__["MultiSelectListModel"](listOptions);
         res.actions.forEach(function (a) { return a.disableTabStop = true; });
         this.setOnTextSearchCallbackForListModel(res);
         res.forceShowFilter = true;
@@ -9714,8 +9785,8 @@ __webpack_require__.r(__webpack_exports__);
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.10.5";
-ReleaseDate = "" + "2024-05-20";
+Version = "" + "1.11.1";
+ReleaseDate = "" + "2024-06-06";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -9896,7 +9967,7 @@ function checkPrefix(prefix) {
 /*!**************************************!*\
   !*** ./src/entries/core-wo-model.ts ***!
   \**************************************/
-/*! exports provided: Version, ReleaseDate, checkLibraryVersion, setLicenseKey, slk, hasLicense, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedErrorRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, MultipleTextCell, MultipleTextErrorCell, MutlipleTextErrorRow, MutlipleTextRow, QuestionMultipleTextModel, MultipleTextEditorModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryFocusPage, createTOCListModel, getTocRootCss, TOCModel, SurveyProgressModel, ProgressButtons, ProgressButtonsResponsivityManager, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, SurveyTriggerSkip, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, Cover, CoverCell, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, confirmActionAsync, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, chooseFiles, sanitizeEditableContent, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper */
+/*! exports provided: Version, ReleaseDate, checkLibraryVersion, setLicenseKey, slk, hasLicense, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedErrorRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, MultipleTextCell, MultipleTextErrorCell, MutlipleTextErrorRow, MutlipleTextRow, QuestionMultipleTextModel, MultipleTextEditorModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryFocusPage, createTOCListModel, getTocRootCss, TOCModel, SurveyProgressModel, ProgressButtons, ProgressButtonsResponsivityManager, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, SurveyTriggerSkip, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, Cover, CoverCell, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, confirmActionAsync, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, chooseFiles, sanitizeEditableContent, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, createPopupModelWithListModel, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -10333,6 +10404,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "createDropdownActionModelAdvanced", function() { return _actions_action__WEBPACK_IMPORTED_MODULE_7__["createDropdownActionModelAdvanced"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "createPopupModelWithListModel", function() { return _actions_action__WEBPACK_IMPORTED_MODULE_7__["createPopupModelWithListModel"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getActionDropdownButtonTarget", function() { return _actions_action__WEBPACK_IMPORTED_MODULE_7__["getActionDropdownButtonTarget"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "BaseAction", function() { return _actions_action__WEBPACK_IMPORTED_MODULE_7__["BaseAction"]; });
@@ -10391,7 +10464,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!*****************************!*\
   !*** ./src/entries/core.ts ***!
   \*****************************/
-/*! exports provided: Version, ReleaseDate, checkLibraryVersion, setLicenseKey, slk, hasLicense, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedErrorRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, MultipleTextCell, MultipleTextErrorCell, MutlipleTextErrorRow, MutlipleTextRow, QuestionMultipleTextModel, MultipleTextEditorModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryFocusPage, createTOCListModel, getTocRootCss, TOCModel, SurveyProgressModel, ProgressButtons, ProgressButtonsResponsivityManager, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, SurveyTriggerSkip, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, Cover, CoverCell, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, confirmActionAsync, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, chooseFiles, sanitizeEditableContent, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper, Model */
+/*! exports provided: Version, ReleaseDate, checkLibraryVersion, setLicenseKey, slk, hasLicense, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedErrorRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, MultipleTextCell, MultipleTextErrorCell, MutlipleTextErrorRow, MutlipleTextRow, QuestionMultipleTextModel, MultipleTextEditorModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryFocusPage, createTOCListModel, getTocRootCss, TOCModel, SurveyProgressModel, ProgressButtons, ProgressButtonsResponsivityManager, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, SurveyTriggerSkip, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, Cover, CoverCell, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, confirmActionAsync, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, chooseFiles, sanitizeEditableContent, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, createPopupModelWithListModel, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper, Model */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -10821,6 +10894,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "createDropdownActionModelAdvanced", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["createDropdownActionModelAdvanced"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "createPopupModelWithListModel", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["createPopupModelWithListModel"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getActionDropdownButtonTarget", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["getActionDropdownButtonTarget"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "BaseAction", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["BaseAction"]; });
@@ -14821,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; }
@@ -15353,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) {
@@ -15368,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;
@@ -15440,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];
@@ -15451,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) {
@@ -15470,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;
@@ -15492,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)
@@ -15503,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)
@@ -15513,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)
@@ -15523,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)
@@ -15534,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) {
@@ -15555,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;
@@ -16786,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",
@@ -17270,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 ***!
@@ -20178,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",
@@ -20205,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;
         };
@@ -20231,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();
@@ -20239,8 +20350,28 @@ var ListModel = /** @class */ (function (_super) {
             var level = itemValue.level || 0;
             return (level + 1) * ListModel.INDENT + "px";
         };
-        _this.setItems(items);
-        _this.selectedItem = selectedItem;
+        if (Object.keys(items).indexOf("items") !== -1) {
+            var options_1 = items;
+            Object.keys(options_1).forEach(function (key) {
+                switch (key) {
+                    case "items":
+                        _this.setItems(options_1.items);
+                        break;
+                    case "onFilterStringChangedCallback":
+                        _this.setOnFilterStringChangedCallback(options_1.onFilterStringChangedCallback);
+                        break;
+                    case "onTextSearchCallback":
+                        _this.setOnTextSearchCallback(options_1.onTextSearchCallback);
+                        break;
+                    default:
+                        _this[key] = options_1[key];
+                }
+            });
+        }
+        else {
+            _this.setItems(items);
+            _this.selectedItem = selectedItem;
+        }
         return _this;
     }
     ListModel.prototype.hasText = function (item, filterStringInLow) {
@@ -20256,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;
@@ -20316,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);
@@ -20467,6 +20626,7 @@ var ListModel = /** @class */ (function (_super) {
     };
     ListModel.prototype.addScrollEventListener = function (handler) {
         if (!!handler) {
+            this.removeScrollEventListener();
             this.scrollHandler = handler;
         }
         if (!!this.scrollHandler) {
@@ -22915,12 +23075,53 @@ var InputMaskNumeric = /** @class */ (function (_super) {
             if (Number.isNaN(value)) {
                 return true;
             }
+            if (value >= min && value <= max)
+                return true;
             if (!matchWholeMask) {
+                if (!number.hasDecimalSeparator) {
+                    var test_high = value;
+                    var test_low = value;
+                    if (value >= 0) {
+                        if (value + 1 > min && value <= max)
+                            return true;
+                        while (true) {
+                            test_high = test_high * 10 + 9;
+                            test_low = test_low * 10;
+                            if (test_low > max) {
+                                break;
+                            }
+                            if (test_high > min) {
+                                return true;
+                            }
+                        }
+                        return false;
+                    }
+                    if (value < 0) {
+                        if (value >= min && value - 1 < max)
+                            return true;
+                        while (true) {
+                            test_high = test_high * 10;
+                            test_low = test_low * 10 - 9;
+                            if (test_high < min) {
+                                break;
+                            }
+                            if (test_low < max) {
+                                return true;
+                            }
+                        }
+                        return false;
+                    }
+                }
+                else {
+                    var delta = Math.pow(0.1, (number.fractionalPart || "").length);
+                    if (value >= 0)
+                        return value + delta > min && value <= max;
+                    if (value < 0)
+                        return value >= min && value - delta < max;
+                }
                 return value >= 0 && value <= max || value < 0 && value >= min;
             }
-            else {
-                return value >= min && value <= max;
-            }
+            return false;
         }
         return true;
     };
@@ -23316,8 +23517,8 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 var MultiSelectListModel = /** @class */ (function (_super) {
     __extends(MultiSelectListModel, _super);
-    function MultiSelectListModel(items, onSelectionChanged, allowSelection, selectedItems, elementId) {
-        var _this = _super.call(this, items, onSelectionChanged, allowSelection, undefined, elementId) || this;
+    function MultiSelectListModel(options) {
+        var _this = _super.call(this, options) || this;
         _this.onItemClick = function (item) {
             if (_this.isItemDisabled(item))
                 return;
@@ -23337,7 +23538,7 @@ var MultiSelectListModel = /** @class */ (function (_super) {
         _this.isItemSelected = function (itemValue) {
             return !!_this.allowSelection && _this.selectedItems.filter(function (item) { return _this.areSameItems(item, itemValue); }).length > 0;
         };
-        _this.setSelectedItems(selectedItems || []);
+        _this.setSelectedItems(options.selectedItems || []);
         return _this;
     }
     MultiSelectListModel.prototype.updateItemState = function () {
@@ -23672,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) {
@@ -23696,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);
         }
@@ -23978,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;
@@ -24068,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;
@@ -24148,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++) {
@@ -24284,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 (_) {
@@ -24291,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
                 };
             }
@@ -24557,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) {
@@ -24575,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;
@@ -24896,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 () {
@@ -24950,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)
@@ -24967,7 +25170,10 @@ var PanelModelBase = /** @class */ (function (_super) {
             else {
                 var question = element;
                 if (!question.validate(rec.fireCallback, rec)) {
-                    if (rec.focuseOnFirstError && rec.firstErrorQuestion == null) {
+                    if (!firstErroredEl) {
+                        firstErroredEl = question;
+                    }
+                    if (!rec.firstErrorQuestion) {
                         rec.firstErrorQuestion = question;
                     }
                     rec.result = true;
@@ -24976,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);
@@ -25488,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", {
         /**
@@ -26099,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)
@@ -26288,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))
@@ -26430,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();
@@ -26470,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;
@@ -26491,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;
@@ -26518,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) {
@@ -26555,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 () {
@@ -26716,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,
@@ -27343,9 +27578,11 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
                 if (!val) {
                     _this.updateOnHiding();
                     _this.updateIsVisible(val);
+                    _this.updateAfterHiding();
                     _this._isPositionSetValue = false;
                 }
                 else {
+                    _this.updateBeforeShowing();
                     _this.updateIsVisible(val);
                 }
             }
@@ -27363,8 +27600,18 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
         this._isVisible = val;
         this.onVisibilityChanged.fire(this, { isVisible: val });
     };
+    PopupBaseViewModel.prototype.updateBeforeShowing = function () {
+        this.model.onShow();
+    };
+    PopupBaseViewModel.prototype.updateAfterHiding = function () {
+        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" };
@@ -27375,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);
@@ -27659,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;
         }
@@ -27790,13 +28038,6 @@ var PopupModel = /** @class */ (function (_super) {
             }
             this.setPropertyValue("isVisible", value);
             this.onVisibilityChanged.fire(this, { model: this, isVisible: value });
-            if (this.isVisible) {
-                this.onShow();
-            }
-            else {
-                this.refreshInnerModel();
-                this.onHide();
-            }
         },
         enumerable: false,
         configurable: true
@@ -27804,6 +28045,14 @@ var PopupModel = /** @class */ (function (_super) {
     PopupModel.prototype.toggleVisibility = function () {
         this.isVisible = !this.isVisible;
     };
+    PopupModel.prototype.show = function () {
+        if (!this.isVisible)
+            this.isVisible = true;
+    };
+    PopupModel.prototype.hide = function () {
+        if (this.isVisible)
+            this.isVisible = false;
+    };
     PopupModel.prototype.recalculatePosition = function (isResetHeight) {
         this.onRecalculatePosition.fire(this, { isResetHeight: isResetHeight });
     };
@@ -27812,6 +28061,10 @@ var PopupModel = /** @class */ (function (_super) {
         this.onFooterActionsCreated.fire(this, options);
         return options.actions;
     };
+    PopupModel.prototype.onHiding = function () {
+        this.refreshInnerModel();
+        this.onHide();
+    };
     PopupModel.prototype.dispose = function () {
         _super.prototype.dispose.call(this);
         this.onDispose();
@@ -27834,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);
@@ -29308,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", {
@@ -29550,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
@@ -29560,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)
@@ -29776,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);
@@ -30391,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();
@@ -30467,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)
@@ -30819,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,
@@ -30836,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
@@ -30876,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) {
@@ -31477,8 +31754,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("question", [
         visibleIf: function (obj) {
             return obj.showCommentArea;
         },
-        serializationProperty: "locCommentText",
-        layout: "row",
+        serializationProperty: "locCommentText"
     },
     {
         name: "commentPlaceholder",
@@ -31883,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 () {
@@ -31891,6 +32176,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
             return this.otherValueCore;
         },
         set: function (val) {
+            this.updatePrevOtherErrorValue(val);
             if (!this.showCommentArea) {
                 this.comment = val;
             }
@@ -32343,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;
@@ -32387,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)) {
@@ -32920,13 +33209,18 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         }
     };
     QuestionSelectBase.prototype.addNewItemToVisibleChoices = function (items, isAddAll) {
+        var _this = this;
         if (!isAddAll)
             return;
         if (!this.newItemValue) {
             this.newItemValue = this.createItemValue("newitem"); //TODO
             this.newItemValue.isGhost = true;
+            this.newItemValue.registerFunctionOnPropertyValueChanged("isVisible", function () {
+                _this.updateVisibleChoices();
+            });
         }
-        if (!this.isUsingCarryForward && this.canShowOptionItem(this.newItemValue, isAddAll, false)) {
+        if (this.newItemValue.isVisible && !this.isUsingCarryForward
+            && this.canShowOptionItem(this.newItemValue, isAddAll, false)) {
             this.footItemsCount = 1;
             items.push(this.newItemValue);
         }
@@ -33017,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 () {
@@ -33243,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; };
@@ -33840,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);
@@ -34222,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 () {
@@ -34427,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)
@@ -35046,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;
@@ -36930,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];
         }
@@ -38319,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);
@@ -39234,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;
@@ -40605,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();
@@ -41443,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();
@@ -41565,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;
@@ -41574,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;
     };
@@ -42037,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;
@@ -42063,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++) {
@@ -45295,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;
@@ -45317,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;
@@ -45798,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();
@@ -45822,6 +46199,7 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
             isAnimationEnabled: function () {
                 return _this.animationAllowed;
             },
+            getRerenderEvent: function () { return _this.onElementRerendered; },
             getAnimatedElement: function (el) {
                 return el.getRootElement();
             },
@@ -46682,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) {
@@ -49832,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) {
@@ -51336,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;
@@ -52168,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 () {
@@ -52240,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 ||
@@ -52273,6 +52654,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 /**
  * A class that describes the Ranking question type.
  *
@@ -52292,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))
@@ -52342,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);
@@ -52349,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);
@@ -52383,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();
@@ -52442,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) {
@@ -52458,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)
@@ -52522,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();
@@ -52543,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" };
                 }
@@ -52563,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", {
@@ -52582,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; }
@@ -52616,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) {
@@ -52627,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 = [];
@@ -52707,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; };
@@ -52735,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);
@@ -52758,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();
@@ -52800,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.
@@ -52889,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);
@@ -52976,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");
@@ -53619,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);
         }
@@ -55680,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 () {
@@ -56155,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");
@@ -57963,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)
@@ -59059,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) {
@@ -59069,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 () {
@@ -59095,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
@@ -60164,7 +60611,7 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.onPopupVisibleChanged.add(function (_, opt) {
             if (opt.visible) {
                 _this.onScrollCallback = function () {
-                    opt.popup.toggleVisibility();
+                    opt.popup.hide();
                 };
             }
             else {
@@ -60204,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",
@@ -63472,7 +63921,7 @@ var SurveyModel = /** @class */ (function (_super) {
         if (this.isValidateOnComplete) {
             if (!this.isLastPage)
                 return false;
-            return this.validate(true, true, func) !== true && !skipValidation;
+            return this.validate(true, this.focusOnFirstError, func, true) !== true && !skipValidation;
         }
         return this.validateCurrentPage(func) !== true && !skipValidation;
     };
@@ -63604,25 +64053,27 @@ var SurveyModel = /** @class */ (function (_super) {
      * @see validateCurrentPage
      * @see validatePage
      */
-    SurveyModel.prototype.validate = function (fireCallback, focusOnFirstError, onAsyncValidation) {
+    SurveyModel.prototype.validate = function (fireCallback, focusOnFirstError, onAsyncValidation, changeCurrentPage) {
         if (fireCallback === void 0) { fireCallback = true; }
         if (focusOnFirstError === void 0) { focusOnFirstError = false; }
         if (!!onAsyncValidation) {
             fireCallback = true;
         }
         var visPages = this.visiblePages;
-        var firstErrorPage = null;
         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)) {
-                if (!firstErrorPage)
-                    firstErrorPage = visPages[i];
                 res = false;
             }
         }
-        if (focusOnFirstError && !!firstErrorPage && !!rec.firstErrorQuestion) {
-            rec.firstErrorQuestion.focus(true);
+        if (!!rec.firstErrorQuestion && (focusOnFirstError || changeCurrentPage)) {
+            if (focusOnFirstError) {
+                rec.firstErrorQuestion.focus(true);
+            }
+            else {
+                this.currentPage = rec.firstErrorQuestion.page;
+            }
         }
         if (!res || !onAsyncValidation)
             return res;
@@ -64949,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,
@@ -64959,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);
         }
     };
     /**
@@ -65611,6 +66062,12 @@ var SurveyModel = /** @class */ (function (_super) {
         }
         this.isTriggerIsRunning = false;
     };
+    SurveyModel.prototype.checkTriggersAndRunConditions = function (name, newValue, oldValue) {
+        var triggerKeys = {};
+        triggerKeys[name] = { newValue: newValue, oldValue: oldValue };
+        this.runConditionOnValueChanged(name, newValue);
+        this.checkTriggers(triggerKeys, false, false, name);
+    };
     Object.defineProperty(SurveyModel.prototype, "hasRequiredValidQuestionTrigger", {
         get: function () {
             for (var i = 0; i < this.triggers.length; i++) {
@@ -66168,10 +66625,7 @@ var SurveyModel = /** @class */ (function (_super) {
         this.variablesHash[name] = newValue;
         this.notifyElementsOnAnyValueOrVariableChanged(name);
         if (!_helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].isTwoValueEquals(oldValue, newValue)) {
-            this.runConditionOnValueChanged(name, newValue);
-            var triggerKeys = {};
-            triggerKeys[name] = { newValue: newValue, oldValue: oldValue };
-            this.checkTriggers(triggerKeys, false, false, name);
+            this.checkTriggersAndRunConditions(name, newValue, oldValue);
             this.onVariableChanged.fire(this, { name: name, value: newValue });
         }
     };
@@ -66260,10 +66714,7 @@ var SurveyModel = /** @class */ (function (_super) {
         if (locNotification === true || this.isDisposed || this.isRunningElementsBindings)
             return;
         questionName = questionName || name;
-        var triggerKeys = {};
-        triggerKeys[name] = { newValue: newValue, oldValue: oldValue };
-        this.runConditionOnValueChanged(name, newValue);
-        this.checkTriggers(triggerKeys, false, false, name);
+        this.checkTriggersAndRunConditions(name, newValue, oldValue);
         if (allowNotifyValueChanged)
             this.notifyQuestionOnValueChanged(name, newValue, questionName);
         if (locNotification !== "text") {
@@ -66396,7 +66847,7 @@ var SurveyModel = /** @class */ (function (_super) {
             }
         }
         if (!locNotification) {
-            this.runConditionOnValueChanged(name, this.getValue(name));
+            this.checkTriggersAndRunConditions(name, this.getValue(name), undefined);
         }
         if (locNotification !== "text") {
             this.tryGoNextPageAutomatic(name);
@@ -68389,14 +68840,21 @@ function createTOCListModel(survey, onAction) {
             visible: new _base__WEBPACK_IMPORTED_MODULE_1__["ComputedUpdater"](function () { return page.isVisible && !(page["isStartPage"]); })
         });
     });
-    var listModel = new _list__WEBPACK_IMPORTED_MODULE_3__["ListModel"](items, function (item) {
-        if (!!item.action()) {
-            listModel.selectedItem = item;
-        }
-    }, true, items.filter(function (i) { return !!survey.currentPage && i.id === survey.currentPage.name; })[0] || items.filter(function (i) { return i.id === pagesSource[0].name; })[0]);
+    var selectedItem = items.filter(function (i) { return !!survey.currentPage && i.id === survey.currentPage.name; })[0] || items.filter(function (i) { return i.id === pagesSource[0].name; })[0];
+    var listOptions = {
+        items: items,
+        onSelectionChanged: function (item) {
+            if (!!item.action()) {
+                listModel.selectedItem = item;
+            }
+        },
+        allowSelection: true,
+        searchEnabled: false,
+        locOwner: survey,
+        selectedItem: selectedItem
+    };
+    var listModel = new _list__WEBPACK_IMPORTED_MODULE_3__["ListModel"](listOptions);
     listModel.allowSelection = false;
-    listModel.locOwner = survey;
-    listModel.searchEnabled = false;
     survey.onCurrentPageChanged.add(function (s, o) {
         listModel.selectedItem = items.filter(function (i) { return !!survey.currentPage && i.id === survey.currentPage.name; })[0];
     });
@@ -68404,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) {
@@ -68421,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;
@@ -68440,6 +68933,8 @@ var TOCModel = /** @class */ (function () {
         this.popupModel.dispose();
         this.listModel.dispose();
     };
+    TOCModel.RootStyle = "sv_progress-toc";
+    TOCModel.StickyPosition = true;
     return TOCModel;
 }());
 
@@ -69550,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 ||
@@ -69569,6 +70065,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 })();
 
 
+
 var AnimationUtils = /** @class */ (function () {
     function AnimationUtils() {
         this.cancelQueue = [];
@@ -69612,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);
@@ -69631,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);
@@ -69643,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);
@@ -69661,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 () {
@@ -69702,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;
@@ -69731,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));
@@ -69775,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);
@@ -69790,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;
 }());
@@ -69807,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 () {
@@ -69832,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;
@@ -69859,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);
@@ -70256,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;
@@ -70283,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;
     };
@@ -70346,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) {
@@ -70365,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") {
@@ -70729,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";
@@ -70744,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; });
@@ -71064,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");
 }
@@ -71212,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 };
+}