survey-react 1.10.6 → 1.11.1

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.10.6
+ * surveyjs - Survey JavaScript library v1.11.1
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -726,6 +726,11 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
 
 
 
@@ -748,7 +753,9 @@ function createDropdownActionModelAdvanced(actionOptions, listOptions, popupOpti
         if (newAction.hasTitle) {
             newAction.title = item.title;
         }
-        originalSelectionChanged(item, params);
+        if (originalSelectionChanged) {
+            originalSelectionChanged(item, params);
+        }
     };
     var popupModel = createPopupModelWithListModel(listOptions, popupOptions);
     var newActionOptions = Object.assign({}, actionOptions, {
@@ -767,7 +774,9 @@ function createDropdownActionModelAdvanced(actionOptions, listOptions, popupOpti
 function createPopupModelWithListModel(listOptions, popupOptions) {
     var listModel = new _list__WEBPACK_IMPORTED_MODULE_3__["ListModel"](listOptions);
     listModel.onSelectionChanged = function (item) {
-        listOptions.onSelectionChanged(item);
+        if (listOptions.onSelectionChanged) {
+            listOptions.onSelectionChanged(item);
+        }
         popupModel.hide();
     };
     var _popupOptions = popupOptions || {};
@@ -789,6 +798,7 @@ var BaseAction = /** @class */ (function (_super) {
     function BaseAction() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.rendredIdValue = BaseAction.getNextRendredId();
+        _this.markerIconSize = 16;
         return _this;
     }
     BaseAction.getNextRendredId = function () { return BaseAction.renderedId++; };
@@ -932,6 +942,46 @@ var BaseAction = /** @class */ (function (_super) {
         }
         return args.isTrusted;
     };
+    BaseAction.prototype.showPopup = function () {
+        if (!!this.popupModel) {
+            this.popupModel.show();
+        }
+    };
+    BaseAction.prototype.hidePopup = function () {
+        if (!!this.popupModel) {
+            this.popupModel.hide();
+        }
+    };
+    BaseAction.prototype.clearPopupTimeouts = function () {
+        if (this.showPopupTimeout)
+            clearTimeout(this.showPopupTimeout);
+        if (this.hidePopupTimeout)
+            clearTimeout(this.hidePopupTimeout);
+    };
+    BaseAction.prototype.showPopupDelayed = function (delay) {
+        var _this = this;
+        this.clearPopupTimeouts();
+        this.showPopupTimeout = setTimeout(function () {
+            _this.clearPopupTimeouts();
+            _this.showPopup();
+        }, delay);
+    };
+    BaseAction.prototype.hidePopupDelayed = function (delay) {
+        var _this = this;
+        var _a;
+        if ((_a = this.popupModel) === null || _a === void 0 ? void 0 : _a.isVisible) {
+            this.clearPopupTimeouts();
+            this.hidePopupTimeout = setTimeout(function () {
+                _this.clearPopupTimeouts();
+                _this.hidePopup();
+                _this.isHovered = false;
+            }, delay);
+        }
+        else {
+            this.clearPopupTimeouts();
+            this.isHovered = false;
+        }
+    };
     BaseAction.renderedId = 1;
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
@@ -993,9 +1043,21 @@ var BaseAction = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: 24 })
     ], BaseAction.prototype, "iconSize", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
+    ], BaseAction.prototype, "markerIconName", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
+    ], BaseAction.prototype, "markerIconSize", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
     ], BaseAction.prototype, "css", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: false })
+    ], BaseAction.prototype, "isPressed", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: false })
+    ], BaseAction.prototype, "isHovered", void 0);
     return BaseAction;
 }(_base__WEBPACK_IMPORTED_MODULE_0__["Base"]));
 
@@ -1033,6 +1095,14 @@ var Action = /** @class */ (function (_super) {
     Action.prototype.createLocTitle = function () {
         return this.createLocalizableString("title", this, true);
     };
+    Action.prototype.setItems = function (items, onSelectionChanged) {
+        this.markerIconName = "icon-next_16x16";
+        this.component = "sv-list-item-group";
+        this.items = __spreadArray([], items);
+        var popupModel = createPopupModelWithListModel({ items: items, onSelectionChanged: onSelectionChanged, searchEnabled: false }, { horizontalPosition: "right", showPointer: false, canShrink: false });
+        popupModel.cssClass = "sv-popup-inner";
+        this.popupModel = popupModel;
+    };
     Action.prototype.getLocTitle = function () {
         return this.locTitleValue;
     };
@@ -1249,9 +1319,6 @@ var AdaptiveActionContainer = /** @class */ (function (_super) {
             tooltip: _surveyStrings__WEBPACK_IMPORTED_MODULE_3__["surveyLocalization"].getString("more"),
         }, {
             items: [],
-            onSelectionChanged: function (item) {
-                _this.hiddenItemSelected(item);
-            },
             allowSelection: false
         });
         return _this;
@@ -1317,11 +1384,6 @@ var AdaptiveActionContainer = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    AdaptiveActionContainer.prototype.hiddenItemSelected = function (item) {
-        if (!!item && typeof item.action === "function") {
-            item.action();
-        }
-    };
     AdaptiveActionContainer.prototype.onSet = function () {
         var _this = this;
         this.actions.forEach(function (action) { return action.updateCallback = function (isResetInitialized) { return _this.raiseUpdate(isResetInitialized); }; });
@@ -1578,6 +1640,21 @@ var ActionContainer = /** @class */ (function (_super) {
             this.sortItems();
         }
     };
+    ActionContainer.prototype.popupAfterShowCallback = function (itemValue) {
+    };
+    ActionContainer.prototype.mouseOverHandler = function (itemValue) {
+        var _this = this;
+        itemValue.isHovered = true;
+        this.actions.forEach(function (action) {
+            if (action === itemValue && !!itemValue.popupModel) {
+                itemValue.showPopupDelayed(_this.subItemsShowDelay);
+                _this.popupAfterShowCallback(itemValue);
+            }
+            else if (!!action.popupModel && action.popupModel.isVisible) {
+                action.hidePopupDelayed(_this.subItemsHideDelay);
+            }
+        });
+    };
     ActionContainer.prototype.initResponsivityManager = function (container, delayedUpdateFunction) {
         return;
     };
@@ -1613,6 +1690,12 @@ var ActionContainer = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: false })
     ], ActionContainer.prototype, "isEmpty", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: 300 })
+    ], ActionContainer.prototype, "subItemsShowDelay", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: 300 })
+    ], ActionContainer.prototype, "subItemsHideDelay", void 0);
     return ActionContainer;
 }(_base__WEBPACK_IMPORTED_MODULE_1__["Base"]));
 
