survey-react-ui 1.9.135 → 1.9.137

package/survey-react-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.135
+ * surveyjs - Survey JavaScript library v1.9.137
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1641,6 +1641,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) {
@@ -1702,7 +1704,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) {
@@ -3587,7 +3589,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.135", "survey-react-ui");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.137", "survey-react-ui");
 
 
 /***/ }),
@@ -13961,18 +13963,18 @@ var PopupContainer = /** @class */ (function (_super) {
         }
         this.prevIsVisible = this.model.isVisible;
     };
-    PopupContainer.prototype.renderContainer = function (PopupBaseViewModel) {
+    PopupContainer.prototype.renderContainer = function (popupBaseViewModel) {
         var _this = this;
-        var headerPopup = PopupBaseViewModel.showHeader ? this.renderHeaderPopup(PopupBaseViewModel) : null;
-        var headerContent = !!PopupBaseViewModel.title ? this.renderHeaderContent() : null;
+        var headerPopup = popupBaseViewModel.showHeader ? this.renderHeaderPopup(popupBaseViewModel) : null;
+        var headerContent = !!popupBaseViewModel.title ? this.renderHeaderContent() : null;
         var content = this.renderContent();
-        var footerContent = PopupBaseViewModel.showFooter ? this.renderFooter(this.model) : null;
+        var footerContent = popupBaseViewModel.showFooter ? this.renderFooter(this.model) : null;
         return (react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", { className: "sv-popup__container", style: {
-                left: PopupBaseViewModel.left,
-                top: PopupBaseViewModel.top,
-                height: PopupBaseViewModel.height,
-                width: PopupBaseViewModel.width,
-                minWidth: PopupBaseViewModel.minWidth,
+                left: popupBaseViewModel.left,
+                top: popupBaseViewModel.top,
+                height: popupBaseViewModel.height,
+                width: popupBaseViewModel.width,
+                minWidth: popupBaseViewModel.minWidth,
             }, onClick: function (ev) {
                 _this.clickInside(ev);
             } },
@@ -14036,11 +14038,14 @@ function showModal(componentName, data, onApply, onCancel, cssClass, title, disp
     return showDialog(options);
 }
 function showDialog(dialogOptions, rootElement) {
-    dialogOptions.onHide = function () {
-        react_dom__WEBPACK_IMPORTED_MODULE_0___default.a.unmountComponentAtNode(popupViewModel.container);
-        popupViewModel.dispose();
-    };
     var popupViewModel = Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["createPopupModalViewModel"])(dialogOptions, rootElement);
+    var onVisibilityChangedCallback = function (_, options) {
+        if (!options.isVisible) {
+            react_dom__WEBPACK_IMPORTED_MODULE_0___default.a.unmountComponentAtNode(popupViewModel.container);
+            popupViewModel.dispose();
+        }
+    };
+    popupViewModel.onVisibilityChanged.add(onVisibilityChangedCallback);
     react_dom__WEBPACK_IMPORTED_MODULE_0___default.a.render(react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(PopupContainer, { model: popupViewModel }), popupViewModel.container);
     popupViewModel.model.isVisible = true;
     return popupViewModel;
@@ -15472,6 +15477,7 @@ var SurveyRowElement = /** @class */ (function (_super) {
     function SurveyRowElement(props) {
         var _this = _super.call(this, props) || this;
         _this.element.cssClasses;
+        _this.rootRef = react__WEBPACK_IMPORTED_MODULE_0__["createRef"]();
         return _this;
     }
     SurveyRowElement.prototype.getStateElement = function () {
@@ -15519,9 +15525,27 @@ var SurveyRowElement = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    SurveyRowElement.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        if (this.rootRef.current) {
+            (this.element).setWrapperElement(this.rootRef.current);
+        }
+    };
+    SurveyRowElement.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        this.element.setWrapperElement(undefined);
+    };
     SurveyRowElement.prototype.shouldComponentUpdate = function (nextProps, nextState) {
         if (!_super.prototype.shouldComponentUpdate.call(this, nextProps, nextState))
             return false;
+        if (nextProps.element !== this.element) {
+            if (nextProps.element) {
+                nextProps.element.setWrapperElement(this.rootRef.current);
+            }
+            if (this.element) {
+                this.element.setWrapperElement(undefined);
+            }
+        }
         this.element.cssClasses;
         return true;
     };
@@ -15535,7 +15559,7 @@ var SurveyRowElement = /** @class */ (function (_super) {
                 el.focusIn();
             }
         };
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: css.questionWrapper, style: element.rootStyle, "data-key": innerElement.key, key: innerElement.key, onFocus: focusIn }, this.row.isNeedRender ? innerElement : _element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.createElement(element.skeletonComponentName, { element: element, css: this.css, })));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: css.questionWrapper, style: element.rootStyle, "data-key": innerElement.key, key: innerElement.key, onFocus: focusIn, ref: this.rootRef }, this.row.isNeedRender ? innerElement : _element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.createElement(element.skeletonComponentName, { element: element, css: this.css, })));
     };
     SurveyRowElement.prototype.createElement = function (element, elementIndex) {
         var index = elementIndex ? "-" + elementIndex : 0;
@@ -16078,6 +16102,10 @@ var SurveyPage = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    // shouldComponentUpdate(nextProps: any, nextState: any): boolean {
+    //   if(!super.shouldComponentUpdate(nextProps, nextState)) return false;
+    //   return true;
+    // }
     SurveyPage.prototype.renderElement = function () {
         var title = this.renderTitle();
         var description = this.renderDescription();
@@ -16218,13 +16246,15 @@ var SurveyPanelBase = /** @class */ (function (_super) {
             }
         }
     };
+    SurveyPanelBase.prototype.getIsVisible = function () {
+        return this.panelBase.isVisible;
+    };
     SurveyPanelBase.prototype.canRender = function () {
-        return (_super.prototype.canRender.call(this) && !!this.survey && !!this.panelBase
-            && this.panelBase.isVisible && !!this.panelBase.survey);
+        return (_super.prototype.canRender.call(this) && !!this.survey && !!this.panelBase && !!this.panelBase.survey && this.getIsVisible());
     };
     SurveyPanelBase.prototype.renderRows = function (css) {
         var _this = this;
-        return this.panelBase.rows.map(function (row) { return _this.createRow(row, css); });
+        return this.panelBase.visibleRows.map(function (row) { return _this.createRow(row, css); });
     };
     SurveyPanelBase.prototype.createRow = function (row, css) {
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_row__WEBPACK_IMPORTED_MODULE_2__["SurveyRow"], { key: row.id, row: row, survey: this.survey, creator: this.creator, css: css }));
@@ -16300,11 +16330,11 @@ var SurveyPanel = /** @class */ (function (_super) {
         var errors = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_reactquestion__WEBPACK_IMPORTED_MODULE_1__["SurveyElementErrors"], { element: this.panelBase, cssClasses: this.panelBase.cssClasses, creator: this.creator }));
         var style = {
             paddingLeft: this.panel.innerPaddingLeft,
-            display: !this.panel.isCollapsed ? undefined : "none",
+            display: this.panel.renderedIsExpanded ? undefined : "none",
         };
         var content = null;
