survey-react 1.12.12 → 1.12.14

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.12.12
+ * surveyjs - Survey JavaScript library v1.12.14
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -2427,13 +2427,16 @@ var helpers_Helpers = /** @class */ (function () {
     };
     Helpers.getNumberCore = function (value) {
         if (typeof value == "string") {
-            if (!value.trim())
+            value = value.trim();
+            if (!value)
                 return NaN;
             if (value.indexOf("0x") == 0) {
                 if (value.length > 32)
                     return NaN;
                 return parseInt(value);
             }
+            if (value.length > 15 && Helpers.isDigitsOnly(value))
+                return NaN;
             if (Helpers.isStringHasOperator(value))
                 return NaN;
         }
@@ -2545,6 +2548,15 @@ var helpers_Helpers = /** @class */ (function () {
     Helpers.isCharDigit = function (ch) {
         return ch >= "0" && ch <= "9";
     };
+    Helpers.isDigitsOnly = function (str) {
+        if (!str)
+            return false;
+        for (var i = 0; i < str.length; i++) {
+            if (!Helpers.isCharDigit(str[i]))
+                return false;
+        }
+        return true;
+    };
     Helpers.getNumberFromStr = function (str, index) {
         if (!this.isCharDigit(str[index]))
             return NaN;
@@ -3041,9 +3053,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);
+                        }
                     }
                 },
             });
