survey-creator-react 1.12.2 → 1.12.4

package/survey-creator-react.js

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator React v1.12.2
+ * SurveyJS Creator React v1.12.4
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -669,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":
@@ -841,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":
@@ -1241,560 +1136,278 @@ 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", {
+    Object.defineProperty(SurveyLocStringEditor.prototype, "creator", {
         get: function () {
-            return this.props.model;
+            return this.props.locStr.creator;
         },
         enumerable: false,
         configurable: true
     });
-    SidebarComponent.prototype.getStateElement = function () {
-        return this.model;
+    Object.defineProperty(SurveyLocStringEditor.prototype, "style", {
+        get: function () {
+            return this.props.style;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyLocStringEditor.prototype.getStateElement = function () {
+        return this.baseModel;
     };
-    SidebarComponent.prototype.componentDidMount = function () {
+    Object.defineProperty(SurveyLocStringEditor.prototype, "errorText", {
+        get: function () {
+            return this.baseModel.errorText;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyLocStringEditor.prototype.componentDidMount = function () {
+        var _this = this;
         _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);
+        if (!this.locString)
+            return;
+        this.baseModel.setLocString(this.locString);
+        this.baseModel.getEditorElement = function () { return _this.svStringEditorRef.current; };
+        this.baseModel.blurEditor = function () {
+            _this.svStringEditorRef.current.blur();
+            _this.svStringEditorRef.current.spellcheck = false;
+        };
+        this.baseModel.afterRender();
+        this.locString.onStringChanged.add(this.onChangedHandler);
+        if (this.locString["__isEditing"]) {
+            this.svStringEditorRef.current.focus();
+            // document.execCommand('selectAll', false, null);
+        }
     };
-    SidebarComponent.prototype.renderDefaultHeader = function () {
-        var activePage = this.model.getActivePage();
-        var headerText = !!activePage.caption ? react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-side-bar__container-title" }, activePage.caption) : null;
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-side-bar__container-header" },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-side-bar__container-actions" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyActionBar, { model: this.model.toolbar })),
-            headerText));
+    SurveyLocStringEditor.prototype.componentDidUpdate = function (prevProps, prevState) {
+        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
+        this.baseModel.setLocString(this.locString);
+        this.baseModel.afterRender();
     };
-    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 sideArea = null;
-        if (this.model.sideAreaComponentName) {
-            sideArea = survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.createElement(this.model.sideAreaComponentName, { model: this.model.sideAreaComponentData });
-        }
-        var headerArea = null;
-        if (this.model.headerComponentName) {
-            headerArea = survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.createElement(this.model.headerComponentName, { model: this.model.headerComponentData });
-        }
-        else {
-            headerArea = this.renderDefaultHeader();
-        }
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: className, style: { display: !this.model.hasVisiblePages ? "none" : "" } },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-side-bar__shadow", onClick: function () { return _this.model.collapseSidebar(); } }),
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-flex-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)));
+    SurveyLocStringEditor.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        this.baseModel.detachFromUI();
+        if (!this.locString)
+            return;
+        this.locString.onStringChanged.remove(this.onChangedHandler);
     };
-    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", {
+    Object.defineProperty(SurveyLocStringEditor.prototype, "placeholder", {
         get: function () {
-            return this.props.page;
+            return this.baseModel.placeholder;
         },
         enumerable: false,
         configurable: true
     });
-    SidebarPage.prototype.getStateElement = function () {
-        return this.page;
-    };
-    SidebarPage.prototype.renderElement = function () {
-        if (!this.page.visible)
+    Object.defineProperty(SurveyLocStringEditor.prototype, "contentEditable", {
+        get: function () {
+            return this.baseModel.contentEditable;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyLocStringEditor.prototype, "className", {
+        get: function () {
+            return this.baseModel.className(this.locString.renderedHtml);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyLocStringEditor.prototype.render = function () {
+        if (!this.locString) {
             return null;
-        var component = survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.createElement(this.page.componentName, { model: this.page.componentData });
-        return component;
+        }
+        var control = null;
+        if (this.locString.hasHtml) {
+            var htmlValue = { __html: this.locString.renderedHtml };
+            control = (react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { role: "textbox", ref: this.svStringEditorRef, className: "sv-string-editor sv-string-editor--html", contentEditable: this.contentEditable, spellCheck: false, "aria-placeholder": this.placeholder, "aria-label": this.placeholder || "content editable", suppressContentEditableWarning: true, 
+                // style={this.style}
+                dangerouslySetInnerHTML: htmlValue, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, onMouseUp: this.onMouseUp, onClick: this.edit }));
+        }
+        else {
+            control = (react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { role: "textbox", ref: this.svStringEditorRef, className: "sv-string-editor", contentEditable: this.contentEditable, spellCheck: false, "aria-placeholder": this.placeholder, "aria-label": this.placeholder || "content editable", suppressContentEditableWarning: true, 
+                // style={this.style}
+                key: this.locString.renderedHtml, onBlur: this.onBlur, onInput: this.onInput, onPaste: this.onPaste, onCompositionStart: this.onCompositionStart, onCompositionEnd: this.onCompositionEnd, onFocus: this.onFocus, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp, onMouseUp: this.onMouseUp, onClick: this.edit }, this.locString.renderedHtml));
+        }
+        var counter = this.baseModel.showCharacterCounter ? (react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.CharacterCounterComponent, { counter: this.baseModel.characterCounter, remainingCharacterCounter: this.baseModel.getCharacterCounterClass })) : null;
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: this.className },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-string-editor__content" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-string-editor__border svc-string-editor__border--hover", onClick: this.edit }),
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-string-editor__border svc-string-editor__border--focus", onClick: this.edit }),
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-string-editor__input" },
+                    control,
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-string-editor__controls", onClick: this.edit }),
+                    counter)),
+            this.errorText ? react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-string-editor__error" }, this.errorText) : ""));
     };
-    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);
+    return SurveyLocStringEditor;
+}(_ModelElement__WEBPACK_IMPORTED_MODULE_4__.CreatorModelElement));
+
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement(survey_creator_core__WEBPACK_IMPORTED_MODULE_3__.editableStringRendererName, function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SurveyLocStringEditor, props);
 });
 
 
 /***/ }),
 
-/***/ "./src/SideBarPropertyGridHeader.tsx":
-/*!*******************************************!*\
-  !*** ./src/SideBarPropertyGridHeader.tsx ***!
-  \*******************************************/
+/***/ "./src/SurveyCreator.tsx":
+/*!*******************************!*\
+  !*** ./src/SurveyCreator.tsx ***!
+  \*******************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   SurveyCreator: () => (/* binding */ SurveyCreator),
+/* harmony export */   SurveyCreatorComponent: () => (/* binding */ SurveyCreatorComponent)
+/* 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 react_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom */ "react-dom");
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_dom__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_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 _TabbedMenu__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./TabbedMenu */ "./src/TabbedMenu.tsx");
 
 
 
 
-var SideBarPropertyGridHeader = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SideBarPropertyGridHeader, _super);
-    function SideBarPropertyGridHeader() {
-        return _super !== null && _super.apply(this, arguments) || this;
+
+
+var SurveyCreatorComponent = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SurveyCreatorComponent, _super);
+    function SurveyCreatorComponent(props) {
+        var _this = _super.call(this, props) || this;
+        _this.rootNode = react__WEBPACK_IMPORTED_MODULE_1__.createRef();
+        return _this;
     }
-    Object.defineProperty(SideBarPropertyGridHeader.prototype, "objectSelectionAction", {
+    Object.defineProperty(SurveyCreatorComponent.prototype, "creator", {
         get: function () {
-            return this.props.model;
+            return this.props.creator;
         },
         enumerable: false,
         configurable: true
     });
-    SideBarPropertyGridHeader.prototype.getStateElement = function () {
-        return this.objectSelectionAction;
-    };
-    SideBarPropertyGridHeader.prototype.renderElement = function () {
-        var _this = this;
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar__header svc-sidebar__header--tabbed" },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar__header-container svc-sidebar__header-container--with-subtitle" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar__header-content", onClick: function () { return _this.objectSelectionAction.action(); } },
-                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.objectSelectionAction.buttonClassName },
-                        react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar__header-caption" },
-                            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-sidebar__header-title" }, this.objectSelectionAction.title),
-                            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-sidebar__header-subtitle" }, this.objectSelectionAction.tooltip))),
-                    react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.Popup, { model: this.objectSelectionAction.popupModel, getTarget: survey_core__WEBPACK_IMPORTED_MODULE_2__.getActionDropdownButtonTarget })))));
+    SurveyCreatorComponent.prototype.getStateElement = function () {
+        return this.creator;
     };
