survey-react-ui 1.9.126 → 1.9.128

package/survey-react-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.126
+ * surveyjs - Survey JavaScript library v1.9.128
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -561,8 +561,8 @@ var Base = /** @class */ (function () {
      * Returns a JSON object that corresponds to the current SurveyJS object.
      * @see fromJSON
      */
-    Base.prototype.toJSON = function () {
-        return new _jsonobject__WEBPACK_IMPORTED_MODULE_2__["JsonObject"]().toJsonObject(this);
+    Base.prototype.toJSON = function (options) {
+        return new _jsonobject__WEBPACK_IMPORTED_MODULE_2__["JsonObject"]().toJsonObject(this, options);
     };
     /**
      * Assigns a new configuration to the current SurveyJS object. This configuration is taken from a passed JSON object.
@@ -2166,14 +2166,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _react_reactquestion_paneldynamic__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ../react/reactquestion_paneldynamic */ "./src/react/reactquestion_paneldynamic.tsx");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionPanelDynamic", function() { return _react_reactquestion_paneldynamic__WEBPACK_IMPORTED_MODULE_39__["SurveyQuestionPanelDynamic"]; });
 
-/* harmony import */ var _react_reactSurveyProgress__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ../react/reactSurveyProgress */ "./src/react/reactSurveyProgress.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyProgress", function() { return _react_reactSurveyProgress__WEBPACK_IMPORTED_MODULE_40__["SurveyProgress"]; });
+/* harmony import */ var _react_progress__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ../react/progress */ "./src/react/progress.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyProgress", function() { return _react_progress__WEBPACK_IMPORTED_MODULE_40__["SurveyProgress"]; });
 
-/* harmony import */ var _react_reactSurveyProgressButtons__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ../react/reactSurveyProgressButtons */ "./src/react/reactSurveyProgressButtons.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyProgressButtons", function() { return _react_reactSurveyProgressButtons__WEBPACK_IMPORTED_MODULE_41__["SurveyProgressButtons"]; });
+/* harmony import */ var _react_progressButtons__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ../react/progressButtons */ "./src/react/progressButtons.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyProgressButtons", function() { return _react_progressButtons__WEBPACK_IMPORTED_MODULE_41__["SurveyProgressButtons"]; });
 
-/* harmony import */ var _react_reactSurveyProgressToc__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ../react/reactSurveyProgressToc */ "./src/react/reactSurveyProgressToc.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyProgressToc", function() { return _react_reactSurveyProgressToc__WEBPACK_IMPORTED_MODULE_42__["SurveyProgressToc"]; });
+/* harmony import */ var _react_progressToc__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ../react/progressToc */ "./src/react/progressToc.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyProgressToc", function() { return _react_progressToc__WEBPACK_IMPORTED_MODULE_42__["SurveyProgressToc"]; });
 
 /* harmony import */ var _react_reactquestion_rating__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! ../react/reactquestion_rating */ "./src/react/reactquestion_rating.tsx");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionRating", function() { return _react_reactquestion_rating__WEBPACK_IMPORTED_MODULE_43__["SurveyQuestionRating"]; });
@@ -2620,7 +2620,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.126", "survey-react-ui");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.128", "survey-react-ui");
 
 
 /***/ }),
@@ -7235,6 +7235,27 @@ var Helpers = /** @class */ (function () {
         }
         return val;
     };
+    Helpers.compareVerions = function (ver1, ver2) {
+        if (!ver1 && !ver2)
+            return 0;
+        var ver1Ar = ver1.split(".");
+        var ver2Ar = ver2.split(".");
+        var len1 = ver1Ar.length;
+        var len2 = ver2Ar.length;
+        for (var i = 0; i < len1 && i < len2; i++) {
+            var str1 = ver1Ar[i];
+            var str2 = ver2Ar[i];
+            if (str1.length === str2.length) {
+                if (str1 !== str2) {
+                    return str1 < str2 ? -1 : 1;
+                }
+            }
+            else {
+                return str1.length < str2.length ? -1 : 1;
+            }
+        }
+        return len1 === len2 ? 0 : (len1 < len2 ? -1 : 1);
+    };
     return Helpers;
 }());
 
