survey-creator-react 1.11.14 → 1.12.2

package/survey-creator-react.js

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator React v1.11.14
+ * SurveyJS Creator React v1.12.2
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -63,6 +63,73 @@ var ActionButton = /** @class */ (function (_super) {
 
 
 
+/***/ }),
+
+/***/ "./src/AddQuestionButton.tsx":
+/*!***********************************!*\
+  !*** ./src/AddQuestionButton.tsx ***!
+  \***********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   AddQuestionButtonComponent: () => (/* binding */ AddQuestionButtonComponent)
+/* 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__);
+/* harmony import */ var _events__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./events */ "./src/events.ts");
+
+
+
+
+var AddQuestionButtonComponent = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(AddQuestionButtonComponent, _super);
+    function AddQuestionButtonComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(AddQuestionButtonComponent.prototype, "model", {
+        get: function () {
+            return this.props.item.data;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    AddQuestionButtonComponent.prototype.renderTypeSelector = function () {
+        var questionTypeSelectorModel = this.model.questionTypeSelectorModel;
+        return (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("button", { type: "button", onClick: function (e) {
+                e.stopPropagation();
+                questionTypeSelectorModel.action();
+            }, className: "svc-element__question-type-selector", title: this.model.addNewQuestionText },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-element__question-type-selector-icon" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: questionTypeSelectorModel.iconName, size: 24, title: this.model.addNewQuestionText })),
+            this.props.renderPopup === undefined || this.props.renderPopup ?
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.Popup, { model: questionTypeSelectorModel.popupModel })
+                : null));
+    };
+    AddQuestionButtonComponent.prototype.renderElement = function () {
+        var _this = this;
+        var addButtonClass = this.props.buttonClass || "svc-btn";
+        return react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
+            (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-element__add-new-question " + addButtonClass, onClick: function (e) {
+                    e.stopPropagation();
+                    _this.model.addNewQuestion(_this.model, new _events__WEBPACK_IMPORTED_MODULE_3__.ReactMouseEvent(e));
+                }, onMouseOver: function (e) { return _this.model.hoverStopper && _this.model.hoverStopper(e.nativeEvent, e.currentTarget); } },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { className: "svc-panel__add-new-question-icon", iconName: "icon-add_24x24", size: 24 }),
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-text svc-text--normal svc-text--bold" }, this.model.addNewQuestionText),
+                this.props.renderPopup !== false ? this.renderTypeSelector() : null)),
+            this.props.renderPopup === false ? this.renderTypeSelector() : null);
+    };
+    return AddQuestionButtonComponent;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
+
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-add-new-question-btn", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(AddQuestionButtonComponent, props);
+});
+
+
 /***/ }),
 
 /***/ "./src/ImageItemValueWrapper.tsx":
@@ -208,11 +275,12 @@ __webpack_require__.r(__webpack_exports__);
 
 var ItemValueAdornerComponent = /** @class */ (function (_super) {
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(ItemValueAdornerComponent, _super);
-    function ItemValueAdornerComponent() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function ItemValueAdornerComponent(props) {
+        var _this = _super.call(this, props) || this;
         _this.onBlur = function (event) {
             _this.model.onFocusOut(event.nativeEvent);
         };
+        _this.rootRef = react__WEBPACK_IMPORTED_MODULE_2__.createRef();
         return _this;
     }
     ItemValueAdornerComponent.prototype.createModel = function (props) {
@@ -224,6 +292,21 @@ var ItemValueAdornerComponent = /** @class */ (function (_super) {
     ItemValueAdornerComponent.prototype.getStateElement = function () {
         return this.model;
     };
+    ItemValueAdornerComponent.prototype.componentDidUpdate = function (prevProps, prevState) {
+        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
+        this.props.item.setRootElement(this.rootRef.current);
+        if (prevProps.item !== this.props.item && prevProps.item) {
+            prevProps.item.setRootElement(undefined);
+        }
+    };
+    ItemValueAdornerComponent.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        this.props.item.setRootElement(this.rootRef.current);
+    };
+    ItemValueAdornerComponent.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        this.props.item.setRootElement(undefined);
+    };
     ItemValueAdornerComponent.prototype.render = function () {
         var _this = this;
         // if (this.model.question.isDragged) {
@@ -241,7 +324,7 @@ var ItemValueAdornerComponent = /** @class */ (function (_super) {
             this.model.allowRemove ? (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { className: "svc-item-value-controls__button svc-item-value-controls__remove", "aria-label": this.model.tooltip, onClick: function () { return _this.model.remove(_this.model); } },
                 react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: 16, iconName: "icon-remove_16x16", title: this.model.tooltip }))) : null));
         var itemkey = this.props.element.key + (this.model.allowAdd ? "_new" : "");
-        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-item-value-wrapper" +
+        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { ref: this.rootRef, className: "svc-item-value-wrapper" +
                 (this.model.allowAdd ? " svc-item-value--new" : "") +
                 (this.model.isDragging ? " svc-item-value--dragging" : "") +
                 (this.model.isDragDropGhost ? " svc-item-value--ghost" : "") +
@@ -1275,51 +1358,66 @@ var SidebarComponent = /** @class */ (function (_super) {
             return false;
         return _super.prototype.canRender.call(this);
     };
+    SidebarComponent.prototype.renderDefaultHeader = function () {
+        var activePage = this.model.getActivePage();
+        var headerText = !!activePage.caption ? react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-side-bar__container-title" }, activePage.caption) : null;
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-side-bar__container-header" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-side-bar__container-actions" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyActionBar, { model: this.model.toolbar })),
+            headerText));
+    };
     SidebarComponent.prototype.renderElement = function () {
         var _this = this;
-        var style = { display: !this.model.visible ? "none" : "" };
+        var style = { display: !this.model.renderedIsVisible ? "none" : "" };
         var className = "svc-side-bar" + (this.model.flyoutPanelMode ? " svc-flyout-side-bar" : "");
-        var items = this.model.tabs.map(function (item) { return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SidebarTab, { item: item, key: item.id }); });
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: className, style: { display: !this.model.hasVisibleTabs ? "none" : "" } },
+        var items = this.model.pages.map(function (page) { return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SidebarPage, { page: page, key: page.id }); });
+        var sideArea = null;
+        if (this.model.sideAreaComponentName) {
+            sideArea = survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.createElement(this.model.sideAreaComponentName, { model: this.model.sideAreaComponentData });
+        }
+        var headerArea = null;
+        if (this.model.headerComponentName) {
+            headerArea = survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.createElement(this.model.headerComponentName, { model: this.model.headerComponentData });
+        }
+        else {
+            headerArea = this.renderDefaultHeader();
+        }
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: className, style: { display: !this.model.hasVisiblePages ? "none" : "" } },
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-side-bar__shadow", onClick: function () { return _this.model.collapseSidebar(); } }),
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-flex-column svc-side-bar__wrapper" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-flex-row svc-side-bar__wrapper" },
                 react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { ref: this.containerRef, style: style, className: "svc-side-bar__container" },
