survey-react 1.10.1 → 1.10.3

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.10.1
+ * surveyjs - Survey JavaScript library v1.10.3
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -742,11 +742,12 @@ function createDropdownActionModelAdvanced(actionOptions, listOptions, popupOpti
         }
         listOptions.onSelectionChanged(item);
         innerPopupModel.toggleVisibility();
-    }, listOptions.allowSelection, listOptions.selectedItem, listOptions.onFilterStringChangedCallback);
+    }, listOptions.allowSelection, listOptions.selectedItem);
     listModel.locOwner = locOwner;
-    var innerPopupModel = new _popup__WEBPACK_IMPORTED_MODULE_4__["PopupModel"]("sv-list", { model: listModel }, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.verticalPosition, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.horizontalPosition, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.showPointer, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.isModal, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.onCancel, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.onApply, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.onHide, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.onShow, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.cssClass, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.title, function () {
-        listModel.dispose();
-    });
+    listModel.setOnFilterStringChangedCallback(listOptions.onFilterStringChangedCallback);
+    var options = popupOptions || {};
+    options.onDispose = function () { listModel.dispose(); };
+    var innerPopupModel = new _popup__WEBPACK_IMPORTED_MODULE_4__["PopupModel"]("sv-list", { model: listModel }, options);
     innerPopupModel.displayMode = popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.displayMode;
     var newActionOptions = Object.assign({}, actionOptions, {
         component: "sv-action-bar-item-dropdown",
@@ -770,7 +771,6 @@ var BaseAction = /** @class */ (function (_super) {
     function BaseAction() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.rendredIdValue = BaseAction.getNextRendredId();
-        _this.iconSize = 24;
         return _this;
     }
     BaseAction.getNextRendredId = function () { return BaseAction.renderedId++; };
@@ -973,7 +973,7 @@ var BaseAction = /** @class */ (function (_super) {
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
     ], BaseAction.prototype, "iconName", void 0);
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: 24 })
     ], BaseAction.prototype, "iconSize", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
