survey-creator-react 1.12.3 → 1.12.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-creator-react",
-  "version": "1.12.3",
+  "version": "1.12.4",
   "description": "Use SurveyJS Creator to create or edit JSON for SurveyJS Form Library.",
   "keywords": [
     "Survey",
@@ -29,9 +29,9 @@
     "ace-builds": "^1.4.12",
     "react": "^16.5.0 || ^17.0.1 || ^18.1.0",
     "react-dom": "^16.5.0 || ^17.0.1 || ^18.1.0",
-    "survey-core": "1.12.3",
-    "survey-react-ui": "1.12.3",
-    "survey-creator-core": "1.12.3"
+    "survey-core": "1.12.4",
+    "survey-react-ui": "1.12.4",
+    "survey-creator-core": "1.12.4"
   },
   "peerDependenciesMeta": {
     "ace-builds": {

package/survey-creator-react.js

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator React v1.12.3
+ * SurveyJS Creator React v1.12.4
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -1874,6 +1874,13 @@ var CreatorSurveyPageComponent = /** @class */ (function (_super) {
         }
         this.model = new survey_creator_core__WEBPACK_IMPORTED_MODULE_4__.PageAdorner(props.creator, props.page);
     };
+    CreatorSurveyPageComponent.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _a;
+        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
+        if (!!((_a = this.rootRef) === null || _a === void 0 ? void 0 : _a.current)) {
+            this.model.rootElement = this.rootRef.current;
+        }
+    };
     CreatorSurveyPageComponent.prototype.getUpdatedModelProps = function () {
         return ["creator", "page"];
     };
@@ -1881,17 +1888,14 @@ var CreatorSurveyPageComponent = /** @class */ (function (_super) {
         return this.model;
     };
     CreatorSurveyPageComponent.prototype.componentDidMount = function () {
-        var _this = this;
         _super.prototype.componentDidMount.call(this);
-        this.model.onPageSelectedCallback = function () {
-            if (!!_this.rootRef.current) {
-                survey_creator_core__WEBPACK_IMPORTED_MODULE_4__.SurveyHelper.scrollIntoViewIfNeeded(_this.rootRef.current);
-            }
-        };
+        if (!!this.rootRef.current) {
+            this.model.rootElement = this.rootRef.current;
+        }
     };
     CreatorSurveyPageComponent.prototype.componentWillUnmount = function () {
         _super.prototype.componentWillUnmount.call(this);
-        this.model.onPageSelectedCallback = undefined;
+        this.model.dispose();
     };
     CreatorSurveyPageComponent.prototype.canRender = function () {
         return (!!this.model &&
@@ -2029,8 +2033,10 @@ __webpack_require__.r(__webpack_exports__);
 
 var QuestionAdornerComponent = /** @class */ (function (_super) {
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(QuestionAdornerComponent, _super);
-    function QuestionAdornerComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function QuestionAdornerComponent(props) {
+        var _this = _super.call(this, props) || this;
+        _this.rootRef = react__WEBPACK_IMPORTED_MODULE_2__.createRef();
+        return _this;
     }
     QuestionAdornerComponent.prototype.createModel = function (props) {
         if (this.modelValue) {
@@ -2061,8 +2067,11 @@ var QuestionAdornerComponent = /** @class */ (function (_super) {
         var _this = this;
         var allowInteractions = this.model.element
             .isInteractiveDesignElement;
+        var titleForCollapsedState = this.renderQuestionTitle();
         var content = this.renderContent(allowInteractions);
-        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { ref: this.rootRef, "data-sv-drop-target-survey-element": this.model.element.name || null, className: "svc-question__adorner " + this.model.rootCss(), onDoubleClick: function (e) { allowInteractions && _this.model.dblclick(e.nativeEvent); e.stopPropagation(); }, onMouseLeave: function (e) { return allowInteractions && _this.model.hover(e.nativeEvent, e.currentTarget); }, onMouseOver: function (e) { return allowInteractions && _this.model.hover(e.nativeEvent, e.currentTarget); } }, content));
+        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { ref: this.rootRef, "data-sv-drop-target-survey-element": this.model.element.name || null, className: this.model.rootCss(), onDoubleClick: function (e) { allowInteractions && _this.model.dblclick(e.nativeEvent); e.stopPropagation(); }, onMouseLeave: function (e) { return allowInteractions && _this.model.hover(e.nativeEvent, e.currentTarget); }, onMouseOver: function (e) { return allowInteractions && _this.model.hover(e.nativeEvent, e.currentTarget); } },
+            titleForCollapsedState,
+            content));
     };
     QuestionAdornerComponent.prototype.disableTabStop = function () {
         return true;
@@ -2094,19 +2103,31 @@ var QuestionAdornerComponent = /** @class */ (function (_super) {
         return survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.ReactElementFactory.Instance.createElement("svc-question-banner", this.model.createBannerParams());
     };
     QuestionAdornerComponent.prototype.renderQuestionTitle = function () {
+        var _this = this;
         if (!this.model.showHiddenTitle)
             return null;
         var element = this.model.element;
         return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: this.model.cssCollapsedHiddenHeader },
-            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: this.model.cssCollapsedHiddenTitle }, element.title ? survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.SurveyElementBase.renderLocString(element.locTitle, null, "q_title") : react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { className: "svc-fake-title" }, element.name))));
+            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { ref: function (node) { return node && (!_this.model.renderedCollapsed ?
+                    node.setAttribute("inert", "") : node.removeAttribute("inert")); }, className: this.model.cssCollapsedHiddenTitle }, element.hasTitle ? survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.SurveyElementBase.renderLocString(element.locTitle, null, "q_title") : react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { className: "svc-fake-title" }, element.name))));
     };
     QuestionAdornerComponent.prototype.renderElementContent = function () {
         return (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null,
-            this.renderQuestionTitle(),
             this.props.element,
             this.renderElementPlaceholder(),
             this.renderCarryForwardBanner()));
     };