-        if (!this.panel.isCollapsed || this.hasBeenExpanded) {
-            this.hasBeenExpanded = true;
+        if (this.panel.renderedIsExpanded) {
+            // this.hasBeenExpanded = true;
             var rows = this.renderRows(this.panelBase.cssClasses);
             var className = this.panelBase.cssClasses.panel.content;
             content = this.renderContent(style, rows, className);
@@ -16356,6 +16386,9 @@ var SurveyPanel = /** @class */ (function (_super) {
             return null;
         return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_6__["SurveyActionBar"], { model: footerToolbar });
     };
+    SurveyPanel.prototype.getIsVisible = function () {
+        return this.panelBase.getIsContentVisible();
+    };
     return SurveyPanel;
 }(_panel_base__WEBPACK_IMPORTED_MODULE_4__["SurveyPanelBase"]));
 
@@ -16555,7 +16588,11 @@ var SurveyProgressButtons = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsConnector }),
             this.state.canShowItemTitles ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null,
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsPageTitle, title: page.renderedNavigationTitle }, page.renderedNavigationTitle),
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsPageDescription, title: page.navigationDescription }, page.navigationDescription)) : null));
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsPageDescription, title: page.navigationDescription }, page.navigationDescription)) : null,
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsButton },
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsButtonBackground }),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsButtonContent }),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, this.model.getItemNumber(page)))));
     };
     SurveyProgressButtons.prototype.clickScrollButton = function (listContainerElement, isLeftScroll) {
         if (!!listContainerElement) {
@@ -17339,8 +17376,7 @@ var SurveyQuestion = /** @class */ (function (_super) {
         return _this;
     }
     SurveyQuestion.renderQuestionBody = function (creator, question) {
-        if (!question.isVisible)
-            return null;
+        // if (!question.isVisible) return null;
         var customWidget = question.customWidget;
         if (!customWidget) {
             return creator.createQuestionElement(question);
@@ -17406,13 +17442,12 @@ var SurveyQuestion = /** @class */ (function (_super) {
     SurveyQuestion.prototype.canRender = function () {
         return (_super.prototype.canRender.call(this) &&
             !!this.question &&
-            !!this.creator &&
-            this.question.isVisible);
+            !!this.creator);
     };
     SurveyQuestion.prototype.renderQuestionContent = function () {
         var question = this.question;
         var contentStyle = {
-            display: !this.question.isCollapsed ? "" : "none",
+            display: this.question.renderedIsExpanded ? "" : "none",
         };
         var cssClasses = question.cssClasses;
         var questionRender = this.renderQuestion();
@@ -20300,7 +20335,7 @@ var SurveyQuestionPanelDynamicItem = /** @class */ (function (_super) {
         var separator = this.question.showSeparator(this.index) ?
             (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("hr", { className: this.question.cssClasses.separator })) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null,
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.getPanelWrapperCss() },
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.getPanelWrapperCss(this.panel) },
                 panel,
                 removeButton),
             separator));
@@ -21283,7 +21318,7 @@ var SurveyRow = /** @class */ (function (_super) {
         configurable: true
     });
     SurveyRow.prototype.canRender = function () {
-        return !!this.row && !!this.survey && !!this.creator && this.row.visible;
+        return !!this.row && !!this.survey && !!this.creator;
     };
     SurveyRow.prototype.renderElementContent = function () {
         var _this = this;
@@ -21304,6 +21339,9 @@ var SurveyRow = /** @class */ (function (_super) {
         var _this = this;
         _super.prototype.componentDidMount.call(this);
         var el = this.rootRef.current;
+        if (this.rootRef.current) {
+            this.row.setRootElement(this.rootRef.current);
+        }
         if (!!el && !this.row.isNeedRender) {
             var rowContainerDiv = el;
             setTimeout(function () {
@@ -21316,6 +21354,8 @@ var SurveyRow = /** @class */ (function (_super) {
             return false;
         if (nextProps.row !== this.row) {
             nextProps.row.isNeedRender = this.row.isNeedRender;
+            nextProps.row.setRootElement(this.rootRef.current);
+            this.row.setRootElement(undefined);
             this.stopLazyRendering();
         }
         this.recalculateCss();
@@ -21327,6 +21367,7 @@ var SurveyRow = /** @class */ (function (_super) {
     };
     SurveyRow.prototype.componentWillUnmount = function () {
         _super.prototype.componentWillUnmount.call(this);
+        this.row.setRootElement(undefined);
         this.stopLazyRendering();
     };
     SurveyRow.prototype.createElement = function (element, elementIndex) {
@@ -22625,7 +22666,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 ||
@@ -22655,6 +22698,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.
  */
@@ -22839,6 +22884,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");
@@ -22884,11 +22943,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;
             }
         }
@@ -22916,7 +22975,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) {
@@ -22999,6 +23058,7 @@ var SurveyElement = /** @class */ (function (_super) {
         },
         set: function (val) {
             this.setPropertyValue("state", val);
+            this.renderedIsExpanded = !(this.state === "collapsed" && !this.isDesignMode);
         },
         enumerable: false,
         configurable: true
@@ -23653,7 +23713,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
@@ -23675,11 +23735,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();
     };
@@ -23831,12 +23894,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) {
@@ -23901,6 +23964,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) {
@@ -23923,6 +24064,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));
 
@@ -24040,6 +24184,287 @@ surveyLocalization.locales["en"] = _localization_english__WEBPACK_IMPORTED_MODUL
 surveyLocalization.localeNames["en"] = "english";
 
 
+/***/ }),
+
+/***/ "./src/utils/animation.ts":
+/*!********************************!*\
+  !*** ./src/utils/animation.ts ***!
+  \********************************/
+/*! exports provided: AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationBoolean, AnimationGroup */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationUtils", function() { return AnimationUtils; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationPropertyUtils", function() { return AnimationPropertyUtils; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationGroupUtils", function() { return AnimationGroupUtils; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationBoolean", function() { return AnimationBoolean; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationGroup", function() { return AnimationGroup; });
+/* harmony import */ var _taskmanager__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./taskmanager */ "./src/utils/taskmanager.ts");
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+
+var AnimationUtils = /** @class */ (function () {
+    function AnimationUtils() {
+        this.cancelQueue = [];
+    }
+    AnimationUtils.prototype.getMsFromRule = function (value) {
+        if (value === "auto")
+            return 0;
+        return Number(value.slice(0, -1).replace(",", ".")) * 1000;
+    };
+    AnimationUtils.prototype.getAnimationsCount = function (element) {
+        var animationName = "";
+        if (getComputedStyle) {
+            animationName = getComputedStyle(element).animationName;
+        }
+        return (animationName && animationName != "none" ? animationName.split(", ").length : 0);
+    };
+    AnimationUtils.prototype.getAnimationDuration = function (element) {
+        var style = getComputedStyle(element);
+        var delays = style["animationDelay"].split(", ");
+        var durations = style["animationDuration"].split(", ");
+        var duration = 0;
+        for (var i = 0; i < Math.max(durations.length, delays.length); i++) {
+            duration = Math.max(duration, this.getMsFromRule(durations[i % durations.length]) + this.getMsFromRule(delays[i % delays.length]));
+        }
+        return duration;
+    };
+    AnimationUtils.prototype.onAnimationEnd = function (element, callback, options) {
+        var _this = this;
+        var cancelTimeout;
+        var animationsCount = this.getAnimationsCount(element);
+        var onEndCallback = function (isCancel) {
+            if (isCancel === void 0) { isCancel = true; }
+            options.onAfterRunAnimation && options.onAfterRunAnimation(element);
+            callback(isCancel);
+            clearTimeout(cancelTimeout);
+            _this.cancelQueue.splice(_this.cancelQueue.indexOf(onEndCallback), 1);
+            element.removeEventListener("animationend", onAnimationEndCallback);
+        };
+        var onAnimationEndCallback = function (event) {
+            if (event.target == event.currentTarget && --animationsCount <= 0) {
+                onEndCallback(false);
+            }
+        };
+        if (animationsCount > 0) {
+            element.addEventListener("animationend", onAnimationEndCallback);
+            this.cancelQueue.push(onEndCallback);
+            cancelTimeout = setTimeout(function () {
+                onEndCallback(false);
+            }, this.getAnimationDuration(element) + 10);
+        }
+        else {
+            callback(true);
+        }
+    };
+    AnimationUtils.prototype.beforeAnimationRun = function (element, options) {
+        if (element) {
+            options.onBeforeRunAnimation && options.onBeforeRunAnimation(element);
+        }
+    };
+    AnimationUtils.prototype.runLeaveAnimation = function (element, options, callback) {
+        if (element && options.cssClass) {
+            element.classList.add(options.cssClass);
+            var onAnimationEndCallback = function (isCancel) {
+                callback();
+                if (isCancel) {
+                    element.classList.remove(options.cssClass);
+                }
+                else {
+                    requestAnimationFrame(function () {
+                        requestAnimationFrame(function () {
+                            element.classList.remove(options.cssClass);
+                        });
+                    });
+                }
+            };
+            this.onAnimationEnd(element, onAnimationEndCallback, options);
+        }
+        else {
+            callback();
+        }
+    };
+    AnimationUtils.prototype.runEnterAnimation = function (element, options) {
+        if (element && options.cssClass) {
+            element.classList.add(options.cssClass);
+            this.onAnimationEnd(element, function () {
+                element.classList.remove(options.cssClass);
+            }, options);
+        }
+    };
+    AnimationUtils.prototype.cancel = function () {
+        this.cancelQueue.forEach(function (func) { return func(); });
+        this.cancelQueue = [];
+    };
+    return AnimationUtils;
+}());
+
+var AnimationPropertyUtils = /** @class */ (function (_super) {
+    __extends(AnimationPropertyUtils, _super);
+    function AnimationPropertyUtils() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    AnimationPropertyUtils.prototype.onEnter = function (getElement, options) {
+        var _this = this;
+        var callback = function () {
+            var element = getElement();
+            _this.beforeAnimationRun(element, options);
+            _this.runEnterAnimation(element, options);
+        };
+        requestAnimationFrame(function () {
+            if (getElement()) {
+                callback();
+            }
+            else {
+                requestAnimationFrame(callback);
+            }
+        });
+    };
+    AnimationPropertyUtils.prototype.onLeave = function (getElement, callback, options) {
+        var element = getElement();
+        this.beforeAnimationRun(element, options);
+        this.runLeaveAnimation(element, options, callback);
+    };
+    return AnimationPropertyUtils;
+}(AnimationUtils));
+
+var AnimationGroupUtils = /** @class */ (function (_super) {
+    __extends(AnimationGroupUtils, _super);
+    function AnimationGroupUtils() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    AnimationGroupUtils.prototype.onEnter = function (getElement, getOptions, elements) {
+        var _this = this;
+        if (elements.length == 0)
+            return;
+        requestAnimationFrame(function () {
+            var callback = function () {
+                elements.forEach(function (el) {
+                    _this.beforeAnimationRun(getElement(el), getOptions(el));
+                });
+                elements.forEach(function (el) {
+                    _this.runEnterAnimation(getElement(el), getOptions(el));
+                });
+            };
+            if (!getElement(elements[0])) {
+                requestAnimationFrame(callback);
+            }
+            else {
+                callback();
+            }
+        });
+    };
+    AnimationGroupUtils.prototype.onLeave = function (getElement, callback, getOptions, elements) {
+        var _this = this;
+        elements.forEach(function (el) {
+            _this.beforeAnimationRun(getElement(el), getOptions(el));
+        });
+        var counter = elements.length;
+        var onEndCallback = function () {
+            if (--counter <= 0) {
+                callback();
+            }
+        };
+        elements.forEach(function (el) {
+            _this.runLeaveAnimation(getElement(el), getOptions(el), onEndCallback);
+        });
+    };
+    return AnimationGroupUtils;
+}(AnimationUtils));
+
+var AnimationProperty = /** @class */ (function () {
+    function AnimationProperty(animationOptions, update, getCurrentValue) {
+        var _this = this;
+        this.animationOptions = animationOptions;
+        this.update = update;
+        this.getCurrentValue = getCurrentValue;
+        this._debouncedSync = Object(_taskmanager__WEBPACK_IMPORTED_MODULE_0__["debounce"])(function (newValue) {
+            _this.animation.cancel();
+            _this._sync(newValue);
+        });
+    }
+    AnimationProperty.prototype.sync = function (newValue) {
+        if (this.animationOptions.isAnimationEnabled()) {
+            this._debouncedSync.run(newValue);
+        }
+        else {
+            this.update(newValue);
+        }
+    };
+    AnimationProperty.prototype.cancel = function () {
+        this.animation.cancel();
+        this._debouncedSync.cancel();
+    };
+    return AnimationProperty;
+}());
+var AnimationBoolean = /** @class */ (function (_super) {
+    __extends(AnimationBoolean, _super);
+    function AnimationBoolean() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.animation = new AnimationPropertyUtils();
+        return _this;
+    }
+    AnimationBoolean.prototype._sync = function (newValue) {
+        var _this = this;
+        if (newValue !== this.getCurrentValue()) {
+            if (newValue) {
+                this.update(newValue);
+                this.animation.onEnter(function () { return _this.animationOptions.getAnimatedElement(); }, this.animationOptions.getEnterOptions());
+            }
+            else {
+                this.animation.onLeave(function () { return _this.animationOptions.getAnimatedElement(); }, function () {
+                    _this.update(newValue);
+                }, this.animationOptions.getLeaveOptions());
+            }
+        }
+        else {
+            this.update(newValue);
+        }
+    };
+    return AnimationBoolean;
+}(AnimationProperty));
+
+var AnimationGroup = /** @class */ (function (_super) {
+    __extends(AnimationGroup, _super);
+    function AnimationGroup() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.animation = new AnimationGroupUtils();
+        return _this;
+    }
+    AnimationGroup.prototype._sync = function (newValue) {
+        var _this = this;
+        var oldValue = this.getCurrentValue();
+        var itemsToAdd = newValue.filter(function (el) { return oldValue.indexOf(el) < 0; });
+        var deletedItems = oldValue.filter(function (el) { return newValue.indexOf(el) < 0; });
+        this.animation.onEnter(function (el) { return _this.animationOptions.getAnimatedElement(el); }, function (el) { return _this.animationOptions.getEnterOptions(el); }, itemsToAdd);
+        if (itemsToAdd.length == 0 && (deletedItems === null || deletedItems === void 0 ? void 0 : deletedItems.length) > 0) {
+            this.animation.onLeave(function (el) { return _this.animationOptions.getAnimatedElement(el); }, function () {
+                _this.update(newValue);
+            }, function (el) { return _this.animationOptions.getLeaveOptions(el); }, deletedItems);
+        }
+        else {
+            this.update(newValue);
+        }
+    };
+    return AnimationGroup;
+}(AnimationProperty));
+
+
+
 /***/ }),
 
 /***/ "./src/utils/cssClassBuilder.ts":
@@ -24285,6 +24710,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":