survey-js-ui 2.0.4 → 2.0.6

package/survey-js-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v2.0.4
+ * surveyjs - Survey JavaScript library v2.0.6
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -23,7 +23,7 @@ return /******/ (() => { // webpackBootstrap
 /***/ (function(module) {
 
 /*!
- * surveyjs - Survey JavaScript library v2.0.4
+ * surveyjs - Survey JavaScript library v2.0.6
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -66,9 +66,11 @@ var map = {
 	"./close-24x24.svg": "./src/images-v1/close-24x24.svg",
 	"./collapse-16x16.svg": "./src/images-v1/collapse-16x16.svg",
 	"./collapsedetails-16x16.svg": "./src/images-v1/collapsedetails-16x16.svg",
+	"./delete-16x16.svg": "./src/images-v1/delete-16x16.svg",
 	"./delete-24x24.svg": "./src/images-v1/delete-24x24.svg",
 	"./drag-24x24.svg": "./src/images-v1/drag-24x24.svg",
 	"./draghorizontal-24x16.svg": "./src/images-v1/draghorizontal-24x16.svg",
+	"./editsmall-16x16.svg": "./src/images-v1/editsmall-16x16.svg",
 	"./expand-16x16.svg": "./src/images-v1/expand-16x16.svg",
 	"./expanddetails-16x16.svg": "./src/images-v1/expanddetails-16x16.svg",
 	"./file-72x72.svg": "./src/images-v1/file-72x72.svg",
@@ -365,6 +367,16 @@ module.exports = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\
 
 /***/ }),
 
+/***/ "./src/images-v1/delete-16x16.svg":
+/*!****************************************!*\
+  !*** ./src/images-v1/delete-16x16.svg ***!
+  \****************************************/
+/***/ ((module) => {
+
+module.exports = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15 2H14H11V1C11 0.4 10.6 0 10 0H7C6.4 0 6 0.4 6 1V2H3H2V4H3V14C3 15.1 3.9 16 5 16H12C13.1 16 14 15.1 14 14V4H15V2ZM7 1H10V2H7V1ZM12 14H5V4H12V14ZM7 13H6V5H7V13ZM9 13H8V5H9V13ZM11 13H10V5H11V13Z\"></path></svg>"
+
+/***/ }),
+
 /***/ "./src/images-v1/delete-24x24.svg":
 /*!****************************************!*\
   !*** ./src/images-v1/delete-24x24.svg ***!
@@ -395,6 +407,16 @@ module.exports = "<svg viewBox=\"0 0 24 16\" xmlns=\"http://www.w3.org/2000/svg\
 
 /***/ }),
 
+/***/ "./src/images-v1/editsmall-16x16.svg":
+/*!*******************************************!*\
+  !*** ./src/images-v1/editsmall-16x16.svg ***!
+  \*******************************************/
+/***/ ((module) => {
+
+module.exports = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.59 4.5884L11.42 2.4184C11.03 2.0284 10.52 1.8284 10.01 1.8284C9.5 1.8284 8.99 2.0284 8.6 2.4184L3.76 7.2384C2.63 8.3684 2 9.8884 2 11.4784V12.9884C2 13.5384 2.45 13.9884 3 13.9884H4.51C6.1 13.9884 7.63 13.3584 8.75 12.2284L13.58 7.3984C14.36 6.6184 14.36 5.3484 13.58 4.5684L13.59 4.5884ZM7.35 10.8284C6.59 11.5884 5.59 11.9984 4.52 11.9984H4.01V11.4884C4.01 10.4184 4.43 9.4184 5.18 8.6584L7.72 6.1184L9.89 8.2884L7.35 10.8284ZM11.3 6.8784L9.13 4.7084L10.01 3.8284L12.18 5.9984L11.3 6.8784Z\"></path></svg>"
+
+/***/ }),
+
 /***/ "./src/images-v1/expand-16x16.svg":
 /*!****************************************!*\
   !*** ./src/images-v1/expand-16x16.svg ***!
@@ -721,7 +743,7 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 /******/ 	var __webpack_module_cache__ = {};
 /******/ 	
 /******/ 	// The require function
