survey-core 1.9.135 → 1.9.137

package/survey.core.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.135
+ * surveyjs - Survey JavaScript library v1.9.137
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -2222,6 +2222,8 @@ 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) {
@@ -2283,7 +2285,7 @@ var Base = /** @class */ (function () {
             return;
         for (var i = 0; i < this.onPropChangeFunctions.length; i++) {
             if (this.onPropChangeFunctions[i].name == name)
-                this.onPropChangeFunctions[i].func(newValue);
+                this.onPropChangeFunctions[i].func(newValue, arrayChanges);
         }
     };
     Base.prototype.onBindingChanged = function (oldValue, newValue) {
@@ -5419,9 +5421,13 @@ var defaultV2Css = {
         next: "sd-navigation__next-btn",
         start: "sd-navigation__start-btn",
         preview: "sd-navigation__preview-btn",
-        edit: "",
+        edit: "sd-btn sd-btn--small",
     },
     panel: {
+        contentFadeIn: "sd-element__content--fade-in",
+        contentFadeOut: "sd-element__content--fade-out",
+        fadeIn: "sd-element-wrapper--fade-in",
+        fadeOut: "sd-element-wrapper--fade-out",
         asPage: "sd-panel--as-page",
         number: "sd-element__num",
         title: "sd-title sd-element__title sd-panel__title",
@@ -5436,7 +5442,7 @@ var defaultV2Css = {
         description: "sd-description sd-panel__description",
         container: "sd-element sd-element--complex sd-panel sd-row__panel",
         withFrame: "sd-element--with-frame",
-        content: "sd-panel__content",
+        content: "sd-element__content sd-panel__content",
         icon: "sd-panel__icon",
         iconExpanded: "sd-panel__icon--expanded",
         footer: "sd-panel__footer",
@@ -5444,6 +5450,8 @@ var defaultV2Css = {
         header: "sd-panel__header sd-element__header sd-element__header--location-top",
         collapsed: "sd-element--collapsed",
         expanded: "sd-element--expanded",
+        expandable: "sd-element--expandable",
+        expandableAnimating: "sd-elemenet--expandable--animating",
         nested: "sd-element--nested sd-element--nested-with-borders",
         invisible: "sd-element--invisible",
         navigationButton: "",
@@ -5503,6 +5511,9 @@ var defaultV2Css = {
     progressButtonsContainerCenter: "sd-progress-buttons__container-center",
     progressButtonsContainer: "sd-progress-buttons__container",
     progressButtonsConnector: "sd-progress-buttons__connector",
+    progressButtonsButton: "sd-progress-buttons__button",
+    progressButtonsButtonBackground: "sd-progress-buttons__button-background",
+    progressButtonsButtonContent: "sd-progress-buttons__button-content",
     progressButtonsHeader: "sd-progress-buttons__header",
     progressButtonsFooter: "sd-progress-buttons__footer",
     progressButtonsImageButtonLeft: "sd-progress-buttons__image-button-left",
@@ -5528,8 +5539,14 @@ var defaultV2Css = {
     row: "sd-row sd-clearfix",
     rowMultiple: "sd-row--multiple",
     rowCompact: "sd-row--compact",
+    rowFadeIn: "sd-row--fade-in",
+    rowFadeOut: "sd-row--fade-out",
     pageRow: "sd-page__row",
     question: {
+        contentFadeIn: "sd-element__content--fade-in",
+        contentFadeOut: "sd-element__content--fade-out",
+        fadeIn: "sd-element-wrapper--fade-in",
+        fadeOut: "sd-element-wrapper--fade-out",
         mainRoot: "sd-element sd-question sd-row__question",
         flowRoot: "sd-element sd-question sd-row__question sd-row__question--flow",
         withFrame: "sd-element--with-frame",
@@ -5539,7 +5556,7 @@ var defaultV2Css = {
         headerLeft: "sd-question__header--location--left",
         headerTop: "sd-question__header--location-top sd-element__header--location-top",
         headerBottom: "sd-question__header--location--bottom",
-        content: "sd-question__content",
+        content: "sd-element__content sd-question__content",
         contentSupportContainerQueries: "sd-question__content--support-container-queries",
         contentLeft: "sd-question__content--left",
         titleNumInline: "sd-element__title--num-inline",
@@ -5572,6 +5589,8 @@ var defaultV2Css = {
         hasErrorTop: "sd-question--error-top",
         hasErrorBottom: "sd-question--error-bottom",
         collapsed: "sd-element--collapsed",
+        expandable: "sd-element--expandable",
+        expandableAnimating: "sd-elemenet--expandable--animating",
         expanded: "sd-element--expanded",
         nested: "sd-element--nested",
         invisible: "sd-element--invisible",
@@ -6768,8 +6787,6 @@ var DragDropChoices = /** @class */ (function (_super) {
     DragDropChoices.prototype.afterDragOver = function (dropTargetNode) {
         if (this.isDropTargetDoesntChanged(this.isBottom))
             return;
-        if (this.dropTarget === this.draggedElement)
-            return;
         var choices = this.getVisibleChoices();
         var dropTargetIndex = choices.indexOf(this.dropTarget);
         var draggedElementIndex = choices.indexOf(this.draggedElement);
@@ -6937,7 +6954,7 @@ var DragDropCore = /** @class */ (function () {
         this.domAdapter.draggedElementShortcut.style.display = "none";
         if (!_global_variables_utils__WEBPACK_IMPORTED_MODULE_2__["DomDocumentHelper"].isAvailable())
             return null;
-        var dragOverNode = _global_variables_utils__WEBPACK_IMPORTED_MODULE_2__["DomDocumentHelper"].getDocument().elementFromPoint(clientX, clientY);
+        var dragOverNode = this.domAdapter.documentOrShadowRoot.elementFromPoint(clientX, clientY);
         // this.domAdapter.draggedElementShortcut.hidden = false;
         this.domAdapter.draggedElementShortcut.style.display = displayProp || "block";
         if (!dragOverNode)
@@ -6994,7 +7011,9 @@ var DragDropCore = /** @class */ (function () {
             return;
         this.isBottom = null; //TODO need for property change trigger with guarantee but it would be better not to watch on isBottom property but have some event like onValidTargetDragOver
         this.isBottom = isBottom;
-        this.afterDragOver(dropTargetNode);
+        if (this.draggedElement != this.dropTarget) {
+            this.afterDragOver(dropTargetNode);
+        }
         this.prevDropTarget = this.dropTarget;
     };
     DragDropCore.prototype.drop = function () {
@@ -7124,10 +7143,17 @@ var DragDropDOMAdapter = /** @class */ (function () {
         };
         this.draggedElementShortcut = null;
     }
+    Object.defineProperty(DragDropDOMAdapter.prototype, "documentOrShadowRoot", {
+        get: function () {
+            return _settings__WEBPACK_IMPORTED_MODULE_2__["settings"].environment.root;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DragDropDOMAdapter.prototype, "rootElement", {
         get: function () {
             if (Object(_utils_utils__WEBPACK_IMPORTED_MODULE_0__["isShadowDOM"])(_settings__WEBPACK_IMPORTED_MODULE_2__["settings"].environment.root)) {
-                return _settings__WEBPACK_IMPORTED_MODULE_2__["settings"].environment.root.host;
+                return this.rootContainer || _settings__WEBPACK_IMPORTED_MODULE_2__["settings"].environment.root.host;
             }
             else {
                 return this.rootContainer || _settings__WEBPACK_IMPORTED_MODULE_2__["settings"].environment.root.documentElement || document.body;
@@ -7252,7 +7278,7 @@ var DragDropDOMAdapter = /** @class */ (function () {
         var displayProp = this.draggedElementShortcut.style.display;
         //this.draggedElementShortcut.hidden = true;
         this.draggedElementShortcut.style.display = "none";
-        var dragOverNode = document.elementFromPoint(clientX, clientY);
+        var dragOverNode = this.documentOrShadowRoot.elementFromPoint(clientX, clientY);
         //this.draggedElementShortcut.hidden = false;
         this.draggedElementShortcut.style.display = displayProp || "block";
         var scrollableParentNode = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_0__["findScrollableParent"])(dragOverNode);
@@ -7456,8 +7482,6 @@ var DragDropMatrixRows = /** @class */ (function (_super) {
         var _this = this;
         if (this.isDropTargetDoesntChanged(this.isBottom))
             return;
-        if (this.dropTarget === this.draggedElement)
-            return;
         var dropTargetIndex;
         var draggedElementIndex;
         var draggedRenderedRow;
@@ -7565,10 +7589,6 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
             var node = _this.domAdapter.draggedElementShortcut.querySelector(".sv-ranking-item");
             node.style.cursor = "not-allowed";
         };
-        _this.doDrop = function () {
-            _this.parentElement.setValue();
-            return _this.parentElement;
-        };
         return _this;
     }
     Object.defineProperty(DragDropRankingChoices.prototype, "draggedElementType", {
@@ -7671,6 +7691,10 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
         this.parentElement.currentDropTarget = this.draggedElement;
         _super.prototype.ghostPositionChanged.call(this);
     };
+    DragDropRankingChoices.prototype.doDrop = function () {
+        this.parentElement.setValue();
+        return this.parentElement;
+    };
     DragDropRankingChoices.prototype.clear = function () {
         if (!!this.parentElement) {
             this.parentElement.dropTargetNodeMove = null;
@@ -7695,7 +7719,8 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DragDropRankingSelectToRank", function() { return DragDropRankingSelectToRank; });
-/* harmony import */ var _ranking_choices__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ranking-choices */ "./src/dragdrop/ranking-choices.ts");
+/* harmony import */ var _itemvalue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../itemvalue */ "./src/itemvalue.ts");
+/* harmony import */ var _ranking_choices__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ranking-choices */ "./src/dragdrop/ranking-choices.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -7712,10 +7737,37 @@ var __extends = (undefined && undefined.__extends) || (function () {
     };
 })();
 
+
 var DragDropRankingSelectToRank = /** @class */ (function (_super) {
     __extends(DragDropRankingSelectToRank, _super);
     function DragDropRankingSelectToRank() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.selectToRank = function (questionModel, fromIndex, toIndex) {
+            var rankingChoices = [].concat(questionModel.rankingChoices);
+            var unRankingChoices = questionModel.unRankingChoices;
+            var item = unRankingChoices[fromIndex];
+            rankingChoices.splice(toIndex, 0, item);
+            _this.updateChoices(questionModel, rankingChoices);
+        };
+        _this.unselectFromRank = function (questionModel, fromIndex, toIndex) {
+            var rankingChoices = [].concat(questionModel.rankingChoices);
+            rankingChoices.splice(fromIndex, 1);
+            _this.updateChoices(questionModel, rankingChoices);
+        };
+        _this.reorderRankedItem = function (questionModel, fromIndex, toIndex, dropTargetNode) {
+            var rankingChoices = questionModel.rankingChoices;
+            var item = rankingChoices[fromIndex];
+            if (fromIndex == toIndex)
+                return;
+            questionModel.isValueSetByUser = true;
+            rankingChoices.splice(fromIndex, 1);
+            rankingChoices.splice(toIndex, 0, item);
+            questionModel.setPropertyValue("rankingChoices", rankingChoices);
+            if (dropTargetNode) {
+                _this.doUIEffects(dropTargetNode, fromIndex, toIndex);
+            }
+        };
+        return _this;
     }
     DragDropRankingSelectToRank.prototype.findDropTargetNodeByDragOverNode = function (dragOverNode) {
         if (dragOverNode.dataset.ranking === "from-container" || dragOverNode.dataset.ranking === "to-container") {
@@ -7769,18 +7821,34 @@ var DragDropRankingSelectToRank = /** @class */ (function (_super) {
     DragDropRankingSelectToRank.prototype.doRankBetween = function (dropTargetNode, fromChoicesArray, toChoicesArray, rankFunction) {
         var questionModel = this.parentElement;
         var _a = this.getIndixies(questionModel, fromChoicesArray, toChoicesArray), fromIndex = _a.fromIndex, toIndex = _a.toIndex;
-        rankFunction(questionModel, fromIndex, toIndex);
-        this.doUIEffects(dropTargetNode, fromIndex, toIndex);
+        rankFunction(questionModel, fromIndex, toIndex, dropTargetNode);
     };
     DragDropRankingSelectToRank.prototype.getIndixies = function (model, fromChoicesArray, toChoicesArray) {
         var fromIndex = fromChoicesArray.indexOf(this.draggedElement);
         var toIndex = toChoicesArray.indexOf(this.dropTarget);
         if (toIndex === -1) {
             var length_1 = model.value.length;
-            toIndex = fromChoicesArray === toChoicesArray ? length_1 - 1 : length_1;
+            toIndex = length_1;
+        }
+        else if (fromChoicesArray == toChoicesArray) {
+            if (!this.isBottom && fromIndex < toIndex)
+                toIndex--;
+            if (this.isBottom && fromIndex > toIndex)
+                toIndex++;
+        }
+        else if (fromChoicesArray != toChoicesArray) {
+            if (this.isBottom)
+                toIndex++;
         }
         return { fromIndex: fromIndex, toIndex: toIndex };
     };
+    DragDropRankingSelectToRank.prototype.calculateIsBottom = function (clientY, dropTargetNode) {
+        if (this.dropTarget instanceof _itemvalue__WEBPACK_IMPORTED_MODULE_0__["ItemValue"] && this.draggedElement !== this.dropTarget) {
+            var rect = dropTargetNode.getBoundingClientRect();
+            return clientY >= rect.y + rect.height / 2;
+        }
+        return _super.prototype.calculateIsBottom.call(this, clientY);
+    };
     DragDropRankingSelectToRank.prototype.doUIEffects = function (dropTargetNode, fromIndex, toIndex) {
         var questionModel = this.parentElement;
         var isDropToEmptyRankedContainer = this.dropTarget === "to-container" && questionModel.isEmpty();
@@ -7829,30 +7897,21 @@ var DragDropRankingSelectToRank = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    DragDropRankingSelectToRank.prototype.selectToRank = function (questionModel, fromIndex, toIndex) {
-        var rankingChoices = questionModel.rankingChoices;
-        var unRankingChoices = questionModel.unRankingChoices;
-        var item = unRankingChoices[fromIndex];
+    DragDropRankingSelectToRank.prototype.updateChoices = function (questionModel, rankingChoices) {
         questionModel.isValueSetByUser = true;
-        rankingChoices.splice(toIndex, 0, item);
-        questionModel.setPropertyValue("rankingChoices", rankingChoices);
+        questionModel.rankingChoices = rankingChoices;
+        questionModel.updateUnRankingChoices(rankingChoices);
     };
-    DragDropRankingSelectToRank.prototype.unselectFromRank = function (questionModel, fromIndex, toIndex) {
-        var rankingChoices = questionModel.rankingChoices;
-        questionModel.isValueSetByUser = true;
-        rankingChoices.splice(fromIndex, 1);
-        questionModel.setPropertyValue("rankingChoices", rankingChoices);
-    };
-    DragDropRankingSelectToRank.prototype.reorderRankedItem = function (questionModel, fromIndex, toIndex) {
-        var rankingChoices = questionModel.rankingChoices;
-        var item = rankingChoices[fromIndex];
-        questionModel.isValueSetByUser = true;
-        rankingChoices.splice(fromIndex, 1);
-        rankingChoices.splice(toIndex, 0, item);
-        questionModel.setPropertyValue("rankingChoices", rankingChoices);
+    DragDropRankingSelectToRank.prototype.clear = function () {
+        var questionModel = this.parentElement;
+        if (!!questionModel) {
+            questionModel.rankingChoicesAnimation.cancel();
+            questionModel.unRankingChoicesAnimation.cancel();
+        }
+        _super.prototype.clear.call(this);
     };
     return DragDropRankingSelectToRank;
-}(_ranking_choices__WEBPACK_IMPORTED_MODULE_0__["DragDropRankingChoices"]));
+}(_ranking_choices__WEBPACK_IMPORTED_MODULE_1__["DragDropRankingChoices"]));
 
 
 
@@ -9500,8 +9559,8 @@ __webpack_require__.r(__webpack_exports__);
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.9.135";
-ReleaseDate = "" + "2024-03-19";
+Version = "" + "1.9.137";
+ReleaseDate = "" + "2024-04-02";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -9682,7 +9741,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, 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, AnimationBoolean, AnimationGroup, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -10127,16 +10186,27 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ActionDropdownViewModel", function() { return _actions_action__WEBPACK_IMPORTED_MODULE_7__["ActionDropdownViewModel"]; });
 
-/* harmony import */ var _actions_adaptive_container__WEBPACK_IMPORTED_MODULE_8__ = __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_8__["AdaptiveActionContainer"]; });
+/* harmony import */ var _utils_animation__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../utils/animation */ "./src/utils/animation.ts");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AnimationUtils", function() { return _utils_animation__WEBPACK_IMPORTED_MODULE_8__["AnimationUtils"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AnimationPropertyUtils", function() { return _utils_animation__WEBPACK_IMPORTED_MODULE_8__["AnimationPropertyUtils"]; });
+
+/* 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__, "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 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"]; });
 
-/* harmony import */ var _actions_container__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../actions/container */ "./src/actions/container.ts");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "defaultActionBarCss", function() { return _actions_container__WEBPACK_IMPORTED_MODULE_9__["defaultActionBarCss"]; });
+/* harmony import */ var _actions_container__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../actions/container */ "./src/actions/container.ts");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "defaultActionBarCss", function() { return _actions_container__WEBPACK_IMPORTED_MODULE_10__["defaultActionBarCss"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ActionContainer", function() { return _actions_container__WEBPACK_IMPORTED_MODULE_9__["ActionContainer"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ActionContainer", function() { return _actions_container__WEBPACK_IMPORTED_MODULE_10__["ActionContainer"]; });
 
-/* harmony import */ var _utils_dragOrClickHelper__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../utils/dragOrClickHelper */ "./src/utils/dragOrClickHelper.ts");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "DragOrClickHelper", function() { return _utils_dragOrClickHelper__WEBPACK_IMPORTED_MODULE_10__["DragOrClickHelper"]; });
+/* harmony import */ var _utils_dragOrClickHelper__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../utils/dragOrClickHelper */ "./src/utils/dragOrClickHelper.ts");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "DragOrClickHelper", function() { return _utils_dragOrClickHelper__WEBPACK_IMPORTED_MODULE_11__["DragOrClickHelper"]; });
 
 // model
 
@@ -10155,13 +10225,14 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 /***/ }),
 
 /***/ "./src/entries/core.ts":
 /*!*****************************!*\
   !*** ./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, 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, AnimationBoolean, AnimationGroup, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper, Model */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -10599,6 +10670,16 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ActionDropdownViewModel", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["ActionDropdownViewModel"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AnimationUtils", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["AnimationUtils"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AnimationPropertyUtils", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["AnimationPropertyUtils"]; });
+
+/* 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__, "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__, "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"]; });
@@ -21466,7 +21547,6 @@ __webpack_require__.r(__webpack_exports__);
 var InputElementAdapter = /** @class */ (function () {
     function InputElementAdapter(inputMaskInstance, inputElement, value) {
         var _this = this;
-        if (value === void 0) { value = ""; }
         this.inputMaskInstance = inputMaskInstance;
         this.inputElement = inputElement;
         this.prevUnmaskedValue = undefined;
@@ -21485,8 +21565,15 @@ var InputElementAdapter = /** @class */ (function () {
                 event.preventDefault();
             }
         };
-        this.inputElement.value = inputMaskInstance.getMaskedValue(value);
-        this.prevUnmaskedValue = value;
+        var _value = value;
+        if (_value === null || _value === undefined) {
+            _value = "";
+        }
+        else if (typeof _value !== "string") {
+            _value = _value.toString();
+        }
+        this.inputElement.value = inputMaskInstance.getMaskedValue(_value);
+        this.prevUnmaskedValue = _value;
         inputMaskInstance.onPropertyChanged.add(this.inputMaskInstancePropertyChangedHandler);
         this.addInputEventListener();
     }
@@ -23136,7 +23223,7 @@ var PageModel = /** @class */ (function (_super) {
         configurable: true
     });
     PageModel.prototype.calcCssClasses = function (css) {
-        var classes = { page: {}, error: {}, pageTitle: "", pageDescription: "", row: "", rowMultiple: "", pageRow: "", rowCompact: "" };
+        var classes = { page: {}, error: {}, pageTitle: "", pageDescription: "", row: "", rowMultiple: "", pageRow: "", rowCompact: "", rowFadeIn: "", rowFadeOut: "", rowFadeOutActive: "" };
         this.copyCssClasses(classes.page, css.page);
         this.copyCssClasses(classes.error, css.error);
         if (!!css.pageTitle) {
@@ -23157,6 +23244,15 @@ var PageModel = /** @class */ (function (_super) {
         if (!!css.rowCompact) {
             classes.rowCompact = css.rowCompact;
         }
+        if (!!css.rowFadeIn) {
+            classes.rowFadeIn = css.rowFadeIn;
+        }
+        if (!!css.rowFadeOut) {
+            classes.rowFadeOut = css.rowFadeOut;
+        }
+        if (!!css.rowFadeOutActive) {
+            classes.rowFadeOutActive = css.rowFadeOutActive;
+        }
         if (this.survey) {
             this.survey.updatePageCssClasses(this, classes);
         }
@@ -23382,7 +23478,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./utils/utils */ "./src/utils/utils.ts");
 /* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
 /* harmony import */ var _drag_drop_panel_helper_v1__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./drag-drop-panel-helper-v1 */ "./src/drag-drop-panel-helper-v1.ts");
-/* harmony import */ var _global_variables_utils__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./global_variables_utils */ "./src/global_variables_utils.ts");
+/* harmony import */ var _utils_animation__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./utils/animation */ "./src/utils/animation.ts");
+/* harmony import */ var _global_variables_utils__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./global_variables_utils */ "./src/global_variables_utils.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -23421,6 +23518,7 @@ var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from
 
 
 
+
 var QuestionRowModel = /** @class */ (function (_super) {
     __extends(QuestionRowModel, _super);
     function QuestionRowModel(panel) {
@@ -23428,6 +23526,10 @@ var QuestionRowModel = /** @class */ (function (_super) {
         _this.panel = panel;
         _this._scrollableParent = undefined;
         _this._updateVisibility = undefined;
+        _this.visibleElementsAnimation = new _utils_animation__WEBPACK_IMPORTED_MODULE_11__["AnimationGroup"](_this.getVisibleElementsAnimationOptions(), function (value) {
+            _this.setPropertyValue("visibleElements", value);
+            _this.setWidth();
+        }, function () { return _this.visibleElements; });
         _this.idValue = QuestionRowModel.getRowId();
         _this.visible = panel.areInvisibleElementsShowing;
         _this.createNewArray("elements");
@@ -23440,12 +23542,12 @@ var QuestionRowModel = /** @class */ (function (_super) {
     QuestionRowModel.prototype.startLazyRendering = function (rowContainerDiv, findScrollableContainer) {
         var _this = this;
         if (findScrollableContainer === void 0) { findScrollableContainer = _utils_utils__WEBPACK_IMPORTED_MODULE_8__["findScrollableParent"]; }
-        if (!_global_variables_utils__WEBPACK_IMPORTED_MODULE_11__["DomDocumentHelper"].isAvailable())
+        if (!_global_variables_utils__WEBPACK_IMPORTED_MODULE_12__["DomDocumentHelper"].isAvailable())
             return;
         this._scrollableParent = findScrollableContainer(rowContainerDiv);
         // if  this._scrollableParent is html the scroll event isn't fired, so we should use window
-        if (this._scrollableParent === _global_variables_utils__WEBPACK_IMPORTED_MODULE_11__["DomDocumentHelper"].getDocumentElement()) {
-            this._scrollableParent = _global_variables_utils__WEBPACK_IMPORTED_MODULE_11__["DomWindowHelper"].getWindow();
+        if (this._scrollableParent === _global_variables_utils__WEBPACK_IMPORTED_MODULE_12__["DomDocumentHelper"].getDocumentElement()) {
+            this._scrollableParent = _global_variables_utils__WEBPACK_IMPORTED_MODULE_12__["DomWindowHelper"].getWindow();
         }
         var hasScroll = this._scrollableParent.scrollHeight > this._scrollableParent.clientHeight;
         this.isNeedRender = !hasScroll;
@@ -23494,6 +23596,9 @@ var QuestionRowModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionRowModel.prototype.equalsCore = function (obj) {
+        return this == obj;
+    };
     Object.defineProperty(QuestionRowModel.prototype, "elements", {
         get: function () {
             return this.getPropertyValue("elements");
@@ -23501,10 +23606,48 @@ var QuestionRowModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionRowModel.prototype.getVisibleElementsAnimationOptions = function () {
+        var _this = this;
+        var beforeRunAnimation = function (el) {
+            el.style.setProperty("--animation-height", el.offsetHeight + "px");
+            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; },
+            getAnimatedElement: function (element) { return element.getWrapperElement(); },
+            getLeaveOptions: function (element) {
+                var surveyElement = element;
+                var cssClasses = element.isPanel ? surveyElement.cssClasses.panel : surveyElement.cssClasses;
+                return {
+                    cssClass: cssClasses.fadeOut,
+                    onBeforeRunAnimation: beforeRunAnimation
+                };
+            },
+            getEnterOptions: function (element) {
+                var surveyElement = element;
+                var cssClasses = element.isPanel ? surveyElement.cssClasses.panel : surveyElement.cssClasses;
+                return {
+                    cssClass: cssClasses.fadeIn,
+                    onBeforeRunAnimation: beforeRunAnimation
+                };
+            }
+        };
+    };
     Object.defineProperty(QuestionRowModel.prototype, "visibleElements", {
         get: function () {
             return this.getPropertyValue("visibleElements");
         },
+        set: function (val) {
+            if (!val.length) {
+                this.visible = false;
+                this.visibleElementsAnimation.cancel();
+                return;
+            }
+            else {
+                this.visible = true;
+            }
+            this.visibleElementsAnimation.sync(val);
+        },
         enumerable: false,
         configurable: true
     });
@@ -23514,6 +23657,7 @@ var QuestionRowModel = /** @class */ (function (_super) {
         },
         set: function (val) {
             this.setPropertyValue("visible", val);
+            this.onVisibleChangedCallback && this.onVisibleChangedCallback();
         },
         enumerable: false,
         configurable: true
@@ -23529,9 +23673,14 @@ var QuestionRowModel = /** @class */ (function (_super) {
         configurable: true
     });
     QuestionRowModel.prototype.updateVisible = function () {
-        var isVisible = this.calcVisible();
-        this.setWidth();
-        this.visible = isVisible;
+        var visElements = [];
+        for (var i = 0; i < this.elements.length; i++) {
+            if (this.elements[i].isVisible) {
+                visElements.push(this.elements[i]);
+            }
+        }
+        this.visibleElements = visElements;
+        return;
     };
     QuestionRowModel.prototype.addElement = function (q) {
         this.elements.push(q);
@@ -23605,27 +23754,6 @@ var QuestionRowModel = /** @class */ (function (_super) {
     QuestionRowModel.prototype.getRenderedWidthFromWidth = function (width) {
         return _helpers__WEBPACK_IMPORTED_MODULE_1__["Helpers"].isNumber(width) ? width + "px" : width;
     };
-    QuestionRowModel.prototype.calcVisible = function () {
-        var visElements = [];
-        for (var i = 0; i < this.elements.length; i++) {
-            if (this.elements[i].isVisible) {
-                visElements.push(this.elements[i]);
-            }
-        }
-        if (this.needToUpdateVisibleElements(visElements)) {
-            this.setPropertyValue("visibleElements", visElements);
-        }
-        return visElements.length > 0;
-    };
-    QuestionRowModel.prototype.needToUpdateVisibleElements = function (visElements) {
-        if (visElements.length !== this.visibleElements.length)
-            return true;
-        for (var i = 0; i < visElements.length; i++) {
-            if (visElements[i] !== this.visibleElements[i])
-                return true;
-        }
-        return false;
-    };
     QuestionRowModel.prototype.dispose = function () {
         _super.prototype.dispose.call(this);
         this.stopLazyRendering();
@@ -23634,10 +23762,16 @@ 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 && !this.panel.survey.isShowingPreview))
+            .append(this.panel.cssClasses.pageRow, this.panel.isPage || (!!this.panel.originalPage))
             .append(this.panel.cssClasses.rowMultiple, this.visibleElements.length > 1)
             .toString();
     };
+    QuestionRowModel.prototype.setRootElement = function (element) {
+        this.rootElement = element;
+    };
+    QuestionRowModel.prototype.getRootElement = function () {
+        return this.rootElement;
+    };
     QuestionRowModel.rowCounter = 100;
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: null })
@@ -23655,9 +23789,13 @@ var PanelModelBase = /** @class */ (function (_super) {
         var _this = _super.call(this, name) || this;
         _this.isQuestionsReady = false;
         _this.questionsValue = new Array();
+        _this.rowsAnimation = new _utils_animation__WEBPACK_IMPORTED_MODULE_11__["AnimationGroup"](_this.getRowsAnimationOptions(), function (value) {
+            _this.setPropertyValue("visibleRows", value);
+        }, function () { return _this.visibleRows; });
         _this.isRandomizing = false;
         _this.locCountRowUpdates = 0;
-        _this.createNewArray("rows");
+        _this.createNewArray("rows", function (el, index) { _this.onAddRow(el); }, function (el) { _this.onRemoveRow(el); });
+        _this.createNewArray("visibleRows");
         _this.elementsValue = _this.createNewArray("elements", _this.onAddElement.bind(_this), _this.onRemoveElement.bind(_this));
         _this.id = PanelModelBase.getPanelId();
         _this.addExpressionProperty("visibleIf", function (obj, res) { _this.visible = res === true; }, function (obj) { return !_this.areInvisibleElementsShowing; });
@@ -23677,16 +23815,62 @@ var PanelModelBase = /** @class */ (function (_super) {
     PanelModelBase.getPanelId = function () {
         return "sp_" + PanelModelBase.panelCounter++;
     };
+    PanelModelBase.prototype.onAddRow = function (row) {
+        var _this = this;
+        this.onRowVisibleChanged();
+        row.onVisibleChangedCallback = function () { return _this.onRowVisibleChanged(); };
+    };
+    PanelModelBase.prototype.getRowsAnimationOptions = function () {
+        var _this = this;
+        var beforeRunAnimation = function (el) {
+            el.style.setProperty("--animation-height", el.offsetHeight + "px");
+        };
+        return {
+            isAnimationEnabled: function () { return _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].animationEnabled && _this.animationAllowed; },
+            getAnimatedElement: function (row) { return row.getRootElement(); },
+            getLeaveOptions: function (_) {
+                return { cssClass: _this.cssClasses.rowFadeOut,
+                    onBeforeRunAnimation: beforeRunAnimation
+                };
+            },
+            getEnterOptions: function (_) {
+                return {
+                    cssClass: _this.cssClasses.rowFadeIn,
+                    onBeforeRunAnimation: beforeRunAnimation
+                };
+            }
+        };
+    };
+    Object.defineProperty(PanelModelBase.prototype, "visibleRows", {
+        get: function () {
+            return this.getPropertyValue("visibleRows");
+        },
+        set: function (val) {
+            this.rowsAnimation.sync(val);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PanelModelBase.prototype.onRemoveRow = function (row) {
+        row.visibleElementsAnimation.cancel();
+        this.visibleRows = this.rows.filter(function (row) { return row.visible; });
+        row.onVisibleChangedCallback = undefined;
+    };
+    PanelModelBase.prototype.onRowVisibleChanged = function () {
+        this.visibleRows = this.rows.filter(function (row) { return row.visible; });
+    };
     PanelModelBase.prototype.getType = function () {
         return "panelbase";
     };
     PanelModelBase.prototype.setSurveyImpl = function (value, isLight) {
+        this.animationAllowed = false;
         _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;
     };
     PanelModelBase.prototype.endLoadingFromJson = function () {
         _super.prototype.endLoadingFromJson.call(this);
@@ -23902,7 +24086,7 @@ var PanelModelBase = /** @class */ (function (_super) {
         configurable: true
     });
     PanelModelBase.prototype.calcCssClasses = function (css) {
-        var classes = { panel: {}, error: {}, row: "", rowMultiple: "", pageRow: "", rowCompact: "" };
+        var classes = { panel: {}, error: {}, row: "", rowFadeIn: "", rowFadeOut: "", rowFadeOutActive: "", rowMultiple: "", pageRow: "", rowCompact: "" };
         this.copyCssClasses(classes.panel, css.panel);
         this.copyCssClasses(classes.error, css.error);
         if (!!css.pageRow) {
@@ -23914,6 +24098,15 @@ var PanelModelBase = /** @class */ (function (_super) {
         if (!!css.row) {
             classes.row = css.row;
         }
+        if (!!css.rowFadeIn) {
+            classes.rowFadeIn = css.rowFadeIn;
+        }
+        if (!!css.rowFadeOut) {
+            classes.rowFadeOut = css.rowFadeOut;
+        }
+        if (!!css.rowFadeOutActive) {
+            classes.rowFadeOutActive = css.rowFadeOutActive;
+        }
         if (!!css.rowMultiple) {
             classes.rowMultiple = css.rowMultiple;
         }
@@ -24492,10 +24685,13 @@ var PanelModelBase = /** @class */ (function (_super) {
         return new QuestionRowModel(this);
     };
     PanelModelBase.prototype.onSurveyLoad = function () {
+        this.animationAllowed = false;
+        _super.prototype.onSurveyLoad.call(this);
         for (var i = 0; i < this.elements.length; i++) {
             this.elements[i].onSurveyLoad();
         }
         this.onElementVisibilityChanged(this);
+        this.animationAllowed = true;
     };
     PanelModelBase.prototype.onFirstRendering = function () {
         _super.prototype.onFirstRendering.call(this);
@@ -24529,7 +24725,9 @@ var PanelModelBase = /** @class */ (function (_super) {
     PanelModelBase.prototype.onRowsChanged = function () {
         if (this.isLoadingFromJson)
             return;
+        this.animationAllowed = false;
         this.setArrayPropertyDirectly("rows", this.buildRows());
+        this.animationAllowed = true;
     };
     PanelModelBase.prototype.blockRowsUpdates = function () {
         this.locCountRowUpdates++;
@@ -24849,9 +25047,9 @@ var PanelModelBase = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    PanelModelBase.prototype.getIsPageVisible = function (exceptionQuestion) {
-        if (!this.visible)
-            return false;
+    PanelModelBase.prototype.getIsContentVisible = function (exceptionQuestion) {
+        if (this.areInvisibleElementsShowing)
+            return true;
         for (var i = 0; i < this.elements.length; i++) {
             if (this.elements[i] == exceptionQuestion)
                 continue;
@@ -24860,6 +25058,9 @@ var PanelModelBase = /** @class */ (function (_super) {
         }
         return false;
     };
+    PanelModelBase.prototype.getIsPageVisible = function (exceptionQuestion) {
+        return this.visible && this.getIsContentVisible(exceptionQuestion);
+    };
     PanelModelBase.prototype.setVisibleIndex = function (index) {
         if (!this.isVisible || index < 0) {
             this.resetVisibleIndexes();
@@ -25527,6 +25728,7 @@ var PanelModel = /** @class */ (function (_super) {
                     id: "cancel-preview",
                     locTitle: this.survey.locEditText,
                     innerCss: this.survey.cssNavigationEdit,
+                    component: "sv-nav-btn",
                     action: function () { _this.cancelPreview(); }
                 });
             }
@@ -25607,7 +25809,7 @@ var PanelModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(PanelModel.prototype, "showPanelAsPage", {
         get: function () {
-            return !!this.originalPage && !this.survey.isShowingPreview;
+            return !!this.originalPage;
         },
         enumerable: false,
         configurable: true
@@ -25871,7 +26073,7 @@ var PopupDropdownViewModel = /** @class */ (function (_super) {
             .append("sv-popup--dropdown-overlay", this.isOverlay && this.model.overlayDisplayMode !== "overlay")
             .append("sv-popup--tablet", this.isTablet && this.isOverlay)
             .append("sv-popup--show-pointer", !this.isOverlay && this.showHeader)
-            .append("sv-popup--" + this.popupDirection, !this.isOverlay && this.showHeader);
+            .append("sv-popup--" + this.popupDirection, !this.isOverlay && (this.showHeader || this.popupDirection == "top" || this.popupDirection == "bottom"));
     };
     PopupDropdownViewModel.prototype.getShowHeader = function () {
         return this.model.showPointer && !this.isOverlay;
@@ -26553,12 +26755,7 @@ __webpack_require__.r(__webpack_exports__);
 
 function createPopupModalViewModel(options, rootElement) {
     var _a;
-    var popupModel = new _popup__WEBPACK_IMPORTED_MODULE_1__["PopupModel"](options.componentName, options.data, "top", "left", false, true, options.onCancel, options.onApply, function () {
-        options.onHide();
-        if (!!container) {
-            popupViewModel.resetComponentElement();
-        }
-    }, options.onShow, options.cssClass, options.title);
+    var popupModel = new _popup__WEBPACK_IMPORTED_MODULE_1__["PopupModel"](options.componentName, options.data, "top", "left", false, true, options.onCancel, options.onApply, options.onHide, options.onShow, options.cssClass, options.title);
     popupModel.displayMode = options.displayMode || "popup";
     popupModel.isFocusedContent = (_a = options.isFocusedContent) !== null && _a !== void 0 ? _a : true;
     var popupViewModel = new _popup_modal_view_model__WEBPACK_IMPORTED_MODULE_3__["PopupModalViewModel"](popupModel);
@@ -26570,6 +26767,15 @@ function createPopupModalViewModel(options, rootElement) {
     if (!popupViewModel.container) {
         popupViewModel.initializePopupContainer();
     }
+    var onVisibilityChangedCallback = function (sender, options) {
+        if (!options.isVisible) {
+            if (!!container) {
+                popupViewModel.resetComponentElement();
+            }
+        }
+        popupViewModel.onVisibilityChanged.remove(onVisibilityChangedCallback);
+    };
+    popupViewModel.onVisibilityChanged.add(onVisibilityChangedCallback);
     return popupViewModel;
 }
 function createPopupViewModel(model, targetElement) {
@@ -26601,7 +26807,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _actions_container__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./actions/container */ "./src/actions/container.ts");
 /* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./settings */ "./src/settings.ts");
 /* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils/utils */ "./src/utils/utils.ts");
-/* harmony import */ var _global_variables_utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./global_variables_utils */ "./src/global_variables_utils.ts");
+/* harmony import */ var _utils_animation__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utils/animation */ "./src/utils/animation.ts");
+/* harmony import */ var _global_variables_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./global_variables_utils */ "./src/global_variables_utils.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -26630,19 +26837,64 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 var FOCUS_INPUT_SELECTOR = "input:not(:disabled):not([readonly]):not([type=hidden]),select:not(:disabled):not([readonly]),textarea:not(:disabled):not([readonly]), button:not(:disabled):not([readonly]), [tabindex]:not([tabindex^=\"-\"])";
 var PopupBaseViewModel = /** @class */ (function (_super) {
     __extends(PopupBaseViewModel, _super);
     function PopupBaseViewModel(model) {
         var _this = _super.call(this) || this;
-        _this.subscriptionId = PopupBaseViewModel.SubscriptionId++;
         _this.popupSelector = ".sv-popup";
         _this.fixedPopupContainer = ".sv-popup";
         _this.containerSelector = ".sv-popup__container";
         _this.scrollingContentSelector = ".sv-popup__scrolling-content";
+        _this.visibilityAnimation = new _utils_animation__WEBPACK_IMPORTED_MODULE_6__["AnimationBoolean"](_this, function (val) {
+            if (_this._isVisible !== val) {
+                if (!val) {
+                    _this.updateOnHiding();
+                    _this.updateIsVisible(val);
+                }
+                else {
+                    _this.updateIsVisible(val);
+                }
+            }
+        }, function () { return _this._isVisible; });
+        _this.onVisibilityChanged = new _base__WEBPACK_IMPORTED_MODULE_0__["EventBase"]();
+        _this.onModelIsVisibleChangedCallback = function () {
+            _this.isVisible = _this.model.isVisible;
+        };
         _this.model = model;
         return _this;
     }
+    PopupBaseViewModel.prototype.updateIsVisible = function (val) {
+        this._isVisible = val;
+        this.onVisibilityChanged.fire(this, { isVisible: val });
+    };
+    PopupBaseViewModel.prototype.getLeaveOptions = function () {
+        return { cssClass: "sv-popup--animate-leave" };
+    };
+    PopupBaseViewModel.prototype.getEnterOptions = function () {
+        return { cssClass: "sv-popup--animate-enter" };
+    };
+    PopupBaseViewModel.prototype.getAnimatedElement = function () {
+        return this.getAnimationContainer();
+    };
+    PopupBaseViewModel.prototype.isAnimationEnabled = function () {
+        return this.model.displayMode !== "overlay" && _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].animationEnabled;
+    };
+    PopupBaseViewModel.prototype.getAnimationContainer = function () {
+        var _a;
+        return (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector(this.fixedPopupContainer);
+    };
+    Object.defineProperty(PopupBaseViewModel.prototype, "isVisible", {
+        get: function () {
+            return this._isVisible;
+        },
+        set: function (val) {
+            this.visibilityAnimation.sync(val);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(PopupBaseViewModel.prototype, "container", {
         get: function () {
             return this.containerElement || this.createdContainer;
@@ -26701,20 +26953,13 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
     PopupBaseViewModel.prototype.onModelChanging = function (newModel) {
     };
     PopupBaseViewModel.prototype.setupModel = function (model) {
-        var _this = this;
         if (!!this.model) {
-            this.model.unregisterPropertyChangedHandlers(["isVisible"], "PopupBaseViewModel" + this.subscriptionId);
+            this.model.onVisibilityChanged.remove(this.onModelIsVisibleChangedCallback);
         }
         this.onModelChanging(model);
         this._model = model;
-        var onIsVisibleChangedHandler = function () {
-            if (!model.isVisible) {
-                _this.updateOnHiding();
-            }
-            _this.isVisible = model.isVisible;
-        };
-        model.registerPropertyChangedHandlers(["isVisible"], onIsVisibleChangedHandler, "PopupBaseViewModel" + this.subscriptionId);
-        onIsVisibleChangedHandler();
+        model.onVisibilityChanged.add(this.onModelIsVisibleChangedCallback);
+        this.onModelIsVisibleChangedCallback();
     };
     Object.defineProperty(PopupBaseViewModel.prototype, "model", {
         get: function () {
@@ -26894,7 +27139,7 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
     PopupBaseViewModel.prototype.dispose = function () {
         _super.prototype.dispose.call(this);
         if (this.model) {
-            this.model.unregisterPropertyChangedHandlers(["isVisible"], "PopupBaseViewModel" + this.subscriptionId);
+            this.model.onVisibilityChanged.remove(this.onModelIsVisibleChangedCallback);
         }
         if (!!this.createdContainer) {
             this.createdContainer.remove();
@@ -26907,7 +27152,7 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
     };
     PopupBaseViewModel.prototype.initializePopupContainer = function () {
         if (!this.container) {
-            var container = _global_variables_utils__WEBPACK_IMPORTED_MODULE_6__["DomDocumentHelper"].createElement("div");
+            var container = _global_variables_utils__WEBPACK_IMPORTED_MODULE_7__["DomDocumentHelper"].createElement("div");
             this.createdContainer = container;
             Object(_utils_utils__WEBPACK_IMPORTED_MODULE_5__["getElement"])(_settings__WEBPACK_IMPORTED_MODULE_4__["settings"].environment.popupMountContainer).appendChild(container);
         }
@@ -26924,7 +27169,7 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
     PopupBaseViewModel.prototype.preventScrollOuside = function (event, deltaY) {
         var currentElement = event.target;
         while (currentElement !== this.container) {
-            if (_global_variables_utils__WEBPACK_IMPORTED_MODULE_6__["DomDocumentHelper"].getComputedStyle(currentElement).overflowY === "auto" && currentElement.scrollHeight !== currentElement.offsetHeight) {
+            if (_global_variables_utils__WEBPACK_IMPORTED_MODULE_7__["DomDocumentHelper"].getComputedStyle(currentElement).overflowY === "auto" && currentElement.scrollHeight !== currentElement.offsetHeight) {
                 var scrollHeight = currentElement.scrollHeight, scrollTop = currentElement.scrollTop, clientHeight = currentElement.clientHeight;
                 if (!(deltaY > 0 && Math.abs(scrollHeight - clientHeight - scrollTop) < 1) && !(deltaY < 0 && scrollTop <= 0)) {
                     return;
@@ -26936,7 +27181,6 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
             event.preventDefault();
         }
     };
-    PopupBaseViewModel.SubscriptionId = 0;
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: "0px" })
     ], PopupBaseViewModel.prototype, "top", void 0);
@@ -26954,7 +27198,7 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
     ], PopupBaseViewModel.prototype, "minWidth", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: false })
-    ], PopupBaseViewModel.prototype, "isVisible", void 0);
+    ], PopupBaseViewModel.prototype, "_isVisible", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], PopupBaseViewModel.prototype, "locale", void 0);
@@ -27272,7 +27516,7 @@ var ProgressButtons = /** @class */ (function (_super) {
         if (!listContainerElement)
             return;
         var listContainerElements = element.querySelectorAll(".sd-progress-buttons__connector");
-        var circleWidth = this.showItemNumbers ? 17 : 7;
+        var circleWidth = this.showItemNumbers ? 17 : 5;
         var connectorWidth = listContainerElement.clientWidth / (listContainerElement.children.length - 1) - circleWidth;
         for (var i = 0; i < listContainerElements.length; i++) {
             listContainerElements[i].style.width = connectorWidth + "px";
@@ -34588,6 +34832,10 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
             return this.hasSelectAll;
         return _super.prototype.isItemInList.call(this, item);
     };
+    QuestionCheckboxModel.prototype.getDisplayValueEmpty = function () {
+        var _this = this;
+        return _itemvalue__WEBPACK_IMPORTED_MODULE_4__["ItemValue"].getTextOrHtmlByValue(this.visibleChoices.filter(function (choice) { return choice != _this.selectAllItemValue; }), undefined);
+    };
     QuestionCheckboxModel.prototype.getDisplayValueCore = function (keysAsText, value) {
         if (!Array.isArray(value))
             return _super.prototype.getDisplayValueCore.call(this, keysAsText, value);
@@ -35085,6 +35333,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./helpers */ "./src/helpers.ts");
 /* harmony import */ var _textPreProcessor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./textPreProcessor */ "./src/textPreProcessor.ts");
 /* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
+/* harmony import */ var _error__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./error */ "./src/error.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -35106,6 +35355,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var ComponentQuestionJSON = /** @class */ (function () {
     function ComponentQuestionJSON(name, json) {
         this.name = name;
@@ -35161,6 +35411,11 @@ var ComponentQuestionJSON = /** @class */ (function () {
             return newValue;
         return this.json.onValueChanging(question, name, newValue);
     };
+    ComponentQuestionJSON.prototype.onGetErrorText = function (question) {
+        if (!this.json.getErrorText)
+            return undefined;
+        return this.json.getErrorText(question);
+    };
     ComponentQuestionJSON.prototype.onItemValuePropertyChanged = function (question, item, propertyName, name, newValue) {
         if (!this.json.onItemValuePropertyChanged)
             return;
@@ -35441,6 +35696,15 @@ var QuestionCustomModelBase = /** @class */ (function (_super) {
         _super.prototype.setNewValue.call(this, newValue);
         this.updateElementCss();
     };
+    QuestionCustomModelBase.prototype.onCheckForErrors = function (errors, isOnValueChanged) {
+        _super.prototype.onCheckForErrors.call(this, errors, isOnValueChanged);
+        if (!!this.customQuestion) {
+            var text = this.customQuestion.onGetErrorText(this);
+            if (!!text) {
+                errors.push(new _error__WEBPACK_IMPORTED_MODULE_6__["CustomError"](text, this));
+            }
+        }
+    };
     //ISurveyImpl
     QuestionCustomModelBase.prototype.getSurveyData = function () {
         return this;
@@ -35712,9 +35976,10 @@ var QuestionCustomModel = /** @class */ (function (_super) {
         }
     };
     QuestionCustomModel.prototype.convertDataName = function (name) {
-        if (!this.contentQuestion)
+        var q = this.contentQuestion;
+        if (!q || name === this.getValueName())
             return _super.prototype.convertDataName.call(this, name);
-        var newName = name.replace(this.contentQuestion.getValueName(), this.getValueName());
+        var newName = name.replace(q.getValueName(), this.getValueName());
         return newName.indexOf(this.getValueName()) == 0
             ? newName
             : _super.prototype.convertDataName.call(this, name);
@@ -40054,7 +40319,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.hasCssError())
+            .append(css.itemOnError, !hasCellText && (this.isAllRowRequired ? this.hasErrorInRow(row) : this.hasCssError()))
             .append(hasCellText ? css.cellTextSelected : css.itemChecked, isChecked)
             .append(hasCellText ? css.cellTextDisabled : css.itemDisabled, isDisabled)
             .append(css.itemHover, allowHover && !hasCellText)
@@ -43733,10 +43998,9 @@ var MatrixDropdownColumn = /** @class */ (function (_super) {
     });
     Object.defineProperty(MatrixDropdownColumn.prototype, "isRequired", {
         /**
-         * Marks the column as required. If a respondent skips any cell in a required column, the matrix displays a validation error.
+         * Marks the column as required. If a respondent skips any cell in a required column, the matrix displays a [validation error](#requiredErrorText).
          *
          * If you want to mark the column as required based on a condition, specify the [`requiredIf`](#requiredIf) property.
-         * @see requiredErrorText
          * @see visible
          * @see readOnly
          */
@@ -43913,7 +44177,7 @@ var MatrixDropdownColumn = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(MatrixDropdownColumn.prototype, "setValueExpession", {
+    Object.defineProperty(MatrixDropdownColumn.prototype, "setValueExpression", {
         /**
          * An expression used to calculate a value for all column cells.
          *
@@ -43924,10 +44188,10 @@ var MatrixDropdownColumn = /** @class */ (function (_super) {
          * @see resetValueIf
          */
         get: function () {
-            return this.templateQuestion.setValueExpession;
+            return this.templateQuestion.setValueExpression;
         },
         set: function (val) {
-            this.templateQuestion.setValueExpession = val;
+            this.templateQuestion.setValueExpression = val;
         },
         enumerable: false,
         configurable: true
@@ -46908,9 +47172,9 @@ var MultipleTextEditorModel = /** @class */ (function (_super) {
 }(_question_text__WEBPACK_IMPORTED_MODULE_3__["QuestionTextModel"]));
 
 /**
- * A class that describes an item in a [Multiple Textboxes](https://surveyjs.io/form-library/documentation/api-reference/multiple-text-entry-question-model) question.
+ * A class that describes an [item](https://surveyjs.io/form-library/documentation/api-reference/multiple-text-entry-question-model#items) in a Multiple Textboxes question.
  *
- * [View Demo](https://surveyjs.io/form-library/examples/multiple-text-box-question/)
+ * [View Demo](https://surveyjs.io/form-library/examples/multiple-text-box-question/ (linkStyle))
  */
 var MultipleTextItemModel = /** @class */ (function (_super) {
     __extends(MultipleTextItemModel, _super);
@@ -46922,6 +47186,7 @@ var MultipleTextItemModel = /** @class */ (function (_super) {
             _this.editor.focusIn();
         };
         _this.editorValue = _this.createEditor(name);
+        _this.maskSettings = _this.editorValue.maskSettings;
         _this.editor.questionTitleTemplateCallback = function () {
             return "";
         };
@@ -46946,7 +47211,10 @@ var MultipleTextItemModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(MultipleTextItemModel.prototype, "name", {
         /**
-         * The item name.
+         * An item ID that is not visible to respondents.
+         *
+         * > Item IDs must be unique.
+         * @see title
          */
         get: function () {
             return this.editor.name;
@@ -46997,7 +47265,7 @@ var MultipleTextItemModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(MultipleTextItemModel.prototype, "isRequired", {
         /**
-         * Set this property to true, to make the item a required. If a user doesn't fill the item then a validation error will be generated.
+         * Marks the item as required. If a respondent leaves this item empty, the question displays a [validation error](#requiredErrorText).
          */
         get: function () {
             return this.editor.isRequired;
@@ -47010,7 +47278,9 @@ var MultipleTextItemModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(MultipleTextItemModel.prototype, "inputType", {
         /**
-         * Use this property to change the default input type.
+         * A value passed on to the [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types) attribute of the underlying `<input>` element.
+         *
+         * Default value: `"text"`
          */
         get: function () {
             return this.editor.inputType;
@@ -47023,8 +47293,7 @@ var MultipleTextItemModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(MultipleTextItemModel.prototype, "title", {
         /**
-         * Item title. If it is empty, the item name is rendered as title. This property supports markdown.
-         * @see name
+         * A user-friendly item label to display. If `title` is undefined, [`name`](https://surveyjs.io/form-library/documentation/api-reference/multipletextitemmodel#name) is displayed instead.
          */
         get: function () {
             return this.editor.title;
@@ -47051,9 +47320,9 @@ var MultipleTextItemModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(MultipleTextItemModel.prototype, "maxLength", {
         /**
-         * The maximum text length. If it is -1, defaul value, then the survey maxTextLength property will be used.
-         * If it is 0, then the value is unlimited
-         * @see SurveyModel.maxTextLength
+         * The maximum text length measured in characters. Assign 0 if the length should be unlimited.
+         *
+         * Default value: -1 (inherits the actual value from the `SurveyModel`'s [`maxTextLength`](https://surveyjs.io/form-library/documentation/surveymodel#maxTextLength) property).
          */
         get: function () {
             return this.editor.maxLength;
@@ -47070,7 +47339,7 @@ var MultipleTextItemModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(MultipleTextItemModel.prototype, "placeholder", {
         /**
-         * The input place holder.
+         * A placeholder for the input field.
          */
         get: function () {
             return this.editor.placeholder;
@@ -47107,7 +47376,7 @@ var MultipleTextItemModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(MultipleTextItemModel.prototype, "requiredErrorText", {
         /**
-         * The custom text that will be shown on required error. Use this property, if you do not want to show the default text.
+         * Specifies a custom error message for a [required item](#isRequired).
          */
         get: function () {
             return this.editor.requiredErrorText;
@@ -47127,7 +47396,9 @@ var MultipleTextItemModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(MultipleTextItemModel.prototype, "size", {
         /**
-         * The input size.
+         * A value passed on to the [`size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/size) attribute of the underlying `<input>` element.
+         *
+         * If you want to set a uniform `size` for all text box items, use the [`itemSize`](https://surveyjs.io/form-library/documentation/api-reference/multiple-text-entry-question-model#itemSize) within the Multiple Textboxes configuration.
          */
         get: function () {
             return this.editor.size;
@@ -47140,7 +47411,9 @@ var MultipleTextItemModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(MultipleTextItemModel.prototype, "defaultValueExpression", {
         /**
-         * An expression used to calculate the [defaultValue](https://surveyjs.io/form-library/documentation/question#defaultValue).
+         * An [expression](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#expressions) used to calculate the default item value.
+         * @see minValueExpression
+         * @see maxValueExpression
          */
         get: function () {
             return this.editor.defaultValueExpression;
@@ -47153,7 +47426,9 @@ var MultipleTextItemModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(MultipleTextItemModel.prototype, "minValueExpression", {
         /**
-         * The minimum value specified as an expression. For example, `"minValueExpression": "today(-1)"` sets the minimum value to yesterday.
+         * An [expression](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#expressions) used to calculate the minimum item value.
+         * @see maxValueExpression
+         * @see defaultValueExpression
          */
         get: function () {
             return this.editor.minValueExpression;
@@ -47166,7 +47441,9 @@ var MultipleTextItemModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(MultipleTextItemModel.prototype, "maxValueExpression", {
         /**
-         * The maximum value specified as an expression. For example, `"maxValueExpression": "today(1)"` sets the maximum value to tomorrow.
+         * An [expression](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#expressions) used to calculate the maximum item value.
+         * @see minValueExpression
+         * @see defaultValueExpression
          */
         get: function () {
             return this.editor.maxValueExpression;
@@ -47179,7 +47456,9 @@ var MultipleTextItemModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(MultipleTextItemModel.prototype, "validators", {
         /**
-         * The list of question validators.
+         * Item validators.
+         *
+         * [Data Validation](https://surveyjs.io/form-library/documentation/data-validation (linkStyle))
          */
         get: function () {
             return this.editor.validators;
@@ -47193,9 +47472,71 @@ var MultipleTextItemModel = /** @class */ (function (_super) {
     MultipleTextItemModel.prototype.getValidators = function () {
         return this.validators;
     };
+    Object.defineProperty(MultipleTextItemModel.prototype, "maskType", {
+        /**
+         * Specifies the type of a mask applied to the input.
+         *
+         * Possible values:
+         *
+         * - `"none"` (default)
+         * - `"numeric"`
+         * - `"currency"`
+         * - `"datetime"`
+         * - `"pattern"`
+         *
+         * [View Demo](https://surveyjs.io/form-library/examples/masked-input-fields/ (linkStyle))
+         * @see maskSettings
+         */
+        get: function () {
+            return this.editor.maskType;
+        },
+        set: function (val) {
+            this.editor.maskType = val;
+            this.maskSettings = this.editor.maskSettings;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MultipleTextItemModel.prototype, "maskSettings", {
+        /**
+         * An object with properties that configure the mask applied to the input.
+         *
+         * Available properties depend on the specified [`maskType`](#maskType) and belong to corresponding classes. Refer to the class APIs for a full list of properties:
+         *
+         * | `maskType` | Class |
+         * | ---------- | ----- |
+         * | `"numeric"` | [`InputMaskNumeric`](https://surveyjs.io/form-library/documentation/api-reference/inputmasknumeric) |
+         * | `"currency"` | [`InputMaskCurrency`](https://surveyjs.io/form-library/documentation/api-reference/inputmaskcurrency) |
+         * | `"datetime"` | [`InputMaskDateTime`](https://surveyjs.io/form-library/documentation/api-reference/inputmaskdatetime) |
+         * | `"pattern"` | [`InputMaskPattern`](https://surveyjs.io/form-library/documentation/api-reference/inputmaskpattern) |
+         *
+         * [View Demo](https://surveyjs.io/form-library/examples/masked-input-fields/ (linkStyle))
+         */
+        get: function () {
+            return this.getPropertyValue("maskSettings");
+        },
+        set: function (val) {
+            this.setPropertyValue("maskSettings", val);
+            if (this.editor.maskSettings !== val) {
+                this.editor.maskSettings = val;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MultipleTextItemModel.prototype, "inputTextAlignment", {
+        get: function () {
+            return this.editor.inputTextAlignment;
+        },
+        set: function (val) {
+            this.editor.inputTextAlignment = val;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(MultipleTextItemModel.prototype, "value", {
         /**
-         * The item value.
+         * An item value.
          */
         get: function () {
             return this.data ? this.data.getMultipleTextValue(this.name) : null;
@@ -47385,9 +47726,9 @@ var QuestionMultipleTextModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(QuestionMultipleTextModel.prototype, "items", {
         /**
-         * Gets or sets an array of `MultipleTextItemModel` objects that represent input items.
+         * Gets or sets an array of [`MultipleTextItemModel`](https://surveyjs.io/form-library/documentation/api-reference/multipletextitemmodel) objects that represent input items.
          *
-         * This property accepts an array of objects with the following structure:
+         * Each object in this array should have at least the following properties:
          *
          * ```js
          * {
@@ -47428,6 +47769,12 @@ var QuestionMultipleTextModel = /** @class */ (function (_super) {
         }
         return null;
     };
+    QuestionMultipleTextModel.prototype.getElementsInDesign = function (includeHidden) {
+        if (includeHidden === void 0) { includeHidden = false; }
+        var elements;
+        elements = _super.prototype.getElementsInDesign.call(this, includeHidden);
+        return elements.concat(this.items);
+    };
     QuestionMultipleTextModel.prototype.addConditionObjectsByContext = function (objects, context) {
         for (var i = 0; i < this.items.length; i++) {
             var item = this.items[i];
@@ -47881,6 +48228,31 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_4__["Serializer"].addClass("multipletextite
         default: "text",
         choices: _settings__WEBPACK_IMPORTED_MODULE_8__["settings"].questions.inputTypes,
     },
+    {
+        name: "maskType:masktype",
+        default: "none",
+        visibleIndex: 0,
+        dependsOn: "inputType",
+        visibleIf: function (obj) {
+            return obj.inputType === "text";
+        }
+    },
+    {
+        name: "maskSettings:masksettings",
+        className: "masksettings",
+        visibleIndex: 1,
+        dependsOn: "inputType",
+        visibleIf: function (obj) {
+            return obj.inputType === "text";
+        },
+        onGetValue: function (obj) {
+            return obj.maskSettings.getData();
+        },
+        onSetValue: function (obj, value) {
+            obj.maskSettings.setData(value);
+        },
+    },
+    { name: "inputTextAlignment", default: "auto", choices: ["left", "right", "auto"], visible: false },
     { name: "title", serializationProperty: "locTitle" },
     { name: "maxLength:number", default: -1 },
     { name: "size:number", minValue: 0 },
@@ -50370,9 +50742,9 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    QuestionPanelDynamicModel.prototype.getPanelWrapperCss = function () {
+    QuestionPanelDynamicModel.prototype.getPanelWrapperCss = function (panel) {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__["CssClassBuilder"]()
-            .append(this.cssClasses.panelWrapper)
+            .append(this.cssClasses.panelWrapper, !panel || panel.visible)
             .append(this.cssClasses.panelWrapperInRow, this.panelRemoveButtonLocation === "right")
             .toString();
     };
@@ -50929,6 +51301,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _utils_devices__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./utils/devices */ "./src/utils/devices.ts");
 /* 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");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -50960,6 +51333,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 /**
  * A class that describes the Ranking question type.
  *
@@ -50979,27 +51353,33 @@ var QuestionRankingModel = /** @class */ (function (_super) {
             if (_this.visibleChoices.length === 1 && !_this.selectToRankEnabled) {
                 _this.value = [];
                 _this.value.push(_this.visibleChoices[0].value);
-                _this.updateRankingChoices();
+                _this.updateRankingChoicesSync();
                 return;
             }
             if (_this.isEmpty()) {
-                _this.updateRankingChoices();
+                _this.updateRankingChoicesSync();
                 return;
             }
             if (_this.selectToRankEnabled) {
-                _this.updateRankingChoices();
+                _this.updateRankingChoicesSync();
                 return;
             }
             if (_this.visibleChoices.length > _this.value.length)
                 _this.addToValueByVisibleChoices();
             if (_this.visibleChoices.length < _this.value.length)
                 _this.removeFromValueByVisibleChoices();
-            _this.updateRankingChoices();
+            _this.updateRankingChoicesSync();
         };
         _this.localeChanged = function () {
             _super.prototype.localeChanged.call(_this);
-            _this.updateRankingChoices();
+            _this.updateRankingChoicesSync();
         };
+        _this._rankingChoicesAnimation = new _utils_animation__WEBPACK_IMPORTED_MODULE_10__["AnimationGroup"](_this.getChoicesAnimation(true), function (val) {
+            _this.setPropertyValue("rankingChoices", val);
+        }, function () { return _this.rankingChoices; });
+        _this._unRankingChoicesAnimation = new _utils_animation__WEBPACK_IMPORTED_MODULE_10__["AnimationGroup"](_this.getChoicesAnimation(false), function (val) {
+            _this.setPropertyValue("unRankingChoices", val);
+        }, function () { return _this.unRankingChoices; });
         _this.handlePointerDown = function (event, choice, node) {
             var target = event.target;
             if (!_this.isDragStartNodeValid(target))
@@ -51052,6 +51432,8 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         _this.isValueSetByUser = false;
         _this.setValue = function () {
             var value = [];
+            _this.rankingChoicesAnimation.cancel();
+            _this.unRankingChoicesAnimation.cancel();
             _this.rankingChoices.forEach(function (choice) {
                 value.push(choice.value);
             });
@@ -51059,10 +51441,11 @@ var QuestionRankingModel = /** @class */ (function (_super) {
             _this.isValueSetByUser = true;
         };
         _this.createNewArray("rankingChoices");
+        _this.createNewArray("unRankingChoices");
         _this.registerFunctionOnPropertyValueChanged("selectToRankEnabled", function () {
             _this.clearValue();
             _this.setDragDropRankingChoices();
-            _this.updateRankingChoices();
+            _this.updateRankingChoicesSync();
         });
         return _this;
     }
@@ -51099,10 +51482,12 @@ var QuestionRankingModel = /** @class */ (function (_super) {
     });
     QuestionRankingModel.prototype.getItemClassCore = function (item, options) {
         var itemIndex = this.rankingChoices.indexOf(item);
+        var unrankedItemIndex = this.unRankingChoices.indexOf(item);
         var dropTargetIndex = this.rankingChoices.indexOf(this.currentDropTarget);
+        var isDrop = (this.selectToRankEnabled && itemIndex > -1 && unrankedItemIndex > -1) || this.currentDropTarget === item;
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_6__["CssClassBuilder"]()
             .append(_super.prototype.getItemClassCore.call(this, item, options))
-            .append(this.cssClasses.itemGhostMod, this.currentDropTarget === item)
+            .append(this.cssClasses.itemGhostMod, isDrop)
             .append("sv-dragdrop-movedown", itemIndex === dropTargetIndex + 1 && this.dropTargetNodeMove === "down")
             .append("sv-dragdrop-moveup", itemIndex === dropTargetIndex - 1 && this.dropTargetNodeMove === "up")
             .toString();
@@ -51154,10 +51539,15 @@ var QuestionRankingModel = /** @class */ (function (_super) {
     QuestionRankingModel.prototype.getNumberByIndex = function (index) {
         return this.isEmpty() ? "" : index + 1 + "";
     };
+    QuestionRankingModel.prototype.updateRankingChoicesSync = function () {
+        this.animationAllowed = false;
+        this.updateRankingChoices();
+        this.animationAllowed = true;
+    };
     QuestionRankingModel.prototype.setSurveyImpl = function (value, isLight) {
         _super.prototype.setSurveyImpl.call(this, value, isLight);
         this.setDragDropRankingChoices();
-        this.updateRankingChoices();
+        this.updateRankingChoicesSync();
     };
     QuestionRankingModel.prototype.isAnswerCorrect = function () {
         return _helpers__WEBPACK_IMPORTED_MODULE_8__["Helpers"].isArraysEqual(this.value, this.correctAnswer, false);
@@ -51171,7 +51561,7 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         _super.prototype.onSurveyValueChanged.call(this, newValue);
         if (this.isLoadingFromJson)
             return;
-        this.updateRankingChoices();
+        this.updateRankingChoicesSync();
     };
     QuestionRankingModel.prototype.addToValueByVisibleChoices = function () {
         var newValue = this.value.slice();
@@ -51192,27 +51582,61 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         }
         this.value = newValue;
     };
+    QuestionRankingModel.prototype.getChoicesAnimation = function (isRankingChoices) {
+        var _this = this;
+        return {
+            isAnimationEnabled: function () { return _src_settings__WEBPACK_IMPORTED_MODULE_9__["settings"].animationEnabled && _this.animationAllowed; },
+            getLeaveOptions: function (item) {
+                var choices = isRankingChoices ? _this.rankingChoices : _this.unRankingChoices;
+                if (_this.renderedSelectToRankAreasLayout == "vertical" && choices.length == 1 && choices.indexOf(item) >= 0) {
+                    return { cssClass: "sv-ranking-item--animate-item-removing-empty" };
+                }
+                return { cssClass: "sv-ranking-item--animate-item-removing" };
+            },
+            getEnterOptions: function (item) {
+                var choices = isRankingChoices ? _this.rankingChoices : _this.unRankingChoices;
+                if (_this.renderedSelectToRankAreasLayout == "vertical" && choices.length == 1 && choices.indexOf(item) >= 0) {
+                    return { cssClass: "sv-ranking-item--animate-item-adding-empty" };
+                }
+                return { cssClass: "sv-ranking-item--animate-item-adding" };
+            },
+            getAnimatedElement: function (item) {
+                var _a;
+                var containerSelector = isRankingChoices ? ".sv-ranking__container--to" : ".sv-ranking__container--from";
+                return (_a = _this.getWrapperElement()) === null || _a === void 0 ? void 0 : _a.querySelector(containerSelector + " .sv-ranking-item--ghost");
+            }
+        };
+    };
+    Object.defineProperty(QuestionRankingModel.prototype, "rankingChoicesAnimation", {
+        get: function () {
+            return this._rankingChoicesAnimation;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(QuestionRankingModel.prototype, "unRankingChoicesAnimation", {
+        get: function () {
+            return this._unRankingChoicesAnimation;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionRankingModel.prototype, "rankingChoices", {
         get: function () {
             return this.getPropertyValue("rankingChoices", []);
         },
+        set: function (val) {
+            this._rankingChoicesAnimation.sync(val);
+        },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(QuestionRankingModel.prototype, "unRankingChoices", {
         get: function () {
-            var unRankingChoices = [];
-            var rankingChoices = this.rankingChoices;
-            this.visibleChoices.forEach(function (choice) {
-                unRankingChoices.push(choice);
-            });
-            rankingChoices.forEach(function (rankingChoice) {
-                unRankingChoices.forEach(function (choice, index) {
-                    if (choice.value === rankingChoice.value)
-                        unRankingChoices.splice(index, 1);
-                });
-            });
-            return unRankingChoices;
+            return this.getPropertyValue("unRankingChoices", []);
+        },
+        set: function (val) {
+            this._unRankingChoicesAnimation.sync(val);
         },
         enumerable: false,
         configurable: true
@@ -51244,20 +51668,32 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         });
         this.setPropertyValue("rankingChoices", newRankingChoices);
     };
+    QuestionRankingModel.prototype.updateUnRankingChoices = function (newRankingChoices) {
+        var unRankingChoices = [];
+        this.visibleChoices.forEach(function (choice) {
+            unRankingChoices.push(choice);
+        });
+        newRankingChoices.forEach(function (rankingChoice) {
+            unRankingChoices.forEach(function (choice, index) {
+                if (choice.value === rankingChoice.value)
+                    unRankingChoices.splice(index, 1);
+            });
+        });
+        this.unRankingChoices = unRankingChoices;
+    };
     QuestionRankingModel.prototype.updateRankingChoicesSelectToRankMode = function (forceUpdate) {
         var _this = this;
-        if (this.isEmpty()) {
-            this.setPropertyValue("rankingChoices", []);
-            return;
-        }
         var newRankingChoices = [];
-        this.value.forEach(function (valueItem) {
-            _this.visibleChoices.forEach(function (choice) {
-                if (choice.value === valueItem)
-                    newRankingChoices.push(choice);
+        if (!this.isEmpty()) {
+            this.value.forEach(function (valueItem) {
+                _this.visibleChoices.forEach(function (choice) {
+                    if (choice.value === valueItem)
+                        newRankingChoices.push(choice);
+                });
             });
-        });
-        this.setPropertyValue("rankingChoices", newRankingChoices);
+        }
+        this.updateUnRankingChoices(newRankingChoices);
+        this.rankingChoices = newRankingChoices;
     };
     QuestionRankingModel.prototype.endLoadingFromJson = function () {
         _super.prototype.endLoadingFromJson.call(this);
@@ -52043,7 +52479,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         return this.inputId + "_" + index;
     };
     QuestionRatingModel.prototype.supportGoNextPageAutomatic = function () {
-        return this.isMouseDown === true;
+        return this.isMouseDown === true || this.renderAs === "dropdown";
     };
     QuestionRatingModel.prototype.supportOther = function () {
         return false;
@@ -53793,6 +54229,8 @@ var QuestionTextModel = /** @class */ (function (_super) {
     Object.defineProperty(QuestionTextModel.prototype, "inputType", {
         /**
          * A value passed on to the [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types) attribute of the underlying `<input>` element.
+         *
+         * Default value: `"text"`
          */
         get: function () {
             return this.getPropertyValue("inputType");
@@ -54256,11 +54694,20 @@ var QuestionTextModel = /** @class */ (function (_super) {
         get: function () {
             var style = {};
             style.width = this.inputWidth;
+            this.updateTextAlign(style);
             return style;
         },
         enumerable: false,
         configurable: true
     });
+    QuestionTextModel.prototype.updateTextAlign = function (style) {
+        if (this.inputTextAlignment !== "auto") {
+            style.textAlign = this.inputTextAlignment;
+        }
+        else if (this.maskType === "numeric" || this.maskType === "currency") {
+            style.textAlign = "right";
+        }
+    };
     QuestionTextModel.prototype.updateValueOnEvent = function (event) {
         var newValue = event.target.value;
         if (!this.isTwoValueEquals(this.value, newValue)) {
@@ -54282,6 +54729,9 @@ var QuestionTextModel = /** @class */ (function (_super) {
             onSet: function (newValue, target) { target.onSetMaskType(newValue); }
         })
     ], QuestionTextModel.prototype, "maskType", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
+    ], QuestionTextModel.prototype, "inputTextAlignment", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], QuestionTextModel.prototype, "_inputValue", void 0);
@@ -54448,6 +54898,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("text", [
             return isMinMaxType(obj);
         },
     },
+    { name: "inputTextAlignment", default: "auto", choices: ["left", "right", "auto"], visible: false },
     {
         name: "maskType:masktype",
         default: "none",
@@ -56176,7 +56627,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./settings */ "./src/settings.ts");
 /* harmony import */ var _actions_container__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./actions/container */ "./src/actions/container.ts");
 /* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
-/* harmony import */ var _global_variables_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./global_variables_utils */ "./src/global_variables_utils.ts");
+/* harmony import */ var _utils_animation__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./utils/animation */ "./src/utils/animation.ts");
+/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./utils/utils */ "./src/utils/utils.ts");
+/* harmony import */ var _global_variables_utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./global_variables_utils */ "./src/global_variables_utils.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -56206,6 +56659,8 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
+
 /**
  * A base class for the [`SurveyElement`](https://surveyjs.io/form-library/documentation/surveyelement) and [`SurveyModel`](https://surveyjs.io/form-library/documentation/surveymodel) classes.
  */
@@ -56390,6 +56845,20 @@ var SurveyElement = /** @class */ (function (_super) {
         _this.isEditableTemplateElement = false;
         _this.isInteractiveDesignElement = true;
         _this.isSingleInRow = true;
+        _this._renderedIsExpanded = true;
+        _this._isAnimatingCollapseExpand = false;
+        _this.animationCollapsed = new _utils_animation__WEBPACK_IMPORTED_MODULE_7__["AnimationBoolean"](_this.getExpandCollapseAnimationOptions(), function (val) {
+            _this._renderedIsExpanded = val;
+            if (_this.animationAllowed) {
+                if (val) {
+                    _this.isAnimatingCollapseExpand = true;
+                }
+                else {
+                    _this.updateElementCss(false);
+                }
+            }
+        }, function () { return _this.renderedIsExpanded; });
+        _this.animationAllowedValue = true;
         _this.name = name;
         _this.createNewArray("errors");
         _this.createNewArray("titleActions");
@@ -56435,11 +56904,11 @@ var SurveyElement = /** @class */ (function (_super) {
             elLeft = el.getBoundingClientRect().left;
             needScroll = elLeft < 0;
         }
-        if (!needScroll && _global_variables_utils__WEBPACK_IMPORTED_MODULE_7__["DomWindowHelper"].isAvailable()) {
-            var height = _global_variables_utils__WEBPACK_IMPORTED_MODULE_7__["DomWindowHelper"].getInnerHeight();
+        if (!needScroll && _global_variables_utils__WEBPACK_IMPORTED_MODULE_9__["DomWindowHelper"].isAvailable()) {
+            var height = _global_variables_utils__WEBPACK_IMPORTED_MODULE_9__["DomWindowHelper"].getInnerHeight();
             needScroll = height > 0 && height < elTop;
             if (!needScroll && checkLeft) {
-                var width = _global_variables_utils__WEBPACK_IMPORTED_MODULE_7__["DomWindowHelper"].getInnerWidth();
+                var width = _global_variables_utils__WEBPACK_IMPORTED_MODULE_9__["DomWindowHelper"].getInnerWidth();
                 needScroll = width > 0 && width < elLeft;
             }
         }
@@ -56467,7 +56936,7 @@ var SurveyElement = /** @class */ (function (_super) {
         return null;
     };
     SurveyElement.FocusElement = function (elementId) {
-        if (!elementId || !_global_variables_utils__WEBPACK_IMPORTED_MODULE_7__["DomDocumentHelper"].isAvailable())
+        if (!elementId || !_global_variables_utils__WEBPACK_IMPORTED_MODULE_9__["DomDocumentHelper"].isAvailable())
             return false;
         var res = SurveyElement.focusElementCore(elementId);
         if (!res) {
@@ -56550,6 +57019,7 @@ var SurveyElement = /** @class */ (function (_super) {
         },
         set: function (val) {
             this.setPropertyValue("state", val);
+            this.renderedIsExpanded = !(this.state === "collapsed" && !this.isDesignMode);
         },
         enumerable: false,
         configurable: true
@@ -57204,7 +57674,7 @@ var SurveyElement = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyElement.prototype, "hasParent", {
         get: function () {
-            return (this.parent && !this.parent.isPage && (!this.parent.originalPage || this.survey.isShowingPreview)) || (this.parent === undefined);
+            return (this.parent && !this.parent.isPage && (!this.parent.originalPage)) || (this.parent === undefined);
         },
         enumerable: false,
         configurable: true
@@ -57226,11 +57696,14 @@ var SurveyElement = /** @class */ (function (_super) {
         return this.shouldAddRunnerStyles() && (this.hasParent);
     };
     SurveyElement.prototype.getCssRoot = function (cssClasses) {
+        var isExpanadable = !!this.isCollapsed || !!this.isExpanded;
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_6__["CssClassBuilder"]()
             .append(cssClasses.withFrame, this.getHasFrameV2() && !this.isCompact)
             .append(cssClasses.compact, this.isCompact && this.getHasFrameV2())
             .append(cssClasses.collapsed, !!this.isCollapsed)
-            .append(cssClasses.expanded, !!this.isExpanded)
+            .append(cssClasses.expandableAnimating, isExpanadable && this.isAnimatingCollapseExpand)
+            .append(cssClasses.expanded, !!this.isExpanded && this.renderedIsExpanded)
+            .append(cssClasses.expandable, isExpanadable)
             .append(cssClasses.nested, this.getIsNested())
             .toString();
     };
@@ -57382,12 +57855,12 @@ var SurveyElement = /** @class */ (function (_super) {
     });
     SurveyElement.prototype.isContainsSelection = function (el) {
         var elementWithSelection = undefined;
-        var _document = _global_variables_utils__WEBPACK_IMPORTED_MODULE_7__["DomDocumentHelper"].getDocument();
-        if (_global_variables_utils__WEBPACK_IMPORTED_MODULE_7__["DomDocumentHelper"].isAvailable() && !!_document && _document["selection"]) {
+        var _document = _global_variables_utils__WEBPACK_IMPORTED_MODULE_9__["DomDocumentHelper"].getDocument();
+        if (_global_variables_utils__WEBPACK_IMPORTED_MODULE_9__["DomDocumentHelper"].isAvailable() && !!_document && _document["selection"]) {
             elementWithSelection = _document["selection"].createRange().parentElement();
         }
         else {
-            var selection = _global_variables_utils__WEBPACK_IMPORTED_MODULE_7__["DomWindowHelper"].getSelection();
+            var selection = _global_variables_utils__WEBPACK_IMPORTED_MODULE_9__["DomWindowHelper"].getSelection();
             if (!!selection && selection.rangeCount > 0) {
                 var range = selection.getRangeAt(0);
                 if (range.startOffset !== range.endOffset) {
@@ -57452,6 +57925,84 @@ var SurveyElement = /** @class */ (function (_super) {
             });
         }
     };
+    SurveyElement.prototype.setWrapperElement = function (element) {
+        this.wrapperElement = element;
+    };
+    SurveyElement.prototype.getWrapperElement = function () {
+        return this.wrapperElement;
+    };
+    Object.defineProperty(SurveyElement.prototype, "isAnimatingCollapseExpand", {
+        get: function () {
+            return this._isAnimatingCollapseExpand || this._renderedIsExpanded != this.isExpanded;
+        },
+        set: function (val) {
+            if (val !== this._isAnimatingCollapseExpand) {
+                this._isAnimatingCollapseExpand = val;
+                this.updateElementCss(false);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyElement.prototype.getExpandCollapseAnimationOptions = function () {
+        var _this = this;
+        var beforeRunAnimation = function (el) {
+            _this.isAnimatingCollapseExpand = true;
+            el.style.setProperty("--animation-height", el.offsetHeight + "px");
+        };
+        var afterRunAnimation = function (el) {
+            _this.isAnimatingCollapseExpand = false;
+        };
+        return {
+            getEnterOptions: function () {
+                var cssClasses = _this.isPanel ? _this.cssClasses.panel : _this.cssClasses;
+                return {
+                    cssClass: cssClasses.contentFadeIn,
+                    onBeforeRunAnimation: beforeRunAnimation,
+                    onAfterRunAnimation: afterRunAnimation,
+                };
+            },
+            getLeaveOptions: function () {
+                var cssClasses = _this.isPanel ? _this.cssClasses.panel : _this.cssClasses;
+                return { cssClass: cssClasses.contentFadeOut,
+                    onBeforeRunAnimation: beforeRunAnimation,
+                    onAfterRunAnimation: afterRunAnimation
+                };
+            },
+            getAnimatedElement: function () {
+                var _a;
+                var cssClasses = _this.isPanel ? _this.cssClasses.panel : _this.cssClasses;
+                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 undefined;
+            },
+            isAnimationEnabled: function () { return _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].animationEnabled && _this.animationAllowed && !_this.isDesignMode; }
+        };
+    };
+    Object.defineProperty(SurveyElement.prototype, "renderedIsExpanded", {
+        get: function () {
+            return !!this._renderedIsExpanded;
+        },
+        set: function (val) {
+            this.animationCollapsed.sync(val);
+        },
+        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.dispose = function () {
         _super.prototype.dispose.call(this);
         if (this.titleToolbarValue) {
@@ -57474,6 +58025,9 @@ var SurveyElement = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: true })
     ], SurveyElement.prototype, "allowRootStyle", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])()
+    ], SurveyElement.prototype, "_renderedIsExpanded", void 0);
     return SurveyElement;
 }(SurveyElementCore));
 
@@ -62960,14 +63514,12 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     SurveyModel.prototype.processResponsiveness = function (width, mobileWidth) {
         var isMobile = width < mobileWidth;
-        this.layoutElements.forEach(function (layoutElement) { return layoutElement.processResponsiveness && layoutElement.processResponsiveness(width); });
-        if (this.isMobile === isMobile) {
-            return false;
-        }
-        else {
+        var isMobileChanged = this.isMobile !== isMobile;
+        if (isMobileChanged) {
             this.setIsMobile(isMobile);
-            return true;
         }
+        this.layoutElements.forEach(function (layoutElement) { return layoutElement.processResponsiveness && layoutElement.processResponsiveness(width); });
+        return isMobileChanged;
     };
     SurveyModel.prototype.triggerResponsiveness = function (hard) {
         this.getAllQuestions().forEach(function (question) {
@@ -65712,7 +66264,7 @@ var SurveyModel = /** @class */ (function (_super) {
                 }
             }
             else if (isStrCiEqual(layoutElement.id, "advanced-header")) {
-                if (this.state === "running" && layoutElement.container === container) {
+                if ((this.state === "running" || this.state === "starting") && layoutElement.container === container) {
                     containerLayoutElements.push(layoutElement);
                 }
             }
@@ -67847,6 +68399,287 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("runexpressiontr
 }, "surveytrigger");
 
 
+/***/ }),
+
+/***/ "./src/utils/animation.ts":
+/*!********************************!*\
+  !*** ./src/utils/animation.ts ***!
+  \********************************/
+/*! exports provided: AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationBoolean, AnimationGroup */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__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__, "AnimationBoolean", function() { return AnimationBoolean; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationGroup", function() { return AnimationGroup; });
+/* harmony import */ var _taskmanager__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./taskmanager */ "./src/utils/taskmanager.ts");
+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 AnimationUtils = /** @class */ (function () {
+    function AnimationUtils() {
+        this.cancelQueue = [];
+    }
+    AnimationUtils.prototype.getMsFromRule = function (value) {
+        if (value === "auto")
+            return 0;
+        return Number(value.slice(0, -1).replace(",", ".")) * 1000;
+    };
+    AnimationUtils.prototype.getAnimationsCount = function (element) {
+        var animationName = "";
+        if (getComputedStyle) {
+            animationName = getComputedStyle(element).animationName;
+        }
+        return (animationName && animationName != "none" ? animationName.split(", ").length : 0);
+    };
+    AnimationUtils.prototype.getAnimationDuration = function (element) {
+        var style = getComputedStyle(element);
+        var delays = style["animationDelay"].split(", ");
+        var durations = style["animationDuration"].split(", ");
+        var duration = 0;
+        for (var i = 0; i < Math.max(durations.length, delays.length); i++) {
+            duration = Math.max(duration, this.getMsFromRule(durations[i % durations.length]) + this.getMsFromRule(delays[i % delays.length]));
+        }
+        return duration;
+    };
+    AnimationUtils.prototype.onAnimationEnd = function (element, callback, options) {
+        var _this = this;
+        var cancelTimeout;
+        var animationsCount = this.getAnimationsCount(element);
+        var onEndCallback = function (isCancel) {
+            if (isCancel === void 0) { isCancel = true; }
+            options.onAfterRunAnimation && options.onAfterRunAnimation(element);
+            callback(isCancel);
+            clearTimeout(cancelTimeout);
+            _this.cancelQueue.splice(_this.cancelQueue.indexOf(onEndCallback), 1);
+            element.removeEventListener("animationend", onAnimationEndCallback);
+        };
+        var onAnimationEndCallback = function (event) {
+            if (event.target == event.currentTarget && --animationsCount <= 0) {
+                onEndCallback(false);
+            }
+        };
+        if (animationsCount > 0) {
+            element.addEventListener("animationend", onAnimationEndCallback);
+            this.cancelQueue.push(onEndCallback);
+            cancelTimeout = setTimeout(function () {
+                onEndCallback(false);
+            }, this.getAnimationDuration(element) + 10);
+        }
+        else {
+            callback(true);
+        }
+    };
+    AnimationUtils.prototype.beforeAnimationRun = function (element, options) {
+        if (element) {
+            options.onBeforeRunAnimation && options.onBeforeRunAnimation(element);
+        }
+    };
+    AnimationUtils.prototype.runLeaveAnimation = function (element, options, callback) {
+        if (element && options.cssClass) {
+            element.classList.add(options.cssClass);
+            var onAnimationEndCallback = function (isCancel) {
+                callback();
+                if (isCancel) {
+                    element.classList.remove(options.cssClass);
+                }
+                else {
+                    requestAnimationFrame(function () {
+                        requestAnimationFrame(function () {
+                            element.classList.remove(options.cssClass);
+                        });
+                    });
+                }
+            };
+            this.onAnimationEnd(element, onAnimationEndCallback, options);
+        }
+        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 () {
+        this.cancelQueue.forEach(function (func) { return func(); });
+        this.cancelQueue = [];
+    };
+    return AnimationUtils;
+}());
+
+var AnimationPropertyUtils = /** @class */ (function (_super) {
+    __extends(AnimationPropertyUtils, _super);
+    function AnimationPropertyUtils() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    AnimationPropertyUtils.prototype.onEnter = function (getElement, options) {
+        var _this = this;
+        var callback = function () {
+            var element = getElement();
+            _this.beforeAnimationRun(element, options);
+            _this.runEnterAnimation(element, options);
+        };
+        requestAnimationFrame(function () {
+            if (getElement()) {
+                callback();
+            }
+            else {
+                requestAnimationFrame(callback);
+            }
+        });
+    };
+    AnimationPropertyUtils.prototype.onLeave = function (getElement, callback, options) {
+        var element = getElement();
+        this.beforeAnimationRun(element, options);
+        this.runLeaveAnimation(element, options, callback);
+    };
+    return AnimationPropertyUtils;
+}(AnimationUtils));
+
+var AnimationGroupUtils = /** @class */ (function (_super) {
+    __extends(AnimationGroupUtils, _super);
+    function AnimationGroupUtils() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    AnimationGroupUtils.prototype.onEnter = function (getElement, getOptions, elements) {
+        var _this = this;
+        if (elements.length == 0)
+            return;
+        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));
+                });
+            };
+            if (!getElement(elements[0])) {
+                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);
+        });
+    };
+    return AnimationGroupUtils;
+}(AnimationUtils));
+
+var AnimationProperty = /** @class */ (function () {
+    function AnimationProperty(animationOptions, update, getCurrentValue) {
+        var _this = this;
+        this.animationOptions = animationOptions;
+        this.update = update;
+        this.getCurrentValue = getCurrentValue;
+        this._debouncedSync = Object(_taskmanager__WEBPACK_IMPORTED_MODULE_0__["debounce"])(function (newValue) {
+            _this.animation.cancel();
+            _this._sync(newValue);
+        });
+    }
+    AnimationProperty.prototype.sync = function (newValue) {
+        if (this.animationOptions.isAnimationEnabled()) {
+            this._debouncedSync.run(newValue);
+        }
+        else {
+            this.update(newValue);
+        }
+    };
+    AnimationProperty.prototype.cancel = function () {
+        this.animation.cancel();
+        this._debouncedSync.cancel();
+    };
+    return AnimationProperty;
+}());
+var AnimationBoolean = /** @class */ (function (_super) {
+    __extends(AnimationBoolean, _super);
+    function AnimationBoolean() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.animation = new AnimationPropertyUtils();
+        return _this;
+    }
+    AnimationBoolean.prototype._sync = function (newValue) {
+        var _this = this;
+        if (newValue !== this.getCurrentValue()) {
+            if (newValue) {
+                this.update(newValue);
+                this.animation.onEnter(function () { return _this.animationOptions.getAnimatedElement(); }, this.animationOptions.getEnterOptions());
+            }
+            else {
+                this.animation.onLeave(function () { return _this.animationOptions.getAnimatedElement(); }, function () {
+                    _this.update(newValue);
+                }, this.animationOptions.getLeaveOptions());
+            }
+        }
+        else {
+            this.update(newValue);
+        }
+    };
+    return AnimationBoolean;
+}(AnimationProperty));
+
+var AnimationGroup = /** @class */ (function (_super) {
+    __extends(AnimationGroup, _super);
+    function AnimationGroup() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.animation = new AnimationGroupUtils();
+        return _this;
+    }
+    AnimationGroup.prototype._sync = function (newValue) {
+        var _this = this;
+        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);
+        }
+        else {
+            this.update(newValue);
+        }
+    };
+    return AnimationGroup;
+}(AnimationProperty));
+
+
+
 /***/ }),
 
 /***/ "./src/utils/camera.ts":
@@ -68586,6 +69419,117 @@ var VerticalResponsivityManager = /** @class */ (function (_super) {
 
 
 
+/***/ }),
+
+/***/ "./src/utils/taskmanager.ts":
+/*!**********************************!*\
+  !*** ./src/utils/taskmanager.ts ***!
+  \**********************************/
+/*! exports provided: Task, TaskManger, debounce */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Task", function() { return Task; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TaskManger", function() { return TaskManger; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "debounce", function() { return debounce; });
+var Task = /** @class */ (function () {
+    function Task(func, isMultiple) {
+        var _this = this;
+        if (isMultiple === void 0) { isMultiple = false; }
+        this.func = func;
+        this.isMultiple = isMultiple;
+        this._isCompleted = false;
+        this.execute = function () {
+            if (!_this._isCompleted) {
+                _this.func();
+                _this._isCompleted = !_this.isMultiple;
+            }
+        };
+    }
+    Task.prototype.discard = function () {
+        this._isCompleted = true;
+    };
+    Object.defineProperty(Task.prototype, "isCompleted", {
+        get: function () {
+            return this._isCompleted;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return Task;
+}());
+
+var TaskManger = /** @class */ (function () {
+    function TaskManger(interval) {
+        if (interval === void 0) { interval = 100; }
+        this.interval = interval;
+        setTimeout(TaskManger.Instance().tick, interval);
+    }
+    // dispose
+    TaskManger.Instance = function () {
+        if (!TaskManger.instance) {
+            TaskManger.instance = new TaskManger();
+        }
+        return TaskManger.instance;
+    };
+    TaskManger.prototype.tick = function () {
+        try {
+            var newTasks = [];
+            for (var i = 0; i < TaskManger.tasks.length; i++) {
+                var task = TaskManger.tasks[i];
+                task.execute();
+                if (!task.isCompleted) {
+                    newTasks.push(task);
+                }
+                else {
+                    if (typeof task.dispose === "function") {
+                        task.dispose();
+                    }
+                }
+            }
+            TaskManger.tasks = newTasks;
+        }
+        finally {
+            setTimeout(TaskManger.Instance().tick, this.interval);
+        }
+    };
+    TaskManger.schedule = function (task) {
+        TaskManger.tasks.push(task);
+    };
+    TaskManger.instance = undefined;
+    TaskManger.tasks = [];
+    return TaskManger;
+}());
+
+function debounce(func) {
+    var _this = this;
+    var isSheduled = false;
+    var isCanceled = false;
+    var funcArgs;
+    return { run: (function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            isCanceled = false;
+            funcArgs = args;
+            if (!isSheduled) {
+                isSheduled = true;
+                queueMicrotask(function () {
+                    if (!isCanceled) {
+                        func.apply(_this, funcArgs);
+                    }
+                    isCanceled = false;
+                    isSheduled = false;
+                });
+            }
+        }), cancel: function () {
+            isCanceled = true;
+        } };
+}
+
+
 /***/ }),
 
 /***/ "./src/utils/utils.ts":