survey-core 1.9.120 → 1.9.122

package/survey.core.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.120
+ * surveyjs - Survey JavaScript library v1.9.122
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1326,8 +1326,8 @@ var AdaptiveActionContainer = /** @class */ (function (_super) {
             this.updateItemMode(dimension, maxSize);
         }
     };
-    AdaptiveActionContainer.prototype.initResponsivityManager = function (container) {
-        this.responsivityManager = new _utils_responsivity_manager__WEBPACK_IMPORTED_MODULE_0__["ResponsivityManager"](container, this, ":scope > .sv-action:not(.sv-dots) > .sv-action__content");
+    AdaptiveActionContainer.prototype.initResponsivityManager = function (container, delayedUpdateFunction) {
+        this.responsivityManager = new _utils_responsivity_manager__WEBPACK_IMPORTED_MODULE_0__["ResponsivityManager"](container, this, ":scope > .sv-action:not(.sv-dots) > .sv-action__content", null, delayedUpdateFunction);
     };
     AdaptiveActionContainer.prototype.resetResponsivityManager = function () {
         if (!!this.responsivityManager) {
@@ -1539,7 +1539,7 @@ var ActionContainer = /** @class */ (function (_super) {
             this.sortItems();
         }
     };
-    ActionContainer.prototype.initResponsivityManager = function (container) {
+    ActionContainer.prototype.initResponsivityManager = function (container, delayedUpdateFunction) {
         return;
     };
     ActionContainer.prototype.resetResponsivityManager = function () { };
@@ -1891,7 +1891,7 @@ var Base = /** @class */ (function () {
      * Returns `true` if a passed `value` is an empty string, array, or object or if it equals to `undefined` or `null`.
      *
      * @param value A value to be checked.
-     * @param trimString (Optional) When this parameter is `true`, the method ignores whitespace characters at the beginning and end of a string value. Pass `false` to disable this functionality.
+     * @param trimString *(Optional)* When this parameter is `true`, the method ignores whitespace characters at the beginning and end of a string value. Pass `false` to disable this functionality.
      */
     Base.prototype.isValueEmpty = function (value, trimString) {
         if (trimString === void 0) { trimString = true; }
@@ -2098,7 +2098,7 @@ var Base = /** @class */ (function () {
      * If the property is not found or does not have a value, this method returns either `undefined`, `defaultValue` specified in the property configuration, or a value passed as the `defaultValue` parameter.
      *
      * @param name A property name.
-     * @param defaultValue (Optional) A value to return if the property is not found or does not have a value.
+     * @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; }
@@ -2369,7 +2369,7 @@ var Base = /** @class */ (function () {
      * Registers a function to call when a property value changes.
      * @param propertyNames An array of one or multiple property names.
      * @param handler A function to call when one of the listed properties change.
-     * @param key (Optional) A key that identifies the current registration. If a function for one of the properties is already registered with the same key, the function will be overwritten. You can also use the key to subsequently unregister handlers.
+     * @param key *(Optional)* A key that identifies the current registration. If a function for one of the properties is already registered with the same key, the function will be overwritten. You can also use the key to subsequently unregister handlers.
      * @see unregisterPropertyChangedHandlers
      */
     Base.prototype.registerPropertyChangedHandlers = function (propertyNames, handler, key) {
@@ -2381,7 +2381,7 @@ var Base = /** @class */ (function () {
     /**
      * Unregisters value change event handlers for the specified properties.
      * @param propertyNames An array of one or multiple property names.
-     * @param key (Optional) A key of the registration that you want to cancel.
+     * @param key *(Optional)* A key of the registration that you want to cancel.
      * @see registerPropertyChangedHandlers
      */
     Base.prototype.unregisterPropertyChangedHandlers = function (propertyNames, key) {
@@ -5821,6 +5821,9 @@ var defaultV2Css = {
         rootDropdown: "sd-scrollable-container sd-scrollable-container--compact sd-selectbase",
         root: "sd-scrollable-container sd-rating",
         rootWrappable: "sd-scrollable-container sd-rating sd-rating--wrappable",
+        rootLabelsTop: "sd-rating--labels-top",
+        rootLabelsBottom: "sd-rating--labels-bottom",
+        rootLabelsDiagonal: "sd-rating--labels-diagonal",
         item: "sd-rating__item",
         itemOnError: "sd-rating__item--error",
         itemHover: "sd-rating__item--allowhover",
@@ -8488,7 +8491,7 @@ var DropdownMultiSelectListModel = /** @class */ (function (_super) {
         if (!_onSelectionChanged) {
             _onSelectionChanged = function (item, status) {
                 _this.resetFilterString();
-                if (item.value === "selectall") {
+                if (item.id === "selectall") {
                     _this.selectAllItems();
                 }
                 else if (status === "added" && item.value === _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].noneItemValue) {
@@ -9312,8 +9315,8 @@ __webpack_require__.r(__webpack_exports__);
 //import "../../modern.scss";
 var Version;
 var ReleaseDate;
-Version = "" + "1.9.120";
-ReleaseDate = "" + "2023-12-04";
+Version = "" + "1.9.122";
+ReleaseDate = "" + "2023-12-19";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -15370,7 +15373,7 @@ var Cover = /** @class */ (function (_super) {
     Cover.prototype.updateHeaderClasses = function () {
         this.headerClasses = new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_2__["CssClassBuilder"]()
             .append("sv-header")
-            .append("sv-header__without-background", (this.backgroundColor === "trasparent") && !this.backgroundImage)
+            .append("sv-header__without-background", (this.backgroundColor === "transparent") && !this.backgroundImage)
             .append("sv-header__overlap", this.overlapEnabled)
             .toString();
     };
@@ -15489,6 +15492,13 @@ var Cover = /** @class */ (function (_super) {
             this.actualHeight = this.calculateActualHeight(logoHeight, titleHeight, descriptionHeight);
         }
     };
+    Object.defineProperty(Cover.prototype, "hasBackground", {
+        get: function () {
+            return !!this.backgroundImage || this.backgroundColor !== "transparent";
+        },
+        enumerable: false,
+        configurable: true
+    });
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: 0 })
     ], Cover.prototype, "actualHeight", void 0);
@@ -22758,11 +22768,22 @@ var PanelModelBase = /** @class */ (function (_super) {
             }
         }
     };
-    PanelModelBase.prototype.notifyStateChanged = function () {
-        _super.prototype.notifyStateChanged.call(this);
+    PanelModelBase.prototype.notifyStateChanged = function (prevState) {
+        var _this = this;
+        _super.prototype.notifyStateChanged.call(this, prevState);
         if (this.isCollapsed) {
             this.questions.forEach(function (q) { return q.onHidingContent(); });
         }
+        if (this.survey != null && !this.isLoadingFromJson && this.isExpanded && prevState === "collapsed") {
+            var q_1 = this.getFirstQuestionToFocus(false);
+            if (!!q_1) {
+                setTimeout(function () {
+                    if (!_this.isDisposed && !!_this.survey) {
+                        _this.survey.scrollElementToTop(q_1, q_1, null, q_1.inputId, false);
+                    }
+                }, 15);
+            }
+        }
     };
     Object.defineProperty(PanelModelBase.prototype, "isVisible", {
         /**
@@ -23276,11 +23297,11 @@ var PanelModel = /** @class */ (function (_super) {
     PanelModel.prototype.setNo = function (visibleIndex) {
         this.setPropertyValue("no", _helpers__WEBPACK_IMPORTED_MODULE_1__["Helpers"].getNumberByIndex(this.visibleIndex, this.getStartIndex()));
     };
-    PanelModel.prototype.notifyStateChanged = function () {
+    PanelModel.prototype.notifyStateChanged = function (prevState) {
         if (!this.isLoadingFromJson) {
             this.locTitle.strChanged();
         }
-        _super.prototype.notifyStateChanged.call(this);
+        _super.prototype.notifyStateChanged.call(this, prevState);
     };
     PanelModel.prototype.createLocTitleProperty = function () {
         var _this = this;
@@ -23659,7 +23680,7 @@ var PopupDropdownViewModel = /** @class */ (function (_super) {
         };
         _this.resizeWindowCallback = function () {
             if (!_this.isOverlay) {
-                _this.updatePosition(true, _survey__WEBPACK_IMPORTED_MODULE_5__["SurveyModel"].platform === "vue" || _survey__WEBPACK_IMPORTED_MODULE_5__["SurveyModel"].platform === "vue3");
+                _this.updatePosition(true, _survey__WEBPACK_IMPORTED_MODULE_5__["SurveyModel"].platform === "vue" || _survey__WEBPACK_IMPORTED_MODULE_5__["SurveyModel"].platform === "vue3" || _survey__WEBPACK_IMPORTED_MODULE_5__["SurveyModel"].platform == "react");
             }
         };
         _this.clientY = 0;
@@ -25310,8 +25331,8 @@ var Question = /** @class */ (function (_super) {
             this.errors = [];
         }
     };
-    Question.prototype.notifyStateChanged = function () {
-        _super.prototype.notifyStateChanged.call(this);
+    Question.prototype.notifyStateChanged = function (prevState) {
+        _super.prototype.notifyStateChanged.call(this, prevState);
         if (this.isCollapsed) {
             this.onHidingContent();
         }
@@ -26811,9 +26832,9 @@ var Question = /** @class */ (function (_super) {
             return false;
         if (!!this.page && this.page.isStartPage)
             return false;
-        if (!this.survey || !this.valueName)
+        if (!this.survey)
             return true;
-        return !this.survey.hasVisibleQuestionByValueName(this.valueName);
+        return !this.survey.hasVisibleQuestionByValueName(this.getValueName());
     };
     Object.defineProperty(Question.prototype, "isParentVisible", {
         /**
@@ -30437,21 +30458,6 @@ var QuestionCheckboxBase = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    QuestionCheckboxBase.prototype.clickItemHandler = function (item, checked) {
-        var newValue = [].concat(this.renderedValue || []);
-        var index = newValue.indexOf(item.value);
-        if (checked) {
-            if (index < 0) {
-                newValue.push(item.value);
-            }
-        }
-        else {
-            if (index > -1) {
-                newValue.splice(index, 1);
-            }
-        }
-        this.renderedValue = newValue;
-    };
     QuestionCheckboxBase.prototype.onParentChanged = function () {
         _super.prototype.onParentChanged.call(this);
         if (this.isFlowLayout) {
@@ -31285,9 +31291,10 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
     __extends(QuestionCheckboxModel, _super);
     function QuestionCheckboxModel(name) {
         var _this = _super.call(this, name) || this;
-        _this.selectAllItemValue = new _itemvalue__WEBPACK_IMPORTED_MODULE_4__["ItemValue"]("selectall");
         _this.invisibleOldValues = {};
         _this.isChangingValueOnClearIncorrect = false;
+        _this.selectAllItemValue = new _itemvalue__WEBPACK_IMPORTED_MODULE_4__["ItemValue"]("");
+        _this.selectAllItemValue.id = "selectall";
         var selectAllItemText = _this.createLocalizableString("selectAllText", _this.selectAllItem, true, "selectAllItemText");
         _this.selectAllItem.locOwner = _this;
         _this.selectAllItem.setLocText(selectAllItemText);
@@ -31397,23 +31404,25 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
          * @see showSelectAllItem
          */
         get: function () {
+            if (this.isItemSelected(this.noneItem))
+                return false;
+            var items = this.getVisibleEnableItems();
+            if (items.length === 0)
+                return false;
             var val = this.value;
-            if (!val || !Array.isArray(val))
+            if (!val || !Array.isArray(val) || val.length === 0)
                 return false;
-            if (this.isItemSelected(this.noneItem))
+            if (val.length < items.length)
                 return false;
-            var allItemCount = this.visibleChoices.length;
-            var order = _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].specialChoicesOrder;
-            if (this.hasOther)
-                allItemCount -= order.otherItem.length;
-            if (this.hasNone)
-                allItemCount -= order.noneItem.length;
-            if (this.hasSelectAll)
-                allItemCount -= order.selectAllItem.length;
-            var selectedCount = val.length;
-            if (this.isOtherSelected)
-                selectedCount--;
-            return selectedCount === allItemCount;
+            var rVal = [];
+            for (var i = 0; i < val.length; i++) {
+                rVal.push(this.getRealValue(val[i]));
+            }
+            for (var i = 0; i < items.length; i++) {
+                if (rVal.indexOf(items[i].value) < 0)
+                    return false;
+            }
+            return true;
         },
         set: function (val) {
             if (val) {
@@ -31437,16 +31446,37 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
      */
     QuestionCheckboxModel.prototype.selectAll = function () {
         var val = [];
-        for (var i = 0; i < this.visibleChoices.length; i++) {
-            var item = this.visibleChoices[i];
-            if (item === this.noneItem ||
-                item === this.otherItem ||
-                item === this.selectAllItem)
-                continue;
-            val.push(item.value);
+        var items = this.getVisibleEnableItems();
+        for (var i = 0; i < items.length; i++) {
+            val.push(items[i].value);
         }
         this.renderedValue = val;
     };
+    QuestionCheckboxModel.prototype.clickItemHandler = function (item, checked) {
+        if (item === this.selectAllItem) {
+            if (checked === true || checked === false) {
+                this.isAllSelected = checked;
+            }
+            else {
+                this.toggleSelectAll();
+            }
+        }
+        else {
+            var newValue = [].concat(this.renderedValue || []);
+            var index = newValue.indexOf(item.value);
+            if (checked) {
+                if (index < 0) {
+                    newValue.push(item.value);
+                }
+            }
+            else {
+                if (index > -1) {
+                    newValue.splice(index, 1);
+                }
+            }
+            this.renderedValue = newValue;
+        }
+    };
     QuestionCheckboxModel.prototype.isItemSelectedCore = function (item) {
         if (item === this.selectAllItem)
             return this.isAllSelected;
@@ -31572,24 +31602,51 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
             errors.push(minError);
         }
     };
+    QuestionCheckboxModel.prototype.onVisibleChoicesChanged = function () {
+        _super.prototype.onVisibleChoicesChanged.call(this);
+        this.updateSelectAllItemProps();
+    };
     QuestionCheckboxModel.prototype.onEnableItemCallBack = function (item) {
         if (!this.shouldCheckMaxSelectedChoices())
             return true;
         return this.isItemSelected(item);
     };
     QuestionCheckboxModel.prototype.onAfterRunItemsEnableCondition = function () {
+        this.updateSelectAllItemProps();
         if (this.maxSelectedChoices < 1) {
-            this.selectAllItem.setIsEnabled(true);
             this.otherItem.setIsEnabled(true);
             return;
         }
-        if (this.hasSelectAll) {
-            this.selectAllItem.setIsEnabled(this.maxSelectedChoices >= this.activeChoices.length);
-        }
         if (this.hasOther) {
             this.otherItem.setIsEnabled(!this.shouldCheckMaxSelectedChoices() || this.isOtherSelected);
         }
     };
+    QuestionCheckboxModel.prototype.updateSelectAllItemProps = function () {
+        if (!this.hasSelectAll)
+            return;
+        this.selectAllItem.setIsEnabled(this.getSelectAllEnabled());
+    };
+    QuestionCheckboxModel.prototype.getSelectAllEnabled = function () {
+        if (!this.hasSelectAll)
+            return true;
+        var items = this.activeChoices;
+        var visCount = this.getVisibleEnableItems().length;
+        var max = this.maxSelectedChoices;
+        if (max > 0 && max < visCount)
+            return false;
+        return visCount > 0;
+    };
+    QuestionCheckboxModel.prototype.getVisibleEnableItems = function () {
+        var res = new Array();
+        var items = this.activeChoices;
+        for (var i = 0; i < items.length; i++) {
+            var item = items[i];
+            if (item.isEnabled && item.isVisible) {
+                res.push(item);
+            }
+        }
+        return res;
+    };
     QuestionCheckboxModel.prototype.shouldCheckMaxSelectedChoices = function () {
         if (this.maxSelectedChoices < 1)
             return false;
@@ -32414,6 +32471,22 @@ var QuestionCustomModelBase = /** @class */ (function (_super) {
             this.getElement().locStrsChanged();
         }
     };
+    QuestionCustomModelBase.prototype.localeChanged = function () {
+        _super.prototype.locStrsChanged.call(this);
+        if (!!this.getElement()) {
+            this.getElement().localeChanged();
+        }
+    };
+    QuestionCustomModelBase.prototype.addUsedLocales = function (locales) {
+        _super.prototype.addUsedLocales.call(this, locales);
+        if (!!this.getElement()) {
+            this.getElement().addUsedLocales(locales);
+        }
+    };
+    QuestionCustomModelBase.prototype.needResponsiveWidth = function () {
+        var el = this.getElement();
+        return !!el ? el.needResponsiveWidth() : false;
+    };
     QuestionCustomModelBase.prototype.createWrapper = function () { };
     QuestionCustomModelBase.prototype.onPropertyValueChanged = function (name, oldValue, newValue) {
         _super.prototype.onPropertyValueChanged.call(this, name, oldValue, newValue);
@@ -33498,7 +33571,7 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
     };
     QuestionDropdownModel.prototype.onVisibleChoicesChanged = function () {
         _super.prototype.onVisibleChoicesChanged.call(this);
-        if (this.popupModel) {
+        if (!this.isLoadingFromJson && this.popupModel) {
             this.dropdownListModel.updateItems();
         }
     };
@@ -34246,6 +34319,9 @@ function dataUrl2File(dataUrl, fileName, type) {
     var buffer = new Uint8Array(str.split("").map(function (c) { return c.charCodeAt(0); })).buffer;
     return new File([buffer], fileName, { type: type });
 }
+/**
+ * A base class for question types that support file upload: `QuestionFileModel` and `QuestionSignaturePadModel`.
+ */
 var QuestionFileModelBase = /** @class */ (function (_super) {
     __extends(QuestionFileModelBase, _super);
     function QuestionFileModelBase() {
@@ -36331,10 +36407,8 @@ var QuestionImagePickerModel = /** @class */ (function (_super) {
          *
          * Possible values:
          *
-         * - `"image"` - Images in one of the following formats: JPEG, GIF, PNG, APNG, SVG, BMP, ICO.
+         * - `"image"` (default) - Images in one of the following formats: JPEG, GIF, PNG, APNG, SVG, BMP, ICO.
          * - `"video"` - Videos in one of the following formats: MP4, MOV, WMV, FLV, AVI, MKV.
-         * - `"youtube"` - Links to YouTube videos.
-         * - `"auto"` (default) - Selects one of the above based on the `imageLink` property value of each choice item.
          */
         get: function () {
             return this.getPropertyValue("contentMode");
@@ -43993,7 +44067,8 @@ var QuestionMultipleTextModel = /** @class */ (function (_super) {
          * }
          * ```
          *
-         * To enable Markdown support for the `title` property, implement Markdown-to-HTML conversion in the [onTextMarkdown](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onTextMarkdown) event handler. For an example, refer to the following demo: [Convert Markdown to HTML with Showdown](https://surveyjs.io/form-library/examples/edit-survey-questions-markdown/).
+         * To enable Markdown support for the `title` property, implement Markdown-to-HTML conversion in the [`onTextMarkdown`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onTextMarkdown) event handler. For an example, refer to the following demo: [Convert Markdown to HTML with Showdown](https://surveyjs.io/form-library/examples/edit-survey-questions-markdown/).
+         * @see itemTitleWidth
          * @see addItem
          */
         get: function () {
@@ -44007,8 +44082,8 @@ var QuestionMultipleTextModel = /** @class */ (function (_super) {
     });
     /**
      * Adds a new input item.
-     * @param name An item name
-     * @param title (Optional) An item title
+     * @param name An item name.
+     * @param title *(Optional)* An item title.
      * @see items
      */
     QuestionMultipleTextModel.prototype.addItem = function (name, title) {
@@ -44142,6 +44217,23 @@ var QuestionMultipleTextModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionMultipleTextModel.prototype, "itemTitleWidth", {
+        /**
+         * Specifies a uniform width for all text box titles. Accepts CSS values.
+         *
+         * Default value: `""` (the width of each title depends on the title length)
+         * @see items
+         * @see itemErrorLocation
+         */
+        get: function () {
+            return this.getPropertyValue("itemTitleWidth") || "";
+        },
+        set: function (val) {
+            this.setPropertyValue("itemTitleWidth", val);
+        },
+        enumerable: false,
+        configurable: true
+    });
     QuestionMultipleTextModel.prototype.onRowCreated = function (row) {
         return row;
     };
@@ -44496,7 +44588,8 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_4__["Serializer"].addClass("multipletext",
     { name: "!items:textitems", className: "multipletextitem", isArray: true },
     { name: "itemSize:number", minValue: 0 },
     { name: "colCount:number", default: 1, choices: [1, 2, 3, 4, 5] },
-    { name: "itemErrorLocation", default: "default", choices: ["default", "top", "bottom"], visible: false }
+    { name: "itemErrorLocation", default: "default", choices: ["default", "top", "bottom"], visible: false },
+    { name: "itemTitleWidth", category: "layout" }
 ], function () {
     return new QuestionMultipleTextModel("");
 }, "question");
@@ -45178,7 +45271,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             if (this.isRenderModeList || this.useTemplatePanel)
                 return;
             var curPanel = this.getPropertyValue("currentPanel");
-            if (!!val && this.visiblePanels.indexOf(val) < 0 || val === curPanel)
+            var index = !!val ? this.visiblePanels.indexOf(val) : -1;
+            if (!!val && index < 0 || val === curPanel)
                 return;
             if (curPanel) {
                 curPanel.onHidingContent();
@@ -45187,6 +45281,13 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             this.updateFooterActions();
             this.updateTabToolbarItemsPressedState();
             this.fireCallback(this.currentIndexChangedCallback);
+            if (index > -1 && this.survey) {
+                var options = {
+                    panel: val,
+                    visiblePanelIndex: index
+                };
+                this.survey.dynamicPanelCurrentIndexChanged(this, options);
+            }
         },
         enumerable: false,
         configurable: true
@@ -46018,48 +46119,59 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         return newPanel;
     };
     /**
-     * Add a new dynamic panel based on the template Panel.
-     * @see template
+     * Adds a new panel based on the [template](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#template).
+     * @param index *(Optional)* An index at which to insert the new panel. `undefined` adds the panel to the end or inserts it after the current panel if [`renderMode`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#renderMode) is `"tab"`. A negative index (for instance, -1) adds the panel to the end in all cases, regardless of the `renderMode` value.
      * @see panelCount
      * @see panels
-     * @see renderMode
      */
-    QuestionPanelDynamicModel.prototype.addPanel = function () {
-        this.panelCount++;
+    QuestionPanelDynamicModel.prototype.addPanel = function (index) {
+        var curIndex = this.currentIndex;
+        if (index === undefined) {
+            index = curIndex < 0 ? this.panelCount : curIndex + 1;
+        }
+        if (index < 0 || index > this.panelCount) {
+            index = this.panelCount;
+        }
+        this.updateValueOnAddingPanel(curIndex < 0 ? this.panelCount - 1 : curIndex, index);
         if (!this.isRenderModeList) {
-            this.currentIndex = this.panelCount - 1;
+            this.currentIndex = index;
         }
+        if (this.survey)
+            this.survey.dynamicPanelAdded(this);
+        return this.panels[index];
+    };
+    QuestionPanelDynamicModel.prototype.updateValueOnAddingPanel = function (prevIndex, index) {
+        this.panelCount++;
         var newValue = this.value;
+        if (!Array.isArray(newValue) || newValue.length !== this.panelCount)
+            return;
         var hasModified = false;
+        var lastIndex = this.panelCount - 1;
+        if (index < lastIndex) {
+            hasModified = true;
+            var rec = newValue[lastIndex];
+            newValue.splice(lastIndex, 1);
+            newValue.splice(index, 0, rec);
+        }
         if (!this.isValueEmpty(this.defaultPanelValue)) {
-            if (!!newValue &&
-                Array.isArray(newValue) &&
-                newValue.length == this.panelCount) {
-                hasModified = true;
-                this.copyValue(newValue[newValue.length - 1], this.defaultPanelValue);
-            }
-        }
-        if (this.defaultValueFromLastPanel &&
-            !!newValue &&
-            Array.isArray(newValue) &&
-            newValue.length > 1 &&
-            newValue.length == this.panelCount) {
             hasModified = true;
-            this.copyValue(newValue[newValue.length - 1], newValue[newValue.length - 2]);
+            this.copyValue(newValue[index], this.defaultPanelValue);
+        }
+        if (this.defaultValueFromLastPanel && newValue.length > 1) {
+            var fromIndex = prevIndex > -1 && prevIndex <= lastIndex ? prevIndex : lastIndex;
+            hasModified = true;
+            this.copyValue(newValue[index], newValue[fromIndex]);
         }
         if (hasModified) {
             this.value = newValue;
         }
-        if (this.survey)
-            this.survey.dynamicPanelAdded(this);
-        return this.panels[this.panelCount - 1];
     };
     QuestionPanelDynamicModel.prototype.canLeaveCurrentPanel = function () {
         return !(this.renderMode !== "list" && this.currentPanel && this.currentPanel.hasErrors(true, true));
     };
-    QuestionPanelDynamicModel.prototype.copyValue = function (src, dest) {
-        for (var key in dest) {
-            src[key] = dest[key];
+    QuestionPanelDynamicModel.prototype.copyValue = function (dest, src) {
+        for (var key in src) {
+            dest[key] = src[key];
         }
     };
     /**
@@ -48496,9 +48608,10 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     Object.defineProperty(QuestionRatingModel.prototype, "minRateDescription", {
         /**
          * Specifies a description for the minimum (first) rate value.
+         * @see rateDescriptionLocation
+         * @see displayRateDescriptionsAsExtremeItems
          * @see rateValues
          * @see rateMin
-         * @see displayRateDescriptionsAsExtremeItems
          */
         get: function () {
             return this.getLocalizableStringText("minRateDescription");
@@ -48520,9 +48633,10 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     Object.defineProperty(QuestionRatingModel.prototype, "maxRateDescription", {
         /**
          * Specifies a description for the maximum (last) rate value.
+         * @see rateDescriptionLocation
+         * @see displayRateDescriptionsAsExtremeItems
          * @see rateValues
          * @see rateMax
-         * @see displayRateDescriptionsAsExtremeItems
          */
         get: function () {
             return this.getLocalizableStringText("maxRateDescription");
@@ -48654,8 +48768,18 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         get: function () {
             var baseClass = ((this.displayMode == "buttons" || (!!this.survey && this.survey.isDesignMode)) && this.cssClasses.rootWrappable) ?
                 this.cssClasses.rootWrappable : this.cssClasses.root;
+            var rootClassModifier = "";
+            if (this.hasMaxLabel || this.hasMinLabel) {
+                if (this.rateDescriptionLocation == "top")
+                    rootClassModifier = this.cssClasses.rootLabelsTop;
+                if (this.rateDescriptionLocation == "bottom")
+                    rootClassModifier = this.cssClasses.rootLabelsBottom;
+                if (this.rateDescriptionLocation == "topBottom")
+                    rootClassModifier = this.cssClasses.rootLabelsDiagonal;
+            }
             return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_6__["CssClassBuilder"]()
                 .append(baseClass)
+                .append(rootClassModifier)
                 .append(this.cssClasses.itemSmall, this.itemSmallMode && this.rateType != "labels")
                 .toString();
         },
@@ -48984,6 +49108,9 @@ var QuestionRatingModel = /** @class */ (function (_super) {
             }
         })
     ], QuestionRatingModel.prototype, "displayMode", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
+    ], QuestionRatingModel.prototype, "rateDescriptionLocation", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
     ], QuestionRatingModel.prototype, "rateType", void 0);
@@ -49113,6 +49240,12 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("rating", [
             return obj.rateType == "labels";
         }
     },
+    {
+        name: "rateDescriptionLocation",
+        default: "leftRight",
+        category: "layout",
+        choices: ["leftRight", "top", "bottom", "topBottom"],
+    },
     {
         name: "displayMode",
         default: "auto",
@@ -49294,6 +49427,8 @@ var QuestionSignaturePadModel = /** @class */ (function (_super) {
         };
     };
     QuestionSignaturePadModel.prototype.refreshCanvas = function () {
+        if (!this.canvas)
+            return;
         if (!this.value) {
             this.canvas.getContext("2d").clearRect(0, 0, this.canvas.width * this.scale, this.canvas.height * this.scale);
             this.signaturePad.clear();
@@ -52657,9 +52792,15 @@ var SurveyElement = /** @class */ (function (_super) {
         if (!el || !el.scrollIntoView)
             return false;
         var elemTop = scrollIfVisible ? -1 : el.getBoundingClientRect().top;
-        if (elemTop < 0)
+        var needScroll = elemTop < 0;
+        if (!needScroll && !!window) {
+            var height = window.innerHeight;
+            needScroll = height > 0 && height < elemTop;
+        }
+        if (needScroll) {
             el.scrollIntoView();
-        return elemTop < 0;
+        }
+        return needScroll;
     };
     SurveyElement.GetFirstNonTextElement = function (elements, removeSpaces) {
         if (removeSpaces === void 0) { removeSpaces = false; }
@@ -52706,6 +52847,7 @@ var SurveyElement = /** @class */ (function (_super) {
         _super.prototype.onPropertyValueChanged.call(this, name, oldValue, newValue);
         if (name === "state") {
             this.updateElementCss(false);
+            this.notifyStateChanged(oldValue);
             if (this.stateChangedCallback)
                 this.stateChangedCallback();
         }
@@ -52761,12 +52903,11 @@ var SurveyElement = /** @class */ (function (_super) {
         },
         set: function (val) {
             this.setPropertyValue("state", val);
-            this.notifyStateChanged();
         },
         enumerable: false,
         configurable: true
     });
-    SurveyElement.prototype.notifyStateChanged = function () {
+    SurveyElement.prototype.notifyStateChanged = function (prevState) {
         if (this.survey) {
             this.survey.elementContentVisibilityChanged(this);
         }
@@ -54432,6 +54573,10 @@ var SurveyModel = /** @class */ (function (_super) {
          * [View Demo](https://surveyjs.io/form-library/examples/tabbed-interface-for-duplicate-group-option/ (linkStyle))
          */
         _this.onGetDynamicPanelTabTitle = _this.addEvent();
+        /**
+         * An event that is raised after the current panel is changed in a [Dynamic Panel](https://surveyjs.io/form-library/examples/questiontype-paneldynamic/) question.
+         */
+        _this.onDynamicPanelCurrentIndexChanged = _this.addEvent();
         /**
          * An event that is raised to define whether a question answer is correct. Applies only to [quiz surveys](https://surveyjs.io/form-library/documentation/design-survey/create-a-quiz).
          */
@@ -56865,7 +57010,7 @@ var SurveyModel = /** @class */ (function (_super) {
     /**
      * Merges a specified data object with the object from the [`data`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#data) property.
      *
-     * Refer to the following help topic for more information: [Merge Question Values](https://surveyjs.io/form-library/documentation/design-survey/merge-question-values).
+     * Refer to the following help topic for more information: [Populate Form Fields | Multiple Question Values](https://surveyjs.io/form-library/documentation/design-survey/pre-populate-form-fields#multiple-question-values).
      *
      * @param data A data object to merge. It should have the following structure: `{ questionName: questionValue, ... }`
      * @see setValue
@@ -58425,6 +58570,7 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     SurveyModel.prototype.setupPagesForPageModes = function (isSinglePage) {
         this.questionHashesClear();
+        this.isCreatingPagesForPreview = true;
         var startIndex = this.getPageStartIndex();
         _super.prototype.startLoadingFromJson.call(this);
         var newPages = this.createPagesForQuestionOnPageMode(isSinglePage, startIndex);
@@ -58439,6 +58585,7 @@ var SurveyModel = /** @class */ (function (_super) {
         }
         this.doElementsOnLoad();
         this.updateCurrentPage();
+        this.isCreatingPagesForPreview = false;
     };
     SurveyModel.prototype.createPagesForQuestionOnPageMode = function (isSinglePage, startIndex) {
         if (isSinglePage) {
@@ -59090,7 +59237,8 @@ var SurveyModel = /** @class */ (function (_super) {
     SurveyModel.prototype.afterRenderPage = function (htmlElement) {
         var _this = this;
         if (!this.isDesignMode && !this.focusingQuestionInfo) {
-            setTimeout(function () { return _this.scrollToTopOnPageChange(!_this.isFirstPageRendering); }, 1);
+            var doScroll_1 = !this.isFirstPageRendering;
+            setTimeout(function () { return _this.scrollToTopOnPageChange(doScroll_1); }, 1);
         }
         this.focusQuestionInfo();
         this.isFirstPageRendering = false;
@@ -59309,6 +59457,10 @@ var SurveyModel = /** @class */ (function (_super) {
         options.question = question;
         this.onGetDynamicPanelTabTitle.fire(this, options);
     };
+    SurveyModel.prototype.dynamicPanelCurrentIndexChanged = function (question, options) {
+        options.question = question;
+        this.onDynamicPanelCurrentIndexChanged.fire(this, options);
+    };
     SurveyModel.prototype.dragAndDropAllow = function (options) {
         this.onDragDropAllow.fire(this, options);
         return options.allow;
@@ -59392,13 +59544,8 @@ var SurveyModel = /** @class */ (function (_super) {
      *   question,
      *   question.name,
      *   question.value,
-     *   (status, data) => {
-     *     if (status === "success") {
-     *       // Handle success
-     *     }
-     *     if (status === "error") {
-     *       // Handle error
-     *     }
+     *   (data, errors) => {
+     *     // ...
      *   }
      * );
      * ```
@@ -59587,7 +59734,7 @@ var SurveyModel = /** @class */ (function (_super) {
     /**
      * Returns a question with a specified [`name`](https://surveyjs.io/form-library/documentation/api-reference/question#name).
      * @param name A question name
-     * @param caseInsensitive (Optional) A Boolean value that specifies case sensitivity when searching for the question. Default value: `false` (uppercase and lowercase letters are treated as distinct).
+     * @param caseInsensitive *(Optional)* A Boolean value that specifies case sensitivity when searching for the question. Default value: `false` (uppercase and lowercase letters are treated as distinct).
      * @returns A question with a specified name.
      * @see getAllQuestions
      * @see getQuestionByValueName
@@ -59615,7 +59762,7 @@ var SurveyModel = /** @class */ (function (_super) {
      *
      * > Since `valueName` does not have to be unique, multiple questions can have the same `valueName` value. In this case, the `getQuestionByValueName()` method returns the first such question. If you need to get all questions with the same `valueName`, call the `getQuestionsByValueName()` method.
      * @param valueName A question's `valueName` property value.
-     * @param caseInsensitive (Optional) A Boolean value that specifies case sensitivity when searching for the question. Default value: `false` (uppercase and lowercase letters are treated as distinct).
+     * @param caseInsensitive *(Optional)* A Boolean value that specifies case sensitivity when searching for the question. Default value: `false` (uppercase and lowercase letters are treated as distinct).
      * @returns A question with a specified `valueName`.
      * @see getAllQuestions
      * @see getQuestionByName
@@ -59628,7 +59775,7 @@ var SurveyModel = /** @class */ (function (_super) {
     /**
      * Returns all questions with a specified [`valueName`](https://surveyjs.io/form-library/documentation/api-reference/question#valueName). If a question's `valueName` is undefined, its [`name`](https://surveyjs.io/form-library/documentation/api-reference/question#name) property is used.
      * @param valueName A question's `valueName` property value.
-     * @param caseInsensitive (Optional) A Boolean value that specifies case sensitivity when searching for the questions. Default value: `false` (uppercase and lowercase letters are treated as distinct).
+     * @param caseInsensitive *(Optional)* A Boolean value that specifies case sensitivity when searching for the questions. Default value: `false` (uppercase and lowercase letters are treated as distinct).
      * @returns An array of questions with a specified `valueName`.
      * @see getAllQuestions
      * @see getQuestionByName
@@ -59653,7 +59800,7 @@ var SurveyModel = /** @class */ (function (_super) {
     /**
      * Returns an array of questions with specified [names](https://surveyjs.io/form-library/documentation/api-reference/question#name).
      * @param names An array of question names.
-     * @param caseInsensitive (Optional) A Boolean value that specifies case sensitivity when searching for the questions. Default value: `false` (uppercase and lowercase letters are treated as distinct).
+     * @param caseInsensitive *(Optional)* A Boolean value that specifies case sensitivity when searching for the questions. Default value: `false` (uppercase and lowercase letters are treated as distinct).
      * @returns An array of questions with specified names
      * @see getAllQuestions
      */
@@ -59771,7 +59918,7 @@ var SurveyModel = /** @class */ (function (_super) {
     /**
      * Returns a [panel](https://surveyjs.io/form-library/documentation/api-reference/panel-model) with a specified [`name`](https://surveyjs.io/form-library/documentation/api-reference/panel-model#name).
      * @param name A panel name.
-     * @param caseInsensitive (Optional) A Boolean value that specifies case sensitivity when searching for the panel. Default value: `false` (uppercase and lowercase letters are treated as distinct).
+     * @param caseInsensitive *(Optional)* A Boolean value that specifies case sensitivity when searching for the panel. Default value: `false` (uppercase and lowercase letters are treated as distinct).
      * @returns A panel with a specified name.
      * @see getAllPanels
      */
@@ -60603,6 +60750,8 @@ var SurveyModel = /** @class */ (function (_super) {
     SurveyModel.prototype.setValue = function (name, newQuestionValue, locNotification, allowNotifyValueChanged, questionName) {
         if (locNotification === void 0) { locNotification = false; }
         if (allowNotifyValueChanged === void 0) { allowNotifyValueChanged = true; }
+        if (this.isCreatingPagesForPreview)
+            return;
         var newValue = newQuestionValue;
         if (allowNotifyValueChanged) {
             newValue = this.questionOnValueChanging(name, newQuestionValue);
@@ -61335,6 +61484,9 @@ var SurveyModel = /** @class */ (function (_super) {
         return this.getLocalizationFormatString(strName, surveySpent, surveyLimit);
     };
     SurveyModel.prototype.getDisplayClockTime = function (val) {
+        if (val < 0) {
+            val = 0;
+        }
         var min = Math.floor(val / 60);
         var sec = val % 60;
         var secStr = sec.toString();
@@ -61690,7 +61842,19 @@ var SurveyModel = /** @class */ (function (_super) {
                 }
             }
             else if (this.state === "running" && isStrCiEqual(layoutElement.id, "progress-" + this.progressBarType)) {
-                if (container === "center") {
+                var headerLayoutElement = this.layoutElements.filter(function (a) { return a.id === "advanced-header"; })[0];
+                var advHeader = headerLayoutElement && headerLayoutElement.data;
+                var isBelowHeader = !advHeader || advHeader.hasBackground;
+                if (container === "header" && !isBelowHeader) {
+                    layoutElement.index = -150;
+                    if (this.isShowProgressBarOnTop && !this.isShowStartingPage) {
+                        containerLayoutElements.push(layoutElement);
+                    }
+                }
+                if (container === "center" && isBelowHeader) {
+                    if (!!layoutElement.index) {
+                        delete layoutElement.index;
+                    }
                     if (this.isShowProgressBarOnTop && !this.isShowStartingPage) {
                         containerLayoutElements.push(layoutElement);
                     }
@@ -62884,10 +63048,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SvgIconRegistry", function() { return SvgIconRegistry; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SvgRegistry", function() { return SvgRegistry; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SvgBundleViewModel", function() { return SvgBundleViewModel; });
-/* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./settings */ "./src/settings.ts");
-/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils/utils */ "./src/utils/utils.ts");
-
-
 var SvgIconData = /** @class */ (function () {
     function SvgIconData() {
     }
@@ -62949,16 +63109,6 @@ var SvgIconRegistry = /** @class */ (function () {
         var _this = this;
         return Object.keys(this.icons).map(function (icon) { return _this.icons[icon]; }).join("");
     };
-    SvgIconRegistry.prototype.renderIcons = function () {
-        var containerId = "sv-icon-holder-global-container";
-        if (!!_settings__WEBPACK_IMPORTED_MODULE_0__["settings"].environment && !_settings__WEBPACK_IMPORTED_MODULE_0__["settings"].environment.root.getElementById(containerId)) {
-            var iconsDiv = document.createElement("div");
-            iconsDiv.id = containerId;
-            iconsDiv.innerHTML = "<svg>" + this.iconsRenderedHtml() + "</svg>";
-            iconsDiv.style.display = "none";
-            Object(_utils_utils__WEBPACK_IMPORTED_MODULE_1__["getElement"])(_settings__WEBPACK_IMPORTED_MODULE_0__["settings"].environment.svgMountContainer).appendChild(iconsDiv);
-        }
-    };
     return SvgIconRegistry;
 }());
 
@@ -64411,13 +64561,14 @@ var __extends = (undefined && undefined.__extends) || (function () {
 })();
 
 var ResponsivityManager = /** @class */ (function () {
-    function ResponsivityManager(container, model, itemsSelector, dotsItemSize) {
+    function ResponsivityManager(container, model, itemsSelector, dotsItemSize, delayedUpdateFunction) {
         var _this = this;
         if (dotsItemSize === void 0) { dotsItemSize = null; }
         this.container = container;
         this.model = model;
         this.itemsSelector = itemsSelector;
         this.dotsItemSize = dotsItemSize;
+        this.delayedUpdateFunction = delayedUpdateFunction;
         this.resizeObserver = undefined;
         this.isInitialized = false;
         this.minDimensionConst = 56;
@@ -64468,6 +64619,16 @@ var ResponsivityManager = /** @class */ (function () {
                 (currentAction.needSeparator ? this.separatorSize : 0)
             : currentAction.maxDimension;
     };
+    ResponsivityManager.prototype.getRenderedVisibleActionsCount = function () {
+        var _this = this;
+        var count = 0;
+        this.container.querySelectorAll(this.itemsSelector).forEach(function (item) {
+            if (_this.calcItemSize(item) > 0) {
+                count++;
+            }
+        });
+        return count;
+    };
     ResponsivityManager.prototype.calcItemsSizes = function () {
         var _this = this;
         var actions = this.model.actions;
@@ -64493,18 +64654,8 @@ var ResponsivityManager = /** @class */ (function () {
         if (this.isContainerVisible && !this.model.isResponsivenessDisabled) {
             if (!this.isInitialized) {
                 this.model.setActionsMode("large");
-                var recalcItemSizes = function () {
-                    _this.calcItemsSizes();
-                    _this.isInitialized = true;
-                };
-                if (queueMicrotask) {
-                    queueMicrotask(recalcItemSizes);
-                }
-                else {
-                    recalcItemSizes();
-                }
             }
-            var processResponsiveness = function () {
+            var processResponsiveness_1 = function () {
                 var _a;
                 var dotsItemSize = _this.dotsItemSize;
                 if (!_this.dotsItemSize) {
@@ -64513,11 +64664,29 @@ var ResponsivityManager = /** @class */ (function () {
                 }
                 _this.model.fit(_this.getAvailableSpace(), dotsItemSize);
             };
-            if (queueMicrotask) {
-                queueMicrotask(processResponsiveness);
+            if (!this.isInitialized) {
+                var callback = function () {
+                    _this.calcItemsSizes();
+                    _this.isInitialized = true;
+                    processResponsiveness_1();
+                };
+                if (this.getRenderedVisibleActionsCount() < this.model.visibleActions.length) {
+                    if (this.delayedUpdateFunction) {
+                        this.delayedUpdateFunction(callback);
+                    }
+                    else if (queueMicrotask) {
+                        queueMicrotask(callback);
+                    }
+                    else {
+                        callback();
+                    }
+                }
+                else {
+                    callback();
+                }
             }
             else {
-                processResponsiveness();
+                processResponsiveness_1();
             }
         }
     };
@@ -64532,9 +64701,9 @@ var ResponsivityManager = /** @class */ (function () {
 
 var VerticalResponsivityManager = /** @class */ (function (_super) {
     __extends(VerticalResponsivityManager, _super);
-    function VerticalResponsivityManager(container, model, itemsSelector, dotsItemSize, minDimension) {
+    function VerticalResponsivityManager(container, model, itemsSelector, dotsItemSize, minDimension, delayedUpdateFunction) {
         if (minDimension === void 0) { minDimension = 40; }
-        var _this = _super.call(this, container, model, itemsSelector, dotsItemSize) || this;
+        var _this = _super.call(this, container, model, itemsSelector, dotsItemSize, delayedUpdateFunction) || this;
         _this.minDimensionConst = minDimension;
         _this.recalcMinDimensionConst = false;
         return _this;