survey-react 1.9.83 → 1.9.85

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.83
+ * surveyjs - Survey JavaScript library v1.9.85
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1278,9 +1278,11 @@ function createDropdownActionModelAdvanced(actionOptions, listOptions, popupOpti
     var newActionOptions = Object.assign({}, actionOptions, {
         component: "sv-action-bar-item-dropdown",
         popupModel: innerPopupModel,
-        action: function () {
+        action: function (action, isUserAction) {
             !!(actionOptions.action) && actionOptions.action();
+            innerPopupModel.isFocusedContent = !isUserAction || listModel.showFilter;
             innerPopupModel.toggleVisibility();
+            listModel.scrollToSelectedItem();
         },
     });
     var newAction = new Action(newActionOptions);
@@ -1356,7 +1358,7 @@ var BaseAction = /** @class */ (function (_super) {
     });
     Object.defineProperty(BaseAction.prototype, "isVisible", {
         get: function () {
-            return this.visible && this.mode !== "popup";
+            return this.visible && this.mode !== "popup" && this.mode !== "removed";
         },
         enumerable: false,
         configurable: true
@@ -1411,6 +1413,12 @@ var BaseAction = /** @class */ (function (_super) {
     BaseAction.prototype.getTooltip = function () {
         return this.tooltip || this.title;
     };
+    BaseAction.prototype.getIsTrusted = function (args) {
+        if (!!args.originalEvent) {
+            return args.originalEvent.isTrusted;
+        }
+        return args.isTrusted;
+    };
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
     ], BaseAction.prototype, "tooltip", void 0);
@@ -1748,6 +1756,16 @@ var AdaptiveActionContainer = /** @class */ (function (_super) {
                 items[index].mode = "large";
             }
         }
+        if (itemsSize > availableSize) {
+            var hidableItems = this.visibleActions.filter(function (a) { return a.removePriority; });
+            hidableItems.sort(function (a, b) { return a.removePriority - b.removePriority; });
+            for (var index = 0; index < hidableItems.length; index++) {
+                if (itemsSize > availableSize) {
+                    itemsSize -= items[index].disableShrink ? hidableItems[index].maxDimension : hidableItems[index].minDimension;
+                    hidableItems[index].mode = "removed";
+                }
+            }
+        }
     };
     Object.defineProperty(AdaptiveActionContainer.prototype, "hiddenItemsListModel", {
         get: function () {
@@ -1908,7 +1926,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 +2038,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) {
@@ -4921,6 +4948,7 @@ var modernCss = {
         slider: "sv-boolean__slider",
         label: "sv-boolean__label",
         disabledLabel: "sv-boolean__label--disabled",
+        sliderGhost: "sv-boolean__thumb-ghost",
         //checkbox
         rootCheckbox: "sv_qbln",
         checkboxItem: "sv-boolean sv-item",
@@ -5261,6 +5289,7 @@ var defaultStandardCss = {
         slider: "sv-boolean__slider",
         label: "sv-boolean__label ",
         disabledLabel: "sv-boolean__label--disabled",
+        sliderGhost: "sv-boolean__thumb-ghost",
         //checkbox
         rootCheckbox: "sv_qcbc sv_qbln",
         checkboxItem: "sv-boolean",
@@ -5632,6 +5661,7 @@ var defaultV2Css = {
         nested: "sd-element--nested",
         invisible: "sd-element--invisible",
         navigationButton: "",
+        compact: "sd-element--with-frame sd-element--compact"
     },
     paneldynamic: {
         mainRoot: "sd-element  sd-question sd-question--paneldynamic sd-element--complex sd-question--complex sd-row__question",
@@ -5659,7 +5689,8 @@ var defaultV2Css = {
         footerButtonsContainer: "sd-paneldynamic__buttons-container",
         panelWrapperInRow: "sd-paneldynamic__panel-wrapper--in-row",
         progressBtnIcon: "icon-progressbuttonv2",
-        noEntriesPlaceholder: "sd-paneldynamic__placeholder sd-question__placeholder"
+        noEntriesPlaceholder: "sd-paneldynamic__placeholder sd-question__placeholder",
+        compact: "sd-element--with-frame sd-element--compact"
     },
     progress: "sd-progress sd-body__progress",
     progressTop: "sd-body__progress--top",
@@ -5689,6 +5720,7 @@ var defaultV2Css = {
     pageDescription: "sd-description sd-page__description",
     row: "sd-row sd-clearfix",
     rowMultiple: "sd-row--multiple",
+    rowCompact: "sd-row--compact",
     pageRow: "sd-page__row",
     question: {
         mainRoot: "sd-element sd-question sd-row__question",
@@ -5809,11 +5841,13 @@ var defaultV2Css = {
         itemChecked: "sd-boolean--checked",
         itemIndeterminate: "sd-boolean--indeterminate",
         itemDisabled: "sd-boolean--disabled",
+        itemHover: "sd-boolean--allowhover",
         label: "sd-boolean__label",
         switch: "sd-boolean__switch",
         disabledLabel: "sd-checkbox__label--disabled",
         sliderText: "sd-boolean__thumb-text",
         slider: "sd-boolean__thumb",
+        sliderGhost: "sd-boolean__thumb-ghost",
         //radio
         radioItem: "sd-item",
         radioItemChecked: "sd-item--checked sd-radio--checked",
@@ -5932,7 +5966,8 @@ var defaultV2Css = {
         cellText: "sd-matrix__text",
         cellTextSelected: "sd-matrix__text--checked",
         cellTextDisabled: "sd-matrix__text--disabled",
-        cellResponsiveTitle: "sd-matrix__responsive-title"
+        cellResponsiveTitle: "sd-matrix__responsive-title",
+        compact: "sd-element--with-frame sd-element--compact"
     },
     matrixdropdown: {
         mainRoot: "sd-element sd-question sd-row__question sd-element--complex sd-question--complex sd-question--table",
@@ -5957,7 +5992,8 @@ var defaultV2Css = {
         actionsCell: "sd-table__cell sd-table__cell--actions",
         emptyCell: "sd-table__cell--empty",
         verticalCell: "sd-table__cell--vertical",
-        cellQuestionWrapper: "sd-table__question-wrapper"
+        cellQuestionWrapper: "sd-table__question-wrapper",
+        compact: "sd-element--with-frame sd-element--compact"
     },
     matrixdynamic: {
         mainRoot: "sd-element sd-question sd-row__question sd-element--complex sd-question--complex sd-question--table",
@@ -5994,7 +6030,8 @@ var defaultV2Css = {
         ghostRow: "sv-matrix-row--drag-drop-ghost-mod",
         emptyCell: "sd-table__cell--empty",
         verticalCell: "sd-table__cell--vertical",
-        cellQuestionWrapper: "sd-table__question-wrapper"
+        cellQuestionWrapper: "sd-table__question-wrapper",
+        compact: "sd-element--with-frame sd-element--compact"
     },
     rating: {
         rootDropdown: "sd-scrollable-container sd-scrollable-container--compact sd-selectbase",
@@ -6016,6 +6053,9 @@ var defaultV2Css = {
         itemSmileyHover: "sd-rating__item-smiley--allowhover",
         itemSmileySelected: "sd-rating__item-smiley--selected",
         itemSmileyDisabled: "sd-rating__item-smiley--disabled",
+        itemSmileyHighlighted: "sd-rating__item-star--highlighted",
+        itemSmileyScaleColored: "sd-rating__item-smiley--scale-colored",
+        itemSmileyRateColored: "sd-rating__item-smiley--rate-colored",
         minText: "sd-rating__item-text sd-rating__min-text",
         itemText: "sd-rating__item-text",
         maxText: "sd-rating__item-text sd-rating__max-text",
@@ -6142,7 +6182,8 @@ var defaultV2Css = {
         root: "sv-list__container sd-list",
         item: "sv-list__item sd-list__item",
         itemBody: "sv-list__item-body sd-list__item-body",
-        itemSelected: "sv-list__item--selected sd-list__item--selected"
+        itemSelected: "sv-list__item--selected sd-list__item--selected",
+        itemFocused: "sv-list__item--focused sd-list__item--focused",
     },
     actionBar: {
         root: "sd-action-bar",
@@ -7415,7 +7456,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;
     };
@@ -8241,6 +8282,11 @@ var DropdownListModel = /** @class */ (function (_super) {
             this.filterString = undefined;
         }
     };
+    DropdownListModel.prototype.clear = function () {
+        this.inputString = null;
+        this.hintString = "";
+        this.resetFilterString();
+    };
     DropdownListModel.prototype.onSetFilterString = function () {
         var _this = this;
         if (!!this.filterString && !this.popupModel.isVisible) {
@@ -8401,9 +8447,6 @@ var DropdownListModel = /** @class */ (function (_super) {
     };
     DropdownListModel.prototype.onClear = function (event) {
         this.question.clearValue();
-        this.inputString = null;
-        this.hintString = "";
-        this.resetFilterString();
         if (event) {
             event.preventDefault();
             event.stopPropagation();
@@ -8524,6 +8567,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();
     };
@@ -8741,6 +8793,10 @@ var DropdownMultiSelectListModel = /** @class */ (function (_super) {
         this.question.renderedValue = newValue;
         this.updateListState();
     };
+    DropdownMultiSelectListModel.prototype.clear = function () {
+        _super.prototype.clear.call(this);
+        this.syncFilterStringPlaceholder();
+    };
     DropdownMultiSelectListModel.prototype.onClear = function (event) {
         _super.prototype.onClear.call(this, event);
         this.updateListState();
@@ -9532,7 +9588,7 @@ __webpack_require__.r(__webpack_exports__);
 // import "../../main.scss";
 //import "../../modern.scss";
 var Version;
-Version = "" + "1.9.83";
+Version = "" + "1.9.85";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -16256,6 +16312,37 @@ var Helpers = /** @class */ (function () {
         }
         return true;
     };
+    Helpers.compareStrings = function (x, y) {
+        if (!!x)
+            x = x.trim();
+        if (!!y)
+            y = y.trim();
+        if (!x && !y)
+            return 0;
+        if (!x)
+            return -1;
+        if (!y)
+            return 1;
+        if (x === y)
+            return 0;
+        var digitIndex = -1;
+        for (var i = 0; i < x.length && i < y.length; i++) {
+            if (this.isCharDigit(x[i]) && this.isCharDigit(y[i])) {
+                digitIndex = i;
+                break;
+            }
+            if (x[i] !== y[i])
+                break;
+        }
+        if (digitIndex > -1) {
+            var nX = this.getNumberFromStr(x, digitIndex);
+            var nY = this.getNumberFromStr(y, digitIndex);
+            if (!Number.isNaN(nX) && !Number.isNaN(nY) && nX !== nY) {
+                return nX > nY ? 1 : -1;
+            }
+        }
+        return x > y ? 1 : -1;
+    };
     Helpers.isTwoValueEquals = function (x, y, ignoreOrder, caseSensitive, trimStrings) {
         if (ignoreOrder === void 0) { ignoreOrder = false; }
         if (x === y)
@@ -16462,6 +16549,18 @@ var Helpers = /** @class */ (function () {
     Helpers.isCharDigit = function (ch) {
         return ch >= "0" && ch <= "9";
     };
+    Helpers.getNumberFromStr = function (str, index) {
+        if (!this.isCharDigit(str[index]))
+            return NaN;
+        var nStr = "";
+        while (index < str.length && this.isCharDigit(str[index])) {
+            nStr += str[index];
+            index++;
+        }
+        if (!nStr)
+            return NaN;
+        return this.getNumber(nStr);
+    };
     Helpers.countDecimals = function (value) {
         if (Helpers.isNumber(value) && Math.floor(value) !== value) {
             var strs = value.toString().split(".");
@@ -16564,7 +16663,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 +17750,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 +17791,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 +19536,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);
             }
@@ -19608,6 +19713,20 @@ var ListModel = /** @class */ (function (_super) {
             this.onFilterStringChangedCallback(text);
         }
     };
+    ListModel.prototype.scrollToItem = function (selector, ms) {
+        var _this = this;
+        if (ms === void 0) { ms = 0; }
+        setTimeout(function () {
+            if (!_this.listContainerHtmlElement)
+                return;
+            var item = _this.listContainerHtmlElement.querySelector("." + selector);
+            if (item) {
+                setTimeout(function () {
+                    item.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
+                }, ms);
+            }
+        }, ms);
+    };
     ListModel.prototype.setItems = function (items, sortByVisibleIndex) {
         var _this = this;
         if (sortByVisibleIndex === void 0) { sortByVisibleIndex = true; }
@@ -19769,15 +19888,10 @@ var ListModel = /** @class */ (function (_super) {
         }
     };
     ListModel.prototype.scrollToFocusedItem = function () {
-        var _this = this;
-        setTimeout(function () {
-            if (!_this.listContainerHtmlElement)
-                return;
-            var item = _this.listContainerHtmlElement.querySelector("." + _this.getDefaultCssClasses().itemFocused);
-            if (item) {
-                item.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
-            }
-        }, 0);
+        this.scrollToItem(this.getDefaultCssClasses().itemFocused);
+    };
+    ListModel.prototype.scrollToSelectedItem = function () {
+        this.scrollToItem(this.getDefaultCssClasses().itemSelected, 110);
     };
     ListModel.prototype.addScrollEventListener = function (handler) {
         if (!!handler) {
@@ -19792,6 +19906,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 +21411,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",
@@ -26479,7 +26599,7 @@ var PageModel = /** @class */ (function (_super) {
         configurable: true
     });
     PageModel.prototype.calcCssClasses = function (css) {
-        var classes = { page: {}, pageTitle: "", pageDescription: "", row: "", rowMultiple: "", pageRow: "" };
+        var classes = { page: {}, pageTitle: "", pageDescription: "", row: "", rowMultiple: "", pageRow: "", rowCompact: "" };
         this.copyCssClasses(classes.page, css.page);
         if (!!css.pageTitle) {
             classes.pageTitle = css.pageTitle;
@@ -26496,6 +26616,9 @@ var PageModel = /** @class */ (function (_super) {
         if (!!css.rowMultiple) {
             classes.rowMultiple = css.rowMultiple;
         }
+        if (!!css.rowCompact) {
+            classes.rowCompact = css.rowCompact;
+        }
         if (this.survey) {
             this.survey.updatePageCssClasses(this, classes);
         }
@@ -26673,7 +26796,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",
     },
@@ -26964,6 +27087,7 @@ var QuestionRowModel = /** @class */ (function (_super) {
     QuestionRowModel.prototype.getRowCss = function () {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]()
             .append(this.panel.cssClasses.row)
+            .append(this.panel.cssClasses.rowCompact, this.panel["isCompact"])
             .append(this.panel.cssClasses.pageRow, this.panel.isPage || (!!this.panel.originalPage && !this.panel.survey.isShowingPreview))
             .append(this.panel.cssClasses.rowMultiple, this.visibleElements.length > 1)
             .toString();
@@ -27212,12 +27336,15 @@ var PanelModelBase = /** @class */ (function (_super) {
         configurable: true
     });
     PanelModelBase.prototype.calcCssClasses = function (css) {
-        var classes = { panel: {}, error: {}, row: "", rowMultiple: "", pageRow: "" };
+        var classes = { panel: {}, error: {}, row: "", rowMultiple: "", pageRow: "", rowCompact: "" };
         this.copyCssClasses(classes.panel, css.panel);
         this.copyCssClasses(classes.error, css.error);
         if (!!css.pageRow) {
             classes.pageRow = css.pageRow;
         }
+        if (!!css.rowCompact) {
+            classes.rowCompact = css.rowCompact;
+        }
         if (!!css.row) {
             classes.row = css.row;
         }
@@ -28909,6 +29036,7 @@ var defaultCss = {
         slider: "sv-boolean__slider",
         label: "sv-boolean__label ",
         disabledLabel: "sv-boolean__label--disabled",
+        sliderGhost: "sv-boolean__thumb-ghost",
         materialDecorator: "sv-item__decorator sv-boolean__decorator",
         itemDecorator: "sv-item__svg sv-boolean__svg",
         checkedPath: "sv-boolean__checked-path",
@@ -29352,6 +29480,7 @@ var defaultCss = {
         slider: "sv-boolean__slider",
         label: "sv-boolean__label ",
         disabledLabel: "sv-boolean__label--disabled",
+        sliderGhost: "sv-boolean__thumb-ghost",
         materialDecorator: "sv-item__decorator sv-boolean__decorator",
         itemDecorator: "sv-item__svg sv-boolean__svg",
         checkedPath: "sv-boolean__checked-path",
@@ -31051,8 +31180,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 +31510,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 +31741,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
@@ -33092,9 +33227,15 @@ var Question = /** @class */ (function (_super) {
         return 1;
     };
     Question.prototype.getCorrectAnswerCount = function () {
-        return this.isTwoValueEquals(this.value, this.correctAnswer, !_settings__WEBPACK_IMPORTED_MODULE_8__["settings"].comparator.caseSensitive, true)
-            ? 1
-            : 0;
+        return this.checkIfAnswerCorrect() ? 1 : 0;
+    };
+    Question.prototype.checkIfAnswerCorrect = function () {
+        var isEqual = this.isTwoValueEquals(this.value, this.correctAnswer, !_settings__WEBPACK_IMPORTED_MODULE_8__["settings"].comparator.caseSensitive, true);
+        var options = { result: isEqual, correctAnswer: isEqual ? 1 : 0 };
+        if (!!this.survey) {
+            this.survey.onCorrectQuestionAnswer(this, options);
+        }
+        return options.result;
     };
     /**
     * Returns `true` if a question answer matches the `correctAnswer` property value.
@@ -34185,7 +34326,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
             _this.onVisibleChoicesChanged();
         });
         _this.registerPropertyChangedHandlers(["hideIfChoicesEmpty"], function () {
-            _this.updateVisibilityBasedOnChoices();
+            _this.onVisibleChanged();
         });
         _this.createNewArray("visibleChoices");
         _this.setNewRestfulProperty();
@@ -34233,8 +34374,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;
@@ -34499,7 +34643,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 () {
@@ -34722,10 +34866,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]);
                     }
                 }
             });
@@ -35057,7 +35201,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);
@@ -35201,12 +35345,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 () {
@@ -35473,17 +35619,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();
@@ -35497,11 +35644,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     };
     QuestionSelectBase.prototype.sortArray = function (array, mult) {
         return array.sort(function (a, b) {
-            if (a.calculatedText < b.calculatedText)
-                return -1 * mult;
-            if (a.calculatedText > b.calculatedText)
-                return 1 * mult;
-            return 0;
+            return _helpers__WEBPACK_IMPORTED_MODULE_8__["Helpers"].compareStrings(a.calculatedText, b.calculatedText) * mult;
         });
     };
     QuestionSelectBase.prototype.randomizeArray = function (array) {
@@ -36302,6 +36445,7 @@ var QuestionBooleanModel = /** @class */ (function (_super) {
             .append(css.item)
             .append(css.itemOnError, this.errors.length > 0)
             .append(css.itemDisabled, this.isReadOnly)
+            .append(css.itemHover, !this.isDesignMode)
             .append(css.itemChecked, !!this.booleanValue)
             .append(css.itemIndeterminate, this.booleanValue === null)
             .toString();
@@ -38684,6 +38828,13 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
         }
         return _super.prototype.hasUnknownValue.call(this, val, includeOther, isFilteredChoices, checkEmptyValue);
     };
+    QuestionDropdownModel.prototype.needConvertRenderedOtherToDataValue = function () {
+        var _a;
+        var val = (_a = this.otherValue) === null || _a === void 0 ? void 0 : _a.trim();
+        if (!val)
+            return false;
+        return _super.prototype.hasUnknownValue.call(this, val, true, false);
+    };
     QuestionDropdownModel.prototype.onVisibleChoicesChanged = function () {
         _super.prototype.onVisibleChoicesChanged.call(this);
         if (this.popupModel) {
@@ -38697,8 +38848,10 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
         return this.inputId + "_0";
     };
     QuestionDropdownModel.prototype.clearValue = function () {
+        var _a;
         _super.prototype.clearValue.call(this);
         this.lastSelectedItemValue = null;
+        (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.clear();
     };
     QuestionDropdownModel.prototype.onClick = function (e) {
         !!this.onOpenedCallBack && this.onOpenedCallBack();
@@ -38711,6 +38864,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);
@@ -43172,7 +43331,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) {
@@ -43215,6 +43375,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) {
@@ -45571,7 +45738,12 @@ var QuestionMatrixDropdownRenderedCell = /** @class */ (function () {
                     return this.cell.column.locCellHint.renderedHtml;
                 }
                 if (this.cell.column.isShowInMultipleColumns) {
-                    return this.item.locText.renderedHtml;
+                    if (!!this.item) {
+                        return this.item.locText.renderedHtml;
+                    }
+                    else {
+                        return "";
+                    }
                 }
             }
             if (this.question && this.question.isVisible) {
@@ -45768,14 +45940,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++) {
@@ -45939,12 +46128,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) {
@@ -46421,17 +46614,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) {
@@ -46561,6 +46743,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.
@@ -47204,6 +47400,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;
@@ -47212,6 +47453,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)
@@ -48200,17 +48443,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 ||
@@ -48250,6 +48494,7 @@ var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from
 
 
 
+
 var QuestionPanelDynamicItemTextProcessor = /** @class */ (function (_super) {
     __extends(QuestionPanelDynamicItemTextProcessor, _super);
     function QuestionPanelDynamicItemTextProcessor(data, panelItem, variableName) {
@@ -48325,7 +48570,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;
@@ -48365,11 +48610,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)
@@ -48394,7 +48639,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();
@@ -48441,7 +48688,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))
   */
@@ -48449,7 +48696,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();
@@ -48473,6 +48719,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();
         });
@@ -48525,7 +48772,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;
@@ -48588,7 +48835,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
@@ -48601,7 +48848,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
@@ -48624,9 +48871,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
@@ -48662,7 +48931,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
@@ -48988,7 +49257,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;
             }
         }); });
@@ -49001,14 +49270,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)
@@ -49146,8 +49415,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);
@@ -49195,7 +49464,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.
@@ -49268,7 +49537,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");
@@ -49562,7 +49839,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);
         }
     };
@@ -49624,12 +49901,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++) {
@@ -49661,8 +49948,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;
@@ -49691,7 +49978,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;
@@ -49756,8 +50043,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();
@@ -49996,7 +50283,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;
@@ -50011,10 +50298,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 }
             }));
         }
@@ -50027,7 +50314,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);
@@ -50059,15 +50346,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;
     };
@@ -50104,7 +50391,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) {
@@ -50268,12 +50555,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)
@@ -50283,33 +50570,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();
@@ -50347,7 +50634,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",
@@ -50378,37 +50665,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 }
@@ -50437,22 +50724,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")
@@ -50460,10 +50747,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;
@@ -50485,8 +50774,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();
@@ -50500,12 +50788,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",
@@ -50515,6 +50803,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",
@@ -50532,7 +50821,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",
@@ -50568,6 +50857,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",
@@ -50582,7 +50872,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);
 });
 
@@ -51191,6 +51481,9 @@ var RenderedRatingItem = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: "" })
     ], RenderedRatingItem.prototype, "text", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
+    ], RenderedRatingItem.prototype, "style", void 0);
     return RenderedRatingItem;
 }(_base__WEBPACK_IMPORTED_MODULE_7__["Base"]));
 
@@ -51204,21 +51497,33 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     function QuestionRatingModel(name) {
         var _this = _super.call(this, name) || this;
         _this._syncPropertiesChanging = false;
+        _this.initColors();
         _this.createItemValues("rateValues");
         _this.createRenderedRateItems();
         _this.createLocalizableString("ratingOptionsCaption", _this, false, true);
-        _this.registerFunctionOnPropertiesValueChanged(["rateMin", "rateMax", "rateDisplayMode",
+        _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(["rateColorMode", "scaleColorMode"], function () {
+            _this.initColors();
+        });
         _this.registerFunctionOnPropertiesValueChanged(["autoGenerate"], function () {
             if (!_this.autoGenerate && _this.rateValues.length === 0) {
                 _this.setPropertyValue("rateValues", _this.visibleRateValues);
             }
-            if (_this.autoGenerate)
+            if (_this.autoGenerate) {
+                _this.rateValues.length = 0;
                 _this.updateRateMax();
+            }
             _this.createRenderedRateItems();
         });
         _this.createLocalizableString("minRateDescription", _this, true);
@@ -51226,12 +51531,19 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         _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;
     };
     QuestionRatingModel.prototype.endLoadingFromJson = function () {
         _super.prototype.endLoadingFromJson.call(this);
+        this.initColors();
         this.hasMinRateDescription = !!this.minRateDescription;
         this.hasMaxRateDescription = !!this.maxRateDescription;
         if (this.jsonObj.rateMin !== undefined && this.jsonObj.rateCount !== undefined && this.jsonObj.rateMax === undefined) {
@@ -51243,6 +51555,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         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) {
@@ -51265,12 +51578,19 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         this.rateMin = this.rateMax - this.rateStep * (this.rateCount - 1);
     };
     QuestionRatingModel.prototype.updateRateCount = function () {
+        var newCount = 0;
         if (this.useRateValues()) {
-            this.rateCount = this.rateValues.length;
+            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;
+        if (this.rateValues.length > newCount)
+            this.rateValues.length = newCount;
     };
     QuestionRatingModel.prototype.initPropertyDependencies = function () {
         var _this = this;
@@ -51280,11 +51600,14 @@ var QuestionRatingModel = /** @class */ (function (_super) {
             }
             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)));
+                    }
                 }
             }
         });
@@ -51378,6 +51701,39 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionRatingModel.prototype.initColors = function () {
+        if (this.colorMode === "monochrome")
+            return;
+        if (!document)
+            return;
+        if (QuestionRatingModel.badColor && QuestionRatingModel.normalColor && QuestionRatingModel.goodColor)
+            return;
+        function getRGBColor(varName) {
+            var style = getComputedStyle(document.documentElement);
+            var str = style.getPropertyValue && style.getPropertyValue(varName);
+            if (!str)
+                return null;
+            var ctx = document.createElement("canvas").getContext("2d");
+            ctx.fillStyle = str;
+            var newStr = ctx.fillStyle;
+            if (newStr.startsWith("rgba")) {
+                return newStr.substring(5, newStr.length - 1).split(",").map(function (c) { return +(c.trim()); });
+            }
+            var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(newStr);
+            return result ? [
+                parseInt(result[1], 16),
+                parseInt(result[2], 16),
+                parseInt(result[3], 16),
+                1
+            ] : null;
+        }
+        QuestionRatingModel.badColor = getRGBColor("--sd-rating-bad-color");
+        QuestionRatingModel.normalColor = getRGBColor("--sd-rating-normal-color");
+        QuestionRatingModel.goodColor = getRGBColor("--sd-rating-good-color");
+        QuestionRatingModel.badColorLight = getRGBColor("--sd-rating-bad-color-light");
+        QuestionRatingModel.normalColorLight = getRGBColor("--sd-rating-normal-color-light");
+        QuestionRatingModel.goodColorLight = getRGBColor("--sd-rating-good-color-light");
+    };
     QuestionRatingModel.prototype.getDisplayValueCore = function (keysAsText, value) {
         var res = _itemvalue__WEBPACK_IMPORTED_MODULE_0__["ItemValue"].getTextOrHtmlByValue(this.visibleRateValues, value);
         return !!res ? res : value;
@@ -51417,13 +51773,16 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         if (this.rateType == "smileys" && rateValues.length > 10)
             rateValues = rateValues.slice(0, 10);
         this.renderedRateItems = rateValues.map(function (v, i) {
+            var renderedItem = null;
             if (_this.displayRateDescriptionsAsExtremeItems) {
                 if (i == 0)
-                    return new RenderedRatingItem(v, _this.minRateDescription && _this.locMinRateDescription || v.locText);
+                    renderedItem = new RenderedRatingItem(v, _this.minRateDescription && _this.locMinRateDescription || v.locText);
                 if (i == rateValues.length - 1)
-                    return new RenderedRatingItem(v, _this.maxRateDescription && _this.locMaxRateDescription || v.locText);
+                    renderedItem = new RenderedRatingItem(v, _this.maxRateDescription && _this.locMaxRateDescription || v.locText);
             }
-            return new RenderedRatingItem(v);
+            if (!renderedItem)
+                renderedItem = new RenderedRatingItem(v);
+            return renderedItem;
         });
     };
     QuestionRatingModel.prototype.correctValue = function (value, step) {
@@ -51564,12 +51923,19 @@ 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;
+        if (this.rateType !== "stars") {
+            item.highlight = "highlighted";
+            return;
+        }
         for (var i = 0; i < this.renderedRateItems.length; i++) {
             this.renderedRateItems[i].highlight = high && !selected && "highlighted" || !high && selected && "unhighlighted" || "none";
             if (this.renderedRateItems[i] == item)
@@ -51605,6 +51971,49 @@ 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.getRenderedItemColor = function (index, light) {
+        var startColor = light ? QuestionRatingModel.badColorLight : QuestionRatingModel.badColor;
+        var endColor = light ? QuestionRatingModel.goodColorLight : QuestionRatingModel.goodColor;
+        var normalIndex = (this.rateCount - 1) / 2.0;
+        var middleColor = light ? QuestionRatingModel.normalColorLight : QuestionRatingModel.normalColor;
+        if (index < normalIndex) {
+            endColor = middleColor;
+        }
+        else {
+            startColor = middleColor;
+            index -= normalIndex;
+        }
+        if (!startColor || !endColor)
+            return null;
+        var curColor = [0, 0, 0, 0];
+        for (var i = 0; i < 4; i++) {
+            curColor[i] = startColor[i] + (endColor[i] - startColor[i]) * index / normalIndex;
+            if (i < 3)
+                curColor[i] = Math.trunc(curColor[i]);
+        }
+        return "rgba(" + curColor[0] + ", " + curColor[1] + ", " + curColor[2] + ", " + curColor[3] + ")";
+    };
+    QuestionRatingModel.prototype.getItemStyle = function (item, highlight) {
+        if (highlight === void 0) { highlight = "none"; }
+        if (this.scaleColorMode === "monochrome" && this.rateColorMode == "default")
+            return { borderColor: null, fill: null, backgroundColor: null };
+        var index = this.visibleRateValues.indexOf(item);
+        var color = this.getRenderedItemColor(index, false);
+        if (this.value != this.renderedRateItems[index].value) {
+            var colorLight = this.getRenderedItemColor(index, true);
+            if (highlight == "highlighted" && this.scaleColorMode === "colored")
+                return { borderColor: color, fill: color, backgroundColor: colorLight };
+            if (this.scaleColorMode === "colored" && this.errors.length == 0)
+                return { borderColor: color, fill: color, backgroundColor: null };
+            return { borderColor: null, fill: null, backgroundColor: null };
+        }
+        else {
+            return { borderColor: color, fill: null, backgroundColor: color };
+        }
+    };
     QuestionRatingModel.prototype.getItemClass = function (item, highlight) {
         var _this = this;
         if (highlight === void 0) { highlight = "none"; }
@@ -51629,6 +52038,8 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         var itemitemOnErrorClass = this.cssClasses.itemOnError;
         var itemHighlightedClass = null;
         var itemUnhighlightedClass = null;
+        var itemScaleColoredClass = null;
+        var itemRateColoredClass = null;
         if (this.isStar) {
             itemClass = this.cssClasses.itemStar;
             itemSelectedClass = this.cssClasses.itemStarSelected;
@@ -51644,6 +52055,9 @@ var QuestionRatingModel = /** @class */ (function (_super) {
             itemDisabledClass = this.cssClasses.itemSmileyDisabled;
             itemHoverClass = this.cssClasses.itemSmileyHover;
             itemitemOnErrorClass = this.cssClasses.itemSmileyOnError;
+            itemHighlightedClass = this.cssClasses.itemSmileyHighlighted;
+            itemScaleColoredClass = this.cssClasses.itemSmileyScaleColored;
+            itemRateColoredClass = this.cssClasses.itemSmileyRateColored;
         }
         var hasFixedSize = !this.isStar &&
             !this.isSmiley &&
@@ -51658,6 +52072,8 @@ var QuestionRatingModel = /** @class */ (function (_super) {
             .append(itemDisabledClass, this.isReadOnly)
             .append(itemHoverClass, allowHover)
             .append(itemHighlightedClass, isHighlighted)
+            .append(itemScaleColoredClass, this.scaleColorMode == "colored")
+            .append(itemRateColoredClass, this.rateColorMode == "scale" && isSelected)
             .append(itemUnhighlightedClass, isUnhighlighted)
             .append(itemitemOnErrorClass, this.errors.length > 0)
             .append(this.cssClasses.itemFixedSize, hasFixedSize)
@@ -51777,6 +52193,12 @@ 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);
@@ -51815,7 +52237,10 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     ], QuestionRatingModel.prototype, "rateDisplayMode", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: "monochrome" })
-    ], QuestionRatingModel.prototype, "smileysColorMode", void 0);
+    ], QuestionRatingModel.prototype, "scaleColorMode", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: "scale" })
+    ], QuestionRatingModel.prototype, "rateColorMode", void 0);
     return QuestionRatingModel;
 }(_question__WEBPACK_IMPORTED_MODULE_1__["Question"]));
 