-/******/ 	function __nested_webpack_require_49952__(moduleId) {
+/******/ 	function __nested_webpack_require_51423__(moduleId) {
 /******/ 		// Check if module is in cache
 /******/ 		var cachedModule = __webpack_module_cache__[moduleId];
 /******/ 		if (cachedModule !== undefined) {
@@ -735,7 +757,7 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 /******/ 		};
 /******/ 	
 /******/ 		// Execute the module function
-/******/ 		__webpack_modules__[moduleId](module, module.exports, __nested_webpack_require_49952__);
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __nested_webpack_require_51423__);
 /******/ 	
 /******/ 		// Return the exports of the module
 /******/ 		return module.exports;
@@ -745,9 +767,9 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 /******/ 	/* webpack/runtime/define property getters */
 /******/ 	(() => {
 /******/ 		// define getter functions for harmony exports
-/******/ 		__nested_webpack_require_49952__.d = (exports, definition) => {
+/******/ 		__nested_webpack_require_51423__.d = (exports, definition) => {
 /******/ 			for(var key in definition) {
-/******/ 				if(__nested_webpack_require_49952__.o(definition, key) && !__nested_webpack_require_49952__.o(exports, key)) {
+/******/ 				if(__nested_webpack_require_51423__.o(definition, key) && !__nested_webpack_require_51423__.o(exports, key)) {
 /******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
 /******/ 				}
 /******/ 			}
@@ -756,13 +778,13 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 /******/ 	
 /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
 /******/ 	(() => {
-/******/ 		__nested_webpack_require_49952__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 		__nested_webpack_require_51423__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
 /******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/make namespace object */
 /******/ 	(() => {
 /******/ 		// define __esModule on exports
-/******/ 		__nested_webpack_require_49952__.r = (exports) => {
+/******/ 		__nested_webpack_require_51423__.r = (exports) => {
 /******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 /******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 /******/ 			}
@@ -778,13 +800,13 @@ var __nested_webpack_exports__ = {};
 /*!************************!*\
   !*** ./src/iconsV1.ts ***!
   \************************/
-__nested_webpack_require_49952__.r(__nested_webpack_exports__);
-/* harmony export */ __nested_webpack_require_49952__.d(__nested_webpack_exports__, {
+__nested_webpack_require_51423__.r(__nested_webpack_exports__);
+/* harmony export */ __nested_webpack_require_51423__.d(__nested_webpack_exports__, {
 /* harmony export */   icons: () => (/* binding */ icons)
 /* harmony export */ });
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 //@ts-ignore
-var path = __nested_webpack_require_49952__("./src/images-v1 sync recursive \\.svg$");
+var path = __nested_webpack_require_51423__("./src/images-v1 sync recursive \\.svg$");
 var icons = {};
 path.keys().forEach(function (key) {
     icons[key.substring(2, key.length - 4).toLowerCase()] = path(key);
@@ -808,7 +830,7 @@ path.keys().forEach(function (key) {
 /***/ (function(module) {
 
 /*!
- * surveyjs - Survey JavaScript library v2.0.4
+ * surveyjs - Survey JavaScript library v2.0.6
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -851,9 +873,11 @@ var map = {
 	"./close-24x24.svg": "./src/images-v2/close-24x24.svg",
 	"./collapse-16x16.svg": "./src/images-v2/collapse-16x16.svg",
 	"./collapsedetails-16x16.svg": "./src/images-v2/collapsedetails-16x16.svg",
+	"./delete-16x16.svg": "./src/images-v2/delete-16x16.svg",
 	"./delete-24x24.svg": "./src/images-v2/delete-24x24.svg",
 	"./drag-24x24.svg": "./src/images-v2/drag-24x24.svg",
 	"./draghorizontal-24x16.svg": "./src/images-v2/draghorizontal-24x16.svg",
+	"./editsmall-16x16.svg": "./src/images-v2/editsmall-16x16.svg",
 	"./expand-16x16.svg": "./src/images-v2/expand-16x16.svg",
 	"./expanddetails-16x16.svg": "./src/images-v2/expanddetails-16x16.svg",
 	"./file-72x72.svg": "./src/images-v2/file-72x72.svg",
@@ -1150,6 +1174,16 @@ module.exports = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\
 
 /***/ }),
 
+/***/ "./src/images-v2/delete-16x16.svg":
+/*!****************************************!*\
+  !*** ./src/images-v2/delete-16x16.svg ***!
+  \****************************************/
+/***/ ((module) => {
+
+module.exports = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M13 3.25H10.75V3C10.75 2.04 9.96 1.25 9 1.25H7C6.04 1.25 5.25 2.04 5.25 3V3.25H3C2.59 3.25 2.25 3.59 2.25 4C2.25 4.41 2.59 4.75 3 4.75H3.25V13C3.25 13.96 4.04 14.75 5 14.75H11C11.96 14.75 12.75 13.96 12.75 13V4.75H13C13.41 4.75 13.75 4.41 13.75 4C13.75 3.59 13.41 3.25 13 3.25ZM6.75 3C6.75 2.86 6.86 2.75 7 2.75H9C9.14 2.75 9.25 2.86 9.25 3V3.25H6.75V3ZM11.25 13C11.25 13.14 11.14 13.25 11 13.25H5C4.86 13.25 4.75 13.14 4.75 13V4.75H11.25V13ZM9.25 6.25C9.66 6.25 10 6.59 10 7V11C10 11.41 9.66 11.75 9.25 11.75C8.84 11.75 8.5 11.41 8.5 11V7C8.5 6.59 8.84 6.25 9.25 6.25ZM7.5 7V11C7.5 11.41 7.16 11.75 6.75 11.75C6.34 11.75 6 11.41 6 11V7C6 6.59 6.34 6.25 6.75 6.25C7.16 6.25 7.5 6.59 7.5 7Z\"></path></svg>"
+
+/***/ }),
+
 /***/ "./src/images-v2/delete-24x24.svg":
 /*!****************************************!*\
   !*** ./src/images-v2/delete-24x24.svg ***!
@@ -1180,6 +1214,16 @@ module.exports = "<svg viewBox=\"0 0 24 16\" xmlns=\"http://www.w3.org/2000/svg\
 
 /***/ }),
 
+/***/ "./src/images-v2/editsmall-16x16.svg":
+/*!*******************************************!*\
+  !*** ./src/images-v2/editsmall-16x16.svg ***!
+  \*******************************************/
+/***/ ((module) => {
+
+module.exports = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M13.1209 3.05249L12.9509 2.88249C11.8809 1.81249 10.1309 1.81249 9.06089 2.88249L3.47089 8.46249C3.37089 8.56249 3.31089 8.68249 3.27089 8.81249L2.27089 12.8125C2.21089 13.0625 2.28089 13.3425 2.47089 13.5225C2.61089 13.6625 2.80089 13.7425 3.00089 13.7425C3.06089 13.7425 3.12089 13.7425 3.18089 13.7225L7.18089 12.7225C7.31089 12.6925 7.43089 12.6225 7.53089 12.5225L13.1209 6.93249C14.1909 5.86249 14.1909 4.11249 13.1209 3.04249V3.05249ZM6.62089 11.3125L4.04089 11.9625L4.69089 9.38249L8.01089 6.06249L9.95089 8.00249L6.63089 11.3225L6.62089 11.3125ZM12.0609 5.87249L11.0009 6.93249L9.06089 4.99249L10.1209 3.93249C10.6109 3.44249 11.4009 3.44249 11.8909 3.93249L12.0609 4.10249C12.5509 4.59249 12.5509 5.38249 12.0609 5.87249Z\"></path></svg>"
+
+/***/ }),
+
 /***/ "./src/images-v2/expand-16x16.svg":
 /*!****************************************!*\
   !*** ./src/images-v2/expand-16x16.svg ***!
@@ -1506,7 +1550,7 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 /******/ 	var __webpack_module_cache__ = {};
 /******/ 	
 /******/ 	// The require function
-/******/ 	function __nested_webpack_require_62333__(moduleId) {
+/******/ 	function __nested_webpack_require_64535__(moduleId) {
 /******/ 		// Check if module is in cache
 /******/ 		var cachedModule = __webpack_module_cache__[moduleId];
 /******/ 		if (cachedModule !== undefined) {
@@ -1520,7 +1564,7 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 /******/ 		};
 /******/ 	
 /******/ 		// Execute the module function
-/******/ 		__webpack_modules__[moduleId](module, module.exports, __nested_webpack_require_62333__);
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __nested_webpack_require_64535__);
 /******/ 	
 /******/ 		// Return the exports of the module
 /******/ 		return module.exports;
@@ -1530,9 +1574,9 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 /******/ 	/* webpack/runtime/define property getters */
 /******/ 	(() => {
 /******/ 		// define getter functions for harmony exports
-/******/ 		__nested_webpack_require_62333__.d = (exports, definition) => {
+/******/ 		__nested_webpack_require_64535__.d = (exports, definition) => {
 /******/ 			for(var key in definition) {
-/******/ 				if(__nested_webpack_require_62333__.o(definition, key) && !__nested_webpack_require_62333__.o(exports, key)) {
+/******/ 				if(__nested_webpack_require_64535__.o(definition, key) && !__nested_webpack_require_64535__.o(exports, key)) {
 /******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
 /******/ 				}
 /******/ 			}
@@ -1541,13 +1585,13 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 /******/ 	
 /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
 /******/ 	(() => {
-/******/ 		__nested_webpack_require_62333__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 		__nested_webpack_require_64535__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
 /******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/make namespace object */
 /******/ 	(() => {
 /******/ 		// define __esModule on exports
-/******/ 		__nested_webpack_require_62333__.r = (exports) => {
+/******/ 		__nested_webpack_require_64535__.r = (exports) => {
 /******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 /******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 /******/ 			}
@@ -1563,13 +1607,13 @@ var __nested_webpack_exports__ = {};
 /*!************************!*\
   !*** ./src/iconsV2.ts ***!
   \************************/
-__nested_webpack_require_62333__.r(__nested_webpack_exports__);
-/* harmony export */ __nested_webpack_require_62333__.d(__nested_webpack_exports__, {
+__nested_webpack_require_64535__.r(__nested_webpack_exports__);
+/* harmony export */ __nested_webpack_require_64535__.d(__nested_webpack_exports__, {
 /* harmony export */   icons: () => (/* binding */ icons)
 /* harmony export */ });
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 //@ts-ignore
-var path = __nested_webpack_require_62333__("./src/images-v2 sync recursive \\.svg$");
+var path = __nested_webpack_require_64535__("./src/images-v2 sync recursive \\.svg$");
 var icons = {};
 path.keys().forEach(function (key) {
     icons[key.substring(2, key.length - 4).toLowerCase()] = path(key);
@@ -2124,7 +2168,7 @@ var SurveyQuestionBoolean = /** @class */ (function (_super) {
         var cssClasses = this.question.cssClasses;
         var itemClass = this.question.getItemCss();
         return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.root, onKeyDown: this.handleOnKeyDown },
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement("label", { className: itemClass, onClick: this.handleOnClick },
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement("label", { className: itemClass },
                 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.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, 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-describedby": this.question.a11y_input_ariaDescribedBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage }),
@@ -2567,6 +2611,91 @@ var BrandInfo = /** @class */ (function (_super) {
 
 
 
+/***/ }),
+
+/***/ "../survey-react-ui/src/components/breadcrumbs/breadcrumbs.tsx":
+/*!*********************************************************************!*\
+  !*** ../survey-react-ui/src/components/breadcrumbs/breadcrumbs.tsx ***!
+  \*********************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   SurveyBreadcrumbs: () => (/* binding */ SurveyBreadcrumbs)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/preact/compat/dist/compat.module.js");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../element-factory */ "../survey-react-ui/src/element-factory.tsx");
+/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../reactquestion_element */ "../survey-react-ui/src/reactquestion_element.tsx");
+/* harmony import */ var _svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../svg-icon/svg-icon */ "../survey-react-ui/src/components/svg-icon/svg-icon.tsx");
+/* harmony import */ var _action_bar_action_bar_item__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../action-bar/action-bar-item */ "../survey-react-ui/src/components/action-bar/action-bar-item.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 SurveyBreadcrumbs = /** @class */ (function (_super) {
+    __extends(SurveyBreadcrumbs, _super);
+    function SurveyBreadcrumbs(props) {
+        return _super.call(this, props) || this;
+    }
+    SurveyBreadcrumbs.prototype.getStateElement = function () {
+        return this.props.model;
+    };
+    Object.defineProperty(SurveyBreadcrumbs.prototype, "items", {
+        get: function () {
+            return this.props.model.actions;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyBreadcrumbs.prototype, "css", {
+        get: function () {
+            return this.props.css;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyBreadcrumbs.prototype.renderElement = function () {
+        if (!this.items || !this.items.length)
+            return null;
+        var items = this.renderItems();
+        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.css.breadcrumbsRoot }, items));
+    };
+    SurveyBreadcrumbs.prototype.renderItems = function () {
+        var _this = this;
+        var result = [];
+        this.items.concat([]).forEach(function (item, itemIndex) {
+            if (itemIndex) {
+                result.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { key: item.renderedId + "_separator", className: _this.css.breadcrumbsSeparator, iconName: "arrowright-16x16", size: "auto" }));
+            }
+            result.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_action_bar_action_bar_item__WEBPACK_IMPORTED_MODULE_4__.SurveyAction, { key: item.renderedId, item: item }));
+        });
+        return result;
+    };
+    return SurveyBreadcrumbs;
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
+
+_element_factory__WEBPACK_IMPORTED_MODULE_1__.ReactElementFactory.Instance.registerElement("sv-breadcrumbs", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyBreadcrumbs, props);
+});
+
+
 /***/ }),
 
 /***/ "../survey-react-ui/src/components/character-counter.tsx":
@@ -2907,8 +3036,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/preact/compat/dist/compat.module.js");
 /* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../reactquestion_element */ "../survey-react-ui/src/reactquestion_element.tsx");
 /* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../element-factory */ "../survey-react-ui/src/element-factory.tsx");
-/* harmony import */ var _file_item__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./file-item */ "../survey-react-ui/src/components/file/file-item.tsx");
-/* harmony import */ var _file_page__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./file-page */ "../survey-react-ui/src/components/file/file-page.tsx");
+/* harmony import */ var _file_page__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./file-page */ "../survey-react-ui/src/components/file/file-page.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -2928,7 +3056,6 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
-
 var SurveyFilePreview = /** @class */ (function (_super) {
     __extends(SurveyFilePreview, _super);
     function SurveyFilePreview() {
@@ -2952,8 +3079,7 @@ var SurveyFilePreview = /** @class */ (function (_super) {
     };
     SurveyFilePreview.prototype.renderElement = function () {
         var _this = this;
-        var content = this.question.supportFileNavigator ? this.question.renderedPages.map(function (page, index) { return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_file_page__WEBPACK_IMPORTED_MODULE_4__.SurveyFilePage, { page: page, question: _this.question, key: page.id })); })
-            : this.question.previewValue.map(function (item, index) { return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_file_item__WEBPACK_IMPORTED_MODULE_3__.SurveyFileItem, { item: item, question: _this.question, key: index })); });
+        var content = this.question.renderedPages.map(function (page, index) { return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_file_page__WEBPACK_IMPORTED_MODULE_3__.SurveyFilePage, { page: page, question: _this.question, key: page.id })); });
         return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.cssClasses.fileList || undefined }, content);
     };
     SurveyFilePreview.prototype.canRender = function () {
@@ -4744,9 +4870,9 @@ var RatingItemSmiley = /** @class */ (function (_super) {
     }
     RatingItemSmiley.prototype.render = function () {
         var _this = this;
-        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("label", { onMouseDown: this.handleOnMouseDown, style: this.question.getItemStyle(this.item.itemValue, this.item.highlight), className: this.question.getItemClass(this.item.itemValue), onMouseOver: function (e) { return _this.question.onItemMouseIn(_this.item); }, onMouseOut: function (e) { return _this.question.onItemMouseOut(_this.item); } },
+        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("label", { onMouseDown: this.handleOnMouseDown, style: this.question.getItemStyle(this.item.itemValue, this.item.highlight), className: this.question.getItemClass(this.item.itemValue), onMouseOver: function (e) { return _this.question.onItemMouseIn(_this.item); }, onMouseOut: function (e) { return _this.question.onItemMouseOut(_this.item); }, title: this.item.text },
             react__WEBPACK_IMPORTED_MODULE_0__.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { size: "auto", iconName: this.question.getItemSmileyIconName(this.item.itemValue), title: this.item.text })));
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { size: "auto", iconName: this.question.getItemSmileyIconName(this.item.itemValue) })));
     };
     return RatingItemSmiley;
 }(_rating_item__WEBPACK_IMPORTED_MODULE_3__.RatingItemBase));
@@ -4799,10 +4925,10 @@ var RatingItemStar = /** @class */ (function (_super) {
     }
     RatingItemStar.prototype.render = function () {
         var _this = this;
-        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("label", { onMouseDown: this.handleOnMouseDown, className: this.question.getItemClass(this.item.itemValue), onMouseOver: function (e) { return _this.question.onItemMouseIn(_this.item); }, onMouseOut: function (e) { return _this.question.onItemMouseOut(_this.item); } },
+        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("label", { onMouseDown: this.handleOnMouseDown, className: this.question.getItemClass(this.item.itemValue), onMouseOver: function (e) { return _this.question.onItemMouseIn(_this.item); }, onMouseOut: function (e) { return _this.question.onItemMouseOut(_this.item); }, title: this.item.text },
             react__WEBPACK_IMPORTED_MODULE_0__.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, checked: this.question.value == this.item.value, onClick: this.props.handleOnClick, onChange: function () { }, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage }),
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { className: "sv-star", size: "auto", iconName: this.question.itemStarIcon, title: this.item.text }),
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { className: "sv-star-2", size: "auto", iconName: this.question.itemStarIconAlt, title: this.item.text })));
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { className: "sv-star", size: "auto", iconName: this.question.itemStarIcon }),
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { className: "sv-star-2", size: "auto", iconName: this.question.itemStarIconAlt })));
     };
     return RatingItemStar;
 }(_rating_item__WEBPACK_IMPORTED_MODULE_3__.RatingItemBase));
@@ -5519,7 +5645,7 @@ var TitleContent = /** @class */ (function (_super) {
     });
     TitleContent.prototype.render = function () {
         if (this.element.isTitleRenderedAsString)
-            return _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__.SurveyElementBase.renderLocString(this.element.locTitle);
+            return _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__.SurveyElementBase.renderLocString(this.element.locRenderedTitle);
         var spans = this.renderTitleSpans(this.element.getTitleOwner(), this.cssClasses);
         return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, spans);
     };
@@ -5541,7 +5667,7 @@ var TitleContent = /** @class */ (function (_super) {
             spans.push(this.renderRequireText(element));
             spans.push(getSpaceSpan("req-sp"));
         }
-        spans.push(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__.SurveyElementBase.renderLocString(element.locTitle, null, "q_title"));
+        spans.push(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__.SurveyElementBase.renderLocString(element.locRenderedTitle, null, "q_title"));
         if (element.isRequireTextAfterTitle) {
             spans.push(getSpaceSpan("req-sp"));
             spans.push(this.renderRequireText(element));
@@ -8106,6 +8232,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _reactquestion_comment__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./reactquestion_comment */ "../survey-react-ui/src/reactquestion_comment.tsx");
 /* harmony import */ var _custom_widget__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./custom-widget */ "../survey-react-ui/src/custom-widget.tsx");
 /* harmony import */ var _element_header__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./element-header */ "../survey-react-ui/src/element-header.tsx");
+/* harmony import */ var _reactquestion_singleinputsummary__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./reactquestion_singleinputsummary */ "../survey-react-ui/src/reactquestion_singleinputsummary.tsx");
+/* harmony import */ var _components_breadcrumbs_breadcrumbs__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./components/breadcrumbs/breadcrumbs */ "../survey-react-ui/src/components/breadcrumbs/breadcrumbs.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -8128,6 +8256,8 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
+
 var SurveyQuestion = /** @class */ (function (_super) {
     __extends(SurveyQuestion, _super);
     function SurveyQuestion(props) {
@@ -8211,21 +8341,13 @@ var SurveyQuestion = /** @class */ (function (_super) {
         };
         var cssClasses = question.cssClasses;
         var questionRender = this.renderQuestion();
-        var errorsTop = this.question.showErrorOnTop
-            ? this.renderErrors(cssClasses, "top")
-            : null;
-        var errorsBottom = this.question.showErrorOnBottom
-            ? this.renderErrors(cssClasses, "bottom")
-            : null;
         var comment = question && question.hasComment ? this.renderComment(cssClasses) : null;
         var descriptionUnderInput = question.hasDescriptionUnderInput
             ? this.renderDescription()
             : null;
         return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: question.cssContent || undefined, style: contentStyle, role: "presentation" },
-            errorsTop,
             questionRender,
             comment,
-            errorsBottom,
             descriptionUnderInput));
     };
     SurveyQuestion.prototype.renderElement = function () {
@@ -8241,15 +8363,30 @@ var SurveyQuestion = /** @class */ (function (_super) {
             ? this.renderErrors(cssClasses, "")
             : null;
         var rootStyle = question.getRootStyle();
-        var questionContent = this.wrapQuestionContent(this.renderQuestionContent());
+        var singleBreadcrumbs = question.singleInputHasActions ? this.renderSingleInputBreadcrumbs(question, cssClasses) : undefined;
+        var singleSummary = question.singleInputSummary ? this.renderSingleInputSummary(question, cssClasses) : undefined;
+        var singleInput = singleSummary || (question.singleInputQuestion ? this.renderSingleInputQuestion(question, cssClasses) : undefined);
+        var questionContent = singleInput || this.wrapQuestionContent(this.renderQuestionContent());
         return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,
             react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { ref: this.rootRef, id: question.id, className: question.getRootCss(), style: rootStyle, role: question.ariaRole, "aria-required": this.question.ariaRequired, "aria-invalid": this.question.ariaInvalid, "aria-label": this.question.ariaLabel, "aria-labelledby": question.ariaLabelledBy, "aria-describedby": question.ariaDescribedBy, "aria-expanded": question.ariaExpanded, "data-name": question.name },
+                singleBreadcrumbs,
                 errorsAboveQuestion,
                 headerTop,
                 questionContent,
                 headerBottom,
                 errorsBelowQuestion)));
     };
