survey-react-ui 1.9.77 → 1.9.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-react-ui",
-  "version": "1.9.77",
+  "version": "1.9.78",
   "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",
@@ -21,7 +21,7 @@
   },
   "typings": "survey-react-ui.d.ts",
   "dependencies": {
-    "survey-core": "1.9.77",
+    "survey-core": "1.9.78",
     "react": "^16.5.0 || ^17.0.1 || ^18.1.0",
     "react-dom": "^16.5.0 || ^17.0.1 || ^18.1.0"
   }

package/survey-react-ui.d.ts

@@ -1144,6 +1144,7 @@ declare module "react/components/list/list" {
         getStateElement(): ListModel<import("survey-core").Action>;
         componentDidMount(): void;
         renderElement(): JSX.Element;
+        renderList(): JSX.Element | null;
         renderItems(): JSX.Element[] | null;
         searchElementContent(): JSX.Element | null;
         emptyContent(): JSX.Element;
@@ -1237,7 +1238,6 @@ declare module "react/image" {
         componentDidMount(): void;
         componentWillUnmount(): void;
         protected get question(): QuestionImageModel;
-        protected canRender(): boolean;
         protected renderElement(): JSX.Element;
     }
 }

package/survey-react-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.77
+ * surveyjs - Survey JavaScript library v1.9.78
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1183,7 +1183,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.77", "survey-react-ui");
+Object(survey_core__WEBPACK_IMPORTED_MODULE_2__["checkLibraryVersion"])("" + "1.9.78", "survey-react-ui");
 
 
 /***/ }),
@@ -2133,14 +2133,19 @@ var List = /** @class */ (function (_super) {
         }
     };
     List.prototype.renderElement = function () {
-        var items = this.renderItems();
-        var ulStyle = { display: this.model.isEmpty ? "none" : null };
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.model.cssClasses.root, ref: this.listContainerRef },
             this.searchElementContent(),
             this.emptyContent(),
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", { className: this.model.cssClasses.itemsContainer, style: ulStyle, role: "listbox", onMouseDown: function (e) {
-                    e.preventDefault();
-                }, onKeyDown: this.handleKeydown, onMouseMove: this.handleMouseMove }, items)));
+            this.renderList()));
+    };
+    List.prototype.renderList = function () {
+        if (!this.model.renderElements)
+            return null;
+        var items = this.renderItems();
+        var ulStyle = { display: this.model.isEmpty ? "none" : null };
+        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", { className: this.model.cssClasses.itemsContainer, style: ulStyle, role: "listbox", onMouseDown: function (e) {
+                e.preventDefault();
+            }, onKeyDown: this.handleKeydown, onMouseMove: this.handleMouseMove }, items));
     };
     List.prototype.renderItems = function () {
         var _this = this;
@@ -4499,6 +4504,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -4517,6 +4523,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var SurveyQuestionImage = /** @class */ (function (_super) {
     __extends(SurveyQuestionImage, _super);
     function SurveyQuestionImage(props) {
@@ -4540,25 +4547,30 @@ var SurveyQuestionImage = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    SurveyQuestionImage.prototype.canRender = function () {
-        return _super.prototype.canRender.call(this) && !!this.question.imageLink;
-    };
     SurveyQuestionImage.prototype.renderElement = function () {
+        var _this = this;
         var cssClasses = this.question.getImageCss();
         var style = { objectFit: this.question.imageFit };
         var control = null;
         if (this.question.renderedMode === "image") {
             control = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("img", { className: cssClasses, src: this.question.locImageLink.renderedHtml, alt: this.question.altText || this.question.title, width: this.question.renderedWidth, height: this.question.renderedHeight, 
                 //alt={item.text || item.value}
-                style: style }));
+                style: style, onLoad: function (event) { _this.question.onLoadHandler(); }, onError: function (event) { _this.question.onErrorHandler(); } }));
         }
         if (this.question.renderedMode === "video") {
-            control = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("video", { controls: true, className: cssClasses, src: this.question.locImageLink.renderedHtml, width: this.question.renderedWidth, height: this.question.renderedHeight, style: style }));
+            control = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("video", { controls: true, className: cssClasses, src: this.question.locImageLink.renderedHtml, width: this.question.renderedWidth, height: this.question.renderedHeight, style: style, onLoadedMetadata: function (event) { _this.question.onLoadHandler(); }, onError: function (event) { _this.question.onErrorHandler(); } }));
         }
         if (this.question.renderedMode === "youtube") {
             control = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("iframe", { className: cssClasses, src: this.question.locImageLink.renderedHtml, width: this.question.renderedWidth, height: this.question.renderedHeight, style: style }));
         }
