survey-react 1.12.13 → 1.12.14

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.12.13
+ * 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)
  */
@@ -3053,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);
+                        }
                     }
                 },
             });
@@ -10370,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;
@@ -10379,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;
@@ -11699,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",
@@ -11758,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)
@@ -11791,6 +11802,7 @@ var list_ListModel = /** @class */ (function (_super) {
                         _this[key] = options_1[key];
                 }
             });
+            _this.updateActionsIds();
         }
         else {
             _this.setItems(items);
@@ -11847,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) {
@@ -11874,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;
@@ -11924,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
@@ -11978,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) {
@@ -12047,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) {
@@ -12403,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++; };
@@ -12658,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);
@@ -14262,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();
         }
@@ -14405,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.
@@ -14474,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))
@@ -14569,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 () {
@@ -14864,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);
@@ -14882,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;
@@ -16393,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 = "";
@@ -18866,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; });
@@ -18894,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();
@@ -18909,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";
     };
@@ -18973,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) {
@@ -19460,7 +19521,6 @@ var question_Question = /** @class */ (function (_super) {
         if (isLight !== true) {
             this.runConditions();
         }
-        this.calcRenderedCommentPlaceholder();
         if (!this.visible) {
             this.updateIsVisibleProp();
         }
@@ -19478,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,
@@ -19806,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();
@@ -19841,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();
         }
@@ -20170,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 ||
@@ -20224,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)
@@ -20531,7 +20598,7 @@ var question_Question = /** @class */ (function (_super) {
             this.clearErrors();
         }
         this.updateQuestionCss();
-        this.calcRenderedCommentPlaceholder();
+        this.resetRenderedCommentPlaceholder();
     };
     Object.defineProperty(Question.prototype, "enableIf", {
         /**
@@ -20622,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();
@@ -20850,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", {
@@ -22142,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()
@@ -24842,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);
@@ -26328,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 },
@@ -28037,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++;
@@ -30325,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;
@@ -30336,6 +30405,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);
@@ -36435,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;
@@ -36492,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)
@@ -36511,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 () {
@@ -37525,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)
@@ -37976,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;
@@ -38319,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);
@@ -38350,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;
     }
@@ -38371,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;
@@ -38603,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);
@@ -38611,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";
     };
@@ -39262,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.
@@ -45499,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) {
@@ -47812,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
@@ -48645,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);
@@ -49020,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");
@@ -49051,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 = {
@@ -49071,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 = "";
     };
@@ -51247,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) {
@@ -52436,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;
@@ -52446,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();
@@ -52456,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", {
@@ -52558,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;
@@ -52672,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 () {
@@ -53151,6 +53236,7 @@ var question_dropdown_decorate = (undefined && undefined.__decorate) || function
 
 
 
+
 /**
  * A class that describes the Dropdown question type.
  *
@@ -53163,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 () {
@@ -53387,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;
@@ -53424,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;
@@ -53439,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
@@ -53450,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) {
@@ -53476,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();
         }
     };
@@ -53490,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);
@@ -53511,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([
@@ -53532,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);
                 }
             }
@@ -53553,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);
                 }
             }
@@ -54647,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;
@@ -54717,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));
@@ -54924,7 +55016,7 @@ var question_text_QuestionTextModel = /** @class */ (function (_super) {
         });
         _this.registerPropertyChangedHandlers(["inputType", "size"], function () {
             _this.updateInputSize();
-            _this.calcRenderedPlaceholder();
+            _this.resetRenderedPlaceholder();
         });
         return _this;
     }
@@ -58337,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;
@@ -58371,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();
@@ -58404,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;
@@ -58569,6 +58660,7 @@ var question_tagbox_decorate = (undefined && undefined.__decorate) || function (
 
 
 
+
 /**
  * A class that describes the Multi-Select Dropdown (Tag Box) question type.
  *
@@ -58580,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);
@@ -58594,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;
@@ -58602,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.
@@ -58681,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
@@ -58698,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 });
     };
@@ -58718,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();
         }
     };
@@ -58766,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 () {
@@ -58785,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 () {
@@ -58818,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);
                 }
             }
@@ -58827,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);
                 }
             }
@@ -58836,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);
                 }
             }
@@ -60206,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;
@@ -61422,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");
@@ -61637,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
@@ -63265,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 () {
@@ -63283,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,
@@ -63295,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;
     };
@@ -63325,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;
@@ -68183,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++) {
@@ -68471,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);
         };
@@ -68572,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();
         }
@@ -72031,8 +72144,8 @@ Serializer.addClass("currencymask", [
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.12.13";
-ReleaseDate = "" + "2024-12-04";
+Version = "" + "1.12.14";
+ReleaseDate = "" + "2024-12-09";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -90425,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);