survey-react-ui 1.9.139 → 1.10.2

package/survey-react-ui.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)
  */
@@ -161,8 +161,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();
     });
@@ -413,9 +414,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) {
@@ -1286,6 +1287,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();
@@ -1660,8 +1662,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) {
@@ -2206,6 +2206,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;
 }());
@@ -3003,7 +3019,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!***************************************!*\
   !*** ./src/entries/react-ui-model.ts ***!
   \***************************************/
-/*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent */
+/*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, QuestionErrorComponent, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3251,39 +3267,42 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _react_components_survey_actions_survey_nav_button__WEBPACK_IMPORTED_MODULE_70__ = __webpack_require__(/*! ../react/components/survey-actions/survey-nav-button */ "./src/react/components/survey-actions/survey-nav-button.tsx");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyNavigationButton", function() { return _react_components_survey_actions_survey_nav_button__WEBPACK_IMPORTED_MODULE_70__["SurveyNavigationButton"]; });
 
-/* harmony import */ var _react_components_matrix_row__WEBPACK_IMPORTED_MODULE_71__ = __webpack_require__(/*! ../react/components/matrix/row */ "./src/react/components/matrix/row.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MatrixRow", function() { return _react_components_matrix_row__WEBPACK_IMPORTED_MODULE_71__["MatrixRow"]; });
+/* harmony import */ var _react_components_question_error__WEBPACK_IMPORTED_MODULE_71__ = __webpack_require__(/*! ../react/components/question-error */ "./src/react/components/question-error.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "QuestionErrorComponent", function() { return _react_components_question_error__WEBPACK_IMPORTED_MODULE_71__["QuestionErrorComponent"]; });
 
-/* harmony import */ var _react_components_skeleton__WEBPACK_IMPORTED_MODULE_72__ = __webpack_require__(/*! ../react/components/skeleton */ "./src/react/components/skeleton.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Skeleton", function() { return _react_components_skeleton__WEBPACK_IMPORTED_MODULE_72__["Skeleton"]; });
+/* harmony import */ var _react_components_matrix_row__WEBPACK_IMPORTED_MODULE_72__ = __webpack_require__(/*! ../react/components/matrix/row */ "./src/react/components/matrix/row.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MatrixRow", function() { return _react_components_matrix_row__WEBPACK_IMPORTED_MODULE_72__["MatrixRow"]; });
 
-/* harmony import */ var _react_components_notifier__WEBPACK_IMPORTED_MODULE_73__ = __webpack_require__(/*! ../react/components/notifier */ "./src/react/components/notifier.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "NotifierComponent", function() { return _react_components_notifier__WEBPACK_IMPORTED_MODULE_73__["NotifierComponent"]; });
+/* harmony import */ var _react_components_skeleton__WEBPACK_IMPORTED_MODULE_73__ = __webpack_require__(/*! ../react/components/skeleton */ "./src/react/components/skeleton.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Skeleton", function() { return _react_components_skeleton__WEBPACK_IMPORTED_MODULE_73__["Skeleton"]; });
 
-/* harmony import */ var _react_components_components_container__WEBPACK_IMPORTED_MODULE_74__ = __webpack_require__(/*! ../react/components/components-container */ "./src/react/components/components-container.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ComponentsContainer", function() { return _react_components_components_container__WEBPACK_IMPORTED_MODULE_74__["ComponentsContainer"]; });
+/* harmony import */ var _react_components_notifier__WEBPACK_IMPORTED_MODULE_74__ = __webpack_require__(/*! ../react/components/notifier */ "./src/react/components/notifier.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "NotifierComponent", function() { return _react_components_notifier__WEBPACK_IMPORTED_MODULE_74__["NotifierComponent"]; });
 
-/* harmony import */ var _react_components_character_counter__WEBPACK_IMPORTED_MODULE_75__ = __webpack_require__(/*! ../react/components/character-counter */ "./src/react/components/character-counter.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CharacterCounterComponent", function() { return _react_components_character_counter__WEBPACK_IMPORTED_MODULE_75__["CharacterCounterComponent"]; });
+/* harmony import */ var _react_components_components_container__WEBPACK_IMPORTED_MODULE_75__ = __webpack_require__(/*! ../react/components/components-container */ "./src/react/components/components-container.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ComponentsContainer", function() { return _react_components_components_container__WEBPACK_IMPORTED_MODULE_75__["ComponentsContainer"]; });
 
-/* harmony import */ var _react_components_header__WEBPACK_IMPORTED_MODULE_76__ = __webpack_require__(/*! ../react/components/header */ "./src/react/components/header.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HeaderMobile", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_76__["HeaderMobile"]; });
+/* harmony import */ var _react_components_character_counter__WEBPACK_IMPORTED_MODULE_76__ = __webpack_require__(/*! ../react/components/character-counter */ "./src/react/components/character-counter.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CharacterCounterComponent", function() { return _react_components_character_counter__WEBPACK_IMPORTED_MODULE_76__["CharacterCounterComponent"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HeaderCell", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_76__["HeaderCell"]; });
+/* harmony import */ var _react_components_header__WEBPACK_IMPORTED_MODULE_77__ = __webpack_require__(/*! ../react/components/header */ "./src/react/components/header.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HeaderMobile", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_77__["HeaderMobile"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Header", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_76__["Header"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HeaderCell", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_77__["HeaderCell"]; });
 
-/* harmony import */ var _react_string_viewer__WEBPACK_IMPORTED_MODULE_77__ = __webpack_require__(/*! ../react/string-viewer */ "./src/react/string-viewer.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyLocStringViewer", function() { return _react_string_viewer__WEBPACK_IMPORTED_MODULE_77__["SurveyLocStringViewer"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Header", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_77__["Header"]; });
 
-/* harmony import */ var _react_string_editor__WEBPACK_IMPORTED_MODULE_78__ = __webpack_require__(/*! ../react/string-editor */ "./src/react/string-editor.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyLocStringEditor", function() { return _react_string_editor__WEBPACK_IMPORTED_MODULE_78__["SurveyLocStringEditor"]; });
+/* harmony import */ var _react_string_viewer__WEBPACK_IMPORTED_MODULE_78__ = __webpack_require__(/*! ../react/string-viewer */ "./src/react/string-viewer.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyLocStringViewer", function() { return _react_string_viewer__WEBPACK_IMPORTED_MODULE_78__["SurveyLocStringViewer"]; });
 
-/* harmony import */ var _react_components_loading_indicator__WEBPACK_IMPORTED_MODULE_79__ = __webpack_require__(/*! ../react/components/loading-indicator */ "./src/react/components/loading-indicator.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "LoadingIndicatorComponent", function() { return _react_components_loading_indicator__WEBPACK_IMPORTED_MODULE_79__["LoadingIndicatorComponent"]; });
+/* harmony import */ var _react_string_editor__WEBPACK_IMPORTED_MODULE_79__ = __webpack_require__(/*! ../react/string-editor */ "./src/react/string-editor.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyLocStringEditor", function() { return _react_string_editor__WEBPACK_IMPORTED_MODULE_79__["SurveyLocStringEditor"]; });
 
-/* harmony import */ var _react_svgbundle__WEBPACK_IMPORTED_MODULE_80__ = __webpack_require__(/*! ../react/svgbundle */ "./src/react/svgbundle.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SvgBundleComponent", function() { return _react_svgbundle__WEBPACK_IMPORTED_MODULE_80__["SvgBundleComponent"]; });
+/* harmony import */ var _react_components_loading_indicator__WEBPACK_IMPORTED_MODULE_80__ = __webpack_require__(/*! ../react/components/loading-indicator */ "./src/react/components/loading-indicator.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "LoadingIndicatorComponent", function() { return _react_components_loading_indicator__WEBPACK_IMPORTED_MODULE_80__["LoadingIndicatorComponent"]; });
+
+/* harmony import */ var _react_svgbundle__WEBPACK_IMPORTED_MODULE_81__ = __webpack_require__(/*! ../react/svgbundle */ "./src/react/svgbundle.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SvgBundleComponent", function() { return _react_svgbundle__WEBPACK_IMPORTED_MODULE_81__["SvgBundleComponent"]; });
 
 // react
 
@@ -3365,6 +3384,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 
 
 //Uncomment to include the "date" question type.
@@ -3377,7 +3397,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!*********************************!*\
   !*** ./src/entries/react-ui.ts ***!
   \*********************************/
-/*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent, SurveyModel, SurveyWindowModel, settings, surveyLocalization, surveyStrings, Model, ResponsivityManager, VerticalResponsivityManager, unwrap */
+/*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, QuestionErrorComponent, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent, SurveyModel, SurveyWindowModel, settings, surveyLocalization, surveyStrings, Model, ResponsivityManager, VerticalResponsivityManager, unwrap */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3555,6 +3575,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyNavigationButton", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["SurveyNavigationButton"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "QuestionErrorComponent", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["QuestionErrorComponent"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MatrixRow", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["MatrixRow"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Skeleton", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["Skeleton"]; });
@@ -3608,7 +3630,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.139", "survey-react-ui");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.10.2", "survey-react-ui");
 
 
 /***/ }),
@@ -10526,11 +10548,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)) {
@@ -11580,6 +11601,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",
@@ -13441,6 +13463,7 @@ var MatrixRow = /** @class */ (function (_super) {
     __extends(MatrixRow, _super);
     function MatrixRow(props) {
         var _this = _super.call(this, props) || this;
+        _this.root = react__WEBPACK_IMPORTED_MODULE_0___default.a.createRef();
         _this.onPointerDownHandler = function (event) {
             _this.parentMatrix.onPointerDown(event.nativeEvent, _this.model.row);
         };
@@ -13463,12 +13486,35 @@ var MatrixRow = /** @class */ (function (_super) {
     MatrixRow.prototype.getStateElement = function () {
         return this.model;
     };
+    MatrixRow.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        if (this.root.current) {
+            this.model.setRootElement(this.root.current);
+        }
+    };
+    MatrixRow.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        this.model.setRootElement(undefined);
+    };
+    MatrixRow.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+        if (!_super.prototype.shouldComponentUpdate.call(this, nextProps, nextState))
+            return false;
+        if (nextProps.model !== this.model) {
+            if (nextProps.element) {
+                nextProps.element.setRootElement(this.root.current);
+            }
+            if (this.model) {
+                this.model.setRootElement(undefined);
+            }
+        }
+        return true;
+    };
     MatrixRow.prototype.render = function () {
         var _this = this;
         var model = this.model;
         if (!model.visible)
             return null;
-        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("tr", { className: model.className, "data-sv-drop-target-matrix-row": model.row && model.row.id, onPointerDown: function (event) { return _this.onPointerDownHandler(event); } }, this.props.children));
+        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("tr", { ref: this.root, className: model.className, "data-sv-drop-target-matrix-row": model.row && model.row.id, onPointerDown: function (event) { return _this.onPointerDownHandler(event); } }, this.props.children));
     };
     return MatrixRow;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_2__["SurveyElementBase"]));
@@ -13962,7 +14008,6 @@ var PopupContainer = /** @class */ (function (_super) {
     __extends(PopupContainer, _super);
     function PopupContainer(props) {
         var _this = _super.call(this, props) || this;
-        _this.prevIsVisible = false;
         _this.handleKeydown = function (event) {
             _this.model.onKeyDown(event);
         };
@@ -13983,10 +14028,9 @@ var PopupContainer = /** @class */ (function (_super) {
     };
     PopupContainer.prototype.componentDidUpdate = function (prevProps, prevState) {
         _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
-        if (!this.prevIsVisible && this.model.isVisible) {
+        if (!this.model.isPositionSet && this.model.isVisible) {
             this.model.updateOnShowing();
         }
-        this.prevIsVisible = this.model.isVisible;
     };
     PopupContainer.prototype.renderContainer = function (popupBaseViewModel) {
         var _this = this;
@@ -14079,6 +14123,59 @@ survey_core__WEBPACK_IMPORTED_MODULE_2__["settings"].showModal = showModal;
 survey_core__WEBPACK_IMPORTED_MODULE_2__["settings"].showDialog = showDialog;
 
 
+/***/ }),
+
+/***/ "./src/react/components/question-error.tsx":
+/*!*************************************************!*\
+  !*** ./src/react/components/question-error.tsx ***!
+  \*************************************************/
+/*! exports provided: QuestionErrorComponent */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "QuestionErrorComponent", function() { return QuestionErrorComponent; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../element-factory */ "./src/react/element-factory.tsx");
+/* harmony import */ var _string_viewer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../string-viewer */ "./src/react/string-viewer.tsx");
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+
+
+
+var QuestionErrorComponent = /** @class */ (function (_super) {
+    __extends(QuestionErrorComponent, _super);
+    function QuestionErrorComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    QuestionErrorComponent.prototype.render = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null,
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: this.props.cssClasses.error.icon || undefined, "aria-hidden": "true" }),
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: this.props.cssClasses.error.item || undefined },
+                react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_string_viewer__WEBPACK_IMPORTED_MODULE_2__["SurveyLocStringViewer"], { locStr: this.props.error.locText }))));
+    };
+    return QuestionErrorComponent;
+}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));
+
+_element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.registerElement("sv-question-error", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(QuestionErrorComponent, props);
+});
+
+
 /***/ }),
 
 /***/ "./src/react/components/rating/rating-dropdown-item.tsx":