+    SurveyQuestion.prototype.renderSingleInputQuestion = function (question, cssClasses) {
+        var singleQuestion = question.singleInputQuestion;
+        var key = singleQuestion.id;
+        return react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyQuestion, { key: key, element: singleQuestion, creator: this.creator, css: cssClasses });
+    };
+    SurveyQuestion.prototype.renderSingleInputBreadcrumbs = function (question, cssClasses) {
+        return react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_breadcrumbs_breadcrumbs__WEBPACK_IMPORTED_MODULE_8__.SurveyBreadcrumbs, { model: question.singleInputActions, css: cssClasses });
+    };
+    SurveyQuestion.prototype.renderSingleInputSummary = function (question, cssClasses) {
+        return react__WEBPACK_IMPORTED_MODULE_0__.createElement(_reactquestion_singleinputsummary__WEBPACK_IMPORTED_MODULE_7__.SurveyQuestionSigleInputSummary, { summary: question.singleInputSummary, creator: this.creator, css: cssClasses });
+    };
     SurveyQuestion.prototype.wrapElement = function (element) {
         var survey = this.question.survey;
         var wrapper = null;
@@ -8279,6 +8416,8 @@ var SurveyQuestion = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_0__.createElement(_reactquestion_comment__WEBPACK_IMPORTED_MODULE_4__.SurveyQuestionCommentItem, { question: this.question, cssClasses: cssClasses, otherCss: cssClasses.other, isDisplayMode: this.question.isInputReadOnly })));
     };
     SurveyQuestion.prototype.renderHeader = function (question) {
+        if (question.singleInputHideHeader)
+            return null;
         return react__WEBPACK_IMPORTED_MODULE_0__.createElement(_element_header__WEBPACK_IMPORTED_MODULE_6__.SurveyElementHeader, { element: question });
     };
     SurveyQuestion.prototype.renderErrors = function (cssClasses, location) {
@@ -8318,13 +8457,6 @@ var SurveyElementErrors = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(SurveyElementErrors.prototype, "location", {
-        get: function () {
-            return this.props.location;
-        },
-        enumerable: false,
-        configurable: true
-    });
     SurveyElementErrors.prototype.getState = function (prevState) {
         if (prevState === void 0) { prevState = null; }
         return !prevState ? { error: 0 } : { error: prevState.error + 1 };
@@ -8732,8 +8864,9 @@ var SurveyQuestionCheckbox = /** @class */ (function (_super) {
         if (this.question.blockedRow) {
             return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.rootRow }, this.getItems(cssClasses, this.question.dataChoices));
         }
-        else
+        else {
             return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, this.getItems(cssClasses, this.question.bodyItems));
+        }
     };
     SurveyQuestionCheckbox.prototype.getItems = function (cssClasses, choices) {
         var renderedItems = [];
@@ -9726,13 +9859,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/preact/compat/dist/compat.module.js");
 /* harmony import */ var _components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/action-bar/action-bar */ "../survey-react-ui/src/components/action-bar/action-bar.tsx");