@@ -3607,7 +3621,7 @@ var CustomPropertiesCollection = /** @class */ (function () {
             prop.serializationProperty &&
             obj.createCustomLocalizableObj) {
             var locStr = obj.createCustomLocalizableObj(prop.name);
-            locStr.defaultValue = prop.defaultValue;
+            locStr.defaultValue = prop.getDefaultValue(obj);
             var locDesc = {
                 get: function () {
                     return obj.getLocalizableString(prop.name);
@@ -3625,7 +3639,6 @@ var CustomPropertiesCollection = /** @class */ (function () {
             Object.defineProperty(obj, prop.name, desc);
         }
         else {
-            var defaultValue = prop.defaultValue;
             var isArrayProp = prop.isArray || prop.type === "multiplevalues";
             if (typeof obj.createNewArray === "function") {
                 if (Serializer.isDescendantOf(prop.className, "itemvalue")) {
@@ -3642,10 +3655,10 @@ var CustomPropertiesCollection = /** @class */ (function () {
                     }
                 }
                 if (isArrayProp) {
+                    var defaultValue = prop.getDefaultValue(obj);
                     if (Array.isArray(defaultValue)) {
                         obj.setPropertyValue(prop.name, defaultValue);
                     }
-                    defaultValue = null;
                 }
             }
             if (!!obj.getPropertyValue && !!obj.setPropertyValue) {
@@ -3654,7 +3667,7 @@ var CustomPropertiesCollection = /** @class */ (function () {
                         if (!!prop.onGetValue) {
                             return prop.onGetValue(obj);
                         }
-                        return obj.getPropertyValue(prop.name, defaultValue);
+                        return obj.getPropertyValue(prop.name, undefined);
                     },
                     set: function (v) {
                         if (!!prop.onSetValue) {
@@ -10359,8 +10372,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;
@@ -10368,6 +10380,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;
@@ -10378,9 +10397,9 @@ var base_Base = /** @class */ (function () {
         var prop = this.getPropertyByName(name);
         if (!prop || prop.isCustom && this.isCreating)
             return undefined;
-        var dValue = prop.defaultValue;
         if (!!prop.defaultValueFunc)
-            return dValue;
+            return prop.defaultValueFunc(this);
+        var dValue = prop.getDefaultValue(this);
         if (!this.isPropertyEmpty(dValue) && !Array.isArray(dValue))
             return dValue;
         var locStr = this.localizableStrings ? this.localizableStrings[name] : undefined;
@@ -11688,6 +11707,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",
@@ -11747,13 +11767,15 @@ 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)
@@ -11780,6 +11802,7 @@ var list_ListModel = /** @class */ (function (_super) {
                         _this[key] = options_1[key];
                 }
             });
+            _this.updateActionsIds();
         }
         else {
             _this.setItems(items);
@@ -11836,10 +11859,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) {
@@ -11863,16 +11889,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;
@@ -11913,7 +11942,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
@@ -11967,7 +11996,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) {
@@ -12036,10 +12070,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) {
@@ -12392,7 +12431,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++; };
@@ -12647,9 +12685,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);
@@ -14157,6 +14192,7 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
     SurveyElement.prototype.getTitleToolbar = function () {
         if (!this.titleToolbarValue) {
             this.titleToolbarValue = this.createActionContainer(true);
+            this.titleToolbarValue.locOwner = this;
             this.titleToolbarValue.containerCss = (this.isPanel ? this.cssClasses.panel.titleBar : this.cssClasses.titleBar) || "sv-action-title-bar";
             this.titleToolbarValue.setItems(this.getTitleActions());
         }
@@ -14193,6 +14229,12 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
         }
         this.setPropertyValue("titleActions", actions);
     };
+    SurveyElement.prototype.locStrsChanged = function () {
+        _super.prototype.locStrsChanged.call(this);
+        if (!!this.titleToolbarValue) {
+            this.titleToolbarValue.locStrsChanged();
+        }
+    };
     Object.defineProperty(SurveyElement.prototype, "hasTitleActions", {
         get: function () {
             return this.getTitleActions().length > 0;
@@ -14244,7 +14286,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();
         }
@@ -14387,20 +14429,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.
@@ -14456,7 +14506,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))
@@ -14551,7 +14601,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 () {
@@ -14846,17 +14901,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);
@@ -14864,6 +14921,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;
@@ -16375,6 +16439,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 = "";
@@ -18848,7 +18918,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; });
@@ -18876,7 +18945,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();
@@ -18891,26 +18960,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";
     };
@@ -18955,6 +19004,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) {
@@ -19389,10 +19468,8 @@ var question_Question = /** @class */ (function (_super) {
         this.triggersInfo.push(info);
         return info;
     };
-    Question.prototype.runTriggerInfo = function (info, name, value) {
+    Question.prototype.runTriggerInfo = function (info, keys) {
         var expression = this[info.name];
-        var keys = {};
-        keys[name] = value;
         if (!expression || info.isRunning || !info.canRun()) {
             if (info.runSecondCheck(keys)) {
                 info.doComplete();
@@ -19416,12 +19493,16 @@ var question_Question = /** @class */ (function (_super) {
         info.isRunning = true;
         info.runner.run(this.getDataFilteredValues(), this.getDataFilteredProperties());
     };
-    Question.prototype.runTriggers = function (name, value) {
+    Question.prototype.runTriggers = function (name, value, keys) {
         var _this = this;
         if (this.isSettingQuestionValue || (this.parentQuestion && this.parentQuestion.getValueName() === name))
             return;
+        if (!keys) {
+            keys = {};
+            keys[name] = value;
+        }
         this.triggersInfo.forEach(function (info) {
-            _this.runTriggerInfo(info, name, value);
+            _this.runTriggerInfo(info, keys);
         });
     };
     Question.prototype.runConditions = function () {
@@ -19440,7 +19521,6 @@ var question_Question = /** @class */ (function (_super) {
         if (isLight !== true) {
             this.runConditions();
         }
-        this.calcRenderedCommentPlaceholder();
         if (!this.visible) {
             this.updateIsVisibleProp();
         }
@@ -19458,7 +19538,9 @@ var question_Question = /** @class */ (function (_super) {
                 return;
             this.removeFromParent();
             this.setPropertyValue("parent", val);
-            this.updateQuestionCss();
+            if (!!val) {
+                this.updateQuestionCss();
+            }
             this.onParentChanged();
         },
         enumerable: false,
@@ -19786,14 +19868,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();
@@ -19821,7 +19906,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();
         }
@@ -20063,8 +20148,8 @@ var question_Question = /** @class */ (function (_super) {
     };
     Question.prototype.getCssDescription = function (cssClasses) {
         return new CssClassBuilder()
-            .append(cssClasses.description, this.hasDescriptionUnderTitle)
-            .append(cssClasses.descriptionUnderInput, this.hasDescriptionUnderInput)
+            .append(cssClasses.description)
+            .append(cssClasses.descriptionUnderInput, this.getDescriptionLocation() == "underInput")
             .toString();
     };
     Question.prototype.showErrorOnCore = function (location) {
@@ -20150,7 +20235,7 @@ var question_Question = /** @class */ (function (_super) {
         if (reNew) {
             this.updateQuestionCss(true);
         }
-        this.onIndentChanged();
+        this.resetIndents();
     };
     Question.prototype.updateQuestionCss = function (reNew) {
         if (this.isLoadingFromJson ||
@@ -20204,9 +20289,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)
@@ -20511,7 +20598,7 @@ var question_Question = /** @class */ (function (_super) {
             this.clearErrors();
         }
         this.updateQuestionCss();
-        this.calcRenderedCommentPlaceholder();
+        this.resetRenderedCommentPlaceholder();
     };
     Object.defineProperty(Question.prototype, "enableIf", {
         /**
@@ -20602,15 +20689,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();
@@ -20830,7 +20912,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", {
@@ -22122,7 +22203,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()
@@ -24822,12 +24903,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);
@@ -26308,6 +26389,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 },
@@ -28017,8 +28101,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++;
@@ -28117,7 +28205,7 @@ var question_matrixdropdownrendered_QuestionMatrixDropdownRenderedTable = /** @c
             return;
         this.headerRowValue = this.createRenderedRow(this.cssClasses);
         if (this.isRowsDragAndDrop) {
-            this.headerRow.cells.push(this.createHeaderCell(null, "action"));
+            this.headerRow.cells.push(this.createHeaderCell(null, "action", this.cssClasses.actionsCellDrag));
         }
         if (this.hasActionCellInRows("start")) {
             this.headerRow.cells.push(this.createHeaderCell(null, "action"));
@@ -28665,22 +28753,23 @@ var question_matrixdropdownrendered_QuestionMatrixDropdownRenderedTable = /** @c
             return null;
         return choices;
     };
-    QuestionMatrixDropdownRenderedTable.prototype.setHeaderCellCssClasses = function (cell, cellType) {
+    QuestionMatrixDropdownRenderedTable.prototype.setHeaderCellCssClasses = function (cell, cellType, classMod) {
         cell.className = new CssClassBuilder()
             .append(this.cssClasses.headerCell)
             .append(this.cssClasses.columnTitleCell, this.matrix.isColumnLayoutHorizontal)
             .append(this.cssClasses.emptyCell, !!cell.isEmpty)
             .append(this.cssClasses.cell + "--" + cellType, !!cellType)
+            .append(classMod, !!classMod)
             .toString();
     };
-    QuestionMatrixDropdownRenderedTable.prototype.createHeaderCell = function (column, cellType) {
+    QuestionMatrixDropdownRenderedTable.prototype.createHeaderCell = function (column, cellType, classMod) {
         if (cellType === void 0) { cellType = null; }
         var cell = !!column ? this.createTextCell(column.locTitle) : this.createEmptyCell();
         cell.column = column;
         this.setHeaderCell(column, cell);
         if (!cellType)
             cellType = (!!column && column.cellType !== "default") ? column.cellType : this.matrix.cellType;
-        this.setHeaderCellCssClasses(cell, cellType);
+        this.setHeaderCellCssClasses(cell, cellType, classMod);
         return cell;
     };
     QuestionMatrixDropdownRenderedTable.prototype.setHeaderCell = function (column, cell) {
@@ -30304,6 +30393,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;
@@ -30315,10 +30405,11 @@ 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) {
-        _super.prototype.runTriggers.call(this, name, value);
-        this.runFuncForCellQuestions(function (q) { q.runTriggers(name, value); });
+    QuestionMatrixDropdownModelBase.prototype.runTriggers = function (name, value, keys) {
+        _super.prototype.runTriggers.call(this, name, value, keys);
+        this.runFuncForCellQuestions(function (q) { q.runTriggers(name, value, keys); });
     };
     QuestionMatrixDropdownModelBase.prototype.updateElementVisibility = function () {
         _super.prototype.updateElementVisibility.call(this);
@@ -30553,7 +30644,7 @@ var question_matrixdropdownbase_QuestionMatrixDropdownModelBase = /** @class */
         /**
          * An error message displayed when users enter a duplicate value into a column that accepts only unique values (`isUnique` is set to `true` or `keyName` is specified).
          *
-         * A default value for this property is taken from a [localization dictionary](https://github.com/surveyjs/survey-library/tree/master/src/localization). Refer to the following help topic for more information: [Localization & Globalization](https://surveyjs.io/form-library/documentation/localization).
+         * A default value for this property is taken from a [localization dictionary](https://github.com/surveyjs/survey-library/tree/01bd8abd0c574719956d4d579d48c8010cd389d4/packages/survey-core/src/localization). Refer to the following help topic for more information: [Localization & Globalization](https://surveyjs.io/form-library/documentation/localization).
          * @see isUniqueCaseSensitive
          */
         get: function () {
@@ -32816,7 +32907,7 @@ var question_matrixdynamic_QuestionMatrixDynamicModel = /** @class */ (function
         return true;
     };
     QuestionMatrixDynamicModel.prototype.onPointerDown = function (pointerDownEvent, row) {
-        if (!row || !this.isRowsDragAndDrop)
+        if (!row || !this.isRowsDragAndDrop || this.isDesignMode)
             return;
         if (this.isBanStartDrag(pointerDownEvent))
             return;
@@ -34131,7 +34222,7 @@ var defaultV2Css = {
         requiredText: "sd-question__required-text",
         number: "sd-element__num",
         description: "sd-description sd-question__description",
-        descriptionUnderInput: "sd-description sd-question__description sd-question__description--under-input",
+        descriptionUnderInput: "sd-question__description--under-input",
         comment: "sd-input sd-comment",
         other: "sd-input sd-comment",
         required: "sd-question--required",
@@ -36414,7 +36505,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;
@@ -36471,6 +36562,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)
@@ -36490,8 +36582,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 () {
@@ -37504,14 +37604,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)
@@ -37955,9 +38052,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;
@@ -38298,9 +38393,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);
@@ -38329,7 +38421,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;
     }
@@ -38350,15 +38442,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;
@@ -38582,7 +38665,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);
@@ -38590,18 +38677,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";
     };
@@ -39241,11 +39333,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.
@@ -45478,6 +45565,7 @@ var survey_SurveyModel = /** @class */ (function (_super) {
             width: width,
         };
         this.onResize.fire(this, options);
+        this.setResponsiveStartWidth(width);
         return isMobileChanged;
     };
     SurveyModel.prototype.triggerResponsiveness = function (hard) {
@@ -45847,7 +45935,7 @@ var survey_SurveyModel = /** @class */ (function (_super) {
                 }, elementsToRenderBefore);
             }
             else {
-                if (!elementPage_1 && !this.isSinglePage && !this.isDesignMode && this.rootElement) {
+                if (element.isPage && !this.isSinglePage && !this.isDesignMode && this.rootElement) {
                     var elementToScroll = this.rootElement.querySelector(classesToSelector(this.css.rootWrapper));
                     survey_element_SurveyElement.ScrollElementToViewCore(elementToScroll, false, scrollIfVisible, scrollIntoViewOptions, onScolledCallback);
                 }
@@ -46372,12 +46460,9 @@ var survey_SurveyModel = /** @class */ (function (_super) {
                 var question = questions[i];
                 this.checkQuestionErrorOnValueChanged(question);
                 question.onSurveyValueChanged(newValue);
-                this.fireOnValueChanged(valueName, newValue, question);
             }
         }
-        else {
-            this.fireOnValueChanged(valueName, newValue, null);
-        }
+        this.fireOnValueChanged(valueName, newValue, !!questionName ? this.getQuestionByName(questionName) : undefined);
         if (this.isDisposed)
             return;
         this.checkElementsBindings(valueName, newValue);
@@ -46551,11 +46636,17 @@ var survey_SurveyModel = /** @class */ (function (_super) {
     SurveyModel.prototype.runConditionOnValueChanged = function (name, value) {
         if (this.isRunningConditions) {
             this.conditionValues[name] = value;
+            if (this.questionTriggersKeys) {
+                this.questionTriggersKeys[name] = value;
+            }
             this.isValueChangedOnRunningCondition = true;
         }
         else {
+            this.questionTriggersKeys = {};
+            this.questionTriggersKeys[name] = value;
             this.runConditions();
             this.runQuestionsTriggers(name, value);
+            this.questionTriggersKeys = undefined;
         }
     };
     SurveyModel.prototype.runConditionsCore = function (properties) {
@@ -46572,10 +46663,13 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         }
     };
     SurveyModel.prototype.runQuestionsTriggers = function (name, value) {
+        var _this = this;
         if (this.isDisplayMode || this.isDesignMode)
             return;
         var questions = this.getAllQuestions();
-        questions.forEach(function (q) { return q.runTriggers(name, value); });
+        questions.forEach(function (q) {
+            q.runTriggers(name, value, _this.questionTriggersKeys);
+        });
     };
     SurveyModel.prototype.checkIfNewPagesBecomeVisible = function (oldCurrentPageIndex) {
         var newCurrentPageIndex = this.pages.indexOf(this.currentPage);
@@ -47785,10 +47879,29 @@ 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 {
+                    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.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
@@ -48618,6 +48731,12 @@ 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, "responsiveStartWidth", void 0);
     survey_decorate([
         propertyArray()
     ], SurveyModel.prototype, "layoutElements", void 0);
@@ -48993,7 +49112,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");
@@ -49024,6 +49142,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 = {
@@ -49044,16 +49182,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 = "";
     };
@@ -51220,22 +51348,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) {
@@ -52409,7 +52521,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;
@@ -52419,7 +52530,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();
@@ -52429,6 +52539,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", {
@@ -52479,11 +52591,8 @@ var dropdownListModel_DropdownListModel = /** @class */ (function (_super) {
         var _this = this;
         var isUpdate = (this.itemsSettings.skip + 1) < this.itemsSettings.totalCount;
         if (!this.itemsSettings.skip || isUpdate) {
+            this.resetTimer();
             if (!!this.filterString && settings.dropdownSearchDelay > 0) {
-                if (!!this.timer) {
-                    clearTimeout(this.timer);
-                    this.timer = undefined;
-                }
                 this.timer = setTimeout(function () {
                     _this.loadQuestionChoices(callbackAfterItemsLoaded);
                 }, settings.dropdownSearchDelay);
@@ -52493,6 +52602,12 @@ var dropdownListModel_DropdownListModel = /** @class */ (function (_super) {
             }
         }
     };
+    DropdownListModel.prototype.resetTimer = function () {
+        if (!!this.timer) {
+            clearTimeout(this.timer);
+            this.timer = undefined;
+        }
+    };
     DropdownListModel.prototype.updatePopupFocusFirstInputSelector = function () {
         this._popupModel.focusFirstInputSelector = this.focusFirstInputSelector;
     };
@@ -52528,7 +52643,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;
@@ -52642,8 +52756,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 () {
@@ -53121,6 +53236,7 @@ var question_dropdown_decorate = (undefined && undefined.__decorate) || function
 
 
 
+
 /**
  * A class that describes the Dropdown question type.
  *
@@ -53133,6 +53249,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 () {
@@ -53357,6 +53474,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;
@@ -53394,9 +53524,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;
@@ -53409,8 +53544,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
@@ -53420,7 +53554,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) {
@@ -53446,7 +53580,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();
         }
     };
@@ -53460,7 +53594,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);
@@ -53481,19 +53615,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([
@@ -53502,7 +53635,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);
                 }
             }
@@ -53523,7 +53656,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);
                 }
             }
@@ -54617,37 +54750,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;
@@ -54687,7 +54809,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));
@@ -54894,7 +55016,7 @@ var question_text_QuestionTextModel = /** @class */ (function (_super) {
         });
         _this.registerPropertyChangedHandlers(["inputType", "size"], function () {
             _this.updateInputSize();
-            _this.calcRenderedPlaceholder();
+            _this.resetRenderedPlaceholder();
         });
         return _this;
     }
@@ -58307,7 +58429,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;
@@ -58341,6 +58462,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();
@@ -58374,7 +58496,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;
@@ -58539,6 +58660,7 @@ var question_tagbox_decorate = (undefined && undefined.__decorate) || function (
 
 
 
+
 /**
  * A class that describes the Multi-Select Dropdown (Tag Box) question type.
  *
@@ -58550,6 +58672,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);
@@ -58564,7 +58687,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;
@@ -58572,19 +58695,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.
@@ -58651,8 +58774,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
@@ -58668,6 +58790,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 });
     };
@@ -58688,7 +58821,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();
         }
     };
@@ -58736,13 +58869,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 () {
@@ -58755,14 +58886,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 () {
@@ -58788,7 +58920,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);
                 }
             }
@@ -58797,7 +58929,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);
                 }
             }
@@ -58806,7 +58938,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);
                 }
             }
@@ -60176,10 +60308,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;
@@ -60349,6 +60489,12 @@ var question_comment_QuestionCommentModel = /** @class */ (function (_super) {
         _super.prototype.setNewValue.call(this, newValue);
     };
     QuestionCommentModel.prototype.getValueSeparator = function () { return "\n"; };
+    QuestionCommentModel.prototype.notifyStateChanged = function (prevState) {
+        _super.prototype.notifyStateChanged.call(this, prevState);
+        if (!this.isCollapsed) {
+            this.textAreaModel.updateElement();
+        }
+    };
     Object.defineProperty(QuestionCommentModel.prototype, "className", {
         get: function () {
             return (this.cssClasses ? this.getControlClass() : "panel-comment-root") || undefined;
@@ -61386,7 +61532,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");
@@ -61601,9 +61747,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
@@ -62267,7 +62416,7 @@ var question_radiogroup_QuestionRadiogroupModel = /** @class */ (function (_supe
         var actions = [];
         if (this.isDefaultV2Theme && !this.isDesignMode) {
             var clearAction = new action_Action({
-                title: this.clearButtonCaption,
+                locTitleName: "clearCaption",
                 id: "sv-clr-btn-" + this.id,
                 action: function () { _this.clearValue(true); },
                 innerCss: this.cssClasses.clearButton,
@@ -63229,7 +63378,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 () {
@@ -63247,6 +63397,7 @@ var question_rating_QuestionRatingModel = /** @class */ (function (_super) {
         },
         set: function (val) {
             this.dropdownListModelValue = val;
+            this.ariaExpanded = !!val ? "false" : undefined;
             this.updateElementCss();
         },
         enumerable: false,
@@ -63259,17 +63410,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;
     };
@@ -63289,6 +63435,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;
@@ -66514,7 +66661,7 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         /**
          * A placeholder for tab titles that applies when the [`templateTabTitle`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#templateTabTitle) expression doesn't produce a meaningful value.
          *
-         * Default value: `"New Panel"` (taken from a [localization dictionary](https://github.com/surveyjs/survey-library/tree/master/src/localization))
+         * Default value: `"New Panel"` (taken from a [localization dictionary](https://github.com/surveyjs/survey-library/tree/01bd8abd0c574719956d4d579d48c8010cd389d4/packages/survey-core/src/localization))
          */
         get: function () {
             return this.locTabTitlePlaceholder.text;
@@ -66942,7 +67089,7 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         /**
          * An error message displayed when users enter a duplicate value into a question that accepts only unique values (`isUnique` is set to `true` or `keyName` is specified).
          *
-         * A default value for this property is taken from a [localization dictionary](https://github.com/surveyjs/survey-library/tree/master/src/localization). Refer to the following help topic for more information: [Localization & Globalization](https://surveyjs.io/form-library/documentation/localization).
+         * A default value for this property is taken from a [localization dictionary](https://github.com/surveyjs/survey-library/tree/01bd8abd0c574719956d4d579d48c8010cd389d4/packages/survey-core/src/localization). Refer to the following help topic for more information: [Localization & Globalization](https://surveyjs.io/form-library/documentation/localization).
          * @see keyName
          */
         get: function () {
@@ -68147,8 +68294,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++) {
@@ -68165,10 +68312,10 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         _super.prototype.runCondition.call(this, values, properties);
         this.runPanelsCondition(this.panelsCore, values, properties);
     };
-    QuestionPanelDynamicModel.prototype.runTriggers = function (name, value) {
-        _super.prototype.runTriggers.call(this, name, value);
+    QuestionPanelDynamicModel.prototype.runTriggers = function (name, value, keys) {
+        _super.prototype.runTriggers.call(this, name, value, keys);
         this.visiblePanelsCore.forEach(function (p) {
-            p.questions.forEach(function (q) { return q.runTriggers(name, value); });
+            p.questions.forEach(function (q) { return q.runTriggers(name, value, keys); });
         });
     };
     QuestionPanelDynamicModel.prototype.reRunCondition = function () {
@@ -68435,12 +68582,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);
         };
@@ -68536,7 +68685,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();
         }
@@ -70614,7 +70763,7 @@ var mask_base_InputMaskBase = /** @class */ (function (_super) {
         var properties = Serializer.getProperties(this.getType());
         properties.forEach(function (property) {
             var currentValue = json[property.name];
-            _this[property.name] = currentValue !== undefined ? currentValue : property.defaultValue;
+            _this[property.name] = currentValue !== undefined ? currentValue : property.getDefaultValue(_this);
         });
     };
     InputMaskBase.prototype.getData = function () {
@@ -71995,8 +72144,8 @@ Serializer.addClass("currencymask", [
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.12.12";
-ReleaseDate = "" + "2024-11-26";
+Version = "" + "1.12.14";
+ReleaseDate = "" + "2024-12-09";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -83451,7 +83600,7 @@ var title_element_TitleElement = /** @class */ (function (_super) {
         if (!this.element.getCssTitleExpandableSvg())
             return null;
         var iconName = this.element.isExpanded ? "icon-collapse-16x16" : "icon-expand-16x16";
-        return external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(svg_icon_SvgIcon, { className: this.element.getCssTitleExpandableSvg(), iconName: iconName, size: 16 });
+        return external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(svg_icon_SvgIcon, { className: this.element.getCssTitleExpandableSvg(), iconName: iconName, size: "auto" });
     };
     TitleElement.prototype.render = function () {
         var element = this.element;
@@ -83563,6 +83712,7 @@ var text_area_TextAreaComponent = /** @class */ (function (_super) {
     function TextAreaComponent(props) {
         var _this = _super.call(this, props) || this;
         _this.initialValue = _this.viewModel.getTextValue() || "";
+        _this.textareaRef = external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createRef();
         return _this;
     }
     Object.defineProperty(TextAreaComponent.prototype, "viewModel", {
@@ -83575,9 +83725,20 @@ var text_area_TextAreaComponent = /** @class */ (function (_super) {
     TextAreaComponent.prototype.canRender = function () {
         return !!this.viewModel.question;
     };
+    TextAreaComponent.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        var el = this.textareaRef.current;
+        if (!!el) {
+            this.viewModel.setElement(el);
+        }
+    };
+    TextAreaComponent.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        this.viewModel.resetElement();
+    };
     TextAreaComponent.prototype.renderElement = function () {
         var _this = this;
-        return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("textarea", { id: this.viewModel.id, className: this.viewModel.className, ref: function (textarea) { return (_this.viewModel.setElement(textarea)); }, disabled: this.viewModel.isDisabledAttr, readOnly: this.viewModel.isReadOnlyAttr, rows: this.viewModel.rows, cols: this.viewModel.cols, placeholder: this.viewModel.placeholder, maxLength: this.viewModel.maxLength, defaultValue: this.initialValue, onChange: function (event) { _this.viewModel.onTextAreaInput(event); }, onFocus: function (event) { _this.viewModel.onTextAreaFocus(event); }, onBlur: function (event) { _this.viewModel.onTextAreaBlur(event); }, onKeyDown: function (event) { _this.viewModel.onTextAreaKeyDown(event); }, "aria-required": this.viewModel.ariaRequired, "aria-label": this.viewModel.ariaLabel, "aria-labelledby": this.viewModel.ariaLabelledBy, "aria-describedby": this.viewModel.ariaDescribedBy, "aria-invalid": this.viewModel.ariaInvalid, "aria-errormessage": this.viewModel.ariaErrormessage, style: { resize: this.viewModel.question.resizeStyle } }));
+        return (external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("textarea", { id: this.viewModel.id, className: this.viewModel.className, ref: this.textareaRef, disabled: this.viewModel.isDisabledAttr, readOnly: this.viewModel.isReadOnlyAttr, rows: this.viewModel.rows, cols: this.viewModel.cols, placeholder: this.viewModel.placeholder, maxLength: this.viewModel.maxLength, defaultValue: this.initialValue, onChange: function (event) { _this.viewModel.onTextAreaInput(event); }, onFocus: function (event) { _this.viewModel.onTextAreaFocus(event); }, onBlur: function (event) { _this.viewModel.onTextAreaBlur(event); }, onKeyDown: function (event) { _this.viewModel.onTextAreaKeyDown(event); }, "aria-required": this.viewModel.ariaRequired, "aria-label": this.viewModel.ariaLabel, "aria-labelledby": this.viewModel.ariaLabelledBy, "aria-describedby": this.viewModel.ariaDescribedBy, "aria-invalid": this.viewModel.ariaInvalid, "aria-errormessage": this.viewModel.ariaErrormessage, style: { resize: this.viewModel.question.resizeStyle } }));
     };
     return TextAreaComponent;
 }(reactquestion_element_SurveyElementBase));
@@ -90377,7 +90538,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);