survey-creator-core 1.11.1 → 1.11.2

package/survey-creator-core.js

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v1.11.1
+ * SurveyJS Creator v1.11.2
  * (c) 2015-2024 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.11.1
+ * surveyjs - Survey JavaScript library v1.11.2
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -14526,325 +14526,16 @@ var SurveyLogic = /** @class */ (function (_super) {
 
 /***/ }),
 
-/***/ "./src/components/tabs/test-plugin.ts":
-/*!********************************************!*\
-  !*** ./src/components/tabs/test-plugin.ts ***!
-  \********************************************/
-/*! exports provided: TabTestPlugin */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TabTestPlugin", function() { return TabTestPlugin; });
-/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../utils/utils */ "./src/utils/utils.ts");
-/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-core */ "survey-core");
-/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _editorLocalization__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../editorLocalization */ "./src/editorLocalization.ts");
-/* harmony import */ var _simulator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../simulator */ "./src/components/simulator.ts");
-/* harmony import */ var _test__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./test */ "./src/components/tabs/test.ts");
-
-
-
-
-
-var TabTestPlugin = /** @class */ (function () {
-    function TabTestPlugin(creator) {
-        this.creator = creator;
-        this.simulatorTheme = survey_core__WEBPACK_IMPORTED_MODULE_1__["surveyCss"][survey_core__WEBPACK_IMPORTED_MODULE_1__["defaultV2ThemeName"]];
-        creator.addPluginTab("test", this);
-        this.setPreviewTheme(this.creator.themeForPreview);
-        this.createActions().forEach(function (action) { return creator.toolbar.actions.push(action); });
-    }
-    TabTestPlugin.prototype.setDevice = function (newVal) {
-        this.model.simulator.device = newVal;
-        this.model.simulator.resetZoomParameters();
-        var currentType = _simulator__WEBPACK_IMPORTED_MODULE_3__["simulatorDevices"][this.model.simulator.device].deviceType;
-        this.orientationSelectorAction.enabled = currentType != "desktop";
-        this.deviceSelectorAction.iconName = "icon-device-" + currentType;
-        this.deviceSelectorAction.title = Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_2__["getLocString"])("pe.simulator");
-    };
-    TabTestPlugin.prototype.setDefaultLanguageOption = function (opt) {
-        var _this = this;
-        var vis = opt === true || opt === "all" || (opt === "auto" && this.model.survey.getUsedLocales().length > 1);
-        this.languageSelectorAction.visible = vis;
-        var languages = [];
-        if (vis) {
-            languages = this.getLanguages(opt !== "all" ? this.model.survey.getUsedLocales() : null);
-        }
-        this.languageSelectorAction.popupModel.contentComponentData.model.setItems(languages);
-        this.languageSelectorAction.data.selectedItem = languages.filter(function (lang) { return lang.id === _this.model.activeLanguage; })[0];
-    };
-    TabTestPlugin.prototype.getLanguages = function (usedLanguages) {
-        if (usedLanguages === void 0) { usedLanguages = null; }
-        var res = [];
-        var locales = !!usedLanguages && usedLanguages.length > 1 ? usedLanguages : survey_core__WEBPACK_IMPORTED_MODULE_1__["surveyLocalization"].getLocales();
-        for (var i = 0; i < locales.length; i++) {
-            var loc = locales[i];
-            res.push({ id: loc, title: _editorLocalization__WEBPACK_IMPORTED_MODULE_2__["editorLocalization"].getLocaleName(loc) });
-        }
-        return res;
-    };
-    TabTestPlugin.prototype.updateActions = function () {
-        this.languageSelectorAction.title = _editorLocalization__WEBPACK_IMPORTED_MODULE_2__["editorLocalization"].getLocaleName(this.model.activeLanguage);
-        this.languageSelectorAction.visible = true;
-        if (this.creator.showSimulatorInTestSurveyTab) {
-            this.setDevice(this.model.simulator.device);
-            this.deviceSelectorAction.data.selectedItem = { id: this.model.simulator.device };
-            this.orientationSelectorAction.title = Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_2__["getLocString"])("pe.portraitOrientation");
-        }
-        if (this.creator.showInvisibleElementsInTestSurveyTab) {
-            this.invisibleToggleAction.css = this.model.showInvisibleElements ? "sv-action-bar-item--active" : "";
-            this.invisibleToggleAction.visible = this.model.isRunning;
-        }
-        if (this.creator.showDefaultLanguageInTestSurveyTab != undefined) {
-            this.setDefaultLanguageOption(this.creator.showDefaultLanguageInTestSurveyTab);
-        }
-    };
-    TabTestPlugin.prototype.setPreviewTheme = function (themeName) {
-        this.simulatorTheme = survey_core__WEBPACK_IMPORTED_MODULE_1__["surveyCss"][themeName] || survey_core__WEBPACK_IMPORTED_MODULE_1__["surveyCss"][survey_core__WEBPACK_IMPORTED_MODULE_1__["defaultV2ThemeName"]];
-    };
-    TabTestPlugin.prototype.createVisibleUpdater = function () {
-        var _this = this;
-        return new survey_core__WEBPACK_IMPORTED_MODULE_1__["ComputedUpdater"](function () { return _this.creator.activeTab === "test"; });
-    };
-    TabTestPlugin.prototype.activate = function () {
-        this.model = new _test__WEBPACK_IMPORTED_MODULE_4__["TestSurveyTabViewModel"](this.creator, this.simulatorTheme);
-        this.model.simulator.landscape = this.creator.previewOrientation != "portrait";
-        this.update();
-    };
-    TabTestPlugin.prototype.update = function () {
-        var _this = this;
-        if (!this.model)
-            return;
-        var options = {
-            showPagesInTestSurveyTab: this.creator.showPagesInTestSurveyTab,
-        };
-        this.model.testAgainAction = this.testAgainAction;
-        this.model.prevPageAction = this.prevPageAction;
-        this.model.nextPageAction = this.nextPageAction;
-        this.model.initialize(this.creator.JSON, options);
-        this.updateActions();
-        this.model.show();
-        this.model.onPropertyChanged.add(function (sender, options) {
-            if (options.name === "isRunning") {
-                _this.invisibleToggleAction && (_this.invisibleToggleAction.visible = _this.model.isRunning);
-                _this.testAgainAction.visible = !_this.model.isRunning;
-            }
-        });
-    };
-    TabTestPlugin.prototype.deactivate = function () {
-        if (this.model) {
-            this.simulatorTheme = this.model.simulator.survey.css;
-            this.model.onSurveyCreatedCallback = undefined;
-            this.model.dispose();
-            this.model = undefined;
-        }
-        this.languageSelectorAction.visible = false;
-        this.testAgainAction.visible = false;
-        this.invisibleToggleAction && (this.invisibleToggleAction.visible = false);
-        return true;
-    };
-    TabTestPlugin.prototype.getAvailableThemes = function (themeMapper) {
-        var availableThemesToItems = [];
-        for (var i = 0; i < themeMapper.length; i++) {
-            var item = themeMapper[i];
-            var action = new survey_core__WEBPACK_IMPORTED_MODULE_1__["Action"]({ id: item.name + "_themeSwitcher", locTitleName: this.getThemeLocName(item.name) });
-            action.value = item.name;
-            availableThemesToItems.push(action);
-        }
-        return availableThemesToItems;
-    };
-    TabTestPlugin.prototype.getThemeLocName = function (name) {
-        return "ed." + name + "Theme";
-    };
-    TabTestPlugin.prototype.createActions = function () {
-        var _this = this;
-        var items = [];
-        this.testAgainAction = new survey_core__WEBPACK_IMPORTED_MODULE_1__["Action"]({
-            id: "testSurveyAgain",
-            visible: false,
-            locTitleName: "ed.testSurveyAgain",
-            action: function () {
-                _this.model.testAgain();
-            }
-        });
-        if (this.creator.showSimulatorInTestSurveyTab) {
-            var deviceSelectorItems = Object.keys(_simulator__WEBPACK_IMPORTED_MODULE_3__["simulatorDevices"])
-                .filter(function (key) { return !!_simulator__WEBPACK_IMPORTED_MODULE_3__["simulatorDevices"][key].title; })
-                .map(function (key) { var _a; return ({ id: key, title: _simulator__WEBPACK_IMPORTED_MODULE_3__["simulatorDevices"][key].title, visibleIndex: (_a = _simulator__WEBPACK_IMPORTED_MODULE_3__["simulatorDevices"][key].visibleIndex) !== null && _a !== void 0 ? _a : Number.MAX_VALUE }); });
-            this.deviceSelectorAction = Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["createDropdownActionModel"])({
-                id: "deviceSelector",
-                iconName: "icon-device-desktop",
-                mode: "small",
-                visible: new survey_core__WEBPACK_IMPORTED_MODULE_1__["ComputedUpdater"](function () {
-                    return Object(_utils_utils__WEBPACK_IMPORTED_MODULE_0__["notShortCircuitAnd"])(_this.creator.activeTab === "test", _this.creator.showSimulatorInTestSurveyTab);
-                }),
-            }, {
-                items: deviceSelectorItems,
-                allowSelection: true,
-                onSelectionChanged: function (item) { _this.setDevice(item.id); },
-                horizontalPosition: "center",
-                onHide: function () { _this.deviceSelectorAction.enabled = true; },
-                onShow: function () { _this.deviceSelectorAction.enabled = false; }
-            });
-            items.push(this.deviceSelectorAction);
-            this.orientationSelectorAction = new survey_core__WEBPACK_IMPORTED_MODULE_1__["Action"]({
-                id: "orientationSelector",
-                iconName: "icon-device-rotate",
-                mode: "small",
-                visible: new survey_core__WEBPACK_IMPORTED_MODULE_1__["ComputedUpdater"](function () {
-                    return Object(_utils_utils__WEBPACK_IMPORTED_MODULE_0__["notShortCircuitAnd"])(_this.creator.activeTab === "test", _this.creator.showSimulatorInTestSurveyTab);
-                }),
-                action: function () {
-                    _this.model.simulator.landscape = !_this.model.simulator.landscape;
-                    _this.orientationSelectorAction.title = Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_2__["getLocString"])(!_this.model.simulator.landscape ? "pe.landscapeOrientation" : "pe.portraitOrientation");
-                }
-            });
-            items.push(this.orientationSelectorAction);
-        }
-        if (this.creator.showInvisibleElementsInTestSurveyTab) {
-            this.invisibleToggleAction = new survey_core__WEBPACK_IMPORTED_MODULE_1__["Action"]({
-                id: "showInvisible",
-                iconName: "icon-invisible-items",
-                mode: "small",
-                needSeparator: new survey_core__WEBPACK_IMPORTED_MODULE_1__["ComputedUpdater"](function () {
-                    return !_this.creator.isMobileView;
-                }),
-                locTitleName: "ts.showInvisibleElements",
-                visible: false,
-                action: function () {
-                    _this.model.showInvisibleElements = !_this.model.showInvisibleElements;
-                    _this.invisibleToggleAction.css = _this.model.showInvisibleElements ? "sv-action-bar-item--active" : "";
-                    _this.invisibleToggleAction.title = Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_2__["getLocString"])(!_this.model.showInvisibleElements ? "ts.showInvisibleElements" : "ts.hideInvisibleElements");
-                }
-            });
-            items.push(this.invisibleToggleAction);
-        }
-        var themeMapper = survey_core__WEBPACK_IMPORTED_MODULE_1__["StylesManager"].getIncludedThemeCss();
-        var sequence = ["defaultV2", "modern", "default"];
-        themeMapper = themeMapper.sort(function (theme1, theme2) {
-            return sequence.indexOf(theme1.name) > sequence.indexOf(theme2.name) ? 1 : -1;
-        });
-        var availableThemesToItems = this.getAvailableThemes(themeMapper);
-        if (this.creator.allowChangeThemeInPreview && availableThemesToItems.length > 1 && !this.creator.showThemeTab) {
-            this.changeThemeModel = new survey_core__WEBPACK_IMPORTED_MODULE_1__["ListModel"](availableThemesToItems, function (item) {
-                if (!!_this.model) {
-                    _this.model.setTheme(item.value, themeMapper);
-                }
-                _this.changeThemeAction.locTitleName = _this.getThemeLocName(item.value);
-                _this.changeThemeAction.locStrsChanged();
-                _this.changeThemePopupModel.toggleVisibility();
-            }, true);
-            this.changeThemeModel.locOwner = this.creator;
-            this.changeThemePopupModel = new survey_core__WEBPACK_IMPORTED_MODULE_1__["PopupModel"]("sv-list", { model: this.changeThemeModel }, "bottom", "center");
-            var getStartThemeName = function () {
-                var availableThemes = themeMapper.filter(function (item) { return item.theme.root === _this.simulatorTheme.root; });
-                return availableThemes.length > 0 ? availableThemes[0].name : "defaultV2";
-            };
-            this.changeThemeAction = new survey_core__WEBPACK_IMPORTED_MODULE_1__["Action"]({
-                id: "themeSwitcher",
-                iconName: "icon-theme",
-                component: "sv-action-bar-item-dropdown",
-                mode: "large",
-                locTitleName: this.getThemeLocName(getStartThemeName()),
-                needSeparator: true,
-                visible: new survey_core__WEBPACK_IMPORTED_MODULE_1__["ComputedUpdater"](function () {
-                    return Object(_utils_utils__WEBPACK_IMPORTED_MODULE_0__["notShortCircuitAnd"])(_this.creator.showSimulatorInTestSurveyTab, _this.creator.activeTab === "test");
-                }),
-                action: function () {
-                    _this.changeThemePopupModel.toggleVisibility();
-                },
-                popupModel: this.changeThemePopupModel
-            });
-            items.push(this.changeThemeAction);
-        }
-        this.languageSelectorAction = Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["createDropdownActionModel"])({
-            id: "languageSelector",
-            iconName: "icon-language",
-            visible: false,
-            mode: new survey_core__WEBPACK_IMPORTED_MODULE_1__["ComputedUpdater"](function () {
-                return _this.creator.isMobileView ? "small" : "large";
-            }),
-        }, {
-            items: [],
-            allowSelection: true,
-            onSelectionChanged: function (item) {
-                _this.model.activeLanguage = item.id;
-                _this.languageSelectorAction.title = _editorLocalization__WEBPACK_IMPORTED_MODULE_2__["editorLocalization"].getLocaleName(item.id);
-            },
-            horizontalPosition: "center",
-            onHide: function () { _this.languageSelectorAction.enabled = true; },
-            onShow: function () { _this.languageSelectorAction.enabled = false; }
-        });
-        items.push(this.languageSelectorAction);
-        this.designerAction = new survey_core__WEBPACK_IMPORTED_MODULE_1__["Action"]({
-            id: "svd-designer",
-            iconName: "icon-config",
-            action: function () { _this.creator.makeNewViewActive("designer"); },
-            visible: this.createVisibleUpdater(),
-            locTitleName: "ed.designer",
-            showTitle: false
-        });
-        this.previewAction = new survey_core__WEBPACK_IMPORTED_MODULE_1__["Action"]({
-            id: "svd-preview",
-            iconName: "icon-preview",
-            active: true,
-            visible: this.createVisibleUpdater(),
-            locTitleName: "tabs.preview",
-            showTitle: false,
-            action: function () { }
-        });
-        this.prevPageAction = new survey_core__WEBPACK_IMPORTED_MODULE_1__["Action"]({
-            id: "prevPage",
-            iconName: "icon-arrow-left_16x16",
-            needSeparator: new survey_core__WEBPACK_IMPORTED_MODULE_1__["ComputedUpdater"](function () {
-                return _this.creator.isMobileView;
-            }),
-            visible: false
-        });
-        this.nextPageAction = new survey_core__WEBPACK_IMPORTED_MODULE_1__["Action"]({
-            id: "nextPage",
-            iconName: "icon-arrow-right_16x16",
-            visible: false
-        });
-        return items;
-    };
-    TabTestPlugin.prototype.addFooterActions = function () {
-        this.creator.footerToolbar.actions.push(this.designerAction);
-        this.creator.footerToolbar.actions.push(this.previewAction);
-        this.creator.footerToolbar.actions.push(this.prevPageAction);
-        this.creator.footerToolbar.actions.push(this.nextPageAction);
-        this.invisibleToggleAction && (this.creator.footerToolbar.actions.push(this.invisibleToggleAction));
-        // this.languageSelectorAction && (this.creator.footerToolbar.actions.push(this.languageSelectorAction));
-    };
-    return TabTestPlugin;
-}());
-
-
-
-/***/ }),
-
-/***/ "./src/components/tabs/test.scss":
-/*!***************************************!*\
-  !*** ./src/components/tabs/test.scss ***!
-  \***************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
-/***/ }),
-
-/***/ "./src/components/tabs/test.ts":
-/*!*************************************!*\
-  !*** ./src/components/tabs/test.ts ***!
-  \*************************************/
-/*! exports provided: TestSurveyTabViewModel */
+/***/ "./src/components/tabs/preview.ts":
+/*!****************************************!*\
+  !*** ./src/components/tabs/preview.ts ***!
+  \****************************************/
+/*! exports provided: PreviewViewModel */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TestSurveyTabViewModel", function() { return TestSurveyTabViewModel; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PreviewViewModel", function() { return PreviewViewModel; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
 /* harmony import */ var _simulator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../simulator */ "./src/components/simulator.ts");
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-core */ "survey-core");
@@ -14853,23 +14544,22 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../utils/utils */ "./src/utils/utils.ts");
 
 
-__webpack_require__(/*! ./test.scss */ "./src/components/tabs/test.scss");
 
 
 