@@ -7680,8 +7701,15 @@ var JsonObjectProperty = /** @class */ (function () {
         var isLayout = !this.layout || this.layout == layout;
         if (!this.visible || !isLayout)
             return false;
-        if (!!this.visibleIf && !!obj)
+        if (!!this.visibleIf && !!obj) {
+            if (obj.getOriginalObj) {
+                var orjObj = obj.getOriginalObj();
+                if (orjObj && Serializer.findProperty(orjObj.getType(), this.name)) {
+                    obj = orjObj;
+                }
+            }
             return this.visibleIf(obj);
+        }
         return true;
     };
     Object.defineProperty(JsonObjectProperty.prototype, "visible", {
@@ -7694,6 +7722,21 @@ var JsonObjectProperty = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    JsonObjectProperty.prototype.isAvailableInVersion = function (ver) {
+        if (!!this.alternativeName)
+            return true;
+        return this.isAvailableInVersionCore(ver);
+    };
+    JsonObjectProperty.prototype.getSerializedName = function (ver) {
+        if (!this.alternativeName)
+            return this.name;
+        return this.isAvailableInVersionCore(ver) ? this.name : this.alternativeName;
+    };
+    JsonObjectProperty.prototype.isAvailableInVersionCore = function (ver) {
+        if (!ver || !this.version)
+            return true;
+        return _helpers__WEBPACK_IMPORTED_MODULE_2__["Helpers"].compareVerions(this.version, ver) <= 0;
+    };
     Object.defineProperty(JsonObjectProperty.prototype, "isLocalizable", {
         get: function () {
             return this.isLocalizableValue != null ? this.isLocalizableValue : false;
@@ -7774,6 +7817,7 @@ var JsonObjectProperty = /** @class */ (function () {
         "className",
         "alternativeName",
         "layout",
+        "version",
         "classNamePart",
         "baseClassName",
         "defaultValue",
@@ -8222,6 +8266,9 @@ var JsonMetadataClass = /** @class */ (function () {
             if (propInfo.layout) {
                 prop.layout = propInfo.layout;
             }
+            if (propInfo.version) {
+                prop.version = propInfo.version;
+            }
             if (propInfo.dependsOn) {
                 this.addDependsOnProperties(prop, propInfo.dependsOn);
             }
@@ -8366,36 +8413,54 @@ var JsonMetadata = /** @class */ (function () {
     JsonMetadata.prototype.getPropertiesByObj = function (obj) {
         if (!obj || !obj.getType)
             return [];
-        var res = {};
         var props = this.getProperties(obj.getType());
-        for (var i = 0; i < props.length; i++) {
-            res[props[i].name] = props[i];
-        }
-        var dynamicProps = !!obj.getDynamicType
-            ? this.getProperties(obj.getDynamicType())
-            : null;
-        if (dynamicProps && dynamicProps.length > 0) {
-            for (var i = 0; i < dynamicProps.length; i++) {
-                var dProp = dynamicProps[i];
-                if (!!res[dProp.name])
-                    continue;
-                res[dProp.name] = dProp;
+        var dynamicProps = this.getDynamicPropertiesByObj(obj);
+        return [].concat(props).concat(dynamicProps);
+    };
+    JsonMetadata.prototype.addDynamicPropertiesIntoObj = function (dest, src, props) {
+        var _this = this;
+        props.forEach(function (prop) {
+            _this.addDynamicPropertyIntoObj(dest, src, prop.name, false);
+            if (prop.serializationProperty) {
+                _this.addDynamicPropertyIntoObj(dest, src, prop.serializationProperty, true);
+            }
+            if (prop.alternativeName) {
+                _this.addDynamicPropertyIntoObj(dest, src, prop.alternativeName, false);
             }
+        });
+    };
+    JsonMetadata.prototype.addDynamicPropertyIntoObj = function (dest, src, propName, isReadOnly) {
+        var desc = {
+            configurable: true,
+            get: function () {
+                return src[propName];
+            },
+        };
+        if (!isReadOnly) {
+            desc["set"] = function (v) {
+                src[propName] = v;
+            };
         }
-        return Object.keys(res).map(function (key) { return res[key]; });
+        Object.defineProperty(dest, propName, desc);
     };
     JsonMetadata.prototype.getDynamicPropertiesByObj = function (obj, dynamicType) {
         if (dynamicType === void 0) { dynamicType = null; }
-        if (!obj || !obj.getType || (!obj.getDynamicType && !dynamicType))
+        if (!obj || !obj.getType)
+            return [];
+        if (!!obj.getDynamicProperties)
+            return obj.getDynamicProperties();
+        if (!obj.getDynamicType && !dynamicType)
             return [];
-        var objType = obj.getType();
         var dType = !!dynamicType ? dynamicType : obj.getDynamicType();
-        if (!dType)
+        return this.getDynamicPropertiesByTypes(obj.getType(), dType);
+    };
+    JsonMetadata.prototype.getDynamicPropertiesByTypes = function (objType, dynamicType, invalidNames) {
+        if (!dynamicType)
             return [];
-        var cacheType = dType + "-" + objType;
+        var cacheType = dynamicType + "-" + objType;
         if (this.dynamicPropsCache[cacheType])
             return this.dynamicPropsCache[cacheType];
-        var dynamicProps = this.getProperties(dType);
+        var dynamicProps = this.getProperties(dynamicType);
         if (!dynamicProps || dynamicProps.length == 0)
             return [];
         var hash = {};
@@ -8404,9 +8469,11 @@ var JsonMetadata = /** @class */ (function () {
             hash[props[i].name] = props[i];
         }
         var res = [];
-        for (var i = 0; i < dynamicProps.length; i++) {
-            var dProp = dynamicProps[i];
-            if (!hash[dProp.name]) {
+        if (!invalidNames)
+            invalidNames = [];
+        for (var i_1 = 0; i_1 < dynamicProps.length; i_1++) {
+            var dProp = dynamicProps[i_1];
+            if (!hash[dProp.name] && invalidNames.indexOf(dProp.name) < 0) {
                 res.push(dProp);
             }
         }
@@ -8901,9 +8968,8 @@ var JsonObject = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
-    JsonObject.prototype.toJsonObject = function (obj, storeDefaults) {
-        if (storeDefaults === void 0) { storeDefaults = false; }
-        return this.toJsonObjectCore(obj, null, storeDefaults);
+    JsonObject.prototype.toJsonObject = function (obj, options) {
+        return this.toJsonObjectCore(obj, null, options);
     };
     JsonObject.prototype.toObject = function (jsonObj, obj, options) {
         this.toObjectCore(jsonObj, obj, options);
@@ -8952,8 +9018,7 @@ var JsonObject = /** @class */ (function () {
             obj.endLoadingFromJson();
         }
     };
-    JsonObject.prototype.toJsonObjectCore = function (obj, property, storeDefaults) {
-        if (storeDefaults === void 0) { storeDefaults = false; }
+    JsonObject.prototype.toJsonObjectCore = function (obj, property, options) {
         if (!obj || !obj.getType)
             return obj;
         if (typeof obj.getData === "function")
@@ -8962,61 +9027,67 @@ var JsonObject = /** @class */ (function () {
         if (property != null && !property.className) {
             result[JsonObject.typePropertyName] = property.getObjType(obj.getType());
         }
-        this.propertiesToJson(obj, Serializer.getProperties(obj.getType()), result, storeDefaults);
-        this.propertiesToJson(obj, this.getDynamicProperties(obj), result, storeDefaults);
+        var storeDefaults = options === true;
+        if (!options || options === true) {
+            options = {};
+        }
+        if (storeDefaults) {
+            options.storeDefaults = storeDefaults;
+        }
+        this.propertiesToJson(obj, Serializer.getProperties(obj.getType()), result, options);
+        this.propertiesToJson(obj, this.getDynamicProperties(obj), result, options);
         return result;
     };
     JsonObject.prototype.getDynamicProperties = function (obj) {
         return Serializer.getDynamicPropertiesByObj(obj);
     };
-    JsonObject.prototype.addDynamicProperties = function (obj, jsonObj, properties) {
-        if (!obj.getDynamicPropertyName)
-            return properties;
-        var dynamicPropName = obj.getDynamicPropertyName();
-        if (!dynamicPropName)
-            return properties;
-        if (jsonObj[dynamicPropName]) {
-            obj[dynamicPropName] = jsonObj[dynamicPropName];
-        }
-        var dynamicProperties = this.getDynamicProperties(obj);
-        var res = [];
-        for (var i = 0; i < properties.length; i++) {
-            res.push(properties[i]);
-        }
-        for (var i = 0; i < dynamicProperties.length; i++) {
-            res.push(dynamicProperties[i]);
+    JsonObject.prototype.addDynamicProperties = function (obj, jsonObj, props) {
+        if (!obj.getDynamicPropertyName && !obj.getDynamicProperties)
+            return props;
+        if (obj.getDynamicPropertyName) {
+            var dynamicPropName = obj.getDynamicPropertyName();
+            if (!dynamicPropName)
+                return props;
+            if (dynamicPropName && jsonObj[dynamicPropName]) {
+                obj[dynamicPropName] = jsonObj[dynamicPropName];
+            }
         }
-        return res;
+        var dynamicProps = this.getDynamicProperties(obj);
+        return dynamicProps.length === 0 ? props : [].concat(props).concat(dynamicProps);
     };
-    JsonObject.prototype.propertiesToJson = function (obj, properties, json, storeDefaults) {
-        if (storeDefaults === void 0) { storeDefaults = false; }
+    JsonObject.prototype.propertiesToJson = function (obj, properties, json, options) {
         for (var i = 0; i < properties.length; i++) {
-            this.valueToJson(obj, json, properties[i], storeDefaults);
+            this.valueToJson(obj, json, properties[i], options);
         }
     };
-    JsonObject.prototype.valueToJson = function (obj, result, property, storeDefaults) {
-        if (storeDefaults === void 0) { storeDefaults = false; }
-        if (property.isSerializable === false ||
-            (property.isLightSerializable === false && this.lightSerializing))
+    JsonObject.prototype.valueToJson = function (obj, result, prop, options) {
+        if (!options)
+            options = {};
+        if (prop.isSerializable === false || (prop.isLightSerializable === false && this.lightSerializing))
+            return;
+        if (options.version && !prop.isAvailableInVersion(options.version))
             return;
-        var value = property.getSerializableValue(obj);
-        if (!storeDefaults && property.isDefaultValueByObj(obj, value))
+        var value = prop.getSerializableValue(obj);
+        if (!options.storeDefaults && prop.isDefaultValueByObj(obj, value))
             return;
         if (this.isValueArray(value)) {
             var arrValue = [];
             for (var i = 0; i < value.length; i++) {
-                arrValue.push(this.toJsonObjectCore(value[i], property, storeDefaults));
+                arrValue.push(this.toJsonObjectCore(value[i], prop, options));
             }
             value = arrValue.length > 0 ? arrValue : null;
         }
         else {
-            value = this.toJsonObjectCore(value, property, storeDefaults);
+            value = this.toJsonObjectCore(value, prop, options);
         }
+        if (value === undefined || value === null)
+            return;
+        var name = prop.getSerializedName(options.version);
         var hasValue = typeof obj["getPropertyValue"] === "function" &&
-            obj["getPropertyValue"](property.name, null) !== null;
-        if ((storeDefaults && hasValue) || !property.isDefaultValueByObj(obj, value)) {
-            if (!Serializer.onSerializingProperty || !Serializer.onSerializingProperty(obj, property, value, result)) {
-                result[property.name] = value;
+            obj["getPropertyValue"](name, null) !== null;
+        if ((options.storeDefaults && hasValue) || !prop.isDefaultValueByObj(obj, value)) {
+            if (!Serializer.onSerializingProperty || !Serializer.onSerializingProperty(obj, prop, value, result)) {
+                result[name] = this.removePosOnValueToJson(prop, value);
             }
         }
     };
@@ -9056,6 +9127,14 @@ var JsonObject = /** @class */ (function () {
             }
         }
     };
+    JsonObject.prototype.removePosOnValueToJson = function (property, value) {
+        if (!property.isCustom || !value)
+            return value;
+        if (!!value[JsonObject.positionPropertyName]) {
+            delete value[JsonObject.positionPropertyName];
+        }
+        return value;
+    };
     JsonObject.prototype.removePos = function (property, value) {
         if (!property || !property.type || property.type.indexOf("value") < 0)
             return;
@@ -9831,6 +9910,8 @@ var englishStrings = {
     startSurveyText: "Start",
     otherItemText: "Other (describe)",
     noneItemText: "None",
+    refuseItemText: "Refuse to answer",
+    dontKnowItemText: "Don't know",
     selectAllItemText: "Select All",
     progressText: "Page {0} of {1}",
     indexText: "{0} of {1}",
@@ -10176,7 +10257,7 @@ var SurveyQuestionBoolean = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { className: itemClass, onClick: this.handleOnClick },
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { ref: this.checkRef, type: "checkbox", name: this.question.name, value: this.question.booleanValue === null
                         ? ""
-                        : this.question.booleanValue, id: this.question.inputId, className: cssClasses.control, disabled: this.isDisplayMode, checked: this.question.booleanValue || false, onChange: this.handleOnChange, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy }),
+                        : this.question.booleanValue, id: this.question.inputId, className: cssClasses.control, disabled: this.isDisplayMode, checked: this.question.booleanValue || false, onChange: this.handleOnChange, role: this.question.a11y_input_ariaRole, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-describedby": this.question.a11y_input_ariaDescribedBy }),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.sliderGhost, onClick: function (event) { return _this.handleOnLabelClick(event, false); } },
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.getLabelCss(false) }, this.renderLocString(this.question.locLabelFalse))),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.switch, onClick: this.handleOnSwitchClick },
@@ -14508,25 +14589,22 @@ _element_factory__WEBPACK_IMPORTED_MODULE_3__["ReactElementFactory"].Instance.re
 
 /***/ }),
 
-/***/ "./src/react/rating-dropdown.tsx":
-/*!***************************************!*\
-  !*** ./src/react/rating-dropdown.tsx ***!
-  \***************************************/
-/*! exports provided: RatingDropdownItem, SurveyQuestionRatingDropdown */
+/***/ "./src/react/progress.tsx":
+/*!********************************!*\
+  !*** ./src/react/progress.tsx ***!
+  \********************************/
+/*! exports provided: SurveyProgress */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionRatingDropdown", function() { return SurveyQuestionRatingDropdown; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyProgress", function() { return SurveyProgress; });
 /* 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 survey_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-core */ "survey-core");
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _dropdown_base__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./dropdown-base */ "./src/react/dropdown-base.tsx");
-/* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactquestion_factory */ "./src/react/reactquestion_factory.tsx");
-/* harmony import */ var _components_rating_rating_dropdown_item__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/rating/rating-dropdown-item */ "./src/react/components/rating/rating-dropdown-item.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RatingDropdownItem", function() { return _components_rating_rating_dropdown_item__WEBPACK_IMPORTED_MODULE_4__["RatingDropdownItem"]; });
-
+/* 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");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -14546,45 +14624,76 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
-
-var SurveyQuestionRatingDropdown = /** @class */ (function (_super) {
-    __extends(SurveyQuestionRatingDropdown, _super);
-    function SurveyQuestionRatingDropdown(props) {
+var SurveyProgress = /** @class */ (function (_super) {
+    __extends(SurveyProgress, _super);
+    function SurveyProgress(props) {
         return _super.call(this, props) || this;
     }
-    SurveyQuestionRatingDropdown.prototype.renderElement = function () {
-        var cssClasses = this.question.cssClasses;
-        var select = this.renderSelect(cssClasses);
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.rootDropdown }, select));
+    Object.defineProperty(SurveyProgress.prototype, "isTop", {
+        get: function () {
+            return this.props.isTop;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyProgress.prototype, "progress", {
+        get: function () {
+            return this.survey.progressValue;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyProgress.prototype, "progressText", {
+        get: function () {
+            return this.survey.progressText;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyProgress.prototype.render = function () {
+        var progressStyle = {
+            width: this.progress + "%",
+        };
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.survey.getProgressCssClasses(this.props.container) },
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { style: progressStyle, className: this.css.progressBar, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": "progress" },
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: survey_core__WEBPACK_IMPORTED_MODULE_1__["SurveyProgressModel"].getProgressTextInBarCss(this.css) }, this.progressText)),
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: survey_core__WEBPACK_IMPORTED_MODULE_1__["SurveyProgressModel"].getProgressTextUnderBarCss(this.css) }, this.progressText)));
     };
-    return SurveyQuestionRatingDropdown;
-}(_dropdown_base__WEBPACK_IMPORTED_MODULE_2__["SurveyQuestionDropdownBase"]));
+    return SurveyProgress;
+}(_reactSurveyNavigationBase__WEBPACK_IMPORTED_MODULE_2__["SurveyNavigationBase"]));
 
-_reactquestion_factory__WEBPACK_IMPORTED_MODULE_3__["ReactQuestionFactory"].Instance.registerQuestion("sv-rating-dropdown", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionRatingDropdown, props);
+_element_factory__WEBPACK_IMPORTED_MODULE_3__["ReactElementFactory"].Instance.registerElement("sv-progress-pages", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyProgress, props);
+});
+_element_factory__WEBPACK_IMPORTED_MODULE_3__["ReactElementFactory"].Instance.registerElement("sv-progress-questions", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyProgress, props);
+});
+_element_factory__WEBPACK_IMPORTED_MODULE_3__["ReactElementFactory"].Instance.registerElement("sv-progress-correctquestions", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyProgress, props);
+});
+_element_factory__WEBPACK_IMPORTED_MODULE_3__["ReactElementFactory"].Instance.registerElement("sv-progress-requiredquestions", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyProgress, props);
 });
-survey_core__WEBPACK_IMPORTED_MODULE_1__["RendererFactory"].Instance.registerRenderer("rating", "dropdown", "sv-rating-dropdown");
 
 
 /***/ }),
 
-/***/ "./src/react/react-popup-survey.tsx":
-/*!******************************************!*\
-  !*** ./src/react/react-popup-survey.tsx ***!
-  \******************************************/
-/*! exports provided: PopupSurvey, SurveyWindow */
+/***/ "./src/react/progressButtons.tsx":
+/*!***************************************!*\
+  !*** ./src/react/progressButtons.tsx ***!
+  \***************************************/
+/*! exports provided: SurveyProgressButtons */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PopupSurvey", function() { return PopupSurvey; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyWindow", function() { return SurveyWindow; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyProgressButtons", function() { return SurveyProgressButtons; });
 /* 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 survey_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-core */ "survey-core");
 /* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _reactSurvey__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactSurvey */ "./src/react/reactSurvey.tsx");
-/* harmony import */ var _components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
+/* 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");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -14604,133 +14713,184 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
-var PopupSurvey = /** @class */ (function (_super) {
-    __extends(PopupSurvey, _super);
-    function PopupSurvey(props) {
+var SurveyProgressButtons = /** @class */ (function (_super) {
+    __extends(SurveyProgressButtons, _super);
+    function SurveyProgressButtons(props) {
         var _this = _super.call(this, props) || this;
-        _this.handleOnExpanded = _this.handleOnExpanded.bind(_this);
+        _this.listContainerRef = react__WEBPACK_IMPORTED_MODULE_0__["createRef"]();
         return _this;
     }
-    PopupSurvey.prototype.getStateElements = function () {
-        return [this.popup, this.popup.survey];
+    Object.defineProperty(SurveyProgressButtons.prototype, "model", {
+        get: function () {
+            return this.props.model;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyProgressButtons.prototype, "container", {
+        get: function () {
+            return this.props.container;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyProgressButtons.prototype.onResize = function (canShowItemTitles) {
+        this.setState({ canShowItemTitles: canShowItemTitles });
+        this.setState({ canShowHeader: !canShowItemTitles });
     };
-    PopupSurvey.prototype.handleOnExpanded = function (event) {
-        this.popup.changeExpandCollapse();
+    SurveyProgressButtons.prototype.onUpdateScroller = function (hasScroller) {
+        this.setState({ hasScroller: hasScroller });
     };
-    PopupSurvey.prototype.canRender = function () {
-        return _super.prototype.canRender.call(this) && this.popup.isShowing;
+    SurveyProgressButtons.prototype.onUpdateSettings = function () {
+        this.setState({ canShowItemTitles: this.model.showItemTitles });
+        this.setState({ canShowFooter: !this.model.showItemTitles });
     };
-    PopupSurvey.prototype.renderElement = function () {
+    SurveyProgressButtons.prototype.render = function () {
         var _this = this;
-        var header = this.renderWindowHeader();
-        var body = this.renderBody();
-        var style = {};
-        if (!!this.popup.renderedWidth) {
-            style.width = this.popup.renderedWidth;
-            style.maxWidth = this.popup.renderedWidth;
-        }
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.popup.cssRoot, style: style, onScroll: function () { return _this.popup.onScroll(); } },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.popup.cssRootContent },
-                header,
-                body)));
-    };
-    PopupSurvey.prototype.renderWindowHeader = function () {
-        var popup = this.popup;
-        var headerCss = popup.cssHeaderRoot;
-        var titleCollapsed = null;
-        var expandCollapseIcon;
-        var closeButton = null;
-        if (popup.isCollapsed) {
-            headerCss += " " + popup.cssRootCollapsedMod;
-            titleCollapsed = this.renderTitleCollapsed(popup);
-            expandCollapseIcon = this.renderExpandIcon();
-        }
-        else {
-            expandCollapseIcon = this.renderCollapseIcon();
-        }
-        if (popup.allowClose) {
-            closeButton = this.renderCloseButton(this.popup);
-        }
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: popup.cssHeaderRoot },
-            titleCollapsed,
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: popup.cssHeaderButtonsContainer },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: popup.cssHeaderCollapseButton, onClick: this.handleOnExpanded }, expandCollapseIcon),
-                closeButton)));
-    };
-    PopupSurvey.prototype.renderTitleCollapsed = function (popup) {
-        if (!popup.locTitle)
-            return null;
-        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: popup.cssHeaderTitleCollapsed }, popup.locTitle.renderedHtml);
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.model.getRootCss(this.props.container), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": "progress" },
+            this.state.canShowHeader ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsHeader },
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsPageTitle, title: this.model.headerText }, this.model.headerText)) : null,
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsContainer },
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.model.getScrollButtonCss(this.state.hasScroller, true), role: "button", onClick: function () {
+                        return _this.clickScrollButton(_this.listContainerRef.current, true);
+                    } }),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsListContainer, ref: this.listContainerRef },
+                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("ul", { className: this.css.progressButtonsList }, this.getListElements())),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.model.getScrollButtonCss(this.state.hasScroller, false), role: "button", onClick: function () {
+                        return _this.clickScrollButton(_this.listContainerRef.current, false);
+                    } })),
+            this.state.canShowFooter ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsFooter },
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsPageTitle, title: this.model.footerText }, this.model.footerText)) : null));
     };
