survey-creator-react 1.12.1 → 1.12.3

package/survey-creator-react.js

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator React v1.12.1
+ * SurveyJS Creator React v1.12.3
  * (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":
@@ -602,50 +669,6 @@ var SurveyNavigation = /** @class */ (function (_super) {
 
 
 
-/***/ }),
-
-/***/ "./src/ObjectSelector.tsx":
-/*!********************************!*\
-  !*** ./src/ObjectSelector.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 ObjectSelectorComponent = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(ObjectSelectorComponent, _super);
-    function ObjectSelectorComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Object.defineProperty(ObjectSelectorComponent.prototype, "model", {
-        get: function () {
-            return this.props.model;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    ObjectSelectorComponent.prototype.getStateElement = function () {
-        return this.model;
-    };
-    ObjectSelectorComponent.prototype.renderElement = function () {
-        if (!this.model.isVisible)
-            return null;
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.List, { model: this.model.list }));
-    };
-    return ObjectSelectorComponent;
-}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
-survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-object-selector", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(ObjectSelectorComponent, props);
-});
-
-
 /***/ }),
 
 /***/ "./src/PageNavigator.tsx":
@@ -774,67 +797,6 @@ var SurveyPageNavigatorItem = /** @class */ (function (_super) {
 
 
 
-/***/ }),
-
-/***/ "./src/PropertyGrid.tsx":
-/*!******************************!*\
-  !*** ./src/PropertyGrid.tsx ***!
-  \******************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   PropertyGridComponent: () => (/* binding */ PropertyGridComponent),
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
-/* 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 _Search__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Search */ "./src/Search.tsx");
-
-
-
-
-var PropertyGridComponent = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(PropertyGridComponent, _super);
-    function PropertyGridComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Object.defineProperty(PropertyGridComponent.prototype, "model", {
-        get: function () {
-            return this.props.model;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    PropertyGridComponent.prototype.getStateElement = function () {
-        return this.model;
-    };
-    PropertyGridComponent.prototype.canRender = function () {
-        if (!this.model)
-            return false;
-        return _super.prototype.canRender.call(this);
-    };
-    PropertyGridComponent.prototype.renderElement = function () {
-        var rootClassName = this.model.searchEnabled ? "spg-container spg-container_search" : "spg-container";
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: rootClassName },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_Search__WEBPACK_IMPORTED_MODULE_3__.SearchComponent, { model: this.model.searchManager }),
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.Survey, { model: this.model.survey })));
-    };
-    return PropertyGridComponent;
-}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
-
-survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactQuestionFactory.Instance.registerQuestion("buttongroup", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyQuestionButtonGroup, props);
-});
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PropertyGridComponent);
-survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-property-grid", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(PropertyGridComponent, props);
-});
-
-
 /***/ }),
 
 /***/ "./src/QuestionEditorContent.tsx":
@@ -1174,288 +1136,117 @@ var SurveyResultsByRow = /** @class */ (function (_super) {
 
 /***/ }),
 
