survey-creator-core 2.0.0-rc.9 → 2.0.1

package/fesm/survey-creator-core.js

@@ -1,12 +1,12 @@
 /*!
- * SurveyJS Creator v2.0.0-rc.9
+ * SurveyJS Creator v2.0.1
  * (c) 2015-2025 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
  */
 
 import * as Survey from 'survey-core';
-import { surveyLocalization, Serializer, SurveyModel, Helpers, QuestionFactory, CustomWidgetCollection, defaultCss, settings as settings$1, MatrixDropdownColumn, ItemValue, JsonError, property, Base, Action, ComputedUpdater, ActionContainer, propertyArray, AdaptiveActionContainer, AnimationBoolean, CssClassBuilder, DragOrClickHelper, ElementFactory, ComponentCollection, JsonObject, ListModel, EventBase, createDropdownActionModel, surveyCss, defaultThemeName, ConditionsParser, SurveyTrigger, QuestionMatrixDropdownModelBase, QuestionPanelDynamicModel, ConditionRunner, ExpressionRunner, FunctionFactory, QuestionButtonGroupModel, QuestionTextBase, DragDropCore, PageModel, DragTypeOverMeEnum, getIconNameFromProxy, prepareElementForVerticalAnimation, cleanHtmlElementAfterAnimation, LocalizableString, QuestionCommentModel, createPopupModelWithListModel, defaultActionBarCss, createDropdownActionModelAdvanced, PopupModel, getActionDropdownButtonTarget, AnimationGroup, activateLazyRenderingChecks, CharacterCounter, QuestionImagePickerModel, QuestionMultipleTextModel, QuestionMatrixDropdownModel, QuestionMatrixDynamicModel, QuestionMatrixModel, QuestionSelectBase, MultipleTextItemModel, addIconsToThemeSet, SvgRegistry, hasLicense, slk, Notifier, SvgThemeSets, IsTouch, SurveyElement, Question, PanelModel, DragDropChoices, chooseFiles, classesToSelector, PanelModelBase, QuestionHtmlModel, QuestionNonValue, QuestionTextModel, QuestionFileModel, QuestionRatingModel, renamedIcons, JsonObjectProperty, checkLibraryVersion } from 'survey-core';
+import { surveyLocalization, Serializer, SurveyModel, Helpers, QuestionFactory, CustomWidgetCollection, defaultCss, settings as settings$1, MatrixDropdownColumn, ItemValue, JsonError, property, Base, Action, ComputedUpdater, ActionContainer, propertyArray, AdaptiveActionContainer, AnimationBoolean, CssClassBuilder, DragOrClickHelper, ElementFactory, ComponentCollection, JsonObject, ListModel, EventBase, createDropdownActionModel, surveyCss, defaultThemeName, ConditionsParser, SurveyTrigger, QuestionMatrixDropdownModelBase, QuestionPanelDynamicModel, ConditionRunner, ExpressionRunner, FunctionFactory, QuestionButtonGroupModel, QuestionTextBase, LocalizableString, PageModel, QuestionCommentModel, createPopupModelWithListModel, defaultActionBarCss, createDropdownActionModelAdvanced, PopupModel, getActionDropdownButtonTarget, prepareElementForVerticalAnimation, cleanHtmlElementAfterAnimation, DragDropCore, getIconNameFromProxy, AnimationGroup, activateLazyRenderingChecks, CharacterCounter, QuestionImagePickerModel, QuestionMultipleTextModel, QuestionMatrixDropdownModel, QuestionMatrixDynamicModel, QuestionMatrixModel, QuestionSelectBase, MultipleTextItemModel, addIconsToThemeSet, SvgRegistry, hasLicense, slk, Notifier, SvgThemeSets, IsTouch, SurveyElement, Question, PanelModel, DragDropChoices, chooseFiles, classesToSelector, PanelModelBase, QuestionHtmlModel, QuestionNonValue, QuestionTextModel, QuestionFileModel, QuestionRatingModel, renamedIcons, JsonObjectProperty, checkLibraryVersion } from 'survey-core';
 
 // Uncomment the line below if you create a custom dictionary
 // import { editorLocalization } from "survey-creator-core";
@@ -2293,6 +2293,9 @@ surveyLocalization.onGetExternalString = (name, locale) => {
 function getLocString(strName, locale = null) {
     return editorLocalization.getString(strName, locale);
 }
+function getLocaleStrings(loc) {
+    return editorLocalization.getLocaleStrings(loc);
+}
 var defaultStrings = enStrings;
 function setupLocale(localeConfig) {
     editorLocalization.setupLocale(localeConfig.localeCode, localeConfig.strings);
@@ -3584,22 +3587,6 @@ function getNextValue(prefix, values, isText) {
     }
     return isText ? "" : prefix + 1;
 }
-function propertyExists(obj, propertyName) {
-    let result = true;
-    if (!!obj && typeof obj.getType === "function") {
-        const property = Serializer.findProperty(obj.getType(), propertyName);
-        result = !!property;
-    }
-    return result;
-}
-function isPropertyVisible(obj, propertyName) {
-    let result = true;
-    if (!!obj && typeof obj.getType === "function") {
-        const property = Serializer.findProperty(obj.getType(), propertyName);
-        result = !property || property.visible;
-    }
-    return result;
-}
 function getQuestionFromObj(obj) {
     return (obj instanceof MatrixDropdownColumn) ? obj.templateQuestion : obj;
 }
@@ -3762,23 +3749,12 @@ class SurveyHelper {
         }
         return result;
     }