+    QuestionAdornerComponent.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        this.model.rootElement = this.rootRef.current;
+    };
+    QuestionAdornerComponent.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _a;
+        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
+        if (((_a = this.rootRef) === null || _a === void 0 ? void 0 : _a.current) && this.modelValue) {
+            this.modelValue.rootElement = this.rootRef.current;
+        }
+    };
     QuestionAdornerComponent.prototype.renderElementPlaceholder = function () {
         if (!this.model.isEmptyElement) {
             return null;
@@ -2115,6 +2136,11 @@ var QuestionAdornerComponent = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-panel__placeholder_frame" },
                 react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-panel__placeholder" }, this.model.placeholderText))));
     };
+    QuestionAdornerComponent.prototype.componentWillUnmount = function () {
+        if (this.model) {
+            this.model.dispose();
+        }
+    };
     return QuestionAdornerComponent;
 }(_ModelElement__WEBPACK_IMPORTED_MODULE_5__.CreatorModelElement));
 
@@ -2355,13 +2381,11 @@ __webpack_require__.r(__webpack_exports__);
 
 var QuestionImageAdornerComponent = /** @class */ (function (_super) {
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(QuestionImageAdornerComponent, _super);
-    function QuestionImageAdornerComponent(props) {
-        var _this = _super.call(this, props) || this;
-        _this.rootRef = react__WEBPACK_IMPORTED_MODULE_2__.createRef();
-        return _this;
+    function QuestionImageAdornerComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
     QuestionImageAdornerComponent.prototype.createQuestionViewModel = function (props) {
-        return new survey_creator_core__WEBPACK_IMPORTED_MODULE_1__.QuestionImageAdornerViewModel(props.componentData, props.question, null, null);
+        return new survey_creator_core__WEBPACK_IMPORTED_MODULE_1__.QuestionImageAdornerViewModel(props.componentData, props.question, null);
     };
     Object.defineProperty(QuestionImageAdornerComponent.prototype, "imageModel", {
         get: function () {
@@ -2370,10 +2394,6 @@ var QuestionImageAdornerComponent = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    QuestionImageAdornerComponent.prototype.componentDidMount = function () {
-        _super.prototype.componentDidMount.call(this);
-        this.imageModel.questionRoot = this.rootRef.current;
-    };
     QuestionImageAdornerComponent.prototype.renderHeader = function () {
         return (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null,
             react__WEBPACK_IMPORTED_MODULE_2__.createElement("input", { type: "file", "aria-hidden": "true", tabIndex: -1, accept: this.imageModel.acceptedTypes, className: "svc-choose-file-input", style: {
@@ -2408,13 +2428,10 @@ var QuestionImageAdornerComponent = /** @class */ (function (_super) {
                 isDisplayMode: false,
                 question: this.imageModel.filePresentationModel
             });
-            return (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null,
-                this.renderQuestionTitle(),
-                fileQuestion));
+            return (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null, fileQuestion));
         }
         else {
             return (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null,
-                this.renderQuestionTitle(),
                 this.props.element,
                 this.renderElementPlaceholder()));
         }
@@ -2609,6 +2626,46 @@ survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.regist
 });
 
 
+/***/ }),
+
+/***/ "./src/components/SurfacePlaceholder.tsx":
+/*!***********************************************!*\
+  !*** ./src/components/SurfacePlaceholder.tsx ***!
+  \***********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   SurfacePlaceholder: () => (/* binding */ SurfacePlaceholder)
+/* harmony export */ });
+/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
+/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
+
+
+
+var SurfacePlaceholder = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SurfacePlaceholder, _super);
+    function SurfacePlaceholder(props) {
+        return _super.call(this, props) || this;
+    }
+    SurfacePlaceholder.prototype.render = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-surface-placeholder" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-surface-placeholder__image svc-surface-placeholder__image--" + this.props.name }),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-surface-placeholder__text" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-surface-placeholder__title" }, this.props.placeholderTitleText),
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-surface-placeholder__description" }, this.props.placeholderDescriptionText))));
+    };
+    return SurfacePlaceholder;
+}(react__WEBPACK_IMPORTED_MODULE_1__.Component));
+
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-surface-placeholder", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SurfacePlaceholder, props);
+});
+
+
 /***/ }),
 
 /***/ "./src/custom-questions/BooleanSwitch.tsx":
