survey-creator-react 1.9.105 → 1.9.106

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-creator-react",
-  "version": "1.9.105",
+  "version": "1.9.106",
   "description": "Use SurveyJS Creator to create or edit JSON for SurveyJS Form Library.",
   "keywords": [
     "Survey",
@@ -34,9 +34,9 @@
     }
   },
   "dependencies": {
-    "survey-core": "1.9.105",
-    "survey-react-ui": "1.9.105",
-    "survey-creator-core": "1.9.105",
+    "survey-core": "1.9.106",
+    "survey-react-ui": "1.9.106",
+    "survey-creator-core": "1.9.106",
     "react": "^16.5.0 || ^17.0.1 || ^18.1.0",
     "react-dom": "^16.5.0 || ^17.0.1 || ^18.1.0"
   },

package/survey-creator-react.js

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator React v1.9.105
+ * SurveyJS Creator React v1.9.106
  * (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -1355,16 +1355,13 @@ var SurveyLocStringEditor = /** @class */ (function (_super) {
         };
         _this.state = { changed: 0 };
         _this.svStringEditorRef = react__WEBPACK_IMPORTED_MODULE_1___default.a.createRef();
-        _this.baseModel.getEditorElement = function () { return _this.svStringEditorRef.current; };
         return _this;
     }
     SurveyLocStringEditor.prototype.createModel = function () {
-        var _this = this;
+        if (this.baseModel) {
+            this.baseModel.dispose();
+        }
         this.baseModel = new survey_creator_core__WEBPACK_IMPORTED_MODULE_3__["StringEditorViewModelBase"](this.locString, this.creator);
-        this.baseModel.blurEditor = function () {
-            _this.svStringEditorRef.current.blur();
-            _this.svStringEditorRef.current.spellcheck = false;
-        };
     };
     SurveyLocStringEditor.prototype.getUpdatedModelProps = function () {
         return ["creator", "locString"];
@@ -1401,10 +1398,15 @@ var SurveyLocStringEditor = /** @class */ (function (_super) {
         configurable: true
     });
     SurveyLocStringEditor.prototype.componentDidMount = function () {
+        var _this = this;
         _super.prototype.componentDidMount.call(this);
         if (!this.locString)
             return;
-        var self = this;
+        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"]) {
@@ -1414,10 +1416,14 @@ var SurveyLocStringEditor = /** @class */ (function (_super) {
     };
     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.getEditorElement = undefined;
+        this.baseModel.blurEditor = undefined;
+        this.baseModel.dispose();
         if (!this.locString)
             return;
         this.locString.onStringChanged.remove(this.onChangedHandler);
@@ -1447,9 +1453,6 @@ var SurveyLocStringEditor = /** @class */ (function (_super) {
         if (!this.locString) {
             return null;
         }
-        else {
-            this.baseModel.setLocString(this.locString);
-        }
         var control = null;
         if (this.locString.hasHtml) {
             var htmlValue = { __html: this.baseModel.focused && this.baseModel.editAsText && this.locString.text || this.locString.renderedHtml };
@@ -2013,6 +2016,7 @@ var CreatorSurveyPageComponent = /** @class */ (function (_super) {
     };
     CreatorSurveyPageComponent.prototype.componentWillUnmount = function () {
         _super.prototype.componentWillUnmount.call(this);
+        this.model.onPageSelectedCallback = undefined;
         this.model.dispose();
     };
     CreatorSurveyPageComponent.prototype.canRender = function () {
@@ -2182,6 +2186,9 @@ var QuestionAdornerComponent = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     QuestionAdornerComponent.prototype.createModel = function () {
+        if (this.modelValue) {
+            this.modelValue.dispose();
+        }
         this.modelValue = this.createQuestionViewModel();
     };
     QuestionAdornerComponent.prototype.createQuestionViewModel = function () {
@@ -2793,7 +2800,8 @@ var SurveyQuestionColor = /** @class */ (function (_super) {
             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 () {
-        return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: this.question.cssClasses.root },
+        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));
@@ -2875,7 +2883,8 @@ var SurveyQuestionFileEditor = /** @class */ (function (_super) {
             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, onChange: this.questionFile.doChange })));
     };
     SurveyQuestionFileEditor.prototype.renderElement = function () {
-        return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: this.questionFile.cssClasses.root, onDragEnter: this.questionFile.onDragEnter, onDragOver: this.questionFile.onDragOver, onDrop: this.questionFile.onDrop, onDragLeave: this.questionFile.onDragLeave },
+        var _this = this;
+        return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: this.questionFile.cssClasses.root, 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.renderButtons()));
     };
@@ -2949,6 +2958,68 @@ survey_react_ui__WEBPACK_IMPORTED_MODULE_2__["ReactQuestionFactory"].Instance.re
 });
 
 
+/***/ }),
+
+/***/ "./src/custom-questions/TextWithResetQuestion.tsx":
+/*!********************************************************!*\
+  !*** ./src/custom-questions/TextWithResetQuestion.tsx ***!
+  \********************************************************/
+/*! exports provided: SurveyQuestionTextWithReset */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionTextWithReset", function() { return SurveyQuestionTextWithReset; });
+/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
+/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
+
+
+
+var SurveyQuestionTextWithReset = /** @class */ (function (_super) {
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(SurveyQuestionTextWithReset, _super);
+    function SurveyQuestionTextWithReset() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(SurveyQuestionTextWithReset.prototype, "question", {
+        get: function () {
+            return this.questionBase;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyQuestionTextWithReset.prototype.renderElement = function () {
+        var textElement = this.renderInput();
+        var resetButton = this.renderResetButton();
+        return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: this.question.getRootClass() },
+            textElement,
+            resetButton));
+    };
+    SurveyQuestionTextWithReset.prototype.renderInput = function () {
+        return survey_react_ui__WEBPACK_IMPORTED_MODULE_2__["ReactQuestionFactory"].Instance.createQuestion(this.question.wrappedQuestionTemplate, {
+            question: this.question,
+            isDisplayMode: this.question.isInputReadOnly,
+            creator: this,
+        });
+    };
+    SurveyQuestionTextWithReset.prototype.renderResetButton = function () {
+        var _this = this;
+        return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("button", { className: this.question.cssClasses.resetButton, disabled: this.question.resetValueAdorner.isDisabled, title: this.question.resetValueAdorner.caption, onClick: function () { return _this.question.resetValueAdorner.resetValue(); } },
+            react__WEBPACK_IMPORTED_MODULE_1__["createElement"](survey_react_ui__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { iconName: this.question.cssClasses.resetButtonIcon, size: "auto" })));
+    };
+    return SurveyQuestionTextWithReset;
+}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__["SurveyQuestionElementBase"]));
+
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__["ReactQuestionFactory"].Instance.registerQuestion("textwithreset", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](SurveyQuestionTextWithReset, props);
+});
+survey_react_ui__WEBPACK_IMPORTED_MODULE_2__["ReactQuestionFactory"].Instance.registerQuestion("commentwithreset", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](SurveyQuestionTextWithReset, props);
+});
+
+
 /***/ }),
 
 /***/ "./src/entries/helpers.ts":