@@ -1888,6 +1971,10 @@ var Base = /** @class */ (function () {
         this.onItemValuePropertyChanged = this.addEvent();
         this.isCreating = true;
         this.animationAllowedLock = 0;
+        //remove when knockout obsolete
+        this.supportOnElementRenderedEvent = true;
+        this.onElementRenderedEventEnabled = false;
+        this._onElementRerendered = new EventBase();
         this.bindingsValue = new Bindings(this);
         _jsonobject__WEBPACK_IMPORTED_MODULE_2__["CustomPropertiesCollection"].createProperties(this);
         this.onBaseCreating();
@@ -2816,7 +2903,7 @@ var Base = /** @class */ (function () {
         configurable: true
     });
     Base.prototype.getIsAnimationAllowed = function () {
-        return _settings__WEBPACK_IMPORTED_MODULE_3__["settings"].animationEnabled && this.animationAllowedLock >= 0 && !this.isLoadingFromJson && !this.isDisposed;
+        return _settings__WEBPACK_IMPORTED_MODULE_3__["settings"].animationEnabled && this.animationAllowedLock >= 0 && !this.isLoadingFromJson && !this.isDisposed && (!!this.onElementRerendered || !this.supportOnElementRenderedEvent);
     };
     Base.prototype.blockAnimations = function () {
         this.animationAllowedLock--;
@@ -2824,6 +2911,22 @@ var Base = /** @class */ (function () {
     Base.prototype.releaseAnimations = function () {
         this.animationAllowedLock++;
     };
+    Base.prototype.enableOnElementRenderedEvent = function () {
+        this.onElementRenderedEventEnabled = true;
+    };
+    Base.prototype.disableOnElementRenderedEvent = function () {
+        this.onElementRenderedEventEnabled = false;
+    };
+    Object.defineProperty(Base.prototype, "onElementRerendered", {
+        get: function () {
+            return this.supportOnElementRenderedEvent && this.onElementRenderedEventEnabled ? this._onElementRerendered : undefined;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Base.prototype.afterRerender = function () {
+        this.onElementRerendered.fire(this, undefined);
+    };
     Base.currentDependencis = undefined;
     return Base;
 }());
@@ -2867,8 +2970,9 @@ var Event = /** @class */ (function () {
     Event.prototype.fire = function (sender, options) {
         if (!this.callbacks)
             return;
-        for (var i = 0; i < this.callbacks.length; i++) {
-            this.callbacks[i](sender, options);
+        var callbacks = [].concat(this.callbacks);
+        for (var i = 0; i < callbacks.length; i++) {
+            callbacks[i](sender, options);
             if (!this.callbacks)
                 return;
         }
@@ -5606,6 +5710,7 @@ var defaultV2Css = {
     rowMultiple: "sd-row--multiple",
     rowCompact: "sd-row--compact",
     rowFadeIn: "sd-row--fade-in",
+    rowDelayedFadeIn: "sd-row--delayed-fade-in",
     rowFadeOut: "sd-row--fade-out",
     pageRow: "sd-page__row",
     question: {
@@ -5665,6 +5770,7 @@ var defaultV2Css = {
         disabled: "sd-question--disabled",
         readOnly: "sd-question--readonly",
         preview: "sd-question--preview",
+        noPointerEventsMode: "sd-question--no-pointer-events",
         errorsContainer: "sd-element__erbox sd-question__erbox",
         errorsContainerTop: "sd-element__erbox--above-element sd-question__erbox--above-question",
         errorsContainerBottom: "sd-question__erbox--below-question"
@@ -6119,13 +6225,13 @@ var defaultV2Css = {
         removeButtonIconId: "icon-clear",
         removeFile: "sd-hidden",
         removeFileSvg: "",
-        removeFileSvgIconId: "icon-delete",
+        removeFileSvgIconId: "icon-close_16x16",
         wrapper: "sd-file__wrapper",
         defaultImage: "sd-file__default-image",
         defaultImageIconId: "icon-defaultfile",
         leftIconId: "icon-arrowleft",
         rightIconId: "icon-arrowright",
-        removeFileButton: "sd-context-btn--negative sd-file__remove-file-button",
+        removeFileButton: "sd-context-btn--small sd-context-btn--with-border sd-context-btn--colorful sd-context-btn--negative sd-file__remove-file-button",
         dragAreaPlaceholder: "sd-file__drag-area-placeholder",
         imageWrapper: "sd-file__image-wrapper",
         imageWrapperDefaultImage: "sd-file__image-wrapper--default-image",
@@ -7686,10 +7792,11 @@ var DragDropMatrixRows = /** @class */ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DragDropRankingChoices", function() { return DragDropRankingChoices; });
-/* harmony import */ var _choices__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./choices */ "./src/dragdrop/choices.ts");
-/* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
-/* harmony import */ var _utils_devices__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils/devices */ "./src/utils/devices.ts");
-/* harmony import */ var _global_variables_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../global_variables_utils */ "./src/global_variables_utils.ts");
+/* harmony import */ var _itemvalue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../itemvalue */ "./src/itemvalue.ts");
+/* harmony import */ var _choices__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./choices */ "./src/dragdrop/choices.ts");
+/* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
+/* harmony import */ var _utils_devices__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils/devices */ "./src/utils/devices.ts");
+/* harmony import */ var _global_variables_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../global_variables_utils */ "./src/global_variables_utils.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -7709,6 +7816,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var DragDropRankingChoices = /** @class */ (function (_super) {
     __extends(DragDropRankingChoices, _super);
     function DragDropRankingChoices() {
@@ -7718,6 +7826,16 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
             var node = _this.domAdapter.draggedElementShortcut.querySelector(".sv-ranking-item");
             node.style.cursor = "grabbing";
         };
+        _this.reorderRankedItem = function (questionModel, fromIndex, toIndex) {
+            if (fromIndex == toIndex)
+                return;
+            var rankingChoices = questionModel.rankingChoices;
+            var item = rankingChoices[fromIndex];
+            questionModel.isValueSetByUser = true;
+            rankingChoices.splice(fromIndex, 1);
+            rankingChoices.splice(toIndex, 0, item);
+            _this.updateDraggedElementShortcut(toIndex + 1);
+        };
         _this.doBanDropHere = function () {
             if (_this.isDragOverRootNode) {
                 _this.allowDropHere = true;
@@ -7736,7 +7854,7 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
         configurable: true
     });
     DragDropRankingChoices.prototype.createDraggedElementShortcut = function (text, draggedElementNode, event) {
-        var draggedElementShortcut = _global_variables_utils__WEBPACK_IMPORTED_MODULE_3__["DomDocumentHelper"].createElement("div");
+        var draggedElementShortcut = _global_variables_utils__WEBPACK_IMPORTED_MODULE_4__["DomDocumentHelper"].createElement("div");
         if (!draggedElementShortcut)
             return;
         draggedElementShortcut.className = this.shortcutClass + " sv-ranking-shortcut";
@@ -7754,9 +7872,9 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
     };
     Object.defineProperty(DragDropRankingChoices.prototype, "shortcutClass", {
         get: function () {
-            return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_1__["CssClassBuilder"]()
+            return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_2__["CssClassBuilder"]()
                 .append(this.parentElement.cssClasses.root)
-                .append(this.parentElement.cssClasses.rootMobileMod, _utils_devices__WEBPACK_IMPORTED_MODULE_2__["IsMobile"])
+                .append(this.parentElement.cssClasses.rootMobileMod, _utils_devices__WEBPACK_IMPORTED_MODULE_3__["IsMobile"])
                 .toString();
         },
         enumerable: false,
@@ -7776,52 +7894,49 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
     };
     DragDropRankingChoices.prototype.isDropTargetValid = function (dropTarget, dropTargetNode) {
         var choices = this.parentElement.rankingChoices;
-        var dropTargetIndex = choices.indexOf(this.dropTarget);
-        var draggedElementIndex = choices.indexOf(this.draggedElement);
-        if (draggedElementIndex > dropTargetIndex && dropTargetNode.classList.contains("sv-dragdrop-moveup")) {
-            this.parentElement.dropTargetNodeMove = null;
-            return false;
-        }
-        if (draggedElementIndex < dropTargetIndex && dropTargetNode.classList.contains("sv-dragdrop-movedown")) {
-            this.parentElement.dropTargetNodeMove = null;
-            return false;
-        }
         if (choices.indexOf(dropTarget) === -1)
             // shouldn't allow to drop on "adorners" (selectall, none, other)
             return false;
         return true;
     };
-    DragDropRankingChoices.prototype.calculateIsBottom = function (clientY) {
-        var choices = this.parentElement.rankingChoices;
-        return (choices.indexOf(this.dropTarget) - choices.indexOf(this.draggedElement) >
-            0);
+    DragDropRankingChoices.prototype.calculateIsBottom = function (clientY, dropTargetNode) {
+        if (this.dropTarget instanceof _itemvalue__WEBPACK_IMPORTED_MODULE_0__["ItemValue"] && this.draggedElement !== this.dropTarget) {
+            var rect = dropTargetNode.getBoundingClientRect();
+            return clientY >= rect.y + rect.height / 2;
+        }
+        return _super.prototype.calculateIsBottom.call(this, clientY);
     };
-    DragDropRankingChoices.prototype.afterDragOver = function (dropTargetNode) {
-        var choices = this.parentElement.rankingChoices;
-        var dropTargetIndex = choices.indexOf(this.dropTarget);
-        var draggedElementIndex = choices.indexOf(this.draggedElement);
-        choices.splice(draggedElementIndex, 1);
-        choices.splice(dropTargetIndex, 0, this.draggedElement);
-        this.parentElement.setPropertyValue("rankingChoices", choices);
-        //return;
-        this.updateDraggedElementShortcut(dropTargetIndex + 1);
-        if (draggedElementIndex !== dropTargetIndex) {
-            dropTargetNode.classList.remove("sv-dragdrop-moveup");
-            dropTargetNode.classList.remove("sv-dragdrop-movedown");
-            this.parentElement.dropTargetNodeMove = null;
+    DragDropRankingChoices.prototype.getIndixies = function (model, fromChoicesArray, toChoicesArray) {
+        var fromIndex = fromChoicesArray.indexOf(this.draggedElement);
+        var toIndex = toChoicesArray.indexOf(this.dropTarget);
+        if (toIndex === -1) {
+            var length_1 = model.value.length;
+            toIndex = length_1;
         }
-        if (draggedElementIndex > dropTargetIndex) {
-            this.parentElement.dropTargetNodeMove = "down";
+        else if (fromChoicesArray == toChoicesArray) {
+            if (!this.isBottom && fromIndex < toIndex)
+                toIndex--;
+            if (this.isBottom && fromIndex > toIndex)
+                toIndex++;
         }
-        if (draggedElementIndex < dropTargetIndex) {
-            this.parentElement.dropTargetNodeMove = "up";
+        else if (fromChoicesArray != toChoicesArray) {
+            if (this.isBottom)
+                toIndex++;
         }
+        return { fromIndex: fromIndex, toIndex: toIndex };
+    };
+    DragDropRankingChoices.prototype.afterDragOver = function (dropTargetNode) {
+        var _a = this.getIndixies(this.parentElement, this.parentElement.rankingChoices, this.parentElement.rankingChoices), fromIndex = _a.fromIndex, toIndex = _a.toIndex;
+        this.reorderRankedItem(this.parentElement, fromIndex, toIndex);
     };
     DragDropRankingChoices.prototype.updateDraggedElementShortcut = function (newIndex) {
-        var newIndexText = newIndex !== null ? newIndex + "" : "";
-        // TODO should avoid direct DOM manipulation, do through the frameworks instead
-        var indexNode = this.domAdapter.draggedElementShortcut.querySelector(".sv-ranking-item__index");
-        indexNode.innerText = newIndexText;
+        var _a;
+        if ((_a = this.domAdapter) === null || _a === void 0 ? void 0 : _a.draggedElementShortcut) {
+            var newIndexText = newIndex !== null ? newIndex + "" : "";
+            // TODO should avoid direct DOM manipulation, do through the frameworks instead
+            var indexNode = this.domAdapter.draggedElementShortcut.querySelector(".sv-ranking-item__index");
+            indexNode.innerText = newIndexText;
+        }
     };
     DragDropRankingChoices.prototype.ghostPositionChanged = function () {
         this.parentElement.currentDropTarget = this.draggedElement;
@@ -7839,7 +7954,7 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
         _super.prototype.clear.call(this);
     };
     return DragDropRankingChoices;
-}(_choices__WEBPACK_IMPORTED_MODULE_0__["DragDropChoices"]));
+}(_choices__WEBPACK_IMPORTED_MODULE_1__["DragDropChoices"]));
 
 
 
@@ -7855,8 +7970,7 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DragDropRankingSelectToRank", function() { return DragDropRankingSelectToRank; });
-/* harmony import */ var _itemvalue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../itemvalue */ "./src/itemvalue.ts");
-/* harmony import */ var _ranking_choices__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ranking-choices */ "./src/dragdrop/ranking-choices.ts");
+/* harmony import */ var _ranking_choices__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ranking-choices */ "./src/dragdrop/ranking-choices.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -7873,7 +7987,6 @@ var __extends = (undefined && undefined.__extends) || (function () {
     };
 })();
 
-
 var DragDropRankingSelectToRank = /** @class */ (function (_super) {
     __extends(DragDropRankingSelectToRank, _super);
     function DragDropRankingSelectToRank() {
@@ -7890,19 +8003,6 @@ var DragDropRankingSelectToRank = /** @class */ (function (_super) {
             rankingChoices.splice(fromIndex, 1);
             _this.updateChoices(questionModel, rankingChoices);
         };
-        _this.reorderRankedItem = function (questionModel, fromIndex, toIndex, dropTargetNode) {
-            var rankingChoices = questionModel.rankingChoices;
-            var item = rankingChoices[fromIndex];
-            if (fromIndex == toIndex)
-                return;
-            questionModel.isValueSetByUser = true;
-            rankingChoices.splice(fromIndex, 1);
-            rankingChoices.splice(toIndex, 0, item);
-            questionModel.setPropertyValue("rankingChoices", rankingChoices);
-            if (dropTargetNode) {
-                _this.doUIEffects(dropTargetNode, fromIndex, toIndex);
-            }
-        };
         return _this;
     }
     DragDropRankingSelectToRank.prototype.findDropTargetNodeByDragOverNode = function (dragOverNode) {
@@ -7959,50 +8059,6 @@ var DragDropRankingSelectToRank = /** @class */ (function (_super) {
         var _a = this.getIndixies(questionModel, fromChoicesArray, toChoicesArray), fromIndex = _a.fromIndex, toIndex = _a.toIndex;
         rankFunction(questionModel, fromIndex, toIndex, dropTargetNode);
     };
-    DragDropRankingSelectToRank.prototype.getIndixies = function (model, fromChoicesArray, toChoicesArray) {
-        var fromIndex = fromChoicesArray.indexOf(this.draggedElement);
-        var toIndex = toChoicesArray.indexOf(this.dropTarget);
-        if (toIndex === -1) {
-            var length_1 = model.value.length;
-            toIndex = length_1;
-        }
-        else if (fromChoicesArray == toChoicesArray) {
-            if (!this.isBottom && fromIndex < toIndex)
-                toIndex--;
-            if (this.isBottom && fromIndex > toIndex)
-                toIndex++;
-        }
-        else if (fromChoicesArray != toChoicesArray) {
-            if (this.isBottom)
-                toIndex++;
-        }
-        return { fromIndex: fromIndex, toIndex: toIndex };
-    };
-    DragDropRankingSelectToRank.prototype.calculateIsBottom = function (clientY, dropTargetNode) {
-        if (this.dropTarget instanceof _itemvalue__WEBPACK_IMPORTED_MODULE_0__["ItemValue"] && this.draggedElement !== this.dropTarget) {
-            var rect = dropTargetNode.getBoundingClientRect();
-            return clientY >= rect.y + rect.height / 2;
-        }
-        return _super.prototype.calculateIsBottom.call(this, clientY);
-    };
-    DragDropRankingSelectToRank.prototype.doUIEffects = function (dropTargetNode, fromIndex, toIndex) {
-        var questionModel = this.parentElement;
-        var isDropToEmptyRankedContainer = this.dropTarget === "to-container" && questionModel.isEmpty();
-        var isNeedToShowIndexAtShortcut = !this.isDropTargetUnranked || isDropToEmptyRankedContainer;
-        var shortcutIndex = isNeedToShowIndexAtShortcut ? toIndex + 1 : null;
-        this.updateDraggedElementShortcut(shortcutIndex);
-        if (fromIndex !== toIndex) {
-            dropTargetNode.classList.remove("sv-dragdrop-moveup");
-            dropTargetNode.classList.remove("sv-dragdrop-movedown");
-            questionModel.dropTargetNodeMove = null;
-        }
-        if (fromIndex > toIndex) {
-            questionModel.dropTargetNodeMove = "down";
-        }
-        if (fromIndex < toIndex) {
-            questionModel.dropTargetNodeMove = "up";
-        }
-    };
     Object.defineProperty(DragDropRankingSelectToRank.prototype, "isDraggedElementRanked", {
         get: function () {
             return this.parentElement.rankingChoices.indexOf(this.draggedElement) !== -1;
@@ -8026,28 +8082,13 @@ var DragDropRankingSelectToRank = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DragDropRankingSelectToRank.prototype, "isDropTargetUnranked", {
-        get: function () {
-            return !this.isDropTargetRanked;
-        },
-        enumerable: false,
-        configurable: true
-    });
     DragDropRankingSelectToRank.prototype.updateChoices = function (questionModel, rankingChoices) {
         questionModel.isValueSetByUser = true;
         questionModel.rankingChoices = rankingChoices;
         questionModel.updateUnRankingChoices(rankingChoices);
     };
-    DragDropRankingSelectToRank.prototype.clear = function () {
-        var questionModel = this.parentElement;
-        if (!!questionModel) {
-            questionModel.rankingChoicesAnimation.cancel();
-            questionModel.unRankingChoicesAnimation.cancel();
-        }
-        _super.prototype.clear.call(this);
-    };
     return DragDropRankingSelectToRank;
-}(_ranking_choices__WEBPACK_IMPORTED_MODULE_1__["DragDropRankingChoices"]));
+}(_ranking_choices__WEBPACK_IMPORTED_MODULE_0__["DragDropRankingChoices"]));
 
 
 
@@ -9857,8 +9898,8 @@ __webpack_require__.r(__webpack_exports__);
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.10.6";
-ReleaseDate = "" + "2024-05-28";
+Version = "" + "1.11.1";
+ReleaseDate = "" + "2024-06-06";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -11049,7 +11090,7 @@ var defaultBootstrapMaterialCss = _plugins_themes_bootstrapmaterial_cssbootstrap
 /*!***************************************!*\
   !*** ./src/entries/react-ui-model.ts ***!
   \***************************************/
-/*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, QuestionErrorComponent, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent */
+/*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, ListItemContent, ListItemGroup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, QuestionErrorComponent, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -11109,6 +11150,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionRankingItem", function() { return _react_reactquestion_ranking__WEBPACK_IMPORTED_MODULE_12__["SurveyQuestionRankingItem"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionRankingItemContent", function() { return _react_reactquestion_ranking__WEBPACK_IMPORTED_MODULE_12__["SurveyQuestionRankingItemContent"]; });
+
 /* harmony import */ var _react_components_rating_rating_item__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../react/components/rating/rating-item */ "./src/react/components/rating/rating-item.tsx");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RatingItem", function() { return _react_components_rating_rating_item__WEBPACK_IMPORTED_MODULE_13__["RatingItem"]; });
 
@@ -11249,90 +11292,96 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _react_components_popup_popup__WEBPACK_IMPORTED_MODULE_54__ = __webpack_require__(/*! ../react/components/popup/popup */ "./src/react/components/popup/popup.tsx");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Popup", function() { return _react_components_popup_popup__WEBPACK_IMPORTED_MODULE_54__["Popup"]; });
 
-/* harmony import */ var _react_components_list_list__WEBPACK_IMPORTED_MODULE_55__ = __webpack_require__(/*! ../react/components/list/list */ "./src/react/components/list/list.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "List", function() { return _react_components_list_list__WEBPACK_IMPORTED_MODULE_55__["List"]; });
+/* harmony import */ var _react_components_list_list_item_content__WEBPACK_IMPORTED_MODULE_55__ = __webpack_require__(/*! ../react/components/list/list-item-content */ "./src/react/components/list/list-item-content.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ListItemContent", function() { return _react_components_list_list_item_content__WEBPACK_IMPORTED_MODULE_55__["ListItemContent"]; });
+
+/* harmony import */ var _react_components_list_list_item_group__WEBPACK_IMPORTED_MODULE_56__ = __webpack_require__(/*! ../react/components/list/list-item-group */ "./src/react/components/list/list-item-group.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ListItemGroup", function() { return _react_components_list_list_item_group__WEBPACK_IMPORTED_MODULE_56__["ListItemGroup"]; });
 
-/* harmony import */ var _react_components_title_title_actions__WEBPACK_IMPORTED_MODULE_56__ = __webpack_require__(/*! ../react/components/title/title-actions */ "./src/react/components/title/title-actions.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TitleActions", function() { return _react_components_title_title_actions__WEBPACK_IMPORTED_MODULE_56__["TitleActions"]; });
+/* harmony import */ var _react_components_list_list__WEBPACK_IMPORTED_MODULE_57__ = __webpack_require__(/*! ../react/components/list/list */ "./src/react/components/list/list.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "List", function() { return _react_components_list_list__WEBPACK_IMPORTED_MODULE_57__["List"]; });
 
-/* harmony import */ var _react_components_title_title_element__WEBPACK_IMPORTED_MODULE_57__ = __webpack_require__(/*! ../react/components/title/title-element */ "./src/react/components/title/title-element.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TitleElement", function() { return _react_components_title_title_element__WEBPACK_IMPORTED_MODULE_57__["TitleElement"]; });
+/* harmony import */ var _react_components_title_title_actions__WEBPACK_IMPORTED_MODULE_58__ = __webpack_require__(/*! ../react/components/title/title-actions */ "./src/react/components/title/title-actions.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TitleActions", function() { return _react_components_title_title_actions__WEBPACK_IMPORTED_MODULE_58__["TitleActions"]; });
 
-/* harmony import */ var _react_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_58__ = __webpack_require__(/*! ../react/components/action-bar/action-bar */ "./src/react/components/action-bar/action-bar.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyActionBar", function() { return _react_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_58__["SurveyActionBar"]; });
+/* harmony import */ var _react_components_title_title_element__WEBPACK_IMPORTED_MODULE_59__ = __webpack_require__(/*! ../react/components/title/title-element */ "./src/react/components/title/title-element.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TitleElement", function() { return _react_components_title_title_element__WEBPACK_IMPORTED_MODULE_59__["TitleElement"]; });
 
-/* harmony import */ var _react_components_survey_header_logo_image__WEBPACK_IMPORTED_MODULE_59__ = __webpack_require__(/*! ../react/components/survey-header/logo-image */ "./src/react/components/survey-header/logo-image.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "LogoImage", function() { return _react_components_survey_header_logo_image__WEBPACK_IMPORTED_MODULE_59__["LogoImage"]; });
+/* harmony import */ var _react_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_60__ = __webpack_require__(/*! ../react/components/action-bar/action-bar */ "./src/react/components/action-bar/action-bar.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyActionBar", function() { return _react_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_60__["SurveyActionBar"]; });
 
-/* harmony import */ var _react_components_survey_header_survey_header__WEBPACK_IMPORTED_MODULE_60__ = __webpack_require__(/*! ../react/components/survey-header/survey-header */ "./src/react/components/survey-header/survey-header.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyHeader", function() { return _react_components_survey_header_survey_header__WEBPACK_IMPORTED_MODULE_60__["SurveyHeader"]; });
+/* harmony import */ var _react_components_survey_header_logo_image__WEBPACK_IMPORTED_MODULE_61__ = __webpack_require__(/*! ../react/components/survey-header/logo-image */ "./src/react/components/survey-header/logo-image.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "LogoImage", function() { return _react_components_survey_header_logo_image__WEBPACK_IMPORTED_MODULE_61__["LogoImage"]; });
 
-/* harmony import */ var _react_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_61__ = __webpack_require__(/*! ../react/components/svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SvgIcon", function() { return _react_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_61__["SvgIcon"]; });
+/* harmony import */ var _react_components_survey_header_survey_header__WEBPACK_IMPORTED_MODULE_62__ = __webpack_require__(/*! ../react/components/survey-header/survey-header */ "./src/react/components/survey-header/survey-header.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyHeader", function() { return _react_components_survey_header_survey_header__WEBPACK_IMPORTED_MODULE_62__["SurveyHeader"]; });
 
-/* harmony import */ var _react_components_matrix_actions_remove_button_remove_button__WEBPACK_IMPORTED_MODULE_62__ = __webpack_require__(/*! ../react/components/matrix-actions/remove-button/remove-button */ "./src/react/components/matrix-actions/remove-button/remove-button.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixDynamicRemoveButton", function() { return _react_components_matrix_actions_remove_button_remove_button__WEBPACK_IMPORTED_MODULE_62__["SurveyQuestionMatrixDynamicRemoveButton"]; });
+/* harmony import */ var _react_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_63__ = __webpack_require__(/*! ../react/components/svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SvgIcon", function() { return _react_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_63__["SvgIcon"]; });
 
-/* harmony import */ var _react_components_matrix_actions_detail_button_detail_button__WEBPACK_IMPORTED_MODULE_63__ = __webpack_require__(/*! ../react/components/matrix-actions/detail-button/detail-button */ "./src/react/components/matrix-actions/detail-button/detail-button.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixDetailButton", function() { return _react_components_matrix_actions_detail_button_detail_button__WEBPACK_IMPORTED_MODULE_63__["SurveyQuestionMatrixDetailButton"]; });
+/* harmony import */ var _react_components_matrix_actions_remove_button_remove_button__WEBPACK_IMPORTED_MODULE_64__ = __webpack_require__(/*! ../react/components/matrix-actions/remove-button/remove-button */ "./src/react/components/matrix-actions/remove-button/remove-button.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixDynamicRemoveButton", function() { return _react_components_matrix_actions_remove_button_remove_button__WEBPACK_IMPORTED_MODULE_64__["SurveyQuestionMatrixDynamicRemoveButton"]; });
 
-/* harmony import */ var _react_components_matrix_actions_drag_drop_icon_drag_drop_icon__WEBPACK_IMPORTED_MODULE_64__ = __webpack_require__(/*! ../react/components/matrix-actions/drag-drop-icon/drag-drop-icon */ "./src/react/components/matrix-actions/drag-drop-icon/drag-drop-icon.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixDynamicDragDropIcon", function() { return _react_components_matrix_actions_drag_drop_icon_drag_drop_icon__WEBPACK_IMPORTED_MODULE_64__["SurveyQuestionMatrixDynamicDragDropIcon"]; });
+/* harmony import */ var _react_components_matrix_actions_detail_button_detail_button__WEBPACK_IMPORTED_MODULE_65__ = __webpack_require__(/*! ../react/components/matrix-actions/detail-button/detail-button */ "./src/react/components/matrix-actions/detail-button/detail-button.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixDetailButton", function() { return _react_components_matrix_actions_detail_button_detail_button__WEBPACK_IMPORTED_MODULE_65__["SurveyQuestionMatrixDetailButton"]; });
 
-/* harmony import */ var _react_components_paneldynamic_actions_paneldynamic_add_btn__WEBPACK_IMPORTED_MODULE_65__ = __webpack_require__(/*! ../react/components/paneldynamic-actions/paneldynamic-add-btn */ "./src/react/components/paneldynamic-actions/paneldynamic-add-btn.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionPanelDynamicAddButton", function() { return _react_components_paneldynamic_actions_paneldynamic_add_btn__WEBPACK_IMPORTED_MODULE_65__["SurveyQuestionPanelDynamicAddButton"]; });
+/* harmony import */ var _react_components_matrix_actions_drag_drop_icon_drag_drop_icon__WEBPACK_IMPORTED_MODULE_66__ = __webpack_require__(/*! ../react/components/matrix-actions/drag-drop-icon/drag-drop-icon */ "./src/react/components/matrix-actions/drag-drop-icon/drag-drop-icon.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixDynamicDragDropIcon", function() { return _react_components_matrix_actions_drag_drop_icon_drag_drop_icon__WEBPACK_IMPORTED_MODULE_66__["SurveyQuestionMatrixDynamicDragDropIcon"]; });
 
-/* harmony import */ var _react_components_paneldynamic_actions_paneldynamic_remove_btn__WEBPACK_IMPORTED_MODULE_66__ = __webpack_require__(/*! ../react/components/paneldynamic-actions/paneldynamic-remove-btn */ "./src/react/components/paneldynamic-actions/paneldynamic-remove-btn.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionPanelDynamicRemoveButton", function() { return _react_components_paneldynamic_actions_paneldynamic_remove_btn__WEBPACK_IMPORTED_MODULE_66__["SurveyQuestionPanelDynamicRemoveButton"]; });
+/* harmony import */ var _react_components_paneldynamic_actions_paneldynamic_add_btn__WEBPACK_IMPORTED_MODULE_67__ = __webpack_require__(/*! ../react/components/paneldynamic-actions/paneldynamic-add-btn */ "./src/react/components/paneldynamic-actions/paneldynamic-add-btn.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionPanelDynamicAddButton", function() { return _react_components_paneldynamic_actions_paneldynamic_add_btn__WEBPACK_IMPORTED_MODULE_67__["SurveyQuestionPanelDynamicAddButton"]; });
 
-/* harmony import */ var _react_components_paneldynamic_actions_paneldynamic_prev_btn__WEBPACK_IMPORTED_MODULE_67__ = __webpack_require__(/*! ../react/components/paneldynamic-actions/paneldynamic-prev-btn */ "./src/react/components/paneldynamic-actions/paneldynamic-prev-btn.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionPanelDynamicPrevButton", function() { return _react_components_paneldynamic_actions_paneldynamic_prev_btn__WEBPACK_IMPORTED_MODULE_67__["SurveyQuestionPanelDynamicPrevButton"]; });
+/* harmony import */ var _react_components_paneldynamic_actions_paneldynamic_remove_btn__WEBPACK_IMPORTED_MODULE_68__ = __webpack_require__(/*! ../react/components/paneldynamic-actions/paneldynamic-remove-btn */ "./src/react/components/paneldynamic-actions/paneldynamic-remove-btn.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionPanelDynamicRemoveButton", function() { return _react_components_paneldynamic_actions_paneldynamic_remove_btn__WEBPACK_IMPORTED_MODULE_68__["SurveyQuestionPanelDynamicRemoveButton"]; });
 
-/* harmony import */ var _react_components_paneldynamic_actions_paneldynamic_next_btn__WEBPACK_IMPORTED_MODULE_68__ = __webpack_require__(/*! ../react/components/paneldynamic-actions/paneldynamic-next-btn */ "./src/react/components/paneldynamic-actions/paneldynamic-next-btn.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionPanelDynamicNextButton", function() { return _react_components_paneldynamic_actions_paneldynamic_next_btn__WEBPACK_IMPORTED_MODULE_68__["SurveyQuestionPanelDynamicNextButton"]; });
+/* harmony import */ var _react_components_paneldynamic_actions_paneldynamic_prev_btn__WEBPACK_IMPORTED_MODULE_69__ = __webpack_require__(/*! ../react/components/paneldynamic-actions/paneldynamic-prev-btn */ "./src/react/components/paneldynamic-actions/paneldynamic-prev-btn.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionPanelDynamicPrevButton", function() { return _react_components_paneldynamic_actions_paneldynamic_prev_btn__WEBPACK_IMPORTED_MODULE_69__["SurveyQuestionPanelDynamicPrevButton"]; });
 
-/* harmony import */ var _react_components_paneldynamic_actions_paneldynamic_progress_text__WEBPACK_IMPORTED_MODULE_69__ = __webpack_require__(/*! ../react/components/paneldynamic-actions/paneldynamic-progress-text */ "./src/react/components/paneldynamic-actions/paneldynamic-progress-text.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionPanelDynamicProgressText", function() { return _react_components_paneldynamic_actions_paneldynamic_progress_text__WEBPACK_IMPORTED_MODULE_69__["SurveyQuestionPanelDynamicProgressText"]; });
+/* harmony import */ var _react_components_paneldynamic_actions_paneldynamic_next_btn__WEBPACK_IMPORTED_MODULE_70__ = __webpack_require__(/*! ../react/components/paneldynamic-actions/paneldynamic-next-btn */ "./src/react/components/paneldynamic-actions/paneldynamic-next-btn.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionPanelDynamicNextButton", function() { return _react_components_paneldynamic_actions_paneldynamic_next_btn__WEBPACK_IMPORTED_MODULE_70__["SurveyQuestionPanelDynamicNextButton"]; });
 
-/* harmony import */ var _react_components_survey_actions_survey_nav_button__WEBPACK_IMPORTED_MODULE_70__ = __webpack_require__(/*! ../react/components/survey-actions/survey-nav-button */ "./src/react/components/survey-actions/survey-nav-button.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyNavigationButton", function() { return _react_components_survey_actions_survey_nav_button__WEBPACK_IMPORTED_MODULE_70__["SurveyNavigationButton"]; });
+/* harmony import */ var _react_components_paneldynamic_actions_paneldynamic_progress_text__WEBPACK_IMPORTED_MODULE_71__ = __webpack_require__(/*! ../react/components/paneldynamic-actions/paneldynamic-progress-text */ "./src/react/components/paneldynamic-actions/paneldynamic-progress-text.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionPanelDynamicProgressText", function() { return _react_components_paneldynamic_actions_paneldynamic_progress_text__WEBPACK_IMPORTED_MODULE_71__["SurveyQuestionPanelDynamicProgressText"]; });
 
-/* harmony import */ var _react_components_question_error__WEBPACK_IMPORTED_MODULE_71__ = __webpack_require__(/*! ../react/components/question-error */ "./src/react/components/question-error.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "QuestionErrorComponent", function() { return _react_components_question_error__WEBPACK_IMPORTED_MODULE_71__["QuestionErrorComponent"]; });
+/* harmony import */ var _react_components_survey_actions_survey_nav_button__WEBPACK_IMPORTED_MODULE_72__ = __webpack_require__(/*! ../react/components/survey-actions/survey-nav-button */ "./src/react/components/survey-actions/survey-nav-button.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyNavigationButton", function() { return _react_components_survey_actions_survey_nav_button__WEBPACK_IMPORTED_MODULE_72__["SurveyNavigationButton"]; });
 
-/* harmony import */ var _react_components_matrix_row__WEBPACK_IMPORTED_MODULE_72__ = __webpack_require__(/*! ../react/components/matrix/row */ "./src/react/components/matrix/row.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MatrixRow", function() { return _react_components_matrix_row__WEBPACK_IMPORTED_MODULE_72__["MatrixRow"]; });
+/* harmony import */ var _react_components_question_error__WEBPACK_IMPORTED_MODULE_73__ = __webpack_require__(/*! ../react/components/question-error */ "./src/react/components/question-error.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "QuestionErrorComponent", function() { return _react_components_question_error__WEBPACK_IMPORTED_MODULE_73__["QuestionErrorComponent"]; });
 
-/* harmony import */ var _react_components_skeleton__WEBPACK_IMPORTED_MODULE_73__ = __webpack_require__(/*! ../react/components/skeleton */ "./src/react/components/skeleton.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Skeleton", function() { return _react_components_skeleton__WEBPACK_IMPORTED_MODULE_73__["Skeleton"]; });
+/* harmony import */ var _react_components_matrix_row__WEBPACK_IMPORTED_MODULE_74__ = __webpack_require__(/*! ../react/components/matrix/row */ "./src/react/components/matrix/row.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MatrixRow", function() { return _react_components_matrix_row__WEBPACK_IMPORTED_MODULE_74__["MatrixRow"]; });
 
-/* harmony import */ var _react_components_notifier__WEBPACK_IMPORTED_MODULE_74__ = __webpack_require__(/*! ../react/components/notifier */ "./src/react/components/notifier.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "NotifierComponent", function() { return _react_components_notifier__WEBPACK_IMPORTED_MODULE_74__["NotifierComponent"]; });
+/* harmony import */ var _react_components_skeleton__WEBPACK_IMPORTED_MODULE_75__ = __webpack_require__(/*! ../react/components/skeleton */ "./src/react/components/skeleton.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Skeleton", function() { return _react_components_skeleton__WEBPACK_IMPORTED_MODULE_75__["Skeleton"]; });
 
-/* harmony import */ var _react_components_components_container__WEBPACK_IMPORTED_MODULE_75__ = __webpack_require__(/*! ../react/components/components-container */ "./src/react/components/components-container.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ComponentsContainer", function() { return _react_components_components_container__WEBPACK_IMPORTED_MODULE_75__["ComponentsContainer"]; });
+/* harmony import */ var _react_components_notifier__WEBPACK_IMPORTED_MODULE_76__ = __webpack_require__(/*! ../react/components/notifier */ "./src/react/components/notifier.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "NotifierComponent", function() { return _react_components_notifier__WEBPACK_IMPORTED_MODULE_76__["NotifierComponent"]; });
 
-/* harmony import */ var _react_components_character_counter__WEBPACK_IMPORTED_MODULE_76__ = __webpack_require__(/*! ../react/components/character-counter */ "./src/react/components/character-counter.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CharacterCounterComponent", function() { return _react_components_character_counter__WEBPACK_IMPORTED_MODULE_76__["CharacterCounterComponent"]; });
+/* harmony import */ var _react_components_components_container__WEBPACK_IMPORTED_MODULE_77__ = __webpack_require__(/*! ../react/components/components-container */ "./src/react/components/components-container.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ComponentsContainer", function() { return _react_components_components_container__WEBPACK_IMPORTED_MODULE_77__["ComponentsContainer"]; });
 
-/* harmony import */ var _react_components_header__WEBPACK_IMPORTED_MODULE_77__ = __webpack_require__(/*! ../react/components/header */ "./src/react/components/header.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HeaderMobile", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_77__["HeaderMobile"]; });
+/* harmony import */ var _react_components_character_counter__WEBPACK_IMPORTED_MODULE_78__ = __webpack_require__(/*! ../react/components/character-counter */ "./src/react/components/character-counter.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CharacterCounterComponent", function() { return _react_components_character_counter__WEBPACK_IMPORTED_MODULE_78__["CharacterCounterComponent"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HeaderCell", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_77__["HeaderCell"]; });
+/* harmony import */ var _react_components_header__WEBPACK_IMPORTED_MODULE_79__ = __webpack_require__(/*! ../react/components/header */ "./src/react/components/header.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HeaderMobile", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_79__["HeaderMobile"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Header", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_77__["Header"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HeaderCell", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_79__["HeaderCell"]; });
 
-/* harmony import */ var _react_string_viewer__WEBPACK_IMPORTED_MODULE_78__ = __webpack_require__(/*! ../react/string-viewer */ "./src/react/string-viewer.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyLocStringViewer", function() { return _react_string_viewer__WEBPACK_IMPORTED_MODULE_78__["SurveyLocStringViewer"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Header", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_79__["Header"]; });
 
-/* harmony import */ var _react_string_editor__WEBPACK_IMPORTED_MODULE_79__ = __webpack_require__(/*! ../react/string-editor */ "./src/react/string-editor.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyLocStringEditor", function() { return _react_string_editor__WEBPACK_IMPORTED_MODULE_79__["SurveyLocStringEditor"]; });
+/* harmony import */ var _react_string_viewer__WEBPACK_IMPORTED_MODULE_80__ = __webpack_require__(/*! ../react/string-viewer */ "./src/react/string-viewer.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyLocStringViewer", function() { return _react_string_viewer__WEBPACK_IMPORTED_MODULE_80__["SurveyLocStringViewer"]; });
 
-/* harmony import */ var _react_components_loading_indicator__WEBPACK_IMPORTED_MODULE_80__ = __webpack_require__(/*! ../react/components/loading-indicator */ "./src/react/components/loading-indicator.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "LoadingIndicatorComponent", function() { return _react_components_loading_indicator__WEBPACK_IMPORTED_MODULE_80__["LoadingIndicatorComponent"]; });
+/* harmony import */ var _react_string_editor__WEBPACK_IMPORTED_MODULE_81__ = __webpack_require__(/*! ../react/string-editor */ "./src/react/string-editor.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyLocStringEditor", function() { return _react_string_editor__WEBPACK_IMPORTED_MODULE_81__["SurveyLocStringEditor"]; });
 
-/* harmony import */ var _react_svgbundle__WEBPACK_IMPORTED_MODULE_81__ = __webpack_require__(/*! ../react/svgbundle */ "./src/react/svgbundle.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SvgBundleComponent", function() { return _react_svgbundle__WEBPACK_IMPORTED_MODULE_81__["SvgBundleComponent"]; });
+/* harmony import */ var _react_components_loading_indicator__WEBPACK_IMPORTED_MODULE_82__ = __webpack_require__(/*! ../react/components/loading-indicator */ "./src/react/components/loading-indicator.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "LoadingIndicatorComponent", function() { return _react_components_loading_indicator__WEBPACK_IMPORTED_MODULE_82__["LoadingIndicatorComponent"]; });
+
+/* harmony import */ var _react_svgbundle__WEBPACK_IMPORTED_MODULE_83__ = __webpack_require__(/*! ../react/svgbundle */ "./src/react/svgbundle.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SvgBundleComponent", function() { return _react_svgbundle__WEBPACK_IMPORTED_MODULE_83__["SvgBundleComponent"]; });
 
 // react
 
@@ -11414,6 +11463,8 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
+
 
 
 
@@ -11427,7 +11478,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!******************************!*\
   !*** ./src/entries/react.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, createPopupModelWithListModel, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper, Model, bootstrapThemeName, bootstrapThemeColors, bootstrapThemeCssRules, bootstrapMaterialThemeName, bootstrapMaterialThemeColors, bootstrapMaterialThemeCssRules, defaultBootstrapCss, defaultBootstrapMaterialCss, Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, QuestionErrorComponent, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent */
+/*! 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, bootstrapThemeName, bootstrapThemeColors, bootstrapThemeCssRules, bootstrapMaterialThemeName, bootstrapMaterialThemeColors, bootstrapMaterialThemeCssRules, defaultBootstrapCss, defaultBootstrapMaterialCss, Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, ListItemContent, ListItemGroup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, QuestionErrorComponent, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -11952,6 +12003,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionRankingItem", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_3__["SurveyQuestionRankingItem"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionRankingItemContent", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_3__["SurveyQuestionRankingItemContent"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RatingItem", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_3__["RatingItem"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RatingItemStar", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_3__["RatingItemStar"]; });
@@ -12050,6 +12103,10 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Popup", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_3__["Popup"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ListItemContent", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_3__["ListItemContent"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ListItemGroup", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_3__["ListItemGroup"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "List", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_3__["List"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TitleActions", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_3__["TitleActions"]; });
@@ -16078,7 +16135,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; }
@@ -16610,7 +16667,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) {
@@ -16625,7 +16682,7 @@ var FunctionFactory = /** @class */ (function () {
                 classRunner[key] = properties[key];
             }
         }
-        return classRunner.func(params);
+        return classRunner.func(params, originalParams);
     };
     FunctionFactory.Instance = new FunctionFactory();
     return FunctionFactory;
@@ -16697,7 +16754,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];
@@ -16708,10 +16765,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) {
@@ -16727,9 +16790,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;
@@ -16749,8 +16812,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)
@@ -16760,8 +16823,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)
@@ -16770,8 +16833,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)
@@ -16780,8 +16843,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)
@@ -16791,11 +16854,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) {
@@ -16812,23 +16875,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;
@@ -18043,6 +18114,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",
@@ -18527,6 +18599,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 ***!
@@ -21435,8 +21518,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",
@@ -21462,10 +21547,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;
         };
@@ -21488,6 +21580,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();
@@ -21533,6 +21626,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;
@@ -21593,6 +21706,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);
@@ -32516,7 +32637,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) {
@@ -32540,12 +32661,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);
         }
@@ -32822,8 +32943,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;
@@ -32912,7 +33033,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;
@@ -32992,12 +33115,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++) {
@@ -33128,6 +33251,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 (_) {
@@ -33135,9 +33259,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
                 };
             }
@@ -33401,7 +33526,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) {
@@ -33419,8 +33544,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;
@@ -33740,16 +33865,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 () {
@@ -33794,13 +33916,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)
@@ -33811,6 +33934,9 @@ var PanelModelBase = /** @class */ (function (_super) {
             else {
                 var question = element;
                 if (!question.validate(rec.fireCallback, rec)) {
+                    if (!firstErroredEl) {
+                        firstErroredEl = question;
+                    }
                     if (!rec.firstErrorQuestion) {
                         rec.firstErrorQuestion = question;
                     }
@@ -33820,6 +33946,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);
@@ -34332,21 +34472,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", {
         /**
@@ -34943,12 +35072,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)
@@ -35132,6 +35255,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))
@@ -36632,9 +36768,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();
@@ -36672,11 +36809,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;
@@ -36693,12 +36843,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;
@@ -36720,6 +36871,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) {
@@ -36757,10 +36910,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 () {
@@ -36918,6 +37072,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,
@@ -37574,7 +37729,11 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
         this.model.onHiding();
     };
     PopupBaseViewModel.prototype.getLeaveOptions = function () {
-        return { cssClass: "sv-popup--animate-leave" };
+        return { cssClass: "sv-popup--animate-leave", onBeforeRunAnimation: function (el) {
+                el.setAttribute("inert", "");
+            },
+            onAfterRunAnimation: function (el) { return el.removeAttribute("inert"); }
+        };
     };
     PopupBaseViewModel.prototype.getEnterOptions = function () {
         return { cssClass: "sv-popup--animate-enter" };
@@ -37585,6 +37744,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);
@@ -37869,7 +38029,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;
         }
@@ -38049,6 +38209,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);
@@ -39523,6 +39686,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", {
@@ -39765,7 +39929,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
@@ -39775,14 +39939,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)
@@ -39991,6 +40158,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);
@@ -40606,6 +40787,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();
@@ -40682,9 +40870,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)
@@ -41034,13 +41222,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,
@@ -41051,7 +41235,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
@@ -41091,7 +41275,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) {
@@ -42097,6 +42281,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 () {
@@ -42105,6 +42298,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
             return this.otherValueCore;
         },
         set: function (val) {
+            this.updatePrevOtherErrorValue(val);
             if (!this.showCommentArea) {
                 this.comment = val;
             }
@@ -42557,6 +42751,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;
@@ -42601,6 +42796,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)) {
@@ -43236,6 +43433,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 () {
@@ -43462,7 +43661,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; };
@@ -44059,7 +44259,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);
@@ -44441,7 +44641,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 () {
@@ -44646,6 +44845,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)
@@ -45265,6 +45473,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;
@@ -47149,6 +47359,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];
         }
@@ -48538,7 +48751,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);
@@ -49453,8 +49675,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;
@@ -50824,6 +51047,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();
@@ -51662,6 +51895,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();
@@ -51784,6 +52018,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;
@@ -51793,9 +52050,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;
     };
@@ -52256,18 +52514,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;
@@ -52282,6 +52544,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++) {
@@ -55514,6 +55785,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;
@@ -55536,8 +55814,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;
@@ -56017,11 +56299,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();
@@ -56041,6 +56321,7 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
             isAnimationEnabled: function () {
                 return _this.animationAllowed;
             },
+            getRerenderEvent: function () { return _this.onElementRerendered; },
             getAnimatedElement: function (el) {
                 return el.getRootElement();
             },
@@ -56901,7 +57182,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) {
@@ -60051,6 +60331,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
                 .toString();
         };
         return {
+            getRerenderEvent: function () { return _this.onElementRerendered; },
             getAnimatedElement: function (panel) {
                 var _a, _b;
                 if (panel && _this.cssContent) {
@@ -61555,7 +61836,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;
@@ -62387,6 +62668,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 () {
@@ -62459,6 +62742,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 ||
@@ -62492,6 +62776,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 /**
  * A class that describes the Ranking question type.
  *
@@ -62511,33 +62796,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))
@@ -62561,6 +62850,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);
@@ -62568,27 +62859,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);
@@ -62602,16 +62882,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();
@@ -62661,15 +62937,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) {
@@ -62677,10 +62947,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)
@@ -62741,7 +63011,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();
@@ -62762,19 +63037,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" };
                 }
@@ -62782,9 +63070,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", {
@@ -62801,26 +63100,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; }
@@ -62835,9 +63140,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) {
@@ -62846,7 +63151,7 @@ var QuestionRankingModel = /** @class */ (function (_super) {
                     newRankingChoices.push(choice);
             });
         });
-        this.setPropertyValue("rankingChoices", newRankingChoices);
+        this.rankingChoices = newRankingChoices;
     };
     QuestionRankingModel.prototype.updateUnRankingChoices = function (newRankingChoices) {
         var unRankingChoices = [];
@@ -62926,6 +63231,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; };
@@ -62954,20 +63260,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);
@@ -62977,9 +63279,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();
@@ -63019,6 +63321,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.
@@ -63108,11 +63423,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);
@@ -63195,7 +63526,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");
@@ -63838,6 +64170,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);
         }
@@ -65899,8 +66233,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 () {
@@ -66374,15 +66711,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");
@@ -66771,7 +67104,7 @@ var SurveyQuestionBooleanCheckbox = /** @class */ (function (_super) {
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { className: cssClasses.checkboxLabel },
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { ref: this.checkRef, type: "checkbox", name: this.question.name, value: this.question.booleanValue === null
                             ? ""
-                            : this.question.booleanValue, id: this.question.inputId, className: cssClasses.controlCheckbox, disabled: this.isDisplayMode, checked: this.question.booleanValue || false, onChange: this.handleOnChange, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
+                            : this.question.booleanValue, id: this.question.inputId, className: cssClasses.controlCheckbox, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, checked: this.question.booleanValue || false, onChange: this.handleOnChange, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: cssClasses.checkboxMaterialDecorator },
                         this.question.svgIcon ?
                             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: cssClasses.checkboxItemDecorator },
@@ -66839,7 +67172,7 @@ var SurveyQuestionBooleanRadio = /** @class */ (function (_super) {
         var cssClasses = this.question.cssClasses;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { role: "presentation", className: this.question.getRadioItemClass(cssClasses, value) },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { className: cssClasses.radioLabel },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "radio", name: this.question.name, value: value, "aria-errormessage": this.question.ariaErrormessage, checked: value === this.question.booleanValueRendered, disabled: this.question.isInputReadOnly, className: cssClasses.itemRadioControl, onChange: this.handleOnChange }),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "radio", name: this.question.name, value: value, "aria-errormessage": this.question.ariaErrormessage, checked: value === this.question.booleanValueRendered, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, className: cssClasses.itemRadioControl, onChange: this.handleOnChange }),
                 this.question.cssClasses.materialRadioDecorator ?
                     (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: cssClasses.materialRadioDecorator }, this.question.itemSvgIcon ?
                         (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: cssClasses.itemRadioDecorator },
@@ -66964,7 +67297,7 @@ var SurveyQuestionBoolean = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { className: itemClass, onClick: this.handleOnClick },
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { ref: this.checkRef, type: "checkbox", name: this.question.name, value: this.question.booleanValue === null
                         ? ""
-                        : this.question.booleanValue, id: this.question.inputId, className: cssClasses.control, disabled: this.isDisplayMode, checked: this.question.booleanValue || false, onChange: this.handleOnChange, role: this.question.a11y_input_ariaRole, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage }),
+                        : this.question.booleanValue, id: this.question.inputId, className: cssClasses.control, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, checked: this.question.booleanValue || false, onChange: this.handleOnChange, role: this.question.a11y_input_ariaRole, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage }),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.sliderGhost, onClick: function (event) { return _this.handleOnLabelClick(event, _this.question.swapOrder); } },
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.getLabelCss(this.question.swapOrder) }, this.renderLocString(this.question.locLabelLeft))),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.switch, onClick: this.handleOnSwitchClick },
@@ -67620,11 +67953,11 @@ var SurveyFilePreview = /** @class */ (function (_super) {
         var previews = this.question.previewValue.map(function (val, index) {
             if (!val)
                 return null;
-            return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { key: _this.question.inputId + "_" + index, className: _this.question.cssClasses.previewItem, style: { display: _this.question.isPreviewVisible(index) ? undefined : "none" } },
+            return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { key: _this.question.inputId + "_" + index, className: _this.question.cssClasses.previewItem, onClick: function (event) { return _this.question.doDownloadFileFromContainer(event); }, style: { display: _this.question.isPreviewVisible(index) ? undefined : "none" } },
                 _this.renderFileSign(_this.question.cssClasses.fileSign, val),
                 react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: _this.question.getImageWrapperCss(val) },
                     _this.question.canPreviewImage(val) ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("img", { src: val.content, style: { height: _this.question.imageHeight, width: _this.question.imageWidth }, alt: "File preview" })) : (_this.question.cssClasses.defaultImage ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { iconName: _this.question.cssClasses.defaultImageIconId, size: "auto", className: _this.question.cssClasses.defaultImage })) : null),
-                    val.name && !_this.question.isReadOnly ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: _this.question.getRemoveButtonCss(), onClick: function () { return _this.question.doRemoveFile(val); } },
+                    val.name && !_this.question.isReadOnly ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: _this.question.getRemoveButtonCss(), onClick: function (event) { return _this.question.doRemoveFile(val, event); } },
                         react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: _this.question.cssClasses.removeFile }, _this.question.removeFileCaption),
                         (_this.question.cssClasses.removeFileSvgIconId) ?
                             (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { title: _this.question.removeFileCaption, iconName: _this.question.cssClasses.removeFileSvgIconId, size: "auto", className: _this.question.cssClasses.removeFileSvg })) : null)) : null),