@@ -51829,19 +52254,47 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("rating", [
         choices: ["labels", "stars", "smileys"],
         visibleIndex: 0
     },
+    {
+        name: "scaleColorMode",
+        category: "rateValues",
+        default: "monochrome",
+        choices: ["monochrome", "colored"],
+        visibleIf: function (obj) {
+            return obj.rateDisplayMode == "smileys";
+        },
+        visibleIndex: 1
+    },
+    {
+        name: "rateColorMode",
+        category: "rateValues",
+        default: "scale",
+        choices: ["default", "scale"],
+        visibleIf: function (obj) {
+            return obj.rateDisplayMode == "smileys" && obj.scaleColorMode == "monochrome";
+        },
+        visibleIndex: 2
+    },
     {
         name: "autoGenerate",
-        displayName: "How to specify rate values?",
         category: "rateValues",
         default: true,
         choices: [{ value: true, text: "Generate" }, { value: false, text: "Enter manually" }],
-        visibleIndex: 2
+        visibleIndex: 4
     },
     {
         name: "rateCount:number",
         default: 5,
         category: "rateValues",
-        visibleIndex: 1
+        visibleIndex: 3,
+        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[]",
@@ -51852,7 +52305,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("rating", [
         visibleIf: function (obj) {
             return !obj.autoGenerate;
         },
-        visibleIndex: 3
+        visibleIndex: 5
     },
     {
         name: "rateMin:number", default: 1,
@@ -51862,7 +52315,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("rating", [
         visibleIf: function (obj) {
             return !!obj.autoGenerate;
         },
-        visibleIndex: 4
+        visibleIndex: 6
     },
     {
         name: "rateMax:number", default: 5,
@@ -51872,7 +52325,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("rating", [
         visibleIf: function (obj) {
             return !!obj.autoGenerate;
         },
-        visibleIndex: 5
+        visibleIndex: 7
     },
     {
         name: "rateStep:number", default: 1, minValue: 0.1,
@@ -51886,7 +52339,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("rating", [
         visibleIf: function (obj) {
             return !!obj.autoGenerate;
         },
-        visibleIndex: 6
+        visibleIndex: 8
     },
     {
         name: "minRateDescription",
@@ -51906,7 +52359,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("rating", [
         default: "auto",
         choices: ["auto", "buttons", "dropdown"],
         visibleIndex: 20
-    },
+    }
 ], function () {
     return new QuestionRatingModel("");
 }, "question");
@@ -52408,6 +52861,13 @@ var QuestionTagboxModel = /** @class */ (function (_super) {
         }
         return _super.prototype.hasUnknownValue.call(this, val, includeOther, isFilteredChoices, checkEmptyValue);
     };
+    QuestionTagboxModel.prototype.needConvertRenderedOtherToDataValue = function () {
+        var _a;
+        var val = (_a = this.otherValue) === null || _a === void 0 ? void 0 : _a.trim();
+        if (!val)
+            return false;
+        return _super.prototype.hasUnknownValue.call(this, val, true, false);
+    };
     QuestionTagboxModel.prototype.onVisibleChoicesChanged = function () {
         _super.prototype.onVisibleChoicesChanged.call(this);
         if (this.popupModel) {
@@ -52445,6 +52905,16 @@ 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();
+        }
+    };
+    QuestionTagboxModel.prototype.clearValue = function () {
+        _super.prototype.clearValue.call(this);
+        this.dropdownListModel.clear();
+    };
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])()
     ], QuestionTagboxModel.prototype, "allowClear", void 0);
@@ -52635,7 +53105,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) {
@@ -52895,8 +53365,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))
@@ -52980,10 +53449,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", {
         /**
@@ -53057,7 +53526,6 @@ var minMaxTypes = [
     "number",
     "range",
     "date",
-    "datetime",
     "datetime-local",
     "month",
     "time",
@@ -53934,12 +54402,14 @@ var SurveyQuestionBoolean = /** @class */ (function (_super) {
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { ref: this.checkRef, type: "checkbox", name: this.question.name, value: this.question.booleanValue === null
                         ? ""
                         : this.question.booleanValue, id: this.question.inputId, className: cssClasses.control, disabled: this.isDisplayMode, checked: this.question.booleanValue || false, onChange: this.handleOnChange, "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__["createElement"]("span", { className: this.question.getLabelCss(false), onClick: function (event) { return _this.handleOnLabelClick(event, false); } }, this.renderLocString(this.question.locLabelFalse)),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.sliderGhost, onClick: function (event) { return _this.handleOnLabelClick(event, false); } },
+                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.getLabelCss(false) }, this.renderLocString(this.question.locLabelFalse))),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.switch, onClick: this.handleOnSwitchClick },
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: cssClasses.slider }, this.question.isDeterminated && cssClasses.sliderText ?
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: cssClasses.sliderText }, this.renderLocString(this.question.getCheckedLabel()))
                         : null)),
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.getLabelCss(true), onClick: function (event) { return _this.handleOnLabelClick(event, true); } }, this.renderLocString(this.question.locLabelTrue)))));
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.sliderGhost, onClick: function (event) { return _this.handleOnLabelClick(event, true); } },
+                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.getLabelCss(true) }, this.renderLocString(this.question.locLabelTrue))))));
     };
     return SurveyQuestionBoolean;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["SurveyQuestionElementBase"]));