@@ -14194,7 +14291,7 @@ var RatingItemSmiley = /** @class */ (function (_super) {
     RatingItemSmiley.prototype.render = function () {
         var _this = this;
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { onMouseDown: this.handleOnMouseDown, style: this.question.getItemStyle(this.item.itemValue, this.item.highlight), className: this.question.getItemClass(this.item.itemValue), onMouseOver: function (e) { return _this.question.onItemMouseIn(_this.item); }, onMouseOut: function (e) { return _this.question.onItemMouseOut(_this.item); } },
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.name, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.isDisplayMode, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.isDisplayMode, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { size: "auto", iconName: this.question.getItemSmileyIconName(this.item.itemValue), title: this.item.text })));
     };
     return RatingItemSmiley;
@@ -14249,7 +14346,7 @@ var RatingItemStar = /** @class */ (function (_super) {
     RatingItemStar.prototype.render = function () {
         var _this = this;
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { onMouseDown: this.handleOnMouseDown, className: this.question.getItemClass(this.item.itemValue), onMouseOver: function (e) { return _this.question.onItemMouseIn(_this.item); }, onMouseOut: function (e) { return _this.question.onItemMouseOut(_this.item); } },
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.name, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.isDisplayMode, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.isDisplayMode, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { className: "sv-star", size: "auto", iconName: this.question.itemStarIcon, title: this.item.text }),
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { className: "sv-star-2", size: "auto", iconName: this.question.itemStarIconAlt, title: this.item.text })));
     };
