survey-core 1.9.139 → 1.10.2

package/survey.core.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.139
+ * surveyjs - Survey JavaScript library v1.10.2
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -742,8 +742,9 @@ function createDropdownActionModelAdvanced(actionOptions, listOptions, popupOpti
         }
         listOptions.onSelectionChanged(item);
         innerPopupModel.toggleVisibility();
-    }, listOptions.allowSelection, listOptions.selectedItem, listOptions.onFilterStringChangedCallback);
+    }, listOptions.allowSelection, listOptions.selectedItem);
     listModel.locOwner = locOwner;
+    listModel.setOnFilterStringChangedCallback(listOptions.onFilterStringChangedCallback);
     var innerPopupModel = new _popup__WEBPACK_IMPORTED_MODULE_4__["PopupModel"]("sv-list", { model: listModel }, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.verticalPosition, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.horizontalPosition, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.showPointer, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.isModal, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.onCancel, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.onApply, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.onHide, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.onShow, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.cssClass, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.title, function () {
         listModel.dispose();
     });
@@ -994,9 +995,9 @@ var Action = /** @class */ (function (_super) {
         //Object.assign(this, item) to support IE11
         if (!!innerItem) {
             for (var key in innerItem) {
-                if (key !== "locTitle") {
-                    _this[key] = innerItem[key];
-                }
+                if (key === "locTitle" || key === "title" && !!_this.locTitle && !!_this.title)
+                    continue;
+                _this[key] = innerItem[key];
             }
         }
         if (!!_this.locTitleName) {
@@ -1867,6 +1868,7 @@ var Base = /** @class */ (function () {
          */
         this.onItemValuePropertyChanged = this.addEvent();
         this.isCreating = true;
+        this.animationAllowedLock = 0;
         this.bindingsValue = new Bindings(this);
         _jsonobject__WEBPACK_IMPORTED_MODULE_2__["CustomPropertiesCollection"].createProperties(this);
         this.onBaseCreating();
@@ -2241,8 +2243,6 @@ var Base = /** @class */ (function () {
      * @param val A new value for the property.
      */
     Base.prototype.setPropertyValue = function (name, val) {
-        if (name) {
-        }
         if (!this.isLoadingFromJson) {
             var prop = this.getPropertyByName(name);
             if (!!prop) {
@@ -2787,6 +2787,22 @@ var Base = /** @class */ (function () {
         if (includeHidden === void 0) { includeHidden = false; }
         return [];
     };
+    Object.defineProperty(Base.prototype, "animationAllowed", {
+        get: function () {
+            return this.getIsAnimationAllowed();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Base.prototype.getIsAnimationAllowed = function () {
+        return _settings__WEBPACK_IMPORTED_MODULE_3__["settings"].animationEnabled && this.animationAllowedLock >= 0 && !this.isLoadingFromJson && !this.isDisposed;
+    };
+    Base.prototype.blockAnimations = function () {
+        this.animationAllowedLock--;
+    };
+    Base.prototype.releaseAnimations = function () {
+        this.animationAllowedLock++;
+    };
     Base.currentDependencis = undefined;
     return Base;
 }());
@@ -5503,7 +5519,11 @@ var defaultV2Css = {
         footer: "sd-paneldynamic__footer",
         panelFooter: "sd-paneldynamic__panel-footer",
         footerButtonsContainer: "sd-paneldynamic__buttons-container",
+        panelsContainer: "sd-paneldynamic__panels-container",
         panelWrapperInRow: "sd-paneldynamic__panel-wrapper--in-row",
+        panelWrapperFadeIn: "sd-paneldynamic__panel-wrapper--fade-in",
+        panelWrapperFadeOut: "sd-paneldynamic__panel-wrapper--fade-out",
+        panelWrapperList: "sd-paneldynamic__panel-wrapper--list",
         progressBtnIcon: "icon-progressbuttonv2",
         noEntriesPlaceholder: "sd-paneldynamic__placeholder sd-question__placeholder",
         compact: "sd-element--with-frame sd-element--compact",
@@ -5890,6 +5910,8 @@ var defaultV2Css = {
         errorsCellBottom: "sd-table__cell--error-bottom",
         itemCell: "sd-table__cell--item",
         row: "sd-table__row",
+        rowFadeIn: "sd-table__row--fade-in",
+        rowFadeOut: "sd-table__row--fade-out",
         expandedRow: "sd-table__row--expanded",
         rowHasPanel: "sd-table__row--has-panel",
         rowHasEndActions: "sd-table__row--has-end-actions",
@@ -5928,6 +5950,8 @@ var defaultV2Css = {
         content: "sd-matrixdynamic__content sd-question__content",
         cell: "sd-table__cell",
         row: "sd-table__row",
+        rowFadeIn: "sd-table__row--fade-in",
+        rowFadeOut: "sd-table__row--fade-out",
         rowHasPanel: "sd-table__row--has-panel",
         rowHasEndActions: "sd-table__row--has-end-actions",
         expandedRow: "sd-table__row--expanded",
@@ -8072,6 +8096,7 @@ var DropdownListModel = /** @class */ (function (_super) {
         _this.showInputFieldComponent = _this.question.showInputFieldComponent;
         _this.listModel = _this.createListModel();
         _this.updateAfterListModelCreated(_this.listModel);
+        _this.setChoicesLazyLoadEnabled(_this.question.choicesLazyLoadEnabled);
         _this.setSearchEnabled(_this.question.searchEnabled);
         _this.setTextWrapEnabled(_this.question.textWrapEnabled);
         _this.createPopup();
@@ -8152,6 +8177,7 @@ var DropdownListModel = /** @class */ (function (_super) {
             }
             if (option.isVisible && _this.question.choicesLazyLoadEnabled) {
                 _this.listModel.actions = [];
+                _this.resetItemsSettings();
                 _this.updateQuestionChoices();
             }
             if (option.isVisible && !!_this.question.onOpenedCallBack) {
@@ -8222,7 +8248,7 @@ var DropdownListModel = /** @class */ (function (_super) {
                 _this.popupModel.isVisible = false;
             };
         }
-        var res = new _list__WEBPACK_IMPORTED_MODULE_4__["ListModel"](visibleItems, _onSelectionChanged, false, undefined, this.question.choicesLazyLoadEnabled ? this.listModelFilterStringChanged : undefined, this.listElementId);
+        var res = new _list__WEBPACK_IMPORTED_MODULE_4__["ListModel"](visibleItems, _onSelectionChanged, false, undefined, this.listElementId);
         this.setOnTextSearchCallbackForListModel(res);
         res.renderElements = false;
         res.forceShowFilter = true;
@@ -8455,6 +8481,9 @@ var DropdownListModel = /** @class */ (function (_super) {
         this.listModel.showSearchClearButton = _utils_devices__WEBPACK_IMPORTED_MODULE_9__["IsTouch"];
         this.searchEnabled = newValue;
     };
+    DropdownListModel.prototype.setChoicesLazyLoadEnabled = function (newValue) {
+        this.listModel.setOnFilterStringChangedCallback(newValue ? this.listModelFilterStringChanged : undefined);
+    };
     DropdownListModel.prototype.updateItems = function () {
         this.listModel.setItems(this.getAvailableItems());
     };
@@ -8474,9 +8503,6 @@ var DropdownListModel = /** @class */ (function (_super) {
         if (options.name == "value") {
             this.showInputFieldComponent = this.question.showInputFieldComponent;
         }
-        if (options.name == "choicesLazyLoadEnabled" && options.newValue) {
-            this.listModel.setOnFilterStringChangedCallback(this.listModelFilterStringChanged);
-        }
         if (options.name == "textWrapEnabled") {
             this.setTextWrapEnabled(options.newValue);
         }
@@ -8805,7 +8831,7 @@ var DropdownMultiSelectListModel = /** @class */ (function (_super) {
                 }
             };
         }
-        var res = new _multiSelectListModel__WEBPACK_IMPORTED_MODULE_3__["MultiSelectListModel"](visibleItems, _onSelectionChanged, false, undefined, this.question.choicesLazyLoadEnabled ? this.listModelFilterStringChanged : undefined, this.listElementId);
+        var res = new _multiSelectListModel__WEBPACK_IMPORTED_MODULE_3__["MultiSelectListModel"](visibleItems, _onSelectionChanged, false, undefined, this.listElementId);
         res.actions.forEach(function (a) { return a.disableTabStop = true; });
         this.setOnTextSearchCallbackForListModel(res);
         res.forceShowFilter = true;
@@ -8954,7 +8980,11 @@ var DropdownMultiSelectListModel = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "dxSurveyService", function() { return dxSurveyService; });
 /* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./settings */ "./src/settings.ts");
+/* harmony import */ var _surveyStrings__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./surveyStrings */ "./src/surveyStrings.ts");
+
 
+var surveyIOSite = "surveyjs.io";
+var surveyIOMaxPostSize = 65536;
 /**
  * The class contains methods to work with api.surveyjs.io service.
  */
@@ -8973,7 +9003,7 @@ var dxSurveyService = /** @class */ (function () {
     });
     dxSurveyService.prototype.loadSurvey = function (surveyId, onLoad) {
         var xhr = new XMLHttpRequest();
-        xhr.open("GET", dxSurveyService.serviceUrl + "/getSurvey?surveyId=" + surveyId);
+        xhr.open("GET", this.serviceUrl + "/getSurvey?surveyId=" + surveyId);
         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
         xhr.onload = function () {
             var result = JSON.parse(xhr.response);
@@ -8983,7 +9013,7 @@ var dxSurveyService = /** @class */ (function () {
     };
     dxSurveyService.prototype.getSurveyJsonAndIsCompleted = function (surveyId, clientId, onLoad) {
         var xhr = new XMLHttpRequest();
-        xhr.open("GET", dxSurveyService.serviceUrl +
+        xhr.open("GET", this.serviceUrl +
             "/getSurveyAndIsCompleted?surveyId=" +
             surveyId +
             "&clientId=" +
@@ -8997,11 +9027,34 @@ var dxSurveyService = /** @class */ (function () {
         };
         xhr.send();
     };
+    dxSurveyService.prototype.canSendResult = function (result) {
+        if (!this.isSurveJSIOService)
+            return true;
+        var str = JSON.stringify(result);
+        return str.length < surveyIOMaxPostSize;
+    };
+    Object.defineProperty(dxSurveyService.prototype, "isSurveJSIOService", {
+        get: function () {
+            return this.serviceUrl.indexOf(surveyIOSite) >= 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
     dxSurveyService.prototype.sendResult = function (postId, result, onSendResult, clientId, isPartialCompleted) {
+        if (clientId === void 0) { clientId = null; }
+        if (isPartialCompleted === void 0) { isPartialCompleted = false; }
+        if (!this.canSendResult(result)) {
+            onSendResult(false, _surveyStrings__WEBPACK_IMPORTED_MODULE_1__["surveyLocalization"].getString("savingExceedSize", this.locale), undefined);
+        }
+        else {
+            this.sendResultCore(postId, result, onSendResult, clientId, isPartialCompleted);
+        }
+    };
+    dxSurveyService.prototype.sendResultCore = function (postId, result, onSendResult, clientId, isPartialCompleted) {
         if (clientId === void 0) { clientId = null; }
         if (isPartialCompleted === void 0) { isPartialCompleted = false; }
         var xhr = new XMLHttpRequest();
-        xhr.open("POST", dxSurveyService.serviceUrl + "/post/");
+        xhr.open("POST", this.serviceUrl + "/post/");
         xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
         var data = { postId: postId, surveyResult: JSON.stringify(result) };
         if (clientId)
@@ -9009,7 +9062,6 @@ var dxSurveyService = /** @class */ (function () {
         if (isPartialCompleted)
             data["isPartialCompleted"] = true;
         var dataStringify = JSON.stringify(data);
-        var self = this;
         xhr.onload = xhr.onerror = function () {
             if (!onSendResult)
                 return;
@@ -9024,7 +9076,7 @@ var dxSurveyService = /** @class */ (function () {
                 return;
             onSendFile(xhr.status == 200, JSON.parse(xhr.response));
         };
-        xhr.open("POST", dxSurveyService.serviceUrl + "/upload/", true);
+        xhr.open("POST", this.serviceUrl + "/upload/", true);
         var formData = new FormData();
         formData.append("file", file);
         formData.append("postId", postId);
@@ -9033,7 +9085,7 @@ var dxSurveyService = /** @class */ (function () {
     dxSurveyService.prototype.getResult = function (resultId, name, onGetResult) {
         var xhr = new XMLHttpRequest();
         var data = "resultId=" + resultId + "&name=" + name;
-        xhr.open("GET", dxSurveyService.serviceUrl + "/getResult?" + data);
+        xhr.open("GET", this.serviceUrl + "/getResult?" + data);
         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
         var self = this;
         xhr.onload = function () {
@@ -9054,7 +9106,7 @@ var dxSurveyService = /** @class */ (function () {
     dxSurveyService.prototype.isCompleted = function (resultId, clientId, onIsCompleted) {
         var xhr = new XMLHttpRequest();
         var data = "resultId=" + resultId + "&clientId=" + clientId;
-        xhr.open("GET", dxSurveyService.serviceUrl + "/isCompleted?" + data);
+        xhr.open("GET", this.serviceUrl + "/isCompleted?" + data);
         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
         var self = this;
         xhr.onload = function () {
@@ -9066,6 +9118,13 @@ var dxSurveyService = /** @class */ (function () {
         };
         xhr.send();
     };
+    Object.defineProperty(dxSurveyService.prototype, "serviceUrl", {
+        get: function () {
+            return dxSurveyService.serviceUrl || "";
+        },
+        enumerable: false,
+        configurable: true
+    });
     return dxSurveyService;
 }());
 
@@ -9636,8 +9695,8 @@ __webpack_require__.r(__webpack_exports__);
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.9.139";
-ReleaseDate = "" + "2024-04-16";
+Version = "" + "1.10.2";
+ReleaseDate = "" + "2024-04-30";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -9818,7 +9877,7 @@ function checkPrefix(prefix) {
 /*!**************************************!*\
   !*** ./src/entries/core-wo-model.ts ***!
   \**************************************/
-/*! exports provided: Version, ReleaseDate, checkLibraryVersion, setLicenseKey, slk, hasLicense, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedErrorRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, MultipleTextCell, MultipleTextErrorCell, MutlipleTextErrorRow, MutlipleTextRow, QuestionMultipleTextModel, MultipleTextEditorModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryFocusPage, createTOCListModel, getTocRootCss, TOCModel, SurveyProgressModel, ProgressButtons, ProgressButtonsResponsivityManager, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, SurveyTriggerSkip, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, Cover, CoverCell, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, confirmActionAsync, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, chooseFiles, sanitizeEditableContent, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationBoolean, AnimationGroup, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper */
+/*! exports provided: Version, ReleaseDate, checkLibraryVersion, setLicenseKey, slk, hasLicense, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedErrorRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, MultipleTextCell, MultipleTextErrorCell, MutlipleTextErrorRow, MutlipleTextRow, QuestionMultipleTextModel, MultipleTextEditorModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryFocusPage, createTOCListModel, getTocRootCss, TOCModel, SurveyProgressModel, ProgressButtons, ProgressButtonsResponsivityManager, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, SurveyTriggerSkip, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, Cover, CoverCell, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, confirmActionAsync, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, chooseFiles, sanitizeEditableContent, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -10270,10 +10329,14 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AnimationGroupUtils", function() { return _utils_animation__WEBPACK_IMPORTED_MODULE_8__["AnimationGroupUtils"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AnimationProperty", function() { return _utils_animation__WEBPACK_IMPORTED_MODULE_8__["AnimationProperty"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AnimationBoolean", function() { return _utils_animation__WEBPACK_IMPORTED_MODULE_8__["AnimationBoolean"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AnimationGroup", function() { return _utils_animation__WEBPACK_IMPORTED_MODULE_8__["AnimationGroup"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AnimationTab", function() { return _utils_animation__WEBPACK_IMPORTED_MODULE_8__["AnimationTab"]; });
+
 /* harmony import */ var _actions_adaptive_container__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../actions/adaptive-container */ "./src/actions/adaptive-container.ts");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AdaptiveActionContainer", function() { return _actions_adaptive_container__WEBPACK_IMPORTED_MODULE_9__["AdaptiveActionContainer"]; });
 
@@ -10309,7 +10372,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!*****************************!*\
   !*** ./src/entries/core.ts ***!
   \*****************************/
-/*! exports provided: Version, ReleaseDate, checkLibraryVersion, setLicenseKey, slk, hasLicense, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedErrorRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, MultipleTextCell, MultipleTextErrorCell, MutlipleTextErrorRow, MutlipleTextRow, QuestionMultipleTextModel, MultipleTextEditorModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryFocusPage, createTOCListModel, getTocRootCss, TOCModel, SurveyProgressModel, ProgressButtons, ProgressButtonsResponsivityManager, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, SurveyTriggerSkip, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, Cover, CoverCell, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, confirmActionAsync, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, chooseFiles, sanitizeEditableContent, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationBoolean, AnimationGroup, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper, Model */
+/*! exports provided: Version, ReleaseDate, checkLibraryVersion, setLicenseKey, slk, hasLicense, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedErrorRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, MultipleTextCell, MultipleTextErrorCell, MutlipleTextErrorRow, MutlipleTextRow, QuestionMultipleTextModel, MultipleTextEditorModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryFocusPage, createTOCListModel, getTocRootCss, TOCModel, SurveyProgressModel, ProgressButtons, ProgressButtonsResponsivityManager, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, SurveyTriggerSkip, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, Cover, CoverCell, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, confirmActionAsync, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, chooseFiles, sanitizeEditableContent, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper, Model */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -10753,10 +10816,14 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AnimationGroupUtils", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["AnimationGroupUtils"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AnimationProperty", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["AnimationProperty"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AnimationBoolean", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["AnimationBoolean"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AnimationGroup", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["AnimationGroup"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AnimationTab", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["AnimationTab"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AdaptiveActionContainer", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["AdaptiveActionContainer"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "defaultActionBarCss", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["defaultActionBarCss"]; });
@@ -20086,11 +20153,10 @@ var defaultListCss = {
 };
 var ListModel = /** @class */ (function (_super) {
     __extends(ListModel, _super);
-    function ListModel(items, onSelectionChanged, allowSelection, selectedItem, onFilterStringChangedCallback, elementId) {
+    function ListModel(items, onSelectionChanged, allowSelection, selectedItem, elementId) {
         var _this = _super.call(this) || this;
         _this.onSelectionChanged = onSelectionChanged;
         _this.allowSelection = allowSelection;
-        _this.onFilterStringChangedCallback = onFilterStringChangedCallback;
         _this.elementId = elementId;
         _this.onItemClick = function (itemValue) {
             if (_this.isItemDisabled(itemValue)) {
@@ -21140,6 +21206,7 @@ var englishStrings = {
     savingData: "The results are being saved on the server...",
     savingDataError: "An error occurred and we could not save the results.",
     savingDataSuccess: "The results were saved successfully!",
+    savingExceedSize: "Your response exceeds 64KB. Please reduce the size of your file(s) and try again or contact a survey owner.",
     saveAgainButton: "Try again",
     timerMin: "min",
     timerSec: "sec",
@@ -21773,17 +21840,12 @@ var InputMaskBase = /** @class */ (function (_super) {
         });
         return res;
     };
-    // public get maskedInputValue(): string {
-    //   return this.input.value;
-    // }
-    // public get unmaskedInputValue(): string {
-    //   return this.getUnmaskedValue(this.input.value, true);
-    // }
     InputMaskBase.prototype.processInput = function (args) {
         return { value: args.prevValue, caretPosition: args.selectionEnd, cancelPreventDefault: false };
     };
     InputMaskBase.prototype.getUnmaskedValue = function (src) { return src; };
     InputMaskBase.prototype.getMaskedValue = function (src) { return src; };
+    InputMaskBase.prototype.getTextAlignment = function () { return "auto"; };
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], InputMaskBase.prototype, "saveMaskedValue", void 0);
@@ -22823,9 +22885,6 @@ var InputMaskNumeric = /** @class */ (function (_super) {
     InputMaskNumeric.prototype.parseNumber = function (src) {
         var result = { integralPart: "", fractionalPart: "", hasDecimalSeparator: false, isNegative: false };
         var input = (src === undefined || src === null) ? "" : src.toString();
-        if (typeof src === "number") {
-            input = src.toString().replace(".", this.decimalSeparator);
-        }
         var minusCharCount = 0;
         for (var inputIndex = 0; inputIndex < input.length; inputIndex++) {
             var currentChar = input[inputIndex];
@@ -22865,8 +22924,7 @@ var InputMaskNumeric = /** @class */ (function (_super) {
     };
     InputMaskNumeric.prototype.getNumberMaskedValue = function (src, matchWholeMask) {
         if (matchWholeMask === void 0) { matchWholeMask = false; }
-        var input = (src === undefined || src === null) ? "" : src;
-        var parsedNumber = this.parseNumber(input);
+        var parsedNumber = this.parseNumber(src);
         if (!this.validateNumber(parsedNumber, matchWholeMask)) {
             return null;
         }
@@ -22877,8 +22935,13 @@ var InputMaskNumeric = /** @class */ (function (_super) {
         var parsedNumber = this.parseNumber(str);
         return this.convertNumber(parsedNumber);
     };
+    InputMaskNumeric.prototype.getTextAlignment = function () {
+        return "right";
+    };
     InputMaskNumeric.prototype.getMaskedValue = function (src) {
-        return this.getNumberMaskedValue(src, true);
+        var input = (src === undefined || src === null) ? "" : src.toString();
+        input = input.replace(".", this.decimalSeparator);
+        return this.getNumberMaskedValue(input, true);
     };
     InputMaskNumeric.prototype.getUnmaskedValue = function (src) {
         return this.getNumberUnmaskedValue(src);
@@ -23209,8 +23272,8 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 var MultiSelectListModel = /** @class */ (function (_super) {
     __extends(MultiSelectListModel, _super);
-    function MultiSelectListModel(items, onSelectionChanged, allowSelection, selectedItems, onFilterStringChangedCallback, elementId) {
-        var _this = _super.call(this, items, onSelectionChanged, allowSelection, undefined, onFilterStringChangedCallback, elementId) || this;
+    function MultiSelectListModel(items, onSelectionChanged, allowSelection, selectedItems, elementId) {
+        var _this = _super.call(this, items, onSelectionChanged, allowSelection, undefined, elementId) || this;
         _this.onItemClick = function (item) {
             if (_this.isItemDisabled(item))
                 return;
@@ -23444,7 +23507,6 @@ var PageModel = /** @class */ (function (_super) {
                 return _this.num + ". " + text;
             return text;
         };
-        _this.createLocalizableString("navigationTitle", _this, true);
         _this.createLocalizableString("navigationDescription", _this, true);
         _this.dragDropPageHelper = new _drag_drop_page_helper_v1__WEBPACK_IMPORTED_MODULE_3__["DragDropPageHelperV1"](_this);
         return _this;
@@ -23483,13 +23545,6 @@ var PageModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(PageModel.prototype, "locNavigationTitle", {
-        get: function () {
-            return this.getLocalizableString("navigationTitle");
-        },
-        enumerable: false,
-        configurable: true
-    });
     Object.defineProperty(PageModel.prototype, "navigationDescription", {
         /**
          * Explanatory text displayed under a navigation button in the progress bar. Applies when the [progress bar is visible](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showProgressBar), `SurveyModel`'s [`progressBarType`](https://surveyjs.io/form-library/documentation/surveymodel#progressBarType) is set to `"pages"`, and [`progressBarShowPageTitles`](https://surveyjs.io/form-library/documentation/surveymodel#progressBarShowPageTitles) is `true`.
@@ -23511,16 +23566,12 @@ var PageModel = /** @class */ (function (_super) {
         configurable: true
     });
     PageModel.prototype.navigationLocStrChanged = function () {
+        if (this.locNavigationTitle.isEmpty) {
+            this.locTitle.strChanged();
+        }
         this.locNavigationTitle.strChanged();
         this.locNavigationDescription.strChanged();
     };
-    Object.defineProperty(PageModel.prototype, "renderedNavigationTitle", {
-        get: function () {
-            return this.locNavigationTitle.renderedHtml || this.title || this.name;
-        },
-        enumerable: false,
-        configurable: true
-    });
     Object.defineProperty(PageModel.prototype, "passed", {
         get: function () {
             return this.getPropertyValue("passed", false);
@@ -23962,6 +24013,10 @@ var QuestionRowModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionRowModel.prototype.getIsAnimationAllowed = function () {
+        var _a;
+        return _super.prototype.getIsAnimationAllowed.call(this) && this.visible && ((_a = this.panel) === null || _a === void 0 ? void 0 : _a.animationAllowed);
+    };
     QuestionRowModel.prototype.getVisibleElementsAnimationOptions = function () {
         var _this = this;
         var beforeRunAnimation = function (el) {
@@ -23969,7 +24024,7 @@ var QuestionRowModel = /** @class */ (function (_super) {
             el.style.setProperty("--animation-width", Object(_utils_utils__WEBPACK_IMPORTED_MODULE_8__["getElementWidth"])(el) + "px");
         };
         return {
-            isAnimationEnabled: function () { var _a; return _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].animationEnabled && ((_a = _this.panel) === null || _a === void 0 ? void 0 : _a.animationAllowed) && _this.visible; },
+            isAnimationEnabled: function () { return _this.animationAllowed; },
             getAnimatedElement: function (element) { return element.getWrapperElement(); },
             getLeaveOptions: function (element) {
                 var surveyElement = element;
@@ -24118,7 +24173,7 @@ var QuestionRowModel = /** @class */ (function (_super) {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]()
             .append(this.panel.cssClasses.row)
             .append(this.panel.cssClasses.rowCompact, this.panel["isCompact"])
-            .append(this.panel.cssClasses.pageRow, this.panel.isPage || (!!this.panel.originalPage))
+            .append(this.panel.cssClasses.pageRow, this.panel.isPage || this.panel.showPanelAsPage)
             .append(this.panel.cssClasses.rowMultiple, this.visibleElements.length > 1)
             .toString();
     };
@@ -24158,6 +24213,9 @@ var PanelModelBase = /** @class */ (function (_super) {
         _this.addExpressionProperty("enableIf", function (obj, res) { _this.readOnly = res === false; });
         _this.addExpressionProperty("requiredIf", function (obj, res) { _this.isRequired = res === true; });
         _this.createLocalizableString("requiredErrorText", _this);
+        _this.createLocalizableString("navigationTitle", _this, true).onGetTextCallback = function (text) {
+            return text || _this.title || _this.name;
+        };
         _this.registerPropertyChangedHandlers(["questionTitleLocation"], function () {
             _this.onVisibleChanged.bind(_this);
             _this.updateElementCss(true);
@@ -24182,7 +24240,7 @@ var PanelModelBase = /** @class */ (function (_super) {
             el.style.setProperty("--animation-height", el.offsetHeight + "px");
         };
         return {
-            isAnimationEnabled: function () { return _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].animationEnabled && _this.animationAllowed; },
+            isAnimationEnabled: function () { return _this.animationAllowed; },
             getAnimatedElement: function (row) { return row.getRootElement(); },
             getLeaveOptions: function (_) {
                 return { cssClass: _this.cssClasses.rowFadeOut,
@@ -24219,14 +24277,14 @@ var PanelModelBase = /** @class */ (function (_super) {
         return "panelbase";
     };
     PanelModelBase.prototype.setSurveyImpl = function (value, isLight) {
-        this.animationAllowed = false;
+        this.blockAnimations();
         _super.prototype.setSurveyImpl.call(this, value, isLight);
         if (this.isDesignMode)
             this.onVisibleChanged();
         for (var i = 0; i < this.elements.length; i++) {
             this.elements[i].setSurveyImpl(value, isLight);
         }
-        this.animationAllowed = true;
+        this.releaseAnimations();
     };
     PanelModelBase.prototype.endLoadingFromJson = function () {
         _super.prototype.endLoadingFromJson.call(this);
@@ -24274,9 +24332,22 @@ var PanelModelBase = /** @class */ (function (_super) {
             this.elements[i].locStrsChanged();
         }
     };
+    PanelModelBase.prototype.getMarkdownHtml = function (text, name) {
+        if (name === "navigationTitle" && this.locNavigationTitle.isEmpty) {
+            return this.locTitle.renderedHtml || this.name;
+        }
+        return _super.prototype.getMarkdownHtml.call(this, text, name);
+    };
+    Object.defineProperty(PanelModelBase.prototype, "locNavigationTitle", {
+        get: function () {
+            return this.getLocalizableString("navigationTitle");
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(PanelModelBase.prototype, "renderedNavigationTitle", {
         get: function () {
-            return this.title || this.name;
+            return this.locNavigationTitle.renderedHtml;
         },
         enumerable: false,
         configurable: true
@@ -25041,13 +25112,13 @@ var PanelModelBase = /** @class */ (function (_super) {
         return new QuestionRowModel(this);
     };
     PanelModelBase.prototype.onSurveyLoad = function () {
-        this.animationAllowed = false;
+        this.blockAnimations();
         _super.prototype.onSurveyLoad.call(this);
         for (var i = 0; i < this.elements.length; i++) {
             this.elements[i].onSurveyLoad();
         }
         this.onElementVisibilityChanged(this);
-        this.animationAllowed = true;
+        this.releaseAnimations();
     };
     PanelModelBase.prototype.onFirstRendering = function () {
         _super.prototype.onFirstRendering.call(this);
@@ -25081,9 +25152,9 @@ var PanelModelBase = /** @class */ (function (_super) {
     PanelModelBase.prototype.onRowsChanged = function () {
         if (this.isLoadingFromJson)
             return;
-        this.animationAllowed = false;
+        this.blockAnimations();
         this.setArrayPropertyDirectly("rows", this.buildRows());
-        this.animationAllowed = true;
+        this.releaseAnimations();
     };
     PanelModelBase.prototype.blockRowsUpdates = function () {
         this.locCountRowUpdates++;
@@ -26471,6 +26542,7 @@ var PopupDropdownViewModel = /** @class */ (function (_super) {
             this.resizeEventCallback();
         }
         _global_variables_utils__WEBPACK_IMPORTED_MODULE_6__["DomWindowHelper"].addEventListener("scroll", this.scrollEventCallBack);
+        this._isPositionSetValue = true;
     };
     Object.defineProperty(PopupDropdownViewModel.prototype, "shouldCreateResizeCallback", {
         get: function () {
@@ -27211,6 +27283,7 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
                 if (!val) {
                     _this.updateOnHiding();
                     _this.updateIsVisible(val);
+                    _this._isPositionSetValue = false;
                 }
                 else {
                     _this.updateIsVisible(val);
@@ -27221,6 +27294,7 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
         _this.onModelIsVisibleChangedCallback = function () {
             _this.isVisible = _this.model.isVisible;
         };
+        _this._isPositionSetValue = false;
         _this.model = model;
         _this.locale = _this.model.locale;
         return _this;
@@ -27458,12 +27532,20 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
             this.focusContainer();
         }
     };
+    Object.defineProperty(PopupBaseViewModel.prototype, "isPositionSet", {
+        get: function () {
+            return this._isPositionSetValue;
+        },
+        enumerable: false,
+        configurable: true
+    });
     PopupBaseViewModel.prototype.updateOnShowing = function () {
         this.prevActiveElement = _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].environment.root.activeElement;
         if (this.isOverlay) {
             this.resetDimensionsAndPositionStyleProperties();
         }
         this.switchFocus();
+        this._isPositionSetValue = true;
     };
     PopupBaseViewModel.prototype.updateOnHiding = function () {
         if (this.isFocusedContent && this.prevActiveElement) {
@@ -28636,8 +28718,7 @@ var Question = /** @class */ (function (_super) {
     };
     Question.prototype.runTriggers = function (name, value) {
         var _this = this;
-        if (this.isReadOnly || this.isSettingQuestionValue ||
-            (this.parentQuestion && this.parentQuestion.getValueName() === name))
+        if (this.isSettingQuestionValue || (this.parentQuestion && this.parentQuestion.getValueName() === name))
             return;
         this.triggersInfo.forEach(function (info) {
             _this.runTriggerInfo(info, name, value);
@@ -29855,6 +29936,7 @@ var Question = /** @class */ (function (_super) {
         configurable: true
     });
     Question.prototype.getFilteredValue = function () { return this.value; };
+    Question.prototype.getFilteredName = function () { return this.getValueName(); };
     Object.defineProperty(Question.prototype, "valueForSurvey", {
         get: function () {
             if (!!this.valueToDataCallback) {
@@ -30457,7 +30539,7 @@ var Question = /** @class */ (function (_super) {
     };
     Question.prototype.addConditionObjectsByContext = function (objects, context) {
         objects.push({
-            name: this.getValueName(),
+            name: this.getFilteredName(),
             text: this.processedTitle,
             question: this,
         });
@@ -33499,17 +33581,19 @@ var QuestionSelectBase = /** @class */ (function (_super) {
             .append(this.cssClasses.itemInline, !this.hasColumns && this.colCount === 0)
             .append("sv-q-col-" + this.getCurrentColCount(), !this.hasColumns && this.colCount !== 0)
             .append(this.cssClasses.itemOnError, this.hasCssError());
-        var isDisabled = this.isReadOnly || !item.isEnabled;
+        var readOnlyStyles = this.getIsDisableAndReadOnlyStyles(!item.isEnabled);
+        var isReadOnly = readOnlyStyles[0];
+        var isDisabled = readOnlyStyles[1];
         var isChecked = this.isItemSelected(item) ||
             (this.isOtherSelected && this.otherItem.value === item.value);
         var allowHover = !isDisabled && !isChecked && !(!!this.survey && this.survey.isDesignMode);
         var isNone = item === this.noneItem;
-        options.isDisabled = isDisabled;
+        options.isDisabled = isDisabled || isReadOnly;
         options.isChecked = isChecked;
         options.isNone = isNone;
         return builder
-            .append(this.cssClasses.itemDisabled, this.isDisabledStyle)
-            .append(this.cssClasses.itemReadOnly, this.isReadOnlyStyle)
+            .append(this.cssClasses.itemDisabled, isDisabled)
+            .append(this.cssClasses.itemReadOnly, isReadOnly)
             .append(this.cssClasses.itemPreview, this.isPreviewStyle)
             .append(this.cssClasses.itemChecked, isChecked)
             .append(this.cssClasses.itemHover, allowHover)
@@ -35006,6 +35090,13 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionCheckboxModel.prototype.getFilteredName = function () {
+        var res = _super.prototype.getFilteredName.call(this);
+        if (this.hasFilteredValue) {
+            res += "-unwrapped";
+        }
+        return res;
+    };
     QuestionCheckboxModel.prototype.getFilteredValue = function () {
         if (this.hasFilteredValue)
             return this.renderedValue;
@@ -37248,7 +37339,13 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: "" })
     ], QuestionDropdownModel.prototype, "readOnlyText", void 0);
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])()
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({
+            onSet: function (newValue, target) {
+                if (!!target.dropdownListModel) {
+                    target.dropdownListModel.setChoicesLazyLoadEnabled(newValue);
+                }
+            }
+        })
     ], QuestionDropdownModel.prototype, "choicesLazyLoadEnabled", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])()
@@ -38149,6 +38246,7 @@ var QuestionFileModel = /** @class */ (function (_super) {
             }
         };
         _this.createLocalizableString("takePhotoCaption", _this, false, true);
+        _this.createLocalizableString("clearCaption", _this, false, true);
         _this.actionsContainer = new _actions_container__WEBPACK_IMPORTED_MODULE_7__["ActionContainer"]();
         _this.actionsContainer.locOwner = _this;
         _this.fileIndexAction = new _actions_action__WEBPACK_IMPORTED_MODULE_8__["Action"]({
@@ -38225,7 +38323,7 @@ var QuestionFileModel = /** @class */ (function (_super) {
             iconName: "icon-clear",
             id: "sv-file-clean",
             iconSize: "auto",
-            title: new _base__WEBPACK_IMPORTED_MODULE_3__["ComputedUpdater"](function () { return _this.clearButtonCaption; }),
+            locTitle: _this.locClearButtonCaption,
             showTitle: false,
             enabledIf: function () { return !_this.isInputReadOnly; },
             innerCss: new _base__WEBPACK_IMPORTED_MODULE_3__["ComputedUpdater"](function () { return _this.cssClasses.removeButton; }),
@@ -38537,6 +38635,23 @@ var QuestionFileModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionFileModel.prototype, "clearButtonCaption", {
+        get: function () {
+            return this.getLocalizableStringText("clearCaption");
+        },
+        set: function (value) {
+            this.setLocalizableStringText("clearCaption", value);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(QuestionFileModel.prototype, "locClearButtonCaption", {
+        get: function () {
+            return this.getLocalizableString("clearCaption");
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionFileModel.prototype, "locRenderedPlaceholder", {
         get: function () {
             var _this = this;
@@ -39112,9 +39227,6 @@ var QuestionFileModel = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ localizable: { defaultStr: "replaceFileCaption" } })
     ], QuestionFileModel.prototype, "replaceButtonCaption", void 0);
-    __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ localizable: { defaultStr: "clearCaption" } })
-    ], QuestionFileModel.prototype, "clearButtonCaption", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ localizable: { defaultStr: "removeFileCaption" } })
     ], QuestionFileModel.prototype, "removeFileCaption", void 0);
@@ -40136,6 +40248,9 @@ var QuestionImagePickerModel = /** @class */ (function (_super) {
     QuestionImagePickerModel.prototype.needResponsiveness = function () {
         return this.supportResponsiveness() && this.isDefaultV2Theme;
     };
+    QuestionImagePickerModel.prototype.needResponsiveWidth = function () {
+        return this.colCount > 2;
+    };
     QuestionImagePickerModel.prototype.getCurrentColCount = function () {
         if (this.responsiveColCount === undefined || this.colCount === 0) {
             return this.colCount;
@@ -40367,6 +40482,9 @@ var MatrixRowModel = /** @class */ (function (_super) {
             if (_this.data)
                 _this.data.onMatrixRowChanged(_this);
         });
+        if (_this.data && _this.data.hasErrorInRow(_this)) {
+            _this.hasError = true;
+        }
         return _this;
     }
     Object.defineProperty(MatrixRowModel.prototype, "name", {
@@ -40417,11 +40535,21 @@ var MatrixRowModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(MatrixRowModel.prototype, "hasError", {
+        get: function () {
+            return this.getPropertyValue("hasError", false);
+        },
+        set: function (val) {
+            this.setPropertyValue("hasError", val);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(MatrixRowModel.prototype, "rowClasses", {
         get: function () {
             var cssClasses = this.data.cssClasses;
             return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_11__["CssClassBuilder"]().append(cssClasses.row)
-                .append(cssClasses.rowError, this.data.hasErrorInRow(this))
+                .append(cssClasses.rowError, this.hasError)
                 .append(cssClasses.rowReadOnly, this.isReadOnly)
                 .append(cssClasses.rowDisabled, this.data.isDisabledStyle)
                 .toString();
@@ -40747,7 +40875,7 @@ var QuestionMatrixModel = /** @class */ (function (_super) {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_11__["CssClassBuilder"]()
             .append(css.cell, hasCellText)
             .append(hasCellText ? css.cellText : css.label)
-            .append(css.itemOnError, !hasCellText && (this.isAllRowRequired ? this.hasErrorInRow(row) : this.hasCssError()))
+            .append(css.itemOnError, !hasCellText && (this.isAllRowRequired || this.eachRowUnique ? row.hasError : this.hasCssError()))
             .append(hasCellText ? css.cellTextSelected : css.itemChecked, isChecked)
             .append(hasCellText ? css.cellTextDisabled : css.itemDisabled, this.isDisabledStyle)
             .append(hasCellText ? css.cellTextReadOnly : css.itemReadOnly, this.isReadOnlyStyle)
@@ -40877,72 +41005,76 @@ var QuestionMatrixModel = /** @class */ (function (_super) {
         return loc ? loc : this.emptyLocalizableString;
     };
     QuestionMatrixModel.prototype.supportGoNextPageAutomatic = function () {
-        return this.isMouseDown === true && this.hasValuesInAllRows(false);
+        return this.isMouseDown === true && this.hasValuesInAllRows();
     };
     QuestionMatrixModel.prototype.onCheckForErrors = function (errors, isOnValueChanged) {
         _super.prototype.onCheckForErrors.call(this, errors, isOnValueChanged);
-        this.errorsInRow = undefined;
         if (!isOnValueChanged || this.hasCssError()) {
-            if (this.hasErrorAllRowsRequired()) {
+            var rowsErrors = { noValue: false, isNotUnique: false };
+            this.checkErrorsAllRows(true, rowsErrors);
+            if (rowsErrors.noValue) {
                 errors.push(new _error__WEBPACK_IMPORTED_MODULE_6__["RequiredInAllRowsError"](null, this));
             }
-            if (this.hasErrorEachRowUnique()) {
+            if (rowsErrors.isNotUnique) {
                 errors.push(new _error__WEBPACK_IMPORTED_MODULE_6__["EachRowUniqueError"](null, this));
             }
         }
     };
-    QuestionMatrixModel.prototype.hasErrorAllRowsRequired = function () {
-        return this.isAllRowRequired && !this.hasValuesInAllRows(true);
+    QuestionMatrixModel.prototype.hasValuesInAllRows = function () {
+        var rowsErrors = { noValue: false, isNotUnique: false };
+        this.checkErrorsAllRows(false, rowsErrors, true);
+        return !rowsErrors.noValue;
     };
-    QuestionMatrixModel.prototype.hasErrorEachRowUnique = function () {
-        return this.eachRowUnique && this.hasNonUniqueValueInRow();
-    };
-    QuestionMatrixModel.prototype.hasValuesInAllRows = function (addError) {
+    QuestionMatrixModel.prototype.checkErrorsAllRows = function (modifyErrors, res, allRowsRequired) {
+        var _this = this;
         var rows = this.generatedVisibleRows;
         if (!rows)
             rows = this.visibleRows;
         if (!rows)
-            return true;
-        var res = true;
-        for (var i = 0; i < rows.length; i++) {
-            var row = rows[i];
-            var hasValue = !this.isValueEmpty(row.value);
-            if (addError && !hasValue) {
-                this.addErrorIntoRow(row);
-            }
-            res = res && hasValue;
+            return;
+        var rowsRequired = this.isAllRowRequired || allRowsRequired;
+        var rowsUnique = this.eachRowUnique;
+        res.noValue = false;
+        res.isNotUnique = false;
+        if (modifyErrors) {
+            this.errorsInRow = undefined;
         }
-        return res;
-    };
-    QuestionMatrixModel.prototype.hasNonUniqueValueInRow = function () {
-        var rows = this.generatedVisibleRows;
-        if (!rows)
-            rows = this.visibleRows;
-        if (!rows)
-            return false;
+        if (!rowsRequired && !rowsUnique)
+            return;
         var hash = {};
-        var res = true;
         for (var i = 0; i < rows.length; i++) {
             var val = rows[i].value;
             var isEmpty = this.isValueEmpty(val);
-            var isUnique = isEmpty || hash[val] !== true;
-            if (!isUnique) {
+            var isNotUnique = rowsUnique && (!isEmpty && hash[val] === true);
+            isEmpty = isEmpty && rowsRequired;
+            if (modifyErrors && (isEmpty || isNotUnique)) {
                 this.addErrorIntoRow(rows[i]);
             }
-            res = res && isUnique;
             if (!isEmpty) {
                 hash[val] = true;
             }
+            res.noValue = res.noValue || isEmpty;
+            res.isNotUnique = res.isNotUnique || isNotUnique;
+        }
+        if (modifyErrors) {
+            rows.forEach(function (row) {
+                row.hasError = _this.hasErrorInRow(row);
+            });
         }
-        return !res;
     };
     QuestionMatrixModel.prototype.addErrorIntoRow = function (row) {
         if (!this.errorsInRow)
             this.errorsInRow = {};
         this.errorsInRow[row.name] = true;
+        row.hasError = true;
+    };
+    QuestionMatrixModel.prototype.refreshRowsErrors = function () {
+        if (!this.errorsInRow)
+            return;
+        this.checkErrorsAllRows(true, { noValue: false, isNotUnique: false });
     };
     QuestionMatrixModel.prototype.getIsAnswered = function () {
-        return _super.prototype.getIsAnswered.call(this) && this.hasValuesInAllRows(false);
+        return _super.prototype.getIsAnswered.call(this) && this.hasValuesInAllRows();
     };
     QuestionMatrixModel.prototype.createMatrixRow = function (item, fullName, value) {
         var row = new MatrixRowModel(item, fullName, this, value);
@@ -40971,6 +41103,7 @@ var QuestionMatrixModel = /** @class */ (function (_super) {
                 this.generatedVisibleRows[i].setValueDirectly(rowVal);
             }
         }
+        this.refreshRowsErrors();
         this.updateIsAnswered();
         this.isRowChanging = false;
     };
@@ -45225,6 +45358,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
 /* harmony import */ var _actions_container__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./actions/container */ "./src/actions/container.ts");
 /* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./settings */ "./src/settings.ts");
+/* harmony import */ var _utils_animation__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./utils/animation */ "./src/utils/animation.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -45259,6 +45393,7 @@ var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from
 
 
 
+
 var QuestionMatrixDropdownRenderedCell = /** @class */ (function () {
     function QuestionMatrixDropdownRenderedCell() {
         this.minWidth = "";
@@ -45483,6 +45618,12 @@ var QuestionMatrixDropdownRenderedRow = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionMatrixDropdownRenderedRow.prototype.setRootElement = function (val) {
+        this.rootElement = val;
+    };
+    QuestionMatrixDropdownRenderedRow.prototype.getRootElement = function () {
+        return this.rootElement;
+    };
     QuestionMatrixDropdownRenderedRow.counter = 1;
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: false })
@@ -45541,10 +45682,53 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
         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();
         return _this;
     }
+    QuestionMatrixDropdownRenderedTable.prototype.getIsAnimationAllowed = function () {
+        return _super.prototype.getIsAnimationAllowed.call(this) && this.matrix.animationAllowed;
+    };
+    QuestionMatrixDropdownRenderedTable.prototype.getRenderedRowsAnimationOptions = function () {
+        var _this = this;
+        var beforeAnimationRun = function (el) {
+            el.querySelectorAll(":scope > td > *").forEach(function (el) {
+                el.style.setProperty("--animation-height", el.offsetHeight + "px");
+            });
+        };
+        return {
+            isAnimationEnabled: function () {
+                return _this.animationAllowed;
+            },
+            getAnimatedElement: function (el) {
+                return el.getRootElement();
+            },
+            getLeaveOptions: function () {
+                return { cssClass: _this.cssClasses.rowFadeOut, onBeforeRunAnimation: beforeAnimationRun };
+            },
+            getEnterOptions: function () {
+                return { cssClass: _this.cssClasses.rowFadeIn, onBeforeRunAnimation: beforeAnimationRun };
+            }
+        };
+    };
+    QuestionMatrixDropdownRenderedTable.prototype.updateRenderedRows = function () {
+        this.renderedRows = this.rows;
+    };
+    Object.defineProperty(QuestionMatrixDropdownRenderedTable.prototype, "renderedRows", {
+        get: function () {
+            return this._renderedRows;
+        },
+        set: function (val) {
+            this.renderedRowsAnimation.sync(val);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionMatrixDropdownRenderedTable.prototype, "showTable", {
         get: function () {
             return this.getPropertyValue("showTable", true);
@@ -45859,10 +46043,12 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
         }
     };
     QuestionMatrixDropdownRenderedTable.prototype.buildRows = function () {
+        this.blockAnimations();
         var rows = this.matrix.isColumnLayoutHorizontal
             ? this.buildHorizontalRows()
             : this.buildVerticalRows();
         this.rows = rows;
+        this.releaseAnimations();
     };
     QuestionMatrixDropdownRenderedTable.prototype.hasActionCellInRows = function (location) {
         if (this.hasActionCellInRowsValues[location] === undefined) {
@@ -46380,9 +46566,16 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["propertyArray"])({
             onPush: function (_, i, target) {
                 target.renderedRowsChangedCallback();
+                target.updateRenderedRows();
             },
+            onRemove: function (_, i, target) {
+                target.updateRenderedRows();
+            }
         })
     ], QuestionMatrixDropdownRenderedTable.prototype, "rows", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["propertyArray"])()
+    ], QuestionMatrixDropdownRenderedTable.prototype, "_renderedRows", void 0);
     return QuestionMatrixDropdownRenderedTable;
 }(_base__WEBPACK_IMPORTED_MODULE_1__["Base"]));
 
@@ -48780,6 +48973,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _actions_action__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./actions/action */ "./src/actions/action.ts");
 /* harmony import */ var _base__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./base */ "./src/base.ts");
 /* harmony import */ var _actions_adaptive_container__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./actions/adaptive-container */ "./src/actions/adaptive-container.ts");
+/* harmony import */ var _utils_animation__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./utils/animation */ "./src/utils/animation.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -48820,6 +49014,7 @@ var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from
 
 
 
+
 var QuestionPanelDynamicItemTextProcessor = /** @class */ (function (_super) {
     __extends(QuestionPanelDynamicItemTextProcessor, _super);
     function QuestionPanelDynamicItemTextProcessor(data, panelItem, variableName) {
@@ -49043,6 +49238,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     __extends(QuestionPanelDynamicModel, _super);
     function QuestionPanelDynamicModel(name) {
         var _this = _super.call(this, name) || this;
+        _this._renderedPanels = [];
+        _this.isPanelsAnimationRunning = false;
         _this.isAddingNewPanels = false;
         _this.isSetPanelItemData = {};
         _this.createNewArray("panels", function (panel) { _this.onPanelAdded(panel); }, function (panel) { _this.onPanelRemoved(panel); });
@@ -49368,6 +49565,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         if (!this.currentPanel) {
             this.currentPanel = panel;
         }
+        this.updateRenderedPanels();
     };
     QuestionPanelDynamicModel.prototype.onPanelRemoved = function (panel) {
         var index = this.onPanelRemovedCore(panel);
@@ -49377,6 +49575,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
                 index = visPanels.length - 1;
             this.currentPanel = index >= 0 ? visPanels[index] : null;
         }
+        this.updateRenderedPanels();
     };
     QuestionPanelDynamicModel.prototype.onPanelRemovedCore = function (panel) {
         var visPanels = this.visiblePanelsCore;
@@ -49447,6 +49646,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
                 curPanel.onHidingContent();
             }
             this.setPropertyValue("currentPanel", val);
+            this.updateRenderedPanels();
             this.updateFooterActions();
             this.updateTabToolbarItemsPressedState();
             this.fireCallback(this.currentIndexChangedCallback);
@@ -49461,6 +49661,123 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionPanelDynamicModel.prototype.updateRenderedPanels = function () {
+        if (this.isRenderModeList) {
+            this.renderedPanels = [].concat(this.visiblePanels);
+        }
+        else if (this.currentPanel) {
+            this.renderedPanels = [this.currentPanel];
+        }
+        else {
+            this.renderedPanels = [];
+        }
+    };
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "renderedPanels", {
+        get: function () {
+            return this._renderedPanels;
+        },
+        set: function (val) {
+            if (this.renderedPanels.length == 0 || val.length == 0) {
+                this.blockAnimations();
+                this.panelsAnimation.sync(val);
+                this.releaseAnimations();
+            }
+            else {
+                this.isPanelsAnimationRunning = true;
+                this.panelsAnimation.sync(val);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    QuestionPanelDynamicModel.prototype.getPanelsAnimationOptions = function () {
+        var _this = this;
+        var getDirection = function () {
+            if (_this.isRenderModeList)
+                return "";
+            var leavingPanel = _this.renderedPanels.filter(function (el) { return el !== _this.currentPanel; })[0];
+            var leavingPanelIndex = _this.visiblePanels.indexOf(leavingPanel);
+            if (leavingPanelIndex < 0)
+                leavingPanelIndex = _this.removedPanelIndex;
+            return leavingPanelIndex > _this.currentIndex ? "-right" : "-left";
+        };
+        return {
+            getAnimatedElement: function (panel) {
+                var _a, _b;
+                if (panel && _this.cssContent) {
+                    var contentSelector = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_9__["classesToSelector"])(_this.cssContent);
+                    return (_b = (_a = _this.getWrapperElement()) === null || _a === void 0 ? void 0 : _a.querySelector(":scope " + contentSelector + " #" + panel.id)) === null || _b === void 0 ? void 0 : _b.parentElement;
+                }
+            },
+            getEnterOptions: function () {
+                var cssClass = _this.cssClasses.panelWrapperFadeIn ? "" + _this.cssClasses.panelWrapperFadeIn + getDirection() : "";
+                return {
+                    onBeforeRunAnimation: function (el) {
+                        var _a;
+                        if (_this.focusNewPanelCallback) {
+                            var scolledElement = _this.isRenderModeList ? el : el.parentElement;
+                            _survey_element__WEBPACK_IMPORTED_MODULE_1__["SurveyElement"].ScrollElementToViewCore(scolledElement, false, false, { behavior: "smooth" });
+                        }
+                        if (!_this.isRenderModeList) {
+                            (_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.style.setProperty("--animation-height-to", el.offsetHeight + "px");
+                        }
+                        else {
+                            el.style.setProperty("--animation-height", el.offsetHeight + "px");
+                        }
+                    },
+                    cssClass: cssClass
+                };
+            },
+            getLeaveOptions: function () {
+                var cssClass = _this.cssClasses.panelWrapperFadeOut ? "" + _this.cssClasses.panelWrapperFadeOut + getDirection() : "";
+                return {
+                    onBeforeRunAnimation: function (el) {
+                        var _a;
+                        if (!_this.isRenderModeList) {
+                            (_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.style.setProperty("--animation-height-from", el.offsetHeight + "px");
+                        }
+                        else {
+                            el.style.setProperty("--animation-height", el.offsetHeight + "px");
+                        }
+                    },
+                    cssClass: cssClass
+                };
+            },
+            isAnimationEnabled: function () {
+                return _this.animationAllowed && !!_this.getWrapperElement();
+            },
+        };
+    };
+    QuestionPanelDynamicModel.prototype.disablePanelsAnimations = function () {
+        this.panelsCore.forEach(function (panel) {
+            panel.blockAnimations();
+        });
+    };
+    QuestionPanelDynamicModel.prototype.enablePanelsAnimations = function () {
+        this.panelsCore.forEach(function (panel) {
+            panel.releaseAnimations();
+        });
+    };
+    QuestionPanelDynamicModel.prototype.updatePanelsAnimation = function () {
+        var _this = this;
+        this._panelsAnimations = new (this.isRenderModeList ? _utils_animation__WEBPACK_IMPORTED_MODULE_14__["AnimationGroup"] : _utils_animation__WEBPACK_IMPORTED_MODULE_14__["AnimationTab"])(this.getPanelsAnimationOptions(), function (val, isTempUpdate) {
+            _this._renderedPanels = val;
+            if (!isTempUpdate) {
+                _this.isPanelsAnimationRunning = false;
+                _this.focusNewPanel();
+            }
+        }, function () { return _this._renderedPanels; });
+    };
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "panelsAnimation", {
+        get: function () {
+            if (!this._panelsAnimations) {
+                this.updatePanelsAnimation();
+            }
+            return this._panelsAnimations;
+        },
+        enumerable: false,
+        configurable: true
+    });
     QuestionPanelDynamicModel.prototype.onHidingContent = function () {
         _super.prototype.onHidingContent.call(this);
         if (this.currentPanel) {
@@ -49775,11 +50092,13 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             if (val < this.panelCount) {
                 this.panelsCore.splice(val, this.panelCount - val);
             }
+            this.disablePanelsAnimations();
             this.setValueAfterPanelsCreating();
             this.setValueBasedOnPanelCount();
             this.reRunCondition();
             this.updateFooterActions();
             this.fireCallback(this.panelCountChangedCallback);
+            this.enablePanelsAnimations();
         },
         enumerable: false,
         configurable: true
@@ -50074,6 +50393,10 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         set: function (val) {
             this.setPropertyValue("renderMode", val);
             this.fireCallback(this.renderModeChangedCallback);
+            this.blockAnimations();
+            this.updateRenderedPanels();
+            this.releaseAnimations();
+            this.updatePanelsAnimation();
         },
         enumerable: false,
         configurable: true
@@ -50307,9 +50630,20 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         if (this.renderMode === "list" && this.panelsState !== "default") {
             newPanel.expand();
         }
-        newPanel.focusFirstQuestion();
+        this.focusNewPanelCallback = function () {
+            newPanel.focusFirstQuestion();
+        };
+        if (!this.isPanelsAnimationRunning) {
+            this.focusNewPanel();
+        }
         return newPanel;
     };
+    QuestionPanelDynamicModel.prototype.focusNewPanel = function () {
+        if (this.focusNewPanelCallback) {
+            this.focusNewPanelCallback();
+            this.focusNewPanelCallback = undefined;
+        }
+    };
     /**
      * Adds a new panel based on the [template](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#template).
      * @param index *(Optional)* An index at which to insert the new panel. `undefined` adds the panel to the end or inserts it after the current panel if [`renderMode`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#renderMode) is `"tab"`. A negative index (for instance, -1) adds the panel to the end in all cases, regardless of the `renderMode` value.
@@ -50418,16 +50752,11 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             return;
         this.currentIndex--;
     };
-    /**
-     * Removes a dynamic panel from the panels array.
-     * @param value a panel or panel index
-     * @see panels
-     * @see template
-     */
     QuestionPanelDynamicModel.prototype.removePanel = function (value) {
         var visIndex = this.getVisualPanelIndex(value);
         if (visIndex < 0 || visIndex >= this.visiblePanelCount)
             return;
+        this.removedPanelIndex = visIndex;
         var panel = this.visiblePanelsCore[visIndex];
         var index = this.panelsCore.indexOf(panel);
         if (index < 0)
@@ -50540,11 +50869,16 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             var prefixName = this.getValueName() + indexStr;
             var prefixText = this.processedTitle + indexStr;
             for (var i = 0; i < panelObjs.length; i++) {
-                objects.push({
-                    name: prefixName + panelObjs[i].name,
-                    text: prefixText + panelObjs[i].text,
-                    question: panelObjs[i].question,
-                });
+                if (!!panelObjs[i].context) {
+                    objects.push(panelObjs[i]);
+                }
+                else {
+                    objects.push({
+                        name: prefixName + panelObjs[i].name,
+                        text: prefixText + panelObjs[i].text,
+                        question: panelObjs[i].question,
+                    });
+                }
             }
         }
         if (hasContext) {
@@ -50558,9 +50892,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
                     text: prefixText + QuestionPanelDynamicItem.ItemVariableName + "." + panelObjs[i].text,
                     question: panelObjs[i].question
                 };
-                if (context === true) {
-                    obj.context = this;
-                }
+                obj.context = this;
                 objects.push(obj);
             }
         }
@@ -50618,6 +50950,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             return;
         if (!force && this.wasNotRenderedInSurvey)
             return;
+        this.blockAnimations();
         this.hasPanelBuildFirstTime = true;
         this.isBuildingPanelsFirstTime = true;
         if (this.getPropertyValue("panelCount") > 0) {
@@ -50640,6 +50973,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         }
         this.updateFooterActions();
         this.isBuildingPanelsFirstTime = false;
+        this.releaseAnimations();
     };
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "wasNotRenderedInSurvey", {
         get: function () {
@@ -51185,7 +51519,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "cssHeader", {
         get: function () {
-            var showTab = this.isRenderModeTab && !!this.panelCount;
+            var showTab = this.isRenderModeTab && !!this.visiblePanelCount;
             return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__["CssClassBuilder"]()
                 .append(this.cssClasses.header)
                 .append(this.cssClasses.headerTop, this.hasTitleOnTop || showTab)
@@ -51198,6 +51532,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     QuestionPanelDynamicModel.prototype.getPanelWrapperCss = function (panel) {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__["CssClassBuilder"]()
             .append(this.cssClasses.panelWrapper, !panel || panel.visible)
+            .append(this.cssClasses.panelWrapperList, this.isRenderModeList)
             .append(this.cssClasses.panelWrapperInRow, this.panelRemoveButtonLocation === "right")
             .toString();
     };
@@ -51256,6 +51591,13 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             return true;
         return false;
     };
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "hasAdditionalTitleToolbar", {
+        get: function () {
+            return this.isRenderModeTab && this.visiblePanels.length > 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
     QuestionPanelDynamicModel.prototype.getAdditionalTitleToolbar = function () {
         if (!this.isRenderModeTab)
             return null;
@@ -51444,7 +51786,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         configurable: true
     });
     QuestionPanelDynamicModel.prototype.showSeparator = function (index) {
-        return this.isRenderModeList && index < this.visiblePanelCount - 1;
+        return this.isRenderModeList && index < this.renderedPanels.length - 1;
     };
     QuestionPanelDynamicModel.prototype.calcCssClasses = function (css) {
         var classes = _super.prototype.calcCssClasses.call(this, css);
@@ -51458,6 +51800,9 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         return classes;
     };
     QuestionPanelDynamicModel.maxCheckCount = 3;
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_5__["propertyArray"])({})
+    ], QuestionPanelDynamicModel.prototype, "_renderedPanels", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_5__["property"])({ defaultValue: false, onSet: function (_, target) { target.updateFooterActions(); } })
     ], QuestionPanelDynamicModel.prototype, "legacyNavigation", void 0);
@@ -51757,6 +52102,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./helpers */ "./src/helpers.ts");
 /* 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");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -51789,6 +52135,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 /**
  * A class that describes the Ranking question type.
  *
@@ -51842,7 +52189,19 @@ var QuestionRankingModel = /** @class */ (function (_super) {
             if (_this.allowStartDrag &&
                 _this.canStartDragDueMaxSelectedChoices(target) &&
                 _this.canStartDragDueItemEnabled(choice)) {
-                _this.dragDropRankingChoices.startDrag(event, choice, _this, node);
+                _this.draggedChoise = choice;
+                _this.draggedTargetNode = node;
+                _this.dragOrClickHelper.onPointerDown(event);
+            }
+        };
+        _this.startDrag = function (event) {
+            _this.dragDropRankingChoices.startDrag(event, _this.draggedChoise, _this, _this.draggedTargetNode);
+        };
+        _this.handlePointerUp = function (event, choice, node) {
+            if (!_this.selectToRankEnabled)
+                return;
+            if (_this.allowStartDrag) {
+                _this.handleKeydownSelectToRank(event, choice, " ", false);
             }
         };
         _this.handleKeydown = function (event, choice) {
@@ -51902,6 +52261,7 @@ var QuestionRankingModel = /** @class */ (function (_super) {
             _this.setDragDropRankingChoices();
             _this.updateRankingChoicesSync();
         });
+        _this.dragOrClickHelper = new _utils_dragOrClickHelper__WEBPACK_IMPORTED_MODULE_11__["DragOrClickHelper"](_this.startDrag);
         return _this;
     }
     QuestionRankingModel.prototype.getDefaultItemComponent = function () {
@@ -51939,7 +52299,10 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         configurable: true
     });
     QuestionRankingModel.prototype.isItemSelectedCore = function (item) {
-        return false;
+        if (this.selectToRankEnabled) {
+            return _super.prototype.isItemSelectedCore.call(this, item);
+        }
+        return true;
     };
     QuestionRankingModel.prototype.getItemClassCore = function (item, options) {
         var itemIndex = this.rankingChoices.indexOf(item);
@@ -52001,9 +52364,9 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         return this.isEmpty() ? "" : index + 1 + "";
     };
     QuestionRankingModel.prototype.updateRankingChoicesSync = function () {
-        this.animationAllowed = false;
+        this.blockAnimations();
         this.updateRankingChoices();
-        this.animationAllowed = true;
+        this.releaseAnimations();
     };
     QuestionRankingModel.prototype.setSurveyImpl = function (value, isLight) {
         _super.prototype.setSurveyImpl.call(this, value, isLight);
@@ -52046,7 +52409,7 @@ var QuestionRankingModel = /** @class */ (function (_super) {
     QuestionRankingModel.prototype.getChoicesAnimation = function (isRankingChoices) {
         var _this = this;
         return {
-            isAnimationEnabled: function () { return _src_settings__WEBPACK_IMPORTED_MODULE_9__["settings"].animationEnabled && _this.animationAllowed; },
+            isAnimationEnabled: function () { return _this.animationAllowed; },
             getLeaveOptions: function (item) {
                 var choices = isRankingChoices ? _this.rankingChoices : _this.unRankingChoices;
                 if (_this.renderedSelectToRankAreasLayout == "vertical" && choices.length == 1 && choices.indexOf(item) >= 0) {
@@ -52214,10 +52577,13 @@ var QuestionRankingModel = /** @class */ (function (_super) {
     QuestionRankingModel.prototype.supportNone = function () { return false; };
     QuestionRankingModel.prototype.supportRefuse = function () { return false; };
     QuestionRankingModel.prototype.supportDontKnow = function () { return false; };
-    QuestionRankingModel.prototype.handleKeydownSelectToRank = function (event, movedElement) {
+    QuestionRankingModel.prototype.handleKeydownSelectToRank = function (event, movedElement, hardKey, isNeedFocus) {
+        if (isNeedFocus === void 0) { isNeedFocus = true; }
         if (this.isDesignMode)
             return;
         var key = event.key;
+        if (hardKey)
+            key = hardKey;
         if (key !== " " && key !== "ArrowUp" && key !== "ArrowDown")
             return;
         var dnd = this.dragDropRankingChoices; //????
@@ -52229,21 +52595,23 @@ var QuestionRankingModel = /** @class */ (function (_super) {
             return;
         var toIndex;
         if (key === " " && !isMovedElementRanked) {
-            toIndex = 0;
-            this.animationAllowed = false;
+            if (!this.checkMaxSelectedChoicesUnreached() || !this.canStartDragDueItemEnabled(movedElement))
+                return;
+            toIndex = this.value.length;
+            this.blockAnimations();
             dnd.selectToRank(this, fromIndex, toIndex);
-            this.animationAllowed = true;
-            this.setValueAfterKeydown(toIndex, "to-container");
+            this.releaseAnimations();
+            this.setValueAfterKeydown(toIndex, "to-container", isNeedFocus);
             return;
         }
         if (!isMovedElementRanked)
             return;
         if (key === " ") {
-            this.animationAllowed = false;
+            this.blockAnimations();
             dnd.unselectFromRank(this, fromIndex);
-            this.animationAllowed = true;
+            this.releaseAnimations();
             toIndex = this.unRankingChoices.indexOf(movedElement); //'this.' leads to actual array after the 'unselectFromRank' method
-            this.setValueAfterKeydown(toIndex, "from-container");
+            this.setValueAfterKeydown(toIndex, "from-container", isNeedFocus);
             return;
         }
         var delta = key === "ArrowUp" ? -1 : (key === "ArrowDown" ? 1 : 0);
@@ -52253,15 +52621,18 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         if (toIndex < 0 || toIndex >= rankingChoices.length)
             return;
         dnd.reorderRankedItem(this, fromIndex, toIndex);
-        this.setValueAfterKeydown(toIndex, "to-container");
+        this.setValueAfterKeydown(toIndex, "to-container", isNeedFocus);
     };
-    QuestionRankingModel.prototype.setValueAfterKeydown = function (index, container) {
+    QuestionRankingModel.prototype.setValueAfterKeydown = function (index, container, isNeedFocus) {
         var _this = this;
+        if (isNeedFocus === void 0) { isNeedFocus = true; }
         this.setValue();
-        setTimeout(function () {
-            _this.focusItem(index, container);
-        }, 1);
-        event.preventDefault();
+        if (isNeedFocus) {
+            setTimeout(function () {
+                _this.focusItem(index, container);
+            }, 1);
+        }
+        event && event.preventDefault();
     };
     QuestionRankingModel.prototype.getIconHoverCss = function () {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_6__["CssClassBuilder"]()
@@ -52605,19 +52976,23 @@ var QuestionRatingModel = /** @class */ (function (_super) {
             _this.updateRateCount();
         });
         _this.registerFunctionOnPropertiesValueChanged(["rateValues"], function () {
-            _this.autoGenerate = false;
+            _this.setIconsToRateValues();
+            _this.createRenderedRateItems();
+        });
+        _this.registerSychProperties(["rateValues"], function () {
+            _this.autoGenerate = _this.rateValues.length == 0;
             _this.setIconsToRateValues();
             _this.createRenderedRateItems();
         });
         _this.registerFunctionOnPropertiesValueChanged(["rateColorMode", "scaleColorMode"], function () {
             _this.updateColors(_this.survey.themeVariables);
         });
-        _this.registerFunctionOnPropertiesValueChanged(["autoGenerate"], function () {
+        _this.registerSychProperties(["autoGenerate"], function () {
             if (!_this.autoGenerate && _this.rateValues.length === 0) {
                 _this.setPropertyValue("rateValues", _this.visibleRateValues);
             }
             if (_this.autoGenerate) {
-                _this.rateValues.length = 0;
+                _this.rateValues.splice(0, _this.rateValues.length);
                 _this.updateRateMax();
             }
             _this.createRenderedRateItems();
@@ -52943,6 +53318,13 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     QuestionRatingModel.prototype.getInputId = function (index) {
         return this.inputId + "_" + index;
     };
+    Object.defineProperty(QuestionRatingModel.prototype, "questionName", {
+        get: function () {
+            return this.name + "_" + this.id;
+        },
+        enumerable: false,
+        configurable: true
+    });
     QuestionRatingModel.prototype.supportGoNextPageAutomatic = function () {
         return this.isMouseDown === true || this.renderAs === "dropdown";
     };
@@ -54483,7 +54865,13 @@ var QuestionTagboxModel = /** @class */ (function (_super) {
         })
     ], QuestionTagboxModel.prototype, "hideSelectedItems", void 0);
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])()
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({
+            onSet: function (newValue, target) {
+                if (!!target.dropdownListModel) {
+                    target.dropdownListModel.setChoicesLazyLoadEnabled(newValue);
+                }
+            }
+        })
     ], QuestionTagboxModel.prototype, "choicesLazyLoadEnabled", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])()
@@ -55199,8 +55587,8 @@ var QuestionTextModel = /** @class */ (function (_super) {
         if (this.inputTextAlignment !== "auto") {
             style.textAlign = this.inputTextAlignment;
         }
-        else if (this.maskType === "numeric" || this.maskType === "currency") {
-            style.textAlign = "right";
+        else if (this.maskSettings.getTextAlignment() !== "auto") {
+            style.textAlign = this.maskSettings.getTextAlignment();
         }
     };
     QuestionTextModel.prototype.updateValueOnEvent = function (event) {
@@ -57355,7 +57743,6 @@ var SurveyElement = /** @class */ (function (_super) {
                 }
             }
         }, function () { return _this.renderedIsExpanded; });
-        _this.animationAllowedValue = true;
         _this.name = name;
         _this.createNewArray("errors");
         _this.createNewArray("titleActions");
@@ -57391,7 +57778,7 @@ var SurveyElement = /** @class */ (function (_super) {
         var el = root.getElementById(elementId);
         return SurveyElement.ScrollElementToViewCore(el, false, scrollIfVisible);
     };
-    SurveyElement.ScrollElementToViewCore = function (el, checkLeft, scrollIfVisible) {
+    SurveyElement.ScrollElementToViewCore = function (el, checkLeft, scrollIfVisible, scrollIntoViewOptions) {
         if (!el || !el.scrollIntoView)
             return false;
         var elTop = scrollIfVisible ? -1 : el.getBoundingClientRect().top;
@@ -57410,7 +57797,7 @@ var SurveyElement = /** @class */ (function (_super) {
             }
         }
         if (needScroll) {
-            el.scrollIntoView();
+            el.scrollIntoView(scrollIntoViewOptions);
         }
         return needScroll;
     };
@@ -58394,6 +58781,13 @@ var SurveyElement = /** @class */ (function (_super) {
             this.toggleState();
         }
     };
+    Object.defineProperty(SurveyElement.prototype, "hasAdditionalTitleToolbar", {
+        get: function () {
+            return false;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(SurveyElement.prototype, "additionalTitleToolbar", {
         get: function () {
             return this.getAdditionalTitleToolbar();
@@ -58419,18 +58813,25 @@ var SurveyElement = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyElement.prototype, "isDisabledStyle", {
         get: function () {
-            return !this.isDefaultV2Theme && (this.isReadOnlyStyle || this.isPreviewStyle);
+            return this.getIsDisableAndReadOnlyStyles(false)[1];
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(SurveyElement.prototype, "isReadOnlyStyle", {
         get: function () {
-            return this.isReadOnly && !this.isPreviewStyle;
+            return this.getIsDisableAndReadOnlyStyles(false)[0];
         },
         enumerable: false,
         configurable: true
     });
+    SurveyElement.prototype.getIsDisableAndReadOnlyStyles = function (itemReadOnly) {
+        var isPreview = this.isPreviewStyle;
+        var isReadOnly = itemReadOnly || this.isReadOnly;
+        var isReadOnlyStyle = isReadOnly && !isPreview;
+        var isDisableStyle = !this.isDefaultV2Theme && (isReadOnly || isPreview);
+        return [isReadOnlyStyle, isDisableStyle];
+    };
     Object.defineProperty(SurveyElement.prototype, "isPreviewStyle", {
         get: function () {
             return !!this.survey && this.survey.state === "preview";
@@ -58497,12 +58898,12 @@ var SurveyElement = /** @class */ (function (_super) {
                 if (cssClasses.content) {
                     var selector = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_8__["classesToSelector"])(cssClasses.content);
                     if (selector) {
-                        return (_a = _this.getWrapperElement()) === null || _a === void 0 ? void 0 : _a.querySelector(selector);
+                        return (_a = _this.getWrapperElement()) === null || _a === void 0 ? void 0 : _a.querySelector(":scope " + selector);
                     }
                 }
                 return undefined;
             },
-            isAnimationEnabled: function () { return _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].animationEnabled && _this.animationAllowed && !_this.isDesignMode; }
+            isAnimationEnabled: function () { return _this.animationAllowed && !_this.isDesignMode; }
         };
     };
     Object.defineProperty(SurveyElement.prototype, "renderedIsExpanded", {
@@ -58515,16 +58916,9 @@ var SurveyElement = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(SurveyElement.prototype, "animationAllowed", {
-        get: function () {
-            return !this.isLoadingFromJson && !this.isDisposed && !!this.survey && this.animationAllowedValue;
-        },
-        set: function (val) {
-            this.animationAllowedValue = val;
-        },
-        enumerable: false,
-        configurable: true
-    });
+    SurveyElement.prototype.getIsAnimationAllowed = function () {
+        return _super.prototype.getIsAnimationAllowed.call(this) && !!this.survey;
+    };
     SurveyElement.prototype.dispose = function () {
         _super.prototype.dispose.call(this);
         if (this.titleToolbarValue) {
@@ -59464,6 +59858,7 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.skippedPages = [];
         _this.skeletonComponentName = "sv-skeleton";
         _this.taskManager = new _surveyTaskManager__WEBPACK_IMPORTED_MODULE_22__["SurveyTaskManagerModel"]();
+        _this.questionErrorComponent = "sv-question-error";
         if (_global_variables_utils__WEBPACK_IMPORTED_MODULE_25__["DomDocumentHelper"].isAvailable()) {
             SurveyModel.stylesManager = new _stylesmanager__WEBPACK_IMPORTED_MODULE_11__["StylesManager"]();
         }
@@ -62030,7 +62425,7 @@ var SurveyModel = /** @class */ (function (_super) {
         }
         this.getAllQuestions().forEach(function (q) {
             if (q.hasFilteredValue) {
-                values[q.getValueName()] = q.getFilteredValue();
+                values[q.getFilteredName()] = q.getFilteredValue();
             }
         });
         return values;
@@ -65130,6 +65525,7 @@ var SurveyModel = /** @class */ (function (_super) {
      * @param isPartial Pass `true` to save partial survey results (see [Continue an Incomplete Survey](https://surveyjs.io/form-library/documentation/handle-survey-results-continue-incomplete)).
      */
     SurveyModel.prototype.sendResult = function (postId, clientId, isPartial) {
+        var _this = this;
         if (postId === void 0) { postId = null; }
         if (clientId === void 0) { clientId = null; }
         if (isPartial === void 0) { isPartial = false; }
@@ -65148,24 +65544,23 @@ var SurveyModel = /** @class */ (function (_super) {
         }
         if (isPartial && !this.clientId)
             return;
-        var self = this;
-        if (this.surveyShowDataSaving) {
+        var service = this.createSurveyService();
+        service.locale = this.getLocale();
+        var showSaving = this.surveyShowDataSaving || (!isPartial && service.isSurveJSIOService);
+        if (showSaving) {
             this.setCompletedState("saving", "");
         }
-        this.createSurveyService().sendResult(postId, this.data, function (success, response, request) {
-            if (self.surveyShowDataSaving) {
+        service.sendResult(postId, this.data, function (success, response, request) {
+            if (showSaving || service.isSurveJSIOService) {
                 if (success) {
-                    self.setCompletedState("success", "");
+                    _this.setCompletedState("success", "");
                 }
                 else {
-                    self.setCompletedState("error", response);
+                    _this.setCompletedState("error", response);
                 }
             }
-            self.onSendResult.fire(self, {
-                success: success,
-                response: response,
-                request: request,
-            });
+            var options = { success: success, response: response, request: request };
+            _this.onSendResult.fire(_this, options);
         }, this.clientId, isPartial);
     };
     /**
@@ -65803,7 +66198,7 @@ var SurveyModel = /** @class */ (function (_super) {
         if (locNotification !== "text") {
             this.tryGoNextPageAutomatic(name);
         }
-        var question = this.getQuestionByName(name);
+        var question = this.getQuestionByValueName(name);
         if (question) {
             this.onValueChanged.fire(this, {
                 name: commentName,
@@ -67128,7 +67523,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("survey", [
     {
         name: "showProgressBar",
         default: "off",
-        choices: ["off", "auto", "aboveHeader", "belowHeader", "bottom", "topBottom"],
+        choices: ["off", "auto", "aboveheader", "belowheader", "bottom", "topbottom"],
     },
     {
         name: "progressBarType",
@@ -67767,11 +68162,9 @@ function createTOCListModel(survey, onAction) {
     var _a;
     var pagesSource = survey.questionsOnPageMode === "singlePage" ? (_a = survey.pages[0]) === null || _a === void 0 ? void 0 : _a.elements : survey.pages;
     var items = (pagesSource || []).map(function (page) {
-        var _a, _b;
         return new _actions_action__WEBPACK_IMPORTED_MODULE_0__["Action"]({
             id: page.name,
-            locTitle: ((_a = page.locNavigationTitle) === null || _a === void 0 ? void 0 : _a.text) ? page.locNavigationTitle : (((_b = page.locTitle) === null || _b === void 0 ? void 0 : _b.text) ? page.locTitle : undefined),
-            title: page.renderedNavigationTitle,
+            locTitle: page.locNavigationTitle,
             action: function () {
                 _global_variables_utils__WEBPACK_IMPORTED_MODULE_2__["DomDocumentHelper"].activeElementBlur();
                 !!onAction && onAction();
@@ -68806,6 +69199,9 @@ var SurveyTriggerRunExpression = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    SurveyTriggerRunExpression.prototype.canBeExecuted = function (isOnNextPage) {
+        return !isOnNextPage;
+    };
     SurveyTriggerRunExpression.prototype.onSuccess = function (values, properties) {
         var _this = this;
         if (!this.owner || !this.runExpression)
@@ -68929,7 +69325,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("runexpressiontr
 /*!********************************!*\
   !*** ./src/utils/animation.ts ***!
   \********************************/
-/*! exports provided: AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationBoolean, AnimationGroup */
+/*! exports provided: AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -68937,8 +69333,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationUtils", function() { return AnimationUtils; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationPropertyUtils", function() { return AnimationPropertyUtils; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationGroupUtils", function() { return AnimationGroupUtils; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationProperty", function() { return AnimationProperty; });
 /* 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");
 var __extends = (undefined && undefined.__extends) || (function () {
@@ -68967,6 +69365,9 @@ var AnimationUtils = /** @class */ (function () {
             return 0;
         return Number(value.slice(0, -1).replace(",", ".")) * 1000;
     };
+    AnimationUtils.prototype.reflow = function (element) {
+        return element.offsetHeight;
+    };
     AnimationUtils.prototype.getAnimationsCount = function (element) {
         var animationName = "";
         if (getComputedStyle) {
@@ -68984,6 +69385,14 @@ var AnimationUtils = /** @class */ (function () {
         }
         return duration;
     };
+    AnimationUtils.prototype.addCancelCallback = function (callback) {
+        this.cancelQueue.push(callback);
+    };
+    AnimationUtils.prototype.removeCancelCallback = function (callback) {
+        if (this.cancelQueue.indexOf(callback) >= 0) {
+            this.cancelQueue.splice(this.cancelQueue.indexOf(callback), 1);
+        }
+    };
     AnimationUtils.prototype.onAnimationEnd = function (element, callback, options) {
         var _this = this;
         var cancelTimeout;
@@ -68993,7 +69402,7 @@ var AnimationUtils = /** @class */ (function () {
             options.onAfterRunAnimation && options.onAfterRunAnimation(element);
             callback(isCancel);
             clearTimeout(cancelTimeout);
-            _this.cancelQueue.splice(_this.cancelQueue.indexOf(onEndCallback), 1);
+            _this.removeCancelCallback(onEndCallback);
             element.removeEventListener("animationend", onAnimationEndCallback);
         };
         var onAnimationEndCallback = function (event) {
@@ -69003,7 +69412,7 @@ var AnimationUtils = /** @class */ (function () {
         };
         if (animationsCount > 0) {
             element.addEventListener("animationend", onAnimationEndCallback);
-            this.cancelQueue.push(onEndCallback);
+            this.addCancelCallback(onEndCallback);
             cancelTimeout = setTimeout(function () {
                 onEndCallback(false);
             }, this.getAnimationDuration(element) + 10);
@@ -69013,40 +69422,51 @@ var AnimationUtils = /** @class */ (function () {
         }
     };
     AnimationUtils.prototype.beforeAnimationRun = function (element, options) {
-        if (element) {
+        if (element && options) {
             options.onBeforeRunAnimation && options.onBeforeRunAnimation(element);
         }
     };
-    AnimationUtils.prototype.runLeaveAnimation = function (element, options, callback) {
+    AnimationUtils.prototype.runAnimation = function (element, options, callback) {
         if (element && options.cssClass) {
+            this.reflow(element);
             element.classList.add(options.cssClass);
-            var onAnimationEndCallback = function (isCancel) {
+            this.onAnimationEnd(element, callback, options);
+        }
+        else {
+            callback(true);
+        }
+    };
+    AnimationUtils.prototype.clearHtmlElement = function (element, options) {
+        if (element && options.cssClass) {
+            element.classList.remove(options.cssClass);
+        }
+    };
+    AnimationUtils.prototype.onNextRender = function (callback, runEarly, isCancel) {
+        var _this = this;
+        if (isCancel === void 0) { isCancel = false; }
+        if (!isCancel && _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].isAvailable()) {
+            var cancelCallback_1 = function () {
                 callback();
-                if (isCancel) {
-                    element.classList.remove(options.cssClass);
+                cancelAnimationFrame(latestRAF_1);
+            };
+            var latestRAF_1 = _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
+                if (runEarly && runEarly()) {
+                    callback();
+                    _this.removeCancelCallback(cancelCallback_1);
                 }
                 else {
-                    _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
-                        _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
-                            element.classList.remove(options.cssClass);
-                        });
+                    latestRAF_1 = _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
+                        callback();
+                        _this.removeCancelCallback(cancelCallback_1);
                     });
                 }
-            };
-            this.onAnimationEnd(element, onAnimationEndCallback, options);
+            });
+            this.addCancelCallback(cancelCallback_1);
         }
         else {
             callback();
         }
     };
-    AnimationUtils.prototype.runEnterAnimation = function (element, options) {
-        if (element && options.cssClass) {
-            element.classList.add(options.cssClass);
-            this.onAnimationEnd(element, function () {
-                element.classList.remove(options.cssClass);
-            }, options);
-        }
-    };
     AnimationUtils.prototype.cancel = function () {
         var cancelQueue = [].concat(this.cancelQueue);
         cancelQueue.forEach(function (callback) { return callback(); });
@@ -69060,26 +69480,28 @@ var AnimationPropertyUtils = /** @class */ (function (_super) {
     function AnimationPropertyUtils() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    AnimationPropertyUtils.prototype.onEnter = function (getElement, options) {
+    AnimationPropertyUtils.prototype.onEnter = function (options) {
         var _this = this;
-        var callback = function () {
-            var element = getElement();
-            _this.beforeAnimationRun(element, options);
-            _this.runEnterAnimation(element, options);
-        };
-        _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
-            if (getElement()) {
-                callback();
-            }
-            else {
-                _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(callback);
-            }
-        });
+        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(); });
     };
-    AnimationPropertyUtils.prototype.onLeave = function (getElement, callback, options) {
-        var element = getElement();
-        this.beforeAnimationRun(element, options);
-        this.runLeaveAnimation(element, options, callback);
+    AnimationPropertyUtils.prototype.onLeave = function (options, callback) {
+        var _this = this;
+        var htmlElement = options.getAnimatedElement();
+        var leaveOptions = options.getLeaveOptions();
+        this.beforeAnimationRun(htmlElement, leaveOptions);
+        this.runAnimation(htmlElement, leaveOptions, function (isCancel) {
+            callback();
+            _this.onNextRender(function () {
+                _this.clearHtmlElement(htmlElement, leaveOptions);
+            }, undefined, isCancel);
+        });
     };
     return AnimationPropertyUtils;
 }(AnimationUtils));
@@ -69089,41 +69511,40 @@ var AnimationGroupUtils = /** @class */ (function (_super) {
     function AnimationGroupUtils() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    AnimationGroupUtils.prototype.onEnter = function (getElement, getOptions, elements) {
+    AnimationGroupUtils.prototype.runGroupAnimation = function (options, addedElements, removedElements, callback) {
         var _this = this;
-        if (elements.length == 0)
-            return;
-        _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
-            var callback = function () {
-                elements.forEach(function (el) {
-                    _this.beforeAnimationRun(getElement(el), getOptions(el));
-                });
-                elements.forEach(function (el) {
-                    _this.runEnterAnimation(getElement(el), getOptions(el));
-                });
+        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);
+                }
             };
-            if (!getElement(elements[0])) {
-                _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(callback);
-            }
-            else {
-                callback();
-            }
-        });
-    };
-    AnimationGroupUtils.prototype.onLeave = function (getElement, callback, getOptions, elements) {
-        var _this = this;
-        elements.forEach(function (el) {
-            _this.beforeAnimationRun(getElement(el), getOptions(el));
-        });
-        var counter = elements.length;
-        var onEndCallback = function () {
-            if (--counter <= 0) {
-                callback();
-            }
-        };
-        elements.forEach(function (el) {
-            _this.runLeaveAnimation(getElement(el), getOptions(el), onEndCallback);
-        });
+            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); }); });
     };
     return AnimationGroupUtils;
 }(AnimationUtils));
@@ -69144,6 +69565,7 @@ var AnimationProperty = /** @class */ (function () {
             this._debouncedSync.run(newValue);
         }
         else {
+            this.cancel();
             this.update(newValue);
         }
     };
@@ -69153,6 +69575,7 @@ var AnimationProperty = /** @class */ (function () {
     };
     return AnimationProperty;
 }());
+
 var AnimationBoolean = /** @class */ (function (_super) {
     __extends(AnimationBoolean, _super);
     function AnimationBoolean() {
@@ -69165,12 +69588,12 @@ var AnimationBoolean = /** @class */ (function (_super) {
         if (newValue !== this.getCurrentValue()) {
             if (newValue) {
                 this.update(newValue);
-                this.animation.onEnter(function () { return _this.animationOptions.getAnimatedElement(); }, this.animationOptions.getEnterOptions());
+                this.animation.onEnter(this.animationOptions);
             }
             else {
-                this.animation.onLeave(function () { return _this.animationOptions.getAnimatedElement(); }, function () {
+                this.animation.onLeave(this.animationOptions, function () {
                     _this.update(newValue);
-                }, this.animationOptions.getLeaveOptions());
+                });
             }
         }
         else {
@@ -69192,19 +69615,42 @@ var AnimationGroup = /** @class */ (function (_super) {
         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; });
-        this.animation.onEnter(function (el) { return _this.animationOptions.getAnimatedElement(el); }, function (el) { return _this.animationOptions.getEnterOptions(el); }, itemsToAdd);
         if (itemsToAdd.length == 0 && (deletedItems === null || deletedItems === void 0 ? void 0 : deletedItems.length) > 0) {
-            this.animation.onLeave(function (el) { return _this.animationOptions.getAnimatedElement(el); }, function () {
-                _this.update(newValue);
-            }, function (el) { return _this.animationOptions.getLeaveOptions(el); }, deletedItems);
+            this.animation.runGroupAnimation(this.animationOptions, [], deletedItems, function () { return _this.update(newValue); });
         }
         else {
             this.update(newValue);
+            this.animation.runGroupAnimation(this.animationOptions, itemsToAdd, []);
         }
     };
     return AnimationGroup;
 }(AnimationProperty));
 
+var AnimationTab = /** @class */ (function (_super) {
+    __extends(AnimationTab, _super);
+    function AnimationTab(animationOptions, update, getCurrentValue, mergeValues) {
+        var _this = _super.call(this, animationOptions, update, getCurrentValue) || this;
+        _this.mergeValues = mergeValues;
+        _this.animation = new AnimationGroupUtils();
+        return _this;
+    }
+    AnimationTab.prototype._sync = function (newValue) {
+        var _this = this;
+        var oldValue = [].concat(this.getCurrentValue());
+        if (oldValue[0] !== newValue[0]) {
+            var tempValue = !!this.mergeValues ? this.mergeValues(newValue, oldValue) : [].concat(oldValue, newValue);
+            this.update(tempValue, true);
+            this.animation.runGroupAnimation(this.animationOptions, newValue, oldValue, function () {
+                _this.update(newValue);
+            });
+        }
+        else {
+            this.update(newValue);
+        }
+    };
+    return AnimationTab;
+}(AnimationProperty));
+
 
 
 /***/ }),