survey-js-ui 1.12.1 → 1.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-js-ui",
-  "version": "1.12.1",
+  "version": "1.12.2",
   "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",
@@ -23,7 +23,7 @@
   "typings": "./typings/src/entries/js-ui.d.ts",
   "dependencies": {},
   "peerDependencies": {
-    "survey-core": "1.12.1",
+    "survey-core": "1.12.2",
     "@types/react-dom": "*",
     "@types/react": "*"
   }

package/survey-js-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.12.1
+ * surveyjs - Survey JavaScript library v1.12.2
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -102,9 +102,9 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ ({
 
 /***/ "./src/entries/js-ui.ts":
-/*!*******************************************!*\
-  !*** ./src/entries/js-ui.ts + 99 modules ***!
-  \*******************************************/
+/*!********************************************!*\
+  !*** ./src/entries/js-ui.ts + 100 modules ***!
+  \********************************************/
 /*! exports provided: useState, useId, useReducer, useEffect, useLayoutEffect, useInsertionEffect, useTransition, useDeferredValue, useSyncExternalStore, startTransition, useRef, useImperativeHandle, useMemo, useCallback, useContext, useDebugValue, version, Children, render, hydrate, unmountComponentAtNode, createPortal, createElement, createContext, createFactory, cloneElement, createRef, Fragment, isValidElement, isFragment, isMemo, findDOMNode, Component, PureComponent, memo, forwardRef, flushSync, unstable_batchedUpdates, StrictMode, Suspense, SuspenseList, lazy, renderSurvey, renderPopupSurvey, preact, Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent, 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, ListItemContent, ListItemGroup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, QuestionErrorComponent, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent, SurveyModel, SurveyWindowModel, settings, surveyLocalization, surveyStrings, Model */
 /*! ModuleConcatenation bailout: Cannot concat with external {"root":"Survey","commonjs2":"survey-core","commonjs":"survey-core","amd":"survey-core"} (<- Module is not an ECMAScript module) */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -1751,28 +1751,27 @@ var title_content_TitleContent = /** @class */ (function (_super) {
         };
         var spans = [];
         if (element.isRequireTextOnStart) {
-            spans.push(this.renderRequireText(element, cssClasses));
+            spans.push(this.renderRequireText(element));
             spans.push(getSpaceSpan("req-sp"));
         }
         var questionNumber = element.no;
         if (questionNumber) {
-            var panelNumber = !!cssClasses.panel ? cssClasses.panel.number : undefined;
-            spans.push(Rn.createElement("span", { "data-key": "q_num", key: "q_num", className: cssClasses.number || panelNumber, style: { position: "static" }, "aria-hidden": true }, questionNumber));
+            spans.push(Rn.createElement("span", { "data-key": "q_num", key: "q_num", className: element.cssTitleNumber, style: { position: "static" }, "aria-hidden": true }, questionNumber));
             spans.push(getSpaceSpan("num-sp"));
         }
         if (element.isRequireTextBeforeTitle) {
-            spans.push(this.renderRequireText(element, cssClasses));
+            spans.push(this.renderRequireText(element));
             spans.push(getSpaceSpan("req-sp"));
         }
         spans.push(reactquestion_element_SurveyElementBase.renderLocString(element.locTitle, null, "q_title"));
         if (element.isRequireTextAfterTitle) {
             spans.push(getSpaceSpan("req-sp"));
-            spans.push(this.renderRequireText(element, cssClasses));
+            spans.push(this.renderRequireText(element));
         }
         return spans;
     };
-    TitleContent.prototype.renderRequireText = function (element, cssClasses) {
-        return (Rn.createElement("span", { "data-key": "req-text", key: "req-text", className: cssClasses.requiredText || cssClasses.panel.requiredText, "aria-hidden": true }, element.requiredText));
+    TitleContent.prototype.renderRequireText = function (element) {
+        return (Rn.createElement("span", { "data-key": "req-text", key: "req-text", className: element.cssRequiredText, "aria-hidden": true }, element.requiredText));
     };
     return TitleContent;
 }(Rn.Component));
@@ -1948,6 +1947,56 @@ ReactElementFactory.Instance.registerElement("sv-character-counter", function (p
     return Rn.createElement(character_counter_CharacterCounterComponent, props);
 });
 
+// CONCATENATED MODULE: ./packages/survey-react-ui/src/components/text-area.tsx
+var text_area_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 text_area_TextAreaComponent = /** @class */ (function (_super) {
+    text_area_extends(TextAreaComponent, _super);
+    function TextAreaComponent(props) {
+        var _this = _super.call(this, props) || this;
+        _this.initialValue = _this.viewModel.getTextValue() || "";
+        return _this;
+    }
+    Object.defineProperty(TextAreaComponent.prototype, "viewModel", {
+        get: function () {
+            return this.props.viewModel;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TextAreaComponent.prototype.canRender = function () {
+        return !!this.viewModel.question;
+    };
+    TextAreaComponent.prototype.renderElement = function () {
+        var _this = this;
+        return (Rn.createElement("textarea", { id: this.viewModel.id, className: this.viewModel.className, ref: function (textarea) { return (_this.viewModel.setElement(textarea)); }, disabled: this.viewModel.isDisabledAttr, readOnly: this.viewModel.isReadOnlyAttr, rows: this.viewModel.rows, cols: this.viewModel.cols, placeholder: this.viewModel.placeholder, maxLength: this.viewModel.maxLength, defaultValue: this.initialValue, onChange: function (event) { _this.viewModel.onTextAreaInput(event); }, onFocus: function (event) { _this.viewModel.onTextAreaFocus(event); }, onBlur: function (event) { _this.viewModel.onTextAreaBlur(event); }, onKeyDown: function (event) { _this.viewModel.onTextAreaKeyDown(event); }, "aria-required": this.viewModel.ariaRequired, "aria-label": this.viewModel.ariaLabel, "aria-labelledby": this.viewModel.ariaLabelledBy, "aria-describedby": this.viewModel.ariaDescribedBy, "aria-invalid": this.viewModel.ariaInvalid, "aria-errormessage": this.viewModel.ariaErrormessage, style: { resize: this.viewModel.question.resizeStyle } }));
+    };
+    TextAreaComponent.prototype.componentWillUnmount = function () {
+        this.viewModel.dispose();
+    };
+    return TextAreaComponent;
+}(reactquestion_element_SurveyElementBase));
+
+ReactElementFactory.Instance.registerElement("sv-text-area", function (props) {
+    return Rn.createElement(text_area_TextAreaComponent, props);
+});
+
 // CONCATENATED MODULE: ./packages/survey-react-ui/src/reactquestion_comment.tsx
 var reactquestion_comment_extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -1974,31 +2023,21 @@ var reactquestion_comment_SurveyQuestionComment = /** @class */ (function (_supe
     function SurveyQuestionComment(props) {
         return _super.call(this, props) || this;
     }
+    SurveyQuestionComment.prototype.renderCharacterCounter = function () {
+        var counter = null;
+        if (!!this.question.getMaxLength()) {
+            counter = preact_module_(character_counter_CharacterCounterComponent, { counter: this.question.characterCounter, remainingCharacterCounter: this.question.cssClasses.remainingCharacterCounter });
+        }
+        return counter;
+    };
     SurveyQuestionComment.prototype.renderElement = function () {
-        var _this = this;
-        var onBlur = function (e) {
-            if (!_this.question.isInputTextUpdate) {
-                _this.updateValueOnEvent(e);
-            }
-            _this.question.onBlur(e);
-        };
-        var onInput = function (event) {
-            if (_this.question.isInputTextUpdate) {
-                _this.updateValueOnEvent(event);
-            }
-            else {
-                _this.question.updateElement();
-            }
-            var newValue = event.target.value;
-            _this.question.updateRemainingCharacterCounter(newValue);
-        };
-        var placeholder = this.question.renderedPlaceholder;
         if (this.question.isReadOnlyRenderDiv()) {
             return preact_module_("div", null, this.question.value);
         }
-        var counter = !!this.question.getMaxLength() ? (preact_module_(character_counter_CharacterCounterComponent, { counter: this.question.characterCounter, remainingCharacterCounter: this.question.cssClasses.remainingCharacterCounter })) : null;
+        var counter = this.renderCharacterCounter();
+        var textAreaModel = this.props.question.textAreaModel;
         return (preact_module_(k, null,
-            preact_module_("textarea", { id: this.question.inputId, className: this.question.className, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, ref: function (textarea) { return (_this.setControl(textarea)); }, maxLength: this.question.getMaxLength(), placeholder: placeholder, onFocus: function (event) { _this.question.onFocus(event); }, onBlur: onBlur, onInput: onInput, onKeyDown: function (event) { _this.question.onKeyDown(event); }, cols: this.question.cols, rows: this.question.rows, "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, style: { resize: this.question.resizeStyle } }),
+            preact_module_(text_area_TextAreaComponent, { viewModel: textAreaModel }),
             counter));
     };
     return SurveyQuestionComment;
@@ -2008,61 +2047,22 @@ var reactquestion_comment_SurveyQuestionCommentItem = /** @class */ (function (_
     reactquestion_comment_extends(SurveyQuestionCommentItem, _super);
     function SurveyQuestionCommentItem(props) {
         var _this = _super.call(this, props) || this;
-        _this.state = { comment: _this.getComment() || "" };
+        _this.textAreaModel = _this.getTextAreaModel();
         return _this;
     }
-    SurveyQuestionCommentItem.prototype.componentDidUpdate = function (prevProps, prevState) {
-        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
-        this.updateDomElement();
-    };
-    SurveyQuestionCommentItem.prototype.componentDidMount = function () {
-        _super.prototype.componentDidMount.call(this);
-        this.updateDomElement();
-    };
-    SurveyQuestionCommentItem.prototype.updateDomElement = function () {
-        if (!!this.control) {
-            var control = this.control;
-            var newValue = this.getComment() || "";
-            if (!external_root_Survey_commonjs2_survey_core_commonjs_survey_core_amd_survey_core_["Helpers"].isTwoValueEquals(newValue, control.value, false, true, false)) {
-                control.value = newValue;
-            }
-        }
-    };
-    SurveyQuestionCommentItem.prototype.setControl = function (element) {
-        if (!!element) {
-            this.control = element;
-        }
-    };
     SurveyQuestionCommentItem.prototype.canRender = function () {
         return !!this.props.question;
     };
-    SurveyQuestionCommentItem.prototype.onCommentChange = function (event) {
-        this.props.question.onCommentChange(event);
-    };
-    SurveyQuestionCommentItem.prototype.onCommentInput = function (event) {
-        this.props.question.onCommentInput(event);
-    };
-    SurveyQuestionCommentItem.prototype.getComment = function () {
-        return this.props.question.comment;
-    };
-    SurveyQuestionCommentItem.prototype.setComment = function (value) {
-        this.props.question.comment = value;
-    };
-    SurveyQuestionCommentItem.prototype.getId = function () {
-        return this.props.question.commentId;
-    };
-    SurveyQuestionCommentItem.prototype.getPlaceholder = function () {
-        return this.props.question.renderedCommentPlaceholder;
+    SurveyQuestionCommentItem.prototype.getTextAreaModel = function () {
+        return this.props.question.commentTextAreaModel;
     };
     SurveyQuestionCommentItem.prototype.renderElement = function () {
-        var _this = this;
         var question = this.props.question;
-        var className = this.props.otherCss || this.cssClasses.comment;
         if (question.isReadOnlyRenderDiv()) {
-            var comment = this.getComment() || "";
+            var comment = this.textAreaModel.getTextValue() || "";
             return preact_module_("div", null, comment);
         }
-        return (preact_module_("textarea", { id: this.getId(), className: className, ref: function (textarea) { return (_this.setControl(textarea)); }, disabled: this.isDisplayMode, maxLength: question.getOthersMaxLength(), rows: question.commentAreaRows, placeholder: this.getPlaceholder(), onBlur: function (e) { _this.onCommentChange(e); }, onInput: function (e) { return _this.onCommentInput(e); }, "aria-required": question.isRequired || question.a11y_input_ariaRequired, "aria-label": question.ariaLabel || question.a11y_input_ariaLabel, style: { resize: question.resizeStyle } }));
+        return (preact_module_(text_area_TextAreaComponent, { viewModel: this.textAreaModel }));
     };
     return SurveyQuestionCommentItem;
 }(ReactSurveyElement));
@@ -2072,23 +2072,8 @@ var SurveyQuestionOtherValueItem = /** @class */ (function (_super) {
     function SurveyQuestionOtherValueItem() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    SurveyQuestionOtherValueItem.prototype.onCommentChange = function (event) {
-        this.props.question.onOtherValueChange(event);
-    };
-    SurveyQuestionOtherValueItem.prototype.onCommentInput = function (event) {
-        this.props.question.onOtherValueInput(event);
-    };
-    SurveyQuestionOtherValueItem.prototype.getComment = function () {
-        return this.props.question.otherValue;
-    };
-    SurveyQuestionOtherValueItem.prototype.setComment = function (value) {
-        this.props.question.otherValue = value;
-    };
-    SurveyQuestionOtherValueItem.prototype.getId = function () {
-        return this.props.question.otherId;
-    };
-    SurveyQuestionOtherValueItem.prototype.getPlaceholder = function () {
-        return this.props.question.otherPlaceholder;
+    SurveyQuestionOtherValueItem.prototype.getTextAreaModel = function () {
+        return this.props.question.otherTextAreaModel;
     };
     return SurveyQuestionOtherValueItem;
 }(reactquestion_comment_SurveyQuestionCommentItem));
@@ -9397,7 +9382,7 @@ var preact = compat_module_namespaceObject;
 
 
 
-Object(external_root_Survey_commonjs2_survey_core_commonjs_survey_core_amd_survey_core_["checkLibraryVersion"])("" + "1.12.1", "survey-js-ui");
+Object(external_root_Survey_commonjs2_survey_core_commonjs_survey_core_amd_survey_core_["checkLibraryVersion"])("" + "1.12.2", "survey-js-ui");
 
 
 /***/ }),