survey-react 1.9.82 → 1.9.84

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.82
+ * surveyjs - Survey JavaScript library v1.9.84
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1908,7 +1908,11 @@ var ActionContainer = /** @class */ (function (_super) {
     };
     ActionContainer.prototype.locStrsChanged = function () {
         _super.prototype.locStrsChanged.call(this);
-        this.actions.forEach(function (item) { return item.locStrsChanged(); });
+        this.actions.forEach(function (item) {
+            if (item.locTitle)
+                item.locTitle.strChanged();
+            item.locStrsChanged();
+        });
     };
     ActionContainer.prototype.raiseUpdate = function (isResetInitialized) {
         this.isEmpty = !this.actions.some(function (action) { return action.visible; });
@@ -2016,6 +2020,11 @@ var ActionContainer = /** @class */ (function (_super) {
         }
         return null;
     };
+    ActionContainer.prototype.dispose = function () {
+        _super.prototype.dispose.call(this);
+        this.actions.forEach(function (action) { return action.dispose(); });
+        this.actions.length = 0;
+    };
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["propertyArray"])({
             onSet: function (_, target) {
@@ -7415,7 +7424,7 @@ var DragDropMatrixRows = /** @class */ (function (_super) {
         _super.prototype.ghostPositionChanged.call(this);
     };
     DragDropMatrixRows.prototype.doClear = function () {
-        this.parentElement["resetRenderedTable"]();
+        this.parentElement.clearOnDrop();
         this.fromIndex = null;
         this.toIndex = null;
     };
@@ -8524,6 +8533,15 @@ var DropdownListModel = /** @class */ (function (_super) {
             this.inputString = null;
         }
     };
+    DropdownListModel.prototype.dispose = function () {
+        _super.prototype.dispose.call(this);
+        if (!!this.listModel) {
+            this.listModel.dispose();
+        }
+        if (!!this.popupModel) {
+            this.popupModel.dispose();
+        }
+    };
     DropdownListModel.prototype.scrollToFocusedItem = function () {
         this.listModel.scrollToFocusedItem();
     };
@@ -9532,7 +9550,7 @@ __webpack_require__.r(__webpack_exports__);
 // import "../../main.scss";
 //import "../../modern.scss";
 var Version;
-Version = "" + "1.9.82";
+Version = "" + "1.9.84";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -16564,7 +16582,7 @@ var Helpers = /** @class */ (function () {
     };
     Helpers.convertValToQuestionVal = function (val, inputType) {
         if (val instanceof Date) {
-            if (inputType === "datetime")
+            if (inputType === "datetime-local")
                 return Helpers.convertDateTimeToString(val);
             return Helpers.convertDateToString(val);
         }
@@ -17651,6 +17669,9 @@ var ItemValue = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], ItemValue.prototype, "selectedValue", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
+    ], ItemValue.prototype, "icon", void 0);
     return ItemValue;
 }(_actions_action__WEBPACK_IMPORTED_MODULE_6__["BaseAction"]));
 
@@ -17689,7 +17710,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("itemvalue", [
         visibleIf: function (obj) {
             return !obj || obj.ownerPropertyName !== "rateValues";
         },
-    },
+    }
 ], function (value) { return new ItemValue(value); });
 
 