-/* harmony import */ var _components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/svg-icon/svg-icon */ "../survey-react-ui/src/components/svg-icon/svg-icon.tsx");
-/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactquestion_element */ "../survey-react-ui/src/reactquestion_element.tsx");
-/* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./reactquestion_factory */ "../survey-react-ui/src/reactquestion_factory.tsx");
-/* harmony import */ var _components_loading_indicator__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/loading-indicator */ "../survey-react-ui/src/components/loading-indicator.tsx");
-/* harmony import */ var _components_action_bar_action_bar_item__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/action-bar/action-bar-item */ "../survey-react-ui/src/components/action-bar/action-bar-item.tsx");
-/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./element-factory */ "../survey-react-ui/src/element-factory.tsx");
-/* harmony import */ var _components_file_file_choose_button__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./components/file/file-choose-button */ "../survey-react-ui/src/components/file/file-choose-button.tsx");
+/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactquestion_element */ "../survey-react-ui/src/reactquestion_element.tsx");
+/* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactquestion_factory */ "../survey-react-ui/src/reactquestion_factory.tsx");
+/* harmony import */ var _components_loading_indicator__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/loading-indicator */ "../survey-react-ui/src/components/loading-indicator.tsx");
+/* harmony import */ var _components_action_bar_action_bar_item__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/action-bar/action-bar-item */ "../survey-react-ui/src/components/action-bar/action-bar-item.tsx");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./element-factory */ "../survey-react-ui/src/element-factory.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -9755,9 +9886,6 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
-
-
-// import { ReactElementFactory, SurveyFileChooseButton } from "../entries/react-ui-model";
 var SurveyQuestionFile = /** @class */ (function (_super) {
     __extends(SurveyQuestionFile, _super);
     function SurveyQuestionFile(props) {
@@ -9776,8 +9904,6 @@ var SurveyQuestionFile = /** @class */ (function (_super) {
         var loadingIndicator = this.question.showLoadingIndicator ? this.renderLoadingIndicator() : null;
         var video = this.question.isPlayingVideo ? this.renderVideo() : null;
         var fileDecorator = this.question.showFileDecorator ? this.renderFileDecorator() : null;
-        var clearButton = this.question.showRemoveButton ? this.renderClearButton(this.question.cssClasses.removeButton) : null;
-        var clearButtonBottom = this.question.showRemoveButtonBottom ? this.renderClearButton(this.question.cssClasses.removeButtonBottom) : null;
         var fileNavigator = this.question.fileNavigatorVisible ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_1__.SurveyActionBar, { model: this.question.fileNavigator })) : null;
         var fileInput;
         if (this.question.isReadOnlyAttr) {
@@ -9798,48 +9924,33 @@ var SurveyQuestionFile = /** @class */ (function (_super) {
                 fileDecorator,
                 loadingIndicator,
                 video,
-                clearButton,
                 preview,
-                clearButtonBottom,
                 fileNavigator)));
     };
     SurveyQuestionFile.prototype.renderFileDecorator = function () {
-        var chooseButton = this.question.showChooseButton ? this.renderChooseButton() : null;
         var actionsContainer = this.question.actionsContainerVisible ? react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_1__.SurveyActionBar, { model: this.question.actionsContainer }) : null;
-        var noFileChosen = this.question.isEmpty() ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", { className: this.question.cssClasses.noFileChosen }, this.question.noFileChosenCaption)) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.getFileDecoratorCss() },
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", { className: this.question.cssClasses.dragAreaPlaceholder }, this.renderLocString(this.question.locRenderedPlaceholder)),
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.cssClasses.wrapper },
-                chooseButton,
-                actionsContainer,
-                noFileChosen)));
-    };
-    SurveyQuestionFile.prototype.renderChooseButton = function () {
-        return react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_file_file_choose_button__WEBPACK_IMPORTED_MODULE_8__.SurveyFileChooseButton, { data: { question: this.question } });
-    };
-    SurveyQuestionFile.prototype.renderClearButton = function (className) {
-        return !this.question.isUploading ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement("button", { type: "button", onClick: this.question.doClean, className: className },
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", null, this.question.clearButtonCaption),
-            (!!this.question.cssClasses.removeButtonIconId) ? react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: this.question.cssClasses.removeButtonIconId, size: "auto", title: this.question.clearButtonCaption }) : null)) : null;
+            this.question.showDragAreaPlaceholder ? react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", { className: this.question.cssClasses.dragAreaPlaceholder }, this.renderLocString(this.question.locRenderedPlaceholder)) : false,
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.cssClasses.wrapper }, actionsContainer)));
     };
     SurveyQuestionFile.prototype.renderPreview = function () {
-        return _element_factory__WEBPACK_IMPORTED_MODULE_7__.ReactElementFactory.Instance.createElement("sv-file-preview", { question: this.question });
+        return _element_factory__WEBPACK_IMPORTED_MODULE_6__.ReactElementFactory.Instance.createElement("sv-file-preview", { question: this.question });
     };
     SurveyQuestionFile.prototype.renderLoadingIndicator = function () {
         return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.cssClasses.loadingIndicator },
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_loading_indicator__WEBPACK_IMPORTED_MODULE_5__.LoadingIndicatorComponent, null));
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_loading_indicator__WEBPACK_IMPORTED_MODULE_4__.LoadingIndicatorComponent, null));
     };
     SurveyQuestionFile.prototype.renderVideo = function () {
         return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.cssClasses.videoContainer },
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_action_bar_action_bar_item__WEBPACK_IMPORTED_MODULE_6__.SurveyAction, { item: this.question.changeCameraAction }),
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_action_bar_action_bar_item__WEBPACK_IMPORTED_MODULE_6__.SurveyAction, { item: this.question.closeCameraAction }),
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_action_bar_action_bar_item__WEBPACK_IMPORTED_MODULE_5__.SurveyAction, { item: this.question.changeCameraAction }),
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_action_bar_action_bar_item__WEBPACK_IMPORTED_MODULE_5__.SurveyAction, { item: this.question.closeCameraAction }),
             react__WEBPACK_IMPORTED_MODULE_0__.createElement("video", { autoPlay: true, playsInline: true, id: this.question.videoId, className: this.question.cssClasses.video }),
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_action_bar_action_bar_item__WEBPACK_IMPORTED_MODULE_6__.SurveyAction, { item: this.question.takePictureAction })));
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_action_bar_action_bar_item__WEBPACK_IMPORTED_MODULE_5__.SurveyAction, { item: this.question.takePictureAction })));
     };
     return SurveyQuestionFile;