@@ -67781,6 +68114,166 @@ _element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.re
 });
 
 
+/***/ }),
+
+/***/ "./src/react/components/list/list-item-content.tsx":
+/*!*********************************************************!*\
+  !*** ./src/react/components/list/list-item-content.tsx ***!
+  \*********************************************************/
+/*! exports provided: ListItemContent */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ListItemContent", function() { return ListItemContent; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../element-factory */ "./src/react/element-factory.tsx");
+/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../reactquestion_element */ "./src/react/reactquestion_element.tsx");
+/* harmony import */ var _svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+
+
+
+
+var ListItemContent = /** @class */ (function (_super) {
+    __extends(ListItemContent, _super);
+    function ListItemContent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(ListItemContent.prototype, "model", {
+        get: function () {
+            return this.props.model;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ListItemContent.prototype, "item", {
+        get: function () {
+            return this.props.item;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ListItemContent.prototype.getStateElement = function () {
+        return this.item;
+    };
+    ListItemContent.prototype.render = function () {
+        if (!this.item)
+            return null;
+        var content = [];
+        var text = this.renderLocString(this.item.locTitle, undefined, "locString");
+        if (this.item.iconName) {
+            var icon = react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { key: "icon", className: this.model.cssClasses.itemIcon, iconName: this.item.iconName, size: this.item.iconSize, "aria-label": this.item.title });
+            content.push(icon);
+            content.push(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { key: "text" }, text));
+        }
+        else {
+            content.push(text);
+        }
+        if (this.item.markerIconName) {
+            var icon = react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { key: "marker", className: this.item.cssClasses.itemMarkerIcon, iconName: this.item.markerIconName, size: this.item.markerIconSize });
+            content.push(icon);
+        }
+        return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, content);
+    };
+    return ListItemContent;
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_2__["SurveyElementBase"]));
+
+_element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.registerElement("sv-list-item-content", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(ListItemContent, props);
+});
+
+
+/***/ }),
+
+/***/ "./src/react/components/list/list-item-group.tsx":
+/*!*******************************************************!*\
+  !*** ./src/react/components/list/list-item-group.tsx ***!
+  \*******************************************************/
+/*! exports provided: ListItemGroup */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ListItemGroup", function() { return ListItemGroup; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../element-factory */ "./src/react/element-factory.tsx");
+/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../reactquestion_element */ "./src/react/reactquestion_element.tsx");
+/* harmony import */ var _popup_popup__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../popup/popup */ "./src/react/components/popup/popup.tsx");
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+
+
+
+
+var ListItemGroup = /** @class */ (function (_super) {
+    __extends(ListItemGroup, _super);
+    function ListItemGroup() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(ListItemGroup.prototype, "model", {
+        get: function () {
+            return this.props.model;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ListItemGroup.prototype, "item", {
+        get: function () {
+            return this.props.item;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ListItemGroup.prototype.getStateElement = function () {
+        return this.item;
+    };
+    ListItemGroup.prototype.render = function () {
+        var _a;
+        if (!this.item)
+            return null;
+        var newElement = _element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.createElement("sv-list-item-content", { item: this.item, key: "content" + this.item.id, model: this.model });
+        return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null,
+            newElement,
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_popup_popup__WEBPACK_IMPORTED_MODULE_3__["Popup"], { model: (_a = this.item) === null || _a === void 0 ? void 0 : _a.popupModel }));
+    };
+    return ListItemGroup;
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_2__["SurveyElementBase"]));
+
+_element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.registerElement("sv-list-item-group", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(ListItemGroup, props);
+});
+
+
 /***/ }),
 
 /***/ "./src/react/components/list/list-item.tsx":