@@ -14341,7 +14438,7 @@ var RatingItem = /** @class */ (function (_super) {
     RatingItem.prototype.render = function () {
         var itemText = this.renderLocString(this.item.locText);
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { onMouseDown: this.handleOnMouseDown, className: this.question.getItemClassByText(this.item.itemValue, this.item.text) },
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.name, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.isDisplayMode, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.isDisplayMode, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: this.question.cssClasses.itemText }, itemText)));
     };
     RatingItem.prototype.componentDidMount = function () {
@@ -15452,7 +15549,7 @@ var SurveyElementHeader = /** @class */ (function (_super) {
         var description = element.hasDescriptionUnderTitle
             ? _reactquestion_element__WEBPACK_IMPORTED_MODULE_3__["SurveyElementBase"].renderQuestionDescription(this.element)
             : null;
-        var additionalTitleToolbarElement = !!element.additionalTitleToolbar ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_1__["SurveyActionBar"], { model: element.additionalTitleToolbar }) : null;
+        var additionalTitleToolbarElement = element.hasAdditionalTitleToolbar ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_1__["SurveyActionBar"], { model: element.additionalTitleToolbar }) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: element.cssHeader, onClick: function (e) { return element.clickTitleFunction && element.clickTitleFunction(e.nativeEvent); } },
             title,
             description,
