survey-creator-core 1.12.3 → 1.12.4

package/survey-creator-core.js

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v1.12.3
+ * SurveyJS Creator v1.12.4
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -1828,6 +1828,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 var SurveyElementActionContainer = /** @class */ (function (_super) {
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SurveyElementActionContainer, _super);
     function SurveyElementActionContainer() {
@@ -1909,6 +1910,9 @@ var SurveyElementAdornerBase = /** @class */ (function (_super) {
         _this = _super.call(this) || this;
         _this.creator = creator;
         _this.surveyElement = surveyElement;
+        _this.animationCollapsed = new survey_core__WEBPACK_IMPORTED_MODULE_1__.AnimationBoolean(_this.getExpandCollapseAnimationOptions(), function (val) {
+            _this._renderedCollapsed = !val;
+        }, function () { return !_this.renderedCollapsed; });
         _this.draggedIn = false;
         _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);
@@ -1939,12 +1943,7 @@ var SurveyElementAdornerBase = /** @class */ (function (_super) {
         _this.creator.sidebar.onPropertyChanged.add(_this.sidebarFlyoutModeChangedFunc);
         _this.setShowAddQuestionButton(true);
         _this.expandCollapseAction.visible = _this.allowExpandCollapse;
-        _this.creator.onSurfaceToolbarActionExecuted.add(function (_, options) {
-            if (options.action.id == "collapseAll")
-                _this.collapsed = true;
-            if (options.action.id == "expandAll")
-                _this.collapsed = false;
-        });
+        _this.creator.expandCollapseManager.add(_this);
         return _this;
     }
     Object.defineProperty(SurveyElementAdornerBase.prototype, "dragInsideCollapsedContainer", {
@@ -1954,6 +1953,101 @@ var SurveyElementAdornerBase = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    SurveyElementAdornerBase.prototype.getAnimatedElement = function () {
+        return null;
+    };
+    SurveyElementAdornerBase.prototype.getInnerAnimatedElements = function () {
+        return [];
+    };
+    SurveyElementAdornerBase.prototype.getCollapsingCssClassName = function () {
+        return "svc-question--leave";
+    };
+    SurveyElementAdornerBase.prototype.getExpandingCssClassName = function () {
+        return "svc-question--enter";
+    };
+    SurveyElementAdornerBase.prototype.hover = function (e, element) {
+        var _this = this;
+        var processedFlagName = "__svc_question_processed";
+        if (!e[processedFlagName] && e.type === "mouseover") {
+            if (!this.hoverTimeout) {
+                this.hoverTimeout = setTimeout(function () {
+                    _this.isHovered = true;
+                    _this.hoverTimeout = undefined;
+                }, this.creator.pageHoverDelay);
+            }
+            e[processedFlagName] = true;
+        }
+        else {
+            clearTimeout(this.hoverTimeout);
+            this.hoverTimeout = undefined;
+            this.isHovered = false;
+        }
+    };
+    SurveyElementAdornerBase.prototype.getExpandCollapseAnimationOptions = function () {
+        var _this = this;
+        var beforeRunAnimation = function (el, animatingClassName) {
+            (0,survey_core__WEBPACK_IMPORTED_MODULE_1__.prepareElementForVerticalAnimation)(el);
+            var innerAnimatedElements = _this.getInnerAnimatedElements();
+            innerAnimatedElements.forEach(function (elem) {
+                (0,survey_core__WEBPACK_IMPORTED_MODULE_1__.prepareElementForVerticalAnimation)(elem);
+            });
+            innerAnimatedElements.forEach(function (elem) {
+                elem.classList.add(animatingClassName);
+            });
+        };
+        var afterRunAnimation = function (el, animatingClassName) {
+            _this.expandCollapseAnimationRunning = false;
+            (0,survey_core__WEBPACK_IMPORTED_MODULE_1__.cleanHtmlElementAfterAnimation)(el);
+            var innerAnimatedElements = _this.getInnerAnimatedElements();
+            innerAnimatedElements.forEach(function (elem) {
+                (0,survey_core__WEBPACK_IMPORTED_MODULE_1__.cleanHtmlElementAfterAnimation)(elem);
+            });
+            innerAnimatedElements.forEach(function (elem) {
+                elem.classList.remove(animatingClassName);
+            });
+        };
+        return {
+            getRerenderEvent: function () { return _this.onElementRerendered; },
+            getEnterOptions: function () {
+                var className = _this.getExpandingCssClassName();
+                return {
+                    cssClass: className,
+                    onBeforeRunAnimation: function (el) {
+                        beforeRunAnimation(el, className);
+                    },
+                    onAfterRunAnimation: function (el) {
+                        afterRunAnimation(el, className);
+                    },
+                };
+            },
+            getLeaveOptions: function () {
+                var className = _this.getCollapsingCssClassName();
+                return {
+                    cssClass: className,
+                    onBeforeRunAnimation: function (el) {
+                        beforeRunAnimation(el, className);
+                    },
+                    onAfterRunAnimation: function (el) {
+                        afterRunAnimation(el, className);
+                    },
+                };
+            },
+            getAnimatedElement: function () { return _this.getAnimatedElement(); },
+            isAnimationEnabled: function () { return _this.animationAllowed; }
+        };
+    };
+    Object.defineProperty(SurveyElementAdornerBase.prototype, "renderedCollapsed", {
+        get: function () {
+            return !!this._renderedCollapsed;
+        },
+        set: function (val) {
+            if (this.animationAllowed)
+                this.expandCollapseAnimationRunning = true;
+            this.animationCollapsed.sync(!val);
+        },
+        enumerable: false,
+        configurable: true
+    });
     SurveyElementAdornerBase.prototype.createActionContainer = function () {
         var actionContainer = new SurveyElementActionContainer();
         actionContainer.dotsItem.iconSize = 16;
@@ -2024,7 +2118,9 @@ var SurveyElementAdornerBase = /** @class */ (function (_super) {
     };
     SurveyElementAdornerBase.prototype.dispose = function () {
         _super.prototype.dispose.call(this);
+        this.rootElement = undefined;
         this.detachElement(this.surveyElement);
+        this.creator.expandCollapseManager.remove(this);
         if (!this.actionContainer.isDisposed) {
             this.actionContainer.dispose();
         }
@@ -2042,9 +2138,12 @@ var SurveyElementAdornerBase = /** @class */ (function (_super) {
             return;
         this.updateElementAllowOptions(this.creator.getElementAllowOperations(this.surveyElement), this.isOperationsAllow());
     };
+    SurveyElementAdornerBase.prototype.getAllowExpandCollapse = function (options) {
+        return this.creator.expandCollapseButtonVisibility != "never" && (options.allowExpandCollapse == undefined || !!options.allowExpandCollapse);
+    };
     SurveyElementAdornerBase.prototype.updateElementAllowOptions = function (options, operationsAllow) {
         this.allowDragging = operationsAllow && options.allowDragging;
-        this.allowExpandCollapse = this.creator.expandCollapseButtonVisibility != "never" && (options.allowExpandCollapse == undefined || !!options.allowExpandCollapse);
+        this.allowExpandCollapse = this.getAllowExpandCollapse(options);
         this.allowEditOption = (options.allowEdit == undefined || !!options.allowEdit);
         this.updateActionVisibility("delete", operationsAllow && options.allowDelete);
         this.updateActionVisibility("duplicate", operationsAllow && options.allowCopy);
@@ -2146,9 +2245,15 @@ var SurveyElementAdornerBase = /** @class */ (function (_super) {
     SurveyElementAdornerBase.prototype.delete = function () {
         this.creator.deleteElement(this.surveyElement);
     };
+    SurveyElementAdornerBase.prototype.getCss = function () {
+        return new survey_core__WEBPACK_IMPORTED_MODULE_1__.CssClassBuilder().append("svc-hovered svc-hovered-ready", this.isHovered).toString();
+    };
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
         (0,survey_core__WEBPACK_IMPORTED_MODULE_1__.property)({ defaultValue: true })
     ], SurveyElementAdornerBase.prototype, "allowDragging", void 0);
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
+        (0,survey_core__WEBPACK_IMPORTED_MODULE_1__.property)({ defaultValue: false })
+    ], SurveyElementAdornerBase.prototype, "expandCollapseAnimationRunning", void 0);
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
         (0,survey_core__WEBPACK_IMPORTED_MODULE_1__.property)({ defaultValue: true })
     ], SurveyElementAdornerBase.prototype, "allowExpandCollapse", void 0);
@@ -2168,7 +2273,13 @@ var SurveyElementAdornerBase = /** @class */ (function (_super) {
     ], SurveyElementAdornerBase.prototype, "collapsed", void 0);
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
         (0,survey_core__WEBPACK_IMPORTED_MODULE_1__.property)()
-    ], SurveyElementAdornerBase.prototype, "renderedCollapsed", void 0);
+    ], SurveyElementAdornerBase.prototype, "_renderedCollapsed", void 0);
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
+        (0,survey_core__WEBPACK_IMPORTED_MODULE_1__.property)()
+    ], SurveyElementAdornerBase.prototype, "isAnimationRunningCollapsed", void 0);
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
+        (0,survey_core__WEBPACK_IMPORTED_MODULE_1__.property)({ defaultValue: false })
+    ], SurveyElementAdornerBase.prototype, "isHovered", void 0);
     return SurveyElementAdornerBase;
 }(survey_core__WEBPACK_IMPORTED_MODULE_1__.Base));
 
