survey-creator-core 1.9.94 → 1.9.96

package/survey-creator-core.i18n.js

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v1.9.94
+ * SurveyJS Creator v1.9.96
  * (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator

package/survey-creator-core.i18n.min.js

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v1.9.94
+ * SurveyJS Creator v1.9.96
  * (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator

package/survey-creator-core.js

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v1.9.94
+ * SurveyJS Creator v1.9.96
  * (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -1133,6 +1133,7 @@ __webpack_require__(/*! ./matrix-cell.scss */ "./src/components/matrix-cell.scss
 var MatrixCellWrapperEditSurvey = /** @class */ (function () {
     function MatrixCellWrapperEditSurvey(creator, cellQuestion) {
         this.cellQuestion = cellQuestion;
+        this.creator = creator;
         var questionJSON = cellQuestion.toJSON();
         questionJSON.type = cellQuestion.getType();
         this.surveyValue = creator.createSurvey({ questions: [questionJSON] }, "modal-question-editor");
@@ -1163,8 +1164,11 @@ var MatrixCellWrapperEditSurvey = /** @class */ (function () {
         if (!!prevCellType) {
             questionJSON.cellType = prevCellType;
         }
+        if (survey_core__WEBPACK_IMPORTED_MODULE_1__["Helpers"].isTwoValueEquals(questionJSON, columnJSON))
+            return;
         column.fromJSON(questionJSON);
         matrix.onColumnCellTypeChanged(column);
+        this.creator.setModified({ type: "MATRIX_CELL_EDITOR", column: column });
     };
     return MatrixCellWrapperEditSurvey;
 }());
@@ -9483,6 +9487,7 @@ var TestSurveyTabViewModel = /** @class */ (function (_super) {
         configurable: true
     });
     TestSurveyTabViewModel.prototype.updateSimulatorSurvey = function (json, theme) {
+        var _this = this;
         var newSurvey = this.surveyProvider.createSurvey(json || {}, "test");
         if (this.surveyProvider.showThemeTab) {
             newSurvey.applyTheme(this.surveyProvider.theme);
@@ -9523,6 +9528,16 @@ var TestSurveyTabViewModel = /** @class */ (function (_super) {
         this.survey.onPageVisibleChanged.add(function (sender, options) {
             self.updatePageItem(options.page);
         });
+        this.survey.onPopupVisibleChanged.add(function (_, options) {
+            if (options.visible) {
+                _this.onScrollCallback = function () {
+                    options.popup.toggleVisibility();
+                };
+            }
+            else {
+                _this.onScrollCallback = undefined;
+            }
+        });
     };
     TestSurveyTabViewModel.prototype.setJSON = function (json, currTheme) {
         this.json = json;
@@ -9704,6 +9719,11 @@ var TestSurveyTabViewModel = /** @class */ (function (_super) {
         this.nextPageAction.css = isNextEnabled ? "sv-action-bar-item--secondary" : "";
         this.nextPageAction.enabled = isNextEnabled;
     };
+    TestSurveyTabViewModel.prototype.onScroll = function () {
+        if (this.onScrollCallback)
+            this.onScrollCallback();
+        return true;
+    };
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
         Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["property"])({
             defaultValue: false,
@@ -9835,7 +9855,7 @@ survey_core__WEBPACK_IMPORTED_MODULE_1__["ComponentCollection"].Instance.add({
     },
 });
 function createBoxShadow(value) {
-    return value.map((function (val) { return "" + (val.isInset == true ? "inset " : "") + val.x + "px " + val.y + "px " + val.blur + "px " + val.spread + "px " + val.color; })).join(", ");
+    return value.map((function (val) { var _a, _b, _c, _d, _e; return "" + (val.isInset == true ? "inset " : "") + ((_a = val.x) !== null && _a !== void 0 ? _a : 0) + "px " + ((_b = val.y) !== null && _b !== void 0 ? _b : 0) + "px " + ((_c = val.blur) !== null && _c !== void 0 ? _c : 0) + "px " + ((_d = val.spread) !== null && _d !== void 0 ? _d : 0) + "px " + ((_e = val.color) !== null && _e !== void 0 ? _e : "#000000"); })).join(", ");
 }
 function parseBoxShadow(value) {
     return value.split(/,(?![^(]*\))/).map(function (value) {
@@ -9898,12 +9918,40 @@ survey_core__WEBPACK_IMPORTED_MODULE_0__["ComponentCollection"].Instance.add({
             titleLocation: "left"
         }
     ],
+    onInit: function () {
+        survey_core__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addProperty("colorsettings", {
+            name: "choices:itemvalue[]"
+        });
+    },
+    onLoaded: function (question) {
+        syncPropertiesFromCompositeToColor(question, "titleLocation", question.titleLocation);
+        syncPropertiesFromCompositeToColor(question, "choices", question.choices);
+    },
+    onPropertyChanged: function (question, propertyName, newValue) {
+        syncPropertiesFromCompositeToColor(question, propertyName, newValue);
+    },
     onCreated: function (question) {
         question.valueFromDataCallback = function (newValue) { return typeof newValue == "string" ? Object(_utils_utils__WEBPACK_IMPORTED_MODULE_2__["parseColor"])(newValue) : newValue; };
         question.valueToDataCallback = function (newValue) { return !!newValue ? (typeof newValue == "string" ? newValue : createColor(newValue)) : ""; };
         question.contentPanel.questions.forEach(function (q) { return q.allowRootStyle = false; });
     }
 });
+function syncPropertiesFromCompositeToColor(question, propertyName, newValue) {
+    var colorQuestion = question.contentPanel.questions[0];
+    if (propertyName == "titleLocation") {
+        if (newValue == "left") {
+            question.titleLocation = "hidden";
+            colorQuestion.title = question.title;
+            colorQuestion.titleLocation = newValue;
+        }
+        else {
+            colorQuestion.titleLocation = "hidden";
+        }
+    }
+    if (propertyName == "choices") {
+        colorQuestion.choices = newValue;
+    }
+}
 function createColor(value) {
     return Object(_utils_utils__WEBPACK_IMPORTED_MODULE_2__["ingectAlpha"])(value.color, value.opacity / 100);
 }
@@ -9987,6 +10035,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 var DefaultFonts = [
+    "Open Sans",
     "Arial, sans-serif",
     "Brush Script MT, cursive",
     "Courier New, monospace",
@@ -10248,7 +10297,7 @@ var TabThemePlugin = /** @class */ (function () {
                 return (_this.creator.activeTab === "theme");
             }),
             action: function () {
-                _this.model.applySelectedTheme();
+                _this.model.resetTheme();
             }
         });
         items.push(this.resetTheme);
@@ -10381,6 +10430,7 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
         _this.pages = new survey_core__WEBPACK_IMPORTED_MODULE_2__["ActionContainer"]();
         _this.themeChanges = {};
         _this.colorCalculator = new _utils_utils__WEBPACK_IMPORTED_MODULE_6__["ColorCalculator"]();
+        _this.blockChanges = false;
         _this.simulator = new _simulator__WEBPACK_IMPORTED_MODULE_1__["SurveySimulatorModel"]();
         _this.loadTheme(_this.surveyProvider.theme);
         _this.themeEditorSurveyValue = _this.createThemeEditorSurvey();
@@ -10457,28 +10507,27 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    ThemeSurveyTabViewModel.prototype.applySelectedTheme = function (saveChanges) {
-        if (saveChanges === void 0) { saveChanges = false; }
+    ThemeSurveyTabViewModel.prototype.applySelectedTheme = function () {
         var newTheme = {};
         Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["assign"])(newTheme, Themes[this.getFullThemeName("default")], Themes[this.getFullThemeName()]);
         if (this.survey["isCompact"]) {
             Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["assign"])(newTheme, Themes[this.getFullThemeName() + "-lw"]);
         }
-        if (saveChanges) {
-            Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["assign"])(newTheme, this.themeChanges);
-        }
-        this.themeEditorSurvey.mergeData(newTheme);
-        this.surveyProvider.theme.cssVariables = newTheme;
+        Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["assign"])(newTheme, this.themeChanges);
+        this.currentTheme.cssVariables = newTheme;
+        this.loadThemeIntoPropertyGrid(this.themeEditorSurvey);
         this.setThemeToSurvey();
     };
     ThemeSurveyTabViewModel.prototype.loadTheme = function (theme) {
         this.themeName = theme["themeName"];
         this.themePalette = theme["themePalette"];
         this.themeMode = theme.isCompact ? "lightweight" : undefined;
+        this.backgroundImage = theme.backgroundImage;
+        this.backgroundImageFit = theme.backgroundImageFit;
         var fullThemeName = this.getFullThemeName();
         if (!Themes[fullThemeName]) {
             Themes[fullThemeName] = theme;
-            var themeSelector = this.themeEditorSurveyValue.getQuestionByName("themeName");
+            var themeSelector = this.themeEditorSurvey.getQuestionByName("themeName");
             themeSelector.choices = themeSelector.choices.concat(new survey_core__WEBPACK_IMPORTED_MODULE_2__["ItemValue"](theme["themeName"]));
         }
         var themeVariables = {};
@@ -10545,13 +10594,17 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
         var fileReader = new FileReader();
         fileReader.onload = function (e) {
             var theme = JSON.parse(fileReader.result);
-            _this.surveyProvider.theme = theme;
-            _this.loadTheme(theme);
-            _this.loadThemeIntoPropertyGrid(_this.themeEditorSurvey);
-            _this.initializeColorCalculator();
+            _this.setThemeFromFile(theme);
         };
         fileReader.readAsText(file);
     };
+    ThemeSurveyTabViewModel.prototype.setThemeFromFile = function (theme) {
+        this.surveyProvider.theme = theme;
+        this.loadTheme(theme);
+        this.loadThemeIntoPropertyGrid(this.themeEditorSurvey);
+        this.initializeColorCalculator();
+        this.setThemeToSurvey();
+    };
     ThemeSurveyTabViewModel.prototype.setJSON = function (json, currTheme) {
         this.json = json;
         if (json != null) {
@@ -10605,6 +10658,10 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
         }
         this.pageListItems = pages;
     };
+    ThemeSurveyTabViewModel.prototype.resetTheme = function () {
+        this.themeChanges = {};
+        this.applySelectedTheme();
+    };
     ThemeSurveyTabViewModel.prototype.show = function () {
         this.showInvisibleElements = false;
         this.activePage = this.survey.activePage;
@@ -10733,6 +10790,11 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
         this.nextPageAction.enabled = isNextEnabled;
     };
     ThemeSurveyTabViewModel.prototype.initializeColorCalculator = function () {
+        if (!this.currentTheme.cssVariables["--sjs-primary-backcolor"] ||
+            !this.currentTheme.cssVariables["--sjs-primary-backcolor-light"] ||
+            !this.currentTheme.cssVariables["--sjs-primary-backcolor-dark"]) {
+            return;
+        }
         this.colorCalculator.initialize(this.currentTheme.cssVariables["--sjs-primary-backcolor"], this.currentTheme.cssVariables["--sjs-primary-backcolor-light"], this.currentTheme.cssVariables["--sjs-primary-backcolor-dark"]);
     };
     ThemeSurveyTabViewModel.prototype.createThemeEditorSurvey = function () {
@@ -10748,29 +10810,31 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
         this.initializeColorCalculator();
         themeEditorSurvey.onValueChanged.add(function (sender, options) {
             var _a, _b;
+            if (_this.blockChanges)
+                return;
             _this.themeChanges[options.name] = options.value;
             if (["themeName", "themeMode", "themePalette"].indexOf(options.name) !== -1) {
                 _this[options.name] = options.value;
                 _this.initializeColorCalculator();
                 if (options.name === "themeMode") {
                     _this.survey["isCompact"] = options.value === "lightweight";
-                    _this.surveyProvider.theme.isCompact = options.value === "lightweight";
+                    _this.currentTheme.isCompact = options.value === "lightweight";
+                    _this.applySelectedTheme();
                 }
                 else {
-                    _this.surveyProvider.theme["themeName"] = _this.themeName;
-                    _this.surveyProvider.theme["themePalette"] = _this.themePalette;
+                    _this.currentTheme["themeName"] = _this.themeName;
+                    _this.currentTheme["themePalette"] = _this.themePalette;
+                    _this.resetTheme();
                 }
-                _this.applySelectedTheme(options.name === "themeMode");
                 return;
             }
             if (["backgroundImage", "backgroundImageFit"].indexOf(options.name) !== -1) {
-                _this.survey[options.name] = options.value;
-                _this.surveyProvider.theme[options.name] = options.value;
+                _this[options.name] = options.value;
                 return;
             }
             if (options.name === "backgroundOpacity") {
                 _this.survey.backgroundOpacity = options.value / 100;
-                _this.surveyProvider.theme.backgroundOpacity = options.value / 100;
+                _this.currentTheme.backgroundOpacity = options.value / 100;
                 return;
             }
             if (options.name === "--sjs-primary-backcolor") {
@@ -10806,8 +10870,8 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
                 });
             }
             var newTheme = {};
-            Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["assign"])(newTheme, _this.surveyProvider.theme.cssVariables, _this.themeChanges);
-            _this.surveyProvider.theme.cssVariables = newTheme;
+            Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["assign"])(newTheme, _this.currentTheme.cssVariables, _this.themeChanges);
+            _this.currentTheme.cssVariables = newTheme;
             _this.setThemeToSurvey();
         });
         themeEditorSurvey.getAllQuestions().forEach(function (q) { return q.allowRootStyle = false; });
@@ -10817,15 +10881,35 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
         return themeEditorSurvey;
     };
     ThemeSurveyTabViewModel.prototype.loadThemeIntoPropertyGrid = function (themeEditorSurvey) {
+        this.blockChanges = true;
+        try {
+            themeEditorSurvey.clear(true);
+            themeEditorSurvey.mergeData(this.currentTheme.cssVariables);
+            themeEditorSurvey.setValue("themeName", this.themeName);
+            themeEditorSurvey.setValue("themeMode", this.themeMode);
+            themeEditorSurvey.setValue("themePalette", this.themePalette);
+            this.updatePGEditors(themeEditorSurvey);
+        }
+        finally {
+            this.blockChanges = false;
+        }
+    };
+    ThemeSurveyTabViewModel.prototype.updatePGEditors = function (themeEditorSurvey) {
         var _this = this;
-        themeEditorSurvey.mergeData(this.surveyProvider.theme.cssVariables);
-        themeEditorSurvey.setValue("themeName", this.themeName);
-        themeEditorSurvey.setValue("themeMode", this.themeMode);
-        themeEditorSurvey.setValue("themePalette", this.themePalette);
-        themeEditorSurvey.getQuestionByName("questionPanel").contentPanel.getQuestionByName("backcolor").value = this.currentTheme.cssVariables["--sjs-general-backcolor"];
-        themeEditorSurvey.getQuestionByName("editorPanel").contentPanel.getQuestionByName("backcolor").value = this.currentTheme.cssVariables["--sjs-general-backcolor-dim-light"];
+        var newCssVariables = {};
+        Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["assign"])(newCssVariables, this.currentTheme.cssVariables);
+        themeEditorSurvey.getQuestionByName("backgroundImage").value = this.backgroundImage;
+        themeEditorSurvey.getQuestionByName("backgroundImageFit").value = this.backgroundImageFit;
+        themeEditorSurvey.getQuestionByName("questionPanel").contentPanel.getQuestionByName("backcolor").value = newCssVariables["--sjs-general-backcolor"];
+        themeEditorSurvey.getQuestionByName("questionPanel").contentPanel.getQuestionByName("hovercolor").value = newCssVariables["--sjs-general-backcolor-dark"];
+        themeEditorSurvey.getQuestionByName("editorPanel").contentPanel.getQuestionByName("backcolor").value = newCssVariables["--sjs-general-backcolor-dim-light"];
+        themeEditorSurvey.getQuestionByName("editorPanel").contentPanel.getQuestionByName("hovercolor").value = newCssVariables["--sjs-general-backcolor-dim-dark"];
+        themeEditorSurvey.getQuestionByName("pageTitle").contentPanel.getQuestionByName("color").value = newCssVariables["--sjs-general-dim-forecolor"];
+        themeEditorSurvey.getQuestionByName("pageDescription").contentPanel.getQuestionByName("color").value = newCssVariables["--sjs-general-dim-forecolor-light"];
+        themeEditorSurvey.getQuestionByName("questionTitle").contentPanel.getQuestionByName("color").value = newCssVariables["--sjs-general-forecolor"];
+        themeEditorSurvey.getQuestionByName("questionDescription").contentPanel.getQuestionByName("color").value = newCssVariables["--sjs-general-forecolor-light"];
         themeEditorSurvey.getAllQuestions().forEach(function (question) {
-            if (["color"].indexOf(question.getType()) !== -1) {
+            if (["color", "colorsettings"].indexOf(question.getType()) !== -1) {
                 question.choices = Object.keys(PredefinedColors[_this.themePalette]).map(function (colorName) { return new survey_core__WEBPACK_IMPORTED_MODULE_2__["ItemValue"](PredefinedColors[_this.themePalette][colorName], Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("theme.colors." + colorName)); });
             }
         });
@@ -10893,14 +10977,12 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
                                     name: "--sjs-primary-backcolor",
                                     title: Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("theme.primaryColor"),
                                     descriptionLocation: "hidden",
-                                    defaultValue: "#19b394"
                                 },
                                 {
                                     type: "color",
                                     name: "--sjs-general-backcolor-dim",
                                     title: Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("theme.backgroundDimColor"),
                                     descriptionLocation: "hidden",
-                                    defaultValue: "#f3f3f3"
                                 },
                                 {
                                     type: "panel",
@@ -11041,7 +11123,6 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
                                     name: "--sjs-general-backcolor-dim",
                                     title: Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("theme.backgroundDimColor"),
                                     descriptionLocation: "hidden",
-                                    defaultValue: "#f3f3f3"
                                 }, {
                                     type: "panel",
                                     title: Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("theme.accentBackground"),
@@ -11052,7 +11133,6 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
                                             title: Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("theme.primaryDefaultColor"),
                                             titleLocation: "left",
                                             descriptionLocation: "hidden",
-                                            defaultValue: "#19B394"
                                         },
                                         {
                                             type: "color",
@@ -11060,7 +11140,6 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
                                             title: Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("theme.primaryDarkColor"),
                                             titleLocation: "left",
                                             descriptionLocation: "hidden",
-                                            defaultValue: "#14A48B"
                                         },
                                         {
                                             type: "color",
@@ -11068,7 +11147,6 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
                                             title: Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("theme.primaryLightColor"),
                                             titleLocation: "left",
                                             descriptionLocation: "hidden",
-                                            defaultValue: "#E8F7F4"
                                         }
                                     ]
                                 }, {
@@ -11081,7 +11159,6 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
                                             title: Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("theme.primaryForecolor"),
                                             titleLocation: "left",
                                             descriptionLocation: "hidden",
-                                            defaultValue: "#ffffff"
                                         },
                                         {
                                             type: "color",
@@ -11089,7 +11166,6 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
                                             title: Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("theme.primaryForecolorLight"),
                                             titleLocation: "left",
                                             descriptionLocation: "hidden",
-                                            defaultValue: "#ffffff"
                                         }
                                     ]
                                 }