-    PopupSurvey.prototype.renderExpandIcon = function () {
-        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { iconName: "icon-restore_16x16", size: 16 });
+    SurveyProgressButtons.prototype.getListElements = function () {
+        var _this = this;
+        var buttons = [];
+        this.survey.visiblePages.forEach(function (page, index) {
+            buttons.push(_this.renderListElement(page, index));
+        });
+        return buttons;
     };
-    PopupSurvey.prototype.renderCollapseIcon = function () {
-        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { iconName: "icon-minimize_16x16", size: 16 });
+    SurveyProgressButtons.prototype.renderListElement = function (page, index) {
+        var _this = this;
+        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.progressButtonsPageDescription, title: page.navigationDescription }, page.navigationDescription)) : null));
     };
-    PopupSurvey.prototype.renderCloseButton = function (popup) {
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: popup.cssHeaderCloseButton, onClick: function () { popup.hide(); } },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { iconName: "icon-close_16x16", size: 16 })));
+    SurveyProgressButtons.prototype.clickScrollButton = function (listContainerElement, isLeftScroll) {
+        if (!!listContainerElement) {
+            listContainerElement.scrollLeft += (isLeftScroll ? -1 : 1) * 70;
+        }
     };
-    PopupSurvey.prototype.renderBody = function () {
-        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.popup.cssBody }, this.doRender());
+    SurveyProgressButtons.prototype.componentDidMount = function () {
+        var _this = this;
+        _super.prototype.componentDidMount.call(this);
+        setTimeout(function () {
+            _this.respManager = new survey_core__WEBPACK_IMPORTED_MODULE_1__["ProgressButtonsResponsivityManager"](_this.model, _this.listContainerRef.current, _this);
+        }, 10);
     };
