survey-react 1.9.78 → 1.9.79

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.78
+ * surveyjs - Survey JavaScript library v1.9.79
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -4965,6 +4965,8 @@ var modernCss = {
         filterStringInput: "sv-dropdown__filter-string-input",
         controlValue: "sv-dropdown__value",
         controlInputFieldComponent: "sv_dropdown_control__input-field-component",
+        hintPrefix: "sv-dropdown__hint-prefix",
+        hintSuffix: "sv-dropdown__hint-suffix"
     },
     tagbox: {
         root: "",
@@ -5115,6 +5117,7 @@ var modernCss = {
         error: "sv-save-data_error",
         success: "sv-save-data_success",
         button: "sv-save-data_button",
+        shown: "sv-save-data_root--shown"
     },
     window: {
         root: "sv_window",
@@ -5315,7 +5318,9 @@ var defaultStandardCss = {
         cleanButtonSvg: "sv_q_dropdown_clean-button-svg",
         cleanButtonIconId: "icon-clear_16x16",
         controlValue: "sv_q_dropdown__value",
-        filterStringInput: "sv_q_dropdown__filter-string-input"
+        filterStringInput: "sv_q_dropdown__filter-string-input",
+        hintPrefix: "sv_q_dropdown__hint-prefix",
+        hintSuffix: "sv_q_dropdown__hint-suffix"
     },
     html: { root: "" },
     image: {
@@ -5484,6 +5489,7 @@ var defaultStandardCss = {
         error: "sv-save-data_error",
         success: "sv-save-data_success",
         button: "sv-save-data_button",
+        shown: "sv-save-data_root--shown"
     },
     window: {
         root: "sv_window",
@@ -5594,6 +5600,7 @@ var defaultV2Css = {
         number: "sd-element__num",
         title: "sd-title sd-element__title sd-panel__title",
         titleExpandable: "sd-element__title--expandable",
+        titleNumInline: "sd-element__title--num-inline",
         titleExpanded: "sd-element__title--expanded",
         titleCollapsed: "sd-element__title--collapsed",
         titleDisabled: "sd-element__title--disabled",
@@ -5682,6 +5689,7 @@ var defaultV2Css = {
         headerBottom: "sd-question__header--location--bottom",
         content: "sd-question__content",
         contentLeft: "sd-question__content--left",
+        titleNumInline: "sd-element__title--num-inline",
         titleLeftRoot: "sd-question--left",
         titleOnAnswer: "sd-question__title--answer",
         titleOnError: "sd-question__title--error",
@@ -5858,7 +5866,9 @@ var defaultV2Css = {
         controlEmpty: "sd-dropdown--empty",
         controlLabel: "sd-item__control-label",
         filterStringInput: "sd-dropdown__filter-string-input",
-        materialDecorator: "sd-item__decorator sd-radio__decorator"
+        materialDecorator: "sd-item__decorator sd-radio__decorator",
+        hintPrefix: "sd-dropdown__hint-prefix",
+        hintSuffix: "sd-dropdown__hint-suffix"
     },
     imagepicker: {
         mainRoot: "sd-element sd-question sd-row__question",
@@ -6061,6 +6071,7 @@ var defaultV2Css = {
         error: "sv-save-data_error",
         success: "sv-save-data_success",
         button: "sv-save-data_button",
+        shown: "sv-save-data_root--shown"
     },
     window: {
         root: "sv_window",
@@ -6286,10 +6297,6 @@ var DragDropChoices = /** @class */ (function (_super) {
         draggedElementShortcut.appendChild(imageNode);
         return draggedElementShortcut;
     };
-    DragDropChoices.prototype.findDropTargetNodeByDragOverNode = function (dragOverNode) {
-        var result = dragOverNode.closest(this.dropTargetDataAttributeName);
-        return result;
-    };
     DragDropChoices.prototype.getDropTargetByDataAttributeValue = function (dataAttributeValue) {
         var dragOverChoice;
         dragOverChoice = this.parentElement.choices.filter(function (choice) { return "" + choice.value == dataAttributeValue; })[0];
@@ -6787,9 +6794,8 @@ var DragDropCore = /** @class */ (function (_super) {
         return this.findDropTargetNodeByDragOverNode(dragOverNode);
     };
     DragDropCore.prototype.findDropTargetNodeByDragOverNode = function (dragOverNode) {
-        var result = dragOverNode.querySelector(this.dropTargetDataAttributeName) ||
-            dragOverNode.closest(this.dropTargetDataAttributeName);
-        return result;
+        var dropTargetNode = dragOverNode.closest(this.dropTargetDataAttributeName);
+        return dropTargetNode;
     };
     DragDropCore.prototype.doClear = function () { };
     DragDropCore.PreventScrolling = false;
@@ -6903,10 +6909,6 @@ var DragDropMatrixRows = /** @class */ (function (_super) {
     DragDropMatrixRows.prototype.isDropTargetValid = function (dropTarget) {
         return true;
     };
-    DragDropMatrixRows.prototype.findDropTargetNodeByDragOverNode = function (dragOverNode) {
-        var result = dragOverNode.closest(this.dropTargetDataAttributeName);
-        return result;
-    };
     DragDropMatrixRows.prototype.calculateIsBottom = function (clientY) {
         var rendreredRows = this.parentElement.renderedTable.rows;
         var rows = rendreredRows.map(function (rendredRow) { return rendredRow.row; });
@@ -7062,7 +7064,7 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
     };
     DragDropRankingChoices.prototype.findDropTargetNodeByDragOverNode = function (dragOverNode) {
         this.isDragOverRootNode = this.getIsDragOverRootNode(dragOverNode);
-        return dragOverNode.closest(this.dropTargetDataAttributeName);
+        return _super.prototype.findDropTargetNodeByDragOverNode.call(this, dragOverNode);
     };
     DragDropRankingChoices.prototype.getIsDragOverRootNode = function (dragOverNode) {
         // dragOverNode might be <path></path> for example and the className prop is obj
@@ -7553,9 +7555,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _jsonobject__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./jsonobject */ "./src/jsonobject.ts");
 /* harmony import */ var _list__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./list */ "./src/list.ts");
 /* harmony import */ var _popup__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./popup */ "./src/popup.ts");
-/* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
-/* harmony import */ var _utils_devices__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils/devices */ "./src/utils/devices.ts");
-/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utils/utils */ "./src/utils/utils.ts");
+/* harmony import */ var _question_dropdown__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./question_dropdown */ "./src/question_dropdown.ts");
+/* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
+/* harmony import */ var _utils_devices__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utils/devices */ "./src/utils/devices.ts");
+/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./utils/utils */ "./src/utils/utils.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -7584,6 +7587,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 var DropdownListModel = /** @class */ (function (_super) {
     __extends(DropdownListModel, _super);
     function DropdownListModel(question, onSelectionChanged) {
@@ -7592,11 +7596,20 @@ var DropdownListModel = /** @class */ (function (_super) {
         _this.onSelectionChanged = onSelectionChanged;
         _this.minPageSize = 25;
         _this.loadingItemHeight = 40;
+        _this._markdownMode = false;
         _this.selectedItemSelector = ".sv-list__item--selected";
         _this.itemSelector = ".sv-list__item";
         _this.itemsSettings = { skip: 0, take: 0, totalCount: 0, items: [] };
         _this.isRunningLoadQuestionChoices = false;
         _this.popupCssClasses = "sv-single-select-list";
+        question.onPropertyChanged.add(function (sender, options) {
+            if (options.name == "value") {
+                _this.showInputFieldComponent = _this.question.showInputFieldComponent;
+                _this.showSelectedItemLocText = _this.question.showSelectedItemLocText;
+            }
+        });
+        _this.showInputFieldComponent = _this.question.showInputFieldComponent;
+        _this.showSelectedItemLocText = _this.question.showSelectedItemLocText;
         _this.listModel = _this.createListModel();
         _this.updateAfterListModelCreated(_this.listModel);
         _this.setSearchEnabled(_this.question.searchEnabled);
@@ -7612,7 +7625,7 @@ var DropdownListModel = /** @class */ (function (_super) {
         configurable: true
     });
     DropdownListModel.prototype.getFocusFirstInputSelector = function () {
-        if (_utils_devices__WEBPACK_IMPORTED_MODULE_5__["IsTouch"]) {
+        if (_utils_devices__WEBPACK_IMPORTED_MODULE_6__["IsTouch"]) {
             return this.isValueEmpty(this.question.value) ? this.itemSelector : this.selectedItemSelector;
         }
         else {
@@ -7661,10 +7674,10 @@ var DropdownListModel = /** @class */ (function (_super) {
     DropdownListModel.prototype.createPopup = function () {
         var _this = this;
         this._popupModel = new _popup__WEBPACK_IMPORTED_MODULE_3__["PopupModel"]("sv-list", { model: this.listModel }, "bottom", "center", false);
-        this._popupModel.displayMode = _utils_devices__WEBPACK_IMPORTED_MODULE_5__["IsTouch"] ? "overlay" : "popup";
+        this._popupModel.displayMode = _utils_devices__WEBPACK_IMPORTED_MODULE_6__["IsTouch"] ? "overlay" : "popup";
         this._popupModel.positionMode = "fixed";
-        this._popupModel.isFocusedContent = _utils_devices__WEBPACK_IMPORTED_MODULE_5__["IsTouch"];
-        this._popupModel.setWidthByTarget = !_utils_devices__WEBPACK_IMPORTED_MODULE_5__["IsTouch"];
+        this._popupModel.isFocusedContent = _utils_devices__WEBPACK_IMPORTED_MODULE_6__["IsTouch"];
+        this._popupModel.setWidthByTarget = !_utils_devices__WEBPACK_IMPORTED_MODULE_6__["IsTouch"];
         this.updatePopupFocusFirstInputSelector();
         this.listModel.registerPropertyChangedHandlers(["showFilter"], function () {
             _this.updatePopupFocusFirstInputSelector();
@@ -7691,7 +7704,13 @@ var DropdownListModel = /** @class */ (function (_super) {
         });
     };
     DropdownListModel.prototype.setFilterStringToListModel = function (newValue) {
+        var _this = this;
         this.listModel.filterString = newValue;
+        this.listModel.resetFocusedItem();
+        if (this.question.selectedItem && this.question.selectedItem.text.indexOf(newValue) >= 0) {
+            this.listModel.focusedItem = this.getAvailableItems().filter(function (item) { return item.id == _this.question.selectedItem.value; })[0];
+            return;
+        }
         if (!this.listModel.focusedItem || !this.listModel.isItemVisible(this.listModel.focusedItem)) {
             this.listModel.focusFirstVisibleItem();
         }
@@ -7715,7 +7734,9 @@ var DropdownListModel = /** @class */ (function (_super) {
         var _onSelectionChanged = this.onSelectionChanged;
         if (!_onSelectionChanged) {
             _onSelectionChanged = function (item) {
-                _this.question.value = item.value;
+                _this.question.value = item.id;
+                if (_this.question.searchEnabled)
+                    _this.applyInputString(item);
                 _this._popupModel.toggleVisibility();
             };
         }
@@ -7738,7 +7759,7 @@ var DropdownListModel = /** @class */ (function (_super) {
         model.isAllDataLoaded = !this.question.choicesLazyLoadEnabled;
     };
     DropdownListModel.prototype.updateCssClasses = function (popupCssClass, listCssClasses) {
-        this.popupModel.cssClass = new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_4__["CssClassBuilder"]().append(popupCssClass).append(this.popupCssClasses).toString();
+        this.popupModel.cssClass = new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_5__["CssClassBuilder"]().append(popupCssClass).append(this.popupCssClasses).toString();
         this.listModel.cssClasses = listCssClasses;
     };
     DropdownListModel.prototype.resetFilterString = function () {
@@ -7751,7 +7772,6 @@ var DropdownListModel = /** @class */ (function (_super) {
         if (!!this.filterString && !this.popupModel.isVisible) {
             this.popupModel.isVisible = true;
         }
-        this.setInputHasValue(!!this.filterString);
         var updateAfterFilterStringChanged = function () {
             _this.setFilterStringToListModel(_this.filterString);
             _this.popupRecalculatePosition(true);
@@ -7764,9 +7784,91 @@ var DropdownListModel = /** @class */ (function (_super) {
             updateAfterFilterStringChanged();
         }
     };
-    DropdownListModel.prototype.setInputHasValue = function (newValue) {
-        this.question.inputHasValue = newValue;
+    DropdownListModel.prototype.applyInputString = function (item) {
+        var hasHtml = item === null || item === void 0 ? void 0 : item.locText.hasHtml;
+        if (hasHtml || this.question.inputFieldComponentName) {
+            this._markdownMode = true;
+            this.inputString = "";
+        }
+        else {
+            this.inputString = item === null || item === void 0 ? void 0 : item.title;
+        }
+    };
+    DropdownListModel.prototype.applyHintString = function (item) {
+        var hasHtml = item === null || item === void 0 ? void 0 : item.locText.hasHtml;
+        if (hasHtml || this.question.inputFieldComponentName) {
+            this._markdownMode = true;
+            this.hintString = "";
+        }
+        else {
+            this.hintString = item === null || item === void 0 ? void 0 : item.title;
+        }
     };
+    Object.defineProperty(DropdownListModel.prototype, "inputStringRendered", {
+        get: function () {
+            return this.getPropertyValue("inputString") || "";
+        },
+        set: function (val) {
+            this.setPropertyValue("inputString", val);
+            this.filterString = val;
+            this.applyHintString(this.listModel.focusedItem);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DropdownListModel.prototype, "placeholderRendered", {
+        get: function () {
+            return this.hintString ? "" : this.question.readOnlyText;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DropdownListModel.prototype, "hintStringLC", {
+        get: function () {
+            var _a;
+            return ((_a = this.hintString) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || "";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DropdownListModel.prototype, "inputStringLC", {
+        get: function () {
+            var _a;
+            return ((_a = this.inputString) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || "";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DropdownListModel.prototype, "showHintPrefix", {
+        get: function () {
+            return !!this.inputString && this.hintStringLC.indexOf(this.inputStringLC) > 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DropdownListModel.prototype, "hintStringPrefix", {
+        get: function () {
+            if (!this.inputString)
+                return null;
+            return this.hintString.substring(0, this.hintStringLC.indexOf(this.inputStringLC));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DropdownListModel.prototype, "showHintString", {
+        get: function () {
+            return this.hintStringLC != this.inputStringLC && this.hintStringLC.indexOf(this.inputStringLC) >= 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DropdownListModel.prototype, "hintStringSuffix", {
+        get: function () {
+            return this.hintString.substring(this.hintStringLC.indexOf(this.inputStringLC) + this.inputStringLC.length);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DropdownListModel.prototype, "popupModel", {
         get: function () {
             return this._popupModel;
@@ -7790,14 +7892,14 @@ var DropdownListModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(DropdownListModel.prototype, "inputMode", {
         get: function () {
-            return _utils_devices__WEBPACK_IMPORTED_MODULE_5__["IsTouch"] ? "none" : "text";
+            return _utils_devices__WEBPACK_IMPORTED_MODULE_6__["IsTouch"] ? "none" : "text";
         },
         enumerable: false,
         configurable: true
     });
     DropdownListModel.prototype.setSearchEnabled = function (newValue) {
-        this.listModel.searchEnabled = _utils_devices__WEBPACK_IMPORTED_MODULE_5__["IsTouch"];
-        this.listModel.showSearchClearButton = _utils_devices__WEBPACK_IMPORTED_MODULE_5__["IsTouch"];
+        this.listModel.searchEnabled = _utils_devices__WEBPACK_IMPORTED_MODULE_6__["IsTouch"];
+        this.listModel.showSearchClearButton = _utils_devices__WEBPACK_IMPORTED_MODULE_6__["IsTouch"];
         this.searchEnabled = newValue;
     };
     DropdownListModel.prototype.updateItems = function () {
@@ -7805,7 +7907,6 @@ var DropdownListModel = /** @class */ (function (_super) {
     };
     DropdownListModel.prototype.onClick = function (event) {
         this._popupModel.toggleVisibility();
-        this.listModel.focusNextVisibleItem();
         if (this.searchEnabled && !!event && !!event.target) {
             var input = event.target.querySelector("input");
             if (!!input) {
@@ -7815,18 +7916,37 @@ var DropdownListModel = /** @class */ (function (_super) {
     };
     DropdownListModel.prototype.onClear = function (event) {
         this.question.clearValue();
+        this.inputString = null;
+        this.hintString = "";
         this.resetFilterString();
-        event.preventDefault();
-        event.stopPropagation();
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
     };
     DropdownListModel.prototype.getSelectedAction = function () {
         return this.question.selectedItem || null;
     };
+    DropdownListModel.prototype.changeSelectionWithKeyboard = function (reverse) {
+        if (reverse) {
+            this.listModel.focusPrevVisibleItem();
+        }
+        else {
+            this.listModel.focusNextVisibleItem();
+        }
+        this.scrollToFocusedItem();
+        if (this.question.value && this.question.searchEnabled && this.question instanceof _question_dropdown__WEBPACK_IMPORTED_MODULE_4__["QuestionDropdownModel"]) {
+            this.applyInputString(this.listModel.focusedItem);
+            this.hintString = "";
+        }
+        else {
+            this.applyHintString(this.listModel.focusedItem);
+        }
+    };
     DropdownListModel.prototype.keyHandler = function (event) {
         var char = event.which || event.keyCode;
         if (this.popupModel.isVisible && event.keyCode === 38) {
-            this.listModel.focusPrevVisibleItem();
-            this.scrollToFocusedItem();
+            this.changeSelectionWithKeyboard(true);
             event.preventDefault();
             event.stopPropagation();
         }
@@ -7834,28 +7954,48 @@ var DropdownListModel = /** @class */ (function (_super) {
             if (!this.popupModel.isVisible) {
                 this.popupModel.toggleVisibility();
             }
-            this.listModel.focusNextVisibleItem();
-            this.scrollToFocusedItem();
+            this.changeSelectionWithKeyboard(false);
             event.preventDefault();
             event.stopPropagation();
         }
-        else if (this.popupModel.isVisible && (event.keyCode === 13 || event.keyCode === 32)) {
-            this.listModel.selectFocusedItem();
+        else if (!this.popupModel.isVisible && (event.keyCode === 13 || event.keyCode === 32)) {
+            this.popupModel.toggleVisibility();
+            this.changeSelectionWithKeyboard(false);
             event.preventDefault();
             event.stopPropagation();
         }
-        else if (char === 46) {
-            this.onClear(event);
+        else if (this.popupModel.isVisible && (event.keyCode === 13 || event.keyCode === 32 && !this.question.searchEnabled)) {
+            if (event.keyCode === 13 && this.question.searchEnabled && !this.inputString && this.question instanceof _question_dropdown__WEBPACK_IMPORTED_MODULE_4__["QuestionDropdownModel"] && !this._markdownMode && this.question.value) {
+                this._popupModel.isVisible = false;
+                this.onClear(event);
+            }
+            else {
+                this.listModel.selectFocusedItem();
+                this.onFocus(event);
+            }
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        else if (char === 46 || char === 8) {
+            if (!this.searchEnabled) {
+                this.onClear(event);
+            }
         }
         else if (event.keyCode === 27) {
-            this.popupModel.isVisible = false;
+            this._popupModel.isVisible = false;
+            this.hintString = "";
+            if (this.question.searchEnabled && this.question instanceof _question_dropdown__WEBPACK_IMPORTED_MODULE_4__["QuestionDropdownModel"])
+                this.applyInputString(this.question.selectedItem);
         }
         else {
-            if (event.keyCode === 38 || event.keyCode === 40 || event.keyCode === 32) {
+            if (event.keyCode === 38 || event.keyCode === 40 || event.keyCode === 32 && !this.question.searchEnabled) {
                 event.preventDefault();
                 event.stopPropagation();
             }
-            Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["doKey2ClickUp"])(event, { processEsc: false, disableTabStop: this.question.isInputReadOnly });
+            if (event.keyCode === 32 && this.question.searchEnabled) {
+                return;
+            }
+            Object(_utils_utils__WEBPACK_IMPORTED_MODULE_7__["doKey2ClickUp"])(event, { processEsc: false, disableTabStop: this.question.isInputReadOnly });
         }
     };
     DropdownListModel.prototype.onScroll = function (event) {
@@ -7865,7 +8005,7 @@ var DropdownListModel = /** @class */ (function (_super) {
         }
     };
     DropdownListModel.prototype.onBlur = function (event) {
-        if (this.popupModel.isVisible && _utils_devices__WEBPACK_IMPORTED_MODULE_5__["IsTouch"]) {
+        if (this.popupModel.isVisible && _utils_devices__WEBPACK_IMPORTED_MODULE_6__["IsTouch"]) {
             this._popupModel.isVisible = true;
             return;
         }
@@ -7873,9 +8013,20 @@ var DropdownListModel = /** @class */ (function (_super) {
             this.listModel.selectFocusedItem();
         }
         this.resetFilterString();
+        this.inputString = null;
+        this.hintString = "";
+        Object(_utils_utils__WEBPACK_IMPORTED_MODULE_7__["doKey2ClickBlur"])(event);
         this._popupModel.isVisible = false;
-        this.setInputHasValue(false);
-        Object(_utils_utils__WEBPACK_IMPORTED_MODULE_6__["doKey2ClickBlur"])(event);
+    };
+    DropdownListModel.prototype.onFocus = function (event) {
+        if (this.question.searchEnabled) {
+            if (this.question instanceof _question_dropdown__WEBPACK_IMPORTED_MODULE_4__["QuestionDropdownModel"]) {
+                this.applyInputString(this.question.selectedItem);
+            }
+            else {
+                this.inputString = null;
+            }
+        }
     };
     DropdownListModel.prototype.scrollToFocusedItem = function () {
         this.listModel.scrollToFocusedItem();
@@ -7891,6 +8042,20 @@ var DropdownListModel = /** @class */ (function (_super) {
             }
         })
     ], DropdownListModel.prototype, "filterString", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({
+            defaultValue: "",
+            onSet: function (newValue, target) {
+                target.question.inputHasValue = !!newValue;
+            }
+        })
+    ], DropdownListModel.prototype, "inputString", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({})
+    ], DropdownListModel.prototype, "showSelectedItemLocText", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({})
+    ], DropdownListModel.prototype, "showInputFieldComponent", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({
             defaultValue: false,
@@ -7904,6 +8069,9 @@ var DropdownListModel = /** @class */ (function (_super) {
             }
         })
     ], DropdownListModel.prototype, "hasScroll", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: "" })
+    ], DropdownListModel.prototype, "hintString", void 0);
     return DropdownListModel;
 }(_base__WEBPACK_IMPORTED_MODULE_0__["Base"]));
 
@@ -8853,7 +9021,7 @@ __webpack_require__.r(__webpack_exports__);
 // import "../../main.scss";
 //import "../../modern.scss";
 var Version;
-Version = "" + "1.9.78";
+Version = "" + "1.9.79";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -18199,7 +18367,7 @@ var JsonMetadata = /** @class */ (function () {
         var props = {};
         this.generateSchemaProperties(classInfo, props, schemaDef);
         if (hasParent) {
-            res.allOff = [
+            res.allOf = [
                 { $ref: "#" + classInfo.parentName },
                 { properties: props },
             ];
@@ -18789,7 +18957,7 @@ var ListModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(ListModel.prototype, "emptyMessage", {
         get: function () {
-            return this.getLocalizationString("emptyMessage");
+            return this.isAllDataLoaded ? this.getLocalizationString("emptyMessage") : this.loadingText;
         },
         enumerable: false,
         configurable: true
@@ -25261,6 +25429,8 @@ var MultiSelectListModel = /** @class */ (function (_super) {
     function MultiSelectListModel(items, onSelectionChanged, allowSelection, selectedItems, onFilterStringChangedCallback) {
         var _this = _super.call(this, items, onSelectionChanged, allowSelection, undefined, onFilterStringChangedCallback) || this;
         _this.onItemClick = function (item) {
+            if (_this.isItemDisabled(item))
+                return;
             _this.isExpanded = false;
             if (_this.isItemSelected(item)) {
                 _this.selectedItems.splice(_this.selectedItems.indexOf(item), 1)[0];
@@ -25365,6 +25535,7 @@ var Notifier = /** @class */ (function (_super) {
         _this.actionBar.updateCallback = function (isResetInitialized) {
             _this.actionBar.actions.forEach(function (action) { return action.cssClasses = {}; });
         };
+        _this.css = _this.cssClasses.root;
         return _this;
     }
     Notifier.prototype.getCssClass = function (type) {
@@ -25373,27 +25544,35 @@ var Notifier = /** @class */ (function (_super) {
             .append(this.cssClasses.info, type !== "error" && type !== "success")
             .append(this.cssClasses.error, type === "error")
             .append(this.cssClasses.success, type === "success")
+            .append(this.cssClasses.shown, this.active)
             .toString();
     };
     Notifier.prototype.updateActionsVisibility = function (type) {
         var _this = this;
         this.actionBar.actions.forEach(function (action) { return action.visible = (_this.actionsVisibility[action.id] === type); });
     };
-    Notifier.prototype.notify = function (message, type) {
+    Notifier.prototype.notify = function (message, type, waitUserAction) {
         var _this = this;
         if (type === void 0) { type = "info"; }
-        this.updateActionsVisibility(type);
-        this.message = message;
-        this.active = true;
-        this.css = this.getCssClass(type);
-        if (!!this.timer) {
-            clearTimeout(this.timer);
-            this.timer = undefined;
-        }
-        this.timer = setTimeout(function () {
-            _this.timer = undefined;
-            _this.active = false;
-        }, this.timeout);
+        if (waitUserAction === void 0) { waitUserAction = false; }
+        this.isDisplayed = true;
+        setTimeout(function () {
+            _this.updateActionsVisibility(type);
+            _this.message = message;
+            _this.active = true;
+            _this.css = _this.getCssClass(type);
+            if (!!_this.timer) {
+                clearTimeout(_this.timer);
+                _this.timer = undefined;
+            }
+            if (!waitUserAction) {
+                _this.timer = setTimeout(function () {
+                    _this.timer = undefined;
+                    _this.active = false;
+                    _this.css = _this.getCssClass(type);
+                }, _this.timeout);
+            }
+        }, 1);
     };
     Notifier.prototype.addAction = function (action, notificationType) {
         action.visible = false;
@@ -25404,6 +25583,9 @@ var Notifier = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: false })
     ], Notifier.prototype, "active", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: false })
+    ], Notifier.prototype, "isDisplayed", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
     ], Notifier.prototype, "message", void 0);
@@ -28127,14 +28309,7 @@ var PanelModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(PanelModel.prototype, "cssTitle", {
         get: function () {
-            return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]()
-                .append(this.cssClasses.panel.title)
-                .append(this.cssClasses.panel.titleExpandable, this.state !== "default")
-                .append(this.cssClasses.panel.titleExpanded, this.isExpanded)
-                .append(this.cssClasses.panel.titleCollapsed, this.isCollapsed)
-                .append(this.cssClasses.panel.titleDisabled, this.isReadOnly)
-                .append(this.cssClasses.panel.titleOnError, this.containsErrors)
-                .toString();
+            return this.getCssTitle(this.cssClasses.panel);
         },
         enumerable: false,
         configurable: true
@@ -28427,6 +28602,8 @@ var defaultCss = {
         cleanButtonSvg: "sv_q_dd_clean-button-svg",
         cleanButtonIconId: "icon-clear_16x16",
         filterStringInput: "sv_q_dd_filter-string-input",
+        hintPrefix: "sv_q_dd_hint-prefix",
+        hintSuffix: "sv_q_dd_hint-suffix"
     },
     tagbox: {
         root: "sv_q_dd_root",
@@ -30833,6 +31010,9 @@ var Question = /** @class */ (function (_super) {
         _this.registerPropertyChangedHandlers(["showCommentArea", "showOtherItem"], function () {
             _this.initCommentFromSurvey();
         });
+        _this.registerFunctionOnPropertiesValueChanged(["no"], function () {
+            _this.updateQuestionCss();
+        });
         _this.registerPropertyChangedHandlers(["isMobile"], function () { _this.onMobileChanged(); });
         return _this;
     }
@@ -31694,12 +31874,7 @@ var Question = /** @class */ (function (_super) {
     };
     Question.prototype.getCssTitle = function (cssClasses) {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__["CssClassBuilder"]()
-            .append(cssClasses.title)
-            .append(cssClasses.titleExpandable, this.state !== "default")
-            .append(cssClasses.titleExpanded, this.isExpanded)
-            .append(cssClasses.titleCollapsed, this.isCollapsed)
-            .append(cssClasses.titleDisabled, this.isReadOnly)
-            .append(cssClasses.titleOnError, this.containsErrors)
+            .append(_super.prototype.getCssTitle.call(this, cssClasses))
             .append(cssClasses.titleOnAnswer, !this.containsErrors && this.isAnswered)
             .toString();
     };
@@ -34627,12 +34802,12 @@ var QuestionSelectBase = /** @class */ (function (_super) {
             if (this.isBuiltInChoice(choices[i], question))
                 continue;
             if (isSelected === undefined) {
-                res.push(choices[i]);
+                res.push(this.copyChoiceItem(choices[i]));
                 continue;
             }
             var itemsSelected = question.isItemSelected(choices[i]);
             if ((itemsSelected && isSelected) || (!itemsSelected && !isSelected)) {
-                res.push(choices[i]);
+                res.push(this.copyChoiceItem(choices[i]));
             }
         }
         if (this.choicesFromQuestionMode === "selected" && question.isOtherSelected && !!question.comment) {
@@ -34640,6 +34815,9 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         }
         return res;
     };
+    QuestionSelectBase.prototype.copyChoiceItem = function (item) {
+        return new _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"](item.value, item.text);
+    };
     Object.defineProperty(QuestionSelectBase.prototype, "hasActiveChoices", {
         get: function () {
             var choices = this.visibleChoices;
@@ -37036,6 +37214,11 @@ var ComponentQuestionJSON = /** @class */ (function () {
             return;
         this.json.onValueChanged(question, name, newValue);
     };
+    ComponentQuestionJSON.prototype.onValueChanging = function (question, name, newValue) {
+        if (!this.json.onValueChanging)
+            return newValue;
+        return this.json.onValueChanging(question, name, newValue);
+    };
     ComponentQuestionJSON.prototype.onItemValuePropertyChanged = function (question, item, propertyName, name, newValue) {
         if (!this.json.onItemValuePropertyChanged)
             return;
@@ -37246,6 +37429,23 @@ var QuestionCustomModelBase = /** @class */ (function (_super) {
             this.customQuestion.onValueChanged(this, name, newValue);
         }
     };
+    QuestionCustomModelBase.prototype.getQuestionByName = function (name) {
+        return undefined;
+    };
+    QuestionCustomModelBase.prototype.isValueChanging = function (name, newValue) {
+        if (!!this.customQuestion) {
+            var qValue = newValue;
+            newValue = this.customQuestion.onValueChanging(this, name, newValue);
+            if (!_helpers__WEBPACK_IMPORTED_MODULE_3__["Helpers"].isTwoValueEquals(newValue, qValue)) {
+                var q = this.getQuestionByName(name);
+                if (!!q) {
+                    q.value = newValue;
+                    return true;
+                }
+            }
+        }
+        return false;
+    };
     QuestionCustomModelBase.prototype.convertDataName = function (name) {
         return this.getValueName();
     };
@@ -37336,6 +37536,14 @@ var QuestionCustomModel = /** @class */ (function (_super) {
             this.contentQuestion.onAnyValueChanged(name);
         }
     };
+    QuestionCustomModel.prototype.getQuestionByName = function (name) {
+        return this.contentQuestion;
+    };
+    QuestionCustomModel.prototype.setValue = function (name, newValue, locNotification, allowNotifyValueChanged) {
+        if (this.isValueChanging(name, newValue))
+            return;
+        _super.prototype.setValue.call(this, name, newValue, locNotification, allowNotifyValueChanged);
+    };
     QuestionCustomModel.prototype.hasErrors = function (fireCallback, rec) {
         if (fireCallback === void 0) { fireCallback = true; }
         if (rec === void 0) { rec = null; }
@@ -37642,9 +37850,14 @@ var QuestionCompositeModel = /** @class */ (function (_super) {
         var val = this.value;
         return !!val ? val[name] : null;
     };
+    QuestionCompositeModel.prototype.getQuestionByName = function (name) {
+        return !!this.contentPanel ? this.contentPanel.getQuestionByName(name) : undefined;
+    };
     QuestionCompositeModel.prototype.setValue = function (name, newValue, locNotification, allowNotifyValueChanged) {
         if (this.settingNewValue)
             return;
+        if (this.isValueChanging(name, newValue))
+            return;
         this.settingNewValue = true;
         if (!this.isEditingSurveyElement && !!this.contentPanel) {
             var panelValue = this.contentPanel.getValue();
@@ -37886,7 +38099,7 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
             else if (!selectedItemValues) {
                 this.updateSelectedItemValues();
             }
-            return this.lastSelectedItemValue || selectedItemValues || new _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"](this.value);
+            return this.lastSelectedItemValue || selectedItemValues || (this.isOtherSelected ? this.otherItem : new _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"](this.value));
         },
         enumerable: false,
         configurable: true
@@ -49888,7 +50101,7 @@ var QuestionRadiogroupModel = /** @class */ (function (_super) {
             if (!itemValue && !selectedItemValues) {
                 this.updateSelectedItemValues();
             }
-            return itemValue || selectedItemValues || new _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"](this.value);
+            return itemValue || selectedItemValues || (this.isOtherSelected ? this.otherItem : new _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"](this.value));
         },
         enumerable: false,
         configurable: true
@@ -50726,8 +50939,17 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         configurable: true
     });
     QuestionRatingModel.prototype.getItemClass = function (item, highlight) {
+        var _this = this;
         if (highlight === void 0) { highlight = "none"; }
-        var isSelected = this.isStar ? this.value >= item.value : this.value == item.value;
+        var isSelected = this.value == item.value;
+        if (this.isStar) {
+            if (this.rateValues.length == 0) {
+                isSelected = this.value >= item.value;
+            }
+            else {
+                isSelected = this.rateValues.indexOf(this.rateValues.filter(function (i) { return i.value == _this.value; })[0]) >= this.rateValues.indexOf(item);
+            }
+        }
         var isDisabled = this.isReadOnly || !item.isEnabled;
         var allowHover = !isDisabled && (this.value != item.value) && !(!!this.survey && this.survey.isDesignMode);
         var renderedItem = this.renderedRateItems.filter(function (i) { return i.itemValue == item; })[0];
@@ -54087,7 +54309,9 @@ var NotifierComponent = /** @class */ (function (_super) {
         return this.notifier;
     };
     NotifierComponent.prototype.renderElement = function () {
-        var style = { display: this.notifier.active ? "" : "none" };
+        if (!this.notifier.isDisplayed)
+            return null;
+        var style = { visibility: this.notifier.active ? "visible" : "hidden" };
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.notifier.css, style: style },
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", null, this.notifier.message),
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_3__["SurveyActionBar"], { model: this.notifier.actionBar })));
@@ -54706,8 +54930,8 @@ var RatingItemStar = /** @class */ (function (_super) {
         var _this = this;
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { 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); } },
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.name, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.isDisplayMode, 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-describedby": this.question.ariaDescribedBy }),
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { className: "sv-star", size: 48, iconName: "icon-rating-star", title: this.item.text }),
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { className: "sv-star-2", size: 48, iconName: "icon-rating-star-2", title: this.item.text })));
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { className: "sv-star", size: "auto", iconName: "icon-rating-star", title: this.item.text }),
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { className: "sv-star-2", size: "auto", iconName: "icon-rating-star-2", title: this.item.text })));
     };
     return RatingItemStar;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_2__["SurveyElementBase"]));
@@ -55523,8 +55747,15 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
             (_a = _this.question.dropdownListModel) === null || _a === void 0 ? void 0 : _a.onBlur(event);
             _this.updateInputDomElement();
         };
+        _this.focus = function (event) {
+            var _a;
+            (_a = _this.question.dropdownListModel) === null || _a === void 0 ? void 0 : _a.onFocus(event);
+        };
         return _this;
     }
+    SurveyQuestionDropdownBase.prototype.getStateElement = function () {
+        return this.question["dropdownListModel"];
+    };
     SurveyQuestionDropdownBase.prototype.setValueCore = function (newValue) {
         this.questionBase.renderedValue = newValue;
     };
@@ -55566,16 +55797,23 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
         var valueElement = this.renderValueElement(dropdownListModel);
         var onInputChange = function (e) {
             if (e.target === document.activeElement) {
-                dropdownListModel.filterString = e.target.value;
+                dropdownListModel.inputStringRendered = e.target.value;
             }
         };
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.question.inputId, className: this.question.getControlClass(), tabIndex: dropdownListModel.inputReadOnly ? undefined : 0, onClick: this.click, 
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             disabled: this.question.isInputReadOnly, required: this.question.isRequired, onKeyDown: this.keyhandler, onBlur: this.blur, role: this.question.ariaRole, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy },
+            dropdownListModel.showHintPrefix ?
+                (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.hintPrefix },
+                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, dropdownListModel.hintStringPrefix))) : null,
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.controlValue },
+                dropdownListModel.showHintString ?
+                    (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.hintSuffix },
+                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { style: { visibility: "hidden" }, "data-bind": "text: model.filterString" }, dropdownListModel.inputStringRendered),
+                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, dropdownListModel.hintStringSuffix))) : null,
                 valueElement,
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), ref: function (element) { return (_this.inputElement = element); }, className: this.question.cssClasses.filterStringInput, role: dropdownListModel.filterStringEnabled ? this.question.ariaRole : undefined, "aria-label": this.question.placeholder, placeholder: this.question.readOnlyText, readOnly: !dropdownListModel.searchEnabled ? true : undefined, tabIndex: dropdownListModel.inputReadOnly ? undefined : -1, disabled: this.question.isInputReadOnly, inputMode: dropdownListModel.inputMode, onChange: function (e) { onInputChange(e); }, onBlur: this.blur })),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), ref: function (element) { return (_this.inputElement = element); }, className: this.question.cssClasses.filterStringInput, role: dropdownListModel.filterStringEnabled ? this.question.ariaRole : undefined, "aria-label": this.question.placeholder, placeholder: dropdownListModel.placeholderRendered, readOnly: !dropdownListModel.searchEnabled ? true : undefined, tabIndex: dropdownListModel.inputReadOnly ? undefined : -1, disabled: this.question.isInputReadOnly, inputMode: dropdownListModel.inputMode, onChange: function (e) { onInputChange(e); }, onBlur: this.blur, onFocus: this.focus })),
             this.createClearButton()));
     };
     SurveyQuestionDropdownBase.prototype.createClearButton = function () {
@@ -55600,9 +55838,9 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
     SurveyQuestionDropdownBase.prototype.updateInputDomElement = function () {
         if (!!this.inputElement) {
             var control = this.inputElement;
-            var newValue = this.question.dropdownListModel.filterString;
+            var newValue = this.question.dropdownListModel.inputStringRendered;
             if (!survey_core__WEBPACK_IMPORTED_MODULE_1__["Helpers"].isTwoValueEquals(newValue, control.value)) {
-                control.value = this.question.dropdownListModel.filterString;
+                control.value = this.question.dropdownListModel.inputStringRendered;
             }
         }
     };
@@ -58248,6 +58486,8 @@ var SurveyQuestionCheckboxItem = /** @class */ (function (_super) {
     SurveyQuestionCheckboxItem.prototype.shouldComponentUpdate = function (nextProps, nextState) {
         if (!_super.prototype.shouldComponentUpdate.call(this, nextProps, nextState))
             return false;
+        if (!this.question)
+            return false;
         return (!this.question.customWidget ||
             !!this.question.customWidgetData.isNeedRender ||
             !!this.question.customWidget.widgetJson.isDefaultRender ||
@@ -60624,6 +60864,8 @@ var SurveyQuestionRadioItem = /** @class */ (function (_super) {
     SurveyQuestionRadioItem.prototype.shouldComponentUpdate = function (nextProps, nextState) {
         if (!_super.prototype.shouldComponentUpdate.call(this, nextProps, nextState))
             return false;
+        if (!this.question)
+            return false;
         return (!this.question.customWidget ||
             !!this.question.customWidgetData.isNeedRender ||
             !!this.question.customWidget.widgetJson.isDefaultRender ||
@@ -61736,15 +61978,15 @@ var TagboxFilterString = /** @class */ (function (_super) {
     TagboxFilterString.prototype.updateDomElement = function () {
         if (!!this.inputElement) {
             var control = this.inputElement;
-            var newValue = this.model.filterString;
+            var newValue = this.model.inputStringRendered;
             if (!survey_core__WEBPACK_IMPORTED_MODULE_1__["Helpers"].isTwoValueEquals(newValue, control.value)) {
-                control.value = this.model.filterString;
+                control.value = this.model.inputStringRendered;
             }
         }
     };
     TagboxFilterString.prototype.onChange = function (e) {
         if (e.target === document.activeElement) {
-            this.model.filterString = e.target.value;
+            this.model.inputStringRendered = e.target.value;
         }
     };
     TagboxFilterString.prototype.keyhandler = function (e) {
@@ -61753,12 +61995,15 @@ var TagboxFilterString = /** @class */ (function (_super) {
     TagboxFilterString.prototype.onBlur = function (e) {
         this.model.onBlur(e);
     };
+    TagboxFilterString.prototype.onFocus = function (e) {
+        this.model.onFocus(e);
+    };
     TagboxFilterString.prototype.getStateElement = function () {
         return this.model;
     };
     TagboxFilterString.prototype.render = function () {
         var _this = this;
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), inputMode: this.model.inputMode, ref: function (element) { return (_this.inputElement = element); }, className: this.question.cssClasses.filterStringInput, disabled: this.question.isInputReadOnly, readOnly: !this.model.searchEnabled ? true : undefined, size: !this.model.filterString ? 1 : undefined, role: this.model.filterStringEnabled ? this.question.ariaRole : undefined, "aria-label": this.question.placeholder, placeholder: this.model.filterStringPlaceholder, onKeyDown: function (e) { _this.keyhandler(e); }, onChange: function (e) { _this.onChange(e); }, onBlur: function (e) { _this.onBlur(e); } }));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), inputMode: this.model.inputMode, ref: function (element) { return (_this.inputElement = element); }, className: this.question.cssClasses.filterStringInput, disabled: this.question.isInputReadOnly, readOnly: !this.model.searchEnabled ? true : undefined, size: !this.model.inputStringRendered ? 1 : undefined, role: this.model.filterStringEnabled ? this.question.ariaRole : undefined, "aria-label": this.question.placeholder, placeholder: this.model.filterStringPlaceholder, onKeyDown: function (e) { _this.keyhandler(e); }, onChange: function (e) { _this.onChange(e); }, onBlur: function (e) { _this.onBlur(e); }, onFocus: function (e) { _this.onFocus(e); } }));
     };
     return TagboxFilterString;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_3__["SurveyElementBase"]));
@@ -62397,6 +62642,7 @@ var modernThemeColors = {
     "$clean-button-color": "#1948b3",
     "$body-background-color": "#ffffff",
     "$foreground-light": "#909090",
+    "$font-family": "Raleway",
 };
 var defaultThemeColors = {
     "$header-background-color": "#e7e7e7",
@@ -62746,6 +62992,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./helpers */ "./src/helpers.ts");
 /* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./settings */ "./src/settings.ts");
 /* harmony import */ var _actions_container__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./actions/container */ "./src/actions/container.ts");
+/* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -62773,6 +63020,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 /**
  * A base class for the [`SurveyElement`](https://surveyjs.io/form-library/documentation/surveyelement) and [`SurveyModel`](https://surveyjs.io/form-library/documentation/surveymodel) classes.
  */
@@ -63885,6 +64133,18 @@ var SurveyElement = /** @class */ (function (_super) {
             this.toggleState();
         }
     };
+    SurveyElement.prototype.getCssTitle = function (cssClasses) {
+        var isExpandable = this.state !== "default";
+        var numInlineLimit = 4;
+        return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_6__["CssClassBuilder"]()
+            .append(cssClasses.title)
+            .append(cssClasses.titleNumInline, (this.no || "").length > numInlineLimit || isExpandable)
+            .append(cssClasses.titleExpandable, isExpandable)
+            .append(cssClasses.titleExpanded, this.isExpanded)
+            .append(cssClasses.titleCollapsed, this.isCollapsed)
+            .append(cssClasses.titleDisabled, this.isReadOnly)
+            .append(cssClasses.titleOnError, this.containsErrors).toString();
+    };
     SurveyElement.prototype.localeChanged = function () {
         _super.prototype.localeChanged.call(this);
         this.updateDescriptionVisibility(this.description);
@@ -67436,7 +67696,7 @@ var SurveyModel = /** @class */ (function (_super) {
         }
     };
     SurveyModel.prototype.notify = function (message, type) {
-        this.notifier.notify(message, type);
+        this.notifier.notify(message, type, type === "error");
     };
     /**
      * Clears the survey data and state. If the survey has a `completed` state, it will get a `running` state.
@@ -71021,11 +71281,12 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyModel.prototype, "timeSpent", {
         /**
-         * Returns the time in seconds an end user spends on the survey
+         * Gets or set the time in seconds an end user spends on the survey.
          * @see startTimer
          * @see PageModel.timeSpent
          */
         get: function () { return this.timerModel.spent; },
+        set: function (val) { this.timerModel.spent = val; },
         enumerable: false,
         configurable: true
     });