survey-react 1.10.3 → 1.10.5

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.10.3
+ * surveyjs - Survey JavaScript library v1.10.5
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -3970,13 +3970,18 @@ var ProcessValue = /** @class */ (function () {
     };
     ProcessValue.prototype.isAnyKeyChanged = function (keys, usedNames) {
         for (var i = 0; i < usedNames.length; i++) {
-            var name = usedNames[i];
-            if (keys.hasOwnProperty(name))
+            var name_1 = usedNames[i];
+            if (!name_1)
+                continue;
+            var lowerName = name_1.toLowerCase();
+            if (keys.hasOwnProperty(name_1))
+                return true;
+            if (name_1 !== lowerName && keys.hasOwnProperty(lowerName))
                 return true;
-            var firstName = this.getFirstName(name);
+            var firstName = this.getFirstName(name_1);
             if (!keys.hasOwnProperty(firstName))
                 continue;
-            if (name === firstName)
+            if (name_1 === firstName)
                 return true;
             var keyValue = keys[firstName];
             if (keyValue == undefined)
@@ -3986,9 +3991,9 @@ var ProcessValue = /** @class */ (function () {
                 return true;
             var v = {};
             v[firstName] = keyValue["oldValue"];
-            var oldValue = this.getValue(name, v);
+            var oldValue = this.getValue(name_1, v);
             v[firstName] = keyValue["newValue"];
-            var newValue = this.getValue(name, v);
+            var newValue = this.getValue(name_1, v);
             if (!_helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].isTwoValueEquals(oldValue, newValue, false, false, false))
                 return true;
         }
@@ -5425,6 +5430,7 @@ var defaultV2Css = {
     rootFitToContainer: "sd-root-modern--full-container",
     rootWrapper: "sd-root-modern__wrapper",
     rootWrapperFixed: "sd-root-modern__wrapper--fixed",
+    rootWrapperHasImage: "sd-root-modern__wrapper--has-image",
     rootBackgroundImage: "sd-root_background-image",
     container: "sd-container-modern",
     header: "sd-title sd-container-modern__title",
@@ -7315,10 +7321,9 @@ var DragDropDOMAdapter = /** @class */ (function () {
         var pageY = event.pageY;
         var clientX = event.clientX;
         var clientY = event.clientY;
-        if (!!this.fitToContainer) {
-            rootElementX -= rootElementScrollLeft;
-            rootElementY -= rootElementScrollTop;
-        }
+        //https://github.com/surveyjs/survey-creator/issues/5484
+        rootElementX -= rootElementScrollLeft;
+        rootElementY -= rootElementScrollTop;
         var shortcutBottomCoordinate = this.getShortcutBottomCoordinate(clientY, shortcutHeight, shortcutYOffset);
         var shortcutRightCoordinate = this.getShortcutRightCoordinate(clientX, shortcutWidth, shortcutXOffset);
         if (shortcutRightCoordinate >= documentRight) { // right boundary
@@ -8526,7 +8531,7 @@ var DropdownListModel = /** @class */ (function (_super) {
             this.changeSelectionWithKeyboard(false);
     };
     DropdownListModel.prototype.onClear = function (event) {
-        this.question.clearValue();
+        this.question.clearValue(true);
         this._popupModel.isVisible = false;
         if (event) {
             event.preventDefault();
@@ -9820,8 +9825,8 @@ __webpack_require__.r(__webpack_exports__);
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.10.3";
-ReleaseDate = "" + "2024-05-07";
+Version = "" + "1.10.5";
+ReleaseDate = "" + "2024-05-20";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -16531,6 +16536,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./helpers */ "./src/helpers.ts");
 /* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./settings */ "./src/settings.ts");
 /* harmony import */ var _console_warnings__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./console-warnings */ "./src/console-warnings.ts");
+/* harmony import */ var _conditions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./conditions */ "./src/conditions.ts");
+
 
 
 
@@ -16653,7 +16660,7 @@ function avg(params) {
 }
 FunctionFactory.Instance.register("avg", avg);
 function getInArrayParams(params) {
-    if (params.length != 2)
+    if (params.length < 2 || params.length > 3)
         return null;
     var arr = params[0];
     if (!arr)
@@ -16663,16 +16670,22 @@ function getInArrayParams(params) {
     var name = params[1];
     if (typeof name !== "string" && !(name instanceof String))
         return null;
-    return { data: arr, name: name };
+    var expression = params.length === 3 ? params[2] : undefined;
+    if (typeof expression !== "string" && !(expression instanceof String)) {
+        expression = undefined;
+    }
+    return { data: arr, name: name, expression: expression };
 }
 function convertToNumber(val) {
     if (typeof val === "string")
         return _helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].isNumber(val) ? _helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].getNumber(val) : undefined;
     return val;
 }
-function processItemInArray(item, name, res, func, needToConvert) {
+function processItemInArray(item, name, res, func, needToConvert, condition) {
     if (!item || _helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].isValueEmpty(item[name]))
         return res;
+    if (condition && !condition.run(item))
+        return res;
     var val = needToConvert ? convertToNumber(item[name]) : 1;
     return func(res, val);
 }
@@ -16681,15 +16694,19 @@ function calcInArray(params, func, needToConvert) {
     var v = getInArrayParams(params);
     if (!v)
         return undefined;
+    var condition = !!v.expression ? new _conditions__WEBPACK_IMPORTED_MODULE_3__["ConditionRunner"](v.expression) : undefined;
+    if (condition && condition.isAsync) {
+        condition = undefined;
+    }
     var res = undefined;
     if (Array.isArray(v.data)) {
         for (var i = 0; i < v.data.length; i++) {
-            res = processItemInArray(v.data[i], v.name, res, func, needToConvert);
+            res = processItemInArray(v.data[i], v.name, res, func, needToConvert, condition);
         }
     }
     else {
         for (var key in v.data) {
-            res = processItemInArray(v.data[key], v.name, res, func, needToConvert);
+            res = processItemInArray(v.data[key], v.name, res, func, needToConvert, condition);
         }
     }
     return res;
@@ -31467,6 +31484,9 @@ var InputMaskNumeric = /** @class */ (function (_super) {
         }
         return result;
     };
+    InputMaskNumeric.prototype.numericalCompositionIsEmpty = function (number) {
+        return !number.integralPart && !number.fractionalPart;
+    };
     InputMaskNumeric.prototype.displayNumber = function (parsedNumber, insertThousandsSeparator, matchWholeMask) {
         if (insertThousandsSeparator === void 0) { insertThousandsSeparator = true; }
         if (matchWholeMask === void 0) { matchWholeMask = false; }
@@ -31571,6 +31591,8 @@ var InputMaskNumeric = /** @class */ (function (_super) {
     };
     InputMaskNumeric.prototype.getNumberUnmaskedValue = function (str) {
         var parsedNumber = this.parseNumber(str);
+        if (this.numericalCompositionIsEmpty(parsedNumber))
+            return undefined;
         return this.convertNumber(parsedNumber);
     };
     InputMaskNumeric.prototype.getTextAlignment = function () {
@@ -39945,15 +39967,18 @@ var Question = /** @class */ (function (_super) {
      * @see value
      * @see comment
      */
-    Question.prototype.clearValue = function () {
+    Question.prototype.clearValue = function (keepComment) {
         if (this.value !== undefined) {
             this.value = undefined;
         }
-        if (!!this.comment) {
+        if (!!this.comment && keepComment !== true) {
             this.comment = undefined;
         }
         this.setValueChangedDirectly(false);
     };
+    Question.prototype.clearValueOnly = function () {
+        this.clearValue(true);
+    };
     Question.prototype.unbindValue = function () {
         this.clearValue();
     };
@@ -40637,6 +40662,8 @@ var Question = /** @class */ (function (_super) {
         return new _error__WEBPACK_IMPORTED_MODULE_3__["CustomError"](error, this.survey);
     };
     Question.prototype.removeError = function (error) {
+        if (!error)
+            return;
         var errors = this.errors;
         var index = errors.indexOf(error);
         if (index !== -1)
@@ -41081,14 +41108,18 @@ var Question = /** @class */ (function (_super) {
     Question.prototype.getDesktopRenderAs = function () {
         return "default";
     };
+    Question.prototype.onBeforeSetCompactRenderer = function () { };
+    Question.prototype.onBeforeSetDesktopRenderer = function () { };
     Question.prototype.processResponsiveness = function (requiredWidth, availableWidth) {
         availableWidth = Math.round(availableWidth);
         if (Math.abs(requiredWidth - availableWidth) > 2) {
             var oldRenderAs = this.renderAs;
             if (requiredWidth > availableWidth) {
+                this.onBeforeSetCompactRenderer();
                 this.renderAs = this.getCompactRenderAs();
             }
             else {
+                this.onBeforeSetDesktopRenderer();
                 this.renderAs = this.getDesktopRenderAs();
             }
             return oldRenderAs !== this.renderAs;
@@ -42317,8 +42348,8 @@ var QuestionSelectBase = /** @class */ (function (_super) {
             this.isSettingComment = false;
         }
     };
-    QuestionSelectBase.prototype.clearValue = function () {
-        _super.prototype.clearValue.call(this);
+    QuestionSelectBase.prototype.clearValue = function (keepComment) {
+        _super.prototype.clearValue.call(this, keepComment);
         this.prevOtherValue = undefined;
     };
     QuestionSelectBase.prototype.updateCommentFromSurvey = function (newValue) {
@@ -42575,6 +42606,9 @@ var QuestionSelectBase = /** @class */ (function (_super) {
             this.isLockVisibleChoices = !!question && question.name === val;
             if (!!question && question.name !== val) {
                 question.removeDependedQuestion(this);
+                if (this.isDesignMode && !this.isLoadingFromJson && !!val) {
+                    this.setPropertyValue("choicesFromQuestion", undefined);
+                }
             }
             this.setPropertyValue("choicesFromQuestion", val);
             this.isLockVisibleChoices = false;
@@ -42990,7 +43024,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
                 }
             }
         }
-        return strs.join(", ");
+        return strs.join(_settings__WEBPACK_IMPORTED_MODULE_9__["settings"].choicesSeparator);
     };
     QuestionSelectBase.prototype.getItemDisplayValue = function (item, val) {
         if (item === this.otherItem) {
@@ -43524,7 +43558,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     QuestionSelectBase.prototype.clearIncorrectValuesCore = function () {
         var val = this.value;
         if (this.canClearValueAnUnknown(val)) {
-            this.clearValue();
+            this.clearValue(true);
         }
     };
     QuestionSelectBase.prototype.canClearValueAnUnknown = function (val) {
@@ -43534,7 +43568,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     };
     QuestionSelectBase.prototype.clearDisabledValuesCore = function () {
         if (this.isValueDisabled(this.value)) {
-            this.clearValue();
+            this.clearValue(true);
         }
     };
     QuestionSelectBase.prototype.clearUnusedValues = function () {
@@ -44962,7 +44996,7 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
                 this.selectAll();
             }
             else {
-                this.clearValue();
+                this.clearValue(true);
             }
         },
         enumerable: false,
@@ -45374,7 +45408,7 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
                     this.value = null;
                 }
                 else {
-                    this.clearValue();
+                    this.clearValue(true);
                 }
             }
             this.isChangingValueOnClearIncorrect = false;
@@ -45405,7 +45439,7 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
             return;
         this.isChangingValueOnClearIncorrect = true;
         if (newValue.length == 0) {
-            this.clearValue();
+            this.clearValue(true);
         }
         else {
             this.value = newValue;
@@ -47311,9 +47345,9 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
     QuestionDropdownModel.prototype.getInputId = function () {
         return this.inputId + "_0";
     };
-    QuestionDropdownModel.prototype.clearValue = function () {
+    QuestionDropdownModel.prototype.clearValue = function (keepComment) {
         var _a;
-        _super.prototype.clearValue.call(this);
+        _super.prototype.clearValue.call(this, keepComment);
         this.lastSelectedItemValue = null;
         (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.clear();
     };
@@ -47323,7 +47357,7 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
     QuestionDropdownModel.prototype.onKeyUp = function (event) {
         var char = event.which || event.keyCode;
         if (char === 46) {
-            this.clearValue();
+            this.clearValue(true);
             event.preventDefault();
             event.stopPropagation();
         }
@@ -48144,9 +48178,9 @@ var QuestionFileModelBase = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    QuestionFileModelBase.prototype.clearValue = function () {
+    QuestionFileModelBase.prototype.clearValue = function (keepComment) {
         this.clearOnDeletingContainer();
-        _super.prototype.clearValue.call(this);
+        _super.prototype.clearValue.call(this, keepComment);
     };
     QuestionFileModelBase.prototype.clearOnDeletingContainer = function () {
         if (!this.survey)
@@ -48471,7 +48505,7 @@ var QuestionFileModel = /** @class */ (function (_super) {
         _super.prototype.updateElementCssCore.call(this, cssClasses);
         this.prevFileAction.iconName = this.cssClasses.leftIconId;
         this.nextFileAction.iconName = this.cssClasses.rightIconId;
-        //this.mobileFileNavigator.cssClasses = this.survey.getCss().actionBar;
+        this.updateCurrentMode();
     };
     QuestionFileModel.prototype.getFileIndexCaption = function () {
         return this.getLocalizationFormatString("indexText", this.indexToShow + 1, this.pagesCount);
@@ -49113,11 +49147,6 @@ var QuestionFileModel = /** @class */ (function (_super) {
         this.actionsContainer.containerCss = classes.actionsContainer;
         return classes;
     };
-    //todo remove in v2
-    QuestionFileModel.prototype.updateElementCss = function (reNew) {
-        _super.prototype.updateElementCss.call(this, reNew);
-        this.updateCurrentMode();
-    };
     QuestionFileModel.prototype.onSurveyLoad = function () {
         _super.prototype.onSurveyLoad.call(this);
         this.updateCurrentMode();
@@ -49523,7 +49552,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
-var youtubeTags = ["youtube.com", "youtu.be"];
+var youtubeDomains = ["www.youtube.com", "m.youtube.com", "youtube.com", "youtu.be"];
 var videoSuffics = [".mp4", ".mov", ".wmv", ".flv", ".avi", ".mkv"];
 var youtubeUrl = "https://www.youtube.com/";
 var youtubeEmbed = "embed";
@@ -49531,8 +49560,9 @@ function isUrlYoutubeVideo(url) {
     if (!url)
         return false;
     url = url.toLowerCase();
-    for (var i = 0; i < youtubeTags.length; i++) {
-        if (url.indexOf(youtubeTags[i]) !== -1)
+    url = url.replace(/^https?:\/\//, "");
+    for (var i = 0; i < youtubeDomains.length; i++) {
+        if (url.indexOf(youtubeDomains[i] + "/") === 0)
             return true;
     }
     return false;
@@ -49548,7 +49578,7 @@ var QuestionImageModel = /** @class */ (function (_super) {
         var _this = _super.call(this, name) || this;
         var locImageLink = _this.createLocalizableString("imageLink", _this, false);
         locImageLink.onGetTextCallback = function (text) {
-            return getCorrectImageLink(text);
+            return getCorrectImageLink(text, _this.contentMode == "youtube");
         };
         _this.createLocalizableString("altText", _this, false);
         _this.registerPropertyChangedHandlers(["contentMode", "imageLink"], function () { return _this.calculateRenderedMode(); });
@@ -49780,9 +49810,10 @@ var QuestionImageModel = /** @class */ (function (_super) {
     return QuestionImageModel;
 }(_questionnonvalue__WEBPACK_IMPORTED_MODULE_0__["QuestionNonValue"]));
 
-function getCorrectImageLink(val) {
+function getCorrectImageLink(val, isYouTube) {
     if (!val || !isUrlYoutubeVideo(val))
-        return val;
+        return isYouTube ? "" : val;
+    //if(!val || !isUrlYoutubeVideo(val)) return val;
     var res = val.toLocaleLowerCase();
     if (res.indexOf(youtubeEmbed) > -1)
         return val;
@@ -50056,7 +50087,7 @@ var QuestionImagePickerModel = /** @class */ (function (_super) {
             if (!val)
                 return;
             if (!Array.isArray(val) || val.length == 0) {
-                this.clearValue();
+                this.clearValue(true);
                 return;
             }
             var newValue = [];
@@ -50068,7 +50099,7 @@ var QuestionImagePickerModel = /** @class */ (function (_super) {
             if (newValue.length == val.length)
                 return;
             if (newValue.length == 0) {
-                this.clearValue();
+                this.clearValue(true);
             }
             else {
                 this.value = newValue;
@@ -52006,10 +52037,10 @@ var MatrixDropdownRowModelBase = /** @class */ (function () {
             this.detailPanel.runCondition(values, newProps);
         }
     };
-    MatrixDropdownRowModelBase.prototype.clearValue = function () {
+    MatrixDropdownRowModelBase.prototype.clearValue = function (keepComment) {
         var questions = this.questions;
         for (var i = 0; i < questions.length; i++) {
-            questions[i].clearValue();
+            questions[i].clearValue(keepComment);
         }
     };
     MatrixDropdownRowModelBase.prototype.onAnyValueChanged = function (name, questionName) {
@@ -53415,23 +53446,7 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
     QuestionMatrixDropdownModelBase.prototype.checkIfValueInRowDuplicated = function (checkedRow, cellQuestion) {
         if (!this.generatedVisibleRows)
             return false;
-        var res = false;
-        for (var i = 0; i < this.generatedVisibleRows.length; i++) {
-            var row = this.generatedVisibleRows[i];
-            if (checkedRow === row)
-                continue;
-            if (_helpers__WEBPACK_IMPORTED_MODULE_2__["Helpers"].isTwoValueEquals(row.getValue(cellQuestion.name), cellQuestion.value, true, this.isUniqueCaseSensitive)) {
-                res = true;
-                break;
-            }
-        }
-        if (res) {
-            this.addDuplicationError(cellQuestion);
-        }
-        else {
-            cellQuestion.clearErrors();
-        }
-        return res;
+        return this.isValueInColumnDuplicated(cellQuestion.name, true, checkedRow);
     };
     /**
      * Assigns values to a row.
@@ -53769,51 +53784,104 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
     QuestionMatrixDropdownModelBase.prototype.isValueDuplicated = function () {
         if (!this.generatedVisibleRows)
             return false;
-        var columns = this.getUniqueColumns();
+        var names = this.getUniqueColumnsNames();
         var res = false;
-        for (var i = 0; i < columns.length; i++) {
-            res = this.isValueInColumnDuplicated(columns[i]) || res;
-        }
-        return res;
-    };
-    QuestionMatrixDropdownModelBase.prototype.isValueInColumnDuplicated = function (column) {
-        var keyValues = [];
-        var res = false;
-        for (var i = 0; i < this.generatedVisibleRows.length; i++) {
-            res =
-                this.isValueDuplicatedInRow(this.generatedVisibleRows[i], column, keyValues) || res;
+        for (var i = 0; i < names.length; i++) {
+            res = this.isValueInColumnDuplicated(names[i], true) || res;
         }
         return res;
     };
-    QuestionMatrixDropdownModelBase.prototype.getUniqueColumns = function () {
+    QuestionMatrixDropdownModelBase.prototype.getUniqueColumnsNames = function () {
         var res = new Array();
         for (var i = 0; i < this.columns.length; i++) {
             if (this.columns[i].isUnique) {
-                res.push(this.columns[i]);
+                res.push(this.columns[i].name);
             }
         }
         return res;
     };
-    QuestionMatrixDropdownModelBase.prototype.isValueDuplicatedInRow = function (row, column, keyValues) {
-        var question = row.getQuestionByColumn(column);
-        if (!question || question.isEmpty())
-            return false;
-        var value = question.value;
-        for (var i = 0; i < keyValues.length; i++) {
-            if (_helpers__WEBPACK_IMPORTED_MODULE_2__["Helpers"].isTwoValueEquals(value, keyValues[i], true, this.isUniqueCaseSensitive)) {
-                this.addDuplicationError(question);
-                return true;
+    QuestionMatrixDropdownModelBase.prototype.isValueInColumnDuplicated = function (columnName, showErrors, row) {
+        var rows = this.getDuplicatedRows(columnName);
+        if (showErrors) {
+            this.showDuplicatedErrorsInRows(rows, columnName);
+        }
+        this.removeDuplicatedErrorsInRows(rows, columnName);
+        return !!row ? rows.indexOf(row) > -1 : rows.length > 0;
+    };
+    QuestionMatrixDropdownModelBase.prototype.getDuplicatedRows = function (columnName) {
+        var keyValues = {};
+        var res = [];
+        var rows = this.generatedVisibleRows;
+        for (var i = 0; i < rows.length; i++) {
+            var val = undefined;
+            var question = rows[i].getQuestionByName(columnName);
+            if (!!question) {
+                val = question.value;
+            }
+            else {
+                var rowVal = this.getRowValue(i);
+                val = !!rowVal ? rowVal[columnName] : undefined;
+            }
+            if (!this.isValueEmpty(val)) {
+                if (!this.isUniqueCaseSensitive && typeof val === "string") {
+                    val = val.toLocaleLowerCase();
+                }
+                if (!keyValues[val]) {
+                    keyValues[val] = [];
+                }
+                keyValues[val].push(rows[i]);
             }
         }
-        keyValues.push(value);
-        return false;
+        for (var key in keyValues) {
+            if (keyValues[key].length > 1) {
+                keyValues[key].forEach(function (row) { return res.push(row); });
+            }
+        }
+        return res;
+    };
+    QuestionMatrixDropdownModelBase.prototype.showDuplicatedErrorsInRows = function (duplicatedRows, columnName) {
+        var _this = this;
+        duplicatedRows.forEach(function (row) {
+            var question = row.getQuestionByName(columnName);
+            if (!question && _this.detailPanel.getQuestionByName(columnName)) {
+                row.showDetailPanel();
+                if (row.detailPanel) {
+                    question = row.detailPanel.getQuestionByName(columnName);
+                }
+            }
+            if (question) {
+                row.showDetailPanel();
+                _this.addDuplicationError(question);
+            }
+        });
+    };
+    QuestionMatrixDropdownModelBase.prototype.removeDuplicatedErrorsInRows = function (duplicatedRows, columnName) {
+        var _this = this;
+        this.generatedVisibleRows.forEach(function (row) {
+            if (duplicatedRows.indexOf(row) < 0) {
+                var question = row.getQuestionByName(columnName);
+                if (question) {
+                    _this.removeDuplicationError(question);
+                }
+            }
+        });
+    };
+    QuestionMatrixDropdownModelBase.prototype.getDuplicationError = function (question) {
+        var errors = question.errors;
+        for (var i = 0; i < errors.length; i++) {
+            if (errors[i].getErrorType() === "keyduplicationerror")
+                return errors[i];
+        }
+        return null;
     };
     QuestionMatrixDropdownModelBase.prototype.addDuplicationError = function (question) {
-        var keyError = question.errors.find(function (error) { return error.getErrorType() === "keyduplicationerror"; });
-        if (!keyError) {
+        if (!this.getDuplicationError(question)) {
             question.addError(new _error__WEBPACK_IMPORTED_MODULE_10__["KeyDuplicationError"](this.keyDuplicationError, this));
         }
     };
+    QuestionMatrixDropdownModelBase.prototype.removeDuplicationError = function (question) {
+        question.removeError(this.getDuplicationError(question));
+    };
     QuestionMatrixDropdownModelBase.prototype.getFirstQuestionToFocus = function (withError) {
         return this.getFirstCellQuestion(withError);
     };
@@ -53959,6 +54027,9 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
                 this.onCellValueChanged(row, columnName, combine.rowValue);
             }
         }
+        if (this.getUniqueColumnsNames().indexOf(columnName) > -1) {
+            this.isValueInColumnDuplicated(columnName, !!rowObj);
+        }
     };
     QuestionMatrixDropdownModelBase.prototype.getNewValueOnRowChanged = function (row, columnName, newRowValue, isDeletingValue, newValue) {
         var rowValue = this.getRowValueCore(row, newValue, true);
@@ -54479,9 +54550,9 @@ var MatrixDropdownColumn = /** @class */ (function (_super) {
          * @see isRequired
          * @see readOnly
          */
-        get: function () { return this.getPropertyValue("visible"); },
+        get: function () { return this.templateQuestion.visible; },
         set: function (val) {
-            this.setPropertyValue("visible", val);
+            this.templateQuestion.visible = val;
         },
         enumerable: false,
         configurable: true
@@ -56529,7 +56600,7 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
     QuestionMatrixDropdownRenderedTable.prototype.getMultipleColumnChoices = function (column) {
         var choices = column.templateQuestion.choices;
         if (!!choices && Array.isArray(choices) && choices.length == 0)
-            return this.matrix.choices;
+            return [].concat(this.matrix.choices, column.getVisibleMultipleChoices());
         choices = column.getVisibleMultipleChoices();
         if (!choices || !Array.isArray(choices))
             return null;
@@ -56709,11 +56780,11 @@ var QuestionMatrixDynamicModel = /** @class */ (function (_super) {
     function QuestionMatrixDynamicModel(name) {
         var _this = _super.call(this, name) || this;
         _this.rowCounter = 0;
-        _this.initialRowCount = 2;
         _this.setRowCountValueFromData = false;
         _this.startDragMatrixRow = function (event, currentTarget) {
             _this.dragDropMatrixRows.startDrag(event, _this.draggedRow, _this, event.target);
         };
+        _this.initialRowCount = _this.getDefaultPropertyValue("rowCount");
         _this.createLocalizableString("confirmDeleteText", _this, false, "confirmDelete");
         var locAddRowText = _this.createLocalizableString("addRowText", _this);
         locAddRowText.onGetTextCallback = function (text) {
@@ -57519,13 +57590,11 @@ var QuestionMatrixDynamicModel = /** @class */ (function (_super) {
         }
         return setRowCount < this.minRowCount;
     };
-    QuestionMatrixDynamicModel.prototype.getUniqueColumns = function () {
-        var res = _super.prototype.getUniqueColumns.call(this);
-        if (!!this.keyName) {
-            var column = this.getColumnByName(this.keyName);
-            if (!!column && res.indexOf(column) < 0) {
-                res.push(column);
-            }
+    QuestionMatrixDynamicModel.prototype.getUniqueColumnsNames = function () {
+        var res = _super.prototype.getUniqueColumnsNames.call(this);
+        var name = this.keyName;
+        if (!!name && res.indexOf(name) < 0) {
+            res.push(name);
         }
         return res;
     };
@@ -57590,6 +57659,12 @@ var QuestionMatrixDynamicModel = /** @class */ (function (_super) {
         this.setPropertyValueDirectly("rowCount", val.length);
         return true;
     };
+    QuestionMatrixDynamicModel.prototype.updateValueFromSurvey = function (newValue, clearData) {
+        if (clearData === void 0) { clearData = false; }
+        this.setRowCountValueFromData = true;
+        _super.prototype.updateValueFromSurvey.call(this, newValue, clearData);
+        this.setRowCountValueFromData = false;
+    };
     QuestionMatrixDynamicModel.prototype.onBeforeValueChanged = function (val) {
         if (!val || !Array.isArray(val))
             return;
@@ -62076,7 +62151,7 @@ var QuestionRadiogroupModel = /** @class */ (function (_super) {
             var clearAction = new _actions_action__WEBPACK_IMPORTED_MODULE_3__["Action"]({
                 title: this.clearButtonCaption,
                 id: "sv-clr-btn-" + this.id,
-                action: function () { _this.clearValue(); },
+                action: function () { _this.clearValue(true); },
                 innerCss: this.cssClasses.clearButton,
                 visible: new _base__WEBPACK_IMPORTED_MODULE_4__["ComputedUpdater"](function () { return _this.canShowClearButton; })
             });
@@ -62293,7 +62368,7 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         _this.createNewArray("rankingChoices");
         _this.createNewArray("unRankingChoices");
         _this.registerFunctionOnPropertyValueChanged("selectToRankEnabled", function () {
-            _this.clearValue();
+            _this.clearValue(true);
             _this.setDragDropRankingChoices();
             _this.updateRankingChoicesSync();
         });
@@ -62908,8 +62983,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
 /* harmony import */ var _base__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./base */ "./src/base.ts");
 /* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./utils/utils */ "./src/utils/utils.ts");
-/* harmony import */ var _utils_devices__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./utils/devices */ "./src/utils/devices.ts");
-/* harmony import */ var _global_variables_utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./global_variables_utils */ "./src/global_variables_utils.ts");
+/* harmony import */ var _dropdownListModel__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./dropdownListModel */ "./src/dropdownListModel.ts");
+/* harmony import */ var _utils_devices__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./utils/devices */ "./src/utils/devices.ts");
+/* harmony import */ var _global_variables_utils__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./global_variables_utils */ "./src/global_variables_utils.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -62942,6 +63018,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 var RenderedRatingItem = /** @class */ (function (_super) {
     __extends(RenderedRatingItem, _super);
     function RenderedRatingItem(itemValue, locString) {
@@ -63023,6 +63100,9 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         _this.registerFunctionOnPropertiesValueChanged(["rateColorMode", "scaleColorMode"], function () {
             _this.updateColors(_this.survey.themeVariables);
         });
+        _this.registerFunctionOnPropertiesValueChanged(["displayMode"], function () {
+            _this.updateRenderAsBasedOnDisplayMode(true);
+        });
         _this.registerSychProperties(["autoGenerate"], function () {
             if (!_this.autoGenerate && _this.rateValues.length === 0) {
                 _this.setPropertyValue("rateValues", _this.visibleRateValues);
@@ -63230,19 +63310,19 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     QuestionRatingModel.prototype.updateColors = function (themeVariables) {
         if (this.colorMode === "monochrome")
             return;
-        if (!_global_variables_utils__WEBPACK_IMPORTED_MODULE_10__["DomDocumentHelper"].isAvailable())
+        if (!_global_variables_utils__WEBPACK_IMPORTED_MODULE_11__["DomDocumentHelper"].isAvailable())
             return;
         if (QuestionRatingModel.colorsCalculated)
             return;
         function getRGBColor(colorName, varName) {
             var str = !!themeVariables && themeVariables[colorName];
             if (!str) {
-                var style = getComputedStyle(_global_variables_utils__WEBPACK_IMPORTED_MODULE_10__["DomDocumentHelper"].getDocumentElement());
+                var style = getComputedStyle(_global_variables_utils__WEBPACK_IMPORTED_MODULE_11__["DomDocumentHelper"].getDocumentElement());
                 str = style.getPropertyValue && style.getPropertyValue(varName);
             }
             if (!str)
                 return null;
-            var canvasElement = _global_variables_utils__WEBPACK_IMPORTED_MODULE_10__["DomDocumentHelper"].createElement("canvas");
+            var canvasElement = _global_variables_utils__WEBPACK_IMPORTED_MODULE_11__["DomDocumentHelper"].createElement("canvas");
             if (!canvasElement)
                 return null;
             var ctx = canvasElement.getContext("2d");
@@ -63438,6 +63518,27 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionRatingModel.prototype.updateRenderAsBasedOnDisplayMode = function (isOnChange) {
+        if (this.isDesignMode) {
+            if (isOnChange || this.renderAs === "dropdown") {
+                this.renderAs = "default";
+            }
+        }
+        else {
+            if (isOnChange || this.displayMode !== "auto") {
+                this.renderAs = this.displayMode === "dropdown" ? "dropdown" : "default";
+            }
+        }
+    };
+    QuestionRatingModel.prototype.onSurveyLoad = function () {
+        _super.prototype.onSurveyLoad.call(this);
+        if (this.renderAs === "dropdown" && this.displayMode === "auto") {
+            this.displayMode = this.renderAs;
+        }
+        else {
+            this.updateRenderAsBasedOnDisplayMode();
+        }
+    };
     Object.defineProperty(QuestionRatingModel.prototype, "rateDisplayMode", {
         get: function () {
             return this.rateType;
@@ -63493,7 +63594,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     };
     QuestionRatingModel.prototype.setValueFromClick = function (value) {
         if (this.value === parseFloat(value)) {
-            this.clearValue();
+            this.clearValue(true);
         }
         else {
             this.value = value;
@@ -63503,7 +63604,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         }
     };
     QuestionRatingModel.prototype.onItemMouseIn = function (item) {
-        if (_utils_devices__WEBPACK_IMPORTED_MODULE_9__["IsTouch"])
+        if (_utils_devices__WEBPACK_IMPORTED_MODULE_10__["IsTouch"])
             return;
         if (this.isReadOnly || !item.itemValue.isEnabled || this.isDesignMode)
             return;
@@ -63522,7 +63623,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         }
     };
     QuestionRatingModel.prototype.onItemMouseOut = function (item) {
-        if (_utils_devices__WEBPACK_IMPORTED_MODULE_9__["IsTouch"])
+        if (_utils_devices__WEBPACK_IMPORTED_MODULE_10__["IsTouch"])
             return;
         this.renderedRateItems.forEach(function (item) { return item.highlight = "none"; });
     };
@@ -63793,6 +63894,11 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     QuestionRatingModel.prototype.supportResponsiveness = function () {
         return true;
     };
+    QuestionRatingModel.prototype.onBeforeSetCompactRenderer = function () {
+        if (!this.dropdownListModelValue) {
+            this.dropdownListModel = new _dropdownListModel__WEBPACK_IMPORTED_MODULE_9__["DropdownListModel"](this);
+        }
+    };
     QuestionRatingModel.prototype.getCompactRenderAs = function () {
         return (this.displayMode == "buttons") ? "default" : "dropdown";
     };
@@ -63812,6 +63918,9 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionRatingModel.prototype, "dropdownListModel", {
         get: function () {
+            if (this.renderAs === "dropdown") {
+                this.onBeforeSetCompactRenderer();
+            }
             return this.dropdownListModelValue;
         },
         set: function (val) {
@@ -63847,6 +63956,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         if (!this.survey)
             return;
         this.updateColors(this.survey.themeVariables);
+        this.updateRenderAsBasedOnDisplayMode();
     };
     QuestionRatingModel.prototype.dispose = function () {
         _super.prototype.dispose.call(this);
@@ -63877,18 +63987,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
     ], QuestionRatingModel.prototype, "displayRateDescriptionsAsExtremeItems", void 0);
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({
-            onSet: function (val, target) {
-                if (!target.isDesignMode) {
-                    if (val === "dropdown") {
-                        target.renderAs = "dropdown";
-                    }
-                    else {
-                        target.renderAs = "default";
-                    }
-                }
-            }
-        })
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
     ], QuestionRatingModel.prototype, "displayMode", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
@@ -64467,9 +64566,9 @@ var QuestionSignaturePadModel = /** @class */ (function (_super) {
         this.value = (arg === null || arg === void 0 ? void 0 : arg.length) ? arg.map(function (r) { return r.content; })[0] : undefined;
         this.valueIsUpdatingInternally = false;
     };
-    QuestionSignaturePadModel.prototype.clearValue = function () {
+    QuestionSignaturePadModel.prototype.clearValue = function (keepComment) {
         this.valueWasChangedFromLastUpload = false;
-        _super.prototype.clearValue.call(this);
+        _super.prototype.clearValue.call(this, keepComment);
         this.refreshCanvas();
     };
     QuestionSignaturePadModel.prototype.endLoadingFromJson = function () {
@@ -64865,9 +64964,9 @@ var QuestionTagboxModel = /** @class */ (function (_super) {
             this.dropdownListModel.dispose();
         }
     };
-    QuestionTagboxModel.prototype.clearValue = function () {
+    QuestionTagboxModel.prototype.clearValue = function (keepComment) {
         var _a;
-        _super.prototype.clearValue.call(this);
+        _super.prototype.clearValue.call(this, keepComment);
         (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.clear();
     };
     Object.defineProperty(QuestionTagboxModel.prototype, "showClearButton", {
@@ -69750,9 +69849,6 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
                 this.renderReadOnlyElement());
         }
         else {
-            if (!this.question["dropdownListModel"]) {
-                this.question["dropdownListModel"] = new survey_core__WEBPACK_IMPORTED_MODULE_1__["DropdownListModel"](this.question);
-            }
             selectElement = react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null,
                 this.renderInput(this.question["dropdownListModel"]),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_popup_popup__WEBPACK_IMPORTED_MODULE_2__["Popup"], { model: (_b = (_a = this.question) === null || _a === void 0 ? void 0 : _a.dropdownListModel) === null || _b === void 0 ? void 0 : _b.popupModel }));
@@ -75050,7 +75146,7 @@ var SurveyQuestionRadiogroup = /** @class */ (function (_super) {
         var clearButton = null;
         if (this.question.showClearButtonInContent) {
             clearButton = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null,
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "button", className: this.question.cssClasses.clearButton, onClick: function () { return _this.question.clearValue(); }, value: this.question.clearButtonCaption })));
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "button", className: this.question.cssClasses.clearButton, onClick: function () { return _this.question.clearValue(true); }, value: this.question.clearButtonCaption })));
         }
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("fieldset", { className: this.question.getSelectBaseRootCss(), ref: function (fieldset) { return (_this.setControl(fieldset)); }, role: this.question.a11y_input_ariaRole, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage },
             this.question.hasColumns
@@ -76112,7 +76208,7 @@ var SurveyQuestionSignaturePad = /** @class */ (function (_super) {
             return null;
         var cssClasses = this.question.cssClasses;
         return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.controls },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("button", { type: "button", className: cssClasses.clearButton, title: this.question.clearButtonCaption, onClick: function () { return _this.question.clearValue(); } }, this.question.cssClasses.clearButtonIconId ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { iconName: this.question.cssClasses.clearButtonIconId, size: "auto" }) : react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, "\u2716")));
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("button", { type: "button", className: cssClasses.clearButton, title: this.question.clearButtonCaption, onClick: function () { return _this.question.clearValue(true); } }, this.question.cssClasses.clearButtonIconId ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { iconName: this.question.cssClasses.clearButtonIconId, size: "auto" }) : react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, "\u2716")));
     };
     return SurveyQuestionSignaturePad;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["SurveyQuestionElementBase"]));
@@ -77015,6 +77111,7 @@ var settings = {
      * A separator used in a shorthand notation that specifies a value and display text for an [`ItemValue`](https://surveyjs.io/form-library/documentation/api-reference/itemvalue) object: `"value|text"`.
      *
      * Default value: `"|"`
+     * @see [settings.choicesSeparator](https://surveyjs.io/form-library/documentation/api-reference/settings#choicesSeparator)
      */
     itemValueSeparator: "|",
     /**
@@ -77169,6 +77266,13 @@ var settings = {
         dontKnowItem: [3],
         otherItem: [4]
     },
+    /**
+     * One or several characters used to separate choice options in a list.
+     *
+     * Default value: `", "`
+     * @see [settings.itemValueSeparator](https://surveyjs.io/form-library/documentation/api-reference/settings#itemValueSeparator)
+     */
+    choicesSeparator: ", ",
     /**
      * A list of supported validators by question type.
      */
@@ -79161,7 +79265,7 @@ var SurveyElement = /** @class */ (function (_super) {
         configurable: true
     });
     SurveyElement.prototype.getIsAnimationAllowed = function () {
-        return _super.prototype.getIsAnimationAllowed.call(this) && !!this.survey;
+        return _super.prototype.getIsAnimationAllowed.call(this) && !!this.survey && !this.survey["isEndLoadingFromJson"];
     };
     SurveyElement.prototype.dispose = function () {
         _super.prototype.dispose.call(this);
@@ -81709,7 +81813,8 @@ var SurveyModel = /** @class */ (function (_super) {
     SurveyModel.prototype.updateWrapperFormCss = function () {
         this.wrapperFormCss = new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_18__["CssClassBuilder"]()
             .append(this.css.rootWrapper)
-            .append(this.css.rootWrapperFixed, this.backgroundImageAttachment === "fixed")
+            .append(this.css.rootWrapperHasImage, !!this.backgroundImage)
+            .append(this.css.rootWrapperFixed, !!this.backgroundImage && this.backgroundImageAttachment === "fixed")
             .toString();
     };
     Object.defineProperty(SurveyModel.prototype, "completedHtml", {
@@ -85467,7 +85572,7 @@ var SurveyModel = /** @class */ (function (_super) {
         page.name = name;
         return page;
     };
-    SurveyModel.prototype.questionOnValueChanging = function (valueName, newValue) {
+    SurveyModel.prototype.questionOnValueChanging = function (valueName, newValue, questionValueName) {
         if (!!this.editingObj) {
             var prop = _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].findProperty(this.editingObj.getType(), valueName);
             if (!!prop)
@@ -85477,7 +85582,7 @@ var SurveyModel = /** @class */ (function (_super) {
             return newValue;
         var options = {
             name: valueName,
-            question: this.getQuestionByValueName(valueName),
+            question: this.getQuestionByValueName(questionValueName || valueName),
             value: this.getUnbindValue(newValue),
             oldValue: this.getValue(valueName),
         };
@@ -86211,14 +86316,20 @@ var SurveyModel = /** @class */ (function (_super) {
     SurveyModel.prototype.setVariable = function (name, newValue) {
         if (!name)
             return;
+        var oldValue = this.getVariable(name);
         if (!!this.valuesHash) {
             delete this.valuesHash[name];
         }
         name = name.toLowerCase();
         this.variablesHash[name] = newValue;
         this.notifyElementsOnAnyValueOrVariableChanged(name);
-        this.runConditionOnValueChanged(name, newValue);
-        this.onVariableChanged.fire(this, { name: name, value: newValue });
+        if (!_helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].isTwoValueEquals(oldValue, newValue)) {
+            this.runConditionOnValueChanged(name, newValue);
+            var triggerKeys = {};
+            triggerKeys[name] = { newValue: newValue, oldValue: oldValue };
+            this.checkTriggers(triggerKeys, false, false, name);
+            this.onVariableChanged.fire(this, { name: name, value: newValue });
+        }
     };
     /**
      * Returns the names of all variables in the survey.
@@ -86384,7 +86495,10 @@ var SurveyModel = /** @class */ (function (_super) {
             return;
         if (this.checkIsCurrentPageHasErrors(false))
             return;
+        var curPage = this.currentPage;
         var goNextPage = function () {
+            if (curPage !== _this.currentPage)
+                return;
             if (!_this.isLastPage) {
                 _this.nextPage();
             }
@@ -86423,6 +86537,7 @@ var SurveyModel = /** @class */ (function (_super) {
         if (this.isTwoValueEquals(newValue, this.getComment(name)))
             return;
         var commentName = name + this.commentSuffix;
+        newValue = this.questionOnValueChanging(commentName, newValue, name);
         if (this.isValueEmpty(newValue)) {
             this.deleteDataValueCore(this.valuesHash, commentName);
         }
@@ -86449,6 +86564,10 @@ var SurveyModel = /** @class */ (function (_super) {
                 question: question,
                 value: newValue,
             });
+            question.comment = newValue;
+            if (question.comment != newValue) {
+                question.comment = newValue;
+            }
         }
     };
     /**
@@ -87373,32 +87492,34 @@ var SurveyModel = /** @class */ (function (_super) {
                 }
             }
             else if (this.state === "running" && isStrCiEqual(layoutElement.id, this.progressBarComponentName)) {
-                var headerLayoutElement = this.findLayoutElement("advanced-header");
-                var advHeader = headerLayoutElement && headerLayoutElement.data;
-                var isBelowHeader = !advHeader || advHeader.hasBackground;
-                if (isStrCiEqual(this.showProgressBar, "aboveHeader")) {
-                    isBelowHeader = false;
-                }
-                if (isStrCiEqual(this.showProgressBar, "belowHeader")) {
-                    isBelowHeader = true;
-                }
-                if (container === "header" && !isBelowHeader) {
-                    layoutElement.index = -150;
-                    if (this.isShowProgressBarOnTop && !this.isShowStartingPage) {
-                        containerLayoutElements.push(layoutElement);
+                if (this.questionsOnPageMode != "singlePage") {
+                    var headerLayoutElement = this.findLayoutElement("advanced-header");
+                    var advHeader = headerLayoutElement && headerLayoutElement.data;
+                    var isBelowHeader = !advHeader || advHeader.hasBackground;
+                    if (isStrCiEqual(this.showProgressBar, "aboveHeader")) {
+                        isBelowHeader = false;
                     }
-                }
-                if (container === "center" && isBelowHeader) {
-                    if (!!layoutElement.index) {
-                        delete layoutElement.index;
+                    if (isStrCiEqual(this.showProgressBar, "belowHeader")) {
+                        isBelowHeader = true;
                     }
-                    if (this.isShowProgressBarOnTop && !this.isShowStartingPage) {
-                        containerLayoutElements.push(layoutElement);
+                    if (container === "header" && !isBelowHeader) {
+                        layoutElement.index = -150;
+                        if (this.isShowProgressBarOnTop && !this.isShowStartingPage) {
+                            containerLayoutElements.push(layoutElement);
+                        }
                     }
-                }
-                if (container === "footer") {
-                    if (this.isShowProgressBarOnBottom && !this.isShowStartingPage) {
-                        containerLayoutElements.push(layoutElement);
+                    if (container === "center" && isBelowHeader) {
+                        if (!!layoutElement.index) {
+                            delete layoutElement.index;
+                        }
+                        if (this.isShowProgressBarOnTop && !this.isShowStartingPage) {
+                            containerLayoutElements.push(layoutElement);
+                        }
+                    }
+                    if (container === "footer") {
+                        if (this.isShowProgressBarOnBottom && !this.isShowStartingPage) {
+                            containerLayoutElements.push(layoutElement);
+                        }
                     }
                 }
             }
@@ -87594,7 +87715,11 @@ var SurveyModel = /** @class */ (function (_super) {
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], SurveyModel.prototype, "_isCompact", void 0);
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({
+            onSet: function (newValue, target) {
+                target.updateCss();
+            }
+        })
     ], SurveyModel.prototype, "backgroundImage", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()