survey-react-ui 1.10.1 → 1.10.3

package/survey-react-ui.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)
  */
@@ -161,11 +161,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",
@@ -189,7 +190,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++; };
@@ -392,7 +392,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"])()
@@ -413,9 +413,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) {
@@ -1266,6 +1266,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();
         /**
@@ -1661,8 +1663,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) {
@@ -1838,9 +1838,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
      */
@@ -3020,7 +3022,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!***************************************!*\
   !*** ./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";
@@ -3268,39 +3270,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
 
@@ -3382,6 +3387,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 
 
 //Uncomment to include the "date" question type.
@@ -3394,7 +3400,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!*********************************!*\
   !*** ./src/entries/react-ui.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, SurveyModel, SurveyWindowModel, settings, surveyLocalization, surveyStrings, Model, ResponsivityManager, VerticalResponsivityManager, unwrap */
+/*! 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, SurveyModel, SurveyWindowModel, settings, surveyLocalization, surveyStrings, Model, ResponsivityManager, VerticalResponsivityManager, unwrap */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3572,6 +3578,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyNavigationButton", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["SurveyNavigationButton"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "QuestionErrorComponent", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["QuestionErrorComponent"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MatrixRow", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["MatrixRow"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Skeleton", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["Skeleton"]; });
@@ -3625,7 +3633,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.10.1", "survey-react-ui");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.10.3", "survey-react-ui");
 
 
 /***/ }),
@@ -9612,10 +9620,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) {
@@ -10326,7 +10342,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++) {
@@ -10543,11 +10559,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)) {
@@ -11547,7 +11562,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...",
@@ -11597,7 +11612,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",
@@ -11683,36 +11698,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 () {
@@ -11768,7 +11776,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 })
@@ -11779,18 +11787,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);
@@ -12082,7 +12078,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); } },
@@ -14119,6 +14115,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":
@@ -16569,6 +16618,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_1__);
 /* 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 ||
@@ -16588,6 +16638,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var SurveyProgressButtons = /** @class */ (function (_super) {
     __extends(SurveyProgressButtons, _super);
     function SurveyProgressButtons(props) {
@@ -16647,12 +16698,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 }),
@@ -16984,14 +17036,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_1__);
 /* 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 ||
@@ -17029,7 +17080,6 @@ var __assign = (undefined && undefined.__assign) || function () {
 
 
 
-
 var Survey = /** @class */ (function (_super) {
     __extends(Survey, _super);
     function Survey(props) {
@@ -17117,7 +17167,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();
         };
@@ -17128,18 +17178,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();
@@ -17160,7 +17210,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 };
@@ -17182,14 +17232,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 }));
@@ -17270,17 +17320,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;
@@ -17291,7 +17338,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) {
@@ -17643,7 +17690,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));
     };
@@ -24389,10 +24436,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 {
@@ -24401,7 +24453,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) {