survey-core 1.12.4 → 1.12.5

package/survey.core.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.12.4
+ * 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)
  */
@@ -964,7 +964,7 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 /*!*******************************************!*\
   !*** ./src/entries/core.ts + 127 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 */
+/*! 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 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1081,6 +1081,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; });
@@ -2361,8 +2362,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];
@@ -2389,6 +2392,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 {
@@ -2477,7 +2481,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) {
@@ -9142,8 +9146,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);
@@ -10080,7 +10084,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--;
@@ -10088,17 +10092,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
@@ -10111,66 +10115,6 @@ var base_Base = /** @class */ (function () {
     return Base;
 }());
 
-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.onElementRerendered) === 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.onElementRerendered) {
-                element.onElementRerendered.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.onElementRerendered) === 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;
-}());
-
 var ArrayChanges = /** @class */ (function () {
     function ArrayChanges(index, deleteCount, itemsToAdd, deletedItems) {
         this.index = index;
@@ -10350,7 +10294,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) {
@@ -12910,6 +12856,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");
@@ -12939,16 +12886,7 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
         }
         return info;
     };
-    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;
+    SurveyElement.IsNeedScrollIntoView = function (el, checkLeft, scrollIfVisible) {
         var elTop = scrollIfVisible ? -1 : el.getBoundingClientRect().top;
         var needScroll = elTop < 0;
         var elLeft = -1;
@@ -12964,20 +12902,55 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
                 needScroll = width > 0 && width < elLeft;
             }
         }
-        if (needScroll) {
-            el.scrollIntoView(scrollIntoViewOptions);
-            if (typeof doneCallback === "function") {
-                var currPageXOffset_1 = window.pageXOffset;
-                var currPageYOffset_1 = window.pageYOffset;
-                var scrollDone = setInterval(function () {
-                    if (currPageXOffset_1 == window.pageXOffset && currPageYOffset_1 == window.pageYOffset) {
-                        clearInterval(scrollDone);
+        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;
                     }
-                    currPageXOffset_1 = window.pageXOffset;
-                    currPageYOffset_1 = window.pageYOffset;
-                }, 25);
-            }
+                }
+                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) {
+            SurveyElement.ScrollIntoView(el, scrollIntoViewOptions, doneCallback);
         }
         return needScroll;
     };
@@ -13727,7 +13700,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
@@ -14124,12 +14097,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 })
@@ -14162,6 +14139,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
 
@@ -17496,16 +17533,21 @@ 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 () {
@@ -18775,7 +18817,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];
@@ -30095,7 +30138,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
@@ -30306,7 +30356,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) {
@@ -31586,10 +31636,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;
     }
@@ -31697,7 +31747,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 = [];
@@ -31867,14 +31917,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`.
@@ -31895,14 +31950,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.
@@ -31997,6 +32055,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;
@@ -32074,8 +32134,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();
@@ -32089,8 +32150,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();
             }
         }
@@ -32524,6 +32587,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) {
@@ -33365,6 +33430,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",
@@ -33695,7 +33761,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 () {
@@ -33711,7 +33778,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) {
@@ -33724,7 +33791,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) {
@@ -33734,7 +33801,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)
@@ -33746,7 +33813,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)
@@ -33846,8 +33913,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 () {
@@ -35598,7 +35665,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;
@@ -36995,6 +37062,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) {
@@ -37467,6 +37537,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));
 
@@ -37820,7 +37895,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);
@@ -38107,12 +38182,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.
@@ -38130,28 +38199,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) { };
@@ -38193,7 +38276,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) {
@@ -39219,12 +39302,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.
@@ -39321,6 +39410,18 @@ 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.
@@ -39397,7 +39498,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) {
@@ -39774,7 +39875,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,
@@ -44413,7 +44514,7 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         this.onScrollingElementToTop.fire(this, options);
         if (!options.cancel) {
             var elementPage_1 = this.getPageByElement(element);
-            if (this.isLazyRendering) {
+            if (this.isLazyRendering && !!elementPage_1) {
                 var elementsToRenderBefore = 1;
                 var rootElement = settings.environment.rootElement;
                 var surveyRootElement = this.rootElement || passedRootElement || rootElement;
@@ -46177,64 +46278,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
@@ -46353,11 +46507,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 {
@@ -46383,16 +46537,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);
@@ -46407,7 +46561,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) {
@@ -46443,10 +46597,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) {
@@ -46454,17 +46608,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();
@@ -46476,8 +46630,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; },
@@ -46485,52 +46639,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) {
@@ -46838,7 +47020,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);
                 }
             }
@@ -47362,18 +47544,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",
@@ -47426,6 +47603,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.).
  */
@@ -48064,6 +48242,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) {
@@ -49656,24 +49837,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);
@@ -58598,7 +58763,6 @@ var question_comment_extends = (undefined && undefined.__extends) || (function (
 
 
 
-
 /**
  * A class that describes the Long Text question type.
  *
@@ -58747,15 +58911,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;
@@ -58763,8 +58920,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) {
@@ -58777,15 +58932,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
@@ -59063,6 +59209,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;
@@ -59209,6 +59356,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) {
@@ -59217,6 +59390,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)
@@ -59295,6 +59472,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();
             }
@@ -59303,6 +59481,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();
             }
@@ -59378,6 +59557,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) {
@@ -59511,15 +59697,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);
@@ -59529,6 +59742,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) {
@@ -59538,11 +59752,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";
     };
@@ -59988,6 +60197,7 @@ var question_file_QuestionFileModel = /** @class */ (function (_super) {
                     content: content,
                 });
             });
+            this.previewValueChanged();
         }
         else {
             if (!!this._previewLoader) {
@@ -60007,7 +60217,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;
@@ -60151,6 +60360,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;
@@ -60159,17 +60408,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));
+                        }
                     }
                 }
             }
@@ -60222,7 +60473,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({
@@ -60286,6 +60542,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));
 
@@ -70272,8 +70531,8 @@ Serializer.addClass("currencymask", [
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.12.4";
-ReleaseDate = "" + "2024-10-01";
+Version = "" + "1.12.5";
+ReleaseDate = "" + "2024-10-07";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName