survey-creator-core 1.11.5 → 1.11.6

package/survey-creator-core.js

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v1.11.5
+ * SurveyJS Creator v1.11.6
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -130,7 +130,7 @@ License: MIT
 /***/ (function(module, exports, __webpack_require__) {
 
 /*!
- * surveyjs - Survey JavaScript library v1.11.5
+ * surveyjs - Survey JavaScript library v1.11.6
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -4704,9 +4704,12 @@ var SurveyElementActionContainer = /** @class */ (function (_super) {
 var SurveyElementAdornerBase = /** @class */ (function (_super) {
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(SurveyElementAdornerBase, _super);
     function SurveyElementAdornerBase(creator, surveyElement) {
+        var _a, _b, _c;
         var _this = _super.call(this) || this;
         _this.creator = creator;
         _this.surveyElement = surveyElement;
+        _this.designerStateManager = (_a = creator.getPlugin("designer")) === null || _a === void 0 ? void 0 : _a.designerStateManager;
+        (_b = _this.designerStateManager) === null || _b === void 0 ? void 0 : _b.initForElement(surveyElement);
         _this.selectedPropPageFunc = function (sender, options) {
             if (options.name === "isSelectedInDesigner") {
                 _this.onElementSelectedChanged(options.newValue);
@@ -4720,6 +4723,17 @@ var SurveyElementAdornerBase = /** @class */ (function (_super) {
         _this.actionContainer = new SurveyElementActionContainer();
         _this.actionContainer.dotsItem.iconSize = 16;
         _this.actionContainer.dotsItem.popupModel.horizontalPosition = "center";
+        _this.topActionContainer = new survey_core__WEBPACK_IMPORTED_MODULE_1__["ActionContainer"]();
+        _this.topActionContainer.sizeMode = "small";
+        _this.topActionContainer.setItems([{
+                id: "collapse",
+                iconName: new survey_core__WEBPACK_IMPORTED_MODULE_1__["ComputedUpdater"](function () { return _this.collapsed ? "icon-restore_16x16" : "icon-collapse-detail-light_16x16"; }),
+                iconSize: 16,
+                action: function () {
+                    _this.collapsed = !_this.collapsed;
+                }
+            }]);
+        _this.collapsed = !!surveyElement && ((_c = _this.designerStateManager) === null || _c === void 0 ? void 0 : _c.getElementState(surveyElement).collapsed);
         _this.setSurveyElement(surveyElement);
         _this.creator.sidebar.onPropertyChanged.add(_this.sidebarFlyoutModeChangedFunc);
         _this.setShowAddQuestionButton(true);
@@ -4816,9 +4830,8 @@ var SurveyElementAdornerBase = /** @class */ (function (_super) {
             title: this.creator.getLocString("survey.duplicate"),
             visibleIndex: 10,
             iconSize: 16,
-            action: function () {
-                _this.duplicate();
-            }
+            action: function () { return _this.duplicate(); },
+            onFocus: function (isMouse, event) { return _this.disableActionFocusing(isMouse, event); }
         }));
         items.push(new survey_core__WEBPACK_IMPORTED_MODULE_1__["Action"]({
             id: "settings",
@@ -4845,9 +4858,18 @@ var SurveyElementAdornerBase = /** @class */ (function (_super) {
             iconSize: 16,
             action: function () {
                 _this.delete();
-            }
+            },
+            onFocus: function (isMouse, event) { return _this.disableActionFocusing(isMouse, event); }
         }));
     };
+    SurveyElementAdornerBase.prototype.disableActionFocusing = function (isMouse, event) {
+        this.isDisableSelecting = isMouse;
+    };
+    SurveyElementAdornerBase.prototype.canSelectElement = function () {
+        var res = !this.isDisableSelecting;
+        this.isDisableSelecting = false;
+        return res;
+    };
     Object.defineProperty(SurveyElementAdornerBase.prototype, "allowEdit", {
         get: function () {
             return !!this.creator && !this.creator.readOnly && this.allowEditOption;
@@ -4872,6 +4894,18 @@ var SurveyElementAdornerBase = /** @class */ (function (_super) {
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
         Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: true })
     ], SurveyElementAdornerBase.prototype, "allowDragging", void 0);
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
+        Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["property"])({
+            onSet: function (val, target) {
+                target.renderedCollapsed = val;
+                if (target.designerStateManager && target.surveyElement)
+                    target.designerStateManager.getElementState(target.surveyElement).collapsed = val;
+            }
+        })
+    ], SurveyElementAdornerBase.prototype, "collapsed", void 0);
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
+        Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["property"])()
+    ], SurveyElementAdornerBase.prototype, "renderedCollapsed", void 0);
     return SurveyElementAdornerBase;
 }(survey_core__WEBPACK_IMPORTED_MODULE_1__["Base"]));
 
@@ -7032,6 +7066,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _action_container_view_model__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./action-container-view-model */ "./src/components/action-container-view-model.ts");
 /* harmony import */ var _creator_settings__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../creator-settings */ "./src/creator-settings.ts");
 /* harmony import */ var _string_editor__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./string-editor */ "./src/components/string-editor.ts");
+/* harmony import */ var _toolbox__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../toolbox */ "./src/toolbox.ts");
 
 
 