-/***/ "./src/Search.tsx":
-/*!************************!*\
-  !*** ./src/Search.tsx ***!
-  \************************/
+/***/ "./src/StringEditor.tsx":
+/*!******************************!*\
+  !*** ./src/StringEditor.tsx ***!
+  \******************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   SearchComponent: () => (/* binding */ SearchComponent)
+/* harmony export */   SurveyLocStringEditor: () => (/* binding */ SurveyLocStringEditor)
 /* 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_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__);
+/* 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 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 _ModelElement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./ModelElement */ "./src/ModelElement.tsx");
 
 
 
 
-var SearchComponent = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SearchComponent, _super);
-    function SearchComponent(props) {
+
+var SurveyLocStringEditor = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SurveyLocStringEditor, _super);
+    function SurveyLocStringEditor(props) {
         var _this = _super.call(this, props) || this;
-        _this.state = {
-            filterString: _this.model.filterString || ""
+        _this.onChangedHandler = function (sender, options) {
+            _this.setState({ changed: !!_this.state && _this.state.changed ? _this.state.changed + 1 : 1 });
+        };
+        _this.onBlur = function (event) {
+            if (_this.svStringEditorRef.current) {
+                _this.svStringEditorRef.current.spellcheck = false;
+            }
+            _this.locString["__isEditing"] = false;
+            _this.justFocused = false;
+            _this.baseModel.onBlur(event.nativeEvent);
+            return _this.baseModel.errorText;
+        };
+        _this.onCompositionStart = function (event) {
+            _this.baseModel.onCompositionStart(event.nativeEvent);
+        };
+        _this.onCompositionEnd = function (event) {
+            _this.baseModel.onCompositionEnd(event.nativeEvent);
+        };
+        _this.onInput = function (event) {
+            _this.baseModel.onInput(event.nativeEvent);
+        };
+        _this.onPaste = function (event) {
+            _this.baseModel.onPaste(event.nativeEvent);
         };
+        _this.justFocused = false;
+        _this.onFocus = function (event) {
+            _this.baseModel.onFocus(event.nativeEvent);
+            _this.justFocused = true;
+        };
+        _this.onKeyDown = function (event) {
+            return _this.baseModel.onKeyDown(event.nativeEvent);
+        };
+        _this.onKeyUp = function (event) {
+            return _this.baseModel.onKeyUp(event.nativeEvent);
+        };
+        _this.onMouseUp = function (event) {
+            return _this.baseModel.onMouseUp(event.nativeEvent);
+        };
+        _this.done = function (event) {
+            _this.baseModel.done(event);
+            _this.locString["__isEditing"] = false;
+        };
+        _this.edit = function (event) {
+            _this.svStringEditorRef.current.focus();
+            // document.execCommand('selectAll', false, null);
+            _this.locString["__isEditing"] = true;
+            _this.baseModel.onClick(event);
+        };
+        _this.state = { changed: 0 };
+        _this.svStringEditorRef = react__WEBPACK_IMPORTED_MODULE_1__.createRef();
         return _this;
     }
-    Object.defineProperty(SearchComponent.prototype, "model", {
+    SurveyLocStringEditor.prototype.createModel = function (props) {
+        if (this.baseModel) {
+            this.baseModel.dispose();
+        }
+        this.baseModel = new survey_creator_core__WEBPACK_IMPORTED_MODULE_3__.StringEditorViewModelBase(this.locString, this.creator);
+    };
+    SurveyLocStringEditor.prototype.getUpdatedModelProps = function () {
+        return ["creator", "locString"];
+    };
+    Object.defineProperty(SurveyLocStringEditor.prototype, "locString", {
         get: function () {
-            return this.props.model;
+            return this.props.locStr.locStr;
         },
         enumerable: false,
         configurable: true
     });
-    SearchComponent.prototype.getStateElement = function () {
-        return this.model;
-    };
-    SearchComponent.prototype.renderElement = function () {
-        var _this = this;
-        if (!this.model.isVisible)
-            return null;
-        var onChange = function (e) {
-            var root = survey_core__WEBPACK_IMPORTED_MODULE_2__.settings.environment.root;
-            if (e.target === root.activeElement) {
-                _this.model.filterString = e.target.value;
-            }
-        };
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-search-editor_container" },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-search-editor_search-icon" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { iconName: "icon-search", size: "auto" })),
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("input", { type: "text", className: "spg-search-editor_input", "aria-label": this.model.filterStringPlaceholder, placeholder: this.model.filterStringPlaceholder, value: this.state.filterString, onChange: onChange }),
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-search-editor_toolbar" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-search-editor_toolbar-counter" }, this.model.matchCounterText),
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyActionBar, { model: this.model.searchActionBar }))));
-    };
-    return SearchComponent;
-}(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase));
-
-survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-search", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SearchComponent, props);
-});
-
-
-/***/ }),
-
-/***/ "./src/SideBar.tsx":
-/*!*************************!*\
-  !*** ./src/SideBar.tsx ***!
-  \*************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   SidebarComponent: () => (/* binding */ SidebarComponent),
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
-/* 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 SidebarComponent = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SidebarComponent, _super);
-    function SidebarComponent(props) {
-        var _this = _super.call(this, props) || this;
-        _this.containerRef = react__WEBPACK_IMPORTED_MODULE_1__.createRef();
-        return _this;
-    }
-    Object.defineProperty(SidebarComponent.prototype, "model", {
-        get: function () {
-            return this.props.model;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SidebarComponent.prototype.getStateElement = function () {
-        return this.model;
-    };
-    SidebarComponent.prototype.componentDidMount = function () {
-        _super.prototype.componentDidMount.call(this);
-        this.model.initResizeManager(this.containerRef.current);
-    };
-    SidebarComponent.prototype.componentWillUnmount = function () {
-        _super.prototype.componentWillUnmount.call(this);
-        this.model.resetResizeManager();
-    };
-    SidebarComponent.prototype.canRender = function () {
-        if (!this.model)
-            return false;
-        return _super.prototype.canRender.call(this);
-    };
-    SidebarComponent.prototype.renderElement = function () {
-        var _this = this;
-        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" : "" } },
-            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", { 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)))));
-    };
-    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() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Object.defineProperty(SidebarTab.prototype, "item", {
-        get: function () {
-            return this.props.item;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SidebarTab.prototype.getStateElement = function () {
-        return this.item;
-    };
-    SidebarTab.prototype.renderElement = function () {
-        if (!this.item.visible)
-            return null;
-        var component = survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.createElement(this.item.componentName, { model: this.item.model });
-        return component;
-    };
-    return SidebarTab;
-}(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);
-});
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SidebarComponent);
-survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-side-bar", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SidebarComponent, props);
-});
-
-
-/***/ }),
-
-/***/ "./src/StringEditor.tsx":
-/*!******************************!*\
-  !*** ./src/StringEditor.tsx ***!
-  \******************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   SurveyLocStringEditor: () => (/* binding */ SurveyLocStringEditor)
-/* 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 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 _ModelElement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./ModelElement */ "./src/ModelElement.tsx");
-
-
-
-
-
-var SurveyLocStringEditor = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SurveyLocStringEditor, _super);
-    function SurveyLocStringEditor(props) {
-        var _this = _super.call(this, props) || this;
-        _this.onChangedHandler = function (sender, options) {
-            _this.setState({ changed: !!_this.state && _this.state.changed ? _this.state.changed + 1 : 1 });
-        };
-        _this.onBlur = function (event) {
-            if (_this.svStringEditorRef.current) {
-                _this.svStringEditorRef.current.spellcheck = false;
-            }
-            _this.locString["__isEditing"] = false;
-            _this.justFocused = false;
-            _this.baseModel.onBlur(event.nativeEvent);
-            return _this.baseModel.errorText;
-        };
-        _this.onCompositionStart = function (event) {
-            _this.baseModel.onCompositionStart(event.nativeEvent);
-        };
-        _this.onCompositionEnd = function (event) {
-            _this.baseModel.onCompositionEnd(event.nativeEvent);
-        };
-        _this.onInput = function (event) {
-            _this.baseModel.onInput(event.nativeEvent);
-        };
-        _this.onPaste = function (event) {
-            _this.baseModel.onPaste(event.nativeEvent);
-        };
-        _this.justFocused = false;
-        _this.onFocus = function (event) {
-            _this.baseModel.onFocus(event.nativeEvent);
-            _this.justFocused = true;
-        };
-        _this.onKeyDown = function (event) {
-            return _this.baseModel.onKeyDown(event.nativeEvent);
-        };
-        _this.onKeyUp = function (event) {
-            return _this.baseModel.onKeyUp(event.nativeEvent);
-        };
-        _this.onMouseUp = function (event) {
-            return _this.baseModel.onMouseUp(event.nativeEvent);
-        };
-        _this.done = function (event) {
-            _this.baseModel.done(event);
-            _this.locString["__isEditing"] = false;
-        };
-        _this.edit = function (event) {
-            _this.svStringEditorRef.current.focus();
-            // document.execCommand('selectAll', false, null);
-            _this.locString["__isEditing"] = true;
-            _this.baseModel.onClick(event);
-        };
-        _this.state = { changed: 0 };
-        _this.svStringEditorRef = react__WEBPACK_IMPORTED_MODULE_1__.createRef();
-        return _this;
-    }
-    SurveyLocStringEditor.prototype.createModel = function (props) {
-        if (this.baseModel) {
-            this.baseModel.dispose();
-        }
-        this.baseModel = new survey_creator_core__WEBPACK_IMPORTED_MODULE_3__.StringEditorViewModelBase(this.locString, this.creator);
-    };
-    SurveyLocStringEditor.prototype.getUpdatedModelProps = function () {
-        return ["creator", "locString"];
-    };
-    Object.defineProperty(SurveyLocStringEditor.prototype, "locString", {
-        get: function () {
-            return this.props.locStr.locStr;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SurveyLocStringEditor.prototype, "creator", {
-        get: function () {
-            return this.props.locStr.creator;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SurveyLocStringEditor.prototype, "style", {
-        get: function () {
-            return this.props.style;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SurveyLocStringEditor.prototype.getStateElement = function () {
-        return this.baseModel;
+    Object.defineProperty(SurveyLocStringEditor.prototype, "creator", {
+        get: function () {
+            return this.props.locStr.creator;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyLocStringEditor.prototype, "style", {
+        get: function () {
+            return this.props.style;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyLocStringEditor.prototype.getStateElement = function () {
+        return this.baseModel;
     };
     Object.defineProperty(SurveyLocStringEditor.prototype, "errorText", {
         get: function () {
@@ -2056,13 +1847,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");
 
 
@@ -2074,14 +1865,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"];
@@ -2094,7 +1885,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);
             }
         };
     };
@@ -2112,7 +1903,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(),
@@ -2123,58 +1914,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);
 });
 
 
@@ -2196,6 +1954,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");
+
 
 
 
@@ -2224,24 +1984,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;
@@ -2346,11 +2094,11 @@ 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 () {
-        if (this.model.element.hasTitle || this.model.element.isPanel)
+        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 }, survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.SurveyElementBase.renderLocString(element.locTitle, null, "q_title"))));
+            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))));
     };
     QuestionAdornerComponent.prototype.renderElementContent = function () {
         return (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null,
@@ -2863,9 +2611,57 @@ survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.regist
 
 /***/ }),
 
-/***/ "./src/custom-questions/ColorItem.tsx":
-/*!********************************************!*\
-  !*** ./src/custom-questions/ColorItem.tsx ***!
+/***/ "./src/custom-questions/BooleanSwitch.tsx":
+/*!************************************************!*\
+  !*** ./src/custom-questions/BooleanSwitch.tsx ***!
+  \************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   SurveyQuestionBooleanSwitch: () => (/* binding */ SurveyQuestionBooleanSwitch)
+/* 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_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 SurveyQuestionBooleanSwitch = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SurveyQuestionBooleanSwitch, _super);
+    function SurveyQuestionBooleanSwitch() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SurveyQuestionBooleanSwitch.prototype.renderElement = function () {
+        var _this = this;
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch", onClick: function () { return _this.questionBase.value = !_this.questionBase.value; } },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__button" + (this.questionBase.value ? " spg-boolean-switch__button--checked" : ""), tabIndex: 0, role: "checkbox", "aria-required": this.questionBase.ariaRequired, "aria-label": this.questionBase.ariaLabel, "aria-invalid": this.questionBase.ariaInvalid, "aria-errormessage": this.questionBase.ariaErrormessage },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__thumb" },
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left" })),
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__thumb" },
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--right" }))),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__caption" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-boolean-switch__title" }, survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase.renderLocString(this.questionBase.locTitle)))));
+    };
+    return SurveyQuestionBooleanSwitch;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyQuestionElementBase));
+
+survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactQuestionFactory.Instance.registerQuestion("sv-boolean-switch", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SurveyQuestionBooleanSwitch, props);
+});
+survey_core__WEBPACK_IMPORTED_MODULE_2__.RendererFactory.Instance.registerRenderer("boolean", "switch", "sv-boolean-switch");
+
+
+/***/ }),
+
+/***/ "./src/custom-questions/ColorItem.tsx":
+/*!********************************************!*\
+  !*** ./src/custom-questions/ColorItem.tsx ***!
   \********************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -3070,260 +2866,837 @@ var SurveyQuestionSpinEditor = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    SurveyQuestionSpinEditor.prototype.renderInput = function () {
-        var _this = this;
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("input", { id: this.question.inputId, disabled: this.isDisplayMode, className: this.question.cssClasses.control, ref: function (input) { return (_this.setControl(input)); }, placeholder: this.question.renderedPlaceholder, autoComplete: "off", onBlur: function (event) { return _this.question.onBlur(event.nativeEvent); }, onFocus: function (event) { return _this.question.onFocus(event.nativeEvent); }, onChange: this.question.onChange, onBeforeInput: function (event) { return _this.question.onBeforeInput(event.nativeEvent); }, onKeyUp: function (event) { return _this.question.onKeyUp(event.nativeEvent); }, onKeyDown: function (event) { return _this.question.onInputKeyDown(event.nativeEvent); }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy })));
-    };
-    SurveyQuestionSpinEditor.prototype.renderElement = function () {
-        var _this = this;
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.question.cssClasses.root, onKeyDown: function (event) { return _this.question.onKeyDown(event.nativeEvent); } },
-            this.renderInput(),
-            this.renderButtons()));
-    };
-    SurveyQuestionSpinEditor.prototype.getValueCore = function () {
-        return this.question.renderedValue;
+    SurveyQuestionSpinEditor.prototype.renderInput = function () {
+        var _this = this;
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("input", { id: this.question.inputId, disabled: this.isDisplayMode, className: this.question.cssClasses.control, ref: function (input) { return (_this.setControl(input)); }, placeholder: this.question.renderedPlaceholder, autoComplete: "off", onBlur: function (event) { return _this.question.onBlur(event.nativeEvent); }, onFocus: function (event) { return _this.question.onFocus(event.nativeEvent); }, onChange: this.question.onChange, onBeforeInput: function (event) { return _this.question.onBeforeInput(event.nativeEvent); }, onKeyUp: function (event) { return _this.question.onKeyUp(event.nativeEvent); }, onKeyDown: function (event) { return _this.question.onInputKeyDown(event.nativeEvent); }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy })));
+    };
+    SurveyQuestionSpinEditor.prototype.renderElement = function () {
+        var _this = this;
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.question.cssClasses.root, onKeyDown: function (event) { return _this.question.onKeyDown(event.nativeEvent); } },
+            this.renderInput(),
+            this.renderButtons()));
+    };
+    SurveyQuestionSpinEditor.prototype.getValueCore = function () {
+        return this.question.renderedValue;
+    };
+    SurveyQuestionSpinEditor.prototype.renderButtons = function () {
+        var _this = this;
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: this.question.cssClasses.buttonsContainer },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("button", { tabIndex: -1, className: this.question.cssClasses.arrowButton, disabled: this.isDisplayMode, onMouseDown: this.question.onDownButtonMouseDown, onMouseUp: this.question.onButtonMouseUp, onMouseLeave: this.question.onButtonMouseLeave, onBlur: function (event) { return _this.question.onBlur(event.nativeEvent); }, onFocus: function (event) { return _this.question.onFocus(event.nativeEvent); } },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: this.question.cssClasses.decreaseButtonIcon, size: "auto" })),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("button", { tabIndex: -1, className: this.question.cssClasses.arrowButton, disabled: this.isDisplayMode, onMouseDown: this.question.onUpButtonMouseDown, onMouseUp: this.question.onButtonMouseUp, onMouseLeave: this.question.onButtonMouseLeave, onBlur: function (event) { return _this.question.onBlur(event.nativeEvent); }, onFocus: function (event) { return _this.question.onFocus(event.nativeEvent); } },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: this.question.cssClasses.increaseButtonIcon, size: "auto" }))));
+    };
+    return SurveyQuestionSpinEditor;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyQuestionText));
+
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactQuestionFactory.Instance.registerQuestion("spinedit", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SurveyQuestionSpinEditor, props);
+});
+
+
+/***/ }),
+
+/***/ "./src/custom-questions/TextWithResetQuestion.tsx":
+/*!********************************************************!*\
+  !*** ./src/custom-questions/TextWithResetQuestion.tsx ***!
+  \********************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   SurveyQuestionTextWithReset: () => (/* binding */ SurveyQuestionTextWithReset)
+/* 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 SurveyQuestionTextWithReset = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SurveyQuestionTextWithReset, _super);
+    function SurveyQuestionTextWithReset() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(SurveyQuestionTextWithReset.prototype, "question", {
+        get: function () {
+            return this.questionBase;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyQuestionTextWithReset.prototype.renderElement = function () {
+        var textElement = this.renderInput();
+        var resetButton = this.renderResetButton();
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.question.getRootClass() },
+            textElement,
+            resetButton));
+    };
+    SurveyQuestionTextWithReset.prototype.renderInput = function () {
+        return survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactQuestionFactory.Instance.createQuestion(this.question.wrappedQuestionTemplate, {
+            question: this.question,
+            isDisplayMode: this.question.isInputReadOnly,
+            creator: this,
+        });
+    };
+    SurveyQuestionTextWithReset.prototype.renderResetButton = function () {
+        var _this = this;
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("button", { className: this.question.cssClasses.resetButton, disabled: this.question.resetValueAdorner.isDisabled, title: this.question.resetValueAdorner.caption, onClick: function () { return _this.question.resetValueAdorner.resetValue(); } },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: this.question.cssClasses.resetButtonIcon, size: "auto" })));
+    };
+    return SurveyQuestionTextWithReset;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyQuestionElementBase));
+
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactQuestionFactory.Instance.registerQuestion("textwithreset", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SurveyQuestionTextWithReset, props);
+});
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactQuestionFactory.Instance.registerQuestion("commentwithreset", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SurveyQuestionTextWithReset, props);
+});
+
+
+/***/ }),
+
+/***/ "./src/entries/helpers.ts":
+/*!********************************!*\
+  !*** ./src/entries/helpers.ts ***!
+  \********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   __assign: () => (/* binding */ __assign),
+/* harmony export */   __decorate: () => (/* binding */ __decorate),
+/* harmony export */   __extends: () => (/* binding */ __extends),
+/* harmony export */   __spreadArrays: () => (/* binding */ __spreadArrays)
+/* harmony export */ });
+var __decorate = function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3
+        ? target
+        : desc === null
+            ? (desc = Object.getOwnPropertyDescriptor(target, key))
+            : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if ((d = decorators[i]))
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __assign = Object["assign"] ||
+    function (target) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p))
+                    target[p] = s[p];
+        }
+        return target;
+    };
+function __extends(thisClass, baseClass) {
+    for (var p in baseClass)
+        if (baseClass.hasOwnProperty(p))
+            thisClass[p] = baseClass[p];
+    function __() {
+        this.constructor = thisClass;
+    }
+    thisClass.prototype =
+        baseClass === null
+            ? Object.create(baseClass)
+            : ((__.prototype = baseClass.prototype), new __());
+}
+var __spreadArrays = function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++)
+        s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+
+
+/***/ }),
+
+/***/ "./src/events.ts":
+/*!***********************!*\
+  !*** ./src/events.ts ***!
+  \***********************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   ReactDragEvent: () => (/* binding */ ReactDragEvent),
+/* harmony export */   ReactMouseEvent: () => (/* binding */ ReactMouseEvent)
+/* harmony export */ });
+/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
+
+var ReactMouseEvent = /** @class */ (function () {
+    function ReactMouseEvent(event) {
+        this.event = event;
+    }
+    ReactMouseEvent.prototype.stopPropagation = function () {
+        this.event.stopPropagation();
+        //this.event.nativeEvent.stopPropagation();
+        //this.event.nativeEvent.stopImmediatePropagation();
+    };
+    ReactMouseEvent.prototype.preventDefault = function () {
+        this.event.preventDefault();
+        //this.event.nativeEvent.preventDefault();
+    };
+    Object.defineProperty(ReactMouseEvent.prototype, "cancelBubble", {
+        get: function () {
+            //return this.event.cancelBubble;
+            return false;
+        },
+        set: function (value) {
+            //this.event.cancelBubble = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ReactMouseEvent.prototype, "target", {
+        get: function () {
+            return this.event.target;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ReactMouseEvent.prototype, "currentTarget", {
+        get: function () {
+            return this.event.currentTarget;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ReactMouseEvent.prototype, "clientX", {
+        get: function () {
+            return this.event.clientX;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ReactMouseEvent.prototype, "clientY", {
+        get: function () {
+            return this.event.clientY;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ReactMouseEvent.prototype, "offsetX", {
+        get: function () {
+            return this.event.nativeEvent.offsetX;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ReactMouseEvent.prototype, "offsetY", {
+        get: function () {
+            return this.event.nativeEvent.offsetY;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return ReactMouseEvent;
+}());
+
+var ReactDragEvent = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(ReactDragEvent, _super);
+    function ReactDragEvent(event) {
+        var _this = _super.call(this, event) || this;
+        _this.event = event;
+        return _this;
+    }
+    Object.defineProperty(ReactDragEvent.prototype, "dataTransfer", {
+        get: function () {
+            return this.event.dataTransfer;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return ReactDragEvent;
+}(ReactMouseEvent));
+
+
+
+/***/ }),
+
+/***/ "./src/side-bar/ObjectSelector.tsx":
+/*!*****************************************!*\
+  !*** ./src/side-bar/ObjectSelector.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 ObjectSelectorComponent = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(ObjectSelectorComponent, _super);
+    function ObjectSelectorComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(ObjectSelectorComponent.prototype, "model", {
+        get: function () {
+            return this.props.model;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ObjectSelectorComponent.prototype.getStateElement = function () {
+        return this.model;
+    };
+    ObjectSelectorComponent.prototype.renderElement = function () {
+        if (!this.model.isVisible)
+            return null;
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.List, { model: this.model.list }));
+    };
+    return ObjectSelectorComponent;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-object-selector", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(ObjectSelectorComponent, props);
+});
+
+
+/***/ }),
+
+/***/ "./src/side-bar/PropertyGrid.tsx":
+/*!***************************************!*\
+  !*** ./src/side-bar/PropertyGrid.tsx ***!
+  \***************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   PropertyGridComponent: () => (/* binding */ PropertyGridComponent),
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* 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 _Search__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Search */ "./src/side-bar/Search.tsx");
+
+
+
+
+var PropertyGridComponent = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(PropertyGridComponent, _super);
+    function PropertyGridComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(PropertyGridComponent.prototype, "model", {
+        get: function () {
+            return this.props.model;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PropertyGridComponent.prototype.getStateElement = function () {
+        return this.model;
+    };
+    PropertyGridComponent.prototype.canRender = function () {
+        if (!this.model)
+            return false;
+        return _super.prototype.canRender.call(this);
+    };
+    PropertyGridComponent.prototype.renderElement = function () {
+        var rootClassName = this.model.searchEnabled ? "spg-container spg-container_search" : "spg-container";
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: rootClassName },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_Search__WEBPACK_IMPORTED_MODULE_3__.SearchComponent, { model: this.model.searchManager }),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.Survey, { model: this.model.survey })));
+    };
+    return PropertyGridComponent;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
+
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactQuestionFactory.Instance.registerQuestion("buttongroup", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyQuestionButtonGroup, props);
+});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PropertyGridComponent);
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-property-grid", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(PropertyGridComponent, props);
+});
+
+
+/***/ }),
+
+/***/ "./src/side-bar/PropertyGridPlaceholder.tsx":
+/*!**************************************************!*\
+  !*** ./src/side-bar/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/side-bar/Search.tsx":
+/*!*********************************!*\
+  !*** ./src/side-bar/Search.tsx ***!
+  \*********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   SearchComponent: () => (/* binding */ SearchComponent)
+/* 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_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 SearchComponent = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SearchComponent, _super);
+    function SearchComponent(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            filterString: _this.model.filterString || ""
+        };
+        return _this;
+    }
+    Object.defineProperty(SearchComponent.prototype, "model", {
+        get: function () {
+            return this.props.model;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SearchComponent.prototype.getStateElement = function () {
+        return this.model;
+    };
+    SearchComponent.prototype.renderElement = function () {
+        var _this = this;
+        if (!this.model.isVisible)
+            return null;
+        var onChange = function (e) {
+            var root = survey_core__WEBPACK_IMPORTED_MODULE_2__.settings.environment.root;
+            if (e.target === root.activeElement) {
+                _this.model.filterString = e.target.value;
+            }
+        };
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-search-editor_container" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-search-editor_search-icon" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { iconName: "icon-search", size: "auto" })),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("input", { type: "text", className: "spg-search-editor_input", "aria-label": this.model.filterStringPlaceholder, placeholder: this.model.filterStringPlaceholder, value: this.state.filterString, onChange: onChange }),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-search-editor_toolbar" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "spg-search-editor_toolbar-counter" }, this.model.matchCounterText),
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyActionBar, { model: this.model.searchActionBar }))));
+    };
+    return SearchComponent;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase));
+
+survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-search", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SearchComponent, props);
+});
+
+
+/***/ }),
+
+/***/ "./src/side-bar/SideBar.tsx":
+/*!**********************************!*\
+  !*** ./src/side-bar/SideBar.tsx ***!
+  \**********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   SidebarComponent: () => (/* binding */ SidebarComponent),
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* 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 SidebarComponent = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SidebarComponent, _super);
+    function SidebarComponent(props) {
+        var _this = _super.call(this, props) || this;
+        _this.containerRef = react__WEBPACK_IMPORTED_MODULE_1__.createRef();
+        return _this;
+    }
+    Object.defineProperty(SidebarComponent.prototype, "model", {
+        get: function () {
+            return this.props.model;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SidebarComponent.prototype.getStateElement = function () {
+        return this.model;
+    };
+    SidebarComponent.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        this.model.initResizeManager(this.containerRef.current);
+    };
+    SidebarComponent.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        this.model.resetResizeManager();
+    };
+    SidebarComponent.prototype.canRender = function () {
+        if (!this.model)
+            return false;
+        return _super.prototype.canRender.call(this);
+    };
+    SidebarComponent.prototype.renderElement = function () {
+        var _this = this;
+        var style = { display: !this.model.renderedIsVisible ? "none" : "" };
+        var className = "svc-side-bar" + (this.model.flyoutPanelMode ? " svc-flyout-side-bar" : "");
+        var items = this.model.pages.map(function (page) { return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SidebarPage, { page: page, key: page.id }); });
+        var headerArea = survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.createElement(this.model.header.component, { model: this.model.header.componentModel });
+        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 });
+        }
+        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-row svc-side-bar__wrapper" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { ref: this.containerRef, style: style, className: "svc-side-bar__container" },
+                    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 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(SidebarPage.prototype, "page", {
+        get: function () {
+            return this.props.page;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SidebarPage.prototype.getStateElement = function () {
+        return this.page;
+    };
+    SidebarPage.prototype.renderElement = function () {
+        if (!this.page.visible)
+            return null;
+        var component = survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.createElement(this.page.componentName, { model: this.page.componentData });
+        return component;
+    };
+    return SidebarPage;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
+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) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SidebarComponent, props);
+});
+
+
+/***/ }),
+
+/***/ "./src/side-bar/SideBarDefaultHeader.tsx":
+/*!***********************************************!*\
+  !*** ./src/side-bar/SideBarDefaultHeader.tsx ***!
+  \***********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   SideBarDefaultHeader: () => (/* binding */ SideBarDefaultHeader)
+/* 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 SideBarDefaultHeader = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SideBarDefaultHeader, _super);
+    function SideBarDefaultHeader() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(SideBarDefaultHeader.prototype, "model", {
+        get: function () {
+            return this.props.model;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SideBarDefaultHeader.prototype.getStateElement = function () {
+        return this.model;
+    };
+    SideBarDefaultHeader.prototype.renderElement = function () {
+        var title = !!this.model.title ? (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-side-bar__container-title" }, this.model.title)) : 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 })),
+            title));
+    };
+    return SideBarDefaultHeader;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
+
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-side-bar-default-header", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SideBarDefaultHeader, props);
+});
+
+
+/***/ }),
+
+/***/ "./src/side-bar/SideBarHeader.tsx":
+/*!****************************************!*\
+  !*** ./src/side-bar/SideBarHeader.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 SideBarHeader = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SideBarHeader, _super);
+    function SideBarHeader() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(SideBarHeader.prototype, "model", {
+        get: function () {
+            return this.props.model;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SideBarHeader.prototype.getStateElement = function () {
+        return this.model;
     };
-    SurveyQuestionSpinEditor.prototype.renderButtons = function () {
-        var _this = this;
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: this.question.cssClasses.buttonsContainer },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("button", { tabIndex: -1, className: this.question.cssClasses.arrowButton, disabled: this.isDisplayMode, onMouseDown: this.question.onDownButtonMouseDown, onMouseUp: this.question.onButtonMouseUp, onMouseLeave: this.question.onButtonMouseLeave, onBlur: function (event) { return _this.question.onBlur(event.nativeEvent); }, onFocus: function (event) { return _this.question.onFocus(event.nativeEvent); } },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: this.question.cssClasses.decreaseButtonIcon, size: "auto" })),
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("button", { tabIndex: -1, className: this.question.cssClasses.arrowButton, disabled: this.isDisplayMode, onMouseDown: this.question.onUpButtonMouseDown, onMouseUp: this.question.onButtonMouseUp, onMouseLeave: this.question.onButtonMouseLeave, onBlur: function (event) { return _this.question.onBlur(event.nativeEvent); }, onFocus: function (event) { return _this.question.onFocus(event.nativeEvent); } },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: this.question.cssClasses.increaseButtonIcon, size: "auto" }))));
+    SideBarHeader.prototype.renderElement = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-side-bar__container-header svc-sidebar__header-container" }, (this.model.subTitle) ?
+            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.model.title),
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-sidebar__header-subtitle" }, this.model.subTitle))
+            : react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-side-bar__container-title" }, this.model.title)));
     };
-    return SurveyQuestionSpinEditor;
-}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyQuestionText));
-
-survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactQuestionFactory.Instance.registerQuestion("spinedit", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SurveyQuestionSpinEditor, props);
+    return SideBarHeader;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-side-bar-header", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SideBarHeader, props);
 });
 
 
 /***/ }),
 
