survey-react 1.12.3 → 1.12.4

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.12.3
+ * surveyjs - Survey JavaScript library v1.12.4
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -10223,6 +10223,66 @@ 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;
@@ -12991,14 +13051,14 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
         }
         return info;
     };
-    SurveyElement.ScrollElementToTop = function (elementId, scrollIfVisible, scrollIntoViewOptions) {
+    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);
+        return SurveyElement.ScrollElementToViewCore(el, false, scrollIfVisible, scrollIntoViewOptions, doneCallback);
     };
-    SurveyElement.ScrollElementToViewCore = function (el, checkLeft, scrollIfVisible, scrollIntoViewOptions) {
+    SurveyElement.ScrollElementToViewCore = function (el, checkLeft, scrollIfVisible, scrollIntoViewOptions, doneCallback) {
         if (!el || !el.scrollIntoView)
             return false;
         var elTop = scrollIfVisible ? -1 : el.getBoundingClientRect().top;
@@ -13018,6 +13078,18 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
         }
         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);
+                        doneCallback();
+                    }
+                    currPageXOffset_1 = window.pageXOffset;
+                    currPageYOffset_1 = window.pageYOffset;
+                }, 25);
+            }
         }
         return needScroll;
     };
@@ -13385,6 +13457,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;
@@ -14109,7 +14192,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
                 };
@@ -14919,7 +15003,7 @@ function findScrollableParent(element) {
     }
     return findScrollableParent(element.parentElement);
 }
-function scrollElementByChildId(id) {
+function activateLazyRenderingChecks(id) {
     var environment = settings.environment;
     if (!environment)
         return;
@@ -17538,7 +17622,7 @@ var text_area_TextAreaModel = /** @class */ (function () {
     };
     TextAreaModel.prototype.getTextValue = function () {
         if (!!this.options.getTextValue)
-            return this.options.getTextValue();
+            return this.options.getTextValue() || "";
         return "";
     };
     TextAreaModel.prototype.onTextAreaChange = function (event) {
@@ -19415,7 +19499,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 +19693,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 +19701,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 +20463,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 +29984,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 +30075,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 +30093,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);
@@ -32464,6 +32553,7 @@ var question_matrixdynamic_QuestionMatrixDynamicModel = /** @class */ (function
                 newRow = lastDelRow;
             }
             else {
+                lastDelRow = undefined;
                 newRow = this.createMatrixRow(val[index]);
             }
             rows.splice(index, 0, newRow);
@@ -34849,6 +34939,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 +34960,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 +35096,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;
@@ -36206,11 +36310,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 +36555,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 +36584,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 null;
+        return { row: null, index: -1 };
+    };
+    PanelModelBase.prototype.forceRenderRow = function (row) {
+        if (!!row && !row.isNeedRender) {
+            row.isNeedRender = true;
+            row.stopLazyRendering();
+        }
+    };
+    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)
@@ -37183,7 +37335,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 +37343,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) {
@@ -37866,6 +38025,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);
@@ -39267,6 +39433,7 @@ var survey_SurveyModel = /** @class */ (function (_super) {
          */
         _this.jsonErrors = null;
         _this.cssValue = null;
+        _this._isLazyRenderingSuspended = false;
         /**
          * Specifies whether to hide validation errors thrown by the Required validation in the UI.
          *
@@ -39303,6 +39470,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;
@@ -39789,22 +39957,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 +41212,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 +44513,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 +44524,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) {
+                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);
+            }
         }
     };
     /**
@@ -52079,11 +52280,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 +52298,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 +52422,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 +52448,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 +52472,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 +53433,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 +53448,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 +58155,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) {
@@ -60634,8 +60870,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 +60889,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 +61146,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 +61166,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 +61174,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 +61244,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 +61268,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 +61635,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 +61687,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 +64711,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 +65676,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 +65705,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 +66466,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 +70384,8 @@ Serializer.addClass("currencymask", [
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.12.3";
-ReleaseDate = "" + "2024-09-24";
+Version = "" + "1.12.4";
+ReleaseDate = "" + "2024-10-01";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -72722,7 +72987,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));",
@@ -81045,12 +81309,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);
@@ -88568,8 +88831,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));