-    return SideBarPropertyGridHeader;
-}(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase));
-survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-side-bar-property-grid-header", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SideBarPropertyGridHeader, props);
-});
-
-
-/***/ }),
-
-/***/ "./src/SideBarPropertyGridPlaceholderHeader.tsx":
-/*!******************************************************!*\
-  !*** ./src/SideBarPropertyGridPlaceholderHeader.tsx ***!
-  \******************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
-/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
-
-
-
-var SideBarPropertyGridPlaceholderHeader = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SideBarPropertyGridPlaceholderHeader, _super);
-    function SideBarPropertyGridPlaceholderHeader() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Object.defineProperty(SideBarPropertyGridPlaceholderHeader.prototype, "activePage", {
+    Object.defineProperty(SurveyCreatorComponent.prototype, "style", {
         get: function () {
-            return this.props.model;
+            return this.props.style;
         },
         enumerable: false,
         configurable: true
     });
-    SideBarPropertyGridPlaceholderHeader.prototype.getStateElement = function () {
-        return this.activePage;
+    SurveyCreatorComponent.prototype.componentDidUpdate = function (prevProps, prevState) {
+        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
+        if (this.creator !== prevProps.creator) {
+            if (prevProps.creator) {
+                prevProps.creator.unsubscribeRootElement();
+            }
+            if (this.creator && this.rootNode.current) {
+                this.creator.setRootElement(this.rootNode.current);
+            }
+        }
     };
-    SideBarPropertyGridPlaceholderHeader.prototype.renderElement = function () {
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-side-bar__container-header svc-sidebar__header-container" },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-side-bar__container-title" }, this.activePage.caption)));
-    };
-    return SideBarPropertyGridPlaceholderHeader;
-}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
-survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-side-bar-property-grid-placeholder-header", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SideBarPropertyGridPlaceholderHeader, props);
-});
-
-
-/***/ }),
-
-/***/ "./src/StringEditor.tsx":
-/*!******************************!*\
-  !*** ./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, "errorText", {
-        get: function () {
-            return this.baseModel.errorText;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SurveyLocStringEditor.prototype.componentDidMount = function () {
-        var _this = this;
-        _super.prototype.componentDidMount.call(this);
-        if (!this.locString)
-            return;
-        this.baseModel.setLocString(this.locString);
-        this.baseModel.getEditorElement = function () { return _this.svStringEditorRef.current; };
-        this.baseModel.blurEditor = function () {
-            _this.svStringEditorRef.current.blur();
-            _this.svStringEditorRef.current.spellcheck = false;
-        };
-        this.baseModel.afterRender();
-        this.locString.onStringChanged.add(this.onChangedHandler);
-        if (this.locString["__isEditing"]) {
-            this.svStringEditorRef.current.focus();
-            // document.execCommand('selectAll', false, null);
-        }
-    };
-    SurveyLocStringEditor.prototype.componentDidUpdate = function (prevProps, prevState) {
-        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
-        this.baseModel.setLocString(this.locString);
-        this.baseModel.afterRender();
-    };
-    SurveyLocStringEditor.prototype.componentWillUnmount = function () {
-        _super.prototype.componentWillUnmount.call(this);
-        this.baseModel.detachFromUI();
-        if (!this.locString)
-            return;
-        this.locString.onStringChanged.remove(this.onChangedHandler);
-    };
-    Object.defineProperty(SurveyLocStringEditor.prototype, "placeholder", {
-        get: function () {
-            return this.baseModel.placeholder;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SurveyLocStringEditor.prototype, "contentEditable", {
-        get: function () {
-            return this.baseModel.contentEditable;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SurveyLocStringEditor.prototype, "className", {
-        get: function () {
-            return this.baseModel.className(this.locString.renderedHtml);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SurveyLocStringEditor.prototype.render = function () {
-        if (!this.locString) {
-            return null;
-        }
-        var control = null;
-        if (this.locString.hasHtml) {
-            var htmlValue = { __html: this.locString.renderedHtml };
-            control = (react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { role: "textbox", ref: this.svStringEditorRef, className: "sv-string-editor sv-string-editor--html", contentEditable: this.contentEditable, spellCheck: false, "aria-placeholder": this.placeholder, "aria-label": this.placeholder || "content editable", suppressContentEditableWarning: true, 
-                // style={this.style}
-                dangerouslySetInnerHTML: htmlValue, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, onMouseUp: this.onMouseUp, onClick: this.edit }));
-        }
-        else {
-            control = (react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { role: "textbox", ref: this.svStringEditorRef, className: "sv-string-editor", contentEditable: this.contentEditable, spellCheck: false, "aria-placeholder": this.placeholder, "aria-label": this.placeholder || "content editable", suppressContentEditableWarning: true, 
-                // style={this.style}
-                key: this.locString.renderedHtml, onBlur: this.onBlur, onInput: this.onInput, onPaste: this.onPaste, onCompositionStart: this.onCompositionStart, onCompositionEnd: this.onCompositionEnd, onFocus: this.onFocus, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp, onMouseUp: this.onMouseUp, onClick: this.edit }, this.locString.renderedHtml));
-        }
-        var counter = this.baseModel.showCharacterCounter ? (react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.CharacterCounterComponent, { counter: this.baseModel.characterCounter, remainingCharacterCounter: this.baseModel.getCharacterCounterClass })) : null;
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: this.className },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-string-editor__content" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-string-editor__border svc-string-editor__border--hover", onClick: this.edit }),
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-string-editor__border svc-string-editor__border--focus", onClick: this.edit }),
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-string-editor__input" },
-                    control,
-                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-string-editor__controls", onClick: this.edit }),
-                    counter)),
-            this.errorText ? react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-string-editor__error" }, this.errorText) : ""));
-    };
-    return SurveyLocStringEditor;
-}(_ModelElement__WEBPACK_IMPORTED_MODULE_4__.CreatorModelElement));
-
-survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement(survey_creator_core__WEBPACK_IMPORTED_MODULE_3__.editableStringRendererName, function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SurveyLocStringEditor, props);
-});
-
-
-/***/ }),
-
-/***/ "./src/SurveyCreator.tsx":
-/*!*******************************!*\
-  !*** ./src/SurveyCreator.tsx ***!
-  \*******************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   SurveyCreator: () => (/* binding */ SurveyCreator),
-/* harmony export */   SurveyCreatorComponent: () => (/* binding */ SurveyCreatorComponent)
-/* 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 react_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom */ "react-dom");
-/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_dom__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_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 _TabbedMenu__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./TabbedMenu */ "./src/TabbedMenu.tsx");
-
-
-
-
-
-
-var SurveyCreatorComponent = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SurveyCreatorComponent, _super);
-    function SurveyCreatorComponent(props) {
-        var _this = _super.call(this, props) || this;
-        _this.rootNode = react__WEBPACK_IMPORTED_MODULE_1__.createRef();
-        return _this;
-    }
-    Object.defineProperty(SurveyCreatorComponent.prototype, "creator", {
-        get: function () {
-            return this.props.creator;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SurveyCreatorComponent.prototype.getStateElement = function () {
-        return this.creator;
-    };
-    Object.defineProperty(SurveyCreatorComponent.prototype, "style", {
-        get: function () {
-            return this.props.style;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SurveyCreatorComponent.prototype.componentDidUpdate = function (prevProps, prevState) {
-        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
-        if (this.creator !== prevProps.creator) {
-            if (prevProps.creator) {
-                prevProps.creator.unsubscribeRootElement();
-            }
-            if (this.creator && this.rootNode.current) {
-                this.creator.setRootElement(this.rootNode.current);
-            }
-        }
-    };
-    SurveyCreatorComponent.prototype.componentDidMount = function () {
-        _super.prototype.componentDidMount.call(this);
-        this.creator.setRootElement(this.rootNode.current);
+    SurveyCreatorComponent.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        this.creator.setRootElement(this.rootNode.current);
     };
     SurveyCreatorComponent.prototype.componentWillUnmount = function () {
         _super.prototype.componentWillUnmount.call(this);
@@ -1890,281 +1503,868 @@ var SurveyCreator = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_1__.createElement(SurveyCreatorComponent, { creator: this })), node);
         /* eslint-enable react/no-deprecated */
     };
-    //ISurveyCreator
-    SurveyCreator.prototype.createQuestionElement = function (question) {
-        return survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactQuestionFactory.Instance.createQuestion(question.isDefaultRendering()
-            ? question.getTemplate()
-            : question.getComponentName(), {
-            question: question,
-            isDisplayMode: question.isReadOnly,
-            creator: this
-        });
+    //ISurveyCreator
+    SurveyCreator.prototype.createQuestionElement = function (question) {
+        return survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactQuestionFactory.Instance.createQuestion(question.isDefaultRendering()
+            ? question.getTemplate()
+            : question.getComponentName(), {
+            question: question,
+            isDisplayMode: question.isReadOnly,
+            creator: this
+        });
+    };
+    SurveyCreator.prototype.renderError = function (key, error, cssClasses) {
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { key: key },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: cssClasses.error.icon, "aria-hidden": "true" }),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: cssClasses.error.item },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyLocStringViewer, { locStr: error.locText }))));
+    };
+    SurveyCreator.prototype.questionTitleLocation = function () {
+        return this.survey.questionTitleLocation;
+    };
+    SurveyCreator.prototype.questionErrorLocation = function () {
+        return this.survey.questionErrorLocation;
+    };
+    return SurveyCreator;
+}(survey_creator_core__WEBPACK_IMPORTED_MODULE_4__.SurveyCreatorModel));
+
+survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("survey-widget", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.Survey, props);
+});
+
+
+/***/ }),
+
+/***/ "./src/Switcher.tsx":
+/*!**************************!*\
+  !*** ./src/Switcher.tsx ***!
+  \**************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   SwitcherComponent: () => (/* binding */ SwitcherComponent),
+/* 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 SwitcherComponent = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SwitcherComponent, _super);
+    function SwitcherComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(SwitcherComponent.prototype, "item", {
+        get: function () {
+            return this.props.item;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SwitcherComponent.prototype.getStateElement = function () {
+        return this.item;
+    };
+    SwitcherComponent.prototype.renderElement = function () {
+        var _this = this;
+        var tooltip = this.item.tooltip || this.item.title;
+        var title = this.item.hasTitle ? react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-switcher__title" }, this.item.title) : null;
+        var button = (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("button", { className: this.item.getActionBarItemCss(), type: "button", disabled: this.item.disabled, onClick: function (args) { return _this.item.action(_this.item, _this.item.getIsTrusted(args)); }, title: tooltip, "aria-checked": this.item.ariaChecked, "aria-expanded": this.item.ariaExpanded, role: this.item.ariaRole },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.item.getSwitcherIconCss() },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-switcher__icon-thumb" })),
+            title), this.item, { processEsc: false });
+        return button;
+    };
+    return SwitcherComponent;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SwitcherComponent);
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-switcher", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SwitcherComponent, props);
+});
+
+
+/***/ }),
+
+/***/ "./src/TabbedMenu.tsx":
+/*!****************************!*\
+  !*** ./src/TabbedMenu.tsx ***!
+  \****************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   TabbedMenuComponent: () => (/* binding */ TabbedMenuComponent),
+/* harmony export */   TabbedMenuItemComponent: () => (/* binding */ TabbedMenuItemComponent),
+/* 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_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 TabbedMenuComponent = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(TabbedMenuComponent, _super);
+    function TabbedMenuComponent(props) {
+        var _this = _super.call(this, props) || this;
+        _this.rootRef = react__WEBPACK_IMPORTED_MODULE_1__.createRef();
+        return _this;
+    }
+    Object.defineProperty(TabbedMenuComponent.prototype, "model", {
+        get: function () {
+            return this.props.model;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TabbedMenuComponent.prototype.getStateElement = function () {
+        return this.model;
+    };
+    TabbedMenuComponent.prototype.renderElement = function () {
+        var items = this.model.renderedActions.map(function (item) { return react__WEBPACK_IMPORTED_MODULE_1__.createElement(TabbedMenuItemWrapper, { item: item, key: item.id }); });
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { ref: this.rootRef, className: "svc-tabbed-menu" }, items));
+    };
+    TabbedMenuComponent.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        var container = this.rootRef.current;
+        if (!container)
+            return;
+        this.manager = new survey_core__WEBPACK_IMPORTED_MODULE_2__.ResponsivityManager(container, this.model, ".svc-tabbed-menu-item-container:not(.sv-dots)>.sv-action__content");
+    };
+    TabbedMenuComponent.prototype.componentWillUnmount = function () {
+        this.manager && (this.manager.dispose());
+        _super.prototype.componentWillUnmount.call(this);
+    };
+    return TabbedMenuComponent;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase));
+
+var TabbedMenuItemWrapper = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(TabbedMenuItemWrapper, _super);
+    function TabbedMenuItemWrapper() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(TabbedMenuItemWrapper.prototype, "item", {
+        get: function () {
+            return this.props.item;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TabbedMenuItemWrapper.prototype.getStateElement = function () {
+        return this.item;
+    };
+    TabbedMenuItemWrapper.prototype.renderElement = function () {
+        var css = "svc-tabbed-menu-item-container";
+        if (this.item.css) {
+            css += " " + this.item.css;
+        }
+        css += (!this.item.isVisible ? " sv-action--hidden" : "");
+        var component = survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.createElement(this.item.component || "svc-tabbed-menu-item", { item: this.item });
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { key: this.item.id, className: css },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "sv-action__content" }, component)));
+    };
+    return TabbedMenuItemWrapper;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase));
+var TabbedMenuItemComponent = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(TabbedMenuItemComponent, _super);
+    function TabbedMenuItemComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(TabbedMenuItemComponent.prototype, "item", {
+        get: function () {
+            return this.props.item;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TabbedMenuItemComponent.prototype.getStateElement = function () {
+        return this.item;
+    };
+    TabbedMenuItemComponent.prototype.render = function () {
+        var item = this.item;
+        var className = "svc-tabbed-menu-item";
+        if (item.active)
+            className += " svc-tabbed-menu-item--selected";
+        if (item.enabled !== undefined && !item.enabled)
+            className += " svc-tabbed-menu-item--disabled";
+        var titleClassName = "svc-text svc-tabbed-menu-item__text svc-text--normal";
+        if (item.active)
+            titleClassName += " svc-text--bold";
+        return ((0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: className, onClick: function () { return item.action(item); } },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: titleClassName }, item.title))));
+    };
+    return TabbedMenuItemComponent;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase));
+
+survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-tabbed-menu-item", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(TabbedMenuItemComponent, props);
+});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TabbedMenuComponent);
+
+
+/***/ }),
+
+/***/ "./src/adorners/CellQuestion.tsx":
+/*!***************************************!*\
+  !*** ./src/adorners/CellQuestion.tsx ***!
+  \***************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   CellQuestionAdornerComponent: () => (/* binding */ CellQuestionAdornerComponent)
+/* 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 _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__);
+
+
+
+
+
+var CellQuestionAdornerComponent = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(CellQuestionAdornerComponent, _super);
+    function CellQuestionAdornerComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CellQuestionAdornerComponent.prototype.createModel = function (props) {
+        this.model = new survey_creator_core__WEBPACK_IMPORTED_MODULE_4__.QuestionAdornerViewModel(props.componentData, props.question, null);
+    };
+    CellQuestionAdornerComponent.prototype.getStateElement = function () {
+        return this.model;
+    };
+    CellQuestionAdornerComponent.prototype.getUpdatedModelProps = function () {
+        return ["question", "componentData"];
+    };
+    CellQuestionAdornerComponent.prototype.render = function () {
+        if (this.model.isDragged) {
+            return null;
+        }
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { "data-sv-drop-target-survey-element": this.model.element.name, className: "svc-question__adorner" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: " svc-question__content--in-popup svc-question__content" }, this.props.element))));
+    };
+    return CellQuestionAdornerComponent;
+}(_ModelElement__WEBPACK_IMPORTED_MODULE_3__.CreatorModelElement));
+
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-cell-question", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(CellQuestionAdornerComponent, props);
+});
+
+
+/***/ }),
+
+/***/ "./src/adorners/CellQuestionDropdown.tsx":
+/*!***********************************************!*\
+  !*** ./src/adorners/CellQuestionDropdown.tsx ***!
+  \***********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   CellQuestionDropdownAdornerComponent: () => (/* binding */ CellQuestionDropdownAdornerComponent)
+/* harmony export */ });
+/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
+/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-creator-core */ "survey-creator-core");
+/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_creator_core__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__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 _ModelElement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../ModelElement */ "./src/ModelElement.tsx");
+
+
+
+
+
+var CellQuestionDropdownAdornerComponent = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(CellQuestionDropdownAdornerComponent, _super);
+    function CellQuestionDropdownAdornerComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CellQuestionDropdownAdornerComponent.prototype.createModel = function (props) {
+        this.model = new survey_creator_core__WEBPACK_IMPORTED_MODULE_1__.QuestionAdornerViewModel(props.componentData, props.question, null);
+    };
+    CellQuestionDropdownAdornerComponent.prototype.getUpdatedModelProps = function () {
+        return ["question", "componentData"];
+    };
+    CellQuestionDropdownAdornerComponent.prototype.getStateElement = function () {
+        return this.model;
+    };
+    CellQuestionDropdownAdornerComponent.prototype.render = function () {
+        if (this.model.isDragged) {
+            return null;
+        }
+        var question = this.props.question;
+        var textStyle = this.props.question.textStyle;
+        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null,
+            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { "data-sv-drop-target-survey-element": this.model.element.name, className: "svc-question__adorner" },
+                react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: " svc-question__content--in-popup svc-question__content" },
+                    this.props.element,
+                    react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-question__dropdown-choices" }, question.visibleChoices.map(function (item, index) { return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-question__dropdown-choice", key: "editable_choice_".concat(index) }, survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactSurveyElementsWrapper.wrapItemValue(question.survey, survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.createElement("survey-radiogroup-item", {
+                        question: question,
+                        cssClasses: question.cssClasses,
+                        isDisplayMode: true,
+                        item: item,
+                        textStyle: textStyle,
+                        index: index,
+                        isChecked: question.value === item.value
+                    }), question, item))); }))))));
+    };
+    return CellQuestionDropdownAdornerComponent;
+}(_ModelElement__WEBPACK_IMPORTED_MODULE_4__.CreatorModelElement));
+
+survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-cell-dropdown-question", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_2__.createElement(CellQuestionDropdownAdornerComponent, props);
+});
+
+
+/***/ }),
+
+/***/ "./src/adorners/Page.tsx":
+/*!*******************************!*\
+  !*** ./src/adorners/Page.tsx ***!
+  \*******************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__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 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");
+
+
+
+
+
+
+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_1__.createRef();
+        return _this;
+    }
+    CreatorSurveyPageComponent.prototype.createModel = function (props) {
+        if (this.model) {
+            this.model.dispose();
+        }
+        this.model = new survey_creator_core__WEBPACK_IMPORTED_MODULE_4__.PageAdorner(props.creator, props.page);
+    };
+    CreatorSurveyPageComponent.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _a;
+        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
+        if (!!((_a = this.rootRef) === null || _a === void 0 ? void 0 : _a.current)) {
+            this.model.rootElement = this.rootRef.current;
+        }
+    };
+    CreatorSurveyPageComponent.prototype.getUpdatedModelProps = function () {
+        return ["creator", "page"];
+    };
+    CreatorSurveyPageComponent.prototype.getStateElement = function () {
+        return this.model;
+    };
+    CreatorSurveyPageComponent.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        if (!!this.rootRef.current) {
+            this.model.rootElement = this.rootRef.current;
+        }
+    };
+    CreatorSurveyPageComponent.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        this.model.dispose();
+    };
+    CreatorSurveyPageComponent.prototype.canRender = function () {
+        return (!!this.model &&
+            this.model.isPageLive &&
+            !!this.model.page &&
+            !!this.model.page.survey);
+    };
+    CreatorSurveyPageComponent.prototype.renderElement = function () {
+        var _this = this;
+        if (!this.props.page)
+            return null;
+        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(),
+            this.renderContent(),
+            this.renderPlaceholder(),
+            this.renderFooter())));
+    };
+    CreatorSurveyPageComponent.prototype.renderPlaceholder = function () {
+        if (!this.model.showPlaceholder)
+            return null;
+        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_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_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_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyActionBar, { model: this.model.footerActionsBar });
+    };
+    return CreatorSurveyPageComponent;
+}(_ModelElement__WEBPACK_IMPORTED_MODULE_3__.CreatorModelElement));
+
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-page", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(CreatorSurveyPageComponent, props);
+});
+
+
+/***/ }),
+
+/***/ "./src/adorners/Panel.tsx":
+/*!********************************!*\
+  !*** ./src/adorners/Panel.tsx ***!
+  \********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   PanelAdornerComponent: () => (/* binding */ PanelAdornerComponent)
+/* 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 _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");
+
+
+
+
+
+var PanelAdornerComponent = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(PanelAdornerComponent, _super);
+    function PanelAdornerComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PanelAdornerComponent.prototype.renderElementPlaceholder = function () {
+        var _this = this;
+        if (!this.model.isEmptyElement) {
+            return null;
+        }
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-panel__placeholder_frame-wrapper" },
+            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),
+                this.model.showAddQuestionButton ? (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))) : null)));
+    };
+    PanelAdornerComponent.prototype.disableTabStop = function () {
+        return true;
+    };
+    PanelAdornerComponent.prototype.renderFooter = function () {
+        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" },
+                    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;
+}(_Question__WEBPACK_IMPORTED_MODULE_3__.QuestionAdornerComponent));
+
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-panel", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(PanelAdornerComponent, props);
+});
+
+
+/***/ }),
+
+/***/ "./src/adorners/Question.tsx":
+/*!***********************************!*\
+  !*** ./src/adorners/Question.tsx ***!
+  \***********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   QuestionAdornerComponent: () => (/* binding */ QuestionAdornerComponent)
+/* harmony export */ });
+/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
+/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-creator-core */ "survey-creator-core");
+/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_creator_core__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _events__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../events */ "./src/events.ts");
+/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
+/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _ModelElement__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../ModelElement */ "./src/ModelElement.tsx");
+
+
+
+
+
+
+var QuestionAdornerComponent = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(QuestionAdornerComponent, _super);
+    function QuestionAdornerComponent(props) {
+        var _this = _super.call(this, props) || this;
+        _this.rootRef = react__WEBPACK_IMPORTED_MODULE_2__.createRef();
+        return _this;
+    }
+    QuestionAdornerComponent.prototype.createModel = function (props) {
+        if (this.modelValue) {
+            this.modelValue.dispose();
+        }
+        this.modelValue = this.createQuestionViewModel(props);
+    };
+    QuestionAdornerComponent.prototype.createQuestionViewModel = function (props) {
+        return new survey_creator_core__WEBPACK_IMPORTED_MODULE_1__.QuestionAdornerViewModel(props.componentData, props.question, null);
+    };
+    QuestionAdornerComponent.prototype.getUpdatedModelProps = function () {
+        return ["question", "componentData"];
+    };
+    Object.defineProperty(QuestionAdornerComponent.prototype, "model", {
+        get: function () {
+            return this.modelValue;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    QuestionAdornerComponent.prototype.getStateElement = function () {
+        return this.model;
+    };
+    QuestionAdornerComponent.prototype.canRender = function () {
+        return _super.prototype.canRender.call(this) && !this.model.isDragged;
+    };
+    QuestionAdornerComponent.prototype.renderElement = function () {
+        var _this = this;
+        var allowInteractions = this.model.element
+            .isInteractiveDesignElement;
+        var titleForCollapsedState = this.renderQuestionTitle();
+        var content = this.renderContent(allowInteractions);
+        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { ref: this.rootRef, "data-sv-drop-target-survey-element": this.model.element.name || null, className: this.model.rootCss(), onDoubleClick: function (e) { allowInteractions && _this.model.dblclick(e.nativeEvent); e.stopPropagation(); }, onMouseLeave: function (e) { return allowInteractions && _this.model.hover(e.nativeEvent, e.currentTarget); }, onMouseOver: function (e) { return allowInteractions && _this.model.hover(e.nativeEvent, e.currentTarget); } },
+            titleForCollapsedState,
+            content));
+    };
+    QuestionAdornerComponent.prototype.disableTabStop = function () {
+        return true;
+    };
+    QuestionAdornerComponent.prototype.renderContent = function (allowInteractions) {
+        var _this = this;
+        var content = this.renderElementContent();
+        //if (!allowInteractions) return <>{content}{this.renderFooter()}</>;
+        return (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: this.model.css(), onClick: function (e) { return _this.model.select(_this.model, new _events__WEBPACK_IMPORTED_MODULE_3__.ReactMouseEvent(e)); } },
+            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-question__drop-indicator svc-question__drop-indicator--left" }),
+            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-question__drop-indicator svc-question__drop-indicator--right" }),
+            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-question__drop-indicator svc-question__drop-indicator--top" }),
+            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }),
+            allowInteractions ? this.renderHeader() : null,
+            content,
+            this.renderFooter()), undefined, { disableTabStop: this.disableTabStop() });
+    };
+    QuestionAdornerComponent.prototype.renderHeader = function () {
+        return survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.ReactElementFactory.Instance.createElement("svc-question-header", { model: this.model });
+    };
+    QuestionAdornerComponent.prototype.renderFooter = function () {
+        var allowInteractions = this.model.element
+            .isInteractiveDesignElement;
+        return allowInteractions ? survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.ReactElementFactory.Instance.createElement("svc-question-footer", { className: "svc-question__content-actions", model: this.model }) : null;
+    };
+    QuestionAdornerComponent.prototype.renderCarryForwardBanner = function () {
+        if (!this.model.isBannerShowing)
+            return null;
+        return survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.ReactElementFactory.Instance.createElement("svc-question-banner", this.model.createBannerParams());
+    };
+    QuestionAdornerComponent.prototype.renderQuestionTitle = function () {
+        var _this = this;
+        if (!this.model.showHiddenTitle)
+            return null;
+        var element = this.model.element;
+        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: this.model.cssCollapsedHiddenHeader },
+            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { ref: function (node) { return node && (!_this.model.renderedCollapsed ?
+                    node.setAttribute("inert", "") : node.removeAttribute("inert")); }, className: this.model.cssCollapsedHiddenTitle }, element.hasTitle ? survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.SurveyElementBase.renderLocString(element.locTitle, null, "q_title") : react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { className: "svc-fake-title" }, element.name))));
+    };
+    QuestionAdornerComponent.prototype.renderElementContent = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null,
+            this.props.element,
+            this.renderElementPlaceholder(),
+            this.renderCarryForwardBanner()));
     };