-/***/ "./src/custom-questions/TextWithResetQuestion.tsx":
-/*!********************************************************!*\
-  !*** ./src/custom-questions/TextWithResetQuestion.tsx ***!
-  \********************************************************/
+/***/ "./src/side-bar/SideBarPropertyGridHeader.tsx":
+/*!****************************************************!*\
+  !*** ./src/side-bar/SideBarPropertyGridHeader.tsx ***!
+  \****************************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   SurveyQuestionTextWithReset: () => (/* binding */ SurveyQuestionTextWithReset)
-/* 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 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 SurveyQuestionTextWithReset = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SurveyQuestionTextWithReset, _super);
-    function SurveyQuestionTextWithReset() {
+
+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(SurveyQuestionTextWithReset.prototype, "question", {
+    Object.defineProperty(SideBarPropertyGridHeader.prototype, "objectSelectionAction", {
         get: function () {
-            return this.questionBase;
+            return this.props.model;
         },
         enumerable: false,
         configurable: true
     });
-    SurveyQuestionTextWithReset.prototype.renderElement = function () {
-        var textElement = this.renderInput();
-        var resetButton = this.renderResetButton();
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.question.getRootClass() },
-            textElement,
-            resetButton));
-    };
-    SurveyQuestionTextWithReset.prototype.renderInput = function () {
-        return survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactQuestionFactory.Instance.createQuestion(this.question.wrappedQuestionTemplate, {
-            question: this.question,
-            isDisplayMode: this.question.isInputReadOnly,
-            creator: this,
-        });
+    SideBarPropertyGridHeader.prototype.getStateElement = function () {
+        return this.objectSelectionAction;
     };
-    SurveyQuestionTextWithReset.prototype.renderResetButton = function () {
+    SideBarPropertyGridHeader.prototype.renderElement = function () {
         var _this = this;
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("button", { className: this.question.cssClasses.resetButton, disabled: this.question.resetValueAdorner.isDisabled, title: this.question.resetValueAdorner.caption, onClick: function () { return _this.question.resetValueAdorner.resetValue(); } },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: this.question.cssClasses.resetButtonIcon, size: "auto" })));
-    };
-    return SurveyQuestionTextWithReset;
-}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyQuestionElementBase));
-
-survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactQuestionFactory.Instance.registerQuestion("textwithreset", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SurveyQuestionTextWithReset, props);
-});
-survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactQuestionFactory.Instance.registerQuestion("commentwithreset", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SurveyQuestionTextWithReset, props);
+        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/entries/helpers.ts":
-/*!********************************!*\
-  !*** ./src/entries/helpers.ts ***!
-  \********************************/
+/***/ "./src/side-bar/TabButton.tsx":
+/*!************************************!*\
+  !*** ./src/side-bar/TabButton.tsx ***!
+  \************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   __assign: () => (/* binding */ __assign),
-/* harmony export */   __decorate: () => (/* binding */ __decorate),
-/* harmony export */   __extends: () => (/* binding */ __extends),
-/* harmony export */   __spreadArrays: () => (/* binding */ __spreadArrays)
+/* harmony export */   TabButtonComponent: () => (/* binding */ TabButtonComponent)
 /* harmony export */ });