-                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-side-bar__container-header" },
-                        react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-side-bar__container-actions" },
-                            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyActionBar, { model: this.model.toolbar })),
-                        (!!this.model.headerText ?
-                            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-side-bar__container-title" }, this.model.headerText)
-                            : null)),
-                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-side-bar__container-content" }, items)))));
+                    headerArea,
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-side-bar__container-content" }, items)),
+                sideArea)));
     };
     return SidebarComponent;
 }(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
 
-var SidebarTab = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SidebarTab, _super);
-    function SidebarTab() {
+var SidebarPage = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SidebarPage, _super);
+    function SidebarPage() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    Object.defineProperty(SidebarTab.prototype, "item", {
+    Object.defineProperty(SidebarPage.prototype, "page", {
         get: function () {
-            return this.props.item;
+            return this.props.page;
         },
         enumerable: false,
         configurable: true
     });
-    SidebarTab.prototype.getStateElement = function () {
-        return this.item;
+    SidebarPage.prototype.getStateElement = function () {
+        return this.page;
     };
-    SidebarTab.prototype.renderElement = function () {
-        if (!this.item.visible)
+    SidebarPage.prototype.renderElement = function () {
+        if (!this.page.visible)
             return null;
-        var component = survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.createElement(this.item.componentName, { model: this.item.model });
+        var component = survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.createElement(this.page.componentName, { model: this.page.componentData });
         return component;
     };
-    return SidebarTab;
+    return SidebarPage;
 }(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
-survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactQuestionFactory.Instance.registerQuestion("svc-side-bar-tab", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SidebarTab, props);
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactQuestionFactory.Instance.registerQuestion("svc-side-bar-page", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SidebarPage, props);
 });
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SidebarComponent);
 survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-side-bar", function (props) {
@@ -1327,6 +1425,102 @@ survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.regist
 });
 
 
+/***/ }),
+
+/***/ "./src/SideBarPropertyGridHeader.tsx":
+/*!*******************************************!*\
+  !*** ./src/SideBarPropertyGridHeader.tsx ***!
+  \*******************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* 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_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 survey_react_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
+/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__);
+
+
+
+
+var SideBarPropertyGridHeader = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SideBarPropertyGridHeader, _super);
+    function SideBarPropertyGridHeader() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(SideBarPropertyGridHeader.prototype, "objectSelectionAction", {
+        get: function () {
+            return this.props.model;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SideBarPropertyGridHeader.prototype.getStateElement = function () {
+        return this.objectSelectionAction;
+    };
+    SideBarPropertyGridHeader.prototype.renderElement = function () {
+        var _this = this;
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar__header svc-sidebar__header--tabbed" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar__header-container svc-sidebar__header-container--with-subtitle" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar__header-content", onClick: function () { return _this.objectSelectionAction.action(); } },
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.objectSelectionAction.buttonClassName },
+                        react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar__header-caption" },
+                            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-sidebar__header-title" }, this.objectSelectionAction.title),
+                            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-sidebar__header-subtitle" }, this.objectSelectionAction.tooltip))),
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.Popup, { model: this.objectSelectionAction.popupModel, getTarget: survey_core__WEBPACK_IMPORTED_MODULE_2__.getActionDropdownButtonTarget })))));
+    };
+    return SideBarPropertyGridHeader;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase));
+survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-side-bar-property-grid-header", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SideBarPropertyGridHeader, props);
+});
+
+
+/***/ }),
+
+/***/ "./src/SideBarPropertyGridPlaceholderHeader.tsx":
+/*!******************************************************!*\
+  !*** ./src/SideBarPropertyGridPlaceholderHeader.tsx ***!
+  \******************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* 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 SideBarPropertyGridPlaceholderHeader = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SideBarPropertyGridPlaceholderHeader, _super);
+    function SideBarPropertyGridPlaceholderHeader() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(SideBarPropertyGridPlaceholderHeader.prototype, "activePage", {
+        get: function () {
+            return this.props.model;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SideBarPropertyGridPlaceholderHeader.prototype.getStateElement = function () {
+        return this.activePage;
+    };
+    SideBarPropertyGridPlaceholderHeader.prototype.renderElement = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-side-bar__container-header svc-sidebar__header-container" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-side-bar__container-title" }, this.activePage.caption)));
+    };
+    return SideBarPropertyGridPlaceholderHeader;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-side-bar-property-grid-placeholder-header", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SideBarPropertyGridPlaceholderHeader, props);
+});
+
+
 /***/ }),
 
 /***/ "./src/StringEditor.tsx":
@@ -1518,8 +1712,8 @@ var SurveyLocStringEditor = /** @class */ (function (_super) {
         var counter = this.baseModel.showCharacterCounter ? (react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.CharacterCounterComponent, { counter: this.baseModel.characterCounter, remainingCharacterCounter: this.baseModel.getCharacterCounterClass })) : null;
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: this.className },
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-string-editor__content" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-string-editor__border", onClick: this.edit },
-                    react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { className: "svc-string-editor__button svc-string-editor__button--edit", size: 16, iconName: "icon-edit" })),
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-string-editor__border svc-string-editor__border--hover", onClick: this.edit }),
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-string-editor__border svc-string-editor__border--focus", onClick: this.edit }),
                 react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-string-editor__input" },
                     control,
                     react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-string-editor__controls", onClick: this.edit }),
@@ -1610,7 +1804,6 @@ var SurveyCreatorComponent = /** @class */ (function (_super) {
         var creator = this.props.creator;
         if (creator.isCreatorDisposed)
             return null;
-        var creatorClassName = "svc-creator" + (this.props.creator.isMobileView ? " svc-creator--mobile" : "") + (this.props.creator.isTouch ? " svc-creator--touch" : "");
         var areaClassName = "svc-full-container svc-creator__area svc-flex-column" + (this.props.creator.haveCommercialLicense ? "" : " svc-creator__area--with-banner");
         var contentWrapperClassName = "svc-creator__content-wrapper svc-flex-row" + (this.props.creator.isMobileView ? " svc-creator__content-wrapper--footer-toolbar" : "");
         var fullContainerClassName = "svc-flex-row svc-full-container" + (" svc-creator__side-bar--" + this.creator.sidebarLocation);
@@ -1621,7 +1814,7 @@ var SurveyCreatorComponent = /** @class */ (function (_super) {
                 react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-creator__non-commercial-text", dangerouslySetInnerHTML: htmlValue })));
         }
         //AM: width unrecognized by react
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: creatorClassName, ref: this.rootNode, style: this.style },
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.creator.getRootCss(), ref: this.rootNode, style: this.style },
             react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgBundleComponent, null),
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: areaClassName },
                 react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: fullContainerClassName },
@@ -2041,13 +2234,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   CreatorSurveyPageComponent: () => (/* binding */ CreatorSurveyPageComponent)
 /* harmony export */ });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
