survey-react-ui 1.9.138 → 1.10.1

package/survey-react-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.138
+ * surveyjs - Survey JavaScript library v1.10.1
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -188,9 +188,27 @@ var BaseAction = /** @class */ (function (_super) {
     __extends(BaseAction, _super);
     function BaseAction() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.rendredIdValue = BaseAction.getNextRendredId();
         _this.iconSize = 24;
         return _this;
     }
+    BaseAction.getNextRendredId = function () { return BaseAction.renderedId++; };
+    Object.defineProperty(BaseAction.prototype, "renderedId", {
+        get: function () { return this.rendredIdValue; },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BaseAction.prototype, "owner", {
+        get: function () { return this.ownerValue; },
+        set: function (val) {
+            if (val !== this.owner) {
+                this.ownerValue = val;
+                this.locStrsChanged();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(BaseAction.prototype, "visible", {
         get: function () {
             return this.getVisible();
@@ -315,6 +333,7 @@ var BaseAction = /** @class */ (function (_super) {
         }
         return args.isTrusted;
     };
+    BaseAction.renderedId = 1;
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
     ], BaseAction.prototype, "tooltip", void 0);
@@ -1267,6 +1286,7 @@ var Base = /** @class */ (function () {
          */
         this.onItemValuePropertyChanged = this.addEvent();
         this.isCreating = true;
+        this.animationAllowedLock = 0;
         this.bindingsValue = new Bindings(this);
         _jsonobject__WEBPACK_IMPORTED_MODULE_2__["CustomPropertiesCollection"].createProperties(this);
         this.onBaseCreating();
@@ -2187,6 +2207,22 @@ var Base = /** @class */ (function () {
         if (includeHidden === void 0) { includeHidden = false; }
         return [];
     };
+    Object.defineProperty(Base.prototype, "animationAllowed", {
+        get: function () {
+            return this.getIsAnimationAllowed();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Base.prototype.getIsAnimationAllowed = function () {
+        return _settings__WEBPACK_IMPORTED_MODULE_3__["settings"].animationEnabled && this.animationAllowedLock >= 0 && !this.isLoadingFromJson && !this.isDisposed;
+    };
+    Base.prototype.blockAnimations = function () {
+        this.animationAllowedLock--;
+    };
+    Base.prototype.releaseAnimations = function () {
+        this.animationAllowedLock++;
+    };
     Base.currentDependencis = undefined;
     return Base;
 }());
@@ -3589,7 +3625,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.138", "survey-react-ui");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.10.1", "survey-react-ui");
 
 
 /***/ }),
@@ -11542,7 +11578,7 @@ var englishStrings = {
     uploadingFile: "Your file is uploading. Please wait several seconds and try again.",
     loadingFile: "Loading...",
     chooseFile: "Choose file(s)...",
-    noFileChosen: "No file chosen",
+    noFileChosen: "No file selected",
     filePlaceholder: "Drag and drop a file here or click the button below to select a file to upload.",
     confirmDelete: "Are you sure you want to delete this record?",
     keyDuplicationError: "This value should be unique.",
@@ -11561,6 +11597,7 @@ var englishStrings = {
     savingData: "The results are being saved on the server...",
     savingDataError: "An error occurred and we could not save the results.",
     savingDataSuccess: "The results were saved successfully!",
+    savingExceedSize: "Your response exceeds 64KB. Please reduce the size of your file(s) and try again or contact a survey owner.",
     saveAgainButton: "Try again",
     timerMin: "min",
     timerSec: "sec",
@@ -11572,6 +11609,7 @@ var englishStrings = {
     timerLimitSurvey: "You have spent {0} of {1} in total.",
     clearCaption: "Clear",
     signaturePlaceHolder: "Sign here",
+    signaturePlaceHolderReadOnly: "No signature",
     chooseFileCaption: "Select File",
     takePhotoCaption: "Take Photo",
     photoPlaceholder: "Click the button below to take a photo using the camera.",
@@ -11588,7 +11626,7 @@ var englishStrings = {
     filterStringPlaceholder: "Type to search...",
     emptyMessage: "No data to display",
     noEntriesText: "No entries yet.\nClick the button below to add a new entry.",
-    noEntriesReadonlyText: "No entries.",
+    noEntriesReadonlyText: "No entries",
     more: "More",
     tagboxDoneButtonCaption: "OK",
     selectToRankEmptyRankedAreaText: "All choices are selected for ranking",
@@ -12697,7 +12735,7 @@ var SurveyFilePreview = /** @class */ (function (_super) {
         var previews = this.question.previewValue.map(function (val, index) {
             if (!val)
                 return null;
-            return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { key: _this.question.inputId + "_" + index, className: _this.question.cssClasses.preview, style: { display: _this.question.isPreviewVisible(index) ? undefined : "none" } },
+            return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { key: _this.question.inputId + "_" + index, className: _this.question.cssClasses.previewItem, style: { display: _this.question.isPreviewVisible(index) ? undefined : "none" } },
                 _this.renderFileSign(_this.question.cssClasses.fileSign, val),
                 react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: _this.question.getImageWrapperCss(val) },
                     _this.question.canPreviewImage(val) ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("img", { src: val.content, style: { height: _this.question.imageHeight, width: _this.question.imageWidth }, alt: "File preview" })) : (_this.question.cssClasses.defaultImage ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { iconName: _this.question.cssClasses.defaultImageIconId, size: "auto", className: _this.question.cssClasses.defaultImage })) : null),
@@ -12959,7 +12997,7 @@ var ListItem = /** @class */ (function (_super) {
                 event.stopPropagation();
             }, onPointerDown: function (event) { return _this.model.onPointerDown(event, _this.item); } },
             separator,
-            contentWrap));
+            contentWrap), this.item);
     };
     ListItem.prototype.componentDidMount = function () {
         _super.prototype.componentDidMount.call(this);
@@ -13421,6 +13459,7 @@ var MatrixRow = /** @class */ (function (_super) {
     __extends(MatrixRow, _super);
     function MatrixRow(props) {
         var _this = _super.call(this, props) || this;
+        _this.root = react__WEBPACK_IMPORTED_MODULE_0___default.a.createRef();
         _this.onPointerDownHandler = function (event) {
             _this.parentMatrix.onPointerDown(event.nativeEvent, _this.model.row);
         };
@@ -13443,12 +13482,35 @@ var MatrixRow = /** @class */ (function (_super) {
     MatrixRow.prototype.getStateElement = function () {
         return this.model;
     };
+    MatrixRow.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        if (this.root.current) {
+            this.model.setRootElement(this.root.current);
+        }
+    };
+    MatrixRow.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        this.model.setRootElement(undefined);
+    };
+    MatrixRow.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+        if (!_super.prototype.shouldComponentUpdate.call(this, nextProps, nextState))
+            return false;
+        if (nextProps.model !== this.model) {
+            if (nextProps.element) {
+                nextProps.element.setRootElement(this.root.current);
+            }
+            if (this.model) {
+                this.model.setRootElement(undefined);
+            }
+        }
+        return true;
+    };
     MatrixRow.prototype.render = function () {
         var _this = this;
         var model = this.model;
         if (!model.visible)
             return null;
-        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("tr", { className: model.className, "data-sv-drop-target-matrix-row": model.row && model.row.id, onPointerDown: function (event) { return _this.onPointerDownHandler(event); } }, this.props.children));
+        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("tr", { ref: this.root, className: model.className, "data-sv-drop-target-matrix-row": model.row && model.row.id, onPointerDown: function (event) { return _this.onPointerDownHandler(event); } }, this.props.children));
     };
     return MatrixRow;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_2__["SurveyElementBase"]));
@@ -13942,7 +14004,6 @@ var PopupContainer = /** @class */ (function (_super) {
     __extends(PopupContainer, _super);
     function PopupContainer(props) {
         var _this = _super.call(this, props) || this;
-        _this.prevIsVisible = false;
         _this.handleKeydown = function (event) {
             _this.model.onKeyDown(event);
         };
@@ -13963,10 +14024,9 @@ var PopupContainer = /** @class */ (function (_super) {
     };
     PopupContainer.prototype.componentDidUpdate = function (prevProps, prevState) {
         _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
-        if (!this.prevIsVisible && this.model.isVisible) {
+        if (!this.model.isPositionSet && this.model.isVisible) {
             this.model.updateOnShowing();
         }
-        this.prevIsVisible = this.model.isVisible;
     };
     PopupContainer.prototype.renderContainer = function (popupBaseViewModel) {
         var _this = this;
@@ -14174,7 +14234,7 @@ var RatingItemSmiley = /** @class */ (function (_super) {
     RatingItemSmiley.prototype.render = function () {
         var _this = this;
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { onMouseDown: this.handleOnMouseDown, style: this.question.getItemStyle(this.item.itemValue, this.item.highlight), className: this.question.getItemClass(this.item.itemValue), onMouseOver: function (e) { return _this.question.onItemMouseIn(_this.item); }, onMouseOut: function (e) { return _this.question.onItemMouseOut(_this.item); } },
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.name, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.isDisplayMode, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.isDisplayMode, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { size: "auto", iconName: this.question.getItemSmileyIconName(this.item.itemValue), title: this.item.text })));
     };
     return RatingItemSmiley;
@@ -14229,7 +14289,7 @@ var RatingItemStar = /** @class */ (function (_super) {
     RatingItemStar.prototype.render = function () {
         var _this = this;
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { onMouseDown: this.handleOnMouseDown, className: this.question.getItemClass(this.item.itemValue), onMouseOver: function (e) { return _this.question.onItemMouseIn(_this.item); }, onMouseOut: function (e) { return _this.question.onItemMouseOut(_this.item); } },
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.name, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.isDisplayMode, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.isDisplayMode, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { className: "sv-star", size: "auto", iconName: this.question.itemStarIcon, title: this.item.text }),
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { className: "sv-star-2", size: "auto", iconName: this.question.itemStarIconAlt, title: this.item.text })));
     };
@@ -14321,7 +14381,7 @@ var RatingItem = /** @class */ (function (_super) {
     RatingItem.prototype.render = function () {
         var itemText = this.renderLocString(this.item.locText);
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { onMouseDown: this.handleOnMouseDown, className: this.question.getItemClassByText(this.item.itemValue, this.item.text) },
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.name, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.isDisplayMode, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.isDisplayMode, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: this.question.cssClasses.itemText }, itemText)));
     };
     RatingItem.prototype.componentDidMount = function () {
@@ -15432,7 +15492,7 @@ var SurveyElementHeader = /** @class */ (function (_super) {
         var description = element.hasDescriptionUnderTitle
             ? _reactquestion_element__WEBPACK_IMPORTED_MODULE_3__["SurveyElementBase"].renderQuestionDescription(this.element)
             : null;
-        var additionalTitleToolbarElement = !!element.additionalTitleToolbar ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_1__["SurveyActionBar"], { model: element.additionalTitleToolbar }) : null;
+        var additionalTitleToolbarElement = element.hasAdditionalTitleToolbar ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_1__["SurveyActionBar"], { model: element.additionalTitleToolbar }) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: element.cssHeader, onClick: function (e) { return element.clickTitleFunction && element.clickTitleFunction(e.nativeEvent); } },
             title,
             description,
@@ -19626,7 +19686,7 @@ var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
     SurveyQuestionMatrixDropdownBase.prototype.renderRows = function () {
         var cssClasses = this.question.cssClasses;
         var rows = [];
-        var renderedRows = this.question.renderedTable.rows;
+        var renderedRows = this.question.renderedTable.renderedRows;
         for (var i = 0; i < renderedRows.length; i++) {
             rows.push(this.renderRow(renderedRows[i].id, renderedRows[i], cssClasses));
         }
@@ -20211,19 +20271,11 @@ var SurveyQuestionPanelDynamic = /** @class */ (function (_super) {
         });
     };
     SurveyQuestionPanelDynamic.prototype.renderElement = function () {
+        var _this = this;
         var panels = [];
-        if (this.question.isRenderModeList) {
-            for (var i = 0; i < this.question.panels.length; i++) {
-                var panel = this.question.panels[i];
-                panels.push(react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionPanelDynamicItem, { key: panel.id, element: panel, question: this.question, index: i, cssClasses: this.question.cssClasses, isDisplayMode: this.isDisplayMode, creator: this.creator }));
-            }
-        }
-        else {
-            if (this.question.currentPanel != null) {
-                var panel = this.question.currentPanel;
-                panels.push(react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionPanelDynamicItem, { key: this.question.currentIndex, element: panel, question: this.question, index: this.question.currentIndex, cssClasses: this.question.cssClasses, isDisplayMode: this.isDisplayMode, creator: this.creator }));
-            }
-        }
+        this.question.renderedPanels.forEach(function (panel, index) {
+            panels.push(react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionPanelDynamicItem, { key: panel.id, element: panel, question: _this.question, index: index, cssClasses: _this.question.cssClasses, isDisplayMode: _this.isDisplayMode, creator: _this.creator }));
+        });
         var btnAdd = this.question.isRenderModeList && this.question["showLegacyNavigation"]
             ? this.renderAddRowButton()
             : null;
@@ -20233,13 +20285,12 @@ var SurveyQuestionPanelDynamic = /** @class */ (function (_super) {
         var navBottom = this.question.isProgressBottomShowing
             ? this.renderNavigator()
             : null;
-        var style = {};
         var navV2 = this.renderNavigatorV2();
         var noEntriesPlaceholder = this.renderPlaceholder();
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.root },
             noEntriesPlaceholder,
             navTop,
-            panels,
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.panelsContainer }, panels),
             navBottom,
             btnAdd,
             navV2));
@@ -20688,6 +20739,10 @@ var SurveyQuestionRanking = /** @class */ (function (_super) {
                 event.persist();
                 //event.preventDefault();
                 _this.question.handlePointerDown.call(_this.question, event, item, event.currentTarget);
+            }, function (event) {
+                event.persist();
+                //event.preventDefault();
+                _this.question.handlePointerUp.call(_this.question, event, item, event.currentTarget);
             }, this_1.question.cssClasses, this_1.question.getItemClass(item), this_1.question, unrankedItem));
         };
         var this_1 = this;