@@ -67798,7 +68291,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../element-factory */ "./src/react/element-factory.tsx");
 /* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../reactquestion_element */ "./src/react/reactquestion_element.tsx");
 /* harmony import */ var _reactSurvey__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../reactSurvey */ "./src/react/reactSurvey.tsx");
-/* harmony import */ var _svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -67818,7 +68310,6 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
-
 var ListItem = /** @class */ (function (_super) {
     __extends(ListItem, _super);
     function ListItem() {
@@ -67853,25 +68344,9 @@ var ListItem = /** @class */ (function (_super) {
             paddingInlineStart: this.model.getItemIndent(this.item)
         };
         var className = this.model.getItemClass(this.item);
-        var content = [];
-        if (!this.item.component) {
-            var text = this.renderLocString(this.item.locTitle, undefined, "locString");
-            if (this.item.iconName) {
-                var icon = react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_4__["SvgIcon"], { key: 1, className: this.model.cssClasses.itemIcon, iconName: this.item.iconName, size: this.item.iconSize, "aria-label": this.item.title });
-                content.push(icon);
-                content.push(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { key: 2 }, text));
-            }
-            else {
-                content.push(text);
-            }
-        }
-        else {
-            var newElement = _element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.createElement(this.item.component, { item: this.item, key: this.item.id });
-            if (!!newElement) {
-                content.push(newElement);
-            }
-        }
-        var contentWrap = react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { style: contentWrapStyle, className: this.model.cssClasses.itemBody, title: this.item.locTitle.calculatedText }, content);
+        var itemContent = this.item.component || "sv-list-item-content";
+        var newElement = _element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.createElement(itemContent, { item: this.item, key: this.item.id, model: this.model });
+        var contentWrap = react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { style: contentWrapStyle, className: this.model.cssClasses.itemBody, title: this.item.locTitle.calculatedText, onMouseOver: function (event) { _this.model.onItemHover(_this.item); }, onMouseLeave: function (event) { _this.model.onItemLeave(_this.item); } }, newElement);
         var separator = this.item.needSeparator ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.model.cssClasses.itemSeparator }) : null;
         var isVisible = this.model.isItemVisible(this.item);
         var style = {
@@ -68841,7 +69316,7 @@ var Popup = /** @class */ (function (_super) {
     };
     Popup.prototype.setTargetElement = function () {
         var container = this.containerRef.current;
-        this.popup.setComponentElement(container, this.props.getTarget ? this.props.getTarget(container) : undefined);
+        this.popup.setComponentElement(container, this.props.getTarget ? this.props.getTarget(container) : undefined, this.props.getArea ? this.props.getArea(container) : undefined);
     };
     Popup.prototype.componentDidMount = function () {
         _super.prototype.componentDidMount.call(this);
@@ -69170,7 +69645,7 @@ var RatingItemSmiley = /** @class */ (function (_super) {
     RatingItemSmiley.prototype.render = function () {
         var _this = this;
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { onMouseDown: this.handleOnMouseDown, style: this.question.getItemStyle(this.item.itemValue, this.item.highlight), className: this.question.getItemClass(this.item.itemValue), onMouseOver: function (e) { return _this.question.onItemMouseIn(_this.item); }, onMouseOut: function (e) { return _this.question.onItemMouseOut(_this.item); } },
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.isDisplayMode, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { size: "auto", iconName: this.question.getItemSmileyIconName(this.item.itemValue), title: this.item.text })));
     };
     return RatingItemSmiley;
@@ -69225,7 +69700,7 @@ var RatingItemStar = /** @class */ (function (_super) {
     RatingItemStar.prototype.render = function () {
         var _this = this;
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { onMouseDown: this.handleOnMouseDown, className: this.question.getItemClass(this.item.itemValue), onMouseOver: function (e) { return _this.question.onItemMouseIn(_this.item); }, onMouseOut: function (e) { return _this.question.onItemMouseOut(_this.item); } },
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.isDisplayMode, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { className: "sv-star", size: "auto", iconName: this.question.itemStarIcon, title: this.item.text }),
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { className: "sv-star-2", size: "auto", iconName: this.question.itemStarIconAlt, title: this.item.text })));
     };