@@ -11103,7 +11179,7 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
                                     title: Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("theme.surveyTitle"),
                                     descriptionLocation: "hidden",
                                     defaultValue: {
-                                        color: "#161616",
+                                        color: "rgba(22, 22, 22, 1)",
                                         weight: "700",
                                         size: 32
                                     }
@@ -11113,7 +11189,7 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
                                     title: Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("theme.pageTitle"),
                                     descriptionLocation: "hidden",
                                     defaultValue: {
-                                        color: "#161616",
+                                        color: "rgba(22, 22, 22, 1)",
                                         weight: "700",
                                         size: 24
                                     }
@@ -11123,7 +11199,7 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
                                     title: Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("theme.pageDescription"),
                                     descriptionLocation: "hidden",
                                     defaultValue: {
-                                        color: "#161616",
+                                        color: "rgba(22, 22, 22, 1)",
                                         size: 16
                                     }
                                 }
@@ -11137,8 +11213,8 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
                                     title: Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("theme.questionPanel"),
                                     descriptionLocation: "hidden",
                                     defaultValue: {
-                                        backcolor: "#ffffff",
-                                        hovercolor: "#f8f8f8",
+                                        backcolor: "rgba(255, 255, 255, 1)",
+                                        hovercolor: "rgba(248, 248, 248, 1)",
                                         corner: 4
                                     }
                                 },