-        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.root }, control);
+        var noImage = null;
+        if (!this.question.imageLink || this.question.contentNotLoaded) {
+            noImage = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.noImage },
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { iconName: this.question.cssClasses.noImageSvgIconId, size: 48 })));
+        }
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.root },
+            control,
+            noImage);
     };
     return SurveyQuestionImage;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["SurveyQuestionElementBase"]));
@@ -4741,20 +4753,19 @@ var SurveyQuestionImagePickerItem = /** @class */ (function (_super) {
         var style = { objectFit: this.question.imageFit };
         var control = null;
         if (item.locImageLink.renderedHtml && this.question.contentMode === "image") {
-            control = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("img", { className: cssClasses.image, src: item.locImageLink.renderedHtml, width: this.question.renderedImageWidth, height: this.question.renderedImageHeight, alt: item.locText.renderedHtml, style: style, onLoad: function (event) { _this.question["onContentLoaded"](item, event.nativeEvent); } }));
+            control = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("img", { className: cssClasses.image, src: item.locImageLink.renderedHtml, width: this.question.renderedImageWidth, height: this.question.renderedImageHeight, alt: item.locText.renderedHtml, style: style, onLoad: function (event) { _this.question["onContentLoaded"](item, event.nativeEvent); }, onError: function (event) { item.onErrorHandler(item, event.nativeEvent); } }));
         }
         if (item.locImageLink.renderedHtml && this.question.contentMode === "video") {
-            control = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("video", { controls: true, className: cssClasses.image, src: item.locImageLink.renderedHtml, width: this.question.renderedImageWidth, height: this.question.renderedImageHeight, style: style, onLoadedMetadata: function (event) { _this.question["onContentLoaded"](item, event.nativeEvent); } }));
+            control = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("video", { controls: true, className: cssClasses.image, src: item.locImageLink.renderedHtml, width: this.question.renderedImageWidth, height: this.question.renderedImageHeight, style: style, onLoadedMetadata: function (event) { _this.question["onContentLoaded"](item, event.nativeEvent); }, onError: function (event) { item.onErrorHandler(item, event.nativeEvent); } }));
         }
-        if (!item.locImageLink.renderedHtml) {
+        if (!item.locImageLink.renderedHtml || item.contentNotLoaded) {
             var style_1 = {
                 width: this.question.renderedImageWidth,
                 height: this.question.renderedImageHeight,
                 objectFit: this.question.imageFit
             };
             control = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.itemNoImage, style: style_1 }, cssClasses.itemNoImageSvgIcon ?
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: cssClasses.itemNoImageSvgIcon },
-                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("use", { xlinkHref: cssClasses.itemNoImageSvgIconId })) :
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_4__["SvgIcon"], { className: cssClasses.itemNoImageSvgIcon, iconName: this.question.cssClasses.itemNoImageSvgIconId, size: 48 }) :
                 null));
         }
         var renderedItem = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: itemClass },
@@ -9519,7 +9530,7 @@ var SurveyQuestionText = /** @class */ (function (_super) {
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null,
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { id: this.question.inputId, disabled: this.isDisplayMode, 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: this.question.onBlur, 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.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy }),
+                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: this.question.onBlur, onFocus: this.question.onFocus, 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.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy }),
             counter));
     };
     SurveyQuestionText.prototype.renderElement = function () {