-    SurveyCreator.prototype.renderError = function (key, error, cssClasses) {
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { key: key },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: cssClasses.error.icon, "aria-hidden": "true" }),
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: cssClasses.error.item },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyLocStringViewer, { locStr: error.locText }))));
+    QuestionAdornerComponent.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        this.model.rootElement = this.rootRef.current;
     };
-    SurveyCreator.prototype.questionTitleLocation = function () {
-        return this.survey.questionTitleLocation;
+    QuestionAdornerComponent.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _a;
+        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
+        if (((_a = this.rootRef) === null || _a === void 0 ? void 0 : _a.current) && this.modelValue) {
+            this.modelValue.rootElement = this.rootRef.current;
+        }
     };
-    SurveyCreator.prototype.questionErrorLocation = function () {
-        return this.survey.questionErrorLocation;
+    QuestionAdornerComponent.prototype.renderElementPlaceholder = function () {
+        if (!this.model.isEmptyElement) {
+            return null;
+        }
+        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-panel__placeholder_frame-wrapper" },
+            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-panel__placeholder_frame" },
+                react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-panel__placeholder" }, this.model.placeholderText))));
     };
-    return SurveyCreator;
-}(survey_creator_core__WEBPACK_IMPORTED_MODULE_4__.SurveyCreatorModel));
+    QuestionAdornerComponent.prototype.componentWillUnmount = function () {
+        if (this.model) {
+            this.model.dispose();
+        }
+    };
+    return QuestionAdornerComponent;
+}(_ModelElement__WEBPACK_IMPORTED_MODULE_5__.CreatorModelElement));
 
-survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("survey-widget", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.Survey, props);
+survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.ReactElementFactory.Instance.registerElement("svc-question", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_2__.createElement(QuestionAdornerComponent, props);
 });
 
 
 /***/ }),
 
-/***/ "./src/Switcher.tsx":
-/*!**************************!*\
-  !*** ./src/Switcher.tsx ***!
-  \**************************/
+/***/ "./src/adorners/QuestionBanner.tsx":
+/*!*****************************************!*\
+  !*** ./src/adorners/QuestionBanner.tsx ***!
+  \*****************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   SwitcherComponent: () => (/* binding */ SwitcherComponent),
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */   QuestionBanner: () => (/* binding */ QuestionBanner)
 /* 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 _ActionButton__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../ActionButton */ "./src/ActionButton.tsx");
 
 
 
-var SwitcherComponent = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SwitcherComponent, _super);
-    function SwitcherComponent() {
+
+var QuestionBanner = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(QuestionBanner, _super);
+    function QuestionBanner() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    Object.defineProperty(SwitcherComponent.prototype, "item", {
-        get: function () {
-            return this.props.item;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SwitcherComponent.prototype.getStateElement = function () {
-        return this.item;
-    };
-    SwitcherComponent.prototype.renderElement = function () {
+    QuestionBanner.prototype.render = function () {
         var _this = this;
-        var tooltip = this.item.tooltip || this.item.title;
-        var title = this.item.hasTitle ? react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-switcher__title" }, this.item.title) : null;
-        var button = (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("button", { className: this.item.getActionBarItemCss(), type: "button", disabled: this.item.disabled, onClick: function (args) { return _this.item.action(_this.item, _this.item.getIsTrusted(args)); }, title: tooltip, "aria-checked": this.item.ariaChecked, "aria-expanded": this.item.ariaExpanded, role: this.item.ariaRole },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.item.getSwitcherIconCss() },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-switcher__icon-thumb" })),
-            title), this.item, { processEsc: false });
-        return button;
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-carry-forward-panel-wrapper" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-carry-forward-panel" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", null,
+                    this.props.text,
+                    " "),
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-carry-forward-panel__link" },
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement(_ActionButton__WEBPACK_IMPORTED_MODULE_3__.ActionButton, { click: function () { return _this.props.onClick(); }, text: this.props.actionText })))));
     };
-    return SwitcherComponent;
-}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
+    return QuestionBanner;
+}(react__WEBPACK_IMPORTED_MODULE_1__.Component));
 
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SwitcherComponent);
-survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-switcher", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SwitcherComponent, props);
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-question-banner", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(QuestionBanner, props);
 });
 
 
 /***/ }),
 
-/***/ "./src/TabbedMenu.tsx":
-/*!****************************!*\
-  !*** ./src/TabbedMenu.tsx ***!
-  \****************************/
+/***/ "./src/adorners/QuestionDropdown.tsx":
+/*!*******************************************!*\
+  !*** ./src/adorners/QuestionDropdown.tsx ***!
+  \*******************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   TabbedMenuComponent: () => (/* binding */ TabbedMenuComponent),
-/* harmony export */   TabbedMenuItemComponent: () => (/* binding */ TabbedMenuItemComponent),
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */   QuestionDropdownAdornerComponent: () => (/* binding */ QuestionDropdownAdornerComponent)
 /* 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_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__);
+/* harmony import */ var _Question__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Question */ "./src/adorners/Question.tsx");
+/* harmony import */ var _ActionButton__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../ActionButton */ "./src/ActionButton.tsx");
 
 
 
 
-var TabbedMenuComponent = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(TabbedMenuComponent, _super);
-    function TabbedMenuComponent(props) {
-        var _this = _super.call(this, props) || this;
-        _this.rootRef = react__WEBPACK_IMPORTED_MODULE_1__.createRef();
-        return _this;
-    }
-    Object.defineProperty(TabbedMenuComponent.prototype, "model", {
-        get: function () {
-            return this.props.model;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    TabbedMenuComponent.prototype.getStateElement = function () {
-        return this.model;
-    };
-    TabbedMenuComponent.prototype.renderElement = function () {
-        var items = this.model.renderedActions.map(function (item) { return react__WEBPACK_IMPORTED_MODULE_1__.createElement(TabbedMenuItemWrapper, { item: item, key: item.id }); });
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { ref: this.rootRef, className: "svc-tabbed-menu" }, items));
-    };
-    TabbedMenuComponent.prototype.componentDidMount = function () {
-        _super.prototype.componentDidMount.call(this);
-        var container = this.rootRef.current;
-        if (!container)
-            return;
-        this.manager = new survey_core__WEBPACK_IMPORTED_MODULE_2__.ResponsivityManager(container, this.model, ".svc-tabbed-menu-item-container:not(.sv-dots)>.sv-action__content");
-    };
-    TabbedMenuComponent.prototype.componentWillUnmount = function () {
-        this.manager && (this.manager.dispose());
-        _super.prototype.componentWillUnmount.call(this);
-    };
-    return TabbedMenuComponent;
-}(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase));
 
-var TabbedMenuItemWrapper = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(TabbedMenuItemWrapper, _super);
-    function TabbedMenuItemWrapper() {
-        return _super !== null && _super.apply(this, arguments) || this;
+
+var QuestionDropdownAdornerComponent = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(QuestionDropdownAdornerComponent, _super);
+    function QuestionDropdownAdornerComponent(props) {
+        return _super.call(this, props) || this;
     }
-    Object.defineProperty(TabbedMenuItemWrapper.prototype, "item", {
+    QuestionDropdownAdornerComponent.prototype.createQuestionViewModel = function (props) {
+        return new survey_creator_core__WEBPACK_IMPORTED_MODULE_2__.QuestionDropdownAdornerViewModel(props.componentData, props.question, null);
+    };
+    Object.defineProperty(QuestionDropdownAdornerComponent.prototype, "dropdownModel", {
         get: function () {
-            return this.props.item;
+            return this.model;
         },
         enumerable: false,
         configurable: true
     });
-    TabbedMenuItemWrapper.prototype.getStateElement = function () {
-        return this.item;
-    };
-    TabbedMenuItemWrapper.prototype.renderElement = function () {
-        var css = "svc-tabbed-menu-item-container";
-        if (this.item.css) {
-            css += " " + this.item.css;
-        }
-        css += (!this.item.isVisible ? " sv-action--hidden" : "");
-        var component = survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.createElement(this.item.component || "svc-tabbed-menu-item", { item: this.item });
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { key: this.item.id, className: css },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "sv-action__content" }, component)));
-    };
-    return TabbedMenuItemWrapper;
-}(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase));
-var TabbedMenuItemComponent = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(TabbedMenuItemComponent, _super);
-    function TabbedMenuItemComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Object.defineProperty(TabbedMenuItemComponent.prototype, "item", {
+    Object.defineProperty(QuestionDropdownAdornerComponent.prototype, "question", {
         get: function () {
-            return this.props.item;
+            return this.dropdownModel.question;
         },
         enumerable: false,
         configurable: true
     });
-    TabbedMenuItemComponent.prototype.getStateElement = function () {
-        return this.item;
+    QuestionDropdownAdornerComponent.prototype.renderElementPlaceholder = function () {
+        var _this = this;
+        var textStyle = this.question.textStyle;
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-question__dropdown-choices--wrapper" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", null,
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-question__dropdown-choices" }, (this.dropdownModel.getRenderedItems() || []).map(function (item, index) { return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: _this.dropdownModel.getChoiceCss(), key: "editable_choice_".concat(index) }, survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactSurveyElementsWrapper.wrapItemValue(_this.question.survey, survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.createElement(_this.dropdownModel.itemComponent, {
+                    key: item.value,
+                    question: _this.question,
+                    cssClasses: _this.question.cssClasses,
+                    isDisplayMode: true,
+                    item: item,
+                    textStyle: textStyle,
+                    index: index,
+                    isChecked: _this.question.value === item.value
+                }), _this.question, item))); })),
+                this.dropdownModel.needToCollapse ?
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement(_ActionButton__WEBPACK_IMPORTED_MODULE_5__.ActionButton, { click: this.dropdownModel.switchCollapse, text: this.dropdownModel.getButtonText(), allowBubble: true }) :
+                    null)));
     };
-    TabbedMenuItemComponent.prototype.render = function () {
-        var item = this.item;
-        var className = "svc-tabbed-menu-item";
-        if (item.active)
-            className += " svc-tabbed-menu-item--selected";
-        if (item.enabled !== undefined && !item.enabled)
-            className += " svc-tabbed-menu-item--disabled";
-        var titleClassName = "svc-text svc-tabbed-menu-item__text svc-text--normal";
-        if (item.active)
-            titleClassName += " svc-text--bold";
-        return ((0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: className, onClick: function () { return item.action(item); } },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: titleClassName }, item.title))));
+    return QuestionDropdownAdornerComponent;
+}(_Question__WEBPACK_IMPORTED_MODULE_4__.QuestionAdornerComponent));
+
+survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-dropdown-question", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(QuestionDropdownAdornerComponent, props);
+});
+
+
+/***/ }),
+
+/***/ "./src/adorners/QuestionFooter.tsx":
+/*!*****************************************!*\
+  !*** ./src/adorners/QuestionFooter.tsx ***!
+  \*****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   QuestionWrapperFooter: () => (/* binding */ QuestionWrapperFooter)
+/* 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 _events__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../events */ "./src/events.ts");
+/* 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 QuestionWrapperFooter = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(QuestionWrapperFooter, _super);
+    function QuestionWrapperFooter() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    QuestionWrapperFooter.prototype.render = function () {
+        var _this = this;
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.props.className, onFocus: function (e) { return _this.props.model.select(_this.props.model, new _events__WEBPACK_IMPORTED_MODULE_2__.ReactMouseEvent(e)); } },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyActionBar, { model: this.props.model.actionContainer, handleClick: false })));
     };
-    return TabbedMenuItemComponent;
-}(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase));
+    return QuestionWrapperFooter;
+}(react__WEBPACK_IMPORTED_MODULE_1__.Component));
 
-survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-tabbed-menu-item", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(TabbedMenuItemComponent, props);
+survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-question-footer", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(QuestionWrapperFooter, props);
 });
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TabbedMenuComponent);
 
 
 /***/ }),
 
-/***/ "./src/adorners/CellQuestion.tsx":
-/*!***************************************!*\
-  !*** ./src/adorners/CellQuestion.tsx ***!
-  \***************************************/
+/***/ "./src/adorners/QuestionHeader.tsx":
+/*!*****************************************!*\
+  !*** ./src/adorners/QuestionHeader.tsx ***!
+  \*****************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   CellQuestionAdornerComponent: () => (/* binding */ CellQuestionAdornerComponent)
+/* harmony export */   QuestionWrapperHeader: () => (/* binding */ QuestionWrapperHeader)
 /* 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 _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__);
 
 
 
-
-
-var CellQuestionAdornerComponent = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(CellQuestionAdornerComponent, _super);
-    function CellQuestionAdornerComponent() {
+var QuestionWrapperHeader = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(QuestionWrapperHeader, _super);
+    function QuestionWrapperHeader() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    CellQuestionAdornerComponent.prototype.createModel = function (props) {
-        this.model = new survey_creator_core__WEBPACK_IMPORTED_MODULE_4__.QuestionAdornerViewModel(props.componentData, props.question, null);
-    };
-    CellQuestionAdornerComponent.prototype.getStateElement = function () {
-        return this.model;
-    };
-    CellQuestionAdornerComponent.prototype.getUpdatedModelProps = function () {
-        return ["question", "componentData"];
-    };
-    CellQuestionAdornerComponent.prototype.render = function () {
-        if (this.model.isDragged) {
+    QuestionWrapperHeader.prototype.render = function () {
+        var _this = this;
+        if (!this.props.model.allowDragging)
             return null;
-        }
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { "data-sv-drop-target-survey-element": this.model.element.name, className: "svc-question__adorner" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: " svc-question__content--in-popup svc-question__content" }, this.props.element))));
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-question__drag-area", onPointerDown: function (event) {
+                return _this.props.model.onPointerDown(event);
+            } },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { className: "svc-question__drag-element", size: 24, iconName: "icon-drag-area-indicator_24x16" }),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-question__top-actions" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyActionBar, { model: this.props.model.topActionContainer, handleClick: false }))));
     };
-    return CellQuestionAdornerComponent;
-}(_ModelElement__WEBPACK_IMPORTED_MODULE_3__.CreatorModelElement));
+    return QuestionWrapperHeader;
+}(react__WEBPACK_IMPORTED_MODULE_1__.Component));
 
-survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-cell-question", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(CellQuestionAdornerComponent, props);
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-question-header", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(QuestionWrapperHeader, props);
 });
 
 
 /***/ }),
 