-    PopupSurvey.prototype.createSurvey = function (newProps) {
-        if (!newProps)
-            newProps = {};
-        _super.prototype.createSurvey.call(this, newProps);
-        this.popup = new survey_core__WEBPACK_IMPORTED_MODULE_1__["PopupSurveyModel"](null, this.survey);
-        if (newProps.closeOnCompleteTimeout) {
-            this.popup.closeOnCompleteTimeout = newProps.closeOnCompleteTimeout;
-        }
-        this.popup.allowClose = newProps.allowClose;
-        this.popup.isShowing = true;
-        if (!this.popup.isExpanded && (newProps.expanded || newProps.isExpanded))
-            this.popup.expand();
+    SurveyProgressButtons.prototype.componentWillUnmount = function () {
+        this.respManager.dispose();
+        _super.prototype.componentWillUnmount.call(this);
     };
-    return PopupSurvey;
-}(_reactSurvey__WEBPACK_IMPORTED_MODULE_2__["Survey"]));
+    return SurveyProgressButtons;
+}(_reactSurveyNavigationBase__WEBPACK_IMPORTED_MODULE_2__["SurveyNavigationBase"]));
 
-/**
- * Obsolete. Please use PopupSurvey
- */
-var SurveyWindow = /** @class */ (function (_super) {
-    __extends(SurveyWindow, _super);
-    function SurveyWindow() {
+_element_factory__WEBPACK_IMPORTED_MODULE_3__["ReactElementFactory"].Instance.registerElement("sv-progress-buttons", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyProgressButtons, props);
+});
+
+
+/***/ }),
+
+/***/ "./src/react/progressToc.tsx":
+/*!***********************************!*\
+  !*** ./src/react/progressToc.tsx ***!
+  \***********************************/
+/*! exports provided: SurveyProgressToc */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyProgressToc", function() { return SurveyProgressToc; });
+/* 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 _reactSurveyNavigationBase__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactSurveyNavigationBase */ "./src/react/reactSurveyNavigationBase.tsx");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
+/* harmony import */ var _components_list_list__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/list/list */ "./src/react/components/list/list.tsx");
+/* harmony import */ var _components_popup_popup__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/popup/popup */ "./src/react/components/popup/popup.tsx");
+/* harmony import */ var _components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.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 SurveyProgressToc = /** @class */ (function (_super) {
+    __extends(SurveyProgressToc, _super);
+    function SurveyProgressToc() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    return SurveyWindow;
-}(PopupSurvey));
+    SurveyProgressToc.prototype.render = function () {
+        var tocModel = this.props.model;
+        var content;
+        if (tocModel.isMobile) {
+            content = react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { onClick: tocModel.togglePopup },
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_5__["SvgIcon"], { iconName: tocModel.icon, size: 24 }),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_popup_popup__WEBPACK_IMPORTED_MODULE_4__["Popup"], { model: tocModel.popupModel }));
+        }
+        else {
+            content = react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_list_list__WEBPACK_IMPORTED_MODULE_3__["List"], { model: tocModel.listModel });
+        }
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: tocModel.containerCss }, content));
+    };
+    return SurveyProgressToc;
+}(_reactSurveyNavigationBase__WEBPACK_IMPORTED_MODULE_1__["SurveyNavigationBase"]));
 
+_element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.registerElement("sv-navigation-toc", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyProgressToc, props);
+});
 
 
 /***/ }),
 
-/***/ "./src/react/reactSurvey.tsx":
-/*!***********************************!*\
-  !*** ./src/react/reactSurvey.tsx ***!
-  \***********************************/
-/*! exports provided: Survey, attachKey2click */
+/***/ "./src/react/rating-dropdown.tsx":
+/*!***************************************!*\
+  !*** ./src/react/rating-dropdown.tsx ***!
+  \***************************************/
+/*! exports provided: RatingDropdownItem, SurveyQuestionRatingDropdown */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Survey", function() { return Survey; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "attachKey2click", function() { return attachKey2click; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionRatingDropdown", function() { return SurveyQuestionRatingDropdown; });
 /* 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 survey_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-core */ "survey-core");
 /* 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 _dropdown_base__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./dropdown-base */ "./src/react/dropdown-base.tsx");
+/* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactquestion_factory */ "./src/react/reactquestion_factory.tsx");
+/* harmony import */ var _components_rating_rating_dropdown_item__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/rating/rating-dropdown-item */ "./src/react/components/rating/rating-dropdown-item.tsx");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RatingDropdownItem", function() { return _components_rating_rating_dropdown_item__WEBPACK_IMPORTED_MODULE_4__["RatingDropdownItem"]; });
+
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -14746,105 +14906,309 @@ var __extends = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-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);
-};
 
 
 
 
 
+var SurveyQuestionRatingDropdown = /** @class */ (function (_super) {
+    __extends(SurveyQuestionRatingDropdown, _super);
+    function SurveyQuestionRatingDropdown(props) {
+        return _super.call(this, props) || this;
+    }
+    SurveyQuestionRatingDropdown.prototype.renderElement = function () {
+        var cssClasses = this.question.cssClasses;
+        var select = this.renderSelect(cssClasses);
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.rootDropdown }, select));
+    };
+    return SurveyQuestionRatingDropdown;
+}(_dropdown_base__WEBPACK_IMPORTED_MODULE_2__["SurveyQuestionDropdownBase"]));
+
+_reactquestion_factory__WEBPACK_IMPORTED_MODULE_3__["ReactQuestionFactory"].Instance.registerQuestion("sv-rating-dropdown", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionRatingDropdown, props);
+});
+survey_core__WEBPACK_IMPORTED_MODULE_1__["RendererFactory"].Instance.registerRenderer("rating", "dropdown", "sv-rating-dropdown");
+
 
+/***/ }),
 
