survey-react 1.9.77 → 1.9.79

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.77
+ * 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,10 +5318,17 @@ 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: { root: "sv_q_image", image: "sv_image_image" },
+    image: {
+        root: "sv_q_image",
+        image: "sv_image_image",
+        noImage: "sv-image__no-image",
+        noImageSvgIconId: "icon-no-image",
+    },
     matrix: {
         root: "sv_q_matrix",
         label: "sv_q_m_label",
@@ -5435,7 +5445,10 @@ var defaultStandardCss = {
         itemInline: "sv_q_imagepicker_inline",
         itemText: "sv_q_imgsel_text",
         clearButton: "sv_q_radiogroup_clear",
-        column: "sv_q_select_column"
+        column: "sv_q_select_column",
+        itemNoImage: "sv_q_imgsel__no-image",
+        itemNoImageSvgIcon: "sv_q_imgsel__no-image-svg",
+        itemNoImageSvgIconId: "icon-no-image",
     },
     rating: {
         root: "sv_q_rating",
@@ -5476,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",
@@ -5586,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",
@@ -5674,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",
@@ -5708,6 +5724,8 @@ var defaultV2Css = {
         root: "sd-image",
         image: "sd-image__image",
         adaptive: "sd-image__image--adaptive",
+        noImage: "sd-image__no-image",
+        noImageSvgIconId: "icon-no-image",
         withFrame: ""
     },
     html: {
@@ -5848,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",
@@ -5869,7 +5889,7 @@ var defaultV2Css = {
         other: "sd-input sd-comment",
         itemNoImage: "sd-imagepicker__no-image",
         itemNoImageSvgIcon: "sd-imagepicker__no-image-svg",
-        itemNoImageSvgIconId: "#icon-no-image",
+        itemNoImageSvgIconId: "icon-no-image",
         column: "sd-selectbase__column sd-imagepicker__column",
         checkedItemDecorator: "sd-imagepicker__check-decorator",
         checkedItemSvgIcon: "sd-imagepicker__check-icon",
@@ -6051,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",
@@ -6276,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];
@@ -6426,8 +6443,10 @@ var DragDropCore = /** @class */ (function (_super) {
         _this.creator = creator;
         _this.longTap = longTap;
         _this.onGhostPositionChanged = new _base__WEBPACK_IMPORTED_MODULE_0__["EventBase"]();
-        _this.onBeforeDrop = new _base__WEBPACK_IMPORTED_MODULE_0__["EventBase"]();
-        _this.onAfterDrop = new _base__WEBPACK_IMPORTED_MODULE_0__["EventBase"]();
+        _this.onDragStart = new _base__WEBPACK_IMPORTED_MODULE_0__["EventBase"]();
+        _this.onDragEnd = new _base__WEBPACK_IMPORTED_MODULE_0__["EventBase"]();
+        _this.onBeforeDrop = _this.onDragStart;
+        _this.onAfterDrop = _this.onDragEnd;
         _this.draggedElement = null;
         _this.dropTarget = null;
         _this.prevDropTarget = null;
@@ -6482,9 +6501,9 @@ var DragDropCore = /** @class */ (function (_super) {
         _this.drop = function () {
             if (_this.allowDropHere) {
                 var fromElement = _this.draggedElement.parent;
-                _this.onBeforeDrop.fire(_this, { fromElement: fromElement, draggedElement: _this.draggedElement });
+                _this.onDragStart.fire(_this, { fromElement: fromElement, draggedElement: _this.draggedElement });
                 var newElement = _this.doDrop();
-                _this.onAfterDrop.fire(_this, { fromElement: fromElement, draggedElement: newElement, toElement: _this.dropTarget });
+                _this.onDragEnd.fire(_this, { fromElement: fromElement, draggedElement: newElement, toElement: _this.dropTarget });
             }
             _this.clear();
         };
@@ -6775,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;
@@ -6891,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; });
@@ -7029,6 +7043,10 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
         var rect = draggedElementNode.getBoundingClientRect();
         draggedElementShortcut.shortcutXOffset = event.clientX - rect.x;
         draggedElementShortcut.shortcutYOffset = event.clientY - rect.y;
+        if (this.parentElement && this.parentElement.useFullItemSizeForShortcut) {
+            draggedElementShortcut.style.width = draggedElementNode.offsetWidth + "px";
+            draggedElementShortcut.style.height = draggedElementNode.offsetHeight + "px";
+        }
         return draggedElementShortcut;
     };
     Object.defineProperty(DragDropRankingChoices.prototype, "shortcutClass", {
@@ -7046,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
@@ -7537,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 ||
@@ -7568,6 +7587,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 var DropdownListModel = /** @class */ (function (_super) {
     __extends(DropdownListModel, _super);
     function DropdownListModel(question, onSelectionChanged) {
@@ -7576,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);
@@ -7596,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 {
@@ -7645,16 +7674,19 @@ 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();
         });
         this._popupModel.cssClass = this.popupCssClasses;
         this._popupModel.onVisibilityChanged.add(function (_, option) {
+            if (option.isVisible) {
+                _this.listModel.renderElements = true;
+            }
             if (option.isVisible && _this.question.choicesLazyLoadEnabled) {
                 _this.listModel.actions = [];
                 _this.updateQuestionChoices();
@@ -7672,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();
         }
@@ -7696,11 +7734,14 @@ 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();
             };
         }
         var res = new _list__WEBPACK_IMPORTED_MODULE_2__["ListModel"](visibleItems, _onSelectionChanged, false);
+        res.renderElements = false;
         res.areSameItemsCallback = function (item1, item2) {
             return item1 === item2;
         };
@@ -7718,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 () {
@@ -7731,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);
@@ -7744,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;
@@ -7770,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 () {
@@ -7785,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) {
@@ -7795,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();
         }
@@ -7814,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 (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) {
-            this.onClear(event);
+        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) {
@@ -7845,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;
         }
@@ -7853,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();
@@ -7871,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,
@@ -7884,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"]));
 
@@ -8007,14 +8195,14 @@ var DropdownMultiSelectListModel = /** @class */ (function (_super) {
         _super.prototype.createPopup.call(this);
         this.popupModel.onFooterActionsCreated.add(function (_, opt) {
             if (_this.shouldResetAfterCancel) {
-                opt.actions[0].needSpace = true;
-                opt.actions = [{
-                        id: "sv-dropdown-done-button",
-                        title: _this.doneButtonCaption,
-                        innerCss: "sv-popup__button--done",
-                        action: function () { _this.popupModel.isVisible = false; },
-                        enabled: new _base__WEBPACK_IMPORTED_MODULE_0__["ComputedUpdater"](function () { return !_this.isTwoValueEquals(_this.question.renderedValue, _this.previousValue); })
-                    }].concat(opt.actions);
+                opt.actions.push({
+                    id: "sv-dropdown-done-button",
+                    title: _this.doneButtonCaption,
+                    innerCss: "sv-popup__button--done",
+                    needSpace: true,
+                    action: function () { _this.popupModel.isVisible = false; },
+                    enabled: new _base__WEBPACK_IMPORTED_MODULE_0__["ComputedUpdater"](function () { return !_this.isTwoValueEquals(_this.question.renderedValue, _this.previousValue); })
+                });
             }
         });
         this.popupModel.onVisibilityChanged.add(function (_, opt) {
@@ -8833,7 +9021,7 @@ __webpack_require__.r(__webpack_exports__);
 // import "../../main.scss";
 //import "../../modern.scss";
 var Version;
-Version = "" + "1.9.77";
+Version = "" + "1.9.79";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -18179,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 },
             ];
@@ -18769,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
@@ -18959,6 +19147,9 @@ var ListModel = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: false })
     ], ListModel.prototype, "showSearchClearButton", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: true })
+    ], ListModel.prototype, "renderElements", void 0);
     return ListModel;
 }(_actions_container__WEBPACK_IMPORTED_MODULE_1__["ActionContainer"]));
 
@@ -20478,7 +20669,7 @@ var englishStrings = {
     noEntriesText: "There are no entries yet.\nClick the button below to add a new entry.",
     noEntriesReadonlyText: "There are no entries.",
     more: "More",
-    tagboxDoneButtonCaption: "Done"
+    tagboxDoneButtonCaption: "OK"
 };
 // Uncomment the lines below if you create a custom dictionary.
 // Replace "en" with a custom locale code (for example, "fr" or "de"),
@@ -25238,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];
@@ -25342,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) {
@@ -25350,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;
@@ -25381,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);
@@ -25802,6 +26007,7 @@ var PageModel = /** @class */ (function (_super) {
             }
         }
         var options = {
+            allow: true,
             target: this.dragDropInfo.target,
             source: this.dragDropInfo.source,
             parent: parent,
@@ -28103,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
@@ -28403,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",
@@ -30809,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;
     }
@@ -31670,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();
     };