-/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
-/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _ModelElement__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../ModelElement */ "./src/ModelElement.tsx");
-/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! survey-creator-core */ "survey-creator-core");
-/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(survey_creator_core__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);
+/* 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__);
+/* harmony import */ var _ModelElement__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../ModelElement */ "./src/ModelElement.tsx");
+/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! survey-creator-core */ "survey-creator-core");
+/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(survey_creator_core__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _events__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../events */ "./src/events.ts");
 
 
@@ -2059,14 +2252,14 @@ var CreatorSurveyPageComponent = /** @class */ (function (_super) {
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(CreatorSurveyPageComponent, _super);
     function CreatorSurveyPageComponent(props) {
         var _this = _super.call(this, props) || this;
-        _this.rootRef = react__WEBPACK_IMPORTED_MODULE_4__.createRef();
+        _this.rootRef = react__WEBPACK_IMPORTED_MODULE_1__.createRef();
         return _this;
     }
     CreatorSurveyPageComponent.prototype.createModel = function (props) {
         if (this.model) {
             this.model.dispose();
         }
-        this.model = new survey_creator_core__WEBPACK_IMPORTED_MODULE_3__.PageAdorner(props.creator, props.page);
+        this.model = new survey_creator_core__WEBPACK_IMPORTED_MODULE_4__.PageAdorner(props.creator, props.page);
     };
     CreatorSurveyPageComponent.prototype.getUpdatedModelProps = function () {
         return ["creator", "page"];
@@ -2079,7 +2272,7 @@ var CreatorSurveyPageComponent = /** @class */ (function (_super) {
         _super.prototype.componentDidMount.call(this);
         this.model.onPageSelectedCallback = function () {
             if (!!_this.rootRef.current) {
-                survey_creator_core__WEBPACK_IMPORTED_MODULE_3__.SurveyHelper.scrollIntoViewIfNeeded(_this.rootRef.current);
+                survey_creator_core__WEBPACK_IMPORTED_MODULE_4__.SurveyHelper.scrollIntoViewIfNeeded(_this.rootRef.current);
             }
         };
     };
@@ -2097,7 +2290,7 @@ var CreatorSurveyPageComponent = /** @class */ (function (_super) {
         var _this = this;
         if (!this.props.page)
             return null;
-        return ((0,survey_react_ui__WEBPACK_IMPORTED_MODULE_1__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_4__.createElement("div", { ref: this.rootRef, className: "svc-page__content " + this.model.css, id: this.props.page.id, onClick: function (e) {
+        return ((0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { ref: this.rootRef, className: "svc-page__content " + this.model.css, id: this.props.page.id, onClick: function (e) {
                 return _this.model.select(_this.model, new _events__WEBPACK_IMPORTED_MODULE_5__.ReactMouseEvent(e));
             }, onDoubleClick: function (e) { return _this.model.dblclick(e.nativeEvent); }, onMouseLeave: function (e) { return _this.model.hover(e.nativeEvent, e.currentTarget); }, onMouseOver: function (e) { return _this.model.hover(e.nativeEvent, e.currentTarget); } },
             this.renderHeader(),
@@ -2108,58 +2301,25 @@ var CreatorSurveyPageComponent = /** @class */ (function (_super) {
     CreatorSurveyPageComponent.prototype.renderPlaceholder = function () {
         if (!this.model.showPlaceholder)
             return null;
-        return (react__WEBPACK_IMPORTED_MODULE_4__.createElement("div", { className: "svc-page__placeholder_frame" },
-            react__WEBPACK_IMPORTED_MODULE_4__.createElement("div", { className: "svc-panel__placeholder_frame" },
-                react__WEBPACK_IMPORTED_MODULE_4__.createElement("div", { className: "svc-panel__placeholder" }, this.model.placeholderText))));
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-page__placeholder_frame" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-panel__placeholder_frame" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-panel__placeholder" }, this.model.placeholderText))));
     };
     CreatorSurveyPageComponent.prototype.renderContent = function () {
-        return (react__WEBPACK_IMPORTED_MODULE_4__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_1__.SurveyPage, { page: this.props.page, survey: this.props.survey, creator: this.props.creator, css: this.model.css }));
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyPage, { page: this.props.page, survey: this.props.survey, creator: this.props.creator, css: this.model.css }));
     };
     CreatorSurveyPageComponent.prototype.renderHeader = function () {
-        return (react__WEBPACK_IMPORTED_MODULE_4__.createElement("div", { className: "svc-page__content-actions" },
-            react__WEBPACK_IMPORTED_MODULE_4__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_1__.SurveyActionBar, { model: this.model.actionContainer })));
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-page__content-actions" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyActionBar, { model: this.model.actionContainer })));
     };
     CreatorSurveyPageComponent.prototype.renderFooter = function () {
-        return react__WEBPACK_IMPORTED_MODULE_4__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_1__.SurveyActionBar, { model: this.model.footerActionsBar });
+        return react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyActionBar, { model: this.model.footerActionsBar });
     };
     return CreatorSurveyPageComponent;
-}(_ModelElement__WEBPACK_IMPORTED_MODULE_2__.CreatorModelElement));
+}(_ModelElement__WEBPACK_IMPORTED_MODULE_3__.CreatorModelElement));
 
-survey_react_ui__WEBPACK_IMPORTED_MODULE_1__.ReactElementFactory.Instance.registerElement("svc-page", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_4__.createElement(CreatorSurveyPageComponent, props);
-});
-var AddQuestionButtonComponent = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(AddQuestionButtonComponent, _super);
-    function AddQuestionButtonComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Object.defineProperty(AddQuestionButtonComponent.prototype, "model", {
-        get: function () {
-            return this.props.item.data;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    AddQuestionButtonComponent.prototype.renderElement = function () {
-        var _this = this;
-        var questionTypeSelectorModel = this.model.questionTypeSelectorModel;
-        return (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_1__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_4__.createElement("div", { className: "svc-page__add-new-question svc-btn", onClick: function (e) {
-                e.stopPropagation();
-                _this.model.addNewQuestion(_this.model, new _events__WEBPACK_IMPORTED_MODULE_5__.ReactMouseEvent(e));
-            }, onMouseOver: function (e) { return _this.model.hoverStopper(e.nativeEvent, e.currentTarget); } },
-            react__WEBPACK_IMPORTED_MODULE_4__.createElement("span", { className: "svc-text svc-text--normal svc-text--bold" }, this.model.addNewQuestionText),
-            (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_1__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_4__.createElement("button", { type: "button", onClick: function (e) {
-                    e.stopPropagation();
-                    questionTypeSelectorModel.action();
-                }, className: "svc-page__question-type-selector", title: this.model.addNewQuestionText },
-                react__WEBPACK_IMPORTED_MODULE_4__.createElement("span", { className: "svc-page__question-type-selector-icon" },
-                    react__WEBPACK_IMPORTED_MODULE_4__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_1__.SvgIcon, { iconName: questionTypeSelectorModel.iconName, size: 24, title: this.model.addNewQuestionText })),
-                react__WEBPACK_IMPORTED_MODULE_4__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_1__.Popup, { model: questionTypeSelectorModel.popupModel })))));
-    };
-    return AddQuestionButtonComponent;
-}(survey_react_ui__WEBPACK_IMPORTED_MODULE_1__.SurveyElementBase));
-survey_react_ui__WEBPACK_IMPORTED_MODULE_1__.ReactElementFactory.Instance.registerElement("svc-add-new-question-btn", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_4__.createElement(AddQuestionButtonComponent, props);
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-page", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(CreatorSurveyPageComponent, props);
 });
 
 
@@ -2181,6 +2341,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 _Question__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Question */ "./src/adorners/Question.tsx");
+/* harmony import */ var _AddQuestionButton__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../AddQuestionButton */ "./src/AddQuestionButton.tsx");
+
 
 
 
@@ -2209,24 +2371,12 @@ var PanelAdornerComponent = /** @class */ (function (_super) {
         return true;
     };
     PanelAdornerComponent.prototype.renderFooter = function () {
-        var _this = this;
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
             !this.model.isEmptyElement && this.model.element.isPanel && this.model.showAddQuestionButton ? (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-panel__add-new-question-container" },
                 react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-panel__question-type-selector-popup" },
                     react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.Popup, { model: this.model.questionTypeSelectorModel.popupModel })),
                 react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-panel__add-new-question-wrapper" },
-                    (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-panel__add-new-question svc-action-button", onClick: function (e) {
-                            e.stopPropagation();
-                            _this.model.addNewQuestion();
-                        } },
-                        react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { className: "svc-panel__add-new-question-icon", iconName: "icon-add_24x24", size: 24 }),
-                        react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-text svc-text--normal svc-text--bold" }, this.model.addNewQuestionText)), undefined),
-                    (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("button", { type: "button", onClick: function (e) {
-                            e.stopPropagation();
-                            _this.model.questionTypeSelectorModel.action();
-                        }, className: "svc-panel__question-type-selector", title: this.model.addNewQuestionText },
-                        react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-panel__question-type-selector-icon" },
-                            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: this.model.questionTypeSelectorModel.iconName, size: 24 }))))))) : null,
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement(_AddQuestionButton__WEBPACK_IMPORTED_MODULE_4__.AddQuestionButtonComponent, { item: { data: this.model }, buttonClass: "svc-action-button", renderPopup: false })))) : null,
             _super.prototype.renderFooter.call(this)));
     };
     return PanelAdornerComponent;