+/***/ "./src/react/react-popup-survey.tsx":
+/*!******************************************!*\
+  !*** ./src/react/react-popup-survey.tsx ***!
+  \******************************************/
+/*! exports provided: PopupSurvey, SurveyWindow */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PopupSurvey", function() { return PopupSurvey; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyWindow", function() { return SurveyWindow; });
+/* 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 survey_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-core */ "survey-core");
+/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _reactSurvey__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactSurvey */ "./src/react/reactSurvey.tsx");
+/* harmony import */ var _components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.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 Survey = /** @class */ (function (_super) {
-    __extends(Survey, _super);
-    function Survey(props) {
+var PopupSurvey = /** @class */ (function (_super) {
+    __extends(PopupSurvey, _super);
+    function PopupSurvey(props) {
         var _this = _super.call(this, props) || this;
-        _this.previousJSON = {};
-        _this.isSurveyUpdated = false;
-        _this.createSurvey(props);
-        _this.updateSurvey(props, {});
-        _this.rootRef = react__WEBPACK_IMPORTED_MODULE_0__["createRef"]();
-        _this.rootNodeId = props.id || null;
-        _this.rootNodeClassName = props.className || "";
+        _this.handleOnExpanded = _this.handleOnExpanded.bind(_this);
         return _this;
     }
-    Object.defineProperty(Survey, "cssType", {
-        get: function () {
-            return survey_core__WEBPACK_IMPORTED_MODULE_1__["surveyCss"].currentType;
-        },
-        set: function (value) {
-            survey_core__WEBPACK_IMPORTED_MODULE_1__["StylesManager"].applyTheme(value);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Survey.prototype.getStateElement = function () {
-        return this.survey;
-    };
-    Survey.prototype.onSurveyUpdated = function () {
-        if (!!this.survey) {
-            var el = this.rootRef.current;
-            if (!!el)
-                this.survey.afterRenderSurvey(el);
-            this.survey.startTimerFromUI();
-        }
-    };
-    Survey.prototype.shouldComponentUpdate = function (nextProps, nextState) {
-        if (!_super.prototype.shouldComponentUpdate.call(this, nextProps, nextState))
-            return false;
-        if (this.isModelJSONChanged(nextProps)) {
-            this.destroySurvey();
-            this.createSurvey(nextProps);
-            this.updateSurvey(nextProps, {});
-            this.isSurveyUpdated = true;
-        }
-        return true;
+    PopupSurvey.prototype.getStateElements = function () {
+        return [this.popup, this.popup.survey];
     };
-    Survey.prototype.componentDidUpdate = function (prevProps, prevState) {
-        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
-        this.updateSurvey(this.props, prevProps);
-        if (this.isSurveyUpdated) {
-            this.onSurveyUpdated();
-            this.isSurveyUpdated = false;
-        }
+    PopupSurvey.prototype.handleOnExpanded = function (event) {
+        this.popup.changeExpandCollapse();
     };
-    Survey.prototype.componentDidMount = function () {
-        _super.prototype.componentDidMount.call(this);
-        this.onSurveyUpdated();
+    PopupSurvey.prototype.canRender = function () {
+        return _super.prototype.canRender.call(this) && this.popup.isShowing;
     };
-    Survey.prototype.destroySurvey = function () {
-        if (this.survey) {
-            this.survey.renderCallback = undefined;
-            this.survey.onPartialSend.clear();
-            this.survey.stopTimer();
-            this.survey.destroyResizeObserver();
+    PopupSurvey.prototype.renderElement = function () {
+        var _this = this;
+        var header = this.renderWindowHeader();
+        var body = this.renderBody();
+        var style = {};
+        if (!!this.popup.renderedWidth) {
+            style.width = this.popup.renderedWidth;
+            style.maxWidth = this.popup.renderedWidth;
         }
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.popup.cssRoot, style: style, onScroll: function () { return _this.popup.onScroll(); } },
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.popup.cssRootContent },
+                header,
+                body)));
     };
-    Survey.prototype.componentWillUnmount = function () {
-        _super.prototype.componentWillUnmount.call(this);
-        this.destroySurvey();
-    };
-    Survey.prototype.doRender = function () {
-        var renderResult;
-        if (this.survey.state == "completed") {
-            renderResult = this.renderCompleted();
+    PopupSurvey.prototype.renderWindowHeader = function () {
+        var popup = this.popup;
+        var headerCss = popup.cssHeaderRoot;
+        var titleCollapsed = null;
+        var expandCollapseIcon;
+        var closeButton = null;
+        if (popup.isCollapsed) {
+            headerCss += " " + popup.cssRootCollapsedMod;
+            titleCollapsed = this.renderTitleCollapsed(popup);
+            expandCollapseIcon = this.renderExpandIcon();
         }
-        else if (this.survey.state == "completedbefore") {
-            renderResult = this.renderCompletedBefore();
+        else {
+            expandCollapseIcon = this.renderCollapseIcon();
+        }
+        if (popup.allowClose) {
+            closeButton = this.renderCloseButton(this.popup);
+        }
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: popup.cssHeaderRoot },
+            titleCollapsed,
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: popup.cssHeaderButtonsContainer },
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: popup.cssHeaderCollapseButton, onClick: this.handleOnExpanded }, expandCollapseIcon),
+                closeButton)));
+    };
+    PopupSurvey.prototype.renderTitleCollapsed = function (popup) {
+        if (!popup.locTitle)
+            return null;
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: popup.cssHeaderTitleCollapsed }, popup.locTitle.renderedHtml);
+    };
+    PopupSurvey.prototype.renderExpandIcon = function () {
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { iconName: "icon-restore_16x16", size: 16 });
+    };
+    PopupSurvey.prototype.renderCollapseIcon = function () {
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { iconName: "icon-minimize_16x16", size: 16 });
+    };
+    PopupSurvey.prototype.renderCloseButton = function (popup) {
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: popup.cssHeaderCloseButton, onClick: function () { popup.hide(); } },
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { iconName: "icon-close_16x16", size: 16 })));
+    };
+    PopupSurvey.prototype.renderBody = function () {
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.popup.cssBody }, this.doRender());
+    };
+    PopupSurvey.prototype.createSurvey = function (newProps) {
+        if (!newProps)
+            newProps = {};
+        _super.prototype.createSurvey.call(this, newProps);
+        this.popup = new survey_core__WEBPACK_IMPORTED_MODULE_1__["PopupSurveyModel"](null, this.survey);
+        if (newProps.closeOnCompleteTimeout) {
+            this.popup.closeOnCompleteTimeout = newProps.closeOnCompleteTimeout;
+        }
+        this.popup.allowClose = newProps.allowClose;
+        this.popup.isShowing = true;
+        if (!this.popup.isExpanded && (newProps.expanded || newProps.isExpanded))
+            this.popup.expand();
+    };
+    return PopupSurvey;
+}(_reactSurvey__WEBPACK_IMPORTED_MODULE_2__["Survey"]));
+
+/**
+ * Obsolete. Please use PopupSurvey
+ */
+var SurveyWindow = /** @class */ (function (_super) {
+    __extends(SurveyWindow, _super);
+    function SurveyWindow() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return SurveyWindow;
+}(PopupSurvey));
+
+
+
+/***/ }),
+
+/***/ "./src/react/reactSurvey.tsx":
+/*!***********************************!*\
+  !*** ./src/react/reactSurvey.tsx ***!
+  \***********************************/
+/*! exports provided: Survey, attachKey2click */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Survey", function() { return Survey; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "attachKey2click", function() { return attachKey2click; });
+/* 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 survey_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-core */ "survey-core");
+/* 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");
+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 __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);
+};
+
+
+
+
+
+
+
+
+
+
+
+
+var Survey = /** @class */ (function (_super) {
+    __extends(Survey, _super);
+    function Survey(props) {
+        var _this = _super.call(this, props) || this;
+        _this.previousJSON = {};
+        _this.isSurveyUpdated = false;
+        _this.createSurvey(props);
+        _this.updateSurvey(props, {});
+        _this.rootRef = react__WEBPACK_IMPORTED_MODULE_0__["createRef"]();
+        _this.rootNodeId = props.id || null;
+        _this.rootNodeClassName = props.className || "";
+        return _this;
+    }
+    Object.defineProperty(Survey, "cssType", {
+        get: function () {
+            return survey_core__WEBPACK_IMPORTED_MODULE_1__["surveyCss"].currentType;
+        },
+        set: function (value) {
+            survey_core__WEBPACK_IMPORTED_MODULE_1__["StylesManager"].applyTheme(value);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Survey.prototype.getStateElement = function () {
+        return this.survey;
+    };
+    Survey.prototype.onSurveyUpdated = function () {
+        if (!!this.survey) {
+            var el = this.rootRef.current;
+            if (!!el)
+                this.survey.afterRenderSurvey(el);
+            this.survey.startTimerFromUI();
+        }
+    };
+    Survey.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+        if (!_super.prototype.shouldComponentUpdate.call(this, nextProps, nextState))
+            return false;
+        if (this.isModelJSONChanged(nextProps)) {
+            this.destroySurvey();
+            this.createSurvey(nextProps);
+            this.updateSurvey(nextProps, {});
+            this.isSurveyUpdated = true;
+        }
+        return true;
+    };
+    Survey.prototype.componentDidUpdate = function (prevProps, prevState) {
+        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
+        this.updateSurvey(this.props, prevProps);
+        if (this.isSurveyUpdated) {
+            this.onSurveyUpdated();
+            this.isSurveyUpdated = false;
+        }
+    };
+    Survey.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        this.onSurveyUpdated();
+    };
+    Survey.prototype.destroySurvey = function () {
+        if (this.survey) {
+            this.survey.renderCallback = undefined;
+            this.survey.onPartialSend.clear();
+            this.survey.stopTimer();
+            this.survey.destroyResizeObserver();
+        }
+    };
+    Survey.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        this.destroySurvey();
+    };
+    Survey.prototype.doRender = function () {
+        var renderResult;
+        if (this.survey.state == "completed") {
+            renderResult = this.renderCompleted();
+        }
+        else if (this.survey.state == "completedbefore") {
+            renderResult = this.renderCompletedBefore();
         }
         else if (this.survey.state == "loading") {
             renderResult = this.renderLoading();
@@ -14902,451 +15266,171 @@ var Survey = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_components_container__WEBPACK_IMPORTED_MODULE_10__["ComponentsContainer"], { survey: this.survey, container: "completePage", needRenderWrapper: false })));
     };
     Survey.prototype.renderCompletedBefore = function () {
-        var htmlValue = { __html: this.survey.processedCompletedBeforeHtml };
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { dangerouslySetInnerHTML: htmlValue, className: this.survey.completedBeforeCss }));
-    };
-    Survey.prototype.renderLoading = function () {
-        var htmlValue = { __html: this.survey.processedLoadingHtml };
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { dangerouslySetInnerHTML: htmlValue, className: this.survey.loadingBodyCss }));
-    };
-    Survey.prototype.renderSurvey = function () {
-        var activePage = this.survey.activePage
-            ? this.renderPage(this.survey.activePage)
-            : null;
-        var isStaring = this.survey.isShowStartingPage;
-        var pageId = this.survey.activePage ? this.survey.activePage.id : "";
-        var className = this.survey.bodyCss;
-        var style = {};
-        if (!!this.survey.renderedWidth) {
-            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"]("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"]("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" }),
-                    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" })));
-    };
-    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 }));
-    };
-    Survey.prototype.renderEmptySurvey = function () {
-        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.bodyEmpty }, this.survey.emptySurveyText);
-    };
-    Survey.prototype.createSurvey = function (newProps) {
-        if (!newProps)
-            newProps = {};
-        this.previousJSON = {};
-        if (newProps) {
-            if (newProps.model) {
-                this.survey = newProps.model;
-            }
-            else {
-                if (newProps.json) {
-                    this.previousJSON = newProps.json;
-                    this.survey = new survey_core__WEBPACK_IMPORTED_MODULE_1__["SurveyModel"](newProps.json);
-                }
-            }
-        }
-        else {
-            this.survey = new survey_core__WEBPACK_IMPORTED_MODULE_1__["SurveyModel"]();
-        }
-        if (!!newProps.css) {
-            this.survey.css = this.css;
-        }
-        this.setSurveyEvents();
-    };
-    Survey.prototype.isModelJSONChanged = function (newProps) {
-        if (!!newProps["model"]) {
-            return this.survey !== newProps["model"];
-        }
-        if (!!newProps["json"]) {
-            return !survey_core__WEBPACK_IMPORTED_MODULE_1__["Helpers"].isTwoValueEquals(newProps["json"], this.previousJSON);
-        }
-        return false;
-    };
-    Survey.prototype.updateSurvey = function (newProps, oldProps) {
-        if (!newProps)
-            return;
-        oldProps = oldProps || {};
-        for (var key in newProps) {
-            if (key == "model" || key == "children" || key == "json") {
-                continue;
-            }
-            if (key == "css") {
-                this.survey.mergeValues(newProps.css, this.survey.getCss());
-                this.survey["updateNavigationCss"]();
-                this.survey["updateElementCss"]();
-                continue;
-            }
-            if (newProps[key] === oldProps[key])
-                continue;
-            if (key.indexOf("on") == 0 && this.survey[key] && this.survey[key].add) {
-                if (!!oldProps[key]) {
-                    this.survey[key].remove(oldProps[key]);
-                }
-                this.survey[key].add(newProps[key]);
-            }
-            else {
-                this.survey[key] = newProps[key];
-            }
-        }
-    };
-    Survey.prototype.setSurveyEvents = function () {
-        var self = this;
-        this.survey.renderCallback = function () {
-            var counter = !!self.state && !!self.state.modelChanged ? self.state.modelChanged : 0;
-            self.setState({ modelChanged: counter + 1 });
-        };
-        this.survey.onPartialSend.add(function (sender) {
-            if (!!self.state) {
-                self.setState(self.state);
-            }
-        });
-    };
-    //ISurveyCreator
-    Survey.prototype.createQuestionElement = function (question) {
-        return _reactquestion_factory__WEBPACK_IMPORTED_MODULE_6__["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.questionTitleLocation = function () {
-        return this.survey.questionTitleLocation;
-    };
-    Survey.prototype.questionErrorLocation = function () {
-        return this.survey.questionErrorLocation;
-    };
-    return Survey;
-}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_3__["SurveyElementBase"]));
-
-_element_factory__WEBPACK_IMPORTED_MODULE_7__["ReactElementFactory"].Instance.registerElement("survey", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](Survey, props);
-});
-function attachKey2click(element, viewModel, options) {
-    if (options === void 0) { options = { processEsc: true, disableTabStop: false }; }
-    if ((!!viewModel && viewModel.disableTabStop) || (!!options && options.disableTabStop)) {
-        return react__WEBPACK_IMPORTED_MODULE_0__["cloneElement"](element, { tabIndex: -1 });
-    }
-    options = __assign({}, options);
-    return react__WEBPACK_IMPORTED_MODULE_0__["cloneElement"](element, {
-        tabIndex: 0,
-        onKeyUp: function (evt) {
-            evt.preventDefault();
-            evt.stopPropagation();
-            Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["doKey2ClickUp"])(evt, options);
-            return false;
-        },
-        onKeyDown: function (evt) { return Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["doKey2ClickDown"])(evt, options); },
-        onBlur: function (evt) { return Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["doKey2ClickBlur"])(evt); }
-    });
-}
-
-
-/***/ }),
-
-/***/ "./src/react/reactSurveyNavigationBase.tsx":
-/*!*************************************************!*\
-  !*** ./src/react/reactSurveyNavigationBase.tsx ***!
-  \*************************************************/
-/*! exports provided: SurveyNavigationBase */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyNavigationBase", function() { return SurveyNavigationBase; });
-/* 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__);
-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 SurveyNavigationBase = /** @class */ (function (_super) {
-    __extends(SurveyNavigationBase, _super);
-    function SurveyNavigationBase(props) {
-        var _this = _super.call(this, props) || this;
-        _this.updateStateFunction = null;
-        _this.state = { update: 0 };
-        return _this;
-    }
-    Object.defineProperty(SurveyNavigationBase.prototype, "survey", {
-        get: function () {
-            return this.props.survey;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SurveyNavigationBase.prototype, "css", {
-        get: function () {
-            return this.props.css || this.survey.css;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SurveyNavigationBase.prototype.componentDidMount = function () {
-        if (this.survey) {
-            var self = this;
-            this.updateStateFunction = function () {
-                self.setState({ update: self.state.update + 1 });
-            };
-            this.survey.onPageVisibleChanged.add(this.updateStateFunction);
-        }
-    };
-    SurveyNavigationBase.prototype.componentWillUnmount = function () {
-        if (this.survey && this.updateStateFunction) {
-            this.survey.onPageVisibleChanged.remove(this.updateStateFunction);
-            this.updateStateFunction = null;
-        }
-    };
-    return SurveyNavigationBase;
-}(react__WEBPACK_IMPORTED_MODULE_0__["Component"]));
-
-
-
-/***/ }),
-
-/***/ "./src/react/reactSurveyProgress.tsx":
-/*!*******************************************!*\
-  !*** ./src/react/reactSurveyProgress.tsx ***!
-  \*******************************************/
-/*! exports provided: SurveyProgress */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyProgress", function() { return SurveyProgress; });
-/* 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 survey_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-core */ "survey-core");
-/* 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");
-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 SurveyProgress = /** @class */ (function (_super) {
-    __extends(SurveyProgress, _super);
-    function SurveyProgress(props) {
-        return _super.call(this, props) || this;
-    }
-    Object.defineProperty(SurveyProgress.prototype, "isTop", {
-        get: function () {
-            return this.props.isTop;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SurveyProgress.prototype, "progress", {
-        get: function () {
-            return this.survey.progressValue;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SurveyProgress.prototype, "progressText", {
-        get: function () {
-            return this.survey.progressText;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SurveyProgress.prototype.render = function () {
-        var progressStyle = {
-            width: this.progress + "%",
-        };
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.survey.getProgressCssClasses(this.props.container) },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { style: progressStyle, className: this.css.progressBar, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": "progress" },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: survey_core__WEBPACK_IMPORTED_MODULE_1__["SurveyProgressModel"].getProgressTextInBarCss(this.css) }, this.progressText)),
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: survey_core__WEBPACK_IMPORTED_MODULE_1__["SurveyProgressModel"].getProgressTextUnderBarCss(this.css) }, this.progressText)));
-    };
-    return SurveyProgress;
-}(_reactSurveyNavigationBase__WEBPACK_IMPORTED_MODULE_2__["SurveyNavigationBase"]));
-
-_element_factory__WEBPACK_IMPORTED_MODULE_3__["ReactElementFactory"].Instance.registerElement("sv-progress-pages", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyProgress, props);
-});
-_element_factory__WEBPACK_IMPORTED_MODULE_3__["ReactElementFactory"].Instance.registerElement("sv-progress-questions", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyProgress, props);
-});
-_element_factory__WEBPACK_IMPORTED_MODULE_3__["ReactElementFactory"].Instance.registerElement("sv-progress-correctquestions", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyProgress, props);
-});
-_element_factory__WEBPACK_IMPORTED_MODULE_3__["ReactElementFactory"].Instance.registerElement("sv-progress-requiredquestions", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyProgress, props);
-});
-
-
-/***/ }),
-
-/***/ "./src/react/reactSurveyProgressButtons.tsx":
-/*!**************************************************!*\
-  !*** ./src/react/reactSurveyProgressButtons.tsx ***!
-  \**************************************************/
-/*! exports provided: SurveyProgressButtons */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyProgressButtons", function() { return SurveyProgressButtons; });
-/* 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 survey_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-core */ "survey-core");
-/* 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");
-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 SurveyProgressButtons = /** @class */ (function (_super) {
-    __extends(SurveyProgressButtons, _super);
-    function SurveyProgressButtons(props) {
-        var _this = _super.call(this, props) || this;
-        _this.updateScroller = undefined;
-        _this.progressButtonsModel = new survey_core__WEBPACK_IMPORTED_MODULE_1__["SurveyProgressButtonsModel"](_this.survey);
-        _this.listContainerRef = react__WEBPACK_IMPORTED_MODULE_0__["createRef"]();
-        return _this;
-    }
-    SurveyProgressButtons.prototype.render = function () {
-        var _this = this;
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsContainerCenter },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsContainer },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.getScrollButtonCss(true), role: "button", onClick: function () {
-                        return _this.clickScrollButton(_this.listContainerRef.current, true);
-                    } }),
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.progressButtonsListContainer, ref: this.listContainerRef },
-                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("ul", { className: this.css.progressButtonsList }, this.getListElements())),
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.getScrollButtonCss(false), role: "button", onClick: function () {
-                        return _this.clickScrollButton(_this.listContainerRef.current, false);
-                    } }))));
+        var htmlValue = { __html: this.survey.processedCompletedBeforeHtml };
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { dangerouslySetInnerHTML: htmlValue, className: this.survey.completedBeforeCss }));
     };