-var TestSurveyTabViewModel = /** @class */ (function (_super) {
-    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(TestSurveyTabViewModel, _super);
-    function TestSurveyTabViewModel(surveyProvider, startTheme) {
-        if (startTheme === void 0) { startTheme = survey_core__WEBPACK_IMPORTED_MODULE_2__["defaultV2Css"]; }
+var PreviewViewModel = /** @class */ (function (_super) {
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(PreviewViewModel, _super);
+    function PreviewViewModel(surveyProvider, startThemeClasses) {
+        if (startThemeClasses === void 0) { startThemeClasses = survey_core__WEBPACK_IMPORTED_MODULE_2__["defaultV2Css"]; }
         var _this = _super.call(this) || this;
         _this.surveyProvider = surveyProvider;
-        _this.startTheme = startTheme;
+        _this.startThemeClasses = startThemeClasses;
         _this.enableInvisiblePages = true;
         _this.pages = new survey_core__WEBPACK_IMPORTED_MODULE_2__["ActionContainer"]();
         _this.simulator = new _simulator__WEBPACK_IMPORTED_MODULE_1__["SurveySimulatorModel"]();
         return _this;
     }
-    Object.defineProperty(TestSurveyTabViewModel.prototype, "activeLanguage", {
+    Object.defineProperty(PreviewViewModel.prototype, "activeLanguage", {
         get: function () {
             return this.getPropertyValue("activeLanguage", this.survey.locale || survey_core__WEBPACK_IMPORTED_MODULE_2__["surveyLocalization"].defaultLocale);
         },
@@ -14882,44 +14572,44 @@ var TestSurveyTabViewModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(TestSurveyTabViewModel.prototype, "survey", {
+    Object.defineProperty(PreviewViewModel.prototype, "survey", {
         get: function () {
             return this.simulator.survey;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(TestSurveyTabViewModel.prototype, "pageActions", {
+    Object.defineProperty(PreviewViewModel.prototype, "pageActions", {
         get: function () {
             return this.pages.actions;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(TestSurveyTabViewModel.prototype, "isPageToolbarVisible", {
+    Object.defineProperty(PreviewViewModel.prototype, "isPageToolbarVisible", {
         get: function () {
             return this.pages.visibleActions.length > 0 && !this.surveyProvider.isMobileView;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(TestSurveyTabViewModel.prototype, "isMobileView", {
+    Object.defineProperty(PreviewViewModel.prototype, "isMobileView", {
         get: function () {
             return this.surveyProvider.isMobileView;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(TestSurveyTabViewModel.prototype, "showResults", {
+    Object.defineProperty(PreviewViewModel.prototype, "showResults", {
         get: function () {
-            return this.surveyProvider.previewShowResults && !this.isRunning && !this.isMobileView;
+            return this.getShowResults();
         },
         enumerable: false,
         configurable: true
     });
-    TestSurveyTabViewModel.prototype.updateSimulatorSurvey = function (json, theme) {
+    PreviewViewModel.prototype.updateSimulatorSurvey = function (json, theme) {
         var _this = this;
-        var newSurvey = this.surveyProvider.createSurvey(json || {}, "test", this, function (survey) {
+        var newSurvey = this.surveyProvider.createSurvey(json || {}, this.getTabName(), this, function (survey) {
             survey.applyTheme(_this.surveyProvider.theme);
             survey.setCss(theme, false);
             survey.fitToContainer = true;
@@ -14968,7 +14658,7 @@ var TestSurveyTabViewModel = /** @class */ (function (_super) {
             this.show();
         }
     };
-    TestSurveyTabViewModel.prototype.setJSON = function (json, currTheme) {
+    PreviewViewModel.prototype.setJSON = function (json, currTheme) {
         this.json = json;
         if (json != null) {
             if (json.cookieName) {
@@ -14977,30 +14667,30 @@ var TestSurveyTabViewModel = /** @class */ (function (_super) {
         }
         this.updateSimulatorSurvey(json, currTheme);
     };
-    TestSurveyTabViewModel.prototype.initialize = function (json, options) {
-        this.setJSON(json, this.startTheme);
+    PreviewViewModel.prototype.initialize = function (json, options) {
+        this.setJSON(json, this.startThemeClasses);
         this.updatePageList();
         if (options.showPagesInTestSurveyTab !== undefined) {
             this.showPagesInTestSurveyTab = options.showPagesInTestSurveyTab;
         }
         this.buildActions();
     };
-    TestSurveyTabViewModel.prototype.updatePageItem = function (page) {
+    PreviewViewModel.prototype.updatePageItem = function (page) {
         var item = this.getPageItemByPage(page);
         if (item) {
             item.enabled = this.enableInvisiblePages || page.isVisible;
         }
     };
-    TestSurveyTabViewModel.prototype.getCurrentPageItem = function () {
+    PreviewViewModel.prototype.getCurrentPageItem = function () {
         return this.pageListItems[this.survey.pages.indexOf(this.survey.activePage)];
     };
-    TestSurveyTabViewModel.prototype.getSelectPageTitle = function () {
+    PreviewViewModel.prototype.getSelectPageTitle = function () {
         return (this.activePage && this.getPageTitle(this.activePage, "preview-tab:selected-page", "survey-tester-selected")) || Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("ts.selectPage");
     };
-    TestSurveyTabViewModel.prototype.getPageTitle = function (page, area, reason) {
+    PreviewViewModel.prototype.getPageTitle = function (page, area, reason) {
         if (area === void 0) { area = "preview-tab:page-list"; }
         if (reason === void 0) { reason = "survey-tester"; }
-        var pageTitle = page.title.replace(TestSurveyTabViewModel.tagRegex, "");
+        var pageTitle = page.title.replace(PreviewViewModel.tagRegex, "");
         var title = this.surveyProvider.getObjectDisplayName(page, area, reason, pageTitle);
         if (title === page.name && title.indexOf("page") === 0) {
             var index = this.survey.pages.indexOf(page);
@@ -15008,7 +14698,7 @@ var TestSurveyTabViewModel = /** @class */ (function (_super) {
         }
         return title;
     };
-    TestSurveyTabViewModel.prototype.updatePageList = function () {
+    PreviewViewModel.prototype.updatePageList = function () {
         var pages = [];
         for (var i = 0; i < this.survey.pages.length; i++) {
             var page = this.survey.pages[i];
@@ -15022,18 +14712,20 @@ var TestSurveyTabViewModel = /** @class */ (function (_super) {
         }
         this.pageListItems = pages;
     };
-    TestSurveyTabViewModel.prototype.show = function () {
+    PreviewViewModel.prototype.getTabName = function () { return ""; };
+    PreviewViewModel.prototype.getShowResults = function () { return false; };
+    PreviewViewModel.prototype.show = function () {
         this.showInvisibleElements = false;
         this.activePage = this.survey.activePage;
         this.survey.locale = this.activeLanguage;
         this.isRunning = true;
     };
-    TestSurveyTabViewModel.prototype.testAgain = function () {
+    PreviewViewModel.prototype.testAgain = function () {
         this.setJSON(this.json, this.simulator.survey.css);
         this.updatePageList();
         this.show();
     };
-    TestSurveyTabViewModel.prototype.buildActions = function () {
+    PreviewViewModel.prototype.buildActions = function () {
         var _this = this;
         var pageActions = [];
         var setNearPage = function (isNext) {
@@ -15055,7 +14747,8 @@ var TestSurveyTabViewModel = /** @class */ (function (_super) {
         if (this.prevPageAction) {
             this.prevPageAction.visible = new survey_core__WEBPACK_IMPORTED_MODULE_2__["ComputedUpdater"](function () {
                 var isRunning = _this.survey.state === "running";
-                return Object(_utils_utils__WEBPACK_IMPORTED_MODULE_4__["notShortCircuitAnd"])(_this.isRunning, _this.surveyProvider.activeTab === "test", _this.pageListItems.length > 1) && isRunning;
+                var isActiveTab = _this.getTabName() === _this.surveyProvider.activeTab;
+                return Object(_utils_utils__WEBPACK_IMPORTED_MODULE_4__["notShortCircuitAnd"])(_this.isRunning, isActiveTab, _this.pageListItems.length > 1) && isRunning;
             });
             this.prevPageAction.iconName = new survey_core__WEBPACK_IMPORTED_MODULE_2__["ComputedUpdater"](function () {
                 return _this.surveyProvider.isMobileView ? "icon-arrow-left" : "icon-arrow-left_16x16";
@@ -15077,6 +14770,9 @@ var TestSurveyTabViewModel = /** @class */ (function (_super) {
             selectedItem: this.getCurrentPageItem(),
             onSelectionChanged: function (item) {
                 _this.activePage = item.data;
+                for (var i = 0; i < _this.survey.pages.length && _this.survey.pages[i] !== _this.activePage; i++) {
+                    _this.survey.pages[i].passed = true;
+                }
             },
             verticalPosition: "top",
             horizontalPosition: "center"
@@ -15088,7 +14784,8 @@ var TestSurveyTabViewModel = /** @class */ (function (_super) {
         if (this.nextPageAction) {
             this.nextPageAction.visible = new survey_core__WEBPACK_IMPORTED_MODULE_2__["ComputedUpdater"](function () {
                 var isRunning = _this.survey.state === "running";
-                return Object(_utils_utils__WEBPACK_IMPORTED_MODULE_4__["notShortCircuitAnd"])(_this.isRunning, _this.surveyProvider.activeTab === "test", _this.pageListItems.length > 1) && isRunning;
+                var isActiveTab = _this.getTabName() === _this.surveyProvider.activeTab;
+                return Object(_utils_utils__WEBPACK_IMPORTED_MODULE_4__["notShortCircuitAnd"])(_this.isRunning, isActiveTab, _this.pageListItems.length > 1) && isRunning;
             });
             this.nextPageAction.iconName = new survey_core__WEBPACK_IMPORTED_MODULE_2__["ComputedUpdater"](function () {
                 return _this.surveyProvider.isMobileView ? "icon-arrow-right" : "icon-arrow-right_16x16";
@@ -15103,13 +14800,13 @@ var TestSurveyTabViewModel = /** @class */ (function (_super) {
         this.pages.containerCss = "sv-action-bar--pages";
         this.updatePrevNextPageActionState();
     };
-    TestSurveyTabViewModel.prototype.setActivePageItem = function (page, val) {
+    PreviewViewModel.prototype.setActivePageItem = function (page, val) {
         var item = this.getPageItemByPage(page);
         if (item) {
             item.active = val;
         }
     };
-    TestSurveyTabViewModel.prototype.getPageItemByPage = function (page) {
+    PreviewViewModel.prototype.getPageItemByPage = function (page) {
         var model = this.selectPageAction.popupModel.contentComponentData.model;
         if (!model || !Array.isArray(model.actions))
             return undefined;
@@ -15120,11 +14817,11 @@ var TestSurveyTabViewModel = /** @class */ (function (_super) {
         }
         return null;
     };
-    TestSurveyTabViewModel.prototype.updateResultsTemplate = function (theme) {
+    PreviewViewModel.prototype.updateResultsTemplate = function (theme) {
         this.simulator.survey.setCss(theme, false);
         this.simulator.survey.render();
     };
-    TestSurveyTabViewModel.prototype.setTheme = function (themeName, themeMapper) {
+    PreviewViewModel.prototype.setTheme = function (themeName, themeMapper) {
         var availableThemes = themeMapper.filter(function (item) { return item.name === themeName; });
         var theme = survey_core__WEBPACK_IMPORTED_MODULE_2__["defaultV2Css"];
         if (availableThemes.length > 0) {
@@ -15132,7 +14829,7 @@ var TestSurveyTabViewModel = /** @class */ (function (_super) {
         }
         this.isRunning ? this.updateSimulatorSurvey(this.json, theme) : this.updateResultsTemplate(theme);
     };
-    TestSurveyTabViewModel.prototype.onPropertyValueChanged = function (name, oldValue, newValue) {
+    PreviewViewModel.prototype.onPropertyValueChanged = function (name, oldValue, newValue) {
         _super.prototype.onPropertyValueChanged.call(this, name, oldValue, newValue);
         if (!this.pages.hasActions)
             return;
@@ -15146,374 +14843,27 @@ var TestSurveyTabViewModel = /** @class */ (function (_super) {
             this.selectPageAction.visible = this.isRunning && this.pageListItems.length > 1 && this.showPagesInTestSurveyTab;
         }
     };
-    TestSurveyTabViewModel.prototype.updatePrevNextPageActionState = function () {
+    PreviewViewModel.prototype.updatePrevNextPageActionState = function () {
         if (!this.prevPageAction || !this.survey)
             return;
         var isPrevEnabled = this.survey.firstPageIsStarted && this.survey.state !== "starting"
             || (!this.survey.firstPageIsStarted && !this.survey.isFirstPage);
-        // this.prevPageAction.css = isPrevEnabled ? "sv-action-bar-item--secondary" : "";
         this.prevPageAction.enabled = isPrevEnabled;
         var isNextEnabled = this.survey && this.survey.visiblePages.indexOf(this.activePage) !== this.survey.visiblePages.length - 1;
-        // this.nextPageAction.css = isNextEnabled ? "sv-action-bar-item--secondary" : "";
         this.nextPageAction.enabled = isNextEnabled;
     };
-    TestSurveyTabViewModel.prototype.onScroll = function () {
+    PreviewViewModel.prototype.onScroll = function () {
         this.survey.onScroll();
         return true;
     };
-    TestSurveyTabViewModel.prototype.dispose = function () {
+    PreviewViewModel.prototype.dispose = function () {
         if (this.selectPageAction) {
             this.selectPageAction.dispose();
         }
         this.simulator.dispose();
         _super.prototype.dispose.call(this);
     };
-    TestSurveyTabViewModel.tagRegex = /(<([^>]+)>)/ig;
-    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
-        Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["property"])({
-            defaultValue: false,
-            onSet: function (val, target) {
-                target.simulator.survey.showInvisibleElements = val;
-            }
-        })
-    ], TestSurveyTabViewModel.prototype, "showInvisibleElements", void 0);
-    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
-        Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: true })
-    ], TestSurveyTabViewModel.prototype, "showPagesInTestSurveyTab", void 0);
-    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
-        Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["property"])({
-            defaultValue: true,
-            onSet: function (value, target) {
-                if (!!target.simulator)
-                    target.simulator.isRunning = value;
-            }
-        })
-    ], TestSurveyTabViewModel.prototype, "isRunning", void 0);
-    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
-        Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["propertyArray"])()
-    ], TestSurveyTabViewModel.prototype, "pageListItems", void 0);
-    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
-        Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["property"])({
-            onSet: function (val, target) {
-                if (!!val) {
-                    var survey = target.simulator.survey;
-                    if (survey.firstPageIsStarted) {
-                        if (val === survey.pages[0]) {
-                            survey.clear(false, true);
-                        }
-                        else {
-                            if (survey.state == "starting") {
-                                survey.setPropertyValue("isStartedState", false);
-                            }
-                        }
-                    }
-                    if (survey.state !== "starting") {
-                        survey.currentPage = val;
-                    }
-                }
-                target.updatePrevNextPageActionState();
-            }
-        })
-    ], TestSurveyTabViewModel.prototype, "activePage", void 0);
-    return TestSurveyTabViewModel;
-}(survey_core__WEBPACK_IMPORTED_MODULE_2__["Base"]));
-
-
-
-/***/ }),
-
-/***/ "./src/components/tabs/theme-builder.scss":
-/*!************************************************!*\
-  !*** ./src/components/tabs/theme-builder.scss ***!
-  \************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
-/***/ }),
-
-/***/ "./src/components/tabs/theme-builder.ts":
-/*!**********************************************!*\
-  !*** ./src/components/tabs/theme-builder.ts ***!
-  \**********************************************/
-/*! exports provided: ThemeTabViewModel */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ThemeTabViewModel", function() { return ThemeTabViewModel; });
-/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
-/* harmony import */ var _simulator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../simulator */ "./src/components/simulator.ts");
-/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-core */ "survey-core");
-/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _editorLocalization__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../editorLocalization */ "./src/editorLocalization.ts");
-/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../utils/utils */ "./src/utils/utils.ts");
-
-
-
-
-
-__webpack_require__(/*! ./theme-builder.scss */ "./src/components/tabs/theme-builder.scss");
-var ThemeTabViewModel = /** @class */ (function (_super) {
-    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ThemeTabViewModel, _super);
-    function ThemeTabViewModel(surveyProvider, startThemeClasses) {
-        if (startThemeClasses === void 0) { startThemeClasses = survey_core__WEBPACK_IMPORTED_MODULE_2__["defaultV2Css"]; }
-        var _this = _super.call(this) || this;
-        _this.surveyProvider = surveyProvider;
-        _this.startThemeClasses = startThemeClasses;
-        _this.pages = new survey_core__WEBPACK_IMPORTED_MODULE_2__["ActionContainer"]();
-        _this.blockChanges = true;
-        _this.simulator = new _simulator__WEBPACK_IMPORTED_MODULE_1__["SurveySimulatorModel"]();
-        return _this;
-    }
-    Object.defineProperty(ThemeTabViewModel.prototype, "survey", {
-        get: function () {
-            return this.simulator.survey;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ThemeTabViewModel.prototype, "pageActions", {
-        get: function () {
-            return this.pages.actions;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ThemeTabViewModel.prototype, "isPageToolbarVisible", {
-        get: function () {
-            return false;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ThemeTabViewModel.prototype, "currentTheme", {
-        get: function () {
-            return this.surveyProvider.theme;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ThemeTabViewModel.prototype, "currentThemeCssVariables", {
-        get: function () {
-            return this.currentTheme.cssVariables || {};
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ThemeTabViewModel.prototype, "isMobileView", {
-        get: function () {
-            return this.surveyProvider.isMobileView;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ThemeTabViewModel.prototype, "showResults", {
-        get: function () {
-            return !this.isRunning && !this.isMobileView;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    ThemeTabViewModel.prototype.updateSimulatorSurvey = function (json, theme) {
-        var _this = this;
-        var newSurvey = this.surveyProvider.createSurvey(json || {}, "theme", this, function (survey) {
-            survey.setCss(theme, false);
-            survey.fitToContainer = true;
-            survey.addLayoutElement({
-                id: "complete-customization",
-                container: "completePage",
-                component: "svc-complete-page",
-                data: _this
-            });
-            if (!!json && !!json.locale) {
-                survey.locale = json.locale;
-            }
-            survey.applyTheme(_this.currentTheme);
-        });
-        this.simulator.survey = newSurvey;
-        if (this.onSurveyCreatedCallback)
-            this.onSurveyCreatedCallback(this.survey);
-        var self = this;
-        this.survey.onComplete.add(function (sender) {
-            self.isRunning = false;
-        });
-        if (!!this.survey["onNavigateToUrl"]) {
-            this.survey["onNavigateToUrl"].add(function (sender, options) {
-                var url = options.url;
-                options.url = "";
-                if (!!url) {
-                    var message = Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("ed.navigateToMsg") + " '" + url + "'.";
-                    if (!!this.surveyProvider) {
-                        this.surveyProvider.notify(message);
-                    }
-                    else {
-                        alert(message);
-                    }
-                }
-            });
-        }
-        this.survey.onStarted.add(function (sender) {
-            self.setActivePageItem(self.simulator.survey.activePage, true);
-        });
-        this.survey.onCurrentPageChanged.add(function (sender, options) {
-            self.activePage = options.newCurrentPage;
-            self.setActivePageItem(options.oldCurrentPage, false);
-            self.setActivePageItem(options.newCurrentPage, true);
-        });
-        this.survey.onPageVisibleChanged.add(function (sender, options) {
-            self.updatePageItem(options.page);
-            _this.updatePrevNextPageActionState();
-        });
-    };
-    ThemeTabViewModel.prototype.setJSON = function (json, currTheme) {
-        this.json = json;
-        if (json != null) {
-            if (json.cookieName) {
-                delete json.cookieName;
-            }
-        }
-        this.updateSimulatorSurvey(json, currTheme);
-    };
-    ThemeTabViewModel.prototype.initialize = function (json, options) {
-        this.blockChanges = true;
-        try {
-            this.setJSON(json, this.startThemeClasses);
-            this.updatePageList();
-            this.buildActions();
-            if (options.showPagesInTestSurveyTab !== undefined) {
-                this.showPagesInTestSurveyTab = options.showPagesInTestSurveyTab;
-            }
-        }
-        finally {
-            this.blockChanges = false;
-        }
-    };
-    ThemeTabViewModel.prototype.updatePageItem = function (page) {
-        var item = this.getPageItemByPage(page);
-        if (item) {
-            item.enabled = page.isVisible;
-        }
-    };
-    ThemeTabViewModel.prototype.getCurrentPageItem = function () {
-        return this.pageListItems[this.survey.pages.indexOf(this.survey.activePage)];
-    };
-    ThemeTabViewModel.prototype.getSelectPageTitle = function () {
-        return (this.activePage && this.getPageTitle(this.activePage, "preview-tab:selected-page", "survey-tester-selected")) || Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_3__["getLocString"])("ts.selectPage");
-    };
-    ThemeTabViewModel.prototype.getPageTitle = function (page, area, reason) {
-        if (area === void 0) { area = "preview-tab:page-list"; }
-        if (reason === void 0) { reason = "survey-tester"; }
-        var title = this.surveyProvider.getObjectDisplayName(page, area, reason, page.title);
-        if (title === page.name && title.indexOf("page") === 0) {
-            var index = this.survey.pages.indexOf(page);
-            return _editorLocalization__WEBPACK_IMPORTED_MODULE_3__["editorLocalization"].getString("ed.pageTypeName") + " " + (index + 1);
-        }
-        return title;
-    };
-    ThemeTabViewModel.prototype.updatePageList = function () {
-        var pages = [];
-        for (var i = 0; i < this.survey.pages.length; i++) {
-            var page = this.survey.pages[i];
-            pages.push({
-                id: page.name,
-                data: page,
-                title: this.getPageTitle(page),
-                enabled: page.isVisible,
-                visible: true
-            });
-        }
-        this.pageListItems = pages;
-    };
-    ThemeTabViewModel.prototype.show = function () {
-        this.showInvisibleElements = false;
-        this.activePage = this.survey.activePage;
-        this.isRunning = true;
-    };
-    ThemeTabViewModel.prototype.testAgain = function () {
-        this.setJSON(this.json, this.simulator.survey.css);
-        this.updatePageList();
-        this.show();
-    };
-    ThemeTabViewModel.prototype.buildActions = function () {
-        var _this = this;
-        var pageActions = [];
-        var setNearPage = function (isNext) {
-            var currentIndex = _this.survey.currentPageNo;
-            var shift = isNext ? 1 : -1;
-            var newIndex = currentIndex + shift;
-            if (_this.survey.state === "starting" && isNext) {
-                newIndex = 0;
-            }
-            var nearPage = _this.survey.visiblePages[newIndex];
-            if (!isNext && currentIndex === 0 && _this.survey.firstPageIsStarted
-                && _this.survey.pages.length > 0) {
-                nearPage = _this.survey.pages[0];
-            }
-            var pageIndex = _this.survey.pages.indexOf(nearPage);
-            _this.activePage = _this.survey.pages[pageIndex];
-        };
-        if (this.prevPageAction) {
-            this.prevPageAction.visible = new survey_core__WEBPACK_IMPORTED_MODULE_2__["ComputedUpdater"](function () {
-                var isRunning = _this.survey.state === "running";
-                var isActiveTab = _this.surveyProvider.activeTab === "theme";
-                return _this.surveyProvider.isMobileView && Object(_utils_utils__WEBPACK_IMPORTED_MODULE_4__["notShortCircuitAnd"])(_this.isRunning, isActiveTab, _this.pageListItems.length > 1) && isRunning;
-            });
-            this.prevPageAction.iconName = new survey_core__WEBPACK_IMPORTED_MODULE_2__["ComputedUpdater"](function () {
-                return _this.surveyProvider.isMobileView ? "icon-arrow-left" : "icon-arrow-left_16x16";
-            });
-            this.prevPageAction.iconSize = new survey_core__WEBPACK_IMPORTED_MODULE_2__["ComputedUpdater"](function () {
-                return _this.surveyProvider.isMobileView ? 24 : 16;
-            });
-            this.prevPageAction.action = function () { return setNearPage(false); };
-            pageActions.push(this.prevPageAction);
-        }
-        if (this.nextPageAction) {
-            this.nextPageAction.visible = new survey_core__WEBPACK_IMPORTED_MODULE_2__["ComputedUpdater"](function () {
-                var isRunning = _this.survey.state === "running";
-                var isActiveTab = _this.surveyProvider.activeTab === "theme";
-                return _this.surveyProvider.isMobileView && Object(_utils_utils__WEBPACK_IMPORTED_MODULE_4__["notShortCircuitAnd"])(_this.isRunning, isActiveTab, _this.pageListItems.length > 1) && isRunning;
-            });
-            this.nextPageAction.iconName = new survey_core__WEBPACK_IMPORTED_MODULE_2__["ComputedUpdater"](function () {
-                return _this.surveyProvider.isMobileView ? "icon-arrow-right" : "icon-arrow-right_16x16";
-            });
-            this.nextPageAction.iconSize = new survey_core__WEBPACK_IMPORTED_MODULE_2__["ComputedUpdater"](function () {
-                return _this.surveyProvider.isMobileView ? 24 : 16;
-            });
-            this.nextPageAction.action = function () { return setNearPage(true); };
-            pageActions.push(this.nextPageAction);
-        }
-        this.pages.actions = pageActions;
-        this.pages.containerCss = "sv-action-bar--pages";
-        this.updatePrevNextPageActionState();
-    };
-    ThemeTabViewModel.prototype.updatePrevNextPageActionState = function () {
-        if (!this.prevPageAction || !this.survey)
-            return;
-        var isPrevEnabled = this.survey.firstPageIsStarted && this.survey.state !== "starting" || (!this.survey.firstPageIsStarted && !this.survey.isFirstPage);
-        this.prevPageAction.enabled = isPrevEnabled;
-        var isNextEnabled = this.survey && this.survey.visiblePages.indexOf(this.activePage) !== this.survey.visiblePages.length - 1;
-        this.nextPageAction.enabled = isNextEnabled;
-    };
-    ThemeTabViewModel.prototype.setActivePageItem = function (page, val) {
-        var item = this.getPageItemByPage(page);
-        if (item) {
-            item.active = val;
-        }
-    };
-    ThemeTabViewModel.prototype.getPageItemByPage = function (page) {
-        var items = this.pageListItems;
-        for (var i = 0; i < items.length; i++) {
-            if (items[i].data === page)
-                return items[i];
-        }
-        return null;
-    };
-    ThemeTabViewModel.prototype.dispose = function () {
-        this.simulator.dispose();
-        _super.prototype.dispose.call(this);
-    };
+    PreviewViewModel.tagRegex = /(<([^>]+)>)/ig;
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
         Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["property"])({
             defaultValue: false,
@@ -15521,10 +14871,10 @@ var ThemeTabViewModel = /** @class */ (function (_super) {
                 target.simulator.survey.showInvisibleElements = val;
             }
         })
-    ], ThemeTabViewModel.prototype, "showInvisibleElements", void 0);
+    ], PreviewViewModel.prototype, "showInvisibleElements", void 0);
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
         Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: true })
-    ], ThemeTabViewModel.prototype, "showPagesInTestSurveyTab", void 0);
+    ], PreviewViewModel.prototype, "showPagesInTestSurveyTab", void 0);
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
         Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["property"])({
             defaultValue: true,
@@ -15533,10 +14883,10 @@ var ThemeTabViewModel = /** @class */ (function (_super) {
                     target.simulator.isRunning = value;
             }
         })
-    ], ThemeTabViewModel.prototype, "isRunning", void 0);
+    ], PreviewViewModel.prototype, "isRunning", void 0);
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
         Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["propertyArray"])()
-    ], ThemeTabViewModel.prototype, "pageListItems", void 0);
+    ], PreviewViewModel.prototype, "pageListItems", void 0);
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
         Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["property"])({
             onSet: function (val, target) {
@@ -15559,12 +14909,407 @@ var ThemeTabViewModel = /** @class */ (function (_super) {
                 target.updatePrevNextPageActionState();
             }
         })
-    ], ThemeTabViewModel.prototype, "activePage", void 0);
-    return ThemeTabViewModel;
+    ], PreviewViewModel.prototype, "activePage", void 0);
+    return PreviewViewModel;
 }(survey_core__WEBPACK_IMPORTED_MODULE_2__["Base"]));
 
 
 
+/***/ }),
+
+/***/ "./src/components/tabs/test-plugin.ts":
+/*!********************************************!*\
+  !*** ./src/components/tabs/test-plugin.ts ***!
+  \********************************************/
+/*! exports provided: TabTestPlugin */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TabTestPlugin", function() { return TabTestPlugin; });
+/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../utils/utils */ "./src/utils/utils.ts");
+/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-core */ "survey-core");
+/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _editorLocalization__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../editorLocalization */ "./src/editorLocalization.ts");
+/* harmony import */ var _simulator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../simulator */ "./src/components/simulator.ts");
+/* harmony import */ var _test__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./test */ "./src/components/tabs/test.ts");
+
+
+
+
+
+var TabTestPlugin = /** @class */ (function () {
+    function TabTestPlugin(creator) {
+        this.creator = creator;
+        this.simulatorTheme = survey_core__WEBPACK_IMPORTED_MODULE_1__["surveyCss"][survey_core__WEBPACK_IMPORTED_MODULE_1__["defaultV2ThemeName"]];
+        creator.addPluginTab("test", this);
+        this.setPreviewTheme(this.creator.themeForPreview);
+        this.createActions().forEach(function (action) { return creator.toolbar.actions.push(action); });
+    }
+    TabTestPlugin.prototype.setDevice = function (newVal) {
+        this.model.simulator.device = newVal;
+        this.model.simulator.resetZoomParameters();
+        var currentType = _simulator__WEBPACK_IMPORTED_MODULE_3__["simulatorDevices"][this.model.simulator.device].deviceType;
+        this.orientationSelectorAction.enabled = currentType != "desktop";
+        this.deviceSelectorAction.iconName = "icon-device-" + currentType;
+        this.deviceSelectorAction.title = Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_2__["getLocString"])("pe.simulator");
+    };
+    TabTestPlugin.prototype.setDefaultLanguageOption = function (opt) {
+        var _this = this;
+        var vis = opt === true || opt === "all" || (opt === "auto" && this.model.survey.getUsedLocales().length > 1);
+        this.languageSelectorAction.visible = vis;
+        var languages = [];
+        if (vis) {
+            languages = this.getLanguages(opt !== "all" ? this.model.survey.getUsedLocales() : null);
+        }
+        this.languageSelectorAction.popupModel.contentComponentData.model.setItems(languages);
+        this.languageSelectorAction.data.selectedItem = languages.filter(function (lang) { return lang.id === _this.model.activeLanguage; })[0];
+    };
+    TabTestPlugin.prototype.getLanguages = function (usedLanguages) {
+        if (usedLanguages === void 0) { usedLanguages = null; }
+        var res = [];
+        var locales = !!usedLanguages && usedLanguages.length > 1 ? usedLanguages : survey_core__WEBPACK_IMPORTED_MODULE_1__["surveyLocalization"].getLocales();
+        for (var i = 0; i < locales.length; i++) {
+            var loc = locales[i];
+            res.push({ id: loc, title: _editorLocalization__WEBPACK_IMPORTED_MODULE_2__["editorLocalization"].getLocaleName(loc) });
+        }
+        return res;
+    };
+    TabTestPlugin.prototype.updateActions = function () {
+        this.languageSelectorAction.title = _editorLocalization__WEBPACK_IMPORTED_MODULE_2__["editorLocalization"].getLocaleName(this.model.activeLanguage);
+        this.languageSelectorAction.visible = true;
+        if (this.creator.showSimulatorInTestSurveyTab) {
+            this.setDevice(this.model.simulator.device);
+            this.deviceSelectorAction.data.selectedItem = { id: this.model.simulator.device };
+            this.orientationSelectorAction.title = Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_2__["getLocString"])("pe.portraitOrientation");
+        }
+        if (this.creator.showInvisibleElementsInTestSurveyTab) {
+            this.invisibleToggleAction.css = this.model.showInvisibleElements ? "sv-action-bar-item--active" : "";
+            this.invisibleToggleAction.visible = this.model.isRunning;
+        }
+        if (this.creator.showDefaultLanguageInTestSurveyTab != undefined) {
+            this.setDefaultLanguageOption(this.creator.showDefaultLanguageInTestSurveyTab);
+        }
+    };
+    TabTestPlugin.prototype.setPreviewTheme = function (themeName) {
+        this.simulatorTheme = survey_core__WEBPACK_IMPORTED_MODULE_1__["surveyCss"][themeName] || survey_core__WEBPACK_IMPORTED_MODULE_1__["surveyCss"][survey_core__WEBPACK_IMPORTED_MODULE_1__["defaultV2ThemeName"]];
+    };
+    TabTestPlugin.prototype.createVisibleUpdater = function () {
+        var _this = this;
+        return new survey_core__WEBPACK_IMPORTED_MODULE_1__["ComputedUpdater"](function () { return _this.creator.activeTab === "test"; });
+    };
+    TabTestPlugin.prototype.activate = function () {
+        this.model = new _test__WEBPACK_IMPORTED_MODULE_4__["TestSurveyTabViewModel"](this.creator, this.simulatorTheme);
+        this.model.simulator.landscape = this.creator.previewOrientation != "portrait";
+        this.update();
+    };
+    TabTestPlugin.prototype.update = function () {
+        var _this = this;
+        if (!this.model)
+            return;
+        var options = {
+            showPagesInTestSurveyTab: this.creator.showPagesInTestSurveyTab,
+        };
+        this.model.testAgainAction = this.testAgainAction;
+        this.model.prevPageAction = this.prevPageAction;
+        this.model.nextPageAction = this.nextPageAction;
+        this.model.initialize(this.creator.JSON, options);
+        this.updateActions();
+        this.model.show();
+        this.model.onPropertyChanged.add(function (sender, options) {
+            if (options.name === "isRunning") {
+                _this.invisibleToggleAction && (_this.invisibleToggleAction.visible = _this.model.isRunning);
+                _this.testAgainAction.visible = !_this.model.isRunning;
+            }
+        });
+    };
+    TabTestPlugin.prototype.deactivate = function () {
+        if (this.model) {
+            this.simulatorTheme = this.model.simulator.survey.css;
+            this.model.onSurveyCreatedCallback = undefined;
+            this.model.dispose();
+            this.model = undefined;
+        }
+        this.languageSelectorAction.visible = false;
+        this.testAgainAction.visible = false;
+        this.invisibleToggleAction && (this.invisibleToggleAction.visible = false);
+        return true;
+    };
+    TabTestPlugin.prototype.getAvailableThemes = function (themeMapper) {
+        var availableThemesToItems = [];
+        for (var i = 0; i < themeMapper.length; i++) {
+            var item = themeMapper[i];
+            var action = new survey_core__WEBPACK_IMPORTED_MODULE_1__["Action"]({ id: item.name + "_themeSwitcher", locTitleName: this.getThemeLocName(item.name) });
+            action.value = item.name;
+            availableThemesToItems.push(action);
+        }
+        return availableThemesToItems;
+    };
+    TabTestPlugin.prototype.getThemeLocName = function (name) {
+        return "ed." + name + "Theme";
+    };
+    TabTestPlugin.prototype.createActions = function () {
+        var _this = this;
+        var items = [];
+        this.testAgainAction = new survey_core__WEBPACK_IMPORTED_MODULE_1__["Action"]({
+            id: "testSurveyAgain",
+            visible: false,
+            locTitleName: "ed.testSurveyAgain",
+            action: function () {
+                _this.model.testAgain();
+            }
+        });
+        if (this.creator.showSimulatorInTestSurveyTab) {
+            var deviceSelectorItems = Object.keys(_simulator__WEBPACK_IMPORTED_MODULE_3__["simulatorDevices"])
+                .filter(function (key) { return !!_simulator__WEBPACK_IMPORTED_MODULE_3__["simulatorDevices"][key].title; })
+                .map(function (key) { var _a; return ({ id: key, title: _simulator__WEBPACK_IMPORTED_MODULE_3__["simulatorDevices"][key].title, visibleIndex: (_a = _simulator__WEBPACK_IMPORTED_MODULE_3__["simulatorDevices"][key].visibleIndex) !== null && _a !== void 0 ? _a : Number.MAX_VALUE }); });
+            this.deviceSelectorAction = Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["createDropdownActionModel"])({
+                id: "deviceSelector",
+                iconName: "icon-device-desktop",
+                mode: "small",
+                visible: new survey_core__WEBPACK_IMPORTED_MODULE_1__["ComputedUpdater"](function () {
+                    return Object(_utils_utils__WEBPACK_IMPORTED_MODULE_0__["notShortCircuitAnd"])(_this.creator.activeTab === "test", _this.creator.showSimulatorInTestSurveyTab);
+                }),
+            }, {
+                items: deviceSelectorItems,
+                allowSelection: true,
+                onSelectionChanged: function (item) { _this.setDevice(item.id); },
+                horizontalPosition: "center",
+                onHide: function () { _this.deviceSelectorAction.enabled = true; },
+                onShow: function () { _this.deviceSelectorAction.enabled = false; }
+            });
+            items.push(this.deviceSelectorAction);
+            this.orientationSelectorAction = new survey_core__WEBPACK_IMPORTED_MODULE_1__["Action"]({
+                id: "orientationSelector",
+                iconName: "icon-device-rotate",
+                mode: "small",
+                visible: new survey_core__WEBPACK_IMPORTED_MODULE_1__["ComputedUpdater"](function () {
+                    return Object(_utils_utils__WEBPACK_IMPORTED_MODULE_0__["notShortCircuitAnd"])(_this.creator.activeTab === "test", _this.creator.showSimulatorInTestSurveyTab);
+                }),
+                action: function () {
+                    _this.model.simulator.landscape = !_this.model.simulator.landscape;
+                    _this.orientationSelectorAction.title = Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_2__["getLocString"])(!_this.model.simulator.landscape ? "pe.landscapeOrientation" : "pe.portraitOrientation");
+                }
+            });
+            items.push(this.orientationSelectorAction);
+        }
+        if (this.creator.showInvisibleElementsInTestSurveyTab) {
+            this.invisibleToggleAction = new survey_core__WEBPACK_IMPORTED_MODULE_1__["Action"]({
+                id: "showInvisible",
+                iconName: "icon-invisible-items",
+                mode: "small",
+                needSeparator: new survey_core__WEBPACK_IMPORTED_MODULE_1__["ComputedUpdater"](function () {
+                    return !_this.creator.isMobileView;
+                }),
+                locTitleName: "ts.showInvisibleElements",
+                visible: false,
+                action: function () {
+                    _this.model.showInvisibleElements = !_this.model.showInvisibleElements;
+                    _this.invisibleToggleAction.css = _this.model.showInvisibleElements ? "sv-action-bar-item--active" : "";
+                    _this.invisibleToggleAction.title = Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_2__["getLocString"])(!_this.model.showInvisibleElements ? "ts.showInvisibleElements" : "ts.hideInvisibleElements");
+                }
+            });
+            items.push(this.invisibleToggleAction);
+        }
+        var themeMapper = survey_core__WEBPACK_IMPORTED_MODULE_1__["StylesManager"].getIncludedThemeCss();
+        var sequence = ["defaultV2", "modern", "default"];
+        themeMapper = themeMapper.sort(function (theme1, theme2) {
+            return sequence.indexOf(theme1.name) > sequence.indexOf(theme2.name) ? 1 : -1;
+        });
+        var availableThemesToItems = this.getAvailableThemes(themeMapper);
+        if (this.creator.allowChangeThemeInPreview && availableThemesToItems.length > 1 && !this.creator.showThemeTab) {
+            this.changeThemeModel = new survey_core__WEBPACK_IMPORTED_MODULE_1__["ListModel"](availableThemesToItems, function (item) {
+                if (!!_this.model) {
+                    _this.model.setTheme(item.value, themeMapper);
+                }
+                _this.changeThemeAction.locTitleName = _this.getThemeLocName(item.value);
+                _this.changeThemeAction.locStrsChanged();
+                _this.changeThemePopupModel.toggleVisibility();
+            }, true);
+            this.changeThemeModel.locOwner = this.creator;
+            this.changeThemePopupModel = new survey_core__WEBPACK_IMPORTED_MODULE_1__["PopupModel"]("sv-list", { model: this.changeThemeModel }, "bottom", "center");
+            var getStartThemeName = function () {
+                var availableThemes = themeMapper.filter(function (item) { return item.theme.root === _this.simulatorTheme.root; });
+                return availableThemes.length > 0 ? availableThemes[0].name : "defaultV2";
+            };
+            this.changeThemeAction = new survey_core__WEBPACK_IMPORTED_MODULE_1__["Action"]({
+                id: "themeSwitcher",
+                iconName: "icon-theme",
+                component: "sv-action-bar-item-dropdown",
+                mode: "large",
+                locTitleName: this.getThemeLocName(getStartThemeName()),
+                needSeparator: true,
+                visible: new survey_core__WEBPACK_IMPORTED_MODULE_1__["ComputedUpdater"](function () {
+                    return Object(_utils_utils__WEBPACK_IMPORTED_MODULE_0__["notShortCircuitAnd"])(_this.creator.showSimulatorInTestSurveyTab, _this.creator.activeTab === "test");
+                }),
+                action: function () {
+                    _this.changeThemePopupModel.toggleVisibility();
+                },
+                popupModel: this.changeThemePopupModel
+            });
+            items.push(this.changeThemeAction);
+        }
+        this.languageSelectorAction = Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["createDropdownActionModel"])({
+            id: "languageSelector",
+            iconName: "icon-language",
+            visible: false,
+            mode: new survey_core__WEBPACK_IMPORTED_MODULE_1__["ComputedUpdater"](function () {
+                return _this.creator.isMobileView ? "small" : "large";
+            }),
+        }, {
+            items: [],
+            allowSelection: true,
+            onSelectionChanged: function (item) {
+                _this.model.activeLanguage = item.id;
+                _this.languageSelectorAction.title = _editorLocalization__WEBPACK_IMPORTED_MODULE_2__["editorLocalization"].getLocaleName(item.id);
+            },
+            horizontalPosition: "center",
+            onHide: function () { _this.languageSelectorAction.enabled = true; },
+            onShow: function () { _this.languageSelectorAction.enabled = false; }
+        });
+        items.push(this.languageSelectorAction);
+        this.designerAction = new survey_core__WEBPACK_IMPORTED_MODULE_1__["Action"]({
+            id: "svd-designer",
+            iconName: "icon-config",
+            action: function () { _this.creator.makeNewViewActive("designer"); },
+            visible: this.createVisibleUpdater(),
+            locTitleName: "ed.designer",
+            showTitle: false
+        });
+        this.previewAction = new survey_core__WEBPACK_IMPORTED_MODULE_1__["Action"]({
+            id: "svd-preview",
+            iconName: "icon-preview",
+            active: true,
+            visible: this.createVisibleUpdater(),
+            locTitleName: "tabs.preview",
+            showTitle: false,
+            action: function () { }
+        });
+        this.prevPageAction = new survey_core__WEBPACK_IMPORTED_MODULE_1__["Action"]({
+            id: "prevPage",
+            iconName: "icon-arrow-left_16x16",
+            needSeparator: new survey_core__WEBPACK_IMPORTED_MODULE_1__["ComputedUpdater"](function () {
+                return _this.creator.isMobileView;
+            }),
+            visible: false
+        });
+        this.nextPageAction = new survey_core__WEBPACK_IMPORTED_MODULE_1__["Action"]({
+            id: "nextPage",
+            iconName: "icon-arrow-right_16x16",
+            visible: false
+        });
+        return items;
+    };
+    TabTestPlugin.prototype.addFooterActions = function () {
+        this.creator.footerToolbar.actions.push(this.designerAction);
+        this.creator.footerToolbar.actions.push(this.previewAction);
+        this.creator.footerToolbar.actions.push(this.prevPageAction);
+        this.creator.footerToolbar.actions.push(this.nextPageAction);
+        this.invisibleToggleAction && (this.creator.footerToolbar.actions.push(this.invisibleToggleAction));
+        // this.languageSelectorAction && (this.creator.footerToolbar.actions.push(this.languageSelectorAction));
+    };
+    return TabTestPlugin;
+}());
+
+
+
+/***/ }),
+
+/***/ "./src/components/tabs/test.scss":
+/*!***************************************!*\
+  !*** ./src/components/tabs/test.scss ***!
+  \***************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
+/***/ "./src/components/tabs/test.ts":
+/*!*************************************!*\
+  !*** ./src/components/tabs/test.ts ***!
+  \*************************************/
+/*! exports provided: TestSurveyTabViewModel */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TestSurveyTabViewModel", function() { return TestSurveyTabViewModel; });
+/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
+/* harmony import */ var _preview__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./preview */ "./src/components/tabs/preview.ts");
+
+
+__webpack_require__(/*! ./test.scss */ "./src/components/tabs/test.scss");
+var TestSurveyTabViewModel = /** @class */ (function (_super) {
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(TestSurveyTabViewModel, _super);
+    function TestSurveyTabViewModel(surveyProvider, startThemeClasses) {
+        return _super.call(this, surveyProvider, startThemeClasses) || this;
+    }
+    TestSurveyTabViewModel.prototype.getTabName = function () {
+        return "test";
+    };
+    TestSurveyTabViewModel.prototype.getShowResults = function () {
+        return this.surveyProvider.previewShowResults && !this.isRunning && !this.isMobileView;
+    };
+    return TestSurveyTabViewModel;
+}(_preview__WEBPACK_IMPORTED_MODULE_1__["PreviewViewModel"]));
+
+
+
+/***/ }),
+
+/***/ "./src/components/tabs/theme-builder.scss":
+/*!************************************************!*\
+  !*** ./src/components/tabs/theme-builder.scss ***!
+  \************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
+/***/ "./src/components/tabs/theme-builder.ts":
+/*!**********************************************!*\
+  !*** ./src/components/tabs/theme-builder.ts ***!
+  \**********************************************/
+/*! exports provided: ThemeTabViewModel */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ThemeTabViewModel", function() { return ThemeTabViewModel; });
+/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
+/* harmony import */ var _preview__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./preview */ "./src/components/tabs/preview.ts");
+
+
+__webpack_require__(/*! ./theme-builder.scss */ "./src/components/tabs/theme-builder.scss");
+var ThemeTabViewModel = /** @class */ (function (_super) {
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ThemeTabViewModel, _super);
+    function ThemeTabViewModel(surveyProvider, startThemeClasses) {
+        return _super.call(this, surveyProvider, startThemeClasses) || this;
+    }
+    Object.defineProperty(ThemeTabViewModel.prototype, "currentTheme", {
+        get: function () {
+            return this.surveyProvider.theme;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ThemeTabViewModel.prototype, "currentThemeCssVariables", {
+        get: function () {
+            return this.currentTheme.cssVariables || {};
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ThemeTabViewModel.prototype.getTabName = function () { return "theme"; };
+    return ThemeTabViewModel;
+}(_preview__WEBPACK_IMPORTED_MODULE_1__["PreviewViewModel"]));
+
+
+
 /***/ }),
 
 /***/ "./src/components/tabs/theme-custom-questions/background-corner-radius.ts":
@@ -15710,6 +15455,7 @@ function getElementsJSON() {
             title: Object(_editorLocalization__WEBPACK_IMPORTED_MODULE_1__["getLocString"])("theme.opacity"),
             min: 0,
             max: 100,
+            defaultValue: 100,
             unit: "%",
             titleLocation: "left"
         }
@@ -15755,7 +15501,7 @@ if (!survey_core__WEBPACK_IMPORTED_MODULE_0__["ComponentCollection"].Instance.ge
             return !!value ? createColor(value) : "";
         },
         valueFromQuestion: function (value) {
-            return typeof value == "string" ? Object(_utils_utils__WEBPACK_IMPORTED_MODULE_2__["parseColor"])(value) : value;
+            return typeof value == "string" || typeof value == "undefined" ? Object(_utils_utils__WEBPACK_IMPORTED_MODULE_2__["parseColor"])(value) : value;
         },
         onCreated: function (question) {
             question.contentPanel.questions.forEach(function (q) { return q.allowRootStyle = false; });
@@ -15901,6 +15647,8 @@ if (!survey_core__WEBPACK_IMPORTED_MODULE_1__["ComponentCollection"].Instance.ge
             color.visible = question.name !== "surveyTitle" && question.name !== "surveyDescription";
             var placeholderColor = question.contentPanel.getQuestionByName("placeholdercolor");
             placeholderColor.visible = question.name === "editorFont";
+            var family = question.contentPanel.getQuestionByName("family");
+            family.choices = [].concat(DefaultFonts);
         },
         valueToQuestion: function (value) {
             return JSON.parse(JSON.stringify(value));
@@ -16645,17 +16393,19 @@ var ThemeModel = /** @class */ (function (_super) {
         return findSuitableTheme(themeName, this.colorPalette, this.isPanelless, probeThemeFullName);
     };
     ThemeModel.prototype.fromJSON = function (json, options) {
+        var _this = this;
         if (!json)
             return;
-        _super.prototype.fromJSON.call(this, json, options);
-        var headerModel = new _header_model__WEBPACK_IMPORTED_MODULE_8__["HeaderModel"]();
-        headerModel.fromJSON(json.header || {});
-        headerModel.owner = this;
-        this.header = headerModel;
+        var _json = {};
+        Object(_utils_utils__WEBPACK_IMPORTED_MODULE_10__["assign"])(_json, json);
+        delete _json["header"];
+        delete _json["cssVariables"];
+        _super.prototype.fromJSON.call(this, _json, options);
+        this.header.fromJSON(json.header || {});
         if (json.cssVariables) {
             this["primaryColor"] = json.cssVariables["--sjs-primary-backcolor"];
             _super.prototype.fromJSON.call(this, json.cssVariables, options);
-            headerModel.setCssVariables(json.cssVariables);
+            this.header.setCssVariables(json.cssVariables);
             this.scale = !!this["--sjs-base-unit"] ? Object(_utils_utils__WEBPACK_IMPORTED_MODULE_10__["roundTo2Decimals"])(parseFloat(this["--sjs-base-unit"]) * 100 / 8) : undefined;
             this.fontSize = !!this["--sjs-font-size"] ? Object(_utils_utils__WEBPACK_IMPORTED_MODULE_10__["roundTo2Decimals"])(parseFloat(this["--sjs-font-size"]) * 100 / 16) : undefined;
             this.cornerRadius = this["--sjs-corner-radius"] ? Object(_utils_utils__WEBPACK_IMPORTED_MODULE_10__["roundTo2Decimals"])(parseFloat(this["--sjs-corner-radius"])) : undefined;
@@ -16663,6 +16413,11 @@ var ThemeModel = /** @class */ (function (_super) {
                 this.backgroundOpacity = json["backgroundOpacity"] * 100;
             this["questionPanel"] = Object(_theme_custom_questions_background_corner_radius__WEBPACK_IMPORTED_MODULE_6__["backgroundCornerRadiusFromCssVariable"])(this.getPropertyByName("questionPanel"), json.cssVariables, "--sjs-general-backcolor", "--sjs-general-backcolor-dark", this.cornerRadius);
             this["editorPanel"] = Object(_theme_custom_questions_background_corner_radius__WEBPACK_IMPORTED_MODULE_6__["backgroundCornerRadiusFromCssVariable"])(this.getPropertyByName("editorPanel"), json.cssVariables, "--sjs-general-backcolor-dim-light", "--sjs-general-backcolor-dim-dark", this.cornerRadius);
+            survey_core__WEBPACK_IMPORTED_MODULE_1__["Serializer"].getProperties("theme").forEach(function (property) {
+                if (property.type === "font") {
+                    _this[property.name] = Object(_theme_custom_questions_font_settings__WEBPACK_IMPORTED_MODULE_5__["fontsettingsFromCssVariable"])(property, json.cssVariables);
+                }
+            });
             this["pageTitle"] = Object(_theme_custom_questions_font_settings__WEBPACK_IMPORTED_MODULE_5__["fontsettingsFromCssVariable"])(this.getPropertyByName("pageTitle"), json.cssVariables, "--sjs-general-dim-forecolor");
             this["pageDescription"] = Object(_theme_custom_questions_font_settings__WEBPACK_IMPORTED_MODULE_5__["fontsettingsFromCssVariable"])(this.getPropertyByName("pageDescription"), json.cssVariables, "--sjs-general-dim-forecolor-light");
             this["questionTitle"] = Object(_theme_custom_questions_font_settings__WEBPACK_IMPORTED_MODULE_5__["fontsettingsFromCssVariable"])(this.getPropertyByName("questionTitle"), json.cssVariables, "--sjs-general-forecolor");
@@ -16976,6 +16731,7 @@ survey_core__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addProperties("theme", [{
         onPropertyEditorUpdate: function (obj, editor) {
             if (!!editor) {
                 editor.allowClear = false;
+                editor.choices = [].concat(_theme_custom_questions_font_settings__WEBPACK_IMPORTED_MODULE_5__["DefaultFonts"]);
             }
         }
     }, {
@@ -17292,6 +17048,7 @@ var ThemeTabPlugin = /** @class */ (function () {
         this.simulatorCssClasses = survey_core__WEBPACK_IMPORTED_MODULE_1__["surveyCss"][survey_core__WEBPACK_IMPORTED_MODULE_1__["defaultV2ThemeName"]];
         this.createActions().forEach(function (action) { return creator.toolbar.actions.push(action); });
         this.propertyGrid = new _property_grid__WEBPACK_IMPORTED_MODULE_7__["PropertyGridModel"](undefined, creator, _theme_model_definition__WEBPACK_IMPORTED_MODULE_11__["themeModelPropertyGridDefinition"]);
+        this.propertyGrid.surveyInstanceCreatedArea = "theme-tab:property-grid";
         var propertyGridViewModel = new _property_grid_property_grid_view_model__WEBPACK_IMPORTED_MODULE_8__["PropertyGridViewModel"](this.propertyGrid, creator);
         this.propertyGridTab = this.creator.sidebar.addTab("theme", "svc-property-grid", propertyGridViewModel);
         this.propertyGridTab.caption = _editorLocalization__WEBPACK_IMPORTED_MODULE_3__["editorLocalization"].getString("ed.themePropertyGridTitle");
@@ -17364,7 +17121,7 @@ var ThemeTabPlugin = /** @class */ (function () {
         this.addSubGroupTitle(survey.getPanelByName("appearanceinput"), "theme.lines");
     };
     ThemeTabPlugin.prototype.updatePropertyGridEditorsAvailability = function () {
-        var simulatorSurvey = this.model.simulator.survey;
+        var simulatorSurvey = this.model.survey;
         var page = this.propertyGrid.survey.pages[0];
         var header = page === null || page === void 0 ? void 0 : page.getElementByName("header");
         if (header && header.elements.length > 0) {
@@ -17571,7 +17328,7 @@ var ThemeTabPlugin = /** @class */ (function () {
     };
     ThemeTabPlugin.prototype.deactivate = function () {
         if (this.model) {
-            this.simulatorCssClasses = this.model.simulator.survey.css;
+            this.simulatorCssClasses = this.model.survey.css;
             this.model.onPropertyChanged.clear();
             this.themeModel.onThemeSelected.clear();
             this.themeModel.onThemePropertyChanged.clear();
@@ -22513,14 +22270,14 @@ var SurveyCreatorModel = /** @class */ (function (_super) {
     SurveyCreatorModel.prototype.createSurvey = function (json, reason, model, callback, area) {
         var _a;
         var survey = this.createSurveyCore(json, reason);
-        if (reason !== "designer" && reason !== "test") {
+        if (reason !== "designer" && reason !== "test" && reason !== "theme") {
             survey.fitToContainer = false;
         }
         if (reason === "designer" || reason === "modal-question-editor") {
             initializeDesignTimeSurveyModel(survey, this);
         }
         survey["needRenderIcons"] = false;
-        if (reason != "designer" && reason != "test") {
+        if (reason != "designer" && reason != "test" && reason !== "theme") {
             survey.locale = _editorLocalization__WEBPACK_IMPORTED_MODULE_3__["editorLocalization"].currentLocale;
             if (!json["clearInvisibleValues"]) {
                 survey.clearInvisibleValues = "onComplete";
@@ -22539,7 +22296,7 @@ var SurveyCreatorModel = /** @class */ (function (_super) {
         if (reason === "designer") {
             this.onDesignerSurveyCreated.fire(this, { survey: survey });
         }
-        if (reason === "test") {
+        if (reason === "test" || reason === "theme") {
             this.onPreviewSurveyCreated.fire(this, { survey: survey });
         }
         return survey;
@@ -22548,13 +22305,11 @@ var SurveyCreatorModel = /** @class */ (function (_super) {
         var hash = {};
         hash["designer"] = "designer-tab";
         hash["test"] = "preview-tab";
-        hash["property-grid"] = "property-grid";
         hash["default-value"] = "default-value-popup-editor";
         hash["condition-builder"] = "logic-rule:condition-editor";
         hash["logic-item-editor"] = "logic-rule:action-editor";
         hash["logic-items"] = "logic-tab:condition-list";
         hash["theme"] = "theme-tab";
-        hash["theme_editor"] = "theme-tab:property-grid";
         hash["translation_settings"] = "translation-tab:language-list";
         hash["translation_strings"] = "translation-tab:table";
         hash["translation_strings_header"] = "translation-tab:table-header";
@@ -22562,7 +22317,7 @@ var SurveyCreatorModel = /** @class */ (function (_super) {
         hash["fast-entry"] = "table-values-popup-editor";
         hash["modal-question-editor"] = "matrix-cell-question-popup-editor";
         var res = hash[reason];
-        return !!res ? res : "internal-use";
+        return !!res ? res : reason;
     };
     SurveyCreatorModel.prototype.createSurveyCore = function (json, reason) {
         if (json === void 0) { json = {}; }
@@ -26581,7 +26336,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_78__ = __webpack_require__(/*! survey-core */ "survey-core");
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_78___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_78__);
 var Version;
-Version = "" + "1.11.1";
+Version = "" + "1.11.2";
 //should be loaded before other styles for easier override 
 __webpack_require__(/*! ../utils/context-button.scss */ "./src/utils/context-button.scss");
 
@@ -26678,7 +26433,7 @@ __webpack_require__(/*! ../utils/design.scss */ "./src/utils/design.scss");
 __webpack_require__(/*! ../utils/layout.scss */ "./src/utils/layout.scss");
 
 survey_core__WEBPACK_IMPORTED_MODULE_78__["settings"].supportCreatorV2 = true;
-Object(survey_core__WEBPACK_IMPORTED_MODULE_78__["checkLibraryVersion"])("" + "1.11.1", "survey-creator-core");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_78__["checkLibraryVersion"])("" + "1.11.2", "survey-creator-core");
 
 
 /***/ }),
@@ -34012,6 +33767,7 @@ var PropertyGridModel = /** @class */ (function () {
         if (obj === void 0) { obj = null; }
         if (options === void 0) { options = new _creator_settings__WEBPACK_IMPORTED_MODULE_6__["EmptySurveyCreatorOptions"](); }
         if (propertyGridDefinition === void 0) { propertyGridDefinition = null; }
+        this.surveyInstanceCreatedArea = "property-grid";
         this.isCellCreating = false;
         this.options = options;
         this.propertyGridDefinition = propertyGridDefinition;
@@ -34251,7 +34007,7 @@ var PropertyGridModel = /** @class */ (function () {
         });
     };
     PropertyGridModel.prototype.createSurvey = function (json, callback) {
-        return this.options.createSurvey(json, "property-grid", this, callback);
+        return this.options.createSurvey(json, this.surveyInstanceCreatedArea, this, callback);
     };
     PropertyGridModel.prototype.getSurveyJSON = function () {
         var res = {};
@@ -35929,7 +35685,7 @@ var PropertyGridEditorMatrixPages = /** @class */ (function (_super) {
         return prop.type == "surveypages";
     };
     PropertyGridEditorMatrixPages.prototype.addItem = function (creator, obj, question) {
-        creator.addPage();
+        creator.addPage(undefined, false);
     };
     PropertyGridEditorMatrixPages.prototype.getColumnClassName = function (obj, prop) {
         return "page@" + obj.getType();