@@ -69317,7 +69792,7 @@ var RatingItem = /** @class */ (function (_super) {
     RatingItem.prototype.render = function () {
         var itemText = this.renderLocString(this.item.locText);
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { onMouseDown: this.handleOnMouseDown, className: this.question.getItemClassByText(this.item.itemValue, this.item.text) },
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.isDisplayMode, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: this.question.cssClasses.itemText }, itemText)));
     };
     RatingItem.prototype.componentDidMount = function () {
@@ -70089,7 +70564,7 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
             var text = (this.question.selectedItemLocText) ? this.renderLocString(this.question.selectedItemLocText) : "";
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            selectElement = react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.question.inputId, className: this.question.getControlClass(), disabled: true },
+            selectElement = react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.question.inputId, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, tabIndex: this.question.isDisabledAttr ? undefined : 0, className: this.question.getControlClass() },
                 text,
                 this.renderReadOnlyElement());
         }
@@ -70123,7 +70598,7 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.question.inputId, className: this.question.getControlClass(), tabIndex: dropdownListModel.noTabIndex ? undefined : 0, 
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            disabled: this.question.isInputReadOnly, required: this.question.isRequired, onKeyDown: this.keyhandler, onBlur: this.blur, role: this.question.ariaRole, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage, "aria-expanded": this.question.ariaExpanded === null ? undefined : this.question.ariaExpanded === "true", "aria-controls": dropdownListModel.listElementId, "aria-activedescendant": dropdownListModel.ariaActivedescendant },
+            disabled: this.question.isDisabledAttr, required: this.question.isRequired, onKeyDown: this.keyhandler, onBlur: this.blur, role: this.question.ariaRole, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage, "aria-expanded": this.question.ariaExpanded === null ? undefined : this.question.ariaExpanded === "true", "aria-controls": dropdownListModel.listElementId, "aria-activedescendant": dropdownListModel.ariaActivedescendant },
             dropdownListModel.showHintPrefix ?
                 (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.hintPrefix },
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, dropdownListModel.hintStringPrefix))) : null,
@@ -70133,7 +70608,7 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { style: { visibility: "hidden" }, "data-bind": "text: model.filterString" }, dropdownListModel.inputStringRendered),
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, dropdownListModel.hintStringSuffix))) : null,
                 valueElement,
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), ref: function (element) { return (_this.inputElement = element); }, className: this.question.cssClasses.filterStringInput, role: dropdownListModel.filterStringEnabled ? this.question.ariaRole : undefined, "aria-expanded": this.question.ariaExpanded === null ? undefined : this.question.ariaExpanded === "true", "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-controls": dropdownListModel.listElementId, "aria-activedescendant": dropdownListModel.ariaActivedescendant, placeholder: dropdownListModel.placeholderRendered, readOnly: dropdownListModel.filterReadOnly ? true : undefined, tabIndex: dropdownListModel.noTabIndex ? undefined : -1, disabled: this.question.isInputReadOnly, inputMode: dropdownListModel.inputMode, onChange: function (e) { onInputChange(e); }, onBlur: this.blur, onFocus: this.focus })),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), ref: function (element) { return (_this.inputElement = element); }, className: this.question.cssClasses.filterStringInput, role: dropdownListModel.filterStringEnabled ? this.question.ariaRole : undefined, "aria-expanded": this.question.ariaExpanded === null ? undefined : this.question.ariaExpanded === "true", "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-controls": dropdownListModel.listElementId, "aria-activedescendant": dropdownListModel.ariaActivedescendant, placeholder: dropdownListModel.placeholderRendered, readOnly: dropdownListModel.filterReadOnly ? true : undefined, tabIndex: dropdownListModel.noTabIndex ? undefined : -1, disabled: this.question.isDisabledAttr, inputMode: dropdownListModel.inputMode, onChange: function (e) { onInputChange(e); }, onBlur: this.blur, onFocus: this.focus })),
             this.createClearButton()));
     };
     SurveyQuestionDropdownBase.prototype.createClearButton = function () {
@@ -70979,6 +71454,8 @@ var SurveyQuestionImagePickerItem = /** @class */ (function (_super) {
         configurable: true
     });
     SurveyQuestionImagePickerItem.prototype.handleOnChange = function (event) {
+        if (this.question.isReadOnlyAttr)
+            return;
         if (this.question.multiSelect) {
             if (event.target.checked) {
                 this.question.value = this.question.value.concat(event.target.value);
@@ -71025,7 +71502,7 @@ var SurveyQuestionImagePickerItem = /** @class */ (function (_super) {
         }
         var renderedItem = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: itemClass },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { className: cssClasses.label },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { className: cssClasses.itemControl, id: this.question.getItemId(item), type: this.question.inputType, name: this.question.questionName, checked: isChecked, value: item.value, disabled: !this.question.getItemEnabled(item), onChange: this.handleOnChange, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { className: cssClasses.itemControl, id: this.question.getItemId(item), type: this.question.inputType, name: this.question.questionName, checked: isChecked, value: item.value, disabled: !this.question.getItemEnabled(item), readOnly: this.question.isReadOnlyAttr, onChange: this.handleOnChange, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.itemDecorator },
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.imageContainer },
                         !!this.question.cssClasses.checkedItemDecorator ?
@@ -73084,7 +73561,7 @@ var SurveyQuestionCheckboxItem = /** @class */ (function (_super) {
         var itemLabel = !this.hideCaption ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.cssClasses.controlLabel }, this.renderLocString(this.item.locText, this.textStyle)) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: itemClass, role: "presentation" },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { className: labelClass },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { className: this.cssClasses.itemControl, type: "checkbox", role: "option", name: this.question.name + this.item.id, value: this.item.value, id: id, style: this.inputStyle, disabled: !this.question.getItemEnabled(this.item), checked: isChecked, onChange: this.handleOnChange }),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { className: this.cssClasses.itemControl, type: "checkbox", role: "option", name: this.question.name + this.item.id, value: this.item.value, id: id, style: this.inputStyle, disabled: !this.question.getItemEnabled(this.item), readOnly: this.question.isReadOnlyAttr, checked: isChecked, onChange: this.handleOnChange }),
                 this.cssClasses.materialDecorator ?
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.cssClasses.materialDecorator }, this.question.itemSvgIcon ?
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: this.cssClasses.itemDecorator },
@@ -73169,7 +73646,7 @@ var SurveyQuestionComment = /** @class */ (function (_super) {
         }
         var counter = !!this.question.getMaxLength() ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_character_counter__WEBPACK_IMPORTED_MODULE_4__["CharacterCounterComponent"], { counter: this.question.characterCounter, remainingCharacterCounter: this.question.cssClasses.remainingCharacterCounter })) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null,
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("textarea", { id: this.question.inputId, className: this.question.className, disabled: this.question.isInputReadOnly, readOnly: this.question.isInputReadOnly, ref: function (textarea) { return (_this.setControl(textarea)); }, maxLength: this.question.getMaxLength(), placeholder: placeholder, onBlur: onBlur, onInput: onInput, onKeyDown: function (event) { _this.question.onKeyDown(event); }, cols: this.question.cols, rows: this.question.rows, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage, style: { resize: this.question.resizeStyle } }),
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("textarea", { id: this.question.inputId, className: this.question.className, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, ref: function (textarea) { return (_this.setControl(textarea)); }, maxLength: this.question.getMaxLength(), placeholder: placeholder, onBlur: onBlur, onInput: onInput, onKeyDown: function (event) { _this.question.onKeyDown(event); }, cols: this.question.cols, rows: this.question.rows, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage, style: { resize: this.question.resizeStyle } }),
             counter));
     };
     return SurveyQuestionComment;