@@ -16529,6 +16626,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _reactSurveyNavigationBase__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactSurveyNavigationBase */ "./src/react/reactSurveyNavigationBase.tsx");
 /* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
+/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -16548,6 +16646,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var SurveyProgressButtons = /** @class */ (function (_super) {
     __extends(SurveyProgressButtons, _super);
     function SurveyProgressButtons(props) {
@@ -16607,12 +16706,13 @@ var SurveyProgressButtons = /** @class */ (function (_super) {
     };
     SurveyProgressButtons.prototype.renderListElement = function (page, index) {
         var _this = this;
+        var text = _reactquestion_element__WEBPACK_IMPORTED_MODULE_4__["SurveyElementBase"].renderLocString(page.locNavigationTitle);
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("li", { key: "listelement" + index, className: this.model.getListElementCss(index), onClick: this.model.isListElementClickable(index)
                 ? function () { return _this.model.clickListElement(page); }
                 : undefined, "data-page-number": this.model.getItemNumber(page) },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsConnector }),
             this.state.canShowItemTitles ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null,
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsPageTitle, title: page.renderedNavigationTitle }, page.renderedNavigationTitle),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsPageTitle, title: page.renderedNavigationTitle }, text),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsPageDescription, title: page.navigationDescription }, page.navigationDescription)) : null,
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsButton },
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsButtonBackground }),
@@ -16944,14 +17044,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _page__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./page */ "./src/react/page.tsx");
 /* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
-/* harmony import */ var _string_viewer__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./string-viewer */ "./src/react/string-viewer.tsx");
-/* harmony import */ var _components_survey_header_survey_header__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/survey-header/survey-header */ "./src/react/components/survey-header/survey-header.tsx");
-/* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./reactquestion_factory */ "./src/react/reactquestion_factory.tsx");
-/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
-/* harmony import */ var _components_brand_info__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./components/brand-info */ "./src/react/components/brand-info.tsx");
-/* harmony import */ var _components_notifier__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./components/notifier */ "./src/react/components/notifier.tsx");
-/* harmony import */ var _components_components_container__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./components/components-container */ "./src/react/components/components-container.tsx");
-/* harmony import */ var _svgbundle__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./svgbundle */ "./src/react/svgbundle.tsx");
+/* harmony import */ var _components_survey_header_survey_header__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/survey-header/survey-header */ "./src/react/components/survey-header/survey-header.tsx");
+/* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./reactquestion_factory */ "./src/react/reactquestion_factory.tsx");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
+/* harmony import */ var _components_brand_info__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./components/brand-info */ "./src/react/components/brand-info.tsx");
+/* harmony import */ var _components_notifier__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./components/notifier */ "./src/react/components/notifier.tsx");
+/* harmony import */ var _components_components_container__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./components/components-container */ "./src/react/components/components-container.tsx");
+/* harmony import */ var _svgbundle__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./svgbundle */ "./src/react/svgbundle.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -16989,7 +17088,6 @@ var __assign = (undefined && undefined.__assign) || function () {
 
 
 