-/***/ "./src/adorners/CellQuestionDropdown.tsx":
-/*!***********************************************!*\
-  !*** ./src/adorners/CellQuestionDropdown.tsx ***!
-  \***********************************************/
+/***/ "./src/adorners/QuestionImage.tsx":
+/*!****************************************!*\
+  !*** ./src/adorners/QuestionImage.tsx ***!
+  \****************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   CellQuestionDropdownAdornerComponent: () => (/* binding */ CellQuestionDropdownAdornerComponent)
+/* harmony export */   QuestionImageAdornerComponent: () => (/* binding */ QuestionImageAdornerComponent)
 /* harmony export */ });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
 /* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-creator-core */ "survey-creator-core");
@@ -2173,515 +2373,393 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__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 _ModelElement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../ModelElement */ "./src/ModelElement.tsx");
+/* harmony import */ var _Question__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Question */ "./src/adorners/Question.tsx");
 
 
 
 
 
-var CellQuestionDropdownAdornerComponent = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(CellQuestionDropdownAdornerComponent, _super);
-    function CellQuestionDropdownAdornerComponent() {
+var QuestionImageAdornerComponent = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(QuestionImageAdornerComponent, _super);
+    function QuestionImageAdornerComponent() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    CellQuestionDropdownAdornerComponent.prototype.createModel = function (props) {
-        this.model = new survey_creator_core__WEBPACK_IMPORTED_MODULE_1__.QuestionAdornerViewModel(props.componentData, props.question, null);
+    QuestionImageAdornerComponent.prototype.createQuestionViewModel = function (props) {
+        return new survey_creator_core__WEBPACK_IMPORTED_MODULE_1__.QuestionImageAdornerViewModel(props.componentData, props.question, null);
     };
-    CellQuestionDropdownAdornerComponent.prototype.getUpdatedModelProps = function () {
-        return ["question", "componentData"];
+    Object.defineProperty(QuestionImageAdornerComponent.prototype, "imageModel", {
+        get: function () {
+            return this.model;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    QuestionImageAdornerComponent.prototype.renderHeader = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null,
+            react__WEBPACK_IMPORTED_MODULE_2__.createElement("input", { type: "file", "aria-hidden": "true", tabIndex: -1, accept: this.imageModel.acceptedTypes, className: "svc-choose-file-input", style: {
+                    position: "absolute",
+                    opacity: 0,
+                    width: "1px",
+                    height: "1px",
+                    overflow: "hidden"
+                } }),
+            _super.prototype.renderHeader.call(this)));
     };
-    CellQuestionDropdownAdornerComponent.prototype.getStateElement = function () {
-        return this.model;
+    QuestionImageAdornerComponent.prototype.renderLoadingPlaceholder = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-image-question__loading-placeholder" },
+            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-image-question__loading" },
+                react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.LoadingIndicatorComponent, null))));
     };
-    CellQuestionDropdownAdornerComponent.prototype.render = function () {
-        if (this.model.isDragged) {
-            return null;
+    QuestionImageAdornerComponent.prototype.renderChooseButton = function () {
+        var _this = this;
+        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-image-question-controls" }, this.model.allowEdit ? (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { className: "svc-context-button", onClick: function () { return _this.imageModel.chooseFile(_this.imageModel); } },
+            react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: 24, iconName: "icon-file" }))) : null));
+    };
+    QuestionImageAdornerComponent.prototype.renderElementPlaceholder = function () {
+        return this.imageModel.isUploading ? this.renderLoadingPlaceholder() : this.renderChooseButton();
+    };
+    QuestionImageAdornerComponent.prototype.getStateElements = function () {
+        return [this.model, this.imageModel.filePresentationModel];
+    };
+    QuestionImageAdornerComponent.prototype.renderElementContent = function () {
+        if (this.imageModel.isEmptyImageLink) {
+            var fileQuestion = survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactQuestionFactory.Instance.createQuestion("file", {
+                creator: this.imageModel.question.survey,
+                isDisplayMode: false,
+                question: this.imageModel.filePresentationModel
+            });
+            return (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null, fileQuestion));
+        }
+        else {
+            return (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null,
+                this.props.element,
+                this.renderElementPlaceholder()));
         }
-        var question = this.props.question;
-        var textStyle = this.props.question.textStyle;
-        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null,
-            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { "data-sv-drop-target-survey-element": this.model.element.name, className: "svc-question__adorner" },
-                react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: " svc-question__content--in-popup svc-question__content" },
-                    this.props.element,
-                    react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-question__dropdown-choices" }, question.visibleChoices.map(function (item, index) { return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-question__dropdown-choice", key: "editable_choice_".concat(index) }, survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactSurveyElementsWrapper.wrapItemValue(question.survey, survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.createElement("survey-radiogroup-item", {
-                        question: question,
-                        cssClasses: question.cssClasses,
-                        isDisplayMode: true,
-                        item: item,
-                        textStyle: textStyle,
-                        index: index,
-                        isChecked: question.value === item.value
-                    }), question, item))); }))))));
     };
-    return CellQuestionDropdownAdornerComponent;
-}(_ModelElement__WEBPACK_IMPORTED_MODULE_4__.CreatorModelElement));
+    return QuestionImageAdornerComponent;
+}(_Question__WEBPACK_IMPORTED_MODULE_4__.QuestionAdornerComponent));
 
-survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-cell-dropdown-question", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_2__.createElement(CellQuestionDropdownAdornerComponent, props);
+survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-image-question", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_2__.createElement(QuestionImageAdornerComponent, props);
 });
 
 
 /***/ }),
 
-/***/ "./src/adorners/Page.tsx":
-/*!*******************************!*\
-  !*** ./src/adorners/Page.tsx ***!
-  \*******************************/
+/***/ "./src/adorners/QuestionRating.tsx":
+/*!*****************************************!*\
+  !*** ./src/adorners/QuestionRating.tsx ***!
+  \*****************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   CreatorSurveyPageComponent: () => (/* binding */ CreatorSurveyPageComponent)
+/* harmony export */   QuestionRatingAdornerComponent: () => (/* binding */ QuestionRatingAdornerComponent)
 /* 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 _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");
-
+/* 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__);
+/* harmony import */ var _ModelElement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../ModelElement */ "./src/ModelElement.tsx");
 
 
 
 
 
-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_1__.createRef();
-        return _this;
+var QuestionRatingAdornerComponent = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(QuestionRatingAdornerComponent, _super);
+    function QuestionRatingAdornerComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    CreatorSurveyPageComponent.prototype.createModel = function (props) {
-        if (this.model) {
-            this.model.dispose();
-        }
-        this.model = new survey_creator_core__WEBPACK_IMPORTED_MODULE_4__.PageAdorner(props.creator, props.page);
-    };
-    CreatorSurveyPageComponent.prototype.getUpdatedModelProps = function () {
-        return ["creator", "page"];
-    };
-    CreatorSurveyPageComponent.prototype.getStateElement = function () {
-        return this.model;
-    };
-    CreatorSurveyPageComponent.prototype.componentDidMount = function () {
-        var _this = this;
-        _super.prototype.componentDidMount.call(this);
-        this.model.onPageSelectedCallback = function () {
-            if (!!_this.rootRef.current) {
-                survey_creator_core__WEBPACK_IMPORTED_MODULE_4__.SurveyHelper.scrollIntoViewIfNeeded(_this.rootRef.current);
-            }
-        };
-    };
-    CreatorSurveyPageComponent.prototype.componentWillUnmount = function () {
-        _super.prototype.componentWillUnmount.call(this);
-        this.model.onPageSelectedCallback = undefined;
-    };
-    CreatorSurveyPageComponent.prototype.canRender = function () {
-        return (!!this.model &&
-            this.model.isPageLive &&
-            !!this.model.page &&
-            !!this.model.page.survey);
-    };
-    CreatorSurveyPageComponent.prototype.renderElement = function () {
-        var _this = this;
-        if (!this.props.page)
-            return null;
-        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(),
-            this.renderContent(),
-            this.renderPlaceholder(),
-            this.renderFooter())));
+    QuestionRatingAdornerComponent.prototype.createModel = function (props) {
+        this.modelValue = this.createQuestionViewModel(props);
     };
-    CreatorSurveyPageComponent.prototype.renderPlaceholder = function () {
-        if (!this.model.showPlaceholder)
-            return null;
-        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))));
+    QuestionRatingAdornerComponent.prototype.createQuestionViewModel = function (props) {
+        return new survey_creator_core__WEBPACK_IMPORTED_MODULE_2__.QuestionRatingAdornerViewModel(props.componentData, props.question, null);
     };
-    CreatorSurveyPageComponent.prototype.renderContent = function () {
-        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 }));
+    QuestionRatingAdornerComponent.prototype.getUpdatedModelProps = function () {
+        return ["question", "componentData"];
     };
-    CreatorSurveyPageComponent.prototype.renderHeader = function () {
-        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 })));
+    Object.defineProperty(QuestionRatingAdornerComponent.prototype, "ratingModel", {
+        get: function () {
+            return this.model;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(QuestionRatingAdornerComponent.prototype, "model", {
+        get: function () {
+            return this.modelValue;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    QuestionRatingAdornerComponent.prototype.getStateElement = function () {
+        return this.model;
     };
-    CreatorSurveyPageComponent.prototype.renderFooter = function () {
-        return react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyActionBar, { model: this.model.footerActionsBar });
+    QuestionRatingAdornerComponent.prototype.renderElement = function () {
+        var model = this.ratingModel;
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-rating-question-content" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: model.controlsClassNames },
+                    model.allowRemove ? (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: model.removeClassNames, "aria-label": model.removeTooltip, onClick: function () { return model.removeItem(model); } },
+                        react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: 16, iconName: "icon-remove_16x16", title: model.removeTooltip }))) : null,
+                    model.allowAdd ? (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: model.addClassNames, "aria-label": model.addTooltip, onClick: function () { return model.addItem(model); } },
+                        react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: 16, iconName: "icon-add_16x16", title: model.addTooltip }))) : null),
+                this.props.element)));
     };
-    return CreatorSurveyPageComponent;
-}(_ModelElement__WEBPACK_IMPORTED_MODULE_3__.CreatorModelElement));
+    return QuestionRatingAdornerComponent;
+}(_ModelElement__WEBPACK_IMPORTED_MODULE_4__.CreatorModelElement));
 
-survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-page", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(CreatorSurveyPageComponent, props);
+survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-rating-question", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(QuestionRatingAdornerComponent, props);
+});
+survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-rating-question-content", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(QuestionRatingAdornerComponent, props);
 });
 
 
 /***/ }),
 
-/***/ "./src/adorners/Panel.tsx":
-/*!********************************!*\
-  !*** ./src/adorners/Panel.tsx ***!
-  \********************************/
+/***/ "./src/adorners/QuestionWidget.tsx":
+/*!*****************************************!*\
+  !*** ./src/adorners/QuestionWidget.tsx ***!
+  \*****************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   PanelAdornerComponent: () => (/* binding */ PanelAdornerComponent)
+/* harmony export */   QuestionWidgetAdornerComponent: () => (/* binding */ QuestionWidgetAdornerComponent)
 /* 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_1__ = __webpack_require__(/*! survey-creator-core */ "survey-creator-core");
+/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_creator_core__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__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");
+/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
+/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_4__);
 
 
 
 
 
-var PanelAdornerComponent = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(PanelAdornerComponent, _super);
-    function PanelAdornerComponent() {
+var QuestionWidgetAdornerComponent = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(QuestionWidgetAdornerComponent, _super);
+    function QuestionWidgetAdornerComponent() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    PanelAdornerComponent.prototype.renderElementPlaceholder = function () {
-        var _this = this;
-        if (!this.model.isEmptyElement) {
-            return null;
-        }
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-panel__placeholder_frame-wrapper" },
-            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),
-                this.model.showAddQuestionButton ? (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))) : null)));
-    };
-    PanelAdornerComponent.prototype.disableTabStop = function () {
-        return true;
+    QuestionWidgetAdornerComponent.prototype.createQuestionViewModel = function (props) {
+        return new survey_creator_core__WEBPACK_IMPORTED_MODULE_1__.QuestionAdornerViewModel(props.componentData, props.question, null);
     };
-    PanelAdornerComponent.prototype.renderFooter = function () {
-        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" },
-                    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)));
+    Object.defineProperty(QuestionWidgetAdornerComponent.prototype, "widgetModel", {
+        get: function () {
+            return this.model;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    QuestionWidgetAdornerComponent.prototype.renderElementContent = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-widget__content" }, this.props.element));
     };
-    return PanelAdornerComponent;
+    return QuestionWidgetAdornerComponent;
 }(_Question__WEBPACK_IMPORTED_MODULE_3__.QuestionAdornerComponent));
 
-survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-panel", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(PanelAdornerComponent, props);
+survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.ReactElementFactory.Instance.registerElement("svc-widget-question", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_2__.createElement(QuestionWidgetAdornerComponent, props);
 });
 
 
 /***/ }),
 
-/***/ "./src/adorners/Question.tsx":
-/*!***********************************!*\
-  !*** ./src/adorners/Question.tsx ***!
-  \***********************************/
+/***/ "./src/adorners/Row.tsx":
+/*!******************************!*\
+  !*** ./src/adorners/Row.tsx ***!
+  \******************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   QuestionAdornerComponent: () => (/* binding */ QuestionAdornerComponent)
+/* harmony export */   RowWrapper: () => (/* binding */ RowWrapper)
 /* harmony export */ });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
 /* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-creator-core */ "survey-creator-core");
 /* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_creator_core__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _events__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../events */ "./src/events.ts");
-/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
-/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _ModelElement__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../ModelElement */ "./src/ModelElement.tsx");
-
+/* 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 _ModelElement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../ModelElement */ "./src/ModelElement.tsx");
 
 
 
 
 
-var QuestionAdornerComponent = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(QuestionAdornerComponent, _super);
-    function QuestionAdornerComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
+var RowWrapper = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(RowWrapper, _super);
+    function RowWrapper(props) {
+        return _super.call(this, props) || this;
     }