-var __decorate = function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3
-        ? target
-        : desc === null
-            ? (desc = Object.getOwnPropertyDescriptor(target, key))
-            : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if ((d = decorators[i]))
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __assign = Object["assign"] ||
-    function (target) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s)
-                if (Object.prototype.hasOwnProperty.call(s, p))
-                    target[p] = s[p];
-        }
-        return target;
-    };
-function __extends(thisClass, baseClass) {
-    for (var p in baseClass)
-        if (baseClass.hasOwnProperty(p))
-            thisClass[p] = baseClass[p];
-    function __() {
-        this.constructor = thisClass;
+/* 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;
     }
-    thisClass.prototype =
-        baseClass === null
-            ? Object.create(baseClass)
-            : ((__.prototype = baseClass.prototype), new __());
-}
-var __spreadArrays = function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++)
-        s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-};
+    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/events.ts":
-/*!***********************!*\
-  !*** ./src/events.ts ***!
-  \***********************/
+/***/ "./src/side-bar/TabControl.tsx":
+/*!*************************************!*\
+  !*** ./src/side-bar/TabControl.tsx ***!
+  \*************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   ReactDragEvent: () => (/* binding */ ReactDragEvent),
-/* harmony export */   ReactMouseEvent: () => (/* binding */ ReactMouseEvent)
-/* 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 _TabButton__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./TabButton */ "./src/side-bar/TabButton.tsx");
 