-
 var Survey = /** @class */ (function (_super) {
     __extends(Survey, _super);
     function Survey(props) {
@@ -17077,7 +17175,7 @@ var Survey = /** @class */ (function (_super) {
             renderResult = this.renderSurvey();
         }
         var backgroundImage = !!this.survey.backgroundImage ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.rootBackgroundImage, style: this.survey.backgroundImageStyle }) : null;
-        var header = this.survey.headerView === "basic" ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_survey_header_survey_header__WEBPACK_IMPORTED_MODULE_5__["SurveyHeader"], { survey: this.survey }) : null;
+        var header = this.survey.headerView === "basic" ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_survey_header_survey_header__WEBPACK_IMPORTED_MODULE_4__["SurveyHeader"], { survey: this.survey }) : null;
         var onSubmit = function (event) {
             event.preventDefault();
         };
@@ -17088,18 +17186,18 @@ var Survey = /** @class */ (function (_super) {
         var rootCss = this.survey.getRootCss();
         var cssClasses = this.rootNodeClassName ? this.rootNodeClassName + " " + rootCss : rootCss;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.rootNodeId, ref: this.rootRef, className: cssClasses, style: this.survey.themeVariables },
-            this.survey.needRenderIcons ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_svgbundle__WEBPACK_IMPORTED_MODULE_11__["SvgBundleComponent"], null) : null,
+            this.survey.needRenderIcons ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_svgbundle__WEBPACK_IMPORTED_MODULE_10__["SvgBundleComponent"], null) : null,
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.survey.wrapperFormCss },
                 backgroundImage,
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("form", { onSubmit: onSubmit },
                     customHeader,
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.container },
                         header,
-                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_10__["ComponentsContainer"], { survey: this.survey, container: "header", needRenderWrapper: false }),
+                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_9__["ComponentsContainer"], { survey: this.survey, container: "header", needRenderWrapper: false }),
                         renderResult,