@@ -54120,7 +54590,7 @@ var SurveyActionBarItem = /** @class */ (function (_super) {
         var title = this.item.tooltip || this.item.title;
         var buttonContent = this.renderButtonContent();
         var tabIndex = this.item.disableTabStop ? -1 : undefined;
-        var button = Object(_reactSurvey__WEBPACK_IMPORTED_MODULE_3__["attachKey2click"])(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { className: className, type: "button", disabled: this.item.disabled, onClick: function () { return _this.item.action(_this.item); }, title: title, tabIndex: tabIndex, "aria-checked": this.item.ariaChecked, "aria-expanded": this.item.ariaExpanded, role: this.item.ariaRole }, buttonContent), null, { processEsc: false });
+        var button = Object(_reactSurvey__WEBPACK_IMPORTED_MODULE_3__["attachKey2click"])(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { className: className, type: "button", disabled: this.item.disabled, onClick: function (args) { return _this.item.action(_this.item, _this.item.getIsTrusted(args)); }, title: title, tabIndex: tabIndex, "aria-checked": this.item.ariaChecked, "aria-expanded": this.item.ariaExpanded, role: this.item.ariaRole }, buttonContent), null, { processEsc: false });
         return button;
     };
     return SurveyActionBarItem;
@@ -55661,7 +56131,7 @@ var RatingItemSmiley = /** @class */ (function (_super) {
     };
     RatingItemSmiley.prototype.render = function () {
         var _this = this;
-        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { className: this.question.getItemClass(this.item.itemValue), onMouseOver: function (e) { return _this.question.onItemMouseIn(_this.item); }, onMouseOut: function (e) { return _this.question.onItemMouseOut(_this.item); } },
+        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { style: this.question.getItemStyle(this.item.itemValue, this.item.highlight), className: this.question.getItemClass(this.item.itemValue), onMouseOver: function (e) { return _this.question.onItemMouseIn(_this.item); }, onMouseOut: function (e) { return _this.question.onItemMouseOut(_this.item); } },
             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(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { size: "auto", iconName: this.question.getItemSmileyIconName(this.item.itemValue), title: this.item.text })));
     };