@@ -2299,7 +2449,7 @@ var QuestionAdornerComponent = /** @class */ (function (_super) {
         var allowInteractions = this.model.element
             .isInteractiveDesignElement;
         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(); }, onMouseOut: 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: "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));
     };
     QuestionAdornerComponent.prototype.disableTabStop = function () {
         return true;
@@ -2309,6 +2459,10 @@ var QuestionAdornerComponent = /** @class */ (function (_super) {
         var content = this.renderElementContent();
         //if (!allowInteractions) return <>{content}{this.renderFooter()}</>;
         return (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: this.model.css(), onClick: function (e) { return _this.model.select(_this.model, new _events__WEBPACK_IMPORTED_MODULE_3__.ReactMouseEvent(e)); } },
+            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-question__drop-indicator svc-question__drop-indicator--left" }),
+            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-question__drop-indicator svc-question__drop-indicator--right" }),
+            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-question__drop-indicator svc-question__drop-indicator--top" }),
+            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }),
             allowInteractions ? this.renderHeader() : null,
             content,
             this.renderFooter()), undefined, { disableTabStop: this.disableTabStop() });
@@ -2829,7 +2983,10 @@ var RowWrapper = /** @class */ (function (_super) {
         return this.model;
     };
     RowWrapper.prototype.render = function () {
-        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { key: "svc-row-" + this.props.row.id, className: this.model.cssClasses }, this.props.element));
+        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { key: "svc-row-" + this.props.row.id, className: this.model.cssClasses },
+            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-row__drop-indicator svc-row__drop-indicator--top" }),
+            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-row__drop-indicator svc-row__drop-indicator--bottom" }),
+            this.props.element));
     };
     return RowWrapper;
 }(_ModelElement__WEBPACK_IMPORTED_MODULE_4__.CreatorModelElement));
@@ -3304,6 +3461,112 @@ var ReactDragEvent = /** @class */ (function (_super) {
 
 
 
+/***/ }),
+
+/***/ "./src/tab-control/TabButton.tsx":
+/*!***************************************!*\
+  !*** ./src/tab-control/TabButton.tsx ***!
+  \***************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   TabButtonComponent: () => (/* binding */ TabButtonComponent)
+/* 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 TabButtonComponent = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(TabButtonComponent, _super);
+    function TabButtonComponent(props) {
+        return _super.call(this, props) || this;
+    }
+    TabButtonComponent.prototype.getStateElement = function () {
+        return this.props.model;
+    };
+    TabButtonComponent.prototype.renderElement = function () {
+        var _this = this;
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-menu-action" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.props.model.buttonClassName, title: this.props.model.tooltip, onClick: function () { _this.props.model.action(); } },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-menu-action__icon" },
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-menu-action__icon-container" },
+                        react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: this.props.model.iconName, size: 24 }))))));
+    };
+    return TabButtonComponent;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
+
+
+
+/***/ }),
+
+/***/ "./src/tab-control/TabControl.tsx":
+/*!****************************************!*\
+  !*** ./src/tab-control/TabControl.tsx ***!
+  \****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* 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__);
+/* harmony import */ var _TabButton__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./TabButton */ "./src/tab-control/TabButton.tsx");
+
+
+
+
+var TabControl = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(TabControl, _super);
+    function TabControl(props) {
+        return _super.call(this, props) || this;
+    }
+    TabControl.prototype.getStateElement = function () {
+        return this.props.model;
+    };
+    TabControl.prototype.canRender = function () {
+        if (!this.props.model)
+            return false;
+        return _super.prototype.canRender.call(this);
+    };
+    TabControl.prototype.renderElement = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.props.model.sideBarClassName },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar-tabs__top-container" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar-tabs__collapse-button" },
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement(_TabButton__WEBPACK_IMPORTED_MODULE_3__.TabButtonComponent, { model: this.props.model.expandCollapseAction })),
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar-tabs__separator" },
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", null)),
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar-tabs__items" },
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement(TabsComponent, { model: this.props.model.topToolbar }))),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar-tabs__bottom-container" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar-tabs__items" },
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement(TabsComponent, { model: this.props.model.bottomToolbar })))));
+    };
+    return TabControl;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-tab-control", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(TabControl, props);
+});
+var TabsComponent = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(TabsComponent, _super);
+    function TabsComponent(props) {
+        return _super.call(this, props) || this;
+    }
+    TabsComponent.prototype.getStateElement = function () {
+        return this.props.model;
+    };
+    TabsComponent.prototype.renderElement = function () {
+        return react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null, this.props.model.actions.map(function (item, itemIndex) { return react__WEBPACK_IMPORTED_MODULE_1__.createElement(_TabButton__WEBPACK_IMPORTED_MODULE_3__.TabButtonComponent, { model: item, key: "item" + itemIndex }); }));
+    };
+    return TabsComponent;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
+
+
 /***/ }),
 
 /***/ "./src/tabs/Designer.tsx":
@@ -3839,6 +4102,51 @@ survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.regist
 });
 
 
+/***/ }),
+
+/***/ "./src/tabs/PropertyGridPlaceholder.tsx":
+/*!**********************************************!*\
+  !*** ./src/tabs/PropertyGridPlaceholder.tsx ***!
+  \**********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   PropertyGridPlaceholderComponent: () => (/* binding */ PropertyGridPlaceholderComponent)
+/* 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_creator_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-creator-core */ "survey-creator-core");
+/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_creator_core__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
+/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__);
+
+
+
+
+var PropertyGridPlaceholderComponent = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(PropertyGridPlaceholderComponent, _super);
+    function PropertyGridPlaceholderComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PropertyGridPlaceholderComponent.prototype.render = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-property-grid-placeholder" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-property-grid-placeholder__header" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-property-grid-placeholder__title" }, survey_creator_core__WEBPACK_IMPORTED_MODULE_2__.editorLocalization.getString("ed.propertyGridPlaceholderTitle")),
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-property-grid-placeholder__description" }, survey_creator_core__WEBPACK_IMPORTED_MODULE_2__.editorLocalization.getString("ed.propertyGridPlaceholderDescription"))),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-property-grid-placeholder__content" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-property-grid-placeholder__gap" }),
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-property-grid-placeholder__image" }))));
+    };
+    return PropertyGridPlaceholderComponent;
+}(react__WEBPACK_IMPORTED_MODULE_1__.Component));
+
+survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-property-grid-placeholder", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(PropertyGridPlaceholderComponent, props);
+});
+
+
 /***/ }),
 
 /***/ "./src/tabs/SurveySimulator.tsx":