-                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_10__["ComponentsContainer"], { survey: this.survey, container: "footer", needRenderWrapper: false }))),
-                this.survey.showBrandInfo ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_brand_info__WEBPACK_IMPORTED_MODULE_8__["BrandInfo"], null) : null,
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_notifier__WEBPACK_IMPORTED_MODULE_9__["NotifierComponent"], { notifier: this.survey.notifier }))));
+                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_9__["ComponentsContainer"], { survey: this.survey, container: "footer", needRenderWrapper: false }))),
+                this.survey.showBrandInfo ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_brand_info__WEBPACK_IMPORTED_MODULE_7__["BrandInfo"], null) : null,
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_notifier__WEBPACK_IMPORTED_MODULE_8__["NotifierComponent"], { notifier: this.survey.notifier }))));
     };
     Survey.prototype.renderElement = function () {
         return this.doRender();
@@ -17120,7 +17218,7 @@ var Survey = /** @class */ (function (_super) {
         var htmlValue = { __html: this.survey.processedCompletedHtml };
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null,
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { dangerouslySetInnerHTML: htmlValue, className: this.survey.completedCss }),
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_10__["ComponentsContainer"], { survey: this.survey, container: "completePage", needRenderWrapper: false })));
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_9__["ComponentsContainer"], { survey: this.survey, container: "completePage", needRenderWrapper: false })));
     };
     Survey.prototype.renderCompletedBefore = function () {
         var htmlValue = { __html: this.survey.processedCompletedBeforeHtml };
@@ -17142,14 +17240,14 @@ var Survey = /** @class */ (function (_super) {
             style.maxWidth = this.survey.renderedWidth;
         }
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.survey.bodyContainerCss },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_10__["ComponentsContainer"], { survey: this.survey, container: "left" }),
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_9__["ComponentsContainer"], { survey: this.survey, container: "left" }),
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: "sv-components-column sv-components-column--expandable" },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_10__["ComponentsContainer"], { survey: this.survey, container: "center" }),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_9__["ComponentsContainer"], { survey: this.survey, container: "center" }),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: pageId, className: className, style: style },
-                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_10__["ComponentsContainer"], { survey: this.survey, container: "contentTop" }),
+                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_9__["ComponentsContainer"], { survey: this.survey, container: "contentTop" }),
                     activePage,