@@ -11167,7 +11243,7 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
                                     title: Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("theme.questionTitle"),
                                     descriptionLocation: "hidden",
                                     defaultValue: {
-                                        color: "#161616",
+                                        color: "rgba(22, 22, 22, 1)",
                                         weight: "600",
                                         size: 16,
                                     }
@@ -11177,7 +11253,7 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
                                     title: Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("theme.questionDescription"),
                                     descriptionLocation: "hidden",
                                     defaultValue: {
-                                        color: "#161616",
+                                        color: "rgba(22, 22, 22, 1)",
                                         size: 16
                                     }
                                 }
@@ -11191,8 +11267,8 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
                                     title: Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("theme.editorPanel"),
                                     descriptionLocation: "hidden",
                                     defaultValue: {
-                                        backcolor: "#ffffff",
-                                        hovercolor: "#f8f8f8",
+                                        backcolor: "rgba(255, 255, 255, 1)",
+                                        hovercolor: "rgba(248, 248, 248, 1)",
                                         corner: 4
                                     }
                                 },
@@ -11220,7 +11296,7 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
                                     title: Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("theme.editorFont"),
                                     descriptionLocation: "hidden",
                                     defaultValue: {
-                                        color: "#161616",
+                                        color: "rgba(22, 22, 22, 1)",
                                         size: 16
                                     }
                                 }