@@ -4237,7 +4545,7 @@ var AdaptiveToolbox = /** @class */ (function (_super) {
         var placeholder = this.toolbox.showPlaceholder ? react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-toolbox__placeholder" }, this.toolbox.toolboxNoResultsFound) : null;
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { ref: this.rootRef, className: this.toolbox.classNames },
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { onBlur: function (e) { return _this.toolbox.focusOut(e); }, className: "svc-toolbox__panel" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-toolbox__scroller", onScroll: function (event) { return _this.toolbox.onScroll(_this.toolbox, event); } },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-toolbox__scroller sv-drag-target-skipped", onScroll: function (event) { return _this.toolbox.onScroll(_this.toolbox, event); } },
                     search,
                     placeholder,
                     react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-toolbox__container" }, (this.toolbox.showInSingleCategory) ?
@@ -4830,7 +5138,7 @@ var __webpack_exports__ = {};
   \******************************/
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   ActionButton: () => (/* reexport safe */ _ActionButton__WEBPACK_IMPORTED_MODULE_33__.ActionButton),
+/* harmony export */   ActionButton: () => (/* reexport safe */ _ActionButton__WEBPACK_IMPORTED_MODULE_37__.ActionButton),
 /* harmony export */   AdaptiveToolbox: () => (/* reexport safe */ _toolbox_AdaptiveToolbox__WEBPACK_IMPORTED_MODULE_27__.AdaptiveToolbox),
 /* harmony export */   CellQuestionAdornerComponent: () => (/* reexport safe */ _adorners_CellQuestion__WEBPACK_IMPORTED_MODULE_10__.CellQuestionAdornerComponent),
 /* harmony export */   CellQuestionDropdownAdornerComponent: () => (/* reexport safe */ _adorners_CellQuestionDropdown__WEBPACK_IMPORTED_MODULE_11__.CellQuestionDropdownAdornerComponent),
@@ -4840,24 +5148,25 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   LogoImageComponent: () => (/* reexport safe */ _LogoImage__WEBPACK_IMPORTED_MODULE_14__.LogoImageComponent),
 /* harmony export */   MatrixCellAdornerComponent: () => (/* reexport safe */ _MatrixCellWrapper__WEBPACK_IMPORTED_MODULE_20__.MatrixCellAdornerComponent),
 /* harmony export */   PanelAdornerComponent: () => (/* reexport safe */ _adorners_Panel__WEBPACK_IMPORTED_MODULE_13__.PanelAdornerComponent),
-/* harmony export */   PropertyGridComponent: () => (/* reexport safe */ _PropertyGrid__WEBPACK_IMPORTED_MODULE_47__.PropertyGridComponent),
-/* harmony export */   PropertyGridEditorCollection: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_56__.PropertyGridEditorCollection),
+/* harmony export */   PropertyGridComponent: () => (/* reexport safe */ _PropertyGrid__WEBPACK_IMPORTED_MODULE_52__.PropertyGridComponent),
+/* harmony export */   PropertyGridEditorCollection: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_61__.PropertyGridEditorCollection),
+/* harmony export */   PropertyGridPlaceholderComponent: () => (/* reexport safe */ _tabs_PropertyGridPlaceholder__WEBPACK_IMPORTED_MODULE_46__.PropertyGridPlaceholderComponent),
 /* harmony export */   QuestionAdornerComponent: () => (/* reexport safe */ _adorners_Question__WEBPACK_IMPORTED_MODULE_2__.QuestionAdornerComponent),
 /* harmony export */   QuestionBanner: () => (/* reexport safe */ _adorners_QuestionBanner__WEBPACK_IMPORTED_MODULE_5__.QuestionBanner),
 /* harmony export */   QuestionDropdownAdornerComponent: () => (/* reexport safe */ _adorners_QuestionDropdown__WEBPACK_IMPORTED_MODULE_6__.QuestionDropdownAdornerComponent),
 /* harmony export */   QuestionEditorContentComponent: () => (/* reexport safe */ _QuestionEditorContent__WEBPACK_IMPORTED_MODULE_17__.QuestionEditorContentComponent),
-/* harmony export */   QuestionErrorComponent: () => (/* reexport safe */ _QuestionError__WEBPACK_IMPORTED_MODULE_35__.QuestionErrorComponent),
+/* harmony export */   QuestionErrorComponent: () => (/* reexport safe */ _QuestionError__WEBPACK_IMPORTED_MODULE_39__.QuestionErrorComponent),
 /* harmony export */   QuestionImageAdornerComponent: () => (/* reexport safe */ _adorners_QuestionImage__WEBPACK_IMPORTED_MODULE_7__.QuestionImageAdornerComponent),
 /* harmony export */   QuestionRatingAdornerComponent: () => (/* reexport safe */ _adorners_QuestionRating__WEBPACK_IMPORTED_MODULE_8__.QuestionRatingAdornerComponent),
 /* harmony export */   QuestionWidgetAdornerComponent: () => (/* reexport safe */ _adorners_QuestionWidget__WEBPACK_IMPORTED_MODULE_9__.QuestionWidgetAdornerComponent),
 /* harmony export */   QuestionWrapperFooter: () => (/* reexport safe */ _adorners_QuestionFooter__WEBPACK_IMPORTED_MODULE_4__.QuestionWrapperFooter),
 /* harmony export */   QuestionWrapperHeader: () => (/* reexport safe */ _adorners_QuestionHeader__WEBPACK_IMPORTED_MODULE_3__.QuestionWrapperHeader),
-/* harmony export */   ReactDragEvent: () => (/* reexport safe */ _events__WEBPACK_IMPORTED_MODULE_45__.ReactDragEvent),
-/* harmony export */   ReactMouseEvent: () => (/* reexport safe */ _events__WEBPACK_IMPORTED_MODULE_45__.ReactMouseEvent),
+/* harmony export */   ReactDragEvent: () => (/* reexport safe */ _events__WEBPACK_IMPORTED_MODULE_50__.ReactDragEvent),
+/* harmony export */   ReactMouseEvent: () => (/* reexport safe */ _events__WEBPACK_IMPORTED_MODULE_50__.ReactMouseEvent),
 /* harmony export */   RowWrapper: () => (/* reexport safe */ _adorners_Row__WEBPACK_IMPORTED_MODULE_1__.RowWrapper),
-/* harmony export */   SearchComponent: () => (/* reexport safe */ _Search__WEBPACK_IMPORTED_MODULE_48__.SearchComponent),
-/* harmony export */   SidebarComponent: () => (/* reexport safe */ _SideBar__WEBPACK_IMPORTED_MODULE_30__.SidebarComponent),
-/* harmony export */   StylesManager: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_56__.StylesManager),
+/* harmony export */   SearchComponent: () => (/* reexport safe */ _Search__WEBPACK_IMPORTED_MODULE_53__.SearchComponent),
+/* harmony export */   SidebarComponent: () => (/* reexport safe */ _SideBar__WEBPACK_IMPORTED_MODULE_34__.SidebarComponent),
+/* harmony export */   StylesManager: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_61__.StylesManager),
 /* harmony export */   SurveyCreator: () => (/* reexport safe */ _SurveyCreator__WEBPACK_IMPORTED_MODULE_0__.SurveyCreator),
 /* harmony export */   SurveyCreatorComponent: () => (/* reexport safe */ _SurveyCreator__WEBPACK_IMPORTED_MODULE_0__.SurveyCreatorComponent),
 /* harmony export */   SurveyCreatorToolboxCategory: () => (/* reexport safe */ _toolbox_ToolboxCategory__WEBPACK_IMPORTED_MODULE_24__.SurveyCreatorToolboxCategory),
@@ -4865,43 +5174,44 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   SurveyCreatorToolboxItemGroup: () => (/* reexport safe */ _toolbox_ToolboxItemGroup__WEBPACK_IMPORTED_MODULE_23__.SurveyCreatorToolboxItemGroup),
 /* harmony export */   SurveyCreatorToolboxTool: () => (/* reexport safe */ _toolbox_ToolboxItem__WEBPACK_IMPORTED_MODULE_22__.SurveyCreatorToolboxTool),
 /* harmony export */   SurveyElementEmbeddedSurvey: () => (/* reexport safe */ _QuestionEmbeddedSurvey__WEBPACK_IMPORTED_MODULE_16__.SurveyElementEmbeddedSurvey),