@@ -3717,6 +3774,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _PageNavigator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../PageNavigator */ "./src/PageNavigator.tsx");
+/* harmony import */ var _components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../components/SurfacePlaceholder */ "./src/components/SurfacePlaceholder.tsx");
+
 
 
 
@@ -3837,7 +3896,7 @@ var TabDesignerComponent = /** @class */ (function (_super) {
                 this.renderNewPage("svc-designer-placeholder-page"))));
     };
     TabDesignerComponent.prototype.renderPlaceHolderContent = function () {
-        return react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-designer-placeholder-text svc-text svc-text--normal" }, this.model.placeholderText);
+        return react__WEBPACK_IMPORTED_MODULE_1__.createElement(_components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_4__.SurfacePlaceholder, { name: "designer", placeholderTitleText: this.model.placeholderTitleText, placeholderDescriptionText: this.model.placeholderDescriptionText });
     };
     TabDesignerComponent.prototype.renderTabContent = function () {
         var survey = this.creator.survey;
@@ -4066,6 +4125,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../components/SurfacePlaceholder */ "./src/components/SurfacePlaceholder.tsx");
+
 
 
 
@@ -4117,18 +4178,18 @@ var TabLogicComponent = /** @class */ (function (_super) {
     };
     TabLogicComponent.prototype.renderElement = function () {
         var logic = this.model;
-        var rootClass = "svc-creator-tab__content";
+        var rootClass = "svc-creator-tab__content svc-logic-tab";
         var content = this.renderViewContent();
         return react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: rootClass }, content);
     };
     TabLogicComponent.prototype.renderViewContent = function () {
-        var logicTabClassName = "svc-plugin-tab__content svc-logic-tab__content " + (this.model.hasItems ? "" : "svc-logic-tab__empty");
+        var logicTabClassName = "svc-plugin-tab__content svc-logic-tab svc-logic-tab__content " + (this.model.hasItems ? "" : "svc-logic-tab--empty");
         var addLogic = !this.model.readOnly ? react__WEBPACK_IMPORTED_MODULE_1__.createElement(TabLogicAddButtonComponent, { button: this.model.addNewButton }) : undefined;
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: logicTabClassName },
                 react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.Survey, { model: this.model.itemsSurvey }),
                 this.model.hasItems ? null : (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-logic-tab__content-empty" },
-                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-text" }, this.model.emptyTabPlaceholder))),
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement(_components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_3__.SurfacePlaceholder, { name: "logic", placeholderTitleText: this.model.placeholderTitleText, placeholderDescriptionText: this.model.placeholderDescriptionText }))),
                 addLogic)));
     };
     return TabLogicComponent;
@@ -4159,6 +4220,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _SurveySimulator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./SurveySimulator */ "./src/tabs/SurveySimulator.tsx");
 /* harmony import */ var _Results__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Results */ "./src/Results.tsx");
+/* harmony import */ var _components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../components/SurfacePlaceholder */ "./src/components/SurfacePlaceholder.tsx");
+
 
 
 
@@ -4209,12 +4272,19 @@ var TabPreviewSurveyComponent = /** @class */ (function (_super) {
     TabPreviewSurveyComponent.prototype.getStateElement = function () {
         return this.model;
     };
+    TabPreviewSurveyComponent.prototype.renderPlaceholder = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-test-tab--empty" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_5__.SurfacePlaceholder, { name: "preview", placeholderTitleText: this.model.placeholderTitleText, placeholderDescriptionText: this.model.placeholderDescriptionText })));
+    };
+    TabPreviewSurveyComponent.prototype.renderSimulator = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-plugin-tab__content" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_SurveySimulator__WEBPACK_IMPORTED_MODULE_3__.SurveySimulator, { model: this.model.simulator }),
+            this.model.showResults ? react__WEBPACK_IMPORTED_MODULE_1__.createElement(_Results__WEBPACK_IMPORTED_MODULE_4__.SurveyResults, { survey: this.model.simulator.survey }) : null));
+    };
     TabPreviewSurveyComponent.prototype.renderElement = function () {
         var tabContentClassName = "svc-creator-tab__content svc-test-tab__content" + (this.model.isPageToolbarVisible ? " svc-creator-tab__content--with-toolbar" : "");
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: tabContentClassName },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-plugin-tab__content" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement(_SurveySimulator__WEBPACK_IMPORTED_MODULE_3__.SurveySimulator, { model: this.model.simulator }),
-                this.model.showResults ? react__WEBPACK_IMPORTED_MODULE_1__.createElement(_Results__WEBPACK_IMPORTED_MODULE_4__.SurveyResults, { survey: this.model.simulator.survey }) : null),
+            this.model.simulator.survey.isEmpty ? this.renderPlaceholder() : this.renderSimulator(),
             this.getBottomToolbar()));
     };
     TabPreviewSurveyComponent.prototype.getBottomToolbar = function () {
@@ -4321,6 +4391,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _SurveySimulator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./SurveySimulator */ "./src/tabs/SurveySimulator.tsx");
 /* harmony import */ var _Results__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Results */ "./src/Results.tsx");