@@ -34603,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) {
@@ -34616,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;
@@ -37012,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;
@@ -37222,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();
     };
@@ -37312,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; }
@@ -37618,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();
@@ -37862,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
@@ -39565,6 +39802,12 @@ var __extends = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 
 
 
@@ -39674,9 +39917,12 @@ var QuestionImageModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionImageModel.prototype.getRenderedSize = function (val) {
+        return isNaN(Number(val)) ? val : val + "px";
+    };
     Object.defineProperty(QuestionImageModel.prototype, "renderedHeight", {
         get: function () {
-            return this.imageHeight ? this.imageHeight + "px" : undefined;
+            return this.imageHeight ? this.getRenderedSize(this.imageHeight) : undefined;
         },
         enumerable: false,
         configurable: true
@@ -39702,7 +39948,7 @@ var QuestionImageModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionImageModel.prototype, "renderedWidth", {
         get: function () {
-            return this.imageWidth ? this.imageWidth + "px" : undefined;
+            return this.imageWidth ? this.getRenderedSize(this.imageWidth) : undefined;
         },
         enumerable: false,
         configurable: true
@@ -39767,6 +40013,12 @@ var QuestionImageModel = /** @class */ (function (_super) {
             .append(this.cssClasses.adaptive, isDefaultSize)
             .toString();
     };
+    QuestionImageModel.prototype.onLoadHandler = function () {
+        this.contentNotLoaded = false;
+    };
+    QuestionImageModel.prototype.onErrorHandler = function () {
+        this.contentNotLoaded = true;
+    };
     QuestionImageModel.prototype.setRenderedMode = function (val) {
         this.setPropertyValue("renderedMode", val);
     };
@@ -39800,6 +40052,9 @@ var QuestionImageModel = /** @class */ (function (_super) {
         }
         return false;
     };
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: false })
+    ], QuestionImageModel.prototype, "contentNotLoaded", void 0);
     return QuestionImageModel;
 }(_questionnonvalue__WEBPACK_IMPORTED_MODULE_0__["QuestionNonValue"]));
 
@@ -39830,8 +40085,8 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("image", [
         default: "contain",
         choices: ["none", "contain", "cover", "fill"],
     },
-    { name: "imageHeight:number", default: 150, minValue: 0 },
-    { name: "imageWidth:number", default: 200, minValue: 0 },
+    { name: "imageHeight", default: "150" },
+    { name: "imageWidth", default: "200" },
 ], function () {
     return new QuestionImageModel("");
 }, "nonvalue");
@@ -39938,6 +40193,12 @@ var ImageItemValue = /** @class */ (function (_super) {
     ImageItemValue.prototype.getProcessedText = function (text) {
         return !!this.locOwner ? this.locOwner.getProcessedText(text) : text;
     };
+    ImageItemValue.prototype.onErrorHandler = function () {
+        this.contentNotLoaded = true;
+    };
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: false })
+    ], ImageItemValue.prototype, "contentNotLoaded", void 0);
     return ImageItemValue;
 }(_itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"]));
 
@@ -39953,6 +40214,7 @@ var QuestionImagePickerModel = /** @class */ (function (_super) {
         //responsive mode
         _this.isResponsiveValue = false;
         _this.onContentLoaded = function (item, event) {
+            item.contentNotLoaded = false;
             var content = event.target;
             if (_this.contentMode == "video") {
                 item["aspectRatio"] = content.videoWidth / content.videoHeight;
@@ -40025,8 +40287,11 @@ var QuestionImagePickerModel = /** @class */ (function (_super) {
     });
     QuestionImagePickerModel.prototype.isItemSelected = function (item) {
         var val = this.value;
+        var imageItemValue = item;
         if (this.isValueEmpty(val))
             return false;
+        if (!imageItemValue.imageLink || imageItemValue.contentNotLoaded)
+            return false;
         if (!this.multiSelect)
             return this.isTwoValueEquals(val, item.value);
         if (!Array.isArray(val))
@@ -40037,6 +40302,12 @@ var QuestionImagePickerModel = /** @class */ (function (_super) {
         }
         return false;
     };
+    QuestionImagePickerModel.prototype.getItemEnabled = function (item) {
+        var imageItemValue = item;
+        if (!imageItemValue.imageLink || imageItemValue.contentNotLoaded)
+            return false;
+        return _super.prototype.getItemEnabled.call(this, item);
+    };
     QuestionImagePickerModel.prototype.clearIncorrectValues = function () {
         if (this.multiSelect) {
             var val = this.value;
@@ -47773,6 +48044,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         _this.registerPropertyChangedHandlers(["isMobile"], function () {
             _this.updateFooterActions();
         });
+        _this.registerPropertyChangedHandlers(["allowAddPanel"], function () { _this.updateNoEntriesTextDefaultLoc(); });
         return _this;
     }
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "hasSingleInput", {
@@ -48997,7 +49269,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         var loc = this.getLocalizableString("noEntriesText");
         if (!loc)
             return;
-        loc.localizationName = this.isReadOnly ? "noEntriesReadonlyText" : "noEntriesText";
+        loc.localizationName = (this.isReadOnly || !this.allowAddPanel) ? "noEntriesReadonlyText" : "noEntriesText";
         loc.strChanged();
     };
     QuestionPanelDynamicModel.prototype.onSurveyLoad = function () {
@@ -49018,7 +49290,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             }
         }
         this.recalculateIsReadyValue();
-        if (this.isReadOnly) {
+        if (this.isReadOnly || !this.allowAddPanel) {
             this.updateNoEntriesTextDefaultLoc();
         }
         _super.prototype.onSurveyLoad.call(this);
@@ -49829,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
@@ -50227,6 +50499,16 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionRankingModel.prototype, "useFullItemSizeForShortcut", {
+        get: function () {
+            return this.getPropertyValue("useFullItemSizeForShortcut");
+        },
+        set: function (val) {
+            this.setPropertyValue("useFullItemSizeForShortcut", val);
+        },
+        enumerable: false,
+        configurable: true
+    });
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: null })
     ], QuestionRankingModel.prototype, "currentDropTarget", void 0);
@@ -50657,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];
@@ -51573,6 +51864,9 @@ var QuestionTextModel = /** @class */ (function (_super) {
             _this.updateValueOnEvent(event);
             _this.updateRemainingCharacterCounter(event.target.value);
         };
+        _this.onFocus = function (event) {
+            _this.updateRemainingCharacterCounter(event.target.value);
+        };
         _this.createLocalizableString("minErrorText", _this, true, "minError");
         _this.createLocalizableString("maxErrorText", _this, true, "maxError");
         _this.locDataListValue = new _localizablestring__WEBPACK_IMPORTED_MODULE_2__["LocalizableStrings"](_this);
@@ -51882,7 +52176,7 @@ var QuestionTextModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(QuestionTextModel.prototype, "isValueLessMin", {
         get: function () {
-            return (!this.isValueEmpty(this.renderedMin) &&
+            return (!this.isValueEmpty(this.renderedMin) && !this.isEmpty() &&
                 this.getCalculatedMinMax(this.value) <
                     this.getCalculatedMinMax(this.renderedMin));
         },
@@ -51891,7 +52185,7 @@ var QuestionTextModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionTextModel.prototype, "isValueGreaterMax", {
         get: function () {
-            return (!this.isValueEmpty(this.renderedMax) &&
+            return (!this.isValueEmpty(this.renderedMax) && !this.isEmpty() &&
                 this.getCalculatedMinMax(this.value) >
                     this.getCalculatedMinMax(this.renderedMax));
         },
@@ -53607,14 +53901,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;
@@ -54010,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 })));
@@ -54629,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"]));
@@ -55446,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;
     };
@@ -55489,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 () {
@@ -55523,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;
             }
         }
     };