-/* harmony export */   SurveyLocStringEditor: () => (/* reexport safe */ _StringEditor__WEBPACK_IMPORTED_MODULE_34__.SurveyLocStringEditor),
-/* harmony export */   SurveyLogic: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_56__.SurveyLogic),
-/* harmony export */   SurveyLogicOpertor: () => (/* reexport safe */ _tabs_logic_operator__WEBPACK_IMPORTED_MODULE_36__.SurveyLogicOpertor),
-/* harmony export */   SurveyLogicUI: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_56__.SurveyLogicUI),
+/* harmony export */   SurveyLocStringEditor: () => (/* reexport safe */ _StringEditor__WEBPACK_IMPORTED_MODULE_38__.SurveyLocStringEditor),
+/* harmony export */   SurveyLogic: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_61__.SurveyLogic),
+/* harmony export */   SurveyLogicOpertor: () => (/* reexport safe */ _tabs_logic_operator__WEBPACK_IMPORTED_MODULE_40__.SurveyLogicOpertor),
+/* harmony export */   SurveyLogicUI: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_61__.SurveyLogicUI),
 /* harmony export */   SurveyNavigation: () => (/* reexport safe */ _Navigation__WEBPACK_IMPORTED_MODULE_29__.SurveyNavigation),
-/* harmony export */   SurveyQuestionColor: () => (/* reexport safe */ _custom_questions_ColorQuestion__WEBPACK_IMPORTED_MODULE_53__.SurveyQuestionColor),
-/* harmony export */   SurveyQuestionEditorDefinition: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_56__.SurveyQuestionEditorDefinition),
-/* harmony export */   SurveyQuestionFileEditor: () => (/* reexport safe */ _custom_questions_FileEditQuestion__WEBPACK_IMPORTED_MODULE_54__.SurveyQuestionFileEditor),
+/* harmony export */   SurveyQuestionColor: () => (/* reexport safe */ _custom_questions_ColorQuestion__WEBPACK_IMPORTED_MODULE_58__.SurveyQuestionColor),
+/* harmony export */   SurveyQuestionEditorDefinition: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_61__.SurveyQuestionEditorDefinition),
+/* harmony export */   SurveyQuestionFileEditor: () => (/* reexport safe */ _custom_questions_FileEditQuestion__WEBPACK_IMPORTED_MODULE_59__.SurveyQuestionFileEditor),
 /* harmony export */   SurveyQuestionLinkValue: () => (/* reexport safe */ _QuestionLinkValue__WEBPACK_IMPORTED_MODULE_15__.SurveyQuestionLinkValue),
-/* harmony export */   SurveyQuestionSpinEditor: () => (/* reexport safe */ _custom_questions_SpinEditor__WEBPACK_IMPORTED_MODULE_51__.SurveyQuestionSpinEditor),
-/* harmony export */   SurveyQuestionTextWithReset: () => (/* reexport safe */ _custom_questions_TextWithResetQuestion__WEBPACK_IMPORTED_MODULE_55__.SurveyQuestionTextWithReset),
+/* harmony export */   SurveyQuestionSpinEditor: () => (/* reexport safe */ _custom_questions_SpinEditor__WEBPACK_IMPORTED_MODULE_56__.SurveyQuestionSpinEditor),
+/* harmony export */   SurveyQuestionTextWithReset: () => (/* reexport safe */ _custom_questions_TextWithResetQuestion__WEBPACK_IMPORTED_MODULE_60__.SurveyQuestionTextWithReset),
 /* harmony export */   SurveyResults: () => (/* reexport safe */ _Results__WEBPACK_IMPORTED_MODULE_21__.SurveyResults),
 /* harmony export */   SurveyResultsByRow: () => (/* reexport safe */ _Results__WEBPACK_IMPORTED_MODULE_21__.SurveyResultsByRow),
-/* harmony export */   SurveySimulator: () => (/* reexport safe */ _tabs_SurveySimulator__WEBPACK_IMPORTED_MODULE_44__.SurveySimulator),
-/* harmony export */   SwitcherComponent: () => (/* reexport safe */ _Switcher__WEBPACK_IMPORTED_MODULE_49__.SwitcherComponent),
-/* harmony export */   TabDesignerComponent: () => (/* reexport safe */ _tabs_Designer__WEBPACK_IMPORTED_MODULE_37__.TabDesignerComponent),
-/* harmony export */   TabJsonEditorAceComponent: () => (/* reexport safe */ _tabs_JsonEditorAce__WEBPACK_IMPORTED_MODULE_38__.TabJsonEditorAceComponent),
-/* harmony export */   TabJsonEditorErrorsComponent: () => (/* reexport safe */ _tabs_JsonEditorTextarea__WEBPACK_IMPORTED_MODULE_39__.TabJsonEditorErrorsComponent),
-/* harmony export */   TabJsonEditorTextareaComponent: () => (/* reexport safe */ _tabs_JsonEditorTextarea__WEBPACK_IMPORTED_MODULE_39__.TabJsonEditorTextareaComponent),
-/* harmony export */   TabLogicAddButtonComponent: () => (/* reexport safe */ _tabs_Logic__WEBPACK_IMPORTED_MODULE_40__.TabLogicAddButtonComponent),
-/* harmony export */   TabLogicComponent: () => (/* reexport safe */ _tabs_Logic__WEBPACK_IMPORTED_MODULE_40__.TabLogicComponent),
-/* harmony export */   TabPreviewSurveyComponent: () => (/* reexport safe */ _tabs_Preview__WEBPACK_IMPORTED_MODULE_41__.TabPreviewSurveyComponent),
-/* harmony export */   TabPreviewTestSurveyAgainComponent: () => (/* reexport safe */ _tabs_Preview__WEBPACK_IMPORTED_MODULE_41__.TabPreviewTestSurveyAgainComponent),
-/* harmony export */   TabThemeSurveyComponent: () => (/* reexport safe */ _tabs_Theme__WEBPACK_IMPORTED_MODULE_42__.TabThemeSurveyComponent),
-/* harmony export */   TabTranslationComponent: () => (/* reexport safe */ _tabs_translation_Translation__WEBPACK_IMPORTED_MODULE_43__.TabTranslationComponent),
+/* harmony export */   SurveySimulator: () => (/* reexport safe */ _tabs_SurveySimulator__WEBPACK_IMPORTED_MODULE_49__.SurveySimulator),
+/* harmony export */   SwitcherComponent: () => (/* reexport safe */ _Switcher__WEBPACK_IMPORTED_MODULE_54__.SwitcherComponent),
+/* harmony export */   TabButtonComponent: () => (/* reexport safe */ _tab_control_TabButton__WEBPACK_IMPORTED_MODULE_31__.TabButtonComponent),
+/* harmony export */   TabDesignerComponent: () => (/* reexport safe */ _tabs_Designer__WEBPACK_IMPORTED_MODULE_41__.TabDesignerComponent),
+/* harmony export */   TabJsonEditorAceComponent: () => (/* reexport safe */ _tabs_JsonEditorAce__WEBPACK_IMPORTED_MODULE_42__.TabJsonEditorAceComponent),
+/* harmony export */   TabJsonEditorErrorsComponent: () => (/* reexport safe */ _tabs_JsonEditorTextarea__WEBPACK_IMPORTED_MODULE_43__.TabJsonEditorErrorsComponent),
+/* harmony export */   TabJsonEditorTextareaComponent: () => (/* reexport safe */ _tabs_JsonEditorTextarea__WEBPACK_IMPORTED_MODULE_43__.TabJsonEditorTextareaComponent),
+/* harmony export */   TabLogicAddButtonComponent: () => (/* reexport safe */ _tabs_Logic__WEBPACK_IMPORTED_MODULE_44__.TabLogicAddButtonComponent),
+/* harmony export */   TabLogicComponent: () => (/* reexport safe */ _tabs_Logic__WEBPACK_IMPORTED_MODULE_44__.TabLogicComponent),
+/* harmony export */   TabPreviewSurveyComponent: () => (/* reexport safe */ _tabs_Preview__WEBPACK_IMPORTED_MODULE_45__.TabPreviewSurveyComponent),
+/* harmony export */   TabPreviewTestSurveyAgainComponent: () => (/* reexport safe */ _tabs_Preview__WEBPACK_IMPORTED_MODULE_45__.TabPreviewTestSurveyAgainComponent),
+/* harmony export */   TabThemeSurveyComponent: () => (/* reexport safe */ _tabs_Theme__WEBPACK_IMPORTED_MODULE_47__.TabThemeSurveyComponent),
+/* harmony export */   TabTranslationComponent: () => (/* reexport safe */ _tabs_translation_Translation__WEBPACK_IMPORTED_MODULE_48__.TabTranslationComponent),
 /* harmony export */   TabbedMenuComponent: () => (/* reexport safe */ _TabbedMenu__WEBPACK_IMPORTED_MODULE_28__.TabbedMenuComponent),
 /* harmony export */   TabbedMenuItemComponent: () => (/* reexport safe */ _TabbedMenu__WEBPACK_IMPORTED_MODULE_28__.TabbedMenuItemComponent),
 /* harmony export */   Toolbox: () => (/* reexport safe */ _toolbox_Toolbox__WEBPACK_IMPORTED_MODULE_25__.Toolbox),
 /* harmony export */   ToolboxList: () => (/* reexport safe */ _toolbox_ToolboxList__WEBPACK_IMPORTED_MODULE_26__.ToolboxList),