-    QuestionAdornerComponent.prototype.createModel = function (props) {
-        if (this.modelValue) {
-            this.modelValue.dispose();
-        }
-        this.modelValue = this.createQuestionViewModel(props);
-    };
-    QuestionAdornerComponent.prototype.createQuestionViewModel = function (props) {
-        return new survey_creator_core__WEBPACK_IMPORTED_MODULE_1__.QuestionAdornerViewModel(props.componentData, props.question, null);
+    RowWrapper.prototype.createModel = function (props) {
+        this.model = new survey_creator_core__WEBPACK_IMPORTED_MODULE_1__.RowViewModel(props.componentData.creator, props.row, null);
     };
-    QuestionAdornerComponent.prototype.getUpdatedModelProps = function () {
-        return ["question", "componentData"];
+    RowWrapper.prototype.getUpdatedModelProps = function () {
+        return ["row", "componentData"];
     };
-    Object.defineProperty(QuestionAdornerComponent.prototype, "model", {
-        get: function () {
-            return this.modelValue;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    QuestionAdornerComponent.prototype.getStateElement = function () {
+    RowWrapper.prototype.getStateElement = function () {
         return this.model;
     };
-    QuestionAdornerComponent.prototype.canRender = function () {
-        return _super.prototype.canRender.call(this) && !this.model.isDragged;
-    };
-    QuestionAdornerComponent.prototype.renderElement = function () {
-        var _this = this;
-        var allowInteractions = this.model.element
-            .isInteractiveDesignElement;
-        var content = this.renderContent(allowInteractions);
-        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { ref: this.rootRef, "data-sv-drop-target-survey-element": this.model.element.name || null, className: "svc-question__adorner " + this.model.rootCss(), onDoubleClick: function (e) { allowInteractions && _this.model.dblclick(e.nativeEvent); e.stopPropagation(); }, onMouseLeave: function (e) { return allowInteractions && _this.model.hover(e.nativeEvent, e.currentTarget); }, onMouseOver: function (e) { return allowInteractions && _this.model.hover(e.nativeEvent, e.currentTarget); } }, content));
-    };
-    QuestionAdornerComponent.prototype.disableTabStop = function () {
-        return true;
-    };
-    QuestionAdornerComponent.prototype.renderContent = function (allowInteractions) {
-        var _this = this;
-        var content = this.renderElementContent();
-        //if (!allowInteractions) return <>{content}{this.renderFooter()}</>;
-        return (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: this.model.css(), onClick: function (e) { return _this.model.select(_this.model, new _events__WEBPACK_IMPORTED_MODULE_3__.ReactMouseEvent(e)); } },
-            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-question__drop-indicator svc-question__drop-indicator--left" }),
-            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-question__drop-indicator svc-question__drop-indicator--right" }),
-            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-question__drop-indicator svc-question__drop-indicator--top" }),
-            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }),
-            allowInteractions ? this.renderHeader() : null,
-            content,
-            this.renderFooter()), undefined, { disableTabStop: this.disableTabStop() });
-    };
-    QuestionAdornerComponent.prototype.renderHeader = function () {
-        return survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.ReactElementFactory.Instance.createElement("svc-question-header", { model: this.model });
-    };
-    QuestionAdornerComponent.prototype.renderFooter = function () {
-        var allowInteractions = this.model.element
-            .isInteractiveDesignElement;
-        return allowInteractions ? survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.ReactElementFactory.Instance.createElement("svc-question-footer", { className: "svc-question__content-actions", model: this.model }) : null;
-    };
-    QuestionAdornerComponent.prototype.renderCarryForwardBanner = function () {
-        if (!this.model.isBannerShowing)
-            return null;
-        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)
-            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"))));
-    };
-    QuestionAdornerComponent.prototype.renderElementContent = function () {
-        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null,
-            this.renderQuestionTitle(),
-            this.props.element,
-            this.renderElementPlaceholder(),
-            this.renderCarryForwardBanner()));
-    };
-    QuestionAdornerComponent.prototype.renderElementPlaceholder = function () {
-        if (!this.model.isEmptyElement) {
-            return null;
-        }
-        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-panel__placeholder_frame-wrapper" },
-            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-panel__placeholder_frame" },
-                react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-panel__placeholder" }, this.model.placeholderText))));
+    RowWrapper.prototype.render = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { key: "svc-row-" + this.props.row.id, className: this.model.cssClasses },
+            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-row__drop-indicator svc-row__drop-indicator--top" }),
+            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-row__drop-indicator svc-row__drop-indicator--bottom" }),
+            this.props.element));
     };
-    return QuestionAdornerComponent;
-}(_ModelElement__WEBPACK_IMPORTED_MODULE_5__.CreatorModelElement));
+    return RowWrapper;
+}(_ModelElement__WEBPACK_IMPORTED_MODULE_4__.CreatorModelElement));
 
-survey_react_ui__WEBPACK_IMPORTED_MODULE_4__.ReactElementFactory.Instance.registerElement("svc-question", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_2__.createElement(QuestionAdornerComponent, props);
+survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-row", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_2__.createElement(RowWrapper, props);
 });
 
 
 /***/ }),
 
-/***/ "./src/adorners/QuestionBanner.tsx":
-/*!*****************************************!*\
-  !*** ./src/adorners/QuestionBanner.tsx ***!
-  \*****************************************/
+/***/ "./src/components/SurfacePlaceholder.tsx":
+/*!***********************************************!*\
+  !*** ./src/components/SurfacePlaceholder.tsx ***!
+  \***********************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   QuestionBanner: () => (/* binding */ QuestionBanner)
+/* harmony export */   SurfacePlaceholder: () => (/* binding */ SurfacePlaceholder)
 /* harmony export */ });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _ActionButton__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../ActionButton */ "./src/ActionButton.tsx");
 
 
 
-
-var QuestionBanner = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(QuestionBanner, _super);
-    function QuestionBanner() {
-        return _super !== null && _super.apply(this, arguments) || this;
+var SurfacePlaceholder = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SurfacePlaceholder, _super);
+    function SurfacePlaceholder(props) {
+        return _super.call(this, props) || this;
     }
-    QuestionBanner.prototype.render = function () {
-        var _this = this;
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-carry-forward-panel-wrapper" },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-carry-forward-panel" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", null,
-                    this.props.text,
-                    " "),
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-carry-forward-panel__link" },
-                    react__WEBPACK_IMPORTED_MODULE_1__.createElement(_ActionButton__WEBPACK_IMPORTED_MODULE_3__.ActionButton, { click: function () { return _this.props.onClick(); }, text: this.props.actionText })))));
-    };
-    return QuestionBanner;
+    SurfacePlaceholder.prototype.render = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-surface-placeholder" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-surface-placeholder__image svc-surface-placeholder__image--" + this.props.name }),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-surface-placeholder__text" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-surface-placeholder__title" }, this.props.placeholderTitleText),
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-surface-placeholder__description" }, this.props.placeholderDescriptionText))));
+    };
+    return SurfacePlaceholder;
 }(react__WEBPACK_IMPORTED_MODULE_1__.Component));
 
-survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-question-banner", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(QuestionBanner, props);
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-surface-placeholder", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SurfacePlaceholder, props);
 });
 
 
 /***/ }),
 
-/***/ "./src/adorners/QuestionDropdown.tsx":
-/*!*******************************************!*\
-  !*** ./src/adorners/QuestionDropdown.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 */   QuestionDropdownAdornerComponent: () => (/* binding */ QuestionDropdownAdornerComponent)
+/* 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_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_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 _Question__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Question */ "./src/adorners/Question.tsx");
-/* harmony import */ var _ActionButton__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../ActionButton */ "./src/ActionButton.tsx");
-
-
 
 
 
 
-var QuestionDropdownAdornerComponent = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(QuestionDropdownAdornerComponent, _super);
-    function QuestionDropdownAdornerComponent(props) {
-        return _super.call(this, props) || this;
+var SurveyQuestionBooleanSwitch = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SurveyQuestionBooleanSwitch, _super);
+    function SurveyQuestionBooleanSwitch() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    QuestionDropdownAdornerComponent.prototype.createQuestionViewModel = function (props) {
-        return new survey_creator_core__WEBPACK_IMPORTED_MODULE_2__.QuestionDropdownAdornerViewModel(props.componentData, props.question, null);
-    };
-    Object.defineProperty(QuestionDropdownAdornerComponent.prototype, "dropdownModel", {
-        get: function () {
-            return this.model;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(QuestionDropdownAdornerComponent.prototype, "question", {
-        get: function () {
-            return this.dropdownModel.question;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    QuestionDropdownAdornerComponent.prototype.renderElementPlaceholder = function () {
+    SurveyQuestionBooleanSwitch.prototype.renderElement = function () {
         var _this = this;
-        var textStyle = this.question.textStyle;
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-question__dropdown-choices--wrapper" },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", null,
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-question__dropdown-choices" }, (this.dropdownModel.getRenderedItems() || []).map(function (item, index) { return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: _this.dropdownModel.getChoiceCss(), key: "editable_choice_".concat(index) }, survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactSurveyElementsWrapper.wrapItemValue(_this.question.survey, survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.createElement(_this.dropdownModel.itemComponent, {
-                    key: item.value,
-                    question: _this.question,
-                    cssClasses: _this.question.cssClasses,
-                    isDisplayMode: true,
-                    item: item,
-                    textStyle: textStyle,
-                    index: index,
-                    isChecked: _this.question.value === item.value
-                }), _this.question, item))); })),
-                this.dropdownModel.needToCollapse ?
-                    react__WEBPACK_IMPORTED_MODULE_1__.createElement(_ActionButton__WEBPACK_IMPORTED_MODULE_5__.ActionButton, { click: this.dropdownModel.switchCollapse, text: this.dropdownModel.getButtonText(), allowBubble: true }) :
-                    null)));
-    };
-    return QuestionDropdownAdornerComponent;
-}(_Question__WEBPACK_IMPORTED_MODULE_4__.QuestionAdornerComponent));
-
-survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-dropdown-question", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(QuestionDropdownAdornerComponent, props);
+        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/adorners/QuestionFooter.tsx":
-/*!*****************************************!*\
-  !*** ./src/adorners/QuestionFooter.tsx ***!
-  \*****************************************/
+/***/ "./src/custom-questions/ColorItem.tsx":
+/*!********************************************!*\
+  !*** ./src/custom-questions/ColorItem.tsx ***!
+  \********************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   QuestionWrapperFooter: () => (/* binding */ QuestionWrapperFooter)
-/* 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 _events__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../events */ "./src/events.ts");
-/* 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__);
 
 
 
-var QuestionWrapperFooter = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(QuestionWrapperFooter, _super);
-    function QuestionWrapperFooter() {
+var ItemTemplateComponent = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(ItemTemplateComponent, _super);
+    function ItemTemplateComponent() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    QuestionWrapperFooter.prototype.render = function () {
-        var _this = this;
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.props.className, onFocus: function (e) { return _this.props.model.select(_this.props.model, new _events__WEBPACK_IMPORTED_MODULE_2__.ReactMouseEvent(e)); } },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyActionBar, { model: this.props.model.actionContainer, handleClick: false })));
+    ItemTemplateComponent.prototype.render = function () {
+        var item = this.props.item;
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "spg-color-editor__color-swatch", style: { backgroundColor: item.value } }),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { key: 2 }, this.renderLocString(item.locTitle, undefined, "locString"))));
     };
-    return QuestionWrapperFooter;
-}(react__WEBPACK_IMPORTED_MODULE_1__.Component));
-
-survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-question-footer", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(QuestionWrapperFooter, props);
+    return ItemTemplateComponent;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("color-item", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(ItemTemplateComponent, props);
 });
 
 
 /***/ }),
 
-/***/ "./src/adorners/QuestionHeader.tsx":
-/*!*****************************************!*\
-  !*** ./src/adorners/QuestionHeader.tsx ***!
-  \*****************************************/
+/***/ "./src/custom-questions/ColorQuestion.tsx":
+/*!************************************************!*\
+  !*** ./src/custom-questions/ColorQuestion.tsx ***!
+  \************************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   QuestionWrapperHeader: () => (/* binding */ QuestionWrapperHeader)
+/* harmony export */   SurveyQuestionColor: () => (/* binding */ SurveyQuestionColor)
 /* 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");
@@ -2691,358 +2769,425 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-var QuestionWrapperHeader = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(QuestionWrapperHeader, _super);
-    function QuestionWrapperHeader() {
-        return _super !== null && _super.apply(this, arguments) || this;
+var SurveyQuestionColor = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SurveyQuestionColor, _super);
+    function SurveyQuestionColor(props) {
+        return _super.call(this, props) || this;
     }
-    QuestionWrapperHeader.prototype.render = function () {
+    Object.defineProperty(SurveyQuestionColor.prototype, "question", {
+        get: function () {
+            return this.questionBase;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyQuestionColor.prototype.renderInput = function () {
         var _this = this;
-        if (!this.props.model.allowDragging)
-            return null;
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-question__drag-area", onPointerDown: function (event) {
-                return _this.props.model.onPointerDown(event);
-            } },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { className: "svc-question__drag-element", size: 24, iconName: "icon-drag-area-indicator_24x16" }),
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-question__top-actions" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyActionBar, { model: this.props.model.topActionContainer, handleClick: false }))));
+        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", onKeyUp: function (event) { return _this.question.onKeyUp(event.nativeEvent); }, onBlur: function (event) { return _this.question.onBlur(event.nativeEvent); }, onChange: this.question.onChange, onBeforeInput: function (event) { return _this.question.onBeforeInput(event.nativeEvent); }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy })));
     };
-    return QuestionWrapperHeader;
-}(react__WEBPACK_IMPORTED_MODULE_1__.Component));
+    SurveyQuestionColor.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.renderColorSwatch(),
+            this.renderInput(),
+            this.question.showDropdownAction ? this.renderDropdownAction() : null));
+    };
+    SurveyQuestionColor.prototype.getValueCore = function () {
+        return this.question.renderedValue;
+    };
+    SurveyQuestionColor.prototype.renderColorSwatch = function () {
+        var _this = this;
+        return react__WEBPACK_IMPORTED_MODULE_1__.createElement("label", { className: this.question.getSwatchCss(), style: this.question.getSwatchStyle() },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: this.question.cssClasses.swatchIcon, size: "auto" }),
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("input", { type: "color", disabled: this.isDisplayMode, value: this.question.renderedColorValue, className: this.question.cssClasses.colorInput, onChange: function (event) { return _this.question.onColorInputChange(event.nativeEvent); }, tabIndex: -1 }));
+    };
+    SurveyQuestionColor.prototype.renderDropdownAction = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
+            survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.createElement("sv-action-bar-item", { item: this.question.dropdownAction }),
+            this.renderPopup()));
+    };
+    SurveyQuestionColor.prototype.renderPopup = function () {
+        return react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.Popup, { model: this.question.dropdownAction.popupModel });
+    };
+    return SurveyQuestionColor;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyQuestionText));
 
-survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-question-header", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(QuestionWrapperHeader, props);
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactQuestionFactory.Instance.registerQuestion("color", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SurveyQuestionColor, props);
 });
 
 
 /***/ }),
 
-/***/ "./src/adorners/QuestionImage.tsx":
-/*!****************************************!*\
-  !*** ./src/adorners/QuestionImage.tsx ***!
-  \****************************************/
+/***/ "./src/custom-questions/FileEditQuestion.tsx":
+/*!***************************************************!*\
+  !*** ./src/custom-questions/FileEditQuestion.tsx ***!
+  \***************************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   QuestionImageAdornerComponent: () => (/* binding */ QuestionImageAdornerComponent)
+/* harmony export */   SurveyQuestionFileEditor: () => (/* binding */ SurveyQuestionFileEditor)
 /* harmony export */ });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