@@ -20696,13 +20751,13 @@ var SurveyQuestionRanking = /** @class */ (function (_super) {
         }
         return items;
     };
-    SurveyQuestionRanking.prototype.renderItem = function (item, i, handleKeydown, handlePointerDown, cssClasses, itemClass, question, unrankedItem) {
-        var key = item.value + "-" + i + "-item";
+    SurveyQuestionRanking.prototype.renderItem = function (item, i, handleKeydown, handlePointerDown, handlePointerUp, cssClasses, itemClass, question, unrankedItem) {
+        var key = "id-" + item.renderedId;
         var text = this.renderLocString(item.locText);
         var index = i;
-        var indexText = this.question.getNumberByIndex(i);
+        var indexText = this.question.getNumberByIndex(index);
         var tabIndex = this.question.getItemTabIndex(item);
-        var renderedItem = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionRankingItem, { key: key, text: text, index: index, indexText: indexText, itemTabIndex: tabIndex, handleKeydown: handleKeydown, handlePointerDown: handlePointerDown, cssClasses: cssClasses, itemClass: itemClass, question: question, unrankedItem: unrankedItem, item: item }));
+        var renderedItem = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionRankingItem, { key: item.value, text: text, index: index, indexText: indexText, itemTabIndex: tabIndex, handleKeydown: handleKeydown, handlePointerDown: handlePointerDown, handlePointerUp: handlePointerUp, cssClasses: cssClasses, itemClass: itemClass, question: question, unrankedItem: unrankedItem, item: item }));
         var survey = this.question.survey;
         var wrappedItem = null;
         if (!!survey) {
@@ -20753,6 +20808,13 @@ var SurveyQuestionRankingItem = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SurveyQuestionRankingItem.prototype, "handlePointerUp", {
+        get: function () {
+            return this.props.handlePointerUp;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(SurveyQuestionRankingItem.prototype, "cssClasses", {
         get: function () {
             return this.props.cssClasses;
@@ -20800,7 +20862,7 @@ var SurveyQuestionRankingItem = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("use", { xlinkHref: this.question.dashSvgIcon })));
     };
     SurveyQuestionRankingItem.prototype.renderElement = function () {
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { tabIndex: this.itemTabIndex, className: this.itemClass, onKeyDown: this.handleKeydown, onPointerDown: this.handlePointerDown, "data-sv-drop-target-ranking-item": this.index },
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { tabIndex: this.itemTabIndex, className: this.itemClass, onKeyDown: this.handleKeydown, onPointerDown: this.handlePointerDown, onPointerUp: this.handlePointerUp, "data-sv-drop-target-ranking-item": this.index },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { tabIndex: -1, style: { outline: "none" } },
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.cssClasses.itemGhostNode }),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.cssClasses.itemContent },
@@ -21452,7 +21514,7 @@ var SurveyQuestionSignaturePad = /** @class */ (function (_super) {
         var loadingIndicator = this.question.showLoadingIndicator ? this.renderLoadingIndicator() : null;
         var clearButton = this.renderCleanButton();
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.root, ref: function (root) { return (_this.setControl(root)); }, style: { width: this.question.renderedCanvasWidth } },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.placeholder, style: { display: this.question.needShowPlaceholder() ? "" : "none" } }, this.renderLocString(this.question.locPlaceholder)),
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.placeholder, style: { display: this.question.needShowPlaceholder() ? "" : "none" } }, this.renderLocString(this.question.locRenderedPlaceholder)),
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null,
                 this.renderBackgroundImage(),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("canvas", { tabIndex: -1, className: this.question.cssClasses.canvas, onBlur: this.question.onBlur })),