@@ -3477,11 +3588,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-core */ "survey-core");
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _action_container_view_model__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./action-container-view-model */ "./src/components/action-container-view-model.ts");
-/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils/utils */ "./src/utils/utils.ts");
-/* harmony import */ var _editorLocalization__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../editorLocalization */ "./src/editorLocalization.ts");
-/* harmony import */ var _survey_helper__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../survey-helper */ "./src/survey-helper.ts");
-/* harmony import */ var _creator_settings__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../creator-settings */ "./src/creator-settings.ts");
-
+/* harmony import */ var _editorLocalization__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../editorLocalization */ "./src/editorLocalization.ts");
+/* harmony import */ var _survey_helper__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../survey-helper */ "./src/survey-helper.ts");
+/* harmony import */ var _creator_settings__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../creator-settings */ "./src/creator-settings.ts");
 
 
 
@@ -3499,7 +3608,7 @@ var PageAdorner = /** @class */ (function (_super) {
             if (_this.isGhost) {
                 var addedPage = !!_this.creator.addPage(currentPage, selectCurrentPage, function () {
                     currentPage.unRegisterFunctionOnPropertiesValueChanged(["title", "description"], "add_ghost");
-                    currentPage.name = _survey_helper__WEBPACK_IMPORTED_MODULE_5__.SurveyHelper.getNewPageName(_this.creator.survey.pages);
+                    currentPage.name = _survey_helper__WEBPACK_IMPORTED_MODULE_4__.SurveyHelper.getNewPageName(_this.creator.survey.pages);
                     return true;
                 });
                 if (addedPage) {
@@ -3514,7 +3623,7 @@ var PageAdorner = /** @class */ (function (_super) {
             _this.creator.addNewQuestionInPage(function (type) {
                 _this.addGhostPage(false);
                 _this.creator.survey.currentPage = _this.page;
-            }, null, type || _this.currentAddQuestionType || _creator_settings__WEBPACK_IMPORTED_MODULE_6__.settings.designer.defaultAddQuestionType);
+            }, null, type || _this.currentAddQuestionType || _creator_settings__WEBPACK_IMPORTED_MODULE_5__.settings.designer.defaultAddQuestionType);
         };
         _this.actionContainer.sizeMode = "small";
         if (_this.isGhost)
@@ -3546,6 +3655,9 @@ var PageAdorner = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    PageAdorner.prototype.getAllowExpandCollapse = function (options) {
+        return !this.isGhost && _super.prototype.getAllowExpandCollapse.call(this, options);
+    };
     PageAdorner.prototype.attachElement = function (surveyElement) {
         var _this = this;
         _super.prototype.attachElement.call(this, surveyElement);
@@ -3593,8 +3705,8 @@ var PageAdorner = /** @class */ (function (_super) {
         if (isSelected && this.creator.pageEditMode === "bypage") {
             this.setSurveyElement(this.creator.selectedElement);
         }
-        if (isSelected && !!this.onPageSelectedCallback) {
-            this.onPageSelectedCallback();
+        if (isSelected) {
+            this.onPageSelected();
         }
     };
     PageAdorner.prototype.patchPageForDragDrop = function (page, addGhostPage) {
@@ -3624,8 +3736,8 @@ var PageAdorner = /** @class */ (function (_super) {
     Object.defineProperty(PageAdorner.prototype, "placeholderText", {
         get: function () {
             if (this.creator.isMobileView)
-                return (0,_editorLocalization__WEBPACK_IMPORTED_MODULE_4__.getLocString)("ed.pagePlaceHolderMobile");
-            return (0,_editorLocalization__WEBPACK_IMPORTED_MODULE_4__.getLocString)("ed.pagePlaceHolder");
+                return (0,_editorLocalization__WEBPACK_IMPORTED_MODULE_3__.getLocString)("ed.pagePlaceHolderMobile");
+            return (0,_editorLocalization__WEBPACK_IMPORTED_MODULE_3__.getLocString)("ed.pagePlaceHolder");
         },
         enumerable: false,
         configurable: true
@@ -3650,9 +3762,7 @@ var PageAdorner = /** @class */ (function (_super) {
         if (!model.isGhost) {
             if (model.creator.pageEditMode !== "single") {
                 model.creator.selectElement(model.page, undefined, false);
-                if (!!this.onPageSelectedCallback) {
-                    this.onPageSelectedCallback();
-                }
+                this.onPageSelected();
             }
             else {
                 model.creator.selectElement(model.creator.survey, undefined, false);
@@ -3663,7 +3773,7 @@ var PageAdorner = /** @class */ (function (_super) {
     };
     Object.defineProperty(PageAdorner.prototype, "css", {
         get: function () {
-            var result = "";
+            var result = _super.prototype.getCss.call(this);
             if (!!this.dragTypeOverMe && this.showPlaceholder) {
                 result = "svc-question__content--drag-over-inside";
             }
@@ -3680,23 +3790,24 @@ var PageAdorner = /** @class */ (function (_super) {
             else {
                 this.dragOut();
             }
+            if (this.allowExpandCollapse) {
+                result += (" svc-page__content--collapse-" + this.creator.expandCollapseButtonVisibility);
+                if (this.renderedCollapsed)
+                    result += (" svc-page__content--collapsed");
+                if (this.expandCollapseAnimationRunning)
+                    result += (" svc-page__content--animation-running");
+            }
             if (this.isGhost) {
                 return result + " svc-page__content--new";
             }
             if (this.creator.isElementSelected(this.page)) {
                 result += " svc-page__content--selected";
             }
-            result += (" svc-page__content--collapse-" + this.creator.expandCollapseButtonVisibility);
-            if (this.renderedCollapsed)
-                result += (" svc-page__content--collapsed");
             return result.trim();
         },
         enumerable: false,
         configurable: true
     });
-    PageAdorner.prototype.hover = function (event, element) {
-        (0,_utils_utils__WEBPACK_IMPORTED_MODULE_3__.toggleHovered)(event, element, this.creator.pageHoverDelay);
-    };
     PageAdorner.prototype.hoverStopper = function (event, element) {
         event["__svc_question_processed"] = true;
     };
@@ -3740,6 +3851,26 @@ var PageAdorner = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    PageAdorner.prototype.getAnimatedElement = function () {
+        var _a;
+        var cssClasses = this.surveyElement.cssClasses.page;
+        if (cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.description) {
+            return (_a = this.rootElement) === null || _a === void 0 ? void 0 : _a.querySelector(":scope ".concat((0,survey_core__WEBPACK_IMPORTED_MODULE_1__.classesToSelector)(cssClasses.description)));
+        }
+        return null;
+    };
+    PageAdorner.prototype.getInnerAnimatedElements = function () {
+        var _a;
+        var cssClasses = this.surveyElement.cssClasses;
+        if (cssClasses.pageRow)
+            return [].slice.call((_a = this.rootElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll(":scope .svc-page__footer, :scope ".concat((0,survey_core__WEBPACK_IMPORTED_MODULE_1__.classesToSelector)(this.surveyElement.cssRoot), " > .svc-row")));
+        return null;
+    };
+    PageAdorner.prototype.onPageSelected = function () {
+        if (this.rootElement) {
+            _survey_helper__WEBPACK_IMPORTED_MODULE_4__.SurveyHelper.scrollIntoViewIfNeeded(this.rootElement);
+        }
+    };
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
         (0,survey_core__WEBPACK_IMPORTED_MODULE_1__.property)({ defaultValue: false })
     ], PageAdorner.prototype, "isSelected", void 0);
@@ -3891,9 +4022,8 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__(/*! ./question-image.scss */ "./src/components/question-image.scss");
 var QuestionImageAdornerViewModel = /** @class */ (function (_super) {
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(QuestionImageAdornerViewModel, _super);
-    function QuestionImageAdornerViewModel(creator, surveyElement, templateData, questionRoot) {
+    function QuestionImageAdornerViewModel(creator, surveyElement, templateData) {
         var _this = _super.call(this, creator, surveyElement, templateData) || this;
-        _this.questionRoot = questionRoot;
         _this.imageLinkValueChangedHandler = function () {
             _this.isEmptyImageLink = !_this.question.imageLink;
             _this.filePresentationModel.value = null;
@@ -3930,7 +4060,7 @@ var QuestionImageAdornerViewModel = /** @class */ (function (_super) {
         });
     };
     QuestionImageAdornerViewModel.prototype.chooseFile = function (model) {
-        var fileInput = model.questionRoot.getElementsByClassName("svc-choose-file-input")[0];
+        var fileInput = model.rootElement.getElementsByClassName("svc-choose-file-input")[0];
         var context = { element: model.question, elementType: model.question.getType(), propertyName: "imageLink" };
         model.creator.chooseFiles(fileInput, function (files) {
             model.isUploading = true;
@@ -3977,6 +4107,15 @@ var QuestionImageAdornerViewModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionImageAdornerViewModel.prototype.getAnimatedElement = function () {
+        if (this.isEmptyImageLink) {
+            var cssClasses = this.filePresentationModel.cssClasses;
+            if (cssClasses.root) {
+                return this.surveyElement.getWrapperElement().querySelector(":scope ".concat((0,survey_core__WEBPACK_IMPORTED_MODULE_1__.classesToSelector)(cssClasses.root)));
+            }
+        }
+        return _super.prototype.getAnimatedElement.call(this);
+    };
     QuestionImageAdornerViewModel.prototype.css = function () {
         return new survey_core__WEBPACK_IMPORTED_MODULE_1__.CssClassBuilder()
             .append(_super.prototype.css.call(this))
@@ -3986,7 +4125,6 @@ var QuestionImageAdornerViewModel = /** @class */ (function (_super) {
         this.surveyElement.unRegisterFunctionOnPropertyValueChanged("imageLink", "imageLinkValueChanged");
         this.surveyElement.locImageLink.onStringChanged.remove(this.imageLinkValueChangedHandler);
         _super.prototype.dispose.call(this);
-        this.questionRoot = undefined;
     };
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
         (0,survey_core__WEBPACK_IMPORTED_MODULE_1__.property)({ defaultValue: false })
@@ -4225,7 +4363,6 @@ __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");
 
 
 
@@ -4235,7 +4372,6 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__(/*! ./question.scss */ "./src/components/question.scss");
 
 
-
 var QuestionAdornerViewModel = /** @class */ (function (_super) {
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(QuestionAdornerViewModel, _super);
     function QuestionAdornerViewModel(creator, surveyElement, templateData) {
@@ -4298,6 +4434,10 @@ var QuestionAdornerViewModel = /** @class */ (function (_super) {
     QuestionAdornerViewModel.prototype.rootCss = function () {
         var isStartWithNewLine = this.surveyElement.isQuestion && !this.surveyElement.startWithNewLine;
         return new survey_core__WEBPACK_IMPORTED_MODULE_1__.CssClassBuilder()
+            .append(_super.prototype.getCss.call(this))
+            .append("svc-question__adorner")
+            .append("svc-question__adorner--selected", !!this.creator.isElementSelected(this.surveyElement))
+            .append("svc-question__adorner--collapsed", this.renderedCollapsed)
             .append("svc-question__adorner--start-with-new-line", isStartWithNewLine)
             .append("svc-question__adorner--collapse-" + this.creator.expandCollapseButtonVisibility, true).toString();
     };
@@ -4318,6 +4458,12 @@ var QuestionAdornerViewModel = /** @class */ (function (_super) {
         if (this.renderedCollapsed) {
             result += " svc-question__content--collapsed";
         }
+        if (!this.surveyElement.hasTitle || (!this.surveyElement.isPanel && this.surveyElement.getTitleLocation() === "hidden")) {
+            result += " svc-question__content--title-hidden";
+        }
+        if (this.surveyElement.hasTitleOnBottom) {
+            result += " svc-question__content--title-bottom";
+        }
         if (this.isDragMe) {
             result += " svc-question__content--dragged";
         }
@@ -4350,6 +4496,41 @@ var QuestionAdornerViewModel = /** @class */ (function (_super) {
         }
         return result;
     };
+    Object.defineProperty(QuestionAdornerViewModel.prototype, "isTitleLeft", {
+        get: function () {
+            return (!this.surveyElement.isPanel && this.surveyElement.getTitleLocation() === "left");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    QuestionAdornerViewModel.prototype.getAnimatedElement = function () {
+        var _a, _b;
+        var cssClasses = this.surveyElement.isPanel ? this.surveyElement.cssClasses.panel : this.surveyElement.cssClasses;
+        var cssContent = cssClasses.content;
+        if (this.surveyElement.isDescendantOf("rating")) {
+            cssContent = "svc-rating-question-content";
+        }
+        if (this.isTitleLeft) {
+            return (_a = this.rootElement) === null || _a === void 0 ? void 0 : _a.querySelector(":scope ".concat((0,survey_core__WEBPACK_IMPORTED_MODULE_1__.classesToSelector)(this.surveyElement.getRootCss())));
+        }
+        if (cssContent) {
+            return (_b = this.rootElement) === null || _b === void 0 ? void 0 : _b.querySelector(":scope ".concat((0,survey_core__WEBPACK_IMPORTED_MODULE_1__.classesToSelector)(cssContent)));
+        }
+        return null;
+    };
+    QuestionAdornerViewModel.prototype.getInnerAnimatedElements = function () {
+        var _a;
+        var cssRoot = this.surveyElement.isPanel ? this.surveyElement.getContainerCss() : this.surveyElement.getRootCss();
+        var cssDescription = this.surveyElement.cssDescription;
+        var selectorArray = [
+            ":scope > .svc-question__content > *:not(.svc-question__drag-area):not(".concat((0,survey_core__WEBPACK_IMPORTED_MODULE_1__.classesToSelector)(cssRoot), ")"),
+        ];
+        if (!this.isTitleLeft && cssDescription)
+            selectorArray.push(":scope ".concat((0,survey_core__WEBPACK_IMPORTED_MODULE_1__.classesToSelector)(cssDescription)));
+        var res = [].slice.call((_a = this.rootElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectorArray.join(",")));
+        res.push(this.rootElement);
+        return res;
+    };
     QuestionAdornerViewModel.prototype.expandWithDragIn = function () {
         _super.prototype.expandWithDragIn.call(this);
         this.element.dragTypeOverMe = null;
@@ -4478,8 +4659,7 @@ var QuestionAdornerViewModel = /** @class */ (function (_super) {
         if (!this.surveyElement.isInteractiveDesignElement) {
             return;
         }
-        //this.updateActionsProperties();
-        (0,_utils_utils__WEBPACK_IMPORTED_MODULE_4__.toggleHovered)(event, element, this.creator.pageHoverDelay);
+        _super.prototype.hover.call(this, event, element);
     };
     QuestionAdornerViewModel.prototype.updateActionsProperties = function () {
         if (this.isDisposed)
@@ -4534,7 +4714,7 @@ var QuestionAdornerViewModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionAdornerViewModel.prototype, "showHiddenTitle", {
         get: function () {
-            return !this.element.hasTitle && this.element.isInteractiveDesignElement;
+            return (!this.element.hasTitle || this.isTitleLeft) && this.element.isInteractiveDesignElement;
         },
         enumerable: false,
         configurable: true
@@ -4593,20 +4773,11 @@ var QuestionAdornerViewModel = /** @class */ (function (_super) {
     };
     QuestionAdornerViewModel.prototype.buildDefaultJsonMap = function (availableItems) {
         var defaultJsons = {};
-        function cleanDefaultsFromJson(type, toolboxItem) {
-            var question = survey_core__WEBPACK_IMPORTED_MODULE_1__.QuestionFactory.Instance.createQuestion(type, "question");
-            if (!question)
-                return toolboxItem.json;
-            question.fromJSON(toolboxItem.json);
-            var json = question.toJSON();
-            delete json.name;
-            return json;
-        }
         function addItemJson(toolboxItem) {
             var _a;
             var type = ((_a = toolboxItem.json) === null || _a === void 0 ? void 0 : _a.type) || toolboxItem.id;
             if (toolboxItem.json) {
-                var json = cleanDefaultsFromJson(type, toolboxItem);
+                var json = toolboxItem.json;
                 if (!defaultJsons[type])
                     defaultJsons[type] = [];
                 defaultJsons[type].push(json);
@@ -4620,38 +4791,42 @@ var QuestionAdornerViewModel = /** @class */ (function (_super) {
         });
         return defaultJsons;
     };
-    QuestionAdornerViewModel.prototype.getConvertToTypesActions = function (parentAction) {
+    QuestionAdornerViewModel.prototype.convertQuestion = function (questionType, json, defaultJsons) {
+        var _this = this;
+        var type = (json === null || json === void 0 ? void 0 : json.type) || questionType;
+        var newJson = {};
+        (defaultJsons[type] || []).forEach(function (djson) {
+            if (_this.jsonIsCorresponded(djson)) {
+                newJson = (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__assign)({}, json);
+                var objJson_1 = _this.element.toJSON();
+                var cleanJson_1 = _this.cleanDefaultsFromJson(type, djson);
+                Object.keys(djson).forEach(function (p) {
+                    if (p != "type" && !newJson[p])
+                        newJson[p] = undefined;
+                });
+                Object.keys(json || {}).forEach(function (p) {
+                    if (p != "type" && !(!objJson_1[p] || cleanJson_1[p]))
+                        newJson[p] = undefined;
+                });
+            }
+        });
+        this.creator.convertCurrentQuestion(type, newJson);
+    };
+    QuestionAdornerViewModel.prototype.getConvertToTypesActions = function () {
         var _this = this;
         var availableItems = this.getConvertToTypes();
         var defaultJsons = this.buildDefaultJsonMap(availableItems);
-        var res = [];
+        var newItems = [];
         var lastItem = null;
         availableItems.forEach(function (item) {
             var needSeparator = lastItem && item.category != lastItem.category;
             var action = _this.creator.createIActionBarItemByClass(item, needSeparator, function (questionType, json) {
-                var type = (json === null || json === void 0 ? void 0 : json.type) || questionType;
-                var newJson = {};
-                (defaultJsons[type] || []).forEach(function (djson) {
-                    if (_this.jsonIsCorresponded(djson)) {
-                        newJson = (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__assign)({}, json);
-                        var objJson_1 = _this.element.toJSON();
-                        Object.keys(djson).forEach(function (p) {
-                            if (p != "type" && !newJson[p])
-                                newJson[p] = undefined;
-                        });
-                        Object.keys(json).forEach(function (p) {
-                            if (p != "type" && !(!objJson_1[p] || djson[p]))
-                                newJson[p] = undefined;
-                        });
-                    }
-                });
-                _this.creator.convertCurrentQuestion(type, newJson);
-                parentAction === null || parentAction === void 0 ? void 0 : parentAction.hidePopup();
+                _this.convertQuestion(questionType, json, defaultJsons);
             });
             lastItem = item;
-            res.push(action);
+            newItems.push(action);
         });
-        return res;
+        return newItems;
     };
     Object.defineProperty(QuestionAdornerViewModel.prototype, "currentType", {
         get: function () {
@@ -4677,32 +4852,7 @@ var QuestionAdornerViewModel = /** @class */ (function (_super) {
             actionData: actionData,
             items: actions,
             updateListModel: function (listModel) {
-                var newItems = _this.getConvertToTypesActions(newAction);
-                listModel.setItems(newItems);
-                listModel.selectedItem = _this.getSelectedItem(newItems, _this.currentType);
-                newItems.forEach(function (action) {
-                    var _a;
-                    var toolboxItem = _this.creator.toolbox.getItemByName(action.id);
-                    if (((_a = action.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                        var selectedSubItem_1 = undefined;
-                        action.items.forEach(function (item) {
-                            var elementType = _this.element.getType();
-                            var toolboxSubitem = toolboxItem.getSubitemByName(item.id);
-                            var json = toolboxSubitem.json || {};
-                            if (item.id == elementType || json.type == elementType) {
-                                if (!listModel.selectedItem)
-                                    selectedSubItem_1 = item;
-                                if (_this.jsonIsCorresponded(json))
-                                    selectedSubItem_1 = item;
-                            }
-                        });
-                        if (selectedSubItem_1) {
-                            var _listModel = action.popupModel.contentComponentData.model;
-                            _listModel.selectedItem = selectedSubItem_1;
-                            listModel.selectedItem = action;
-                        }
-                    }
-                });
+                _this.updateQuestionTypeOrSubtypeListModel(listModel, false);
             }
         });
         newAction.iconName = new survey_core__WEBPACK_IMPORTED_MODULE_1__.ComputedUpdater(function () {
@@ -4718,61 +4868,127 @@ var QuestionAdornerViewModel = /** @class */ (function (_super) {
         newAction.disableHide = true;
         return newAction;
     };
-    QuestionAdornerViewModel.prototype.jsonIsCorresponded = function (json) {
+    QuestionAdornerViewModel.prototype.jsonsAreCompatible = function (objJson, json) {
+        var _this = this;
         var jsonIsCorresponded = true;
-        var objJson = this.element.toJSON();
         Object.keys(json).forEach(function (p) {
-            if (p != "type" && !survey_core__WEBPACK_IMPORTED_MODULE_1__.Helpers.isTwoValueEquals(json[p], objJson[p]))
+            var propertyValue = objJson[p] === undefined ? _this.element.getDefaultPropertyValue(p) : objJson[p];
+            if (p != "type" && !survey_core__WEBPACK_IMPORTED_MODULE_1__.Helpers.isTwoValueEquals(json[p], propertyValue))
                 jsonIsCorresponded = false;
         });
         return jsonIsCorresponded;
     };
+    QuestionAdornerViewModel.prototype.jsonIsCorresponded = function (json) {
+        return this.jsonsAreCompatible(this.element.toJSON(), json);
+    };
+    QuestionAdornerViewModel.prototype.toolboxItemIsCorresponded = function (toolboxItem, someItemSelectedAlready) {
+        var elementType = this.element.getType();
+        var json = toolboxItem.json;
+        if (toolboxItem.id == elementType || toolboxItem.json.type == elementType) {
+            return !someItemSelectedAlready || this.jsonIsCorresponded(json);
+        }
+    };
+    QuestionAdornerViewModel.prototype.cleanDefaultsFromJson = function (type, toolboxItemJson) {
+        var question = survey_core__WEBPACK_IMPORTED_MODULE_1__.QuestionFactory.Instance.createQuestion(type, "question");
+        if (!question)
+            return toolboxItemJson;
+        question.fromJSON(toolboxItemJson);
+        var json = question.toJSON();
+        json["type"] = type;
+        delete json.name;
+        return json;
+    };
+    QuestionAdornerViewModel.prototype.updateQuestionTypeOrSubtypeListModel = function (listModel, subtypeOnly) {
+        var _this = this;
+        var _a;
+        var availableItems = this.getConvertToTypes();
+        var defaultJsons = this.buildDefaultJsonMap(availableItems);
+        var newItems = [];
+        var lastItem;
+        var selectedAction;
+        var selectedSubaction = undefined;
+        var selectedSubactions = undefined;
+        availableItems.forEach(function (item) {
+            var _a;
+            var needSeparator = lastItem && item.category != lastItem.category;
+            var action = _this.creator.createIActionBarItemByClass(item, needSeparator, function (questionType, json) { _this.convertQuestion(questionType, json, defaultJsons); });
+            if (_this.toolboxItemIsCorresponded(item, !!selectedAction)) {
+                selectedAction = action;
+                selectedSubactions = item.items;
+            }
+            if (((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 && _this.creator.toolbox.showSubitems) {
+                var subactions_1 = [];
+                var selectedSubactionLocal_1 = undefined;
+                var allChildsAreCompatibleToParent_1 = false;
+                item.items.forEach(function (subitem) {
+                    var subaction = _this.creator.createIActionBarItemByClass(subitem, false, function (questionType, json) { _this.convertQuestion(questionType, json, defaultJsons); });
+                    if (_this.toolboxItemIsCorresponded(subitem, !!selectedAction))
+                        selectedSubactionLocal_1 = subitem;
+                    if (_this.jsonsAreCompatible(item.json, subitem.json))
+                        allChildsAreCompatibleToParent_1 = true;
+                    subactions_1.push(subaction);
+                });
+                if (!allChildsAreCompatibleToParent_1 && subactions_1.length > 0) {
+                    var defaultSubaction = _this.creator.createIActionBarItemByClass(item, false, function (questionType, json) { _this.convertQuestion(questionType, json, defaultJsons); });
+                    defaultSubaction.id = action.id + "-default";
+                    defaultSubaction.iconName = undefined;
+                    defaultSubaction.markerIconName = undefined;
+                    defaultSubaction.items = [];
+                    defaultSubaction.component = undefined;
+                    subactions_1.unshift(defaultSubaction);
+                    if (selectedAction == action && !selectedSubactionLocal_1)
+                        selectedSubactionLocal_1 = defaultSubaction;
+                }
+                action.setSubItems({ items: subactions_1 });
+                if (selectedSubactionLocal_1) {
+                    selectedAction = action;
+                    selectedSubaction = selectedSubactionLocal_1;
+                    selectedSubactions = subactions_1;
+                }
+            }
+            lastItem = item;
+            newItems.push(action);
+        });
+        if (subtypeOnly) {
+            if (selectedSubactions) {
+                listModel.setItems(selectedSubactions);
+                listModel.selectedItem = selectedSubaction;
+                return !!selectedSubactions;
+            }
+        }
+        else {
+            var _listModel = (_a = selectedAction === null || selectedAction === void 0 ? void 0 : selectedAction.popupModel) === null || _a === void 0 ? void 0 : _a.contentComponentData.model;
+            if (_listModel)
+                _listModel.selectedItem = selectedSubaction;
+            listModel.setItems(newItems);
+            listModel.selectedItem = selectedAction;
+        }
+    };
     QuestionAdornerViewModel.prototype.createConvertInputType = function () {
         var _this = this;
-        var questionType = this.surveyElement.getType();
-        if (questionType !== "text" && questionType !== "rating")
-            return null;
-        var toolboxItem = this.creator.toolbox.items.filter(function (item) { return item.id === questionType; })[0];
-        if (!toolboxItem || !toolboxItem.hasSubItems)
+        var listModel = new survey_core__WEBPACK_IMPORTED_MODULE_1__.ListModel([]);
+        this.updateQuestionTypeOrSubtypeListModel(listModel, true);
+        if (listModel.actions.length == 0)
             return null;
-        var propName = _toolbox__WEBPACK_IMPORTED_MODULE_8__.QuestionToolbox.getSubTypePropertyName(questionType);
-        var questionSubType = this.surveyElement.getPropertyValue(propName);
-        var getAvailableTypes = function () {
-            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);
-                    }
-                };
-            });
-        };
         var actionData = {
             id: "convertInputType",
             visibleIndex: 1,
-            title: _editorLocalization__WEBPACK_IMPORTED_MODULE_2__.editorLocalization.getPropertyValueInEditor(propName, questionSubType),
+            title: "SUBTYPE",
             disableShrink: true,
             iconName: "icon-chevron_16x16"
         };
         var newAction = this.createDropdownModel({
             actionData: actionData,
-            items: getAvailableTypes(),
+            items: [],
             updateListModel: function (listModel) {
-                var newItems = getAvailableTypes();
-                listModel.setItems(newItems);
-                listModel.selectedItem = _this.getSelectedItem(newItems, _this.surveyElement.getPropertyValue(propName));
+                _this.updateQuestionTypeOrSubtypeListModel(listModel, true);
             }
         });
-        this.surveyElement.registerFunctionOnPropertyValueChanged(propName, function () {
-            var item = _this.getSelectedItem(getAvailableTypes(), _this.surveyElement.getPropertyValue(propName));
-            if (!item)
-                return;
+        this.surveyElement.registerFunctionOnPropertiesValueChanged(["inputType", "rateType"], function () {
             var popup = newAction.popupModel;
             var list = popup.contentComponentData.model;
-            list.selectedItem = item;
-            newAction.title = item.title;
+            _this.updateQuestionTypeOrSubtypeListModel(list, true);
+            newAction.title = list.selectedItem.title;
         }, "inputTypeAdorner");
         newAction.removePriority = 1;
         return newAction;
@@ -4804,6 +5020,10 @@ var QuestionAdornerViewModel = /** @class */ (function (_super) {
                 options.updateListModel(listModel);
             },
         });
+        var listModel = newAction.popupModel.contentComponentData.model;
+        options.updateListModel(listModel);
+        if (listModel.selectedItem)
+            newAction.title = listModel.selectedItem.title;
         newAction.popupModel.displayMode = this.creator.isTouch ? "overlay" : "popup";
         newAction.data.locOwner = this.creator;
         return newAction;
@@ -5612,8 +5832,9 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__(/*! ./simulator.scss */ "./src/components/simulator.scss");
 var SurveySimulatorModel = /** @class */ (function (_super) {
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SurveySimulatorModel, _super);
-    function SurveySimulatorModel() {
+    function SurveySimulatorModel(surveyProvider) {
         var _this_1 = _super.call(this) || this;
+        _this_1.surveyProvider = surveyProvider;
         _this_1.activateZoom = function () {
             document.addEventListener("keydown", _this_1.listenTryToZoom);
             document.addEventListener("wheel", _this_1.listenTryToZoomWithWheel, { passive: false });
@@ -5656,8 +5877,11 @@ var SurveySimulatorModel = /** @class */ (function (_super) {
         // }
     }
     SurveySimulatorModel.prototype.surveyChanged = function () {
+        var _this_1 = this;
         var _this = this;
         this.survey.onOpenDropdownMenu.add(function (_, options) {
+            if (_this_1.surveyProvider.isTouch)
+                return;
             var device = simulatorDevices[_this.activeDevice];
             options.menuType = device.deviceType === "desktop" ? "dropdown" : (device.deviceType == "tablet" ? "popup" : "overlay");
         });
@@ -7316,6 +7540,24 @@ var TabDesignerViewModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(TabDesignerViewModel.prototype, "placeholderTitleText", {
+        get: function () {
+            if (this.creator.isMobileView)
+                return (0,_editorLocalization__WEBPACK_IMPORTED_MODULE_2__.getLocString)("ed.surveyPlaceholderTitleMobile");
+            return (0,_editorLocalization__WEBPACK_IMPORTED_MODULE_2__.getLocString)("ed.surveyPlaceholderTitle");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TabDesignerViewModel.prototype, "placeholderDescriptionText", {
+        get: function () {
+            if (this.creator.isMobileView)
+                return (0,_editorLocalization__WEBPACK_IMPORTED_MODULE_2__.getLocString)("ed.surveyPlaceholderDescriptionMobile");
+            return (0,_editorLocalization__WEBPACK_IMPORTED_MODULE_2__.getLocString)("ed.surveyPlaceholderDescription");
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(TabDesignerViewModel.prototype, "hasToolbar", {
         get: function () {
             return this.creator.expandCollapseButtonVisibility != "never";
@@ -11700,6 +11942,24 @@ var SurveyLogicUI = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SurveyLogicUI.prototype, "placeholderTitleText", {
+        get: function () {
+            if (this.options.isMobileView)
+                return (0,_logic_types__WEBPACK_IMPORTED_MODULE_5__.getLogicString)("logicPlaceholderTitleMobile");
+            return (0,_logic_types__WEBPACK_IMPORTED_MODULE_5__.getLogicString)("logicPlaceholderTitle");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyLogicUI.prototype, "placeholderDescriptionText", {
+        get: function () {
+            if (this.options.isMobileView)
+                return (0,_logic_types__WEBPACK_IMPORTED_MODULE_5__.getLogicString)("logicPlaceholderDescriptionMobile");
+            return (0,_logic_types__WEBPACK_IMPORTED_MODULE_5__.getLogicString)("logicPlaceholderDescription");
+        },
+        enumerable: false,
+        configurable: true
+    });
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
         (0,survey_core__WEBPACK_IMPORTED_MODULE_1__.property)()
     ], SurveyLogicUI.prototype, "itemsSurveyValue", void 0);
@@ -12271,7 +12531,7 @@ var PreviewViewModel = /** @class */ (function (_super) {
         _this.startThemeClasses = startThemeClasses;
         _this.enableInvisiblePages = true;
         _this.pages = new survey_core__WEBPACK_IMPORTED_MODULE_2__.ActionContainer();
-        _this.simulator = new _simulator__WEBPACK_IMPORTED_MODULE_1__.SurveySimulatorModel();
+        _this.simulator = new _simulator__WEBPACK_IMPORTED_MODULE_1__.SurveySimulatorModel(surveyProvider);
         return _this;
     }
     Object.defineProperty(PreviewViewModel.prototype, "activeLanguage", {
@@ -12574,6 +12834,24 @@ var PreviewViewModel = /** @class */ (function (_super) {
         var isNextEnabled = this.survey && this.survey.visiblePages.indexOf(this.activePage) !== this.survey.visiblePages.length - 1;
         this.nextPageAction.enabled = isNextEnabled;
     };
+    Object.defineProperty(PreviewViewModel.prototype, "placeholderTitleText", {
+        get: function () {
+            if (this.isMobileView)
+                return (0,_editorLocalization__WEBPACK_IMPORTED_MODULE_3__.getLocString)("ed.previewPlaceholderTitleMobile");
+            return (0,_editorLocalization__WEBPACK_IMPORTED_MODULE_3__.getLocString)("ed.previewPlaceholderTitle");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PreviewViewModel.prototype, "placeholderDescriptionText", {
+        get: function () {
+            if (this.isMobileView)
+                return (0,_editorLocalization__WEBPACK_IMPORTED_MODULE_3__.getLocString)("ed.previewPlaceholderDescriptionMobile");
+            return (0,_editorLocalization__WEBPACK_IMPORTED_MODULE_3__.getLocString)("ed.previewPlaceholderDescription");
+        },
+        enumerable: false,
+        configurable: true
+    });
     PreviewViewModel.prototype.onScroll = function () {
         this.survey.onScroll();
         return true;
@@ -12790,7 +13068,7 @@ var TabTestPlugin = /** @class */ (function () {
                 iconName: "icon-device-desktop",
                 mode: "small",
                 visible: new survey_core__WEBPACK_IMPORTED_MODULE_1__.ComputedUpdater(function () {
-                    return (0,_utils_utils__WEBPACK_IMPORTED_MODULE_0__.notShortCircuitAnd)(_this.creator.activeTab === "test", _this.creator.showSimulatorInTestSurveyTab);
+                    return (0,_utils_utils__WEBPACK_IMPORTED_MODULE_0__.notShortCircuitAnd)(_this.creator.activeTab === "test", _this.creator.showSimulatorInTestSurveyTab, !_this.creator.isTouch);
                 }),
             }, {
                 items: deviceSelectorItems,
@@ -12807,7 +13085,7 @@ var TabTestPlugin = /** @class */ (function () {
                 iconName: "icon-device-rotate",
                 mode: "small",
                 visible: new survey_core__WEBPACK_IMPORTED_MODULE_1__.ComputedUpdater(function () {
-                    return (0,_utils_utils__WEBPACK_IMPORTED_MODULE_0__.notShortCircuitAnd)(_this.creator.activeTab === "test", _this.creator.showSimulatorInTestSurveyTab);
+                    return (0,_utils_utils__WEBPACK_IMPORTED_MODULE_0__.notShortCircuitAnd)(_this.creator.activeTab === "test", _this.creator.showSimulatorInTestSurveyTab, !_this.creator.isTouch);
                 }),
                 action: function () {
                     _this.model.simulator.landscape = !_this.model.simulator.landscape;
@@ -13460,6 +13738,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   createBoxShadow: () => (/* binding */ createBoxShadow),
 /* harmony export */   createBoxShadowReset: () => (/* binding */ createBoxShadowReset),
 /* harmony export */   parseBoxShadow: () => (/* binding */ parseBoxShadow),
+/* harmony export */   trimBoxShadowValue: () => (/* binding */ trimBoxShadowValue),
 /* harmony export */   updateShadowEffectsJSON: () => (/* binding */ updateShadowEffectsJSON)
 /* harmony export */ });
 /* harmony import */ var _editorLocalization__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../editorLocalization */ "./src/editorLocalization.ts");
@@ -13534,7 +13813,16 @@ if (!survey_core__WEBPACK_IMPORTED_MODULE_1__.ComponentCollection.Instance.getCu
                     return [{}];
                 return typeof value == "string" ? parseBoxShadow(value) : value;
             };
-            question.valueToDataCallback = function (value) { return !!value ? (typeof value == "string" ? value : createBoxShadow(Array.isArray(value) ? value : [value])) : ""; };
+            question.valueToDataCallback = function (value) {
+                if (!value)
+                    return "";
+                if (typeof value == "string") {
+                    return value;
+                }
+                else {
+                    return createBoxShadow(Array.isArray(value) ? value : [value]);
+                }
+            };
             question.contentQuestion.panels.forEach(function (p) { return p.questions.forEach(function (q) { return q.allowRootStyle = false; }); });
         },
     });
@@ -13585,6 +13873,11 @@ function parseBoxShadow(value) {
         return res;
     });
 }
+function trimBoxShadowValue(value) {
+    if (!value)
+        return value;
+    return value.replace(/\)\,\s/g, "),");
+}
 
 
 /***/ }),
@@ -14515,6 +14808,9 @@ survey_core__WEBPACK_IMPORTED_MODULE_1__.Serializer.addProperties("theme", [{
     }, {
         type: "shadoweffects",
         name: "--sjs-shadow-small",
+        onSetValue: function (obj, value) {
+            obj.setPropertyValue("--sjs-shadow-small", (0,_theme_custom_questions_shadow_effects__WEBPACK_IMPORTED_MODULE_7__.trimBoxShadowValue)(value));
+        },
     }, {
         type: "font",
         name: "questionTitle",
@@ -14535,6 +14831,9 @@ survey_core__WEBPACK_IMPORTED_MODULE_1__.Serializer.addProperties("theme", [{
     {
         type: "shadoweffects",
         name: "--sjs-shadow-inner",
+        onSetValue: function (obj, value) {
+            obj.setPropertyValue("--sjs-shadow-inner", (0,_theme_custom_questions_shadow_effects__WEBPACK_IMPORTED_MODULE_7__.trimBoxShadowValue)(value));
+        },
     }, {
         type: "font",
         name: "editorFont",
@@ -14577,10 +14876,34 @@ survey_core__WEBPACK_IMPORTED_MODULE_1__.Serializer.addProperties("theme", [{
     { name: "--sjs-secondary-backcolor-semi-light", visible: false },
     { name: "--sjs-secondary-forecolor", visible: false },
     { name: "--sjs-secondary-forecolor-light", visible: false },
-    { name: "--sjs-shadow-small-reset", visible: false },
-    { name: "--sjs-shadow-medium", visible: false },
-    { name: "--sjs-shadow-large", visible: false },
-    { name: "--sjs-shadow-inner-reset", visible: false },
+    {
+        name: "--sjs-shadow-small-reset",
+        visible: false,
+        onSetValue: function (obj, value) {
+            obj.setPropertyValue("--sjs-shadow-small-reset", (0,_theme_custom_questions_shadow_effects__WEBPACK_IMPORTED_MODULE_7__.trimBoxShadowValue)(value));
+        },
+    },
+    {
+        name: "--sjs-shadow-medium",
+        visible: false,
+        onSetValue: function (obj, value) {
+            obj.setPropertyValue("--sjs-shadow-medium", (0,_theme_custom_questions_shadow_effects__WEBPACK_IMPORTED_MODULE_7__.trimBoxShadowValue)(value));
+        },
+    },
+    {
+        name: "--sjs-shadow-large",
+        visible: false,
+        onSetValue: function (obj, value) {
+            obj.setPropertyValue("--sjs-shadow-large", (0,_theme_custom_questions_shadow_effects__WEBPACK_IMPORTED_MODULE_7__.trimBoxShadowValue)(value));
+        },
+    },
+    {
+        name: "--sjs-shadow-inner-reset",
+        visible: false,
+        onSetValue: function (obj, value) {
+            obj.setPropertyValue("--sjs-shadow-inner-reset", (0,_theme_custom_questions_shadow_effects__WEBPACK_IMPORTED_MODULE_7__.trimBoxShadowValue)(value));
+        },
+    },
     { name: "--sjs-border-light", visible: false },
     { name: "--sjs-border-default", visible: false },
     { name: "--sjs-border-inside", visible: false },
@@ -16800,7 +17123,7 @@ var TranslationGroup = /** @class */ (function (_super) {
         matrix.rows.forEach(function (row) { return rows.push({ value: row.value, text: row.text }); });
         rows.forEach(function (row) {
             matrix.columns.forEach(function (col) {
-                var locStr = cells.getCellLocText(row.value, col);
+                var locStr = cells.getCellDisplayLocText(row.value, col);
                 if (!!locStr) {
                     var name_1 = _editorLocalization__WEBPACK_IMPORTED_MODULE_3__.editorLocalization.getPropertyName(row.text, "") + ", " + _editorLocalization__WEBPACK_IMPORTED_MODULE_3__.editorLocalization.getPropertyName(col.title);
                     var item = new TranslationItem(name_1, locStr, "", _this.translation, locStr);
@@ -17545,6 +17868,24 @@ var Translation = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Translation.prototype, "placeholderTitleText", {
+        get: function () {
+            if (this.options.isMobileView)
+                return (0,_editorLocalization__WEBPACK_IMPORTED_MODULE_3__.getLocString)("ed.translationsPlaceholderTitleMobile");
+            return (0,_editorLocalization__WEBPACK_IMPORTED_MODULE_3__.getLocString)("ed.translationsPlaceholderTitle");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Translation.prototype, "placeholderDescriptionText", {
+        get: function () {
+            if (this.options.isMobileView)
+                return (0,_editorLocalization__WEBPACK_IMPORTED_MODULE_3__.getLocString)("ed.translationsPlaceholderDescriptionMobile");
+            return (0,_editorLocalization__WEBPACK_IMPORTED_MODULE_3__.getLocString)("ed.translationsPlaceholderDescription");
+        },
+        enumerable: false,
+        configurable: true
+    });
     Translation.prototype.exportToCSV = function () {
         if (!this.root) {
             this.reset();
@@ -18229,7 +18570,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _components_string_editor__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./components/string-editor */ "./src/components/string-editor.ts");
 /* harmony import */ var _components_tabs_theme_plugin__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./components/tabs/theme-plugin */ "./src/components/tabs/theme-plugin.ts");
 /* harmony import */ var _survey_elements__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ./survey-elements */ "./src/survey-elements.ts");
-/* harmony import */ var _designTabSurveyThemeJSON__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ./designTabSurveyThemeJSON */ "./src/designTabSurveyThemeJSON.ts");
+/* harmony import */ var _expand_collapse_manager__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ./expand-collapse-manager */ "./src/expand-collapse-manager.ts");
+/* harmony import */ var _designTabSurveyThemeJSON__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ./designTabSurveyThemeJSON */ "./src/designTabSurveyThemeJSON.ts");
+
 
 
 
@@ -18868,6 +19211,7 @@ var SurveyCreatorModel = /** @class */ (function (_super) {
         _this.animationEnabled = false;
         _this.onStateChanged = _this.addCreatorEvent();
         _this.onSurfaceToolbarActionExecuted = _this.addCreatorEvent();
+        _this.expandCollapseManager = new _expand_collapse_manager__WEBPACK_IMPORTED_MODULE_25__.ExpandCollapseManager(_this);
         _this.notifier = new survey_core__WEBPACK_IMPORTED_MODULE_1__.Notifier({
             root: "svc-notifier",
             rootWithButtons: "",
@@ -20093,6 +20437,7 @@ var SurveyCreatorModel = /** @class */ (function (_super) {
         }
         this.existingPages = {};
         var survey = this.createSurvey({}, "designer", undefined, function (survey) {
+            survey.skeletonHeight = 188;
             survey.css = survey_core__WEBPACK_IMPORTED_MODULE_1__.defaultV2Css;
             survey.setIsMobile(!!_this.isMobileView);
             survey.setDesignMode(true);
@@ -20408,7 +20753,7 @@ var SurveyCreatorModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyCreatorModel.prototype, "designTabSurveyThemeVariables", {
         get: function () {
-            return _designTabSurveyThemeJSON__WEBPACK_IMPORTED_MODULE_25__["default"].cssVariables;
+            return _designTabSurveyThemeJSON__WEBPACK_IMPORTED_MODULE_26__["default"].cssVariables;
         },
         enumerable: false,
         configurable: true
@@ -20439,7 +20784,7 @@ var SurveyCreatorModel = /** @class */ (function (_super) {
         var survey = this.createSurveyCore(json, reason);
         if (reason !== "designer" && reason !== "test" && reason !== "theme") {
             survey.fitToContainer = false;
-            survey.applyTheme(_designTabSurveyThemeJSON__WEBPACK_IMPORTED_MODULE_25__["default"]);
+            survey.applyTheme(_designTabSurveyThemeJSON__WEBPACK_IMPORTED_MODULE_26__["default"]);
             survey.gridLayoutEnabled = false;
         }
         if (reason === "designer" || reason === "modal-question-editor") {
@@ -20999,19 +21344,26 @@ var SurveyCreatorModel = /** @class */ (function (_super) {
             return;
         clearInterval(this.currentFocusInterval);
         clearTimeout(this.currentFocusTimeout);
-        if (this.animationEnabled && this.survey.isLazyRendering) {
-            this.survey.disableLazyRenderingBeforeElement(selEl);
-        }
         this.currentFocusTimeout = setTimeout(function () {
             _this.currentFocusInterval = setInterval(function () {
-                var _a;
+                var _a, _b;
                 var el = document.getElementById(selEl.id);
                 if (!!selEl && (focus || startEdit && (!selEl.hasTitle || selEl.isPanel))) {
                     if (!el || _this.rootElement.getAnimations({ subtree: true }).filter((function (animation) { return animation.effect.getComputedTiming().activeDuration !== Infinity && (animation.pending || animation.playState !== "finished"); }))[0])
                         return;
                     clearInterval(_this.currentFocusInterval);
                     if (!!el) {
-                        _survey_helper__WEBPACK_IMPORTED_MODULE_9__.SurveyHelper.scrollIntoViewIfNeeded((_a = el.parentElement) !== null && _a !== void 0 ? _a : el, function () { return { block: "start", behavior: _this.animationEnabled ? "smooth" : undefined }; }, true);
+                        var isNeedScroll = _survey_helper__WEBPACK_IMPORTED_MODULE_9__.SurveyHelper.isNeedScrollIntoView((_a = el.parentElement) !== null && _a !== void 0 ? _a : el, true);
+                        if (!!isNeedScroll) {
+                            var elementPage = _this.getPageByElement(selEl);
+                            var scrollIntoViewOptions_1 = { block: "start", behavior: _this.animationEnabled ? "smooth" : undefined };
+                            if (!!elementPage) {
+                                _this.survey.scrollElementToTop(selEl, undefined, elementPage, selEl.id, true, scrollIntoViewOptions_1, _this.rootElement);
+                            }
+                            else {
+                                _survey_helper__WEBPACK_IMPORTED_MODULE_9__.SurveyHelper.scrollIntoViewIfNeeded((_b = el.parentElement) !== null && _b !== void 0 ? _b : el, function () { return scrollIntoViewOptions_1; }, true);
+                            }
+                        }
                         if (!propertyName && el.parentElement) {
                             var elToFocus = (typeof (focus) === "string") ? el.parentElement.querySelector(focus) : el.parentElement;
                             elToFocus && elToFocus.focus({ preventScroll: true });
@@ -24196,6 +24548,46 @@ var __spreadArray = function (to, from) {
 };
 
 
+/***/ }),
+
+/***/ "./src/expand-collapse-manager.ts":
+/*!****************************************!*\
+  !*** ./src/expand-collapse-manager.ts ***!
+  \****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   ExpandCollapseManager: () => (/* binding */ ExpandCollapseManager)
+/* harmony export */ });
+var ExpandCollapseManager = /** @class */ (function () {
+    function ExpandCollapseManager(creator) {
+        var _this = this;
+        this.adorners = [];
+        creator.onSurfaceToolbarActionExecuted.add(function (_, options) {
+            var isCollapseAction = options.action.id == "collapseAll";
+            var isExpandAction = options.action.id == "expandAll";
+            if (isCollapseAction || isExpandAction) {
+                for (var i = _this.adorners.length - 1; i >= 0; i--) {
+                    if (_this.adorners[i].allowExpandCollapse) {
+                        _this.adorners[i].collapsed = isCollapseAction;
+                    }
+                }
+            }
+        });
+    }
+    ExpandCollapseManager.prototype.add = function (adorner) {
+        this.adorners.push(adorner);
+    };
+    ExpandCollapseManager.prototype.remove = function (adorner) {
+        this.adorners.splice(this.adorners.indexOf(adorner), 1);
+    };
+    return ExpandCollapseManager;
+}());
+
+
+
 /***/ }),
 
 /***/ "./src/expressionToDisplayText.ts":
@@ -25355,6 +25747,18 @@ var enStrings = {
         pagePlaceHolder: "The page is empty. Drag an element from the toolbox or click the button below.",
         imagePlaceHolder: "Drag and drop an image here or click the button below and choose an image to upload",
         surveyPlaceHolderMobile: "Click the \"Add Question\" button below to start creating your form.",
+        surveyPlaceholderTitle: "Your form is empty",
+        surveyPlaceholderTitleMobile: "Your form is empty",
+        surveyPlaceholderDescription: "Drag an element from the toolbox or click the button below.",
+        surveyPlaceholderDescriptionMobile: "Drag an element from the toolbox or click the button below.",
+        previewPlaceholderTitle: "No preview",
+        previewPlaceholderTitleMobile: "No preview",
+        previewPlaceholderDescription: "The survey doesn't contain any visible elements.",
+        previewPlaceholderDescriptionMobile: "The survey doesn't contain any visible elements.",
+        translationsPlaceholderTitle: "No strings to translate",
+        translationsPlaceholderTitleMobile: "No strings to translate",
+        translationsPlaceholderDescription: "Add elements to your form or change the strings filter in the toolbar.",
+        translationsPlaceholderDescriptionMobile: "Add elements to your form or change the strings filter in the toolbar.",
         pagePlaceHolderMobile: "Click the \"Add Question\" button below to add a new element to the page.",
         panelPlaceHolderMobile: "Click the \"Add Question\" button below to add a new element to the panel.",
         imagePlaceHolderMobile: "Click the button below and choose an image to upload",
@@ -25367,6 +25771,10 @@ var enStrings = {
         lg: {
             addNewItem: "Add New Rule",
             empty_tab: "Create a rule to customize the flow of the survey.",
+            logicPlaceholderTitle: "No logical rules",
+            logicPlaceholderTitleMobile: "No logical rules",
+            logicPlaceholderDescription: "Create a rule to customize the flow of the survey.",
+            logicPlaceholderDescriptionMobile: "Create a rule to customize the flow of the survey.",
             page_visibilityName: "Show/hide page",
             page_enableName: "Enable/disable page",
             page_requireName: "Make page required",
@@ -36813,7 +37221,7 @@ var SurveyHelper = /** @class */ (function () {
             return false;
         return true;
     };
-    SurveyHelper.scrollIntoViewIfNeeded = function (el, getOptions, scrollIfElementBiggerThanContainer) {
+    SurveyHelper.isNeedScrollIntoView = function (el, scrollIfElementBiggerThanContainer) {
         if (scrollIfElementBiggerThanContainer === void 0) { scrollIfElementBiggerThanContainer = false; }
         if (!el || !el.scrollIntoView)
             return;
@@ -36823,15 +37231,23 @@ var SurveyHelper = /** @class */ (function () {
             return;
         var height = scrollableDiv.clientHeight;
         if (rect.top < scrollableDiv.offsetTop) {
-            el.scrollIntoView(getOptions ? getOptions(true) : true);
+            return "top";
         }
         else {
             var offsetTop = height + scrollableDiv.offsetTop;
             if (rect.bottom > offsetTop && (rect.height < height || scrollIfElementBiggerThanContainer)) {
-                el.scrollIntoView(getOptions ? getOptions(false) : false);
+                return "bottom";
             }
         }
     };
+    SurveyHelper.scrollIntoViewIfNeeded = function (el, getOptions, scrollIfElementBiggerThanContainer) {
+        if (scrollIfElementBiggerThanContainer === void 0) { scrollIfElementBiggerThanContainer = false; }
+        var isNeedScroll = SurveyHelper.isNeedScrollIntoView(el, scrollIfElementBiggerThanContainer);
+        if (!isNeedScroll)
+            return;
+        var isNeedScrollToTop = isNeedScroll === "top";
+        el.scrollIntoView(getOptions ? getOptions(isNeedScrollToTop) : isNeedScrollToTop);
+    };
     SurveyHelper.getScrollableDiv = function (el) {
         while (!!el) {
             if (!!el.id && el.id.indexOf("scrollableDiv") > -1)
@@ -38077,9 +38493,10 @@ var QuestionToolbox = /** @class */ (function (_super) {
         var newItems = property.choices.map(function (ch) {
             var newJson = (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__assign)({}, parentItem.json);
             newJson[propName] = ch;
+            var newId = parentItem.id != ch ? ch : parentItem.id + "-default";
             var innerItem = new QuestionToolboxItem({
-                id: ch,
-                name: ch,
+                id: newId,
+                name: newId,
                 title: _editorLocalization__WEBPACK_IMPORTED_MODULE_2__.editorLocalization.getPropertyValueInEditor(propName, ch),
                 className: QuestionToolboxItem.getItemClassNames() + " svc-toolbox__item-subtype",
                 json: newJson,
@@ -38667,7 +39084,7 @@ var QuestionToolbox = /** @class */ (function (_super) {
         var iconName = json.iconName ? json.iconName : QuestionToolbox.defaultIconName;
         var title = _editorLocalization__WEBPACK_IMPORTED_MODULE_2__.editorLocalization.getString("qt." + json.name);
         if (!title || title == json.name) {
-            title = json.title;
+            title = this.getTitleFromJsonTitle(json.title, json.name);
         }
         if (!title) {
             title = json.name;
@@ -38691,6 +39108,21 @@ var QuestionToolbox = /** @class */ (function (_super) {
         });
         return this.getOrCreateToolboxItem(item);
     };
+    QuestionToolbox.prototype.getTitleFromJsonTitle = function (title, name) {
+        if (!title)
+            return title;
+        if (typeof title === "string")
+            return title;
+        if (typeof title !== "object")
+            return title;
+        for (var key in title) {
+            var loc = _editorLocalization__WEBPACK_IMPORTED_MODULE_2__.editorLocalization.locales[key];
+            if (title[key] && loc && loc.qt) {
+                loc.qt[name] = title[key];
+            }
+        }
+        return _editorLocalization__WEBPACK_IMPORTED_MODULE_2__.editorLocalization.getString("qt." + name);
+    };
     QuestionToolbox.prototype.getQuestionJSON = function (question) {
         var json = new survey_core__WEBPACK_IMPORTED_MODULE_1__.JsonObject().toJsonObject(question);
         json.type = question.getType();
@@ -40057,6 +40489,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   themeModelPropertyGridDefinition: () => (/* reexport safe */ _components_tabs_theme_model_definition__WEBPACK_IMPORTED_MODULE_18__.themeModelPropertyGridDefinition),
 /* harmony export */   toggleHovered: () => (/* reexport safe */ _utils_utils__WEBPACK_IMPORTED_MODULE_73__.toggleHovered),
 /* harmony export */   translationCss: () => (/* reexport safe */ _components_tabs_translation_theme__WEBPACK_IMPORTED_MODULE_21__.translationCss),
+/* harmony export */   trimBoxShadowValue: () => (/* reexport safe */ _components_tabs_theme_custom_questions_shadow_effects__WEBPACK_IMPORTED_MODULE_12__.trimBoxShadowValue),
 /* harmony export */   trimEmptyFields: () => (/* reexport safe */ _utils_utils__WEBPACK_IMPORTED_MODULE_73__.trimEmptyFields),
 /* harmony export */   undoRedoTransaction: () => (/* reexport safe */ _plugins_undo_redo__WEBPACK_IMPORTED_MODULE_79__.undoRedoTransaction),
 /* harmony export */   updateBackgroundCornerRadiusJSON: () => (/* reexport safe */ _components_tabs_theme_custom_questions_background_corner_radius__WEBPACK_IMPORTED_MODULE_14__.updateBackgroundCornerRadiusJSON),
@@ -40155,7 +40588,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_87__ = __webpack_require__(/*! survey-core */ "survey-core");
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_87___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_87__);
 var Version;
-Version = "".concat("1.12.3");
+Version = "".concat("1.12.4");
 //should be loaded before other styles for easier override 
 __webpack_require__(/*! ../utils/context-button.scss */ "./src/utils/context-button.scss");
 
@@ -40263,7 +40696,7 @@ __webpack_require__(/*! ../utils/layout.scss */ "./src/utils/layout.scss");
 __webpack_require__(/*! ../custom-questions/boolean-switch.scss */ "./src/custom-questions/boolean-switch.scss");
 
 survey_core__WEBPACK_IMPORTED_MODULE_87__.settings.supportCreatorV2 = true;
-(0,survey_core__WEBPACK_IMPORTED_MODULE_87__.checkLibraryVersion)("".concat("1.12.3"), "survey-creator-core");
+(0,survey_core__WEBPACK_IMPORTED_MODULE_87__.checkLibraryVersion)("".concat("1.12.4"), "survey-creator-core");
 
 })();