@@ -73469,6 +73946,9 @@ var SurveyElementBase = /** @class */ (function (_super) {
     };
     SurveyElementBase.prototype.componentDidUpdate = function (prevProps, prevState) {
         this.makeBaseElementsReact();
+        this.getStateElements().forEach(function (el) {
+            el.afterRerender();
+        });
     };
     SurveyElementBase.prototype.allowComponentUpdate = function () {
         this._allowComponentUpdate = true;
@@ -73540,12 +74020,14 @@ var SurveyElementBase = /** @class */ (function (_super) {
     SurveyElementBase.prototype.makeBaseElementsReact = function () {
         var els = this.getStateElements();
         for (var i = 0; i < els.length; i++) {
+            els[i].enableOnElementRenderedEvent();
             this.makeBaseElementReact(els[i]);
         }
     };
     SurveyElementBase.prototype.unMakeBaseElementsReact = function () {
         var els = this.getStateElements();
         for (var i = 0; i < els.length; i++) {
+            els[i].disableOnElementRenderedEvent();
             this.unMakeBaseElementReact(els[i]);
         }
     };
@@ -73997,9 +74479,19 @@ var SurveyQuestionFile = /** @class */ (function (_super) {
         var clearButton = this.question.showRemoveButton ? this.renderClearButton(this.question.cssClasses.removeButton) : null;
         var clearButtonBottom = this.question.showRemoveButtonBottom ? this.renderClearButton(this.question.cssClasses.removeButtonBottom) : null;
         var fileNavigator = this.question.fileNavigatorVisible ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_1__["SurveyActionBar"], { model: this.question.fileNavigator })) : null;
-        var fileInput = (this.isDisplayMode ?
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "file", disabled: this.isDisplayMode, className: !this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss(), id: this.question.inputId, ref: function (input) { return (_this.setControl(input)); }, style: !this.isDisplayMode ? {} : { color: "transparent" }, multiple: this.question.allowMultiple, placeholder: this.question.title, accept: this.question.acceptedTypes }) : this.question.hasFileUI ?
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "file", disabled: this.isDisplayMode, tabIndex: -1, className: !this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss(), id: this.question.inputId, ref: function (input) { return (_this.setControl(input)); }, style: !this.isDisplayMode ? {} : { color: "transparent" }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage, multiple: this.question.allowMultiple, title: this.question.inputTitle, accept: this.question.acceptedTypes, capture: this.question.renderCapture }) : null);
+        var fileInput;
+        if (this.question.isReadOnlyAttr) {
+            fileInput = react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { readOnly: true, type: "file", className: !this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss(), id: this.question.inputId, ref: function (input) { return (_this.setControl(input)); }, style: !this.isDisplayMode ? {} : { color: "transparent" }, multiple: this.question.allowMultiple, placeholder: this.question.title, accept: this.question.acceptedTypes });
+        }
+        else if (this.question.isDisabledAttr) {
+            fileInput = react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { disabled: true, type: "file", className: !this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss(), id: this.question.inputId, ref: function (input) { return (_this.setControl(input)); }, style: !this.isDisplayMode ? {} : { color: "transparent" }, multiple: this.question.allowMultiple, placeholder: this.question.title, accept: this.question.acceptedTypes });
+        }
+        else if (this.question.hasFileUI) {
+            fileInput = react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "file", disabled: this.isDisplayMode, tabIndex: -1, className: !this.isDisplayMode ? this.question.cssClasses.fileInput : this.question.getReadOnlyFileCss(), id: this.question.inputId, ref: function (input) { return (_this.setControl(input)); }, style: !this.isDisplayMode ? {} : { color: "transparent" }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage, multiple: this.question.allowMultiple, title: this.question.inputTitle, accept: this.question.acceptedTypes, capture: this.question.renderCapture });
+        }
+        else {
+            fileInput = null;
+        }
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.fileRootCss },
             fileInput,
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.dragArea, onDrop: this.question.onDrop, onDragOver: this.question.onDragOver, onDragLeave: this.question.onDragLeave, onDragEnter: this.question.onDragEnter },
@@ -74391,7 +74883,7 @@ var SurveyQuestionMatrixCell = /** @class */ (function (_super) {
             mobileSpan));
     };
     SurveyQuestionMatrixCell.prototype.renderInput = function (inputId, isChecked) {
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { id: inputId, type: "radio", className: this.cssClasses.itemValue, name: this.row.fullName, value: this.column.value, disabled: this.row.isReadOnly, checked: isChecked, onChange: this.handleOnChange, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.getCellAriaLabel(this.row.locText.renderedHtml, this.column.locText.renderedHtml), "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage }));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { id: inputId, type: "radio", className: this.cssClasses.itemValue, name: this.row.fullName, value: this.column.value, disabled: this.row.isDisabledAttr, readOnly: this.row.isReadOnlyAttr, checked: isChecked, onChange: this.handleOnChange, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.getCellAriaLabel(this.row.locText.renderedHtml, this.column.locText.renderedHtml), "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage }));
     };
     return SurveyQuestionMatrixCell;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElement"]));