-    static isPropertyVisible(obj, property, options = null, showMode = null, parentObj = null, parentProperty = null) {
-        if (!property || !property.visible)
-            return false;
-        if (!!showMode && !!property.showMode && showMode !== property.showMode)
+    static isPropertyVisible(obj, prop, options = null, showMode = null, parentObj = null, parentProperty = null) {
+        if (!prop || !prop.visible)
             return false;
-        if (!!property.isVisible &&
-            !!obj.getLayoutType &&
-            !property["isVisible"](obj.getLayoutType(), null))
-            return false;
-        var canShow = !!options
-            ? (object, property) => {
-                return options.onCanShowPropertyCallback(object, property, showMode, parentObj, parentProperty);
-            }
-            : null;
-        if (!!canShow && !canShow(obj, property))
+        if (!!showMode && !!prop.showMode && showMode !== prop.showMode && prop.locationInTable !== "both")
             return false;
-        return true;
+        return !options || options.onCanShowPropertyCallback(obj, prop, showMode, parentObj, parentProperty);
     }
     static isNeedScrollIntoView(el, scrollIfElementBiggerThanContainer = false) {
         if (!el || !el.scrollIntoView)
@@ -13188,7 +13164,7 @@ class SurveyQuestionProperties {
         const isColumn = this.isColumnObj;
         for (var i = 0; i < this.properties.length; i++) {
             const prop = this.properties[i];
-            if (this.isJSONPropertyVisible(prop) && !usedProperties[prop.name] && (!isFormMode || prop.showMode === "form" || isColumn && prop.availableInMatrixColumn)) {
+            if (this.isJSONPropertyVisible(prop) && !usedProperties[prop.name] && (!isFormMode || prop.locationInTable === "both" || prop.showMode === "form" || isColumn && prop.availableInMatrixColumn)) {
                 res.push(prop);
             }
         }
@@ -13737,8 +13713,8 @@ class PropertyJSONGenerator {
             this.options.onPropertyEditorCreatedCallback(this.obj, prop, q);
         }
     }
-    getVisibilityOnEvent(prop, showMode = "") {
-        return this.options.onCanShowPropertyCallback(this.obj, prop, showMode, this.parentObj, this.parentProperty);
+    getVisibilityOnEvent(prop) {
+        return this.options.onCanShowPropertyCallback(this.obj, prop, undefined, this.parentObj, this.parentProperty);
     }
     isPropertyReadOnly(prop) {
         return PropertyJSONGenerator.isPropertyReadOnly(prop, this.options, this.obj, this.parentObj, this.parentProperty);
@@ -13856,10 +13832,8 @@ class PropertyJSONGenerator {
         return res;
     }
     createQuestionJSON(obj, prop, title, isColumn = false, context) {
-        var isVisible = this.isPropertyVisible(prop, isColumn ? "list" : "");
-        if (!isVisible && isColumn)
-            return null;
-        var json = PropertyGridEditorCollection.getJSON(obj, prop, this.options, context, this.propertyGridDefinition);
+        //if(isColumn && !SurveyHelper.isPropertyVisible(this.obj, prop, undefined, isColumn ? "list" : "")) return null;
+        const json = PropertyGridEditorCollection.getJSON(obj, prop, this.options, context, this.propertyGridDefinition);
         if (!json)
             return null;
         json.name = prop.name;
@@ -13912,11 +13886,6 @@ class PropertyJSONGenerator {
         }
         return json;
     }
-    isPropertyVisible(prop, showMode) {
-        if (!prop.visible)
-            return false;
-        return !showMode || !prop.showMode || showMode == prop.showMode;
-    }
     getPanelTitle(name, title) {
         if (!!title)
             return title;
@@ -14513,9 +14482,6 @@ class PropertyGridEditor {
         const surveyPropertyEditor = editor.createPropertyEditorSetup(obj, property, question, options);
         if (!surveyPropertyEditor)
             return null;
-        if (property.type !== "condition") {
-            surveyPropertyEditor.editSurvey.css = defaultCss;
-        }
         if (question.isReadOnly) {
             surveyPropertyEditor.editSurvey.mode = "display";
         }
@@ -15570,483 +15536,6 @@ __decorate([
     property({ defaultValue: "icon" })
 ], MenuButton.prototype, "contentType", void 0);
 
-function calculateIsEdge(dropTargetNode, clientY) {
-    const rect = dropTargetNode.getBoundingClientRect();
-    return clientY - rect.top <= DragDropSurveyElements.edgeHeight || rect.bottom - clientY <= DragDropSurveyElements.edgeHeight;
-}
-function calculateIsSide(dropTargetNode, clientX) {
-    const rect = dropTargetNode.getBoundingClientRect();
-    return clientX - rect.left <= DragDropSurveyElements.edgeHeight || rect.right - clientX <= DragDropSurveyElements.edgeHeight;
-}
-function calculateDragOverLocation(clientX, clientY, rect, direction = null) {
-    const tg = rect.height / rect.width;
-    const dx = clientX - rect.x;
-    const dy = clientY - rect.y;
-    if (direction == "top-bottom") {
-        if (dy >= rect.height / 2) {
-            return DragTypeOverMeEnum.Bottom;
-        }
-        else {
-            return DragTypeOverMeEnum.Top;
-        }
-    }
-    if (direction == "left-right") {
-        if (dx >= rect.width / 2) {
-            return DragTypeOverMeEnum.Right;
-        }
-        else {
-            return DragTypeOverMeEnum.Left;
-        }
-    }
-    if (dy >= tg * dx) {
-        if (dy >= -tg * dx + rect.height) {
-            return DragTypeOverMeEnum.Bottom;
-        }
-        else {
-            return DragTypeOverMeEnum.Left;
-        }
-    }
-    else {
-        if (dy >= -tg * dx + rect.height) {
-            return DragTypeOverMeEnum.Right;
-        }
-        else {
-            return DragTypeOverMeEnum.Top;
-        }
-    }
-}
-function isPanelDynamic(element) {
-    return element instanceof QuestionPanelDynamicModel;
-}
-class DragDropSurveyElements extends DragDropCore {
-    constructor() {
-        super(...arguments);
-        this.insideContainer = null;
-        this.prevIsEdge = null;
-        // protected ghostSurveyElement: IElement = null;
-        this.dragOverIndicatorElement = null;
-        this.isDraggedElementSelected = false;
-        this.doBanDropHere = () => {
-            this.removeDragOverMarker(this.dragOverIndicatorElement);
-            this.removeDragOverMarker(this.dropTarget);
-        };
-        this.doDrop = () => {
-            var _a;
-            if (!this.dropTarget)
-                return;
-            const page = this.parentElement;
-            const dragged = this.draggedElement;
-            const src = this.draggedElement;
-            if (dragged.isPage && dragged instanceof PageModel) {
-                const survey = dragged.survey;
-                const indexOfDraggedPage = survey.pages.indexOf(dragged);
-                survey.pages.splice(indexOfDraggedPage, 1);
-                const indexOfDropTarget = survey.pages.indexOf(this.dropTarget) + (this.dragOverLocation === DragTypeOverMeEnum.Top ? 0 : 1);
-                survey.pages.splice(indexOfDropTarget, 0, dragged);
-                if (indexOfDraggedPage !== indexOfDropTarget) {
-                    dragged["draggedFrom"] = indexOfDraggedPage < indexOfDropTarget ? indexOfDraggedPage : indexOfDraggedPage + 1;
-                }
-                return dragged;
-            }
-            const convertLocation = () => {
-                switch (this.dragOverLocation) {
-                    case 4: return "top";
-                    case 5: return "right";
-                    case 6: return "bottom";
-                    case 7: return "left";
-                    default: return "bottom";
-                }
-            };
-            const srcContainer = src.parent || src.page;
-            if (!!srcContainer) {
-                page.survey.startMovingQuestion();
-                srcContainer.removeElement(src);
-            }
-            let dest = ((_a = this.dragOverIndicatorElement) === null || _a === void 0 ? void 0 : _a.isPanel) ? this.dragOverIndicatorElement : this.dropTarget;
-            if (isPanelDynamic(dest) && this.insideContainer)
-                dest = dest.template;
-            if (dest.isPage && dest.elements.length > 0 && !this.insideContainer)
-                return;
-            const isTargetIsContainer = dest.isPanel || dest.isPage;
-            if (isTargetIsContainer && this.insideContainer) {
-                dest.insertElement(src);
-            }
-            else {
-                const destParent = dest.parent || dest.page;
-                if (destParent)
-                    destParent.insertElement(src, dest, convertLocation());
-            }
-            page.survey.stopMovingQuestion();
-            return dragged;
-        };
-    }
-    get draggedElementType() {
-        if (!!this.draggedElement && this.draggedElement.isPage) {
-            return "survey-page";
-        }
-        return "survey-element";
-    }
-    get maxNestedPanels() { return this.onGetMaxNestedPanels ? this.onGetMaxNestedPanels() : -1; }
-    // private isRight: boolean;
-    // protected prevIsRight: boolean;
-    startDragToolboxItem(event, draggedElementJson, toolboxItemModel) {
-        const draggedElement = this.createElementFromJson(draggedElementJson);
-        draggedElement.toolboxItemTitle = toolboxItemModel.title;
-        draggedElement.toolboxItemIconName = toolboxItemModel.iconName;
-        this.startDrag(event, draggedElement);
-    }
-    startDragSurveyElement(event, draggedElement, isElementSelected) {
-        this.isDraggedElementSelected = isElementSelected;
-        this.startDrag(event, draggedElement);
-    }
-    getShortcutText(draggedElement) {
-        return draggedElement.toolboxItemTitle || super.getShortcutText(draggedElement);
-    }
-    createDraggedElementShortcut(text, draggedElementNode, event) {
-        const draggedElementShortcut = document.createElement("div");
-        draggedElementShortcut.style.display = "flex";
-        const textSpan = document.createElement("span");
-        textSpan.className = "svc-dragged-element-shortcut__text";
-        textSpan.innerText = text;
-        if (this.draggedElement.toolboxItemIconName) {
-            draggedElementShortcut.appendChild(this.createDraggedElementIcon());
-        }
-        draggedElementShortcut.appendChild(textSpan);
-        draggedElementShortcut.className = this.getDraggedElementClass();
-        return draggedElementShortcut;
-    }
-    createDraggedElementIcon() {
-        const span = document.createElement("span");
-        span.className = "svc-dragged-element-shortcut__icon";
-        const iconName = getIconNameFromProxy(this.draggedElement.toolboxItemIconName);
-        const svgString = `<svg class="sv-svg-icon" role="img"><use xlink:href="#${iconName}"></use></svg>`;
-        span.innerHTML = svgString;
-        return span;
-    }
-    getDraggedElementClass() {
-        let 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;
-    }
-    createElementFromJson(json) {
-        const element = this.createNewElement(json);
-        if (element["setSurveyImpl"]) {
-            element["setSurveyImpl"](this.survey);
-        }
-        else {
-            element["setData"](this.survey);
-        }
-        element.renderWidth = "100%";
-        return element;
-    }
-    createNewElement(json) {
-        var newElement = Serializer.createClass(json["type"]);
-        new JsonObject().toObject(json, newElement);
-        return newElement;
-    }
-    findDropTargetNodeByDragOverNode(dragOverNode) {
-        const ghostRow = dragOverNode.closest(".svc-row--ghost");
-        if (!!ghostRow) {
-            const ghostDataAttrSelector = "[data-sv-drop-target-survey-element='sv-drag-drop-ghost-survey-element-name']";
-            const ghostNode = dragOverNode.closest(ghostDataAttrSelector) || dragOverNode.querySelector(ghostDataAttrSelector);
-            if (!!ghostNode) {
-                return ghostNode;
-            }
-        }
-        const dropTargetNode = dragOverNode.closest(this.dropTargetDataAttributeName);
-        return dropTargetNode;
-    }
-    getDropTargetByDataAttributeValue(dataAttributeValue, dropTargetNode, event) {
-        const oldDragOverIndicatorElement = this.dragOverIndicatorElement;
-        if (!dataAttributeValue) {
-            // panel dynamic
-            const nearestDropTargetElement = dropTargetNode.parentElement.closest(this.dropTargetDataAttributeName);
-            dataAttributeValue = this.getDataAttributeValueByNode(nearestDropTargetElement);
-        }
-        if (!dataAttributeValue) {
-            throw new Error("Can't find drop target survey element name");
-        }
-        if (dataAttributeValue === DragDropSurveyElements.ghostSurveyElementName) {
-            return this.prevDropTarget;
-        }
-        // drop to new page
-        if (dataAttributeValue === "newGhostPage") {
-            return DragDropSurveyElements.newGhostPage;
-        }
-        // drop to page
-        let page = this.survey.getPageByName(dataAttributeValue);
-        if (page) {
-            return page;
-        }
-        // drop to question or panel
-        let dropTarget;
-        let dragOverElement;
-        this.survey.pages.forEach((page) => {
-            const question = page.getElementByName(dataAttributeValue);
-            if (question) {
-                dropTarget = question;
-                dragOverElement = question;
-            }
-        });
-        // drop to matrix detail panel
-        if ((dropTarget.getType() === "matrixdropdown" || dropTarget.getType() === "matrixdynamic") && dropTarget.detailPanelMode !== "none" && this.insideContainer) {
-            dropTarget = dropTarget.detailPanel;
-        }
-        // drop to question
-        //question inside paneldymanic
-        if (!dropTarget.page) {
-            const nearestDropTargetPageElement = dropTargetNode.parentElement.closest("[data-sv-drop-target-page]");
-            dataAttributeValue = nearestDropTargetPageElement.dataset.svDropTargetPage;
-            let page = this.survey.getPageByName(dataAttributeValue);
-            dropTarget.__page = page;
-        }
-        this.dragOverIndicatorElement = dragOverElement;
-        if (this.dragOverIndicatorElement != oldDragOverIndicatorElement) {
-            this.removeDragOverMarker(oldDragOverIndicatorElement);
-        }
-        return dropTarget;
-        // EO drop to question or panel
-    }
-    isDropTargetValid(dropTarget, dropTargetNode, dragOverLocation = DragTypeOverMeEnum.Top) {
-        if (!dropTarget)
-            return false;
-        if (dropTarget === this.draggedElement)
-            return false;
-        if (this.draggedElement.getType() === "paneldynamic" && dropTarget === this.draggedElement.template) {
-            return false;
-        }
-        if (this.maxNestedPanels >= 0 && this.draggedElement.isPanel) {
-            const pnl = this.draggedElement;
-            if (pnl.deepNested === undefined) {
-                pnl.deepNested = this.getMaximumNestedPanelCount(pnl, 0);
-            }
-            let len = SurveyHelper.getElementDeepLength(dropTarget);
-            if (dragOverLocation !== DragTypeOverMeEnum.InsideEmptyPanel && dropTarget.isPanel)
-                len--;
-            if (this.maxNestedPanels < len + pnl.deepNested)
-                return false;
-        }
-        if (DragDropSurveyElements.restrictDragQuestionBetweenPages &&
-            this.shouldRestricDragQuestionBetweenPages(dropTarget)) {
-            return false;
-        }
-        return true;
-    }
-    getMaximumNestedPanelCount(panel, deep) {
-        let max = deep;
-        panel.elements.forEach(el => {
-            if (el.isPanel) {
-                const pDeep = this.getMaximumNestedPanelCount(el, deep + 1);
-                if (pDeep > max) {
-                    max = pDeep;
-                }
-            }
-        });
-        return max;
-    }
-    shouldRestricDragQuestionBetweenPages(dropTarget) {
-        const oldPage = this.draggedElement["page"];
-        const newPage = dropTarget.isPage ? dropTarget : dropTarget["page"];
-        // if oldPage === null then it is drop from the toolbox
-        return oldPage && oldPage !== newPage;
-    }
-    findDeepestDropTargetChild(parent) {
-        const selector = this.dropTargetDataAttributeName;
-        let result = parent;
-        while (!!parent) {
-            result = parent;
-            parent = parent.querySelector(selector);
-        }
-        return result;
-    }
-    isAllowDragOver(dropTarget, dragOverLocation) {
-        if (!this.survey || this.survey.onDragDropAllow.isEmpty)
-            return true;
-        const allowOptions = {
-            allow: true,
-            parent: this.parentElement,
-            source: this.draggedElement,
-            toElement: dropTarget,
-            draggedElement: this.draggedElement,
-            fromElement: this.draggedElement.parent,
-            target: dropTarget,
-            insertAfter: undefined,
-            insertBefore: undefined,
-            allowDropNextToAnother: true
-        };
-        if (dragOverLocation === DragTypeOverMeEnum.Bottom || dragOverLocation === DragTypeOverMeEnum.Right) {
-            allowOptions.insertAfter = dropTarget;
-        }
-        if (dragOverLocation === DragTypeOverMeEnum.Top || dragOverLocation === DragTypeOverMeEnum.Left) {
-            allowOptions.insertBefore = dropTarget;
-        }
-        this.survey.onDragDropAllow.fire(this.survey, allowOptions);
-        if (!allowOptions.allowDropNextToAnother) {
-            if (dragOverLocation === DragTypeOverMeEnum.Left) {
-                this.dragOverLocation = DragTypeOverMeEnum.Top;
-            }
-            if (dragOverLocation === DragTypeOverMeEnum.Right) {
-                this.dragOverLocation = DragTypeOverMeEnum.Bottom;
-            }
-        }
-        return allowOptions.allow;
-    }
-    dragOverCore(dropTarget, dragOverLocation) {
-        const oldDragOverIndicatorElement = this.dragOverIndicatorElement;
-        const oldDropTarget = this.dropTarget;
-        if (this.isSameElement(dropTarget)) {
-            this.allowDropHere = false;
-            return;
-        }
-        this.dropTarget = dropTarget;
-        this.dragOverLocation = dragOverLocation;
-        this.parentElement = this.dropTarget.isPage
-            ? this.dropTarget
-            : (this.dropTarget.page || this.dropTarget.__page);
-        if (!this.isAllowDragOver(dropTarget, dragOverLocation)) {
-            this.allowDropHere = false;
-            return;
-        }
-        if (dragOverLocation == DragTypeOverMeEnum.InsideEmptyPanel) {
-            this.dragOverIndicatorElement = this.dropTarget;
-            this.dragOverIndicatorElement.dragTypeOverMe = DragTypeOverMeEnum.InsideEmptyPanel;
-        }
-        else {
-            const row = this.parentElement.dragDropFindRow(this.dropTarget);
-            if (!!row && row.elements.length > 1 && (this.dragOverLocation === DragTypeOverMeEnum.Top || this.dragOverLocation === DragTypeOverMeEnum.Bottom)) {
-                row.dragTypeOverMe = this.dragOverLocation;
-                this.dragOverIndicatorElement = row;
-            }
-            else {
-                this.dropTarget.dragTypeOverMe = this.dragOverLocation;
-                this.dragOverIndicatorElement = this.dropTarget;
-            }
-        }
-        if (this.dragOverIndicatorElement != oldDragOverIndicatorElement)
-            this.removeDragOverMarker(oldDragOverIndicatorElement);
-        if (this.dropTarget != oldDropTarget)
-            this.removeDragOverMarker(oldDropTarget);
-    }
-    isSameElement(target) {
-        while (!!target) {
-            if (target === this.draggedElement)
-                return true;
-            target = target.parent;
-        }
-        return false;
-    }
-    isDragInsideItself(dragOverNodes) {
-        let result = false;
-        dragOverNodes.forEach((node) => {
-            if (node.classList.contains("svc-question__content--dragged")) {
-                result = true;
-            }
-        });
-        return result;
-    }
-    dragOver(event) {
-        const dropTargetNode = this.findDropTargetNodeFromPoint(event.clientX, event.clientY);
-        if (!dropTargetNode) {
-            this.banDropHere();
-            return;
-        }
-        if (document && document.elementsFromPoint && this.isDragInsideItself(document.elementsFromPoint(event.clientX, event.clientY))) {
-            this.banDropHere();
-            return null;
-        }
-        const oldInsideContainer = this.insideContainer;
-        this.insideContainer = !calculateIsEdge(dropTargetNode, event.clientY) && !calculateIsSide(dropTargetNode, event.clientX);
-        const dropTarget = this.getDropTargetByNode(dropTargetNode, event);
-        if (!!oldInsideContainer != !!this.insideContainer)
-            dropTarget.dragTypeOverMe = null;
-        const dropTargetRect = dropTargetNode.getBoundingClientRect();
-        const calcDirection = !settings.dragDrop.allowDragToTheSameLine || (!!this.draggedElement && this.draggedElement.isPage) ? "top-bottom" : null;
-        let dragOverLocation = calculateDragOverLocation(event.clientX, event.clientY, dropTargetRect, calcDirection);
-        if (!this.draggedElement.isPage && dropTarget && ((dropTarget.isPanel || dropTarget.isPage) && dropTarget.elements.length === 0 || isPanelDynamic(dropTarget) && dropTarget.template.elements.length == 0)) {
-            if (dropTarget.isPage || this.insideContainer) {
-                dragOverLocation = DragTypeOverMeEnum.InsideEmptyPanel;
-            }
-        }
-        const options = {
-            survey: this.survey,
-            draggedSurveyElement: this.draggedElement,
-            dragOverSurveyElement: dropTarget,
-            clientX: event.clientX,
-            clientY: event.clientY,
-            dragOverRect: dropTargetRect,
-            insideContainer: this.insideContainer,
-            dragOverLocation
-        };
-        if (this.onDragOverLocationCalculating) {
-            this.onDragOverLocationCalculating(options);
-            dragOverLocation = options.dragOverLocation;
-            this.insideContainer = options.insideContainer;
-        }
-        const isDropTargetValid = this.isDropTargetValid(dropTarget, dropTargetNode, dragOverLocation);
-        if (!isDropTargetValid) {
-            this.banDropHere();
-            return;
-        }
-        this.allowDropHere = true;
-        this.dragOverCore(dropTarget, dragOverLocation);
-    }
-    onStartDrag() {
-        // this.ghostSurveyElement = this.createGhostSurveyElement();
-        this.draggedElement.isDragMe = true;
-    }
-    moveElementInPanel(panel, src, target, targetIndex) {
-        var srcIndex = src.parent.elements.indexOf(src);
-        if (targetIndex > srcIndex) {
-            targetIndex--;
-        }
-        if (src === target && srcIndex === targetIndex) {
-            return;
-        }
-        panel.removeElement(src);
-        panel.addElement(target, targetIndex);
-    }
-    removeDragOverMarker(dropTarget) {
-        if (!!dropTarget) {
-            dropTarget.dragTypeOverMe = null;
-        }
-    }
-    clear() {
-        this.insideContainer = null;
-        this.removeDragOverMarker(this.prevDropTarget);
-        this.removeDragOverMarker(this.dropTarget);
-        this.removeDragOverMarker(this.dragOverIndicatorElement);
-        if (!!this.draggedElement) {
-            this.draggedElement.isDragMe = false;
-        }
-        super.clear();
-    }
-    getTargetParent(dropTarget) {
-        let targetParent = dropTarget.isPage || dropTarget.isPanel ? dropTarget : dropTarget.parent;
-        if (dropTarget.getType() === "paneldynamic") {
-            targetParent = dropTarget.templateValue;
-        }
-        return targetParent;
-    }
-    getTargetRow(dropTarget) {
-        const targetParent = this.getTargetParent(dropTarget);
-        let targetRow;
-        targetParent.rows.forEach((row) => {
-            if (row.elements.indexOf(dropTarget) !== -1) {
-                targetRow = row;
-            }
-        });
-        return targetRow;
-    }
-}
-DragDropSurveyElements.newGhostPage = null;
-DragDropSurveyElements.restrictDragQuestionBetweenPages = false;
-DragDropSurveyElements.edgeHeight = 30;
-DragDropSurveyElements.nestedPanelDepth = -1;
-DragDropSurveyElements.ghostSurveyElementName = "sv-drag-drop-ghost-survey-element-name"; // before renaming use globa search (we have also css selectors)
-
 class SurveyElementActionContainer extends AdaptiveActionContainer {
     needToShrink(item, shrinkTypeConverterAction) {
         return (item.innerItem.location == "start" && shrinkTypeConverterAction || item.innerItem.location != "start");
@@ -16104,498 +15593,26 @@ class SurveyElementActionContainer extends AdaptiveActionContainer {
             this.setModeForActions(true);
             return;
         }
-        this.visibleActions.forEach((item) => {
-            if (item.id == "convertTo") {
-                item.mode = "small";
-                return;
-            }
-            if (item.id == "convertInputType") {
-                item.mode = "removed";
-                return;
-            }
-            item.mode = "popup";
-        });
-        this.dotsItem.visible = true;
-        this.hiddenItemsListModel.setItems(items.filter(i => i.mode == "popup").map(i => i.innerItem));
-    }
-}
-class SurveyElementAdornerBase extends Base {
-    get dragInsideCollapsedContainer() {
-        return this.collapsed && this.creator.dragDropSurveyElements.insideContainer;
-    }
-    getAnimatedElement() {
-        return null;
-    }
-    getInnerAnimatedElements() {
-        return [];
-    }
-    getCollapsingCssClassName() {
-        return "svc-question--leave";
-    }
-    getExpandingCssClassName() {
-        return "svc-question--enter";
-    }
-    get hoverDelay() {
-        return this.creator.pageHoverDelay;
-    }
-    hover(e, element) {
-        const processedFlagName = "__svc_question_processed";
-        if (!e[processedFlagName] && e.type === "mouseover") {
-            if (!this.hoverTimeout) {
-                this.hoverTimeout = setTimeout(() => {
-                    this.isHovered = true;
-                    this.hoverTimeout = undefined;
-                }, this.hoverDelay);
-            }
-            e[processedFlagName] = true;
-        }
-        else {
-            clearTimeout(this.hoverTimeout);
-            this.hoverTimeout = undefined;
-            this.isHovered = false;
-        }
-    }
-    getExpandCollapseAnimationOptions() {
-        const beforeRunAnimation = (el, animatingClassName) => {
-            prepareElementForVerticalAnimation(el);
-            const innerAnimatedElements = this.getInnerAnimatedElements();
-            innerAnimatedElements.forEach((elem) => {
-                prepareElementForVerticalAnimation(elem);
-            });
-            innerAnimatedElements.forEach((elem) => {
-                elem.classList.add(animatingClassName);
+        if (this.visibleActions.length > 1) {
+            this.visibleActions.forEach((item) => {
+                if (item.id == "convertTo") {
+                    item.mode = "small";
+                    return;
+                }
+                if (item.id == "convertInputType") {
+                    item.mode = "removed";
+                    return;
+                }
+                item.mode = "popup";
             });
-        };
-        const afterRunAnimation = (el, animatingClassName) => {
-            this.expandCollapseAnimationRunning = false;
-            if (this.surveyElement) {
-                cleanHtmlElementAfterAnimation(el);
-                const innerAnimatedElements = this.getInnerAnimatedElements();
-                innerAnimatedElements.forEach((elem) => {
-                    cleanHtmlElementAfterAnimation(elem);
-                });
-                innerAnimatedElements.forEach((elem) => {
-                    elem.classList.remove(animatingClassName);
-                });
-            }
-        };
-        return {
-            getRerenderEvent: () => this.onElementRerendered,
-            getEnterOptions: () => {
-                const className = this.getExpandingCssClassName();
-                return {
-                    cssClass: className,
-                    onBeforeRunAnimation: (el) => {
-                        beforeRunAnimation(el, className);
-                    },
-                    onAfterRunAnimation: (el) => {
-                        afterRunAnimation(el, className);
-                    },
-                };
-            },
-            getLeaveOptions: () => {
-                const className = this.getCollapsingCssClassName();
-                return {
-                    cssClass: className,
-                    onBeforeRunAnimation: (el) => {
-                        beforeRunAnimation(el, className);
-                    },
-                    onAfterRunAnimation: (el) => {
-                        afterRunAnimation(el, className);
-                    },
-                };
-            },
-            getAnimatedElement: () => this.getAnimatedElement(),
-            isAnimationEnabled: () => this.animationAllowed
-        };
-    }
-    set renderedCollapsed(val) {
-        if (this.animationAllowed && val !== this.renderedCollapsed)
-            this.expandCollapseAnimationRunning = true;
-        this.animationCollapsed.sync(!val);
-    }
-    get renderedCollapsed() {
-        return !!this._renderedCollapsed;
-    }
-    createTopActionContainer() {
-        const actionContainer = new ActionContainer();
-        actionContainer.sizeMode = "small";
-        if (this.creator.expandCollapseButtonVisibility != "never") {
-            actionContainer.setItems([this.expandCollapseAction]);
-            actionContainer.cssClasses = {
-                root: "svc-survey-element-top-toolbar sv-action-bar",
-                item: "svc-survey-element-top-toolbar__item",
-                itemIcon: "svc-survey-element-toolbar-item__icon",
-                itemTitle: "svc-survey-element-toolbar-item__title",
-                itemTitleWithIcon: "svc-survey-element-toolbar-item__title--with-icon",
-            };
-        }
-        return actionContainer;
-    }
-    createActionContainer() {
-        const actionContainer = new SurveyElementActionContainer();
-        actionContainer.dotsItem.popupModel.horizontalPosition = "center";
-        return actionContainer;
-    }
-    get canExpandOnDrag() {
-        return this.surveyElement.isPanel || this.surveyElement.isPage || isPanelDynamic(this.surveyElement);
-    }
-    dragIn() {
-        if (!this.draggedIn) {
-            if (this.canExpandOnDrag && this.collapsed) {
-                this.draggedIn = true;
-                this.dragCollapsedTimer = setTimeout(() => {
-                    this.expandWithDragIn();
-                }, this.creator.expandOnDragTimeOut);
-            }
-        }
-    }
-    expandWithDragIn() {
-        this.collapsed = false;
-        this.dragCollapsedTimer = undefined;
-    }
-    dragOut() {
-        if (this.draggedIn) {
-            clearTimeout(this.dragCollapsedTimer);
-            this.draggedIn = false;
-        }
-    }
-    allowExpandCollapseByDblClick(element) {
-        return true;
-    }
-    dblclick(event) {
-        if (this.allowExpandCollapseByDblClick(event.target)) {
-            if (this.allowExpandCollapse)
-                this.collapsed = !this.collapsed;
-        }
-        event.stopPropagation();
-    }
-    get element() {
-        return this.surveyElement;
-    }
-    constructor(creator, surveyElement) {
-        super();
-        this.creator = creator;
-        this.animationCollapsed = new AnimationBoolean(this.getExpandCollapseAnimationOptions(), (val) => {
-            this._renderedCollapsed = !val;
-        }, () => !this.renderedCollapsed);
-        this.draggedIn = false;
-        this.sidebarFlyoutModeChangedFunc = (_, options) => {
-            if (options.name === "flyoutMode") {
-                this.updateActionsProperties();
-            }
-        };
-        this.creatorOnLocaleChanged = (_, options) => {
-            if (this.surveyElement) {
-                this.updateActionsContainer(this.surveyElement);
-                this.updateActionsProperties();
-            }
-        };
-        this.actionVisibilityCache = {};
-        this.expandCollapseAction = this.getExpandCollapseAction();
-        this.attachToUI(surveyElement);
-    }
-    get isActionContainerCreated() {
-        return !!this.actionContainerValue;
-    }
-    get actionContainer() {
-        if (!this.actionContainerValue) {
-            this.actionContainerValue = this.createActionContainer();
-            if (this.surveyElement) {
-                this.updateActionsContainer(this.surveyElement);
-                this.updateActionsVisibility(false);
-            }
-        }
-        return this.actionContainerValue;
-    }
-    get topActionContainer() {
-        if (!this.topActionContainerValue) {
-            this.topActionContainerValue = this.createTopActionContainer();
-            if (this.surveyElement) {
-                this.updateActionsVisibility(true);
-            }
-        }
-        return this.topActionContainerValue;
-    }
-    static GetAdorner(surveyElement) {
-        return surveyElement.getPropertyValue(SurveyElementAdornerBase.AdornerValueName);
-    }
-    static RestoreStateFor(surveyElement) {
-        const adorner = SurveyElementAdornerBase.GetAdorner(surveyElement);
-        if (!!adorner) {
-            adorner.restoreState();
-        }
-    }
-    restoreState() {
-        var _a;
-        if (!!this.surveyElement) {
-            const state = (_a = this.creator.designerStateManager) === null || _a === void 0 ? void 0 : _a.getElementState(this.surveyElement);
-            this.collapsed = state.collapsed;
-        }
-        if (!this.surveyElement || this.surveyElement.isInteractiveDesignElement) {
-            this.needToRenderContent = !this.collapsed;
-        }
-    }
-    detachElement(surveyElement) {
-        if (surveyElement) {
-            surveyElement.setPropertyValue(SurveyElementAdornerBase.AdornerValueName, null);
-            surveyElement.unRegisterFunctionOnPropertyValueChanged("isSelectedInDesigner", "questionSelected");
-            this.cleanActionsContainer();
-        }
-    }
-    attachElement(surveyElement) {
-        var _a, _b;
-        if (surveyElement) {
-            (_b = (_a = this.creator) === null || _a === void 0 ? void 0 : _a.designerStateManager) === null || _b === void 0 ? void 0 : _b.initForElement(surveyElement);
-            surveyElement.registerFunctionOnPropertyValueChanged("isSelectedInDesigner", (newValue) => {
-                this.onElementSelectedChanged(newValue);
-            }, "questionSelected");
-            this.restoreState();
-            this.updateActionsContainer(surveyElement);
-            this.updateActionsProperties();
-            surveyElement.setPropertyValue(SurveyElementAdornerBase.AdornerValueName, this);
-        }
-    }
-    setSurveyElement(surveyElement) {
-        this.detachOnlyMyElement();
-        this.surveyElement = surveyElement;
-        this.attachElement(this.surveyElement);
-    }
-    checkActionProperties() {
-        if (this.creator.isElementSelected(this.surveyElement)) {
-            this.updateActionsProperties();
-        }
-    }
-    attachToUI(surveyElement, rootElement) {
-        if (!!rootElement) {
-            this.rootElement = rootElement;
-        }
-        if (this.surveyElement != surveyElement) {
-            this.setSurveyElement(surveyElement);
-            this.creator.onLocaleChanded.add(this.creatorOnLocaleChanged);
-            this.creator.sidebar.onPropertyChanged.add(this.sidebarFlyoutModeChangedFunc);
-            this.creator.expandCollapseManager.add(this);
-        }
-    }
-    detachOnlyMyElement() {
-        if (this.surveyElement && this.surveyElement.getPropertyValue(SurveyElementAdornerBase.AdornerValueName) === this && !this.surveyElement.isDisposed) {
-            this.detachElement(this.surveyElement);
-        }
-    }
-    detachFromUI() {
-        this.rootElement = undefined;
-        this.detachOnlyMyElement();
-        this.surveyElement = undefined;
-        this.creator.onLocaleChanded.remove(this.creatorOnLocaleChanged);
-        this.creator.sidebar.onPropertyChanged.remove(this.sidebarFlyoutModeChangedFunc);
-        this.creator.expandCollapseManager.remove(this);
-    }
-    dispose() {
-        this.detachFromUI();
-        this.disposeActions(this.actionContainerValue);
-        this.disposeActions(this.topActionContainerValue);
-        super.dispose();
-        this.sidebarFlyoutModeChangedFunc = undefined;
-        this.animationCollapsed = undefined;
-    }
-    disposeActions(container) {
-        if (!!container && !container.isDisposed) {
-            container.dispose();
-        }
-    }
-    onElementSelectedChanged(isSelected) {
-        if (!isSelected)
-            return;
-        this.updateActionsProperties();
-    }
-    getExpandCollapseAction() {
-        const collapseIcon = "icon-collapsepanel-16x16";
-        const expandIcon = "icon-expandpanel-16x16";
-        return {
-            id: "collapse",
-            css: "sv-action-bar-item--collapse",
-            locTooltipName: new ComputedUpdater(() => this.collapsed ? "ed.expandTooltip" : "ed.collapseTooltip"),
-            iconName: new ComputedUpdater(() => this.collapsed ? expandIcon : collapseIcon),
-            iconSize: "auto",
-            action: () => {
-                this.collapsed = !this.collapsed;
-            }
-        };
-    }
-    cleanActionsContainer() {
-        const container = this.actionContainerValue;
-        if (!container)
-            return;
-        const actions = container.actions;
-        container.setItems([]);
-        actions.forEach(action => action.dispose && action.dispose());
-    }
-    updateActionsContainer(surveyElement) {
-        if (!this.actionContainerValue)
-            return;
-        const actions = [];
-        this.buildActions(actions);
-        this.creator.onElementMenuItemsChanged(surveyElement, actions);
-        this.actionContainerValue.setItems(actions);
-    }
-    updateActionsProperties() {
-        if (this.isDisposed)
-            return;
-        this.updateActionsPropertiesCore();
-    }
-    updateActionsPropertiesCore() {
-        this.updateElementAllowOptions(this.creator.getElementAllowOperations(this.surveyElement), this.isOperationsAllow());
-    }
-    getAllowDragging(options) {
-        return options.allowDragging;
-    }
-    getAllowExpandCollapse(options) {
-        return this.creator.expandCollapseButtonVisibility != "never" && (options.allowExpandCollapse == undefined || !!options.allowExpandCollapse);
-    }
-    updateElementAllowOptions(options, operationsAllow) {
-        this.allowDragging = operationsAllow && this.getAllowDragging(options);
-        this.allowExpandCollapse = this.getAllowExpandCollapse(options);
-        this.allowEditOption = (options.allowEdit == undefined || !!options.allowEdit);
-        this.updateActionVisibility("delete", operationsAllow && options.allowDelete);
-        this.updateActionVisibility("duplicate", operationsAllow && options.allowCopy);
-        this.updateActionVisibility("collapse", this.allowExpandCollapse);
-        if (options.allowShowSettings === undefined) {
-            const settingsVisibility = (options.allowEdit !== undefined) ? (operationsAllow && options.allowEdit) : this.creator.sidebar.flyoutMode;
-            this.updateActionVisibility("settings", settingsVisibility);
+            this.dotsItem.visible = true;
         }
         else {
-            this.updateActionVisibility("settings", options.allowShowSettings);
+            this.visibleActions.forEach(i => i.mode = "small");
         }
-        this.setShowAddQuestionButton(options.allowEdit !== false);
-    }
-    isOperationsAllow() {
-        return !this.creator.readOnly;
-    }
-    updateActionVisibility(id, isVisible) {
-        var _a, _b;
-        var action = ((_a = this.actionContainerValue) === null || _a === void 0 ? void 0 : _a.getActionById(id)) || ((_b = this.topActionContainerValue) === null || _b === void 0 ? void 0 : _b.getActionById(id));
-        if (!action) {
-            this.actionVisibilityCache[id] = isVisible;
-        }
-        else {
-            if (action.visible !== isVisible) {
-                action.visible = isVisible;
-            }
-        }
-    }
-    updateActionsVisibility(isTop) {
-        for (var key in this.actionVisibilityCache) {
-            this.updateActionVisibility(key, this.actionVisibilityCache[key]);
-        }
-    }
-    getActionById(id) {
-        return this.actionContainer.getActionById(id) || this.topActionContainer.getActionById(id);
-    }
-    buildActions(items) {
-        items.push(new Action({
-            id: "duplicate",
-            iconName: "icon-duplicate_16x16",
-            css: "svc-action-bar-item--right",
-            title: this.creator.getLocString("survey.duplicate"),
-            visibleIndex: 10,
-            iconSize: "auto",
-            action: () => this.duplicate(),
-            onFocus: (isMouse, event) => this.disableActionFocusing(isMouse, event)
-        }));
-        items.push(new Action({
-            id: "settings",
-            iconName: "icon-settings_16x16",
-            css: "svc-action-bar-item--right",
-            title: this.creator.getLocString("ed.settings"),
-            locTooltipName: "ed.settingsTooltip",
-            visibleIndex: 20,
-            iconSize: "auto",
-            action: () => {
-                this.creator.setShowSidebar(true, true);
-                if (!this.creator.isMobileView) {
-                    this.creator.sidebar.executeOnExpand(() => {
-                        this.creator.propertyGrid.getAllQuestions()[0].focus();
-                    });
-                }
-            }
-        }));
-        items.push(new Action({
-            id: "delete",
-            iconName: "icon-delete_16x16",
-            css: "svc-action-bar-item--right",
-            //needSeparator: items.length > 0,
-            title: this.creator.getLocString("pe.delete"),
-            visibleIndex: 30,
-            iconSize: "auto",
-            action: () => {
-                this.delete();
-            },
-            onFocus: (isMouse, event) => this.disableActionFocusing(isMouse, event)
-        }));
-    }
-    disableActionFocusing(isMouse, event) {
-        this.isDisableSelecting = isMouse;
-    }
-    canSelectElement() {
-        const res = !this.isDisableSelecting;
-        this.isDisableSelecting = false;
-        return res;
-    }
-    get allowEdit() {
-        return !!this.creator && !this.creator.readOnly && this.allowEditOption;
-    }
-    get showAddQuestionButton() {
-        return this.getPropertyValue("showAddQuestionButton");
-    }
-    setShowAddQuestionButton(val) {
-        this.setPropertyValue("showAddQuestionButton", val && this.allowEdit && !!this.creator && this.creator.showAddQuestionButton);
-    }
-    duplicate() { }
-    delete() {
-        this.creator.deleteElement(this.surveyElement);
-    }
-    getCss() {
-        return new CssClassBuilder().append("svc-hovered svc-hovered-ready", this.isHovered).toString();
+        this.hiddenItemsListModel.setItems(items.filter(i => i.mode == "popup").map(i => i.innerItem));
     }
 }
-SurveyElementAdornerBase.AdornerValueName = "__sjs_creator_adorner";
-__decorate([
-    property({ defaultValue: true })
-], SurveyElementAdornerBase.prototype, "allowDragging", void 0);
-__decorate([
-    property({ defaultValue: false })
-], SurveyElementAdornerBase.prototype, "expandCollapseAnimationRunning", void 0);
-__decorate([
-    property({ defaultValue: true })
-], SurveyElementAdornerBase.prototype, "needToRenderContent", void 0);
-__decorate([
-    property({ defaultValue: true })
-], SurveyElementAdornerBase.prototype, "allowExpandCollapse", void 0);
-__decorate([
-    property({
-        onSet: (val, target) => {
-            target.renderedCollapsed = val;
-            if (!val)
-                target.needToRenderContent = true;
-            if (target.creator.designerStateManager && !target.creator.designerStateManager.isSuspended && target.surveyElement) {
-                target.creator.designerStateManager.getElementState(target.surveyElement).collapsed = val;
-            }
-            setTimeout(() => {
-                target.creator.survey.pages.forEach(p => p.ensureRowsVisibility());
-                target.creator.survey.getAllPanels().forEach(p => p.ensureRowsVisibility());
-            }, 50);
-        }
-    })
-], SurveyElementAdornerBase.prototype, "collapsed", void 0);
-__decorate([
-    property()
-], SurveyElementAdornerBase.prototype, "_renderedCollapsed", void 0);
-__decorate([
-    property()
-], SurveyElementAdornerBase.prototype, "isAnimationRunningCollapsed", void 0);
-__decorate([
-    property({ defaultValue: false })
-], SurveyElementAdornerBase.prototype, "isHovered", void 0);
 
 let isLocaleEnableIfExecuting;
 function localeEnableIf(params) {
@@ -22049,7 +21066,9 @@ class PropertyGridViewModel extends Base {
         let titleName = this.getTitle();
         this.selectedElementName = titleName;
         this.objectSelectionAction.tooltip = titleName;
-        this.objectSelectionAction.title = this.propertyGridModel.showOneCategoryInPropertyGrid ? "" : titleName;
+        if (!this.propertyGridModel.showOneCategoryInPropertyGrid) {
+            this.objectSelectionAction.title = titleName;
+        }
     }
     getTitle() {
         var obj = this.getSelectedObj();
@@ -22217,6 +21236,1074 @@ __decorate([
     property()
 ], PagesController.prototype, "page2Display", void 0);
 
+class SurveyElementAdornerBase extends Base {
+    getAnimatedElement() {
+        return null;
+    }
+    getInnerAnimatedElements() {
+        return [];
+    }
+    getCollapsingCssClassName() {
+        return "svc-question--leave";
+    }
+    getExpandingCssClassName() {
+        return "svc-question--enter";
+    }
+    get hoverDelay() {
+        return this.creator.pageHoverDelay;
+    }
+    hover(e, element) {
+        const processedFlagName = "__svc_question_processed";
+        if (!e[processedFlagName] && e.type === "mouseover") {
+            if (!this.hoverTimeout) {
+                this.hoverTimeout = setTimeout(() => {
+                    this.isHovered = true;
+                    this.hoverTimeout = undefined;
+                }, this.hoverDelay);
+            }
+            e[processedFlagName] = true;
+        }
+        else {
+            clearTimeout(this.hoverTimeout);
+            this.hoverTimeout = undefined;
+            this.isHovered = false;
+        }
+    }
+    getExpandCollapseAnimationOptions() {
+        const beforeRunAnimation = (el, animatingClassName) => {
+            prepareElementForVerticalAnimation(el);
+            const innerAnimatedElements = this.getInnerAnimatedElements();
+            innerAnimatedElements.forEach((elem) => {
+                prepareElementForVerticalAnimation(elem);
+            });
+            innerAnimatedElements.forEach((elem) => {
+                elem.classList.add(animatingClassName);
+            });
+        };
+        const afterRunAnimation = (el, animatingClassName) => {
+            this.expandCollapseAnimationRunning = false;
+            if (this.surveyElement) {
+                cleanHtmlElementAfterAnimation(el);
+                const innerAnimatedElements = this.getInnerAnimatedElements();
+                innerAnimatedElements.forEach((elem) => {
+                    cleanHtmlElementAfterAnimation(elem);
+                });
+                innerAnimatedElements.forEach((elem) => {
+                    elem.classList.remove(animatingClassName);
+                });
+            }
+        };
+        return {
+            getRerenderEvent: () => this.onElementRerendered,
+            getEnterOptions: () => {
+                const className = this.getExpandingCssClassName();
+                return {
+                    cssClass: className,
+                    onBeforeRunAnimation: (el) => {
+                        beforeRunAnimation(el, className);
+                    },
+                    onAfterRunAnimation: (el) => {
+                        afterRunAnimation(el, className);
+                    },
+                };
+            },
+            getLeaveOptions: () => {
+                const className = this.getCollapsingCssClassName();
+                return {
+                    cssClass: className,
+                    onBeforeRunAnimation: (el) => {
+                        beforeRunAnimation(el, className);
+                    },
+                    onAfterRunAnimation: (el) => {
+                        afterRunAnimation(el, className);
+                    },
+                };
+            },
+            getAnimatedElement: () => this.getAnimatedElement(),
+            isAnimationEnabled: () => this.animationAllowed
+        };
+    }
+    set renderedCollapsed(val) {
+        if (this.animationAllowed && val !== this.renderedCollapsed)
+            this.expandCollapseAnimationRunning = true;
+        this.animationCollapsed.sync(!val);
+    }
+    get renderedCollapsed() {
+        return !!this._renderedCollapsed;
+    }
+    createTopActionContainer() {
+        const actionContainer = new ActionContainer();
+        actionContainer.sizeMode = "small";
+        if (this.creator.expandCollapseButtonVisibility != "never") {
+            actionContainer.setItems([this.expandCollapseAction]);
+            actionContainer.cssClasses = {
+                root: "svc-survey-element-top-toolbar sv-action-bar",
+                item: "svc-survey-element-top-toolbar__item",
+                itemIcon: "svc-survey-element-toolbar-item__icon",
+                itemTitle: "svc-survey-element-toolbar-item__title",
+                itemTitleWithIcon: "svc-survey-element-toolbar-item__title--with-icon",
+            };
+        }
+        return actionContainer;
+    }
+    createActionContainer() {
+        const actionContainer = new SurveyElementActionContainer();
+        actionContainer.dotsItem.popupModel.horizontalPosition = "center";
+        return actionContainer;
+    }
+    get canExpandOnDrag() {
+        return this.surveyElement.isPanel || this.surveyElement.isPage || this.surveyElement instanceof QuestionPanelDynamicModel;
+    }
+    dragIn() {
+        if (!this.draggedIn) {
+            if (this.canExpandOnDrag && this.collapsed) {
+                this.draggedIn = true;
+                this.dragCollapsedTimer = setTimeout(() => {
+                    this.expandWithDragIn();
+                }, this.creator.expandOnDragTimeOut);
+            }
+        }
+    }
+    expandWithDragIn() {
+        this.collapsed = false;
+        this.dragCollapsedTimer = undefined;
+    }
+    dragOut() {
+        if (this.draggedIn) {
+            clearTimeout(this.dragCollapsedTimer);
+            this.draggedIn = false;
+        }
+    }
+    allowExpandCollapseByDblClick(element) {
+        return true;
+    }
+    dblclick(event) {
+        if (this.allowExpandCollapseByDblClick(event.target)) {
+            if (this.allowExpandCollapse)
+                this.collapsed = !this.collapsed;
+        }
+        event.stopPropagation();
+    }
+    get element() {
+        return this.surveyElement;
+    }
+    constructor(creator, surveyElement) {
+        super();
+        this.creator = creator;
+        this.animationCollapsed = new AnimationBoolean(this.getExpandCollapseAnimationOptions(), (val) => {
+            this._renderedCollapsed = !val;
+        }, () => !this.renderedCollapsed);
+        this.draggedIn = false;
+        this.sidebarFlyoutModeChangedFunc = (_, options) => {
+            if (options.name === "flyoutMode") {
+                this.updateActionsProperties();
+            }
+        };
+        this.creatorOnLocaleChanged = (_, options) => {
+            if (this.surveyElement) {
+                this.updateActionsContainer(this.surveyElement);
+                this.updateActionsProperties();
+            }
+        };
+        this.actionVisibilityCache = {};
+        this.expandCollapseAction = this.getExpandCollapseAction();
+        this.attachToUI(surveyElement);
+    }
+    get isActionContainerCreated() {
+        return !!this.actionContainerValue;
+    }
+    get actionContainer() {
+        if (!this.actionContainerValue) {
+            this.actionContainerValue = this.createActionContainer();
+            if (this.surveyElement) {
+                this.updateActionsContainer(this.surveyElement);
+                this.updateActionsVisibility(false);
+            }
+        }
+        return this.actionContainerValue;
+    }
+    get topActionContainer() {
+        if (!this.topActionContainerValue) {
+            this.topActionContainerValue = this.createTopActionContainer();
+            if (this.surveyElement) {
+                this.updateActionsVisibility(true);
+            }
+        }
+        return this.topActionContainerValue;
+    }
+    static GetAdorner(surveyElement) {
+        return surveyElement.getPropertyValue(SurveyElementAdornerBase.AdornerValueName);
+    }
+    static RestoreStateFor(surveyElement) {
+        const adorner = SurveyElementAdornerBase.GetAdorner(surveyElement);
+        if (!!adorner) {
+            adorner.restoreState();
+        }
+    }
+    restoreState() {
+        var _a;
+        if (!!this.surveyElement) {
+            this.collapsed = (_a = this.creator.designerStateManager) === null || _a === void 0 ? void 0 : _a.getElementCollapsed(this.surveyElement);
+        }
+        if (!this.surveyElement || this.surveyElement.isInteractiveDesignElement) {
+            this.needToRenderContent = !this.collapsed;
+        }
+    }
+    detachElement(surveyElement) {
+        if (surveyElement) {
+            surveyElement.setPropertyValue(SurveyElementAdornerBase.AdornerValueName, null);
+            surveyElement.unRegisterFunctionOnPropertyValueChanged("isSelectedInDesigner", "questionSelected");
+            this.cleanActionsContainer();
+        }
+    }
+    attachElement(surveyElement) {
+        var _a, _b;
+        if (surveyElement) {
+            (_b = (_a = this.creator) === null || _a === void 0 ? void 0 : _a.designerStateManager) === null || _b === void 0 ? void 0 : _b.initForElement(surveyElement);
+            surveyElement.registerFunctionOnPropertyValueChanged("isSelectedInDesigner", (newValue) => {
+                this.onElementSelectedChanged(newValue);
+            }, "questionSelected");
+            this.restoreState();
+            this.updateActionsContainer(surveyElement);
+            this.updateActionsProperties();
+            surveyElement.setPropertyValue(SurveyElementAdornerBase.AdornerValueName, this);
+        }
+    }
+    setSurveyElement(surveyElement) {
+        this.detachOnlyMyElement();
+        this.surveyElement = surveyElement;
+        this.attachElement(this.surveyElement);
+    }
+    checkActionProperties() {
+        if (this.creator.isElementSelected(this.surveyElement)) {
+            this.updateActionsProperties();
+        }
+    }
+    attachToUI(surveyElement, rootElement) {
+        if (!!rootElement) {
+            this.rootElement = rootElement;
+        }
+        if (this.surveyElement != surveyElement) {
+            this.setSurveyElement(surveyElement);
+            this.creator.onLocaleChanded.add(this.creatorOnLocaleChanged);
+            this.creator.sidebar.onPropertyChanged.add(this.sidebarFlyoutModeChangedFunc);
+            this.creator.expandCollapseManager.add(this);
+        }
+    }
+    detachOnlyMyElement() {
+        if (this.surveyElement && this.surveyElement.getPropertyValue(SurveyElementAdornerBase.AdornerValueName) === this && !this.surveyElement.isDisposed) {
+            this.detachElement(this.surveyElement);
+        }
+    }
+    detachFromUI() {
+        this.rootElement = undefined;
+        this.detachOnlyMyElement();
+        this.surveyElement = undefined;
+        this.creator.onLocaleChanded.remove(this.creatorOnLocaleChanged);
+        this.creator.sidebar.onPropertyChanged.remove(this.sidebarFlyoutModeChangedFunc);
+        this.creator.expandCollapseManager.remove(this);
+    }
+    dispose() {
+        this.detachFromUI();
+        this.disposeActions(this.actionContainerValue);
+        this.disposeActions(this.topActionContainerValue);
+        super.dispose();
+        this.sidebarFlyoutModeChangedFunc = undefined;
+        this.animationCollapsed = undefined;
+    }
+    disposeActions(container) {
+        if (!!container && !container.isDisposed) {
+            container.dispose();
+        }
+    }
+    onElementSelectedChanged(isSelected) {
+        if (!isSelected)
+            return;
+        this.updateActionsProperties();
+    }
+    getExpandCollapseAction() {
+        const collapseIcon = "icon-collapsepanel-16x16";
+        const expandIcon = "icon-expandpanel-16x16";
+        return {
+            id: "collapse",
+            css: "sv-action-bar-item--collapse",
+            locTooltipName: new ComputedUpdater(() => this.collapsed ? "ed.expandTooltip" : "ed.collapseTooltip"),
+            iconName: new ComputedUpdater(() => this.collapsed ? expandIcon : collapseIcon),
+            iconSize: "auto",
+            action: () => {
+                this.collapsed = !this.collapsed;
+            }
+        };
+    }
+    cleanActionsContainer() {
+        const container = this.actionContainerValue;
+        if (!container)
+            return;
+        const actions = container.actions;
+        container.setItems([]);
+        actions.forEach(action => action.dispose && action.dispose());
+    }
+    updateActionsContainer(surveyElement) {
+        if (!this.actionContainerValue)
+            return;
+        const actions = [];
+        this.buildActions(actions);
+        this.creator.onElementMenuItemsChanged(surveyElement, actions);
+        this.actionContainerValue.setItems(actions);
+    }
+    updateActionsProperties() {
+        if (this.isDisposed)
+            return;
+        this.updateActionsPropertiesCore();
+    }
+    updateActionsPropertiesCore() {
+        this.updateElementAllowOptions(this.creator.getElementAllowOperations(this.surveyElement), this.isOperationsAllow());
+    }
+    getAllowDragging(options) {
+        return options.allowDragging;
+    }
+    getAllowExpandCollapse(options) {
+        return this.creator.expandCollapseButtonVisibility != "never" && (options.allowExpandCollapse == undefined || !!options.allowExpandCollapse);
+    }
+    updateElementAllowOptions(options, operationsAllow) {
+        this.allowDragging = operationsAllow && this.getAllowDragging(options);
+        this.allowExpandCollapse = this.getAllowExpandCollapse(options);
+        this.allowEditOption = (options.allowEdit == undefined || !!options.allowEdit);
+        this.updateActionVisibility("delete", operationsAllow && options.allowDelete);
+        this.updateActionVisibility("duplicate", operationsAllow && options.allowCopy);
+        this.updateActionVisibility("collapse", this.allowExpandCollapse);
+        if (options.allowShowSettings === undefined) {
+            const settingsVisibility = (options.allowEdit !== undefined) ? (operationsAllow && options.allowEdit) : this.creator.sidebar.flyoutMode;
+            this.updateActionVisibility("settings", settingsVisibility);
+        }
+        else {
+            this.updateActionVisibility("settings", options.allowShowSettings);
+        }
+        this.setShowAddQuestionButton(options.allowEdit !== false);
+    }
+    isOperationsAllow() {
+        return !this.creator.readOnly;
+    }
+    updateActionVisibility(id, isVisible) {
+        var _a, _b;
+        var action = ((_a = this.actionContainerValue) === null || _a === void 0 ? void 0 : _a.getActionById(id)) || ((_b = this.topActionContainerValue) === null || _b === void 0 ? void 0 : _b.getActionById(id));
+        if (!action) {
+            this.actionVisibilityCache[id] = isVisible;
+        }
+        else {
+            if (action.visible !== isVisible) {
+                action.visible = isVisible;
+            }
+        }
+    }
+    updateActionsVisibility(isTop) {
+        for (var key in this.actionVisibilityCache) {
+            this.updateActionVisibility(key, this.actionVisibilityCache[key]);
+        }
+    }
+    getActionById(id) {
+        return this.actionContainer.getActionById(id) || this.topActionContainer.getActionById(id);
+    }
+    buildActions(items) {
+        items.push(new Action({
+            id: "duplicate",
+            iconName: "icon-duplicate_16x16",
+            css: "svc-action-bar-item--right",
+            title: this.creator.getLocString("survey.duplicate"),
+            visibleIndex: 10,
+            iconSize: "auto",
+            action: () => this.duplicate(),
+            onFocus: (isMouse, event) => this.disableActionFocusing(isMouse, event)
+        }));
+        items.push(new Action({
+            id: "settings",
+            iconName: "icon-settings_16x16",
+            css: "svc-action-bar-item--right",
+            title: this.creator.getLocString("ed.settings"),
+            locTooltipName: "ed.settingsTooltip",
+            visibleIndex: 20,
+            iconSize: "auto",
+            action: () => {
+                this.creator.setShowSidebar(true, true);
+                if (!this.creator.isMobileView) {
+                    this.creator.sidebar.executeOnExpand(() => {
+                        this.creator.propertyGrid.getAllQuestions()[0].focus();
+                    });
+                }
+            }
+        }));
+        items.push(new Action({
+            id: "delete",
+            iconName: "icon-delete_16x16",
+            css: "svc-action-bar-item--right",
+            //needSeparator: items.length > 0,
+            title: this.creator.getLocString("pe.delete"),
+            visibleIndex: 30,
+            iconSize: "auto",
+            action: () => {
+                this.delete();
+            },
+            onFocus: (isMouse, event) => this.disableActionFocusing(isMouse, event)
+        }));
+    }
+    disableActionFocusing(isMouse, event) {
+        this.isDisableSelecting = isMouse;
+    }
+    canSelectElement() {
+        const res = !this.isDisableSelecting;
+        this.isDisableSelecting = false;
+        return res;
+    }
+    get allowEdit() {
+        return !!this.creator && !this.creator.readOnly && this.allowEditOption;
+    }
+    get showAddQuestionButton() {
+        return this.getPropertyValue("showAddQuestionButton");
+    }
+    setShowAddQuestionButton(val) {
+        this.setPropertyValue("showAddQuestionButton", val && this.allowEdit && !!this.creator && this.creator.showAddQuestionButton);
+    }
+    duplicate() { }
+    delete() {
+        this.creator.deleteElement(this.surveyElement);
+    }
+    getCss() {
+        return new CssClassBuilder().append("svc-hovered svc-hovered-ready", this.isHovered).toString();
+    }
+}
+SurveyElementAdornerBase.AdornerValueName = "__sjs_creator_adorner";
+__decorate([
+    property({ defaultValue: true })
+], SurveyElementAdornerBase.prototype, "allowDragging", void 0);
+__decorate([
+    property({ defaultValue: false })
+], SurveyElementAdornerBase.prototype, "expandCollapseAnimationRunning", void 0);
+__decorate([
+    property({ defaultValue: null })
+], SurveyElementAdornerBase.prototype, "dropIndicatorPosition", void 0);
+__decorate([
+    property({ defaultValue: false })
+], SurveyElementAdornerBase.prototype, "isBeingDragged", void 0);
+__decorate([
+    property({ defaultValue: true })
+], SurveyElementAdornerBase.prototype, "needToRenderContent", void 0);
+__decorate([
+    property({ defaultValue: true })
+], SurveyElementAdornerBase.prototype, "allowExpandCollapse", void 0);
+__decorate([
+    property({
+        onSet: (val, target) => {
+            target.renderedCollapsed = val;
+            if (!val)
+                target.needToRenderContent = true;
+            if (target.creator.designerStateManager && target.surveyElement) {
+                target.creator.designerStateManager.setElementCollapsed(target.surveyElement, val);
+            }
+            setTimeout(() => {
+                target.creator.survey.pages.forEach(p => p.ensureRowsVisibility());
+                target.creator.survey.getAllPanels().forEach(p => p.ensureRowsVisibility());
+            }, 50);
+        }
+    })
+], SurveyElementAdornerBase.prototype, "collapsed", void 0);
+__decorate([
+    property()
+], SurveyElementAdornerBase.prototype, "_renderedCollapsed", void 0);
+__decorate([
+    property()
+], SurveyElementAdornerBase.prototype, "isAnimationRunningCollapsed", void 0);
+__decorate([
+    property({ defaultValue: false })
+], SurveyElementAdornerBase.prototype, "isHovered", void 0);
+
+var DropIndicatorPosition;
+(function (DropIndicatorPosition) {
+    DropIndicatorPosition["Inside"] = "inside";
+    DropIndicatorPosition["Top"] = "top";
+    DropIndicatorPosition["Bottom"] = "bottom";
+    DropIndicatorPosition["Right"] = "right";
+    DropIndicatorPosition["Left"] = "left";
+})(DropIndicatorPosition || (DropIndicatorPosition = {}));
+var ElType;
+(function (ElType) {
+    ElType["Page"] = "page";
+    ElType["Panel"] = "panel";
+    ElType["Question"] = "question";
+    ElType["DynamicPanel"] = "dynamic-panel";
+    ElType["EmptySurvey"] = "empty-survey";
+})(ElType || (ElType = {}));
+
+function calculateIsEdge(dropTargetNode, clientY) {
+    const rect = dropTargetNode.getBoundingClientRect();
+    return clientY - rect.top <= DragDropSurveyElements.edgeHeight || rect.bottom - clientY <= DragDropSurveyElements.edgeHeight;
+}
+function calculateIsSide(dropTargetNode, clientX) {
+    const rect = dropTargetNode.getBoundingClientRect();
+    return clientX - rect.left <= DragDropSurveyElements.edgeHeight || rect.right - clientX <= DragDropSurveyElements.edgeHeight;
+}
+function calculateDragOverLocation(clientX, clientY, rect, direction = null) {
+    const tg = rect.height / rect.width;
+    const dx = clientX - rect.x;
+    const dy = clientY - rect.y;
+    if (direction == "top-bottom") {
+        if (dy >= rect.height / 2) {
+            return DropIndicatorPosition.Bottom;
+        }
+        else {
+            return DropIndicatorPosition.Top;
+        }
+    }
+    if (direction == "left-right") {
+        if (dx >= rect.width / 2) {
+            return DropIndicatorPosition.Right;
+        }
+        else {
+            return DropIndicatorPosition.Left;
+        }
+    }
+    if (dy >= tg * dx) {
+        if (dy >= -tg * dx + rect.height) {
+            return DropIndicatorPosition.Bottom;
+        }
+        else {
+            return DropIndicatorPosition.Left;
+        }
+    }
+    else {
+        if (dy >= -tg * dx + rect.height) {
+            return DropIndicatorPosition.Right;
+        }
+        else {
+            return DropIndicatorPosition.Top;
+        }
+    }
+}
+class DragDropSurveyElements extends DragDropCore {
+    constructor() {
+        super(...arguments);
+        this.insideElement = null;
+        this.prevIsEdge = null;
+        // protected ghostSurveyElement: IElement = null;
+        this.dragOverIndicatorElement = null;
+        this.isDraggedElementSelected = false;
+        this.doBanDropHere = () => {
+            this.removeDragOverMarker(this.dragOverIndicatorElement);
+            this.removeDragOverMarker(this.dropTarget);
+        };
+        this.doDrop = () => {
+            var _a;
+            if (!this.dropTarget)
+                return;
+            if (!this.dragOverLocation)
+                return;
+            const page = this.parentElement;
+            const dragged = this.draggedElement;
+            const src = this.draggedElement;
+            if (dragged.isPage && dragged instanceof PageModel) {
+                const survey = dragged.survey;
+                survey.startMovingPage();
+                const indexOfDraggedPage = survey.pages.indexOf(dragged);
+                survey.pages.splice(indexOfDraggedPage, 1);
+                const indexOfDropTarget = survey.pages.indexOf(this.dropTarget) + (this.dragOverLocation === DropIndicatorPosition.Top ? 0 : 1);
+                survey.pages.splice(indexOfDropTarget, 0, dragged);
+                survey.stopMovingPage();
+                if (indexOfDraggedPage !== indexOfDropTarget) {
+                    dragged["draggedFrom"] = indexOfDraggedPage < indexOfDropTarget ? indexOfDraggedPage : indexOfDraggedPage + 1;
+                }
+                return dragged;
+            }
+            const convertLocation = () => {
+                switch (this.dragOverLocation) {
+                    case "top": return "top";
+                    case "bottom": return "bottom";
+                    case "right": return "right";
+                    case "left": return "left";
+                    default: return "bottom";
+                }
+            };
+            const srcContainer = src.parent || src.page;
+            if (!!srcContainer) {
+                page.survey.startMovingQuestion();
+                srcContainer.removeElement(src);
+            }
+            let dest = ((_a = this.dragOverIndicatorElement) === null || _a === void 0 ? void 0 : _a.isPanel) ? this.dragOverIndicatorElement : this.dropTarget;
+            if (this.dragOverLocation === DropIndicatorPosition.Inside) {
+                if (this.isPanelDynamic(dest))
+                    dest = dest.template;
+                dest.insertElement(src);
+            }
+            else {
+                const destParent = dest.parent || dest.page;
+                if (destParent)
+                    destParent.insertElement(src, dest, convertLocation());
+            }
+            page.survey.stopMovingQuestion();
+            return dragged;
+        };
+    }
+    get draggedElementAdorner() {
+        if (!this.draggedElement)
+            return null;
+        return SurveyElementAdornerBase.GetAdorner(this.draggedElement);
+    }
+    get dropTargetAdorner() {
+        if (!this.dropTarget)
+            return null;
+        return SurveyElementAdornerBase.GetAdorner(this.dropTarget);
+    }
+    get draggedElementType() {
+        if (!!this.draggedElement && this.draggedElement.isPage) {
+            return "survey-page";
+        }
+        return "survey-element";
+    }
+    get maxNestedPanels() { return this.onGetMaxNestedPanels ? this.onGetMaxNestedPanels() : -1; }
+    // private isRight: boolean;
+    // protected prevIsRight: boolean;
+    startDragToolboxItem(event, draggedElementJson, toolboxItemModel) {
+        const draggedElement = this.createElementFromJson(draggedElementJson);
+        draggedElement.toolboxItemTitle = toolboxItemModel.title;
+        draggedElement.toolboxItemIconName = toolboxItemModel.iconName;
+        this.startDrag(event, draggedElement);
+    }
+    startDragSurveyElement(event, draggedElement, isElementSelected) {
+        this.isDraggedElementSelected = isElementSelected;
+        this.startDrag(event, draggedElement);
+    }
+    getShortcutText(draggedElement) {
+        if (draggedElement.isPage)
+            return draggedElement.name;
+        return draggedElement.toolboxItemTitle || super.getShortcutText(draggedElement);
+    }
+    createDraggedElementShortcut(text, draggedElementNode, event) {
+        const draggedElementShortcut = document.createElement("div");
+        draggedElementShortcut.style.display = "flex";
+        const textSpan = document.createElement("span");
+        textSpan.className = "svc-dragged-element-shortcut__text";
+        textSpan.innerText = text;
+        if (this.draggedElement.toolboxItemIconName) {
+            draggedElementShortcut.appendChild(this.createDraggedElementIcon());
+        }
+        draggedElementShortcut.appendChild(textSpan);
+        draggedElementShortcut.className = this.getDraggedElementClass();
+        return draggedElementShortcut;
+    }
+    createDraggedElementIcon() {
+        const span = document.createElement("span");
+        span.className = "svc-dragged-element-shortcut__icon";
+        const iconName = getIconNameFromProxy(this.draggedElement.toolboxItemIconName);
+        const svgString = `<svg class="sv-svg-icon" role="img"><use xlink:href="#${iconName}"></use></svg>`;
+        span.innerHTML = svgString;
+        return span;
+    }
+    getDraggedElementClass() {
+        let 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;
+    }
+    createElementFromJson(json) {
+        const element = this.createNewElement(json);
+        if (element["setSurveyImpl"]) {
+            element["setSurveyImpl"](this.survey);
+        }
+        else {
+            element["setData"](this.survey);
+        }
+        element.renderWidth = "100%";
+        return element;
+    }
+    createNewElement(json) {
+        var newElement = Serializer.createClass(json["type"]);
+        new JsonObject().toObject(json, newElement);
+        return newElement;
+    }
+    isPanelDynamic(element) {
+        return element instanceof QuestionPanelDynamicModel;
+    }
+    findDropTargetNodeByDragOverNode(dragOverNode) {
+        const ghostRow = dragOverNode.closest(".svc-row--ghost");
+        if (!!ghostRow) {
+            const ghostDataAttrSelector = "[data-sv-drop-target-survey-element='sv-drag-drop-ghost-survey-element-name']";
+            const ghostNode = dragOverNode.closest(ghostDataAttrSelector) || dragOverNode.querySelector(ghostDataAttrSelector);
+            if (!!ghostNode) {
+                return ghostNode;
+            }
+        }
+        const dropTargetNode = dragOverNode.closest(this.dropTargetDataAttributeName);
+        return dropTargetNode;
+    }
+    getDropTargetByDataAttributeValue(dataAttributeValue, dropTargetNode, event) {
+        const oldDragOverIndicatorElement = this.dragOverIndicatorElement;
+        if (!dataAttributeValue) {
+            // panel dynamic
+            const nearestDropTargetElement = dropTargetNode.parentElement.closest(this.dropTargetDataAttributeName);
+            dataAttributeValue = this.getDataAttributeValueByNode(nearestDropTargetElement);
+        }
+        if (!dataAttributeValue) {
+            throw new Error("Can't find drop target survey element name");
+        }
+        if (dataAttributeValue === DragDropSurveyElements.ghostSurveyElementName) {
+            return this.prevDropTarget;
+        }
+        // drop to new page
+        if (dataAttributeValue === "newGhostPage") {
+            return DragDropSurveyElements.newGhostPage;
+        }
+        // drop to page
+        let page = this.survey.getPageByName(dataAttributeValue);
+        if (page) {
+            return page;
+        }
+        // drop to question or panel
+        let dropTarget;
+        let dragOverElement;
+        this.survey.pages.forEach((page) => {
+            const question = page.getElementByName(dataAttributeValue);
+            if (question) {
+                dropTarget = question;
+                dragOverElement = question;
+            }
+        });
+        // drop to matrix detail panel
+        if ((dropTarget.getType() === "matrixdropdown" || dropTarget.getType() === "matrixdynamic") && dropTarget.detailPanelMode !== "none" && this.insideElement) {
+            dropTarget = dropTarget.detailPanel;
+        }
+        // drop to question
+        //question inside paneldymanic
+        if (!dropTarget.page) {
+            const nearestDropTargetPageElement = dropTargetNode.parentElement.closest("[data-sv-drop-target-page]");
+            dataAttributeValue = nearestDropTargetPageElement.dataset.svDropTargetPage;
+            let page = this.survey.getPageByName(dataAttributeValue);
+            dropTarget.__page = page;
+        }
+        this.dragOverIndicatorElement = dragOverElement;
+        if (this.dragOverIndicatorElement != oldDragOverIndicatorElement) {
+            this.removeDragOverMarker(oldDragOverIndicatorElement);
+        }
+        return dropTarget;
+        // EO drop to question or panel
+    }
+    isDropTargetValid(dropTarget, dropTargetNode, dragOverLocation = DropIndicatorPosition.Top) {
+        if (!dropTarget)
+            return false;
+        if (dropTarget === this.draggedElement)
+            return false;
+        if (this.draggedElement.getType() === "paneldynamic" && dropTarget === this.draggedElement.template) {
+            return false;
+        }
+        if (this.maxNestedPanels >= 0 && this.draggedElement.isPanel) {
+            const pnl = this.draggedElement;
+            if (pnl.deepNested === undefined) {
+                pnl.deepNested = this.getMaximumNestedPanelCount(pnl, 0);
+            }
+            let len = SurveyHelper.getElementDeepLength(dropTarget);
+            if (dragOverLocation !== DropIndicatorPosition.Inside && dropTarget.isPanel)
+                len--;
+            if (this.maxNestedPanels < len + pnl.deepNested)
+                return false;
+        }
+        if (DragDropSurveyElements.restrictDragQuestionBetweenPages &&
+            this.shouldRestricDragQuestionBetweenPages(dropTarget)) {
+            return false;
+        }
+        return true;
+    }
+    getMaximumNestedPanelCount(panel, deep) {
+        let max = deep;
+        panel.elements.forEach(el => {
+            if (el.isPanel) {
+                const pDeep = this.getMaximumNestedPanelCount(el, deep + 1);
+                if (pDeep > max) {
+                    max = pDeep;
+                }
+            }
+        });
+        return max;
+    }
+    shouldRestricDragQuestionBetweenPages(dropTarget) {
+        const oldPage = this.draggedElement["page"];
+        const newPage = dropTarget.isPage ? dropTarget : dropTarget["page"];
+        // if oldPage === null then it is drop from the toolbox
+        return oldPage && oldPage !== newPage;
+    }
+    findDeepestDropTargetChild(parent) {
+        const selector = this.dropTargetDataAttributeName;
+        let result = parent;
+        while (!!parent) {
+            result = parent;
+            parent = parent.querySelector(selector);
+        }
+        return result;
+    }
+    isAllowDragOver(dropTarget, dragOverLocation) {
+        if (!this.survey || this.survey.onDragDropAllow.isEmpty)
+            return true;
+        const allowOptions = {
+            allow: true,
+            parent: this.parentElement,
+            source: this.draggedElement,
+            toElement: dropTarget,
+            draggedElement: this.draggedElement,
+            fromElement: this.draggedElement.parent,
+            target: dropTarget,
+            insertAfter: undefined,
+            insertBefore: undefined,
+            allowDropNextToAnother: true
+        };
+        if (dragOverLocation === DropIndicatorPosition.Bottom || dragOverLocation === DropIndicatorPosition.Right) {
+            allowOptions.insertAfter = dropTarget;
+        }
+        if (dragOverLocation === DropIndicatorPosition.Top || dragOverLocation === DropIndicatorPosition.Left) {
+            allowOptions.insertBefore = dropTarget;
+        }
+        this.survey.onDragDropAllow.fire(this.survey, allowOptions);
+        if (!allowOptions.allowDropNextToAnother) {
+            if (dragOverLocation === DropIndicatorPosition.Left) {
+                this.dragOverLocation = DropIndicatorPosition.Top;
+            }
+            if (dragOverLocation === DropIndicatorPosition.Right) {
+                this.dragOverLocation = DropIndicatorPosition.Bottom;
+            }
+        }
+        return allowOptions.allow;
+    }
+    dragOverCore(dropTarget, dragOverLocation) {
+        const oldDragOverIndicatorElement = this.dragOverIndicatorElement;
+        const oldDropTarget = this.dropTarget;
+        if (this.isSameElement(dropTarget)) {
+            this.allowDropHere = false;
+            return;
+        }
+        this.dropTarget = dropTarget;
+        this.dragOverLocation = dragOverLocation;
+        this.parentElement = this.dropTarget.isPage
+            ? this.dropTarget
+            : (this.dropTarget.page || this.dropTarget.__page);
+        if (!this.isAllowDragOver(dropTarget, dragOverLocation)) {
+            this.allowDropHere = false;
+            return;
+        }
+        if (dragOverLocation == DropIndicatorPosition.Inside) {
+            this.dragOverIndicatorElement = this.dropTarget;
+            this.dropTargetAdorner.dropIndicatorPosition = DropIndicatorPosition.Inside;
+        }
+        else {
+            const row = this.dragDropFindRow(this.dropTarget, this.parentElement);
+            if (!!row && row.elements.length > 1 && (this.dragOverLocation === DropIndicatorPosition.Top || this.dragOverLocation === DropIndicatorPosition.Bottom)) {
+                this.dragOverIndicatorElement = row;
+                const adorner = SurveyElementAdornerBase.GetAdorner(row);
+                if (adorner) {
+                    adorner.dropIndicatorPosition = this.dragOverLocation;
+                }
+            }
+            else {
+                this.dragOverIndicatorElement = this.dropTarget;
+                if (this.draggedElement.isPage) {
+                    if (this.dragOverLocation === DropIndicatorPosition.Top || this.dragOverLocation === DropIndicatorPosition.Bottom) {
+                        this.dropTargetAdorner.dropIndicatorPosition = this.dragOverLocation;
+                    }
+                    else {
+                        this.dropTargetAdorner.dropIndicatorPosition = this.dragOverLocation;
+                    }
+                }
+                else {
+                    this.dropTargetAdorner.dropIndicatorPosition = this.dragOverLocation;
+                }
+            }
+        }
+        if (this.dragOverIndicatorElement != oldDragOverIndicatorElement)
+            this.removeDragOverMarker(oldDragOverIndicatorElement);
+        if (this.dropTarget != oldDropTarget)
+            this.removeDragOverMarker(oldDropTarget);
+    }
+    dragDropFindRow(findElement, panel) {
+        if (!findElement || findElement.isPage)
+            return null;
+        var element = findElement;
+        var rows = panel.rows;
+        for (var i = 0; i < rows.length; i++) {
+            if (rows[i].elements.indexOf(element) > -1)
+                return rows[i];
+        }
+        for (var i = 0; i < panel.elements.length; i++) {
+            var pnl = panel.elements[i].getPanel();
+            if (!pnl)
+                continue;
+            var row = this.dragDropFindRow(element, pnl);
+            if (!!row)
+                return row;
+        }
+        return null;
+    }
+    isSameElement(target) {
+        while (!!target) {
+            if (target === this.draggedElement)
+                return true;
+            target = target.parent;
+        }
+        return false;
+    }
+    isDragInsideItself(dragOverNodes) {
+        let result = false;
+        dragOverNodes.forEach((node) => {
+            if (node.classList.contains("svc-question__content--dragged")) {
+                result = true;
+            }
+        });
+        return result;
+    }
+    getDragDropElementType(element) {
+        if (element.isPage)
+            return ElType.Page;
+        if (element.isPanel)
+            return ElType.Panel;
+        if (element instanceof QuestionPanelDynamicModel)
+            return ElType.DynamicPanel;
+        return ElType.Question;
+    }
+    dragOver(event) {
+        const dropTargetNode = this.findDropTargetNodeFromPoint(event.clientX, event.clientY);
+        if (!dropTargetNode) {
+            this.banDropHere();
+            return;
+        }
+        if (document && document.elementsFromPoint && this.isDragInsideItself(document.elementsFromPoint(event.clientX, event.clientY))) {
+            this.banDropHere();
+            return null;
+        }
+        const oldinsideElement = this.insideElement;
+        this.insideElement = !calculateIsEdge(dropTargetNode, event.clientY) && !calculateIsSide(dropTargetNode, event.clientX);
+        const dropTarget = this.getDropTargetByNode(dropTargetNode, event);
+        const dropTargetAdorner = SurveyElementAdornerBase.GetAdorner(dropTarget);
+        if (!!oldinsideElement != !!this.insideElement) {
+            dropTargetAdorner.dropIndicatorPosition = null;
+        }
+        const dropTargetRect = dropTargetNode.getBoundingClientRect();
+        const calcDirection = !settings.dragDrop.allowDragToTheSameLine || (!!this.draggedElement && this.draggedElement.isPage) ? "top-bottom" : null;
+        let dragOverLocation = calculateDragOverLocation(event.clientX, event.clientY, dropTargetRect, calcDirection);
+        if (!this.draggedElement.isPage && dropTarget && ((dropTarget.isPanel || dropTarget.isPage) && dropTarget.elements.length === 0 || this.isPanelDynamic(dropTarget) && dropTarget.template.elements.length == 0)) {
+            if (dropTarget.isPage || this.insideElement) {
+                dragOverLocation = DropIndicatorPosition.Inside;
+            }
+        }
+        if (!this.draggedElement.isPage && dropTarget.isPage && dropTargetAdorner.collapsed) {
+            dragOverLocation = DropIndicatorPosition.Inside;
+        }
+        if ((dropTarget.isPanel || this.isPanelDynamic(dropTarget)) && this.insideElement && dropTargetAdorner.collapsed) {
+            dragOverLocation = DropIndicatorPosition.Inside;
+        }
+        if (!this.draggedElement.isPage && dropTarget.isPage && dropTarget.elements.length !== 0 && !dropTargetAdorner.collapsed) {
+            dragOverLocation = null;
+        }
+        // const dropTargetType = this.getDragDropElementType(dropTarget);
+        // const draggedElementType = this.getDragDropElementType(this.draggedElement);
+        // switch (dropTargetType) {
+        //   case ElType.Page: {
+        //     console.log("dropTargetType", dropTargetType);
+        //     break;
+        //   }
+        //   case ElType.Panel: {
+        //     console.log("dropTargetType", dropTargetType);
+        //     break;
+        //   }
+        //   case ElType.DynamicPanel: {
+        //     console.log("dropTargetType", dropTargetType);
+        //     break;
+        //   }
+        //   case ElType.Question: {
+        //     console.log("dropTargetType", dropTargetType);
+        //     break;
+        //   }
+        //   // case ElType.EmptySurvey: {
+        //   //   console.log("dropTargetType", dropTargetType);
+        //   //   break;
+        //   // }
+        // }
+        const options = {
+            survey: this.survey,
+            draggedSurveyElement: this.draggedElement,
+            dragOverSurveyElement: dropTarget,
+            clientX: event.clientX,
+            clientY: event.clientY,
+            dragOverRect: dropTargetRect,
+            insideElement: this.insideElement,
+            dragOverLocation
+        };
+        if (this.onDragOverLocationCalculating) {
+            this.onDragOverLocationCalculating(options);
+            dragOverLocation = options.dragOverLocation;
+            this.insideElement = options.insideElement;
+        }
+        const isDropTargetValid = this.isDropTargetValid(dropTarget, dropTargetNode, dragOverLocation);
+        if (!isDropTargetValid) {
+            this.banDropHere();
+            return;
+        }
+        this.allowDropHere = true;
+        this.dragOverCore(dropTarget, dragOverLocation);
+    }
+    onStartDrag() {
+        // this.ghostSurveyElement = this.createGhostSurveyElement();
+        if (this.draggedElementAdorner) {
+            this.draggedElementAdorner.isBeingDragged = true;
+        }
+    }
+    moveElementInPanel(panel, src, target, targetIndex) {
+        var srcIndex = src.parent.elements.indexOf(src);
+        if (targetIndex > srcIndex) {
+            targetIndex--;
+        }
+        if (src === target && srcIndex === targetIndex) {
+            return;
+        }
+        panel.removeElement(src);
+        panel.addElement(target, targetIndex);
+    }
+    removeDragOverMarker(dropTarget) {
+        if (dropTarget) {
+            const adorner = SurveyElementAdornerBase.GetAdorner(dropTarget);
+            if (adorner) {
+                adorner.dropIndicatorPosition = null;
+            }
+        }
+    }
+    clear() {
+        this.insideElement = null;
+        this.removeDragOverMarker(this.prevDropTarget);
+        this.removeDragOverMarker(this.dropTarget);
+        this.removeDragOverMarker(this.dragOverIndicatorElement);
+        if (this.draggedElement && this.draggedElementAdorner) {
+            this.draggedElementAdorner.isBeingDragged = false;
+        }
+        super.clear();
+    }
+    getTargetParent(dropTarget) {
+        let targetParent = dropTarget.isPage || dropTarget.isPanel ? dropTarget : dropTarget.parent;
+        if (dropTarget.getType() === "paneldynamic") {
+            targetParent = dropTarget.templateValue;
+        }
+        return targetParent;
+    }
+    getTargetRow(dropTarget) {
+        const targetParent = this.getTargetParent(dropTarget);
+        let targetRow;
+        targetParent.rows.forEach((row) => {
+            if (row.elements.indexOf(dropTarget) !== -1) {
+                targetRow = row;
+            }
+        });
+        return targetRow;
+    }
+}
+DragDropSurveyElements.newGhostPage = null;
+DragDropSurveyElements.restrictDragQuestionBetweenPages = false;
+DragDropSurveyElements.edgeHeight = 30;
+DragDropSurveyElements.nestedPanelDepth = -1;
+DragDropSurveyElements.ghostSurveyElementName = "sv-drag-drop-ghost-survey-element-name"; // before renaming use globa search (we have also css selectors)
+
 const designTabSurveyThemeJSON = {
     "cssVariables": {
         "--sjs-base-unit": "var(--ctr-surface-base-unit)",
@@ -22732,6 +22819,14 @@ class DesignerStateManager {
             stateMap[newName] = new ElementState();
         }, "designerStateManager");
     }
+    getElementCollapsed(element) {
+        return this.getElementState(element).collapsed;
+    }
+    setElementCollapsed(element, isCollapsed) {
+        if (this.isSuspended)
+            return;
+        this.getElementState(element).collapsed = isCollapsed;
+    }
     getElementState(element) {
         return this.createElementState(element, true);
     }
@@ -22878,7 +22973,7 @@ class DomDocumentHelper {
 }
 class CreatorStylesManager {
     static findSheet(styleSheetId) {
-        if (typeof document === "undefined")
+        if (!DomDocumentHelper.isAvailable())
             return null;
         for (let i = 0; i < document.styleSheets.length; i++) {
             if (!!document.styleSheets[i].ownerNode && document.styleSheets[i].ownerNode["id"] === styleSheetId) {
@@ -22888,6 +22983,8 @@ class CreatorStylesManager {
         return null;
     }
     static createSheet(styleSheetId) {
+        if (!DomDocumentHelper.isAvailable())
+            return null;
         let style = DomDocumentHelper.createElement("style");
         style.id = styleSheetId;
         style.appendChild(new Text(""));
@@ -22900,13 +22997,15 @@ class CreatorStylesManager {
             if (!sheet) {
                 sheet = CreatorStylesManager.createSheet(CreatorStylesManager.SurveyJSCreatorStylesSheetId);
             }
-            if (Object.keys(rules).length) {
-                rules.forEach((rule) => {
-                    try {
-                        sheet.insertRule(`${rule.selector} { ${rule.styles} }`, 0);
-                    }
-                    catch (e) { }
-                });
+            if (sheet) {
+                if (Object.keys(rules).length) {
+                    rules.forEach((rule) => {
+                        try {
+                            sheet.insertRule(`${rule.selector} { ${rule.styles} }`, 0);
+                        }
+                        catch (e) { }
+                    });
+                }
             }
         }
     }
@@ -24593,6 +24692,9 @@ class StringEditorViewModelBase extends Base {
         this.blurredByEscape = false;
         this.focusedProgram = false;
         this.characterCounter = new CharacterCounter();
+        this.onLocaleChanged = () => {
+            this.resetPropertyValue("placeholderValue");
+        };
         this.activate = () => {
             const element = this.getEditorElement();
             if (element && element.offsetParent != null) {
@@ -24605,6 +24707,7 @@ class StringEditorViewModelBase extends Base {
         this.justFocused = false;
         this.locString = locString;
         this.checkMarkdownToTextConversion(this.locString.owner, this.locString.name);
+        this.addCreatorEvents();
     }
     afterRender() {
         if (this.connector.focusOnEditor) {
@@ -24614,20 +24717,33 @@ class StringEditorViewModelBase extends Base {
     }
     detachFromUI() {
         var _a;
+        this.removeCreatorEvents();
         (_a = this.connector) === null || _a === void 0 ? void 0 : _a.onDoActivate.remove(this.activate);
         this.getEditorElement = undefined;
         this.blurEditor = undefined;
     }
     dispose() {
+        var _a;
+        (_a = this.creator) === null || _a === void 0 ? void 0 : _a.onLocaleChanded.remove(this.onLocaleChanged);
         super.dispose();
         this.detachFromUI();
     }
+    addCreatorEvents() {
+        var _a;
+        (_a = this.creator) === null || _a === void 0 ? void 0 : _a.onLocaleChanded.add(this.onLocaleChanged);
+    }
+    removeCreatorEvents() {
+        var _a;
+        (_a = this.creator) === null || _a === void 0 ? void 0 : _a.onLocaleChanded.remove(this.onLocaleChanged);
+    }
     setLocString(locString) {
         var _a;
+        this.removeCreatorEvents();
         (_a = this.connector) === null || _a === void 0 ? void 0 : _a.onDoActivate.remove(this.activate);
         this.locString = locString;
         this.connector = StringEditorConnector.get(locString);
         this.connector.onDoActivate.add(this.activate);
+        this.addCreatorEvents();
     }
     checkConstraints(event) {
         if (!this.compostionInProgress && this.maxLength > 0 && event.keyCode >= 32) {
@@ -25984,14 +26100,12 @@ class ExpandCollapseManager {
             .concat(this.creator.survey.getAllQuestions());
     }
     updateCollapsed(elements, value, reason) {
-        const canToSaveToStateManager = this.creator.designerStateManager && !this.creator.designerStateManager.isSuspended;
         elements.forEach(element => {
+            var _a;
             if (element.isQuestion && this._lockQuestions)
                 return;
-            if (canToSaveToStateManager) {
-                this.creator.designerStateManager.getElementState(element).collapsed =
-                    this.creator.getElementExpandCollapseState(element, reason, value);
-            }
+            const collapsed = this.creator.getElementExpandCollapseState(element, reason, value);
+            (_a = this.creator.designerStateManager) === null || _a === void 0 ? void 0 : _a.setElementCollapsed(element, collapsed);
         });
         for (let i = this.adorners.length - 1; i >= 0; i--) {
             const element = this.adorners[i].element;
@@ -26000,9 +26114,7 @@ class ExpandCollapseManager {
             if (elements.indexOf(element) == -1)
                 continue;
             if (this.adorners[i].allowExpandCollapse) {
-                let newState = canToSaveToStateManager ?
-                    this.creator.designerStateManager.getElementState(element).collapsed :
-                    this.creator.getElementExpandCollapseState(element, reason, value);
+                const newState = this.creator.getElementExpandCollapseState(element, reason, value);
                 this.adorners[i].collapsed = newState;
             }
         }
@@ -26051,6 +26163,9 @@ class TabbedMenuContainer extends AdaptiveActionContainer {
         this.creator = creator;
         this.dotsItem.popupModel.horizontalPosition = "center";
         this.dotsItem.popupModel.cssClass += " svc-tabbed-menu-item__popup svc-creator-popup";
+        this.dotsItem.css += " svc-tabbed-menu-dots";
+        this.dotsItem.innerCss += " svc-tabbed-menu-dots__item";
+        this.dotsItem.iconSize = "auto";
         this.hiddenItemsListModel.cssClasses = listComponentCss;
         this.minVisibleItemsCount = 1;
     }
@@ -27206,7 +27321,7 @@ class SurveyCreatorModel extends Base {
          */
         this.onGetPropertyReadOnly = this.onPropertyGetReadOnly;
         /**
-         * An event that is raised when Survey Creator [instantiates a survey to display a UI element](https://surveyjs.io/survey-creator/documentation/creator-v2-whats-new#survey-creator-ui-elements-are-surveys). Handle this event to customize the UI element by modifying the survey.
+         * An event that is raised when Survey Creator [instantiates a survey to display a UI element](https://surveyjs.io/survey-creator/documentation/property-grid-customization#add-custom-properties-to-the-property-grid). Handle this event to customize the UI element by modifying the survey.
          *
          * For information on event handler parameters, refer to descriptions within the interface.
          *
@@ -27230,6 +27345,10 @@ class SurveyCreatorModel extends Base {
         this.onHtmlToMarkdown = this.addCreatorEvent();
         /**
          * An event that is raised when Survey Creator obtains the expand/collapse state of a survey element on the design surface. Handle this event to set a required state.
+         *
+         * For information on event handler parameters, refer to descriptions within the interface.
+         *
+         * [View Demo](https://surveyjs.io/survey-creator/examples/expand-and-collapse-survey-elements/ (linkStyle))
          * @see [ICreatorOptions.collapseQuestions](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#collapseQuestions)
          * @see [ICreatorOptions.collapsePanels](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#collapsePanels)
          * @see [ICreatorOptions.collapsePages](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#collapsePages)
@@ -27607,7 +27726,7 @@ class SurveyCreatorModel extends Base {
          *   }
          * });
          *
-         * const creator = new SurveyCreatorModel({});
+         * const creator = new SurveyCreatorModel();
          *
          * creator.onCreateCustomMessagePanel.add((_, options) => {
          *   options.messageText = "Choices for this question are loaded from a predefined data source. ";
@@ -27624,6 +27743,9 @@ class SurveyCreatorModel extends Base {
          * An event that is raised when users change a property in a [Survey Creator theme](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#creatorTheme).
          */
         this.onCreatorThemePropertyChanged = this.addCreatorEvent();
+        /**
+         * An event that is raised when users select a [Survey Creator theme](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#creatorTheme) from the drop-down list of UI themes.
+         */
         this.onCreatorThemeSelected = this.addCreatorEvent();
         // /**
         //  * You need to set this property to true if you want to use tabs instead of accordion in the popup element's editor.
@@ -29326,7 +29448,7 @@ class SurveyCreatorModel extends Base {
         this.currentFocusTimeout = setTimeout(() => {
             this.currentFocusInterval = setInterval(() => {
                 var _a, _b;
-                const el = document.getElementById(selEl.id);
+                let el = this.getHtmlElementForScroll(selEl);
                 if (!!selEl && (focus || startEdit && (!selEl.hasTitle || selEl.isPanel))) {
                     if (!el || this.rootElement.getAnimations({ subtree: true }).filter((animation => animation.effect.getComputedTiming().activeDuration !== Infinity && (animation.pending || animation.playState !== "finished")))[0])
                         return;
@@ -29343,7 +29465,7 @@ class SurveyCreatorModel extends Base {
                                 SurveyHelper.scrollIntoViewIfNeeded((_b = el.parentElement) !== null && _b !== void 0 ? _b : el, () => { return scrollIntoViewOptions; }, true);
                             }
                         }
-                        if (!propertyName && el.parentElement) {
+                        if (!propertyName && el.parentElement && selEl.getType() !== "matrixdropdowncolumn") {
                             let elToFocus = (typeof (focus) === "string") ? el.parentElement.querySelector(focus) : el.parentElement;
                             elToFocus && elToFocus.focus({ preventScroll: true });
                         }
@@ -29358,10 +29480,17 @@ class SurveyCreatorModel extends Base {
             }, 1);
         }, 100);
     }
+    getHtmlElementForScroll(element) {
+        const id = element.getType() === "matrixdropdowncolumn" ? element.colOwner.id : element.id;
+        return document.getElementById(id);
+    }
     getSelectedSurveyElement() {
         var sel = this.selectedElement;
         if (!sel || sel.getType() == "survey")
             return null;
+        if (this.selectedElement.getType() === "matrixdropdowncolumn") {
+            return this.selectedElement;
+        }
         return sel.isInteractiveDesignElement && sel.id ? sel : null;
     }
     onSelectingElement(val) {
@@ -29375,6 +29504,8 @@ class SurveyCreatorModel extends Base {
     }
     /**
      * Opens [Survey Creator theme](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#creatorTheme) settings in Property Grid. Applies only if [`propertyGridNavigationMode`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#propertyGridNavigationMode) is `"buttons"`.
+     *
+     * [View Demo](https://surveyjs.io/survey-creator/examples/dynamic-ui-customization/ (linkStyle))
      * @see closeCreatorThemeSettings
      * @see showCreatorThemeSettings
      */
@@ -30335,6 +30466,8 @@ class SurveyCreatorModel extends Base {
     }
     /**
      * Applies a specified UI theme to Survey Creator.
+     *
+     * [View Demo](https://surveyjs.io/survey-creator/examples/dynamic-ui-customization/ (linkStyle))
      * @param theme An `ICreatorTheme` object with theme settings.
      * @see creatorTheme
      * @see showCreatorThemeSettings
@@ -31139,18 +31272,6 @@ __decorate([
 ], PageNavigatorViewModel.prototype, "visibleItemsCount", void 0);
 
 class PageAdorner extends SurveyElementAdornerBase {
-    updateDragTypeOverMe() {
-        var _a;
-        if (!this.isDisposed) {
-            this.dragTypeOverMe = (_a = this.page) === null || _a === void 0 ? void 0 : _a.dragTypeOverMe;
-        }
-    }
-    updateIsDragMe() {
-        var _a;
-        if (!this.isDisposed) {
-            this.isDragMe = (_a = this.page) === null || _a === void 0 ? void 0 : _a.isDragMe;
-        }
-    }
     updateShowPlaceholder(visibleRows) {
         this.showPlaceholder = !this.isGhost && (visibleRows || this.page.visibleRows).length === 0;
     }
@@ -31206,15 +31327,12 @@ class PageAdorner extends SurveyElementAdornerBase {
     updateActionVisibility(id, isVisible) {
         super.updateActionVisibility(id, !this.isGhost && isVisible);
     }
-    get dragInsideCollapsedContainer() {
-        return this.collapsed;
-    }
     getAllowExpandCollapse(options) {
         return !this.isGhost && super.getAllowExpandCollapse(options);
     }
     attachElement(surveyElement) {
         super.attachElement(surveyElement);
-        this.dragTypeOverMe = null;
+        this.dropIndicatorPosition = null;
         if (!!surveyElement) {
             surveyElement["surveyChangedCallback"] = () => {
                 this.isPageLive = !!surveyElement.survey;
@@ -31222,12 +31340,6 @@ class PageAdorner extends SurveyElementAdornerBase {
             if (this.isGhost) {
                 this.addGhostPageSubsribes(surveyElement);
             }
-            surveyElement.registerFunctionOnPropertiesValueChanged(["dragTypeOverMe"], () => {
-                this.updateDragTypeOverMe();
-            }, "dragOver");
-            surveyElement.registerFunctionOnPropertiesValueChanged(["isDragMe"], () => {
-                this.updateIsDragMe();
-            }, "dragOver");
             surveyElement.registerFunctionOnPropertiesValueChanged(["visibleRows"], (newValue) => {
                 this.updateShowPlaceholder(newValue);
             }, "updatePlaceholder");
@@ -31236,8 +31348,6 @@ class PageAdorner extends SurveyElementAdornerBase {
             surveyElement.updateCustomWidgets();
             surveyElement.setWasShown(true);
             this.checkActionProperties();
-            this.dragTypeOverMe = surveyElement.dragTypeOverMe;
-            this.isDragMe = surveyElement.isDragMe;
             if (this.creator.pageEditMode !== "single") {
                 surveyElement.locTitle.placeholder = () => { return surveyElement.isStartPage ? "pe.startPageTitlePlaceholder" : "pe.pageTitlePlaceholder"; };
                 surveyElement.locDescription.placeholder = "pe.pageDescriptionPlaceholder";
@@ -31249,14 +31359,13 @@ class PageAdorner extends SurveyElementAdornerBase {
             delete surveyElement.locTitle.placeholder;
             delete surveyElement.locDescription.placeholder;
             surveyElement.unRegisterFunctionOnPropertiesValueChanged(["elements"], "updatePlaceholder");
-            surveyElement.unRegisterFunctionOnPropertiesValueChanged(["dragTypeOverMe", "isDragMe"], "dragOver");
             surveyElement.unRegisterFunctionOnPropertiesValueChanged(["title", "description"], "add_ghost");
             surveyElement.unRegisterFunctionOnPropertiesValueChanged(["visibleRows"], "updatePlaceholder");
             surveyElement["surveyChangedCallback"] = undefined;
         }
         super.detachElement(surveyElement);
         if (!this.isDisposed) {
-            this.dragTypeOverMe = null;
+            this.dropIndicatorPosition = null;
         }
     }
     onElementSelectedChanged(isSelected) {
@@ -31305,7 +31414,6 @@ class PageAdorner extends SurveyElementAdornerBase {
         container.sizeMode = "small";
         container.cssClasses = this.containerCssClasses();
         container.dotsItem.iconSize = "auto";
-        container.dotsItem.cssClasses.itemIcon += " svc-page-toolbar-item__icon";
         return container;
     }
     createTopActionContainer() {
@@ -31353,53 +31461,32 @@ class PageAdorner extends SurveyElementAdornerBase {
         event.cancelBubble = true;
     }
     get css() {
-        let result = super.getCss();
-        if (this.dragDropHelper.draggedElement && this.dragDropHelper.draggedElement.isPage) {
-            if (this.dragTypeOverMe === DragTypeOverMeEnum.Top) {
-                result += " svc-question__content--drag-over-top";
-            }
-            if (this.dragTypeOverMe === DragTypeOverMeEnum.Bottom) {
-                result += " svc-question__content--drag-over-bottom";
-            }
+        const isShowAddQuestionButton = !!this.creator && !this.creator.showAddQuestionButton;
+        const isGhostEmpty = this.isGhost && this.creator.survey.pages.length > 0;
+        const isInsideCollapsed = this.dropIndicatorPosition === DropIndicatorPosition.Inside && this.collapsed;
+        let result = new CssClassBuilder()
+            .append(super.getCss())
+            .append("svc-page__content--dragged", this.isBeingDragged)
+            .append("svc-question__content--drag-over-top", this.dropIndicatorPosition === DropIndicatorPosition.Top)
+            .append("svc-question__content--drag-over-bottom", this.dropIndicatorPosition === DropIndicatorPosition.Bottom)
+            .append("svc-page__content--collapsed-drag-over-inside", isInsideCollapsed)
+            .append("svc-question__content--drag-over-inside", this.dropIndicatorPosition === DropIndicatorPosition.Inside && this.showPlaceholder)
+            .append("svc-page--drag-over-empty", this.dropIndicatorPosition === DropIndicatorPosition.Inside && !!isGhostEmpty)
+            .append("svc-page--drag-over-empty-no-add-button", this.dropIndicatorPosition === DropIndicatorPosition.Inside && !!isGhostEmpty && isShowAddQuestionButton)
+            .append("svc-page__content--collapse-" + this.creator.expandCollapseButtonVisibility, this.allowExpandCollapse || !!this.page["isGhost"])
+            .append("svc-page__content--collapsed", (this.allowExpandCollapse || !!this.page["isGhost"]) && (this.renderedCollapsed || !!this.page["isGhost"]))
+            .append("svc-page__content--animation-running", (this.allowExpandCollapse || !!this.page["isGhost"]) && (this.expandCollapseAnimationRunning))
+            .append("svc-page__content--new", !!this.isGhost)
+            .append("svc-page__content--selected", !this.isGhost && !!this.creator.isElementSelected(this.page))
+            .append("svc-page__content--no-header", !this.isGhost && settings$1.designMode.showEmptyTitles === false)
+            .toString();
+        if (isInsideCollapsed) {
+            this.dragIn();
         }
         else {
-            if (!!this.dragTypeOverMe && this.showPlaceholder) {
-                result = "svc-question__content--drag-over-inside";
-            }
-            else if (!!this.dragTypeOverMe && this.page.elements.length === 0 && this.creator.survey.pages.length > 0) {
-                result = "svc-page--drag-over-empty";
-                if (!!this.creator && !this.creator.showAddQuestionButton) {
-                    result += " svc-page--drag-over-empty-no-add-button";
-                }
-            }
-            if (!!this.dragTypeOverMe && this.collapsed) {
-                this.dragIn();
-                result += " svc-page__content--collapsed-drag-over-inside";
-            }
-            else {
-                this.dragOut();
-            }
-        }
-        if (this.allowExpandCollapse || this.page["isGhost"]) {
-            result += (" svc-page__content--collapse-" + this.creator.expandCollapseButtonVisibility);
-            if (this.renderedCollapsed || this.page["isGhost"])
-                result += (" svc-page__content--collapsed");
-            if (this.expandCollapseAnimationRunning)
-                result += (" svc-page__content--animation-running");
-        }
-        if (this.isDragMe) {
-            result += " svc-page__content--dragged";
-        }
-        if (this.isGhost) {
-            return result + " svc-page__content--new";
-        }
-        if (this.creator.isElementSelected(this.page)) {
-            result += " svc-page__content--selected";
-        }
-        if (settings$1.designMode.showEmptyTitles === false) {
-            result += " svc-page__content--no-header";
+            this.dragOut();
         }
-        return result.trim();
+        return result;
     }
     hoverStopper(event, element) {
         event["__svc_question_processed"] = true;
@@ -31479,12 +31566,6 @@ __decorate([
 __decorate([
     property({ defaultValue: "" })
 ], PageAdorner.prototype, "currentAddQuestionType", void 0);
-__decorate([
-    property({ defaultValue: null })
-], PageAdorner.prototype, "dragTypeOverMe", void 0);
-__decorate([
-    property({ defaultValue: false })
-], PageAdorner.prototype, "isDragMe", void 0);
 __decorate([
     property({
         onSet(val, target, prevVal) {
@@ -31505,42 +31586,32 @@ class RowViewModel extends Base {
         this.creator = creator;
         this.row = row;
         this.templateData = templateData;
-        this.rowDragTypeOverMeChanged = (s, o) => {
-            if (o.name == "dragTypeOverMe")
-                this.dragTypeOverMe = o.newValue;
-        };
-        this.dragTypeOverMe = this.row.dragTypeOverMe;
+        if (this.row) {
+            this.row.setPropertyValue(SurveyElementAdornerBase.AdornerValueName, this);
+        }
     }
     subscribeElementChanges() {
-        this.row.onPropertyChanged.add(this.rowDragTypeOverMeChanged);
+        this.row.setPropertyValue(SurveyElementAdornerBase.AdornerValueName, this);
     }
     unsubscribeElementChanges() {
-        this.row.onPropertyChanged.remove(this.rowDragTypeOverMeChanged);
+        this.row.setPropertyValue(SurveyElementAdornerBase.AdornerValueName, null);
     }
     get cssClasses() {
-        let result = "svc-row";
-        let ghostClass = " svc-row--ghost";
-        if (this.row.elements.length === 1 &&
-            this.row.elements[0].name === "sv-drag-drop-ghost-survey-element-name") {
-            result += ghostClass;
-        }
-        if (this.dragTypeOverMe === DragTypeOverMeEnum.Top) {
-            result += " svc-row--drag-over-top";
-        }
-        if (this.dragTypeOverMe === DragTypeOverMeEnum.Bottom) {
-            result += " svc-row--drag-over-bottom";
-        }
-        return result;
+        return new CssClassBuilder()
+            .append("svc-row")
+            .append("svc-row--ghost", this.row.elements.length === 1 && this.row.elements[0].name === "sv-drag-drop-ghost-survey-element-name")
+            .append("svc-row--drag-over-top", this.dropIndicatorPosition === DropIndicatorPosition.Top)
+            .append("svc-row--drag-over-bottom", this.dropIndicatorPosition === DropIndicatorPosition.Bottom)
+            .toString();
     }
     dispose() {
         super.dispose();
         this.unsubscribeElementChanges();
-        this.rowDragTypeOverMeChanged = undefined;
     }
 }
 __decorate([
-    property()
-], RowViewModel.prototype, "dragTypeOverMe", void 0);
+    property({ defaultValue: null })
+], RowViewModel.prototype, "dropIndicatorPosition", void 0);
 
 class QuestionAdornerViewModel extends SurveyElementAdornerBase {
     constructor(creator, surveyElement, templateData) {
@@ -31599,57 +31670,34 @@ class QuestionAdornerViewModel extends SurveyElementAdornerBase {
             .append("svc-question__adorner--collapse-" + this.creator.expandCollapseButtonVisibility, true).toString();
     }
     css() {
+        const isInsideCollapsed = this.dropIndicatorPosition === DropIndicatorPosition.Inside && this.collapsed;
         if (!this.surveyElement.isInteractiveDesignElement)
             return "";
-        let result = "svc-question__content";
-        result += typeof this.surveyElement.getType === "function" ? (" svc-question__content--" + this.surveyElement.getType()) : "";
-        if (this.creator.isElementSelected(this.surveyElement)) {
-            result += " svc-question__content--selected";
-        }
-        if (this.isEmptyElement) {
-            result += " svc-question__content--empty";
-        }
-        if (this.isEmptyTemplate) {
-            result += " svc-question__content--empty-template";
-        }
-        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";
-        }
-        if (!!this.dragTypeOverMe && (this.canExpandOnDrag) && this.dragInsideCollapsedContainer) {
+        if (isInsideCollapsed) {
             this.dragIn();
-            result += " svc-question__content--collapsed-drag-over-inside";
         }
         else {
             this.dragOut();
         }
-        if (this.dragTypeOverMe === DragTypeOverMeEnum.InsideEmptyPanel) {
-            result += " svc-question__content--drag-over-inside";
-        }
-        if (!this.dragInsideCollapsedContainer) {
-            if (this.dragTypeOverMe === DragTypeOverMeEnum.Left) {
-                result += " svc-question__content--drag-over-left";
-            }
-            if (this.dragTypeOverMe === DragTypeOverMeEnum.Right) {
-                result += " svc-question__content--drag-over-right";
-            }
-            if (this.dragTypeOverMe === DragTypeOverMeEnum.Top) {
-                result += " svc-question__content--drag-over-top";
-            }
-            if (this.dragTypeOverMe === DragTypeOverMeEnum.Bottom) {
-                result += " svc-question__content--drag-over-bottom";
-            }
-            if (this.creator) {
-                result = this.creator.getElementAddornerCssCallback(this.surveyElement, result);
-            }
+        let result = new CssClassBuilder()
+            .append("svc-question__content")
+            .append("svc-question__content--" + this.surveyElement.getType(), typeof this.surveyElement.getType === "function")
+            .append("svc-question__content--selected", !!this.creator.isElementSelected(this.surveyElement))
+            .append("svc-question__content--empty", this.isEmptyElement)
+            .append("svc-question__content--empty-template", this.isEmptyTemplate)
+            .append("svc-question__content--collapsed", this.renderedCollapsed)
+            .append("svc-question__content--title-hidden", !this.surveyElement.hasTitle || (!this.surveyElement.isPanel && this.surveyElement.getTitleLocation() === "hidden"))
+            .append("svc-question__content--title-bottom", !!this.surveyElement.hasTitleOnBottom)
+            .append("svc-question__content--dragged", this.isBeingDragged)
+            .append("svc-question__content--collapsed-drag-over-inside", isInsideCollapsed)
+            .append("svc-question__content--drag-over-inside", this.dropIndicatorPosition === DropIndicatorPosition.Inside && !this.collapsed)
+            .append("svc-question__content--drag-over-top", this.dropIndicatorPosition === DropIndicatorPosition.Top)
+            .append("svc-question__content--drag-over-bottom", this.dropIndicatorPosition === DropIndicatorPosition.Bottom)
+            .append("svc-question__content--drag-over-right", this.dropIndicatorPosition === DropIndicatorPosition.Right)
+            .append("svc-question__content--drag-over-left", this.dropIndicatorPosition === DropIndicatorPosition.Left)
+            .toString();
+        if (!isInsideCollapsed && this.creator) {
+            result = this.creator.getElementAddornerCssCallback(this.surveyElement, result);
         }
         return result;
     }
@@ -31686,15 +31734,9 @@ class QuestionAdornerViewModel extends SurveyElementAdornerBase {
     }
     expandWithDragIn() {
         super.expandWithDragIn();
-        this.element.dragTypeOverMe = null;
+        this.dropIndicatorPosition = null;
         this.creator.dragDropSurveyElements.dropTarget = null;
     }
-    get isDragMe() {
-        return this.surveyElement.isDragMe;
-    }
-    get dragTypeOverMe() {
-        return this.element.dragTypeOverMe;
-    }
     get isBannerShowing() {
         return this.isUsingCarryForward || this.isUsingRestfull || this.isMessagePanelVisible;
     }
@@ -31816,7 +31858,6 @@ class QuestionAdornerViewModel extends SurveyElementAdornerBase {
         actionContainer.sizeMode = "small";
         actionContainer.cssClasses = defaultCssClasses;
         actionContainer.dotsItem.css += " svc-survey-element-toolbar__dots-item";
-        actionContainer.dotsItem.innerCss += " svc-survey-element-toolbar__item";
         return actionContainer;
     }
     updateActionsPropertiesCore() {
@@ -32041,19 +32082,25 @@ class QuestionAdornerViewModel extends SurveyElementAdornerBase {
         let selectedAction;
         let selectedSubaction = undefined;
         let selectedSubactions = undefined;
+        const toolboxItemToAction = (item, needSeparator = false) => {
+            return this.creator.createIActionBarItemByClass(item, needSeparator, (questionType, json) => { this.convertQuestion(questionType, json, defaultJsons); });
+        };
         availableItems.forEach((item) => {
             var _a;
             const needSeparator = lastItem && item.category != lastItem.category;
-            const action = this.creator.createIActionBarItemByClass(item, needSeparator, (questionType, json) => { this.convertQuestion(questionType, json, defaultJsons); });
+            const action = toolboxItemToAction(item, needSeparator);
             if (this.toolboxItemIsCorresponded(item, !!selectedAction)) {
                 selectedAction = action;
+                if (item.items) {
+                    selectedSubactions = item.items.map(subitem => toolboxItemToAction(subitem));
+                }
             }
             if (((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.creator.toolbox.showSubitems) {
                 const subactions = [];
                 let selectedSubactionLocal = undefined;
                 let allChildsAreCompatibleToParent = false;
                 item.items.forEach(subitem => {
-                    const subaction = this.creator.createIActionBarItemByClass(subitem, false, (questionType, json) => { this.convertQuestion(questionType, json, defaultJsons); });
+                    const subaction = toolboxItemToAction(subitem);
                     if (this.toolboxItemIsCorresponded(subitem, !!selectedAction))
                         selectedSubactionLocal = subitem;
                     if (this.jsonsAreCompatible(item.json, subitem.json))
@@ -32061,7 +32108,7 @@ class QuestionAdornerViewModel extends SurveyElementAdornerBase {
                     subactions.push(subaction);
                 });
                 if (!allChildsAreCompatibleToParent && subactions.length > 0) {
-                    const defaultSubaction = this.creator.createIActionBarItemByClass(item, false, (questionType, json) => { this.convertQuestion(questionType, json, defaultJsons); });
+                    const defaultSubaction = toolboxItemToAction(item);
                     defaultSubaction.id = action.id + "-default";
                     defaultSubaction.iconName = undefined;
                     defaultSubaction.markerIconName = undefined;
@@ -32075,8 +32122,8 @@ class QuestionAdornerViewModel extends SurveyElementAdornerBase {
                 if (selectedSubactionLocal) {
                     selectedAction = action;
                     selectedSubaction = selectedSubactionLocal;
+                    selectedSubactions = subactions;
                 }
-                selectedSubactions = subactions;
             }
             lastItem = item;
             newItems.push(action);
@@ -32223,9 +32270,8 @@ class QuestionAdornerViewModel extends SurveyElementAdornerBase {
             items.push(inputTypeConverter);
         }
         items[items.length - 1].css += " svc-dropdown-action--convertTo-last";
-        if (typeof element["isRequired"] !== "undefined" &&
-            propertyExists(element, "isRequired") &&
-            isPropertyVisible(element, "isRequired")) {
+        if (typeof element["isRequired"] !== "undefined" && !!element.getType
+            && SurveyHelper.isPropertyVisible(element, Serializer.findProperty(element.getType(), "isRequired"), this.creator)) {
             items.push(this.createRequiredAction());
         }
     }
@@ -32962,7 +33008,8 @@ class MatrixCellWrapperViewModel extends Base {
             componentName: "svc-question-editor-content",
             data: {
                 survey: editSurvey.survey,
-                creator: this.creator
+                creator: this.creator,
+                style: designTabSurveyThemeJSON.cssVariables
             },
             onApply: () => {
                 editSurvey.apply();
@@ -33320,7 +33367,6 @@ QuestionFactory.Instance.registerQuestion("linkvalue", (name) => {
 class ScrollViewModel {
     constructor() {
         this._lockScroll = false;
-        //this.dragTypeOverMe = this.row.dragTypeOverMe;
     }
     setRootElement(element) {
         this._containerElementValue = element === null || element === void 0 ? void 0 : element.querySelector(".svc-scroll__scroller");
@@ -34117,15 +34163,16 @@ class FastEntryEditorBase extends PropertyEditorSetupValue {
     collectNames(item, type, separatorCounter) {
         let text = "";
         this.names.forEach((name) => {
+            let str = undefined;
             if (type === "itemvalues") {
                 if (name == "value")
                     return;
-                var str = name == "text" ? item.pureText : item[name];
+                str = name == "text" ? item.pureText : item[name];
             }
             else {
-                var str = item[name];
+                str = item[name];
             }
-            if (!!str) {
+            if (!Helpers.isValueEmpty(str)) {
                 for (var i = 0; i < separatorCounter; i++) {
                     text += ItemValue.Separator;
                 }
@@ -34390,10 +34437,9 @@ class PropertyGridEditorMatrix extends PropertyGridEditor {
         if (!!prop && !!prop.className) {
             var properties = Serializer.getProperties(prop.className);
             for (var i = 0; i < properties.length; i++) {
-                if (!this.isPropertyShownInList(properties[i])) {
-                    continue;
+                if (SurveyHelper.isPropertyVisible(undefined, properties[i], undefined, "list")) {
+                    res.push(properties[i].name);
                 }
-                res.push(properties[i].name);
             }
         }
         return res.length > 0 ? res : this.getDefaulColumnNames();
@@ -34401,9 +34447,6 @@ class PropertyGridEditorMatrix extends PropertyGridEditor {
     getDefaulColumnNames() {
         return [];
     }
-    isPropertyShownInList(prop) {
-        return prop.visible && prop.showMode !== "form";
-    }
     getObjTypeName() {
         return "";
     }
@@ -34758,7 +34801,7 @@ class PropertyGridEditorMatrixPages extends PropertyGridEditorMatrix {
         return "name";
     }
     getBaseValue(prop) {
-        return "page";
+        return editorLocalization.getString("ed.newPageName");
     }
     getAllowRowDragDrop(prop) { return true; }
 }
@@ -35015,14 +35058,14 @@ class PropertyGridEditorBindings extends PropertyGridEditor {
     onCreated(obj, question, prop, options) {
         question.contentPanel.fromJSON({ elements: this.getQuestions(obj, options) });
         question.valueFromDataCallback = (value) => {
-            if (!value && obj.bindings.getNames().length > 0) {
-                const result = {};
-                for (const bindingName of obj.bindings.getNames()) {
-                    result[bindingName] = obj.bindings.getValueNameByPropertyName(bindingName);
+            const keys = obj.bindings.getNames();
+            const result = {};
+            if (keys.length > 0) {
+                for (const key of keys) {
+                    result[key] = !!value ? value[key] : obj.bindings.getValueNameByPropertyName(key);
                 }
-                return result;
             }
-            return value;
+            return result;
         };
     }
     getQuestions(obj, options) {
@@ -35716,8 +35759,8 @@ class CreatorPreset extends CreatorPresetBase {
 }
 
 let Version;
-Version = `${"2.0.0-rc.9"}`;
-checkLibraryVersion(`${"2.0.0-rc.9"}`, "survey-creator-core");
+Version = `${"2.0.1"}`;
+checkLibraryVersion(`${"2.0.1"}`, "survey-creator-core");
 
-export { AceJsonEditorModel, ColorCalculator, CreatorAction, CreatorBase, CreatorEvent, CreatorPreset, CreatorPresetBase, CreatorPresetPropertyGrid, CreatorPresetPropertyGridDefinition, CreatorPresetTabs, CreatorPresetToolbox, CreatorPresetToolboxConfigurator, CreatorPresetToolboxDefinition, CreatorResponsivityManager, CreatorThemeModel, CreatorThemes, DEFAULT_MONITOR_DPI, DefaultFonts, DragDropSurveyElements, EditorLocalization, EmptySurveyCreatorOptions, FooterToolbarActionContainer, HEXToRGB, HSBToRGB, HueColorCalculator, ImageItemValueWrapperViewModel, ItemValueWrapperViewModel, JsonDuplicateNameError, JsonEditorBaseModel, LogicEvent, LogoImageViewModel, MatrixCellWrapperEditSurvey, MatrixCellWrapperViewModel, MenuButton, ObjType, ObjectSelector, ObjectSelectorItem, ObjectSelectorModel, PageAdorner, PageNavigatorViewModel, PagesController, PredefinedBackgroundColors, PredefinedColors, PredefinedCreatorThemes, PredefinedThemes, PropertyEditorSetupValue, PropertyGridCellsEditor, PropertyGridEditor, PropertyGridEditorBackgroundCornerRadius, PropertyGridEditorBindings, PropertyGridEditorBoolean, PropertyGridEditorCollection, PropertyGridEditorColor, PropertyGridEditorColorWithAlpha, PropertyGridEditorCondition, PropertyGridEditorDateTime, PropertyGridEditorDropdown, PropertyGridEditorExpression, PropertyGridEditorFontSettings, PropertyGridEditorHtml, PropertyGridEditorImageSize, PropertyGridEditorMatrix, PropertyGridEditorMatrixCalculatedValues, PropertyGridEditorMatrixColumns, PropertyGridEditorMatrixHtmlConditions, PropertyGridEditorMatrixItemValues, PropertyGridEditorMatrixLayoutColumns, PropertyGridEditorMatrixMultipleTypes, PropertyGridEditorMatrixMutlipleTextItems, PropertyGridEditorMatrixPages, PropertyGridEditorMatrixRateValues, PropertyGridEditorMatrixTriggers, PropertyGridEditorMatrixUrlConditions, PropertyGridEditorMatrixValidators, PropertyGridEditorNumber, PropertyGridEditorPage, PropertyGridEditorQuestion, PropertyGridEditorQuestionCarryForward, PropertyGridEditorQuestionHeader, PropertyGridEditorQuestionMaskSettings, PropertyGridEditorQuestionRestfull, PropertyGridEditorQuestionSelectBase, PropertyGridEditorQuestionValue, PropertyGridEditorSet, PropertyGridEditorShadowEffects, PropertyGridEditorSpinEdit, PropertyGridEditorString, PropertyGridEditorStringArray, PropertyGridEditorStringBase, PropertyGridEditorSwitchToggle, PropertyGridEditorText, PropertyGridEditorUndefinedBoolean, PropertyGridLinkEditor, PropertyGridModel, PropertyGridPanelValueEditor, PropertyGridRowValueEditor, PropertyGridTitleActionsCreator, PropertyGridTriggerValueEditor, PropertyGridTriggerValueInLogicEditor, PropertyGridValueEditor, PropertyGridValueEditorBase, PropertyGridViewModel, PropertyJSONGenerator, QuestionAdornerViewModel, QuestionColorModel, QuestionCommentWithResetModel, QuestionConvertMode, QuestionConverter, QuestionDropdownAdornerViewModel, QuestionEmbeddedSurveyModel, QuestionFileEditorModel, QuestionImageAdornerViewModel, QuestionLinkValueModel, QuestionRatingAdornerViewModel, QuestionSpinEditorModel, QuestionTextWithResetModel, QuestionToolbox, QuestionToolboxCategory, QuestionToolboxItem, RGBToHSB, ResetValueAdorner, ResizeManager, RowViewModel, ScrollViewModel, SearchManager, SearchManagerPropertyGrid, SearchManagerToolbox, SidebarHeaderModel, SidebarModel, SidebarPageModel, StringEditorConnector, StringEditorViewModelBase, StringItemsNavigatorBase, SurveyCreatorModel, SurveyHelper, SurveyJSON5, SurveyLogic, SurveyLogicUI, SurveyQuestionEditorDefinition, SurveyQuestionEditorPropertyDefinition, SurveyQuestionEditorTabDefinition, SurveyQuestionProperties, SurveyResultsItemModel, SurveyResultsModel, SurveySimulatorModel, SurveyTextWorker, SurveyTextWorkerError, SurveyTextWorkerJsonError, SurveyTextWorkerParserError, Switcher, TabControlModel, TabDesignerPlugin, TabDesignerViewModel, TabJsonEditorAcePlugin, TabJsonEditorBasePlugin, TabJsonEditorTextareaPlugin, TabLogicPlugin, TabTestPlugin, TabTranslationPlugin, TabbedMenuContainer, TabbedMenuItem, TestSurveyTabViewModel, TextareaJsonEditorModel, ThemeModelEditorDefinition, ThemeTabPlugin, ThemeTabViewModel, Themes, ToolbarActionContainer, ToolboxToolViewModel, Transaction, Translation, TranslationEditor, TranslationForEditor, TranslationGroup, TranslationItem, TranslationItemBase, TranslationItemString, UndoRedoAction, UndoRedoArrayAction, UndoRedoManager, UndoRedoPlugin, Version, assign, assignDefaultClasses, backgroundCornerRadiusFromCssVariable, backgroundCornerRadiusToCssVariable, calculateDragOverLocation, calculateIsEdge, calculateIsSide, capitalize, clearNewLines, colorsAreEqual, convertRgbaToString, copyCssClasses, copyObject, createBoxShadow, createBoxShadowReset, createColor, createExportCSVAction, createImportCSVAction, creatorThemeModelEditorDefinition, creatorThemeModelPropertyGridDefinition, defaultCreatorThemesOrder, defaultPropertyGridDefinition, defaultStrings, defaultThemesOrder, editableStringRendererName, editorLocalization, enStrings, findParentNode, focusFirstControl, fontsettingsFromCssVariable, fontsettingsToCssVariable, getAcceptedTypesByContentMode, getElementWrapperComponentData, getElementWrapperComponentName, getFirstNonTextElement, getItemValueWrapperComponentData, getItemValueWrapperComponentName, getLocString, getNextItemText, getNextItemValue, getNextValue, getNodesFromKoComponentInfo, getOS, getPredefinedBackgoundColorsChoices, getPredefinedColorsItemValues, getQuestionContentWrapperComponentName, getQuestionFromObj, getRGBaChannelValues, iconsV1, iconsV2, ignoreUndoRedo, imageMimeTypes, ingectAlpha, initLogicOperator, initialSettingsAllowShowEmptyTitleInDesignMode, initializeDesignTimeSurveyModel, isPanelDynamic, isPropertyVisible, isStringEditable, isTextInput, listComponentCss, editorLocalization as localization, logicCss, notShortCircuitAnd, parseBoxShadow, parseColor, parseRgbaFromString, propertyExists, propertyGridCss, registerAdorner, registerCreatorTheme, registerSurveyTheme, removeAdorners, roundTo2Decimals, saveToFileHandler, scrollElementIntoView, select, setSurveyJSONForPropertyGrid, settings, setupLocale, simulatorDevices, svgBundle, themeModelPropertyGridDefinition, toggleHovered, translationCss, trimBoxShadowValue, trimEmptyFields, undoRedoTransaction, updateBackgroundCornerRadiusJSON, updateFontSettingsJSON, updateShadowEffectsJSON, updatecoloralphaJSON, wrapTextByCurlyBraces };
+export { AceJsonEditorModel, ColorCalculator, CreatorAction, CreatorBase, CreatorEvent, CreatorPreset, CreatorPresetBase, CreatorPresetPropertyGrid, CreatorPresetPropertyGridDefinition, CreatorPresetTabs, CreatorPresetToolbox, CreatorPresetToolboxConfigurator, CreatorPresetToolboxDefinition, CreatorResponsivityManager, CreatorThemeModel, CreatorThemes, DEFAULT_MONITOR_DPI, DefaultFonts, DragDropSurveyElements, EditorLocalization, EmptySurveyCreatorOptions, FooterToolbarActionContainer, HEXToRGB, HSBToRGB, HueColorCalculator, ImageItemValueWrapperViewModel, ItemValueWrapperViewModel, JsonDuplicateNameError, JsonEditorBaseModel, LogicEvent, LogoImageViewModel, MatrixCellWrapperEditSurvey, MatrixCellWrapperViewModel, MenuButton, ObjType, ObjectSelector, ObjectSelectorItem, ObjectSelectorModel, PageAdorner, PageNavigatorViewModel, PagesController, PredefinedBackgroundColors, PredefinedColors, PredefinedCreatorThemes, PredefinedThemes, PropertyEditorSetupValue, PropertyGridCellsEditor, PropertyGridEditor, PropertyGridEditorBackgroundCornerRadius, PropertyGridEditorBindings, PropertyGridEditorBoolean, PropertyGridEditorCollection, PropertyGridEditorColor, PropertyGridEditorColorWithAlpha, PropertyGridEditorCondition, PropertyGridEditorDateTime, PropertyGridEditorDropdown, PropertyGridEditorExpression, PropertyGridEditorFontSettings, PropertyGridEditorHtml, PropertyGridEditorImageSize, PropertyGridEditorMatrix, PropertyGridEditorMatrixCalculatedValues, PropertyGridEditorMatrixColumns, PropertyGridEditorMatrixHtmlConditions, PropertyGridEditorMatrixItemValues, PropertyGridEditorMatrixLayoutColumns, PropertyGridEditorMatrixMultipleTypes, PropertyGridEditorMatrixMutlipleTextItems, PropertyGridEditorMatrixPages, PropertyGridEditorMatrixRateValues, PropertyGridEditorMatrixTriggers, PropertyGridEditorMatrixUrlConditions, PropertyGridEditorMatrixValidators, PropertyGridEditorNumber, PropertyGridEditorPage, PropertyGridEditorQuestion, PropertyGridEditorQuestionCarryForward, PropertyGridEditorQuestionHeader, PropertyGridEditorQuestionMaskSettings, PropertyGridEditorQuestionRestfull, PropertyGridEditorQuestionSelectBase, PropertyGridEditorQuestionValue, PropertyGridEditorSet, PropertyGridEditorShadowEffects, PropertyGridEditorSpinEdit, PropertyGridEditorString, PropertyGridEditorStringArray, PropertyGridEditorStringBase, PropertyGridEditorSwitchToggle, PropertyGridEditorText, PropertyGridEditorUndefinedBoolean, PropertyGridLinkEditor, PropertyGridModel, PropertyGridPanelValueEditor, PropertyGridRowValueEditor, PropertyGridTitleActionsCreator, PropertyGridTriggerValueEditor, PropertyGridTriggerValueInLogicEditor, PropertyGridValueEditor, PropertyGridValueEditorBase, PropertyGridViewModel, PropertyJSONGenerator, QuestionAdornerViewModel, QuestionColorModel, QuestionCommentWithResetModel, QuestionConvertMode, QuestionConverter, QuestionDropdownAdornerViewModel, QuestionEmbeddedSurveyModel, QuestionFileEditorModel, QuestionImageAdornerViewModel, QuestionLinkValueModel, QuestionRatingAdornerViewModel, QuestionSpinEditorModel, QuestionTextWithResetModel, QuestionToolbox, QuestionToolboxCategory, QuestionToolboxItem, RGBToHSB, ResetValueAdorner, ResizeManager, RowViewModel, ScrollViewModel, SearchManager, SearchManagerPropertyGrid, SearchManagerToolbox, SidebarHeaderModel, SidebarModel, SidebarPageModel, StringEditorConnector, StringEditorViewModelBase, StringItemsNavigatorBase, SurveyCreatorModel, SurveyHelper, SurveyJSON5, SurveyLogic, SurveyLogicUI, SurveyQuestionEditorDefinition, SurveyQuestionEditorPropertyDefinition, SurveyQuestionEditorTabDefinition, SurveyQuestionProperties, SurveyResultsItemModel, SurveyResultsModel, SurveySimulatorModel, SurveyTextWorker, SurveyTextWorkerError, SurveyTextWorkerJsonError, SurveyTextWorkerParserError, Switcher, TabControlModel, TabDesignerPlugin, TabDesignerViewModel, TabJsonEditorAcePlugin, TabJsonEditorBasePlugin, TabJsonEditorTextareaPlugin, TabLogicPlugin, TabTestPlugin, TabTranslationPlugin, TabbedMenuContainer, TabbedMenuItem, TestSurveyTabViewModel, TextareaJsonEditorModel, ThemeModelEditorDefinition, ThemeTabPlugin, ThemeTabViewModel, Themes, ToolbarActionContainer, ToolboxToolViewModel, Transaction, Translation, TranslationEditor, TranslationForEditor, TranslationGroup, TranslationItem, TranslationItemBase, TranslationItemString, UndoRedoAction, UndoRedoArrayAction, UndoRedoManager, UndoRedoPlugin, Version, assign, assignDefaultClasses, backgroundCornerRadiusFromCssVariable, backgroundCornerRadiusToCssVariable, calculateDragOverLocation, calculateIsEdge, calculateIsSide, capitalize, clearNewLines, colorsAreEqual, convertRgbaToString, copyCssClasses, copyObject, createBoxShadow, createBoxShadowReset, createColor, createExportCSVAction, createImportCSVAction, creatorThemeModelEditorDefinition, creatorThemeModelPropertyGridDefinition, defaultCreatorThemesOrder, defaultPropertyGridDefinition, defaultStrings, defaultThemesOrder, editableStringRendererName, editorLocalization, enStrings, findParentNode, focusFirstControl, fontsettingsFromCssVariable, fontsettingsToCssVariable, getAcceptedTypesByContentMode, getElementWrapperComponentData, getElementWrapperComponentName, getFirstNonTextElement, getItemValueWrapperComponentData, getItemValueWrapperComponentName, getLocString, getLocaleStrings, getNextItemText, getNextItemValue, getNextValue, getNodesFromKoComponentInfo, getOS, getPredefinedBackgoundColorsChoices, getPredefinedColorsItemValues, getQuestionContentWrapperComponentName, getQuestionFromObj, getRGBaChannelValues, iconsV1, iconsV2, ignoreUndoRedo, imageMimeTypes, ingectAlpha, initLogicOperator, initialSettingsAllowShowEmptyTitleInDesignMode, initializeDesignTimeSurveyModel, isStringEditable, isTextInput, listComponentCss, editorLocalization as localization, logicCss, notShortCircuitAnd, parseBoxShadow, parseColor, parseRgbaFromString, propertyGridCss, registerAdorner, registerCreatorTheme, registerSurveyTheme, removeAdorners, roundTo2Decimals, saveToFileHandler, scrollElementIntoView, select, setSurveyJSONForPropertyGrid, settings, setupLocale, simulatorDevices, svgBundle, themeModelPropertyGridDefinition, toggleHovered, translationCss, trimBoxShadowValue, trimEmptyFields, undoRedoTransaction, updateBackgroundCornerRadiusJSON, updateFontSettingsJSON, updateShadowEffectsJSON, updatecoloralphaJSON, wrapTextByCurlyBraces };
 //# sourceMappingURL=survey-creator-core.js.map