@@ -11237,7 +11313,6 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
                                             title: Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("theme.borderDefault"),
                                             titleLocation: "left",
                                             descriptionLocation: "hidden",
-                                            defaultValue: "#d6d6d6"
                                         },
                                         {
                                             type: "color",
@@ -11245,7 +11320,6 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
                                             title: Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("theme.borderLight"),
                                             titleLocation: "left",
                                             descriptionLocation: "hidden",
-                                            defaultValue: "#e8e8e8"
                                         }
                                     ]
                                 }]
@@ -11301,6 +11375,22 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
             }
         })
     ], ThemeSurveyTabViewModel.prototype, "activePage", void 0);
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
+        Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["property"])({ onSet: function (newValue, _target) {
+                if (!!_target.survey) {
+                    _target.survey.backgroundImage = newValue;
+                }
+                _target.currentTheme["backgroundImage"] = newValue;
+            } })
+    ], ThemeSurveyTabViewModel.prototype, "backgroundImage", void 0);
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
+        Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: "cover", onSet: function (newValue, _target) {
+                if (!!_target.survey) {
+                    _target.survey.backgroundImageFit = newValue;
+                }
+                _target.currentTheme["backgroundImageFit"] = newValue;
+            } })
+    ], ThemeSurveyTabViewModel.prototype, "backgroundImageFit", void 0);
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
         Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: "default" })
     ], ThemeSurveyTabViewModel.prototype, "themeName", void 0);