-}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_3__.SurveyQuestionElementBase));
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_2__.SurveyQuestionElementBase));
 
-_reactquestion_factory__WEBPACK_IMPORTED_MODULE_4__.ReactQuestionFactory.Instance.registerQuestion("file", function (props) {
+_reactquestion_factory__WEBPACK_IMPORTED_MODULE_3__.ReactQuestionFactory.Instance.registerQuestion("file", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyQuestionFile, props);
 });
 
@@ -10012,14 +10123,14 @@ var SurveyQuestionMatrix = /** @class */ (function (_super) {
             var key = "row-" + row.name + "-" + i;
             rows.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyQuestionMatrixRow, { key: key, question: this.question, cssClasses: cssClasses, row: row, isFirst: i == 0 }));
         }
-        var header = !this.question.showHeader ? null : (react__WEBPACK_IMPORTED_MODULE_0__.createElement("thead", null,
+        var header = !this.question.showHeader ? null : (react__WEBPACK_IMPORTED_MODULE_0__.createElement("thead", { role: "presentation" },
             react__WEBPACK_IMPORTED_MODULE_0__.createElement("tr", null,
                 rowsTH,
                 headers)));
         return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.tableWrapper, ref: function (root) { return (_this.setControl(root)); } },
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement("fieldset", null,
-                react__WEBPACK_IMPORTED_MODULE_0__.createElement("legend", { className: "sv-hidden" }, this.question.locTitle.renderedHtml),
-                react__WEBPACK_IMPORTED_MODULE_0__.createElement("table", { className: this.question.getTableCss() },
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement("fieldset", { role: "radiogroup" },
+                react__WEBPACK_IMPORTED_MODULE_0__.createElement("legend", { className: "sv-visuallyhidden" }, this.question.locTitle.renderedHtml),
+                react__WEBPACK_IMPORTED_MODULE_0__.createElement("table", { className: this.question.getTableCss(), role: "presentation" },
                     header,
                     react__WEBPACK_IMPORTED_MODULE_0__.createElement("tbody", null, rows)))));
     };