-/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-creator-core */ "survey-creator-core");
-/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_creator_core__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__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 _Question__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Question */ "./src/adorners/Question.tsx");
-
-
+/* 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 QuestionImageAdornerComponent = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(QuestionImageAdornerComponent, _super);
-    function QuestionImageAdornerComponent(props) {
-        var _this = _super.call(this, props) || this;
-        _this.rootRef = react__WEBPACK_IMPORTED_MODULE_2__.createRef();
-        return _this;
+var SurveyQuestionFileEditor = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SurveyQuestionFileEditor, _super);
+    function SurveyQuestionFileEditor(props) {
+        return _super.call(this, props) || this;
     }
-    QuestionImageAdornerComponent.prototype.createQuestionViewModel = function (props) {
-        return new survey_creator_core__WEBPACK_IMPORTED_MODULE_1__.QuestionImageAdornerViewModel(props.componentData, props.question, null, null);
-    };
-    Object.defineProperty(QuestionImageAdornerComponent.prototype, "imageModel", {
+    Object.defineProperty(SurveyQuestionFileEditor.prototype, "questionFile", {
         get: function () {
-            return this.model;
+            return this.questionBase;
         },
         enumerable: false,
         configurable: true
     });
-    QuestionImageAdornerComponent.prototype.componentDidMount = function () {
-        _super.prototype.componentDidMount.call(this);
-        this.imageModel.questionRoot = this.rootRef.current;
-    };
-    QuestionImageAdornerComponent.prototype.renderHeader = function () {
-        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null,
-            react__WEBPACK_IMPORTED_MODULE_2__.createElement("input", { type: "file", "aria-hidden": "true", tabIndex: -1, accept: this.imageModel.acceptedTypes, className: "svc-choose-file-input", style: {
-                    position: "absolute",
-                    opacity: 0,
-                    width: "1px",
-                    height: "1px",
-                    overflow: "hidden"
-                } }),
-            _super.prototype.renderHeader.call(this)));
+    SurveyQuestionFileEditor.prototype.getValueCore = function () {
+        return this.question.renderedValue;
     };
-    QuestionImageAdornerComponent.prototype.renderLoadingPlaceholder = function () {
-        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-image-question__loading-placeholder" },
-            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-image-question__loading" },
-                react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.LoadingIndicatorComponent, null))));
+    SurveyQuestionFileEditor.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", { disabled: this.isDisplayMode, className: this.questionFile.cssClasses.control, placeholder: this.questionFile.renderedPlaceholder, ref: function (input) { return (_this.setControl(input)); }, autoComplete: "off", type: "text", onBlur: function (event) { return _this.questionFile.onInputBlur(event.nativeEvent); }, onChange: function (event) { return _this.questionFile.onInputChange(event.nativeEvent); } })));
     };
-    QuestionImageAdornerComponent.prototype.renderChooseButton = function () {
+    SurveyQuestionFileEditor.prototype.renderFileInput = function () {
         var _this = this;
-        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-image-question-controls" }, this.model.allowEdit ? (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { className: "svc-context-button", onClick: function () { return _this.imageModel.chooseFile(_this.imageModel); } },
-            react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: 24, iconName: "icon-file" }))) : null));
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("input", { type: "file", disabled: this.isDisplayMode, className: this.questionFile.cssClasses.fileInput, id: this.questionFile.inputId, "aria-required": this.questionFile.ariaRequired, "aria-label": this.questionFile.ariaLabel, "aria-invalid": this.questionFile.ariaInvalid, "aria-describedby": this.questionFile.ariaDescribedBy, multiple: false, title: this.questionFile.inputTitle, accept: this.questionFile.acceptedTypes, tabIndex: -1, onChange: function (event) { return _this.questionFile.onFileInputChange(event.nativeEvent); } }));
     };
-    QuestionImageAdornerComponent.prototype.renderElementPlaceholder = function () {
-        return this.imageModel.isUploading ? this.renderLoadingPlaceholder() : this.renderChooseButton();
+    SurveyQuestionFileEditor.prototype.renderButtons = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.questionFile.cssClasses.buttonsContainer },
+            this.renderClearButton(),
+            this.renderChooseButton()));
     };
-    QuestionImageAdornerComponent.prototype.getStateElements = function () {
-        return [this.model, this.imageModel.filePresentationModel];
+    SurveyQuestionFileEditor.prototype.renderClearButton = function () {
+        return (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)((react__WEBPACK_IMPORTED_MODULE_1__.createElement("button", { type: "button", className: this.questionFile.cssClasses.clearButton, disabled: this.questionFile.getIsClearButtonDisabled(), onClick: this.questionFile.doClean },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: this.questionFile.cssClasses.clearButtonIcon, size: "auto", title: this.questionFile.clearButtonCaption }))));
     };
-    QuestionImageAdornerComponent.prototype.renderElementContent = function () {
-        if (this.imageModel.isEmptyImageLink) {
-            var fileQuestion = survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactQuestionFactory.Instance.createQuestion("file", {
-                creator: this.imageModel.question.survey,
-                isDisplayMode: false,
-                question: this.imageModel.filePresentationModel
-            });
-            return (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null,
-                this.renderQuestionTitle(),
-                fileQuestion));
-        }
-        else {
-            return (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null,
-                this.renderQuestionTitle(),
-                this.props.element,
-                this.renderElementPlaceholder()));
-        }
+    SurveyQuestionFileEditor.prototype.renderChooseButton = function () {
+        var _this = this;
+        return ((0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("label", { role: "button", onClick: function (event) { return _this.questionFile.chooseFiles(event.nativeEvent); }, className: this.questionFile.getChooseButtonCss(), htmlFor: this.questionFile.inputId, "aria-label": this.questionFile.chooseButtonCaption },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: this.questionFile.cssClasses.chooseButtonIcon, size: "auto", title: this.questionFile.chooseButtonCaption }))));
     };
-    return QuestionImageAdornerComponent;
-}(_Question__WEBPACK_IMPORTED_MODULE_4__.QuestionAdornerComponent));
+    SurveyQuestionFileEditor.prototype.renderElement = function () {
+        var _this = this;
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.questionFile.cssClasses.root, ref: function (el) { return _this.setContent(el); }, onDragEnter: this.questionFile.onDragEnter, onDragOver: this.questionFile.onDragOver, onDrop: this.questionFile.onDrop, onDragLeave: this.questionFile.onDragLeave, onKeyDown: function (event) { return _this.question.onKeyDown(event.nativeEvent); } },
+            this.renderInput(),
+            this.renderFileInput(),
+            this.renderButtons()));
+    };
+    return SurveyQuestionFileEditor;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyQuestionText));
 
-survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-image-question", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_2__.createElement(QuestionImageAdornerComponent, props);
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactQuestionFactory.Instance.registerQuestion("fileedit", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SurveyQuestionFileEditor, props);
 });
 
 
 /***/ }),
 
-/***/ "./src/adorners/QuestionRating.tsx":
-/*!*****************************************!*\
-  !*** ./src/adorners/QuestionRating.tsx ***!
-  \*****************************************/
+/***/ "./src/custom-questions/SpinEditor.tsx":
+/*!*********************************************!*\
+  !*** ./src/custom-questions/SpinEditor.tsx ***!
+  \*********************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   QuestionRatingAdornerComponent: () => (/* binding */ QuestionRatingAdornerComponent)
+/* harmony export */   SurveyQuestionSpinEditor: () => (/* binding */ SurveyQuestionSpinEditor)
 /* 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__);
-/* harmony import */ var _ModelElement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../ModelElement */ "./src/ModelElement.tsx");
-
-
+/* 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 QuestionRatingAdornerComponent = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(QuestionRatingAdornerComponent, _super);
-    function QuestionRatingAdornerComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
+var SurveyQuestionSpinEditor = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SurveyQuestionSpinEditor, _super);
+    function SurveyQuestionSpinEditor(props) {
+        return _super.call(this, props) || this;
     }
-    QuestionRatingAdornerComponent.prototype.createModel = function (props) {
-        this.modelValue = this.createQuestionViewModel(props);
-    };
-    QuestionRatingAdornerComponent.prototype.createQuestionViewModel = function (props) {
-        return new survey_creator_core__WEBPACK_IMPORTED_MODULE_2__.QuestionRatingAdornerViewModel(props.componentData, props.question, null);
-    };
-    QuestionRatingAdornerComponent.prototype.getUpdatedModelProps = function () {
-        return ["question", "componentData"];
-    };
-    Object.defineProperty(QuestionRatingAdornerComponent.prototype, "ratingModel", {
-        get: function () {
-            return this.model;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(QuestionRatingAdornerComponent.prototype, "model", {
+    Object.defineProperty(SurveyQuestionSpinEditor.prototype, "question", {
         get: function () {
-            return this.modelValue;
+            return this.questionBase;
         },
         enumerable: false,
         configurable: true
     });
-    QuestionRatingAdornerComponent.prototype.getStateElement = function () {
-        return this.model;
-    };
-    QuestionRatingAdornerComponent.prototype.renderElement = function () {
-        var model = this.ratingModel;
+    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("div", { className: "svc-rating-question-content" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: model.controlsClassNames },
-                    model.allowRemove ? (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: model.removeClassNames, "aria-label": model.removeTooltip, onClick: function () { return model.removeItem(model); } },
-                        react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: 16, iconName: "icon-remove_16x16", title: model.removeTooltip }))) : null,
-                    model.allowAdd ? (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: model.addClassNames, "aria-label": model.addTooltip, onClick: function () { return model.addItem(model); } },
-                        react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: 16, iconName: "icon-add_16x16", title: model.addTooltip }))) : null),
-                this.props.element)));
+            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 })));
     };
-    return QuestionRatingAdornerComponent;
-}(_ModelElement__WEBPACK_IMPORTED_MODULE_4__.CreatorModelElement));
+    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_3__.ReactElementFactory.Instance.registerElement("svc-rating-question", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(QuestionRatingAdornerComponent, props);
-});
-survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-rating-question-content", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(QuestionRatingAdornerComponent, props);
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactQuestionFactory.Instance.registerQuestion("spinedit", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SurveyQuestionSpinEditor, props);
 });
 
 
 /***/ }),
 
-/***/ "./src/adorners/QuestionWidget.tsx":
-/*!*****************************************!*\
-  !*** ./src/adorners/QuestionWidget.tsx ***!
-  \*****************************************/
+/***/ "./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 */   QuestionWidgetAdornerComponent: () => (/* binding */ QuestionWidgetAdornerComponent)
+/* 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 survey_creator_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-creator-core */ "survey-creator-core");
-/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_creator_core__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _Question__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Question */ "./src/adorners/Question.tsx");
-/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
-/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__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__);
 
 
 
-var QuestionWidgetAdornerComponent = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(QuestionWidgetAdornerComponent, _super);
-    function QuestionWidgetAdornerComponent() {
+var SurveyQuestionTextWithReset = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SurveyQuestionTextWithReset, _super);
+    function SurveyQuestionTextWithReset() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    QuestionWidgetAdornerComponent.prototype.createQuestionViewModel = function (props) {
-        return new survey_creator_core__WEBPACK_IMPORTED_MODULE_1__.QuestionAdornerViewModel(props.componentData, props.question, null);
-    };
-    Object.defineProperty(QuestionWidgetAdornerComponent.prototype, "widgetModel", {
+    Object.defineProperty(SurveyQuestionTextWithReset.prototype, "question", {
         get: function () {
-            return this.model;
+            return this.questionBase;
         },
         enumerable: false,
         configurable: true
     });
-    QuestionWidgetAdornerComponent.prototype.renderElementContent = function () {
-        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-widget__content" }, this.props.element));
+    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));
     };
-    return QuestionWidgetAdornerComponent;
-}(_Question__WEBPACK_IMPORTED_MODULE_3__.QuestionAdornerComponent));
+    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_4__.ReactElementFactory.Instance.registerElement("svc-widget-question", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_2__.createElement(QuestionWidgetAdornerComponent, props);
+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/adorners/Row.tsx":
-/*!******************************!*\
-  !*** ./src/adorners/Row.tsx ***!
-  \******************************/
+/***/ "./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 */   RowWrapper: () => (/* binding */ RowWrapper)
+/* harmony export */   __assign: () => (/* binding */ __assign),
+/* harmony export */   __decorate: () => (/* binding */ __decorate),
+/* harmony export */   __extends: () => (/* binding */ __extends),
+/* harmony export */   __spreadArrays: () => (/* binding */ __spreadArrays)
 /* harmony export */ });
-/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
-/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-creator-core */ "survey-creator-core");
-/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_creator_core__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__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 _ModelElement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../ModelElement */ "./src/ModelElement.tsx");
-
-
-
-
-
-var RowWrapper = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(RowWrapper, _super);
-    function RowWrapper(props) {
-        return _super.call(this, props) || this;
-    }
-    RowWrapper.prototype.createModel = function (props) {
-        this.model = new survey_creator_core__WEBPACK_IMPORTED_MODULE_1__.RowViewModel(props.componentData.creator, props.row, null);
-    };
-    RowWrapper.prototype.getUpdatedModelProps = function () {
-        return ["row", "componentData"];
-    };
-    RowWrapper.prototype.getStateElement = function () {
-        return this.model;
-    };
-    RowWrapper.prototype.render = function () {
-        return (react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { key: "svc-row-" + this.props.row.id, className: this.model.cssClasses },
-            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-row__drop-indicator svc-row__drop-indicator--top" }),
-            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-row__drop-indicator svc-row__drop-indicator--bottom" }),
-            this.props.element));
+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;
     };
-    return RowWrapper;
-}(_ModelElement__WEBPACK_IMPORTED_MODULE_4__.CreatorModelElement));
-
-survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-row", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_2__.createElement(RowWrapper, props);
-});
+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/custom-questions/ColorItem.tsx":
-/*!********************************************!*\
-  !*** ./src/custom-questions/ColorItem.tsx ***!
-  \********************************************/
+/***/ "./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");
-/* 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 ItemTemplateComponent = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(ItemTemplateComponent, _super);
-    function ItemTemplateComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
+var ReactMouseEvent = /** @class */ (function () {
+    function ReactMouseEvent(event) {
+        this.event = event;
     }
-    ItemTemplateComponent.prototype.render = function () {
-        var item = this.props.item;
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "spg-color-editor__color-swatch", style: { backgroundColor: item.value } }),
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { key: 2 }, this.renderLocString(item.locTitle, undefined, "locString"))));
+    ReactMouseEvent.prototype.stopPropagation = function () {
+        this.event.stopPropagation();
+        //this.event.nativeEvent.stopPropagation();
+        //this.event.nativeEvent.stopImmediatePropagation();
     };