-/* harmony export */   ToolboxToolViewModel: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_56__.ToolboxToolViewModel),
-/* harmony export */   TranslateFromAction: () => (/* reexport safe */ _tabs_translation_TranslateFromAction__WEBPACK_IMPORTED_MODULE_32__.TranslateFromAction),
-/* harmony export */   TranslationLineSkeleton: () => (/* reexport safe */ _tabs_translation_TranslationLineSkeleton__WEBPACK_IMPORTED_MODULE_31__.TranslationLineSkeleton),
+/* harmony export */   ToolboxToolViewModel: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_61__.ToolboxToolViewModel),
+/* harmony export */   TranslateFromAction: () => (/* reexport safe */ _tabs_translation_TranslateFromAction__WEBPACK_IMPORTED_MODULE_36__.TranslateFromAction),
+/* harmony export */   TranslationLineSkeleton: () => (/* reexport safe */ _tabs_translation_TranslationLineSkeleton__WEBPACK_IMPORTED_MODULE_35__.TranslationLineSkeleton),
 /* harmony export */   Version: () => (/* binding */ Version),
-/* harmony export */   editorLocalization: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_56__.editorLocalization),
-/* harmony export */   localization: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_56__.localization),
-/* harmony export */   settings: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_56__.settings),
-/* harmony export */   svgBundle: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_56__.svgBundle)
+/* harmony export */   editorLocalization: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_61__.editorLocalization),
+/* harmony export */   localization: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_61__.localization),
+/* harmony export */   settings: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_61__.settings),
+/* harmony export */   svgBundle: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_61__.svgBundle)
 /* harmony export */ });
 /* harmony import */ var _SurveyCreator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../SurveyCreator */ "./src/SurveyCreator.tsx");
 /* harmony import */ var _adorners_Row__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../adorners/Row */ "./src/adorners/Row.tsx");
@@ -4933,38 +5243,43 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _toolbox_AdaptiveToolbox__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ../toolbox/AdaptiveToolbox */ "./src/toolbox/AdaptiveToolbox.tsx");
 /* harmony import */ var _TabbedMenu__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(/*! ../TabbedMenu */ "./src/TabbedMenu.tsx");
 /* harmony import */ var _Navigation__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(/*! ../Navigation */ "./src/Navigation.tsx");
