survey-core 1.12.13 → 1.12.15

package/survey.core.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)
  */
@@ -105,7 +105,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /*!*******************************************!*\
   !*** ./src/entries/core.ts + 127 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 */
+/*! 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 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -333,6 +333,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; });
@@ -1142,12 +1143,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() {
@@ -1246,7 +1248,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;
@@ -1340,9 +1342,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);
+                        }
                     }
                 },
             });
@@ -8657,8 +8661,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;
@@ -8666,6 +8669,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;
@@ -9986,6 +9996,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",
@@ -10045,21 +10056,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;
@@ -10078,6 +10097,7 @@ var list_ListModel = /** @class */ (function (_super) {
                         _this[key] = options_1[key];
                 }
             });
+            _this.updateActionsIds();
         }
         else {
             _this.setItems(items);
@@ -10134,10 +10154,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) {
@@ -10161,16 +10184,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;
@@ -10211,7 +10237,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
@@ -10265,7 +10291,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) {
@@ -10334,10 +10365,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) {
@@ -10690,7 +10726,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++; };
@@ -10945,9 +10980,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);
@@ -10962,13 +10994,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) {
@@ -12549,7 +12582,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();
         }
@@ -12692,20 +12725,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.
@@ -12761,7 +12802,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))
@@ -12856,7 +12897,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 () {
@@ -13151,17 +13197,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);
@@ -13169,6 +13217,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;
@@ -14680,6 +14735,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 = "";
@@ -17153,7 +17214,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; });
@@ -17181,7 +17241,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();
@@ -17196,26 +17256,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";
     };
@@ -17260,6 +17300,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) {
@@ -17747,7 +17817,6 @@ var question_Question = /** @class */ (function (_super) {
         if (isLight !== true) {
             this.runConditions();
         }
-        this.calcRenderedCommentPlaceholder();
         if (!this.visible) {
             this.updateIsVisibleProp();
         }
@@ -17765,7 +17834,9 @@ var question_Question = /** @class */ (function (_super) {
                 return;
             this.removeFromParent();
             this.setPropertyValue("parent", val);
-            this.updateQuestionCss();
+            if (!!val) {
+                this.updateQuestionCss();
+            }
             this.onParentChanged();
         },
         enumerable: false,
@@ -18093,14 +18164,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();
@@ -18128,7 +18202,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();
         }
@@ -18457,7 +18531,7 @@ var question_Question = /** @class */ (function (_super) {
         if (reNew) {
             this.updateQuestionCss(true);
         }
-        this.onIndentChanged();
+        this.resetIndents();
     };
     Question.prototype.updateQuestionCss = function (reNew) {
         if (this.isLoadingFromJson ||
@@ -18511,9 +18585,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)
@@ -18818,7 +18894,7 @@ var question_Question = /** @class */ (function (_super) {
             this.clearErrors();
         }
         this.updateQuestionCss();
-        this.calcRenderedCommentPlaceholder();
+        this.resetRenderedCommentPlaceholder();
     };
     Object.defineProperty(Question.prototype, "enableIf", {
         /**
@@ -18909,15 +18985,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();
@@ -19137,7 +19208,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", {
@@ -20429,7 +20499,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()
@@ -23129,12 +23199,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);
@@ -24615,6 +24685,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 },
@@ -26324,8 +26397,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++;
@@ -28612,6 +28689,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;
@@ -28623,6 +28701,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);
@@ -29641,10 +29720,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) {
@@ -34722,7 +34800,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;
@@ -34779,6 +34857,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)
@@ -34798,8 +34877,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 () {
@@ -35812,14 +35899,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)
@@ -36263,9 +36347,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;
@@ -36606,9 +36688,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);
@@ -36637,7 +36716,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;
     }
@@ -36658,15 +36737,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;
@@ -36890,7 +36960,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);
@@ -36898,18 +36972,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";
     };
@@ -37549,11 +37628,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.
@@ -43786,6 +43860,7 @@ var survey_SurveyModel = /** @class */ (function (_super) {
             width: width,
         };
         this.onResize.fire(this, options);
+        // this.setResponsiveStartWidth(width);
         return isMobileChanged;
     };
     SurveyModel.prototype.triggerResponsiveness = function (hard) {
@@ -46099,10 +46174,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
@@ -46932,6 +47030,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);
@@ -47307,7 +47414,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");
@@ -47338,6 +47444,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 = {
@@ -47358,16 +47484,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 = "";
     };
@@ -49534,22 +49650,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) {
@@ -50723,7 +50823,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;
@@ -50733,7 +50832,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();
@@ -50743,6 +50841,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", {
@@ -50845,7 +50945,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;
@@ -50959,8 +51058,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 () {
@@ -51438,6 +51538,7 @@ var question_dropdown_decorate = (undefined && undefined.__decorate) || function
 
 
 
+
 /**
  * A class that describes the Dropdown question type.
  *
@@ -51450,6 +51551,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 () {
@@ -51674,6 +51776,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;
@@ -51711,9 +51826,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;
@@ -51726,8 +51846,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
@@ -51737,7 +51856,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) {
@@ -51763,7 +51882,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();
         }
     };
@@ -51777,7 +51896,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);
@@ -51798,19 +51917,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([
@@ -51819,7 +51937,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);
                 }
             }
@@ -51840,7 +51958,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);
                 }
             }
@@ -52934,37 +53052,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;
@@ -53004,7 +53111,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));
@@ -53211,7 +53318,7 @@ var question_text_QuestionTextModel = /** @class */ (function (_super) {
         });
         _this.registerPropertyChangedHandlers(["inputType", "size"], function () {
             _this.updateInputSize();
-            _this.calcRenderedPlaceholder();
+            _this.resetRenderedPlaceholder();
         });
         return _this;
     }
@@ -56624,7 +56731,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;
@@ -56658,6 +56764,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();
@@ -56691,7 +56798,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;
@@ -56856,6 +56962,7 @@ var question_tagbox_decorate = (undefined && undefined.__decorate) || function (
 
 
 
+
 /**
  * A class that describes the Multi-Select Dropdown (Tag Box) question type.
  *
@@ -56867,6 +56974,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);
@@ -56881,7 +56989,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;
@@ -56889,19 +56997,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.
@@ -56968,8 +57076,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
@@ -56985,6 +57092,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 });
     };
@@ -57005,7 +57123,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();
         }
     };
@@ -57053,13 +57171,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 () {
@@ -57072,14 +57188,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 () {
@@ -57105,7 +57222,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);
                 }
             }
@@ -57114,7 +57231,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);
                 }
             }
@@ -57123,7 +57240,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);
                 }
             }
@@ -58493,10 +58610,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;
@@ -59486,7 +59611,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;
     };
@@ -59709,7 +59834,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");
@@ -59924,9 +60049,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
@@ -61552,7 +61680,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 () {
@@ -61570,6 +61699,7 @@ var question_rating_QuestionRatingModel = /** @class */ (function (_super) {
         },
         set: function (val) {
             this.dropdownListModelValue = val;
+            this.ariaExpanded = !!val ? "false" : undefined;
             this.updateElementCss();
         },
         enumerable: false,
@@ -61582,17 +61712,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;
     };
@@ -61612,6 +61737,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;
@@ -66470,8 +66596,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++) {
@@ -66758,12 +66884,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);
         };
@@ -66859,7 +66987,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();
         }
@@ -70318,8 +70446,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