survey-react-ui 1.9.123 → 1.9.124

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-react-ui",
-  "version": "1.9.123",
+  "version": "1.9.124",
   "description": "survey.js is a JavaScript Survey Library. It is a modern way to add a survey to your website. It uses JSON for survey metadata and results.",
   "keywords": [
     "Survey",

package/survey-react-ui.js

@@ -1,6 +1,6 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.123
- * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
+ * surveyjs - Survey JavaScript library v1.9.124
+ * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -484,6 +484,13 @@ var Base = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Base.prototype, "isDesignModeV2", {
+        get: function () {
+            return _settings__WEBPACK_IMPORTED_MODULE_3__["settings"].supportCreatorV2 && this.isDesignMode;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Base.prototype, "inSurvey", {
         /**
          * Returns `true` if the object is included in a survey.
@@ -659,6 +666,7 @@ var Base = /** @class */ (function () {
     Base.prototype.resetPropertyValue = function (name) {
         var locStr = this.localizableStrings ? this.localizableStrings[name] : undefined;
         if (locStr) {
+            this.setLocalizableStringText(name, undefined);
             locStr.clear();
         }
         else {
@@ -1993,7 +2001,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!***************************************!*\
   !*** ./src/entries/react-ui-model.ts ***!
   \***************************************/
-/*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent */
+/*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2091,6 +2099,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixRow", function() { return _react_reactquestion_matrix__WEBPACK_IMPORTED_MODULE_24__["SurveyQuestionMatrixRow"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixCell", function() { return _react_reactquestion_matrix__WEBPACK_IMPORTED_MODULE_24__["SurveyQuestionMatrixCell"]; });
+
 /* harmony import */ var _react_reactquestion_html__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ../react/reactquestion_html */ "./src/react/reactquestion_html.tsx");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionHtml", function() { return _react_reactquestion_html__WEBPACK_IMPORTED_MODULE_25__["SurveyQuestionHtml"]; });
 
@@ -2365,7 +2375,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!*********************************!*\
   !*** ./src/entries/react-ui.ts ***!
   \*********************************/
-/*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent, SurveyModel, SurveyWindowModel, settings, surveyLocalization, surveyStrings, Model, ResponsivityManager, VerticalResponsivityManager, unwrap */
+/*! exports provided: Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent, SurveyModel, SurveyWindowModel, settings, surveyLocalization, surveyStrings, Model, ResponsivityManager, VerticalResponsivityManager, unwrap */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2439,6 +2449,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixRow", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["SurveyQuestionMatrixRow"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixCell", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["SurveyQuestionMatrixCell"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionHtml", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["SurveyQuestionHtml"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionFile", function() { return _react_ui_model__WEBPACK_IMPORTED_MODULE_0__["SurveyQuestionFile"]; });
@@ -2594,7 +2606,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.123", "survey-react-ui");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.124", "survey-react-ui");
 
 
 /***/ }),
@@ -17154,18 +17166,20 @@ _reactquestion_factory__WEBPACK_IMPORTED_MODULE_2__["ReactQuestionFactory"].Inst
 /*!********************************************!*\
   !*** ./src/react/reactquestion_matrix.tsx ***!
   \********************************************/
-/*! exports provided: SurveyQuestionMatrix, SurveyQuestionMatrixRow */
+/*! exports provided: SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrix", function() { return SurveyQuestionMatrix; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixRow", function() { return SurveyQuestionMatrixRow; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SurveyQuestionMatrixCell", function() { return SurveyQuestionMatrixCell; });
 /* 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 _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
 /* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactquestion_factory */ "./src/react/reactquestion_factory.tsx");
 /* harmony import */ var _reactsurveymodel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactsurveymodel */ "./src/react/reactsurveymodel.tsx");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./element-factory */ "./src/react/element-factory.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -17185,6 +17199,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var SurveyQuestionMatrix = /** @class */ (function (_super) {
     __extends(SurveyQuestionMatrix, _super);
     function SurveyQuestionMatrix(props) {
@@ -17254,10 +17269,7 @@ var SurveyQuestionMatrix = /** @class */ (function (_super) {
 var SurveyQuestionMatrixRow = /** @class */ (function (_super) {
     __extends(SurveyQuestionMatrixRow, _super);
     function SurveyQuestionMatrixRow(props) {
-        var _this = _super.call(this, props) || this;
-        _this.handleOnChange = _this.handleOnChange.bind(_this);
-        _this.handleOnMouseDown = _this.handleOnMouseDown.bind(_this);
-        return _this;
+        return _super.call(this, props) || this;
     }
     Object.defineProperty(SurveyQuestionMatrixRow.prototype, "question", {
         get: function () {
@@ -17273,13 +17285,6 @@ var SurveyQuestionMatrixRow = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    SurveyQuestionMatrixRow.prototype.handleOnChange = function (event) {
-        this.row.value = event.target.value;
-        this.setState({ value: this.row.value });
-    };
-    SurveyQuestionMatrixRow.prototype.handleOnMouseDown = function (event) {
-        this.question.onMouseDown();
-    };
     SurveyQuestionMatrixRow.prototype.wrapCell = function (cell, element, reason) {
         if (!reason) {
             return element;
@@ -17314,33 +17319,35 @@ var SurveyQuestionMatrixRow = /** @class */ (function (_super) {
         var _this = this;
         var tds = [];
         var row = this.row;
-        for (var i = 0; i < this.question.visibleColumns.length; i++) {
+        var cellComponent = this.question.cellComponent;
+        var _loop_1 = function () {
             var td = null;
-            var column = this.question.visibleColumns[i];
+            var column = this_1.question.visibleColumns[i];
             var key = "value" + i;
-            var isChecked = row.value == column.value;
-            var itemClass = this.question.getItemClass(row, column);
-            var inputId = this.question.inputId + "_" + row.name + "_" + i;
-            if (this.question.hasCellText) {
-                var getHandler = !this.question.isInputReadOnly
+            var itemClass = this_1.question.getItemClass(row, column);
+            if (this_1.question.hasCellText) {
+                var getHandler = !this_1.question.isInputReadOnly
                     ? function (column) { return function () { return _this.cellClick(row, column); }; }
                     : null;
-                td = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("td", { key: key, className: itemClass, onClick: getHandler ? getHandler(column) : function () { } }, this.renderLocString(this.question.getCellDisplayLocText(row.name, column))));
+                td = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("td", { key: key, className: itemClass, onClick: getHandler ? getHandler(column) : function () { } }, this_1.renderLocString(this_1.question.getCellDisplayLocText(row.name, column))));
             }
             else {
-                var mobileSpan = this.question.isMobile ?
-                    (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.cssClasses.cellResponsiveTitle }, this.renderLocString(column.locText)))
-                    : undefined;
-                td = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("td", { key: key, "data-responsive-title": column.locText.renderedHtml, className: this.question.cssClasses.cell },
-                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { onMouseDown: this.handleOnMouseDown, className: itemClass },
-                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { id: inputId, type: "radio", className: this.cssClasses.itemValue, name: row.fullName, value: column.value, disabled: this.isDisplayMode, checked: isChecked, onChange: this.handleOnChange, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.getCellAriaLabel(row.locText.renderedHtml, column.locText.renderedHtml), "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-describedby": this.question.a11y_input_ariaDescribedBy }),
-                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.cssClasses.materialDecorator }, this.question.itemSvgIcon ?
-                            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: this.cssClasses.itemDecorator },
-                                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("use", { xlinkHref: this.question.itemSvgIcon })) :
-                            null),
-                        mobileSpan)));
+                var renderedCell = _element_factory__WEBPACK_IMPORTED_MODULE_4__["ReactElementFactory"].Instance.createElement(cellComponent, {
+                    question: this_1.question,
+                    row: this_1.row,
+                    column: column,
+                    columnIndex: i,
+                    cssClasses: this_1.cssClasses,
+                    isDisplayMode: this_1.isDisplayMode,
+                    cellChanged: function () { _this.cellClick(_this.row, column); }
+                });
+                td = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("td", { key: key, "data-responsive-title": column.locText.renderedHtml, className: this_1.question.cssClasses.cell }, renderedCell));
             }
             tds.push(td);
+        };
+        var this_1 = this;
+        for (var i = 0; i < this.question.visibleColumns.length; i++) {
+            _loop_1();
         }
         return tds;
     };
@@ -17351,6 +17358,77 @@ var SurveyQuestionMatrixRow = /** @class */ (function (_super) {
     return SurveyQuestionMatrixRow;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElement"]));
 
+var SurveyQuestionMatrixCell = /** @class */ (function (_super) {
+    __extends(SurveyQuestionMatrixCell, _super);
+    function SurveyQuestionMatrixCell(props) {
+        var _this = _super.call(this, props) || this;
+        _this.handleOnMouseDown = _this.handleOnMouseDown.bind(_this);
+        _this.handleOnChange = _this.handleOnChange.bind(_this);
+        return _this;
+    }
+    SurveyQuestionMatrixCell.prototype.handleOnChange = function (event) {
+        if (!!this.props.cellChanged) {
+            this.props.cellChanged();
+        }
+    };
+    SurveyQuestionMatrixCell.prototype.handleOnMouseDown = function (event) {
+        this.question.onMouseDown();
+    };
+    Object.defineProperty(SurveyQuestionMatrixCell.prototype, "question", {
+        get: function () {
+            return this.props.question;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyQuestionMatrixCell.prototype, "row", {
+        get: function () {
+            return this.props.row;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyQuestionMatrixCell.prototype, "column", {
+        get: function () {
+            return this.props.column;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyQuestionMatrixCell.prototype, "columnIndex", {
+        get: function () {
+            return this.props.columnIndex;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyQuestionMatrixCell.prototype.canRender = function () {
+        return !!this.question && !!this.row;
+    };
+    SurveyQuestionMatrixCell.prototype.renderElement = function () {
+        var isChecked = this.row.value == this.column.value;
+        var inputId = this.question.inputId + "_" + this.row.name + "_" + this.columnIndex;
+        var itemClass = this.question.getItemClass(this.row, this.column);
+        var mobileSpan = this.question.isMobile ?
+            (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.cssClasses.cellResponsiveTitle }, this.renderLocString(this.column.locText)))
+            : undefined;
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { onMouseDown: this.handleOnMouseDown, className: itemClass },
+            this.renderInput(inputId, isChecked),
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.cssClasses.materialDecorator }, this.question.itemSvgIcon ?
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: this.cssClasses.itemDecorator },
+                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("use", { xlinkHref: this.question.itemSvgIcon })) :
+                null),
+            mobileSpan));
+    };
+    SurveyQuestionMatrixCell.prototype.renderInput = function (inputId, isChecked) {
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { id: inputId, type: "radio", className: this.cssClasses.itemValue, name: this.row.fullName, value: this.column.value, disabled: this.isDisplayMode, checked: isChecked, onChange: this.handleOnChange, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.getCellAriaLabel(this.row.locText.renderedHtml, this.column.locText.renderedHtml), "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-describedby": this.question.a11y_input_ariaDescribedBy }));
+    };
+    return SurveyQuestionMatrixCell;
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElement"]));
+
+_element_factory__WEBPACK_IMPORTED_MODULE_4__["ReactElementFactory"].Instance.registerElement("survey-matrix-cell", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionMatrixCell, props);
+});
 _reactquestion_factory__WEBPACK_IMPORTED_MODULE_2__["ReactQuestionFactory"].Instance.registerQuestion("matrix", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionMatrix, props);
 });