-                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_10__["ComponentsContainer"], { survey: this.survey, container: "contentBottom" }))),
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_10__["ComponentsContainer"], { survey: this.survey, container: "right" })));
+                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_9__["ComponentsContainer"], { survey: this.survey, container: "contentBottom" }))),
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_9__["ComponentsContainer"], { survey: this.survey, container: "right" })));
     };
     Survey.prototype.renderPage = function (page) {
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_page__WEBPACK_IMPORTED_MODULE_2__["SurveyPage"], { survey: this.survey, page: page, css: this.css, creator: this }));
@@ -17230,17 +17328,14 @@ var Survey = /** @class */ (function (_super) {
     };
     //ISurveyCreator
     Survey.prototype.createQuestionElement = function (question) {
-        return _reactquestion_factory__WEBPACK_IMPORTED_MODULE_6__["ReactQuestionFactory"].Instance.createQuestion(question.isDefaultRendering() ? question.getTemplate() : question.getComponentName(), {
+        return _reactquestion_factory__WEBPACK_IMPORTED_MODULE_5__["ReactQuestionFactory"].Instance.createQuestion(question.isDefaultRendering() ? question.getTemplate() : question.getComponentName(), {
             question: question,
             isDisplayMode: question.isInputReadOnly,
             creator: this,
         });
     };
-    Survey.prototype.renderError = function (key, error, cssClasses) {
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { key: key },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: cssClasses.error.icon || undefined, "aria-hidden": "true" }),
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: cssClasses.error.item || undefined },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_string_viewer__WEBPACK_IMPORTED_MODULE_4__["SurveyLocStringViewer"], { locStr: error.locText }))));
+    Survey.prototype.renderError = function (key, error, cssClasses, element) {
+        return _element_factory__WEBPACK_IMPORTED_MODULE_6__["ReactElementFactory"].Instance.createElement(this.survey.questionErrorComponent, { key: key, error: error, cssClasses: cssClasses, element: element });
     };
     Survey.prototype.questionTitleLocation = function () {
         return this.survey.questionTitleLocation;
@@ -17251,7 +17346,7 @@ var Survey = /** @class */ (function (_super) {
     return Survey;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_3__["SurveyElementBase"]));
 
-_element_factory__WEBPACK_IMPORTED_MODULE_7__["ReactElementFactory"].Instance.registerElement("survey", function (props) {
+_element_factory__WEBPACK_IMPORTED_MODULE_6__["ReactElementFactory"].Instance.registerElement("survey", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](Survey, props);
 });
 function attachKey2click(element, viewModel, options) {
@@ -17603,7 +17698,7 @@ var SurveyElementErrors = /** @class */ (function (_super) {
         var errors = [];
         for (var i = 0; i < this.element.errors.length; i++) {
             var key = "error" + i;
-            errors.push(this.creator.renderError(key, this.element.errors[i], this.cssClasses));
+            errors.push(this.creator.renderError(key, this.element.errors[i], this.cssClasses, this.element));
         }
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { role: "alert", "aria-live": "polite", className: this.element.cssError, id: this.id }, errors));
     };
@@ -19646,7 +19741,7 @@ var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
     SurveyQuestionMatrixDropdownBase.prototype.renderRows = function () {
         var cssClasses = this.question.cssClasses;
         var rows = [];
-        var renderedRows = this.question.renderedTable.rows;
+        var renderedRows = this.question.renderedTable.renderedRows;
         for (var i = 0; i < renderedRows.length; i++) {
             rows.push(this.renderRow(renderedRows[i].id, renderedRows[i], cssClasses));
         }
@@ -20231,19 +20326,11 @@ var SurveyQuestionPanelDynamic = /** @class */ (function (_super) {
         });
     };
     SurveyQuestionPanelDynamic.prototype.renderElement = function () {
+        var _this = this;
         var panels = [];
-        if (this.question.isRenderModeList) {
-            for (var i = 0; i < this.question.visiblePanels.length; i++) {
-                var panel = this.question.visiblePanels[i];
-                panels.push(react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionPanelDynamicItem, { key: panel.id, element: panel, question: this.question, index: i, cssClasses: this.question.cssClasses, isDisplayMode: this.isDisplayMode, creator: this.creator }));
-            }
-        }
-        else {
-            if (this.question.currentPanel != null) {
-                var panel = this.question.currentPanel;
-                panels.push(react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionPanelDynamicItem, { key: this.question.currentIndex, element: panel, question: this.question, index: this.question.currentIndex, cssClasses: this.question.cssClasses, isDisplayMode: this.isDisplayMode, creator: this.creator }));
-            }
-        }
+        this.question.renderedPanels.forEach(function (panel, index) {
+            panels.push(react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionPanelDynamicItem, { key: panel.id, element: panel, question: _this.question, index: index, cssClasses: _this.question.cssClasses, isDisplayMode: _this.isDisplayMode, creator: _this.creator }));
+        });
         var btnAdd = this.question.isRenderModeList && this.question["showLegacyNavigation"]
             ? this.renderAddRowButton()
             : null;
@@ -20253,13 +20340,12 @@ var SurveyQuestionPanelDynamic = /** @class */ (function (_super) {
         var navBottom = this.question.isProgressBottomShowing
             ? this.renderNavigator()
             : null;
-        var style = {};
         var navV2 = this.renderNavigatorV2();
         var noEntriesPlaceholder = this.renderPlaceholder();
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.root },
             noEntriesPlaceholder,
             navTop,
-            panels,
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.panelsContainer }, panels),
             navBottom,
             btnAdd,
             navV2));
@@ -20708,6 +20794,10 @@ var SurveyQuestionRanking = /** @class */ (function (_super) {
                 event.persist();
                 //event.preventDefault();
                 _this.question.handlePointerDown.call(_this.question, event, item, event.currentTarget);
+            }, function (event) {
+                event.persist();
+                //event.preventDefault();
+                _this.question.handlePointerUp.call(_this.question, event, item, event.currentTarget);
             }, this_1.question.cssClasses, this_1.question.getItemClass(item), this_1.question, unrankedItem));
         };
         var this_1 = this;
@@ -20716,13 +20806,13 @@ var SurveyQuestionRanking = /** @class */ (function (_super) {
         }
         return items;
     };