-    return ItemTemplateComponent;
-}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
-survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("color-item", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(ItemTemplateComponent, props);
-});
+    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/custom-questions/ColorQuestion.tsx":
-/*!************************************************!*\
-  !*** ./src/custom-questions/ColorQuestion.tsx ***!
-  \************************************************/
+/***/ "./src/side-bar/ObjectSelector.tsx":
+/*!*****************************************!*\
+  !*** ./src/side-bar/ObjectSelector.tsx ***!
+  \*****************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   SurveyQuestionColor: () => (/* binding */ SurveyQuestionColor)
-/* 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__);
@@ -3051,422 +3196,466 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-var SurveyQuestionColor = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SurveyQuestionColor, _super);
-    function SurveyQuestionColor(props) {
-        return _super.call(this, props) || this;
+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(SurveyQuestionColor.prototype, "question", {
+    Object.defineProperty(ObjectSelectorComponent.prototype, "model", {
         get: function () {
-            return this.questionBase;
+            return this.props.model;
         },
         enumerable: false,
         configurable: true
     });
-    SurveyQuestionColor.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", onKeyUp: function (event) { return _this.question.onKeyUp(event.nativeEvent); }, onBlur: function (event) { return _this.question.onBlur(event.nativeEvent); }, onChange: this.question.onChange, onBeforeInput: function (event) { return _this.question.onBeforeInput(event.nativeEvent); }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy })));
-    };
-    SurveyQuestionColor.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.renderColorSwatch(),
-            this.renderInput(),
-            this.question.showDropdownAction ? this.renderDropdownAction() : null));
-    };
-    SurveyQuestionColor.prototype.getValueCore = function () {
-        return this.question.renderedValue;
-    };
-    SurveyQuestionColor.prototype.renderColorSwatch = function () {
-        var _this = this;
-        return react__WEBPACK_IMPORTED_MODULE_1__.createElement("label", { className: this.question.getSwatchCss(), style: this.question.getSwatchStyle() },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: this.question.cssClasses.swatchIcon, size: "auto" }),
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("input", { type: "color", disabled: this.isDisplayMode, value: this.question.renderedColorValue, className: this.question.cssClasses.colorInput, onChange: function (event) { return _this.question.onColorInputChange(event.nativeEvent); }, tabIndex: -1 }));
-    };
-    SurveyQuestionColor.prototype.renderDropdownAction = function () {
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
-            survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.createElement("sv-action-bar-item", { item: this.question.dropdownAction }),
-            this.renderPopup()));
+    ObjectSelectorComponent.prototype.getStateElement = function () {
+        return this.model;
     };
-    SurveyQuestionColor.prototype.renderPopup = function () {
-        return react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.Popup, { model: this.question.dropdownAction.popupModel });
+    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 SurveyQuestionColor;
-}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyQuestionText));
-
-survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactQuestionFactory.Instance.registerQuestion("color", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SurveyQuestionColor, props);
+    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/custom-questions/FileEditQuestion.tsx":
-/*!***************************************************!*\
-  !*** ./src/custom-questions/FileEditQuestion.tsx ***!
-  \***************************************************/
+/***/ "./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 */   SurveyQuestionFileEditor: () => (/* binding */ SurveyQuestionFileEditor)
+/* 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 SurveyQuestionFileEditor = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SurveyQuestionFileEditor, _super);
-    function SurveyQuestionFileEditor(props) {
-        return _super.call(this, props) || this;
+
+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(SurveyQuestionFileEditor.prototype, "questionFile", {
+    Object.defineProperty(PropertyGridComponent.prototype, "model", {
         get: function () {
-            return this.questionBase;
+            return this.props.model;
         },
         enumerable: false,
         configurable: true
     });
-    SurveyQuestionFileEditor.prototype.getValueCore = function () {
-        return this.question.renderedValue;
-    };
-    SurveyQuestionFileEditor.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", { disabled: this.isDisplayMode, className: this.questionFile.cssClasses.control, placeholder: this.questionFile.renderedPlaceholder, ref: function (input) { return (_this.setControl(input)); }, autoComplete: "off", type: "text", onBlur: function (event) { return _this.questionFile.onInputBlur(event.nativeEvent); }, onChange: function (event) { return _this.questionFile.onInputChange(event.nativeEvent); } })));
-    };
-    SurveyQuestionFileEditor.prototype.renderFileInput = function () {
-        var _this = this;
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("input", { type: "file", disabled: this.isDisplayMode, className: this.questionFile.cssClasses.fileInput, id: this.questionFile.inputId, "aria-required": this.questionFile.ariaRequired, "aria-label": this.questionFile.ariaLabel, "aria-invalid": this.questionFile.ariaInvalid, "aria-describedby": this.questionFile.ariaDescribedBy, multiple: false, title: this.questionFile.inputTitle, accept: this.questionFile.acceptedTypes, tabIndex: -1, onChange: function (event) { return _this.questionFile.onFileInputChange(event.nativeEvent); } }));
-    };
-    SurveyQuestionFileEditor.prototype.renderButtons = function () {
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.questionFile.cssClasses.buttonsContainer },
-            this.renderClearButton(),
-            this.renderChooseButton()));
-    };
-    SurveyQuestionFileEditor.prototype.renderClearButton = function () {
-        return (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)((react__WEBPACK_IMPORTED_MODULE_1__.createElement("button", { type: "button", className: this.questionFile.cssClasses.clearButton, disabled: this.questionFile.getIsClearButtonDisabled(), onClick: this.questionFile.doClean },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: this.questionFile.cssClasses.clearButtonIcon, size: "auto", title: this.questionFile.clearButtonCaption }))));
+    PropertyGridComponent.prototype.getStateElement = function () {
+        return this.model;
     };
-    SurveyQuestionFileEditor.prototype.renderChooseButton = function () {
-        var _this = this;
-        return ((0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("label", { role: "button", onClick: function (event) { return _this.questionFile.chooseFiles(event.nativeEvent); }, className: this.questionFile.getChooseButtonCss(), htmlFor: this.questionFile.inputId, "aria-label": this.questionFile.chooseButtonCaption },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: this.questionFile.cssClasses.chooseButtonIcon, size: "auto", title: this.questionFile.chooseButtonCaption }))));
+    PropertyGridComponent.prototype.canRender = function () {
+        if (!this.model)
+            return false;
+        return _super.prototype.canRender.call(this);
     };
-    SurveyQuestionFileEditor.prototype.renderElement = function () {
-        var _this = this;
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.questionFile.cssClasses.root, ref: function (el) { return _this.setContent(el); }, onDragEnter: this.questionFile.onDragEnter, onDragOver: this.questionFile.onDragOver, onDrop: this.questionFile.onDrop, onDragLeave: this.questionFile.onDragLeave, onKeyDown: function (event) { return _this.question.onKeyDown(event.nativeEvent); } },
-            this.renderInput(),
-            this.renderFileInput(),
-            this.renderButtons()));
+    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 SurveyQuestionFileEditor;
-}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyQuestionText));
+    return PropertyGridComponent;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
 
-survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactQuestionFactory.Instance.registerQuestion("fileedit", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SurveyQuestionFileEditor, props);
+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/custom-questions/SpinEditor.tsx":
-/*!*********************************************!*\
-  !*** ./src/custom-questions/SpinEditor.tsx ***!
-  \*********************************************/
+/***/ "./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 */   SurveyQuestionSpinEditor: () => (/* binding */ SurveyQuestionSpinEditor)
+/* 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_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_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 SurveyQuestionSpinEditor = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SurveyQuestionSpinEditor, _super);
-    function SurveyQuestionSpinEditor(props) {
-        return _super.call(this, props) || this;
+
+var PropertyGridPlaceholderComponent = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(PropertyGridPlaceholderComponent, _super);
+    function PropertyGridPlaceholderComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    Object.defineProperty(SurveyQuestionSpinEditor.prototype, "question", {
-        get: function () {
-            return this.questionBase;
-        },
-        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.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" }))));
+    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 SurveyQuestionSpinEditor;
-}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyQuestionText));
+    return PropertyGridPlaceholderComponent;
+}(react__WEBPACK_IMPORTED_MODULE_1__.Component));
 
-survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactQuestionFactory.Instance.registerQuestion("spinedit", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SurveyQuestionSpinEditor, props);
+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/custom-questions/TextWithResetQuestion.tsx":
-/*!********************************************************!*\
-  !*** ./src/custom-questions/TextWithResetQuestion.tsx ***!
-  \********************************************************/
+/***/ "./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 */   SurveyQuestionTextWithReset: () => (/* binding */ SurveyQuestionTextWithReset)
+/* 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_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() {
-        return _super !== null && _super.apply(this, arguments) || this;
+
+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(SurveyQuestionTextWithReset.prototype, "question", {
+    Object.defineProperty(SearchComponent.prototype, "model", {
         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,
-        });
+    SearchComponent.prototype.getStateElement = function () {
+        return this.model;
     };
-    SurveyQuestionTextWithReset.prototype.renderResetButton = function () {
+    SearchComponent.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" })));
+        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 SurveyQuestionTextWithReset;
-}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyQuestionElementBase));
+    return SearchComponent;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase));
 
-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);
+survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-search", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SearchComponent, props);
 });
 
 
 /***/ }),
 
-/***/ "./src/entries/helpers.ts":
-/*!********************************!*\
-  !*** ./src/entries/helpers.ts ***!
-  \********************************/
+/***/ "./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 */   __assign: () => (/* binding */ __assign),
-/* harmony export */   __decorate: () => (/* binding */ __decorate),
-/* harmony export */   __extends: () => (/* binding */ __extends),
-/* harmony export */   __spreadArrays: () => (/* binding */ __spreadArrays)
+/* harmony export */   SidebarComponent: () => (/* binding */ SidebarComponent),
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* 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];
+/* 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 target;
+        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;
     };
-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;
-};
+    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/events.ts":
-/*!***********************!*\
-  !*** ./src/events.ts ***!
-  \***********************/
+/***/ "./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 */   ReactDragEvent: () => (/* binding */ ReactDragEvent),
-/* harmony export */   ReactMouseEvent: () => (/* binding */ ReactMouseEvent)
+/* 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 ReactMouseEvent = /** @class */ (function () {
-    function ReactMouseEvent(event) {
-        this.event = event;
+
+
+var SideBarDefaultHeader = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SideBarDefaultHeader, _super);
+    function SideBarDefaultHeader() {
+        return _super !== null && _super.apply(this, arguments) || 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();
-    };
-    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", {
+    Object.defineProperty(SideBarDefaultHeader.prototype, "model", {
         get: function () {
-            return this.event.nativeEvent.offsetX;
+            return this.props.model;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(ReactMouseEvent.prototype, "offsetY", {
+    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.event.nativeEvent.offsetY;
+            return this.props.model;
         },
         enumerable: false,
         configurable: true
     });
-    return ReactMouseEvent;
-}());
+    SideBarHeader.prototype.getStateElement = function () {
+        return this.model;
+    };
+    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 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);
+});
 
-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;
+
+/***/ }),
+
+/***/ "./src/side-bar/SideBarPropertyGridHeader.tsx":
+/*!****************************************************!*\
+  !*** ./src/side-bar/SideBarPropertyGridHeader.tsx ***!
+  \****************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-core */ "survey-core");
+/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
+/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__);
+
+
+
+
+var SideBarPropertyGridHeader = /** @class */ (function (_super) {
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SideBarPropertyGridHeader, _super);
+    function SideBarPropertyGridHeader() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    Object.defineProperty(ReactDragEvent.prototype, "dataTransfer", {
+    Object.defineProperty(SideBarPropertyGridHeader.prototype, "objectSelectionAction", {
         get: function () {
-            return this.event.dataTransfer;
+            return this.props.model;
         },
         enumerable: false,
         configurable: true
     });
-    return ReactDragEvent;
-}(ReactMouseEvent));
-
+    SideBarPropertyGridHeader.prototype.getStateElement = function () {
+        return this.objectSelectionAction;
+    };
+    SideBarPropertyGridHeader.prototype.renderElement = function () {
+        var _this = this;
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar__header svc-sidebar__header--tabbed" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar__header-container svc-sidebar__header-container--with-subtitle" },
+                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar__header-content", onClick: function () { return _this.objectSelectionAction.action(); } },
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.objectSelectionAction.buttonClassName },
+                        react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-sidebar__header-caption" },
+                            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-sidebar__header-title" }, this.objectSelectionAction.title),
+                            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-sidebar__header-subtitle" }, this.objectSelectionAction.tooltip))),
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.Popup, { model: this.objectSelectionAction.popupModel, getTarget: survey_core__WEBPACK_IMPORTED_MODULE_2__.getActionDropdownButtonTarget })))));
+    };
+    return SideBarPropertyGridHeader;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase));
+survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-side-bar-property-grid-header", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SideBarPropertyGridHeader, props);
+});
 
 
 /***/ }),
 
-/***/ "./src/tab-control/TabButton.tsx":
-/*!***************************************!*\
-  !*** ./src/tab-control/TabButton.tsx ***!
-  \***************************************/
+/***/ "./src/side-bar/TabButton.tsx":
+/*!************************************!*\
+  !*** ./src/side-bar/TabButton.tsx ***!
+  \************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
@@ -3504,10 +3693,10 @@ var TabButtonComponent = /** @class */ (function (_super) {
 
 /***/ }),
 
-/***/ "./src/tab-control/TabControl.tsx":
-/*!****************************************!*\
-  !*** ./src/tab-control/TabControl.tsx ***!
-  \****************************************/
+/***/ "./src/side-bar/TabControl.tsx":
+/*!*************************************!*\
+  !*** ./src/side-bar/TabControl.tsx ***!
+  \*************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
@@ -3516,7 +3705,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _TabButton__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./TabButton */ "./src/tab-control/TabButton.tsx");
+/* harmony import */ var _TabButton__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./TabButton */ "./src/side-bar/TabButton.tsx");
 
 
 
@@ -3585,6 +3774,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _PageNavigator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../PageNavigator */ "./src/PageNavigator.tsx");
+/* harmony import */ var _components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../components/SurfacePlaceholder */ "./src/components/SurfacePlaceholder.tsx");
+
 
 
 
@@ -3705,7 +3896,7 @@ var TabDesignerComponent = /** @class */ (function (_super) {
                 this.renderNewPage("svc-designer-placeholder-page"))));
     };
     TabDesignerComponent.prototype.renderPlaceHolderContent = function () {
-        return react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-designer-placeholder-text svc-text svc-text--normal" }, this.model.placeholderText);
+        return react__WEBPACK_IMPORTED_MODULE_1__.createElement(_components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_4__.SurfacePlaceholder, { name: "designer", placeholderTitleText: this.model.placeholderTitleText, placeholderDescriptionText: this.model.placeholderDescriptionText });
     };
     TabDesignerComponent.prototype.renderTabContent = function () {
         var survey = this.creator.survey;
@@ -3934,6 +4125,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../components/SurfacePlaceholder */ "./src/components/SurfacePlaceholder.tsx");
+
 
 
 
@@ -3985,18 +4178,18 @@ var TabLogicComponent = /** @class */ (function (_super) {
     };
     TabLogicComponent.prototype.renderElement = function () {
         var logic = this.model;
-        var rootClass = "svc-creator-tab__content";
+        var rootClass = "svc-creator-tab__content svc-logic-tab";
         var content = this.renderViewContent();
         return react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: rootClass }, content);
     };
     TabLogicComponent.prototype.renderViewContent = function () {
-        var logicTabClassName = "svc-plugin-tab__content svc-logic-tab__content " + (this.model.hasItems ? "" : "svc-logic-tab__empty");
+        var logicTabClassName = "svc-plugin-tab__content svc-logic-tab svc-logic-tab__content " + (this.model.hasItems ? "" : "svc-logic-tab--empty");
         var addLogic = !this.model.readOnly ? react__WEBPACK_IMPORTED_MODULE_1__.createElement(TabLogicAddButtonComponent, { button: this.model.addNewButton }) : undefined;
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
             react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: logicTabClassName },
                 react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.Survey, { model: this.model.itemsSurvey }),
                 this.model.hasItems ? null : (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-logic-tab__content-empty" },
-                    react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-text" }, this.model.emptyTabPlaceholder))),
+                    react__WEBPACK_IMPORTED_MODULE_1__.createElement(_components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_3__.SurfacePlaceholder, { name: "logic", placeholderTitleText: this.model.placeholderTitleText, placeholderDescriptionText: this.model.placeholderDescriptionText }))),
                 addLogic)));
     };
     return TabLogicComponent;
@@ -4027,6 +4220,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _SurveySimulator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./SurveySimulator */ "./src/tabs/SurveySimulator.tsx");
 /* harmony import */ var _Results__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Results */ "./src/Results.tsx");
+/* harmony import */ var _components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../components/SurfacePlaceholder */ "./src/components/SurfacePlaceholder.tsx");
+
 
 
 
@@ -4077,12 +4272,19 @@ var TabPreviewSurveyComponent = /** @class */ (function (_super) {
     TabPreviewSurveyComponent.prototype.getStateElement = function () {
         return this.model;
     };
+    TabPreviewSurveyComponent.prototype.renderPlaceholder = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-test-tab--empty" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_5__.SurfacePlaceholder, { name: "preview", placeholderTitleText: this.model.placeholderTitleText, placeholderDescriptionText: this.model.placeholderDescriptionText })));
+    };
+    TabPreviewSurveyComponent.prototype.renderSimulator = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-plugin-tab__content" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_SurveySimulator__WEBPACK_IMPORTED_MODULE_3__.SurveySimulator, { model: this.model.simulator }),
+            this.model.showResults ? react__WEBPACK_IMPORTED_MODULE_1__.createElement(_Results__WEBPACK_IMPORTED_MODULE_4__.SurveyResults, { survey: this.model.simulator.survey }) : null));
+    };
     TabPreviewSurveyComponent.prototype.renderElement = function () {
         var tabContentClassName = "svc-creator-tab__content svc-test-tab__content" + (this.model.isPageToolbarVisible ? " svc-creator-tab__content--with-toolbar" : "");
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: tabContentClassName },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-plugin-tab__content" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement(_SurveySimulator__WEBPACK_IMPORTED_MODULE_3__.SurveySimulator, { model: this.model.simulator }),
-                this.model.showResults ? react__WEBPACK_IMPORTED_MODULE_1__.createElement(_Results__WEBPACK_IMPORTED_MODULE_4__.SurveyResults, { survey: this.model.simulator.survey }) : null),
+            this.model.simulator.survey.isEmpty ? this.renderPlaceholder() : this.renderSimulator(),
             this.getBottomToolbar()));
     };
     TabPreviewSurveyComponent.prototype.getBottomToolbar = function () {
@@ -4102,51 +4304,6 @@ survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.regist
 });
 
 
