survey-creator-core 1.9.108 → 1.9.110

package/survey-creator-core.js

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v1.9.108
+ * SurveyJS Creator v1.9.110
  * (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -130,7 +130,7 @@ License: MIT
 /***/ (function(module, exports, __webpack_require__) {
 
 /*!
- * surveyjs - Survey JavaScript library v1.9.108
+ * surveyjs - Survey JavaScript library v1.9.110
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -9142,6 +9142,9 @@ var TabDesignerPlugin = /** @class */ (function () {
             }),
             action: function () {
                 _this.selectSurvey();
+                if (!_this.creator.isMobileView) {
+                    _this.creator.propertyGrid.getAllQuestions()[0].focus();
+                }
             },
             active: this.isSettingsActive,
             pressed: this.isSettingsActive,
@@ -12001,6 +12004,7 @@ var logicCss = {
     },
     list: {
         root: "sv-list__container sl-list",
+        itemBody: "sv-list__item-body sl-list__item-body"
     },
     embeddedsurvey: {
         mainRoot: "sl-embedded-survey"
@@ -13187,6 +13191,8 @@ __webpack_require__(/*! ./logic.scss */ "./src/components/tabs/logic.scss");
 function initLogicOperator(question) {
     question.popupModel.isFocusedContent = true;
     question.popupModel.setWidthByTarget = false;
+    question.popupModel.positionMode = "flex";
+    question.popupModel.showPointer = true;
     question.dropdownListModel["listModel"].searchEnabled = question.searchEnabled;
 }
 var LogicEvent = /** @class */ (function (_super) {
@@ -14044,6 +14050,12 @@ var TestSurveyTabViewModel = /** @class */ (function (_super) {
             newSurvey.setCss(theme, false);
         }
         newSurvey.fitToContainer = true;
+        newSurvey.addLayoutElement({
+            id: "complete-customization",
+            container: "completePage",
+            component: "svc-complete-page",
+            data: this
+        });
         this.simulator.survey = newSurvey;
         if (this.onSurveyCreatedCallback)
             this.onSurveyCreatedCallback(this.survey);
@@ -14364,7 +14376,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _creator_settings__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../creator-settings */ "./src/creator-settings.ts");
 /* harmony import */ var _theme_custom_questions_font_settings__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./theme-custom-questions/font-settings */ "./src/components/tabs/theme-custom-questions/font-settings.ts");
 /* harmony import */ var _theme_custom_questions_element_settings__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./theme-custom-questions/element-settings */ "./src/components/tabs/theme-custom-questions/element-settings.ts");
-/* harmony import */ var _themes__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./themes */ "./src/components/tabs/themes.ts");
+/* harmony import */ var _plugins_undo_redo_undo_redo_manager__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../plugins/undo-redo/undo-redo-manager */ "./src/plugins/undo-redo/undo-redo-manager.ts");
+/* harmony import */ var _themes__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./themes */ "./src/components/tabs/themes.ts");
+
 
 
 
@@ -14388,7 +14402,8 @@ var ThemeBuilder = /** @class */ (function (_super) {
         _this.themeCssVariablesChanges = {};
         _this.colorCalculator = new _utils_utils__WEBPACK_IMPORTED_MODULE_6__["ColorCalculator"]();
         _this.blockChanges = false;
-        _this._availableThemes = _themes__WEBPACK_IMPORTED_MODULE_10__["PredefinedThemes"];
+        _this._availableThemes = _themes__WEBPACK_IMPORTED_MODULE_11__["PredefinedThemes"];
+        _this.prevQuestionValues = {};
         _this.onThemeSelected = new survey_core__WEBPACK_IMPORTED_MODULE_2__["EventBase"]();
         _this.onThemeModified = new survey_core__WEBPACK_IMPORTED_MODULE_2__["EventBase"]();
         _this.onCanModifyTheme = new survey_core__WEBPACK_IMPORTED_MODULE_2__["EventBase"]();
@@ -14396,6 +14411,7 @@ var ThemeBuilder = /** @class */ (function (_super) {
         _this.simulator = new _simulator__WEBPACK_IMPORTED_MODULE_1__["SurveySimulatorModel"]();
         _this.themeEditorSurveyValue = _this.createThemeEditorSurvey();
         _this.loadTheme(_this.surveyProvider.theme);
+        _this.undoRedoManager = new _plugins_undo_redo_undo_redo_manager__WEBPACK_IMPORTED_MODULE_10__["UndoRedoManager"]();
         return _this;
     }
     Object.defineProperty(ThemeBuilder.prototype, "themeCssCustomizations", {
@@ -14461,6 +14477,13 @@ var ThemeBuilder = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(ThemeBuilder.prototype, "currentThemeCssVariables", {
+        get: function () {
+            return this.currentTheme.cssVariables || {};
+        },
+        enumerable: false,
+        configurable: true
+    });
     ThemeBuilder.prototype.loadTheme = function (theme) {
         this.blockThemeChangedNotifications += 1;
         try {
@@ -14473,7 +14496,7 @@ var ThemeBuilder = /** @class */ (function (_super) {
             this.backgroundImageFit = theme.backgroundImageFit || this.backgroundImageFit;
             this.backgroundImageAttachment = theme.backgroundImageAttachment || this.backgroundImageAttachment;
             var effectiveThemeCssVariables = {};
-            Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["assign"])(effectiveThemeCssVariables, _themes__WEBPACK_IMPORTED_MODULE_10__["Themes"]["default-light"].cssVariables || {}, this.findSuitableTheme(this.themeName).cssVariables || {});
+            Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["assign"])(effectiveThemeCssVariables, _themes__WEBPACK_IMPORTED_MODULE_11__["Themes"]["default-light"].cssVariables || {}, this.findSuitableTheme(this.themeName).cssVariables || {});
             Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["assign"])(effectiveThemeCssVariables, theme.cssVariables || {}, this.themeCssVariablesChanges);
             var effectiveTheme = {};
             Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["assign"])(effectiveTheme, theme, { cssVariables: effectiveThemeCssVariables });
@@ -14507,6 +14530,12 @@ var ThemeBuilder = /** @class */ (function (_super) {
         var newSurvey = this.surveyProvider.createSurvey(json || {}, "theme", this);
         newSurvey.setCss(theme, false);
         newSurvey.fitToContainer = true;
+        newSurvey.addLayoutElement({
+            id: "complete-customization",
+            container: "completePage",
+            component: "svc-complete-page",
+            data: this
+        });
         this.simulator.survey = newSurvey;
         this.updateSimulatorTheme();
         if (this.onSurveyCreatedCallback)
@@ -14556,6 +14585,7 @@ var ThemeBuilder = /** @class */ (function (_super) {
         try {
             this.setJSON(json, this.startThemeClasses);
             this.updatePageList();
+            this.updatePropertyGridEditorsAvailability();
             if (options.showPagesInTestSurveyTab !== undefined) {
                 this.showPagesInTestSurveyTab = options.showPagesInTestSurveyTab;
             }
@@ -14647,6 +14677,90 @@ var ThemeBuilder = /** @class */ (function (_super) {
         }
         this.colorCalculator.initialize(this.currentTheme.cssVariables["--sjs-primary-backcolor"], this.currentTheme.cssVariables["--sjs-primary-backcolor-light"], this.currentTheme.cssVariables["--sjs-primary-backcolor-dark"]);
     };
+    ThemeBuilder.prototype.generalPropertiesChanged = function (options) {
+        var _a;
+        if (["themeName", "themeMode", "themePalette"].indexOf(options.name) !== -1) {
+            if (options.name === "themeName") {
+                this.loadTheme(this.findSuitableTheme(options.value) || (_a = {}, _a[options.name] = options.value, _a));
+            }
+            if (options.name === "themeMode") {
+                this.loadTheme({ isPanelless: options.value === "lightweight" });
+            }
+            if (options.name === "themePalette") {
+                this.loadTheme({ colorPalette: options.value });
+            }
+            this.updateSimulatorTheme();
+            this.raiseThemeChanged();
+            this.onThemeSelected.fire(this, { theme: this.currentTheme });
+            this.surveyProvider.isThemePristine = Object.keys(this.themeCssVariablesChanges).length === 0;
+            return true;
+        }
+        if (["backgroundImage", "backgroundImageFit", "backgroundImageAttachment", "backgroundOpacity"].indexOf(options.name) !== -1) {
+            this[options.name] = options.value;
+            this.raiseThemeChanged();
+            this.raiseThemeModified(options);
+            return true;
+        }
+        return false;
+    };
+    ThemeBuilder.prototype.cssVariablePropertiesChanged = function (options) {
+        var _a, _b;
+        if (options.name.indexOf("--") === 0) {
+            this.setThemeCssVariablesChanges(options.name, options.value, options.question);
+        }
+        if (options.name == "commonScale") {
+            this.survey.triggerResponsiveness(true);
+            this.setThemeCssVariablesChanges("--sjs-base-unit", (options.value * 8 / 100) + "px", options.question);
+        }
+        if (options.name == "commonFontSize") {
+            this.setThemeCssVariablesChanges("--sjs-font-size", (options.value * 16 / 100) + "px", options.question);
+        }
+        if (options.name == "cornerRadius") {
+            this.setThemeCssVariablesChanges("--sjs-corner-radius", options.value + "px", options.question);
+        }
+        if (options.name === "questionBackgroundTransparency" || options.name === "editorPanel") {
+            var baseColor = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["parseColor"])(this.themeEditorSurvey.getValue("--sjs-general-backcolor-dim-light")).color;
+            var questionBackgroundTransparencyValue = this.themeEditorSurvey.getValue("questionBackgroundTransparency");
+            this.setThemeCssVariablesChanges("--sjs-editor-background", Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["ingectAlpha"])(baseColor, questionBackgroundTransparencyValue / 100), options.question);
+        }
+        if (options.name === "panelBackgroundTransparency" || options.name === "questionPanel") {
+            var baseColor = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["parseColor"])(this.themeEditorSurvey.getValue("--sjs-general-backcolor")).color;
+            var panelBackgroundTransparencyValue = this.themeEditorSurvey.getValue("panelBackgroundTransparency");
+            this.setThemeCssVariablesChanges("--sjs-question-background", Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["ingectAlpha"])(baseColor, panelBackgroundTransparencyValue / 100), options.question);
+        }
+        if (((_a = options.question) === null || _a === void 0 ? void 0 : _a.getType()) === "fontsettings") {
+            Object(_theme_custom_questions_font_settings__WEBPACK_IMPORTED_MODULE_8__["fontsettingsToCssVariable"])(options.question, this.themeCssVariablesChanges);
+            this.raiseThemeChanged();
+            this.raiseThemeModified(options);
+        }
+        if (((_b = options.question) === null || _b === void 0 ? void 0 : _b.getType()) === "elementsettings") {
+            Object(_theme_custom_questions_element_settings__WEBPACK_IMPORTED_MODULE_9__["elementSettingsToCssVariable"])(options.question, this.themeCssVariablesChanges);
+            this.raiseThemeChanged();
+            this.raiseThemeModified(options);
+        }
+    };
+    ThemeBuilder.prototype.updateDependentQuestionValues = function (options) {
+        if (options.name === "generalBackcolorDimColor") {
+            this.themeEditorSurvey.setValue("--sjs-general-backcolor-dim", options.value);
+        }
+        if (options.name === "--sjs-general-backcolor-dim") {
+            this.themeEditorSurvey.getQuestionByName("generalBackcolorDimColor").value = options.value;
+        }
+        if (options.name === "generalPrimaryColor") {
+            this.themeEditorSurvey.setValue("--sjs-primary-backcolor", options.value);
+        }
+        if (options.name === "--sjs-primary-backcolor") {
+            this.colorCalculator.calculateColors(options.value);
+            this.themeEditorSurvey.setValue("--sjs-primary-backcolor-light", this.colorCalculator.colorSettings.newColorLight);
+            this.themeEditorSurvey.setValue("--sjs-primary-backcolor-dark", this.colorCalculator.colorSettings.newColorDark);
+            this.themeEditorSurvey.getQuestionByName("generalPrimaryColor").value = options.value;
+        }
+    };
+    ThemeBuilder.prototype.setThemeCssVariablesChanges = function (variableName, value, question) {
+        this.themeCssVariablesChanges[variableName] = value;
+        this.raiseThemeChanged();
+        this.raiseThemeModified({ name: variableName, value: value, question: question });
+    };
     ThemeBuilder.prototype.createThemeEditorSurvey = function () {
         var _this = this;
         var json = this.getThemeEditorSurveyJSON();
@@ -14657,78 +14771,35 @@ var ThemeBuilder = /** @class */ (function (_super) {
         themeBuilderCss.root += " spg-theme-builder-root";
         themeEditorSurvey.css = themeBuilderCss;
         themeEditorSurvey.enterKeyAction = "loseFocus";
-        themeEditorSurvey.onValueChanged.add(function (sender, options) {
-            var _a;
-            var _b, _c;
+        themeEditorSurvey.onValueChanging.add(function (sender, options) {
             if (_this.blockChanges)
                 return;
-            if (["themeName", "themeMode", "themePalette"].indexOf(options.name) !== -1) {
-                if (options.name === "themeName") {
-                    _this.loadTheme(_this.findSuitableTheme(options.value) || (_a = {}, _a[options.name] = options.value, _a));
-                }
-                if (options.name === "themeMode") {
-                    _this.loadTheme({ isPanelless: options.value === "lightweight" });
-                }
-                if (options.name === "themePalette") {
-                    _this.loadTheme({ colorPalette: options.value });
-                }
-                _this.updateSimulatorTheme();
-                _this.raiseThemeChanged();
-                _this.onThemeSelected.fire(_this, { theme: _this.currentTheme });
-                _this.surveyProvider.isThemePristine = Object.keys(_this.themeCssVariablesChanges).length === 0;
-                return;
-            }
-            if (["backgroundImage", "backgroundImageFit", "backgroundImageAttachment"].indexOf(options.name) !== -1) {
-                _this[options.name] = options.value;
-                _this.raiseThemeChanged();
-                _this.raiseThemeModified(options);
+            _this.prevQuestionValues[options.name] = options.oldValue;
+        });
+        themeEditorSurvey.onValueChanged.add(function (sender, options) {
+            if (_this.blockChanges)
                 return;
+            if (_this.blockThemeChangedNotifications == 0) {
+                _this.undoRedoManager.startTransaction(options.name + " changed");
             }
-            if (options.name === "backgroundOpacity") {
-                _this.currentTheme.backgroundOpacity = options.value / 100;
-                _this.survey.backgroundOpacity = options.value / 100;
-                _this.raiseThemeChanged();
-                _this.raiseThemeModified(options);
+            _this.undoRedoManager.onPropertyValueChanged("value", _this.prevQuestionValues[options.name], options.value, options.question, undefined);
+            if (_this.generalPropertiesChanged(options)) {
+                if (_this.blockThemeChangedNotifications == 0) {
+                    _this.undoRedoManager.stopTransaction();
+                }
                 return;
             }
-            if (options.name.indexOf("--") === 0) {
-                _this.themeCssVariablesChanges[options.name] = options.value;
-                _this.raiseThemeChanged();
-            }
+            _this.cssVariablePropertiesChanged(options);
             _this.blockThemeChangedNotifications += 1;
-            if (options.name == "commonScale") {
-                _this.survey.triggerResponsiveness(true);
-            }
-            if (options.name === "--sjs-primary-backcolor") {
-                _this.colorCalculator.calculateColors(options.value);
-                _this.themeCssVariablesChanges["--sjs-primary-backcolor"] = options.value;
-                _this.themeCssVariablesChanges["--sjs-primary-backcolor-light"] = _this.colorCalculator.colorSettings.newColorLight;
-                _this.themeCssVariablesChanges["--sjs-primary-backcolor-dark"] = _this.colorCalculator.colorSettings.newColorDark;
-                _this.themeEditorSurvey.setValue("--sjs-primary-backcolor-light", _this.colorCalculator.colorSettings.newColorLight);
-                _this.themeEditorSurvey.setValue("--sjs-primary-backcolor-dark", _this.colorCalculator.colorSettings.newColorDark);
-            }
-            if (options.name === "questionBackgroundTransparency" || options.name === "editorPanel") {
-                var baseColor = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["parseColor"])(themeEditorSurvey.getValue("--sjs-general-backcolor-dim-light")).color;
-                var questionBackgroundTransparencyValue = themeEditorSurvey.getValue("questionBackgroundTransparency");
-                _this.themeCssVariablesChanges["--sjs-editor-background"] = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["ingectAlpha"])(baseColor, questionBackgroundTransparencyValue / 100);
-            }
-            if (options.name === "panelBackgroundTransparency" || options.name === "questionPanel") {
-                var baseColor = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["parseColor"])(themeEditorSurvey.getValue("--sjs-general-backcolor")).color;
-                var panelBackgroundTransparencyValue = themeEditorSurvey.getValue("panelBackgroundTransparency");
-                _this.themeCssVariablesChanges["--sjs-question-background"] = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["ingectAlpha"])(baseColor, panelBackgroundTransparencyValue / 100);
-            }
-            if (((_b = options.question) === null || _b === void 0 ? void 0 : _b.getType()) === "fontsettings") {
-                Object(_theme_custom_questions_font_settings__WEBPACK_IMPORTED_MODULE_8__["fontsettingsToCssVariable"])(options.question, _this.themeCssVariablesChanges);
-            }
-            if (((_c = options.question) === null || _c === void 0 ? void 0 : _c.getType()) === "elementsettings") {
-                Object(_theme_custom_questions_element_settings__WEBPACK_IMPORTED_MODULE_9__["elementSettingsToCssVariable"])(options.question, _this.themeCssVariablesChanges);
-            }
+            _this.updateDependentQuestionValues(options);
             var newCssVariables = {};
             Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["assign"])(newCssVariables, _this.currentTheme.cssVariables, _this.themeCssVariablesChanges);
             _this.currentTheme.cssVariables = newCssVariables;
-            _this.blockThemeChangedNotifications -= 1;
             _this.updateSimulatorTheme();
-            _this.raiseThemeModified(options);
+            _this.blockThemeChangedNotifications -= 1;
+            if (!!_this.undoRedoManager && _this.blockThemeChangedNotifications == 0) {
+                _this.undoRedoManager.stopTransaction();
+            }
         });
         themeEditorSurvey.onUploadFiles.add(function (_, options) {
             var callback = function (status, data) { return options.callback(status, [{ content: data, file: options.files[0] }]); };
@@ -14741,12 +14812,12 @@ var ThemeBuilder = /** @class */ (function (_super) {
         return themeEditorSurvey;
     };
     ThemeBuilder.prototype.findSuitableTheme = function (themeName) {
-        var probeThemeFullName = Object(_themes__WEBPACK_IMPORTED_MODULE_10__["getThemeFullName"])({ themeName: themeName, colorPalette: this.themePalette, isPanelless: this.themeMode === "lightweight" });
-        var suitableTheme = _themes__WEBPACK_IMPORTED_MODULE_10__["Themes"][probeThemeFullName];
+        var probeThemeFullName = Object(_themes__WEBPACK_IMPORTED_MODULE_11__["getThemeFullName"])({ themeName: themeName, colorPalette: this.themePalette, isPanelless: this.themeMode === "lightweight" });
+        var suitableTheme = _themes__WEBPACK_IMPORTED_MODULE_11__["Themes"][probeThemeFullName];
         if (!!suitableTheme) {
             return suitableTheme;
         }
-        var appropriateThemeNames = Object.keys(_themes__WEBPACK_IMPORTED_MODULE_10__["Themes"]).filter(function (fullName) { return fullName.indexOf(themeName) === 0; });
+        var appropriateThemeNames = Object.keys(_themes__WEBPACK_IMPORTED_MODULE_11__["Themes"]).filter(function (fullName) { return fullName.indexOf(themeName) === 0; });
         for (var _i = 0, appropriateThemeNames_1 = appropriateThemeNames; _i < appropriateThemeNames_1.length; _i++) {
             var fullThemeName = appropriateThemeNames_1[_i];
             if (fullThemeName.indexOf(themeName + "-" + this.themePalette) === 0) {
@@ -14756,7 +14827,7 @@ var ThemeBuilder = /** @class */ (function (_super) {
                 probeThemeFullName = themeName + "-" + this.themePalette + (this.themeMode === "lightweight" ? "-panelless" : "");
             }
         }
-        return _themes__WEBPACK_IMPORTED_MODULE_10__["Themes"][probeThemeFullName] || _themes__WEBPACK_IMPORTED_MODULE_10__["Themes"][appropriateThemeNames[0]];
+        return _themes__WEBPACK_IMPORTED_MODULE_11__["Themes"][probeThemeFullName] || _themes__WEBPACK_IMPORTED_MODULE_11__["Themes"][appropriateThemeNames[0]];
     };
     ThemeBuilder.prototype.loadThemeIntoPropertyGrid = function () {
         this.blockChanges = true;
@@ -14767,27 +14838,32 @@ var ThemeBuilder = /** @class */ (function (_super) {
             this.themeEditorSurvey.setValue("themeMode", this.themeMode);
             this.themeEditorSurvey.setValue("themePalette", this.themePalette);
             this.updatePropertyGridEditors(this.themeEditorSurvey);
-            this.updatePropertyGridEditorsAvailability(this.themeEditorSurvey);
+            this.updatePropertyGridEditorsAvailability();
         }
         finally {
             this.blockChanges = false;
         }
     };
-    ThemeBuilder.prototype.updatePropertyGridEditorsAvailability = function (themeEditorSurvey) {
-        var isCustomTheme = _themes__WEBPACK_IMPORTED_MODULE_10__["PredefinedThemes"].indexOf(this.themeName) === -1;
-        themeEditorSurvey.getQuestionByName("themeMode").readOnly = isCustomTheme;
-        themeEditorSurvey.getQuestionByName("themePalette").readOnly = isCustomTheme;
+    ThemeBuilder.prototype.updatePropertyGridEditorsAvailability = function () {
+        var isCustomTheme = _themes__WEBPACK_IMPORTED_MODULE_11__["PredefinedThemes"].indexOf(this.themeName) === -1;
+        this.themeEditorSurvey.getQuestionByName("themeMode").readOnly = isCustomTheme;
+        this.themeEditorSurvey.getQuestionByName("themePalette").readOnly = isCustomTheme;
         var canModify = !this.surveyProvider.readOnly;
         var options = {
             theme: this.currentTheme,
             canModify: canModify
         };
         this.onCanModifyTheme.fire(this, options);
-        themeEditorSurvey.getAllQuestions().forEach(function (q) {
+        this.themeEditorSurvey.getAllQuestions().forEach(function (q) {
             if (["themeName", "themePalette", "themeMode"].indexOf(q.name) === -1) {
                 q.readOnly = !options.canModify;
             }
         });
+        if (!!this.survey) {
+            this.themeEditorSurvey.getQuestionByName("surveyTitle").readOnly = !this.survey.hasTitle;
+            this.themeEditorSurvey.getQuestionByName("pageTitle").readOnly = !this.survey.pages.some(function (p) { return !!p.title; });
+            this.themeEditorSurvey.getQuestionByName("pageDescription").readOnly = !this.survey.pages.some(function (p) { return !!p.description; });
+        }
     };
     ThemeBuilder.prototype.updatePropertyGridEditors = function (themeEditorSurvey) {
         var _this = this;
@@ -14796,6 +14872,8 @@ var ThemeBuilder = /** @class */ (function (_super) {
         themeEditorSurvey.getQuestionByName("backgroundImage").value = this.backgroundImage;
         themeEditorSurvey.getQuestionByName("backgroundImageFit").value = this.backgroundImageFit;
         themeEditorSurvey.getQuestionByName("backgroundImageAttachment").value = this.backgroundImageAttachment;
+        themeEditorSurvey.getQuestionByName("generalPrimaryColor").value = themeEditorSurvey.getQuestionByName("--sjs-primary-backcolor").value;
+        themeEditorSurvey.getQuestionByName("generalBackcolorDimColor").value = themeEditorSurvey.getQuestionByName("--sjs-general-backcolor-dim").value;
         Object(_theme_custom_questions_element_settings__WEBPACK_IMPORTED_MODULE_9__["elementSettingsFromCssVariable"])(themeEditorSurvey.getQuestionByName("questionPanel"), newCssVariables, newCssVariables["--sjs-general-backcolor"], newCssVariables["--sjs-general-backcolor-dark"]);
         Object(_theme_custom_questions_element_settings__WEBPACK_IMPORTED_MODULE_9__["elementSettingsFromCssVariable"])(themeEditorSurvey.getQuestionByName("editorPanel"), newCssVariables, newCssVariables["--sjs-general-backcolor-dim-light"], newCssVariables["--sjs-general-backcolor-dim-dark"]);
         Object(_theme_custom_questions_font_settings__WEBPACK_IMPORTED_MODULE_8__["fontsettingsFromCssVariable"])(themeEditorSurvey.getQuestionByName("surveyTitle"), newCssVariables);
@@ -14815,7 +14893,7 @@ var ThemeBuilder = /** @class */ (function (_super) {
         }
         themeEditorSurvey.getAllQuestions().forEach(function (question) {
             if (["color", "colorsettings"].indexOf(question.getType()) !== -1) {
-                question.choices = Object.keys(_themes__WEBPACK_IMPORTED_MODULE_10__["PredefinedColors"][_this.themePalette]).map(function (colorName) { return new survey_core__WEBPACK_IMPORTED_MODULE_2__["ItemValue"](_themes__WEBPACK_IMPORTED_MODULE_10__["PredefinedColors"][_this.themePalette][colorName], Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("theme.colors." + colorName)); });
+                question.choices = Object.keys(_themes__WEBPACK_IMPORTED_MODULE_11__["PredefinedColors"][_this.themePalette]).map(function (colorName) { return new survey_core__WEBPACK_IMPORTED_MODULE_2__["ItemValue"](_themes__WEBPACK_IMPORTED_MODULE_11__["PredefinedColors"][_this.themePalette][colorName], Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("theme.colors." + colorName)); });
             }
         });
     };
@@ -14881,13 +14959,13 @@ var ThemeBuilder = /** @class */ (function (_super) {
                             elements: [
                                 {
                                     type: "color",
-                                    name: "--sjs-primary-backcolor",
+                                    name: "generalPrimaryColor",
                                     title: Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("theme.primaryColor"),
                                     descriptionLocation: "hidden",
                                 },
                                 {
                                     type: "color",
-                                    name: "--sjs-general-backcolor-dim",
+                                    name: "generalBackcolorDimColor",
                                     title: Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("theme.backgroundDimColor"),
                                     descriptionLocation: "hidden",
                                 },
@@ -14988,12 +15066,6 @@ var ThemeBuilder = /** @class */ (function (_super) {
                                     min: 0,
                                     step: 5
                                 },
-                                {
-                                    type: "expression",
-                                    name: "--sjs-font-size",
-                                    expression: "{commonFontSize}*16/100+\"px\"",
-                                    visible: false
-                                },
                             ]
                         }, {
                             type: "panel",
@@ -15008,12 +15080,6 @@ var ThemeBuilder = /** @class */ (function (_super) {
                                     min: 0,
                                     step: 5
                                 },
-                                {
-                                    type: "expression",
-                                    name: "--sjs-base-unit",
-                                    expression: "{commonScale}*8/100+\"px\"",
-                                    visible: false
-                                },
                                 {
                                     type: "spinedit",
                                     name: "cornerRadius",
@@ -15023,12 +15089,6 @@ var ThemeBuilder = /** @class */ (function (_super) {
                                     defaultValue: 4,
                                     min: 0
                                 },
-                                {
-                                    type: "expression",
-                                    name: "--sjs-corner-radius",
-                                    expression: "{cornerRadius}+\"px\"",
-                                    visible: false
-                                },
                             ]
                         }
                     ]
@@ -15107,7 +15167,6 @@ var ThemeBuilder = /** @class */ (function (_super) {
                                     descriptionLocation: "hidden",
                                     defaultValue: {
                                         family: _creator_settings__WEBPACK_IMPORTED_MODULE_7__["settings"].theme.fontFamily,
-                                        color: "rgba(22, 22, 22, 1)",
                                         weight: "700",
                                         size: 32
                                     }
@@ -15118,7 +15177,7 @@ var ThemeBuilder = /** @class */ (function (_super) {
                                     descriptionLocation: "hidden",
                                     defaultValue: {
                                         family: _creator_settings__WEBPACK_IMPORTED_MODULE_7__["settings"].theme.fontFamily,
-                                        color: "rgba(22, 22, 22, 1)",
+                                        color: "rgba(0, 0, 0, 0.91)",
                                         weight: "700",
                                         size: 24
                                     }
@@ -15129,7 +15188,7 @@ var ThemeBuilder = /** @class */ (function (_super) {
                                     descriptionLocation: "hidden",
                                     defaultValue: {
                                         family: _creator_settings__WEBPACK_IMPORTED_MODULE_7__["settings"].theme.fontFamily,
-                                        color: "rgba(22, 22, 22, 1)",
+                                        color: "rgba(0, 0, 0, 0.45)",
                                         weight: "400",
                                         size: 16
                                     }
@@ -15146,6 +15205,7 @@ var ThemeBuilder = /** @class */ (function (_super) {
                                     defaultValue: {
                                         backcolor: "rgba(255, 255, 255, 1)",
                                         hovercolor: "rgba(248, 248, 248, 1)",
+                                        cornerRadius: "4px",
                                         corner: 4
                                     }
                                 },
@@ -15177,7 +15237,7 @@ var ThemeBuilder = /** @class */ (function (_super) {
                                     descriptionLocation: "hidden",
                                     defaultValue: {
                                         family: _creator_settings__WEBPACK_IMPORTED_MODULE_7__["settings"].theme.fontFamily,
-                                        color: "rgba(22, 22, 22, 1)",
+                                        color: "rgba(0, 0, 0, 0.91)",
                                         weight: "600",
                                         size: 16,
                                     }
@@ -15188,7 +15248,7 @@ var ThemeBuilder = /** @class */ (function (_super) {
                                     descriptionLocation: "hidden",
                                     defaultValue: {
                                         family: _creator_settings__WEBPACK_IMPORTED_MODULE_7__["settings"].theme.fontFamily,
-                                        color: "rgba(22, 22, 22, 1)",
+                                        color: "rgba(0, 0, 0, 0.45)",
                                         weight: "400",
                                         size: 16
                                     }
@@ -15205,6 +15265,7 @@ var ThemeBuilder = /** @class */ (function (_super) {
                                     defaultValue: {
                                         backcolor: "rgba(255, 255, 255, 1)",
                                         hovercolor: "rgba(248, 248, 248, 1)",
+                                        cornerRadius: "4px",
                                         corner: 4
                                     }
                                 },
@@ -15235,7 +15296,7 @@ var ThemeBuilder = /** @class */ (function (_super) {
                                     descriptionLocation: "hidden",
                                     defaultValue: {
                                         family: _creator_settings__WEBPACK_IMPORTED_MODULE_7__["settings"].theme.fontFamily,
-                                        color: "rgba(22, 22, 22, 1)",
+                                        color: "rgba(0, 0, 0, 0.91)",
                                         weight: "400",
                                         size: 16
                                     }
@@ -15354,6 +15415,16 @@ var ThemeBuilder = /** @class */ (function (_super) {
             }
         })
     ], ThemeBuilder.prototype, "backgroundImageAttachment", 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.backgroundOpacity = newValue / 100;
+                }
+                _target.currentTheme["backgroundOpacity"] = newValue / 100;
+            }
+        })
+    ], ThemeBuilder.prototype, "backgroundOpacity", void 0);
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
         Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: "default" })
     ], ThemeBuilder.prototype, "themeName", void 0);
@@ -15622,7 +15693,13 @@ function elementSettingsToCssVariable(question, themeCssVariables) {
     Object.keys(question.value).forEach(function (key) {
         if (key === "corner")
             return;
-        themeCssVariables["--sjs-" + question.name.toLocaleLowerCase() + "-" + key] = question.value[key];
+        var propertyName = "--sjs-" + question.name.toLocaleLowerCase() + "-" + key;
+        if (question.value[key] !== question.defaultValue[key]) {
+            themeCssVariables[propertyName] = question.value[key];
+        }
+        else {
+            delete themeCssVariables[propertyName];
+        }
     });
 }
 function elementSettingsFromCssVariable(question, themeCssVariables, defaultBackcolorVariable, defaultHovercolorVariable) {
@@ -15744,7 +15821,13 @@ function fontsettingsToCssVariable(question, themeCssVariables) {
     Object.keys(question.value).forEach(function (key) {
         var _a;
         var innerQ = question.contentPanel.getQuestionByName(key);
-        themeCssVariables["--sjs-font-" + question.name.toLocaleLowerCase() + "-" + key] = question.value[key] + (((_a = innerQ.unit) === null || _a === void 0 ? void 0 : _a.toString()) || "");
+        var propertyName = "--sjs-font-" + question.name.toLocaleLowerCase() + "-" + key;
+        if (question.value[key] !== question.defaultValue[key]) {
+            themeCssVariables[propertyName] = question.value[key] + (((_a = innerQ.unit) === null || _a === void 0 ? void 0 : _a.toString()) || "");
+        }
+        else {
+            delete themeCssVariables[propertyName];
+        }
     });
 }
 function fontsettingsFromCssVariable(question, themeCssVariables, defaultColorVariable, defaultPlaceholderColorVariable) {
@@ -15842,6 +15925,10 @@ var ThemeTabPlugin = /** @class */ (function () {
         this.model.testAgainAction = this.testAgainAction;
         this.model.availableThemes = this.availableThemes;
         this.model.initialize(this.creator.JSON, options);
+        this.updateUndeRedoActions();
+        this.model.undoRedoManager.canUndoRedoCallback = function () {
+            _this.updateUndeRedoActions();
+        };
         this.model.show();
         this.model.onPropertyChanged.add(function (sender, options) {
             if (options.name === "isRunning") {
@@ -15906,6 +15993,24 @@ var ThemeTabPlugin = /** @class */ (function () {
                 _this.model.testAgain();
             }
         });
+        this.undoAction = new survey_core__WEBPACK_IMPORTED_MODULE_0__["Action"]({
+            id: "action-undo-theme",
+            iconName: "icon-undo",
+            locTitleName: "ed.undo",
+            showTitle: false,
+            visible: new survey_core__WEBPACK_IMPORTED_MODULE_0__["ComputedUpdater"](function () { return _this.creator.activeTab === "theme"; }),
+            action: function () { return _this.undo(); }
+        });
+        this.redoAction = new survey_core__WEBPACK_IMPORTED_MODULE_0__["Action"]({
+            id: "action-redo-theme",
+            iconName: "icon-redo",
+            locTitleName: "ed.redo",
+            showTitle: false,
+            visible: new survey_core__WEBPACK_IMPORTED_MODULE_0__["ComputedUpdater"](function () { return _this.creator.activeTab === "theme"; }),
+            action: function () { return _this.redo(); }
+        });
+        items.push(this.undoAction);
+        items.push(this.redoAction);
         this.resetTheme = new survey_core__WEBPACK_IMPORTED_MODULE_0__["Action"]({
             id: "resetTheme",
             iconName: "icon-reset",
@@ -15978,7 +16083,33 @@ var ThemeTabPlugin = /** @class */ (function () {
         items.push(this.exportAction);
         return items;
     };
+    ThemeTabPlugin.prototype.undo = function () {
+        var _undoRedoManager = this.model && this.model.undoRedoManager;
+        if (!_undoRedoManager)
+            return;
+        _undoRedoManager.suspend();
+        if (_undoRedoManager.canUndo()) {
+            _undoRedoManager.undo();
+        }
+        _undoRedoManager.resume();
+    };
+    ThemeTabPlugin.prototype.redo = function () {
+        var _undoRedoManager = this.model && this.model.undoRedoManager;
+        if (!_undoRedoManager)
+            return;
+        _undoRedoManager.suspend();
+        if (_undoRedoManager.canRedo()) {
+            _undoRedoManager.redo();
+        }
+        _undoRedoManager.resume();
+    };
+    ThemeTabPlugin.prototype.updateUndeRedoActions = function () {
+        var _undoRedoManager = this.model.undoRedoManager;
+        this.undoAction.enabled = _undoRedoManager.canUndo();
+        this.redoAction.enabled = _undoRedoManager.canRedo();
+    };
     ThemeTabPlugin.prototype.addFooterActions = function () {
+        this.creator.footerToolbar.actions.push(this.testAgainAction);
         this.creator.footerToolbar.actions.push(this.resetTheme);
     };
     Object.defineProperty(ThemeTabPlugin.prototype, "availableThemes", {
@@ -18603,45 +18734,45 @@ var CreatorBase = /** @class */ (function (_super) {
           *
           * Depending on the `options.type` value, the `options` object contains parameters listed below:
           *
-          * `options.type`: `"ADDED_FROM_TOOLBOX"`\
+          * `options.type`: `"ADDED_FROM_TOOLBOX"`
           * - `options.question` - An added question.
           *
-          * `options.type`: `"PAGE_ADDED"`\
+          * `options.type`: `"PAGE_ADDED"`
           * - `options.newValue` - An added page.
           *
-          * `options.type`: `"PAGE_MOVED"`\
+          * `options.type`: `"PAGE_MOVED"`
           * - `options.page` - A moved page.
           * - `options.indexFrom` - A previous index.
           * - `options.indexTo` - A current index.
           *
-          * `options.type`: `"QUESTION_CONVERTED"`\
+          * `options.type`: `"QUESTION_CONVERTED"`
           * - `options.className` - The name of a class to which a question has been converted.
           * - `options.oldValue` - An object of a previous class.
           * - `options.newValue` - An object of a class specified by `options.className`.
           *
-          * `options.type`: `"QUESTION_CHANGED_BY_EDITOR"`\
+          * `options.type`: `"QUESTION_CHANGED_BY_EDITOR"`
           * - `options.question` - A question that has been edited in a pop-up editor.
           *
-          * `options.type`: `"PROPERTY_CHANGED"`\
+          * `options.type`: `"PROPERTY_CHANGED"`
           * - `options.name` - The name of the changed property.
           * - `options.target` - An object that contains the changed property.
           * - `options.oldValue` - A previous value of the changed property.
           * - `options.newValue` - A new value of the changed property.
           *
-          * `options.type`: `"ELEMENT_REORDERED"`\
+          * `options.type`: `"ELEMENT_REORDERED"`
           * - `options.arrayName` - The name of the changed array.
           * - `options.parent` - An object that contains the changed array.
           * - `options.element` - A reordered element.
           * - `options.indexFrom` - A previous index.
           * - `options.indexTo` - A current index.
           *
-          * `options.type`: `"OBJECT_DELETED"`\
+          * `options.type`: `"OBJECT_DELETED"`
           * - `options.target` - A deleted object.
           *
-          * `options.type`: `"VIEW_TYPE_CHANGED"`\
+          * `options.type`: `"VIEW_TYPE_CHANGED"`
           * - `options.newType` - A current view: `"editor"` or `"designer"`.
           *
-          * `options.type`: `"DO_DROP"`\
+          * `options.type`: `"DO_DROP"`
           * - `options.page` - A parent page of the dragged element.
           * - `options.source` - A dragged element.
           * - `options.target` - A drop target.
@@ -23834,7 +23965,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_71__ = __webpack_require__(/*! survey-core */ "survey-core");
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_71___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_71__);
 var Version;
-Version = "" + "1.9.108";
+Version = "" + "1.9.110";
 //should be loaded before other styles for easier override 
 __webpack_require__(/*! ../utils/context-button.scss */ "./src/utils/context-button.scss");
 
@@ -23924,7 +24055,7 @@ __webpack_require__(/*! ../utils/design.scss */ "./src/utils/design.scss");
 __webpack_require__(/*! ../utils/layout.scss */ "./src/utils/layout.scss");
 
 survey_core__WEBPACK_IMPORTED_MODULE_71__["settings"].supportCreatorV2 = true;
-Object(survey_core__WEBPACK_IMPORTED_MODULE_71__["checkLibraryVersion"])("" + "1.9.108", "survey-creator-core");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_71__["checkLibraryVersion"])("" + "1.9.110", "survey-creator-core");
 
 
 /***/ }),
@@ -26670,6 +26801,9 @@ var enStrings = {
     pv: {
         "true": "true",
         "false": "false",
+        "file": "Local files",
+        "camera": "Camera",
+        "file-camera": "Local files or camera",
         inherit: "Inherit",
         show: "Visible",
         hide: "Hidden",
@@ -33255,6 +33389,7 @@ var SurveyQuestionEditorDefinition = /** @class */ (function () {
         },
         file: {
             properties: [
+                "sourceType",
                 "allowMultiple",
                 "allowImagesPreview",
                 "acceptedTypes",