@@ -19434,6 +19455,9 @@ var JsonObject = /** @class */ (function () {
                 if (!!value[i].name) {
                     newValue.newObj.name = value[i].name;
                 }
+                if (!!value[i].valueName) {
+                    newValue.newObj.valueName = value[i].valueName.toString();
+                }
                 result.push(newValue.newObj);
                 this.toObjectCore(value[i], newValue.newObj);
             }
@@ -19792,6 +19816,12 @@ var ListModel = /** @class */ (function (_super) {
             this.scrollableContainer.removeEventListener("scroll", this.scrollHandler);
         }
     };
+    ListModel.prototype.dispose = function () {
+        _super.prototype.dispose.call(this);
+        if (!!this.loadingIndicatorValue) {
+            this.loadingIndicatorValue.dispose();
+        }
+    };
     ListModel.INDENT = 16;
     ListModel.MINELEMENTCOUNT = 10;
     __decorate([
@@ -21291,7 +21321,7 @@ var englishStrings = {
     progressText: "Page {0} of {1}",
     indexText: "{0} of {1}",
     panelDynamicProgressText: "{0} of {1}",
-    panelDynamicTabTextFormat: "Panel {0}",
+    panelDynamicTabTextFormat: "Panel {panelIndex}",
     questionsProgressText: "Answered {0}/{1} questions",
     emptySurvey: "The survey doesn't contain visible pages or questions.",
     completingSurvey: "Thank you for completing the survey",
@@ -26673,7 +26703,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("page", [
     {
         name: "navigationTitle",
         visibleIf: function (obj) {
-            return !!obj.survey && obj.survey.progressBarType === "buttons";
+            return !!obj.survey && (obj.survey.progressBarType === "buttons" || obj.survey.showTOC);
         },
         serializationProperty: "locNavigationTitle",
     },
@@ -31051,8 +31081,9 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
         _super.prototype.dispose.call(this);
         this.unmountPopupContainer();
         this.container = undefined;
-        this.model.onVisibilityChanged.clear();
-        this.model.onRecalculatePosition.clear();
+        if (!!this.footerToolbarValue) {
+            this.footerToolbarValue.dispose();
+        }
     };
     PopupBaseViewModel.prototype.initializePopupContainer = function () {
         if (!this.createdContainer) {
@@ -31380,7 +31411,7 @@ var Question = /** @class */ (function (_super) {
         _this.registerPropertyChangedHandlers(["showCommentArea", "showOtherItem"], function () {
             _this.initCommentFromSurvey();
         });
-        _this.registerFunctionOnPropertiesValueChanged(["no"], function () {
+        _this.registerFunctionOnPropertiesValueChanged(["no", "readOnly"], function () {
             _this.updateQuestionCss();
         });
         _this.registerPropertyChangedHandlers(["isMobile"], function () { _this.onMobileChanged(); });
@@ -31611,11 +31642,16 @@ var Question = /** @class */ (function (_super) {
         get: function () {
             if (this.survey && this.survey.areEmptyElementsHidden && this.isEmpty())
                 return false;
-            return this.visible || this.areInvisibleElementsShowing;
+            if (this.areInvisibleElementsShowing)
+                return true;
+            return this.isVisibleCore();
         },
         enumerable: false,
         configurable: true
     });
+    Question.prototype.isVisibleCore = function () {
+        return this.visible;
+    };
     Object.defineProperty(Question.prototype, "visibleIndex", {
         /**
          * Returns the visible index of the question in the survey. It can be from 0 to all visible questions count - 1
@@ -33537,9 +33573,7 @@ var Question = /** @class */ (function (_super) {
         }
     };
     Question.prototype.getValidName = function (name) {
-        if (!name)
-            return name;
-        return name.trim().replace(/[\{\}]+/g, "");
+        return makeNameValid(name);
     };
     //IQuestion
     Question.prototype.updateValueFromSurvey = function (newValue) {
@@ -33774,13 +33808,17 @@ var Question = /** @class */ (function (_super) {
     return Question;
 }(_survey_element__WEBPACK_IMPORTED_MODULE_2__["SurveyElement"]));
 
-function removeConverChar(str) {
-    if (!!str && str[0] === _settings__WEBPACK_IMPORTED_MODULE_8__["settings"].expressionDisableConversionChar)
-        return str.substring(1);
+function makeNameValid(str) {
+    if (!str)
+        return str;
+    str = str.trim().replace(/[\{\}]+/g, "");
+    while (!!str && str[0] === _settings__WEBPACK_IMPORTED_MODULE_8__["settings"].expressionDisableConversionChar) {
+        str = str.substring(1);
+    }
     return str;
 }
 _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("question", [
-    { name: "!name", onSettingValue: function (obj, val) { return removeConverChar(val); } },
+    { name: "!name", onSettingValue: function (obj, val) { return makeNameValid(val); } },
     {
         name: "state",
         default: "default",
@@ -33855,7 +33893,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("question", [
                 (!!parent && parent.showQuestionNumbers === "onpanel"));
         },
     },
-    { name: "valueName", onSettingValue: function (obj, val) { return removeConverChar(val); } },
+    { name: "valueName", onSettingValue: function (obj, val) { return makeNameValid(val); } },
     "enableIf:condition",
     "defaultValue:value",
     {
@@ -34183,7 +34221,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
             _this.onVisibleChoicesChanged();
         });
         _this.registerPropertyChangedHandlers(["hideIfChoicesEmpty"], function () {
-            _this.updateVisibilityBasedOnChoices();
+            _this.onVisibleChanged();
         });
         _this.createNewArray("visibleChoices");
         _this.setNewRestfulProperty();
@@ -34231,8 +34269,11 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     QuestionSelectBase.prototype.getItemValueType = function () {
         return "itemvalue";
     };
-    QuestionSelectBase.prototype.createItemValue = function (value) {
-        return _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].createClass(this.getItemValueType(), value);
+    QuestionSelectBase.prototype.createItemValue = function (value, text) {
+        var res = _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].createClass(this.getItemValueType(), value);
+        if (!!text)
+            res.text = text;
+        return res;
     };
     QuestionSelectBase.prototype.supportGoNextPageError = function () {
         return !this.isOtherSelected || !!this.otherValue;
@@ -34497,7 +34538,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         if (!itemValue && !selectedItemValues) {
             this.updateSelectedItemValues();
         }
-        return itemValue || selectedItemValues || (this.isOtherSelected ? this.otherItem : new _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"](this.value));
+        return itemValue || selectedItemValues || (this.isOtherSelected ? this.otherItem : this.createItemValue(this.value));
     };
     QuestionSelectBase.prototype.onGetSingleSelectedItem = function (selectedItemByValue) { };
     QuestionSelectBase.prototype.setConditionalChoicesRunner = function () {
@@ -34720,10 +34761,10 @@ var QuestionSelectBase = /** @class */ (function (_super) {
                     if (!displayValues || !displayValues.length)
                         return;
                     if (IsMultipleValue_1) {
-                        _this.selectedItemValues = displayValues.map(function (displayValue, index) { return new _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"](_this.value[index], displayValue); });
+                        _this.selectedItemValues = displayValues.map(function (displayValue, index) { return _this.createItemValue(_this.value[index], displayValue); });
                     }
                     else {
-                        _this.selectedItemValues = new _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"](_this.value, displayValues[0]);
+                        _this.selectedItemValues = _this.createItemValue(_this.value, displayValues[0]);
                     }
                 }
             });
@@ -35055,7 +35096,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     QuestionSelectBase.prototype.addToVisibleChoices = function (items, isAddAll) {
         if (isAddAll) {
             if (!this.newItemValue) {
-                this.newItemValue = new _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"]("newitem"); //TODO
+                this.newItemValue = this.createItemValue("newitem"); //TODO
             }
             if (this.canShowOptionItem(this.newItemValue, isAddAll, false)) {
                 items.push(this.newItemValue);
@@ -35199,12 +35240,14 @@ var QuestionSelectBase = /** @class */ (function (_super) {
             }
         }
         if (this.choicesFromQuestionMode === "selected" && question.isOtherSelected && !!question.comment) {
-            res.push(new _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"](question.otherItem.value, question.comment));
+            res.push(this.createItemValue(question.otherItem.value, question.comment));
         }
         return res;
     };
     QuestionSelectBase.prototype.copyChoiceItem = function (item) {
-        return new _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"](item.value, item.text);
+        var res = this.createItemValue(item.value);
+        res.setData(item);
+        return res;
     };
     Object.defineProperty(QuestionSelectBase.prototype, "hasActiveChoices", {
         get: function () {
@@ -35471,17 +35514,18 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         if (this.isLoadingFromJson)
             return;
         this.updateVisibleChoices();
-        this.updateVisibilityBasedOnChoices();
+        this.onVisibleChanged();
         if (!!this.visibleChoicesChangedCallback) {
             this.visibleChoicesChangedCallback();
         }
         this.updateChoicesDependedQuestions();
     };
-    QuestionSelectBase.prototype.updateVisibilityBasedOnChoices = function () {
-        if (this.hideIfChoicesEmpty) {
-            var filteredChoices = this.getFilteredChoices();
-            this.visible = !filteredChoices || filteredChoices.length > 0;
-        }
+    QuestionSelectBase.prototype.isVisibleCore = function () {
+        var superVal = _super.prototype.isVisibleCore.call(this);
+        if (!this.hideIfChoicesEmpty || !superVal)
+            return superVal;
+        var filteredChoices = this.getFilteredChoices();
+        return !filteredChoices || filteredChoices.length > 0;
     };
     QuestionSelectBase.prototype.sortVisibleChoices = function (array) {
         var order = this.choicesOrder.toLowerCase();
@@ -38709,6 +38753,12 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
             event.stopPropagation();
         }
     };
+    QuestionDropdownModel.prototype.dispose = function () {
+        _super.prototype.dispose.call(this);
+        if (!!this.dropdownListModelValue) {
+            this.dropdownListModelValue.dispose();
+        }
+    };
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])()
     ], QuestionDropdownModel.prototype, "allowClear", void 0);
@@ -43170,7 +43220,8 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
             this.resetRenderedTable();
         }
         else {
-            this.renderedTable.onAddedRow();
+            var index = this.visibleRows.length - 1;
+            this.renderedTable.onAddedRow(this.visibleRows[index], index);
         }
     };
     QuestionMatrixDropdownModelBase.prototype.onEndRowRemoving = function (row) {
@@ -43213,6 +43264,13 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
         }
         _super.prototype.clearGeneratedRows.call(this);
     };
+    Object.defineProperty(QuestionMatrixDropdownModelBase.prototype, "isRendredTableCreated", {
+        get: function () {
+            return !!this.renderedTableValue;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionMatrixDropdownModelBase.prototype, "renderedTable", {
         get: function () {
             if (!this.renderedTableValue) {
@@ -45766,14 +45824,31 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
         this.setPropertyValue("showAddRowOnTop", showAddRowOnTop);
         this.setPropertyValue("showAddRowOnBottom", showAddRowOnBottom);
     };
-    QuestionMatrixDropdownRenderedTable.prototype.onAddedRow = function () {
+    QuestionMatrixDropdownRenderedTable.prototype.onAddedRow = function (row, index) {
         if (this.getRenderedDataRowCount() >= this.matrix.visibleRows.length)
             return;
-        var row = this.matrix.visibleRows[this.matrix.visibleRows.length - 1];
-        this.rowsActions.push(this.buildRowActions(row));
-        this.addHorizontalRow(this.rows, row, this.matrix.visibleRows.length == 1 && !this.matrix.showHeader);
+        var rowIndex = this.getRenderedRowIndexByIndex(index);
+        this.rowsActions.splice(index, 0, this.buildRowActions(row));
+        this.addHorizontalRow(this.rows, row, this.matrix.visibleRows.length == 1 && !this.matrix.showHeader, rowIndex);
         this.updateShowTableAndAddRow();
     };
+    QuestionMatrixDropdownRenderedTable.prototype.getRenderedRowIndexByIndex = function (index) {
+        var res = 0;
+        var dataRowIndex = 0;
+        for (var i = 0; i < this.rows.length; i++) {
+            if (dataRowIndex === index) {
+                if (this.rows[i].isDetailRow)
+                    res++;
+                break;
+            }
+            res++;
+            if (!this.rows[i].isDetailRow)
+                dataRowIndex++;
+        }
+        if (dataRowIndex < index)
+            return this.rows.length;
+        return res;
+    };
     QuestionMatrixDropdownRenderedTable.prototype.getRenderedDataRowCount = function () {
         var res = 0;
         for (var i = 0; i < this.rows.length; i++) {
@@ -45937,12 +46012,16 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
         }
         return renderedRows;
     };
-    QuestionMatrixDropdownRenderedTable.prototype.addHorizontalRow = function (renderedRows, row, useAsHeader) {
+    QuestionMatrixDropdownRenderedTable.prototype.addHorizontalRow = function (renderedRows, row, useAsHeader, index) {
+        if (index === void 0) { index = -1; }
         var renderedRow = this.createHorizontalRow(row, useAsHeader);
         renderedRow.row = row;
-        renderedRows.push(renderedRow);
+        if (index < 0) {
+            index = renderedRows.length;
+        }
+        renderedRows.splice(index, 0, renderedRow);
         if (row.isDetailPanelShowing) {
-            renderedRows.push(this.createDetailPanelRow(row, renderedRow));
+            renderedRows.splice(index + 1, 0, this.createDetailPanelRow(row, renderedRow));
         }
     };
     QuestionMatrixDropdownRenderedTable.prototype.getRowDragCell = function (rowIndex) {
@@ -46419,17 +46498,6 @@ var QuestionMatrixDynamicModel = /** @class */ (function (_super) {
         _this.startDragMatrixRow = function (event, currentTarget) {
             _this.dragDropMatrixRows.startDrag(event, _this.draggedRow, _this, event.target);
         };
-        _this.moveRowByIndex = function (fromIndex, toIndex) {
-            var value = _this.createNewValue();
-            if (!value)
-                return;
-            var movableRow = value[fromIndex];
-            if (!movableRow)
-                return;
-            value.splice(fromIndex, 1);
-            value.splice(toIndex, 0, movableRow);
-            _this.value = value;
-        };
         _this.createLocalizableString("confirmDeleteText", _this, false, "confirmDelete");
         var locAddRowText = _this.createLocalizableString("addRowText", _this);
         locAddRowText.onGetTextCallback = function (text) {
@@ -46559,6 +46627,20 @@ var QuestionMatrixDynamicModel = /** @class */ (function (_super) {
         }
         this.value = newValue;
     };
+    QuestionMatrixDynamicModel.prototype.moveRowByIndex = function (fromIndex, toIndex) {
+        var value = this.createNewValue();
+        if (!Array.isArray(value) && Math.max(fromIndex, toIndex) >= value.length)
+            return;
+        var movableRow = value[fromIndex];
+        value.splice(fromIndex, 1);
+        value.splice(toIndex, 0, movableRow);
+        this.value = value;
+    };
+    QuestionMatrixDynamicModel.prototype.clearOnDrop = function () {
+        if (!this.isEditingSurveyElement) {
+            this.resetRenderedTable();
+        }
+    };
     Object.defineProperty(QuestionMatrixDynamicModel.prototype, "rowCount", {
         /**
          * The number of rows in the matrix.
@@ -47202,6 +47284,51 @@ var QuestionMatrixDynamicModel = /** @class */ (function (_super) {
     QuestionMatrixDynamicModel.prototype.createMatrixRow = function (value) {
         return new MatrixDynamicRowModel(this.rowCounter++, this, value);
     };
+    QuestionMatrixDynamicModel.prototype.getInsertedDeletedIndex = function (rows, val) {
+        var len = Math.min(rows.length, val.length);
+        for (var i = 0; i < len; i++) {
+            if (val[i] !== rows[i].editingObj)
+                return i;
+        }
+        return len;
+    };
+    QuestionMatrixDynamicModel.prototype.isEditingObjectValueChanged = function () {
+        var val = this.value;
+        if (!this.generatedVisibleRows || !this.isValueSurveyElement(val))
+            return false;
+        var lastDelRow = this.lastDeletedRow;
+        this.lastDeletedRow = undefined;
+        var rows = this.generatedVisibleRows;
+        if (!Array.isArray(val) || Math.abs(rows.length - val.length) > 1)
+            return false;
+        var index = this.getInsertedDeletedIndex(rows, val);
+        if (rows.length > val.length) {
+            this.lastDeletedRow = rows[index];
+            var row = rows[index];
+            rows.splice(index, 1);
+            if (this.isRendredTableCreated) {
+                this.renderedTable.onRemovedRow(row);
+            }
+        }
+        else {
+            var newRow = undefined;
+            if (!!lastDelRow && lastDelRow.editingObj === val[index]) {
+                newRow = lastDelRow;
+            }
+            else {
+                newRow = this.createMatrixRow(val[index]);
+            }
+            rows.splice(index, 0, newRow);
+            if (!lastDelRow) {
+                this.onMatrixRowCreated(newRow);
+            }
+            if (this.isRendredTableCreated) {
+                this.renderedTable.onAddedRow(newRow, index);
+            }
+        }
+        this.setPropertyValueDirectly("rowCount", val.length);
+        return true;
+    };
     QuestionMatrixDynamicModel.prototype.onBeforeValueChanged = function (val) {
         if (!val || !Array.isArray(val))
             return;
@@ -47210,6 +47337,8 @@ var QuestionMatrixDynamicModel = /** @class */ (function (_super) {
             return;
         if (!this.setRowCountValueFromData && newRowCount < this.initialRowCount)
             return;
+        if (this.isEditingObjectValueChanged())
+            return;
         this.setRowCountValueFromData = true;
         this.rowCountValue = newRowCount;
         if (!this.generatedVisibleRows)
@@ -48198,17 +48327,18 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "QuestionPanelDynamicModel", function() { return QuestionPanelDynamicModel; });
 /* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./helpers */ "./src/helpers.ts");
 /* harmony import */ var _survey_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./survey-element */ "./src/survey-element.ts");
-/* harmony import */ var _textPreProcessor__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./textPreProcessor */ "./src/textPreProcessor.ts");
-/* harmony import */ var _question__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./question */ "./src/question.ts");
-/* harmony import */ var _jsonobject__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./jsonobject */ "./src/jsonobject.ts");
-/* harmony import */ var _questionfactory__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./questionfactory */ "./src/questionfactory.ts");
-/* harmony import */ var _error__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./error */ "./src/error.ts");
-/* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./settings */ "./src/settings.ts");
-/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./utils/utils */ "./src/utils/utils.ts");
-/* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
-/* harmony import */ var _actions_action__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./actions/action */ "./src/actions/action.ts");
-/* harmony import */ var _base__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./base */ "./src/base.ts");
-/* harmony import */ var _actions_adaptive_container__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./actions/adaptive-container */ "./src/actions/adaptive-container.ts");
+/* harmony import */ var _localizablestring__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./localizablestring */ "./src/localizablestring.ts");
+/* harmony import */ var _textPreProcessor__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./textPreProcessor */ "./src/textPreProcessor.ts");
+/* harmony import */ var _question__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./question */ "./src/question.ts");
+/* harmony import */ var _jsonobject__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./jsonobject */ "./src/jsonobject.ts");
+/* harmony import */ var _questionfactory__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./questionfactory */ "./src/questionfactory.ts");
+/* harmony import */ var _error__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./error */ "./src/error.ts");
+/* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./settings */ "./src/settings.ts");
+/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./utils/utils */ "./src/utils/utils.ts");
+/* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
+/* harmony import */ var _actions_action__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./actions/action */ "./src/actions/action.ts");
+/* harmony import */ var _base__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./base */ "./src/base.ts");
+/* harmony import */ var _actions_adaptive_container__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./actions/adaptive-container */ "./src/actions/adaptive-container.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -48248,6 +48378,7 @@ var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from
 
 
 
+
 var QuestionPanelDynamicItemTextProcessor = /** @class */ (function (_super) {
     __extends(QuestionPanelDynamicItemTextProcessor, _super);
     function QuestionPanelDynamicItemTextProcessor(data, panelItem, variableName) {
@@ -48323,7 +48454,7 @@ var QuestionPanelDynamicItemTextProcessor = /** @class */ (function (_super) {
         return false;
     };
     return QuestionPanelDynamicItemTextProcessor;
-}(_textPreProcessor__WEBPACK_IMPORTED_MODULE_2__["QuestionTextProcessor"]));
+}(_textPreProcessor__WEBPACK_IMPORTED_MODULE_3__["QuestionTextProcessor"]));
 var QuestionPanelDynamicItem = /** @class */ (function () {
     function QuestionPanelDynamicItem(data, panel) {
         this.data = data;
@@ -48363,11 +48494,11 @@ var QuestionPanelDynamicItem = /** @class */ (function () {
     };
     QuestionPanelDynamicItem.prototype.setVariable = function (name, newValue) { };
     QuestionPanelDynamicItem.prototype.getComment = function (name) {
-        var result = this.getValue(name + _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].commentSuffix);
+        var result = this.getValue(name + _settings__WEBPACK_IMPORTED_MODULE_8__["settings"].commentSuffix);
         return result ? result : "";
     };
     QuestionPanelDynamicItem.prototype.setComment = function (name, newValue, locNotification) {
-        this.setValue(name + _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].commentSuffix, newValue);
+        this.setValue(name + _settings__WEBPACK_IMPORTED_MODULE_8__["settings"].commentSuffix, newValue);
     };
     QuestionPanelDynamicItem.prototype.findQuestionByName = function (name) {
         if (!name)
@@ -48392,7 +48523,9 @@ var QuestionPanelDynamicItem = /** @class */ (function () {
         }
         values[QuestionPanelDynamicItem.ItemVariableName] = this.getAllValues();
         if (!!this.data) {
-            values[QuestionPanelDynamicItem.IndexVariableName.toLowerCase()] = this.data.getItemIndex(this);
+            var indexStr = QuestionPanelDynamicItem.IndexVariableName;
+            delete values[indexStr];
+            values[indexStr.toLowerCase()] = this.data.getItemIndex(this);
             var q = this.data;
             if (!!q && !!q.parentQuestion && !!q.parent) {
                 values[QuestionPanelDynamicItem.ParentItemVariableName] = q.parent.getValue();
@@ -48439,7 +48572,7 @@ var QuestionPanelDynamicTemplateSurveyImpl = /** @class */ (function () {
 /**
   * A class that describes the Dynamic Panel question type.
   *
-  * Dynamic Panel allows respondents to add panels based on a template panel and delete them. Specify the [`templateElements`](https://surveyjs.io/form-library/documentation/questionpaneldynamicmodel#templateElements) property to configure template panel elements.
+  * Dynamic Panel allows respondents to add panels based on a panel template and delete them. Specify the [`templateElements`](https://surveyjs.io/form-library/documentation/questionpaneldynamicmodel#templateElements) property to configure panel template elements.
   *
   * [View Demo](https://surveyjs.io/form-library/examples/questiontype-paneldynamic/ (linkStyle))
   */
@@ -48447,7 +48580,6 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     __extends(QuestionPanelDynamicModel, _super);
     function QuestionPanelDynamicModel(name) {
         var _this = _super.call(this, name) || this;
-        _this.loadingPanelCount = 0;
         _this.isAddingNewPanels = false;
         _this.onReadyChangedCallback = function () {
             _this.recalculateIsReadyValue();
@@ -48471,6 +48603,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         _this.createLocalizableString("panelPrevText", _this, false, "pagePrevText");
         _this.createLocalizableString("panelNextText", _this, false, "pageNextText");
         _this.createLocalizableString("noEntriesText", _this, false, "noEntriesText");
+        _this.createLocalizableString("templateTabTitle", _this, true, "panelDynamicTabTextFormat");
         _this.registerPropertyChangedHandlers(["panelsState"], function () {
             _this.setPanelsState();
         });
@@ -48523,7 +48656,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     QuestionPanelDynamicModel.prototype.onTemplateElementPropertyChanged = function (element, options) {
         if (this.isLoadingFromJson || this.useTemplatePanel || this.panels.length == 0)
             return;
-        var property = _jsonobject__WEBPACK_IMPORTED_MODULE_4__["Serializer"].findProperty(element.getType(), options.name);
+        var property = _jsonobject__WEBPACK_IMPORTED_MODULE_5__["Serializer"].findProperty(element.getType(), options.name);
         if (!property)
             return;
         var panels = this.panels;
@@ -48586,7 +48719,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "templateElements", {
         /**
-         * An array of questions and panels included in the template panel.
+         * An array of questions and panels included in a panel template.
          * @see template
          * @see panels
          * @see panelCount
@@ -48599,7 +48732,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "templateTitle", {
         /**
-         * A title for the template panel.
+         * A template for panel titles.
          * @see template
          * @see templateDescription
          * @see templateElements
@@ -48622,9 +48755,31 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "templateTabTitle", {
+        /**
+         * A template for tab titles. Applies when [`renderMode`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#renderMode) is `"tab"`.
+         * @see templateTitle
+         * @see renderMode
+         */
+        get: function () {
+            return this.locTemplateTabTitle.text;
+        },
+        set: function (newValue) {
+            this.locTemplateTabTitle.text = newValue;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "locTemplateTabTitle", {
+        get: function () {
+            return this.getLocalizableString("templateTabTitle");
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "templateDescription", {
         /**
-         * A description for the template panel.
+         * A template for panel descriptions.
          * @see template
          * @see templateTitle
          * @see templateElements
@@ -48660,7 +48815,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "panels", {
         /**
-         * An array of `PanelModel` objects created based on the template panel.
+         * An array of `PanelModel` objects created based on a panel template.
          * @see PanelModel
          * @see template
          * @see panelCount
@@ -48986,7 +49141,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     };
     QuestionPanelDynamicModel.prototype.setIsMobile = function (val) {
         (this.panels || []).forEach(function (panel) { return panel.elements.forEach(function (element) {
-            if (element instanceof _question__WEBPACK_IMPORTED_MODULE_3__["Question"]) {
+            if (element instanceof _question__WEBPACK_IMPORTED_MODULE_4__["Question"]) {
                 element.isMobile = val;
             }
         }); });
@@ -48999,14 +49154,14 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
          */
         get: function () {
             return this.isLoadingFromJson || this.useTemplatePanel
-                ? this.loadingPanelCount
+                ? this.getPropertyValue("panelCount")
                 : this.panels.length;
         },
         set: function (val) {
             if (val < 0)
                 return;
             if (this.isLoadingFromJson || this.useTemplatePanel) {
-                this.loadingPanelCount = val;
+                this.setPropertyValue("panelCount", val);
                 return;
             }
             if (val == this.panels.length || this.useTemplatePanel)
@@ -49144,8 +49299,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         set: function (val) {
             if (val <= 0)
                 return;
-            if (val > _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].panelMaximumPanelCount)
-                val = _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].panelMaximumPanelCount;
+            if (val > _settings__WEBPACK_IMPORTED_MODULE_8__["settings"].panelMaximumPanelCount)
+                val = _settings__WEBPACK_IMPORTED_MODULE_8__["settings"].panelMaximumPanelCount;
             if (val == this.maxPanelCount)
                 return;
             this.setPropertyValue("maxPanelCount", val);
@@ -49193,7 +49348,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "templateTitleLocation", {
         /**
-         * Gets or sets the location of question titles within the template panel relative to their input fields.
+         * Gets or sets the location of question titles relative to their input fields.
          *
          * - `"default"` (default) - Inherits the setting from the Dynamic Panel's `titleLocation` property, which in turn inherits the [`questionTitleLocation`](https://surveyjs.io/form-library/documentation/surveymodel#questionTitleLocation) property value specified for the Dynamic Panel's container (page or survey).
          * - `"top"` - Displays question titles above input fields.
@@ -49266,7 +49421,15 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "renderMode", {
         /**
-         * By default the property equals to "list" and all dynamic panels are rendered one by one on the page. You may change it to: "progressTop", "progressBottom" or "progressTopBottom" to render only one dynamic panel at once. The progress and navigation elements can be rendred on top, bottom or both.
+         * Specifies how to render panels.
+         *
+         * Possible values:
+         *
+         * - `"list"` - Renders panels one under the other. [View Demo](https://surveyjs.io/form-library/examples/how-to-use-expressions-in-dynamic-panel/)
+         * - `"progressTop"` - Renders each panel as a card and displays a progress bar at the top. [View Demo](https://surveyjs.io/form-library/examples/questiontype-paneldynamic/)
+         * - `"progressBottom"` - Renders each panel panel as a card and displays a progress bar at the bottom.
+         * - `"progressTopBottom"` - Renders each panel as a card and displays a progress bar at the top and bottom.
+         * - `"tab"` - Renders each panel within a tab. Use the [`templateTabTitle`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#templateTabTitle) to specify a template for tab titles.
          */
         get: function () {
             return this.getPropertyValue("renderMode");
@@ -49560,7 +49723,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     QuestionPanelDynamicModel.prototype.removePanelUI = function (value) {
         if (!this.canRemovePanel)
             return;
-        if (!this.confirmDelete || Object(_utils_utils__WEBPACK_IMPORTED_MODULE_8__["confirmAction"])(this.confirmDeleteText)) {
+        if (!this.confirmDelete || Object(_utils_utils__WEBPACK_IMPORTED_MODULE_9__["confirmAction"])(this.confirmDeleteText)) {
             this.removePanel(value);
         }
     };
@@ -49622,12 +49785,22 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         }
         return -1;
     };
+    QuestionPanelDynamicModel.prototype.getPanelIndexById = function (id) {
+        for (var i = 0; i < this.panels.length; i++) {
+            if (this.panels[i].id === id)
+                return i;
+        }
+        return -1;
+    };
     QuestionPanelDynamicModel.prototype.locStrsChanged = function () {
         _super.prototype.locStrsChanged.call(this);
         var panels = this.panels;
         for (var i = 0; i < panels.length; i++) {
             panels[i].locStrsChanged();
         }
+        if (this.additionalTitleToolbar) {
+            this.additionalTitleToolbar.locStrsChanged();
+        }
     };
     QuestionPanelDynamicModel.prototype.clearIncorrectValues = function () {
         for (var i = 0; i < this.panels.length; i++) {
@@ -49659,8 +49832,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             var q = panel.getQuestionByName(key);
             if (!!q)
                 continue;
-            if (this.iscorrectValueWithPostPrefix(panel, key, _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].commentSuffix) ||
-                this.iscorrectValueWithPostPrefix(panel, key, _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].matrixTotalValuePostFix))
+            if (this.iscorrectValueWithPostPrefix(panel, key, _settings__WEBPACK_IMPORTED_MODULE_8__["settings"].commentSuffix) ||
+                this.iscorrectValueWithPostPrefix(panel, key, _settings__WEBPACK_IMPORTED_MODULE_8__["settings"].matrixTotalValuePostFix))
                 continue;
             delete values[key];
             isChanged = true;
@@ -49689,7 +49862,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         for (var i = 0; i < questions.length; i++) {
             questions[i].addConditionObjectsByContext(panelObjs, context);
         }
-        for (var index = 0; index < _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].panelDynamicMaxPanelCountInCondition; index++) {
+        for (var index = 0; index < _settings__WEBPACK_IMPORTED_MODULE_8__["settings"].panelDynamicMaxPanelCountInCondition; index++) {
             var indexStr = "[" + index + "].";
             var prefixName = this.getValueName() + indexStr;
             var prefixText = this.processedTitle + indexStr;
@@ -49754,8 +49927,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     QuestionPanelDynamicModel.prototype.onSurveyLoad = function () {
         this.template.readOnly = this.isReadOnly;
         this.template.onSurveyLoad();
-        if (this.loadingPanelCount > 0) {
-            this.panelCount = this.loadingPanelCount;
+        if (this.getPropertyValue("panelCount") > 0) {
+            this.panelCount = this.getPropertyValue("panelCount");
         }
         if (this.useTemplatePanel) {
             this.rebuildPanels();
@@ -49994,7 +50167,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         for (var i = 0; i < keyValues.length; i++) {
             if (value == keyValues[i]) {
                 if (fireCallback) {
-                    question.addError(new _error__WEBPACK_IMPORTED_MODULE_6__["KeyDuplicationError"](this.keyDuplicationError, this));
+                    question.addError(new _error__WEBPACK_IMPORTED_MODULE_7__["KeyDuplicationError"](this.keyDuplicationError, this));
                 }
                 if (!!rec && !rec.firstErrorQuestion) {
                     rec.firstErrorQuestion = question;
@@ -50009,10 +50182,10 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         var _this = this;
         var actions = panel.footerActions;
         if (this.panelRemoveButtonLocation !== "right") {
-            actions.push(new _actions_action__WEBPACK_IMPORTED_MODULE_10__["Action"]({
+            actions.push(new _actions_action__WEBPACK_IMPORTED_MODULE_11__["Action"]({
                 id: "remove-panel-" + panel.id,
                 component: "sv-paneldynamic-remove-btn",
-                visible: new _base__WEBPACK_IMPORTED_MODULE_11__["ComputedUpdater"](function () { return [_this.canRemovePanel, panel.state !== "collapsed", _this.panelRemoveButtonLocation !== "right"].every(function (val) { return val === true; }); }),
+                visible: new _base__WEBPACK_IMPORTED_MODULE_12__["ComputedUpdater"](function () { return [_this.canRemovePanel, panel.state !== "collapsed", _this.panelRemoveButtonLocation !== "right"].every(function (val) { return val === true; }); }),
                 data: { question: this, panel: panel }
             }));
         }
@@ -50025,7 +50198,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         var _this = this;
         var panel = this.createAndSetupNewPanelObject();
         var json = this.template.toJSON();
-        new _jsonobject__WEBPACK_IMPORTED_MODULE_4__["JsonObject"]().toObject(json, panel);
+        new _jsonobject__WEBPACK_IMPORTED_MODULE_5__["JsonObject"]().toObject(json, panel);
         panel.renderWidth = "100%";
         panel.updateCustomWidgets();
         new QuestionPanelDynamicItem(this, panel);
@@ -50057,15 +50230,15 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             : this.getTitleLocationCore();
     };
     QuestionPanelDynamicModel.prototype.createNewPanelObject = function () {
-        return _jsonobject__WEBPACK_IMPORTED_MODULE_4__["Serializer"].createClass("panel");
+        return _jsonobject__WEBPACK_IMPORTED_MODULE_5__["Serializer"].createClass("panel");
     };
     QuestionPanelDynamicModel.prototype.setPanelCountBasedOnValue = function () {
         if (this.isValueChangingInternally || this.useTemplatePanel)
             return;
         var val = this.value;
         var newPanelCount = val && Array.isArray(val) ? val.length : 0;
-        if (newPanelCount == 0 && this.loadingPanelCount > 0) {
-            newPanelCount = this.loadingPanelCount;
+        if (newPanelCount == 0 && this.getPropertyValue("panelCount") > 0) {
+            newPanelCount = this.getPropertyValue("panelCount");
         }
         this.panelCount = newPanelCount;
     };
@@ -50102,7 +50275,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         for (var i = 0; i < questions.length; i++) {
             var q = questions[i];
             q.updateValueFromSurvey(values[q.getValueName()]);
-            q.updateCommentFromSurvey(values[q.getValueName() + _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].commentSuffix]);
+            q.updateCommentFromSurvey(values[q.getValueName() + _settings__WEBPACK_IMPORTED_MODULE_8__["settings"].commentSuffix]);
         }
     };
     QuestionPanelDynamicModel.prototype.panelSurveyValueChanged = function (panel) {
@@ -50266,12 +50439,12 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         configurable: true
     });
     QuestionPanelDynamicModel.prototype.getRootCss = function () {
-        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]().append(_super.prototype.getRootCss.call(this)).append(this.cssClasses.empty, this.getShowNoEntriesPlaceholder()).toString();
+        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__["CssClassBuilder"]().append(_super.prototype.getRootCss.call(this)).append(this.cssClasses.empty, this.getShowNoEntriesPlaceholder()).toString();
     };
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "cssHeader", {
         get: function () {
             var showTab = this.isRenderModeTab && !!this.panelCount;
-            return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]()
+            return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__["CssClassBuilder"]()
                 .append(this.cssClasses.header)
                 .append(this.cssClasses.headerTop, this.hasTitleOnTop || showTab)
                 .append(this.cssClasses.headerTab, showTab)
@@ -50281,33 +50454,33 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         configurable: true
     });
     QuestionPanelDynamicModel.prototype.getPanelWrapperCss = function () {
-        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]()
+        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__["CssClassBuilder"]()
             .append(this.cssClasses.panelWrapper)
             .append(this.cssClasses.panelWrapperInRow, this.panelRemoveButtonLocation === "right")
             .toString();
     };
     QuestionPanelDynamicModel.prototype.getPanelRemoveButtonCss = function () {
-        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]()
+        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__["CssClassBuilder"]()
             .append(this.cssClasses.button)
             .append(this.cssClasses.buttonRemove)
             .append(this.cssClasses.buttonRemoveRight, this.panelRemoveButtonLocation === "right")
             .toString();
     };
     QuestionPanelDynamicModel.prototype.getAddButtonCss = function () {
-        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]()
+        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__["CssClassBuilder"]()
             .append(this.cssClasses.button)
             .append(this.cssClasses.buttonAdd)
             .append(this.cssClasses.buttonAdd + "--list-mode", this.renderMode === "list")
             .toString();
     };
     QuestionPanelDynamicModel.prototype.getPrevButtonCss = function () {
-        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]()
+        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__["CssClassBuilder"]()
             .append(this.cssClasses.buttonPrev)
             .append(this.cssClasses.buttonPrevDisabled, !this.isPrevButtonVisible)
             .toString();
     };
     QuestionPanelDynamicModel.prototype.getNextButtonCss = function () {
-        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]()
+        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__["CssClassBuilder"]()
             .append(this.cssClasses.buttonNext)
             .append(this.cssClasses.buttonNextDisabled, !this.isNextButtonVisible)
             .toString();
@@ -50345,7 +50518,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         if (!this.isRenderModeTab)
             return null;
         if (!this.additionalTitleToolbarValue) {
-            this.additionalTitleToolbarValue = new _actions_adaptive_container__WEBPACK_IMPORTED_MODULE_12__["AdaptiveActionContainer"]();
+            this.additionalTitleToolbarValue = new _actions_adaptive_container__WEBPACK_IMPORTED_MODULE_13__["AdaptiveActionContainer"]();
             this.additionalTitleToolbarValue.containerCss = this.getAdditionalTitleToolbarCss();
             this.additionalTitleToolbarValue.cssClasses = {
                 item: "sv-tab-item",
@@ -50376,37 +50549,37 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         var _this = this;
         this.footerToolbarValue = this.createActionContainer();
         var items = [];
-        var prevTextBtn = new _actions_action__WEBPACK_IMPORTED_MODULE_10__["Action"]({
+        var prevTextBtn = new _actions_action__WEBPACK_IMPORTED_MODULE_11__["Action"]({
             id: "sv-pd-prev-btn",
             title: this.panelPrevText,
             action: function () {
                 _this.goToPrevPanel();
             }
         });
-        var nextTextBtn = new _actions_action__WEBPACK_IMPORTED_MODULE_10__["Action"]({
+        var nextTextBtn = new _actions_action__WEBPACK_IMPORTED_MODULE_11__["Action"]({
             id: "sv-pd-next-btn",
             title: this.panelNextText,
             action: function () {
                 _this.goToNextPanel();
             }
         });
-        var addBtn = new _actions_action__WEBPACK_IMPORTED_MODULE_10__["Action"]({
+        var addBtn = new _actions_action__WEBPACK_IMPORTED_MODULE_11__["Action"]({
             id: "sv-pd-add-btn",
             component: "sv-paneldynamic-add-btn",
-            visible: new _base__WEBPACK_IMPORTED_MODULE_11__["ComputedUpdater"](function () { return _this.canAddPanel; }),
+            visible: new _base__WEBPACK_IMPORTED_MODULE_12__["ComputedUpdater"](function () { return _this.canAddPanel; }),
             data: { question: this }
         });
-        var prevBtnIcon = new _actions_action__WEBPACK_IMPORTED_MODULE_10__["Action"]({
+        var prevBtnIcon = new _actions_action__WEBPACK_IMPORTED_MODULE_11__["Action"]({
             id: "sv-prev-btn-icon",
             component: "sv-paneldynamic-prev-btn",
             data: { question: this }
         });
-        var progressText = new _actions_action__WEBPACK_IMPORTED_MODULE_10__["Action"]({
+        var progressText = new _actions_action__WEBPACK_IMPORTED_MODULE_11__["Action"]({
             id: "sv-pd-progress-text",
             component: "sv-paneldynamic-progress-text",
             data: { question: this }
         });
-        var nextBtnIcon = new _actions_action__WEBPACK_IMPORTED_MODULE_10__["Action"]({
+        var nextBtnIcon = new _actions_action__WEBPACK_IMPORTED_MODULE_11__["Action"]({
             id: "sv-pd-next-btn-icon",
             component: "sv-paneldynamic-next-btn",
             data: { question: this }
@@ -50435,22 +50608,22 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         var _this = this;
         if (!this.isRenderModeTab)
             return;
-        var index = this.getPanelIndex(panel);
-        var title = this.getLocalizationFormatString("panelDynamicTabTextFormat", index + 1);
-        var newItem = new _actions_action__WEBPACK_IMPORTED_MODULE_10__["Action"]({
-            id: index.toString(),
+        var locTitle = new _localizablestring__WEBPACK_IMPORTED_MODULE_2__["LocalizableString"](panel, true);
+        locTitle.sharedData = this.locTemplateTabTitle;
+        var newItem = new _actions_action__WEBPACK_IMPORTED_MODULE_11__["Action"]({
+            id: panel.id,
             css: "sv-tab-item__root",
-            pressed: index === this.currentIndex,
-            title: title,
+            pressed: this.getPanelIndexById(panel.id) === this.currentIndex,
+            locTitle: locTitle,
             action: function () {
-                _this.currentIndex = parseInt(newItem.id);
+                _this.currentIndex = _this.getPanelIndexById(newItem.id);
                 _this.updateTabToolbarItemsPressedState();
             }
         });
         return newItem;
     };
     QuestionPanelDynamicModel.prototype.getAdditionalTitleToolbarCss = function () {
-        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]()
+        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__["CssClassBuilder"]()
             .append("sv-tabs-toolbar")
             .append("sv-tabs-toolbar--left", this.tabAlign === "left")
             .append("sv-tabs-toolbar--right", this.tabAlign === "right")
@@ -50458,10 +50631,12 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             .toString();
     };
     QuestionPanelDynamicModel.prototype.updateTabToolbarItemsPressedState = function () {
-        var _this = this;
         if (!this.isRenderModeTab)
             return;
-        this.additionalTitleToolbar.renderedActions.forEach(function (action) { return action.pressed = parseInt(action.id) === _this.currentIndex; });
+        if (this.currentIndex < 0 || this.currentIndex >= this.panels.length)
+            return;
+        var panel = this.panels[this.currentIndex];
+        this.additionalTitleToolbar.renderedActions.forEach(function (action) { return action.pressed = action.id === panel.id; });
     };
     QuestionPanelDynamicModel.prototype.updateTabToolbar = function () {
         var _this = this;
@@ -50483,8 +50658,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         if (!this.isRenderModeTab)
             return;
         panels.forEach(function (panel) {
-            var index = _this.getPanelIndex(panel);
-            var removedItem = _this.additionalTitleToolbar.getActionById(index.toString());
+            var removedItem = _this.additionalTitleToolbar.getActionById(panel.id);
             _this.additionalTitleToolbar.actions.splice(_this.additionalTitleToolbar.actions.indexOf(removedItem), 1);
         });
         this.updateTabToolbarItemsPressedState();
@@ -50498,12 +50672,12 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     });
     QuestionPanelDynamicModel.maxCheckCount = 3;
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_4__["property"])({ defaultValue: false, onSet: function (_, target) { target.updateFooterActions(); } })
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_5__["property"])({ defaultValue: false, onSet: function (_, target) { target.updateFooterActions(); } })
     ], QuestionPanelDynamicModel.prototype, "legacyNavigation", void 0);
     return QuestionPanelDynamicModel;
-}(_question__WEBPACK_IMPORTED_MODULE_3__["Question"]));
+}(_question__WEBPACK_IMPORTED_MODULE_4__["Question"]));
 
-_jsonobject__WEBPACK_IMPORTED_MODULE_4__["Serializer"].addClass("paneldynamic", [
+_jsonobject__WEBPACK_IMPORTED_MODULE_5__["Serializer"].addClass("paneldynamic", [
     { name: "showCommentArea:switch", layout: "row", visible: true, category: "general" },
     {
         name: "templateElements",
@@ -50513,6 +50687,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_4__["Serializer"].addClass("paneldynamic",
         isLightSerializable: false
     },
     { name: "templateTitle:text", serializationProperty: "locTemplateTitle" },
+    { name: "templateTabTitle", serializationProperty: "locTemplateTabTitle", visibleIf: function (obj) { return obj.renderMode === "tab"; } },
     {
         name: "templateDescription:text",
         serializationProperty: "locTemplateDescription",
@@ -50530,7 +50705,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_4__["Serializer"].addClass("paneldynamic",
     { name: "minPanelCount:number", default: 0, minValue: 0 },
     {
         name: "maxPanelCount:number",
-        default: _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].panelMaximumPanelCount,
+        default: _settings__WEBPACK_IMPORTED_MODULE_8__["settings"].panelMaximumPanelCount,
     },
     "defaultPanelValue:panelvalue",
     "defaultValueFromLastPanel:boolean",
@@ -50566,6 +50741,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_4__["Serializer"].addClass("paneldynamic",
     },
     {
         name: "tabAlign", default: "center", choices: ["center", "left", "right"],
+        visibleIf: function (obj) { return obj.renderMode === "tab"; }
     },
     {
         name: "templateTitleLocation",
@@ -50580,7 +50756,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_4__["Serializer"].addClass("paneldynamic",
 ], function () {
     return new QuestionPanelDynamicModel("");
 }, "question");
-_questionfactory__WEBPACK_IMPORTED_MODULE_5__["QuestionFactory"].Instance.registerQuestion("paneldynamic", function (name) {
+_questionfactory__WEBPACK_IMPORTED_MODULE_6__["QuestionFactory"].Instance.registerQuestion("paneldynamic", function (name) {
     return new QuestionPanelDynamicModel(name);
 });
 
@@ -50749,13 +50925,14 @@ _questionfactory__WEBPACK_IMPORTED_MODULE_1__["QuestionFactory"].Instance.regist
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "QuestionRankingModel", function() { return QuestionRankingModel; });
 /* harmony import */ var _dragdrop_ranking_choices__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./dragdrop/ranking-choices */ "./src/dragdrop/ranking-choices.ts");
-/* harmony import */ var _jsonobject__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./jsonobject */ "./src/jsonobject.ts");
-/* harmony import */ var _questionfactory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./questionfactory */ "./src/questionfactory.ts");
-/* harmony import */ var _question_checkbox__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./question_checkbox */ "./src/question_checkbox.ts");
-/* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
-/* harmony import */ var _utils_devices__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils/devices */ "./src/utils/devices.ts");
-/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./helpers */ "./src/helpers.ts");
-/* harmony import */ var _src_settings__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../src/settings */ "./src/settings.ts");
+/* harmony import */ var _itemvalue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./itemvalue */ "./src/itemvalue.ts");
+/* harmony import */ var _jsonobject__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./jsonobject */ "./src/jsonobject.ts");
+/* harmony import */ var _questionfactory__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./questionfactory */ "./src/questionfactory.ts");
+/* harmony import */ var _question_checkbox__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./question_checkbox */ "./src/question_checkbox.ts");
+/* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
+/* harmony import */ var _utils_devices__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utils/devices */ "./src/utils/devices.ts");
+/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./helpers */ "./src/helpers.ts");
+/* harmony import */ var _src_settings__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../src/settings */ "./src/settings.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -50785,6 +50962,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 /**
  * A class that describes the Ranking question type.
  *
@@ -50882,13 +51060,13 @@ var QuestionRankingModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(QuestionRankingModel.prototype, "rootClass", {
         get: function () {
-            return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_4__["CssClassBuilder"]()
+            return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_5__["CssClassBuilder"]()
                 .append(this.cssClasses.root)
-                .append(this.cssClasses.rootMobileMod, _utils_devices__WEBPACK_IMPORTED_MODULE_5__["IsMobile"])
+                .append(this.cssClasses.rootMobileMod, _utils_devices__WEBPACK_IMPORTED_MODULE_6__["IsMobile"])
                 .append(this.cssClasses.rootDisabled, this.isReadOnly)
                 .append(this.cssClasses.rootDesignMode, !!this.isDesignMode)
                 .append(this.cssClasses.itemOnError, this.errors.length > 0)
-                .append(this.cssClasses.rootDragHandleAreaIcon, _src_settings__WEBPACK_IMPORTED_MODULE_7__["settings"].rankingDragHandleArea === "icon")
+                .append(this.cssClasses.rootDragHandleAreaIcon, _src_settings__WEBPACK_IMPORTED_MODULE_8__["settings"].rankingDragHandleArea === "icon")
                 .toString();
         },
         enumerable: false,
@@ -50897,7 +51075,7 @@ var QuestionRankingModel = /** @class */ (function (_super) {
     QuestionRankingModel.prototype.getItemClassCore = function (item, options) {
         var itemIndex = this.rankingChoices.indexOf(item);
         var dropTargetIndex = this.rankingChoices.indexOf(this.currentDropTarget);
-        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_4__["CssClassBuilder"]()
+        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_5__["CssClassBuilder"]()
             .append(_super.prototype.getItemClassCore.call(this, item, options))
             .append(this.cssClasses.itemGhostMod, this.currentDropTarget === item)
             .append("sv-dragdrop-movedown", itemIndex === dropTargetIndex + 1 && this.dropTargetNodeMove === "down")
@@ -50919,7 +51097,7 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         configurable: true
     });
     QuestionRankingModel.prototype.getItemIndexClasses = function () {
-        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_4__["CssClassBuilder"]()
+        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_5__["CssClassBuilder"]()
             .append(this.cssClasses.itemIndex)
             .append(this.cssClasses.itemIndexEmptyMode, this.isEmpty())
             .toString();
@@ -50932,7 +51110,7 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         this.updateRankingChoices();
     };
     QuestionRankingModel.prototype.isAnswerCorrect = function () {
-        return _helpers__WEBPACK_IMPORTED_MODULE_6__["Helpers"].isArraysEqual(this.value, this.correctAnswer, false);
+        return _helpers__WEBPACK_IMPORTED_MODULE_7__["Helpers"].isArraysEqual(this.value, this.correctAnswer, false);
     };
     QuestionRankingModel.prototype.onSurveyValueChanged = function (newValue) {
         _super.prototype.onSurveyValueChanged.call(this, newValue);
@@ -50950,16 +51128,13 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         this.value = newValue;
     };
     QuestionRankingModel.prototype.removeFromValueByVisibleChoices = function () {
-        var _this = this;
         var newValue = this.value.slice();
-        this.value.forEach(function (valueItem, index) {
-            var isValueItemToRemove = true;
-            _this.visibleChoices.forEach(function (choice) {
-                if (choice.value === valueItem)
-                    isValueItemToRemove = false;
-            });
-            isValueItemToRemove && newValue.splice(index, 1);
-        });
+        var choices = this.visibleChoices;
+        for (var i = this.value.length - 1; i >= 0; i--) {
+            if (!_itemvalue__WEBPACK_IMPORTED_MODULE_1__["ItemValue"].getItemByValue(choices, this.value[i])) {
+                newValue.splice(i, 1);
+            }
+        }
         this.value = newValue;
     };
     Object.defineProperty(QuestionRankingModel.prototype, "rankingChoices", {
@@ -50997,7 +51172,7 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         this.dragDropRankingChoices = new _dragdrop_ranking_choices__WEBPACK_IMPORTED_MODULE_0__["DragDropRankingChoices"](this.survey, null, this.longTap);
     };
     QuestionRankingModel.prototype.isDragStartNodeValid = function (target) {
-        if (_src_settings__WEBPACK_IMPORTED_MODULE_7__["settings"].rankingDragHandleArea === "icon") {
+        if (_src_settings__WEBPACK_IMPORTED_MODULE_8__["settings"].rankingDragHandleArea === "icon") {
             return target.classList.contains(this.cssClasses.itemIconHoverMod);
         }
         return true;
@@ -51028,13 +51203,13 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         return false;
     };
     QuestionRankingModel.prototype.getIconHoverCss = function () {
-        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_4__["CssClassBuilder"]()
+        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_5__["CssClassBuilder"]()
             .append(this.cssClasses.itemIcon)
             .append(this.cssClasses.itemIconHoverMod)
             .toString();
     };
     QuestionRankingModel.prototype.getIconFocusCss = function () {
-        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_4__["CssClassBuilder"]()
+        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_5__["CssClassBuilder"]()
             .append(this.cssClasses.itemIcon)
             .append(this.cssClasses.itemIconFocusMod)
             .toString();
@@ -51067,15 +51242,15 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         configurable: true
     });
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: null })
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: null })
     ], QuestionRankingModel.prototype, "currentDropTarget", void 0);
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: null })
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: null })
     ], QuestionRankingModel.prototype, "dropTargetNodeMove", void 0);
     return QuestionRankingModel;
-}(_question_checkbox__WEBPACK_IMPORTED_MODULE_3__["QuestionCheckboxModel"]));
+}(_question_checkbox__WEBPACK_IMPORTED_MODULE_4__["QuestionCheckboxModel"]));
 
-_jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("ranking", [
+_jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("ranking", [
     { name: "showOtherItem", visible: false, isSerializable: false },
     { name: "otherText", visible: false, isSerializable: false },
     { name: "otherErrorText", visible: false, isSerializable: false },
@@ -51097,9 +51272,9 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("ranking", [
 ], function () {
     return new QuestionRankingModel("");
 }, "checkbox");
-_questionfactory__WEBPACK_IMPORTED_MODULE_2__["QuestionFactory"].Instance.registerQuestion("ranking", function (name) {
+_questionfactory__WEBPACK_IMPORTED_MODULE_3__["QuestionFactory"].Instance.registerQuestion("ranking", function (name) {
     var q = new QuestionRankingModel(name);
-    q.choices = _questionfactory__WEBPACK_IMPORTED_MODULE_2__["QuestionFactory"].DefaultChoices;
+    q.choices = _questionfactory__WEBPACK_IMPORTED_MODULE_3__["QuestionFactory"].DefaultChoices;
     return q;
 });
 
@@ -51206,13 +51381,36 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         _this.createItemValues("rateValues");
         _this.createRenderedRateItems();
         _this.createLocalizableString("ratingOptionsCaption", _this, false, true);
-        _this.registerFunctionOnPropertiesValueChanged(["rateValues", "rateMin", "rateMax", "rateType",
+        _this.registerFunctionOnPropertiesValueChanged(["rateMin", "rateMax",
             "minRateDescription", "maxRateDescription", "rateStep", "displayRateDescriptionsAsExtremeItems"], function () { return _this.createRenderedRateItems(); });
+        _this.registerFunctionOnPropertiesValueChanged(["rateDisplayMode"], function () {
+            _this.setIconsToRateValues();
+            _this.createRenderedRateItems();
+            _this.updateRateCount();
+        });
+        _this.registerFunctionOnPropertiesValueChanged(["rateValues"], function () {
+            _this.autoGenerate = false;
+            _this.setIconsToRateValues();
+            _this.createRenderedRateItems();
+        });
+        _this.registerFunctionOnPropertiesValueChanged(["autoGenerate"], function () {
+            if (!_this.autoGenerate && _this.rateValues.length === 0) {
+                _this.setPropertyValue("rateValues", _this.visibleRateValues);
+            }
+            if (_this.autoGenerate)
+                _this.updateRateMax();
+            _this.createRenderedRateItems();
+        });
         _this.createLocalizableString("minRateDescription", _this, true);
         _this.createLocalizableString("maxRateDescription", _this, true);
         _this.initPropertyDependencies();
         return _this;
     }
+    QuestionRatingModel.prototype.setIconsToRateValues = function () {
+        var _this = this;
+        if (this.rateType == "smileys")
+            this.rateValues.map(function (item) { return item.icon = _this.getItemSmiley(item); });
+    };
     QuestionRatingModel.prototype.startLoadingFromJson = function (jsonObj) {
         _super.prototype.startLoadingFromJson.call(this, jsonObj);
         this.jsonObj = jsonObj;
@@ -51227,7 +51425,10 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         if (this.jsonObj.rateMax !== undefined && this.jsonObj.rateCount !== undefined && this.jsonObj.rateMin === undefined) {
             this.updateRateMin();
         }
+        if (this.jsonObj.autoGenerate === undefined && this.jsonObj.rateValues !== undefined)
+            this.autoGenerate = !this.jsonObj.rateValues.length;
         this.updateRateCount();
+        this.setIconsToRateValues();
         this.createRenderedRateItems();
     };
     QuestionRatingModel.prototype.registerSychProperties = function (names, func) {
@@ -51240,6 +51441,9 @@ var QuestionRatingModel = /** @class */ (function (_super) {
             }
         });
     };
+    QuestionRatingModel.prototype.useRateValues = function () {
+        return !!this.rateValues.length && !this.autoGenerate;
+    };
     QuestionRatingModel.prototype.updateRateMax = function () {
         this.rateMax = this.rateMin + this.rateStep * (this.rateCount - 1);
     };
@@ -51247,26 +51451,34 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         this.rateMin = this.rateMax - this.rateStep * (this.rateCount - 1);
     };
     QuestionRatingModel.prototype.updateRateCount = function () {
-        if (this.rateValues.length) {
-            this.rateCount = this.rateValues.length;
+        var newCount = 0;
+        if (this.useRateValues()) {
+            newCount = this.rateValues.length;
         }
         else {
-            this.rateCount = Math.trunc((this.rateMax - this.rateMin) / (this.rateStep || 1)) + 1;
+            newCount = Math.trunc((this.rateMax - this.rateMin) / (this.rateStep || 1)) + 1;
+        }
+        if (newCount > 10 && this.rateDisplayMode == "smileys") {
+            newCount = 10;
         }
+        this.rateCount = newCount;
     };
     QuestionRatingModel.prototype.initPropertyDependencies = function () {
         var _this = this;
         this.registerSychProperties(["rateCount"], function () {
-            if (_this.rateValues.length == 0) {
+            if (!_this.useRateValues()) {
                 _this.rateMax = _this.rateMin + _this.rateStep * (_this.rateCount - 1);
             }
             else {
                 if (_this.rateCount < _this.rateValues.length) {
+                    if (_this.rateCount >= 10 && _this.rateDisplayMode == "smileys")
+                        return;
                     _this.rateValues.splice(_this.rateCount, _this.rateValues.length - _this.rateCount);
                 }
                 else {
-                    for (var i = _this.rateValues.length; i < _this.rateCount; i++)
-                        _this.rateValues.push(new _itemvalue__WEBPACK_IMPORTED_MODULE_0__["ItemValue"](undefined));
+                    for (var i = _this.rateValues.length; i < _this.rateCount; i++) {
+                        _this.rateValues.push(new _itemvalue__WEBPACK_IMPORTED_MODULE_0__["ItemValue"](_surveyStrings__WEBPACK_IMPORTED_MODULE_5__["surveyLocalization"].getString("choices_Item") + (i + 1)));
+                    }
                 }
             }
         });
@@ -51372,14 +51584,14 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         configurable: true
     });
     QuestionRatingModel.prototype.itemValuePropertyChanged = function (item, name, oldValue, newValue) {
-        if (this.rateValues.length === 0 && newValue !== undefined)
-            this.setPropertyValue("rateValues", this.visibleRateValues);
+        if (!this.useRateValues() && newValue !== undefined)
+            this.autoGenerate = false;
         _super.prototype.itemValuePropertyChanged.call(this, item, name, oldValue, newValue);
     };
     QuestionRatingModel.prototype.createRenderedRateItems = function () {
         var _this = this;
         var rateValues = [];
-        if (this.rateValues.length > 0) {
+        if (this.useRateValues()) {
             rateValues = this.rateValues;
         }
         else {
@@ -51497,6 +51709,16 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionRatingModel.prototype, "rateType", {
+        get: function () {
+            return this.rateDisplayMode;
+        },
+        set: function (val) {
+            this.rateDisplayMode = val;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionRatingModel.prototype, "isStar", {
         get: function () {
             return this.rateType == "stars";
@@ -51523,7 +51745,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         configurable: true
     });
     QuestionRatingModel.prototype.valueToData = function (val) {
-        if (this.rateValues.length > 0) {
+        if (this.useRateValues()) {
             var item = _itemvalue__WEBPACK_IMPORTED_MODULE_0__["ItemValue"].getItemByValue(this.rateValues, val);
             return !!item ? item.value : val;
         }
@@ -51536,9 +51758,12 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         else {
             this.value = value;
         }
+        for (var i = 0; i < this.renderedRateItems.length; i++) {
+            this.renderedRateItems[i].highlight = "none";
+        }
     };
     QuestionRatingModel.prototype.onItemMouseIn = function (item) {
-        if (this.isReadOnly || !item.itemValue.isEnabled)
+        if (this.isReadOnly || !item.itemValue.isEnabled || this.isDesignMode)
             return;
         var high = true;
         var selected = this.value != null;
@@ -51564,10 +51789,10 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     QuestionRatingModel.prototype.getItemSmiley = function (item) {
         var icons = ["terrible", "very-poor", "poor", "not-good", "average", "normal", "good", "very-good", "excellent", "perfect"];
         var priority = ["very-good", "not-good", "normal", "good", "average", "excellent", "poor", "perfect", "very-poor", "terrible"];
-        var count = this.rateValues.length || this.rateMax - this.rateMin + 1;
+        var count = this.useRateValues() ? this.rateValues.length : this.rateMax - this.rateMin + 1;
         var selectedPriority = priority.slice(0, count);
         var selectedIcons = icons.filter(function (i) { return selectedPriority.indexOf(i) != -1; });
-        if (this.rateValues.length == 0) {
+        if (!this.useRateValues()) {
             return selectedIcons[item.value - this.rateMin];
         }
         else {
@@ -51577,12 +51802,15 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     QuestionRatingModel.prototype.getItemSmileyIconName = function (item) {
         return "icon-" + this.getItemSmiley(item);
     };
+    QuestionRatingModel.prototype.getItemClassByText = function (item, text) {
+        return this.getItemClass(item);
+    };
     QuestionRatingModel.prototype.getItemClass = function (item, highlight) {
         var _this = this;
         if (highlight === void 0) { highlight = "none"; }
         var isSelected = this.value == item.value;
         if (this.isStar) {
-            if (this.rateValues.length == 0) {
+            if (!this.useRateValues()) {
                 isSelected = this.value >= item.value;
             }
             else {
@@ -51620,8 +51848,8 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         var hasFixedSize = !this.isStar &&
             !this.isSmiley &&
             (!this.displayRateDescriptionsAsExtremeItems ||
-                this.rateValues.length > 0 && item != this.rateValues[0] && item != this.rateValues[this.rateValues.length - 1] ||
-                this.rateValues.length == 0 && item.value != this.rateMin && item.value != this.rateMax) &&
+                this.useRateValues() && item != this.rateValues[0] && item != this.rateValues[this.rateValues.length - 1] ||
+                !this.useRateValues() && item.value != this.rateMin && item.value != this.rateMax) &&
             item.locText.calculatedText.length <= 2 &&
             Number.isInteger(Number(item.locText.calculatedText));
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_6__["CssClassBuilder"]()
@@ -51749,6 +51977,15 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         }
         return classes;
     };
+    QuestionRatingModel.prototype.dispose = function () {
+        _super.prototype.dispose.call(this);
+        if (!!this.dropdownListModelValue) {
+            this.dropdownListModelValue.dispose();
+        }
+    };
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: true })
+    ], QuestionRatingModel.prototype, "autoGenerate", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: 5 })
     ], QuestionRatingModel.prototype, "rateCount", void 0);
@@ -51780,8 +52017,8 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         })
     ], QuestionRatingModel.prototype, "displayMode", void 0);
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: "number" })
-    ], QuestionRatingModel.prototype, "rateType", void 0);
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: "labels" })
+    ], QuestionRatingModel.prototype, "rateDisplayMode", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: "monochrome" })
     ], QuestionRatingModel.prototype, "smileysColorMode", void 0);
@@ -51790,27 +52027,66 @@ var QuestionRatingModel = /** @class */ (function (_super) {
 
 _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("rating", [
     { name: "showCommentArea:switch", layout: "row", visible: true, category: "general" },
+    {
+        name: "rateDisplayMode",
+        alternativeName: "rateType",
+        default: "labels",
+        category: "rateValues",
+        choices: ["labels", "stars", "smileys"],
+        visibleIndex: 0
+    },
+    {
+        name: "autoGenerate",
+        category: "rateValues",
+        default: true,
+        choices: [{ value: true, text: "Generate" }, { value: false, text: "Enter manually" }],
+        visibleIndex: 2
+    },
     {
         name: "rateCount:number",
-        default: 5
+        default: 5,
+        category: "rateValues",
+        visibleIndex: 1,
+        onSettingValue: function (obj, val) {
+            if (val < 2)
+                return 2;
+            if (val > _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].ratingMaximumRateValueCount && val > obj.rateValues.length)
+                return _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].ratingMaximumRateValueCount;
+            if (val > 10 && obj.rateDisplayMode == "smileys")
+                return 10;
+            return val;
+        },
     },
     {
         name: "rateValues:itemvalue[]",
         baseValue: function () {
             return _surveyStrings__WEBPACK_IMPORTED_MODULE_5__["surveyLocalization"].getString("choices_Item");
         },
+        category: "rateValues",
+        visibleIf: function (obj) {
+            return !obj.autoGenerate;
+        },
+        visibleIndex: 3
     },
     {
         name: "rateMin:number", default: 1,
         onSettingValue: function (obj, val) {
             return val > obj.rateMax - obj.rateStep ? obj.rateMax - obj.rateStep : val;
-        }
+        },
+        visibleIf: function (obj) {
+            return !!obj.autoGenerate;
+        },
+        visibleIndex: 4
     },
     {
         name: "rateMax:number", default: 5,
         onSettingValue: function (obj, val) {
             return val < obj.rateMin + obj.rateStep ? obj.rateMin + obj.rateStep : val;
-        }
+        },
+        visibleIf: function (obj) {
+            return !!obj.autoGenerate;
+        },
+        visibleIndex: 5
     },
     {
         name: "rateStep:number", default: 1, minValue: 0.1,
@@ -51820,30 +52096,31 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("rating", [
             if (val > obj.rateMax - obj.rateMin)
                 val = obj.rateMax - obj.rateMin;
             return val;
-        }
+        },
+        visibleIf: function (obj) {
+            return !!obj.autoGenerate;
+        },
+        visibleIndex: 6
     },
     {
         name: "minRateDescription",
         alternativeName: "mininumRateDescription",
         serializationProperty: "locMinRateDescription",
+        visibleIndex: 17
     },
     {
         name: "maxRateDescription",
         alternativeName: "maximumRateDescription",
         serializationProperty: "locMaxRateDescription",
+        visibleIndex: 18
     },
-    { name: "displayRateDescriptionsAsExtremeItems:boolean", default: false },
+    { name: "displayRateDescriptionsAsExtremeItems:boolean", default: false, visibleIndex: 19 },
     {
         name: "displayMode",
         default: "auto",
         choices: ["auto", "buttons", "dropdown"],
+        visibleIndex: 20
     },
-    {
-        name: "rateType",
-        visible: false,
-        default: "number",
-        choices: ["numbers", "labels", "stars", "smileys"],
-    }
 ], function () {
     return new QuestionRatingModel("");
 }, "question");
@@ -52382,6 +52659,12 @@ var QuestionTagboxModel = /** @class */ (function (_super) {
     QuestionTagboxModel.prototype.getInputId = function () {
         return this.inputId + "_0";
     };
+    QuestionTagboxModel.prototype.dispose = function () {
+        _super.prototype.dispose.call(this);
+        if (!!this.dropdownListModelValue) {
+            this.dropdownListModelValue.dispose();
+        }
+    };
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])()
     ], QuestionTagboxModel.prototype, "allowClear", void 0);
@@ -52572,7 +52855,7 @@ var QuestionTextModel = /** @class */ (function (_super) {
         },
         set: function (val) {
             val = val.toLowerCase();
-            if (val == "datetime_local")
+            if (val === "datetime_local" || val === "datetime")
                 val = "datetime-local";
             this.setPropertyValue("inputType", val.toLowerCase());
             if (!this.isLoadingFromJson) {
@@ -52832,8 +53115,7 @@ var QuestionTextModel = /** @class */ (function (_super) {
         return isValid;
     };
     QuestionTextModel.prototype.convertFuncValuetoQuestionValue = function (val) {
-        var inpuType = this.inputType.replace("-local", "");
-        return _helpers__WEBPACK_IMPORTED_MODULE_3__["Helpers"].convertValToQuestionVal(val, inpuType);
+        return _helpers__WEBPACK_IMPORTED_MODULE_3__["Helpers"].convertValToQuestionVal(val, this.inputType);
     };
     QuestionTextModel.prototype.getMinMaxErrorText = function (errorText, value) {
         if (_helpers__WEBPACK_IMPORTED_MODULE_3__["Helpers"].isValueEmpty(value))
@@ -52917,10 +53199,10 @@ var QuestionTextModel = /** @class */ (function (_super) {
         configurable: true
     });
     QuestionTextModel.prototype.supportGoNextPageAutomatic = function () {
-        return ["date", "datetime", "datetime-local"].indexOf(this.inputType) < 0;
+        return ["date", "datetime-local"].indexOf(this.inputType) < 0;
     };
     QuestionTextModel.prototype.supportGoNextPageError = function () {
-        return ["date", "datetime", "datetime-local"].indexOf(this.inputType) < 0;
+        return ["date", "datetime-local"].indexOf(this.inputType) < 0;
     };
     Object.defineProperty(QuestionTextModel.prototype, "dataList", {
         /**
@@ -52994,7 +53276,6 @@ var minMaxTypes = [
     "number",
     "range",
     "date",
-    "datetime",
     "datetime-local",
     "month",
     "time",
@@ -55755,7 +56036,7 @@ var RatingItem = /** @class */ (function (_super) {
     };
     RatingItem.prototype.render = function () {
         var itemText = this.renderLocString(this.item.locText);
-        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { className: this.question.getItemClass(this.item.itemValue) },
+        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { className: this.question.getItemClassByText(this.item.itemValue, this.item.text) },
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.name, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.isDisplayMode, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy }),
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: this.question.cssClasses.itemText }, itemText)));
     };
@@ -63254,11 +63535,11 @@ var settings = {
         imagepicker: ["answercount"],
     },
     /**
-     * Specifies a minimum date that users can enter into a [Text](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model) question with [`inputType`](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model#inputType) set to `"date"`, `"datetime"`, or `"datetime-local"`. Set this property to a string with the folllowing format: `"yyyy-mm-dd"`.
+     * Specifies a minimum date that users can enter into a [Text](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model) question with [`inputType`](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model#inputType) set to `"date"` or `"datetime-local"`. Set this property to a string with the folllowing format: `"yyyy-mm-dd"`.
      */
     minDate: "",
     /**
-     * Specifies a maximum date that users can enter into a [Text](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model) question with [`inputType`](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model#inputType) set to `"date"`, `"datetime"`, or `"datetime-local"`. Set this property to a string with the folllowing format: `"yyyy-mm-dd"`.
+     * Specifies a maximum date that users can enter into a [Text](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model) question with [`inputType`](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model#inputType) set to `"date"` or `"datetime-local"`. Set this property to a string with the folllowing format: `"yyyy-mm-dd"`.
      */
     maxDate: "",
     showModal: undefined,
@@ -63295,7 +63576,6 @@ var settings = {
         inputTypes: [
             "color",
             "date",
-            "datetime",
             "datetime-local",
             "email",
             "month",
@@ -67174,7 +67454,8 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "backgroundImage", {
         /**
-         * Gets or sets a survey backgroundImage.
+         * An image to display in the background of the survey or form. Accepts a base64 or URL string value.
+         * @see backgroundOpacity
          */
         get: function () {
             return this.getLocalizableStringText("backgroundImage");
@@ -67196,6 +67477,10 @@ var SurveyModel = /** @class */ (function (_super) {
         this.renderBackgroundImage = ["url(", this.getLocalizableString("backgroundImage").renderedHtml, ")"].join("");
     };
     Object.defineProperty(SurveyModel.prototype, "backgroundOpacity", {
+        /**
+         * A value from 0 to 1 that specifies how transparent the survey background should be: 0 makes the background completely transparent, and 1 makes it opaque.
+         * @see backgroundImage
+         */
         get: function () {
             return this.getPropertyValue("backgroundOpacity");
         },
@@ -68727,7 +69012,7 @@ var SurveyModel = /** @class */ (function (_super) {
             if (!page)
                 return "none";
             if (page.navigationButtonsVisibility === "show") {
-                return "bottom";
+                return this.showNavigationButtons === "none" ? "bottom" : this.showNavigationButtons;
             }
             if (page.navigationButtonsVisibility === "hide") {
                 return "none";
@@ -72453,12 +72738,12 @@ var SurveyModel = /** @class */ (function (_super) {
             }
             else if (isStrCiEqual(layoutElement.id, "navigationbuttons")) {
                 if (container === "contentTop") {
-                    if (["top", "both"].indexOf(this.showNavigationButtons) !== -1 && this.isNavigationButtonsShowingOnTop) {
+                    if (["top", "both"].indexOf(this.isNavigationButtonsShowing) !== -1) {
                         containerLayoutElements.push(layoutElement);
                     }
                 }
                 if (container === "contentBottom") {
-                    if (["bottom", "both"].indexOf(this.showNavigationButtons) !== -1 && this.isNavigationButtonsShowingOnBottom) {
+                    if (["bottom", "both"].indexOf(this.isNavigationButtonsShowing) !== -1) {
                         containerLayoutElements.push(layoutElement);
                     }
                 }