survey-creator-core 1.9.104 → 1.9.105

package/survey-creator-core.js

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v1.9.104
+ * SurveyJS Creator v1.9.105
  * (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -9407,7 +9407,8 @@ var TestSurveyTabViewModel = /** @class */ (function (_super) {
     TestSurveyTabViewModel.prototype.getPageTitle = function (page, area, reason) {
         if (area === void 0) { area = "preview-tab:page-list"; }
         if (reason === void 0) { reason = "survey-tester"; }
-        var title = this.surveyProvider.getObjectDisplayName(page, area, reason, page.title);
+        var pageTitle = page.title.replace(TestSurveyTabViewModel.tagRegex, "");
+        var title = this.surveyProvider.getObjectDisplayName(page, area, reason, pageTitle);
         if (title === page.name && title.indexOf("page") === 0) {
             var index = this.survey.pages.indexOf(page);
             return _editorLocalization__WEBPACK_IMPORTED_MODULE_3__["editorLocalization"].getString("ed.pageTypeName") + " " + (index + 1);
@@ -9560,6 +9561,7 @@ var TestSurveyTabViewModel = /** @class */ (function (_super) {
             this.onScrollCallback();
         return true;
     };
+    TestSurveyTabViewModel.tagRegex = /(<([^>]+)>)/ig;
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
         Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["property"])({
             defaultValue: false,
@@ -10201,6 +10203,8 @@ var TabThemePlugin = /** @class */ (function () {
         this.resetTheme = new survey_core__WEBPACK_IMPORTED_MODULE_1__["Action"]({
             id: "resetTheme",
             iconName: "icon-reset",
+            locTitleName: "ed.themeResetButton",
+            locTooltipName: "ed.themeResetButton",
             mode: "small",
             visible: new survey_core__WEBPACK_IMPORTED_MODULE_1__["ComputedUpdater"](function () {
                 return (_this.creator.activeTab === "theme");
@@ -10431,6 +10435,7 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
         this.setThemeToSurvey();
     };
     ThemeSurveyTabViewModel.prototype.loadTheme = function (theme) {
+        this.blockThemeChangedNotifications += 1;
         this.themeName = theme.themeName;
         this.themePalette = theme.colorPalette;
         this.themeMode = theme.isPanelless ? "lightweight" : undefined;
@@ -10446,6 +10451,7 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
         var themeVariables = {};
         Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["assign"])(themeVariables, this.themeVariables, theme.cssVariables);
         theme.cssVariables = themeVariables;
+        this.blockThemeChangedNotifications -= 1;
     };
     ThemeSurveyTabViewModel.prototype.updateSimulatorSurvey = function (json, theme) {
         var newSurvey = this.surveyProvider.createSurvey(json || {}, "theme");
@@ -10849,14 +10855,17 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
             }
         });
     };
+    ThemeSurveyTabViewModel.prototype.raiseThemeChanged = function () {
+        if (this.blockThemeChangedNotifications == 0) {
+            this.surveyProvider.raiseThemeChanged();
+        }
+    };
     ThemeSurveyTabViewModel.prototype.setThemeToSurvey = function (theme) {
         if (!!theme) {
             this.surveyProvider.theme = theme;
         }
         this.survey.applyTheme(this.surveyProvider.theme);
-        if (this.blockThemeChangedNotifications == 0) {
-            this.surveyProvider.raiseThemeChanged();
-        }
+        this.raiseThemeChanged();
     };
     ThemeSurveyTabViewModel.prototype.getThemeEditorSurveyJSON = function () {
         var themeEditorSurveyJSON = {
@@ -11349,6 +11358,7 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
                     _target.survey.backgroundImage = newValue;
                 }
                 _target.currentTheme["backgroundImage"] = newValue;
+                _target.raiseThemeChanged();
             }
         })
     ], ThemeSurveyTabViewModel.prototype, "backgroundImage", void 0);
@@ -11360,6 +11370,7 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
                     _target.survey.backgroundImageFit = newValue;
                 }
                 _target.currentTheme["backgroundImageFit"] = newValue;
+                _target.raiseThemeChanged();
             }
         })
     ], ThemeSurveyTabViewModel.prototype, "backgroundImageFit", void 0);