-    SurveyQuestionRanking.prototype.renderItem = function (item, i, handleKeydown, handlePointerDown, cssClasses, itemClass, question, unrankedItem) {
+    SurveyQuestionRanking.prototype.renderItem = function (item, i, handleKeydown, handlePointerDown, handlePointerUp, cssClasses, itemClass, question, unrankedItem) {
         var key = "id-" + item.renderedId;
         var text = this.renderLocString(item.locText);
         var index = i;
         var indexText = this.question.getNumberByIndex(index);
         var tabIndex = this.question.getItemTabIndex(item);
-        var renderedItem = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionRankingItem, { key: item.value, text: text, index: index, indexText: indexText, itemTabIndex: tabIndex, handleKeydown: handleKeydown, handlePointerDown: handlePointerDown, cssClasses: cssClasses, itemClass: itemClass, question: question, unrankedItem: unrankedItem, item: item }));
+        var renderedItem = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionRankingItem, { key: item.value, text: text, index: index, indexText: indexText, itemTabIndex: tabIndex, handleKeydown: handleKeydown, handlePointerDown: handlePointerDown, handlePointerUp: handlePointerUp, cssClasses: cssClasses, itemClass: itemClass, question: question, unrankedItem: unrankedItem, item: item }));
         var survey = this.question.survey;
         var wrappedItem = null;
         if (!!survey) {
@@ -20773,6 +20863,13 @@ var SurveyQuestionRankingItem = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SurveyQuestionRankingItem.prototype, "handlePointerUp", {
+        get: function () {
+            return this.props.handlePointerUp;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(SurveyQuestionRankingItem.prototype, "cssClasses", {
         get: function () {
             return this.props.cssClasses;
@@ -20820,7 +20917,7 @@ var SurveyQuestionRankingItem = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("use", { xlinkHref: this.question.dashSvgIcon })));
     };
     SurveyQuestionRankingItem.prototype.renderElement = function () {
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { tabIndex: this.itemTabIndex, className: this.itemClass, onKeyDown: this.handleKeydown, onPointerDown: this.handlePointerDown, "data-sv-drop-target-ranking-item": this.index },
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { tabIndex: this.itemTabIndex, className: this.itemClass, onKeyDown: this.handleKeydown, onPointerDown: this.handlePointerDown, onPointerUp: this.handlePointerUp, "data-sv-drop-target-ranking-item": this.index },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { tabIndex: -1, style: { outline: "none" } },
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.cssClasses.itemGhostNode }),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.cssClasses.itemContent },
@@ -22922,7 +23019,6 @@ var SurveyElement = /** @class */ (function (_super) {
                 }
             }
         }, function () { return _this.renderedIsExpanded; });
-        _this.animationAllowedValue = true;
         _this.name = name;
         _this.createNewArray("errors");
         _this.createNewArray("titleActions");
@@ -22958,7 +23054,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;
@@ -22977,7 +23073,7 @@ var SurveyElement = /** @class */ (function (_super) {
             }
         }
         if (needScroll) {
-            el.scrollIntoView();
+            el.scrollIntoView(scrollIntoViewOptions);
         }
         return needScroll;
     };
@@ -23961,6 +24057,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();
@@ -23986,18 +24089,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";
@@ -24064,12 +24174,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", {
@@ -24082,16 +24192,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) {
@@ -24240,7 +24343,7 @@ surveyLocalization.localeNames["en"] = "english";
 /*!********************************!*\
   !*** ./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";
@@ -24248,8 +24351,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 () {
@@ -24278,6 +24383,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) {
@@ -24295,6 +24403,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;
@@ -24304,7 +24420,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) {
@@ -24314,7 +24430,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);
@@ -24324,40 +24440,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(); });
@@ -24371,26 +24498,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));
@@ -24400,41 +24529,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));
@@ -24455,6 +24583,7 @@ var AnimationProperty = /** @class */ (function () {
             this._debouncedSync.run(newValue);
         }
         else {
+            this.cancel();
             this.update(newValue);
         }
     };
@@ -24464,6 +24593,7 @@ var AnimationProperty = /** @class */ (function () {
     };
     return AnimationProperty;
 }());
+
 var AnimationBoolean = /** @class */ (function (_super) {
     __extends(AnimationBoolean, _super);
     function AnimationBoolean() {
@@ -24476,12 +24606,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 {
@@ -24503,19 +24633,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));
+
 
 
 /***/ }),