survey-react 1.12.13 → 1.12.15

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.12.13
+ * surveyjs - Survey JavaScript library v1.12.15
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1705,7 +1705,7 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 /*!********************************************!*\
   !*** ./src/entries/react.ts + 287 modules ***!
   \********************************************/
-/*! exports provided: Version, ReleaseDate, checkLibraryVersion, setLicenseKey, slk, hasLicense, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedErrorRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, MultipleTextCell, MultipleTextErrorCell, MutlipleTextErrorRow, MutlipleTextRow, QuestionMultipleTextModel, MultipleTextEditorModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionFilePage, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryFocusPage, createTOCListModel, getTocRootCss, TOCModel, SurveyProgressModel, ProgressButtons, ProgressButtonsResponsivityManager, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, SurveyTriggerSkip, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, Cover, CoverCell, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, getLocaleString, setupLocale, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, confirmActionAsync, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, chooseFiles, sanitizeEditableContent, prepareElementForVerticalAnimation, cleanHtmlElementAfterAnimation, classesToSelector, renamedIcons, getIconNameFromProxy, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, TextAreaModel, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, StylesManager, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgThemeSets, addIconsToThemeSet, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, createPopupModelWithListModel, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper, Model, bootstrapThemeName, bootstrapThemeColors, bootstrapThemeCssRules, bootstrapMaterialThemeName, bootstrapMaterialThemeColors, bootstrapMaterialThemeCssRules, defaultBootstrapCss, defaultBootstrapMaterialCss, Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, ListItemContent, ListItemGroup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, QuestionErrorComponent, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent, PopupModal */
+/*! exports provided: Version, ReleaseDate, checkLibraryVersion, setLicenseKey, slk, hasLicense, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedErrorRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, MultipleTextCell, MultipleTextErrorCell, MutlipleTextErrorRow, MutlipleTextRow, QuestionMultipleTextModel, MultipleTextEditorModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionFilePage, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryFocusPage, createTOCListModel, getTocRootCss, TOCModel, SurveyProgressModel, ProgressButtons, ProgressButtonsResponsivityManager, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, SurveyTriggerSkip, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, Cover, CoverCell, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, getLocaleString, setupLocale, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, confirmActionAsync, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, chooseFiles, sanitizeEditableContent, prepareElementForVerticalAnimation, cleanHtmlElementAfterAnimation, classesToSelector, renamedIcons, getIconNameFromProxy, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, TextAreaModel, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, StylesManager, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgThemeSets, addIconsToThemeSet, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, activateLazyRenderingChecks, createDropdownActionModel, createDropdownActionModelAdvanced, createPopupModelWithListModel, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper, Model, bootstrapThemeName, bootstrapThemeColors, bootstrapThemeCssRules, bootstrapMaterialThemeName, bootstrapMaterialThemeColors, bootstrapMaterialThemeCssRules, defaultBootstrapCss, defaultBootstrapMaterialCss, Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, ListItemContent, ListItemGroup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, QuestionErrorComponent, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent, PopupModal */
 /*! ModuleConcatenation bailout: Cannot concat with external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"} (<- Module is not an ECMAScript module) */
 /*! ModuleConcatenation bailout: Cannot concat with external {"root":"ReactDOM","commonjs2":"react-dom","commonjs":"react-dom","amd":"react-dom"} (<- Module is not an ECMAScript module) */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -1935,6 +1935,7 @@ __webpack_require__.d(__webpack_exports__, "VerticalResponsivityManager", functi
 __webpack_require__.d(__webpack_exports__, "unwrap", function() { return /* reexport */ unwrap; });
 __webpack_require__.d(__webpack_exports__, "getOriginalEvent", function() { return /* reexport */ getOriginalEvent; });
 __webpack_require__.d(__webpack_exports__, "getElement", function() { return /* reexport */ getElement; });
+__webpack_require__.d(__webpack_exports__, "activateLazyRenderingChecks", function() { return /* reexport */ activateLazyRenderingChecks; });
 __webpack_require__.d(__webpack_exports__, "createDropdownActionModel", function() { return /* reexport */ createDropdownActionModel; });
 __webpack_require__.d(__webpack_exports__, "createDropdownActionModelAdvanced", function() { return /* reexport */ createDropdownActionModelAdvanced; });
 __webpack_require__.d(__webpack_exports__, "createPopupModelWithListModel", function() { return /* reexport */ createPopupModelWithListModel; });
@@ -2855,12 +2856,13 @@ var surveyLocalization = {
     //TODO remove on next week
     get showNamesInEnglish() { return this.useEnglishNames; },
     set showNamesInEnglish(val) { this.useEnglishNames = val; },
-    setupLocale: function (loc, strings, name, nameInEngish, direction) {
-        this.locales[loc] = strings;
-        this.localeNames[loc] = name;
-        this.localeNamesInEnglish[loc] = nameInEngish;
-        if (direction !== undefined) {
-            this.localeDirections[loc] = direction;
+    setupLocale: function (localeConfig) {
+        var loc = localeConfig.localeCode;
+        this.locales[loc] = localeConfig.strings;
+        this.localeNames[loc] = localeConfig.nativeName;
+        this.localeNamesInEnglish[loc] = localeConfig.englishName;
+        if (localeConfig.rtl !== undefined) {
+            this.localeDirections[loc] = localeConfig.rtl;
         }
     },
     get currentLocale() {
@@ -2959,7 +2961,7 @@ function getLocaleString(strName, locale) {
     return surveyLocalization.getString(strName, locale);
 }
 function setupLocale(localeConfig) {
-    surveyLocalization.setupLocale(localeConfig.localeCode, localeConfig.strings, localeConfig.nativeName, localeConfig.englishName, localeConfig.rtl ? "rtl" : undefined);
+    surveyLocalization.setupLocale(localeConfig);
 }
 var surveyStrings = englishStrings;
 surveyLocalization.locales["en"] = englishStrings;
@@ -3053,9 +3055,11 @@ function jsonobject_property(options) {
                 set: function (val) {
                     var newValue = processComputedUpdater(this, val);
                     var prevValue = this.getPropertyValue(key);
-                    this.setPropertyValue(key, newValue);
-                    if (!!options && options.onSet) {
-                        options.onSet(newValue, this, prevValue);
+                    if (newValue !== prevValue) {
+                        this.setPropertyValue(key, newValue);
+                        if (!!options && options.onSet) {
+                            options.onSet(newValue, this, prevValue);
+                        }
                     }
                 },
             });
@@ -10370,8 +10374,7 @@ var base_Base = /** @class */ (function () {
      * @param name A property name.
      * @param defaultValue *(Optional)* A value to return if the property is not found or does not have a value.
      */
-    Base.prototype.getPropertyValue = function (name, defaultValue) {
-        if (defaultValue === void 0) { defaultValue = null; }
+    Base.prototype.getPropertyValue = function (name, defaultValue, calcFunc) {
         var res = this.getPropertyValueWithoutDefault(name);
         if (this.isPropertyEmpty(res)) {
             var locStr = this.localizableStrings ? this.localizableStrings[name] : undefined;
@@ -10379,6 +10382,13 @@ var base_Base = /** @class */ (function () {
                 return locStr.text;
             if (defaultValue !== null && defaultValue !== undefined)
                 return defaultValue;
+            if (!!calcFunc) {
+                var newVal = calcFunc();
+                if (newVal !== undefined) {
+                    this.setPropertyValueDirectly(name, newVal);
+                    return newVal;
+                }
+            }
             var propDefaultValue = this.getDefaultPropertyValue(name);
             if (propDefaultValue !== undefined)
                 return propDefaultValue;
@@ -11699,6 +11709,7 @@ var defaultListCss = {
     loadingIndicator: "sv-list__loading-indicator",
     itemSelected: "sv-list__item--selected",
     itemGroup: "sv-list__item--group",
+    itemGroupSelected: "sv-list__item--group-selected",
     itemWithIcon: "sv-list__item--with-icon",
     itemDisabled: "sv-list__item--disabled",
     itemFocused: "sv-list__item--focused",
@@ -11758,21 +11769,29 @@ var list_ListModel = /** @class */ (function (_super) {
                 .toString();
         };
         _this.getItemClass = function (itemValue) {
+            var isSelected = _this.isItemSelected(itemValue);
             return new CssClassBuilder()
                 .append(_this.cssClasses.item)
                 .append(_this.cssClasses.itemWithIcon, !!itemValue.iconName)
                 .append(_this.cssClasses.itemDisabled, _this.isItemDisabled(itemValue))
                 .append(_this.cssClasses.itemFocused, _this.isItemFocused(itemValue))
-                .append(_this.cssClasses.itemSelected, _this.isItemSelected(itemValue))
+                .append(_this.cssClasses.itemSelected, !itemValue.hasSubItems && isSelected)
                 .append(_this.cssClasses.itemGroup, itemValue.hasSubItems)
+                .append(_this.cssClasses.itemGroupSelected, itemValue.hasSubItems && isSelected)
                 .append(_this.cssClasses.itemHovered, itemValue.isHovered)
                 .append(_this.cssClasses.itemTextWrap, _this.textWrapEnabled)
                 .append(itemValue.css)
                 .toString();
         };
-        _this.getItemIndent = function (itemValue) {
+        // public getItemIndent = (itemValue: any) => {
+        //   const level: number = itemValue.level || 0;
+        //   return (level + 1) * ListModel.INDENT + "px";
+        // };
+        _this.getItemStyle = function (itemValue) {
             var level = itemValue.level || 0;
-            return (level + 1) * ListModel.INDENT + "px";
+            return {
+                "--sjs-list-item-level": level + 1
+            };
         };
         if (Object.keys(items).indexOf("items") !== -1) {
             var options_1 = items;
@@ -11791,6 +11810,7 @@ var list_ListModel = /** @class */ (function (_super) {
                         _this[key] = options_1[key];
                 }
             });
+            _this.updateActionsIds();
         }
         else {
             _this.setItems(items);
@@ -11847,10 +11867,13 @@ var list_ListModel = /** @class */ (function (_super) {
         configurable: true
     });
     ListModel.prototype.onFilterStringChanged = function (text) {
-        var _this = this;
         if (!!this.onFilterStringChangedCallback) {
             this.onFilterStringChangedCallback(text);
         }
+        this.updateIsEmpty();
+    };
+    ListModel.prototype.updateIsEmpty = function () {
+        var _this = this;
         this.isEmpty = this.renderedActions.filter(function (action) { return _this.isItemVisible(action); }).length === 0;
     };
     ListModel.prototype.scrollToItem = function (selector, ms) {
@@ -11874,16 +11897,19 @@ var list_ListModel = /** @class */ (function (_super) {
         this.onTextSearchCallback = callback;
     };
     ListModel.prototype.setItems = function (items, sortByVisibleIndex) {
-        var _this = this;
         if (sortByVisibleIndex === void 0) { sortByVisibleIndex = true; }
         _super.prototype.setItems.call(this, items, sortByVisibleIndex);
-        if (this.elementId) {
-            this.renderedActions.forEach(function (action) { action.elementId = _this.elementId + action.id; });
-        }
+        this.updateActionsIds();
         if (!this.isAllDataLoaded && !!this.actions.length) {
             this.actions.push(this.loadingIndicator);
         }
     };
+    ListModel.prototype.updateActionsIds = function () {
+        var _this = this;
+        if (this.elementId) {
+            this.renderedActions.forEach(function (action) { action.elementId = _this.elementId + action.id; });
+        }
+    };
     ListModel.prototype.setSearchEnabled = function (newValue) {
         this.searchEnabled = newValue;
         this.showSearchClearButton = newValue;
@@ -11924,7 +11950,7 @@ var list_ListModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(ListModel.prototype, "scrollableContainer", {
         get: function () {
-            return this.listContainerHtmlElement.querySelector("." + this.getDefaultCssClasses().itemsContainer);
+            return this.listContainerHtmlElement.querySelector("." + this.cssClasses.itemsContainer);
         },
         enumerable: false,
         configurable: true
@@ -11978,7 +12004,12 @@ var list_ListModel = /** @class */ (function (_super) {
     };
     ListModel.prototype.onPointerDown = function (event, item) { };
     ListModel.prototype.refresh = function () {
-        this.filterString = "";
+        if (this.filterString !== "") {
+            this.filterString = "";
+        }
+        else {
+            this.updateIsEmpty();
+        }
         this.resetFocusedItem();
     };
     ListModel.prototype.onClickSearchClearButton = function (event) {
@@ -12047,10 +12078,15 @@ var list_ListModel = /** @class */ (function (_super) {
         }
     };
     ListModel.prototype.scrollToFocusedItem = function () {
-        this.scrollToItem(this.getDefaultCssClasses().itemFocused);
+        this.scrollToItem(this.cssClasses.itemFocused);
     };
     ListModel.prototype.scrollToSelectedItem = function () {
-        this.scrollToItem(this.getDefaultCssClasses().itemSelected, 110);
+        if (!!this.selectedItem && this.selectedItem.items && this.selectedItem.items.length > 0) {
+            this.scrollToItem(this.cssClasses.itemGroupSelected, 110);
+        }
+        else {
+            this.scrollToItem(this.cssClasses.itemSelected, 110);
+        }
     };
     ListModel.prototype.addScrollEventListener = function (handler) {
         if (!!handler) {
@@ -12403,7 +12439,6 @@ var action_BaseAction = /** @class */ (function (_super) {
     function BaseAction() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.rendredIdValue = BaseAction.getNextRendredId();
-        _this.markerIconSize = 16;
         return _this;
     }
     BaseAction.getNextRendredId = function () { return BaseAction.renderedId++; };
@@ -12658,9 +12693,6 @@ var action_BaseAction = /** @class */ (function (_super) {
     action_decorate([
         jsonobject_property()
     ], BaseAction.prototype, "markerIconName", void 0);
-    action_decorate([
-        jsonobject_property()
-    ], BaseAction.prototype, "markerIconSize", void 0);
     action_decorate([
         jsonobject_property()
     ], BaseAction.prototype, "css", void 0);
@@ -12675,13 +12707,14 @@ var action_BaseAction = /** @class */ (function (_super) {
 
 var action_Action = /** @class */ (function (_super) {
     action_extends(Action, _super);
-    function Action(innerItem) {
+    function Action(innerItemData) {
         var _this = _super.call(this) || this;
-        _this.innerItem = innerItem;
         _this.locTitleChanged = function () {
             var val = _this.locTitle.renderedHtml;
             _this.setPropertyValue("_title", !!val ? val : undefined);
         };
+        var innerItem = (innerItemData instanceof Action) ? innerItemData.innerItem : innerItemData;
+        _this.innerItem = innerItem;
         _this.locTitle = !!innerItem ? innerItem["locTitle"] : null;
         //Object.assign(this, item) to support IE11
         if (!!innerItem) {
@@ -14262,7 +14295,7 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
             this.textProcessorValue = this.surveyImplValue.getTextProcessor();
             this.onSetData();
         }
-        if (!!this.survey) {
+        if (!!this.survey /* && !this.isLoadingFromJson*/) {
             this.updateDescriptionVisibility(this.description);
             this.clearCssClasses();
         }
@@ -14405,20 +14438,28 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyElement.prototype, "cssClassesValue", {
         get: function () {
-            return this.getPropertyValueWithoutDefault("cssClassesValue");
-        },
-        set: function (val) {
-            this.setPropertyValue("cssClassesValue", val);
+            var res = this.getPropertyValueWithoutDefault("cssClassesValue");
+            if (!res && !this.isCssValueCalculating) {
+                this.isCssValueCalculating = true;
+                res = this.createCssClassesValue();
+                this.isCssValueCalculating = false;
+            }
+            return res;
         },
         enumerable: false,
         configurable: true
     });
     SurveyElement.prototype.ensureCssClassesValue = function () {
         if (!this.cssClassesValue) {
-            this.cssClassesValue = this.calcCssClasses(this.css);
-            this.updateElementCssCore(this.cssClassesValue);
+            this.createCssClassesValue();
         }
     };
+    SurveyElement.prototype.createCssClassesValue = function () {
+        var res = this.calcCssClasses(this.css);
+        this.setPropertyValue("cssClassesValue", res);
+        this.updateElementCssCore(this.cssClassesValue);
+        return res;
+    };
     Object.defineProperty(SurveyElement.prototype, "cssClasses", {
         /**
          * Returns an object in which keys are UI elements and values are CSS classes applied to them.
@@ -14474,7 +14515,7 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
         this.clearCssClasses();
     };
     SurveyElement.prototype.clearCssClasses = function () {
-        this.cssClassesValue = undefined;
+        this.resetPropertyValue("cssClassesValue");
     };
     SurveyElement.prototype.getIsLoadingFromJson = function () {
         if (_super.prototype.getIsLoadingFromJson.call(this))
@@ -14569,7 +14610,12 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
         configurable: true
     });
     SurveyElement.prototype.onFirstRendering = function () {
-        this.wasRenderedValue = true;
+        if (!this.wasRendered) {
+            this.wasRenderedValue = true;
+            this.onFirstRenderingCore();
+        }
+    };
+    SurveyElement.prototype.onFirstRenderingCore = function () {
         this.ensureCssClassesValue();
     };
     SurveyElement.prototype.endLoadingFromJson = function () {
@@ -14864,17 +14910,19 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyElement.prototype, "paddingLeft", {
         get: function () {
-            return this.getPropertyValue("paddingLeft", "");
-        },
-        set: function (val) {
-            this.setPropertyValue("paddingLeft", val);
+            var _this = this;
+            return this.getPropertyValue("paddingLeft", undefined, function () { return _this.calcPaddingLeft(); });
         },
         enumerable: false,
         configurable: true
     });
+    SurveyElement.prototype.calcPaddingLeft = function () {
+        return "";
+    };
     Object.defineProperty(SurveyElement.prototype, "paddingRight", {
         get: function () {
-            return this.getPropertyValue("paddingRight", "");
+            var _this = this;
+            return this.getPropertyValue("paddingRight", undefined, function () { return _this.calcPaddingRight(); });
         },
         set: function (val) {
             this.setPropertyValue("paddingRight", val);
@@ -14882,6 +14930,13 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    SurveyElement.prototype.calcPaddingRight = function () {
+        return "";
+    };
+    SurveyElement.prototype.resetIndents = function () {
+        this.resetPropertyValue("paddingLeft");
+        this.resetPropertyValue("paddingRight");
+    };
     SurveyElement.prototype.updateRootStyle = function () {
         var style = {};
         var _width;
@@ -16393,6 +16448,12 @@ function mergeValues(src, dest) {
         }
     }
 }
+function updateListCssValues(res, css) {
+    var listCssClasses = {};
+    mergeValues(css.list, listCssClasses);
+    mergeValues(res.list, listCssClasses);
+    res["list"] = listCssClasses;
+}
 var Logger = /** @class */ (function () {
     function Logger() {
         this._result = "";
@@ -18866,7 +18927,6 @@ var question_Question = /** @class */ (function (_super) {
         _this.createNewArray("validators", function (validator) {
             validator.errorOwner = _this;
         });
-        _this.commentTextAreaModel = new text_area_TextAreaModel(_this.getCommentTextAreaOptions());
         _this.addExpressionProperty("visibleIf", function (obj, res) { _this.visible = res === true; });
         _this.addExpressionProperty("enableIf", function (obj, res) { _this.readOnly = res === false; });
         _this.addExpressionProperty("requiredIf", function (obj, res) { _this.isRequired = res === true; });
@@ -18894,7 +18954,7 @@ var question_Question = /** @class */ (function (_super) {
             _this.clearCssClasses();
         });
         _this.registerPropertyChangedHandlers(["indent", "rightIndent"], function () {
-            _this.onIndentChanged();
+            _this.resetIndents();
         });
         _this.registerPropertyChangedHandlers(["showCommentArea", "showOtherItem"], function () {
             _this.initCommentFromSurvey();
@@ -18909,26 +18969,6 @@ var question_Question = /** @class */ (function (_super) {
     Question.getQuestionId = function () {
         return "sq_" + Question.questionCounter++;
     };
-    Question.prototype.getCommentTextAreaOptions = function () {
-        var _this = this;
-        var options = {
-            question: this,
-            id: function () { return _this.commentId; },
-            propertyName: "comment",
-            className: function () { return _this.cssClasses.comment; },
-            placeholder: function () { return _this.renderedCommentPlaceholder; },
-            isDisabledAttr: function () { return _this.isInputReadOnly || false; },
-            rows: function () { return _this.commentAreaRows; },
-            autoGrow: function () { return _this.autoGrowComment; },
-            maxLength: function () { return _this.getOthersMaxLength(); },
-            ariaRequired: function () { return _this.a11y_input_ariaRequired; },
-            ariaLabel: function () { return _this.a11y_input_ariaLabel; },
-            getTextValue: function () { return _this.comment; },
-            onTextAreaChange: function (e) { _this.onCommentChange(e); },
-            onTextAreaInput: function (e) { _this.onCommentInput(e); },
-        };
-        return options;
-    };
     Question.prototype.isReadOnlyRenderDiv = function () {
         return this.isReadOnly && settings.readOnly.commentRenderMode === "div";
     };
@@ -18973,6 +19013,36 @@ var question_Question = /** @class */ (function (_super) {
         this.locProcessedTitle.sharedData = locTitleValue;
         return locTitleValue;
     };
+    Object.defineProperty(Question.prototype, "commentTextAreaModel", {
+        get: function () {
+            if (!this.commentTextAreaModelValue) {
+                this.commentTextAreaModelValue = new text_area_TextAreaModel(this.getCommentTextAreaOptions());
+            }
+            return this.commentTextAreaModelValue;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Question.prototype.getCommentTextAreaOptions = function () {
+        var _this = this;
+        var options = {
+            question: this,
+            id: function () { return _this.commentId; },
+            propertyName: "comment",
+            className: function () { return _this.cssClasses.comment; },
+            placeholder: function () { return _this.renderedCommentPlaceholder; },
+            isDisabledAttr: function () { return _this.isInputReadOnly || false; },
+            rows: function () { return _this.commentAreaRows; },
+            autoGrow: function () { return _this.autoGrowComment; },
+            maxLength: function () { return _this.getOthersMaxLength(); },
+            ariaRequired: function () { return _this.a11y_input_ariaRequired; },
+            ariaLabel: function () { return _this.a11y_input_ariaLabel; },
+            getTextValue: function () { return _this.comment; },
+            onTextAreaChange: function (e) { _this.onCommentChange(e); },
+            onTextAreaInput: function (e) { _this.onCommentInput(e); },
+        };
+        return options;
+    };
     Question.prototype.getSurvey = function (live) {
         if (live === void 0) { live = false; }
         if (live) {
@@ -19460,7 +19530,6 @@ var question_Question = /** @class */ (function (_super) {
         if (isLight !== true) {
             this.runConditions();
         }
-        this.calcRenderedCommentPlaceholder();
         if (!this.visible) {
             this.updateIsVisibleProp();
         }
@@ -19478,7 +19547,9 @@ var question_Question = /** @class */ (function (_super) {
                 return;
             this.removeFromParent();
             this.setPropertyValue("parent", val);
-            this.updateQuestionCss();
+            if (!!val) {
+                this.updateQuestionCss();
+            }
             this.onParentChanged();
         },
         enumerable: false,
@@ -19806,14 +19877,17 @@ var question_Question = /** @class */ (function (_super) {
     });
     Object.defineProperty(Question.prototype, "renderedCommentPlaceholder", {
         get: function () {
-            return this.getPropertyValue("renderedCommentPlaceholder");
+            var _this = this;
+            var func = function () {
+                return !_this.isReadOnly ? _this.commentPlaceHolder : undefined;
+            };
+            return this.getPropertyValue("renderedCommentPlaceholder", undefined, func);
         },
         enumerable: false,
         configurable: true
     });
-    Question.prototype.calcRenderedCommentPlaceholder = function () {
-        var res = !this.isReadOnly ? this.commentPlaceHolder : undefined;
-        this.setPropertyValue("renderedCommentPlaceholder", res);
+    Question.prototype.resetRenderedCommentPlaceholder = function () {
+        this.resetPropertyValue("renderedCommentPlaceholder");
     };
     Question.prototype.getAllErrors = function () {
         return this.errors.slice();
@@ -19841,7 +19915,7 @@ var question_Question = /** @class */ (function (_super) {
     };
     Question.prototype.localeChanged = function () {
         _super.prototype.localeChanged.call(this);
-        this.calcRenderedCommentPlaceholder();
+        this.resetRenderedCommentPlaceholder();
         if (!!this.localeChangedCallback) {
             this.localeChangedCallback();
         }
@@ -20170,7 +20244,7 @@ var question_Question = /** @class */ (function (_super) {
         if (reNew) {
             this.updateQuestionCss(true);
         }
-        this.onIndentChanged();
+        this.resetIndents();
     };
     Question.prototype.updateQuestionCss = function (reNew) {
         if (this.isLoadingFromJson ||
@@ -20224,9 +20298,11 @@ var question_Question = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Question.prototype.onIndentChanged = function () {
-        this.paddingLeft = this.getIndentSize(this.indent);
-        this.paddingRight = this.getIndentSize(this.rightIndent);
+    Question.prototype.calcPaddingLeft = function () {
+        return this.getIndentSize(this.indent);
+    };
+    Question.prototype.calcPaddingRight = function () {
+        return this.getIndentSize(this.rightIndent);
     };
     Question.prototype.getIndentSize = function (indent) {
         if (indent < 1 || !this.getSurvey() || !this.cssClasses || !this.cssClasses.indent)
@@ -20531,7 +20607,7 @@ var question_Question = /** @class */ (function (_super) {
             this.clearErrors();
         }
         this.updateQuestionCss();
-        this.calcRenderedCommentPlaceholder();
+        this.resetRenderedCommentPlaceholder();
     };
     Object.defineProperty(Question.prototype, "enableIf", {
         /**
@@ -20622,15 +20698,10 @@ var question_Question = /** @class */ (function (_super) {
         if (this.isEmpty()) {
             this.initDataFromSurvey();
         }
-        this.calcRenderedCommentPlaceholder();
-        this.onIndentChanged();
     };
     Question.prototype.onSetData = function () {
         _super.prototype.onSetData.call(this);
-        if (!this.survey)
-            return;
-        this.onIndentChanged();
-        if (!this.isDesignMode) {
+        if (!this.isDesignMode && !!this.survey && !this.isLoadingFromJson) {
             this.initDataFromSurvey();
             this.onSurveyValueChanged(this.value);
             this.updateValueWithDefaults();
@@ -20850,7 +20921,6 @@ var question_Question = /** @class */ (function (_super) {
     Question.prototype.clearValueIfInvisibleCore = function (reason) {
         if (this.canClearValueAsInvisible(reason)) {
             this.clearValue();
-            this.setValueChangedDirectly(undefined);
         }
     };
     Object.defineProperty(Question.prototype, "clearIfInvisible", {
@@ -22142,7 +22212,7 @@ var question_Question = /** @class */ (function (_super) {
         jsonobject_property()
     ], Question.prototype, "ariaExpanded", void 0);
     question_decorate([
-        jsonobject_property({ localizable: true, onSet: function (val, target) { return target.calcRenderedCommentPlaceholder(); } })
+        jsonobject_property({ localizable: true, onSet: function (val, target) { return target.resetRenderedCommentPlaceholder(); } })
     ], Question.prototype, "commentPlaceholder", void 0);
     question_decorate([
         jsonobject_property()
@@ -24842,12 +24912,12 @@ var question_custom_QuestionCustomModelBase = /** @class */ (function (_super) {
             this.customQuestion.onItemValuePropertyChanged(this, item, item.ownerPropertyName, name, newValue);
         }
     };
-    QuestionCustomModelBase.prototype.onFirstRendering = function () {
+    QuestionCustomModelBase.prototype.onFirstRenderingCore = function () {
+        _super.prototype.onFirstRenderingCore.call(this);
         var el = this.getElement();
         if (!!el) {
             el.onFirstRendering();
         }
-        _super.prototype.onFirstRendering.call(this);
     };
     QuestionCustomModelBase.prototype.onHidingContent = function () {
         _super.prototype.onHidingContent.call(this);
@@ -26328,6 +26398,9 @@ Serializer.addClass("expression", [
     { name: "isRequired", visible: false },
     { name: "readOnly", visible: false },
     { name: "requiredErrorText", visible: false },
+    { name: "resetValueIf", visible: false },
+    { name: "setValueIf", visible: false },
+    { name: "setValueExpression", visible: false },
     { name: "defaultValueExpression", visible: false },
     { name: "defaultValue", visible: false },
     { name: "correctAnswer", visible: false },
@@ -28037,8 +28110,12 @@ var question_matrixdropdownrendered_QuestionMatrixDropdownRenderedTable = /** @c
         var dataRowIndex = 0;
         for (var i = 0; i < this.rows.length; i++) {
             if (dataRowIndex === index) {
-                if (this.rows[i].isErrorsRow || this.rows[i].isDetailRow)
+                if (this.rows[i].isErrorsRow || this.rows[i].isDetailRow) {
                     res++;
+                    if (i + 1 < this.rows.length && this.rows[i + 1].isDetailRow) {
+                        res++;
+                    }
+                }
                 break;
             }
             res++;
@@ -30325,6 +30402,7 @@ var question_matrixdropdownbase_QuestionMatrixDropdownModelBase = /** @class */
         }
     };
     QuestionMatrixDropdownModelBase.prototype.runCondition = function (values, properties) {
+        var oldRowVariables = values[question_matrixdropdownbase_MatrixDropdownRowModelBase.RowVariableName];
         _super.prototype.runCondition.call(this, values, properties);
         var counter = 0;
         var prevTotalValue;
@@ -30336,6 +30414,7 @@ var question_matrixdropdownbase_QuestionMatrixDropdownModelBase = /** @class */
         } while (!helpers_Helpers.isTwoValueEquals(prevTotalValue, this.totalValue) &&
             counter < 3);
         this.updateVisibilityBasedOnRows();
+        values[question_matrixdropdownbase_MatrixDropdownRowModelBase.RowVariableName] = oldRowVariables;
     };
     QuestionMatrixDropdownModelBase.prototype.runTriggers = function (name, value, keys) {
         _super.prototype.runTriggers.call(this, name, value, keys);
@@ -31354,10 +31433,9 @@ var question_matrixdropdownbase_QuestionMatrixDropdownModelBase = /** @class */
         if (isDeletingValue) {
             delete rowValue[columnName];
         }
-        for (var i = 0; i < row.cells.length; i++) {
-            var key = row.cells[i].question.getValueName();
-            delete rowValue[key];
-        }
+        row.questions.forEach(function (q) {
+            delete rowValue[q.getValueName()];
+        });
         if (newRowValue) {
             newRowValue = JSON.parse(JSON.stringify(newRowValue));
             for (var key in newRowValue) {
@@ -36435,7 +36513,7 @@ var panel_PanelModelBase = /** @class */ (function (_super) {
             _this.updateVisibleIndexes();
         });
         _this.registerPropertyChangedHandlers(["title"], function () {
-            _this.calcHasTextInTitle();
+            _this.resetHasTextInTitle();
         });
         _this.dragDropPanelHelper = new drag_drop_panel_helper_v1_DragDropPanelHelperV1(_this);
         return _this;
@@ -36492,6 +36570,7 @@ var panel_PanelModelBase = /** @class */ (function (_super) {
         return "panelbase";
     };
     PanelModelBase.prototype.setSurveyImpl = function (value, isLight) {
+        //if(this.surveyImpl === value) return; TODO refactor
         this.blockAnimations();
         _super.prototype.setSurveyImpl.call(this, value, isLight);
         if (this.isDesignMode)
@@ -36511,8 +36590,16 @@ var panel_PanelModelBase = /** @class */ (function (_super) {
             col.onPropertyValueChangedCallback = _this.onColumnPropertyValueChangedCallback;
         });
     };
-    PanelModelBase.prototype.calcHasTextInTitle = function () {
-        this.hasTextInTitle = !!this.title;
+    Object.defineProperty(PanelModelBase.prototype, "hasTextInTitle", {
+        get: function () {
+            var _this = this;
+            return this.getPropertyValue("hasTextInTitle", undefined, function () { return !!_this.title; });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PanelModelBase.prototype.resetHasTextInTitle = function () {
+        this.resetPropertyValue("hasTextInTitle");
     };
     Object.defineProperty(PanelModelBase.prototype, "hasTitle", {
         get: function () {
@@ -37525,14 +37612,11 @@ var panel_PanelModelBase = /** @class */ (function (_super) {
         }
         this.onElementVisibilityChanged(this);
         this.releaseAnimations();
-        this.calcHasTextInTitle();
     };
-    PanelModelBase.prototype.onFirstRendering = function () {
-        _super.prototype.onFirstRendering.call(this);
-        for (var i = 0; i < this.elements.length; i++) {
-            this.elements[i].onFirstRendering();
-        }
+    PanelModelBase.prototype.onFirstRenderingCore = function () {
+        _super.prototype.onFirstRenderingCore.call(this);
         this.onRowsChanged();
+        this.elements.forEach(function (el) { return el.onFirstRendering(); });
     };
     PanelModelBase.prototype.updateRows = function () {
         if (this.isLoadingFromJson)
@@ -37976,9 +38060,7 @@ var panel_PanelModelBase = /** @class */ (function (_super) {
     PanelModelBase.prototype.getPanelStartIndex = function (index) {
         return index;
     };
-    PanelModelBase.prototype.isContinueNumbering = function () {
-        return true;
-    };
+    PanelModelBase.prototype.isContinueNumbering = function () { return true; };
     Object.defineProperty(PanelModelBase.prototype, "isReadOnly", {
         get: function () {
             var isParentReadOnly = !!this.parent && this.parent.isReadOnly;
@@ -38319,9 +38401,6 @@ var panel_PanelModelBase = /** @class */ (function (_super) {
     panel_decorate([
         jsonobject_property({ defaultValue: true })
     ], PanelModelBase.prototype, "showTitle", void 0);
-    panel_decorate([
-        jsonobject_property({ defaultValue: false })
-    ], PanelModelBase.prototype, "hasTextInTitle", void 0);
     panel_decorate([
         jsonobject_property({ defaultValue: true })
     ], PanelModelBase.prototype, "showDescription", void 0);
@@ -38350,7 +38429,7 @@ var panel_PanelModel = /** @class */ (function (_super) {
                 _this.parent.elementWidthChanged(_this);
             }
         });
-        _this.registerPropertyChangedHandlers(["indent", "innerIndent", "rightIndent"], function () { _this.onIndentChanged(); });
+        _this.registerPropertyChangedHandlers(["indent", "innerIndent", "rightIndent"], function () { _this.resetIndents(); });
         _this.registerPropertyChangedHandlers(["colSpan"], function () { var _a; (_a = _this.parent) === null || _a === void 0 ? void 0 : _a.updateColumns(); });
         return _this;
     }
@@ -38371,15 +38450,6 @@ var panel_PanelModel = /** @class */ (function (_super) {
         }
         return _super.prototype.getSurvey.call(this, live);
     };
-    PanelModel.prototype.onSurveyLoad = function () {
-        _super.prototype.onSurveyLoad.call(this);
-        this.onIndentChanged();
-    };
-    PanelModel.prototype.onSetData = function () {
-        _super.prototype.onSetData.call(this);
-        this.onIndentChanged();
-        this.calcHasTextInTitle();
-    };
     Object.defineProperty(PanelModel.prototype, "isPanel", {
         get: function () {
             return true;
@@ -38603,7 +38673,11 @@ var panel_PanelModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(PanelModel.prototype, "innerPaddingLeft", {
         get: function () {
-            return this.getPropertyValue("innerPaddingLeft", "");
+            var _this = this;
+            var func = function () {
+                return _this.getIndentSize(_this.innerIndent);
+            };
+            return this.getPropertyValue("innerPaddingLeft", undefined, func);
         },
         set: function (val) {
             this.setPropertyValue("innerPaddingLeft", val);
@@ -38611,18 +38685,23 @@ var panel_PanelModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    PanelModel.prototype.onIndentChanged = function () {
-        if (!this.getSurvey())
-            return;
-        this.innerPaddingLeft = this.getIndentSize(this.innerIndent);
-        this.paddingLeft = this.getIndentSize(this.indent);
-        this.paddingRight = this.getIndentSize(this.rightIndent);
+    PanelModel.prototype.calcPaddingLeft = function () {
+        return this.getIndentSize(this.indent);
+    };
+    PanelModel.prototype.calcPaddingRight = function () {
+        return this.getIndentSize(this.rightIndent);
+    };
+    PanelModel.prototype.resetIndents = function () {
+        this.resetPropertyValue("innerPaddingLeft");
+        _super.prototype.resetIndents.call(this);
     };
     PanelModel.prototype.getIndentSize = function (indent) {
+        if (!this.survey)
+            return undefined;
         if (indent < 1)
             return "";
         var css = this.survey["css"];
-        if (!css || !css.question.indent)
+        if (!css || !css.question || !css.question.indent)
             return "";
         return indent * css.question.indent + "px";
     };
@@ -39262,11 +39341,6 @@ var page_PageModel = /** @class */ (function (_super) {
             this.removeSelfFromList(this.survey.pages);
         }
     };
-    PageModel.prototype.onFirstRendering = function () {
-        if (this.wasShown)
-            return;
-        _super.prototype.onFirstRendering.call(this);
-    };
     Object.defineProperty(PageModel.prototype, "visibleIndex", {
         /**
          * The visible index of the page. It has values from 0 to visible page count - 1.
@@ -45499,6 +45573,7 @@ var survey_SurveyModel = /** @class */ (function (_super) {
             width: width,
         };
         this.onResize.fire(this, options);
+        // this.setResponsiveStartWidth(width);
         return isMobileChanged;
     };
     SurveyModel.prototype.triggerResponsiveness = function (hard) {
@@ -47812,10 +47887,33 @@ var survey_SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "renderedWidth", {
         get: function () {
+            var isStaticWidth = this.getPropertyValue("calculatedWidthMode") == "static";
             var width = this.getPropertyValue("width");
+            if (this.isScaled && this.responsiveStartWidth > 1) {
+                var initialWidth = this.responsiveStartWidth;
+                try {
+                    width = width || this.staticStartWidth;
+                    initialWidth = !isNaN(width) ? width : parseFloat(width.toString().replace("px", ""));
+                }
+                catch (e) { }
+                return (isStaticWidth ? initialWidth : this.responsiveStartWidth) * this.widthScale / 100 + "px";
+            }
             if (width && !isNaN(width))
                 width = width + "px";
-            return this.getPropertyValue("calculatedWidthMode") == "static" && width || undefined;
+            return isStaticWidth && width || undefined;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyModel.prototype.setStaticStartWidth = function (width) {
+        this.staticStartWidth = width;
+    };
+    SurveyModel.prototype.setResponsiveStartWidth = function (width) {
+        this.responsiveStartWidth = width;
+    };
+    Object.defineProperty(SurveyModel.prototype, "isScaled", {
+        get: function () {
+            return Math.abs(this.widthScale - 100) > 0.001;
         },
         enumerable: false,
         configurable: true
@@ -48645,6 +48743,15 @@ var survey_SurveyModel = /** @class */ (function (_super) {
     survey_decorate([
         jsonobject_property()
     ], SurveyModel.prototype, "calculatedWidthMode", void 0);
+    survey_decorate([
+        jsonobject_property({ defaultValue: 100 })
+    ], SurveyModel.prototype, "widthScale", void 0);
+    survey_decorate([
+        jsonobject_property()
+    ], SurveyModel.prototype, "staticStartWidth", void 0);
+    survey_decorate([
+        jsonobject_property()
+    ], SurveyModel.prototype, "responsiveStartWidth", void 0);
     survey_decorate([
         propertyArray()
     ], SurveyModel.prototype, "layoutElements", void 0);
@@ -49020,7 +49127,6 @@ var question_baseselect_QuestionSelectBase = /** @class */ (function (_super) {
         _this.registerPropertyChangedHandlers(["hideIfChoicesEmpty"], function () {
             _this.onVisibleChanged();
         });
-        _this.otherTextAreaModel = new text_area_TextAreaModel(_this.getOtherTextAreaOptions());
         _this.createNewArray("visibleChoices", function () { return _this.updateRenderedChoices(); }, function () { return _this.updateRenderedChoices(); });
         _this.setNewRestfulProperty();
         var locOtherText = _this.createLocalizableString("otherText", _this.otherItemValue, true, "otherItemText");
@@ -49051,6 +49157,26 @@ var question_baseselect_QuestionSelectBase = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionSelectBase.prototype.getType = function () {
+        return "selectbase";
+    };
+    QuestionSelectBase.prototype.dispose = function () {
+        _super.prototype.dispose.call(this);
+        var q = this.getQuestionWithChoices();
+        if (!!q) {
+            q.removeDependedQuestion(this);
+        }
+    };
+    Object.defineProperty(QuestionSelectBase.prototype, "otherTextAreaModel", {
+        get: function () {
+            if (!this.otherTextAreaModelValue) {
+                this.otherTextAreaModelValue = new text_area_TextAreaModel(this.getOtherTextAreaOptions());
+            }
+            return this.otherTextAreaModelValue;
+        },
+        enumerable: false,
+        configurable: true
+    });
     QuestionSelectBase.prototype.getOtherTextAreaOptions = function () {
         var _this = this;
         var options = {
@@ -49071,16 +49197,6 @@ var question_baseselect_QuestionSelectBase = /** @class */ (function (_super) {
         };
         return options;
     };
-    QuestionSelectBase.prototype.getType = function () {
-        return "selectbase";
-    };
-    QuestionSelectBase.prototype.dispose = function () {
-        _super.prototype.dispose.call(this);
-        var q = this.getQuestionWithChoices();
-        if (!!q) {
-            q.removeDependedQuestion(this);
-        }
-    };
     QuestionSelectBase.prototype.resetDependedQuestion = function () {
         this.choicesFromQuestion = "";
     };
@@ -51247,22 +51363,6 @@ var question_baseselect_QuestionSelectBase = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    QuestionSelectBase.prototype.updateCssClasses = function (res, css) {
-        _super.prototype.updateCssClasses.call(this, res, css);
-        if (!!this.dropdownListModel) {
-            var listCssClasses = {};
-            mergeValues(css.list, listCssClasses);
-            mergeValues(res.list, listCssClasses);
-            res["list"] = listCssClasses;
-        }
-    };
-    QuestionSelectBase.prototype.calcCssClasses = function (css) {
-        var classes = _super.prototype.calcCssClasses.call(this, css);
-        if (this.dropdownListModel) {
-            this.dropdownListModel.updateCssClasses(classes.popup, classes.list);
-        }
-        return classes;
-    };
     question_baseselect_decorate([
         jsonobject_property({
             onSet: function (newVal, target) {
@@ -52436,7 +52536,6 @@ var dropdownListModel_DropdownListModel = /** @class */ (function (_super) {
         _this.selectedItemSelector = ".sv-list__item--selected";
         _this.itemSelector = ".sv-list__item";
         _this.itemsSettings = { skip: 0, take: 0, totalCount: 0, items: [] };
-        _this.popupCssClasses = "sv-single-select-list";
         _this.listModelFilterStringChanged = function (newValue) {
             if (_this.filterString !== newValue) {
                 _this.filterString = newValue;
@@ -52446,7 +52545,6 @@ var dropdownListModel_DropdownListModel = /** @class */ (function (_super) {
             _this.onPropertyChangedHandler(sender, options);
         };
         _this.htmlCleanerElement = DomDocumentHelper.createElement("div");
-        _this.question.ariaExpanded = "false";
         question.onPropertyChanged.add(_this.questionPropertyChangedHandler);
         _this.showInputFieldComponent = _this.question.showInputFieldComponent;
         _this.listModel = _this.createListModel();
@@ -52456,6 +52554,8 @@ var dropdownListModel_DropdownListModel = /** @class */ (function (_super) {
         _this.setTextWrapEnabled(_this.question.textWrapEnabled);
         _this.createPopup();
         _this.resetItemsSettings();
+        var classes = question.cssClasses;
+        _this.updateCssClasses(classes.popup, classes.list);
         return _this;
     }
     Object.defineProperty(DropdownListModel.prototype, "focusFirstInputSelector", {
@@ -52558,7 +52658,6 @@ var dropdownListModel_DropdownListModel = /** @class */ (function (_super) {
         this.listModel.registerPropertyChangedHandlers(["showFilter"], function () {
             _this.updatePopupFocusFirstInputSelector();
         });
-        this._popupModel.cssClass = this.popupCssClasses;
         this._popupModel.onVisibilityChanged.add(function (_, option) {
             if (option.isVisible) {
                 _this.listModel.renderElements = true;
@@ -52672,8 +52771,9 @@ var dropdownListModel_DropdownListModel = /** @class */ (function (_super) {
         model.isAllDataLoaded = !this.question.choicesLazyLoadEnabled;
         model.actions.forEach(function (a) { return a.disableTabStop = true; });
     };
+    DropdownListModel.prototype.getPopupCssClasses = function () { return "sv-single-select-list"; };
     DropdownListModel.prototype.updateCssClasses = function (popupCssClass, listCssClasses) {
-        this.popupModel.cssClass = new CssClassBuilder().append(popupCssClass).append(this.popupCssClasses).toString();
+        this.popupModel.cssClass = new CssClassBuilder().append(popupCssClass).append(this.getPopupCssClasses()).toString();
         this.listModel.cssClasses = listCssClasses;
     };
     DropdownListModel.prototype.resetFilterString = function () {
@@ -53151,6 +53251,7 @@ var question_dropdown_decorate = (undefined && undefined.__decorate) || function
 
 
 
+
 /**
  * A class that describes the Dropdown question type.
  *
@@ -53163,6 +53264,7 @@ var question_dropdown_QuestionDropdownModel = /** @class */ (function (_super) {
         _this.lastSelectedItemValue = null;
         _this.minMaxChoices = [];
         _this.onOpened = _this.addEvent();
+        _this.ariaExpanded = "false";
         _this.createLocalizableString("placeholder", _this, false, true);
         _this.createLocalizableString("clearCaption", _this, false, true);
         _this.registerPropertyChangedHandlers(["choicesMin", "choicesMax", "choicesStep"], function () {
@@ -53387,6 +53489,19 @@ var question_dropdown_QuestionDropdownModel = /** @class */ (function (_super) {
             .append(this.cssClasses.controlInputFieldComponent, !!this.inputFieldComponentName)
             .toString();
     };
+    QuestionDropdownModel.prototype.updateCssClasses = function (res, css) {
+        _super.prototype.updateCssClasses.call(this, res, css);
+        if (this.useDropdownList) {
+            updateListCssValues(res, css);
+        }
+    };
+    QuestionDropdownModel.prototype.calcCssClasses = function (css) {
+        var classes = _super.prototype.calcCssClasses.call(this, css);
+        if (this.dropdownListModelValue) {
+            this.dropdownListModel.updateCssClasses(classes.popup, classes.list);
+        }
+        return classes;
+    };
     Object.defineProperty(QuestionDropdownModel.prototype, "selectedItemLocText", {
         get: function () {
             var item = this.suggestedItem || this.selectedItem;
@@ -53424,9 +53539,14 @@ var question_dropdown_QuestionDropdownModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionDropdownModel.prototype, "useDropdownList", {
+        get: function () { return this.renderAs !== "select"; },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionDropdownModel.prototype, "dropdownListModel", {
         get: function () {
-            if (this.renderAs !== "select" && !this.dropdownListModelValue) {
+            if (this.useDropdownList && !this.dropdownListModelValue) {
                 this.dropdownListModelValue = new dropdownListModel_DropdownListModel(this);
             }
             return this.dropdownListModelValue;
@@ -53439,8 +53559,7 @@ var question_dropdown_QuestionDropdownModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionDropdownModel.prototype, "popupModel", {
         get: function () {
-            var _a;
-            return (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.popupModel;
+            return this.dropdownListModel.popupModel;
         },
         enumerable: false,
         configurable: true
@@ -53450,7 +53569,7 @@ var question_dropdown_QuestionDropdownModel = /** @class */ (function (_super) {
     };
     QuestionDropdownModel.prototype.onSelectedItemValuesChangedHandler = function (newValue) {
         var _a;
-        (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.setInputStringFromSelectedItem(newValue);
+        (_a = this.dropdownListModelValue) === null || _a === void 0 ? void 0 : _a.setInputStringFromSelectedItem(newValue);
         _super.prototype.onSelectedItemValuesChangedHandler.call(this, newValue);
     };
     QuestionDropdownModel.prototype.hasUnknownValue = function (val, includeOther, isFilteredChoices, checkEmptyValue) {
@@ -53476,7 +53595,7 @@ var question_dropdown_QuestionDropdownModel = /** @class */ (function (_super) {
     };
     QuestionDropdownModel.prototype.onVisibleChoicesChanged = function () {
         _super.prototype.onVisibleChoicesChanged.call(this);
-        if (!this.isLoadingFromJson && this.popupModel) {
+        if (!!this.dropdownListModelValue) {
             this.dropdownListModel.updateItems();
         }
     };
@@ -53490,7 +53609,7 @@ var question_dropdown_QuestionDropdownModel = /** @class */ (function (_super) {
         var _a;
         _super.prototype.clearValue.call(this, keepComment);
         this.lastSelectedItemValue = null;
-        (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.clear();
+        (_a = this.dropdownListModelValue) === null || _a === void 0 ? void 0 : _a.clear();
     };
     QuestionDropdownModel.prototype.afterRenderCore = function (el) {
         _super.prototype.afterRenderCore.call(this, el);
@@ -53511,19 +53630,18 @@ var question_dropdown_QuestionDropdownModel = /** @class */ (function (_super) {
     };
     QuestionDropdownModel.prototype.supportEmptyValidation = function () { return true; };
     QuestionDropdownModel.prototype.onBlurCore = function (event) {
-        var _a;
-        (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.onBlur(event);
+        this.dropdownListModel.onBlur(event);
         _super.prototype.onBlurCore.call(this, event);
     };
     QuestionDropdownModel.prototype.onFocusCore = function (event) {
-        var _a;
-        (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.onFocus(event);
+        this.dropdownListModel.onFocus(event);
         _super.prototype.onFocusCore.call(this, event);
     };
     QuestionDropdownModel.prototype.dispose = function () {
         _super.prototype.dispose.call(this);
         if (!!this.dropdownListModelValue) {
             this.dropdownListModelValue.dispose();
+            this.dropdownListModelValue = undefined;
         }
     };
     question_dropdown_decorate([
@@ -53532,7 +53650,7 @@ var question_dropdown_QuestionDropdownModel = /** @class */ (function (_super) {
     question_dropdown_decorate([
         jsonobject_property({
             onSet: function (newValue, target) {
-                if (!!target.dropdownListModel) {
+                if (!!target.dropdownListModelValue) {
                     target.dropdownListModel.setSearchEnabled(newValue);
                 }
             }
@@ -53553,7 +53671,7 @@ var question_dropdown_QuestionDropdownModel = /** @class */ (function (_super) {
     question_dropdown_decorate([
         jsonobject_property({
             onSet: function (newValue, target) {
-                if (!!target.dropdownListModel) {
+                if (!!target.dropdownListModelValue) {
                     target.dropdownListModel.setChoicesLazyLoadEnabled(newValue);
                 }
             }
@@ -54647,37 +54765,26 @@ var question_textbase_QuestionTextBase = /** @class */ (function (_super) {
     };
     Object.defineProperty(QuestionTextBase.prototype, "renderedPlaceholder", {
         get: function () {
-            return this.getPropertyValue("renderedPlaceholder");
+            var _this = this;
+            var func = function () {
+                return _this.hasPlaceholder() ? _this.placeHolder : undefined;
+            };
+            return this.getPropertyValue("renderedPlaceholder", undefined, func);
         },
         enumerable: false,
         configurable: true
     });
-    QuestionTextBase.prototype.setRenderedPlaceholder = function (val) {
-        this.setPropertyValue("renderedPlaceholder", val);
-    };
     QuestionTextBase.prototype.onReadOnlyChanged = function () {
         _super.prototype.onReadOnlyChanged.call(this);
-        this.calcRenderedPlaceholder();
-    };
-    QuestionTextBase.prototype.onSurveyLoad = function () {
-        this.calcRenderedPlaceholder();
-        _super.prototype.onSurveyLoad.call(this);
+        this.resetRenderedPlaceholder();
     };
     QuestionTextBase.prototype.localeChanged = function () {
         _super.prototype.localeChanged.call(this);
-        this.calcRenderedPlaceholder();
-    };
-    QuestionTextBase.prototype.setSurveyImpl = function (value, isLight) {
-        _super.prototype.setSurveyImpl.call(this, value, isLight);
-        this.calcRenderedPlaceholder();
+        this.resetRenderedPlaceholder();
     };
     QuestionTextBase.prototype.supportEmptyValidation = function () { return true; };
-    QuestionTextBase.prototype.calcRenderedPlaceholder = function () {
-        var res = this.placeHolder;
-        if (!!res && !this.hasPlaceholder()) {
-            res = undefined;
-        }
-        this.setRenderedPlaceholder(res);
+    QuestionTextBase.prototype.resetRenderedPlaceholder = function () {
+        this.resetPropertyValue("renderedPlaceholder");
     };
     QuestionTextBase.prototype.hasPlaceholder = function () {
         return !this.isReadOnly;
@@ -54717,7 +54824,7 @@ var question_textbase_QuestionTextBase = /** @class */ (function (_super) {
         configurable: true
     });
     question_textbase_decorate([
-        jsonobject_property({ localizable: true, onSet: function (val, target) { return target.calcRenderedPlaceholder(); } })
+        jsonobject_property({ localizable: true, onSet: function (val, target) { return target.resetRenderedPlaceholder(); } })
     ], QuestionTextBase.prototype, "placeholder", void 0);
     return QuestionTextBase;
 }(question_Question));
@@ -54924,7 +55031,7 @@ var question_text_QuestionTextModel = /** @class */ (function (_super) {
         });
         _this.registerPropertyChangedHandlers(["inputType", "size"], function () {
             _this.updateInputSize();
-            _this.calcRenderedPlaceholder();
+            _this.resetRenderedPlaceholder();
         });
         return _this;
     }
@@ -58337,7 +58444,6 @@ var dropdownMultiSelectListModel_DropdownMultiSelectListModel = /** @class */ (f
     dropdownMultiSelectListModel_extends(DropdownMultiSelectListModel, _super);
     function DropdownMultiSelectListModel(question, onSelectionChanged) {
         var _this = _super.call(this, question, onSelectionChanged) || this;
-        _this.popupCssClasses = "sv-multi-select-list";
         _this.setHideSelectedItems(question.hideSelectedItems);
         _this.syncFilterStringPlaceholder();
         _this.closeOnSelect = question.closeOnSelect;
@@ -58371,6 +58477,7 @@ var dropdownMultiSelectListModel_DropdownMultiSelectListModel = /** @class */ (f
             return _super.prototype.getFocusFirstInputSelector.call(this);
         }
     };
+    DropdownMultiSelectListModel.prototype.getPopupCssClasses = function () { return "sv-multi-select-list"; };
     DropdownMultiSelectListModel.prototype.createListModel = function () {
         var _this = this;
         var visibleItems = this.getAvailableItems();
@@ -58404,7 +58511,6 @@ var dropdownMultiSelectListModel_DropdownMultiSelectListModel = /** @class */ (f
             elementId: this.listElementId
         };
         var res = new multiSelectListModel_MultiSelectListModel(listOptions);
-        res.actions.forEach(function (a) { return a.disableTabStop = true; });
         this.setOnTextSearchCallbackForListModel(res);
         res.forceShowFilter = true;
         return res;
@@ -58569,6 +58675,7 @@ var question_tagbox_decorate = (undefined && undefined.__decorate) || function (
 
 
 
+
 /**
  * A class that describes the Multi-Select Dropdown (Tag Box) question type.
  *
@@ -58580,6 +58687,7 @@ var question_tagbox_QuestionTagboxModel = /** @class */ (function (_super) {
         var _this = _super.call(this, name) || this;
         _this.itemDisplayNameMap = {};
         _this.onOpened = _this.addEvent();
+        _this.ariaExpanded = "false";
         _this.createLocalizableString("placeholder", _this, false, true);
         _this.createLocalizableString("clearCaption", _this, false, true);
         _this.createLocalizableString("readOnlyText", _this, true);
@@ -58594,7 +58702,7 @@ var question_tagbox_QuestionTagboxModel = /** @class */ (function (_super) {
         var _a;
         _super.prototype.locStrsChanged.call(this);
         this.updateReadOnlyText();
-        (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.locStrsChanged();
+        (_a = this.dropdownListModelValue) === null || _a === void 0 ? void 0 : _a.locStrsChanged();
     };
     QuestionTagboxModel.prototype.updateReadOnlyText = function () {
         this.readOnlyText = this.displayValue || this.placeholder;
@@ -58602,19 +58710,19 @@ var question_tagbox_QuestionTagboxModel = /** @class */ (function (_super) {
     QuestionTagboxModel.prototype.getDefaultItemComponent = function () {
         return "";
     };
-    QuestionTagboxModel.prototype.onSurveyLoad = function () {
-        _super.prototype.onSurveyLoad.call(this);
-        this.createDropdownListModel();
-    };
-    QuestionTagboxModel.prototype.onSetData = function () {
-        _super.prototype.onSetData.call(this);
-        this.createDropdownListModel();
-    };
-    QuestionTagboxModel.prototype.createDropdownListModel = function () {
-        if (!this.dropdownListModel && !this.isLoadingFromJson) {
-            this.dropdownListModel = new dropdownMultiSelectListModel_DropdownMultiSelectListModel(this);
-        }
-    };
+    Object.defineProperty(QuestionTagboxModel.prototype, "dropdownListModel", {
+        get: function () {
+            if (!this.dropdownListModelValue) {
+                this.dropdownListModelValue = new dropdownMultiSelectListModel_DropdownMultiSelectListModel(this);
+            }
+            return this.dropdownListModelValue;
+        },
+        set: function (val) {
+            this.dropdownListModelValue = val;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionTagboxModel.prototype, "placeholder", {
         /**
          * A text displayed in the input field when it doesn't have a value.
@@ -58681,8 +58789,7 @@ var question_tagbox_QuestionTagboxModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionTagboxModel.prototype, "popupModel", {
         get: function () {
-            var _a;
-            return (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.popupModel;
+            return this.dropdownListModel.popupModel;
         },
         enumerable: false,
         configurable: true
@@ -58698,6 +58805,17 @@ var question_tagbox_QuestionTagboxModel = /** @class */ (function (_super) {
             .append(this.cssClasses.controlPreview, this.isPreviewStyle)
             .toString();
     };
+    QuestionTagboxModel.prototype.updateCssClasses = function (res, css) {
+        _super.prototype.updateCssClasses.call(this, res, css);
+        updateListCssValues(res, css);
+    };
+    QuestionTagboxModel.prototype.calcCssClasses = function (css) {
+        var classes = _super.prototype.calcCssClasses.call(this, css);
+        if (this.dropdownListModelValue) {
+            this.dropdownListModel.updateCssClasses(classes.popup, classes.list);
+        }
+        return classes;
+    };
     QuestionTagboxModel.prototype.onOpenedCallBack = function () {
         this.onOpened.fire(this, { question: this, choices: this.choices });
     };
@@ -58718,7 +58836,7 @@ var question_tagbox_QuestionTagboxModel = /** @class */ (function (_super) {
     };
     QuestionTagboxModel.prototype.onVisibleChoicesChanged = function () {
         _super.prototype.onVisibleChoicesChanged.call(this);
-        if (this.popupModel) {
+        if (!!this.dropdownListModelValue) {
             this.dropdownListModel.updateItems();
         }
     };
@@ -58766,13 +58884,11 @@ var question_tagbox_QuestionTagboxModel = /** @class */ (function (_super) {
     };
     QuestionTagboxModel.prototype.supportEmptyValidation = function () { return true; };
     QuestionTagboxModel.prototype.onBlurCore = function (event) {
-        var _a;
-        (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.onBlur(event);
+        this.dropdownListModel.onBlur(event);
         _super.prototype.onBlurCore.call(this, event);
     };
     QuestionTagboxModel.prototype.onFocusCore = function (event) {
-        var _a;
-        (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.onFocus(event);
+        this.dropdownListModel.onFocus(event);
         _super.prototype.onFocusCore.call(this, event);
     };
     QuestionTagboxModel.prototype.allElementsSelected = function () {
@@ -58785,14 +58901,15 @@ var question_tagbox_QuestionTagboxModel = /** @class */ (function (_super) {
     };
     QuestionTagboxModel.prototype.dispose = function () {
         _super.prototype.dispose.call(this);
-        if (!!this.dropdownListModel) {
-            this.dropdownListModel.dispose();
+        if (!!this.dropdownListModelValue) {
+            this.dropdownListModelValue.dispose();
+            this.dropdownListModelValue = undefined;
         }
     };
     QuestionTagboxModel.prototype.clearValue = function (keepComment) {
         var _a;
         _super.prototype.clearValue.call(this, keepComment);
-        (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.clear();
+        (_a = this.dropdownListModelValue) === null || _a === void 0 ? void 0 : _a.clear();
     };
     Object.defineProperty(QuestionTagboxModel.prototype, "showClearButton", {
         get: function () {
@@ -58818,7 +58935,7 @@ var question_tagbox_QuestionTagboxModel = /** @class */ (function (_super) {
     question_tagbox_decorate([
         jsonobject_property({
             onSet: function (newValue, target) {
-                if (!!target.dropdownListModel) {
+                if (!!target.dropdownListModelValue) {
                     target.dropdownListModel.setSearchEnabled(newValue);
                 }
             }
@@ -58827,7 +58944,7 @@ var question_tagbox_QuestionTagboxModel = /** @class */ (function (_super) {
     question_tagbox_decorate([
         jsonobject_property({
             onSet: function (newValue, target) {
-                if (!!target.dropdownListModel) {
+                if (!!target.dropdownListModelValue) {
                     target.dropdownListModel.setHideSelectedItems(newValue);
                 }
             }
@@ -58836,7 +58953,7 @@ var question_tagbox_QuestionTagboxModel = /** @class */ (function (_super) {
     question_tagbox_decorate([
         jsonobject_property({
             onSet: function (newValue, target) {
-                if (!!target.dropdownListModel) {
+                if (!!target.dropdownListModelValue) {
                     target.dropdownListModel.setChoicesLazyLoadEnabled(newValue);
                 }
             }
@@ -60206,10 +60323,18 @@ var question_comment_extends = (undefined && undefined.__extends) || (function (
 var question_comment_QuestionCommentModel = /** @class */ (function (_super) {
     question_comment_extends(QuestionCommentModel, _super);
     function QuestionCommentModel(name) {
-        var _this_1 = _super.call(this, name) || this;
-        _this_1.textAreaModel = new text_area_TextAreaModel(_this_1.getTextAreaOptions());
-        return _this_1;
+        return _super.call(this, name) || this;
     }
+    Object.defineProperty(QuestionCommentModel.prototype, "textAreaModel", {
+        get: function () {
+            if (!this.textAreaModelValue) {
+                this.textAreaModelValue = new text_area_TextAreaModel(this.getTextAreaOptions());
+            }
+            return this.textAreaModelValue;
+        },
+        enumerable: false,
+        configurable: true
+    });
     QuestionCommentModel.prototype.getTextAreaOptions = function () {
         var _this_1 = this;
         var _this = this;
@@ -61199,7 +61324,7 @@ var question_file_QuestionFileModel = /** @class */ (function (_super) {
         if (this.previewValue.length > 0 && !this.calculatedGapBetweenItems && !this.calculatedItemWidth) {
             setTimeout(function () {
                 _this.processResponsiveness(0, _this._width);
-            });
+            }, 1);
         }
         this.prevPreviewLength = this.previewValue.length;
     };
@@ -61422,7 +61547,7 @@ var question_file_QuestionFileModel = /** @class */ (function (_super) {
     };
     QuestionFileModel.prototype.updateCurrentMode = function () {
         var _this = this;
-        if (!this.isDesignMode) {
+        if (!this.isDesignMode && this.survey) {
             if (this.sourceType !== "file") {
                 this.camera.hasCamera(function (res) {
                     _this.setPropertyValue("currentMode", res && _this.isDefaultV2Theme ? _this.sourceType : "file");
@@ -61637,9 +61762,12 @@ var question_file_QuestionFileModel = /** @class */ (function (_super) {
     };
     QuestionFileModel.prototype.loadPreview = function (newValue) {
         var _this = this;
+        if (this.showPreview && this.prevLoadedPreviewValue === newValue)
+            return;
         this.previewValue.splice(0, this.previewValue.length);
         if (!this.showPreview || !newValue)
             return;
+        this.prevLoadedPreviewValue = newValue;
         var newValues = Array.isArray(newValue)
             ? newValue
             : !!newValue
@@ -63265,7 +63393,8 @@ var question_rating_QuestionRatingModel = /** @class */ (function (_super) {
     };
     QuestionRatingModel.prototype.onBeforeSetCompactRenderer = function () {
         if (!this.dropdownListModelValue) {
-            this.dropdownListModel = new dropdownListModel_DropdownListModel(this);
+            this.dropdownListModelValue = new dropdownListModel_DropdownListModel(this);
+            this.ariaExpanded = "false";
         }
     };
     QuestionRatingModel.prototype.getCompactRenderAs = function () {
@@ -63283,6 +63412,7 @@ var question_rating_QuestionRatingModel = /** @class */ (function (_super) {
         },
         set: function (val) {
             this.dropdownListModelValue = val;
+            this.ariaExpanded = !!val ? "false" : undefined;
             this.updateElementCss();
         },
         enumerable: false,
@@ -63295,17 +63425,12 @@ var question_rating_QuestionRatingModel = /** @class */ (function (_super) {
     };
     QuestionRatingModel.prototype.updateCssClasses = function (res, css) {
         _super.prototype.updateCssClasses.call(this, res, css);
-        if (!!this.dropdownListModel) {
-            var listCssClasses = {};
-            mergeValues(css.list, listCssClasses);
-            mergeValues(res.list, listCssClasses);
-            res["list"] = listCssClasses;
-        }
+        updateListCssValues(res, css);
     };
     QuestionRatingModel.prototype.calcCssClasses = function (css) {
         var classes = _super.prototype.calcCssClasses.call(this, css);
-        if (this.dropdownListModel) {
-            this.dropdownListModel.updateCssClasses(classes.popup, classes.list);
+        if (this.dropdownListModelValue) {
+            this.dropdownListModelValue.updateCssClasses(classes.popup, classes.list);
         }
         return classes;
     };
@@ -63325,6 +63450,7 @@ var question_rating_QuestionRatingModel = /** @class */ (function (_super) {
         _super.prototype.dispose.call(this);
         if (!!this.dropdownListModelValue) {
             this.dropdownListModelValue.dispose();
+            this.dropdownListModelValue = undefined;
         }
     };
     QuestionRatingModel.colorsCalculated = false;
@@ -68183,8 +68309,8 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         enumerable: false,
         configurable: true
     });
-    QuestionPanelDynamicModel.prototype.onFirstRendering = function () {
-        _super.prototype.onFirstRendering.call(this);
+    QuestionPanelDynamicModel.prototype.onFirstRenderingCore = function () {
+        _super.prototype.onFirstRenderingCore.call(this);
         this.buildPanelsFirstTime();
         this.template.onFirstRendering();
         for (var i = 0; i < this.panelsCore.length; i++) {
@@ -68471,12 +68597,14 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         if (!this.isDesignMode && !this.isReadOnly && !this.isValueEmpty(panel.getValue())) {
             this.runPanelsCondition([panel], this.getDataFilteredValues(), this.getDataFilteredProperties());
         }
-        panel.onFirstRendering();
         var questions = panel.questions;
         for (var i = 0; i < questions.length; i++) {
             questions[i].setParentQuestion(this);
         }
-        panel.locStrsChanged();
+        if (this.wasRendered) {
+            panel.onFirstRendering();
+            panel.locStrsChanged();
+        }
         panel.onGetFooterActionsCallback = function () {
             return _this.getPanelActions(panel);
         };
@@ -68572,7 +68700,7 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
     };
     QuestionPanelDynamicModel.prototype.onSetData = function () {
         _super.prototype.onSetData.call(this);
-        if (this.useTemplatePanel) {
+        if (!this.isLoadingFromJson && this.useTemplatePanel) {
             this.setTemplatePanelSurveyImpl();
             this.rebuildPanels();
         }
@@ -72031,8 +72159,8 @@ Serializer.addClass("currencymask", [
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.12.13";
-ReleaseDate = "" + "2024-12-04";
+Version = "" + "1.12.15";
+ReleaseDate = "" + "2024-12-16";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -83278,7 +83406,7 @@ var action_bar_SurveyActionBar = /** @class */ (function (_super) {
             return;
         var container = this.rootRef.current;
         if (!!container) {
-            this.model.initResponsivityManager(container, function (callback) { setTimeout(callback); });
+            this.model.initResponsivityManager(container, function (callback) { setTimeout(callback, 100); });
         }
     };
     SurveyActionBar.prototype.componentWillUnmount = function () {
@@ -83293,7 +83421,7 @@ var action_bar_SurveyActionBar = /** @class */ (function (_super) {
         if (!!this.model.hasActions) {
             var container = this.rootRef.current;
             if (!!container) {
-                this.model.initResponsivityManager(container, function (callback) { setTimeout(callback); });
+                this.model.initResponsivityManager(container, function (callback) { setTimeout(callback, 100); });
             }
         }
     };
@@ -89347,13 +89475,10 @@ var list_item_ListItem = /** @class */ (function (_super) {
         var _this = this;
         if (!this.item)
             return null;
-        var contentWrapStyle = {
-            paddingInlineStart: this.model.getItemIndent(this.item)
-        };
         var className = this.model.getItemClass(this.item);
         var itemContent = this.item.component || this.model.itemComponent;
         var newElement = ReactElementFactory.Instance.createElement(itemContent, { item: this.item, key: this.item.id, model: this.model });
-        var contentWrap = external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { style: contentWrapStyle, className: this.model.cssClasses.itemBody, title: this.item.locTitle.calculatedText, onMouseOver: function (event) { _this.model.onItemHover(_this.item); }, onMouseLeave: function (event) { _this.model.onItemLeave(_this.item); } }, newElement);
+        var contentWrap = external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { style: this.model.getItemStyle(this.item), className: this.model.cssClasses.itemBody, title: this.item.locTitle.calculatedText, onMouseOver: function (event) { _this.model.onItemHover(_this.item); }, onMouseLeave: function (event) { _this.model.onItemLeave(_this.item); } }, newElement);
         var separator = this.item.needSeparator ? external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: this.model.cssClasses.itemSeparator }) : null;
         var isVisible = this.model.isItemVisible(this.item);
         var style = {
@@ -90097,7 +90222,7 @@ var image_SurveyQuestionImage = /** @class */ (function (_super) {
         }
         var control = null;
         if (this.question.renderedMode === "image") {
-            control = (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("img", { className: cssClasses, src: this.question.locImageLink.renderedHtml, alt: this.question.altText || this.question.title, width: this.question.renderedWidth, height: this.question.renderedHeight, 
+            control = (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("img", { className: cssClasses, src: this.question.locImageLink.renderedHtml || null, alt: this.question.altText || this.question.title, width: this.question.renderedWidth, height: this.question.renderedHeight, 
                 //alt={item.text || item.value}
                 style: style, onLoad: function (event) { _this.question.onLoadHandler(); }, onError: function (event) { _this.question.onErrorHandler(); } }));
         }
@@ -90425,7 +90550,7 @@ var list_item_content_ListItemContent = /** @class */ (function (_super) {
             content.push(text);
         }
         if (this.item.markerIconName) {
-            var icon = external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(svg_icon_SvgIcon, { key: "marker", className: this.item.cssClasses.itemMarkerIcon, iconName: this.item.markerIconName, size: this.item.markerIconSize });
+            var icon = external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(svg_icon_SvgIcon, { key: "marker", className: this.item.cssClasses.itemMarkerIcon, iconName: this.item.markerIconName, size: "auto" });
             content.push(icon);
         }
         return external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Fragment, null, content);
@@ -90528,7 +90653,7 @@ var logo_image_LogoImage = /** @class */ (function (_super) {
     LogoImage.prototype.render = function () {
         var content = [];
         content.push(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { key: "logo-image", className: this.survey.logoClassNames },
-            external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("img", { className: this.survey.css.logoImage, src: this.survey.locLogo.renderedHtml, alt: this.survey.locTitle.renderedHtml, width: this.survey.renderedLogoWidth, height: this.survey.renderedLogoHeight, style: { objectFit: this.survey.logoFit, width: this.survey.renderedStyleLogoWidth, height: this.survey.renderedStyleLogoHeight } })));
+            external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("img", { className: this.survey.css.logoImage, src: this.survey.locLogo.renderedHtml || null, alt: this.survey.locTitle.renderedHtml, width: this.survey.renderedLogoWidth, height: this.survey.renderedLogoHeight, style: { objectFit: this.survey.logoFit, width: this.survey.renderedStyleLogoWidth, height: this.survey.renderedStyleLogoHeight } })));
         return external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Fragment, null, content);
     };
     return LogoImage;