@@ -55818,7 +56288,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)));
     };
@@ -59691,7 +60161,7 @@ var SurveyElementBase = /** @class */ (function (_super) {
     };
     SurveyElementBase.renderQuestionDescription = function (question) {
         var descriptionText = SurveyElementBase.renderLocString(question.locDescription);
-        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: question.cssDescription }, descriptionText);
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { style: question.isDescriptionVisible ? undefined : { display: "none" }, className: question.cssDescription }, descriptionText);
     };
     SurveyElementBase.prototype.componentDidMount = function () {
         this.makeBaseElementsReact();
@@ -63317,11 +63787,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,
@@ -63358,7 +63828,6 @@ var settings = {
         inputTypes: [
             "color",
             "date",
-            "datetime",
             "datetime-local",
             "email",
             "month",
@@ -64829,6 +65298,13 @@ var SurveyElement = /** @class */ (function (_super) {
     SurveyElement.prototype.shouldAddRunnerStyles = function () {
         return !this.isDesignMode && this.isDefaultV2Theme;
     };
+    Object.defineProperty(SurveyElement.prototype, "isCompact", {
+        get: function () {
+            return this.survey && this.survey["isCompact"];
+        },
+        enumerable: false,
+        configurable: true
+    });
     SurveyElement.prototype.getHasFrameV2 = function () {
         return this.shouldAddRunnerStyles() && (!this.hasParent && this.isSingleInRow);
     };
@@ -64837,7 +65313,8 @@ var SurveyElement = /** @class */ (function (_super) {
     };
     SurveyElement.prototype.getCssRoot = function (cssClasses) {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_6__["CssClassBuilder"]()
-            .append(cssClasses.withFrame, this.getHasFrameV2())
+            .append(cssClasses.withFrame, this.getHasFrameV2() && !this.isCompact)
+            .append(cssClasses.compact, this.isCompact && this.getHasFrameV2())
             .append(cssClasses.collapsed, !!this.isCollapsed)
             .append(cssClasses.expanded, !!this.isExpanded)
             .append(cssClasses.nested, this.getIsNested())
@@ -64970,6 +65447,13 @@ var SurveyElement = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SurveyElement.prototype, "isDescriptionVisible", {
+        get: function () {
+            return (!!this.description || this.isDesignMode);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(SurveyElement.prototype, "rootStyle", {
         get: function () {
             var style = {};
@@ -65844,6 +66328,7 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.hideRequiredErrors = false;
         //#endregion
         _this._isMobile = false;
+        _this._isCompact = false;
         _this._isDesignMode = false;
         /**
          * Gets or sets whether the survey must ignore validation like required questions and others, on `nextPage` and `completeLastPage` function calls. The default is `false`.
@@ -67217,6 +67702,19 @@ var SurveyModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SurveyModel.prototype, "isCompact", {
+        get: function () {
+            return this._isCompact;
+        },
+        set: function (newVal) {
+            if (newVal !== this._isCompact) {
+                this._isCompact = newVal;
+                this.updateElementCss();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     SurveyModel.prototype.isLogoImageChoosen = function () {
         return this.locLogo.renderedHtml;
     };
@@ -68795,7 +69293,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";
@@ -71927,6 +72425,12 @@ var SurveyModel = /** @class */ (function (_super) {
     SurveyModel.prototype.getInCorrectAnswerCount = function () {
         return this.getCorrectedAnswerCountCore(false);
     };
+    SurveyModel.prototype.onCorrectQuestionAnswer = function (question, options) {
+        if (this.onIsAnswerCorrect.isEmpty)
+            return;
+        options.question = question;
+        this.onIsAnswerCorrect.fire(this, options);
+    };
     SurveyModel.prototype.getCorrectedAnswerCountCore = function (isCorrect) {
         var questions = this.getQuizQuestions();
         var counter = 0;
@@ -72521,12 +73025,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);
                     }
                 }
@@ -72585,6 +73089,9 @@ var SurveyModel = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], SurveyModel.prototype, "_isMobile", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
+    ], SurveyModel.prototype, "_isCompact", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], SurveyModel.prototype, "renderBackgroundImage", void 0);