@@ -3016,7 +3087,7 @@ var __spreadArrays = function () {
 /*!******************************!*\
   !*** ./src/entries/index.ts ***!
   \******************************/
-/*! exports provided: Version, SurveyCreatorComponent, SurveyCreator, RowWrapper, QuestionAdornerComponent, QuestionWrapperHeader, QuestionWrapperFooter, QuestionCarrayForwardBanner, QuestionDropdownAdornerComponent, QuestionImageAdornerComponent, QuestionRatingAdornerComponent, QuestionWidgetAdornerComponent, CellQuestionAdornerComponent, CellQuestionDropdownAdornerComponent, CreatorSurveyPageComponent, PanelAdornerComponent, LogoImageComponent, SurveyQuestionLinkValue, SurveyElementEmbeddedSurvey, QuestionEditorContentComponent, ItemValueAdornerComponent, ImageItemValueAdornerComponent, MatrixCellAdornerComponent, SurveyResults, SurveyResultsByRow, SurveyCreatorToolboxTool, SurveyCreatorToolboxItem, SurveyCreatorToolboxCategory, Toolbox, AdaptiveToolbox, TabbedMenuComponent, TabbedMenuItemComponent, SurveyNavigation, SidebarComponent, TranslationLineSkeleton, ActionButton, SurveyLocStringEditor, SurveyLogicOpertor, TabDesignerComponent, TabJsonEditorAceComponent, TabJsonEditorErrorsComponent, TabJsonEditorTextareaComponent, TabLogicAddButtonComponent, TabLogicComponent, TabPreviewTestSurveyAgainComponent, TabPreviewSurveyComponent, TabThemeSurveyComponent, TabTranslationComponent, SurveySimulator, ReactMouseEvent, ReactDragEvent, PropertyGridComponent, SurveyQuestionSpinEditor, SurveyQuestionColor, SurveyQuestionFileEditor, editorLocalization, localization, settings, svgBundle, SurveyLogic, SurveyLogicUI, SurveyQuestionEditorDefinition, ToolboxToolViewModel, PropertyGridEditorCollection, StylesManager */
+/*! exports provided: Version, SurveyCreatorComponent, SurveyCreator, RowWrapper, QuestionAdornerComponent, QuestionWrapperHeader, QuestionWrapperFooter, QuestionCarrayForwardBanner, QuestionDropdownAdornerComponent, QuestionImageAdornerComponent, QuestionRatingAdornerComponent, QuestionWidgetAdornerComponent, CellQuestionAdornerComponent, CellQuestionDropdownAdornerComponent, CreatorSurveyPageComponent, PanelAdornerComponent, LogoImageComponent, SurveyQuestionLinkValue, SurveyElementEmbeddedSurvey, QuestionEditorContentComponent, ItemValueAdornerComponent, ImageItemValueAdornerComponent, MatrixCellAdornerComponent, SurveyResults, SurveyResultsByRow, SurveyCreatorToolboxTool, SurveyCreatorToolboxItem, SurveyCreatorToolboxCategory, Toolbox, AdaptiveToolbox, TabbedMenuComponent, TabbedMenuItemComponent, SurveyNavigation, SidebarComponent, TranslationLineSkeleton, ActionButton, SurveyLocStringEditor, SurveyLogicOpertor, TabDesignerComponent, TabJsonEditorAceComponent, TabJsonEditorErrorsComponent, TabJsonEditorTextareaComponent, TabLogicAddButtonComponent, TabLogicComponent, TabPreviewTestSurveyAgainComponent, TabPreviewSurveyComponent, TabThemeSurveyComponent, TabTranslationComponent, SurveySimulator, ReactMouseEvent, ReactDragEvent, PropertyGridComponent, SurveyQuestionSpinEditor, SurveyQuestionColor, SurveyQuestionFileEditor, SurveyQuestionTextWithReset, editorLocalization, localization, settings, svgBundle, SurveyLogic, SurveyLogicUI, SurveyQuestionEditorDefinition, ToolboxToolViewModel, PropertyGridEditorCollection, StylesManager */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3179,32 +3250,35 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _custom_questions_FileEditQuestion__WEBPACK_IMPORTED_MODULE_48__ = __webpack_require__(/*! ../custom-questions/FileEditQuestion */ "./src/custom-questions/FileEditQuestion.tsx");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionFileEditor", function() { return _custom_questions_FileEditQuestion__WEBPACK_IMPORTED_MODULE_48__["SurveyQuestionFileEditor"]; });
 
-/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_49__ = __webpack_require__(/*! survey-creator-core */ "survey-creator-core");
-/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_49___default = /*#__PURE__*/__webpack_require__.n(survey_creator_core__WEBPACK_IMPORTED_MODULE_49__);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "editorLocalization", function() { return survey_creator_core__WEBPACK_IMPORTED_MODULE_49__["editorLocalization"]; });
+/* harmony import */ var _custom_questions_TextWithResetQuestion__WEBPACK_IMPORTED_MODULE_49__ = __webpack_require__(/*! ../custom-questions/TextWithResetQuestion */ "./src/custom-questions/TextWithResetQuestion.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionTextWithReset", function() { return _custom_questions_TextWithResetQuestion__WEBPACK_IMPORTED_MODULE_49__["SurveyQuestionTextWithReset"]; });
+
+/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_50__ = __webpack_require__(/*! survey-creator-core */ "survey-creator-core");
+/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_50___default = /*#__PURE__*/__webpack_require__.n(survey_creator_core__WEBPACK_IMPORTED_MODULE_50__);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "editorLocalization", function() { return survey_creator_core__WEBPACK_IMPORTED_MODULE_50__["editorLocalization"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "localization", function() { return survey_creator_core__WEBPACK_IMPORTED_MODULE_49__["localization"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "localization", function() { return survey_creator_core__WEBPACK_IMPORTED_MODULE_50__["localization"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "settings", function() { return survey_creator_core__WEBPACK_IMPORTED_MODULE_49__["settings"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "settings", function() { return survey_creator_core__WEBPACK_IMPORTED_MODULE_50__["settings"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "svgBundle", function() { return survey_creator_core__WEBPACK_IMPORTED_MODULE_49__["svgBundle"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "svgBundle", function() { return survey_creator_core__WEBPACK_IMPORTED_MODULE_50__["svgBundle"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyLogic", function() { return survey_creator_core__WEBPACK_IMPORTED_MODULE_49__["SurveyLogic"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyLogic", function() { return survey_creator_core__WEBPACK_IMPORTED_MODULE_50__["SurveyLogic"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyLogicUI", function() { return survey_creator_core__WEBPACK_IMPORTED_MODULE_49__["SurveyLogicUI"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyLogicUI", function() { return survey_creator_core__WEBPACK_IMPORTED_MODULE_50__["SurveyLogicUI"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionEditorDefinition", function() { return survey_creator_core__WEBPACK_IMPORTED_MODULE_49__["SurveyQuestionEditorDefinition"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionEditorDefinition", function() { return survey_creator_core__WEBPACK_IMPORTED_MODULE_50__["SurveyQuestionEditorDefinition"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ToolboxToolViewModel", function() { return survey_creator_core__WEBPACK_IMPORTED_MODULE_49__["ToolboxToolViewModel"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ToolboxToolViewModel", function() { return survey_creator_core__WEBPACK_IMPORTED_MODULE_50__["ToolboxToolViewModel"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "PropertyGridEditorCollection", function() { return survey_creator_core__WEBPACK_IMPORTED_MODULE_49__["PropertyGridEditorCollection"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "PropertyGridEditorCollection", function() { return survey_creator_core__WEBPACK_IMPORTED_MODULE_50__["PropertyGridEditorCollection"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "StylesManager", function() { return survey_creator_core__WEBPACK_IMPORTED_MODULE_49__["StylesManager"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "StylesManager", function() { return survey_creator_core__WEBPACK_IMPORTED_MODULE_50__["StylesManager"]; });
 
-/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_50__ = __webpack_require__(/*! survey-core */ "survey-core");
-/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_50___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_50__);
+/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_51__ = __webpack_require__(/*! survey-core */ "survey-core");
+/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_51___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_51__);
 var Version;
-Version = "".concat("1.9.105");
+Version = "".concat("1.9.106");
 // import "@survey/creator/survey-creator-core.css";
 
 
@@ -3264,7 +3338,8 @@ Version = "".concat("1.9.105");
 
 
 
-Object(survey_core__WEBPACK_IMPORTED_MODULE_50__["checkLibraryVersion"])("".concat("1.9.105"), "survey-creator-react");
+
+Object(survey_core__WEBPACK_IMPORTED_MODULE_51__["checkLibraryVersion"])("".concat("1.9.106"), "survey-creator-react");
 
 
 /***/ }),
@@ -3882,10 +3957,9 @@ var TabPreviewSurveyComponent = /** @class */ (function (_super) {
         return this.model;
     };
     TabPreviewSurveyComponent.prototype.renderElement = function () {
-        var _this = this;
         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___default.a.createElement("div", { className: tabContentClassName },
-            react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", { className: "svc-plugin-tab__content", onScroll: function () { return _this.model.onScroll(); } },
+            react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", { className: "svc-plugin-tab__content" },
                 react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_SurveySimulator__WEBPACK_IMPORTED_MODULE_3__["SurveySimulator"], { model: this.model.simulator }),
                 !this.model.isRunning ? react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(TabPreviewTestSurveyAgainComponent, { button: this.model.testAgainAction }) : null,
                 !this.model.isRunning ? react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_Results__WEBPACK_IMPORTED_MODULE_4__["SurveyResults"], { survey: this.model.simulator.survey }) : null),
@@ -4540,7 +4614,7 @@ var SurveyCreatorToolboxItem = /** @class */ (function (_super) {
     };
     SurveyCreatorToolboxItem.prototype.render = function () {
         var _this = this;
-        return Object(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__["attachKey2click"])(react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", { className: this.item.className, tabIndex: 0, role: "button", "aria-label": this.item.tooltip, title: this.item.tooltip, onClick: function (event) {
+        return Object(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__["attachKey2click"])(react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", { className: "svc-toolbox__item " + this.item.className, tabIndex: 0, role: "button", "aria-label": this.item.tooltip, title: this.item.tooltip, onClick: function (event) {
                 event.persist();
                 _this.model.click(event);
             } },