@@ -994,9 +994,9 @@ var Action = /** @class */ (function (_super) {
         //Object.assign(this, item) to support IE11
         if (!!innerItem) {
             for (var key in innerItem) {
-                if (key !== "locTitle") {
-                    _this[key] = innerItem[key];
-                }
+                if (key === "locTitle" || key === "title" && !!_this.locTitle && !!_this.title)
+                    continue;
+                _this[key] = innerItem[key];
             }
         }
         if (!!_this.locTitleName) {
@@ -1847,6 +1847,8 @@ var Base = /** @class */ (function () {
          * A new value for the property.
          * - `options.oldValue`: `any`\
          * An old value of the property. If the property is an array, `oldValue` contains the same array as `newValue` does.
+         *
+         * If you need to add and remove property change event handlers dynamically, use the [`registerPropertyChangedHandlers`](#registerPropertyChangedHandlers) and [`unregisterPropertyChangedHandlers`](#unregisterPropertyChangedHandlers) methods instead.
          */
         this.onPropertyChanged = this.addEvent();
         /**
@@ -2242,8 +2244,6 @@ var Base = /** @class */ (function () {
      * @param val A new value for the property.
      */
     Base.prototype.setPropertyValue = function (name, val) {
-        if (name) {
-        }
         if (!this.isLoadingFromJson) {
             var prop = this.getPropertyByName(name);
             if (!!prop) {
@@ -2419,9 +2419,11 @@ var Base = /** @class */ (function () {
         return res;
     };
     /**
-     * Registers a function to call when a property value changes.
+     * Registers a single value change handler for one or multiple properties.
+     *
+     * The `registerPropertyChangedHandlers` and [`unregisterPropertyChangedHandlers`](#unregisterPropertyChangedHandlers) methods allow you to manage property change event handlers dynamically. If you only need to attach an event handler without removing it afterwards, you can use the [`onPropertyChanged`](#onPropertyChanged) event instead.
      * @param propertyNames An array of one or multiple property names.
-     * @param handler A function to call when one of the listed properties change.
+     * @param handler A function to call when one of the listed properties change. Accepts a new property value as an argument.
      * @param key *(Optional)* A key that identifies the current registration. If a function for one of the properties is already registered with the same key, the function will be overwritten. You can also use the key to subsequently unregister handlers.
      * @see unregisterPropertyChangedHandlers
      */
@@ -6037,6 +6039,8 @@ var defaultV2Css = {
         selectWrapper: "sv-dropdown_select-wrapper",
         controlValue: "sd-dropdown__value",
         controlDisabled: "sd-input--disabled",
+        controlReadOnly: "sd-input--readonly",
+        controlPreview: "sd-input--preview",
         controlEmpty: "sd-dropdown--empty",
         filterStringInput: "sd-dropdown__filter-string-input",
         chevronButton: "sd-dropdown_chevron-button",
@@ -7366,17 +7370,12 @@ var DragDropDOMAdapter = /** @class */ (function () {
     DragDropDOMAdapter.prototype.getShortcutRightCoordinate = function (currentX, shortcutWidth, shortcutXOffset) {
         return currentX + shortcutWidth - shortcutXOffset;
     };
-    DragDropDOMAdapter.prototype.doScroll = function (clientY, clientX) {
+    DragDropDOMAdapter.prototype.requestAnimationFrame = function (callback) {
+        return requestAnimationFrame(callback);
+    };
+    DragDropDOMAdapter.prototype.scrollByDrag = function (scrollableParentNode, clientY, clientX) {
         var _this = this;
-        cancelAnimationFrame(this.scrollIntervalId);
         var startScrollBoundary = 100;
-        var displayProp = this.draggedElementShortcut.style.display;
-        //this.draggedElementShortcut.hidden = true;
-        this.draggedElementShortcut.style.display = "none";
-        var dragOverNode = this.documentOrShadowRoot.elementFromPoint(clientX, clientY);
-        //this.draggedElementShortcut.hidden = false;
-        this.draggedElementShortcut.style.display = displayProp || "block";
-        var scrollableParentNode = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_0__["findScrollableParent"])(dragOverNode);
         var top;
         var bottom;
         var left;
@@ -7394,21 +7393,36 @@ var DragDropDOMAdapter = /** @class */ (function () {
             right = scrollableParentNode.getBoundingClientRect().right;
         }
         var repeat = function () {
-            if (clientY - top <= startScrollBoundary) {
+            var isTop = clientY - top <= startScrollBoundary;
+            var isBottom = bottom - clientY <= startScrollBoundary;
+            var isLeft = clientX - left <= startScrollBoundary;
+            var isRight = right - clientX <= startScrollBoundary;
+            if (isTop && !isLeft && !isRight) {
                 scrollableParentNode.scrollTop -= 15;
             }
-            else if (bottom - clientY <= startScrollBoundary) {
+            else if (isBottom && !isLeft && !isRight) {
                 scrollableParentNode.scrollTop += 15;
             }
-            else if (right - clientX <= startScrollBoundary) {
+            else if (isRight && !isTop && !isBottom) {
                 scrollableParentNode.scrollLeft += 15;
             }
-            else if (clientX - left <= startScrollBoundary) {
+            else if (isLeft && !isTop && !isBottom) {
                 scrollableParentNode.scrollLeft -= 15;
             }
-            _this.scrollIntervalId = requestAnimationFrame(repeat);
+            _this.scrollIntervalId = _this.requestAnimationFrame(repeat);
         };
-        this.scrollIntervalId = requestAnimationFrame(repeat);
+        this.scrollIntervalId = this.requestAnimationFrame(repeat);
+    };
+    DragDropDOMAdapter.prototype.doScroll = function (clientY, clientX) {
+        cancelAnimationFrame(this.scrollIntervalId);
+        var displayProp = this.draggedElementShortcut.style.display;
+        //this.draggedElementShortcut.hidden = true;
+        this.draggedElementShortcut.style.display = "none";
+        var dragOverNode = this.documentOrShadowRoot.elementFromPoint(clientX, clientY);
+        //this.draggedElementShortcut.hidden = false;
+        this.draggedElementShortcut.style.display = displayProp || "block";
+        var scrollableParentNode = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_0__["findScrollableParent"])(dragOverNode);
+        this.scrollByDrag(scrollableParentNode, clientY, clientX);
     };
     DragDropDOMAdapter.prototype.doStartDrag = function (event, draggedElement, parentElement, draggedElementNode) {
         if (_utils_devices__WEBPACK_IMPORTED_MODULE_1__["IsTouch"]) {
@@ -7702,7 +7716,6 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
         if (!draggedElementShortcut)
             return;
         draggedElementShortcut.className = this.shortcutClass + " sv-ranking-shortcut";
-        draggedElementShortcut.style.cssText = " \n          cursor: grabbing;\n          position: absolute;\n          z-index: 10000;\n          border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));\n          min-width: 100px;\n          max-width: 400px;\n          box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));\n          background-color: var(--sjs-general-backcolor, var(--background, #fff));\n          font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));\n        ";
         var isDeepClone = true;
         var clone = draggedElementNode.cloneNode(isDeepClone);
         draggedElementShortcut.appendChild(clone);
@@ -8097,6 +8110,7 @@ var DropdownListModel = /** @class */ (function (_super) {
         _this.showInputFieldComponent = _this.question.showInputFieldComponent;
         _this.listModel = _this.createListModel();
         _this.updateAfterListModelCreated(_this.listModel);
+        _this.setChoicesLazyLoadEnabled(_this.question.choicesLazyLoadEnabled);
         _this.setSearchEnabled(_this.question.searchEnabled);
         _this.setTextWrapEnabled(_this.question.textWrapEnabled);
         _this.createPopup();
@@ -8159,7 +8173,8 @@ var DropdownListModel = /** @class */ (function (_super) {
     };
     DropdownListModel.prototype.createPopup = function () {
         var _this = this;
-        this._popupModel = new _popup__WEBPACK_IMPORTED_MODULE_5__["PopupModel"]("sv-list", { model: this.listModel }, "bottom", "center", false);
+        var popupOptions = { verticalPosition: "bottom", horizontalPosition: "center", showPointer: false };
+        this._popupModel = new _popup__WEBPACK_IMPORTED_MODULE_5__["PopupModel"]("sv-list", { model: this.listModel }, popupOptions);
         this._popupModel.displayMode = _utils_devices__WEBPACK_IMPORTED_MODULE_9__["IsTouch"] ? "overlay" : "popup";
         this._popupModel.positionMode = "fixed";
         this._popupModel.isFocusedContainer = false;
@@ -8177,6 +8192,7 @@ var DropdownListModel = /** @class */ (function (_super) {
             }
             if (option.isVisible && _this.question.choicesLazyLoadEnabled) {
                 _this.listModel.actions = [];
+                _this.resetItemsSettings();
                 _this.updateQuestionChoices();
             }
             if (option.isVisible && !!_this.question.onOpenedCallBack) {
@@ -8219,7 +8235,6 @@ var DropdownListModel = /** @class */ (function (_super) {
     DropdownListModel.prototype.onHidePopup = function () {
         this.resetFilterString();
         this.question.suggestedItem = null;
-        this.listModel.refresh();
     };
     DropdownListModel.prototype.getAvailableItems = function () {
         return this.question.visibleChoices;
@@ -8247,7 +8262,7 @@ var DropdownListModel = /** @class */ (function (_super) {
                 _this.popupModel.isVisible = false;
             };
         }
-        var res = new _list__WEBPACK_IMPORTED_MODULE_4__["ListModel"](visibleItems, _onSelectionChanged, false, undefined, this.question.choicesLazyLoadEnabled ? this.listModelFilterStringChanged : undefined, this.listElementId);
+        var res = new _list__WEBPACK_IMPORTED_MODULE_4__["ListModel"](visibleItems, _onSelectionChanged, false, undefined, this.listElementId);
         this.setOnTextSearchCallbackForListModel(res);
         res.renderElements = false;
         res.forceShowFilter = true;
@@ -8480,6 +8495,9 @@ var DropdownListModel = /** @class */ (function (_super) {
         this.listModel.showSearchClearButton = _utils_devices__WEBPACK_IMPORTED_MODULE_9__["IsTouch"];
         this.searchEnabled = newValue;
     };
+    DropdownListModel.prototype.setChoicesLazyLoadEnabled = function (newValue) {
+        this.listModel.setOnFilterStringChangedCallback(newValue ? this.listModelFilterStringChanged : undefined);
+    };
     DropdownListModel.prototype.updateItems = function () {
         this.listModel.setItems(this.getAvailableItems());
     };
@@ -8499,9 +8517,6 @@ var DropdownListModel = /** @class */ (function (_super) {
         if (options.name == "value") {
             this.showInputFieldComponent = this.question.showInputFieldComponent;
         }
-        if (options.name == "choicesLazyLoadEnabled" && options.newValue) {
-            this.listModel.setOnFilterStringChangedCallback(this.listModelFilterStringChanged);
-        }
         if (options.name == "textWrapEnabled") {
             this.setTextWrapEnabled(options.newValue);
         }
@@ -8830,7 +8845,7 @@ var DropdownMultiSelectListModel = /** @class */ (function (_super) {
                 }
             };
         }
-        var res = new _multiSelectListModel__WEBPACK_IMPORTED_MODULE_3__["MultiSelectListModel"](visibleItems, _onSelectionChanged, false, undefined, this.question.choicesLazyLoadEnabled ? this.listModelFilterStringChanged : undefined, this.listElementId);
+        var res = new _multiSelectListModel__WEBPACK_IMPORTED_MODULE_3__["MultiSelectListModel"](visibleItems, _onSelectionChanged, false, undefined, this.listElementId);
         res.actions.forEach(function (a) { return a.disableTabStop = true; });
         this.setOnTextSearchCallbackForListModel(res);
         res.forceShowFilter = true;
@@ -9805,8 +9820,8 @@ __webpack_require__.r(__webpack_exports__);
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.10.1";
-ReleaseDate = "" + "2024-04-25";
+Version = "" + "1.10.3";
+ReleaseDate = "" + "2024-05-07";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -10993,7 +11008,7 @@ var defaultBootstrapMaterialCss = _plugins_themes_bootstrapmaterial_cssbootstrap
 /*!***************************************!*\
   !*** ./src/entries/react-ui-model.ts ***!
   \***************************************/
-/*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent */
+/*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, QuestionErrorComponent, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -11241,39 +11256,42 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _react_components_survey_actions_survey_nav_button__WEBPACK_IMPORTED_MODULE_70__ = __webpack_require__(/*! ../react/components/survey-actions/survey-nav-button */ "./src/react/components/survey-actions/survey-nav-button.tsx");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyNavigationButton", function() { return _react_components_survey_actions_survey_nav_button__WEBPACK_IMPORTED_MODULE_70__["SurveyNavigationButton"]; });
 
-/* harmony import */ var _react_components_matrix_row__WEBPACK_IMPORTED_MODULE_71__ = __webpack_require__(/*! ../react/components/matrix/row */ "./src/react/components/matrix/row.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MatrixRow", function() { return _react_components_matrix_row__WEBPACK_IMPORTED_MODULE_71__["MatrixRow"]; });
+/* harmony import */ var _react_components_question_error__WEBPACK_IMPORTED_MODULE_71__ = __webpack_require__(/*! ../react/components/question-error */ "./src/react/components/question-error.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "QuestionErrorComponent", function() { return _react_components_question_error__WEBPACK_IMPORTED_MODULE_71__["QuestionErrorComponent"]; });
 
-/* harmony import */ var _react_components_skeleton__WEBPACK_IMPORTED_MODULE_72__ = __webpack_require__(/*! ../react/components/skeleton */ "./src/react/components/skeleton.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Skeleton", function() { return _react_components_skeleton__WEBPACK_IMPORTED_MODULE_72__["Skeleton"]; });
+/* harmony import */ var _react_components_matrix_row__WEBPACK_IMPORTED_MODULE_72__ = __webpack_require__(/*! ../react/components/matrix/row */ "./src/react/components/matrix/row.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MatrixRow", function() { return _react_components_matrix_row__WEBPACK_IMPORTED_MODULE_72__["MatrixRow"]; });
 
-/* harmony import */ var _react_components_notifier__WEBPACK_IMPORTED_MODULE_73__ = __webpack_require__(/*! ../react/components/notifier */ "./src/react/components/notifier.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "NotifierComponent", function() { return _react_components_notifier__WEBPACK_IMPORTED_MODULE_73__["NotifierComponent"]; });
+/* harmony import */ var _react_components_skeleton__WEBPACK_IMPORTED_MODULE_73__ = __webpack_require__(/*! ../react/components/skeleton */ "./src/react/components/skeleton.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Skeleton", function() { return _react_components_skeleton__WEBPACK_IMPORTED_MODULE_73__["Skeleton"]; });
 
-/* harmony import */ var _react_components_components_container__WEBPACK_IMPORTED_MODULE_74__ = __webpack_require__(/*! ../react/components/components-container */ "./src/react/components/components-container.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ComponentsContainer", function() { return _react_components_components_container__WEBPACK_IMPORTED_MODULE_74__["ComponentsContainer"]; });
+/* harmony import */ var _react_components_notifier__WEBPACK_IMPORTED_MODULE_74__ = __webpack_require__(/*! ../react/components/notifier */ "./src/react/components/notifier.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "NotifierComponent", function() { return _react_components_notifier__WEBPACK_IMPORTED_MODULE_74__["NotifierComponent"]; });
 
-/* harmony import */ var _react_components_character_counter__WEBPACK_IMPORTED_MODULE_75__ = __webpack_require__(/*! ../react/components/character-counter */ "./src/react/components/character-counter.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CharacterCounterComponent", function() { return _react_components_character_counter__WEBPACK_IMPORTED_MODULE_75__["CharacterCounterComponent"]; });
+/* harmony import */ var _react_components_components_container__WEBPACK_IMPORTED_MODULE_75__ = __webpack_require__(/*! ../react/components/components-container */ "./src/react/components/components-container.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ComponentsContainer", function() { return _react_components_components_container__WEBPACK_IMPORTED_MODULE_75__["ComponentsContainer"]; });
 
-/* harmony import */ var _react_components_header__WEBPACK_IMPORTED_MODULE_76__ = __webpack_require__(/*! ../react/components/header */ "./src/react/components/header.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HeaderMobile", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_76__["HeaderMobile"]; });
+/* harmony import */ var _react_components_character_counter__WEBPACK_IMPORTED_MODULE_76__ = __webpack_require__(/*! ../react/components/character-counter */ "./src/react/components/character-counter.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CharacterCounterComponent", function() { return _react_components_character_counter__WEBPACK_IMPORTED_MODULE_76__["CharacterCounterComponent"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HeaderCell", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_76__["HeaderCell"]; });
+/* harmony import */ var _react_components_header__WEBPACK_IMPORTED_MODULE_77__ = __webpack_require__(/*! ../react/components/header */ "./src/react/components/header.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HeaderMobile", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_77__["HeaderMobile"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Header", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_76__["Header"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HeaderCell", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_77__["HeaderCell"]; });
 
-/* harmony import */ var _react_string_viewer__WEBPACK_IMPORTED_MODULE_77__ = __webpack_require__(/*! ../react/string-viewer */ "./src/react/string-viewer.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyLocStringViewer", function() { return _react_string_viewer__WEBPACK_IMPORTED_MODULE_77__["SurveyLocStringViewer"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Header", function() { return _react_components_header__WEBPACK_IMPORTED_MODULE_77__["Header"]; });
 
-/* harmony import */ var _react_string_editor__WEBPACK_IMPORTED_MODULE_78__ = __webpack_require__(/*! ../react/string-editor */ "./src/react/string-editor.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyLocStringEditor", function() { return _react_string_editor__WEBPACK_IMPORTED_MODULE_78__["SurveyLocStringEditor"]; });
+/* harmony import */ var _react_string_viewer__WEBPACK_IMPORTED_MODULE_78__ = __webpack_require__(/*! ../react/string-viewer */ "./src/react/string-viewer.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyLocStringViewer", function() { return _react_string_viewer__WEBPACK_IMPORTED_MODULE_78__["SurveyLocStringViewer"]; });
 
-/* harmony import */ var _react_components_loading_indicator__WEBPACK_IMPORTED_MODULE_79__ = __webpack_require__(/*! ../react/components/loading-indicator */ "./src/react/components/loading-indicator.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "LoadingIndicatorComponent", function() { return _react_components_loading_indicator__WEBPACK_IMPORTED_MODULE_79__["LoadingIndicatorComponent"]; });
+/* harmony import */ var _react_string_editor__WEBPACK_IMPORTED_MODULE_79__ = __webpack_require__(/*! ../react/string-editor */ "./src/react/string-editor.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyLocStringEditor", function() { return _react_string_editor__WEBPACK_IMPORTED_MODULE_79__["SurveyLocStringEditor"]; });
 
-/* harmony import */ var _react_svgbundle__WEBPACK_IMPORTED_MODULE_80__ = __webpack_require__(/*! ../react/svgbundle */ "./src/react/svgbundle.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SvgBundleComponent", function() { return _react_svgbundle__WEBPACK_IMPORTED_MODULE_80__["SvgBundleComponent"]; });
+/* harmony import */ var _react_components_loading_indicator__WEBPACK_IMPORTED_MODULE_80__ = __webpack_require__(/*! ../react/components/loading-indicator */ "./src/react/components/loading-indicator.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "LoadingIndicatorComponent", function() { return _react_components_loading_indicator__WEBPACK_IMPORTED_MODULE_80__["LoadingIndicatorComponent"]; });
+
+/* harmony import */ var _react_svgbundle__WEBPACK_IMPORTED_MODULE_81__ = __webpack_require__(/*! ../react/svgbundle */ "./src/react/svgbundle.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SvgBundleComponent", function() { return _react_svgbundle__WEBPACK_IMPORTED_MODULE_81__["SvgBundleComponent"]; });
 
 // react
 
@@ -11355,6 +11373,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 
 
 //Uncomment to include the "date" question type.
@@ -11367,7 +11386,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!******************************!*\
   !*** ./src/entries/react.ts ***!
   \******************************/
-/*! exports provided: Version, ReleaseDate, checkLibraryVersion, setLicenseKey, slk, hasLicense, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedErrorRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, MultipleTextCell, MultipleTextErrorCell, MutlipleTextErrorRow, MutlipleTextRow, QuestionMultipleTextModel, MultipleTextEditorModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryFocusPage, createTOCListModel, getTocRootCss, TOCModel, SurveyProgressModel, ProgressButtons, ProgressButtonsResponsivityManager, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, SurveyTriggerSkip, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, Cover, CoverCell, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, confirmActionAsync, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, chooseFiles, sanitizeEditableContent, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper, Model, bootstrapThemeName, bootstrapThemeColors, bootstrapThemeCssRules, bootstrapMaterialThemeName, bootstrapMaterialThemeColors, bootstrapMaterialThemeCssRules, defaultBootstrapCss, defaultBootstrapMaterialCss, Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent */
+/*! exports provided: Version, ReleaseDate, checkLibraryVersion, setLicenseKey, slk, hasLicense, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedErrorRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, MultipleTextCell, MultipleTextErrorCell, MutlipleTextErrorRow, MutlipleTextRow, QuestionMultipleTextModel, MultipleTextEditorModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryFocusPage, createTOCListModel, getTocRootCss, TOCModel, SurveyProgressModel, ProgressButtons, ProgressButtonsResponsivityManager, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, SurveyTriggerSkip, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, Cover, CoverCell, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, confirmActionAsync, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, chooseFiles, sanitizeEditableContent, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper, Model, bootstrapThemeName, bootstrapThemeColors, bootstrapThemeCssRules, bootstrapMaterialThemeName, bootstrapMaterialThemeColors, bootstrapMaterialThemeCssRules, defaultBootstrapCss, defaultBootstrapMaterialCss, Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, QuestionErrorComponent, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -12020,6 +12039,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyNavigationButton", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_3__["SurveyNavigationButton"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "QuestionErrorComponent", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_3__["QuestionErrorComponent"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MatrixRow", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_3__["MatrixRow"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Skeleton", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_3__["Skeleton"]; });
@@ -20434,10 +20455,18 @@ var JsonMetadata = /** @class */ (function () {
         return metaClass.getAllProperties();
     };
     JsonMetadata.prototype.getPropertiesByObj = function (obj) {
-        if (!obj || !obj.getType)
+        var type = !!obj && !!obj.getType ? obj.getType() : undefined;
+        if (!type)
             return [];
-        var props = this.getProperties(obj.getType());
+        var props = this.getProperties(type);
         var dynamicProps = this.getDynamicPropertiesByObj(obj);
+        for (var i = dynamicProps.length - 1; i >= 0; i--) {
+            if (this.findProperty(type, dynamicProps[i].name)) {
+                dynamicProps.splice(i, 1);
+            }
+        }
+        if (dynamicProps.length === 0)
+            return props;
         return [].concat(props).concat(dynamicProps);
     };
     JsonMetadata.prototype.addDynamicPropertiesIntoObj = function (dest, src, props) {
@@ -21148,7 +21177,7 @@ var JsonObject = /** @class */ (function () {
         this.removePosFromObj(value);
     };
     JsonObject.prototype.removePosFromObj = function (obj) {
-        if (!obj)
+        if (!obj || typeof obj.getType === "function")
             return;
         if (Array.isArray(obj)) {
             for (var i = 0; i < obj.length; i++) {
@@ -21365,11 +21394,10 @@ var defaultListCss = {
 };
 var ListModel = /** @class */ (function (_super) {
     __extends(ListModel, _super);
-    function ListModel(items, onSelectionChanged, allowSelection, selectedItem, onFilterStringChangedCallback, elementId) {
+    function ListModel(items, onSelectionChanged, allowSelection, selectedItem, elementId) {
         var _this = _super.call(this) || this;
         _this.onSelectionChanged = onSelectionChanged;
         _this.allowSelection = allowSelection;
-        _this.onFilterStringChangedCallback = onFilterStringChangedCallback;
         _this.elementId = elementId;
         _this.onItemClick = function (itemValue) {
             if (_this.isItemDisabled(itemValue)) {
@@ -23646,7 +23674,7 @@ var englishStrings = {
     questionsProgressText: "Answered {0}/{1} questions",
     emptySurvey: "The survey doesn't contain any visible elements.",
     completingSurvey: "Thank you for completing the survey",
-    completingSurveyBefore: "Our records show that you have already completed this survey.",
+    completingSurveyBefore: "You have already completed this survey.",
     loadingSurvey: "Loading Survey...",
     placeholder: "Select...",
     ratingOptionsCaption: "Select...",
@@ -23696,7 +23724,7 @@ var englishStrings = {
     savingData: "The results are being saved on the server...",
     savingDataError: "An error occurred and we could not save the results.",
     savingDataSuccess: "The results were saved successfully!",
-    savingExceedSize: "Your response exceeds 64KB. Please reduce the size of your file(s) and try again or contact a survey owner.",
+    savingExceedSize: "Your response exceeds 64KB. Please reduce the size of your file(s) and try again or contact the survey owner.",
     saveAgainButton: "Try again",
     timerMin: "min",
     timerSec: "sec",
@@ -24416,7 +24444,7 @@ var germanSurveyStrings = {
     startSurveyText: "Start",
     otherItemText: "Sonstiges (Bitte angeben)",
     noneItemText: "Nichts trifft zu",
-    refuseItemText: "Verweigern Sie die Antwort",
+    refuseItemText: "Antwort verweigern",
     dontKnowItemText: "Weiß ich nicht",
     selectAllItemText: "Alles auswählen",
     progressText: "Seite {0} von {1}",
@@ -24426,7 +24454,7 @@ var germanSurveyStrings = {
     questionsProgressText: "{0}/{1} Fragen beantwortet",
     emptySurvey: "Es sind keine Fragen vorhanden.",
     completingSurvey: "Vielen Dank, dass Sie die Umfrage abgeschlossen haben!",
-    completingSurveyBefore: "Aus unseren Unterlagen geht hervor, dass Sie diese Umfrage bereits abgeschlossen haben.",
+    completingSurveyBefore: "Sie haben diese Umfrage bereits abgeschlossen.",
     loadingSurvey: "Umfrage wird geladen...",
     placeholder: "Bitte auswählen...",
     ratingOptionsCaption: "Tippen Sie hier, um zu bewerten...",
@@ -24476,7 +24504,7 @@ var germanSurveyStrings = {
     savingData: "Die Ergebnisse werden auf dem Server gespeichert...",
     savingDataError: "Es ist ein Fehler aufgetreten. Die Ergebnisse konnten nicht gespeichert werden.",
     savingDataSuccess: "Die Ergebnisse wurden gespeichert!",
-    savingExceedSize: "Ihre Antwort überschreitet 64 KB. Reduzieren Sie die Größe Ihrer Datei(en) und versuchen Sie es erneut, oder wenden Sie sich an einen Umfragebesitzer.",
+    savingExceedSize: "Ihre Antwort überschreitet 64 KB. Reduzieren Sie die Größe Ihrer Datei(en) und versuchen Sie es erneut, oder wenden Sie sich an den Umfragebesitzer.",
     saveAgainButton: "Erneut absenden",
     timerMin: "Min.",
     timerSec: "Sek.",
@@ -24492,7 +24520,7 @@ var germanSurveyStrings = {
     chooseFileCaption: "Datei auswählen",
     takePhotoCaption: "Foto machen",
     photoPlaceholder: "Klicken Sie auf die Schaltfläche unten, um ein Foto mit der Kamera aufzunehmen.",
-    fileOrPhotoPlaceholder: "Ziehen Sie eine Datei per Drag & Drop oder wählen Sie sie aus, um sie hochzuladen oder ein Foto mit der Kamera aufzunehmen.",
+    fileOrPhotoPlaceholder: "Ziehen Sie eine Datei per Drag & Drop oder wählen Sie sie aus, um sie hochzuladen oder machen Sie ein Foto mit der Kamera.",
     replaceFileCaption: "Datei ersetzen",
     removeFileCaption: "Datei löschen",
     booleanCheckedLabel: "Ja",
@@ -24502,38 +24530,21 @@ var germanSurveyStrings = {
     questionTitlePatternText: "Fragentitel",
     modalCancelButtonText: "Abbrechen",
     modalApplyButtonText: "Anwenden",
-    filterStringPlaceholder: "Tippe um zu suchen...",
+    filterStringPlaceholder: "Tippen Sie, um zu suchen...",
     emptyMessage: "Es gibt noch keine Daten.",
     noEntriesText: "Es gibt noch keine Einträge.\nKlicken Sie auf die Schaltfläche unten, um einen neuen Eintrag hinzuzufügen.",
     noEntriesReadonlyText: "Es gibt keine Einträge.",
     more: "Mehr",
-    tagboxDoneButtonCaption: "OKAY",
+    tagboxDoneButtonCaption: "OK",
     selectToRankEmptyRankedAreaText: "Alle Auswahlmöglichkeiten sind in einer Rangfolge angeordnet",
     selectToRankEmptyUnrankedAreaText: "Ziehen Sie die Auswahl hierher, um sie zu ordnen",
-    ok: "OKAY",
+    ok: "OK",
     cancel: "Abbrechen"
 };
 survey_core__WEBPACK_IMPORTED_MODULE_0__["surveyLocalization"].locales["de"] = germanSurveyStrings;
 survey_core__WEBPACK_IMPORTED_MODULE_0__["surveyLocalization"].localeNames["de"] = "deutsch";
 // The following strings have been translated by a machine translation service
 // Remove those strings that you have corrected manually
-// panelDynamicTabTextFormat: "Panel {panelIndex}" => "Bereich {panelIndex}"
-// noEntriesReadonlyText: "There are no entries." => "Es gibt keine Einträge."
-// tagboxDoneButtonCaption: "OK" => "OKAY"
-// selectToRankEmptyRankedAreaText: "All choices are ranked" => "Alle Auswahlmöglichkeiten sind in einer Rangfolge angeordnet"
-// selectToRankEmptyUnrankedAreaText: "Drag and drop choices here to rank them" => "Ziehen Sie die Auswahl hierher, um sie zu ordnen"// takePhotoCaption: "Take Photo" => "Foto machen"
-// photoPlaceholder: "Click the button below to take a photo using the camera." => "Klicken Sie auf die Schaltfläche unten, um ein Foto mit der Kamera aufzunehmen."
-// fileOrPhotoPlaceholder: "Drag and drop or select a file to upload or take a photo using the camera." => "Ziehen Sie eine Datei per Drag & Drop oder wählen Sie sie aus, um sie hochzuladen oder ein Foto mit der Kamera aufzunehmen."
-// replaceFileCaption: "Replace file" => "Datei ersetzen"// eachRowUniqueError: "Each row must have a unique value." => "Jede Zeile muss einen eindeutigen Wert haben."
-// noUploadFilesHandler: "Files cannot be uploaded. Please add a handler for the 'onUploadFiles' event." => "Dateien können nicht hochgeladen werden. Fügen Sie einen Handler für das Ereignis 'onUploadFiles' hinzu."
-// showDetails: "Show Details" => "Details anzeigen"
-// hideDetails: "Hide Details" => "Details ausblenden"
-// ok: "OK" => "OKAY"
-// cancel: "Cancel" => "Abbrechen"
-// refuseItemText: "Refuse to answer" => "Verweigern Sie die Antwort"
-// dontKnowItemText: "Don't know" => "Weiß ich nicht"
-// savingExceedSize: "Your response exceeds 64KB. Please reduce the size of your file(s) and try again or contact a survey owner." => "Ihre Antwort überschreitet 64 KB. Reduzieren Sie die Größe Ihrer Datei(en) und versuchen Sie es erneut, oder wenden Sie sich an einen Umfragebesitzer."
-// signaturePlaceHolderReadOnly: "No signature" => "Keine Unterschrift"
 
 
 /***/ }),
@@ -31899,8 +31910,8 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 var MultiSelectListModel = /** @class */ (function (_super) {
     __extends(MultiSelectListModel, _super);
-    function MultiSelectListModel(items, onSelectionChanged, allowSelection, selectedItems, onFilterStringChangedCallback, elementId) {
-        var _this = _super.call(this, items, onSelectionChanged, allowSelection, undefined, onFilterStringChangedCallback, elementId) || this;
+    function MultiSelectListModel(items, onSelectionChanged, allowSelection, selectedItems, elementId) {
+        var _this = _super.call(this, items, onSelectionChanged, allowSelection, undefined, elementId) || this;
         _this.onItemClick = function (item) {
             if (_this.isItemDisabled(item))
                 return;
@@ -32134,7 +32145,6 @@ var PageModel = /** @class */ (function (_super) {
                 return _this.num + ". " + text;
             return text;
         };
-        _this.createLocalizableString("navigationTitle", _this, true);
         _this.createLocalizableString("navigationDescription", _this, true);
         _this.dragDropPageHelper = new _drag_drop_page_helper_v1__WEBPACK_IMPORTED_MODULE_3__["DragDropPageHelperV1"](_this);
         return _this;
@@ -32173,13 +32183,6 @@ var PageModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(PageModel.prototype, "locNavigationTitle", {
-        get: function () {
-            return this.getLocalizableString("navigationTitle");
-        },
-        enumerable: false,
-        configurable: true
-    });
     Object.defineProperty(PageModel.prototype, "navigationDescription", {
         /**
          * Explanatory text displayed under a navigation button in the progress bar. Applies when the [progress bar is visible](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showProgressBar), `SurveyModel`'s [`progressBarType`](https://surveyjs.io/form-library/documentation/surveymodel#progressBarType) is set to `"pages"`, and [`progressBarShowPageTitles`](https://surveyjs.io/form-library/documentation/surveymodel#progressBarShowPageTitles) is `true`.
@@ -32201,16 +32204,12 @@ var PageModel = /** @class */ (function (_super) {
         configurable: true
     });
     PageModel.prototype.navigationLocStrChanged = function () {
+        if (this.locNavigationTitle.isEmpty) {
+            this.locTitle.strChanged();
+        }
         this.locNavigationTitle.strChanged();
         this.locNavigationDescription.strChanged();
     };
-    Object.defineProperty(PageModel.prototype, "renderedNavigationTitle", {
-        get: function () {
-            return this.locNavigationTitle.renderedHtml || this.title || this.name;
-        },
-        enumerable: false,
-        configurable: true
-    });
     Object.defineProperty(PageModel.prototype, "passed", {
         get: function () {
             return this.getPropertyValue("passed", false);
@@ -32852,6 +32851,9 @@ var PanelModelBase = /** @class */ (function (_super) {
         _this.addExpressionProperty("enableIf", function (obj, res) { _this.readOnly = res === false; });
         _this.addExpressionProperty("requiredIf", function (obj, res) { _this.isRequired = res === true; });
         _this.createLocalizableString("requiredErrorText", _this);
+        _this.createLocalizableString("navigationTitle", _this, true).onGetTextCallback = function (text) {
+            return text || _this.title || _this.name;
+        };
         _this.registerPropertyChangedHandlers(["questionTitleLocation"], function () {
             _this.onVisibleChanged.bind(_this);
             _this.updateElementCss(true);
@@ -32968,9 +32970,22 @@ var PanelModelBase = /** @class */ (function (_super) {
             this.elements[i].locStrsChanged();
         }
     };
+    PanelModelBase.prototype.getMarkdownHtml = function (text, name) {
+        if (name === "navigationTitle" && this.locNavigationTitle.isEmpty) {
+            return this.locTitle.renderedHtml || this.name;
+        }
+        return _super.prototype.getMarkdownHtml.call(this, text, name);
+    };
+    Object.defineProperty(PanelModelBase.prototype, "locNavigationTitle", {
+        get: function () {
+            return this.getLocalizableString("navigationTitle");
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(PanelModelBase.prototype, "renderedNavigationTitle", {
         get: function () {
-            return this.title || this.name;
+            return this.locNavigationTitle.renderedHtml;
         },
         enumerable: false,
         configurable: true
@@ -33482,7 +33497,7 @@ var PanelModelBase = /** @class */ (function (_super) {
         if (rec.result !== true)
             rec.result = false;
         this.hasErrorsCore(rec);
-        if (rec.firstErrorQuestion) {
+        if (rec.focuseOnFirstError && rec.firstErrorQuestion) {
             rec.firstErrorQuestion.focus(true);
         }
         return !rec.result;
@@ -37161,14 +37176,30 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _popup__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./popup */ "./src/popup.ts");
 /* harmony import */ var _popup_dropdown_view_model__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./popup-dropdown-view-model */ "./src/popup-dropdown-view-model.ts");
 /* harmony import */ var _popup_modal_view_model__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./popup-modal-view-model */ "./src/popup-modal-view-model.ts");
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 
 
 
 
 function createPopupModalViewModel(options, rootElement) {
     var _a;
-    var popupModel = new _popup__WEBPACK_IMPORTED_MODULE_1__["PopupModel"](options.componentName, options.data, "top", "left", false, true, options.onCancel, options.onApply, options.onHide, options.onShow, options.cssClass, options.title);
-    popupModel.displayMode = options.displayMode || "popup";
+    var popupOptions = __assign({}, options);
+    popupOptions.verticalPosition = "top";
+    popupOptions.horizontalPosition = "left";
+    popupOptions.showPointer = false;
+    popupOptions.isModal = true;
+    popupOptions.displayMode = options.displayMode || "popup";
+    var popupModel = new _popup__WEBPACK_IMPORTED_MODULE_1__["PopupModel"](options.componentName, options.data, popupOptions);
     popupModel.isFocusedContent = (_a = options.isFocusedContent) !== null && _a !== void 0 ? _a : true;
     var popupViewModel = new _popup_modal_view_model__WEBPACK_IMPORTED_MODULE_3__["PopupModalViewModel"](popupModel);
     if (!!rootElement && !!rootElement.appendChild) {
@@ -37672,36 +37703,29 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 var PopupModel = /** @class */ (function (_super) {
     __extends(PopupModel, _super);
-    function PopupModel(contentComponentName, contentComponentData, verticalPosition, horizontalPosition, showPointer, isModal, onCancel, onApply, onHide, onShow, cssClass, title, onDispose) {
-        if (verticalPosition === void 0) { verticalPosition = "bottom"; }
-        if (horizontalPosition === void 0) { horizontalPosition = "left"; }
-        if (showPointer === void 0) { showPointer = true; }
-        if (isModal === void 0) { isModal = false; }
-        if (onCancel === void 0) { onCancel = function () { }; }
-        if (onApply === void 0) { onApply = function () { return true; }; }
-        if (onHide === void 0) { onHide = function () { }; }
-        if (onShow === void 0) { onShow = function () { }; }
-        if (cssClass === void 0) { cssClass = ""; }
-        if (title === void 0) { title = ""; }
-        if (onDispose === void 0) { onDispose = function () { }; }
+    function PopupModel(contentComponentName, contentComponentData, option1, option2) {
         var _this = _super.call(this) || this;
-        _this.onDispose = onDispose;
         _this.focusFirstInputSelector = "";
+        _this.onCancel = function () { };
+        _this.onApply = function () { return true; };
+        _this.onHide = function () { };
+        _this.onShow = function () { };
+        _this.onDispose = function () { };
         _this.onVisibilityChanged = _this.addEvent();
         _this.onFooterActionsCreated = _this.addEvent();
         _this.onRecalculatePosition = _this.addEvent();
         _this.contentComponentName = contentComponentName;
         _this.contentComponentData = contentComponentData;
-        _this.verticalPosition = verticalPosition;
-        _this.horizontalPosition = horizontalPosition;
-        _this.showPointer = showPointer;
-        _this.isModal = isModal;
-        _this.onCancel = onCancel;
-        _this.onApply = onApply;
-        _this.onHide = onHide;
-        _this.onShow = onShow;
-        _this.cssClass = cssClass;
-        _this.title = title;
+        if (!!option1 && typeof option1 === "string") {
+            _this.verticalPosition = option1;
+            _this.horizontalPosition = option2;
+        }
+        else if (!!option1) {
+            var popupOptions = option1;
+            for (var key in popupOptions) {
+                _this[key] = popupOptions[key];
+            }
+        }
         return _this;
     }
     PopupModel.prototype.refreshInnerModel = function () {
@@ -37757,7 +37781,7 @@ var PopupModel = /** @class */ (function (_super) {
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: "left" })
     ], PopupModel.prototype, "horizontalPosition", void 0);
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: false })
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: true })
     ], PopupModel.prototype, "showPointer", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: false })
@@ -37768,18 +37792,6 @@ var PopupModel = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: true })
     ], PopupModel.prototype, "isFocusedContainer", void 0);
-    __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: function () { } })
-    ], PopupModel.prototype, "onCancel", void 0);
-    __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: function () { return true; } })
-    ], PopupModel.prototype, "onApply", void 0);
-    __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: function () { } })
-    ], PopupModel.prototype, "onHide", void 0);
-    __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: function () { } })
-    ], PopupModel.prototype, "onShow", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: "" })
     ], PopupModel.prototype, "cssClass", void 0);
@@ -40938,7 +40950,6 @@ var Question = /** @class */ (function (_super) {
     };
     Question.prototype.isDefaultRendering = function () {
         return (!!this.customWidget ||
-            this.renderAs === "default" ||
             this.getComponentName() === "default");
     };
     //ISurveyErrorOwner
@@ -41762,7 +41773,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         return "itemvalue";
     };
     QuestionSelectBase.prototype.createItemValue = function (value, text) {
-        var res = _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].createClass(this.getItemValueType(), value);
+        var res = _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].createClass(this.getItemValueType(), { value: value });
         res.locOwner = this;
         if (!!text)
             res.text = text;
@@ -42216,7 +42227,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     QuestionSelectBase.prototype.canSurveyChangeItemVisibility = function () {
         return !!this.survey && this.survey.canChangeChoiceItemsVisibility();
     };
-    QuestionSelectBase.prototype.changeItemVisisbility = function () {
+    QuestionSelectBase.prototype.changeItemVisibility = function () {
         var _this = this;
         return this.canSurveyChangeItemVisibility() ?
             function (item, val) { return _this.survey.getChoiceItemVisibility(_this, item, val); }
@@ -42224,7 +42235,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     };
     QuestionSelectBase.prototype.runConditionsForItems = function (values, properties) {
         this.filteredChoicesValue = [];
-        var calcVisibility = this.changeItemVisisbility();
+        var calcVisibility = this.changeItemVisibility();
         return _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"].runConditionsForItems(this.activeChoices, this.getFilteredChoices(), this.areInvisibleElementsShowing
             ? null
             : this.conditionChoicesVisibleIfRunner, values, properties, !this.survey || !this.survey.areInvisibleElementsShowing, function (item, val) {
@@ -42882,7 +42893,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     QuestionSelectBase.prototype.canShowOptionItem = function (item, isAddAll, hasItem) {
         var res = (isAddAll && (!!this.canShowOptionItemCallback ? this.canShowOptionItemCallback(item) : true)) || hasItem;
         if (this.canSurveyChangeItemVisibility()) {
-            var calc = this.changeItemVisisbility();
+            var calc = this.changeItemVisibility();
             return calc(item, res);
         }
         return res;
@@ -43430,8 +43441,8 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         var superVal = _super.prototype.isVisibleCore.call(this);
         if (!this.hideIfChoicesEmpty || !superVal)
             return superVal;
-        var filteredChoices = this.getFilteredChoices();
-        return !filteredChoices || filteredChoices.length > 0;
+        var choices = this.isUsingCarryForward ? this.visibleChoices : this.getFilteredChoices();
+        return !choices || choices.length > 0;
     };
     QuestionSelectBase.prototype.sortVisibleChoices = function (array) {
         if (this.isDesignMode)
@@ -44151,6 +44162,7 @@ var QuestionBooleanModel = /** @class */ (function (_super) {
             this.value = val == true ? this.getValueTrue() : this.getValueFalse();
             this.booleanValueRendered = val;
         }
+        this.updateThumbMargin();
     };
     Object.defineProperty(QuestionBooleanModel.prototype, "defaultValue", {
         get: function () {
@@ -44190,6 +44202,27 @@ var QuestionBooleanModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionBooleanModel.prototype.updateThumbMargin = function () {
+        var _this = this;
+        if (!this.isIndeterminate && this.leftAnswerElement) {
+            if (!this.swapOrder && this.value === this.getValueTrue() || this.swapOrder && this.value === this.getValueFalse()) {
+                var el_1 = this.leftAnswerElement;
+                setTimeout(function () {
+                    _this.thumbMargin = el_1.clientWidth + (_this.swapOrder ? 4 : 2) + "px";
+                }, 50);
+            }
+        }
+        this.thumbMargin = undefined;
+    };
+    QuestionBooleanModel.prototype.afterRender = function (el) {
+        _super.prototype.afterRender.call(this, el);
+        this.leftAnswerElement = el.querySelectorAll("." + this.cssClasses.sliderGhost)[0];
+        this.updateThumbMargin();
+    };
+    QuestionBooleanModel.prototype.beforeDestroyQuestionElement = function (el) {
+        _super.prototype.beforeDestroyQuestionElement.call(this, el);
+        this.leftAnswerElement = undefined;
+    };
     Object.defineProperty(QuestionBooleanModel.prototype, "isLabelRendered", {
         get: function () {
             return this.titleLocation === "hidden";
@@ -44460,6 +44493,12 @@ var QuestionBooleanModel = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], QuestionBooleanModel.prototype, "booleanValueRendered", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
+    ], QuestionBooleanModel.prototype, "leftAnswerElement", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
+    ], QuestionBooleanModel.prototype, "thumbMargin", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], QuestionBooleanModel.prototype, "showTitle", void 0);
@@ -45393,7 +45432,7 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
     QuestionCheckboxModel.prototype.getConditionJson = function (operator, path) {
         if (operator === void 0) { operator = null; }
         if (path === void 0) { path = null; }
-        var json = _super.prototype.getConditionJson.call(this);
+        var json = _super.prototype.getConditionJson.call(this, operator, path);
         if (operator == "contains" || operator == "notcontains") {
             json["type"] = "radiogroup";
         }
@@ -47320,7 +47359,13 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: "" })
     ], QuestionDropdownModel.prototype, "readOnlyText", void 0);
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])()
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({
+            onSet: function (newValue, target) {
+                if (!!target.dropdownListModel) {
+                    target.dropdownListModel.setChoicesLazyLoadEnabled(newValue);
+                }
+            }
+        })
     ], QuestionDropdownModel.prototype, "choicesLazyLoadEnabled", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])()
@@ -48221,6 +48266,7 @@ var QuestionFileModel = /** @class */ (function (_super) {
             }
         };
         _this.createLocalizableString("takePhotoCaption", _this, false, true);
+        _this.createLocalizableString("clearCaption", _this, false, true);
         _this.actionsContainer = new _actions_container__WEBPACK_IMPORTED_MODULE_7__["ActionContainer"]();
         _this.actionsContainer.locOwner = _this;
         _this.fileIndexAction = new _actions_action__WEBPACK_IMPORTED_MODULE_8__["Action"]({
@@ -48297,7 +48343,7 @@ var QuestionFileModel = /** @class */ (function (_super) {
             iconName: "icon-clear",
             id: "sv-file-clean",
             iconSize: "auto",
-            title: new _base__WEBPACK_IMPORTED_MODULE_3__["ComputedUpdater"](function () { return _this.clearButtonCaption; }),
+            locTitle: _this.locClearButtonCaption,
             showTitle: false,
             enabledIf: function () { return !_this.isInputReadOnly; },
             innerCss: new _base__WEBPACK_IMPORTED_MODULE_3__["ComputedUpdater"](function () { return _this.cssClasses.removeButton; }),
@@ -48609,6 +48655,23 @@ var QuestionFileModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionFileModel.prototype, "clearButtonCaption", {
+        get: function () {
+            return this.getLocalizableStringText("clearCaption");
+        },
+        set: function (value) {
+            this.setLocalizableStringText("clearCaption", value);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(QuestionFileModel.prototype, "locClearButtonCaption", {
+        get: function () {
+            return this.getLocalizableString("clearCaption");
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionFileModel.prototype, "locRenderedPlaceholder", {
         get: function () {
             var _this = this;
@@ -49184,9 +49247,6 @@ var QuestionFileModel = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ localizable: { defaultStr: "replaceFileCaption" } })
     ], QuestionFileModel.prototype, "replaceButtonCaption", void 0);
-    __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ localizable: { defaultStr: "clearCaption" } })
-    ], QuestionFileModel.prototype, "clearButtonCaption", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ localizable: { defaultStr: "removeFileCaption" } })
     ], QuestionFileModel.prototype, "removeFileCaption", void 0);
@@ -50208,6 +50268,9 @@ var QuestionImagePickerModel = /** @class */ (function (_super) {
     QuestionImagePickerModel.prototype.needResponsiveness = function () {
         return this.supportResponsiveness() && this.isDefaultV2Theme;
     };
+    QuestionImagePickerModel.prototype.needResponsiveWidth = function () {
+        return this.colCount > 2;
+    };
     QuestionImagePickerModel.prototype.getCurrentColCount = function () {
         if (this.responsiveColCount === undefined || this.colCount === 0) {
             return this.colCount;
@@ -50439,6 +50502,9 @@ var MatrixRowModel = /** @class */ (function (_super) {
             if (_this.data)
                 _this.data.onMatrixRowChanged(_this);
         });
+        if (_this.data && _this.data.hasErrorInRow(_this)) {
+            _this.hasError = true;
+        }
         return _this;
     }
     Object.defineProperty(MatrixRowModel.prototype, "name", {
@@ -50489,11 +50555,21 @@ var MatrixRowModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(MatrixRowModel.prototype, "hasError", {
+        get: function () {
+            return this.getPropertyValue("hasError", false);
+        },
+        set: function (val) {
+            this.setPropertyValue("hasError", val);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(MatrixRowModel.prototype, "rowClasses", {
         get: function () {
             var cssClasses = this.data.cssClasses;
             return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_11__["CssClassBuilder"]().append(cssClasses.row)
-                .append(cssClasses.rowError, this.data.hasErrorInRow(this))
+                .append(cssClasses.rowError, this.hasError)
                 .append(cssClasses.rowReadOnly, this.isReadOnly)
                 .append(cssClasses.rowDisabled, this.data.isDisabledStyle)
                 .toString();
@@ -50819,7 +50895,7 @@ var QuestionMatrixModel = /** @class */ (function (_super) {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_11__["CssClassBuilder"]()
             .append(css.cell, hasCellText)
             .append(hasCellText ? css.cellText : css.label)
-            .append(css.itemOnError, !hasCellText && (this.isAllRowRequired ? this.hasErrorInRow(row) : this.hasCssError()))
+            .append(css.itemOnError, !hasCellText && (this.isAllRowRequired || this.eachRowUnique ? row.hasError : this.hasCssError()))
             .append(hasCellText ? css.cellTextSelected : css.itemChecked, isChecked)
             .append(hasCellText ? css.cellTextDisabled : css.itemDisabled, this.isDisabledStyle)
             .append(hasCellText ? css.cellTextReadOnly : css.itemReadOnly, this.isReadOnlyStyle)
@@ -50949,72 +51025,76 @@ var QuestionMatrixModel = /** @class */ (function (_super) {
         return loc ? loc : this.emptyLocalizableString;
     };
     QuestionMatrixModel.prototype.supportGoNextPageAutomatic = function () {
-        return this.isMouseDown === true && this.hasValuesInAllRows(false);
+        return this.isMouseDown === true && this.hasValuesInAllRows();
     };
     QuestionMatrixModel.prototype.onCheckForErrors = function (errors, isOnValueChanged) {
         _super.prototype.onCheckForErrors.call(this, errors, isOnValueChanged);
-        this.errorsInRow = undefined;
         if (!isOnValueChanged || this.hasCssError()) {
-            if (this.hasErrorAllRowsRequired()) {
+            var rowsErrors = { noValue: false, isNotUnique: false };
+            this.checkErrorsAllRows(true, rowsErrors);
+            if (rowsErrors.noValue) {
                 errors.push(new _error__WEBPACK_IMPORTED_MODULE_6__["RequiredInAllRowsError"](null, this));
             }
-            if (this.hasErrorEachRowUnique()) {
+            if (rowsErrors.isNotUnique) {
                 errors.push(new _error__WEBPACK_IMPORTED_MODULE_6__["EachRowUniqueError"](null, this));
             }
         }
     };
-    QuestionMatrixModel.prototype.hasErrorAllRowsRequired = function () {
-        return this.isAllRowRequired && !this.hasValuesInAllRows(true);
-    };
-    QuestionMatrixModel.prototype.hasErrorEachRowUnique = function () {
-        return this.eachRowUnique && this.hasNonUniqueValueInRow();
+    QuestionMatrixModel.prototype.hasValuesInAllRows = function () {
+        var rowsErrors = { noValue: false, isNotUnique: false };
+        this.checkErrorsAllRows(false, rowsErrors, true);
+        return !rowsErrors.noValue;
     };
-    QuestionMatrixModel.prototype.hasValuesInAllRows = function (addError) {
+    QuestionMatrixModel.prototype.checkErrorsAllRows = function (modifyErrors, res, allRowsRequired) {
+        var _this = this;
         var rows = this.generatedVisibleRows;
         if (!rows)
             rows = this.visibleRows;
         if (!rows)
-            return true;
-        var res = true;
-        for (var i = 0; i < rows.length; i++) {
-            var row = rows[i];
-            var hasValue = !this.isValueEmpty(row.value);
-            if (addError && !hasValue) {
-                this.addErrorIntoRow(row);
-            }
-            res = res && hasValue;
+            return;
+        var rowsRequired = this.isAllRowRequired || allRowsRequired;
+        var rowsUnique = this.eachRowUnique;
+        res.noValue = false;
+        res.isNotUnique = false;
+        if (modifyErrors) {
+            this.errorsInRow = undefined;
         }
-        return res;
-    };
-    QuestionMatrixModel.prototype.hasNonUniqueValueInRow = function () {
-        var rows = this.generatedVisibleRows;
-        if (!rows)
-            rows = this.visibleRows;
-        if (!rows)
-            return false;
+        if (!rowsRequired && !rowsUnique)
+            return;
         var hash = {};
-        var res = true;
         for (var i = 0; i < rows.length; i++) {
             var val = rows[i].value;
             var isEmpty = this.isValueEmpty(val);
-            var isUnique = isEmpty || hash[val] !== true;
-            if (!isUnique) {
+            var isNotUnique = rowsUnique && (!isEmpty && hash[val] === true);
+            isEmpty = isEmpty && rowsRequired;
+            if (modifyErrors && (isEmpty || isNotUnique)) {
                 this.addErrorIntoRow(rows[i]);
             }
-            res = res && isUnique;
             if (!isEmpty) {
                 hash[val] = true;
             }
+            res.noValue = res.noValue || isEmpty;
+            res.isNotUnique = res.isNotUnique || isNotUnique;
+        }
+        if (modifyErrors) {
+            rows.forEach(function (row) {
+                row.hasError = _this.hasErrorInRow(row);
+            });
         }
-        return !res;
     };
     QuestionMatrixModel.prototype.addErrorIntoRow = function (row) {
         if (!this.errorsInRow)
             this.errorsInRow = {};
         this.errorsInRow[row.name] = true;
+        row.hasError = true;
+    };
+    QuestionMatrixModel.prototype.refreshRowsErrors = function () {
+        if (!this.errorsInRow)
+            return;
+        this.checkErrorsAllRows(true, { noValue: false, isNotUnique: false });
     };
     QuestionMatrixModel.prototype.getIsAnswered = function () {
-        return _super.prototype.getIsAnswered.call(this) && this.hasValuesInAllRows(false);
+        return _super.prototype.getIsAnswered.call(this) && this.hasValuesInAllRows();
     };
     QuestionMatrixModel.prototype.createMatrixRow = function (item, fullName, value) {
         var row = new MatrixRowModel(item, fullName, this, value);
@@ -51043,6 +51123,7 @@ var QuestionMatrixModel = /** @class */ (function (_super) {
                 this.generatedVisibleRows[i].setValueDirectly(rowVal);
             }
         }
+        this.refreshRowsErrors();
         this.updateIsAnswered();
         this.isRowChanging = false;
     };
@@ -51110,7 +51191,7 @@ var QuestionMatrixModel = /** @class */ (function (_super) {
         if (operator === void 0) { operator = null; }
         if (path === void 0) { path = null; }
         if (!path)
-            return _super.prototype.getConditionJson.call(this);
+            return _super.prototype.getConditionJson.call(this, operator);
         var question = new _question_dropdown__WEBPACK_IMPORTED_MODULE_9__["QuestionDropdownModel"](path);
         question.choices = this.columns;
         var json = new _jsonobject__WEBPACK_IMPORTED_MODULE_3__["JsonObject"]().toJsonObject(question);
@@ -52947,7 +53028,7 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
         if (operator === void 0) { operator = null; }
         if (path === void 0) { path = null; }
         if (!path)
-            return _super.prototype.getConditionJson.call(this);
+            return _super.prototype.getConditionJson.call(this, operator);
         var columnName = "";
         for (var i = path.length - 1; i >= 0; i--) {
             if (path[i] == ".")
@@ -58372,7 +58453,7 @@ var QuestionMultipleTextModel = /** @class */ (function (_super) {
         if (operator === void 0) { operator = null; }
         if (path === void 0) { path = null; }
         if (!path)
-            return _super.prototype.getConditionJson.call(this);
+            return _super.prototype.getConditionJson.call(this, operator);
         var item = this.getItemByName(path);
         if (!item)
             return null;
@@ -59631,14 +59712,23 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     });
     QuestionPanelDynamicModel.prototype.getPanelsAnimationOptions = function () {
         var _this = this;
-        var getDirection = function () {
+        var getDirectionCssClass = function () {
             if (_this.isRenderModeList)
                 return "";
+            var cssClass = new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__["CssClassBuilder"]();
+            var isRemoving = false;
             var leavingPanel = _this.renderedPanels.filter(function (el) { return el !== _this.currentPanel; })[0];
             var leavingPanelIndex = _this.visiblePanels.indexOf(leavingPanel);
-            if (leavingPanelIndex < 0)
+            if (leavingPanelIndex < 0) {
+                isRemoving = true;
                 leavingPanelIndex = _this.removedPanelIndex;
-            return leavingPanelIndex > _this.currentIndex ? "-right" : "-left";
+            }
+            return cssClass
+                .append("sv-pd-animation-adding", !!_this.focusNewPanelCallback)
+                .append("sv-pd-animation-removing", isRemoving)
+                .append("sv-pd-animation-left", leavingPanelIndex <= _this.currentIndex)
+                .append("sv-pd-animation-right", leavingPanelIndex > _this.currentIndex)
+                .toString();
         };
         return {
             getAnimatedElement: function (panel) {
@@ -59649,7 +59739,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
                 }
             },
             getEnterOptions: function () {
-                var cssClass = _this.cssClasses.panelWrapperFadeIn ? "" + _this.cssClasses.panelWrapperFadeIn + getDirection() : "";
+                var cssClass = new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__["CssClassBuilder"]().append(_this.cssClasses.panelWrapperFadeIn).append(getDirectionCssClass()).toString();
                 return {
                     onBeforeRunAnimation: function (el) {
                         var _a;
@@ -59668,7 +59758,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
                 };
             },
             getLeaveOptions: function () {
-                var cssClass = _this.cssClasses.panelWrapperFadeOut ? "" + _this.cssClasses.panelWrapperFadeOut + getDirection() : "";
+                var cssClass = new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__["CssClassBuilder"]().append(_this.cssClasses.panelWrapperFadeOut).append(getDirectionCssClass()).toString();
                 return {
                     onBeforeRunAnimation: function (el) {
                         var _a;
@@ -60808,11 +60898,16 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             var prefixName = this.getValueName() + indexStr;
             var prefixText = this.processedTitle + indexStr;
             for (var i = 0; i < panelObjs.length; i++) {
-                objects.push({
-                    name: prefixName + panelObjs[i].name,
-                    text: prefixText + panelObjs[i].text,
-                    question: panelObjs[i].question,
-                });
+                if (!!panelObjs[i].context) {
+                    objects.push(panelObjs[i]);
+                }
+                else {
+                    objects.push({
+                        name: prefixName + panelObjs[i].name,
+                        text: prefixText + panelObjs[i].text,
+                        question: panelObjs[i].question,
+                    });
+                }
             }
         }
         if (hasContext) {
@@ -60826,9 +60921,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
                     text: prefixText + QuestionPanelDynamicItem.ItemVariableName + "." + panelObjs[i].text,
                     question: panelObjs[i].question
                 };
-                if (context === true) {
-                    obj.context = this;
-                }
+                obj.context = this;
                 objects.push(obj);
             }
         }
@@ -60845,7 +60938,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         if (operator === void 0) { operator = null; }
         if (path === void 0) { path = null; }
         if (!path)
-            return _super.prototype.getConditionJson.call(this, operator, path);
+            return _super.prototype.getConditionJson.call(this, operator);
         var questionName = path;
         var pos = path.indexOf(".");
         if (pos > -1) {
@@ -61954,6 +62047,13 @@ var QuestionRadiogroupModel = /** @class */ (function (_super) {
     QuestionRadiogroupModel.prototype.supportGoNextPageAutomatic = function () {
         return this.isMouseDown === true && !this.isOtherSelected;
     };
+    QuestionRadiogroupModel.prototype.getConditionJson = function (operator, path) {
+        if (operator === void 0) { operator = null; }
+        if (path === void 0) { path = null; }
+        var json = _super.prototype.getConditionJson.call(this, operator, path);
+        delete json["showClearButton"];
+        return json;
+    };
     QuestionRadiogroupModel.prototype.setNewComment = function (newValue) {
         this.isMouseDown = true;
         _super.prototype.setNewComment.call(this, newValue);
@@ -63615,7 +63715,9 @@ var QuestionRatingModel = /** @class */ (function (_super) {
             .append(this.cssClasses.control)
             .append(this.cssClasses.controlEmpty, this.isEmpty())
             .append(this.cssClasses.onError, this.hasCssError())
-            .append(this.cssClasses.controlDisabled, this.isReadOnly)
+            .append(this.cssClasses.controlDisabled, this.isDisabledStyle)
+            .append(this.cssClasses.controlReadOnly, this.isReadOnlyStyle)
+            .append(this.cssClasses.controlPreview, this.isPreviewStyle)
             .toString();
     };
     Object.defineProperty(QuestionRatingModel.prototype, "placeholder", {
@@ -64590,7 +64692,14 @@ var QuestionTagboxModel = /** @class */ (function (_super) {
     };
     QuestionTagboxModel.prototype.onSurveyLoad = function () {
         _super.prototype.onSurveyLoad.call(this);
-        if (!this.dropdownListModel) {
+        this.createDropdownListModel();
+    };
+    QuestionTagboxModel.prototype.onSetData = function () {
+        _super.prototype.onSetData.call(this);
+        this.createDropdownListModel();
+    };
+    QuestionTagboxModel.prototype.createDropdownListModel = function () {
+        if (!this.dropdownListModel && !this.isLoadingFromJson) {
             this.dropdownListModel = new _dropdownMultiSelectListModel__WEBPACK_IMPORTED_MODULE_4__["DropdownMultiSelectListModel"](this);
         }
     };
@@ -64801,7 +64910,13 @@ var QuestionTagboxModel = /** @class */ (function (_super) {
         })
     ], QuestionTagboxModel.prototype, "hideSelectedItems", void 0);
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])()
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({
+            onSet: function (newValue, target) {
+                if (!!target.dropdownListModel) {
+                    target.dropdownListModel.setChoicesLazyLoadEnabled(newValue);
+                }
+            }
+        })
     ], QuestionTagboxModel.prototype, "choicesLazyLoadEnabled", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])()
@@ -66509,7 +66624,7 @@ var SurveyQuestionBoolean = /** @class */ (function (_super) {
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.sliderGhost, onClick: function (event) { return _this.handleOnLabelClick(event, _this.question.swapOrder); } },
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.getLabelCss(this.question.swapOrder) }, this.renderLocString(this.question.locLabelLeft))),
                 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.slider, style: { marginLeft: this.question.thumbMargin } }, 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"]("div", { className: cssClasses.sliderGhost, onClick: function (event) { return _this.handleOnLabelClick(event, !_this.question.swapOrder); } },
@@ -68543,6 +68658,59 @@ survey_core__WEBPACK_IMPORTED_MODULE_2__["settings"].showModal = showModal;
 survey_core__WEBPACK_IMPORTED_MODULE_2__["settings"].showDialog = showDialog;
 
 
+/***/ }),
+
+/***/ "./src/react/components/question-error.tsx":
+/*!*************************************************!*\
+  !*** ./src/react/components/question-error.tsx ***!
+  \*************************************************/
+/*! exports provided: QuestionErrorComponent */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "QuestionErrorComponent", function() { return QuestionErrorComponent; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../element-factory */ "./src/react/element-factory.tsx");
+/* harmony import */ var _string_viewer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../string-viewer */ "./src/react/string-viewer.tsx");
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+
+
+
+var QuestionErrorComponent = /** @class */ (function (_super) {
+    __extends(QuestionErrorComponent, _super);
+    function QuestionErrorComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    QuestionErrorComponent.prototype.render = function () {
+        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null,
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: this.props.cssClasses.error.icon || undefined, "aria-hidden": "true" }),
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: this.props.cssClasses.error.item || undefined },
+                react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_string_viewer__WEBPACK_IMPORTED_MODULE_2__["SurveyLocStringViewer"], { locStr: this.props.error.locText }))));
+    };
+    return QuestionErrorComponent;
+}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component));
+
+_element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.registerElement("sv-question-error", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(QuestionErrorComponent, props);
+});
+
+
 /***/ }),
 
 /***/ "./src/react/components/rating/rating-dropdown-item.tsx":
@@ -70986,6 +71154,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-core */ "./src/entries/core.ts");
 /* harmony import */ var _reactSurveyNavigationBase__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactSurveyNavigationBase */ "./src/react/reactSurveyNavigationBase.tsx");
 /* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
+/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -71005,6 +71174,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var SurveyProgressButtons = /** @class */ (function (_super) {
     __extends(SurveyProgressButtons, _super);
     function SurveyProgressButtons(props) {
@@ -71064,12 +71234,13 @@ var SurveyProgressButtons = /** @class */ (function (_super) {
     };
     SurveyProgressButtons.prototype.renderListElement = function (page, index) {
         var _this = this;
+        var text = _reactquestion_element__WEBPACK_IMPORTED_MODULE_4__["SurveyElementBase"].renderLocString(page.locNavigationTitle);
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("li", { key: "listelement" + index, className: this.model.getListElementCss(index), onClick: this.model.isListElementClickable(index)
                 ? function () { return _this.model.clickListElement(page); }
                 : undefined, "data-page-number": this.model.getItemNumber(page) },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsConnector }),
             this.state.canShowItemTitles ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null,
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsPageTitle, title: page.renderedNavigationTitle }, page.renderedNavigationTitle),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsPageTitle, title: page.renderedNavigationTitle }, text),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsPageDescription, title: page.navigationDescription }, page.navigationDescription)) : null,
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsButton },
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsButtonBackground }),
@@ -71398,14 +71569,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-core */ "./src/entries/core.ts");
 /* harmony import */ var _page__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./page */ "./src/react/page.tsx");
 /* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
-/* harmony import */ var _string_viewer__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./string-viewer */ "./src/react/string-viewer.tsx");
-/* harmony import */ var _components_survey_header_survey_header__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/survey-header/survey-header */ "./src/react/components/survey-header/survey-header.tsx");
-/* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./reactquestion_factory */ "./src/react/reactquestion_factory.tsx");
-/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
-/* harmony import */ var _components_brand_info__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./components/brand-info */ "./src/react/components/brand-info.tsx");
-/* harmony import */ var _components_notifier__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./components/notifier */ "./src/react/components/notifier.tsx");
-/* harmony import */ var _components_components_container__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./components/components-container */ "./src/react/components/components-container.tsx");
-/* harmony import */ var _svgbundle__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./svgbundle */ "./src/react/svgbundle.tsx");
+/* harmony import */ var _components_survey_header_survey_header__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/survey-header/survey-header */ "./src/react/components/survey-header/survey-header.tsx");
+/* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./reactquestion_factory */ "./src/react/reactquestion_factory.tsx");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
+/* harmony import */ var _components_brand_info__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./components/brand-info */ "./src/react/components/brand-info.tsx");
+/* harmony import */ var _components_notifier__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./components/notifier */ "./src/react/components/notifier.tsx");
+/* harmony import */ var _components_components_container__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./components/components-container */ "./src/react/components/components-container.tsx");
+/* harmony import */ var _svgbundle__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./svgbundle */ "./src/react/svgbundle.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -71443,7 +71613,6 @@ var __assign = (undefined && undefined.__assign) || function () {
 
 
 
-
 var Survey = /** @class */ (function (_super) {
     __extends(Survey, _super);
     function Survey(props) {
@@ -71531,7 +71700,7 @@ var Survey = /** @class */ (function (_super) {
             renderResult = this.renderSurvey();
         }
         var backgroundImage = !!this.survey.backgroundImage ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.rootBackgroundImage, style: this.survey.backgroundImageStyle }) : null;
-        var header = this.survey.headerView === "basic" ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_survey_header_survey_header__WEBPACK_IMPORTED_MODULE_5__["SurveyHeader"], { survey: this.survey }) : null;
+        var header = this.survey.headerView === "basic" ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_survey_header_survey_header__WEBPACK_IMPORTED_MODULE_4__["SurveyHeader"], { survey: this.survey }) : null;
         var onSubmit = function (event) {
             event.preventDefault();
         };
@@ -71542,18 +71711,18 @@ var Survey = /** @class */ (function (_super) {
         var rootCss = this.survey.getRootCss();
         var cssClasses = this.rootNodeClassName ? this.rootNodeClassName + " " + rootCss : rootCss;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.rootNodeId, ref: this.rootRef, className: cssClasses, style: this.survey.themeVariables },
-            this.survey.needRenderIcons ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_svgbundle__WEBPACK_IMPORTED_MODULE_11__["SvgBundleComponent"], null) : null,
+            this.survey.needRenderIcons ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_svgbundle__WEBPACK_IMPORTED_MODULE_10__["SvgBundleComponent"], null) : null,
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.survey.wrapperFormCss },
                 backgroundImage,
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("form", { onSubmit: onSubmit },
                     customHeader,
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.container },
                         header,
-                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_10__["ComponentsContainer"], { survey: this.survey, container: "header", needRenderWrapper: false }),
+                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_9__["ComponentsContainer"], { survey: this.survey, container: "header", needRenderWrapper: false }),
                         renderResult,
-                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_10__["ComponentsContainer"], { survey: this.survey, container: "footer", needRenderWrapper: false }))),
-                this.survey.showBrandInfo ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_brand_info__WEBPACK_IMPORTED_MODULE_8__["BrandInfo"], null) : null,
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_notifier__WEBPACK_IMPORTED_MODULE_9__["NotifierComponent"], { notifier: this.survey.notifier }))));
+                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_9__["ComponentsContainer"], { survey: this.survey, container: "footer", needRenderWrapper: false }))),
+                this.survey.showBrandInfo ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_brand_info__WEBPACK_IMPORTED_MODULE_7__["BrandInfo"], null) : null,
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_notifier__WEBPACK_IMPORTED_MODULE_8__["NotifierComponent"], { notifier: this.survey.notifier }))));
     };
     Survey.prototype.renderElement = function () {
         return this.doRender();
@@ -71574,7 +71743,7 @@ var Survey = /** @class */ (function (_super) {
         var htmlValue = { __html: this.survey.processedCompletedHtml };
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null,
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { dangerouslySetInnerHTML: htmlValue, className: this.survey.completedCss }),
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_10__["ComponentsContainer"], { survey: this.survey, container: "completePage", needRenderWrapper: false })));
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_9__["ComponentsContainer"], { survey: this.survey, container: "completePage", needRenderWrapper: false })));
     };
     Survey.prototype.renderCompletedBefore = function () {
         var htmlValue = { __html: this.survey.processedCompletedBeforeHtml };
@@ -71596,14 +71765,14 @@ var Survey = /** @class */ (function (_super) {
             style.maxWidth = this.survey.renderedWidth;
         }
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.survey.bodyContainerCss },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_10__["ComponentsContainer"], { survey: this.survey, container: "left" }),
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_9__["ComponentsContainer"], { survey: this.survey, container: "left" }),
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: "sv-components-column sv-components-column--expandable" },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_10__["ComponentsContainer"], { survey: this.survey, container: "center" }),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_9__["ComponentsContainer"], { survey: this.survey, container: "center" }),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: pageId, className: className, style: style },
-                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_10__["ComponentsContainer"], { survey: this.survey, container: "contentTop" }),
+                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_9__["ComponentsContainer"], { survey: this.survey, container: "contentTop" }),
                     activePage,
-                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_10__["ComponentsContainer"], { survey: this.survey, container: "contentBottom" }))),
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_10__["ComponentsContainer"], { survey: this.survey, container: "right" })));
+                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_9__["ComponentsContainer"], { survey: this.survey, container: "contentBottom" }))),
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_9__["ComponentsContainer"], { survey: this.survey, container: "right" })));
     };
     Survey.prototype.renderPage = function (page) {
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_page__WEBPACK_IMPORTED_MODULE_2__["SurveyPage"], { survey: this.survey, page: page, css: this.css, creator: this }));
@@ -71684,17 +71853,14 @@ var Survey = /** @class */ (function (_super) {
     };
     //ISurveyCreator
     Survey.prototype.createQuestionElement = function (question) {
-        return _reactquestion_factory__WEBPACK_IMPORTED_MODULE_6__["ReactQuestionFactory"].Instance.createQuestion(question.isDefaultRendering() ? question.getTemplate() : question.getComponentName(), {
+        return _reactquestion_factory__WEBPACK_IMPORTED_MODULE_5__["ReactQuestionFactory"].Instance.createQuestion(question.isDefaultRendering() ? question.getTemplate() : question.getComponentName(), {
             question: question,
             isDisplayMode: question.isInputReadOnly,
             creator: this,
         });
     };
-    Survey.prototype.renderError = function (key, error, cssClasses) {
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { key: key },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: cssClasses.error.icon || undefined, "aria-hidden": "true" }),
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: cssClasses.error.item || undefined },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_string_viewer__WEBPACK_IMPORTED_MODULE_4__["SurveyLocStringViewer"], { locStr: error.locText }))));
+    Survey.prototype.renderError = function (key, error, cssClasses, element) {
+        return _element_factory__WEBPACK_IMPORTED_MODULE_6__["ReactElementFactory"].Instance.createElement(this.survey.questionErrorComponent, { key: key, error: error, cssClasses: cssClasses, element: element });
     };
     Survey.prototype.questionTitleLocation = function () {
         return this.survey.questionTitleLocation;
@@ -71705,7 +71871,7 @@ var Survey = /** @class */ (function (_super) {
     return Survey;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_3__["SurveyElementBase"]));
 
-_element_factory__WEBPACK_IMPORTED_MODULE_7__["ReactElementFactory"].Instance.registerElement("survey", function (props) {
+_element_factory__WEBPACK_IMPORTED_MODULE_6__["ReactElementFactory"].Instance.registerElement("survey", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](Survey, props);
 });
 function attachKey2click(element, viewModel, options) {
@@ -72057,7 +72223,7 @@ var SurveyElementErrors = /** @class */ (function (_super) {
         var errors = [];
         for (var i = 0; i < this.element.errors.length; i++) {
             var key = "error" + i;
-            errors.push(this.creator.renderError(key, this.element.errors[i], this.cssClasses));
+            errors.push(this.creator.renderError(key, this.element.errors[i], this.cssClasses, this.element));
         }
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { role: "alert", "aria-live": "polite", className: this.element.cssError, id: this.id }, errors));
     };
@@ -76406,20 +76572,34 @@ __webpack_require__.r(__webpack_exports__);
 var RendererFactory = /** @class */ (function () {
     function RendererFactory() {
         this.renderersHash = {};
+        this.defaultHash = {};
     }
     RendererFactory.prototype.unregisterRenderer = function (questionType, rendererAs) {
         delete this.renderersHash[questionType][rendererAs];
+        if (this.defaultHash[questionType] === rendererAs) {
+            delete this.defaultHash[questionType];
+        }
     };
-    RendererFactory.prototype.registerRenderer = function (questionType, renderAs, renderer) {
+    RendererFactory.prototype.registerRenderer = function (questionType, renderAs, renderer, useAsDefault) {
+        if (useAsDefault === void 0) { useAsDefault = false; }
         if (!this.renderersHash[questionType]) {
             this.renderersHash[questionType] = {};
         }
         this.renderersHash[questionType][renderAs] = renderer;
+        if (useAsDefault) {
+            this.defaultHash[questionType] = renderAs;
+        }
     };
     RendererFactory.prototype.getRenderer = function (questionType, renderAs) {
-        return ((this.renderersHash[questionType] &&
-            this.renderersHash[questionType][renderAs]) ||
-            "default");
+        var qHash = this.renderersHash[questionType];
+        if (!!qHash) {
+            if (!!renderAs && qHash[renderAs])
+                return qHash[renderAs];
+            var dVal = this.defaultHash[questionType];
+            if (!!dVal && qHash[dVal])
+                return qHash[dVal];
+        }
+        return "default";
     };
     RendererFactory.prototype.getRendererByQuestion = function (question) {
         return this.getRenderer(question.getType(), question.renderAs);
@@ -79922,6 +80102,7 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.skippedPages = [];
         _this.skeletonComponentName = "sv-skeleton";
         _this.taskManager = new _surveyTaskManager__WEBPACK_IMPORTED_MODULE_22__["SurveyTaskManagerModel"]();
+        _this.questionErrorComponent = "sv-question-error";
         if (_global_variables_utils__WEBPACK_IMPORTED_MODULE_25__["DomDocumentHelper"].isAvailable()) {
             SurveyModel.stylesManager = new _stylesmanager__WEBPACK_IMPORTED_MODULE_11__["StylesManager"]();
         }
@@ -87586,7 +87767,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("survey", [
     {
         name: "showProgressBar",
         default: "off",
-        choices: ["off", "auto", "aboveHeader", "belowHeader", "bottom", "topBottom"],
+        choices: ["off", "auto", "aboveheader", "belowheader", "bottom", "topbottom"],
     },
     {
         name: "progressBarType",
@@ -88225,11 +88406,9 @@ function createTOCListModel(survey, onAction) {
     var _a;
     var pagesSource = survey.questionsOnPageMode === "singlePage" ? (_a = survey.pages[0]) === null || _a === void 0 ? void 0 : _a.elements : survey.pages;
     var items = (pagesSource || []).map(function (page) {
-        var _a, _b;
         return new _actions_action__WEBPACK_IMPORTED_MODULE_0__["Action"]({
             id: page.name,
-            locTitle: ((_a = page.locNavigationTitle) === null || _a === void 0 ? void 0 : _a.text) ? page.locNavigationTitle : (((_b = page.locTitle) === null || _b === void 0 ? void 0 : _b.text) ? page.locTitle : undefined),
-            title: page.renderedNavigationTitle,
+            locTitle: page.locNavigationTitle,
             action: function () {
                 _global_variables_utils__WEBPACK_IMPORTED_MODULE_2__["DomDocumentHelper"].activeElementBlur();
                 !!onAction && onAction();
@@ -89491,10 +89670,15 @@ var AnimationUtils = /** @class */ (function () {
             options.onBeforeRunAnimation && options.onBeforeRunAnimation(element);
         }
     };
+    AnimationUtils.prototype.getCssClasses = function (options) {
+        return options.cssClass.replace(/\s+$/, "").split(/\s+/);
+    };
     AnimationUtils.prototype.runAnimation = function (element, options, callback) {
         if (element && options.cssClass) {
             this.reflow(element);
-            element.classList.add(options.cssClass);
+            this.getCssClasses(options).forEach(function (cssClass) {
+                element.classList.add(cssClass);
+            });
             this.onAnimationEnd(element, callback, options);
         }
         else {
@@ -89503,7 +89687,9 @@ var AnimationUtils = /** @class */ (function () {
     };
     AnimationUtils.prototype.clearHtmlElement = function (element, options) {
         if (element && options.cssClass) {
-            element.classList.remove(options.cssClass);
+            this.getCssClasses(options).forEach(function (cssClass) {
+                element.classList.remove(cssClass);
+            });
         }
     };
     AnimationUtils.prototype.onNextRender = function (callback, runEarly, isCancel) {