@@ -17187,6 +17277,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+var DEFAULT_COLOR = "#000000";
 var QuestionColorModel = /** @class */ (function (_super) {
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(QuestionColorModel, _super);
     function QuestionColorModel(name) {
@@ -17198,8 +17289,10 @@ var QuestionColorModel = /** @class */ (function (_super) {
         return _this;
     }
     QuestionColorModel.prototype.getCorrectedValue = function (newValue) {
+        if (newValue == undefined || newValue == null)
+            return newValue;
         newValue = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_2__["parseColor"])(newValue !== null && newValue !== void 0 ? newValue : "").color;
-        newValue = (newValue.match(/#(\d|\w){1,6}/) || ["#000000"])[0];
+        newValue = (newValue.match(/#(\d|\w){1,6}/) || [DEFAULT_COLOR])[0];
         if (newValue.length === 4) {
             for (var i = 1; i < 4; i++) {
                 newValue += newValue[i];
@@ -17219,7 +17312,7 @@ var QuestionColorModel = /** @class */ (function (_super) {
         this.updateRenderedValue();
     };
     QuestionColorModel.prototype.onBeforeInput = function (event) {
-        if (!!event.data && !/[\d\w#]/.test(event.data)) {
+        if (!!event.data && !/[\d\w(),#]/.test(event.data)) {
             event.preventDefault();
         }
     };
@@ -17233,12 +17326,20 @@ var QuestionColorModel = /** @class */ (function (_super) {
         this._renderedValue = undefined;
     };
     QuestionColorModel.prototype.updateRenderedValue = function () {
-        this._renderedValue = this.value;
+        if (this.value) {
+            var color = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_2__["parseColor"])(this.value || "");
+            this._renderedValue = color.color;
+        }
+        else {
+            this._renderedValue = DEFAULT_COLOR;
+        }
     };
     Object.defineProperty(QuestionColorModel.prototype, "renderedValue", {
         get: function () {
-            var _a, _b;
-            return ((_b = (_a = this._renderedValue) !== null && _a !== void 0 ? _a : this.value) !== null && _b !== void 0 ? _b : "#000000").toUpperCase();
+            if (!this._renderedValue) {
+                this.updateRenderedValue();
+            }
+            return this._renderedValue.toUpperCase();
         },
         enumerable: false,
         configurable: true
@@ -17286,9 +17387,7 @@ var QuestionColorModel = /** @class */ (function (_super) {
     });
     QuestionColorModel.prototype.createDropdownAction = function () {
         var _this = this;
-        var action = Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["createDropdownActionModelAdvanced"])({
-            iconName: this.cssClasses.colorDropdownIcon
-        }, {
+        var action = Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["createDropdownActionModelAdvanced"])({}, {
             onSelectionChanged: function (item) {
                 _this.value = item.value;
             },
@@ -17300,15 +17399,23 @@ var QuestionColorModel = /** @class */ (function (_super) {
         });
         var popupModel = action.popupModel;
         var listModel = popupModel.contentComponentData.model;
-        listModel.cssClasses = {
-            itemBody: listModel.cssClasses.itemBody + " " + this.cssClasses.colorItem
-        };
         popupModel.setWidthByTarget = true;
         popupModel.positionMode = "fixed";
         listModel.isItemSelected = function (itemValue) { return itemValue.value == _this.value; };
-        action.cssClasses = { item: this.cssClasses.colorDropdown };
         return action;
     };
+    QuestionColorModel.prototype.calcCssClasses = function (css) {
+        var classes = _super.prototype.calcCssClasses.call(this, css);
+        var dropdownAction = this.dropdownAction;
+        dropdownAction.cssClasses = { item: classes.colorDropdown };
+        dropdownAction.iconName = classes.colorDropdownIcon;
+        var listModel = dropdownAction.popupModel.contentComponentData.model;
+        listModel.cssClasses = {};
+        listModel.cssClasses = {
+            itemBody: listModel.cssClasses.itemBody + " " + classes.colorItem
+        };
+        return classes;
+    };
     QuestionColorModel.prototype.updateChoices = function () {
         this.dropdownAction.popupModel.contentComponentData.model.setItems(this.choices);
     };
@@ -17323,7 +17430,7 @@ var QuestionColorModel = /** @class */ (function (_super) {
         Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], QuestionColorModel.prototype, "unit", void 0);
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
-        Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["property"])({})
+        Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], QuestionColorModel.prototype, "_renderedValue", void 0);
     return QuestionColorModel;
 }(survey_core__WEBPACK_IMPORTED_MODULE_1__["QuestionTextModel"]));
@@ -17526,6 +17633,8 @@ var QuestionSpinEditorModel = /** @class */ (function (_super) {
         configurable: true
     });
     QuestionSpinEditorModel.prototype.correctValue = function (newValue) {
+        if (newValue == undefined || newValue == null)
+            return newValue;
         var renderedMax = Number(this.renderedMax);
         var renderedMin = Number(this.renderedMin);
         newValue = typeof newValue === "string" ? parseFloat(newValue) : newValue;
@@ -18559,7 +18668,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_70__ = __webpack_require__(/*! survey-core */ "survey-core");
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_70___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_70__);
 var Version;
-Version = "" + "1.9.94";
+Version = "" + "1.9.96";
 //should be loaded before other styles for easier override 
 __webpack_require__(/*! ../utils/context-button.scss */ "./src/utils/context-button.scss");
 
@@ -18648,7 +18757,7 @@ __webpack_require__(/*! ../utils/design.scss */ "./src/utils/design.scss");
 __webpack_require__(/*! ../utils/layout.scss */ "./src/utils/layout.scss");
 
 survey_core__WEBPACK_IMPORTED_MODULE_70__["settings"].supportCreatorV2 = true;
-Object(survey_core__WEBPACK_IMPORTED_MODULE_70__["checkLibraryVersion"])("" + "1.9.94", "survey-creator-core");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_70__["checkLibraryVersion"])("" + "1.9.96", "survey-creator-core");
 
 
 /***/ }),
@@ -22186,7 +22295,7 @@ var UndoRedoManager = /** @class */ (function () {
         transaction.addAction(action);
     };
     UndoRedoManager.prototype.isCorrectProperty = function (sender, propertyName) {
-        var prop = survey_core__WEBPACK_IMPORTED_MODULE_0__["Serializer"].findProperty(sender.getType(), propertyName);
+        var prop = survey_core__WEBPACK_IMPORTED_MODULE_0__["Serializer"].getOriginalProperty(sender, propertyName);
         return !!prop && prop.isSerializable;
     };
     UndoRedoManager.prototype.tryMergeTransaction = function (sender, propertyName, newValue) {
@@ -22374,7 +22483,7 @@ var UndoRedoAction = /** @class */ (function () {
     UndoRedoAction.prototype.tryMerge = function (sender, propertyName, newValue) {
         if (sender !== this._sender || propertyName !== this._propertyName || newValue == this._oldValue)
             return false;
-        var prop = survey_core__WEBPACK_IMPORTED_MODULE_0__["Serializer"].findProperty(sender.getType(), propertyName);
+        var prop = survey_core__WEBPACK_IMPORTED_MODULE_0__["Serializer"].getOriginalProperty(sender, propertyName);
         if (!prop || (prop.type !== "string" && prop.type !== "text"))
             return false;
         if (new Date().getTime() - this.tickCount > UndoRedoAction.maximumMergeTime)