@@ -10494,10 +10605,7 @@ var SurveyQuestionMatrixDropdownBase = /** @class */ (function (_super) {
     };
     SurveyQuestionMatrixDropdownBase.prototype.renderTableDiv = function () {
         var _this = this;
-        var divStyle = this.question.showHorizontalScroll
-            ? { overflowX: "scroll" }
-            : {};
-        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { style: divStyle, className: this.question.cssClasses.tableWrapper, ref: function (root) { return (_this.setControl(root)); } },
+        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.cssClasses.tableWrapper, ref: function (root) { return (_this.setControl(root)); } },
             react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyQuestionMatrixTable, { question: this.question, creator: this.creator, wrapCell: function (cell, element, reason) { return _this.wrapCell(cell, element, reason); } })));
     };
     return SurveyQuestionMatrixDropdownBase;
@@ -10623,7 +10731,7 @@ var SurveyQuestionMatrixDropdownCell = /** @class */ (function (_super) {
                 row: this.cell.row,
                 column: this.cell.cell.column,
             };
-            this.question.survey.matrixAfterCellRender(this.question, options);
+            this.question.survey.matrixAfterCellRender(options);
             this.question.afterRenderCore(el);
         }
     };
@@ -10702,7 +10810,8 @@ var SurveyQuestionMatrixDropdownCell = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   SurveyQuestionMatrixDynamic: () => (/* binding */ SurveyQuestionMatrixDynamic),
-/* harmony export */   SurveyQuestionMatrixDynamicAddButton: () => (/* binding */ SurveyQuestionMatrixDynamicAddButton)
+/* harmony export */   SurveyQuestionMatrixDynamicAddButton: () => (/* binding */ SurveyQuestionMatrixDynamicAddButton),
+/* harmony export */   SurveyQuestionMatrixDynamicPlaceholder: () => (/* binding */ SurveyQuestionMatrixDynamicPlaceholder)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/preact/compat/dist/compat.module.js");
 /* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactquestion_factory */ "../survey-react-ui/src/reactquestion_factory.tsx");
@@ -10768,12 +10877,7 @@ var SurveyQuestionMatrixDynamic = /** @class */ (function (_super) {
         return this.renderAddRowButton(cssClasses);
     };
     SurveyQuestionMatrixDynamic.prototype.renderNoRowsContent = function (cssClasses) {
-        var text = this.renderLocString(this.matrix.locNoRowsText);
-        var textDiv = react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.noRowsText }, text);
-        var btn = this.matrix.renderedTable.showAddRow ? this.renderAddRowButton(cssClasses, true) : undefined;
-        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.noRowsSection },
-            textDiv,
-            btn));
+        return _element_factory__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.createElement("sv-placeholder-matrixdynamic", { cssClasses: cssClasses, question: this.matrix });
     };
     SurveyQuestionMatrixDynamic.prototype.renderAddRowButton = function (cssClasses, isEmptySection) {
         if (isEmptySection === void 0) { isEmptySection = false; }
@@ -10816,9 +10920,32 @@ var SurveyQuestionMatrixDynamicAddButton = /** @class */ (function (_super) {
     return SurveyQuestionMatrixDynamicAddButton;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_4__.ReactSurveyElement));
 
-_element_factory__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("sv-matrixdynamic-add-btn", function (props) {
-    return react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyQuestionMatrixDynamicAddButton, props);
-});
+var SurveyQuestionMatrixDynamicPlaceholder = /** @class */ (function (_super) {
+    __extends(SurveyQuestionMatrixDynamicPlaceholder, _super);
+    function SurveyQuestionMatrixDynamicPlaceholder(props) {
+        return _super.call(this, props) || this;
+    }
+    SurveyQuestionMatrixDynamicPlaceholder.prototype.renderElement = function () {
+        var cssClasses = this.props.cssClasses;
+        var matrix = this.props.question;
+        var showAddButton = matrix.renderedTable.showAddRow;
+        var text = this.renderLocString(matrix.locNoRowsText);
+        var textDiv = react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.noRowsText }, text);
+        var btn = showAddButton ? this.renderAddRowButton(cssClasses, matrix) : undefined;
+        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.noRowsSection },
+            textDiv,
+            btn));
+    };
+    SurveyQuestionMatrixDynamicPlaceholder.prototype.renderAddRowButton = function (cssClasses, question) {
+        return _element_factory__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.createElement("sv-matrixdynamic-add-btn", {
+            question: question, cssClasses: cssClasses, isEmptySection: true
+        });
+    };
+    return SurveyQuestionMatrixDynamicPlaceholder;
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_4__.ReactSurveyElement));
+
+_element_factory__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("sv-matrixdynamic-add-btn", function (props) { return react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyQuestionMatrixDynamicAddButton, props); });
+_element_factory__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("sv-placeholder-matrixdynamic", function (props) { return react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyQuestionMatrixDynamicPlaceholder, props); });
 
 
 /***/ }),
@@ -10982,17 +11109,15 @@ _reactquestion_factory__WEBPACK_IMPORTED_MODULE_3__.ReactQuestionFactory.Instanc
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   SurveyQuestionPanelDynamic: () => (/* binding */ SurveyQuestionPanelDynamic),
-/* harmony export */   SurveyQuestionPanelDynamicItem: () => (/* binding */ SurveyQuestionPanelDynamicItem)
+/* harmony export */   SurveyQuestionPanelDynamicItem: () => (/* binding */ SurveyQuestionPanelDynamicItem),
+/* harmony export */   SurveyQuestionPanelDynamicPlaceholder: () => (/* binding */ SurveyQuestionPanelDynamicPlaceholder)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/preact/compat/dist/compat.module.js");
 /* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactquestion_element */ "../survey-react-ui/src/reactquestion_element.tsx");
 /* harmony import */ var _panel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./panel */ "../survey-react-ui/src/panel.tsx");
 /* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactquestion_factory */ "../survey-react-ui/src/reactquestion_factory.tsx");
 /* harmony import */ var _components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/action-bar/action-bar */ "../survey-react-ui/src/components/action-bar/action-bar.tsx");
-/* harmony import */ var _components_paneldynamic_actions_paneldynamic_next_btn__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/paneldynamic-actions/paneldynamic-next-btn */ "../survey-react-ui/src/components/paneldynamic-actions/paneldynamic-next-btn.tsx");
-/* harmony import */ var _components_paneldynamic_actions_paneldynamic_prev_btn__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/paneldynamic-actions/paneldynamic-prev-btn */ "../survey-react-ui/src/components/paneldynamic-actions/paneldynamic-prev-btn.tsx");
-/* harmony import */ var _components_paneldynamic_actions_paneldynamic_progress_text__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./components/paneldynamic-actions/paneldynamic-progress-text */ "../survey-react-ui/src/components/paneldynamic-actions/paneldynamic-progress-text.tsx");
-/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./element-factory */ "../survey-react-ui/src/element-factory.tsx");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./element-factory */ "../survey-react-ui/src/element-factory.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -11015,8 +11140,6 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
-
-
 var SurveyQuestionPanelDynamic = /** @class */ (function (_super) {
     __extends(SurveyQuestionPanelDynamic, _super);
     function SurveyQuestionPanelDynamic(props) {
@@ -11057,70 +11180,29 @@ var SurveyQuestionPanelDynamic = /** @class */ (function (_super) {
     SurveyQuestionPanelDynamic.prototype.renderElement = function () {
         var _this = this;
         var panels = [];
+        var cssClasses = this.question.cssClasses;
         this.question.renderedPanels.forEach(function (panel, index) {
-            panels.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyQuestionPanelDynamicItem, { key: panel.id, element: panel, question: _this.question, index: index, cssClasses: _this.question.cssClasses, isDisplayMode: _this.isDisplayMode, creator: _this.creator }));
+            panels.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyQuestionPanelDynamicItem, { key: panel.id, element: panel, question: _this.question, index: index, cssClasses: cssClasses, isDisplayMode: _this.isDisplayMode, creator: _this.creator }));
         });
-        var btnAdd = this.question.isRenderModeList && this.question["showLegacyNavigation"]
-            ? this.renderAddRowButton()
-            : null;
-        var navTop = this.question.isProgressTopShowing
-            ? this.renderNavigator()
-            : null;
-        var navBottom = this.question.isProgressBottomShowing
-            ? this.renderNavigator()
+        var rangeTop = this.question.isRangeShowing && this.question.isProgressTopShowing
+            ? this.renderRange()
             : null;
         var navV2 = this.renderNavigatorV2();
-        var noEntriesPlaceholder = this.renderPlaceholder();
-        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.cssClasses.root },
+        var noEntriesPlaceholder = this.renderPlaceholder(cssClasses);
+        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.root },
             this.question.hasTabbedMenu ? react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.getTabsContainerCss() },
                 react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_4__.SurveyActionBar, { model: this.question.tabbedMenu })) : null,
             noEntriesPlaceholder,
