survey-core 1.9.136 → 1.9.138

package/survey.core.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.136
+ * surveyjs - Survey JavaScript library v1.9.138
  * 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: "",
@@ -5531,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",
@@ -5542,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",
@@ -5575,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",
@@ -6771,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);
@@ -6919,7 +6933,7 @@ var DragDropCore = /** @class */ (function () {
         return (this.dropTarget === this.prevDropTarget && newIsBottom === this.isBottom);
     };
     DragDropCore.prototype.getShortcutText = function (draggedElement) {
-        return draggedElement.shortcutText;
+        return draggedElement === null || draggedElement === void 0 ? void 0 : draggedElement.shortcutText;
     };
     DragDropCore.prototype.createDraggedElementShortcut = function (text, draggedElementNode, event) {
         var draggedElementShortcut = _global_variables_utils__WEBPACK_IMPORTED_MODULE_2__["DomDocumentHelper"].createElement("div");
@@ -6997,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 () {
@@ -7454,8 +7470,12 @@ var DragDropMatrixRows = /** @class */ (function (_super) {
         dropTargetRenderedRow = matrix.renderedTable.rows.filter(function (renderedRow) { return renderedRow.row && renderedRow.row.id === dataAttributeValue; })[0];
         return dropTargetRenderedRow.row;
     };
+    DragDropMatrixRows.prototype.canInsertIntoThisRow = function (row) {
+        var lockedRows = this.parentElement.lockedRowCount;
+        return lockedRows <= 0 || row.rowIndex > lockedRows;
+    };
     DragDropMatrixRows.prototype.isDropTargetValid = function (dropTarget, dropTargetNode) {
-        return true;
+        return this.canInsertIntoThisRow(dropTarget);
     };
     DragDropMatrixRows.prototype.calculateIsBottom = function (clientY) {
         var rendreredRows = this.parentElement.renderedTable.rows;
@@ -7466,8 +7486,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;
@@ -7575,10 +7593,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", {
@@ -7681,6 +7695,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;
@@ -7705,7 +7723,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 ||
@@ -7722,10 +7741,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") {
@@ -7779,18 +7825,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();
@@ -7839,30 +7901,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"]));
 
 
 
@@ -9510,8 +9563,8 @@ __webpack_require__.r(__webpack_exports__);
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.9.136";
-ReleaseDate = "" + "2024-03-26";
+Version = "" + "1.9.138";
+ReleaseDate = "" + "2024-04-09";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -9692,7 +9745,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";
@@ -10137,16 +10190,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 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 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__, "ActionContainer", function() { return _actions_container__WEBPACK_IMPORTED_MODULE_9__["ActionContainer"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AnimationBoolean", function() { return _utils_animation__WEBPACK_IMPORTED_MODULE_8__["AnimationBoolean"]; });
 
-/* 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 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_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_10__["ActionContainer"]; });
+
+/* 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
 
@@ -10165,13 +10229,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";
@@ -10609,6 +10674,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"]; });
@@ -21476,7 +21551,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;
@@ -21486,6 +21560,12 @@ var InputElementAdapter = /** @class */ (function () {
                 _this.inputElement.value = maskedValue;
             }
         };
+        this.clickHandler = function (event) {
+            if (_this.inputElement.value == _this.inputMaskInstance.getMaskedValue("")) {
+                _this.inputElement.setSelectionRange(0, 0);
+                event.preventDefault();
+            }
+        };
         this.beforeInputHandler = function (event) {
             var args = _this.createArgs(event);
             var result = _this.inputMaskInstance.processInput(args);
@@ -21495,8 +21575,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();
     }
@@ -21522,11 +21609,15 @@ var InputElementAdapter = /** @class */ (function () {
     InputElementAdapter.prototype.addInputEventListener = function () {
         if (!!this.inputElement) {
             this.inputElement.addEventListener("beforeinput", this.beforeInputHandler);
+            this.inputElement.addEventListener("click", this.clickHandler);
+            this.inputElement.addEventListener("focus", this.clickHandler);
         }
     };
     InputElementAdapter.prototype.removeInputEventListener = function () {
         if (!!this.inputElement) {
             this.inputElement.removeEventListener("beforeinput", this.beforeInputHandler);
+            this.inputElement.removeEventListener("click", this.clickHandler);
+            this.inputElement.removeEventListener("focus", this.clickHandler);
         }
     };
     InputElementAdapter.prototype.dispose = function () {
@@ -21961,12 +22052,20 @@ var InputMaskDateTime = /** @class */ (function (_super) {
         });
     };
     InputMaskDateTime.prototype.getISO_8601Format = function (dateTime) {
-        if (dateTime.year === undefined || dateTime.month === undefined || dateTime.day === undefined)
-            return "";
-        var year = this.getPlaceholder(4, dateTime.year.toString(), "0") + dateTime.year;
-        var month = this.getPlaceholder(2, dateTime.month.toString(), "0") + dateTime.month;
-        var day = this.getPlaceholder(2, dateTime.day.toString(), "0") + dateTime.day;
-        return [year, month, day].join("-");
+        var date = [];
+        if (dateTime.year !== undefined) {
+            var year = this.getPlaceholder(4, dateTime.year.toString(), "0") + dateTime.year;
+            date.push(year);
+        }
+        if (dateTime.month !== undefined && dateTime.year !== undefined) {
+            var month = this.getPlaceholder(2, dateTime.month.toString(), "0") + dateTime.month;
+            date.push(month);
+        }
+        if (dateTime.day !== undefined && dateTime.month !== undefined && dateTime.year !== undefined) {
+            var day = this.getPlaceholder(2, dateTime.day.toString(), "0") + dateTime.day;
+            date.push(day);
+        }
+        return date.join("-");
     };
     InputMaskDateTime.prototype.isYearValid = function (dateTime) {
         if (dateTime.min === undefined && dateTime.max === undefined)
@@ -22009,13 +22108,36 @@ var InputMaskDateTime = /** @class */ (function (_super) {
                 data = data.slice(0, data.length - 1);
             }
         }
-        else if (propertyName === "year" && !this.isYearValid(dateTime)) {
+        dateTime[propertyName] = parseInt(data);
+        if (propertyName === "year" && !this.isYearValid(dateTime)) {
             data = data.slice(0, data.length - 1);
         }
         else if ((propertyName === "day" && parseInt(data[0]) > 3) || (propertyName === "month" && parseInt(data[0]) > 1)) {
+            if (this.isDateValid(dateTime)) {
+                newItem.isCompleted = true;
+            }
+            else {
+                data = data.slice(0, data.length - 1);
+            }
+        }
+        else if ((propertyName === "day" && parseInt(data[0]) <= 3 && parseInt(data[0]) !== 0) || (propertyName === "month" && parseInt(data[0]) <= 1 && parseInt(data[0]) !== 0)) {
+            var prevValue = dateTime[propertyName];
+            var tempValue = prevValue * 10;
+            var maxValue = propertyName === "month" ? 3 : 10;
             newItem.isCompleted = true;
+            for (var index = 0; index < maxValue; index++) {
+                dateTime[propertyName] = tempValue + index;
+                if (this.isDateValid(dateTime)) {
+                    newItem.isCompleted = false;
+                    break;
+                }
+            }
+            dateTime[propertyName] = prevValue;
+            if (newItem.isCompleted && !this.isDateValid(dateTime)) {
+                data = data.slice(0, data.length - 1);
+            }
         }
-        newItem.value = data;
+        newItem.value = data || undefined;
         dateTime[propertyName] = parseInt(data) > 0 ? parseInt(data) : undefined;
     };
     InputMaskDateTime.prototype.getCorrectDatePartFormat = function (inputData, matchWholeMask) {
@@ -22062,6 +22184,11 @@ var InputMaskDateTime = /** @class */ (function (_super) {
         var result = "";
         var prevSeparator = "";
         var prevIsCompleted = false;
+        var lastItemWithDataIndex = this.inputDateTimeData.length - 1;
+        if (!matchWholeMask) {
+            var arr = this.inputDateTimeData.filter(function (item) { return !!item.value; });
+            lastItemWithDataIndex = this.inputDateTimeData.indexOf(arr[arr.length - 1]);
+        }
         for (var index = 0; index < this.inputDateTimeData.length; index++) {
             var inputData = this.inputDateTimeData[index];
             switch (inputData.lexem.type) {
@@ -22073,7 +22200,8 @@ var InputMaskDateTime = /** @class */ (function (_super) {
                         return result;
                     }
                     else {
-                        var data = this.getCorrectDatePartFormat(inputData, matchWholeMask);
+                        var _matchWholeMask = matchWholeMask || lastItemWithDataIndex !== index;
+                        var data = this.getCorrectDatePartFormat(inputData, _matchWholeMask);
                         result += (prevSeparator + data);
                         prevIsCompleted = inputData.isCompleted;
                     }
@@ -22110,32 +22238,6 @@ var InputMaskDateTime = /** @class */ (function (_super) {
         var result = this.getFormatedString(matchWholeMask);
         return result;
     };
-    InputMaskDateTime.prototype.getPartsOld = function (input) {
-        var inputParts = [];
-        var separatorLexems = this.lexems.filter(function (l) { return l.type === "separator"; });
-        var separatorLexemsIndex = 0;
-        do {
-            if (!separatorLexems[separatorLexemsIndex]) {
-                if (!!input) {
-                    inputParts.push(input);
-                    input = "";
-                }
-                break;
-            }
-            var separatorCharIndex = input.indexOf(separatorLexems[separatorLexemsIndex].value);
-            if (separatorCharIndex !== -1) {
-                var part = input.slice(0, separatorCharIndex);
-                if (!!part) {
-                    inputParts.push(part);
-                }
-                input = input.slice(separatorCharIndex + 1);
-            }
-            else {
-            }
-            separatorLexemsIndex++;
-        } while (!!input);
-        return inputParts;
-    };
     InputMaskDateTime.prototype.getParts = function (input) {
         var inputParts = [];
         var lexemsWithValue = this.lexems.filter(function (l) { return l.type !== "separator"; });
@@ -22380,7 +22482,7 @@ var InputMaskNumeric = /** @class */ (function (_super) {
         }
         return value;
     };
-    InputMaskNumeric.prototype.validateNumber = function (number) {
+    InputMaskNumeric.prototype.validateNumber = function (number, matchWholeMask) {
         var min = this.min || Number.MIN_SAFE_INTEGER;
         var max = this.max || Number.MAX_SAFE_INTEGER;
         if (this.min !== undefined || this.max !== undefined) {
@@ -22388,7 +22490,12 @@ var InputMaskNumeric = /** @class */ (function (_super) {
             if (Number.isNaN(value)) {
                 return true;
             }
-            return value >= min && value <= max;
+            if (!matchWholeMask) {
+                return value >= 0 && value <= max || value < 0 && value >= min;
+            }
+            else {
+                return value >= min && value <= max;
+            }
         }
         return true;
     };
@@ -22403,7 +22510,7 @@ var InputMaskNumeric = /** @class */ (function (_super) {
             var currentChar = input[inputIndex];
             switch (currentChar) {
                 case "-": {
-                    if (this.allowNegativeValues) {
+                    if (this.allowNegativeValues && (this.min === undefined || this.min < 0)) {
                         minusCharCount++;
                     }
                     break;
@@ -22439,6 +22546,9 @@ var InputMaskNumeric = /** @class */ (function (_super) {
         if (matchWholeMask === void 0) { matchWholeMask = false; }
         var input = (src === undefined || src === null) ? "" : src;
         var parsedNumber = this.parseNumber(input);
+        if (!this.validateNumber(parsedNumber, matchWholeMask)) {
+            return null;
+        }
         var displayText = this.displayNumber(parsedNumber, true, matchWholeMask);
         return displayText;
     };
@@ -22458,7 +22568,7 @@ var InputMaskNumeric = /** @class */ (function (_super) {
         var rightPart = args.prevValue.slice(args.selectionEnd);
         var src = leftPart + rightPart;
         var parsedNumber = this.parseNumber(src);
-        if (!this.validateNumber(parsedNumber)) {
+        if (!this.validateNumber(parsedNumber, false)) {
             return result;
         }
         var maskedValue = this.getNumberMaskedValue(src);
@@ -23146,7 +23256,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) {
@@ -23167,6 +23277,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);
         }
@@ -23392,7 +23511,9 @@ __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");
+/* harmony import */ var _page__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./page */ "./src/page.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -23431,6 +23552,8 @@ var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from
 
 
 
+
+
 var QuestionRowModel = /** @class */ (function (_super) {
     __extends(QuestionRowModel, _super);
     function QuestionRowModel(panel) {
@@ -23438,6 +23561,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");
@@ -23450,12 +23577,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;
@@ -23504,6 +23631,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");
@@ -23511,10 +23641,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
     });
@@ -23524,6 +23692,7 @@ var QuestionRowModel = /** @class */ (function (_super) {
         },
         set: function (val) {
             this.setPropertyValue("visible", val);
+            this.onVisibleChangedCallback && this.onVisibleChangedCallback();
         },
         enumerable: false,
         configurable: true
@@ -23539,9 +23708,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);
@@ -23615,27 +23789,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();
@@ -23644,10 +23797,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 })
@@ -23665,9 +23824,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; });
@@ -23687,16 +23850,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);
@@ -23912,7 +24121,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) {
@@ -23924,6 +24133,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;
         }
@@ -24502,10 +24720,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);
@@ -24539,7 +24760,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++;
@@ -24859,9 +25082,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;
@@ -24870,6 +25093,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();
@@ -25537,6 +25763,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(); }
                 });
             }
@@ -25561,7 +25788,7 @@ var PanelModel = /** @class */ (function (_super) {
     Object.defineProperty(PanelModel.prototype, "hasEditButton", {
         get: function () {
             if (this.survey && this.survey.state === "preview")
-                return this.depth === 1;
+                return (this.parent && this.parent instanceof _page__WEBPACK_IMPORTED_MODULE_13__["PageModel"]);
             return false;
         },
         enumerable: false,
@@ -25617,7 +25844,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
@@ -25881,7 +26108,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;
@@ -26563,12 +26790,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);
@@ -26580,6 +26802,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) {
@@ -26611,7 +26842,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 ||
@@ -26640,19 +26872,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;
@@ -26711,20 +26988,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 () {
@@ -26904,7 +27174,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();
@@ -26917,7 +27187,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);
         }
@@ -26934,7 +27204,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;
@@ -26946,7 +27216,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);
@@ -26964,7 +27233,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);
@@ -35099,6 +35368,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 ||
@@ -35120,6 +35390,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var ComponentQuestionJSON = /** @class */ (function () {
     function ComponentQuestionJSON(name, json) {
         this.name = name;
@@ -35160,6 +35431,11 @@ var ComponentQuestionJSON = /** @class */ (function () {
             return;
         this.json.onUpdateQuestionCssClasses(question, element, css);
     };
+    ComponentQuestionJSON.prototype.onSetQuestionValue = function (question, newValue) {
+        if (!this.json.onSetQuestionValue)
+            return;
+        this.json.onSetQuestionValue(question, newValue);
+    };
     ComponentQuestionJSON.prototype.onPropertyChanged = function (question, propertyName, newValue) {
         if (!this.json.onPropertyChanged)
             return;
@@ -35175,6 +35451,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;
@@ -35450,11 +35731,23 @@ var QuestionCustomModelBase = /** @class */ (function (_super) {
         if (updateIsAnswered === void 0) { updateIsAnswered = true; }
         _super.prototype.setQuestionValue.call(this, newValue, updateIsAnswered);
         this.updateElementCss();
+        if (!!this.customQuestion) {
+            this.customQuestion.onSetQuestionValue(this, newValue);
+        }
     };
     QuestionCustomModelBase.prototype.setNewValue = function (newValue) {
         _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;
@@ -35469,6 +35762,9 @@ var QuestionCustomModelBase = /** @class */ (function (_super) {
     QuestionCustomModelBase.prototype.setValue = function (name, newValue, locNotification, allowNotifyValueChanged) {
         if (!this.data)
             return;
+        if (!!this.customQuestion) {
+            this.customQuestion.onValueChanged(this, name, newValue);
+        }
         var newName = this.convertDataName(name);
         var valueForSurvey = this.convertDataValue(name, newValue);
         if (this.valueToDataCallback) {
@@ -35477,9 +35773,6 @@ var QuestionCustomModelBase = /** @class */ (function (_super) {
         this.data.setValue(newName, valueForSurvey, locNotification, allowNotifyValueChanged);
         this.updateIsAnswered();
         this.updateElementCss();
-        if (!!this.customQuestion) {
-            this.customQuestion.onValueChanged(this, name, newValue);
-        }
     };
     QuestionCustomModelBase.prototype.getQuestionByName = function (name) {
         return undefined;
@@ -36086,7 +36379,8 @@ var QuestionCompositeModel = /** @class */ (function (_super) {
         this.contentPanel.questions.forEach(function (q) { return q.collectNestedQuestions(questions, visibleOnly); });
     };
     QuestionCompositeModel.prototype.convertDataValue = function (name, newValue) {
-        var val = this.getValueForContentPanel(this.value);
+        var val = !!this.contentPanel && !this.isEditingSurveyElement ?
+            this.contentPanel.getValue() : this.getValueForContentPanel(this.value);
         if (!val)
             val = {};
         if (this.isValueEmpty(newValue) && !this.isEditingSurveyElement) {
@@ -39325,11 +39619,12 @@ var QuestionImagePickerModel = /** @class */ (function (_super) {
         /**
          * Specifies the height of containers for images or videos. Accepts positive numbers and CSS values.
          *
-         * Default value: undefined
+         * Default value: `auto`
+         *
+         * This property allows you to specify the exact image height. If you do not set it, the height will be calculated automatically based on the [`minImageHeight`](#minImageHeight) and [`maxImageHeight`](#maxImageHeight) values and available screen height.
          *
-         * Use the `imageFit` property to specify how to fit the images or videos into their containers.
+         * Use the [`imageFit`](#imageFit) property to specify how to fit the images or videos into their containers.
          * @see imageWidth
-         * @see imageFit
          */
         get: function () {
             return this.getPropertyValue("imageHeight");
@@ -39352,11 +39647,12 @@ var QuestionImagePickerModel = /** @class */ (function (_super) {
         /**
          * Specifies the width of containers for images or videos. Accepts positive numbers and CSS values.
          *
-         * Default value: 200
+         * Default value: `auto`
+         *
+         * This property allows you to specify the exact image width. If you do not set it, the width will be calculated automatically based on the [`minImageWidth`](#minImageWidth) and [`maxImageWidth`](#maxImageWidth) values and available screen width.
          *
-         * Use the `imageFit` property to specify how to fit the images or videos into their containers.
+         * Use the [`imageFit`](#imageFit) property to specify how to fit the images or videos into their containers.
          * @see imageHeight
-         * @see imageFit
          */
         get: function () {
             return this.getPropertyValue("imageWidth");
@@ -43748,10 +44044,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
          */
@@ -45237,7 +45532,8 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
     };
     QuestionMatrixDropdownRenderedTable.prototype.getRowDragCell = function (rowIndex) {
         var cell = new QuestionMatrixDropdownRenderedCell();
-        cell.isDragHandlerCell = true;
+        var lockedRows = this.matrix.lockedRowCount;
+        cell.isDragHandlerCell = lockedRows < 1 || rowIndex >= lockedRows;
         cell.className = this.getActionsCellClassName(cell);
         cell.row = this.matrix.visibleRows[rowIndex];
         return cell;
@@ -45827,7 +46123,7 @@ var QuestionMatrixDynamicModel = /** @class */ (function (_super) {
         _this.registerPropertyChangedHandlers(["hideColumnsIfEmpty", "allowAddRows"], function () {
             _this.updateShowTableAndAddRow();
         });
-        _this.registerPropertyChangedHandlers(["allowRowsDragAndDrop", "isReadOnly"], function () { _this.clearRowsAndResetRenderedTable(); });
+        _this.registerPropertyChangedHandlers(["allowRowsDragAndDrop", "isReadOnly", "lockedRowCount"], function () { _this.clearRowsAndResetRenderedTable(); });
         _this.dragOrClickHelper = new _utils_dragOrClickHelper__WEBPACK_IMPORTED_MODULE_9__["DragOrClickHelper"](_this.startDragMatrixRow);
         return _this;
     }
@@ -46058,6 +46354,16 @@ var QuestionMatrixDynamicModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionMatrixDynamicModel.prototype, "lockedRowCount", {
+        get: function () {
+            return this.getPropertyValue("lockedRowCount", 0);
+        },
+        set: function (val) {
+            this.setPropertyValue("lockedRowCount", val);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionMatrixDynamicModel.prototype, "iconDragElement", {
         get: function () {
             return this.cssClasses.iconDragElement;
@@ -46215,7 +46521,10 @@ var QuestionMatrixDynamicModel = /** @class */ (function (_super) {
     QuestionMatrixDynamicModel.prototype.canRemoveRow = function (row) {
         if (!this.survey)
             return true;
-        return this.survey.matrixAllowRemoveRow(this, row.index, row);
+        var index = row.rowIndex - 1;
+        if (this.lockedRowCount > 0 && index < this.lockedRowCount)
+            return false;
+        return this.survey.matrixAllowRemoveRow(this, index, row);
     };
     QuestionMatrixDynamicModel.prototype.addRowUI = function () {
         this.addRow(true);
@@ -46923,9 +47232,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);
@@ -46937,6 +47246,7 @@ var MultipleTextItemModel = /** @class */ (function (_super) {
             _this.editor.focusIn();
         };
         _this.editorValue = _this.createEditor(name);
+        _this.maskSettings = _this.editorValue.maskSettings;
         _this.editor.questionTitleTemplateCallback = function () {
             return "";
         };
@@ -46961,7 +47271,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;
@@ -47012,7 +47325,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;
@@ -47025,7 +47338,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;
@@ -47038,8 +47353,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;
@@ -47066,9 +47380,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;
@@ -47085,7 +47399,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;
@@ -47122,7 +47436,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;
@@ -47142,7 +47456,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;
@@ -47155,7 +47471,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;
@@ -47168,7 +47486,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;
@@ -47181,7 +47501,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;
@@ -47194,7 +47516,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;
@@ -47208,9 +47532,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;
@@ -47400,9 +47786,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
          * {
@@ -47443,6 +47829,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];
@@ -47896,6 +48288,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 },
@@ -50944,6 +51361,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 ||
@@ -50975,6 +51393,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 /**
  * A class that describes the Ranking question type.
  *
@@ -50994,27 +51413,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))
@@ -51067,6 +51492,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);
             });
@@ -51074,10 +51501,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;
     }
@@ -51114,10 +51542,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();
@@ -51169,10 +51599,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);
@@ -51186,7 +51621,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();
@@ -51207,27 +51642,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
@@ -51259,20 +51728,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);
@@ -51348,14 +51829,18 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         var toIndex;
         if (key === " " && !isMovedElementRanked) {
             toIndex = 0;
+            this.animationAllowed = false;
             dnd.selectToRank(this, fromIndex, toIndex);
+            this.animationAllowed = true;
             this.setValueAfterKeydown(toIndex, "to-container");
             return;
         }
         if (!isMovedElementRanked)
             return;
         if (key === " ") {
+            this.animationAllowed = false;
             dnd.unselectFromRank(this, fromIndex);
+            this.animationAllowed = true;
             toIndex = this.unRankingChoices.indexOf(movedElement); //'this.' leads to actual array after the 'unselectFromRank' method
             this.setValueAfterKeydown(toIndex, "from-container");
             return;
@@ -52058,7 +52543,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;
@@ -53808,6 +54293,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");
@@ -56204,7 +56691,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 ||
@@ -56234,6 +56723,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.
  */
@@ -56418,6 +56909,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");
@@ -56463,11 +56968,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;
             }
         }
@@ -56495,7 +57000,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) {
@@ -56578,6 +57083,7 @@ var SurveyElement = /** @class */ (function (_super) {
         },
         set: function (val) {
             this.setPropertyValue("state", val);
+            this.renderedIsExpanded = !(this.state === "collapsed" && !this.isDesignMode);
         },
         enumerable: false,
         configurable: true
@@ -57232,7 +57738,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
@@ -57254,11 +57760,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();
     };
@@ -57410,12 +57919,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) {
@@ -57480,6 +57989,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) {
@@ -57502,6 +58089,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));
 
@@ -65738,7 +66328,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);
                 }
             }
@@ -67873,6 +68463,290 @@ _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 _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../global_variables_utils */ "./src/global_variables_utils.ts");
+/* harmony import */ var _taskmanager__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./taskmanager */ "./src/utils/taskmanager.ts");
+var __extends = (undefined && undefined.__extends) || (function () {
+    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 {
+                    _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
+                        _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
+                            element.classList.remove(options.cssClass);
+                        });
+                    });
+                }
+            };
+            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 () {
+        var cancelQueue = [].concat(this.cancelQueue);
+        cancelQueue.forEach(function (callback) { return callback(); });
+        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);
+        };
+        _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
+            if (getElement()) {
+                callback();
+            }
+            else {
+                _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].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;
+        _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
+            var callback = function () {
+                elements.forEach(function (el) {
+                    _this.beforeAnimationRun(getElement(el), getOptions(el));
+                });
+                elements.forEach(function (el) {
+                    _this.runEnterAnimation(getElement(el), getOptions(el));
+                });
+            };
+            if (!getElement(elements[0])) {
+                _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(callback);
+            }
+            else {
+                callback();
+            }
+        });
+    };
+    AnimationGroupUtils.prototype.onLeave = function (getElement, callback, getOptions, elements) {
+        var _this = this;
+        elements.forEach(function (el) {
+            _this.beforeAnimationRun(getElement(el), getOptions(el));
+        });
+        var counter = elements.length;
+        var onEndCallback = function () {
+            if (--counter <= 0) {
+                callback();
+            }
+        };
+        elements.forEach(function (el) {
+            _this.runLeaveAnimation(getElement(el), getOptions(el), onEndCallback);
+        });
+    };
+    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_1__["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":
@@ -68612,6 +69486,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":