-/***/ }),
-
-/***/ "./src/tabs/PropertyGridPlaceholder.tsx":
-/*!**********************************************!*\
-  !*** ./src/tabs/PropertyGridPlaceholder.tsx ***!
-  \**********************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   PropertyGridPlaceholderComponent: () => (/* binding */ PropertyGridPlaceholderComponent)
-/* harmony export */ });
-/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-creator-core */ "survey-creator-core");
-/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_creator_core__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
-/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__);
-
-
-
-
-var PropertyGridPlaceholderComponent = /** @class */ (function (_super) {
-    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(PropertyGridPlaceholderComponent, _super);
-    function PropertyGridPlaceholderComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    PropertyGridPlaceholderComponent.prototype.render = function () {
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-property-grid-placeholder" },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-property-grid-placeholder__header" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-property-grid-placeholder__title" }, survey_creator_core__WEBPACK_IMPORTED_MODULE_2__.editorLocalization.getString("ed.propertyGridPlaceholderTitle")),
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-property-grid-placeholder__description" }, survey_creator_core__WEBPACK_IMPORTED_MODULE_2__.editorLocalization.getString("ed.propertyGridPlaceholderDescription"))),
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-property-grid-placeholder__content" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-property-grid-placeholder__gap" }),
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-property-grid-placeholder__image" }))));
-    };
-    return PropertyGridPlaceholderComponent;
-}(react__WEBPACK_IMPORTED_MODULE_1__.Component));
-
-survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-property-grid-placeholder", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(PropertyGridPlaceholderComponent, props);
-});
-
-
 /***/ }),
 
 /***/ "./src/tabs/SurveySimulator.tsx":
@@ -4234,6 +4391,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _SurveySimulator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./SurveySimulator */ "./src/tabs/SurveySimulator.tsx");
 /* harmony import */ var _Results__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Results */ "./src/Results.tsx");
+/* harmony import */ var _components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../components/SurfacePlaceholder */ "./src/components/SurfacePlaceholder.tsx");
+
 
 
 
@@ -4254,12 +4413,19 @@ var TabThemeSurveyComponent = /** @class */ (function (_super) {
     TabThemeSurveyComponent.prototype.getStateElement = function () {
         return this.model;
     };
+    TabThemeSurveyComponent.prototype.renderPlaceholder = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-test-tab--empty" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_5__.SurfacePlaceholder, { name: "theme", placeholderTitleText: this.model.placeholderTitleText, placeholderDescriptionText: this.model.placeholderDescriptionText })));
+    };
+    TabThemeSurveyComponent.prototype.renderSimulator = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-plugin-tab__content" },
+            react__WEBPACK_IMPORTED_MODULE_1__.createElement(_SurveySimulator__WEBPACK_IMPORTED_MODULE_3__.SurveySimulator, { model: this.model.simulator }),
+            this.model.showResults ? react__WEBPACK_IMPORTED_MODULE_1__.createElement(_Results__WEBPACK_IMPORTED_MODULE_4__.SurveyResults, { survey: this.model.simulator.survey }) : null));
+    };
     TabThemeSurveyComponent.prototype.renderElement = function () {
         var tabContentClassName = "svc-creator-tab__content svc-test-tab__content" + (this.model.isPageToolbarVisible ? " svc-creator-tab__content--with-toolbar" : "");
         return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: tabContentClassName },
-            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-plugin-tab__content" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement(_SurveySimulator__WEBPACK_IMPORTED_MODULE_3__.SurveySimulator, { model: this.model.simulator }),
-                this.model.showResults ? react__WEBPACK_IMPORTED_MODULE_1__.createElement(_Results__WEBPACK_IMPORTED_MODULE_4__.SurveyResults, { survey: this.model.simulator.survey }) : null),
+            this.model.simulator.survey.isEmpty ? this.renderPlaceholder() : this.renderSimulator(),
             this.getBottomToolbar()));
     };
     TabThemeSurveyComponent.prototype.getBottomToolbar = function () {
@@ -4398,6 +4564,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
 /* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../components/SurfacePlaceholder */ "./src/components/SurfacePlaceholder.tsx");
+
 
 
 
@@ -4419,12 +4587,11 @@ var TabTranslationComponent = /** @class */ (function (_super) {
     TabTranslationComponent.prototype.renderElement = function () {
         if (!this.model)
             return null;
-        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-creator-tab__content svc-translation-tab" }, this.renderElementContent()));
+        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-creator-tab__content svc-translation-tab" + (this.model.isEmpty ? " svc-translation-tab--empty" : "") }, this.renderElementContent()));
     };
     TabTranslationComponent.prototype.renderElementContent = function () {
         if (this.model.isEmpty) {
-            return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "st-no-strings" },
-                react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", null, this.model.noStringsText)));
+            return react__WEBPACK_IMPORTED_MODULE_1__.createElement(_components_SurfacePlaceholder__WEBPACK_IMPORTED_MODULE_3__.SurfacePlaceholder, { name: "translation", placeholderTitleText: this.model.placeholderTitleText, placeholderDescriptionText: this.model.placeholderDescriptionText });
         }
         else {
             return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "st-content" },
@@ -4500,7 +4667,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");
 
 
 
@@ -4535,7 +4702,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;
@@ -5138,7 +5305,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_37__.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),
@@ -5148,25 +5315,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_52__.PropertyGridComponent),
-/* harmony export */   PropertyGridEditorCollection: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_61__.PropertyGridEditorCollection),
-/* harmony export */   PropertyGridPlaceholderComponent: () => (/* reexport safe */ _tabs_PropertyGridPlaceholder__WEBPACK_IMPORTED_MODULE_46__.PropertyGridPlaceholderComponent),
+/* harmony export */   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_39__.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_50__.ReactDragEvent),
-/* harmony export */   ReactMouseEvent: () => (/* reexport safe */ _events__WEBPACK_IMPORTED_MODULE_50__.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_53__.SearchComponent),
-/* harmony export */   SidebarComponent: () => (/* reexport safe */ _SideBar__WEBPACK_IMPORTED_MODULE_34__.SidebarComponent),
-/* harmony export */   StylesManager: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_61__.StylesManager),
+/* harmony export */   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),
@@ -5174,44 +5342,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_38__.SurveyLocStringEditor),
-/* harmony export */   SurveyLogic: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_61__.SurveyLogic),
-/* harmony export */   SurveyLogicOpertor: () => (/* reexport safe */ _tabs_logic_operator__WEBPACK_IMPORTED_MODULE_40__.SurveyLogicOpertor),
-/* harmony export */   SurveyLogicUI: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_61__.SurveyLogicUI),
+/* harmony export */   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_58__.SurveyQuestionColor),
-/* harmony export */   SurveyQuestionEditorDefinition: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_61__.SurveyQuestionEditorDefinition),
-/* harmony export */   SurveyQuestionFileEditor: () => (/* reexport safe */ _custom_questions_FileEditQuestion__WEBPACK_IMPORTED_MODULE_59__.SurveyQuestionFileEditor),
+/* harmony export */   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_56__.SurveyQuestionSpinEditor),
-/* harmony export */   SurveyQuestionTextWithReset: () => (/* reexport safe */ _custom_questions_TextWithResetQuestion__WEBPACK_IMPORTED_MODULE_60__.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_49__.SurveySimulator),
-/* harmony export */   SwitcherComponent: () => (/* reexport safe */ _Switcher__WEBPACK_IMPORTED_MODULE_54__.SwitcherComponent),
-/* harmony export */   TabButtonComponent: () => (/* reexport safe */ _tab_control_TabButton__WEBPACK_IMPORTED_MODULE_31__.TabButtonComponent),
-/* harmony export */   TabDesignerComponent: () => (/* reexport safe */ _tabs_Designer__WEBPACK_IMPORTED_MODULE_41__.TabDesignerComponent),
-/* harmony export */   TabJsonEditorAceComponent: () => (/* reexport safe */ _tabs_JsonEditorAce__WEBPACK_IMPORTED_MODULE_42__.TabJsonEditorAceComponent),
-/* harmony export */   TabJsonEditorErrorsComponent: () => (/* reexport safe */ _tabs_JsonEditorTextarea__WEBPACK_IMPORTED_MODULE_43__.TabJsonEditorErrorsComponent),
-/* harmony export */   TabJsonEditorTextareaComponent: () => (/* reexport safe */ _tabs_JsonEditorTextarea__WEBPACK_IMPORTED_MODULE_43__.TabJsonEditorTextareaComponent),
-/* harmony export */   TabLogicAddButtonComponent: () => (/* reexport safe */ _tabs_Logic__WEBPACK_IMPORTED_MODULE_44__.TabLogicAddButtonComponent),
-/* harmony export */   TabLogicComponent: () => (/* reexport safe */ _tabs_Logic__WEBPACK_IMPORTED_MODULE_44__.TabLogicComponent),
-/* harmony export */   TabPreviewSurveyComponent: () => (/* reexport safe */ _tabs_Preview__WEBPACK_IMPORTED_MODULE_45__.TabPreviewSurveyComponent),
-/* harmony export */   TabPreviewTestSurveyAgainComponent: () => (/* reexport safe */ _tabs_Preview__WEBPACK_IMPORTED_MODULE_45__.TabPreviewTestSurveyAgainComponent),
-/* harmony export */   TabThemeSurveyComponent: () => (/* reexport safe */ _tabs_Theme__WEBPACK_IMPORTED_MODULE_47__.TabThemeSurveyComponent),
-/* harmony export */   TabTranslationComponent: () => (/* reexport safe */ _tabs_translation_Translation__WEBPACK_IMPORTED_MODULE_48__.TabTranslationComponent),
+/* harmony export */   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_61__.ToolboxToolViewModel),
-/* harmony export */   TranslateFromAction: () => (/* reexport safe */ _tabs_translation_TranslateFromAction__WEBPACK_IMPORTED_MODULE_36__.TranslateFromAction),
-/* harmony export */   TranslationLineSkeleton: () => (/* reexport safe */ _tabs_translation_TranslationLineSkeleton__WEBPACK_IMPORTED_MODULE_35__.TranslationLineSkeleton),
+/* harmony export */   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_61__.editorLocalization),
-/* harmony export */   localization: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_61__.localization),
-/* harmony export */   settings: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_61__.settings),
-/* harmony export */   svgBundle: () => (/* reexport safe */ survey_creator_core__WEBPACK_IMPORTED_MODULE_61__.svgBundle)
+/* harmony export */   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");
@@ -5243,43 +5412,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 _tab_control_TabControl__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ../tab-control/TabControl */ "./src/tab-control/TabControl.tsx");
-/* harmony import */ var _tab_control_TabButton__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ../tab-control/TabButton */ "./src/tab-control/TabButton.tsx");
-/* harmony import */ var _SideBarPropertyGridHeader__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ../SideBarPropertyGridHeader */ "./src/SideBarPropertyGridHeader.tsx");
-/* harmony import */ var _SideBarPropertyGridPlaceholderHeader__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ../SideBarPropertyGridPlaceholderHeader */ "./src/SideBarPropertyGridPlaceholderHeader.tsx");
-/* harmony import */ var _SideBar__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ../SideBar */ "./src/SideBar.tsx");
-/* harmony import */ var _tabs_translation_TranslationLineSkeleton__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(/*! ../tabs/translation/TranslationLineSkeleton */ "./src/tabs/translation/TranslationLineSkeleton.tsx");
-/* harmony import */ var _tabs_translation_TranslateFromAction__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ../tabs/translation/TranslateFromAction */ "./src/tabs/translation/TranslateFromAction.tsx");
-/* harmony import */ var _ActionButton__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ../ActionButton */ "./src/ActionButton.tsx");
-/* harmony import */ var _StringEditor__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ../StringEditor */ "./src/StringEditor.tsx");
-/* harmony import */ var _QuestionError__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ../QuestionError */ "./src/QuestionError.tsx");
-/* harmony import */ var _tabs_logic_operator__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ../tabs/logic-operator */ "./src/tabs/logic-operator.tsx");
-/* harmony import */ var _tabs_Designer__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ../tabs/Designer */ "./src/tabs/Designer.tsx");
-/* harmony import */ var _tabs_JsonEditorAce__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ../tabs/JsonEditorAce */ "./src/tabs/JsonEditorAce.tsx");
-/* harmony import */ var _tabs_JsonEditorTextarea__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! ../tabs/JsonEditorTextarea */ "./src/tabs/JsonEditorTextarea.tsx");
-/* harmony import */ var _tabs_Logic__WEBPACK_IMPORTED_MODULE_44__ = __webpack_require__(/*! ../tabs/Logic */ "./src/tabs/Logic.tsx");
-/* harmony import */ var _tabs_Preview__WEBPACK_IMPORTED_MODULE_45__ = __webpack_require__(/*! ../tabs/Preview */ "./src/tabs/Preview.tsx");
-/* harmony import */ var _tabs_PropertyGridPlaceholder__WEBPACK_IMPORTED_MODULE_46__ = __webpack_require__(/*! ../tabs/PropertyGridPlaceholder */ "./src/tabs/PropertyGridPlaceholder.tsx");
-/* harmony import */ var _tabs_Theme__WEBPACK_IMPORTED_MODULE_47__ = __webpack_require__(/*! ../tabs/Theme */ "./src/tabs/Theme.tsx");
-/* harmony import */ var _tabs_translation_Translation__WEBPACK_IMPORTED_MODULE_48__ = __webpack_require__(/*! ../tabs/translation/Translation */ "./src/tabs/translation/Translation.tsx");
-/* harmony import */ var _tabs_SurveySimulator__WEBPACK_IMPORTED_MODULE_49__ = __webpack_require__(/*! ../tabs/SurveySimulator */ "./src/tabs/SurveySimulator.tsx");
-/* harmony import */ var _events__WEBPACK_IMPORTED_MODULE_50__ = __webpack_require__(/*! ../events */ "./src/events.ts");
-/* harmony import */ var _ObjectSelector__WEBPACK_IMPORTED_MODULE_51__ = __webpack_require__(/*! ../ObjectSelector */ "./src/ObjectSelector.tsx");
-/* harmony import */ var _PropertyGrid__WEBPACK_IMPORTED_MODULE_52__ = __webpack_require__(/*! ../PropertyGrid */ "./src/PropertyGrid.tsx");
-/* harmony import */ var _Search__WEBPACK_IMPORTED_MODULE_53__ = __webpack_require__(/*! ../Search */ "./src/Search.tsx");
-/* harmony import */ var _Switcher__WEBPACK_IMPORTED_MODULE_54__ = __webpack_require__(/*! ../Switcher */ "./src/Switcher.tsx");
-/* harmony import */ var _tabs_JsonErrorItem__WEBPACK_IMPORTED_MODULE_55__ = __webpack_require__(/*! ../tabs/JsonErrorItem */ "./src/tabs/JsonErrorItem.tsx");
-/* harmony import */ var _custom_questions_SpinEditor__WEBPACK_IMPORTED_MODULE_56__ = __webpack_require__(/*! ../custom-questions/SpinEditor */ "./src/custom-questions/SpinEditor.tsx");
-/* harmony import */ var _custom_questions_ColorItem__WEBPACK_IMPORTED_MODULE_57__ = __webpack_require__(/*! ../custom-questions/ColorItem */ "./src/custom-questions/ColorItem.tsx");
-/* harmony import */ var _custom_questions_ColorQuestion__WEBPACK_IMPORTED_MODULE_58__ = __webpack_require__(/*! ../custom-questions/ColorQuestion */ "./src/custom-questions/ColorQuestion.tsx");
-/* harmony import */ var _custom_questions_FileEditQuestion__WEBPACK_IMPORTED_MODULE_59__ = __webpack_require__(/*! ../custom-questions/FileEditQuestion */ "./src/custom-questions/FileEditQuestion.tsx");
-/* harmony import */ var _custom_questions_TextWithResetQuestion__WEBPACK_IMPORTED_MODULE_60__ = __webpack_require__(/*! ../custom-questions/TextWithResetQuestion */ "./src/custom-questions/TextWithResetQuestion.tsx");
-/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_61__ = __webpack_require__(/*! survey-creator-core */ "survey-creator-core");
-/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_61___default = /*#__PURE__*/__webpack_require__.n(survey_creator_core__WEBPACK_IMPORTED_MODULE_61__);
-/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_62__ = __webpack_require__(/*! survey-core */ "survey-core");
-/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_62___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_62__);
+/* 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.2");
+Version = "".concat("1.12.4");
 // import "@survey/creator/survey-creator-core.css";
 
 
@@ -5335,6 +5506,7 @@ Version = "".concat("1.12.2");
 
 
 
+
 
 
 //custom questions
@@ -5351,7 +5523,8 @@ Version = "".concat("1.12.2");
 
 
 
-(0,survey_core__WEBPACK_IMPORTED_MODULE_62__.checkLibraryVersion)("".concat("1.12.2"), "survey-creator-react");
+
+(0,survey_core__WEBPACK_IMPORTED_MODULE_64__.checkLibraryVersion)("".concat("1.12.4"), "survey-creator-react");
 
 /******/ 	return __webpack_exports__;
 /******/ })()