-    SurveyProgressButtons.prototype.getListElements = function () {
-        var _this = this;
-        var buttons = [];
-        this.survey.visiblePages.forEach(function (page, index) {
-            buttons.push(_this.renderListElement(page, index));
-        });
-        return buttons;
+    Survey.prototype.renderLoading = function () {
+        var htmlValue = { __html: this.survey.processedLoadingHtml };
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { dangerouslySetInnerHTML: htmlValue, className: this.survey.loadingBodyCss }));
     };
-    SurveyProgressButtons.prototype.renderListElement = function (page, index) {
-        var _this = this;
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("li", { key: "listelement" + index, className: this.getListElementCss(index), onClick: this.isListElementClickable(index)
-                ? function () { return _this.clickListElement(index); }
-                : undefined },
-            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.progressButtonsPageDescription, title: page.navigationDescription }, page.navigationDescription)));
+    Survey.prototype.renderSurvey = function () {
+        var activePage = this.survey.activePage
+            ? this.renderPage(this.survey.activePage)
+            : null;
+        var isStaring = this.survey.isShowStartingPage;
+        var pageId = this.survey.activePage ? this.survey.activePage.id : "";
+        var className = this.survey.bodyCss;
+        var style = {};
+        if (!!this.survey.renderedWidth) {
+            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"]("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"]("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" }),
+                    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" })));
     };
-    SurveyProgressButtons.prototype.isListElementClickable = function (index) {
-        return this.progressButtonsModel.isListElementClickable(index);
+    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 }));
     };
