survey-react 1.12.3 → 1.12.5

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.12.3
+ * surveyjs - Survey JavaScript library v1.12.5
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -962,9 +962,9 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 
 /***/ "./src/entries/react.ts":
 /*!********************************************!*\
-  !*** ./src/entries/react.ts + 282 modules ***!
+  !*** ./src/entries/react.ts + 284 modules ***!
   \********************************************/
-/*! 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, 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, prepareElementForVerticalAnimation, cleanHtmlElementAfterAnimation, classesToSelector, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, TextAreaModel, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, StylesManager, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, createPopupModelWithListModel, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper, Model, bootstrapThemeName, bootstrapThemeColors, bootstrapThemeCssRules, bootstrapMaterialThemeName, bootstrapMaterialThemeColors, bootstrapMaterialThemeCssRules, defaultBootstrapCss, defaultBootstrapMaterialCss, Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, ListItemContent, ListItemGroup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, QuestionErrorComponent, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent */
+/*! 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, QuestionFilePage, 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, 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, prepareElementForVerticalAnimation, cleanHtmlElementAfterAnimation, classesToSelector, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, TextAreaModel, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, StylesManager, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, createPopupModelWithListModel, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper, Model, bootstrapThemeName, bootstrapThemeColors, bootstrapThemeCssRules, bootstrapMaterialThemeName, bootstrapMaterialThemeColors, bootstrapMaterialThemeCssRules, defaultBootstrapCss, defaultBootstrapMaterialCss, Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, ListItemContent, ListItemGroup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, QuestionErrorComponent, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent */
 /*! ModuleConcatenation bailout: Cannot concat with external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"} (<- Module is not an ECMAScript module) */
 /*! ModuleConcatenation bailout: Cannot concat with external {"root":"ReactDOM","commonjs2":"react-dom","commonjs":"react-dom","amd":"react-dom"} (<- Module is not an ECMAScript module) */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -1083,6 +1083,7 @@ __webpack_require__.d(__webpack_exports__, "QuestionDropdownModel", function() {
 __webpack_require__.d(__webpack_exports__, "QuestionFactory", function() { return /* reexport */ questionfactory_QuestionFactory; });
 __webpack_require__.d(__webpack_exports__, "ElementFactory", function() { return /* reexport */ questionfactory_ElementFactory; });
 __webpack_require__.d(__webpack_exports__, "QuestionFileModel", function() { return /* reexport */ question_file_QuestionFileModel; });
+__webpack_require__.d(__webpack_exports__, "QuestionFilePage", function() { return /* reexport */ question_file_QuestionFilePage; });
 __webpack_require__.d(__webpack_exports__, "QuestionHtmlModel", function() { return /* reexport */ question_html_QuestionHtmlModel; });
 __webpack_require__.d(__webpack_exports__, "QuestionRadiogroupModel", function() { return /* reexport */ question_radiogroup_QuestionRadiogroupModel; });
 __webpack_require__.d(__webpack_exports__, "QuestionRatingModel", function() { return /* reexport */ question_rating_QuestionRatingModel; });
@@ -2473,8 +2474,10 @@ var jsonobject_JsonObjectProperty = /** @class */ (function () {
         return this.getValue(obj);
     };
     JsonObjectProperty.prototype.getValue = function (obj) {
-        if (this.onGetValue)
+        if (this.onGetValue) {
+            obj = this.getOriginalObj(obj);
             return this.onGetValue(obj);
+        }
         if (this.serializationProperty && !!obj[this.serializationProperty])
             return obj[this.serializationProperty].getJson();
         return obj[this.name];
@@ -2501,6 +2504,7 @@ var jsonobject_JsonObjectProperty = /** @class */ (function () {
     };
     JsonObjectProperty.prototype.setValue = function (obj, value, jsonConv) {
         if (this.onSetValue) {
+            obj = this.getOriginalObj(obj);
             this.onSetValue(obj, value, jsonConv);
         }
         else {
@@ -2589,7 +2593,7 @@ var jsonobject_JsonObjectProperty = /** @class */ (function () {
     };
     JsonObjectProperty.prototype.isVisible = function (layout, obj) {
         if (obj === void 0) { obj = null; }
-        var isLayout = !this.layout || this.layout == layout;
+        var isLayout = !this.layout || !layout || this.layout === layout;
         if (!this.visible || !isLayout)
             return false;
         if (!!this.visibleIf && !!obj) {
@@ -9254,8 +9258,8 @@ var base_Base = /** @class */ (function () {
         this.isCreating = true;
         this.animationAllowedLock = 0;
         //remove when knockout obsolete
-        this.supportOnElementRenderedEvent = true;
-        this.onElementRenderedEventEnabled = false;
+        this.supportOnElementRerenderedEvent = true;
+        this.onElementRerenderedEventEnabled = false;
         this._onElementRerendered = new EventBase();
         this.bindingsValue = new base_Bindings(this);
         CustomPropertiesCollection.createProperties(this);
@@ -10192,7 +10196,7 @@ var base_Base = /** @class */ (function () {
         configurable: true
     });
     Base.prototype.getIsAnimationAllowed = function () {
-        return settings.animationEnabled && this.animationAllowedLock >= 0 && !this.isLoadingFromJson && !this.isDisposed && (!!this.onElementRerendered || !this.supportOnElementRenderedEvent);
+        return settings.animationEnabled && this.animationAllowedLock >= 0 && !this.isLoadingFromJson && !this.isDisposed && (!!this.onElementRerendered || !this.supportOnElementRerenderedEvent);
     };
     Base.prototype.blockAnimations = function () {
         this.animationAllowedLock--;
@@ -10200,17 +10204,17 @@ var base_Base = /** @class */ (function () {
     Base.prototype.releaseAnimations = function () {
         this.animationAllowedLock++;
     };
-    Base.prototype.enableOnElementRenderedEvent = function () {
-        this.onElementRenderedEventEnabled = true;
+    Base.prototype.enableOnElementRerenderedEvent = function () {
+        this.onElementRerenderedEventEnabled = true;
     };
-    Base.prototype.disableOnElementRenderedEvent = function () {
+    Base.prototype.disableOnElementRerenderedEvent = function () {
         var _a;
         (_a = this.onElementRerendered) === null || _a === void 0 ? void 0 : _a.fire(this, { isCancel: true });
-        this.onElementRenderedEventEnabled = false;
+        this.onElementRerenderedEventEnabled = false;
     };
     Object.defineProperty(Base.prototype, "onElementRerendered", {
         get: function () {
-            return this.supportOnElementRenderedEvent && this.onElementRenderedEventEnabled ? this._onElementRerendered : undefined;
+            return this.supportOnElementRerenderedEvent && this.onElementRerenderedEventEnabled ? this._onElementRerendered : undefined;
         },
         enumerable: false,
         configurable: true
@@ -10402,7 +10406,9 @@ var responsivity_manager_ResponsivityManager = /** @class */ (function () {
         var _items = this.container.querySelectorAll(this.itemsSelector);
         (_items || []).forEach(function (item, index) {
             var currentAction = actions[index];
-            _this.calcActionDimensions(currentAction, item);
+            if (!!currentAction) {
+                _this.calcActionDimensions(currentAction, item);
+            }
         });
     };
     ResponsivityManager.prototype.calcActionDimensions = function (currentAction, item) {
@@ -12962,6 +12968,7 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
                 }
             }
         }, function () { return _this.renderedIsExpanded; });
+        _this.onAfterRenderElement = _this.addEvent();
         _this.name = name;
         _this.createNewArray("errors");
         _this.createNewArray("titleActions");
@@ -12991,16 +12998,7 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
         }
         return info;
     };
-    SurveyElement.ScrollElementToTop = function (elementId, scrollIfVisible, scrollIntoViewOptions) {
-        var root = settings.environment.root;
-        if (!elementId || typeof root === "undefined")
-            return false;
-        var el = root.getElementById(elementId);
-        return SurveyElement.ScrollElementToViewCore(el, false, scrollIfVisible, scrollIntoViewOptions);
-    };
-    SurveyElement.ScrollElementToViewCore = function (el, checkLeft, scrollIfVisible, scrollIntoViewOptions) {
-        if (!el || !el.scrollIntoView)
-            return false;
+    SurveyElement.IsNeedScrollIntoView = function (el, checkLeft, scrollIfVisible) {
         var elTop = scrollIfVisible ? -1 : el.getBoundingClientRect().top;
         var needScroll = elTop < 0;
         var elLeft = -1;
@@ -13016,8 +13014,55 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
                 needScroll = width > 0 && width < elLeft;
             }
         }
+        return needScroll;
+    };
+    SurveyElement.ScrollIntoView = function (el, scrollIntoViewOptions, doneCallback) {
+        el.scrollIntoView(scrollIntoViewOptions);
+        if (typeof doneCallback === "function") {
+            var lastPos_1 = null;
+            var same_1 = 0;
+            var checkPos_1 = function () {
+                var newPos = el.getBoundingClientRect().top;
+                if (newPos === lastPos_1) {
+                    if (same_1++ > 2) {
+                        doneCallback();
+                        return;
+                    }
+                }
+                else {
+                    lastPos_1 = newPos;
+                    same_1 = 0;
+                }
+                requestAnimationFrame(checkPos_1);
+            };
+            DomWindowHelper.requestAnimationFrame(checkPos_1);
+            // let currPageXOffset = window.pageXOffset;
+            // let currPageYOffset = window.pageYOffset;
+            // var scrollDone = setInterval(() => {
+            //   DomWindowHelper.requestAnimationFrame(() => {
+            //     if (currPageXOffset == window.pageXOffset && currPageYOffset == window.pageYOffset) {
+            //       clearInterval(scrollDone);
+            //       doneCallback();
+            //     }
+            //     currPageXOffset = window.pageXOffset;
+            //     currPageYOffset = window.pageYOffset;
+            //   });
+            // }, 25);
+        }
+    };
+    SurveyElement.ScrollElementToTop = function (elementId, scrollIfVisible, scrollIntoViewOptions, doneCallback) {
+        var root = settings.environment.root;
+        if (!elementId || typeof root === "undefined")
+            return false;
+        var el = root.getElementById(elementId);
+        return SurveyElement.ScrollElementToViewCore(el, false, scrollIfVisible, scrollIntoViewOptions, doneCallback);
+    };
+    SurveyElement.ScrollElementToViewCore = function (el, checkLeft, scrollIfVisible, scrollIntoViewOptions, doneCallback) {
+        if (!el || !el.scrollIntoView)
+            return false;
+        var needScroll = SurveyElement.IsNeedScrollIntoView(el, checkLeft, scrollIfVisible);
         if (needScroll) {
-            el.scrollIntoView(scrollIntoViewOptions);
+            SurveyElement.ScrollIntoView(el, scrollIntoViewOptions, doneCallback);
         }
         return needScroll;
     };
@@ -13385,6 +13430,17 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
             this.surveyChangedCallback();
         }
     };
+    Object.defineProperty(SurveyElement.prototype, "skeletonHeight", {
+        get: function () {
+            var skeletonHeight = undefined;
+            if (!!this.survey && this.survey.skeletonHeight) {
+                skeletonHeight = this.survey.skeletonHeight + "px";
+            }
+            return skeletonHeight;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(SurveyElement.prototype, "isInternal", {
         get: function () {
             return this.isContentElement;
@@ -13756,7 +13812,7 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyElement.prototype, "isDefaultV2Theme", {
         get: function () {
-            return this.survey && this.survey.getCss().root == "sd-root-modern";
+            return this.survey && this.survey.getCss().root.indexOf("sd-root-modern") !== -1;
         },
         enumerable: false,
         configurable: true
@@ -14109,7 +14165,8 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
             },
             getLeaveOptions: function () {
                 var cssClasses = _this.isPanel ? _this.cssClasses.panel : _this.cssClasses;
-                return { cssClass: cssClasses.contentLeave,
+                return {
+                    cssClass: cssClasses.contentLeave,
                     onBeforeRunAnimation: beforeRunAnimation,
                     onAfterRunAnimation: afterRunAnimation
                 };
@@ -14152,12 +14209,16 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
     SurveyElement.prototype.getIsAnimationAllowed = function () {
         return _super.prototype.getIsAnimationAllowed.call(this) && !!this.survey && !this.survey["isEndLoadingFromJson"];
     };
+    SurveyElement.prototype.afterRenderCore = function (element) {
+        this.onAfterRenderElement.fire(this, { htmlElement: element });
+    };
     SurveyElement.prototype.dispose = function () {
         _super.prototype.dispose.call(this);
         if (this.titleToolbarValue) {
             this.titleToolbarValue.dispose();
         }
     };
+    // TODO V2: get rid of this flag
     SurveyElement.CreateDisabledDesignElements = false;
     survey_element_decorate([
         jsonobject_property({ defaultValue: null })
@@ -14190,6 +14251,66 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
     return SurveyElement;
 }(survey_element_SurveyElementCore));
 
+var RenderingCompletedAwaiter = /** @class */ (function () {
+    function RenderingCompletedAwaiter(_elements, _renderedHandler, waitingTimeout) {
+        var _this = this;
+        if (waitingTimeout === void 0) { waitingTimeout = 100; }
+        this._elements = _elements;
+        this._renderedHandler = _renderedHandler;
+        this._elementsToRenderCount = 0;
+        this._elementsToRenderTimer = undefined;
+        this._elementRenderedHandler = function (s, o) {
+            var _a;
+            (_a = s.onAfterRenderElement) === null || _a === void 0 ? void 0 : _a.remove(_this._elementRenderedHandler);
+            _this._elementsToRenderCount--;
+            if (_this._elementsToRenderCount <= 0) {
+                _this.visibleElementsRendered();
+            }
+        };
+        this._elements.forEach(function (element) {
+            if (element.onAfterRenderElement) {
+                element.onAfterRenderElement.add(_this._elementRenderedHandler);
+                _this._elementsToRenderCount++;
+            }
+        });
+        if (this._elementsToRenderCount > 0) {
+            this._elementsToRenderTimer = setTimeout(function () {
+                if (_this._elementsToRenderCount > 0) {
+                    _this.visibleElementsRendered();
+                }
+            }, waitingTimeout);
+        }
+        else {
+            this.visibleElementsRendered();
+        }
+    }
+    RenderingCompletedAwaiter.prototype.stopWaitingForElementsRendering = function () {
+        var _this = this;
+        if (this._elementsToRenderTimer) {
+            clearTimeout(this._elementsToRenderTimer);
+            this._elementsToRenderTimer = undefined;
+        }
+        this._elements.forEach(function (element) {
+            var _a;
+            (_a = element.onAfterRenderElement) === null || _a === void 0 ? void 0 : _a.remove(_this._elementRenderedHandler);
+        });
+        this._elementsToRenderCount = 0;
+    };
+    RenderingCompletedAwaiter.prototype.visibleElementsRendered = function () {
+        var renderedHandler = this._renderedHandler;
+        this.dispose();
+        if (typeof renderedHandler == "function") {
+            renderedHandler();
+        }
+    };
+    RenderingCompletedAwaiter.prototype.dispose = function () {
+        this.stopWaitingForElementsRendering();
+        this._elements = undefined;
+        this._renderedHandler = undefined;
+    };
+    return RenderingCompletedAwaiter;
+}());
+
 
 // CONCATENATED MODULE: ./packages/survey-core/src/localizablestring.ts
 
@@ -14919,7 +15040,7 @@ function findScrollableParent(element) {
     }
     return findScrollableParent(element.parentElement);
 }
-function scrollElementByChildId(id) {
+function activateLazyRenderingChecks(id) {
     var environment = settings.environment;
     if (!environment)
         return;
@@ -17524,21 +17645,26 @@ var text_area_TextAreaModel = /** @class */ (function () {
         this.onPropertyChangedCallback = function () {
             if (_this.element) {
                 _this.element.value = _this.getTextValue();
-                if (_this.autoGrow) {
-                    increaseHeightByContent(_this.element);
-                }
+                _this.updateElement();
             }
         };
         this.question.registerFunctionOnPropertyValueChanged(this.options.propertyName, this.onPropertyChangedCallback, "__textarea");
     }
+    TextAreaModel.prototype.updateElement = function () {
+        var _this = this;
+        if (this.element && this.autoGrow) {
+            setTimeout(function () { return increaseHeightByContent(_this.element); }, 1);
+        }
+    };
     TextAreaModel.prototype.setElement = function (element) {
         if (!!element) {
             this.element = element;
+            this.updateElement();
         }
     };
     TextAreaModel.prototype.getTextValue = function () {
         if (!!this.options.getTextValue)
-            return this.options.getTextValue();
+            return this.options.getTextValue() || "";
         return "";
     };
     TextAreaModel.prototype.onTextAreaChange = function (event) {
@@ -18803,7 +18929,8 @@ var question_Question = /** @class */ (function (_super) {
         }
         this.checkForResponsiveness(el);
     };
-    Question.prototype.afterRenderCore = function (el) {
+    Question.prototype.afterRenderCore = function (element) {
+        _super.prototype.afterRenderCore.call(this, element);
     };
     Question.prototype.getCommentElementsId = function () {
         return [this.commentId];
@@ -19415,7 +19542,7 @@ var question_Question = /** @class */ (function (_super) {
     });
     Object.defineProperty(Question.prototype, "isDisabledAttr", {
         get: function () {
-            return this.isDesignModeV2;
+            return this.isDesignModeV2 || (!!this.readOnlyCallback && this.readOnlyCallback());
         },
         enumerable: false,
         configurable: true
@@ -19609,7 +19736,7 @@ var question_Question = /** @class */ (function (_super) {
          *
          * | Question type | Value type(s) |
          * | ------------- | ------------- |
-         * | Checkboxes | `Array<string \| number>` |
+         * | Checkboxes | <code>Array&lt;string &#124; number&gt;</code> |
          * | Dropdown | `string` \| `number` |
          * | Dynamic Matrix | `Array<object>` |
          * | Dynamic Panel | `Array<object>` |
@@ -19617,14 +19744,14 @@ var question_Question = /** @class */ (function (_super) {
          * | File Upload | `File` \| `Array<File>` |
          * | HTML | (no value) |
          * | Image | (no value) |
-         * | Image Picker | `Array<string \| number>` |
+         * | Image Picker | <code>Array&lt;string &#124; number&gt;</code> |
          * | Long Text | `string` |
          * | Multi-Select Dropdown | `object` |
          * | Multi-Select Matrix | `object` |
          * | Multiple Textboxes | `Array<string>` |
          * | Panel | (no value) |
          * | Radio Button Group | `string` \| `number` |
-         * | Ranking | `Array<string \| number>` |
+         * | Ranking | <code>Array&lt;string &#124; number&gt;</code> |
          * | Rating Scale | `number` \| `string` |
          * | Signature | `string` (base64-encoded image) |
          * | Single-Line Input | `string` \| `number` \| `Date` |
@@ -20379,11 +20506,12 @@ var question_Question = /** @class */ (function (_super) {
     };
     Question.prototype.removeError = function (error) {
         if (!error)
-            return;
+            return false;
         var errors = this.errors;
         var index = errors.indexOf(error);
         if (index !== -1)
             errors.splice(index, 1);
+        return index !== -1;
     };
     Question.prototype.checkForErrors = function (isOnValueChanged, fireCallback) {
         var qErrors = new Array();
@@ -29899,9 +30027,11 @@ var question_matrixdropdownbase_QuestionMatrixDropdownModelBase = /** @class */
         rec.validationValues = this.getDataFilteredValues();
         rec.isSingleDetailPanel = this.detailPanelMode === "underRowSingle";
         for (var i = 0; i < rows.length; i++) {
-            res = rows[i].hasErrors(fireCallback, rec, function () {
-                _this.raiseOnCompletedAsyncValidators();
-            }) || res;
+            if (rows[i].isVisible) {
+                res = rows[i].hasErrors(fireCallback, rec, function () {
+                    _this.raiseOnCompletedAsyncValidators();
+                }) || res;
+            }
         }
         return res;
     };
@@ -29988,7 +30118,7 @@ var question_matrixdropdownbase_QuestionMatrixDropdownModelBase = /** @class */
             if (duplicatedRows.indexOf(row) < 0) {
                 var question = row.getQuestionByName(columnName);
                 if (question) {
-                    _this.removeDuplicationError(question);
+                    _this.removeDuplicationError(row, question);
                 }
             }
         });
@@ -30006,8 +30136,10 @@ var question_matrixdropdownbase_QuestionMatrixDropdownModelBase = /** @class */
             question.addError(new KeyDuplicationError(this.keyDuplicationError, this));
         }
     };
-    QuestionMatrixDropdownModelBase.prototype.removeDuplicationError = function (question) {
-        question.removeError(this.getDuplicationError(question));
+    QuestionMatrixDropdownModelBase.prototype.removeDuplicationError = function (row, question) {
+        if (question.removeError(this.getDuplicationError(question)) && question.errors.length === 0 && !!row.editingObj) {
+            row.editingObj[question.getValueName()] = question.value;
+        }
     };
     QuestionMatrixDropdownModelBase.prototype.getFirstQuestionToFocus = function (withError) {
         return this.getFirstCellQuestion(withError);
@@ -30118,7 +30250,14 @@ var question_matrixdropdownbase_QuestionMatrixDropdownModelBase = /** @class */
     });
     Object.defineProperty(QuestionMatrixDropdownModelBase.prototype, "hasInvisibleRows", {
         get: function () {
-            return !!this.visibleRowsArray && this.visibleRowsArray.length !== this.generatedVisibleRows.length;
+            var rows = this.generatedVisibleRows;
+            if (!Array.isArray(rows))
+                return false;
+            for (var i = 0; i < rows.length; i++) {
+                if (!rows[i].isVisible)
+                    return true;
+            }
+            return false;
         },
         enumerable: false,
         configurable: true
@@ -30329,7 +30468,7 @@ var question_matrixdropdownbase_QuestionMatrixDropdownModelBase = /** @class */
     };
     QuestionMatrixDropdownModelBase.prototype.clearInvisibleValuesInRows = function () {
         var _a;
-        if (this.isEmpty() || !this.isRowsFiltered)
+        if (this.isEmpty() || !this.isRowsFiltered())
             return;
         var sharedQuestions = ((_a = this.survey) === null || _a === void 0 ? void 0 : _a.questionsByValueName(this.getValueName())) || [];
         if (sharedQuestions.length < 2) {
@@ -31609,10 +31748,10 @@ var question_matrixdynamic_QuestionMatrixDynamicModel = /** @class */ (function
         };
         _this.createLocalizableString("removeRowText", _this, false, "removeRow");
         _this.createLocalizableString("emptyRowsText", _this, false, true);
-        _this.registerPropertyChangedHandlers(["hideColumnsIfEmpty", "allowAddRows"], function () {
-            _this.updateShowTableAndAddRow();
-        });
+        _this.registerPropertyChangedHandlers(["hideColumnsIfEmpty", "allowAddRows"], function () { _this.updateShowTableAndAddRow(); });
         _this.registerPropertyChangedHandlers(["allowRowsDragAndDrop", "isReadOnly", "lockedRowCount"], function () { _this.resetRenderedTable(); });
+        _this.registerPropertyChangedHandlers(["minRowCount"], function () { _this.onMinRowCountChanged(); });
+        _this.registerPropertyChangedHandlers(["maxRowCount"], function () { _this.onMaxRowCountChanged(); });
         _this.dragOrClickHelper = new dragOrClickHelper_DragOrClickHelper(_this.startDragMatrixRow);
         return _this;
     }
@@ -31720,7 +31859,7 @@ var question_matrixdynamic_QuestionMatrixDynamicModel = /** @class */ (function
         return (_super.prototype.isDefaultValueEmpty.call(this) && this.isValueEmpty(this.defaultRowValue));
     };
     QuestionMatrixDynamicModel.prototype.valueFromData = function (val) {
-        if (this.minRowCount < 1)
+        if (this.minRowCount < 1 || this.isEmpty())
             return _super.prototype.valueFromData.call(this, val);
         if (!Array.isArray(val))
             val = [];
@@ -31890,14 +32029,19 @@ var question_matrixdynamic_QuestionMatrixDynamicModel = /** @class */ (function
             if (val < 0)
                 val = 0;
             this.setPropertyValue("minRowCount", val);
-            if (val > this.maxRowCount)
-                this.maxRowCount = val;
-            if (this.rowCount < val)
-                this.rowCount = val;
         },
         enumerable: false,
         configurable: true
     });
+    QuestionMatrixDynamicModel.prototype.onMinRowCountChanged = function () {
+        var val = this.minRowCount;
+        if (val > this.maxRowCount)
+            this.maxRowCount = val;
+        if (this.initialRowCount < val)
+            this.initialRowCount = val;
+        if (this.rowCount < val)
+            this.rowCount = val;
+    };
     Object.defineProperty(QuestionMatrixDynamicModel.prototype, "maxRowCount", {
         /**
          * A maximum number of rows in the matrix. Users cannot add new rows if `rowCount` equals `maxRowCount`.
@@ -31918,14 +32062,17 @@ var question_matrixdynamic_QuestionMatrixDynamicModel = /** @class */ (function
             if (val == this.maxRowCount)
                 return;
             this.setPropertyValue("maxRowCount", val);
-            if (val < this.minRowCount)
-                this.minRowCount = val;
-            if (this.rowCount > val)
-                this.rowCount = val;
         },
         enumerable: false,
         configurable: true
     });
+    QuestionMatrixDynamicModel.prototype.onMaxRowCountChanged = function () {
+        var val = this.maxRowCount;
+        if (val < this.minRowCount)
+            this.minRowCount = val;
+        if (this.rowCount > val)
+            this.rowCount = val;
+    };
     Object.defineProperty(QuestionMatrixDynamicModel.prototype, "allowAddRows", {
         /**
          * Specifies whether users are allowed to add new rows.
@@ -32020,6 +32167,8 @@ var question_matrixdynamic_QuestionMatrixDynamicModel = /** @class */ (function
         this.addRow(true);
     };
     QuestionMatrixDynamicModel.prototype.getQuestionToFocusOnAddingRow = function () {
+        if (this.visibleRows.length === 0)
+            return null;
         var row = this.visibleRows[this.visibleRows.length - 1];
         for (var i = 0; i < row.cells.length; i++) {
             var q = row.cells[i].question;
@@ -32097,8 +32246,9 @@ var question_matrixdynamic_QuestionMatrixDynamicModel = /** @class */ (function
         }
         if (this.data) {
             this.runCellsCondition(this.getDataFilteredValues(), this.getDataFilteredProperties());
-            if (this.isValueEmpty(defaultValue)) {
-                var row = this.visibleRows[this.rowCount - 1];
+            var rows = this.visibleRows;
+            if (this.isValueEmpty(defaultValue) && rows.length > 0) {
+                var row = rows[rows.length - 1];
                 if (!this.isValueEmpty(row.value)) {
                     if (!newValue) {
                         newValue = this.createNewValue();
@@ -32112,8 +32262,10 @@ var question_matrixdynamic_QuestionMatrixDynamicModel = /** @class */ (function
             }
         }
         if (this.survey) {
-            if (prevRowCount + 1 == this.rowCount) {
-                this.survey.matrixRowAdded(this, this.visibleRows[this.visibleRows.length - 1]);
+            var rows = this.visibleRows;
+            if (prevRowCount + 1 == this.rowCount && rows.length > 0) {
+                var row = rows[rows.length - 1];
+                this.survey.matrixRowAdded(this, row);
                 this.onRowsChanged();
             }
         }
@@ -32464,6 +32616,7 @@ var question_matrixdynamic_QuestionMatrixDynamicModel = /** @class */ (function
                 newRow = lastDelRow;
             }
             else {
+                lastDelRow = undefined;
                 newRow = this.createMatrixRow(val[index]);
             }
             rows.splice(index, 0, newRow);
@@ -32546,6 +32699,8 @@ var question_matrixdynamic_QuestionMatrixDynamicModel = /** @class */ (function
         return result;
     };
     QuestionMatrixDynamicModel.prototype.deleteRowValue = function (newValue, row) {
+        if (!Array.isArray(newValue))
+            return newValue;
         var isEmpty = true;
         for (var i = 0; i < newValue.length; i++) {
             if (this.isObject(newValue[i]) && Object.keys(newValue[i]).length > 0) {
@@ -33387,6 +33542,7 @@ var defaultV2Css = {
         changeCameraButton: "sd-file__change-camera-button",
         takePictureButton: "sd-file__take-picture-button",
         loadingIndicator: "sd-file__loading-indicator",
+        page: "sd-file__page"
     },
     signaturepad: {
         mainRoot: "sd-element sd-question sd-question--signature sd-row__question",
@@ -33717,7 +33873,8 @@ var surveytimer_SurveyTimer = /** @class */ (function () {
     function SurveyTimer() {
         this.listenerCounter = 0;
         this.timerId = -1;
-        this.onTimer = new EventBase();
+        this.onTimerTick = new EventBase();
+        this.onTimer = this.onTimerTick;
     }
     Object.defineProperty(SurveyTimer, "instance", {
         get: function () {
@@ -33733,7 +33890,7 @@ var surveytimer_SurveyTimer = /** @class */ (function () {
         var _this = this;
         if (func === void 0) { func = null; }
         if (func) {
-            this.onTimer.add(func);
+            this.onTimerTick.add(func);
         }
         this.prevTimeInMs = surveyTimerFunctions.now();
         if (this.timerId < 0) {
@@ -33746,7 +33903,7 @@ var surveytimer_SurveyTimer = /** @class */ (function () {
     SurveyTimer.prototype.stop = function (func) {
         if (func === void 0) { func = null; }
         if (func) {
-            this.onTimer.remove(func);
+            this.onTimerTick.remove(func);
         }
         this.listenerCounter--;
         if (this.listenerCounter == 0 && this.timerId > -1) {
@@ -33756,7 +33913,7 @@ var surveytimer_SurveyTimer = /** @class */ (function () {
     };
     SurveyTimer.prototype.doTimer = function () {
         var _this = this;
-        if (this.onTimer.isEmpty || this.listenerCounter == 0) {
+        if (this.onTimerTick.isEmpty || this.listenerCounter == 0) {
             this.timerId = -1;
         }
         if (this.timerId < 0)
@@ -33768,7 +33925,7 @@ var surveytimer_SurveyTimer = /** @class */ (function () {
             seconds = 1;
         }
         var prevItem = this.timerId;
-        this.onTimer.fire(this, { seconds: seconds });
+        this.onTimerTick.fire(this, { seconds: seconds });
         //We have to check that we have the same timerId
         //It could be changed during events execution and it will lead to double timer events
         if (prevItem !== this.timerId)
@@ -33868,8 +34025,8 @@ var surveyTimerModel_SurveyTimerModel = /** @class */ (function (_super) {
         }
         this.spent = this.spent + seconds;
         this.update();
-        if (this.onTimer) {
-            this.onTimer(page);
+        if (this.onTimerTick) {
+            this.onTimerTick(page);
         }
     };
     SurveyTimerModel.prototype.updateProgress = function () {
@@ -34849,6 +35006,13 @@ var panel_QuestionRowModel = /** @class */ (function (_super) {
     QuestionRowModel.getRowId = function () {
         return "pr_" + QuestionRowModel.rowCounter++;
     };
+    Object.defineProperty(QuestionRowModel.prototype, "allowRendering", {
+        get: function () {
+            return !this.panel || !this.panel.survey || !this.panel.survey["isLazyRenderingSuspended"];
+        },
+        enumerable: false,
+        configurable: true
+    });
     QuestionRowModel.prototype.startLazyRendering = function (rowContainerDiv, findScrollableContainer) {
         var _this = this;
         if (findScrollableContainer === void 0) { findScrollableContainer = findScrollableParent; }
@@ -34863,6 +35027,9 @@ var panel_QuestionRowModel = /** @class */ (function (_super) {
         this.isNeedRender = !hasScroll;
         if (hasScroll) {
             this._updateVisibility = function () {
+                if (!_this.allowRendering) {
+                    return;
+                }
                 var isRowContainerDivVisible = isElementVisible(rowContainerDiv, 50);
                 if (!_this.isNeedRender && isRowContainerDivVisible) {
                     _this.isNeedRender = true;
@@ -34996,6 +35163,10 @@ var panel_QuestionRowModel = /** @class */ (function (_super) {
             if (this.elements[i].isVisible) {
                 visElements.push(this.elements[i]);
             }
+            if (this.elements[i].isPanel || this.elements[i].getType() === "paneldynamic") {
+                this.setIsLazyRendering(false);
+                this.stopLazyRendering();
+            }
         }
         this.visibleElements = visElements;
         return;
@@ -35606,7 +35777,7 @@ var panel_PanelModelBase = /** @class */ (function (_super) {
     PanelModelBase.prototype.getValue = function () {
         var data = {};
         this.collectValues(data, 0);
-        return data;
+        return helpers_Helpers.getUnbindValue(data);
     };
     PanelModelBase.prototype.collectValues = function (data, level) {
         var elements = this.elements;
@@ -36206,11 +36377,21 @@ var panel_PanelModelBase = /** @class */ (function (_super) {
             this.onVisibleChanged();
         }
     };
+    PanelModelBase.prototype.canRenderFirstRows = function () {
+        return this.isPage;
+    };
+    PanelModelBase.prototype.isLazyRenderInRow = function (rowIndex) {
+        if (!this.survey || !this.survey.isLazyRendering)
+            return false;
+        return (rowIndex >= this.survey.lazyRenderingFirstBatchSize ||
+            !this.canRenderFirstRows());
+    };
     PanelModelBase.prototype.createRowAndSetLazy = function (index) {
         var row = this.createRow();
         row.setIsLazyRendering(this.isLazyRenderInRow(index));
         return row;
     };
+    // TODO V2: make all createRow API private (at least protected) after removing DragDropPanelHelperV1
     PanelModelBase.prototype.createRow = function () {
         return new panel_QuestionRowModel(this);
     };
@@ -36441,15 +36622,6 @@ var panel_PanelModelBase = /** @class */ (function (_super) {
         }
         return result;
     };
-    PanelModelBase.prototype.isLazyRenderInRow = function (rowIndex) {
-        if (!this.survey || !this.survey.isLazyRendering)
-            return false;
-        return (rowIndex >= this.survey.lazyRenderingFirstBatchSize ||
-            !this.canRenderFirstRows());
-    };
-    PanelModelBase.prototype.canRenderFirstRows = function () {
-        return this.isPage;
-    };
     PanelModelBase.prototype.getDragDropInfo = function () {
         var page = this.getPage(this.parent);
         return !!page ? page.getDragDropInfo() : undefined;
@@ -36479,27 +36651,74 @@ var panel_PanelModelBase = /** @class */ (function (_super) {
             }
         }
     };
-    PanelModelBase.prototype.disableLazyRenderingBeforeElement = function (el) {
-        var row = el ? this.findRowByElement(el) : undefined;
-        var index = el ? this.rows.indexOf(row) : this.rows.length - 1;
-        for (var i = index; i >= 0; i--) {
-            var currentRow = this.rows[i];
-            if (currentRow.isNeedRender) {
-                break;
-            }
-            else {
-                currentRow.isNeedRender = true;
-                currentRow.stopLazyRendering();
-            }
-        }
+    PanelModelBase.prototype.getAllRows = function () {
+        var _this = this;
+        var allRows = [];
+        this.rows.forEach(function (row) {
+            var nestedRows = [];
+            row.elements.forEach(function (element) {
+                if (element.isPanel) {
+                    nestedRows.push.apply(nestedRows, element.getAllRows());
+                }
+                else if (element.getType() == "paneldynamic") {
+                    if (_this.isDesignMode) {
+                        nestedRows.push.apply(nestedRows, element.template.getAllRows());
+                    }
+                    else {
+                        element.panels.forEach(function (panel) { return nestedRows.push.apply(nestedRows, panel.getAllRows()); });
+                    }
+                }
+            });
+            allRows.push(row);
+            allRows.push.apply(allRows, nestedRows);
+        });
+        return allRows;
     };
-    PanelModelBase.prototype.findRowByElement = function (el) {
-        var rows = this.rows;
+    PanelModelBase.prototype.findRowAndIndexByElement = function (el, rows) {
+        if (!el) {
+            return { row: undefined, index: this.rows.length - 1 };
+        }
+        rows = rows || this.rows;
         for (var i = 0; i < rows.length; i++) {
             if (rows[i].elements.indexOf(el) > -1)
-                return rows[i];
+                return { row: rows[i], index: i };
+        }
+        return { row: null, index: -1 };
+    };
+    PanelModelBase.prototype.forceRenderRow = function (row) {
+        if (!!row && !row.isNeedRender) {
+            row.isNeedRender = true;
+            row.stopLazyRendering();
         }
-        return null;
+    };
+    PanelModelBase.prototype.forceRenderElement = function (el, elementsRendered, gap) {
+        if (elementsRendered === void 0) { elementsRendered = function () { }; }
+        if (gap === void 0) { gap = 0; }
+        var allRows = this.getAllRows();
+        var _a = this.findRowAndIndexByElement(el, allRows), row = _a.row, index = _a.index;
+        if (index >= 0 && index < allRows.length) {
+            var rowsToRender = [];
+            rowsToRender.push(row);
+            for (var i = index - 1; i >= index - gap && i >= 0; i--) {
+                rowsToRender.push(allRows[i]);
+            }
+            this.forceRenderRows(rowsToRender, elementsRendered);
+        }
+    };
+    PanelModelBase.prototype.forceRenderRows = function (rows, elementsRendered) {
+        var _this = this;
+        if (elementsRendered === void 0) { elementsRendered = function () { }; }
+        var rowRenderedHandler = (function (rowsCount) { return function () {
+            rowsCount--;
+            if (rowsCount <= 0) {
+                elementsRendered();
+            }
+        }; })(rows.length);
+        rows.forEach(function (row) { return new RenderingCompletedAwaiter(row.visibleElements, rowRenderedHandler); });
+        rows.forEach(function (row) { return _this.forceRenderRow(row); });
+    };
+    PanelModelBase.prototype.findRowByElement = function (el) {
+        return this.findRowAndIndexByElement(el).row;
     };
     PanelModelBase.prototype.elementWidthChanged = function (el) {
         if (this.isLoadingFromJson)
@@ -36955,6 +37174,9 @@ var panel_PanelModelBase = /** @class */ (function (_super) {
         }
         return this.layoutColumns.slice(0, tailIndex + 1);
     };
+    PanelModelBase.prototype.afterRender = function (el) {
+        this.afterRenderCore(el);
+    };
     PanelModelBase.prototype.dispose = function () {
         _super.prototype.dispose.call(this);
         if (this.rows) {
@@ -37183,7 +37405,7 @@ var panel_PanelModel = /** @class */ (function (_super) {
     };
     PanelModel.prototype.beforeSetVisibleIndex = function (index) {
         var visibleIndex = -1;
-        if (this.showNumber && (this.isDesignMode || !this.locTitle.isEmpty)) {
+        if (this.showNumber && (this.isDesignMode || !this.locTitle.isEmpty || this.hasParentInQuestionIndex())) {
             visibleIndex = index;
         }
         this.setPropertyValue("visibleIndex", visibleIndex);
@@ -37191,14 +37413,21 @@ var panel_PanelModel = /** @class */ (function (_super) {
         return visibleIndex < 0 ? 0 : 1;
     };
     PanelModel.prototype.getPanelStartIndex = function (index) {
-        if (this.showQuestionNumbers == "off")
+        if (this.showQuestionNumbers === "off")
             return -1;
-        if (this.showQuestionNumbers == "onpanel")
+        if (this.showQuestionNumbers === "onpanel")
             return 0;
         return index;
     };
+    PanelModel.prototype.hasParentInQuestionIndex = function () {
+        if (this.showQuestionNumbers !== "onpanel")
+            return false;
+        var str = this.questionStartIndex;
+        var index = str.indexOf(".");
+        return index > -1 && index < str.length - 1;
+    };
     PanelModel.prototype.isContinueNumbering = function () {
-        return (this.showQuestionNumbers != "off" && this.showQuestionNumbers != "onpanel");
+        return this.showQuestionNumbers !== "off" && this.showQuestionNumbers !== "onpanel";
     };
     PanelModel.prototype.notifySurveyOnVisibilityChanged = function () {
         if (this.survey != null && !this.isLoadingFromJson) {
@@ -37420,6 +37649,11 @@ var panel_PanelModel = /** @class */ (function (_super) {
     PanelModel.prototype.getContainerCss = function () {
         return this.getCssRoot(this.cssClasses.panel);
     };
+    PanelModel.prototype.afterRenderCore = function (element) {
+        var _a;
+        _super.prototype.afterRenderCore.call(this, element);
+        (_a = this.survey) === null || _a === void 0 ? void 0 : _a.afterRenderPanel(this, element);
+    };
     return PanelModel;
 }(panel_PanelModelBase));
 
@@ -37773,7 +38007,7 @@ var page_PageModel = /** @class */ (function (_super) {
         _this.hasShownValue = false;
         /**
          * A time period that a respondent has spent on this page so far; measured in seconds. Applies only to [quiz surveys](https://surveyjs.io/form-library/documentation/design-survey-create-a-quiz).
-         * @see maxTimeToFinish
+         * @see timeLimit
          */
         _this.timeSpent = 0;
         _this.createLocalizableString("navigationDescription", _this, true);
@@ -37866,6 +38100,13 @@ var page_PageModel = /** @class */ (function (_super) {
         this.locNavigationTitle.strChanged();
         this.locNavigationDescription.strChanged();
     };
+    PageModel.prototype.getMarkdownHtml = function (text, name) {
+        var result = _super.prototype.getMarkdownHtml.call(this, text, name);
+        if (name === "navigationTitle" && this.canShowPageNumber() && result) {
+            return this.num + ". " + result;
+        }
+        return result;
+    };
     Object.defineProperty(PageModel.prototype, "passed", {
         get: function () {
             return this.getPropertyValue("passed", false);
@@ -38053,12 +38294,6 @@ var page_PageModel = /** @class */ (function (_super) {
             this.survey.scrollElementToTop(this, null, this, this.id);
         }
     };
-    // public get timeSpent(): number {
-    //   return this.getPropertyValue("timeSpent", 0);
-    // }
-    // public set timeSpent(val: number) {
-    //   this.setPropertyValue("timeSpent", val);
-    // }
     /**
      * Returns a list of all panels on this page.
      * @param visibleOnly A Boolean value that specifies whether to include only visible panels.
@@ -38076,28 +38311,42 @@ var page_PageModel = /** @class */ (function (_super) {
         if (includingDesignTime === void 0) { includingDesignTime = false; }
         return this.getAllPanels(visibleOnly, includingDesignTime);
     };
-    Object.defineProperty(PageModel.prototype, "maxTimeToFinish", {
+    Object.defineProperty(PageModel.prototype, "timeLimit", {
         /**
          * A time period that a respondent has to complete this page; measured in seconds. Applies only to [quiz surveys](https://surveyjs.io/form-library/documentation/design-survey-create-a-quiz).
          *
-         * A negative value or 0 sets an unlimited time period.
+         * Default value: 0 (time is unlimited)
          *
-         * Alternatively, you can use the `SurveyModel`'s [`maxTimeToFinishPage`](https://surveyjs.io/form-library/documentation/surveymodel#maxTimeToFinishPage) property to specify identical time periods for all survey pages.
+         * Alternatively, you can use the `SurveyModel`'s [`timeLimitPerPage`](https://surveyjs.io/form-library/documentation/surveymodel#timeLimitPerPage) property to specify identical time periods for all survey pages.
          * @see timeSpent
          */
         get: function () {
-            return this.getPropertyValue("maxTimeToFinish", 0);
+            return this.getPropertyValue("timeLimit", 0);
         },
         set: function (val) {
-            this.setPropertyValue("maxTimeToFinish", val);
+            this.setPropertyValue("timeLimit", val);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PageModel.prototype, "maxTimeToFinish", {
+        /**
+         * Obsolete. Use the [`timeLimit`](https://surveyjs.io/form-library/documentation/api-reference/page-model#timeLimit) property instead.
+         * @deprecated
+         */
+        get: function () {
+            return this.timeLimit;
+        },
+        set: function (val) {
+            this.timeLimit = val;
         },
         enumerable: false,
         configurable: true
     });
     PageModel.prototype.getMaxTimeToFinish = function () {
-        if (this.maxTimeToFinish !== 0)
-            return this.maxTimeToFinish;
-        var res = !!this.survey ? this.survey.maxTimeToFinishPage : 0;
+        if (this.timeLimit !== 0)
+            return this.timeLimit;
+        var res = !!this.survey ? this.survey.timeLimitPerPage : 0;
         return res > 0 ? res : 0;
     };
     PageModel.prototype.onNumChanged = function (value) { };
@@ -38139,7 +38388,7 @@ Serializer.addClass("page", [
         default: "inherit",
         choices: ["inherit", "show", "hide"],
     },
-    { name: "maxTimeToFinish:number", default: 0, minValue: 0 },
+    { name: "timeLimit:number", alternativeName: "maxTimeToFinish", default: 0, minValue: 0 },
     {
         name: "navigationTitle",
         visibleIf: function (obj) {
@@ -39165,12 +39414,18 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         * An event that is raised every second while the timer is running.
         *
         * Use the [`timeSpent`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#timeSpent) property to find out how many seconds have elapsed.
-        * @see maxTimeToFinish
-        * @see maxTimeToFinishPage
-        * @see showTimerPanel
+        * @see timeLimit
+        * @see timeLimitPerPage
+        * @see showTimer
+        * @see timerLocation
         * @see startTimer
         */
-        _this.onTimer = _this.addEvent();
+        _this.onTimerTick = _this.addEvent();
+        /**
+         * Obsolete. Use the [`onTimerTick`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onTimerTick) event instead.
+         * @deprecated
+         */
+        _this.onTimer = _this.onTimerTick;
         _this.onTimerPanelInfoText = _this.addEvent();
         /**
          * An event that is raised after an item value is changed in a panel within a [Dynamic Panel](https://surveyjs.io/form-library/examples/questiontype-paneldynamic/) question.
@@ -39267,6 +39522,19 @@ var survey_SurveyModel = /** @class */ (function (_super) {
          */
         _this.jsonErrors = null;
         _this.cssValue = null;
+        /**
+         * Specifies whether the [Complete page](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#complete-page) should display the [survey header](https://surveyjs.io/form-library/examples/brand-your-survey-header/).
+         *
+         * Possible values:
+         *
+         * - `true` - Displays the survey header on the Complete page.
+         * - `false` - Hides the header when users reach the Complete page.
+         * - `"auto"` (default) - Displays a header with the basic view, but hides a header with the advanced view (see the [`headerView`](https://surveyjs.io/form-library/documentation/api-reference/itheme#headerView) property description).
+         *
+         * > This property cannot be specified in the survey JSON schema. Use dot notation to specify it.
+         */
+        _this.showHeaderOnCompletePage = "auto";
+        _this._isLazyRenderingSuspended = false;
         /**
          * Specifies whether to hide validation errors thrown by the Required validation in the UI.
          *
@@ -39303,6 +39571,7 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         _this.onResize = new EventBase();
         _this.isCurrentPageRendering = true;
         _this.isCurrentPageRendered = undefined;
+        _this.skeletonHeight = undefined;
         _this.isTriggerIsRunning = false;
         _this.triggerValues = null;
         _this.triggerKeys = null;
@@ -39341,7 +39610,7 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         _this.createLocalizableString("editText", _this, false, true);
         _this.createLocalizableString("questionTitleTemplate", _this, true);
         _this.timerModelValue = new surveyTimerModel_SurveyTimerModel(_this);
-        _this.timerModelValue.onTimer = function (page) {
+        _this.timerModelValue.onTimerTick = function (page) {
             _this.doTimer(page);
         };
         _this.createNewArray("pages", function (value) {
@@ -39718,7 +39987,7 @@ var survey_SurveyModel = /** @class */ (function (_super) {
     Object.defineProperty(SurveyModel.prototype, "bodyCss", {
         get: function () {
             return new CssClassBuilder().append(this.css.body)
-                .append(this.css.bodyWithTimer, this.showTimerPanel != "none" && this.state === "running")
+                .append(this.css.bodyWithTimer, this.showTimer && this.state === "running")
                 .append(this.css.body + "--" + this.calculatedWidthMode).toString();
         },
         enumerable: false,
@@ -39789,22 +40058,29 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    SurveyModel.prototype.disableLazyRenderingBeforeElement = function (el) {
-        if (this.isDesignMode) {
-            var page = this.getPageByElement(el);
-            var index = this.pages.indexOf(page);
-            for (var i = index; i >= 0; i--) {
-                var currentPage = this.pages[i];
-                currentPage.disableLazyRenderingBeforeElement(currentPage == page ? el : undefined);
-            }
-        }
+    Object.defineProperty(SurveyModel.prototype, "isLazyRenderingSuspended", {
+        get: function () {
+            return this._isLazyRenderingSuspended;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyModel.prototype.suspendLazyRendering = function () {
+        if (!this.isLazyRendering)
+            return;
+        this._isLazyRenderingSuspended = true;
+    };
+    SurveyModel.prototype.releaseLazyRendering = function () {
+        if (!this.isLazyRendering)
+            return;
+        this._isLazyRenderingSuspended = false;
     };
     SurveyModel.prototype.updateLazyRenderingRowsOnRemovingElements = function () {
         if (!this.isLazyRendering)
             return;
         var page = this.currentPage;
         if (!!page) {
-            scrollElementByChildId(page.id);
+            activateLazyRenderingChecks(page.id);
         }
     };
     Object.defineProperty(SurveyModel.prototype, "triggers", {
@@ -41037,13 +41313,20 @@ var survey_SurveyModel = /** @class */ (function (_super) {
     /**
      * Calculates a given [expression](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#expressions) and returns a result value.
      * @param expression An expression to calculate.
+     * @param callback A callback function that you can use to access the calculation result if the expression uses asynchronous functions.
      */
-    SurveyModel.prototype.runExpression = function (expression) {
+    SurveyModel.prototype.runExpression = function (expression, callback) {
         if (!expression)
             return null;
         var values = this.getFilteredValues();
         var properties = this.getFilteredProperties();
-        return new ExpressionRunner(expression).run(values, properties);
+        var exp = new ExpressionRunner(expression);
+        var onCompleteRes = undefined;
+        exp.onRunComplete = function (res) {
+            onCompleteRes = res;
+            callback && callback(res);
+        };
+        return exp.run(values, properties) || onCompleteRes;
     };
     /**
      * Calculates a given [expression](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#expressions) and returns `true` or `false`.
@@ -44331,7 +44614,8 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         this.onGetMatrixRowActions.fire(this, options);
         return options.actions;
     };
-    SurveyModel.prototype.scrollElementToTop = function (element, question, page, id, scrollIfVisible, scrollIntoViewOptions) {
+    SurveyModel.prototype.scrollElementToTop = function (element, question, page, id, scrollIfVisible, scrollIntoViewOptions, passedRootElement) {
+        var _this = this;
         var options = {
             element: element,
             question: question,
@@ -44341,7 +44625,25 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         };
         this.onScrollingElementToTop.fire(this, options);
         if (!options.cancel) {
-            survey_element_SurveyElement.ScrollElementToTop(options.elementId, scrollIfVisible, scrollIntoViewOptions);
+            var elementPage_1 = this.getPageByElement(element);
+            if (this.isLazyRendering && !!elementPage_1) {
+                var elementsToRenderBefore = 1;
+                var rootElement = settings.environment.rootElement;
+                var surveyRootElement = this.rootElement || passedRootElement || rootElement;
+                if (!!this.skeletonHeight && !!surveyRootElement && typeof surveyRootElement.getBoundingClientRect === "function") {
+                    elementsToRenderBefore = surveyRootElement.getBoundingClientRect().height / this.skeletonHeight - 1;
+                }
+                elementPage_1.forceRenderElement(element, function () {
+                    _this.suspendLazyRendering();
+                    survey_element_SurveyElement.ScrollElementToTop(options.elementId, scrollIfVisible, scrollIntoViewOptions, function () {
+                        _this.releaseLazyRendering();
+                        activateLazyRenderingChecks(elementPage_1.id);
+                    });
+                }, elementsToRenderBefore);
+            }
+            else {
+                survey_element_SurveyElement.ScrollElementToTop(options.elementId, scrollIfVisible, scrollIntoViewOptions);
+            }
         }
     };
     /**
@@ -46088,64 +46390,117 @@ var survey_SurveyModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyModel.prototype, "showTimerPanel", {
         /**
-         * Displays the timer panel and specifies its position. Applies only to [quiz surveys](https://surveyjs.io/form-library/documentation/design-survey-create-a-quiz).
+         * Obsolete. Use the [`showTimer`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showTimer) and [`timerLocation`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#timerLocation) properties instead.
+         * @deprecated
+         */
+        get: function () {
+            if (!this.showTimer)
+                return "none";
+            return this.timerLocation;
+        },
+        set: function (val) {
+            this.showTimer = val !== "none";
+            if (this.showTimer) {
+                this.timerLocation = val;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyModel.prototype, "showTimer", {
+        /**
+         * Specifies the timer's visibility. Applies only to [quiz surveys](https://surveyjs.io/form-library/documentation/design-survey-create-a-quiz).
          *
-         * Possible values:
+         * Default value: `false`
          *
-         * - `"top"` - Displays the timer panel at the top of the survey.
-         * - `"bottom"` - Displays the timer panel at the bottom of the survey.
-         * - `"none"` (default) - Hides the timer panel.
+         * If you set this property to `true`, the timer starts automatically when the survey begins. To specify time limits, use the [`timeLimit`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#timeLimit) and [`timeLimitPerPage`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#timeLimitPerPage) properties.
          *
-         * If the timer panel is displayed, the timer starts automatically when the survey begins. To specify time limits, use the [`maxTimeToFinish`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#maxTimeToFinish) and [`maxTimeToFinishPage`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#maxTimeToFinishPage) properties.
+         * The timer displays information about time spent on an individual page and the entire survey. If you want to display only the page timer or the survey timer, set the [`timerInfoMode`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#timerInfoMode) property to `"page"` or `"survey"`.
          *
-         * The timer panel displays information about time spent on an individual page and the entire survey. If you want to display only the page timer or the survey timer, set the [`showTimerPanelMode`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showTimerPanelMode) property to `"page"` or `"survey"`.
-         * @see startTimer
-         * @see stopTimer
+         * You can enable the timer without displaying it. In this case, you need to specify the required time limits and use the [`startTimer()`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#startTimer) and [`stopTimer()`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#stopTimer) methods to control the timer.
+         * @see timerLocation
          * @see timeSpent
-         * @see onTimer
+         * @see onTimerTick
+         */
+        get: function () {
+            return this.getPropertyValue("showTimer");
+        },
+        set: function (val) {
+            this.setPropertyValue("showTimer", val);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyModel.prototype, "timerLocation", {
+        /**
+         * Specifies the timer's position relative to the survey. Applies only if the [`showTimer`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showTimer) property is set to `true`.
+         *
+         * Possible values:
+         *
+         * - `"top"` (default) - Displays the timer at the top of the survey.
+         * - `"bottom"` - Displays the timer at the bottom of the survey.
+         * @see onTimerTick
          */
         get: function () {
-            return this.getPropertyValue("showTimerPanel");
+            return this.getPropertyValue("timerLocation");
         },
         set: function (val) {
-            this.setPropertyValue("showTimerPanel", val);
+            this.setPropertyValue("timerLocation", val);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(SurveyModel.prototype, "isTimerPanelShowingOnTop", {
         get: function () {
-            return this.showTimerPanel == "top";
+            return this.showTimer && this.timerLocation === "top";
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(SurveyModel.prototype, "isTimerPanelShowingOnBottom", {
         get: function () {
-            return this.showTimerPanel == "bottom";
+            return this.showTimer && this.timerLocation === "bottom";
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(SurveyModel.prototype, "showTimerPanelMode", {
+    Object.defineProperty(SurveyModel.prototype, "timerInfoMode", {
         /**
-         * Specifies whether the timer panel displays timers for the current page, the entire survey, or both. Applies only if the timer panel is [visible](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showTimerPanel).
+         * Specifies whether the timer panel displays timers for the current page, the entire survey, or both. Applies only if the timer panel is [visible](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showTimer).
          *
          * Possible values:
          *
          * - `"survey"` - Displays only the survey timer.
          * - `"page"` - Displays only the page timer.
-         * - `"all"` (default) - Displays both the survey and page timers.
+         * - `"combined"` (default) - Displays both the survey and page timers.
          * @see timeSpent
-         * @see onTimer
+         * @see onTimerTick
          * @see startTimer
          * @see stopTimer
          */
         get: function () {
-            return this.getPropertyValue("showTimerPanelMode");
+            return this.getTimerInfoVal(this.getPropertyValue("timerInfoMode"));
+        },
+        set: function (val) {
+            this.setPropertyValue("timerInfoMode", val);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyModel.prototype.getTimerInfoVal = function (val) {
+        return val === "all" ? "combined" : val;
+    };
+    Object.defineProperty(SurveyModel.prototype, "showTimerPanelMode", {
+        /**
+         * Obsolete. Use the [`timerInfoMode`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#timerInfoMode) property instead.
+         * @deprecated
+         */
+        get: function () {
+            var res = this.timerInfoMode;
+            return res === "combined" ? "all" : res;
         },
         set: function (val) {
-            this.setPropertyValue("showTimerPanelMode", val);
+            this.timerInfoMode = this.getTimerInfoVal(val);
         },
         enumerable: false,
         configurable: true
@@ -46264,11 +46619,11 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         var pageSpent = page.timeSpent;
         var surveySpent = this.timeSpent;
         var pageLimitSec = page.getMaxTimeToFinish();
-        var surveyLimit = this.maxTimeToFinish;
-        if (this.showTimerPanelMode == "page") {
+        var surveyLimit = this.timeLimit;
+        if (this.timerInfoMode == "page") {
             return { spent: pageSpent, limit: pageLimitSec };
         }
-        if (this.showTimerPanelMode == "survey") {
+        if (this.timerInfoMode == "survey") {
             return { spent: surveySpent, limit: surveyLimit };
         }
         else {
@@ -46294,16 +46649,16 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         var surveySpent = this.getDisplayTime(this.timeSpent);
         var pageLimitSec = page.getMaxTimeToFinish();
         var pageLimit = this.getDisplayTime(pageLimitSec);
-        var surveyLimit = this.getDisplayTime(this.maxTimeToFinish);
-        if (this.showTimerPanelMode == "page")
+        var surveyLimit = this.getDisplayTime(this.timeLimit);
+        if (this.timerInfoMode == "page")
             return this.getTimerInfoPageText(page, pageSpent, pageLimit);
-        if (this.showTimerPanelMode == "survey")
+        if (this.timerInfoMode == "survey")
             return this.getTimerInfoSurveyText(surveySpent, surveyLimit);
-        if (this.showTimerPanelMode == "all") {
-            if (pageLimitSec <= 0 && this.maxTimeToFinish <= 0) {
+        if (this.timerInfoMode == "combined") {
+            if (pageLimitSec <= 0 && this.timeLimit <= 0) {
                 return this.getLocalizationFormatString("timerSpentAll", pageSpent, surveySpent);
             }
-            if (pageLimitSec > 0 && this.maxTimeToFinish > 0) {
+            if (pageLimitSec > 0 && this.timeLimit > 0) {
                 return this.getLocalizationFormatString("timerLimitAll", pageSpent, pageLimit, surveySpent, surveyLimit);
             }
             var pageText = this.getTimerInfoPageText(page, pageSpent, pageLimit);
@@ -46318,7 +46673,7 @@ var survey_SurveyModel = /** @class */ (function (_super) {
             : this.getLocalizationFormatString("timerSpentPage", pageSpent, pageLimit);
     };
     SurveyModel.prototype.getTimerInfoSurveyText = function (surveySpent, surveyLimit) {
-        var strName = this.maxTimeToFinish > 0 ? "timerLimitSurvey" : "timerSpentSurvey";
+        var strName = this.timeLimit > 0 ? "timerLimitSurvey" : "timerSpentSurvey";
         return this.getLocalizationFormatString(strName, surveySpent, surveyLimit);
     };
     SurveyModel.prototype.getDisplayClockTime = function (val) {
@@ -46354,10 +46709,10 @@ var survey_SurveyModel = /** @class */ (function (_super) {
     /**
      * Starts a timer that calculates how many seconds a respondent has spent on the survey. Applies only to [quiz surveys](https://surveyjs.io/form-library/documentation/design-survey-create-a-quiz).
      * @see stopTimer
-     * @see maxTimeToFinish
-     * @see maxTimeToFinishPage
+     * @see timeLimit
+     * @see timeLimitPerPage
      * @see timeSpent
-     * @see onTimer
+     * @see onTimerTick
      */
     SurveyModel.prototype.startTimer = function () {
         if (this.isEditMode) {
@@ -46365,17 +46720,17 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         }
     };
     SurveyModel.prototype.startTimerFromUI = function () {
-        if (this.showTimerPanel != "none" && this.state === "running") {
+        if (this.showTimer && this.state === "running") {
             this.startTimer();
         }
     };
     /**
      * Stops the timer. Applies only to [quiz surveys](https://surveyjs.io/form-library/documentation/design-survey-create-a-quiz).
      * @see startTimer
-     * @see maxTimeToFinish
-     * @see maxTimeToFinishPage
+     * @see timeLimit
+     * @see timeLimitPerPage
      * @see timeSpent
-     * @see onTimer
+     * @see onTimerTick
      */
     SurveyModel.prototype.stopTimer = function () {
         this.timerModel.stop();
@@ -46387,8 +46742,8 @@ var survey_SurveyModel = /** @class */ (function (_super) {
          * Assign a number to this property if you need to start the quiz timer from a specific time (for instance, if you want to continue an interrupted quiz).
          *
          * You can also find out how many seconds a respondent has spent on an individual survey page. To do this, use the [`timeSpent`](https://surveyjs.io/form-library/documentation/api-reference/page-model#timeSpent) property of a [`PageModel`](https://surveyjs.io/form-library/documentation/api-reference/page-model) object.
-         * @see maxTimeToFinish
-         * @see maxTimeToFinishPage
+         * @see timeLimit
+         * @see timeLimitPerPage
          * @see startTimer
          */
         get: function () { return this.timerModel.spent; },
@@ -46396,52 +46751,80 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(SurveyModel.prototype, "maxTimeToFinish", {
+    Object.defineProperty(SurveyModel.prototype, "timeLimit", {
         /**
          * A time period that a respondent has to complete the survey; measured in seconds. Applies only to [quiz surveys](https://surveyjs.io/form-library/documentation/design-survey-create-a-quiz).
          *
-         * A negative value or 0 sets an unlimited time period.
+         * Default value: 0 (time is unlimited)
          *
          * [View Demo](https://surveyjs.io/form-library/examples/make-quiz-javascript/ (linkStyle))
-         * @see maxTimeToFinishPage
+         * @see timeLimitPerPage
          * @see startTimer
          * @see timeSpent
          */
         get: function () {
-            return this.getPropertyValue("maxTimeToFinish", 0);
+            return this.getPropertyValue("timeLimit", 0);
         },
         set: function (val) {
-            this.setPropertyValue("maxTimeToFinish", val);
+            this.setPropertyValue("timeLimit", val);
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(SurveyModel.prototype, "maxTimeToFinishPage", {
+    Object.defineProperty(SurveyModel.prototype, "maxTimeToFinish", {
+        /**
+         * Obsolete. Use the [`timeLimit`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#timeLimit) property instead.
+         * @deprecated
+         */
+        get: function () {
+            return this.timeLimit;
+        },
+        set: function (val) {
+            this.timeLimit = val;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyModel.prototype, "timeLimitPerPage", {
         /**
          * A time period that a respondent has to complete each survey page; measured in seconds. Applies only to [quiz surveys](https://surveyjs.io/form-library/documentation/design-survey-create-a-quiz).
          *
-         * A negative value or 0 sets an unlimited time period.
+         * Default value: 0 (time is unlimited)
          *
-         * You can also use `PageModel`'s [`maxTimeToFinish`](https://surveyjs.io/form-library/documentation/api-reference/page-model#maxTimeToFinish) property to specify a time period for an individual survey page.
+         * You can also use `PageModel`'s [`timeLimit`](https://surveyjs.io/form-library/documentation/api-reference/page-model#timeLimit) property to specify a time period for an individual survey page.
          *
          * [View Demo](https://surveyjs.io/form-library/examples/make-quiz-javascript/ (linkStyle))
-         * @see maxTimeToFinish
+         * @see timeLimit
          * @see startTimer
          * @see timeSpent
          */
         get: function () {
-            return this.getPropertyValue("maxTimeToFinishPage", 0);
+            return this.getPropertyValue("timeLimitPerPage", 0);
+        },
+        set: function (val) {
+            this.setPropertyValue("timeLimitPerPage", val);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyModel.prototype, "maxTimeToFinishPage", {
+        /**
+         * Obsolete. Use the [`timeLimitPerPage`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#timeLimitPerPage) property instead.
+         * @deprecated
+         */
+        get: function () {
+            return this.timeLimitPerPage;
         },
         set: function (val) {
-            this.setPropertyValue("maxTimeToFinishPage", val);
+            this.timeLimitPerPage = val;
         },
         enumerable: false,
         configurable: true
     });
     SurveyModel.prototype.doTimer = function (page) {
-        this.onTimer.fire(this, {});
-        if (this.maxTimeToFinish > 0 && this.maxTimeToFinish <= this.timeSpent) {
-            this.timeSpent = this.maxTimeToFinish;
+        this.onTimerTick.fire(this, {});
+        if (this.timeLimit > 0 && this.timeLimit <= this.timeSpent) {
+            this.timeSpent = this.timeLimit;
             this.completeLastPage();
         }
         if (page) {
@@ -46749,7 +47132,7 @@ var survey_SurveyModel = /** @class */ (function (_super) {
                 }
             }
             else if (isStrCiEqual(layoutElement.id, "advanced-header")) {
-                if ((this.state === "running" || this.state === "starting") && layoutElement.container === container) {
+                if ((this.state === "running" || this.state === "starting" || (this.showHeaderOnCompletePage === true && this.state === "completed")) && layoutElement.container === container) {
                     containerLayoutElements.push(layoutElement);
                 }
             }
@@ -47273,18 +47656,13 @@ Serializer.addClass("survey", [
         default: "noPreview",
         choices: ["noPreview", "showAllQuestions", "showAnsweredQuestions"],
     },
-    { name: "maxTimeToFinish:number", default: 0, minValue: 0 },
-    { name: "maxTimeToFinishPage:number", default: 0, minValue: 0 },
-    {
-        name: "showTimerPanel",
-        default: "none",
-        choices: ["none", "top", "bottom"],
-    },
-    {
-        name: "showTimerPanelMode",
-        default: "all",
-        choices: ["page", "survey", "all"],
-    },
+    { name: "showTimer:boolean" },
+    { name: "timeLimit:number", alternativeName: "maxTimeToFinish", default: 0, minValue: 0, enableIf: function (obj) { return obj.showTimer; } },
+    { name: "timeLimitPerPage:number", alternativeName: "maxTimeToFinishPage", default: 0, minValue: 0, enableIf: function (obj) { return obj.showTimer; } },
+    { name: "timerLocation", default: "top", choices: ["top", "bottom"], enableIf: function (obj) { return obj.showTimer; } },
+    { name: "timerInfoMode", alternativeName: "showTimerPanelMode",
+        default: "combined", choices: ["page", "survey", "combined"], enableIf: function (obj) { return obj.showTimer; } },
+    { name: "showTimerPanel", visible: false, isSerializable: false },
     {
         name: "widthMode",
         default: "auto",
@@ -47337,6 +47715,7 @@ var question_baseselect_decorate = (undefined && undefined.__decorate) || functi
 
 
 
+
 /**
  * A base class for multiple-choice question types ([Checkboxes](https://surveyjs.io/form-library/documentation/questioncheckboxmodel), [Dropdown](https://surveyjs.io/form-library/documentation/questiondropdownmodel), [Radio Button Group](https://surveyjs.io/form-library/documentation/questionradiogroupmodel), etc.).
  */
@@ -47975,6 +48354,9 @@ var question_baseselect_QuestionSelectBase = /** @class */ (function (_super) {
         return this.otherValueCore;
     };
     QuestionSelectBase.prototype.selectOtherValueFromComment = function (val) {
+        if (val) {
+            this.prevIsOtherSelected = true;
+        }
         this.value = val ? this.otherItem.value : undefined;
     };
     QuestionSelectBase.prototype.setQuestionComment = function (newValue) {
@@ -49567,24 +49949,8 @@ var question_baseselect_QuestionSelectBase = /** @class */ (function (_super) {
     QuestionSelectBase.prototype.getItemEnabled = function (item) {
         return !this.isDisabledAttr && item.isEnabled;
     };
-    QuestionSelectBase.prototype.afterRender = function (el) {
-        _super.prototype.afterRender.call(this, el);
-        this.rootElement = el;
-    };
-    QuestionSelectBase.prototype.beforeDestroyQuestionElement = function (el) {
-        _super.prototype.beforeDestroyQuestionElement.call(this, el);
-        this.rootElement = undefined;
-    };
     QuestionSelectBase.prototype.focusOtherComment = function () {
-        var _this = this;
-        if (!!this.rootElement) {
-            setTimeout(function () {
-                var commentEl = _this.rootElement.querySelector("textarea");
-                if (!!commentEl) {
-                    commentEl.focus();
-                }
-            }, 10);
-        }
+        survey_element_SurveyElement.FocusElement(this.otherId);
     };
     QuestionSelectBase.prototype.onValueChanged = function () {
         _super.prototype.onValueChanged.call(this);
@@ -52079,11 +52445,16 @@ var question_matrix_MatrixRowModel = /** @class */ (function (_super) {
     return MatrixRowModel;
 }(base_Base));
 
-var question_matrix_MatrixCells = /** @class */ (function () {
+var question_matrix_MatrixCells = /** @class */ (function (_super) {
+    question_matrix_extends(MatrixCells, _super);
     function MatrixCells(cellsOwner) {
-        this.cellsOwner = cellsOwner;
-        this.values = {};
+        var _this = _super.call(this) || this;
+        _this.cellsOwner = cellsOwner;
+        _this.values = {};
+        _this.locs = {};
+        return _this;
     }
+    MatrixCells.prototype.getType = function () { return "cells"; };
     Object.defineProperty(MatrixCells.prototype, "isEmpty", {
         get: function () {
             return Object.keys(this.values).length == 0;
@@ -52092,78 +52463,97 @@ var question_matrix_MatrixCells = /** @class */ (function () {
         configurable: true
     });
     MatrixCells.prototype.valuesChanged = function () {
-        if (!!this.onValuesChanged) {
+        if (!this.locNotification && !!this.onValuesChanged) {
             this.onValuesChanged();
         }
     };
-    MatrixCells.prototype.setCellText = function (row, column, val) {
+    MatrixCells.prototype.getDefaultCellLocText = function (column) {
+        return this.getCellLocCore(this.defaultRowValue, column);
+    };
+    MatrixCells.prototype.getCellDisplayLocText = function (row, column) {
+        return this.getCellLocCore(row, column);
+    };
+    MatrixCells.prototype.getCellLocCore = function (row, col) {
+        var _this = this;
         row = this.getCellRowColumnValue(row, this.rows);
-        column = this.getCellRowColumnValue(column, this.columns);
-        if (!row || !column)
-            return;
-        if (val) {
-            if (!this.values[row])
-                this.values[row] = {};
-            if (!this.values[row][column])
-                this.values[row][column] = this.createString();
-            this.values[row][column].text = val;
+        col = this.getCellRowColumnValue(col, this.columns);
+        if (helpers_Helpers.isValueEmpty(row) || helpers_Helpers.isValueEmpty(col))
+            return null;
+        if (!this.locs[row]) {
+            this.locs[row] = {};
         }
-        else {
-            if (this.values[row] && this.values[row][column]) {
-                var loc = this.values[row][column];
-                loc.text = "";
-                if (loc.isEmpty) {
-                    delete this.values[row][column];
-                    if (Object.keys(this.values[row]).length == 0) {
-                        delete this.values[row];
+        var res = this.locs[row][col];
+        if (!res) {
+            res = this.createString();
+            res.setJson(this.getCellLocData(row, col));
+            res.onGetTextCallback = function (str) {
+                if (!str) {
+                    var column = itemvalue_ItemValue.getItemByValue(_this.columns, col);
+                    if (column) {
+                        return column.locText.getJson() || column.value;
                     }
                 }
-            }
+                return str;
+            };
+            res.onStrChanged = function (oldValue, newValue) {
+                _this.updateValues(row, col, newValue);
+            };
+            this.locs[row][col] = res;
         }
-        this.valuesChanged();
+        return res;
     };
-    MatrixCells.prototype.setDefaultCellText = function (column, val) {
-        this.setCellText(settings.matrix.defaultRowName, column, val);
+    Object.defineProperty(MatrixCells.prototype, "defaultRowValue", {
+        get: function () { return settings.matrix.defaultRowName; },
+        enumerable: false,
+        configurable: true
+    });
+    MatrixCells.prototype.getCellLocData = function (row, col) {
+        var data = this.getCellLocDataFromValue(row, col);
+        if (data)
+            return data;
+        return this.getCellLocDataFromValue(this.defaultRowValue, col);
     };
-    MatrixCells.prototype.getCellLocText = function (row, column) {
-        row = this.getCellRowColumnValue(row, this.rows);
-        column = this.getCellRowColumnValue(column, this.columns);
-        if (!row || !column)
-            return null;
+    MatrixCells.prototype.getCellLocDataFromValue = function (row, column) {
         if (!this.values[row])
             return null;
         if (!this.values[row][column])
             return null;
         return this.values[row][column];
     };
-    MatrixCells.prototype.getDefaultCellLocText = function (column, val) {
-        return this.getCellLocText(settings.matrix.defaultRowName, column);
+    MatrixCells.prototype.getCellText = function (row, column) {
+        var loc = this.getCellLocCore(row, column);
+        return loc ? loc.calculatedText : null;
     };
-    MatrixCells.prototype.getCellDisplayLocText = function (row, column) {
-        var cellText = this.getCellLocText(row, column);
-        if (cellText && !cellText.isEmpty)
-            return cellText;
-        cellText = this.getCellLocText(settings.matrix.defaultRowName, column);
-        if (cellText && !cellText.isEmpty)
-            return cellText;
-        if (typeof column == "number") {
-            column =
-                column >= 0 && column < this.columns.length
-                    ? this.columns[column]
-                    : null;
+    MatrixCells.prototype.setCellText = function (row, column, val) {
+        var loc = this.getCellLocCore(row, column);
+        if (loc) {
+            loc.text = val;
         }
-        if (column && column.locText)
-            return column.locText;
-        return null;
     };
-    MatrixCells.prototype.getCellText = function (row, column) {
-        var loc = this.getCellLocText(row, column);
-        return loc ? loc.calculatedText : null;
+    MatrixCells.prototype.updateValues = function (row, column, val) {
+        if (val) {
+            if (!this.values[row])
+                this.values[row] = {};
+            this.values[row][column] = val;
+            this.valuesChanged();
+        }
+        else {
+            if (this.values[row] && this.values[row][column]) {
+                delete this.values[row][column];
+                if (Object.keys(this.values[row]).length == 0) {
+                    delete this.values[row];
+                }
+                this.valuesChanged();
+            }
+        }
     };
     MatrixCells.prototype.getDefaultCellText = function (column) {
-        var loc = this.getCellLocText(settings.matrix.defaultRowName, column);
+        var loc = this.getCellLocCore(this.defaultRowValue, column);
         return loc ? loc.calculatedText : null;
     };
+    MatrixCells.prototype.setDefaultCellText = function (column, val) {
+        this.setCellText(this.defaultRowValue, column, val);
+    };
     MatrixCells.prototype.getCellDisplayText = function (row, column) {
         var loc = this.getCellDisplayLocText(row, column);
         return loc ? loc.calculatedText : null;
@@ -52197,18 +52587,22 @@ var question_matrix_MatrixCells = /** @class */ (function () {
     MatrixCells.prototype.getJson = function () {
         if (this.isEmpty)
             return null;
+        var defaultRow = this.values[this.defaultRowValue];
         var res = {};
         for (var row in this.values) {
             var resRow = {};
             var rowValues = this.values[row];
             for (var col in rowValues) {
-                resRow[col] = rowValues[col].getJson();
+                if (row === this.defaultRowValue || !defaultRow || defaultRow[col] !== rowValues[col]) {
+                    resRow[col] = rowValues[col];
+                }
             }
             res[row] = resRow;
         }
         return res;
     };
     MatrixCells.prototype.setJson = function (value) {
+        var _this = this;
         this.values = {};
         if (!!value) {
             for (var row in value) {
@@ -52219,21 +52613,23 @@ var question_matrix_MatrixCells = /** @class */ (function () {
                 for (var col in rowValues) {
                     if (col == "pos")
                         continue;
-                    var loc = this.createString();
-                    loc.setJson(rowValues[col]);
-                    this.values[row][col] = loc;
+                    this.values[row][col] = rowValues[col];
                 }
             }
         }
+        this.locNotification = true;
+        this.runFuncOnLocs(function (row, col, loc) { return loc.setJson(_this.getCellLocData(row, col)); });
+        this.locNotification = false;
         this.valuesChanged();
     };
     MatrixCells.prototype.locStrsChanged = function () {
-        if (this.isEmpty)
-            return;
-        for (var row in this.values) {
-            var rowValues = this.values[row];
+        this.runFuncOnLocs(function (row, col, loc) { return loc.strChanged(); });
+    };
+    MatrixCells.prototype.runFuncOnLocs = function (func) {
+        for (var row in this.locs) {
+            var rowValues = this.locs[row];
             for (var col in rowValues) {
-                rowValues[col].strChanged();
+                func(row, col, rowValues[col]);
             }
         }
     };
@@ -52241,7 +52637,7 @@ var question_matrix_MatrixCells = /** @class */ (function () {
         return new localizablestring_LocalizableString(this.cellsOwner, true);
     };
     return MatrixCells;
-}());
+}(base_Base));
 
 /**
   * A class that describes the Single-Select Matrix question type.
@@ -53202,6 +53598,7 @@ var question_text_QuestionTextModel = /** @class */ (function (_super) {
             _this.updateRemainingCharacterCounter(event.target.value);
         };
         _this.onKeyUp = function (event) {
+            _this.updateDateValidationMessage(event);
             if (_this.isInputTextUpdate) {
                 if (!_this._isWaitingForEnter || event.keyCode === 13) {
                     _this.updateValueOnEvent(event);
@@ -53216,7 +53613,6 @@ var question_text_QuestionTextModel = /** @class */ (function (_super) {
             _this.updateRemainingCharacterCounter(event.target.value);
         };
         _this.onKeyDown = function (event) {
-            _this.updateDateValidationMessage(event);
             _this.onKeyDownPreprocess && _this.onKeyDownPreprocess(event);
             if (_this.isInputTextUpdate) {
                 _this._isWaitingForEnter = event.keyCode === 229;
@@ -57924,6 +58320,11 @@ var question_ranking_QuestionRankingModel = /** @class */ (function (_super) {
         this.updateRankingChoices();
         this.releaseAnimations();
     };
+    QuestionRankingModel.prototype.updateValueFromSurvey = function (newValue, clearData) {
+        _super.prototype.updateValueFromSurvey.call(this, newValue, clearData);
+        if (newValue)
+            this.isValueSetByUser = true;
+    };
     QuestionRankingModel.prototype.addToValueByVisibleChoices = function () {
         var newValue = this.value.slice();
         this.visibleChoices.forEach(function (choice) {
@@ -58474,7 +58875,6 @@ var question_comment_extends = (undefined && undefined.__extends) || (function (
 
 
 
-
 /**
  * A class that describes the Long Text question type.
  *
@@ -58623,15 +59023,8 @@ var question_comment_QuestionCommentModel = /** @class */ (function (_super) {
     QuestionCommentModel.prototype.afterRenderQuestionElement = function (el) {
         var root = settings.environment.root;
         this.element = root.getElementById(this.inputId) || el;
-        this.updateElement();
         _super.prototype.afterRenderQuestionElement.call(this, el);
     };
-    QuestionCommentModel.prototype.updateElement = function () {
-        var _this_1 = this;
-        if (this.element && this.renderedAutoGrow) {
-            setTimeout(function () { return increaseHeightByContent(_this_1.element); }, 1);
-        }
-    };
     QuestionCommentModel.prototype.beforeDestroyQuestionElement = function (el) {
         _super.prototype.beforeDestroyQuestionElement.call(this, el);
         this.element = undefined;
@@ -58639,8 +59032,6 @@ var question_comment_QuestionCommentModel = /** @class */ (function (_super) {
     QuestionCommentModel.prototype.onInput = function (event) {
         if (this.isInputTextUpdate)
             this.value = event.target.value;
-        else
-            this.updateElement();
         this.updateRemainingCharacterCounter(event.target.value);
     };
     QuestionCommentModel.prototype.onBlurCore = function (event) {
@@ -58653,15 +59044,6 @@ var question_comment_QuestionCommentModel = /** @class */ (function (_super) {
             event.stopPropagation();
         }
     };
-    QuestionCommentModel.prototype.setQuestionValue = function (newValue, updateIsAnswered) {
-        if (updateIsAnswered === void 0) { updateIsAnswered = true; }
-        _super.prototype.setQuestionValue.call(this, newValue, updateIsAnswered);
-        this.updateElement();
-    };
-    QuestionCommentModel.prototype.onValueChanged = function () {
-        _super.prototype.onValueChanged.call(this);
-        this.updateElement();
-    };
     QuestionCommentModel.prototype.setNewValue = function (newValue) {
         if (!this.acceptCarriageReturn && !!newValue) {
             // eslint-disable-next-line no-control-regex
@@ -58939,6 +59321,7 @@ var question_file_decorate = (undefined && undefined.__decorate) || function (de
 
 
 
+
 function dataUrl2File(dataUrl, fileName, type) {
     var str = atob(dataUrl.split(",")[1]);
     var buffer = new Uint8Array(str.split("").map(function (c) { return c.charCodeAt(0); })).buffer;
@@ -59085,6 +59468,32 @@ var question_file_QuestionFileModelBase = /** @class */ (function (_super) {
  *
  * [View Demo](https://surveyjs.io/form-library/examples/file-upload/ (linkStyle))
  */
+var question_file_QuestionFilePage = /** @class */ (function (_super) {
+    question_file_extends(QuestionFilePage, _super);
+    function QuestionFilePage(question, index) {
+        var _this = _super.call(this) || this;
+        _this.question = question;
+        _this.index = index;
+        _this.id = QuestionFilePage.getId();
+        return _this;
+    }
+    QuestionFilePage.getId = function () {
+        return "sv_sfp_" + QuestionFilePage.pageCounter++;
+    };
+    Object.defineProperty(QuestionFilePage.prototype, "css", {
+        get: function () {
+            return this.question.cssClasses.page;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    QuestionFilePage.pageCounter = 0;
+    question_file_decorate([
+        propertyArray({})
+    ], QuestionFilePage.prototype, "items", void 0);
+    return QuestionFilePage;
+}(base_Base));
+
 var question_file_QuestionFileModel = /** @class */ (function (_super) {
     question_file_extends(QuestionFileModel, _super);
     function QuestionFileModel(name) {
@@ -59093,6 +59502,10 @@ var question_file_QuestionFileModel = /** @class */ (function (_super) {
         _this.fileNavigator = new container_ActionContainer();
         _this.canFlipCameraValue = undefined;
         _this.prevPreviewLength = 0;
+        _this._renderedPages = [];
+        _this.pagesAnimation = new AnimationTab(_this.getPagesAnimationOptions(), function (val) {
+            _this._renderedPages = val;
+        }, function () { return _this.renderedPages; });
         _this.calcAvailableItemsCount = function (availableWidth, itemWidth, gap) {
             var itemsCount = Math.floor(availableWidth / (itemWidth + gap));
             if ((itemsCount + 1) * (itemWidth + gap) - gap <= availableWidth)
@@ -59171,6 +59584,7 @@ var question_file_QuestionFileModel = /** @class */ (function (_super) {
             id: "prevPage",
             iconSize: 16,
             action: function () {
+                _this.navigationDirection = "left";
                 _this.indexToShow = _this.previewValue.length && ((_this.indexToShow - 1 + _this.pagesCount) % _this.pagesCount) || 0;
                 _this.fileIndexAction.title = _this.getFileIndexCaption();
             }
@@ -59179,6 +59593,7 @@ var question_file_QuestionFileModel = /** @class */ (function (_super) {
             id: "nextPage",
             iconSize: 16,
             action: function () {
+                _this.navigationDirection = "right";
                 _this.indexToShow = _this.previewValue.length && ((_this.indexToShow + 1) % _this.pagesCount) || 0;
                 _this.fileIndexAction.title = _this.getFileIndexCaption();
             }
@@ -59254,6 +59669,13 @@ var question_file_QuestionFileModel = /** @class */ (function (_super) {
         _this.fileNavigator.actions = [_this.prevFileAction, _this.fileIndexAction, _this.nextFileAction];
         return _this;
     }
+    Object.defineProperty(QuestionFileModel.prototype, "supportFileNavigator", {
+        get: function () {
+            return this.isDefaultV2Theme;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionFileModel.prototype, "isFileLoading", {
         get: function () { return this.isFileLoadingValue; },
         set: function (val) {
@@ -59387,15 +59809,42 @@ var question_file_QuestionFileModel = /** @class */ (function (_super) {
         return this.getLocalizationFormatString("indexText", this.indexToShow + 1, this.pagesCount);
     };
     QuestionFileModel.prototype.updateFileNavigator = function () {
+        this.updatePages();
+        this.navigationDirection = undefined;
         this.indexToShow = this.previewValue.length && ((this.indexToShow + this.pagesCount) % this.pagesCount) || 0;
         this.fileIndexAction.title = this.getFileIndexCaption();
     };
+    QuestionFileModel.prototype.updateRenderedPages = function () {
+        if (this.pages && this.pages[this.indexToShow]) {
+            this.renderedPages = [this.pages[this.indexToShow]];
+        }
+    };
+    QuestionFileModel.prototype.updatePages = function () {
+        var _this = this;
+        this.blockAnimations();
+        var currentPage;
+        this.pages = [];
+        this.renderedPages = [];
+        this.previewValue.forEach(function (val, index) {
+            if (index % _this.pageSize == 0) {
+                currentPage = new question_file_QuestionFilePage(_this, _this.pages.length);
+                _this.pages.push(currentPage);
+            }
+            currentPage.items.push(val);
+        });
+        this.releaseAnimations();
+        this.updateRenderedPages();
+    };
     QuestionFileModel.prototype.previewValueChanged = function () {
         var _this = this;
+        this.navigationDirection = undefined;
         if (this.previewValue.length !== this.prevPreviewLength) {
             if (this.previewValue.length > 0) {
                 if (this.prevPreviewLength > this.previewValue.length) {
-                    this.indexToShow = this.indexToShow >= this.pagesCount && this.indexToShow > 0 ? this.pagesCount - 1 : this.indexToShow;
+                    if (this.indexToShow >= this.pagesCount && this.indexToShow > 0) {
+                        this.indexToShow = this.pagesCount - 1;
+                        this.navigationDirection = "left-delete";
+                    }
                 }
                 else {
                     this.indexToShow = Math.floor(this.prevPreviewLength / this.pageSize);
@@ -59405,6 +59854,7 @@ var question_file_QuestionFileModel = /** @class */ (function (_super) {
                 this.indexToShow = 0;
             }
         }
+        this.updatePages();
         this.fileIndexAction.title = this.getFileIndexCaption();
         this.containsMultiplyFiles = this.previewValue.length > 1;
         if (this.previewValue.length > 0 && !this.calculatedGapBetweenItems && !this.calculatedItemWidth) {
@@ -59414,11 +59864,6 @@ var question_file_QuestionFileModel = /** @class */ (function (_super) {
         }
         this.prevPreviewLength = this.previewValue.length;
     };
-    QuestionFileModel.prototype.isPreviewVisible = function (index) {
-        var isFileNavigatorVisible = this.fileNavigatorVisible;
-        var isPreviewVisible = (this.indexToShow * this.pageSize <= index && index < (this.indexToShow + 1) * this.pageSize);
-        return !isFileNavigatorVisible || isPreviewVisible;
-    };
     QuestionFileModel.prototype.getType = function () {
         return "file";
     };
@@ -59864,6 +60309,7 @@ var question_file_QuestionFileModel = /** @class */ (function (_super) {
                     content: content,
                 });
             });
+            this.previewValueChanged();
         }
         else {
             if (!!this._previewLoader) {
@@ -59883,7 +60329,6 @@ var question_file_QuestionFileModel = /** @class */ (function (_super) {
             });
             this._previewLoader.load(newValues);
         }
-        this.previewValueChanged();
     };
     QuestionFileModel.prototype.getIsQuestionReady = function () {
         return _super.prototype.getIsQuestionReady.call(this) && !this.isFileLoading;
@@ -60027,6 +60472,46 @@ var question_file_QuestionFileModel = /** @class */ (function (_super) {
     QuestionFileModel.prototype.getFileListSelector = function () {
         return classesToSelector(this.cssClasses.fileList);
     };
+    Object.defineProperty(QuestionFileModel.prototype, "renderedPages", {
+        get: function () {
+            return this._renderedPages;
+        },
+        set: function (val) {
+            this.pagesAnimation.sync(val);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    QuestionFileModel.prototype.getPagesAnimationOptions = function () {
+        var _this = this;
+        return {
+            getEnterOptions: function (page) {
+                var pageClass = _this.cssClasses.page;
+                return { cssClass: pageClass ? new CssClassBuilder()
+                        .append(pageClass + "--enter-from-left", _this.navigationDirection == "left" || _this.navigationDirection == "left-delete")
+                        .append(pageClass + "--enter-from-right", _this.navigationDirection == "right").toString() : ""
+                };
+            },
+            getLeaveOptions: function (page) {
+                var pageClass = _this.cssClasses.page;
+                return {
+                    cssClass: pageClass ? new CssClassBuilder()
+                        .append(pageClass + "--leave-to-left", _this.navigationDirection == "right")
+                        .append(pageClass + "--leave-to-right", _this.navigationDirection == "left").toString() : ""
+                };
+            },
+            getAnimatedElement: function (page) {
+                var _a;
+                return (_a = _this.rootElement) === null || _a === void 0 ? void 0 : _a.querySelector("#" + page.id);
+            },
+            isAnimationEnabled: function () {
+                return _this.animationAllowed && !!_this.rootElement;
+            },
+            getRerenderEvent: function () {
+                return _this.onElementRerendered;
+            }
+        };
+    };
     QuestionFileModel.prototype.triggerResponsiveness = function (hard) {
         if (hard) {
             this.calculatedGapBetweenItems = undefined;
@@ -60035,17 +60520,19 @@ var question_file_QuestionFileModel = /** @class */ (function (_super) {
         _super.prototype.triggerResponsiveness.call(this);
     };
     QuestionFileModel.prototype.processResponsiveness = function (_, availableWidth) {
-        var _this = this;
         this._width = availableWidth;
         if (this.rootElement) {
             if ((!this.calculatedGapBetweenItems || !this.calculatedItemWidth) && this.allowMultiple) {
                 var fileListSelector = this.getFileListSelector();
                 var fileListElement = fileListSelector ? this.rootElement.querySelector(this.getFileListSelector()) : undefined;
                 if (fileListElement) {
-                    this.calculatedGapBetweenItems = Math.ceil(Number.parseFloat(DomDocumentHelper.getComputedStyle(fileListElement).gap));
-                    var firstVisibleItem = Array.from(fileListElement.children).filter(function (_, index) { return _this.isPreviewVisible(index); })[0];
-                    if (firstVisibleItem) {
-                        this.calculatedItemWidth = Math.ceil(Number.parseFloat(DomDocumentHelper.getComputedStyle(firstVisibleItem).width));
+                    var visiblePage = fileListElement.querySelector(classesToSelector(this.cssClasses.page));
+                    if (visiblePage) {
+                        var firstVisibleItem = visiblePage.querySelector(classesToSelector(this.cssClasses.previewItem));
+                        this.calculatedGapBetweenItems = Math.ceil(Number.parseFloat(DomDocumentHelper.getComputedStyle(visiblePage).gap));
+                        if (firstVisibleItem) {
+                            this.calculatedItemWidth = Math.ceil(Number.parseFloat(DomDocumentHelper.getComputedStyle(firstVisibleItem).width));
+                        }
                     }
                 }
             }
@@ -60098,7 +60585,12 @@ var question_file_QuestionFileModel = /** @class */ (function (_super) {
         propertyArray({})
     ], QuestionFileModel.prototype, "previewValue", void 0);
     question_file_decorate([
-        jsonobject_property({ defaultValue: 0 })
+        propertyArray({})
+    ], QuestionFileModel.prototype, "pages", void 0);
+    question_file_decorate([
+        jsonobject_property({ defaultValue: 0, onSet: function (val, target) {
+                target.updateRenderedPages();
+            } })
     ], QuestionFileModel.prototype, "indexToShow", void 0);
     question_file_decorate([
         jsonobject_property({
@@ -60162,6 +60654,9 @@ var question_file_QuestionFileModel = /** @class */ (function (_super) {
     question_file_decorate([
         jsonobject_property()
     ], QuestionFileModel.prototype, "locRenderedPlaceholderValue", void 0);
+    question_file_decorate([
+        propertyArray()
+    ], QuestionFileModel.prototype, "_renderedPages", void 0);
     return QuestionFileModel;
 }(question_file_QuestionFileModelBase));
 
@@ -60634,8 +61129,14 @@ var question_rating_QuestionRatingModel = /** @class */ (function (_super) {
             }
             _this.createRenderedRateItems();
         });
-        _this.createLocalizableString("minRateDescription", _this, true);
-        _this.createLocalizableString("maxRateDescription", _this, true);
+        _this.createLocalizableString("minRateDescription", _this, true)
+            .onStringChanged.add(function (sender, options) {
+            _this.hasMinRateDescription = !sender.isEmpty;
+        });
+        _this.createLocalizableString("maxRateDescription", _this, true)
+            .onStringChanged.add(function (sender, options) {
+            _this.hasMaxRateDescription = !sender.isEmpty;
+        });
         _this.initPropertyDependencies();
         return _this;
     }
@@ -60647,8 +61148,6 @@ var question_rating_QuestionRatingModel = /** @class */ (function (_super) {
     };
     QuestionRatingModel.prototype.endLoadingFromJson = function () {
         _super.prototype.endLoadingFromJson.call(this);
-        this.hasMinRateDescription = !!this.minRateDescription;
-        this.hasMaxRateDescription = !!this.maxRateDescription;
         if (this.jsonObj.rateMin !== undefined && this.jsonObj.rateCount !== undefined && this.jsonObj.rateMax === undefined) {
             this.updateRateMax();
         }
@@ -60906,6 +61405,7 @@ var question_rating_QuestionRatingModel = /** @class */ (function (_super) {
         }
         if (this.rateType == "smileys" && rateValues.length > 10)
             rateValues = rateValues.slice(0, 10);
+        this.visibleChoicesValue = rateValues.map(function (i, idx) { return _this.getRatingItemValue(i, idx); });
         this.renderedRateItems = rateValues.map(function (v, i) {
             var renderedItem = null;
             if (_this.displayRateDescriptionsAsExtremeItems) {
@@ -60925,14 +61425,7 @@ var question_rating_QuestionRatingModel = /** @class */ (function (_super) {
         var step = this.rateStep;
         while (value <= this.rateMax &&
             res.length < settings.ratingMaximumRateValueCount) {
-            var description = void 0;
-            if (value === this.rateMin) {
-                description = this.minRateDescription && this.locMinRateDescription;
-            }
-            if (value === this.rateMax || res.length === settings.ratingMaximumRateValueCount) {
-                description = this.maxRateDescription && this.locMaxRateDescription;
-            }
-            var item = new RatingItemValue(value, description);
+            var item = new itemvalue_ItemValue(value);
             item.locOwner = this;
             item.ownerPropertyName = "rateValues";
             res.push(item);
@@ -60940,6 +61433,22 @@ var question_rating_QuestionRatingModel = /** @class */ (function (_super) {
         }
         return res;
     };
+    QuestionRatingModel.prototype.getRatingItemValue = function (item, index) {
+        if (!item)
+            return null;
+        var value = item.value;
+        var description;
+        if (value === this.rateMin) {
+            description = this.minRateDescription && this.locMinRateDescription;
+        }
+        if (value === this.rateMax || index === settings.ratingMaximumRateValueCount) {
+            description = this.maxRateDescription && this.locMaxRateDescription;
+        }
+        var newItem = new RatingItemValue(value, description);
+        newItem.locOwner = item.locOwner;
+        newItem.ownerPropertyName = item.ownerPropertyName;
+        return newItem;
+    };
     QuestionRatingModel.prototype.correctValue = function (value, step) {
         if (!value)
             return value;
@@ -60994,7 +61503,6 @@ var question_rating_QuestionRatingModel = /** @class */ (function (_super) {
         },
         set: function (val) {
             this.setLocalizableStringText("minRateDescription", val);
-            this.hasMinRateDescription = !!this.minRateDescription;
         },
         enumerable: false,
         configurable: true
@@ -61019,7 +61527,6 @@ var question_rating_QuestionRatingModel = /** @class */ (function (_super) {
         },
         set: function (val) {
             this.setLocalizableStringText("maxRateDescription", val);
-            this.hasMaxRateDescription = !!this.maxRateDescription;
         },
         enumerable: false,
         configurable: true
@@ -61387,7 +61894,7 @@ var question_rating_QuestionRatingModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(QuestionRatingModel.prototype, "visibleChoices", {
         get: function () {
-            return this.visibleRateValues;
+            return this.visibleChoicesValue;
         },
         enumerable: false,
         configurable: true
@@ -61439,6 +61946,11 @@ var question_rating_QuestionRatingModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionRatingModel.prototype.onBlurCore = function (event) {
+        var _a;
+        (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.onBlur(event);
+        _super.prototype.onBlurCore.call(this, event);
+    };
     QuestionRatingModel.prototype.updateCssClasses = function (res, css) {
         _super.prototype.updateCssClasses.call(this, res, css);
         if (!!this.dropdownListModel) {
@@ -64458,6 +64970,8 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
             _this.updateFooterActions();
         });
         _this.registerPropertyChangedHandlers(["allowAddPanel"], function () { _this.updateNoEntriesTextDefaultLoc(); });
+        _this.registerPropertyChangedHandlers(["minPanelCount"], function () { _this.onMinPanelCountChanged(); });
+        _this.registerPropertyChangedHandlers(["maxPanelCount"], function () { _this.onMaxPanelCountChanged(); });
         return _this;
     }
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "isCompositeQuestion", {
@@ -65421,17 +65935,18 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         set: function (val) {
             if (val < 0)
                 val = 0;
-            if (val == this.minPanelCount)
-                return;
             this.setPropertyValue("minPanelCount", val);
-            if (val > this.maxPanelCount)
-                this.maxPanelCount = val;
-            if (this.panelCount < val)
-                this.panelCount = val;
         },
         enumerable: false,
         configurable: true
     });
+    QuestionPanelDynamicModel.prototype.onMinPanelCountChanged = function () {
+        var val = this.minPanelCount;
+        if (val > this.maxPanelCount)
+            this.maxPanelCount = val;
+        if (this.panelCount < val)
+            this.panelCount = val;
+    };
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "maxPanelCount", {
         /**
          * A maximum number of panels in Dynamic Panel. Users cannot add new panels if `panelCount` equals `maxPanelCount`.
@@ -65449,17 +65964,20 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
                 return;
             if (val > settings.panel.maxPanelCount)
                 val = settings.panel.maxPanelCount;
-            if (val == this.maxPanelCount)
-                return;
             this.setPropertyValue("maxPanelCount", val);
-            if (val < this.minPanelCount)
-                this.minPanelCount = val;
-            if (this.panelCount > val)
-                this.panelCount = val;
+            this.updateFooterActions();
         },
         enumerable: false,
         configurable: true
     });
+    QuestionPanelDynamicModel.prototype.onMaxPanelCountChanged = function () {
+        var val = this.maxPanelCount;
+        if (val < this.minPanelCount)
+            this.minPanelCount = val;
+        if (this.panelCount > val)
+            this.panelCount = val;
+        this.updateFooterActions();
+    };
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "allowAddPanel", {
         /**
          * Specifies whether users are allowed to add new panels.
@@ -66207,6 +66725,12 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
     QuestionPanelDynamicModel.prototype.onSurveyLoad = function () {
         this.template.readOnly = this.isReadOnly;
         this.template.onSurveyLoad();
+        if (this.panelCount < this.minPanelCount) {
+            this.panelCount = this.minPanelCount;
+        }
+        if (this.panelCount > this.maxPanelCount) {
+            this.panelCount = this.maxPanelCount;
+        }
         this.buildPanelsFirstTime();
         _super.prototype.onSurveyLoad.call(this);
     };
@@ -70119,8 +70643,8 @@ Serializer.addClass("currencymask", [
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.12.3";
-ReleaseDate = "" + "2024-09-24";
+Version = "" + "1.12.5";
+ReleaseDate = "" + "2024-10-07";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -72722,7 +73246,6 @@ function setStyles() {
         ".sv-popup--modal .sv-popup__body-content": "padding: calc(4 * var(--base-unit, 8px));",
         ".sv-popup--overlay": "width: 100%;",
         ".sv-popup--overlay .sv-popup__container": "background: rgba(144, 144, 144, 0.5); max-width: 100vw; max-height: calc(100vh - 1 * var(--base-unit, 8px)); height: calc(100vh - 1 * var(--base-unit, 8px)); width: 100%; padding-top: calc(2 * var(--base-unit, 8px)); border: unset;",
-        ".sv-popup__shadow": "width: 100%; height: 100%; border-radius: calc(1 * var(--base-unit, 8px));",
         ".sv-popup--overlay .sv-popup__body-content": "border-radius: calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) 0px 0px; background: var(--background, #fff); box-shadow: 0px calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) rgba(0, 0, 0, 0.1); padding: calc(3 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)); height: calc(100% - calc(1 * var(--base-unit, 8px))); max-height: 100vh; max-width: 100vw;",
         ".sv-popup--overlay .sv-popup__scrolling-content": "height: calc(100% - (10 * var(--base-unit, 8px)));",
         ".sv-popup--overlay .sv-popup__body-footer": "margin-top: calc(2 * var(--base-unit, 8px));",
@@ -80102,7 +80625,7 @@ var reactquestion_element_SurveyElementBase = /** @class */ (function (_super) {
     SurveyElementBase.prototype.makeBaseElementsReact = function () {
         var els = this.getStateElements();
         for (var i = 0; i < els.length; i++) {
-            els[i].enableOnElementRenderedEvent();
+            els[i].enableOnElementRerenderedEvent();
             this.makeBaseElementReact(els[i]);
         }
     };
@@ -80114,7 +80637,7 @@ var reactquestion_element_SurveyElementBase = /** @class */ (function (_super) {
     };
     SurveyElementBase.prototype.disableStateElementsRerenderEvent = function (els) {
         els.forEach(function (el) {
-            el.disableOnElementRenderedEvent();
+            el.disableOnElementRerenderedEvent();
         });
     };
     SurveyElementBase.prototype.getStateElements = function () {
@@ -80701,7 +81224,7 @@ var panel_base_SurveyPanelBase = /** @class */ (function (_super) {
         var el = this.rootRef.current;
         if (el && this.survey) {
             if (this.panelBase.isPanel) {
-                this.survey.afterRenderPanel(this.panelBase, el);
+                this.panelBase.afterRender(el);
             }
             else {
                 this.survey.afterRenderPage(el);
@@ -81045,12 +81568,11 @@ var popup_PopupContainer = /** @class */ (function (_super) {
             }, onClick: function (ev) {
                 _this.clickInside(ev);
             } },
-            external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: "sv-popup__shadow" },
-                headerPopup,
-                external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: "sv-popup__body-content" },
-                    headerContent,
-                    external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: "sv-popup__scrolling-content" }, content),
-                    footerContent))));
+            headerPopup,
+            external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: "sv-popup__body-content" },
+                headerContent,
+                external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: "sv-popup__scrolling-content" }, content),
+                footerContent)));
     };
     PopupContainer.prototype.renderHeaderContent = function () {
         return external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: "sv-popup__body-header" }, this.model.title);
@@ -84930,6 +85452,120 @@ ReactQuestionFactory.Instance.registerQuestion("file", function (props) {
     return external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"](reactquestion_file_SurveyQuestionFile, props);
 });
 
+// CONCATENATED MODULE: ./packages/survey-react-ui/src/components/file/file-item.tsx
+var file_item_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 file_item_SurveyFileItem = /** @class */ (function (_super) {
+    file_item_extends(SurveyFileItem, _super);
+    function SurveyFileItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(SurveyFileItem.prototype, "question", {
+        get: function () {
+            return this.props.question;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyFileItem.prototype, "item", {
+        get: function () {
+            return this.props.item;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyFileItem.prototype.renderFileSign = function (className, val) {
+        var _this = this;
+        if (!className || !val.name)
+            return null;
+        return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: className },
+            external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("a", { href: val.content, onClick: function (event) {
+                    _this.question.doDownloadFile(event, val);
+                }, title: val.name, download: val.name, style: { width: this.question.imageWidth } }, val.name)));
+    };
+    SurveyFileItem.prototype.renderElement = function () {
+        var _this = this;
+        var val = this.item;
+        return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", { className: this.question.cssClasses.previewItem, onClick: function (event) { return _this.question.doDownloadFileFromContainer(event); } },
+            this.renderFileSign(this.question.cssClasses.fileSign, val),
+            external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: this.question.getImageWrapperCss(val) },
+                this.question.canPreviewImage(val) ? (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("img", { src: val.content, style: { height: this.question.imageHeight, width: this.question.imageWidth }, alt: "File preview" })) : (this.question.cssClasses.defaultImage ? (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(svg_icon_SvgIcon, { iconName: this.question.cssClasses.defaultImageIconId, size: "auto", className: this.question.cssClasses.defaultImage })) : null),
+                val.name && !this.question.isReadOnly ? (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: this.question.getRemoveButtonCss(), onClick: function (event) { return _this.question.doRemoveFile(val, event); } },
+                    external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", { className: this.question.cssClasses.removeFile }, this.question.removeFileCaption),
+                    (this.question.cssClasses.removeFileSvgIconId) ?
+                        (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(svg_icon_SvgIcon, { title: this.question.removeFileCaption, iconName: this.question.cssClasses.removeFileSvgIconId, size: "auto", className: this.question.cssClasses.removeFileSvg })) : null)) : null),
+            this.renderFileSign(this.question.cssClasses.fileSignBottom, val)));
+    };
+    SurveyFileItem.prototype.canRender = function () {
+        return this.question.showPreviewContainer;
+    };
+    return SurveyFileItem;
+}(reactquestion_element_SurveyElementBase));
+
+
+// CONCATENATED MODULE: ./packages/survey-react-ui/src/components/file/file-page.tsx
+var file_page_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 file_page_SurveyFilePage = /** @class */ (function (_super) {
+    file_page_extends(SurveyFilePage, _super);
+    function SurveyFilePage() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(SurveyFilePage.prototype, "question", {
+        get: function () {
+            return this.props.question;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyFilePage.prototype, "page", {
+        get: function () {
+            return this.props.page;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyFilePage.prototype.renderElement = function () {
+        var _this = this;
+        var items = this.page.items.map(function (item, index) { return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(file_item_SurveyFileItem, { item: item, question: _this.question, key: index })); });
+        return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: this.page.css, id: this.page.id }, items));
+    };
+    return SurveyFilePage;
+}(reactquestion_element_SurveyElementBase));
+
+
 // CONCATENATED MODULE: ./packages/survey-react-ui/src/components/file/file-preview.tsx
 var file_preview_extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -84950,6 +85586,7 @@ var file_preview_extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var file_preview_SurveyFilePreview = /** @class */ (function (_super) {
     file_preview_extends(SurveyFilePreview, _super);
     function SurveyFilePreview() {
@@ -84973,20 +85610,9 @@ var file_preview_SurveyFilePreview = /** @class */ (function (_super) {
     };
     SurveyFilePreview.prototype.renderElement = function () {
         var _this = this;
-        var previews = this.question.previewValue.map(function (val, index) {
-            if (!val)
-                return null;
-            return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", { key: _this.question.inputId + "_" + index, className: _this.question.cssClasses.previewItem, onClick: function (event) { return _this.question.doDownloadFileFromContainer(event); }, style: { display: _this.question.isPreviewVisible(index) ? undefined : "none" } },
-                _this.renderFileSign(_this.question.cssClasses.fileSign, val),
-                external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: _this.question.getImageWrapperCss(val) },
-                    _this.question.canPreviewImage(val) ? (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("img", { src: val.content, style: { height: _this.question.imageHeight, width: _this.question.imageWidth }, alt: "File preview" })) : (_this.question.cssClasses.defaultImage ? (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(svg_icon_SvgIcon, { iconName: _this.question.cssClasses.defaultImageIconId, size: "auto", className: _this.question.cssClasses.defaultImage })) : null),
-                    val.name && !_this.question.isReadOnly ? (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: _this.question.getRemoveButtonCss(), onClick: function (event) { return _this.question.doRemoveFile(val, event); } },
-                        external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", { className: _this.question.cssClasses.removeFile }, _this.question.removeFileCaption),
-                        (_this.question.cssClasses.removeFileSvgIconId) ?
-                            (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(svg_icon_SvgIcon, { title: _this.question.removeFileCaption, iconName: _this.question.cssClasses.removeFileSvgIconId, size: "auto", className: _this.question.cssClasses.removeFileSvg })) : null)) : null),
-                _this.renderFileSign(_this.question.cssClasses.fileSignBottom, val)));
-        });
-        return external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: this.question.cssClasses.fileList || undefined }, previews);
+        var content = this.question.supportFileNavigator ? this.question.renderedPages.map(function (page, index) { return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(file_page_SurveyFilePage, { page: page, question: _this.question, key: page.id })); })
+            : this.question.previewValue.map(function (item, index) { return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(file_item_SurveyFileItem, { item: item, question: _this.question, key: index })); });
+        return external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: this.question.cssClasses.fileList || undefined }, content);
     };
     SurveyFilePreview.prototype.canRender = function () {
         return this.question.showPreviewContainer;
@@ -88568,8 +89194,8 @@ var skeleton_Skeleton = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     Skeleton.prototype.render = function () {
-        var _a;
-        return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: "sv-skeleton-element", id: (_a = this.props.element) === null || _a === void 0 ? void 0 : _a.id }));
+        var _a, _b;
+        return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: "sv-skeleton-element", id: (_a = this.props.element) === null || _a === void 0 ? void 0 : _a.id, style: { height: (_b = this.props.element) === null || _b === void 0 ? void 0 : _b.skeletonHeight } }));
     };
     return Skeleton;
 }(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Component));