+/* harmony import */ var _components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../components/SurfacePlaceholder */ "./src/components/SurfacePlaceholder.tsx");
+
 
 
 
@@ -4341,12 +4413,19 @@ var TabThemeSurveyComponent = /** @class */ (function (_super) {
     TabThemeSurveyComponent.prototype.getStateElement = function () {
         return this.model;
     };
+    TabThemeSurveyComponent.prototype.renderPlaceholder = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-test-tab--empty" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_5__.SurfacePlaceholder, { name: "theme", placeholderTitleText: this.model.placeholderTitleText, placeholderDescriptionText: this.model.placeholderDescriptionText })));
+    };
+    TabThemeSurveyComponent.prototype.renderSimulator = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-plugin-tab__content" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_SurveySimulator__WEBPACK_IMPORTED_MODULE_3__.SurveySimulator, { model: this.model.simulator }),
+            this.model.showResults ? react__WEBPACK_IMPORTED_MODULE_1__.createElement(_Results__WEBPACK_IMPORTED_MODULE_4__.SurveyResults, { survey: this.model.simulator.survey }) : null));
+    };
     TabThemeSurveyComponent.prototype.renderElement = function () {
         var tabContentClassName = "svc-creator-tab__content svc-test-tab__content" + (this.model.isPageToolbarVisible ? " svc-creator-tab__content--with-toolbar" : "");
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: tabContentClassName },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-plugin-tab__content" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement(_SurveySimulator__WEBPACK_IMPORTED_MODULE_3__.SurveySimulator, { model: this.model.simulator }),
-                this.model.showResults ? react__WEBPACK_IMPORTED_MODULE_1__.createElement(_Results__WEBPACK_IMPORTED_MODULE_4__.SurveyResults, { survey: this.model.simulator.survey }) : null),
+            this.model.simulator.survey.isEmpty ? this.renderPlaceholder() : this.renderSimulator(),
             this.getBottomToolbar()));
     };
     TabThemeSurveyComponent.prototype.getBottomToolbar = function () {
@@ -4485,6 +4564,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../components/SurfacePlaceholder */ "./src/components/SurfacePlaceholder.tsx");
+
 
 
 
@@ -4506,12 +4587,11 @@ var TabTranslationComponent = /** @class */ (function (_super) {
     TabTranslationComponent.prototype.renderElement = function () {
         if (!this.model)
             return null;
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-creator-tab__content svc-translation-tab" }, this.renderElementContent()));
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-creator-tab__content svc-translation-tab" + (this.model.isEmpty ? " svc-translation-tab--empty" : "") }, this.renderElementContent()));
     };
     TabTranslationComponent.prototype.renderElementContent = function () {
         if (this.model.isEmpty) {
-            return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "st-no-strings" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", null, this.model.noStringsText)));
+            return react__WEBPACK_IMPORTED_MODULE_1__.createElement(_components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_3__.SurfacePlaceholder, { name: "translation", placeholderTitleText: this.model.placeholderTitleText, placeholderDescriptionText: this.model.placeholderDescriptionText });
         }
         else {
             return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "st-content" },
@@ -5370,7 +5450,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_64__ = __webpack_require__(/*! survey-core */ "survey-core");
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_64___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_64__);
 var Version;
-Version = "".concat("1.12.3");
+Version = "".concat("1.12.4");
 // import "@survey/creator/survey-creator-core.css";
 
 
@@ -5444,7 +5524,7 @@ Version = "".concat("1.12.3");
 
 
 
-(0,survey_core__WEBPACK_IMPORTED_MODULE_64__.checkLibraryVersion)("".concat("1.12.3"), "survey-creator-react");
+(0,survey_core__WEBPACK_IMPORTED_MODULE_64__.checkLibraryVersion)("".concat("1.12.4"), "survey-creator-react");
 
 /******/ 	return __webpack_exports__;
 /******/ })()