-    SurveyProgressButtons.prototype.getListElementCss = function (index) {
-        return this.progressButtonsModel.getListElementCss(index);
+    Survey.prototype.renderEmptySurvey = function () {
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.css.bodyEmpty }, this.survey.emptySurveyText);
     };
-    SurveyProgressButtons.prototype.clickListElement = function (index) {
-        this.progressButtonsModel.clickListElement(index);
+    Survey.prototype.createSurvey = function (newProps) {
+        if (!newProps)
+            newProps = {};
+        this.previousJSON = {};
+        if (newProps) {
+            if (newProps.model) {
+                this.survey = newProps.model;
+            }
+            else {
+                if (newProps.json) {
+                    this.previousJSON = newProps.json;
+                    this.survey = new survey_core__WEBPACK_IMPORTED_MODULE_1__["SurveyModel"](newProps.json);
+                }
+            }
+        }
+        else {
+            this.survey = new survey_core__WEBPACK_IMPORTED_MODULE_1__["SurveyModel"]();
+        }
+        if (!!newProps.css) {
+            this.survey.css = this.css;
+        }
+        this.setSurveyEvents();
     };
-    SurveyProgressButtons.prototype.getScrollButtonCss = function (isLeftScroll) {
-        return this.progressButtonsModel.getScrollButtonCss(this.state.hasScroller, isLeftScroll);
+    Survey.prototype.isModelJSONChanged = function (newProps) {
+        if (!!newProps["model"]) {
+            return this.survey !== newProps["model"];
+        }
+        if (!!newProps["json"]) {
+            return !survey_core__WEBPACK_IMPORTED_MODULE_1__["Helpers"].isTwoValueEquals(newProps["json"], this.previousJSON);
+        }
+        return false;
     };
-    SurveyProgressButtons.prototype.clickScrollButton = function (listContainerElement, isLeftScroll) {
-        if (!!listContainerElement) {
-            listContainerElement.scrollLeft += (isLeftScroll ? -1 : 1) * 70;
+    Survey.prototype.updateSurvey = function (newProps, oldProps) {
+        if (!newProps)
+            return;
+        oldProps = oldProps || {};
+        for (var key in newProps) {
+            if (key == "model" || key == "children" || key == "json") {
+                continue;
+            }
+            if (key == "css") {
+                this.survey.mergeValues(newProps.css, this.survey.getCss());
+                this.survey["updateNavigationCss"]();
+                this.survey["updateElementCss"]();
+                continue;
+            }
+            if (newProps[key] === oldProps[key])
+                continue;
+            if (key.indexOf("on") == 0 && this.survey[key] && this.survey[key].add) {
+                if (!!oldProps[key]) {
+                    this.survey[key].remove(oldProps[key]);
+                }
+                this.survey[key].add(newProps[key]);
+            }
+            else {
+                this.survey[key] = newProps[key];
+            }
         }
     };
-    SurveyProgressButtons.prototype.componentDidMount = function () {
-        var _this = this;
-        this.updateScroller = setInterval(function () {
-            if (!!_this.listContainerRef.current) {
-                _this.setState({ hasScroller: _this.listContainerRef.current.scrollWidth > _this.listContainerRef.current.offsetWidth, });
+    Survey.prototype.setSurveyEvents = function () {
+        var self = this;
+        this.survey.renderCallback = function () {
+            var counter = !!self.state && !!self.state.modelChanged ? self.state.modelChanged : 0;
+            self.setState({ modelChanged: counter + 1 });
+        };
+        this.survey.onPartialSend.add(function (sender) {
+            if (!!self.state) {
+                self.setState(self.state);
             }
-        }, 100);
+        });
     };
-    SurveyProgressButtons.prototype.componentWillUnmount = function () {
-        if (typeof this.updateScroller !== "undefined") {
-            clearInterval(this.updateScroller);
-            this.updateScroller = undefined;
-        }
+    //ISurveyCreator
+    Survey.prototype.createQuestionElement = function (question) {
+        return _reactquestion_factory__WEBPACK_IMPORTED_MODULE_6__["ReactQuestionFactory"].Instance.createQuestion(question.isDefaultRendering() ? question.getTemplate() : question.getComponentName(), {
+            question: question,
+            isDisplayMode: question.isInputReadOnly,
+            creator: this,
+        });
     };
-    return SurveyProgressButtons;
-}(_reactSurveyNavigationBase__WEBPACK_IMPORTED_MODULE_2__["SurveyNavigationBase"]));
+    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.questionTitleLocation = function () {
+        return this.survey.questionTitleLocation;
+    };
+    Survey.prototype.questionErrorLocation = function () {
+        return this.survey.questionErrorLocation;
+    };
+    return Survey;
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_3__["SurveyElementBase"]));
 
-_element_factory__WEBPACK_IMPORTED_MODULE_3__["ReactElementFactory"].Instance.registerElement("sv-progress-buttons", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyProgressButtons, props);
+_element_factory__WEBPACK_IMPORTED_MODULE_7__["ReactElementFactory"].Instance.registerElement("survey", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](Survey, props);
 });
+function attachKey2click(element, viewModel, options) {
+    if (options === void 0) { options = { processEsc: true, disableTabStop: false }; }
+    if ((!!viewModel && viewModel.disableTabStop) || (!!options && options.disableTabStop)) {
+        return react__WEBPACK_IMPORTED_MODULE_0__["cloneElement"](element, { tabIndex: -1 });
+    }
+    options = __assign({}, options);
+    return react__WEBPACK_IMPORTED_MODULE_0__["cloneElement"](element, {
+        tabIndex: 0,
+        onKeyUp: function (evt) {
+            evt.preventDefault();
+            evt.stopPropagation();
+            Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["doKey2ClickUp"])(evt, options);
+            return false;
+        },
+        onKeyDown: function (evt) { return Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["doKey2ClickDown"])(evt, options); },
+        onBlur: function (evt) { return Object(survey_core__WEBPACK_IMPORTED_MODULE_1__["doKey2ClickBlur"])(evt); }
+    });
+}
 
 
 /***/ }),
 
-/***/ "./src/react/reactSurveyProgressToc.tsx":
-/*!**********************************************!*\
-  !*** ./src/react/reactSurveyProgressToc.tsx ***!
-  \**********************************************/
-/*! exports provided: SurveyProgressToc */
+/***/ "./src/react/reactSurveyNavigationBase.tsx":
+/*!*************************************************!*\
+  !*** ./src/react/reactSurveyNavigationBase.tsx ***!
+  \*************************************************/
+/*! exports provided: SurveyNavigationBase */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyProgressToc", function() { return SurveyProgressToc; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyNavigationBase", function() { return SurveyNavigationBase; });
 /* 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 _reactSurveyNavigationBase__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactSurveyNavigationBase */ "./src/react/reactSurveyNavigationBase.tsx");
-/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
-/* harmony import */ var _components_list_list__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/list/list */ "./src/react/components/list/list.tsx");
-/* harmony import */ var _components_popup_popup__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/popup/popup */ "./src/react/components/popup/popup.tsx");
-/* harmony import */ var _components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -15363,35 +15447,46 @@ var __extends = (undefined && undefined.__extends) || (function () {
     };
 })();
 
-
-
-
-
-
-var SurveyProgressToc = /** @class */ (function (_super) {
-    __extends(SurveyProgressToc, _super);
-    function SurveyProgressToc() {
-        return _super !== null && _super.apply(this, arguments) || this;
+var SurveyNavigationBase = /** @class */ (function (_super) {
+    __extends(SurveyNavigationBase, _super);
+    function SurveyNavigationBase(props) {
+        var _this = _super.call(this, props) || this;
+        _this.updateStateFunction = null;
+        _this.state = { update: 0 };
+        return _this;
     }
-    SurveyProgressToc.prototype.render = function () {
-        var tocModel = this.props.model;
-        var content;
-        if (tocModel.isMobile) {
-            content = react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { onClick: tocModel.togglePopup },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_5__["SvgIcon"], { iconName: tocModel.icon, size: 24 }),
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_popup_popup__WEBPACK_IMPORTED_MODULE_4__["Popup"], { model: tocModel.popupModel }));
+    Object.defineProperty(SurveyNavigationBase.prototype, "survey", {
+        get: function () {
+            return this.props.survey;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyNavigationBase.prototype, "css", {
+        get: function () {
+            return this.props.css || this.survey.css;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyNavigationBase.prototype.componentDidMount = function () {
+        if (this.survey) {
+            var self = this;
+            this.updateStateFunction = function () {
+                self.setState({ update: self.state.update + 1 });
+            };
+            this.survey.onPageVisibleChanged.add(this.updateStateFunction);
         }
-        else {
-            content = react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_list_list__WEBPACK_IMPORTED_MODULE_3__["List"], { model: tocModel.listModel });
+    };
+    SurveyNavigationBase.prototype.componentWillUnmount = function () {
+        if (this.survey && this.updateStateFunction) {
+            this.survey.onPageVisibleChanged.remove(this.updateStateFunction);
+            this.updateStateFunction = null;
         }
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: tocModel.containerCss }, content));
     };
-    return SurveyProgressToc;
-}(_reactSurveyNavigationBase__WEBPACK_IMPORTED_MODULE_1__["SurveyNavigationBase"]));
+    return SurveyNavigationBase;
+}(react__WEBPACK_IMPORTED_MODULE_0__["Component"]));
 
-_element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.registerElement("sv-navigation-toc", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyProgressToc, props);
-});
 
 
 /***/ }),