@@ -11371,6 +11382,7 @@ var ThemeSurveyTabViewModel = /** @class */ (function (_super) {
                     _target.survey.backgroundImageAttachment = newValue;
                 }
                 _target.currentTheme["backgroundImageAttachment"] = newValue;
+                _target.raiseThemeChanged();
             }
         })
     ], ThemeSurveyTabViewModel.prototype, "backgroundImageAttachment", void 0);
@@ -12301,6 +12313,38 @@ var TranslationGroup = /** @class */ (function (_super) {
     TranslationGroup.prototype.setAsRoot = function () {
         this.isRootValue = true;
     };
+    TranslationGroup.prototype.setParent = function (parent) {
+        this.parentValue = parent;
+    };
+    Object.defineProperty(TranslationGroup.prototype, "parent", {
+        get: function () { return this.parentValue; },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TranslationGroup.prototype, "fullName", {
+        get: function () {
+            var propsName = this.obj.name === this.name || this.isRoot ? "_props" : "";
+            var name = this.name + propsName;
+            if (this.isRoot || !this.parent)
+                return name;
+            var parentName = this.parent.getNameForChild();
+            return (!!parentName ? parentName + "_" : "") + name;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TranslationGroup.prototype.getNameForChild = function () {
+        if (this.isRoot)
+            return "";
+        return this.isFinalNameObj ? this.name : this.fullName;
+    };
+    Object.defineProperty(TranslationGroup.prototype, "isFinalNameObj", {
+        get: function () {
+            return this.obj.isQuestion || this.obj.isPage || this.obj.isPanel;
+        },
+        enumerable: false,
+        configurable: true
+    });
     TranslationGroup.prototype.getItemByName = function (name) {
         for (var i = 0; i < this.itemValues.length; i++) {
             if (this.itemValues[i].name == name)
@@ -12422,10 +12466,7 @@ var TranslationGroup = /** @class */ (function (_super) {
             //If ItemValue array?
             if (this.isItemValueArray(value)) {
                 if (this.canShowProperty(property, Array.isArray(value) && value.length > 0)) {
-                    var group = new TranslationGroup(property.name, value, this.translation, _editorLocalization__WEBPACK_IMPORTED_MODULE_3__["editorLocalization"].getPropertyName(property.name), true);
-                    if (group.hasItems) {
-                        this.itemValues.push(group);
-                    }
+                    this.addNewGroup(new TranslationGroup(property.name, value, this.translation, _editorLocalization__WEBPACK_IMPORTED_MODULE_3__["editorLocalization"].getPropertyName(property.name), true));
                 }
             }
             else {
@@ -12520,13 +12561,16 @@ var TranslationGroup = /** @class */ (function (_super) {
                     name_1 = property.name + index;
                     text = _editorLocalization__WEBPACK_IMPORTED_MODULE_3__["editorLocalization"].getPropertyName(property.name) + index;
                 }
-                var group = new TranslationGroup(name_1, obj, this.translation, text);
-                if (group.hasItems) {
-                    this.itemValues.push(group);
-                }
+                this.addNewGroup(new TranslationGroup(name_1, obj, this.translation, text));
             }
         }
     };
+    TranslationGroup.prototype.addNewGroup = function (group) {
+        group.setParent(this);
+        if (group.hasItems) {
+            this.itemValues.push(group);
+        }
+    };
     TranslationGroup.prototype.createItemValuesLocale = function () {
         for (var i = 0; i < this.obj.length; i++) {
             var val = this.obj[i];
@@ -12738,7 +12782,7 @@ var Translation = /** @class */ (function (_super) {
         survey.startLoadingFromJson();
         survey.css = _translation_theme__WEBPACK_IMPORTED_MODULE_8__["translationCss"];
         survey.addNewPage("page");
-        this.addTranslationGroupIntoStringsSurvey(survey.pages[0], this.root, null);
+        this.addTranslationGroupIntoStringsSurvey(survey.pages[0], this.root);
         survey.data = this.getStringsSurveyData(survey);
         survey.endLoadingFromJson();
         var getTransationItem = function (question, rowName) {
@@ -12797,7 +12841,7 @@ var Translation = /** @class */ (function (_super) {
         survey.currentPage = survey.pages[0];
         return survey;
     };
-    Translation.prototype.addTranslationGroupIntoStringsSurvey = function (panel, group, parent) {
+    Translation.prototype.addTranslationGroupIntoStringsSurvey = function (panel, group) {
         for (var i = 0; i < group.items.length; i++) {
             if (group.items[i].isGroup)
                 continue;
@@ -12805,7 +12849,7 @@ var Translation = /** @class */ (function (_super) {
             var matrix = (survey_core__WEBPACK_IMPORTED_MODULE_1__["Serializer"].createClass("matrixdropdown"));
             matrix.cellType = "comment";
             matrix.titleLocation = "hidden";
-            matrix.name = this.getStringsSurveyQuestionName(group, parent) + i;
+            matrix.name = group.fullName + i;
             matrix.showHeader = false;
             panel.addQuestion(matrix);
             this.addLocaleColumns(matrix);
@@ -12825,7 +12869,7 @@ var Translation = /** @class */ (function (_super) {
             if (item.hasIndent) {
                 pnl.cssClasses.panel.content += " st-panel-indent";
             }
-            this.addTranslationGroupIntoStringsSurvey(pnl, item, group);
+            this.addTranslationGroupIntoStringsSurvey(pnl, item);
         }
     };
     Translation.prototype.addLocaleColumns = function (matrix) {
@@ -12835,13 +12879,6 @@ var Translation = /** @class */ (function (_super) {
             matrix.addColumn(locs[i], this.getLocaleName(locs[i]));
         }
     };
-    Translation.prototype.getStringsSurveyQuestionName = function (group, parent) {
-        var name = group.name + (group.obj.name == group.name || group.isRoot ? "_props" : "");
-        if (!!parent && parent !== this.root) {
-            name = parent.name + "_" + name;
-        }
-        return name;
-    };
     Translation.prototype.getStringsSurveyData = function (survey) {
         var res = {};
         var questions = survey.getAllQuestions();
@@ -13298,7 +13335,7 @@ var ToolboxToolViewModel = /** @class */ (function (_super) {
         };
         _this.startDragToolboxItem = function (pointerDownEvent, currentTarget) {
             var json = _this.creator.getJSONForNewElement(_this.item.json);
-            _this.dragDropHelper.startDragToolboxItem(pointerDownEvent, json, _this.item.title);
+            _this.dragDropHelper.startDragToolboxItem(pointerDownEvent, json, _this.item);
             return true;
         };
         _this.dragOrClickHelper = new survey_core__WEBPACK_IMPORTED_MODULE_1__["DragOrClickHelper"](_this.startDragToolboxItem);
@@ -15583,6 +15620,11 @@ var CreatorBase = /** @class */ (function (_super) {
         var selectedElement = this.getSelectedSurveyElement();
         if (selectedElement && selectedElement.parent && selectedElement["page"] == parent &&
             (selectedElement !== panel)) {
+            if (!panel) {
+                while (selectedElement.parent !== null && selectedElement.parent.isPanel) {
+                    selectedElement = selectedElement.parent;
+                }
+            }
             parent = selectedElement.parent;
             if (index < 0) {
                 index = parent.elements.indexOf(selectedElement);
@@ -15790,6 +15832,13 @@ var CreatorBase = /** @class */ (function (_super) {
             this.selectElement(!!newPage ? newPage : this.survey);
         }
         else {
+            if (this.isInitialSurveyEmpty && this.survey.pageCount === 1) {
+                var page = this.survey.pages[0];
+                if (page.elements.length === 1 && obj === page.elements[0]) {
+                    this.deleteObjectCore(page);
+                    return;
+                }
+            }
             this.deletePanelOrQuestion(obj);
         }
         this.setModified({
@@ -16185,7 +16234,7 @@ var CreatorBase = /** @class */ (function (_super) {
         if (obj["questions"]) {
             obj["questions"].forEach(function (q) { return _this.updateConditionsOnRemove(q); });
         }
-        obj["delete"]();
+        obj["delete"](false);
         this.selectElement(objIndex > -1 ? elements[objIndex] : parent);
     };
     CreatorBase.prototype.onCanShowObjectProperty = function (object, property, showMode, parentObj, parentProperty) {
@@ -16821,7 +16870,7 @@ var CreatorBase = /** @class */ (function (_super) {
         })
     ], CreatorBase.prototype, "isCreatorDisposed", void 0);
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
-        Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: false })
+        Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: true })
     ], CreatorBase.prototype, "enableLinkFileEditor", void 0);
     return CreatorBase;
 }(survey_core__WEBPACK_IMPORTED_MODULE_1__["Base"]));
@@ -18045,31 +18094,44 @@ var EditorLocalization = /** @class */ (function () {
     };
     EditorLocalization.prototype.getString = function (strName, locale) {
         if (locale === void 0) { locale = null; }
+        if (!locale)
+            locale = this.currentLocale;
         var loc = this.getLocale(locale);
         var defaultLocale = this.getLocale("en");
-        var path = strName.split(".");
-        var obj = loc;
-        for (var i = 0; i < path.length; i++) {
-            obj = obj[path[i]];
-            if (!obj && obj !== "") {
-                if (loc === defaultLocale)
-                    return path[i];
-                return this.getString(strName, "en");
-            }
+        var locs = [];
+        if (!!loc)
+            locs.push(loc);
+        if (!!locale && locale.indexOf("-") > -1) {
+            var baseLocale = this.getLocale(locale.substring(0, locale.indexOf("-")));
+            if (!!baseLocale)
+                locs.push(baseLocale);
         }
-        return obj;
+        if (locs.length === 0 || locs[locs.length - 1] !== defaultLocale) {
+            locs.push(defaultLocale);
+        }
+        for (var i = 0; i < locs.length; i++) {
+            var res = this.getStringByLocale(strName, locs[i]);
+            if (!!res || res === "")
+                return res;
+        }
+        var path = strName.split(".");
+        return path[path.length - 1];
     };
     EditorLocalization.prototype.hasString = function (strName, locale) {
         if (locale === void 0) { locale = null; }
-        var loc = this.getLocale(locale);
+        return this.getStringByLocale(strName, this.getLocale(locale)) !== undefined;
+    };
+    EditorLocalization.prototype.getStringByLocale = function (strName, loc) {
         var path = strName.split(".");
         var obj = loc;
         for (var i = 0; i < path.length; i++) {
+            if (typeof obj === "string")
+                return undefined;
             obj = obj[path[i]];
             if (!obj && obj !== "")
-                return false;
+                return undefined;
         }
-        return true;
+        return obj;
     };
     EditorLocalization.prototype.getLocaleName = function (loc, defaultLocale) {
         if (defaultLocale === void 0) { defaultLocale = null; }
@@ -18263,10 +18325,7 @@ var EditorLocalization = /** @class */ (function () {
         if (value === "" || value === null || value === undefined)
             return "";
         value = value.toString();
-        var loc = this.getLocale(locale);
-        var res = loc[prefix] ? loc[prefix][value] : null;
-        if (!res)
-            res = defaultStrings[prefix][value];
+        var res = this.getString(prefix + "." + value, locale);
         if (!!res)
             return res;
         return this.camelCaseBreaking
@@ -18843,7 +18902,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_69__ = __webpack_require__(/*! survey-core */ "survey-core");
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_69___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_69__);
 var Version;
-Version = "" + "1.9.104";
+Version = "" + "1.9.105";
 //should be loaded before other styles for easier override 
 __webpack_require__(/*! ../utils/context-button.scss */ "./src/utils/context-button.scss");
 
@@ -18931,7 +18990,7 @@ __webpack_require__(/*! ../utils/design.scss */ "./src/utils/design.scss");
 __webpack_require__(/*! ../utils/layout.scss */ "./src/utils/layout.scss");
 
 survey_core__WEBPACK_IMPORTED_MODULE_69__["settings"].supportCreatorV2 = true;
-Object(survey_core__WEBPACK_IMPORTED_MODULE_69__["checkLibraryVersion"])("" + "1.9.104", "survey-creator-core");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_69__["checkLibraryVersion"])("" + "1.9.105", "survey-creator-core");
 
 
 /***/ }),
@@ -21157,6 +21216,7 @@ var enStrings = {
         translationPlaceHolder: "Translation...",
         themeExportButton: "Export",
         themeImportButton: "Import",
+        themeResetButton: "Reset theme settings to default",
         bold: "Bold",
         italic: "Italic",
         underline: "Underline",
@@ -25309,7 +25369,8 @@ var PropertyJSONGenerator = /** @class */ (function () {
         };
         if (!!overridingQuestion) {
             linkValue.linkClickCallback = function () {
-                overridingQuestion.focus();
+                //Focus and aways scroll into view
+                overridingQuestion.focus(false, true);
             };
         }
         return linkValue;
@@ -25433,6 +25494,9 @@ var PropertyJSONGenerator = /** @class */ (function () {
         if (json.cellType === "buttongroup") {
             json.cellType = "dropdown";
         }
+        if (json.cellType === "fileedit") {
+            json.cellType = "text";
+        }
         if (!!prop.visibleIf) {
             json.visibleIf = "propertyVisibleIf() = true";
         }
@@ -25629,8 +25693,8 @@ var PropertyGridModel = /** @class */ (function () {
         });
         this.survey.onUploadFiles.add(function (_, options) {
             var callback = function (status, data) { return options.callback(status, [{ content: data, file: options.files[0] }]); };
-            var obj = options.question.obj.getType() == "image" ? options.question.obj : (options.question.obj.getType() == "imageitemvalue" ? options.question.obj.locOwner : undefined);
-            _this.options.uploadFiles(options.files, obj, callback);
+            var question = options.question.obj.getType() == "survey" ? undefined : (options.question.obj.getType() == "imageitemvalue" ? options.question.obj.locOwner : options.question.obj);
+            _this.options.uploadFiles(options.files, question, callback);
         });
         this.survey.getAllQuestions().map(function (q) { return q.allowRootStyle = false; });
         this.survey.onQuestionCreated.add(function (_, opt) {
@@ -26045,19 +26109,23 @@ var PropertyGridLinkEditor = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     PropertyGridLinkEditor.prototype.fit = function (prop) {
-        return ["logo", "imageLink"].indexOf(prop.name) > -1;
+        return ["logo", "imageLink", "backgroundImage"].indexOf(prop.name) > -1;
     };
     PropertyGridLinkEditor.prototype.getJSON = function (obj, prop, options) {
-        var res = { type: "fileedit", storeDataAsText: false, };
+        var _a;
+        var maxSize = ((_a = options.onUploadFile) === null || _a === void 0 ? void 0 : _a.isEmpty) ? 65536 : undefined;
+        var res = { type: "fileedit", storeDataAsText: false, maxSize: maxSize };
         return res;
     };
     PropertyGridLinkEditor.prototype.onCreated = function (obj, question, prop, options) {
-        if (["image"].indexOf(obj.getType()) > -1) {
-            var questionObj = obj;
-            questionObj.registerFunctionOnPropertyValueChanged("contentMode", function (newValue) {
-                question.acceptedTypes = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_10__["getAcceptedTypesByContentMode"])(newValue);
-            });
-            question.acceptedTypes = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_10__["getAcceptedTypesByContentMode"])(questionObj.contentMode);
+        if (["image", "imageitemvalue"].indexOf(obj.getType()) > -1) {
+            var questionObj = obj.getType() == "imageitemvalue" ? obj.locOwner : obj;
+            if (questionObj) {
+                questionObj.registerFunctionOnPropertyValueChanged("contentMode", function (newValue) {
+                    question.acceptedTypes = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_10__["getAcceptedTypesByContentMode"])(newValue);
+                });
+                question.acceptedTypes = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_10__["getAcceptedTypesByContentMode"])(questionObj.contentMode);
+            }
         }
         else {
             question.acceptedTypes = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_10__["getAcceptedTypesByContentMode"])("image");
@@ -26573,14 +26641,6 @@ var PropertyGridEditorMatrix = /** @class */ (function (_super) {
             matrix.dragDropMatrixRows.onDragEnd.add(function () { options.stopUndoRedoTransaction(); });
         }
     };
-    PropertyGridEditorMatrix.prototype.initializeAcceptedTypes = function (obj, cellQuestion) {
-        if (obj.getType() === "imagepicker" && cellQuestion.name == "imageLink" && cellQuestion.getType() == "fileedit") {
-            obj.registerFunctionOnPropertyValueChanged("contentMode", function (newValue) {
-                cellQuestion.acceptedTypes = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_4__["getAcceptedTypesByContentMode"])(newValue);
-            });
-            cellQuestion.acceptedTypes = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_4__["getAcceptedTypesByContentMode"])(obj.contentMode);
-        }
-    };
     PropertyGridEditorMatrix.prototype.initializePlaceholder = function (rowObj, cellQuestion, propertyName) {
         var objType = typeof rowObj.getType === "function" && rowObj.getType();
         if (cellQuestion.getType() === "text" && !!objType) {
@@ -26606,7 +26666,6 @@ var PropertyGridEditorMatrix = /** @class */ (function (_super) {
             return;
         var q = options.cellQuestion;
         q.obj = rowObj;
-        this.initializeAcceptedTypes(obj, q);
         this.initializePlaceholder(rowObj, q, options.columnName);
         q.property = survey_core__WEBPACK_IMPORTED_MODULE_1__["Serializer"].findProperty(rowObj.getType(), options.columnName);
     };
@@ -28470,6 +28529,7 @@ var SurveyQuestionEditorDefinition = /** @class */ (function () {
                 "cellType",
                 "name",
                 "title",
+                "visible",
                 "isRequired",
                 "readOnly",
                 "isUnique",
@@ -29679,10 +29739,11 @@ var DragDropSurveyElements = /** @class */ (function (_super) {
     });
     // private isRight: boolean;
     // protected prevIsRight: boolean;
-    DragDropSurveyElements.prototype.startDragToolboxItem = function (event, draggedElementJson, toolboxItemTitle) {
+    DragDropSurveyElements.prototype.startDragToolboxItem = function (event, draggedElementJson, toolboxItemModel) {
         var preventSaveTargetNode = true;
         var draggedElement = this.createElementFromJson(draggedElementJson);
-        draggedElement.toolboxItemTitle = toolboxItemTitle;
+        draggedElement.toolboxItemTitle = toolboxItemModel.title;
+        draggedElement.toolboxItemIconName = toolboxItemModel.iconName;
         this.startDrag(event, draggedElement, null, null, preventSaveTargetNode);
     };
     DragDropSurveyElements.prototype.startDragSurveyElement = function (event, draggedElement, isElementSelected) {
@@ -29704,8 +29765,8 @@ var DragDropSurveyElements = /** @class */ (function (_super) {
     };
     DragDropSurveyElements.prototype.createDraggedElementIcon = function () {
         var span = document.createElement("span");
-        var type = this.draggedElement.getType();
-        var svgString = "<svg class=\"sv-svg-icon\" role=\"img\" style=\"width: 24px; height: 24px;\"><use xlink:href=\"#icon-" + type + "\"></use></svg>";
+        var iconName = this.draggedElement.toolboxItemIconName;
+        var svgString = "<svg class=\"sv-svg-icon\" role=\"img\" style=\"width: 24px; height: 24px;\"><use xlink:href=\"#" + iconName + "\"></use></svg>";
         span.className = "svc-dragged-element-shortcut__icon";
         span.innerHTML = svgString;
         return span;
@@ -30851,7 +30912,7 @@ var QuestionToolbox = /** @class */ (function (_super) {
             var json = _this.creator.getJSONForNewElement(itemModel.json);
             _this.dotsItem.popupModel.toggleVisibility();
             (_a = _this.creator) === null || _a === void 0 ? void 0 : _a.onDragDropItemStart();
-            _this.dragDropHelper.startDragToolboxItem(pointerDownEvent, json, itemModel.title);
+            _this.dragDropHelper.startDragToolboxItem(pointerDownEvent, json, itemModel);
         });
         this.hiddenItemsListModel.onPointerDown = function (pointerDownEvent, item) {
             if (!_this.creator.readOnly) {
@@ -30985,13 +31046,15 @@ var QuestionToolbox = /** @class */ (function (_super) {
         var name = !!options.name ? options.name : question.name;
         var title = !!options.title ? options.title : name;
         var tooltip = !!options.tooltip ? options.tooltip : title;
+        var iconName = !!options.iconName ? options.iconName : QuestionToolbox.defaultIconName;
         var item = {
             id: name,
             name: name,
             title: title,
             tooltip: tooltip,
+            className: "svc-toolbox__item svc-toolbox__item--" + iconName,
             isCopied: options.isCopied !== false,
-            iconName: !!options.iconName ? options.iconName : QuestionToolbox.defaultIconName,
+            iconName: iconName,
             json: !!options.json ? options.json : this.getQuestionJSON(question),
             category: !!options.category ? options.category : ""
         };
@@ -31361,12 +31424,14 @@ var QuestionToolbox = /** @class */ (function (_super) {
             }
             var json = this.getQuestionJSON(question);
             var title = _editorLocalization__WEBPACK_IMPORTED_MODULE_2__["editorLocalization"].getString("qt." + name);
+            var iconName = "icon-" + name;
             var item = {
                 id: name,
                 name: name,
-                iconName: "icon-" + name,
+                iconName: iconName,
                 title: title,
                 tooltip: title,
+                className: "svc-toolbox__item svc-toolbox__item--" + iconName,
                 json: json,
                 isCopied: false,
                 category: (defaultCategories[name] || "")