-            navTop,
+            rangeTop,
             react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.cssClasses.panelsContainer }, panels),
-            navBottom,
-            btnAdd,
             navV2));
     };
-    SurveyQuestionPanelDynamic.prototype.renderNavigator = function () {
-        if (!this.question["showLegacyNavigation"]) {
-            if (this.question.isRangeShowing && this.question.isProgressTopShowing) {
-                return this.renderRange();
-            }
-            else {
-                return null;
-            }
-        }
-        var range = this.question.isRangeShowing ? this.renderRange() : null;
-        var btnPrev = this.rendrerPrevButton();
-        var btnNext = this.rendrerNextButton();
-        var btnAdd = this.renderAddRowButton();
-        var progressClass = this.question.isProgressTopShowing
-            ? this.question.cssClasses.progressTop
-            : this.question.cssClasses.progressBottom;
-        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: progressClass },
-            react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { style: { clear: "both" } },
-                react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.cssClasses.progressContainer },
-                    btnPrev,
-                    range,
-                    btnNext),
-                btnAdd,
-                this.renderProgressText())));
-    };
-    SurveyQuestionPanelDynamic.prototype.renderProgressText = function () {
-        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_paneldynamic_actions_paneldynamic_progress_text__WEBPACK_IMPORTED_MODULE_7__.SurveyQuestionPanelDynamicProgressText, { data: { question: this.question } }));
-    };
-    SurveyQuestionPanelDynamic.prototype.rendrerPrevButton = function () {
-        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_paneldynamic_actions_paneldynamic_prev_btn__WEBPACK_IMPORTED_MODULE_6__.SurveyQuestionPanelDynamicPrevButton, { data: { question: this.question } }));
-    };
-    SurveyQuestionPanelDynamic.prototype.rendrerNextButton = function () {
-        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_paneldynamic_actions_paneldynamic_next_btn__WEBPACK_IMPORTED_MODULE_5__.SurveyQuestionPanelDynamicNextButton, { data: { question: this.question } }));
-    };
     SurveyQuestionPanelDynamic.prototype.renderRange = function () {
         return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.cssClasses.progress },
             react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.cssClasses.progressBar, style: { width: this.question.progress }, role: "progressbar" })));
     };
     SurveyQuestionPanelDynamic.prototype.renderAddRowButton = function () {
-        return _element_factory__WEBPACK_IMPORTED_MODULE_8__.ReactElementFactory.Instance.createElement("sv-paneldynamic-add-btn", {
+        return _element_factory__WEBPACK_IMPORTED_MODULE_5__.ReactElementFactory.Instance.createElement("sv-paneldynamic-add-btn", {
             data: { question: this.question }
         });
     };
@@ -11134,12 +11216,9 @@ var SurveyQuestionPanelDynamic = /** @class */ (function (_super) {
             this.question.footerToolbar.visibleActions.length ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.cssClasses.footerButtonsContainer },
                 react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_4__.SurveyActionBar, { model: this.question.footerToolbar }))) : null));
     };
-    SurveyQuestionPanelDynamic.prototype.renderPlaceholder = function () {
-        if (this.question.getShowNoEntriesPlaceholder()) {
-            return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.cssClasses.noEntriesPlaceholder },
-                react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", null, this.renderLocString(this.question.locNoEntriesText)),
-                this.renderAddRowButton()));
-        }
+    SurveyQuestionPanelDynamic.prototype.renderPlaceholder = function (cssClasses) {
+        if (this.question.getShowNoEntriesPlaceholder())
+            return _element_factory__WEBPACK_IMPORTED_MODULE_5__.ReactElementFactory.Instance.createElement("sv-placeholder-paneldynamic", { cssClasses: cssClasses, question: this.question });
         return null;
     };
     return SurveyQuestionPanelDynamic;
@@ -11185,7 +11264,7 @@ var SurveyQuestionPanelDynamicItem = /** @class */ (function (_super) {
     SurveyQuestionPanelDynamicItem.prototype.renderButton = function () {
         if (!this.question.canRenderRemovePanelOnRight(this.panel))
             return null;
-        return _element_factory__WEBPACK_IMPORTED_MODULE_8__.ReactElementFactory.Instance.createElement("sv-paneldynamic-remove-btn", {
+        return _element_factory__WEBPACK_IMPORTED_MODULE_5__.ReactElementFactory.Instance.createElement("sv-paneldynamic-remove-btn", {
             data: { question: this.question, panel: this.panel }
         });
     };
@@ -11195,6 +11274,27 @@ var SurveyQuestionPanelDynamicItem = /** @class */ (function (_super) {
 _reactquestion_factory__WEBPACK_IMPORTED_MODULE_3__.ReactQuestionFactory.Instance.registerQuestion("paneldynamic", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyQuestionPanelDynamic, props);
 });
+var SurveyQuestionPanelDynamicPlaceholder = /** @class */ (function (_super) {
+    __extends(SurveyQuestionPanelDynamicPlaceholder, _super);
+    function SurveyQuestionPanelDynamicPlaceholder(props) {
+        return _super.call(this, props) || this;
+    }
+    SurveyQuestionPanelDynamicPlaceholder.prototype.renderElement = function () {
+        var cssClasses = this.props.cssClasses;
+        var question = this.props.question;
+        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.noEntriesPlaceholder },
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", null, this.renderLocString(question.locNoEntriesText)),
+            this.renderAddRowButton(question)));
+    };
+    SurveyQuestionPanelDynamicPlaceholder.prototype.renderAddRowButton = function (question) {
+        return _element_factory__WEBPACK_IMPORTED_MODULE_5__.ReactElementFactory.Instance.createElement("sv-paneldynamic-add-btn", {
+            data: { question: question }
+        });
+    };
+    return SurveyQuestionPanelDynamicPlaceholder;
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__.ReactSurveyElement));
+
+_element_factory__WEBPACK_IMPORTED_MODULE_5__.ReactElementFactory.Instance.registerElement("sv-placeholder-paneldynamic", function (props) { return react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyQuestionPanelDynamicPlaceholder, props); });
 
 
 /***/ }),
@@ -11291,8 +11391,9 @@ var SurveyQuestionRadiogroup = /** @class */ (function (_super) {
         if (this.question.blockedRow) {
             return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.rootRow }, this.getItems(cssClasses, this.question.dataChoices));
         }
-        else
+        else {
             return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, this.getItems(cssClasses, this.question.bodyItems));