@@ -16273,13 +16368,27 @@ var SurveyQuestionCommentItem = /** @class */ (function (_super) {
         _this.state = { comment: _this.getComment() || "" };
         return _this;
     }
-    SurveyQuestionCommentItem.prototype.getStateComment = function () {
-        var comment = this.getComment();
-        var stateComment = this.state.comment;
-        if (stateComment !== undefined && stateComment.trim() !== comment) {
-            stateComment = comment;
+    SurveyQuestionCommentItem.prototype.componentDidUpdate = function (prevProps, prevState) {
+        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
+        this.updateDomElement();
+    };
+    SurveyQuestionCommentItem.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        this.updateDomElement();
+    };
+    SurveyQuestionCommentItem.prototype.updateDomElement = function () {
+        if (!!this.control) {
+            var control = this.control;
+            var newValue = this.getComment() || "";
+            if (!survey_core__WEBPACK_IMPORTED_MODULE_2__["Helpers"].isTwoValueEquals(newValue, control.value, false, true, false)) {
+                control.value = newValue;
+            }
+        }
+    };
+    SurveyQuestionCommentItem.prototype.setControl = function (element) {
+        if (!!element) {
+            this.control = element;
         }
-        return stateComment !== undefined ? stateComment : comment || "";
     };
     SurveyQuestionCommentItem.prototype.canRender = function () {
         return !!this.props.question;
@@ -16306,18 +16415,11 @@ var SurveyQuestionCommentItem = /** @class */ (function (_super) {
         var _this = this;
         var question = this.props.question;
         var className = this.props.otherCss || this.cssClasses.comment;
-        var handleOnChange = function (event) {
-            _this.setState({ comment: event.target.value });
-            // https://github.com/surveyjs/survey-library/issues/7252
-            if (!survey_core__WEBPACK_IMPORTED_MODULE_2__["Helpers"].isTwoValueEquals(_this.getComment(), event.target.value, false, true, false)) {
-                _this.setComment(event.target.value);
-            }
-        };
-        var comment = this.getStateComment();
         if (question.isReadOnlyRenderDiv()) {
+            var comment = this.getComment() || "";
             return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null, comment);
         }
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("textarea", { id: this.getId(), className: className, value: comment, disabled: this.isDisplayMode, maxLength: question.getOthersMaxLength(), placeholder: this.getPlaceholder(), onChange: handleOnChange, onBlur: function (e) { _this.onCommentChange(e); handleOnChange(e); }, onInput: function (e) { return _this.onCommentInput(e); }, "aria-required": question.isRequired || question.a11y_input_ariaRequired, "aria-label": question.ariaLabel || question.a11y_input_ariaLabel, style: { resize: question.resizeStyle } }));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("textarea", { id: this.getId(), className: className, ref: function (textarea) { return (_this.setControl(textarea)); }, disabled: this.isDisplayMode, maxLength: question.getOthersMaxLength(), placeholder: this.getPlaceholder(), onBlur: function (e) { _this.onCommentChange(e); }, onInput: function (e) { return _this.onCommentInput(e); }, "aria-required": question.isRequired || question.a11y_input_ariaRequired, "aria-label": question.ariaLabel || question.a11y_input_ariaLabel, style: { resize: question.resizeStyle } }));
     };
     return SurveyQuestionCommentItem;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElement"]));
@@ -19506,7 +19608,7 @@ var SurveyQuestionSignaturePad = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.placeholder, style: { display: this.question.needShowPlaceholder() ? "" : "none" } }, this.renderLocString(this.question.locPlaceholder)),
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null,
                 this.renderBackgroundImage(),
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("canvas", { tabIndex: 0, className: this.question.cssClasses.canvas, onBlur: this.question.onBlur })),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("canvas", { tabIndex: -1, className: this.question.cssClasses.canvas, onBlur: this.question.onBlur })),
             clearButton,
             loadingIndicator));
     };
@@ -20413,8 +20515,8 @@ var settings = {
      * @param message A message to be displayed in the confirm dialog window.
      * @param callback A callback function that should be called with `true` if a user confirms an action or `false` otherwise.
      */
-    confirmActionAsync: function (message, callback, applyTitle) {
-        return Object(_utils_utils__WEBPACK_IMPORTED_MODULE_0__["showConfirmDialog"])(message, callback, applyTitle);
+    confirmActionAsync: function (message, callback, applyTitle, locale) {
+        return Object(_utils_utils__WEBPACK_IMPORTED_MODULE_0__["showConfirmDialog"])(message, callback, applyTitle, locale);
     },
     /**
      * A minimum width value for all survey elements.
@@ -20465,15 +20567,27 @@ var settings = {
      */
     showItemsInOrder: "default",
     /**
-     * A value to save in survey results when respondents select the None choice item.
+     * A value to save in survey results when respondents select the "None" choice item.
      *
      * Default value: `"none"`
      */
     noneItemValue: "none",
     /**
-     * An object whose properties specify the order of the special choice items (None, Other, Select All) in select-based questions.
+     * A value to save in survey results when respondents select the "Refuse to answer" choice item.
+     *
+     * Default value: `"refused"`
+     */
+    refuseItemValue: "refused",
+    /**
+     * A value to save in survey results when respondents select the "Don't know" choice item.
+     *
+     * Default value: `"dontknow"`
+     */
+    dontKnowItemValue: "dontknow",
+    /**
+     * An object whose properties specify the order of the special choice items ("None", "Other", "Select All", "Refuse to answer", "Don't know") in select-based questions.
      *
-     * Default value: `{ selectAllItem: [-1], noneItem: [1], otherItem: [2] }`
+     * Default value: `{ selectAllItem: [-1], noneItem: [1], otherItem: [2], dontKnowItem: [3], otherItem: [4] }`
      *
      * Use this object to reorder special choices. Each property accepts an array of integer numbers. Negative numbers place a special choice item above regular choice items, positive numbers place it below them. For instance, the code below specifies the following order of choices: None, Select All, regular choices, Other.
      *
@@ -20494,7 +20608,9 @@ var settings = {
     specialChoicesOrder: {
         selectAllItem: [-1],
         noneItem: [1],
-        otherItem: [2]
+        refuseItem: [2],
+        dontKnowItem: [3],
+        otherItem: [4]
     },
     /**
      * A list of supported validators by question type.
@@ -20548,6 +20664,12 @@ var settings = {
      * Default value: `true`
      */
     showMaxLengthIndicator: true,
+    /**
+     * Set to `false` to disable animations
+     *
+     * Default value: `true`
+    */
+    animationEnabled: true,
     /**
      * An object that specifies heading levels (`<h1>`, `<h2>`, etc.) to use when rendering survey, page, panel, and question titles.
      *
@@ -20633,7 +20755,8 @@ var settings = {
             "email",
             "impp",
         ]
-    }
+    },
+    legacyProgressBarView: false
 };
 
 
@@ -21022,7 +21145,7 @@ function confirmAction(message) {
         return _settings__WEBPACK_IMPORTED_MODULE_1__["settings"].confirmActionFunc(message);
     return confirm(message);
 }
-function confirmActionAsync(message, funcOnYes, funcOnNo) {
+function confirmActionAsync(message, funcOnYes, funcOnNo, locale) {
     var callbackFunc = function (res) {
         if (res)
             funcOnYes();
@@ -21030,7 +21153,7 @@ function confirmActionAsync(message, funcOnYes, funcOnNo) {
             funcOnNo();
     };
     if (!!_settings__WEBPACK_IMPORTED_MODULE_1__["settings"] && !!_settings__WEBPACK_IMPORTED_MODULE_1__["settings"].confirmActionAsync) {
-        if (_settings__WEBPACK_IMPORTED_MODULE_1__["settings"].confirmActionAsync(message, callbackFunc))
+        if (_settings__WEBPACK_IMPORTED_MODULE_1__["settings"].confirmActionAsync(message, callbackFunc, undefined, locale))
             return;
     }
     callbackFunc(confirmAction(message));
@@ -21379,7 +21502,7 @@ var Logger = /** @class */ (function () {
     return Logger;
 }());
 
-function showConfirmDialog(message, callback, applyTitle) {
+function showConfirmDialog(message, callback, applyTitle, locale) {
     var locStr = new _localizablestring__WEBPACK_IMPORTED_MODULE_0__["LocalizableString"](undefined);
     var popupViewModel = _settings__WEBPACK_IMPORTED_MODULE_1__["settings"].showDialog({
         componentName: "sv-string-viewer",
@@ -21400,9 +21523,9 @@ function showConfirmDialog(message, callback, applyTitle) {
     var toolbar = popupViewModel.footerToolbar;
     var applyBtn = toolbar.getActionById("apply");
     var cancelBtn = toolbar.getActionById("cancel");
-    cancelBtn.title = _surveyStrings__WEBPACK_IMPORTED_MODULE_2__["surveyLocalization"].getString("cancel");
+    cancelBtn.title = _surveyStrings__WEBPACK_IMPORTED_MODULE_2__["surveyLocalization"].getString("cancel", locale);
     cancelBtn.innerCss = "sv-popup__body-footer-item sv-popup__button sd-btn sd-btn--small";
-    applyBtn.title = applyTitle || _surveyStrings__WEBPACK_IMPORTED_MODULE_2__["surveyLocalization"].getString("ok");
+    applyBtn.title = applyTitle || _surveyStrings__WEBPACK_IMPORTED_MODULE_2__["surveyLocalization"].getString("ok", locale);
     applyBtn.innerCss = "sv-popup__body-footer-item sv-popup__button sv-popup__button--danger sd-btn sd-btn--small sd-btn--danger";
     popupViewModel.width = "452px";
     return true;