-var ReactMouseEvent = /** @class */ (function () {
-    function ReactMouseEvent(event) {
-        this.event = event;
+
+
+
+var TabControl = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(TabControl, _super);
+    function TabControl(props) {
+        return _super.call(this, props) || this;
     }
-    ReactMouseEvent.prototype.stopPropagation = function () {
-        this.event.stopPropagation();
-        //this.event.nativeEvent.stopPropagation();
-        //this.event.nativeEvent.stopImmediatePropagation();
-    };
-    ReactMouseEvent.prototype.preventDefault = function () {
-        this.event.preventDefault();
-        //this.event.nativeEvent.preventDefault();
+    TabControl.prototype.getStateElement = function () {
+        return this.props.model;
     };
-    Object.defineProperty(ReactMouseEvent.prototype, "cancelBubble", {
-        get: function () {
-            //return this.event.cancelBubble;
+    TabControl.prototype.canRender = function () {
+        if (!this.props.model)
             return false;
-        },
-        set: function (value) {
-            //this.event.cancelBubble = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ReactMouseEvent.prototype, "target", {
-        get: function () {
-            return this.event.target;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ReactMouseEvent.prototype, "currentTarget", {
-        get: function () {
-            return this.event.currentTarget;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ReactMouseEvent.prototype, "clientX", {
-        get: function () {
-            return this.event.clientX;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ReactMouseEvent.prototype, "clientY", {
-        get: function () {
-            return this.event.clientY;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ReactMouseEvent.prototype, "offsetX", {
-        get: function () {
-            return this.event.nativeEvent.offsetX;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ReactMouseEvent.prototype, "offsetY", {
-        get: function () {
-            return this.event.nativeEvent.offsetY;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    return ReactMouseEvent;
-}());
-
-var ReactDragEvent = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(ReactDragEvent, _super);
-    function ReactDragEvent(event) {
-        var _this = _super.call(this, event) || this;
-        _this.event = event;
-        return _this;
+        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;
     }
-    Object.defineProperty(ReactDragEvent.prototype, "dataTransfer", {
-        get: function () {
-            return this.event.dataTransfer;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    return ReactDragEvent;
-}(ReactMouseEvent));
-
+    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));
 
 
 /***/ }),
@@ -4214,7 +4587,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var _Toolbox__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Toolbox */ "./src/toolbox/Toolbox.tsx");
 /* harmony import */ var _ToolboxItem__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./ToolboxItem */ "./src/toolbox/ToolboxItem.tsx");
-/* harmony import */ var _Search__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Search */ "./src/Search.tsx");
+/* harmony import */ var _side_bar_Search__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../side-bar/Search */ "./src/side-bar/Search.tsx");
 
 
 
@@ -4249,7 +4622,7 @@ var AdaptiveToolbox = /** @class */ (function (_super) {
             null;
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-toolbox__search-container" },
             searchButton,
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_Search__WEBPACK_IMPORTED_MODULE_6__.SearchComponent, { model: this.toolbox.searchManager })));
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_side_bar_Search__WEBPACK_IMPORTED_MODULE_6__.SearchComponent, { model: this.toolbox.searchManager })));
     };
     AdaptiveToolbox.prototype.render = function () {
         var _this = this;
@@ -4852,7 +5225,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_38__.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),
@@ -4862,24 +5235,26 @@ __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 */ _side_bar_PropertyGrid__WEBPACK_IMPORTED_MODULE_53__.PropertyGridComponent),
+/* harmony export */   PropertyGridEditorCollection: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_63__.PropertyGridEditorCollection),
+/* harmony export */   PropertyGridPlaceholderComponent: () => (/* reexport safe */ _side_bar_PropertyGridPlaceholder__WEBPACK_IMPORTED_MODULE_47__.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_40__.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_51__.ReactDragEvent),
+/* harmony export */   ReactMouseEvent: () => (/* reexport safe */ _events__WEBPACK_IMPORTED_MODULE_51__.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 */ _side_bar_Search__WEBPACK_IMPORTED_MODULE_54__.SearchComponent),
+/* harmony export */   SideBarDefaultHeader: () => (/* reexport safe */ _side_bar_SideBarDefaultHeader__WEBPACK_IMPORTED_MODULE_32__.SideBarDefaultHeader),
+/* harmony export */   SidebarComponent: () => (/* reexport safe */ _side_bar_SideBar__WEBPACK_IMPORTED_MODULE_35__.SidebarComponent),
+/* harmony export */   StylesManager: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_63__.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),
@@ -4887,43 +5262,45 @@ __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_39__.SurveyLocStringEditor),
+/* harmony export */   SurveyLogic: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_63__.SurveyLogic),
+/* harmony export */   SurveyLogicOpertor: () => (/* reexport safe */ _tabs_logic_operator__WEBPACK_IMPORTED_MODULE_41__.SurveyLogicOpertor),
+/* harmony export */   SurveyLogicUI: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_63__.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 */   SurveyQuestionBooleanSwitch: () => (/* reexport safe */ _custom_questions_BooleanSwitch__WEBPACK_IMPORTED_MODULE_62__.SurveyQuestionBooleanSwitch),
+/* harmony export */   SurveyQuestionColor: () => (/* reexport safe */ _custom_questions_ColorQuestion__WEBPACK_IMPORTED_MODULE_59__.SurveyQuestionColor),
+/* harmony export */   SurveyQuestionEditorDefinition: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_63__.SurveyQuestionEditorDefinition),
+/* harmony export */   SurveyQuestionFileEditor: () => (/* reexport safe */ _custom_questions_FileEditQuestion__WEBPACK_IMPORTED_MODULE_60__.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_57__.SurveyQuestionSpinEditor),
+/* harmony export */   SurveyQuestionTextWithReset: () => (/* reexport safe */ _custom_questions_TextWithResetQuestion__WEBPACK_IMPORTED_MODULE_61__.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_50__.SurveySimulator),
+/* harmony export */   SwitcherComponent: () => (/* reexport safe */ _Switcher__WEBPACK_IMPORTED_MODULE_55__.SwitcherComponent),
+/* harmony export */   TabButtonComponent: () => (/* reexport safe */ _side_bar_TabButton__WEBPACK_IMPORTED_MODULE_31__.TabButtonComponent),
+/* harmony export */   TabDesignerComponent: () => (/* reexport safe */ _tabs_Designer__WEBPACK_IMPORTED_MODULE_42__.TabDesignerComponent),
+/* harmony export */   TabJsonEditorAceComponent: () => (/* reexport safe */ _tabs_JsonEditorAce__WEBPACK_IMPORTED_MODULE_43__.TabJsonEditorAceComponent),
+/* harmony export */   TabJsonEditorErrorsComponent: () => (/* reexport safe */ _tabs_JsonEditorTextarea__WEBPACK_IMPORTED_MODULE_44__.TabJsonEditorErrorsComponent),
+/* harmony export */   TabJsonEditorTextareaComponent: () => (/* reexport safe */ _tabs_JsonEditorTextarea__WEBPACK_IMPORTED_MODULE_44__.TabJsonEditorTextareaComponent),
+/* harmony export */   TabLogicAddButtonComponent: () => (/* reexport safe */ _tabs_Logic__WEBPACK_IMPORTED_MODULE_45__.TabLogicAddButtonComponent),
+/* harmony export */   TabLogicComponent: () => (/* reexport safe */ _tabs_Logic__WEBPACK_IMPORTED_MODULE_45__.TabLogicComponent),
+/* harmony export */   TabPreviewSurveyComponent: () => (/* reexport safe */ _tabs_Preview__WEBPACK_IMPORTED_MODULE_46__.TabPreviewSurveyComponent),
+/* harmony export */   TabPreviewTestSurveyAgainComponent: () => (/* reexport safe */ _tabs_Preview__WEBPACK_IMPORTED_MODULE_46__.TabPreviewTestSurveyAgainComponent),
+/* harmony export */   TabThemeSurveyComponent: () => (/* reexport safe */ _tabs_Theme__WEBPACK_IMPORTED_MODULE_48__.TabThemeSurveyComponent),
+/* harmony export */   TabTranslationComponent: () => (/* reexport safe */ _tabs_translation_Translation__WEBPACK_IMPORTED_MODULE_49__.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_63__.ToolboxToolViewModel),
+/* harmony export */   TranslateFromAction: () => (/* reexport safe */ _tabs_translation_TranslateFromAction__WEBPACK_IMPORTED_MODULE_37__.TranslateFromAction),
+/* harmony export */   TranslationLineSkeleton: () => (/* reexport safe */ _tabs_translation_TranslationLineSkeleton__WEBPACK_IMPORTED_MODULE_36__.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_63__.editorLocalization),
+/* harmony export */   localization: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_63__.localization),
+/* harmony export */   settings: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_63__.settings),
+/* harmony export */   svgBundle: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_63__.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");
@@ -4955,38 +5332,45 @@ __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 _side_bar_TabControl__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ../side-bar/TabControl */ "./src/side-bar/TabControl.tsx");
+/* harmony import */ var _side_bar_TabButton__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ../side-bar/TabButton */ "./src/side-bar/TabButton.tsx");
+/* harmony import */ var _side_bar_SideBarDefaultHeader__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ../side-bar/SideBarDefaultHeader */ "./src/side-bar/SideBarDefaultHeader.tsx");
+/* harmony import */ var _side_bar_SideBarPropertyGridHeader__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ../side-bar/SideBarPropertyGridHeader */ "./src/side-bar/SideBarPropertyGridHeader.tsx");
+/* harmony import */ var _side_bar_SideBarHeader__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ../side-bar/SideBarHeader */ "./src/side-bar/SideBarHeader.tsx");
+/* harmony import */ var _side_bar_SideBar__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(/*! ../side-bar/SideBar */ "./src/side-bar/SideBar.tsx");
+/* harmony import */ var _tabs_translation_TranslationLineSkeleton__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ../tabs/translation/TranslationLineSkeleton */ "./src/tabs/translation/TranslationLineSkeleton.tsx");
+/* harmony import */ var _tabs_translation_TranslateFromAction__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ../tabs/translation/TranslateFromAction */ "./src/tabs/translation/TranslateFromAction.tsx");
+/* harmony import */ var _ActionButton__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ../ActionButton */ "./src/ActionButton.tsx");
+/* harmony import */ var _StringEditor__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ../StringEditor */ "./src/StringEditor.tsx");
+/* harmony import */ var _QuestionError__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ../QuestionError */ "./src/QuestionError.tsx");
+/* harmony import */ var _tabs_logic_operator__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ../tabs/logic-operator */ "./src/tabs/logic-operator.tsx");
+/* harmony import */ var _tabs_Designer__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ../tabs/Designer */ "./src/tabs/Designer.tsx");
+/* harmony import */ var _tabs_JsonEditorAce__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! ../tabs/JsonEditorAce */ "./src/tabs/JsonEditorAce.tsx");
+/* harmony import */ var _tabs_JsonEditorTextarea__WEBPACK_IMPORTED_MODULE_44__ = __webpack_require__(/*! ../tabs/JsonEditorTextarea */ "./src/tabs/JsonEditorTextarea.tsx");
+/* harmony import */ var _tabs_Logic__WEBPACK_IMPORTED_MODULE_45__ = __webpack_require__(/*! ../tabs/Logic */ "./src/tabs/Logic.tsx");
+/* harmony import */ var _tabs_Preview__WEBPACK_IMPORTED_MODULE_46__ = __webpack_require__(/*! ../tabs/Preview */ "./src/tabs/Preview.tsx");
+/* harmony import */ var _side_bar_PropertyGridPlaceholder__WEBPACK_IMPORTED_MODULE_47__ = __webpack_require__(/*! ../side-bar/PropertyGridPlaceholder */ "./src/side-bar/PropertyGridPlaceholder.tsx");
+/* harmony import */ var _tabs_Theme__WEBPACK_IMPORTED_MODULE_48__ = __webpack_require__(/*! ../tabs/Theme */ "./src/tabs/Theme.tsx");
+/* harmony import */ var _tabs_translation_Translation__WEBPACK_IMPORTED_MODULE_49__ = __webpack_require__(/*! ../tabs/translation/Translation */ "./src/tabs/translation/Translation.tsx");
+/* harmony import */ var _tabs_SurveySimulator__WEBPACK_IMPORTED_MODULE_50__ = __webpack_require__(/*! ../tabs/SurveySimulator */ "./src/tabs/SurveySimulator.tsx");
+/* harmony import */ var _events__WEBPACK_IMPORTED_MODULE_51__ = __webpack_require__(/*! ../events */ "./src/events.ts");
+/* harmony import */ var _side_bar_ObjectSelector__WEBPACK_IMPORTED_MODULE_52__ = __webpack_require__(/*! ../side-bar/ObjectSelector */ "./src/side-bar/ObjectSelector.tsx");
+/* harmony import */ var _side_bar_PropertyGrid__WEBPACK_IMPORTED_MODULE_53__ = __webpack_require__(/*! ../side-bar/PropertyGrid */ "./src/side-bar/PropertyGrid.tsx");
+/* harmony import */ var _side_bar_Search__WEBPACK_IMPORTED_MODULE_54__ = __webpack_require__(/*! ../side-bar/Search */ "./src/side-bar/Search.tsx");
+/* harmony import */ var _Switcher__WEBPACK_IMPORTED_MODULE_55__ = __webpack_require__(/*! ../Switcher */ "./src/Switcher.tsx");
+/* harmony import */ var _tabs_JsonErrorItem__WEBPACK_IMPORTED_MODULE_56__ = __webpack_require__(/*! ../tabs/JsonErrorItem */ "./src/tabs/JsonErrorItem.tsx");
+/* harmony import */ var _custom_questions_SpinEditor__WEBPACK_IMPORTED_MODULE_57__ = __webpack_require__(/*! ../custom-questions/SpinEditor */ "./src/custom-questions/SpinEditor.tsx");
+/* harmony import */ var _custom_questions_ColorItem__WEBPACK_IMPORTED_MODULE_58__ = __webpack_require__(/*! ../custom-questions/ColorItem */ "./src/custom-questions/ColorItem.tsx");
+/* harmony import */ var _custom_questions_ColorQuestion__WEBPACK_IMPORTED_MODULE_59__ = __webpack_require__(/*! ../custom-questions/ColorQuestion */ "./src/custom-questions/ColorQuestion.tsx");
+/* harmony import */ var _custom_questions_FileEditQuestion__WEBPACK_IMPORTED_MODULE_60__ = __webpack_require__(/*! ../custom-questions/FileEditQuestion */ "./src/custom-questions/FileEditQuestion.tsx");
+/* harmony import */ var _custom_questions_TextWithResetQuestion__WEBPACK_IMPORTED_MODULE_61__ = __webpack_require__(/*! ../custom-questions/TextWithResetQuestion */ "./src/custom-questions/TextWithResetQuestion.tsx");
+/* harmony import */ var _custom_questions_BooleanSwitch__WEBPACK_IMPORTED_MODULE_62__ = __webpack_require__(/*! ../custom-questions/BooleanSwitch */ "./src/custom-questions/BooleanSwitch.tsx");
+/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_63__ = __webpack_require__(/*! survey-creator-core */ "survey-creator-core");
+/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_63___default = /*#__PURE__*/__webpack_require__.n(survey_creator_core__WEBPACK_IMPORTED_MODULE_63__);
+/* 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.1");
+Version = "".concat("1.12.3");
 // import "@survey/creator/survey-creator-core.css";
 
 
@@ -5032,6 +5416,12 @@ Version = "".concat("1.12.1");
 
 
 
+
+
+
+
+
+
 
 
 
@@ -5053,7 +5443,8 @@ Version = "".concat("1.12.1");
 
 
 
-(0,survey_core__WEBPACK_IMPORTED_MODULE_57__.checkLibraryVersion)("".concat("1.12.1"), "survey-creator-react");
+
+(0,survey_core__WEBPACK_IMPORTED_MODULE_64__.checkLibraryVersion)("".concat("1.12.3"), "survey-creator-react");
 
 /******/ 	return __webpack_exports__;
 /******/ })()