@@ -22902,7 +22964,6 @@ var SurveyElement = /** @class */ (function (_super) {
                 }
             }
         }, function () { return _this.renderedIsExpanded; });
-        _this.animationAllowedValue = true;
         _this.name = name;
         _this.createNewArray("errors");
         _this.createNewArray("titleActions");
@@ -22938,7 +22999,7 @@ var SurveyElement = /** @class */ (function (_super) {
         var el = root.getElementById(elementId);
         return SurveyElement.ScrollElementToViewCore(el, false, scrollIfVisible);
     };
-    SurveyElement.ScrollElementToViewCore = function (el, checkLeft, scrollIfVisible) {
+    SurveyElement.ScrollElementToViewCore = function (el, checkLeft, scrollIfVisible, scrollIntoViewOptions) {
         if (!el || !el.scrollIntoView)
             return false;
         var elTop = scrollIfVisible ? -1 : el.getBoundingClientRect().top;
@@ -22957,7 +23018,7 @@ var SurveyElement = /** @class */ (function (_super) {
             }
         }
         if (needScroll) {
-            el.scrollIntoView();
+            el.scrollIntoView(scrollIntoViewOptions);
         }
         return needScroll;
     };
@@ -23733,11 +23794,14 @@ var SurveyElement = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    SurveyElement.prototype.canHaveFrameStyles = function () {
+        return (this.parent !== undefined && (!this.hasParent || this.parent && this.parent.showPanelAsPage));
+    };
     SurveyElement.prototype.getHasFrameV2 = function () {
-        return this.shouldAddRunnerStyles() && (!this.hasParent);
+        return this.shouldAddRunnerStyles() && this.canHaveFrameStyles();
     };
     SurveyElement.prototype.getIsNested = function () {
-        return this.shouldAddRunnerStyles() && (this.hasParent);
+        return this.shouldAddRunnerStyles() && !this.canHaveFrameStyles();
     };
     SurveyElement.prototype.getCssRoot = function (cssClasses) {
         var isExpanadable = !!this.isCollapsed || !!this.isExpanded;
@@ -23938,6 +24002,13 @@ var SurveyElement = /** @class */ (function (_super) {
             this.toggleState();
         }
     };
+    Object.defineProperty(SurveyElement.prototype, "hasAdditionalTitleToolbar", {
+        get: function () {
+            return false;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(SurveyElement.prototype, "additionalTitleToolbar", {
         get: function () {
             return this.getAdditionalTitleToolbar();
@@ -23957,9 +24028,38 @@ var SurveyElement = /** @class */ (function (_super) {
             .append(cssClasses.titleExpandable, isExpandable)
             .append(cssClasses.titleExpanded, this.isExpanded)
             .append(cssClasses.titleCollapsed, this.isCollapsed)
-            .append(cssClasses.titleDisabled, this.isReadOnly)
+            .append(cssClasses.titleDisabled, this.isDisabledStyle)
+            .append(cssClasses.titleReadOnly, this.isReadOnly)
             .append(cssClasses.titleOnError, this.containsErrors).toString();
     };
+    Object.defineProperty(SurveyElement.prototype, "isDisabledStyle", {
+        get: function () {
+            return this.getIsDisableAndReadOnlyStyles(false)[1];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyElement.prototype, "isReadOnlyStyle", {
+        get: function () {
+            return this.getIsDisableAndReadOnlyStyles(false)[0];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyElement.prototype.getIsDisableAndReadOnlyStyles = function (itemReadOnly) {
+        var isPreview = this.isPreviewStyle;
+        var isReadOnly = itemReadOnly || this.isReadOnly;
+        var isReadOnlyStyle = isReadOnly && !isPreview;
+        var isDisableStyle = !this.isDefaultV2Theme && (isReadOnly || isPreview);
+        return [isReadOnlyStyle, isDisableStyle];
+    };
+    Object.defineProperty(SurveyElement.prototype, "isPreviewStyle", {
+        get: function () {
+            return !!this.survey && this.survey.state === "preview";
+        },
+        enumerable: false,
+        configurable: true
+    });
     SurveyElement.prototype.localeChanged = function () {
         _super.prototype.localeChanged.call(this);
         this.updateDescriptionVisibility(this.description);
@@ -24019,12 +24119,12 @@ var SurveyElement = /** @class */ (function (_super) {
                 if (cssClasses.content) {
                     var selector = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_8__["classesToSelector"])(cssClasses.content);
                     if (selector) {
-                        return (_a = _this.getWrapperElement()) === null || _a === void 0 ? void 0 : _a.querySelector(selector);
+                        return (_a = _this.getWrapperElement()) === null || _a === void 0 ? void 0 : _a.querySelector(":scope " + selector);
                     }
                 }
                 return undefined;
             },
-            isAnimationEnabled: function () { return _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].animationEnabled && _this.animationAllowed && !_this.isDesignMode; }
+            isAnimationEnabled: function () { return _this.animationAllowed && !_this.isDesignMode; }
         };
     };
     Object.defineProperty(SurveyElement.prototype, "renderedIsExpanded", {
@@ -24037,16 +24137,9 @@ var SurveyElement = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(SurveyElement.prototype, "animationAllowed", {
-        get: function () {
-            return !this.isLoadingFromJson && !this.isDisposed && !!this.survey && this.animationAllowedValue;
-        },
-        set: function (val) {
-            this.animationAllowedValue = val;
-        },
-        enumerable: false,
-        configurable: true
-    });
+    SurveyElement.prototype.getIsAnimationAllowed = function () {
+        return _super.prototype.getIsAnimationAllowed.call(this) && !!this.survey;
+    };
     SurveyElement.prototype.dispose = function () {
         _super.prototype.dispose.call(this);
         if (this.titleToolbarValue) {
@@ -24195,7 +24288,7 @@ surveyLocalization.localeNames["en"] = "english";
 /*!********************************!*\
   !*** ./src/utils/animation.ts ***!
   \********************************/
-/*! exports provided: AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationBoolean, AnimationGroup */
+/*! exports provided: AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -24203,8 +24296,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationUtils", function() { return AnimationUtils; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationPropertyUtils", function() { return AnimationPropertyUtils; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationGroupUtils", function() { return AnimationGroupUtils; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationProperty", function() { return AnimationProperty; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationBoolean", function() { return AnimationBoolean; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationGroup", function() { return AnimationGroup; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationTab", function() { return AnimationTab; });
 /* harmony import */ var _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../global_variables_utils */ "./src/global_variables_utils.ts");
 /* harmony import */ var _taskmanager__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./taskmanager */ "./src/utils/taskmanager.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
@@ -24233,6 +24328,9 @@ var AnimationUtils = /** @class */ (function () {
             return 0;
         return Number(value.slice(0, -1).replace(",", ".")) * 1000;
     };
+    AnimationUtils.prototype.reflow = function (element) {
+        return element.offsetHeight;
+    };
     AnimationUtils.prototype.getAnimationsCount = function (element) {
         var animationName = "";
         if (getComputedStyle) {
@@ -24250,6 +24348,14 @@ var AnimationUtils = /** @class */ (function () {
         }
         return duration;
     };
+    AnimationUtils.prototype.addCancelCallback = function (callback) {
+        this.cancelQueue.push(callback);
+    };
+    AnimationUtils.prototype.removeCancelCallback = function (callback) {
+        if (this.cancelQueue.indexOf(callback) >= 0) {
+            this.cancelQueue.splice(this.cancelQueue.indexOf(callback), 1);
+        }
+    };
     AnimationUtils.prototype.onAnimationEnd = function (element, callback, options) {
         var _this = this;
         var cancelTimeout;
@@ -24259,7 +24365,7 @@ var AnimationUtils = /** @class */ (function () {
             options.onAfterRunAnimation && options.onAfterRunAnimation(element);
             callback(isCancel);
             clearTimeout(cancelTimeout);
-            _this.cancelQueue.splice(_this.cancelQueue.indexOf(onEndCallback), 1);
+            _this.removeCancelCallback(onEndCallback);
             element.removeEventListener("animationend", onAnimationEndCallback);
         };
         var onAnimationEndCallback = function (event) {
@@ -24269,7 +24375,7 @@ var AnimationUtils = /** @class */ (function () {
         };
         if (animationsCount > 0) {
             element.addEventListener("animationend", onAnimationEndCallback);
-            this.cancelQueue.push(onEndCallback);
+            this.addCancelCallback(onEndCallback);
             cancelTimeout = setTimeout(function () {
                 onEndCallback(false);
             }, this.getAnimationDuration(element) + 10);
@@ -24279,40 +24385,51 @@ var AnimationUtils = /** @class */ (function () {
         }
     };
     AnimationUtils.prototype.beforeAnimationRun = function (element, options) {
-        if (element) {
+        if (element && options) {
             options.onBeforeRunAnimation && options.onBeforeRunAnimation(element);
         }
     };
-    AnimationUtils.prototype.runLeaveAnimation = function (element, options, callback) {
+    AnimationUtils.prototype.runAnimation = function (element, options, callback) {
         if (element && options.cssClass) {
+            this.reflow(element);
             element.classList.add(options.cssClass);
-            var onAnimationEndCallback = function (isCancel) {
+            this.onAnimationEnd(element, callback, options);
+        }
+        else {
+            callback(true);
+        }
+    };
+    AnimationUtils.prototype.clearHtmlElement = function (element, options) {
+        if (element && options.cssClass) {
+            element.classList.remove(options.cssClass);
+        }
+    };
+    AnimationUtils.prototype.onNextRender = function (callback, runEarly, isCancel) {
+        var _this = this;
+        if (isCancel === void 0) { isCancel = false; }
+        if (!isCancel && _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].isAvailable()) {
+            var cancelCallback_1 = function () {
                 callback();
-                if (isCancel) {
-                    element.classList.remove(options.cssClass);
+                cancelAnimationFrame(latestRAF_1);
+            };
+            var latestRAF_1 = _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
+                if (runEarly && runEarly()) {
+                    callback();
+                    _this.removeCancelCallback(cancelCallback_1);
                 }
                 else {
-                    _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
-                        _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
-                            element.classList.remove(options.cssClass);
-                        });
+                    latestRAF_1 = _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
+                        callback();
+                        _this.removeCancelCallback(cancelCallback_1);
                     });
                 }
-            };
-            this.onAnimationEnd(element, onAnimationEndCallback, options);
+            });
+            this.addCancelCallback(cancelCallback_1);
         }
         else {
             callback();
         }
     };
-    AnimationUtils.prototype.runEnterAnimation = function (element, options) {
-        if (element && options.cssClass) {
-            element.classList.add(options.cssClass);
-            this.onAnimationEnd(element, function () {
-                element.classList.remove(options.cssClass);
-            }, options);
-        }
-    };
     AnimationUtils.prototype.cancel = function () {
         var cancelQueue = [].concat(this.cancelQueue);
         cancelQueue.forEach(function (callback) { return callback(); });
@@ -24326,26 +24443,28 @@ var AnimationPropertyUtils = /** @class */ (function (_super) {
     function AnimationPropertyUtils() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    AnimationPropertyUtils.prototype.onEnter = function (getElement, options) {
+    AnimationPropertyUtils.prototype.onEnter = function (options) {
         var _this = this;
-        var callback = function () {
-            var element = getElement();
-            _this.beforeAnimationRun(element, options);
-            _this.runEnterAnimation(element, options);
-        };
-        _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
-            if (getElement()) {
-                callback();
-            }
-            else {
-                _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(callback);
-            }
-        });
+        this.onNextRender(function () {
+            var htmlElement = options.getAnimatedElement();
+            var enterOptions = options.getEnterOptions();
+            _this.beforeAnimationRun(htmlElement, enterOptions);
+            _this.runAnimation(htmlElement, enterOptions, function () {
+                _this.clearHtmlElement(htmlElement, enterOptions);
+            });
+        }, function () { return !!options.getAnimatedElement(); });
     };
-    AnimationPropertyUtils.prototype.onLeave = function (getElement, callback, options) {
-        var element = getElement();
-        this.beforeAnimationRun(element, options);
-        this.runLeaveAnimation(element, options, callback);
+    AnimationPropertyUtils.prototype.onLeave = function (options, callback) {
+        var _this = this;
+        var htmlElement = options.getAnimatedElement();
+        var leaveOptions = options.getLeaveOptions();
+        this.beforeAnimationRun(htmlElement, leaveOptions);
+        this.runAnimation(htmlElement, leaveOptions, function (isCancel) {
+            callback();
+            _this.onNextRender(function () {
+                _this.clearHtmlElement(htmlElement, leaveOptions);
+            }, undefined, isCancel);
+        });
     };
     return AnimationPropertyUtils;
 }(AnimationUtils));
@@ -24355,41 +24474,40 @@ var AnimationGroupUtils = /** @class */ (function (_super) {
     function AnimationGroupUtils() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    AnimationGroupUtils.prototype.onEnter = function (getElement, getOptions, elements) {
+    AnimationGroupUtils.prototype.runGroupAnimation = function (options, addedElements, removedElements, callback) {
         var _this = this;
-        if (elements.length == 0)
-            return;
-        _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
-            var callback = function () {
-                elements.forEach(function (el) {
-                    _this.beforeAnimationRun(getElement(el), getOptions(el));
-                });
-                elements.forEach(function (el) {
-                    _this.runEnterAnimation(getElement(el), getOptions(el));
-                });
+        this.onNextRender(function () {
+            var addedHtmlElements = addedElements.map(function (el) { return options.getAnimatedElement(el); });
+            var enterOptions = addedElements.map(function (el) { return options.getEnterOptions(el); });
+            var removedHtmlElements = removedElements.map(function (el) { return options.getAnimatedElement(el); });
+            var leaveOptions = removedElements.map(function (el) { return options.getLeaveOptions(el); });
+            addedElements.forEach(function (_, i) {
+                _this.beforeAnimationRun(addedHtmlElements[i], enterOptions[i]);
+            });
+            removedElements.forEach(function (_, i) {
+                _this.beforeAnimationRun(removedHtmlElements[i], leaveOptions[i]);
+            });
+            var counter = addedElements.length + removedElements.length;
+            var onAnimationEndCallback = function (isCancel) {
+                if (--counter <= 0) {
+                    callback && callback();
+                    _this.onNextRender(function () {
+                        addedElements.forEach(function (_, i) {
+                            _this.clearHtmlElement(addedHtmlElements[i], enterOptions[i]);
+                        });
+                        removedElements.forEach(function (_, i) {
+                            _this.clearHtmlElement(removedHtmlElements[i], leaveOptions[i]);
+                        });
+                    }, undefined, isCancel);
+                }
             };
-            if (!getElement(elements[0])) {
-                _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(callback);
-            }
-            else {
-                callback();
-            }
-        });
-    };
-    AnimationGroupUtils.prototype.onLeave = function (getElement, callback, getOptions, elements) {
-        var _this = this;
-        elements.forEach(function (el) {
-            _this.beforeAnimationRun(getElement(el), getOptions(el));
-        });
-        var counter = elements.length;
-        var onEndCallback = function () {
-            if (--counter <= 0) {
-                callback();
-            }
-        };
-        elements.forEach(function (el) {
-            _this.runLeaveAnimation(getElement(el), getOptions(el), onEndCallback);
-        });
+            addedElements.forEach(function (_, i) {
+                _this.runAnimation(addedHtmlElements[i], enterOptions[i], onAnimationEndCallback);
+            });
+            removedElements.forEach(function (_, i) {
+                _this.runAnimation(removedHtmlElements[i], leaveOptions[i], onAnimationEndCallback);
+            });
+        }, function () { return addedElements.length == 0 || addedElements.some(function (el) { return !!options.getAnimatedElement(el); }); });
     };
     return AnimationGroupUtils;
 }(AnimationUtils));
@@ -24410,6 +24528,7 @@ var AnimationProperty = /** @class */ (function () {
             this._debouncedSync.run(newValue);
         }
         else {
+            this.cancel();
             this.update(newValue);
         }
     };
@@ -24419,6 +24538,7 @@ var AnimationProperty = /** @class */ (function () {
     };
     return AnimationProperty;
 }());
+
 var AnimationBoolean = /** @class */ (function (_super) {
     __extends(AnimationBoolean, _super);
     function AnimationBoolean() {
@@ -24431,12 +24551,12 @@ var AnimationBoolean = /** @class */ (function (_super) {
         if (newValue !== this.getCurrentValue()) {
             if (newValue) {
                 this.update(newValue);
-                this.animation.onEnter(function () { return _this.animationOptions.getAnimatedElement(); }, this.animationOptions.getEnterOptions());
+                this.animation.onEnter(this.animationOptions);
             }
             else {
-                this.animation.onLeave(function () { return _this.animationOptions.getAnimatedElement(); }, function () {
+                this.animation.onLeave(this.animationOptions, function () {
                     _this.update(newValue);
-                }, this.animationOptions.getLeaveOptions());
+                });
             }
         }
         else {
@@ -24458,19 +24578,42 @@ var AnimationGroup = /** @class */ (function (_super) {
         var oldValue = this.getCurrentValue();
         var itemsToAdd = newValue.filter(function (el) { return oldValue.indexOf(el) < 0; });
         var deletedItems = oldValue.filter(function (el) { return newValue.indexOf(el) < 0; });
-        this.animation.onEnter(function (el) { return _this.animationOptions.getAnimatedElement(el); }, function (el) { return _this.animationOptions.getEnterOptions(el); }, itemsToAdd);
         if (itemsToAdd.length == 0 && (deletedItems === null || deletedItems === void 0 ? void 0 : deletedItems.length) > 0) {
-            this.animation.onLeave(function (el) { return _this.animationOptions.getAnimatedElement(el); }, function () {
-                _this.update(newValue);
-            }, function (el) { return _this.animationOptions.getLeaveOptions(el); }, deletedItems);
+            this.animation.runGroupAnimation(this.animationOptions, [], deletedItems, function () { return _this.update(newValue); });
         }
         else {
             this.update(newValue);
+            this.animation.runGroupAnimation(this.animationOptions, itemsToAdd, []);
         }
     };
     return AnimationGroup;
 }(AnimationProperty));
 
+var AnimationTab = /** @class */ (function (_super) {
+    __extends(AnimationTab, _super);
+    function AnimationTab(animationOptions, update, getCurrentValue, mergeValues) {
+        var _this = _super.call(this, animationOptions, update, getCurrentValue) || this;
+        _this.mergeValues = mergeValues;
+        _this.animation = new AnimationGroupUtils();
+        return _this;
+    }
+    AnimationTab.prototype._sync = function (newValue) {
+        var _this = this;
+        var oldValue = [].concat(this.getCurrentValue());
+        if (oldValue[0] !== newValue[0]) {
+            var tempValue = !!this.mergeValues ? this.mergeValues(newValue, oldValue) : [].concat(oldValue, newValue);
+            this.update(tempValue, true);
+            this.animation.runGroupAnimation(this.animationOptions, newValue, oldValue, function () {
+                _this.update(newValue);
+            });
+        }
+        else {
+            this.update(newValue);
+        }
+    };
+    return AnimationTab;
+}(AnimationProperty));
+
 
 
 /***/ }),