@@ -7041,6 +7076,7 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__(/*! ./question.scss */ "./src/components/question.scss");
 
 
+
 var QuestionAdornerViewModel = /** @class */ (function (_super) {
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(QuestionAdornerViewModel, _super);
     function QuestionAdornerViewModel(creator, surveyElement, templateData) {
@@ -7077,10 +7113,12 @@ var QuestionAdornerViewModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionAdornerViewModel.prototype.canSelectElement = function () {
+        return _super.prototype.canSelectElement.call(this) && this.surveyElement.isInteractiveDesignElement;
+    };
     QuestionAdornerViewModel.prototype.select = function (model, event) {
-        if (!model.surveyElement.isInteractiveDesignElement) {
+        if (!model.canSelectElement())
             return;
-        }
         var creator = model.creator;
         var selEl = model.surveyElement;
         var el = document === null || document === void 0 ? void 0 : document.activeElement;
@@ -7093,7 +7131,11 @@ var QuestionAdornerViewModel = /** @class */ (function (_super) {
         return true;
     };
     QuestionAdornerViewModel.prototype.rootCss = function () {
-        return this.surveyElement.isQuestion && !this.surveyElement.startWithNewLine ? " svc-question__adorner--start-with-new-line" : "";
+        var isStartWithNewLine = this.surveyElement.isQuestion && !this.surveyElement.startWithNewLine;
+        return new survey_core__WEBPACK_IMPORTED_MODULE_1__["CssClassBuilder"]()
+            .append("svc-question__adorner--start-with-new-line", isStartWithNewLine)
+            .append("svc-question__adorner--collapse-" + this.creator.expandCollapseButtonVisibility, true)
+            .append("svc-question__adorner--collapsed", !!this.renderedCollapsed).toString();
     };
     QuestionAdornerViewModel.prototype.css = function () {
         if (!this.surveyElement.isInteractiveDesignElement)
@@ -7342,7 +7384,7 @@ var QuestionAdornerViewModel = /** @class */ (function (_super) {
     QuestionAdornerViewModel.prototype.onPointerDown = function (pointerDownEvent) {
         this.dragOrClickHelper.onPointerDown(pointerDownEvent);
     };
-    QuestionAdornerViewModel.prototype.getConvertToTypesActions = function () {
+    QuestionAdornerViewModel.prototype.getConvertToTypes = function () {
         var _this = this;
         var availableItems = this.creator.getAvailableToolboxItems(this.element, false);
         var itemNames = [];
@@ -7353,19 +7395,36 @@ var QuestionAdornerViewModel = /** @class */ (function (_super) {
         });
         var convertClasses = _questionconverter__WEBPACK_IMPORTED_MODULE_3__["QuestionConverter"].getConvertToClasses(this.currentType, itemNames, true);
         var res = [];
-        var lastItem = null;
         convertClasses.forEach(function (className) {
             var items = _this.creator.toolbox.items.filter(function (item) { return item.name == className; });
             if (Array.isArray(items) && items.length > 0) {
                 var item = items[0];
-                var needSeparator = lastItem && item.category != lastItem.category;
-                var action = _this.creator.createIActionBarItemByClass(item.name, item.title, item.iconName, needSeparator);
-                lastItem = item;
-                res.push(action);
+                res.push(item);
             }
         });
         return res;
     };
+    QuestionAdornerViewModel.prototype.getConvertToTypesActions = function (parentAction) {
+        var _this = this;
+        var availableItems = this.getConvertToTypes();
+        var res = [];
+        var lastItem = null;
+        availableItems.forEach(function (item) {
+            var needSeparator = lastItem && item.category != lastItem.category;
+            var action = _this.creator.createIActionBarItemByClass(item, needSeparator, function (questionType, subtype) {
+                if (_this.surveyElement.getType() !== questionType) {
+                    _this.creator.convertCurrentQuestion(questionType);
+                }
+                var propertyName = _toolbox__WEBPACK_IMPORTED_MODULE_8__["QuestionToolbox"].getSubTypePropertyName(questionType);
+                if (!!propertyName && !!subtype)
+                    _this.creator.selectedElement.setPropertyValue(propertyName, subtype);
+                parentAction === null || parentAction === void 0 ? void 0 : parentAction.hidePopup();
+            });
+            lastItem = item;
+            res.push(action);
+        });
+        return res;
+    };
     Object.defineProperty(QuestionAdornerViewModel.prototype, "currentType", {
         get: function () {
             return this.surveyElement.getType();
@@ -7387,46 +7446,62 @@ var QuestionAdornerViewModel = /** @class */ (function (_super) {
             title: actionTitle,
             iconName: (_a = this.creator.toolbox.getItemByName(this.element.getType())) === null || _a === void 0 ? void 0 : _a.iconName
         };
-        var newAction = this.createDropdownModel(actionData, actions, function (listModel) {
-            var newItems = _this.getConvertToTypesActions();
-            listModel.setItems(newItems);
-            listModel.selectedItem = _this.getSelectedItem(newItems, _this.currentType);
-        }, function (item) {
-            _this.creator.convertCurrentQuestion(item.id);
+        var newAction = this.createDropdownModel({
+            actionData: actionData,
+            items: actions,
+            updateListModel: function (listModel) {
+                var newItems = _this.getConvertToTypesActions(newAction);
+                listModel.setItems(newItems);
+                listModel.selectedItem = _this.getSelectedItem(newItems, _this.currentType);
+                var propertyName = _toolbox__WEBPACK_IMPORTED_MODULE_8__["QuestionToolbox"].getSubTypePropertyName(_this.currentType);
+                newItems.forEach(function (action) {
+                    var _a;
+                    if (((_a = action.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                        var selectedSubItem = action.items.filter(function (item) { return item.id === _this.element[propertyName]; })[0];
+                        if (selectedSubItem) {
+                            var _listModel = action.popupModel.contentComponentData.model;
+                            _listModel.selectedItem = selectedSubItem;
+                        }
+                    }
+                });
+            }
         });
+        newAction.disableHide = true;
         return newAction;
     };
     QuestionAdornerViewModel.prototype.createConvertInputType = function () {
         var _this = this;
-        var prop = null;
-        if (this.surveyElement.getType() === "text")
-            prop = survey_core__WEBPACK_IMPORTED_MODULE_1__["Serializer"].findProperty("text", "inputType");
-        if (this.surveyElement.getType() === "rating")
-            prop = survey_core__WEBPACK_IMPORTED_MODULE_1__["Serializer"].findProperty("rating", "rateDisplayMode");
-        if (!prop || !Object(_utils_utils__WEBPACK_IMPORTED_MODULE_4__["isPropertyVisible"])(this.surveyElement, prop.name))
+        var questionType = this.surveyElement.getType();
+        var toolboxItem = this.creator.toolbox.items.filter(function (item) { return item.id === questionType; })[0];
+        if (!toolboxItem || !toolboxItem.items || toolboxItem.items.length < 1)
             return null;
-        var propName = prop.name;
+        var propName = _toolbox__WEBPACK_IMPORTED_MODULE_8__["QuestionToolbox"].getSubTypePropertyName(questionType);
         var questionSubType = this.surveyElement.getPropertyValue(propName);
-        var items = prop.getChoices(this.surveyElement, function (chs) { });
         var getAvailableTypes = function () {
-            var availableTypes = [];
-            items.forEach(function (item) {
-                availableTypes.push({ id: item, title: _editorLocalization__WEBPACK_IMPORTED_MODULE_2__["editorLocalization"].getPropertyValueInEditor(prop.name, item) });
+            return toolboxItem.items.map(function (item) {
+                return {
+                    id: item.id,
+                    title: item.title,
+                    action: function (item) {
+                        var newValue = _this.getUpdatedPropertyValue(propName, item.id);
+                        _this.surveyElement.setPropertyValue(propName, newValue);
+                    }
+                };
             });
-            return availableTypes;
         };
         var actionData = {
             id: "convertInputType",
             visibleIndex: 1,
-            title: _editorLocalization__WEBPACK_IMPORTED_MODULE_2__["editorLocalization"].getPropertyValueInEditor(prop.name, questionSubType),
+            title: _editorLocalization__WEBPACK_IMPORTED_MODULE_2__["editorLocalization"].getPropertyValueInEditor(propName, questionSubType),
         };
-        var newAction = this.createDropdownModel(actionData, getAvailableTypes(), function (listModel) {
-            var newItems = getAvailableTypes();
-            listModel.setItems(newItems);
-            listModel.selectedItem = _this.getSelectedItem(newItems, _this.surveyElement.getPropertyValue(propName));
-        }, function (item) {
-            var newValue = _this.getUpdatedPropertyValue(propName, item.id);
-            _this.surveyElement.setPropertyValue(propName, newValue);
+        var newAction = this.createDropdownModel({
+            actionData: actionData,
+            items: getAvailableTypes(),
+            updateListModel: function (listModel) {
+                var newItems = getAvailableTypes();
+                listModel.setItems(newItems);
+                listModel.selectedItem = _this.getSelectedItem(newItems, _this.surveyElement.getPropertyValue(propName));
+            }
         });
         newAction.disableShrink = true;
         this.surveyElement.registerFunctionOnPropertyValueChanged(propName, function () {
@@ -7445,27 +7520,26 @@ var QuestionAdornerViewModel = /** @class */ (function (_super) {
         var selectedItems = actions.filter(function (item) { return item.id === id; });
         return selectedItems.length > 0 ? selectedItems[0] : undefined;
     };
-    QuestionAdornerViewModel.prototype.createDropdownModel = function (actionData, items, updateListModel, onSelectionChanged) {
+    QuestionAdornerViewModel.prototype.createDropdownModel = function (options) {
         var newAction = Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["createDropdownActionModel"])({
-            id: actionData.id,
+            id: options.actionData.id,
             css: "sv-action--convertTo sv-action-bar-item--secondary",
-            iconName: actionData.iconName,
+            iconName: options.actionData.iconName,
             iconSize: 24,
-            title: actionData.title,
-            enabled: actionData.enabled,
-            visibleIndex: actionData.visibleIndex,
+            title: options.actionData.title,
+            enabled: options.actionData.enabled,
+            visibleIndex: options.actionData.visibleIndex,
             disableShrink: false,
             location: "start",
             action: function (newType) {
             },
         }, {
-            items: items,
-            onSelectionChanged: onSelectionChanged,
+            items: options.items,
             allowSelection: true,
             horizontalPosition: "center",
             onShow: function () {
                 var listModel = newAction.popupModel.contentComponentData.model;
-                updateListModel(listModel);
+                options.updateListModel(listModel);
             },
         });
         newAction.popupModel.displayMode = this.creator.isTouch ? "overlay" : "popup";
@@ -7525,8 +7599,7 @@ var QuestionAdornerViewModel = /** @class */ (function (_super) {
     QuestionAdornerViewModel.prototype.duplicate = function () {
         var _this = this;
         setTimeout(function () {
-            var newElement = _this.creator.fastCopyQuestion(_this.surveyElement);
-            _this.creator.selectElement(newElement);
+            _this.creator.fastCopyQuestion(_this.surveyElement, true);
         }, 1);
     };
     QuestionAdornerViewModel.prototype.addNewQuestion = function () {
@@ -8880,6 +8953,9 @@ var StringEditorViewModelBase = /** @class */ (function (_super) {
         if (this.creator) {
             this.creator.selectFromStringEditor = true;
         }
+        if (this.locString.hasHtml && this.editAsText) {
+            event.target.innerText = event.target.textContent = this.locString.calculatedText;
+        }
         event.target.parentElement.click();
         event.target.spellcheck = true;
         event.target.setAttribute("tabindex", -1);
@@ -8986,7 +9062,7 @@ var StringEditorViewModelBase = /** @class */ (function (_super) {
             clearedText = mdText;
         }
         else {
-            var txt = this.locString.hasHtml ? html : text;
+            var txt = this.locString.hasHtml && !this.editAsText ? html : text;
             if (!this.locString.allowLineBreaks)
                 txt = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_3__["clearNewLines"])(txt);
             clearedText = txt;
@@ -9294,6 +9370,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _property_grid__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../property-grid */ "./src/property-grid/index.ts");
 /* harmony import */ var _property_grid_property_grid_view_model__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../property-grid/property-grid-view-model */ "./src/property-grid/property-grid-view-model.ts");
 /* harmony import */ var _designer__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./designer */ "./src/components/tabs/designer.ts");
+/* harmony import */ var _designer_state_manager__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./designer-state-manager */ "./src/components/tabs/designer-state-manager.ts");
+
 
 
 
@@ -9323,6 +9401,13 @@ var TabDesignerPlugin = /** @class */ (function () {
             return result;
         });
         this.toolboxTab = this.creator.sidebar.addTab("toolbox", "svc-toolbox", creator);
+        this.designerStateManager = new _designer_state_manager__WEBPACK_IMPORTED_MODULE_5__["DesignerStateManager"]();
+        this.designerStateManager.initForSurvey(this.creator.survey);
+        this.creator.onSurveyInstanceCreated.add(function (s, o) {
+            if (o.reason == "designer") {
+                _this.designerStateManager.initForSurvey(o.survey);
+            }
+        });
         this.creator.onPropertyChanged.add(function (sender, options) {
             if (options.name === "toolboxLocation") {
                 if (_this.toolboxTab.visible && options.newVal !== "sidebar") {
@@ -9485,6 +9570,71 @@ var TabDesignerPlugin = /** @class */ (function () {
 
 
 
+/***/ }),
+
+/***/ "./src/components/tabs/designer-state-manager.ts":
+/*!*******************************************************!*\
+  !*** ./src/components/tabs/designer-state-manager.ts ***!
+  \*******************************************************/
+/*! exports provided: DesignerStateManager */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DesignerStateManager", function() { return DesignerStateManager; });
+var ElementState = /** @class */ (function () {
+    function ElementState() {
+        this.collapsed = false;
+    }
+    return ElementState;
+}());
+var DesignerStateManager = /** @class */ (function () {
+    function DesignerStateManager() {
+        var _this = this;
+        this.elementState = {};
+        this.pageState = {};
+        this.onQuestionAddedHandler = function (sender, opts) {
+            _this.elementState[opts.question.name] = new ElementState();
+        };
+        this.onPageAddedHandler = function (sender, opts) {
+            _this.pageState[opts.page.name] = new ElementState();
+        };
+        this.onPanelAddedHandler = function (sender, opts) {
+            _this.elementState[opts.panel.name] = new ElementState();
+        };
+    }
+    DesignerStateManager.prototype.getStateMapForElement = function (element) {
+        return (element && element.isPage) ? this.pageState : this.elementState;
+    };
+    DesignerStateManager.prototype.initForSurvey = function (survey) {
+        survey.onQuestionAdded.add(this.onQuestionAddedHandler);
+        survey.onPageAdded.add(this.onPageAddedHandler);
+        survey.onPanelAdded.add(this.onPanelAddedHandler);
+    };
+    DesignerStateManager.prototype.initForElement = function (element) {
+        if (!element)
+            return;
+        var stateMap = this.getStateMapForElement(element);
+        element.registerFunctionOnPropertyValueChanged("name", function (newName) {
+            delete stateMap[element.name];
+            stateMap[newName] = new ElementState();
+        }, "designerStateManager");
+    };
+    DesignerStateManager.prototype.getElementState = function (element) {
+        var stateMap = this.getStateMapForElement(element);
+        var name = element.name;
+        var state = stateMap[name];
+        if (state)
+            return state;
+        state = new ElementState();
+        stateMap[name] = new ElementState();
+        return state;
+    };
+    return DesignerStateManager;
+}());
+
+
+
 /***/ }),
 
 /***/ "./src/components/tabs/designer.scss":
@@ -20194,18 +20344,20 @@ __webpack_require__.r(__webpack_exports__);
 
 var ToolboxToolViewModel = /** @class */ (function (_super) {
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ToolboxToolViewModel, _super);
-    function ToolboxToolViewModel(item, creator) {
+    function ToolboxToolViewModel(item, creator, model) {
         var _this = _super.call(this) || this;
         _this.item = item;
         _this.creator = creator;
+        _this.model = model;
         _this.click = function (event) {
             if (!_this.allowAdd)
                 return;
             _this.creator.clickToolboxItem(_this.item.json);
+            _this.hidePopup();
         };
         _this.onPointerUp = function (pointerUpEvent) {
-            _this._node.classList.remove("svc-toolbox__tool--pressed");
-            _this._node = null;
+            _this.hidePopup();
+            _this.toolboxItem.isPressed = false;
             document.removeEventListener("pointerup", _this.onPointerUp);
         };
         _this.startDragToolboxItem = function (pointerDownEvent, currentTarget) {
@@ -20216,6 +20368,13 @@ var ToolboxToolViewModel = /** @class */ (function (_super) {
         _this.dragOrClickHelper = new survey_core__WEBPACK_IMPORTED_MODULE_1__["DragOrClickHelper"](_this.startDragToolboxItem);
         return _this;
     }
+    Object.defineProperty(ToolboxToolViewModel.prototype, "toolboxItem", {
+        get: function () {
+            return this.item;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(ToolboxToolViewModel.prototype, "allowAdd", {
         get: function () {
             return !this.creator.readOnly;
@@ -20223,18 +20382,28 @@ var ToolboxToolViewModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    ToolboxToolViewModel.prototype.onMouseOver = function (itemValue, mouseoverEvent) {
+        this.model.mouseOverHandler(itemValue);
+    };
+    ToolboxToolViewModel.prototype.onMouseLeave = function (itemValue, mouseoverEvent) {
+        itemValue.hidePopupDelayed(this.creator.toolbox.subItemsHideDelay);
+    };
     ToolboxToolViewModel.prototype.onPointerDown = function (pointerDownEvent) {
         var _a;
+        pointerDownEvent.stopPropagation();
         if (!this.allowAdd)
             return;
         if (this.item.id.indexOf("dotsItem-id") === 0)
             return true; //toolbox responsive popup
         this.dragOrClickHelper.onPointerDown(pointerDownEvent);
-        this._node = pointerDownEvent.currentTarget;
-        this._node.classList.add("svc-toolbox__tool--pressed");
+        this.toolboxItem.isPressed = true;
         document.addEventListener("pointerup", this.onPointerUp);
         (_a = this.creator) === null || _a === void 0 ? void 0 : _a.onDragDropItemStart();
     };
+    ToolboxToolViewModel.prototype.hidePopup = function () {
+        this.toolboxItem.hidePopup();
+        this.toolboxItem.isHovered = false;
+    };
     Object.defineProperty(ToolboxToolViewModel.prototype, "dragDropHelper", {
         get: function () {
             return this.creator.dragDropSurveyElements;
@@ -20949,6 +21118,18 @@ var SurveyCreatorModel = /** @class */ (function (_super) {
             button: "",
             shown: "svc-notifier--shown"
         });
+        /**
+         * Specifies where to add new questions when users click the "Add Question" button.
+         *
+         * Accepted values:
+         *
+         * - `true` (default)
+         * New questions are added to the end of a survey page.
+         *
+         * - `false`
+         * New questions are added after the currently selected question on the design surface.
+         */
+        _this.addNewQuestionLast = true;
         _this.onKeyDownHandler = function (event) {
             _this.findSuitableShortcuts(event).forEach(function (shortcut) {
                 if ((event.keyCode < 48 || event.keyCode == 89 || event.keyCode == 90) && isTextInput(event.target))
@@ -22552,9 +22733,14 @@ var SurveyCreatorModel = /** @class */ (function (_super) {
             }
             parent = selectedElement.parent;
             if (index < 0) {
-                index = parent.elements.indexOf(selectedElement);
-                if (index > -1)
-                    index++;
+                if (this.addNewQuestionLast) {
+                    index = parent.elements.length;
+                }
+                else {
+                    index = parent.elements.indexOf(selectedElement);
+                    if (index > -1)
+                        index++;
+                }
             }
         }
         if (panel) {
@@ -22693,11 +22879,12 @@ var SurveyCreatorModel = /** @class */ (function (_super) {
         return this.createNewElement(json);
     };
     /**
-     * Creates a copy of a specified question and inserts the copy next to this question.
+     * Creates a copy of a specified question, inserts the copy next to this question and optionally select it in the designer.
      * @param question A question to copy.
+     * @param selectNewElement Select a new element if true
      * @returns The instance of a new question.
      */
-    SurveyCreatorModel.prototype.fastCopyQuestion = function (question) {
+    SurveyCreatorModel.prototype.fastCopyQuestion = function (question, selectNewElement) {
         var newElement = this.copyElement(question);
         var index = !!question["parent"]
             ? question["parent"].elements.indexOf(question) + 1
@@ -22709,6 +22896,9 @@ var SurveyCreatorModel = /** @class */ (function (_super) {
             }
         }
         this.doClickQuestionCore(newElement, "ELEMENT_COPIED", index, question["parent"]);
+        if (selectNewElement) {
+            this.selectElement(newElement);
+        }
         return newElement;
     };
     Object.defineProperty(SurveyCreatorModel.prototype, "selectedElement", {
@@ -23178,6 +23368,7 @@ var SurveyCreatorModel = /** @class */ (function (_super) {
     };
     SurveyCreatorModel.prototype.deletePanelOrQuestion = function (obj) {
         var _this = this;
+        var changeSelection = obj === this.selectedElement;
         var parent = obj["parent"];
         var elements = parent.elements;
         var objIndex = elements.indexOf(obj);
@@ -23191,7 +23382,9 @@ var SurveyCreatorModel = /** @class */ (function (_super) {
         if (parent.isPage && (this.pageEditMode === "single" || elements.length === 0)) {
             parent = this.survey;
         }
-        this.selectElement(objIndex > -1 ? elements[objIndex] : parent);
+        if (changeSelection) {
+            this.selectElement(objIndex > -1 ? elements[objIndex] : parent);
+        }
     };
     SurveyCreatorModel.prototype.onCanShowObjectProperty = function (object, property, showMode, parentObj, parentProperty) {
         if (this.hiddenProperties[property.id])
@@ -23647,9 +23840,14 @@ var SurveyCreatorModel = /** @class */ (function (_super) {
     SurveyCreatorModel.prototype.getQuestionTypeSelectorModel = function (beforeAdd, element) {
         var _this = this;
         var panel = !!element && element.isPanel ? element : null;
+        var onSelectQuestionType = function (questionType, subtype) {
+            _this.currentAddQuestionType = questionType;
+            _this.addNewQuestionInPage(beforeAdd, panel, questionType, subtype);
+            newAction.popupModel.hide();
+        };
         var getActions = function () {
             var availableTypes = _this.getAvailableToolboxItems(element).map(function (item) {
-                return _this.createIActionBarItemByClass(item.name, item.title, item.iconName, item.needSeparator);
+                return _this.createIActionBarItemByClass(item, item.needSeparator, onSelectQuestionType);
             });
             return availableTypes;
         };
@@ -23658,10 +23856,6 @@ var SurveyCreatorModel = /** @class */ (function (_super) {
             title: this.getLocString("ed.addNewQuestion"),
         }, {
             items: getActions(),
-            onSelectionChanged: function (item) {
-                _this.currentAddQuestionType = item.id;
-                _this.addNewQuestionInPage(beforeAdd, panel);
-            },
             onShow: function () {
                 var listModel = newAction.popupModel.contentComponentData.model;
                 listModel.setItems(getActions());
@@ -23682,9 +23876,10 @@ var SurveyCreatorModel = /** @class */ (function (_super) {
         this.onGetPageActions.fire(this, options);
         return options.actions;
     };
-    SurveyCreatorModel.prototype.addNewQuestionInPage = function (beforeAdd, panel, type) {
+    SurveyCreatorModel.prototype.addNewQuestionInPage = function (beforeAdd, panel, type, subtype) {
         if (panel === void 0) { panel = null; }
         if (type === void 0) { type = null; }
+        if (subtype === void 0) { subtype = null; }
         if (!type)
             type = this.currentAddQuestionType;
         if (!type)
@@ -23696,15 +23891,34 @@ var SurveyCreatorModel = /** @class */ (function (_super) {
             json = toolboxItem.json;
         }
         var newElement = this.createNewElement(json);
+        var propertyName = _toolbox__WEBPACK_IMPORTED_MODULE_7__["QuestionToolbox"].getSubTypePropertyName(type);
+        if (!!propertyName && !!subtype)
+            newElement.setPropertyValue(propertyName, subtype);
         this.clickToolboxItem(newElement, panel, "ADDED_FROM_PAGEBUTTON");
     };
-    SurveyCreatorModel.prototype.createIActionBarItemByClass = function (className, title, iconName, needSeparator) {
+    SurveyCreatorModel.prototype.createIActionBarItemByClass = function (item, needSeparator, onSelectQuestionType) {
         var action = new survey_core__WEBPACK_IMPORTED_MODULE_1__["Action"]({
-            title: title,
-            id: className,
-            iconName: iconName,
+            title: item.title,
+            id: item.name,
+            iconName: item.iconName,
+            visible: item.visible,
+            enabled: item.enabled,
+            needSeparator: needSeparator
         });
-        action.needSeparator = needSeparator;
+        action.action = function () {
+            onSelectQuestionType(item.typeName);
+        };
+        if (!!item.items && item.items.length > 0) {
+            var innerItems = item.items.map(function (i) { return new survey_core__WEBPACK_IMPORTED_MODULE_1__["Action"]({
+                id: i.id,
+                title: i.title,
+                action: function () {
+                    action.hidePopup();
+                    onSelectQuestionType(item.typeName, i.id);
+                }
+            }); });
+            action.setSubItems({ items: innerItems });
+        }
         return action;
     };
     SurveyCreatorModel.prototype.onElementMenuItemsChanged = function (element, items) {
@@ -23947,6 +24161,9 @@ var SurveyCreatorModel = /** @class */ (function (_super) {
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
         Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: "right" })
     ], SurveyCreatorModel.prototype, "sidebarLocation", void 0);
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
+        Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: "never" })
+    ], SurveyCreatorModel.prototype, "expandCollapseButtonVisibility", void 0);
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
         Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["property"])({
             defaultValue: false,
@@ -26441,7 +26658,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_78__ = __webpack_require__(/*! survey-core */ "survey-core");
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_78___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_78__);
 var Version;
-Version = "" + "1.11.5";
+Version = "" + "1.11.6";
 //should be loaded before other styles for easier override 
 __webpack_require__(/*! ../utils/context-button.scss */ "./src/utils/context-button.scss");
 
@@ -26538,7 +26755,7 @@ __webpack_require__(/*! ../utils/design.scss */ "./src/utils/design.scss");
 __webpack_require__(/*! ../utils/layout.scss */ "./src/utils/layout.scss");
 
 survey_core__WEBPACK_IMPORTED_MODULE_78__["settings"].supportCreatorV2 = true;
-Object(survey_core__WEBPACK_IMPORTED_MODULE_78__["checkLibraryVersion"])("" + "1.11.5", "survey-creator-core");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_78__["checkLibraryVersion"])("" + "1.11.6", "survey-creator-core");
 
 
 /***/ }),
@@ -26796,6 +27013,7 @@ var map = {
 	"./collapse-detail-light_16x16.svg": "./src/images/collapse-detail-light_16x16.svg",
 	"./collapse-detail_16x16.svg": "./src/images/collapse-detail_16x16.svg",
 	"./collapse-panel.svg": "./src/images/collapse-panel.svg",
+	"./collapse-v_16x16.svg": "./src/images/collapse-v_16x16.svg",
 	"./collapse_16x16.svg": "./src/images/collapse_16x16.svg",
 	"./color-picker.svg": "./src/images/color-picker.svg",
 	"./comment.svg": "./src/images/comment.svg",
@@ -26823,6 +27041,7 @@ var map = {
 	"./expand-detail-light_16x16.svg": "./src/images/expand-detail-light_16x16.svg",
 	"./expand-detail_16x16.svg": "./src/images/expand-detail_16x16.svg",
 	"./expand-panel.svg": "./src/images/expand-panel.svg",
+	"./expand-v_16x16.svg": "./src/images/expand-v_16x16.svg",
 	"./expand_16x16.svg": "./src/images/expand_16x16.svg",
 	"./export.svg": "./src/images/export.svg",
 	"./expression.svg": "./src/images/expression.svg",
@@ -26856,6 +27075,7 @@ var map = {
 	"./remove_16x16.svg": "./src/images/remove_16x16.svg",
 	"./required.svg": "./src/images/required.svg",
 	"./reset.svg": "./src/images/reset.svg",
+	"./restore_16x16.svg": "./src/images/restore_16x16.svg",
 	"./save.svg": "./src/images/save.svg",
 	"./select-page.svg": "./src/images/select-page.svg",
 	"./settings.svg": "./src/images/settings.svg",
@@ -27125,6 +27345,17 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 
 /***/ }),
 
+/***/ "./src/images/collapse-v_16x16.svg":
+/*!*****************************************!*\
+  !*** ./src/images/collapse-v_16x16.svg ***!
+  \*****************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+module.exports = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"Collapse V 16x16\"><path id=\"Vector\" d=\"M11.71 12.29C12.1 12.68 12.1 13.31 11.71 13.7C11.51 13.9 11.26 13.99 11 13.99C10.74 13.99 10.49 13.89 10.29 13.7L9.00002 12.41V15C9.00002 15.55 8.55002 16 8.00002 16C7.45002 16 7.00002 15.55 7.00002 15V12.41L5.71002 13.7C5.32002 14.09 4.69002 14.09 4.30002 13.7C3.91002 13.31 3.91002 12.68 4.30002 12.29L7.30002 9.29C7.69002 8.9 8.32002 8.9 8.71002 9.29L11.71 12.29ZM7.29002 6.71C7.49002 6.91 7.74002 7 8.00002 7C8.26002 7 8.51002 6.9 8.71002 6.71L11.71 3.71C12.1 3.32 12.1 2.69 11.71 2.3C11.32 1.91 10.69 1.91 10.3 2.3L9.01002 3.59V1C9.01002 0.45 8.56002 0 8.01002 0C7.46002 0 7.01002 0.45 7.01002 1V3.59L5.72002 2.3C5.33002 1.91 4.70002 1.91 4.31002 2.3C3.92002 2.69 3.90002 3.32 4.29002 3.71L7.29002 6.71Z\"></path></g></svg>"
+
+/***/ }),
+
 /***/ "./src/images/collapse_16x16.svg":
 /*!***************************************!*\
   !*** ./src/images/collapse_16x16.svg ***!
@@ -27422,6 +27653,17 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 
 /***/ }),
 
+/***/ "./src/images/expand-v_16x16.svg":
+/*!***************************************!*\
+  !*** ./src/images/expand-v_16x16.svg ***!
+  \***************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+module.exports = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"Expand V 16x16\" clip-path=\"url(#clip0_2625_3196)\"><path id=\"Vector\" d=\"M4.29006 4.71006C3.90006 4.32006 3.90006 3.69006 4.29006 3.30006L7.29006 0.290059C7.68006 -0.0999414 8.31006 -0.0999414 8.70006 0.290059L11.7001 3.29006C12.0901 3.68006 12.0901 4.31006 11.7001 4.70006C11.5001 4.90006 11.2501 4.99006 10.9901 4.99006C10.7301 4.99006 10.4801 4.89006 10.2801 4.70006L8.99006 3.41006V6.00006C8.99006 6.55006 8.54006 7.00006 7.99006 7.00006C7.44006 7.00006 6.99006 6.55006 6.99006 6.00006V3.41006L5.70006 4.70006C5.31006 5.09006 4.68006 5.09006 4.29006 4.70006V4.71006ZM10.2901 11.2901L9.00006 12.5801V9.99006C9.00006 9.44006 8.55006 8.99006 8.00006 8.99006C7.45006 8.99006 7.00006 9.44006 7.00006 9.99006V12.5801L5.71006 11.2901C5.32006 10.9001 4.69006 10.9001 4.30006 11.2901C3.91006 11.6801 3.91006 12.3101 4.30006 12.7001L7.30006 15.7001C7.50006 15.9001 7.75006 15.9901 8.01006 15.9901C8.27006 15.9901 8.52006 15.8901 8.72006 15.7001L11.7201 12.7001C12.1101 12.3101 12.1101 11.6801 11.7201 11.2901C11.3301 10.9001 10.7001 10.9001 10.3101 11.2901H10.2901Z\"></path></g><defs><clipPath id=\"clip0_2625_3196\"><rect width=\"16\" height=\"16\" fill=\"white\"></rect></clipPath></defs></svg>"
+
+/***/ }),
+
 /***/ "./src/images/expand_16x16.svg":
 /*!*************************************!*\
   !*** ./src/images/expand_16x16.svg ***!
@@ -27785,6 +28027,17 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 
 /***/ }),
 
+/***/ "./src/images/restore_16x16.svg":
+/*!**************************************!*\
+  !*** ./src/images/restore_16x16.svg ***!
+  \**************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+module.exports = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M12 13H4C2.9 13 2 12.1 2 11V5C2 3.9 2.9 3 4 3H12C13.1 3 14 3.9 14 5V11C14 12.1 13.1 13 12 13ZM4 5V11H12V5H4Z\"></path></svg>"
+
+/***/ }),
+
 /***/ "./src/images/save.svg":
 /*!*****************************!*\
   !*** ./src/images/save.svg ***!
@@ -37666,12 +37919,15 @@ var defaultProperties = {
             { name: "totalDisplayStyle", tab: "totals" },
             { name: "totalCurrency", tab: "totals" },
             { name: "totalFormat", tab: "totals" },
-            { name: "totalExpression", tab: "totals" }
+            { name: "totalExpression", tab: "totals" },
+            { name: "validators", tab: "validation" },
+            { name: "requiredErrorText", tab: "validation" }
         ],
         tabs: [
             { name: "general", index: 5 },
             { name: "logic", index: 20 },
-            { name: "totals", index: 40 }
+            { name: "totals", index: 40 },
+            { name: "validation", index: 60 }
         ]
     },
     "matrixdropdowncolumn@checkbox": {
@@ -37682,6 +37938,7 @@ var defaultProperties = {
             { name: "choiceTextsFromQuestion", tab: "choices" },
             { name: "showOtherItem", tab: "choices" },
             { name: "otherText", tab: "choices" },
+            { name: "otherPlaceholder", tab: "choices" },
             { name: "choicesOrder", tab: "choices" },
             { name: "colCount", tab: "choices" },
             { name: "showSelectAllItem", tab: "choices" },
@@ -37710,6 +37967,7 @@ var defaultProperties = {
             { name: "choiceTextsFromQuestion", tab: "choices" },
             { name: "showOtherItem", tab: "choices" },
             { name: "otherText", tab: "choices" },
+            { name: "otherPlaceholder", tab: "choices" },
             { name: "choicesOrder", tab: "choices" },
             { name: "colCount", tab: "choices" },
             { name: "showNoneItem", tab: "choices" },
@@ -37734,6 +37992,7 @@ var defaultProperties = {
             { name: "choiceTextsFromQuestion", tab: "choices" },
             { name: "showOtherItem", tab: "choices" },
             { name: "otherText", tab: "choices" },
+            { name: "otherPlaceholder", tab: "choices" },
             { name: "choicesOrder", tab: "choices" },
             { name: "optionsCaption", tab: "choices" },
             { name: "showNoneItem", tab: "choices" },
@@ -37761,6 +38020,7 @@ var defaultProperties = {
             { name: "choiceTextsFromQuestion", tab: "choices" },
             { name: "showOtherItem", tab: "choices" },
             { name: "otherText", tab: "choices" },
+            { name: "otherPlaceholder", tab: "choices" },
             { name: "choicesOrder", tab: "choices" },
             { name: "optionsCaption", tab: "choices" },
             { name: "showNoneItem", tab: "choices" },
@@ -39027,21 +39287,25 @@ var DragDropSurveyElements = /** @class */ (function (_super) {
         var textSpan = document.createElement("span");
         textSpan.className = "svc-dragged-element-shortcut__text";
         textSpan.innerText = text;
-        draggedElementShortcut.appendChild(this.createDraggedElementIcon());
+        if (this.draggedElement.toolboxItemIconName) {
+            draggedElementShortcut.appendChild(this.createDraggedElementIcon());
+        }
         draggedElementShortcut.appendChild(textSpan);
         draggedElementShortcut.className = this.getDraggedElementClass();
         return draggedElementShortcut;
     };
     DragDropSurveyElements.prototype.createDraggedElementIcon = function () {
         var span = document.createElement("span");
+        span.className = "svc-dragged-element-shortcut__icon";
         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;
     };
     DragDropSurveyElements.prototype.getDraggedElementClass = function () {
         var result = "svc-dragged-element-shortcut";
+        if (!!this.draggedElement.toolboxItemIconName)
+            result += " svc-dragged-element-shortcut--has-icon";
         if (this.isDraggedElementSelected)
             result += " svc-dragged-element-shortcut--selected";
         return result;
@@ -39195,7 +39459,7 @@ var DragDropSurveyElements = /** @class */ (function (_super) {
             target: dropTarget,
             insertAfter: undefined,
             insertBefore: undefined,
-            allowMultipleElementsInRow: true
+            allowDropNextToAnother: true
         };
         if (dragOverLocation === survey_core__WEBPACK_IMPORTED_MODULE_1__["DragTypeOverMeEnum"].Bottom || dragOverLocation === survey_core__WEBPACK_IMPORTED_MODULE_1__["DragTypeOverMeEnum"].Right) {
             allowOptions.insertAfter = dropTarget;
@@ -39204,7 +39468,7 @@ var DragDropSurveyElements = /** @class */ (function (_super) {
             allowOptions.insertBefore = dropTarget;
         }
         this.survey.onDragDropAllow.fire(this.survey, allowOptions);
-        if (!allowOptions.allowMultipleElementsInRow) {
+        if (!allowOptions.allowDropNextToAnother) {
             if (dragOverLocation === survey_core__WEBPACK_IMPORTED_MODULE_1__["DragTypeOverMeEnum"].Left) {
                 this.dragOverLocation = survey_core__WEBPACK_IMPORTED_MODULE_1__["DragTypeOverMeEnum"].Top;
             }
@@ -39623,10 +39887,18 @@ var SurveyHelper = /** @class */ (function () {
         delete json["minWidth"];
         delete json["maxWidth"];
     };
+    SurveyHelper.deleteRandomProperties = function (json) {
+        ["choicesOrder", "rowsOrder"].forEach(function (prop) {
+            if (json[prop] === "random") {
+                delete json[prop];
+            }
+        });
+    };
     SurveyHelper.updateQuestionJson = function (questionJson) {
         questionJson.storeOthersAsComment = false;
         delete questionJson.valuePropertyName;
         SurveyHelper.deleteConditionProperties(questionJson);
+        SurveyHelper.deleteRandomProperties(questionJson);
         SurveyHelper.deleteConditionPropertiesFromArray(questionJson.choices);
         SurveyHelper.deleteConditionPropertiesFromArray(questionJson.rows);
         SurveyHelper.deleteConditionPropertiesFromArray(questionJson.columns);
@@ -40251,6 +40523,19 @@ var QuestionToolboxItem = /** @class */ (function (_super) {
         if (!_this.id) {
             _this.id = _this.name;
         }
+        var originalCss = _this.css;
+        _this.css = new survey_core__WEBPACK_IMPORTED_MODULE_1__["ComputedUpdater"](function () {
+            return new survey_core__WEBPACK_IMPORTED_MODULE_1__["CssClassBuilder"]()
+                .append("svc-toolbox__tool")
+                .append("svc-toolbox__tool--action")
+                .append(originalCss)
+                .append("svc-toolbox__tool--hovered", _this.isHovered)
+                .append("svc-toolbox__tool--pressed", _this.isPressed)
+                .append("svc-toolbox__tool--has-icon", !!_this.iconName)
+                .append("svc-toolbox__tool--disabled", _this.enabled === false)
+                .append("sv-action--hidden", !_this.isVisible)
+                .toString();
+        });
         return _this;
     }
     QuestionToolboxItem.prototype.toJSON = function () {
@@ -40273,6 +40558,9 @@ var QuestionToolboxItem = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionToolboxItem.prototype.getArea = function (target) {
+        return target.closest("#scrollableDiv-designer");
+    };
     QuestionToolboxItem.prototype.hasText = function (text) {
         if (!text)
             return;
@@ -40314,7 +40602,7 @@ var QuestionToolbox = /** @class */ (function (_super) {
         _this.searchManager.toolbox = _this;
         _this.searchItem = new survey_core__WEBPACK_IMPORTED_MODULE_1__["Action"]({
             id: "searchItem-id",
-            css: "svc-toolbox__search-button",
+            css: "svc-toolbox__tool svc-toolbox__search-button",
             innerCss: "sv-dots__item",
             iconName: "icon-search",
             component: "sv-action-bar-item",
@@ -40331,7 +40619,7 @@ var QuestionToolbox = /** @class */ (function (_super) {
     }
     Object.defineProperty(QuestionToolbox.prototype, "itemSelector", {
         get: function () {
-            return ".svc-toolbox__tool:not(.svc-toolbox__search-button):not(.sv-dots)";
+            return ".svc-toolbox__category>.svc-toolbox__tool--action";
         },
         enumerable: false,
         configurable: true
@@ -40348,6 +40636,14 @@ var QuestionToolbox = /** @class */ (function (_super) {
             return undefined;
         return _creator_settings__WEBPACK_IMPORTED_MODULE_3__["settings"].toolbox.defaultJSON[questionType];
     };
+    QuestionToolbox.getSubTypePropertyName = function (questionType) {
+        var propertyName = "";
+        if (questionType === "text")
+            propertyName = "inputType";
+        if (questionType === "rating")
+            propertyName = "rateType";
+        return propertyName;
+    };
     Object.defineProperty(QuestionToolbox.prototype, "orderedQuestions", {
         /**
          * Modify this array to change the toolbox items order.
@@ -40388,6 +40684,14 @@ var QuestionToolbox = /** @class */ (function (_super) {
     };
     QuestionToolbox.prototype.initDotsItem = function () {
         var _this = this;
+        var originalCss = this.dotsItem.css;
+        this.dotsItem.css = new survey_core__WEBPACK_IMPORTED_MODULE_1__["ComputedUpdater"](function () {
+            return new survey_core__WEBPACK_IMPORTED_MODULE_1__["CssClassBuilder"]()
+                .append("svc-toolbox__tool")
+                .append(originalCss)
+                .append("sv-action--hidden", !_this.dotsItem.isVisible)
+                .toString();
+        });
         this.dotsItem.popupModel.horizontalPosition = "right";
         this.dotsItem.popupModel.verticalPosition = "top";
         this.dragOrClickHelper = new survey_core__WEBPACK_IMPORTED_MODULE_1__["DragOrClickHelper"](function (pointerDownEvent, currentTarget, itemModel) {
@@ -40592,7 +40896,7 @@ var QuestionToolbox = /** @class */ (function (_super) {
             name: name,
             title: title,
             tooltip: tooltip,
-            className: "svc-toolbox__item svc-toolbox__item--" + iconName,
+            className: this.getItemClassNames(iconName),
             isCopied: options.isCopied !== false,
             iconName: iconName,
             json: !!options.json ? options.json : this.getQuestionJSON(question),
@@ -40617,9 +40921,44 @@ var QuestionToolbox = /** @class */ (function (_super) {
         }
         else {
             item.iconName = item.iconName ? item.iconName : QuestionToolbox.defaultIconName;
-            return new QuestionToolboxItem(item);
+            var newItem = new QuestionToolboxItem(item);
+            this.addSubTypes(newItem);
+            return newItem;
         }
     };
+    QuestionToolbox.prototype.addSubTypes = function (parentItem) {
+        var _this = this;
+        var property = null;
+        var propName = QuestionToolbox.getSubTypePropertyName(parentItem.id);
+        if (propName)
+            property = survey_core__WEBPACK_IMPORTED_MODULE_1__["Serializer"].findProperty(parentItem.id, propName);
+        if (!property || !property.visible)
+            return;
+        var newItems = property.choices.map(function (ch) {
+            var newJson = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({}, parentItem.json);
+            newJson[propName] = ch;
+            var innerItem = new QuestionToolboxItem({
+                id: ch,
+                name: ch,
+                title: _editorLocalization__WEBPACK_IMPORTED_MODULE_2__["editorLocalization"].getPropertyValueInEditor(propName, ch),
+                className: _this.getItemClassNames() + " svc-toolbox__item-subtype",
+                json: newJson,
+                iconName: null,
+                category: null,
+                isCopied: false,
+                component: "svc-toolbox-item"
+            });
+            return innerItem;
+        });
+        parentItem.setSubItems({ items: newItems });
+        parentItem.component = "svc-toolbox-item-group";
+        parentItem.popupModel.cssClass += " toolbox-subtypes";
+        parentItem.popupModel.isFocusedContainer = false;
+        var popup = parentItem.popupModel;
+        popup.contentComponentName = "svc-toolbox-list";
+        popup.contentComponentData["toolbox"] = this;
+        popup.isFocusedContent = false;
+    };
     QuestionToolbox.prototype.addItem = function (item, index) {
         this.correctItem(item);
         var action = this.getActionByItem(item);
@@ -41072,7 +41411,7 @@ var QuestionToolbox = /** @class */ (function (_super) {
                 iconName: iconName,
                 title: title,
                 tooltip: title,
-                className: "svc-toolbox__item svc-toolbox__item--" + iconName,
+                className: this.getItemClassNames(iconName),
                 json: json,
                 isCopied: false,
                 category: (defaultCategories[name_1] || "")
@@ -41110,6 +41449,13 @@ var QuestionToolbox = /** @class */ (function (_super) {
         var items = instanceOwner.Instance["items"];
         return !!items ? items : [];
     };
+    QuestionToolbox.prototype.getItemClassNames = function (iconName) {
+        return new survey_core__WEBPACK_IMPORTED_MODULE_1__["CssClassBuilder"]()
+            .append("svc-toolbox__item")
+            .append("svc-toolbox__item--has-icon", !!iconName)
+            .append("svc-toolbox__item--" + iconName, !!iconName)
+            .toString();
+    };
     QuestionToolbox.prototype.addItemFromJSON = function (json) {
         if (json.showInToolbox === false)
             return;
@@ -41133,7 +41479,7 @@ var QuestionToolbox = /** @class */ (function (_super) {
             iconName: iconName,
             title: title,
             tooltip: title,
-            className: "svc-toolbox__item svc-toolbox__item--" + iconName,
+            className: this.getItemClassNames(iconName),
             json: elementJson,
             isCopied: false,
             category: category
@@ -41187,6 +41533,14 @@ var QuestionToolbox = /** @class */ (function (_super) {
         }
         return questions;
     };
+    QuestionToolbox.prototype.hideAllInnerPopups = function () {
+        this.actions.forEach(function (action) {
+            action.hidePopup();
+        });
+    };
+    QuestionToolbox.prototype.onScroll = function (model, event) {
+        this.hideAllInnerPopups();
+    };
     QuestionToolbox.MINELEMENTCOUNT = 10;
     QuestionToolbox.defaultIconName = "icon-default";
     QuestionToolbox.defaultCategories = {