-/* harmony import */ var _SideBar__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ../SideBar */ "./src/SideBar.tsx");
-/* harmony import */ var _tabs_translation_TranslationLineSkeleton__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ../tabs/translation/TranslationLineSkeleton */ "./src/tabs/translation/TranslationLineSkeleton.tsx");
-/* harmony import */ var _tabs_translation_TranslateFromAction__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ../tabs/translation/TranslateFromAction */ "./src/tabs/translation/TranslateFromAction.tsx");
-/* harmony import */ var _ActionButton__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ../ActionButton */ "./src/ActionButton.tsx");
-/* harmony import */ var _StringEditor__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ../StringEditor */ "./src/StringEditor.tsx");
-/* harmony import */ var _QuestionError__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(/*! ../QuestionError */ "./src/QuestionError.tsx");
-/* harmony import */ var _tabs_logic_operator__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ../tabs/logic-operator */ "./src/tabs/logic-operator.tsx");
-/* harmony import */ var _tabs_Designer__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ../tabs/Designer */ "./src/tabs/Designer.tsx");
-/* harmony import */ var _tabs_JsonEditorAce__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ../tabs/JsonEditorAce */ "./src/tabs/JsonEditorAce.tsx");
-/* harmony import */ var _tabs_JsonEditorTextarea__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ../tabs/JsonEditorTextarea */ "./src/tabs/JsonEditorTextarea.tsx");
-/* harmony import */ var _tabs_Logic__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ../tabs/Logic */ "./src/tabs/Logic.tsx");
-/* harmony import */ var _tabs_Preview__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ../tabs/Preview */ "./src/tabs/Preview.tsx");
-/* harmony import */ var _tabs_Theme__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ../tabs/Theme */ "./src/tabs/Theme.tsx");
-/* harmony import */ var _tabs_translation_Translation__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! ../tabs/translation/Translation */ "./src/tabs/translation/Translation.tsx");
-/* harmony import */ var _tabs_SurveySimulator__WEBPACK_IMPORTED_MODULE_44__ = __webpack_require__(/*! ../tabs/SurveySimulator */ "./src/tabs/SurveySimulator.tsx");
-/* harmony import */ var _events__WEBPACK_IMPORTED_MODULE_45__ = __webpack_require__(/*! ../events */ "./src/events.ts");
-/* harmony import */ var _ObjectSelector__WEBPACK_IMPORTED_MODULE_46__ = __webpack_require__(/*! ../ObjectSelector */ "./src/ObjectSelector.tsx");
-/* harmony import */ var _PropertyGrid__WEBPACK_IMPORTED_MODULE_47__ = __webpack_require__(/*! ../PropertyGrid */ "./src/PropertyGrid.tsx");
-/* harmony import */ var _Search__WEBPACK_IMPORTED_MODULE_48__ = __webpack_require__(/*! ../Search */ "./src/Search.tsx");
-/* harmony import */ var _Switcher__WEBPACK_IMPORTED_MODULE_49__ = __webpack_require__(/*! ../Switcher */ "./src/Switcher.tsx");
-/* harmony import */ var _tabs_JsonErrorItem__WEBPACK_IMPORTED_MODULE_50__ = __webpack_require__(/*! ../tabs/JsonErrorItem */ "./src/tabs/JsonErrorItem.tsx");
-/* harmony import */ var _custom_questions_SpinEditor__WEBPACK_IMPORTED_MODULE_51__ = __webpack_require__(/*! ../custom-questions/SpinEditor */ "./src/custom-questions/SpinEditor.tsx");
-/* harmony import */ var _custom_questions_ColorItem__WEBPACK_IMPORTED_MODULE_52__ = __webpack_require__(/*! ../custom-questions/ColorItem */ "./src/custom-questions/ColorItem.tsx");
-/* harmony import */ var _custom_questions_ColorQuestion__WEBPACK_IMPORTED_MODULE_53__ = __webpack_require__(/*! ../custom-questions/ColorQuestion */ "./src/custom-questions/ColorQuestion.tsx");
-/* harmony import */ var _custom_questions_FileEditQuestion__WEBPACK_IMPORTED_MODULE_54__ = __webpack_require__(/*! ../custom-questions/FileEditQuestion */ "./src/custom-questions/FileEditQuestion.tsx");
-/* harmony import */ var _custom_questions_TextWithResetQuestion__WEBPACK_IMPORTED_MODULE_55__ = __webpack_require__(/*! ../custom-questions/TextWithResetQuestion */ "./src/custom-questions/TextWithResetQuestion.tsx");
-/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_56__ = __webpack_require__(/*! survey-creator-core */ "survey-creator-core");
-/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_56___default = /*#__PURE__*/__webpack_require__.n(survey_creator_core__WEBPACK_IMPORTED_MODULE_56__);
-/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_57__ = __webpack_require__(/*! survey-core */ "survey-core");
-/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_57___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_57__);
+/* harmony import */ var _tab_control_TabControl__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ../tab-control/TabControl */ "./src/tab-control/TabControl.tsx");
+/* harmony import */ var _tab_control_TabButton__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ../tab-control/TabButton */ "./src/tab-control/TabButton.tsx");
+/* harmony import */ var _SideBarPropertyGridHeader__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ../SideBarPropertyGridHeader */ "./src/SideBarPropertyGridHeader.tsx");
+/* harmony import */ var _SideBarPropertyGridPlaceholderHeader__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ../SideBarPropertyGridPlaceholderHeader */ "./src/SideBarPropertyGridPlaceholderHeader.tsx");
+/* harmony import */ var _SideBar__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ../SideBar */ "./src/SideBar.tsx");
+/* harmony import */ var _tabs_translation_TranslationLineSkeleton__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(/*! ../tabs/translation/TranslationLineSkeleton */ "./src/tabs/translation/TranslationLineSkeleton.tsx");
+/* harmony import */ var _tabs_translation_TranslateFromAction__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ../tabs/translation/TranslateFromAction */ "./src/tabs/translation/TranslateFromAction.tsx");
+/* harmony import */ var _ActionButton__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ../ActionButton */ "./src/ActionButton.tsx");
+/* harmony import */ var _StringEditor__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ../StringEditor */ "./src/StringEditor.tsx");
+/* harmony import */ var _QuestionError__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ../QuestionError */ "./src/QuestionError.tsx");
+/* harmony import */ var _tabs_logic_operator__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ../tabs/logic-operator */ "./src/tabs/logic-operator.tsx");
+/* harmony import */ var _tabs_Designer__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ../tabs/Designer */ "./src/tabs/Designer.tsx");
+/* harmony import */ var _tabs_JsonEditorAce__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ../tabs/JsonEditorAce */ "./src/tabs/JsonEditorAce.tsx");
+/* harmony import */ var _tabs_JsonEditorTextarea__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! ../tabs/JsonEditorTextarea */ "./src/tabs/JsonEditorTextarea.tsx");
+/* harmony import */ var _tabs_Logic__WEBPACK_IMPORTED_MODULE_44__ = __webpack_require__(/*! ../tabs/Logic */ "./src/tabs/Logic.tsx");
+/* harmony import */ var _tabs_Preview__WEBPACK_IMPORTED_MODULE_45__ = __webpack_require__(/*! ../tabs/Preview */ "./src/tabs/Preview.tsx");
+/* harmony import */ var _tabs_PropertyGridPlaceholder__WEBPACK_IMPORTED_MODULE_46__ = __webpack_require__(/*! ../tabs/PropertyGridPlaceholder */ "./src/tabs/PropertyGridPlaceholder.tsx");
+/* harmony import */ var _tabs_Theme__WEBPACK_IMPORTED_MODULE_47__ = __webpack_require__(/*! ../tabs/Theme */ "./src/tabs/Theme.tsx");
+/* harmony import */ var _tabs_translation_Translation__WEBPACK_IMPORTED_MODULE_48__ = __webpack_require__(/*! ../tabs/translation/Translation */ "./src/tabs/translation/Translation.tsx");
+/* harmony import */ var _tabs_SurveySimulator__WEBPACK_IMPORTED_MODULE_49__ = __webpack_require__(/*! ../tabs/SurveySimulator */ "./src/tabs/SurveySimulator.tsx");
+/* harmony import */ var _events__WEBPACK_IMPORTED_MODULE_50__ = __webpack_require__(/*! ../events */ "./src/events.ts");
+/* harmony import */ var _ObjectSelector__WEBPACK_IMPORTED_MODULE_51__ = __webpack_require__(/*! ../ObjectSelector */ "./src/ObjectSelector.tsx");
+/* harmony import */ var _PropertyGrid__WEBPACK_IMPORTED_MODULE_52__ = __webpack_require__(/*! ../PropertyGrid */ "./src/PropertyGrid.tsx");
+/* harmony import */ var _Search__WEBPACK_IMPORTED_MODULE_53__ = __webpack_require__(/*! ../Search */ "./src/Search.tsx");
+/* harmony import */ var _Switcher__WEBPACK_IMPORTED_MODULE_54__ = __webpack_require__(/*! ../Switcher */ "./src/Switcher.tsx");
+/* harmony import */ var _tabs_JsonErrorItem__WEBPACK_IMPORTED_MODULE_55__ = __webpack_require__(/*! ../tabs/JsonErrorItem */ "./src/tabs/JsonErrorItem.tsx");
+/* harmony import */ var _custom_questions_SpinEditor__WEBPACK_IMPORTED_MODULE_56__ = __webpack_require__(/*! ../custom-questions/SpinEditor */ "./src/custom-questions/SpinEditor.tsx");
+/* harmony import */ var _custom_questions_ColorItem__WEBPACK_IMPORTED_MODULE_57__ = __webpack_require__(/*! ../custom-questions/ColorItem */ "./src/custom-questions/ColorItem.tsx");
+/* harmony import */ var _custom_questions_ColorQuestion__WEBPACK_IMPORTED_MODULE_58__ = __webpack_require__(/*! ../custom-questions/ColorQuestion */ "./src/custom-questions/ColorQuestion.tsx");
+/* harmony import */ var _custom_questions_FileEditQuestion__WEBPACK_IMPORTED_MODULE_59__ = __webpack_require__(/*! ../custom-questions/FileEditQuestion */ "./src/custom-questions/FileEditQuestion.tsx");
+/* harmony import */ var _custom_questions_TextWithResetQuestion__WEBPACK_IMPORTED_MODULE_60__ = __webpack_require__(/*! ../custom-questions/TextWithResetQuestion */ "./src/custom-questions/TextWithResetQuestion.tsx");
+/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_61__ = __webpack_require__(/*! survey-creator-core */ "survey-creator-core");
+/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_61___default = /*#__PURE__*/__webpack_require__.n(survey_creator_core__WEBPACK_IMPORTED_MODULE_61__);
+/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_62__ = __webpack_require__(/*! survey-core */ "survey-core");
+/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_62___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_62__);
 var Version;
-Version = "".concat("1.11.14");
+Version = "".concat("1.12.2");
 // import "@survey/creator/survey-creator-core.css";
 
 
@@ -5011,6 +5326,11 @@ Version = "".concat("1.11.14");
 
 
 
+
+
+
+
+
 
 
 
@@ -5031,7 +5351,7 @@ Version = "".concat("1.11.14");
 
 
 
-(0,survey_core__WEBPACK_IMPORTED_MODULE_57__.checkLibraryVersion)("".concat("1.11.14"), "survey-creator-react");
+(0,survey_core__WEBPACK_IMPORTED_MODULE_62__.checkLibraryVersion)("".concat("1.12.2"), "survey-creator-react");
 
 /******/ 	return __webpack_exports__;
 /******/ })()