@@ -74502,71 +74994,39 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
-var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
-    __extends(SurveyQuestionMatrixDropdownBase, _super);
-    function SurveyQuestionMatrixDropdownBase(props) {
-        var _this = _super.call(this, props) || this;
-        //Create rendered table in contructor and not on rendering
-        var table = _this.question.renderedTable;
-        _this.state = _this.getState();
-        return _this;
+var SurveyQuestionMatrixTable = /** @class */ (function (_super) {
+    __extends(SurveyQuestionMatrixTable, _super);
+    function SurveyQuestionMatrixTable() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    Object.defineProperty(SurveyQuestionMatrixDropdownBase.prototype, "question", {
+    Object.defineProperty(SurveyQuestionMatrixTable.prototype, "question", {
         get: function () {
-            return this.questionBase;
+            return this.props.question;
         },
         enumerable: false,
         configurable: true
     });
-    SurveyQuestionMatrixDropdownBase.prototype.getState = function (prevState) {
-        if (prevState === void 0) { prevState = null; }
-        return { rowCounter: !prevState ? 0 : prevState.rowCounter + 1 };
-    };
-    SurveyQuestionMatrixDropdownBase.prototype.updateStateOnCallback = function () {
-        if (this.isRendering)
-            return;
-        this.setState(this.getState(this.state));
-    };
-    SurveyQuestionMatrixDropdownBase.prototype.componentDidMount = function () {
-        var _this = this;
-        _super.prototype.componentDidMount.call(this);
-        this.question.visibleRowsChangedCallback = function () {
-            _this.updateStateOnCallback();
-        };
-        this.question.onRenderedTableResetCallback = function () {
-            _this.question.renderedTable.renderedRowsChangedCallback = function () {
-                _this.updateStateOnCallback();
-            };
-            _this.updateStateOnCallback();
-        };
-        this.question.renderedTable.renderedRowsChangedCallback = function () {
-            _this.updateStateOnCallback();
-        };
-    };
-    SurveyQuestionMatrixDropdownBase.prototype.componentWillUnmount = function () {
-        _super.prototype.componentWillUnmount.call(this);
-        this.question.visibleRowsChangedCallback = function () { };
-        this.question.onRenderedTableResetCallback = function () { };
-        this.question.renderedTable.renderedRowsChangedCallback = function () { };
+    Object.defineProperty(SurveyQuestionMatrixTable.prototype, "creator", {
+        get: function () {
+            return this.props.creator;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyQuestionMatrixTable.prototype, "table", {
+        get: function () {
+            return this.question.renderedTable;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyQuestionMatrixTable.prototype.getStateElement = function () {
+        return this.table;
     };
-    SurveyQuestionMatrixDropdownBase.prototype.renderElement = function () {
-        return this.renderTableDiv();
+    SurveyQuestionMatrixTable.prototype.wrapCell = function (cell, element, reason) {
+        return this.props.wrapCell(cell, element, reason);
     };
-    SurveyQuestionMatrixDropdownBase.prototype.renderTableDiv = function () {
-        var _this = this;
-        var header = this.renderHeader();
-        var footers = this.renderFooter();
-        var rows = this.renderRows();
-        var divStyle = this.question.showHorizontalScroll
-            ? { overflowX: "scroll" }
-            : {};
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { style: divStyle, className: this.question.cssClasses.tableWrapper, ref: function (root) { return (_this.setControl(root)); } },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("table", { className: this.question.getTableCss() },
-                header,
-                rows,
-                footers)));
-    };
-    SurveyQuestionMatrixDropdownBase.prototype.renderHeader = function () {
+    SurveyQuestionMatrixTable.prototype.renderHeader = function () {
         var table = this.question.renderedTable;
         if (!table.showHeader)
             return null;
@@ -74594,14 +75054,14 @@ var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("thead", null,
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("tr", null, headers)));
     };
-    SurveyQuestionMatrixDropdownBase.prototype.renderFooter = function () {
+    SurveyQuestionMatrixTable.prototype.renderFooter = function () {
         var table = this.question.renderedTable;
         if (!table.showFooter)
             return null;
         var row = this.renderRow("footer", table.footerRow, this.question.cssClasses, "row-footer");
         return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("tfoot", null, row);
     };
-    SurveyQuestionMatrixDropdownBase.prototype.renderRows = function () {
+    SurveyQuestionMatrixTable.prototype.renderRows = function () {
         var cssClasses = this.question.cssClasses;
         var rows = [];
         var renderedRows = this.question.renderedTable.renderedRows;
@@ -74610,7 +75070,7 @@ var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
         }
         return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("tbody", null, rows);
     };
-    SurveyQuestionMatrixDropdownBase.prototype.renderRow = function (keyValue, row, cssClasses, reason) {
+    SurveyQuestionMatrixTable.prototype.renderRow = function (keyValue, row, cssClasses, reason) {
         var matrixrow = [];
         var cells = row.cells;
         for (var i = 0; i < cells.length; i++) {
@@ -74619,7 +75079,7 @@ var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
         var key = "row" + keyValue;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], { key: key }, (reason == "row-footer") ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("tr", null, matrixrow) : react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_matrix_row__WEBPACK_IMPORTED_MODULE_7__["MatrixRow"], { model: row, parentMatrix: this.question }, matrixrow)));
     };
-    SurveyQuestionMatrixDropdownBase.prototype.renderCell = function (cell, index, cssClasses, reason) {
+    SurveyQuestionMatrixTable.prototype.renderCell = function (cell, index, cssClasses, reason) {
         var key = "cell" + index;
         if (cell.hasQuestion) {
             return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionMatrixDropdownCell, { key: key, cssClasses: cssClasses, cell: cell, creator: this.creator, reason: reason }));
@@ -74639,7 +75099,7 @@ var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
         }
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("td", { className: cell.className, key: key, style: cellStyle, colSpan: cell.colSpans, "data-responsive-title": cell.headers, title: cell.getTitle() }, cellContent));
     };
-    SurveyQuestionMatrixDropdownBase.prototype.renderCellContent = function (cell, reason, cssClasses) {
+    SurveyQuestionMatrixTable.prototype.renderCellContent = function (cell, reason, cssClasses) {
         var cellContent = null;
         var cellStyle = null;
         if (!!cell.width || !!cell.minWidth) {
@@ -74681,6 +75141,64 @@ var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
         var readyCell = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, cellContent));
         return this.wrapCell(cell, readyCell, reason);
     };
+    SurveyQuestionMatrixTable.prototype.renderElement = function () {
+        var header = this.renderHeader();
+        var footers = this.renderFooter();
+        var rows = this.renderRows();
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("table", { className: this.question.getTableCss() },
+            header,
+            rows,
+            footers));
+    };
+    return SurveyQuestionMatrixTable;
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["SurveyElementBase"]));
+var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
+    __extends(SurveyQuestionMatrixDropdownBase, _super);
+    function SurveyQuestionMatrixDropdownBase(props) {
+        var _this = _super.call(this, props) || this;
+        //Create rendered table in contructor and not on rendering
+        var table = _this.question.renderedTable;
+        _this.state = _this.getState();
+        return _this;
+    }
+    Object.defineProperty(SurveyQuestionMatrixDropdownBase.prototype, "question", {
+        get: function () {
+            return this.questionBase;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyQuestionMatrixDropdownBase.prototype.getState = function (prevState) {
+        if (prevState === void 0) { prevState = null; }
+        return { rowCounter: !prevState ? 0 : prevState.rowCounter + 1 };
+    };
+    SurveyQuestionMatrixDropdownBase.prototype.updateStateOnCallback = function () {
+        if (this.isRendering)
+            return;
+        this.setState(this.getState(this.state));
+    };
+    SurveyQuestionMatrixDropdownBase.prototype.componentDidMount = function () {
+        var _this = this;
+        _super.prototype.componentDidMount.call(this);
+        this.question.onRenderedTableResetCallback = function () {
+            _this.updateStateOnCallback();
+        };
+    };
+    SurveyQuestionMatrixDropdownBase.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        this.question.onRenderedTableResetCallback = function () { };
+    };
+    SurveyQuestionMatrixDropdownBase.prototype.renderElement = function () {
+        return this.renderTableDiv();
+    };
+    SurveyQuestionMatrixDropdownBase.prototype.renderTableDiv = function () {
+        var _this = this;
+        var divStyle = this.question.showHorizontalScroll
+            ? { overflowX: "scroll" }
+            : {};
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { style: divStyle, className: this.question.cssClasses.tableWrapper, ref: function (root) { return (_this.setControl(root)); } },
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionMatrixTable, { question: this.question, creator: this.creator, wrapCell: function (cell, element, reason) { return _this.wrapCell(cell, element, reason); } })));
+    };
     return SurveyQuestionMatrixDropdownBase;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["SurveyQuestionElementBase"]));
 
@@ -75555,7 +76073,7 @@ var SurveyQuestionRadioItem = /** @class */ (function (_super) {
         var itemLabel = !this.hideCaption ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: controlLabelClass }, this.renderLocString(this.item.locText, this.textStyle)) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: itemClass, role: "presentation" },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { onMouseDown: this.handleOnMouseDown, className: labelClass },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { "aria-errormessage": this.question.ariaErrormessage, className: this.cssClasses.itemControl, id: this.question.getItemId(this.item), type: "radio", name: this.question.questionName, checked: this.isChecked, value: this.item.value, disabled: !this.question.getItemEnabled(this.item), onChange: this.handleOnChange }),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { "aria-errormessage": this.question.ariaErrormessage, className: this.cssClasses.itemControl, id: this.question.getItemId(this.item), type: "radio", name: this.question.questionName, checked: this.isChecked, value: this.item.value, disabled: !this.question.getItemEnabled(this.item), readOnly: this.question.isReadOnlyAttr, onChange: this.handleOnChange }),
                 this.cssClasses.materialDecorator ?
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.cssClasses.materialDecorator }, this.question.itemSvgIcon ?
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: this.cssClasses.itemDecorator },
@@ -75581,18 +76099,20 @@ _reactquestion_factory__WEBPACK_IMPORTED_MODULE_3__["ReactQuestionFactory"].Inst
 /*!*********************************************!*\
   !*** ./src/react/reactquestion_ranking.tsx ***!
   \*********************************************/