+        }
     };
     SurveyQuestionRadiogroup.prototype.getItems = function (cssClasses, choices) {
         var items = [];
@@ -11673,7 +11774,7 @@ var SurveyQuestionRankingItem = /** @class */ (function (_super) {
     };
     SurveyQuestionRankingItem.prototype.renderElement = function () {
         var itemContent = _element_factory__WEBPACK_IMPORTED_MODULE_4__.ReactElementFactory.Instance.createElement(this.question.itemComponent, { item: this.item, cssClasses: this.cssClasses });
-        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { tabIndex: this.itemTabIndex, className: this.itemClass, onKeyDown: this.handleKeydown, onPointerDown: this.handlePointerDown, onPointerUp: this.handlePointerUp, "data-sv-drop-target-ranking-item": this.index },
+        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { id: this.question.getItemId(this.item), tabIndex: this.itemTabIndex, className: this.itemClass, onKeyDown: this.handleKeydown, onPointerDown: this.handlePointerDown, onPointerUp: this.handlePointerUp, "data-sv-drop-target-ranking-item": this.index },
             react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { tabIndex: -1, style: { outline: "none" } },
                 react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.cssClasses.itemGhostNode }),
                 react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.cssClasses.itemContent },
@@ -11810,6 +11911,96 @@ _reactquestion_factory__WEBPACK_IMPORTED_MODULE_2__.ReactQuestionFactory.Instanc
 });
 
 
+/***/ }),
+
+/***/ "../survey-react-ui/src/reactquestion_singleinputsummary.tsx":
+/*!*******************************************************************!*\
+  !*** ../survey-react-ui/src/reactquestion_singleinputsummary.tsx ***!
+  \*******************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   SurveyQuestionSigleInputSummary: () => (/* binding */ SurveyQuestionSigleInputSummary)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/preact/compat/dist/compat.module.js");
+/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactquestion_element */ "../survey-react-ui/src/reactquestion_element.tsx");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./element-factory */ "../survey-react-ui/src/element-factory.tsx");
+/* harmony import */ var _components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/svg-icon/svg-icon */ "../survey-react-ui/src/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 SurveyQuestionSigleInputSummary = /** @class */ (function (_super) {
+    __extends(SurveyQuestionSigleInputSummary, _super);
+    function SurveyQuestionSigleInputSummary(props) {
+        return _super.call(this, props) || this;
+    }
+    Object.defineProperty(SurveyQuestionSigleInputSummary.prototype, "css", {
+        get: function () {
+            return this.props.css;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyQuestionSigleInputSummary.prototype, "summary", {
+        get: function () {
+            return this.props.summary;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyQuestionSigleInputSummary.prototype.renderElement = function () {
+        if (!this.summary)
+            return null;
+        return this.summary.isEmpty() ? this.renderNoItems() : this.renderItems();
+    };
+    SurveyQuestionSigleInputSummary.prototype.renderItems = function () {
+        var _this = this;
+        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.css.summary }, this.summary.items.map(function (item, index) { return _this.renderItem(item, index); })));
+    };
+    SurveyQuestionSigleInputSummary.prototype.renderNoItems = function () {
+        var q = this.summary.question;
+        var placeholder = _element_factory__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.createElement("sv-placeholder-" + q.getTemplate(), { cssClasses: this.css, question: q });
+        return placeholder || react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", null, this.renderLocString(this.summary.noEntry));
+    };
+    SurveyQuestionSigleInputSummary.prototype.renderItem = function (item, index) {
+        var btnEdit = item.btnEdit ?
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement("button", { className: this.css.summaryRowActionEdit, onClick: function () { return item.btnEdit.action(); }, title: item.btnEdit.title },
+                react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { iconName: "icon-editsmall-16x16", iconSize: "auto" })) : null;
+        var btnDelete = item.showRemove && item.btnRemove ?
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement("button", { className: this.css.summaryRowActionDelete, onClick: function () { return item.btnRemove.action(); }, title: item.btnRemove.title },
+                react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { iconName: "icon-delete-16x16", iconSize: "auto" })) : null;
+        return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.css.summaryRow, key: index },
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.css.summaryRowContent }, this.renderLocString(item.locText)),
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.css.summaryRowActions },
+                btnEdit,
+                btnDelete));
+    };
+    return SurveyQuestionSigleInputSummary;
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__.ReactSurveyElement));
+
+_element_factory__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("sv-singleinput-summary", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_0__.createElement(SurveyQuestionSigleInputSummary, props);
+});
+
+
 /***/ }),
 
 /***/ "../survey-react-ui/src/reactquestion_tagbox.tsx":
@@ -11950,7 +12141,7 @@ var SurveyQuestionText = /** @class */ (function (_super) {
                 // disabled={this.isDisplayMode}
                 disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, className: inputClass, type: this.question.inputType, 
                 //ref={this.controlRef}
-                ref: function (input) { return (_this.setControl(input)); }, style: this.question.inputStyle, maxLength: this.question.getMaxLength(), min: this.question.renderedMin, max: this.question.renderedMax, step: this.question.renderedStep, size: this.question.inputSize, placeholder: placeholder, list: this.question.dataListId, autoComplete: this.question.autocomplete, onBlur: function (event) { _this.question.onBlur(event); }, onFocus: function (event) { _this.question.onFocus(event); }, onChange: this.question.onChange, onKeyUp: this.question.onKeyUp, onKeyDown: this.question.onKeyDown, onCompositionUpdate: function (event) { return _this.question.onCompositionUpdate(event.nativeEvent); }, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage }),
+                ref: function (input) { return (_this.setControl(input)); }, style: this.question.inputStyle, maxLength: this.question.getMaxLength(), min: this.question.renderedMin, max: this.question.renderedMax, step: this.question.renderedStep, size: this.question.inputSize, placeholder: placeholder, list: this.question.dataListId, autoComplete: this.question.autocomplete, onBlur: function (event) { _this.question.onBlur(event); }, onFocus: function (event) { _this.question.onFocus(event); }, onChange: this.question.onChange, onClick: this.question.readOnlyBlocker, onPointerDown: this.question.readOnlyBlocker, onKeyUp: this.question.onKeyUp, onKeyDown: this.question.onKeyDown, onCompositionUpdate: function (event) { return _this.question.onCompositionUpdate(event.nativeEvent); }, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage }),
             counter));
     };
     SurveyQuestionText.prototype.renderElement = function () {
@@ -12366,7 +12557,7 @@ var SurveyQuestionSignaturePad = /** @class */ (function (_super) {
     SurveyQuestionSignaturePad.prototype.renderBackgroundImage = function () {
         if (!this.question.backgroundImage)
             return null;
-        return react__WEBPACK_IMPORTED_MODULE_0__.createElement("img", { className: this.question.cssClasses.backgroundImage, src: this.question.backgroundImage, style: { width: this.question.renderedCanvasWidth } });
+        return react__WEBPACK_IMPORTED_MODULE_0__.createElement("img", { className: this.question.cssClasses.backgroundImage, src: this.question.backgroundImage, style: { width: this.question.renderedCanvasWidth }, role: "presentation" });
     };
     SurveyQuestionSignaturePad.prototype.renderLoadingIndicator = function () {
         return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: this.question.cssClasses.loadingIndicator },
@@ -13290,7 +13481,7 @@ var preact = react__WEBPACK_IMPORTED_MODULE_0__;
 
 
 
-(0,survey_core__WEBPACK_IMPORTED_MODULE_2__.checkLibraryVersion)("".concat("2.0.4"), "survey-js-ui");
+(0,survey_core__WEBPACK_IMPORTED_MODULE_2__.checkLibraryVersion)("".concat("2.0.6"), "survey-js-ui");
 
 })();