@@ -55967,6 +56282,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 ||
@@ -55985,6 +56301,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var SurveyQuestionImage = /** @class */ (function (_super) {
     __extends(SurveyQuestionImage, _super);
     function SurveyQuestionImage(props) {
@@ -56008,25 +56325,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"]));
@@ -56209,20 +56531,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 },
@@ -58165,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 ||
@@ -60541,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 ||
@@ -60978,7 +61303,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 () {
@@ -61653,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) {
@@ -61670,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"]));
@@ -62314,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",
@@ -62663,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 ||
@@ -62690,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.
  */
@@ -63802,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);
@@ -64002,8 +64345,7 @@ var SurveyModel = /** @class */ (function (_super) {
         /**
          * An event that is raised after a trigger is executed.
          *
-         * - `sender`: `SurveyModel`- A survey instance that raised the event.
-         * - `options.trigger`: [`Trigger`](https://surveyjs.io/form-library/documentation/api-reference/trigger) - A trigger that has been executed.
+         * For information on event handler parameters, refer to descriptions within the interface.
          *
          * For more information about triggers, refer to the following help topic: [Conditional Survey Logic (Triggers)](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#conditional-survey-logic-triggers).
          * @see triggers
@@ -64012,15 +64354,6 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.onTriggerExecuted = _this.addEvent();
         /**
          * An event that is raised before the survey is completed. Use this event to prevent survey completion.
-         *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.allow`: `Boolean`\
-         * Set this property to `false` if you want to prevent survey completion.
-         * - `options.isCompleteOnTrigger`: `Boolean`\
-         * Returns `true` if survey completion is caused by the ["complete" trigger](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#complete).
          * @see onComplete
          * @see doComplete
          * @see allowCompleteSurveyAutomatic
@@ -64029,20 +64362,7 @@ var SurveyModel = /** @class */ (function (_super) {
         /**
          * An event that is raised after the survey is completed. Use this event to send survey results to the server.
          *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event. Use `sender.data` to access survey results.
-         * - `options.isCompleteOnTrigger`: `Boolean`\
-         * Returns `true` if survey completion is caused by the ["complete" trigger](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#complete).
-         * - `options.showSaveInProgress(text?: string)`\
-         * Call this method to indicate that the save operation is in progress. You can use the `text` parameter to display a custom message.
-         * - `options.showSaveError(text?: string)`\
-         * Call this method to indicate that an error occurred during the save operation. You can use the `text` parameter to display a custom error message.
-         * - `options.showSaveSuccess(text?: string)`\
-         * Call this method to indicate that survey results are successfully saved. You can use the `text` parameter to display a custom message.
-         * - `options.clearSaveMessages()`\
-         * Call this method to hide the save operation messages.
+         * For information on event handler parameters, refer to descriptions within the interface.
          *
          * For an example of how to use the methods described above, refer to the following help topic: [Store Survey Results in Your Own Database](https://surveyjs.io/form-library/documentation/handle-survey-results-store#store-survey-results-in-your-own-database).
          *
@@ -64055,47 +64375,24 @@ var SurveyModel = /** @class */ (function (_super) {
         /**
          * An event that is raised before the survey displays a [preview](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#preview-page). Use this event to cancel the preview.
          *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.allow`: `Boolean`\
-         * Set this property to `false` if you want to cancel the preview.
          * @see showPreviewBeforeComplete
          */
         _this.onShowingPreview = _this.addEvent();
         /**
          * An event that is raised before the survey navigates to a specified URL. Use this event to change the URL or cancel the navigation.
-         *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.url`: `String`\
-         * A URL to which respondents should be navigated. You can modify this parameter's value.
-         * - `options.allow`: `Boolean`\
-         * Set this property to `false` if you want to cancel the navigation and show the [complete page](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#complete-page).
          * @see navigateToUrl
          * @see navigateToUrlOnCondition
          */
         _this.onNavigateToUrl = _this.addEvent();
         /**
          * An event that is raised when the survey [`state`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#state) changes from `"starting"` to `"running"`. This occurs only if your survey includes a [start page](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#start-page).
-         *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
          * @see firstPageIsStarted
          */
         _this.onStarted = _this.addEvent();
         /**
          * Use this event to save incomplete survey results. Enable the [`sendResultOnPageNext`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#sendResultOnPageNext) property for this event to occur.
          *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
+         * For information on event handler parameters, refer to descriptions within the interface.
          *
          * Refer to the following help topic for more information on the use case: [Continue an Incomplete Survey](https://surveyjs.io/form-library/documentation/handle-survey-results-continue-incomplete).
          */
@@ -64103,20 +64400,6 @@ var SurveyModel = /** @class */ (function (_super) {
         /**
          * An event that is raised before the current page is switched.
          *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.oldCurrentPage`: [`PageModel`](https://surveyjs.io/form-library/documentation/api-reference/page-model)\
-         * The current page.
-         * - `options.newCurrentPage`: [`PageModel`](https://surveyjs.io/form-library/documentation/api-reference/page-model)\
-         * A page that will be current.
-         * - `options.allow`: `Boolean`\
-         * Set this property to `false` if you do not want to switch the current page.
-         * - `options.isNextPage`: `Boolean`\
-         * Returns `true` if the respondent is going forward along the survey.
-         * - `options.isPrevPage`: `Boolean`\
-         * Returns `true` if the respondent is going backwards, that is, `newCurrentPage` is earlier in the survey than `oldCurrentPage`.
          * @see currentPageNo
          * @see nextPage
          * @see prevPage
@@ -64125,18 +64408,6 @@ var SurveyModel = /** @class */ (function (_super) {
         /**
          * An event that is raised after the current page is switched.
          *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.oldCurrentPage`: [`PageModel`](https://surveyjs.io/form-library/documentation/api-reference/page-model)\
-         * A page that used to be current.
-         * - `options.newCurrentPage`: [`PageModel`](https://surveyjs.io/form-library/documentation/api-reference/page-model)\
-         * The current page.
-         * - `options.isNextPage`: `Boolean`\
-         * Returns `true` if the respondent is going forward along the survey.
-         * - `options.isPrevPage`: `Boolean`\
-         * Returns `true` if the respondent is going backwards, that is, `newCurrentPage` is earlier in the survey than `oldCurrentPage`.
          * @see currentPageNo
          * @see nextPage
          * @see prevPage
@@ -64144,35 +64415,13 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.onCurrentPageChanged = _this.addEvent();
         /**
          * An event that is raised before a question value is changed.
-         *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.name`: `String`\
-         * The `name` of the question whose value is being changed. If you use the [`valueName`](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model#valueName) property, this parameter contains its value.
-         * - `options.question`: [`Question`](https://surveyjs.io/form-library/documentation/api-reference/question)\
-         * The question whose value is being changed. If you use `valueName` and it is the same for several questions, this parameter contains the first question.
-         * - `options.oldValue`: `any`\
-         * A previous value.
-         * - `options.value`: `any`\
-         * A new value. You can change it if required.
          * @see setValue
          */
         _this.onValueChanging = _this.addEvent();
         /**
-         * An event that is raised after a question value is changed.
+         * An event that is raised after a question value is changed
          *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.name`: `String`\
-         * The `name` of the question whose value has been changed. If you use the [`valueName`](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model#valueName) property, this parameter contains its value.
-         * - `options.question`: [`Question`](https://surveyjs.io/form-library/documentation/api-reference/question)\
-         * The question whose value has been changed. If you use `valueName`, and it is the same for several questions, this parameter contains the first question.
-         * - `options.value`: `any`\
-         * A new value.
+         * For information on event handler parameters, refer to descriptions within the interface.
          *
          * To handle value changes in matrix cells or panels within a [Dynamic Panel](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model), use the [`onMatrixCellValueChanged`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onMatrixCellValueChanged) or [`onDynamicPanelItemValueChanged`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onDynamicPanelItemValueChanged) event.
          * @see setValue
@@ -64181,14 +64430,6 @@ var SurveyModel = /** @class */ (function (_super) {
         /**
          * An event that is raised after a [variable](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#variables) or [calculated value](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#calculated-values) is changed.
          *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.name`: `String`\
-         * The name of the variable or calculated value that has been changed.
-         * - `options.value`: `any`\
-         * A new value for the variable or calculated value.
          * @see setVariable
          * @see calculatedValues
          */
@@ -64196,16 +64437,7 @@ var SurveyModel = /** @class */ (function (_super) {
         /**
          * An event that is raised after question visibility is changed.
          *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.question`: [`Question`](https://surveyjs.io/form-library/documentation/api-reference/question)\
-         * A question whose visibility has been changed.
-         * - `options.name`: `String`\
-         * The question's name.
-         * - `options.visible`: `Boolean`\
-         * Indicates whether the question is visible now.
+         * For information on event handler parameters, refer to descriptions within the interface.
          *
          * Refer to the following help topic for information on how to implement conditional visibility: [Conditional Visibility](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#conditional-visibility).
          */
@@ -64218,14 +64450,7 @@ var SurveyModel = /** @class */ (function (_super) {
         /**
          * An event that is raised after page visibility is changed.
          *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.page`: [`PageModel`](https://surveyjs.io/form-library/documentation/api-reference/page-model)\
-         * A page whose visibility has been changed.
-         * - `options.visible`: `Boolean`\
-         * Indicates whether the page is visible now.
+         * For information on event handler parameters, refer to descriptions within the interface.
          *
          * Refer to the following help topic for information on how to implement conditional visibility: [Conditional Visibility](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#conditional-visibility).
          */
@@ -64233,14 +64458,7 @@ var SurveyModel = /** @class */ (function (_super) {
         /**
          * An event that is raised after page visibility is changed.
          *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.panel`: [`PanelModel`](https://surveyjs.io/form-library/documentation/api-reference/panel-model)\
-         * A panel whose visibility has been changed.
-         * - `options.visible`: `Boolean`\
-         * Indicates whether the panel is visible now.
+         * For information on event handler parameters, refer to descriptions within the interface.
          *
          * Refer to the following help topic for information on how to implement conditional visibility: [Conditional Visibility](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#conditional-visibility).
          */
@@ -64250,12 +64468,7 @@ var SurveyModel = /** @class */ (function (_super) {
          *
          * In a survey, complex elements ([Dynamic Matrix](https://surveyjs.io/form-library/examples/questiontype-matrixdynamic/), [Multiple Text](https://surveyjs.io/form-library/examples/questiontype-multipletext/), and [Dynamic Panel](https://surveyjs.io/form-library/examples/questiontype-paneldynamic/)) are composed of questions. Use this event to customize any question regardless of which survey element it belongs to.
          *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.question`: [`Question`](https://surveyjs.io/form-library/documentation/api-reference/question)\
-         * A created question.
+         * For information on event handler parameters, refer to descriptions within the interface.
          *
          * To use this event for questions loaded from JSON, create an empty survey model, add an event handler, and only then populate the model from the JSON object:
          *
@@ -64280,20 +64493,7 @@ var SurveyModel = /** @class */ (function (_super) {
         /**
          * An event that is raised when a new question is added to a panel or page.
          *
-         * * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.question`: [`Question`](https://surveyjs.io/form-library/documentation/api-reference/question)\
-         * A new question.
-         * - `options.name`: `String`\
-         * The question's name.
-         * - `options.index`: `Number`\
-         * The question's index within the parent container (panel or page).
-         * - `options.parent`: [`PanelModelBase`](https://surveyjs.io/form-library/documentation/api-reference/panelmodelbase)\
-         * The parent container (panel or page).
-         * - `options.page`: [`PanelModelBase`](https://surveyjs.io/form-library/documentation/api-reference/panelmodelbase)\
-         * A page that nests the added question.
+         * For information on event handler parameters, refer to descriptions within the interface.
          *
          * To use this event for questions loaded from JSON, create an empty survey model, add an event handler, and only then populate the model from the JSON object:
          *
@@ -64317,76 +64517,25 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.onQuestionAdded = _this.addEvent();
         /**
          * An event that is raised after a question is deleted from the survey.
-         *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.question`: [`Question`](https://surveyjs.io/form-library/documentation/api-reference/question)\
-         * A deleted question.
-         * - `options.name`: `String`\
-         * The question's name.
          */
         _this.onQuestionRemoved = _this.addEvent();
         /**
-         *  An event that is raised when a new panel is added to a page.
-         *
-         * * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.panel`: [`PanelModel`](https://surveyjs.io/form-library/documentation/api-reference/panel-model)\
-         * A new panel.
-         * - `options.name`: `String`\
-         * The panel's name.
-         * - `options.index`: `Number`\
-         * The panel's index within the parent container (panel or page).
-         * - `options.parent`: [`PanelModelBase`](https://surveyjs.io/form-library/documentation/api-reference/panelmodelbase)\
-         * The parent container (panel or page).
-         * - `options.page`: [`PanelModelBase`](https://surveyjs.io/form-library/documentation/api-reference/panelmodelbase)\
-         * A page that nests the added panel.
+         * An event that is raised when a new panel is added to a page.
          */
         _this.onPanelAdded = _this.addEvent();
         /**
          * An event that is raised after a panel is deleted from the survey.
-         *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.panel`: [`PanelModel`](https://surveyjs.io/form-library/documentation/api-reference/panel-model)\
-         * A deleted panel.
-         * - `options.name`: `String`\
-         * The panel's name.
          */
         _this.onPanelRemoved = _this.addEvent();
         /**
-         *  An event that is raised when a new page is added to the survey.
-         *
-         * * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.page`: [`PageModel`](https://surveyjs.io/form-library/documentation/api-reference/page-model)\
-         * A new page.
+         * An event that is raised when a new page is added to the survey.
          * @see PanelModel
          */
         _this.onPageAdded = _this.addEvent();
         /**
          * An event that is raised when a question value is being validated. Use this event to specify a custom error message.
          *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.question`: [`Question`](https://surveyjs.io/form-library/documentation/api-reference/question)\
-         * A question being validated.
-         * - `options.name`: `String`\
-         * The question's name.
-         * - `options.value`: `any`\
-         * A question value being validated.
-         * - `options.error`: `String`\
-         * An error message that you should specify if validation fails.
+         * For information on event handler parameters, refer to descriptions within the interface.
          *
          * [View Demo](https://surveyjs.io/form-library/examples/add-custom-input-validation/ (linkStyle))
          * @see onServerValidateQuestions
@@ -64397,25 +64546,13 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.onValidateQuestion = _this.addEvent();
         /**
          * An event that is raised before errors are assigned to a question. You may add/remove/modify errors for a question.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.question` - a validated question.
-         * - `options.errors` - the list of errors. The list is empty by default and remains empty if a validated question has no errors.
          * @see onValidateQuestion
          */
         _this.onSettingQuestionErrors = _this.addEvent();
         /**
          * Use this event to validate data on your server.
          *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.data`: `Object`\
-         * Question values. You can get an individual question value as follows: `options.data["questionName"]`.
-         * - `options.errors`: `Object`\
-         * An object for your error messages. Set error messages as follows: `options.errors["questionName"] = "My error message"`
-         * - `options.complete()`: Method\
-         * A method that you should call when a request to the server has completed.
+         * For information on event handler parameters, refer to descriptions within the interface.
          *
          * [View Demo](https://surveyjs.io/form-library/examples/javascript-server-side-form-validation/ (linkStyle))
          * @see onValidateQuestion
@@ -64425,16 +64562,7 @@ var SurveyModel = /** @class */ (function (_super) {
         /**
          * An event that is raised when a panel is being validated. Use this event to specify a custom error message.
          *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.panel`: [`PanelModel`](https://surveyjs.io/form-library/documentation/api-reference/panel-model)\
-         * A panel being validated.
-         * - `options.name`: `String`\
-         * The panel's name.
-         * - `options.error`: `String`\
-         * An error message that you should specify if validation fails.
+         * For information on event handler parameters, refer to descriptions within the interface.
          *
          * [View Demo](https://surveyjs.io/form-library/examples/add-custom-input-validation/ (linkStyle))
          * @see onValidateQuestion
@@ -64443,26 +64571,14 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.onValidatePanel = _this.addEvent();
         /**
          * Use the event to change the default error text.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.text` - an error text.
-         * - `options.error` - an instance of the `SurveyError` object.
-         * - `options.obj` - an instance of Question, Panel or Survey object to where error is located.
-         * - `options.name` - the error name. The following error names are available:
-         * required, requireoneanswer, requirenumeric, exceedsize, webrequest, webrequestempty, otherempty,
-         * uploadingfile, requiredinallrowserror, minrowcounterror, keyduplicationerror, custom
          */
         _this.onErrorCustomText = _this.addEvent();
         /**
          * Use the this event to be notified when the survey finished validate questions on the current page. It commonly happens when a user try to go to the next page or complete the survey
-         * options.questions - the list of questions that have errors
-         * options.errors - the list of errors
-         * options.page - the page where question(s) are located
          */
         _this.onValidatedErrorsOnCurrentPage = _this.addEvent();
         /**
          * Use this event to modify the HTML content before rendering, for example `completeHtml` or `loadingHtml`.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.html` - an HTML that you may change before text processing and then rendering. specifies the modified HTML content.
          * @see completedHtml
          * @see loadingHtml
          * @see QuestionHtmlModel.html
@@ -64470,98 +64586,56 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.onProcessHtml = _this.addEvent();
         /**
          * Use this event to change a question's display text.
-         *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.question`: [`Question`](https://surveyjs.io/form-library/documentation/api-reference/question)\
-         * A Question instance for which the event is raised.
-         * - `options.displayValue`: `String`\
-         * A question's display text. You can assign a custom value to this parameter.
          */
         _this.onGetQuestionDisplayValue = _this.addEvent();
         /**
          * Use this event to change the question title in code. If you want to remove question numbering then set showQuestionNumbers to "off".
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.title` - a calculated question title, based on question `title`, `name`.
-         * - `options.question` - a question object.
          * @see showQuestionNumbers
          * @see requiredText
          */
         _this.onGetQuestionTitle = _this.addEvent();
         /**
          * Use this event to change the element title tag name that renders by default.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.element` - an element (question, panel, page and survey) that SurveyJS is going to render.
-         * - `options.tagName` - an element title tagName that are used to render a title. You can change it from the default value.
          * @see showQuestionNumbers
          * @see requiredText
          */
         _this.onGetTitleTagName = _this.addEvent();
         /**
          * Use this event to change the question no in code. If you want to remove question numbering then set showQuestionNumbers to "off".
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.no` - a calculated question no, based on question `visibleIndex`, survey `.questionStartIndex` properties. You can change it.
-         * - `options.question` - a question object.
          * @see showQuestionNumbers
          * @see questionStartIndex
          */
         _this.onGetQuestionNo = _this.addEvent();
         /**
          * Use this event to change the progress text in code.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.text` - a progress text, that SurveyJS will render in progress bar.
-         * - `options.questionCount` - a number of questions that have input(s). We do not count html or expression questions
-         * - `options.answeredQuestionCount` - a number of questions that have input(s) and an user has answered.
-         * - `options.requiredQuestionCount` - a number of required questions that have input(s). We do not count html or expression questions
-         * - `options.requiredAnsweredQuestionCount` - a number of required questions that have input(s) and an user has answered.
          *  @see progressBarType
          */
         _this.onProgressText = _this.addEvent();
         /**
          * Use this event to process the markdown text.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.element` - SurveyJS element (a question, panel, page, or survey) where the string is going to be rendered.
-         * - `options.name` - a property name is going to be rendered.
-         * - `options.text` - a text that is going to be rendered.
-         * - `options.html` - an HTML content. It is `null` by default. Use this property to specify the HTML content rendered instead of `options.text`.
+         *
+         * For information on event handler parameters, refer to descriptions within the interface.
          *
          * [View Demo](https://surveyjs.io/form-library/examples/edit-survey-questions-markdown/ (linkStyle))
          */
         _this.onTextMarkdown = _this.addEvent();
         /**
          * Use this event to specity render component name used for text rendering.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.element` - SurveyJS element (a question, panel, page, or survey) where the string is going to be rendered.
-         * - `options.name` - a property name is going to be rendered.
-         * - `options.renderAs` - a component name used for text rendering.
          */
         _this.onTextRenderAs = _this.addEvent();
         /**
          * The event fires when it gets response from the [api.surveyjs.io](https://api.surveyjs.io) service on saving survey results. Use it to find out if the results have been saved successfully.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.success` - it is `true` if the results has been sent to the service successfully.
-         * - `options.response` - a response from the service.
          */
         _this.onSendResult = _this.addEvent();
         /**
          * Use it to get results after calling the `getResult` method. It returns a simple analytics from [api.surveyjs.io](https://api.surveyjs.io) service.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.success` - it is `true` if the results were got from the service successfully.
-         * - `options.data` - the object `{AnswersCount, QuestionResult : {} }`. `AnswersCount` is the number of posted survey results. `QuestionResult` is an object with all possible unique answers to the question and number of these answers.
-         * - `options.dataList` - an array of objects `{name, value}`, where `name` is a unique value/answer to the question and `value` is a number/count of such answers.
-         * - `options.response` - the server response.
          * @see getResult
          */
         _this.onGetResult = _this.addEvent();
         /**
          * An event that is raised on uploading the file in QuestionFile when `storeDataAsText` is set to `false`. Use this event to change the uploaded file name or to prevent a particular file from being uploaded.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.question` - the file question instance.
-         * - `options.name` - the question name.
-         * - `options.files` - the Javascript File objects array to upload.
-         * - `options.callback` - a callback function to get the file upload status and the updloaded file content.
+         *
+         * For information on event handler parameters, refer to descriptions within the interface.
          *
          * [View Demo](https://surveyjs.io/form-library/examples/questiontype-file/ (linkStyle))
          * @see uploadFiles
@@ -64572,12 +64646,8 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.onUploadFiles = _this.addEvent();
         /**
          * An event that is raised on downloading a file in QuestionFile. Use this event to pass the file to a preview.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `question` - the question instance.
-         * - `options.name` - the question name.
-         * - `options.content` - the file content.
-         * - `options.fileValue` - single file question value.
-         * - `options.callback` - a callback function to get the file downloading status and the downloaded file content.
+         *
+         * For information on event handler parameters, refer to descriptions within the interface.
          *
          * [View Demo](https://surveyjs.io/form-library/examples/questiontype-file/ (linkStyle))
          * @see downloadFile
@@ -64587,12 +64657,8 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.onDownloadFile = _this.addEvent();
         /**
          * This event is fired on clearing the value in a QuestionFile. Use this event to remove files stored on your server.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `question` - the question instance.
-         * - `options.name` - the question name.
-         * - `options.value` - the question value.
-         * - `options.fileName` - a removed file's name, set it to `null` to clear all files.
-         * - `options.callback` - a callback function to get the operation status.
+         *
+         * For information on event handler parameters, refer to descriptions within the interface.
          *
          * [View Demo](https://surveyjs.io/form-library/examples/file-delayed-upload/ (linkStyle))
          * @see clearFiles
@@ -64603,16 +64669,11 @@ var SurveyModel = /** @class */ (function (_super) {
         /**
          * An event that is raised after choices for radiogroup, checkbox, and dropdown has been loaded from a RESTful service and before they are assigned to a question.
          * You may change the choices, before they are assigned or disable/enabled make visible/invisible question, based on loaded results.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `question` - the question where loaded choices are going to be assigned.
-         * - `choices` - the loaded choices. You can change the loaded choices to before they are assigned to question.
-         * - `serverResult` - a result that comes from the server as it is.
          */
         _this.onLoadChoicesFromServer = _this.addEvent();
         /**
          * An event that is raised after survey is loaded from api.surveyjs.io service.
          * You can use this event to perform manipulation with the survey model after it was loaded from the web service.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
          * @see surveyId
          * @see loadSurveyFromService
          */
@@ -64621,69 +64682,48 @@ var SurveyModel = /** @class */ (function (_super) {
          * An event that is raised on processing the text when it finds a text in brackets: `{somevalue}`. By default, it uses the value of survey question values and variables.
          * For example, you may use the text processing in loading choices from the web. If your `choicesByUrl.url` equals to "UrlToServiceToGetAllCities/{country}/{state}",
          * you may set on this event `options.value` to "all" or empty string when the "state" value/question is non selected by a user.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.name` - the name of the processing value, for example, "state" in our example.
-         * - `options.value` - the value of the processing text.
-         * - `options.isExists` - a boolean value. Set it to `true` if you want to use the value and set it to `false` if you don't.
          */
         _this.onProcessTextValue = _this.addEvent();
         /**
          * An event that is raised before rendering a question. Use it to override the default question CSS classes.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.question` - a question for which you can change the CSS classes.
-         * - `options.cssClasses` - an object with CSS classes. For example `{root: "table", button: "button"}`. You can change them to your own CSS classes.
+         *
+         * For information on event handler parameters, refer to descriptions within the interface.
          *
          * [View Demo](https://surveyjs.io/form-library/examples/survey-cssclasses/ (linkStyle))
          */
         _this.onUpdateQuestionCssClasses = _this.addEvent();
         /**
          * An event that is raised before rendering a panel. Use it to override the default panel CSS classes.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.panel` - a panel for which you can change the CSS classes.
-         * - `options.cssClasses` - an object with CSS classes. For example `{title: "sv_p_title", description: "small"}`. You can change them to your own CSS classes.
          */
         _this.onUpdatePanelCssClasses = _this.addEvent();
         /**
          * An event that is raised before rendering a page. Use it to override the default page CSS classes.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.page` - a page for which you can change the CSS classes.
-         * - `options.cssClasses` - an object with CSS classes. For example `{title: "sv_p_title", description: "small"}`. You can change them to your own CSS classes.
          */
         _this.onUpdatePageCssClasses = _this.addEvent();
         /**
          * An event that is raised before rendering a choice item in radiogroup, checkbox or dropdown questions. Use it to override the default choice item css.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.question` - a question where choice item is rendered.
-         * - `options.item` - a choice item of ItemValue type. You can get value or text choice properties as options.item.value or options.choice.text
-         * - `options.css` - a string with css classes divided by space. You can change it.
          */
         _this.onUpdateChoiceItemCss = _this.addEvent();
         /**
          * An event that is raised right after survey is rendered in DOM.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.htmlElement` - a root HTML element bound to the survey object.
          */
         _this.onAfterRenderSurvey = _this.addEvent();
         /**
          * An event that is raised right after a page is rendered in DOM. Use it to modify HTML elements.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.htmlElement` - an HTML element bound to the survey header object.
          */
         _this.onAfterRenderHeader = _this.addEvent();
         /**
          * An event that is raised right after a page is rendered in DOM. Use it to modify HTML elements.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.page` - a page object for which the event is fired. Typically the current/active page.
-         * - `options.htmlElement` - an HTML element bound to the page object.
+         *
+         * For information on event handler parameters, refer to descriptions within the interface.
          *
          * [View Demo](https://surveyjs.io/form-library/examples/survey-afterrender/ (linkStyle))
          */
         _this.onAfterRenderPage = _this.addEvent();
         /**
          * An event that is raised right after a question is rendered in DOM. Use it to modify HTML elements.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.question` - a question object for which the event is fired.
-         * - `options.htmlElement` - an HTML element bound to the question object.
+         *
+         * For information on event handler parameters, refer to descriptions within the interface.
          *
          * [View Demo](https://surveyjs.io/form-library/examples/survey-afterrender/ (linkStyle))
          */
@@ -64691,45 +64731,24 @@ var SurveyModel = /** @class */ (function (_super) {
         /**
          * An event that is raised right after a non-composite question (text, comment, dropdown, radiogroup, checkbox) is rendered in DOM. Use it to modify HTML elements.
          * This event is not fired for matrices, panels, multiple text and image picker.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.question` - a question object for which the event is fired.
-         * - `options.htmlElement` - an HTML element bound to the question object.
          */
         _this.onAfterRenderQuestionInput = _this.addEvent();
         /**
          * An event that is raised right after a panel is rendered in DOM. Use it to modify HTML elements.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.panel` - a panel object for which the event is fired
-         * - `options.htmlElement` - an HTML element bound to the panel object
          */
         _this.onAfterRenderPanel = _this.addEvent();
         /**
          * The event occurs when an element within a question gets focus.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.question` - A [question](https://surveyjs.io/Documentation/Library?id=Question) whose child element gets focus.
          * @see onFocusInPanel
          */
         _this.onFocusInQuestion = _this.addEvent();
         /**
          * The event occurs when an element within a panel gets focus.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.panel` - A [panel](https://surveyjs.io/Documentation/Library?id=PanelModelBase) whose child element gets focus.
          * @see onFocusInQuestion
          */
         _this.onFocusInPanel = _this.addEvent();
         /**
          * Use this event to change the visibility of an individual choice item in [Checkbox](https://surveyjs.io/Documentation/Library?id=questioncheckboxmodel), [Dropdown](https://surveyjs.io/Documentation/Library?id=questiondropdownmodel), [Radiogroup](https://surveyjs.io/Documentation/Library?id=questionradiogroupmodel), and other similar question types.
-         *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.question`\
-         * A Question instance to which the choice item belongs.
-         * - `options.item`\
-         * The choice item as specified in the [choices](https://surveyjs.io/Documentation/Library?id=QuestionSelectBase#choices) array.
-         * - `options.visible`\
-         * A Boolean value that specifies item visibility. Set it to `false` to hide the item.
          */
         _this.onShowingChoiceItem = _this.addEvent();
         /**
@@ -64737,20 +64756,7 @@ var SurveyModel = /** @class */ (function (_super) {
          *
          * This event is raised only for those questions that have the [`choicesLazyLoadEnabled`](https://surveyjs.io/form-library/documentation/questiondropdownmodel#choicesLazyLoadEnabled) property set to `true`.
          *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.question`\
-         * A Question instance for which the event is raised.
-         * - `options.skip`: `Number`\
-         * The number of choice items to skip.
-         * - `options.take`: `Number`\
-         * The number of choice items to load. You can use the question's [`choicesLazyLoadPageSize`](https://surveyjs.io/form-library/documentation/questiondropdownmodel#choicesLazyLoadPageSize) property to change this number.
-         * - `options.filter`\
-         * A search string used to filter choices.
-         * - `options.setItems(items: Array<any>, totalCount: Number)`\
-         * A method that you should call to assign loaded items to the question. Item objects should be structured as specified in the [`choices`](https://surveyjs.io/form-library/documentation/api-reference/dropdown-menu-model#choices) property description. If their structure is different, [map their properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to bring them to the required structure.
+         * For information on event handler parameters, refer to descriptions within the interface.
          *
          * [View Demo](https://surveyjs.io/form-library/examples/lazy-loading-dropdown/ (linkStyle))
          */
@@ -64760,45 +64766,25 @@ var SurveyModel = /** @class */ (function (_super) {
          *
          * If you load choices from a server (use [`choicesByUrl`](https://surveyjs.io/form-library/documentation/questiondropdownmodel#choicesByUrl) or [`onChoicesLazyLoad`](https://surveyjs.io/form-library/documentation/surveymodel#onChoicesLazyLoad)), display texts become available only when data is loaded, which does not happen until a user opens the drop-down menu. However, a display text for a default choice item is required before that. In this case, you can load data individually for the default item within the `onGetChoiceDisplayValue` event handler.
          *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.question`\
-         * A Question instance for which the event is raised.
-         * - `options.values`\
-         * An array of one (in Dropdown) or more (in Tag Box) default values.
-         * - `options.setItems(displayValues: Array<string>)`\
-         * A method that you should call to assign display texts to the question.
+         * For information on event handler parameters, refer to descriptions within the interface.
          *
          * [View Demo](https://surveyjs.io/form-library/examples/lazy-loading-dropdown/ (linkStyle))
          */
         _this.onGetChoiceDisplayValue = _this.addEvent();
         /**
          * An event that is raised on adding a new row in Matrix Dynamic question.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.question` - a matrix question.
-         * - `options.row` - a new added row.
          * @see QuestionMatrixDynamicModel
          * @see QuestionMatrixDynamicModel.visibleRows
          */
         _this.onMatrixRowAdded = _this.addEvent();
         /**
          * An event that is raised before adding a new row in Matrix Dynamic question.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.question` - a matrix question.
-         * - `options.canAddRow` - specifies whether a new row can be added
          * @see QuestionMatrixDynamicModel
          * @see QuestionMatrixDynamicModel.visibleRows
          */
         _this.onMatrixBeforeRowAdded = _this.addEvent();
         /**
          * An event that is raised before removing a row from Matrix Dynamic question. You can disable removing and clear the data instead.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.question` - a matrix question.
-         * - `options.rowIndex` - a row index.
-         * - `options.row` - a row object.
-         * - `options.allow` - a boolean property. Set it to `false` to disable the row removing.
          * @see QuestionMatrixDynamicModel
          * @see onMatrixRowRemoved
          * @see onMatrixAllowRemoveRow
@@ -64806,10 +64792,6 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.onMatrixRowRemoving = _this.addEvent();
         /**
          * An event that is raised on removing a row from Matrix Dynamic question.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.question` - a matrix question
-         * - `options.rowIndex` - a removed row index
-         * - `options.row` - a removed row object
          * @see QuestionMatrixDynamicModel
          * @see QuestionMatrixDynamicModel.visibleRows
          * @see onMatrixRowRemoving
@@ -64818,11 +64800,6 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.onMatrixRowRemoved = _this.addEvent();
         /**
          * An event that is raised before rendering "Remove" button for removing a row from Matrix Dynamic question.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.question` - a matrix question.
-         * - `options.rowIndex` - a row index.
-         * - `options.row` - a row object.
-         * - `options.allow` - a boolean property. Set it to `false` to disable the row removing.
          * @see QuestionMatrixDynamicModel
          * @see onMatrixRowRemoving
          * @see onMatrixRowRemoved
@@ -64830,13 +64807,6 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.onMatrixAllowRemoveRow = _this.addEvent();
         /**
          * An event that is raised before creating cell question in the matrix. You can change the cell question type by setting different options.cellType.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.question` - the matrix question.
-         * - `options.cellType` - the cell question type. You can change it.
-         * - `options.rowValue` - the value of the current row. To access a particular column's value within the current row, use: `options.rowValue["columnValue"]`.
-         * - `options.column` - the matrix column object.
-         * - `options.columnName` - the matrix column name.
-         * - `options.row` - the matrix row object.
          * @see onMatrixBeforeRowAdded
          * @see onMatrixCellCreated
          * @see QuestionMatrixDynamicModel
@@ -64845,14 +64815,6 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.onMatrixCellCreating = _this.addEvent();
         /**
           * An event that is raised for every cell created in Matrix Dynamic and Matrix Dropdown questions.
-          * - `sender`: `SurveyModel` - A survey instance that raised the event.
-          * - `options.question` - the matrix question.
-          * - `options.cell` - the matrix cell.
-          * - `options.cellQuestion` - the question/editor in the cell. You may customize it, change it's properties, like choices or visible.
-          * - `options.rowValue` - the value of the current row. To access a particular column's value within the current row, use: `options.rowValue["columnValue"]`.
-          * - `options.column` - the matrix column object.
-          * - `options.columnName` - the matrix column name.
-          * - `options.row` - the matrix row object.
           * @see onMatrixBeforeRowAdded
           * @see onMatrixCellCreating
           * @see onMatrixRowAdded
@@ -64862,13 +64824,6 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.onMatrixCellCreated = _this.addEvent();
         /**
          * An event that is raised for every cell after is has been rendered in DOM.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.question` - the matrix question.
-         * - `options.cell` - the matrix cell.
-         * - `options.cellQuestion` - the question/editor in the cell.
-         * - `options.htmlElement` - an HTML element bound to the `cellQuestion` object.
-         * - `options.column` - the matrix column object.
-         * - `options.row` - the matrix row object.
          * @see onMatrixCellCreated
          * @see QuestionMatrixDynamicModel
          * @see QuestionMatrixDropdownModel
@@ -64876,12 +64831,6 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.onMatrixAfterCellRender = _this.addEvent();
         /**
          * An event that is raised when cell value is changed in Matrix Dynamic and Matrix Dropdown questions.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.question` - the matrix question.
-         * - `options.columnName` - the matrix column name.
-         * - `options.value` - a new value.
-         * - `options.row` - the matrix row object.
-         * - `options.getCellQuestion(columnName)` - the function that returns the cell question by column name.
          * @see onMatrixCellValueChanging
          * @see onMatrixBeforeRowAdded
          * @see onMatrixRowAdded
@@ -64891,13 +64840,6 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.onMatrixCellValueChanged = _this.addEvent();
         /**
          * An event that is raised on changing cell value in Matrix Dynamic and Matrix Dropdown questions. You may change the `options.value` property to change a cell value.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.question` - the matrix question.
-         * - `options.columnName` - the matrix column name.
-         * - `options.value` - a new value.
-         * - `options.oldValue` - the old value.
-         * - `options.row` - the matrix row object.
-         * - `options.getCellQuestion(columnName)` - the function that returns a cell question by column name.
          * @see onMatrixCellValueChanged
          * @see onMatrixBeforeRowAdded
          * @see onMatrixRowAdded
@@ -64907,13 +64849,6 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.onMatrixCellValueChanging = _this.addEvent();
         /**
          * An event that is raised when Matrix Dynamic and Matrix Dropdown questions validate the cell value.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.error` - an error string. It is empty by default.
-         * - `options.question` - the matrix question.
-         * - `options.columnName` - the matrix column name.
-         * - `options.value` - a cell value.
-         * - `options.row` - the matrix row object.
-         * - `options.getCellQuestion(columnName)` - the function that returns the cell question by column name.
          * @see onMatrixBeforeRowAdded
          * @see onMatrixRowAdded
          * @see QuestionMatrixDynamicModel
@@ -64922,63 +64857,22 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.onMatrixCellValidate = _this.addEvent();
         /**
          * An event that is raised on adding a new column in Matrix Dynamic or Matrix Dropdown question.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.question` - a matrix question.
-         * - `options.column` - a new added column.
          */
         _this.onMatrixColumnAdded = _this.addEvent();
         /**
          * An event that is raised on adding a new item in Multiple Text question.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.question` - a multiple text question.
-         * - `options.item` - a new added item.
          */
         _this.onMultipleTextItemAdded = _this.addEvent();
         /**
          * An event that is raised after a new panel is added to a [Dynamic Panel](https://surveyjs.io/form-library/examples/questiontype-paneldynamic/) question.
-         *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.question`: [`QuestionPanelDynamicModel`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model)\
-         * A Dynamic Panel question.
-         * - `options.panel`: [`PanelModel`](https://surveyjs.io/form-library/documentation/api-reference/panel-model)\
-         * An added panel.
-         * - `options.panelIndex`: `Number`\
-         * The panel's index within Dynamic Panel.
          */
         _this.onDynamicPanelAdded = _this.addEvent();
         /**
          * An event that is raised after a panel is deleted from a [Dynamic Panel](https://surveyjs.io/form-library/examples/questiontype-paneldynamic/) question.
-         *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.question`: [`QuestionPanelDynamicModel`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model)\
-         * A Dynamic Panel question.
-         * - `options.panel`: [`PanelModel`](https://surveyjs.io/form-library/documentation/api-reference/panel-model)\
-         * A deleted panel.
-         * - `options.panelIndex`: `Number`\
-         * The panel's index within Dynamic Panel.
          */
         _this.onDynamicPanelRemoved = _this.addEvent();
         /**
          * An event that is raised before a panel is deleted from a [Dynamic Panel](https://surveyjs.io/form-library/examples/questiontype-paneldynamic/) question. Use this event to cancel the deletion.
-         *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.question`: [`QuestionPanelDynamicModel`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model)\
-         * A Dynamic Panel question.
-         * - `options.panel`: [`PanelModel`](https://surveyjs.io/form-library/documentation/api-reference/panel-model)\
-         * A panel to be deleted.
-         * - `options.panelIndex`: `Number`\
-         * The panel's index within Dynamic Panel.
-         * - `options.allow`: `Boolean`\
-         * Set this property to `false` if you want to cancel the panel deletion.
          */
         _this.onDynamicPanelRemoving = _this.addEvent();
         /**
@@ -64990,126 +64884,68 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.onTimer = _this.addEvent();
         /**
          * An event that is raised before displaying a new information in the Timer Panel. Use it to change the default text.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.text` - the timer panel info text.
          */
         _this.onTimerPanelInfoText = _this.addEvent();
         /**
          * An event that is raised after an item value is changed in a panel within a [Dynamic Panel](https://surveyjs.io/form-library/examples/questiontype-paneldynamic/) question.
-         *
-         * Parameters:
-         *
-         * - `sender`: `SurveyModel`\
-         * A survey instance that raised the event.
-         * - `options.question`: [`QuestionPanelDynamicModel`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model)\
-         * A Dynamic Panel question.
-         * - `options.panel`: [`PanelModel`](https://surveyjs.io/form-library/documentation/api-reference/panel-model)\
-         * A panel that nests the item with a changed value.
-         * - `options.name`: `String`\
-         * The item's name.
-         * - `options.value`: `any`\
-         * The item's new value.
-         * - `options.panelIndex`: `Number`\
-         * The panel's index within Dynamic Panel.
-         * - `options.panelData`: `Object`\
-         * The panel's data object that includes all item values.
          */
         _this.onDynamicPanelItemValueChanged = _this.addEvent();
         /**
          * Use this event to define, whether an answer to a question is correct or not.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.question` - a question on which you have to decide if the answer is correct or not.
-         * - `options.result` - returns `true`, if an answer is correct, or `false`, if the answer is not correct. Use questions' `value` and `correctAnswer` properties to return the correct value.
-         * - `options.correctAnswers` - you may change the default number of correct or incorrect answers in the question, for example for matrix, where each row is a quiz question.
          * @see Question.value
          * @see Question.correctAnswer
          */
         _this.onIsAnswerCorrect = _this.addEvent();
         /**
          * Use this event to control drag&drop operations during design mode.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.allow` - set it to `false` to disable dragging.
-         * - `options.target` - a target element that is dragged.
-         * - `options.source` - a source element. It can be `null`, if it is a new element, dragging from toolbox.
-         * - `options.parent` - a page or panel where target element is dragging.
-         * - `options.insertBefore` - an element before the target element is dragging. It can be `null` if parent container (page or panel) is empty or dragging an element after the last element in a container.
-         * - `options.insertAfter` - an element after the target element is dragging. It can be `null` if parent container (page or panel) is empty or dragging element to the first position within the parent container.
          * @see setDesignMode
          * @see isDesignMode
          */
         _this.onDragDropAllow = _this.addEvent();
         /**
          * Use this event to control scrolling element to top. You can cancel the default behavior by setting options.cancel property to true.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.element` - an element that is going to be scrolled on top.
-         * - `options.question` - a question that is going to be scrolled on top. It can be null if options.page is not null.
-         * - `options.page` - a page that is going to be scrolled on top. It can be null if options.question is not null.
-         * - `options.elementId` - the unique element DOM Id.
-         * - `options.cancel` - set this property to true to cancel the default scrolling.
          */
         _this.onScrollingElementToTop = _this.addEvent();
         _this.onLocaleChangedEvent = _this.addEvent();
         /**
          * Use this event to create/customize actions to be displayed in a question's title.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.question` - A [Question](https://surveyjs.io/Documentation/Library?id=Question) object for which the event is fired.
-         * - `options.titleActions` - A list of actions ([IAction](https://surveyjs.io/Documentation/Library?id=IAction) objects) associated with the processed question.
-         * @see IAction
-         * @see Question
+         *
+         * For information on event handler parameters, refer to descriptions within the interface.
          *
          * [View Demo](https://surveyjs.io/form-library/examples/survey-titleactions/ (linkStyle))
-         */
+         * @see IAction
+         * @see Question
+        */
         _this.onGetQuestionTitleActions = _this.addEvent();
         /**
          * Use this event to create/customize actions to be displayed in a panel's title.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.panel` - A panel ([PanelModel](https://surveyjs.io/Documentation/Library?id=panelmodel) object) for which the event is fired.
-         * - `options.titleActions` - A list of actions ([IAction](https://surveyjs.io/Documentation/Library?id=IAction) objects) associated with the processed panel.
          * @see IAction
          * @see PanelModel
          */
         _this.onGetPanelTitleActions = _this.addEvent();
         /**
          * Use this event to create/customize actions to be displayed in a page's title.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.page` - A page ([PageModel](https://surveyjs.io/Documentation/Library?id=pagemodel) object) for which the event is fired.
-         * - `options.titleActions` - A list of actions ([IAction](https://surveyjs.io/Documentation/Library?id=IAction) objects) associated with the processed page.
          * @see IAction
          * @see PageModel
          */
         _this.onGetPageTitleActions = _this.addEvent();
         /**
          * An event that allows you to add, delete, or modify actions in the footer of a [Panel](https://surveyjs.io/form-library/documentation/panelmodel).
-         *
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.panel` - A Panel whose actions are being modified.
-         * - `options.actions` - An array of panel [actions](https://surveyjs.io/form-library/documentation/iaction). You can modify the entire array or individual actions within it.
-         * - `options.question` - A [Dynamic Panel](https://surveyjs.io/form-library/documentation/questionpaneldynamicmodel) to which the Panel belongs. This field is `undefined` if the Panel does not belong to any Dynamic Panel.
          */
         _this.onGetPanelFooterActions = _this.addEvent();
         /**
          * Use this event to create/customize actions to be displayed in a matrix question's row.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.question` - A matrix question ([QuestionMatrixBaseModel](https://surveyjs.io/Documentation/Library?id=questionmatrixbasemodel) object) for which the event is fired.
-         * - `options.row` - A matrix row for which the event is fired.
-         * - `options.actions` - A list of actions ([IAction](https://surveyjs.io/Documentation/Library?id=IAction) objects) associated with the processed matrix question and row.
          * @see IAction
          * @see QuestionMatrixDropdownModelBase
          */
         _this.onGetMatrixRowActions = _this.addEvent();
         /**
          * An event that is raised after the survey element content was collapsed or expanded.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.element` - Specifies which survey element content was collapsed or expanded.
          * @see onElementContentVisibilityChanged
          */
         _this.onElementContentVisibilityChanged = _this.addEvent();
         /**
          * An event that is raised before expression question convert it's value into display value for rendering.
-         * - `sender`: `SurveyModel` - A survey instance that raised the event.
-         * - `options.question` - The expression question.
-         * - `options.value` - The question value.
-         * - `options.displayValue` - the display value that you can change before rendering.
          */
         _this.onGetExpressionDisplayValue = _this.addEvent();
         /**
@@ -67860,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.
@@ -68933,6 +68769,7 @@ var SurveyModel = /** @class */ (function (_super) {
             this.isCompleted = false;
             return false;
         }
+        this.checkOnPageTriggers(true);
         var previousCookie = this.hasCookie;
         this.stopTimer();
         this.isCompleted = true;
@@ -69108,7 +68945,7 @@ var SurveyModel = /** @class */ (function (_super) {
     };
     SurveyModel.prototype.doNextPage = function () {
         var curPage = this.currentPage;
-        this.checkOnPageTriggers();
+        this.checkOnPageTriggers(false);
         if (!this.isCompleted) {
             if (this.sendResultOnPageNext) {
                 this.sendResult(this.surveyPostId, this.clientId, true);
@@ -69523,7 +69360,6 @@ var SurveyModel = /** @class */ (function (_super) {
         this.onDynamicPanelItemValueChanged.fire(this, options);
     };
     SurveyModel.prototype.dragAndDropAllow = function (options) {
-        options.allow = true;
         this.onDragDropAllow.fire(this, options);
         return options.allow;
     };
@@ -70082,7 +69918,7 @@ var SurveyModel = /** @class */ (function (_super) {
             questions[i].onSurveyValueChanged(this.getValue(questions[i].getValueName()));
         }
     };
-    SurveyModel.prototype.checkOnPageTriggers = function () {
+    SurveyModel.prototype.checkOnPageTriggers = function (isOnComplete) {
         var questions = this.getCurrentPageQuestions(true);
         var values = {};
         for (var i = 0; i < questions.length; i++) {
@@ -70107,7 +69943,8 @@ var SurveyModel = /** @class */ (function (_super) {
         }
         return result;
     };
-    SurveyModel.prototype.checkTriggers = function (key, isOnNextPage) {
+    SurveyModel.prototype.checkTriggers = function (key, isOnNextPage, isOnComplete) {
+        if (isOnComplete === void 0) { isOnComplete = false; }
         if (this.isCompleted || this.triggers.length == 0 || this.isDisplayMode)
             return;
         if (this.isTriggerIsRunning) {
@@ -70124,7 +69961,7 @@ var SurveyModel = /** @class */ (function (_super) {
         var prevCanBeCompleted = this.canBeCompletedByTrigger;
         this.canBeCompletedByTrigger = false;
         for (var i = 0; i < this.triggers.length; i++) {
-            this.triggers[i].checkExpression(isOnNextPage, this.triggerKeys, this.triggerValues, properties);
+            this.triggers[i].checkExpression(isOnNextPage, isOnComplete, this.triggerKeys, this.triggerValues, properties);
         }
         if (prevCanBeCompleted !== this.canBeCompletedByTrigger) {
             this.updateButtonsVisibility();
@@ -71444,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
     });
@@ -72131,34 +71969,37 @@ var surveyLocalization = {
     getLocaleStrings: function (loc) {
         return this.locales[loc];
     },
-    getCurrentStrings: function (locale) {
-        var loc = locale && this.locales[locale];
-        if (!loc)
-            loc = this.currentLocale ? this.locales[this.currentLocale] : this.locales[this.defaultLocale];
-        if (!loc)
-            loc = this.locales[this.defaultLocale];
-        if (!loc)
-            loc = this.locales["en"];
-        return loc;
-    },
     getString: function (strName, locale) {
+        var _this = this;
         if (locale === void 0) { locale = null; }
-        var originalLocale = locale;
-        locale = locale || this.currentLocale || this.defaultLocale;
-        var loc = this.getCurrentStrings(locale);
-        if (!!loc[strName])
-            return loc[strName];
-        var index = !!locale ? locale.indexOf("-") : -1;
-        if (index > -1)
-            return this.getString(strName, locale.substring(0, index));
-        loc = this.locales[this.defaultLocale];
-        var result = loc[strName];
-        if (result === undefined) {
-            result = this.locales["en"][strName];
-        }
-        if (result === undefined)
-            return this.onGetExternalString(strName, originalLocale);
-        return result;
+        var locs = new Array();
+        var addLocaleCore = function (locName) {
+            var strs = _this.locales[locName];
+            if (!!strs)
+                locs.push(strs);
+        };
+        var addLocale = function (locName) {
+            if (!locName)
+                return;
+            addLocaleCore(locName);
+            var index = locName.indexOf("-");
+            if (index < 1)
+                return;
+            locName = locName.substring(0, index);
+            addLocaleCore(locName);
+        };
+        addLocale(locale);
+        addLocale(this.currentLocale);
+        addLocale(this.defaultLocale);
+        if (this.defaultLocale !== "en") {
+            addLocaleCore("en");
+        }
+        for (var i = 0; i < locs.length; i++) {
+            var res = locs[i][strName];
+            if (res !== undefined)
+                return res;
+        }
+        return this.onGetExternalString(strName, locale);
     },
     getLocales: function (removeDefaultLoc) {
         if (removeDefaultLoc === void 0) { removeDefaultLoc = false; }
@@ -72440,13 +72281,14 @@ function createTOCListModel(survey) {
     });
     var listModel = new _list__WEBPACK_IMPORTED_MODULE_1__["ListModel"](items, function (item) {
         if (!!item.action()) {
-            listModel.allowSelection = true;
             listModel.selectedItem = item;
-            listModel.allowSelection = false;
         }
     }, true, items.filter(function (i) { return i.id === survey.currentPage.name; })[0]);
     listModel.allowSelection = false;
     listModel.locOwner = survey;
+    survey.onCurrentPageChanged.add(function (s, o) {
+        listModel.selectedItem = items.filter(function (i) { return i.id === survey.currentPage.name; })[0];
+    });
     return listModel;
 }
 
@@ -73032,11 +72874,16 @@ var Trigger = /** @class */ (function (_super) {
     Trigger.prototype.canBeExecuted = function (isOnNextPage) {
         return true;
     };
-    Trigger.prototype.checkExpression = function (isOnNextPage, keys, values, properties) {
+    Trigger.prototype.canBeExecutedOnComplete = function () {
+        return false;
+    };
+    Trigger.prototype.checkExpression = function (isOnNextPage, isOnComplete, keys, values, properties) {
         if (properties === void 0) { properties = null; }
         this.isExecutingOnNextPage = isOnNextPage;
         if (!this.canBeExecuted(isOnNextPage))
             return;
+        if (isOnComplete && !this.canBeExecutedOnComplete())
+            return;
         if (!this.isCheckRequired(keys))
             return;
         if (!!this.conditionRunner) {