-/*! exports provided: SurveyQuestionRanking, SurveyQuestionRankingItem */
+/*! exports provided: SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionRanking", function() { return SurveyQuestionRanking; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionRankingItem", function() { return SurveyQuestionRankingItem; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionRankingItemContent", function() { return SurveyQuestionRankingItemContent; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
 /* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactquestion_factory */ "./src/react/reactquestion_factory.tsx");
 /* harmony import */ var _reactsurveymodel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactsurveymodel */ "./src/react/reactsurveymodel.tsx");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -75612,6 +76132,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var SurveyQuestionRanking = /** @class */ (function (_super) {
     __extends(SurveyQuestionRanking, _super);
     function SurveyQuestionRanking() {
@@ -75633,15 +76154,15 @@ var SurveyQuestionRanking = /** @class */ (function (_super) {
             var unrankedItem = true;
             return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.rootClass, ref: function (root) { return (_this.setControl(root)); } },
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.getContainerClasses("from"), "data-ranking": "from-container" },
-                    this.getItems(this.question.unRankingChoices, unrankedItem),
-                    this.question.unRankingChoices.length === 0 ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.containerPlaceholder },
+                    this.getItems(this.question.renderedUnRankingChoices, unrankedItem),
+                    this.question.renderedUnRankingChoices.length === 0 ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.containerPlaceholder },
                         " ",
                         this.renderLocString(this.question.locSelectToRankEmptyRankedAreaText),
                         " ") : null),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.containersDivider }),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.getContainerClasses("to"), "data-ranking": "to-container" },
                     this.getItems(),
-                    this.question.rankingChoices.length === 0 ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.containerPlaceholder },
+                    this.question.renderedRankingChoices.length === 0 ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.containerPlaceholder },
                         " ",
                         this.renderLocString(this.question.locSelectToRankEmptyUnrankedAreaText),
                         " ") : null)));
@@ -75649,7 +76170,7 @@ var SurveyQuestionRanking = /** @class */ (function (_super) {
     };
     SurveyQuestionRanking.prototype.getItems = function (choices, unrankedItem) {
         var _this = this;
-        if (choices === void 0) { choices = this.question.rankingChoices; }
+        if (choices === void 0) { choices = this.question.renderedRankingChoices; }
         var items = [];
         var _loop_1 = function (i) {
             var item = choices[i];
@@ -75782,6 +76303,7 @@ var SurveyQuestionRankingItem = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("use", { xlinkHref: this.question.dashSvgIcon })));
     };
     SurveyQuestionRankingItem.prototype.renderElement = function () {
+        var itemContentComponent = _element_factory__WEBPACK_IMPORTED_MODULE_4__["ReactElementFactory"].Instance.createElement(this.question.itemContentComponent, { item: this.item, cssClasses: this.cssClasses });
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { tabIndex: this.itemTabIndex, className: this.itemClass, onKeyDown: this.handleKeydown, onPointerDown: this.handlePointerDown, onPointerUp: this.handlePointerUp, "data-sv-drop-target-ranking-item": this.index },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { tabIndex: -1, style: { outline: "none" } },
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.cssClasses.itemGhostNode }),
@@ -75792,11 +76314,39 @@ var SurveyQuestionRankingItem = /** @class */ (function (_super) {
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: this.question.getIconFocusCss() },
                             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("use", { xlinkHref: this.question.arrowsSvgIcon }))),
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.getItemIndexClasses(this.item) }, (!this.unrankedItem && this.indexText) ? this.indexText : this.renderEmptyIcon()),
-                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.cssClasses.controlLabel }, this.text)))));
+                    itemContentComponent))));
     };
     return SurveyQuestionRankingItem;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElement"]));
 
+var SurveyQuestionRankingItemContent = /** @class */ (function (_super) {
+    __extends(SurveyQuestionRankingItemContent, _super);
+    function SurveyQuestionRankingItemContent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(SurveyQuestionRankingItemContent.prototype, "item", {
+        get: function () {
+            return this.props.item;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyQuestionRankingItemContent.prototype, "cssClasses", {
+        get: function () {
+            return this.props.cssClasses;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyQuestionRankingItemContent.prototype.renderElement = function () {
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.cssClasses.controlLabel }, _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["SurveyElementBase"].renderLocString(this.item.locText));
+    };
+    return SurveyQuestionRankingItemContent;
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElement"]));
+
+_element_factory__WEBPACK_IMPORTED_MODULE_4__["ReactElementFactory"].Instance.registerElement("sv-ranking-item-content", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionRankingItemContent, props);
+});
 _reactquestion_factory__WEBPACK_IMPORTED_MODULE_2__["ReactQuestionFactory"].Instance.registerQuestion("ranking", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionRanking, props);
 });
@@ -76027,7 +76577,9 @@ var SurveyQuestionText = /** @class */ (function (_super) {
         }
         var counter = !!this.question.getMaxLength() ? (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_character_counter__WEBPACK_IMPORTED_MODULE_3__["CharacterCounterComponent"], { counter: this.question.characterCounter, remainingCharacterCounter: this.question.cssClasses.remainingCharacterCounter })) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null,
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { id: this.question.inputId, disabled: this.isDisplayMode, className: inputClass, type: this.question.inputType, 
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { id: this.question.inputId, 
+                // disabled={this.isDisplayMode}
+                disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, className: inputClass, type: this.question.inputType, 
                 //ref={this.controlRef}
                 ref: function (input) { return (_this.setControl(input)); }, style: this.question.inputStyle, maxLength: this.question.getMaxLength(), min: this.question.renderedMin, max: this.question.renderedMax, step: this.question.renderedStep, size: this.question.inputSize, placeholder: placeholder, list: this.question.dataListId, autoComplete: this.question.autocomplete, onBlur: this.question.onBlur, onFocus: this.question.onFocus, onChange: this.question.onChange, onKeyUp: this.question.onKeyUp, onKeyDown: this.question.onKeyDown, onCompositionUpdate: function (event) { return _this.question.onCompositionUpdate(event.nativeEvent); }, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage }),
             counter));
@@ -78366,12 +78918,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)
@@ -79462,6 +80014,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) {
@@ -79472,12 +80026,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 () {
@@ -79498,15 +80056,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
@@ -80607,10 +81176,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",
@@ -84015,7 +84586,7 @@ var SurveyModel = /** @class */ (function (_super) {
         }
         var visPages = this.visiblePages;
         var res = true;
-        var rec = { fireCallback: fireCallback, focuseOnFirstError: focusOnFirstError, firstErrorQuestion: null, result: false };
+        var rec = { fireCallback: fireCallback, focusOnFirstError: focusOnFirstError, firstErrorQuestion: null, result: false };
         for (var i = 0; i < visPages.length; i++) {
             if (!visPages[i].validate(fireCallback, focusOnFirstError, rec)) {
                 res = false;
@@ -85354,7 +85925,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,
@@ -85364,7 +85935,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);
         }
     };
     /**
@@ -88816,10 +89387,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";
     }
-    return "sv_progress-toc" + (" sv_progress-toc--" + (survey.tocLocation || "").toLowerCase());
+    rootCss += (" " + TOCModel.RootStyle + "--" + (survey.tocLocation || "").toLowerCase());
+    if (TOCModel.StickyPosition) {
+        rootCss += " " + TOCModel.RootStyle + "--sticky";
+    }
+    return rootCss;
 }
 var TOCModel = /** @class */ (function () {
     function TOCModel(survey) {
@@ -88833,7 +89409,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;
@@ -88852,6 +89458,8 @@ var TOCModel = /** @class */ (function () {
         this.popupModel.dispose();
         this.listModel.dispose();
     };
+    TOCModel.RootStyle = "sv_progress-toc";
+    TOCModel.StickyPosition = true;
     return TOCModel;
 }());
 
@@ -89962,8 +90570,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 ||
@@ -89981,6 +90590,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 })();
 
 
+
 var AnimationUtils = /** @class */ (function () {
     function AnimationUtils() {
         this.cancelQueue = [];
@@ -90024,7 +90634,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);
@@ -90043,9 +90653,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);
@@ -90055,7 +90671,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);
@@ -90073,30 +90689,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 () {
@@ -90114,25 +90724,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;
@@ -90143,40 +90751,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));
@@ -90187,11 +90809,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);
@@ -90202,8 +90864,9 @@ var AnimationProperty = /** @class */ (function () {
         }
     };
     AnimationProperty.prototype.cancel = function () {
-        this.animation.cancel();
         this._debouncedSync.cancel();
+        this.cancelCallback && this.cancelCallback();
+        this.animation.cancel();
     };
     return AnimationProperty;
 }());
@@ -90219,8 +90882,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 () {
@@ -90244,15 +90909,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;
@@ -90271,10 +90955,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);
@@ -90668,16 +91354,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;
@@ -90695,29 +91420,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;
     };
@@ -90758,18 +91487,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) {
@@ -90777,6 +91503,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") {
@@ -91141,7 +91883,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";
@@ -91156,6 +91898,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; });
@@ -91476,6 +92219,8 @@ function preventDefaults(event) {
     event.stopPropagation();
 }
 function classesToSelector(str) {
+    if (!str)
+        return str;
     var re = /\s*?([\w-]+)\s*?/g;
     return str.replace(re, ".$1");
 }
@@ -91624,6 +92369,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 };
+}