survey-core 1.10.4 → 1.10.6

package/survey.core.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.10.4
+ * surveyjs - Survey JavaScript library v1.10.6
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -686,13 +686,14 @@ class SignaturePad extends SignatureEventTarget {
 /*!*******************************!*\
   !*** ./src/actions/action.ts ***!
   \*******************************/
-/*! exports provided: createDropdownActionModel, createDropdownActionModelAdvanced, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel */
+/*! exports provided: createDropdownActionModel, createDropdownActionModelAdvanced, createPopupModelWithListModel, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "createDropdownActionModel", function() { return createDropdownActionModel; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "createDropdownActionModelAdvanced", function() { return createDropdownActionModelAdvanced; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "createPopupModelWithListModel", function() { return createPopupModelWithListModel; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getActionDropdownButtonTarget", function() { return getActionDropdownButtonTarget; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "BaseAction", function() { return BaseAction; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Action", function() { return Action; });
@@ -733,36 +734,53 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 function createDropdownActionModel(actionOptions, dropdownOptions, locOwner) {
-    return createDropdownActionModelAdvanced(actionOptions, dropdownOptions, dropdownOptions, locOwner);
+    dropdownOptions.locOwner = locOwner;
+    return createDropdownActionModelAdvanced(actionOptions, dropdownOptions, dropdownOptions);
 }
-function createDropdownActionModelAdvanced(actionOptions, listOptions, popupOptions, locOwner) {
-    var listModel = new _list__WEBPACK_IMPORTED_MODULE_3__["ListModel"](listOptions.items, function (item) {
+function createDropdownActionModelAdvanced(actionOptions, listOptions, popupOptions) {
+    var _a;
+    var originalSelectionChanged = listOptions.onSelectionChanged;
+    listOptions.onSelectionChanged = function (item) {
+        var params = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            params[_i - 1] = arguments[_i];
+        }
         if (newAction.hasTitle) {
             newAction.title = item.title;
         }
-        listOptions.onSelectionChanged(item);
-        innerPopupModel.toggleVisibility();
-    }, listOptions.allowSelection, listOptions.selectedItem);
-    listModel.locOwner = locOwner;
-    listModel.setOnFilterStringChangedCallback(listOptions.onFilterStringChangedCallback);
-    var options = popupOptions || {};
-    options.onDispose = function () { listModel.dispose(); };
-    var innerPopupModel = new _popup__WEBPACK_IMPORTED_MODULE_4__["PopupModel"]("sv-list", { model: listModel }, options);
-    innerPopupModel.displayMode = popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.displayMode;
+        originalSelectionChanged(item, params);
+    };
+    var popupModel = createPopupModelWithListModel(listOptions, popupOptions);
     var newActionOptions = Object.assign({}, actionOptions, {
         component: "sv-action-bar-item-dropdown",
-        popupModel: innerPopupModel,
+        popupModel: popupModel,
         action: function (action, isUserAction) {
             !!(actionOptions.action) && actionOptions.action();
-            innerPopupModel.isFocusedContent = !isUserAction || listModel.showFilter;
-            innerPopupModel.toggleVisibility();
-            listModel.scrollToSelectedItem();
+            popupModel.isFocusedContent = popupModel.isFocusedContent || !isUserAction;
+            popupModel.show();
         },
     });
     var newAction = new Action(newActionOptions);
-    newAction.data = listModel;
+    newAction.data = (_a = popupModel.contentComponentData) === null || _a === void 0 ? void 0 : _a.model;
     return newAction;
 }
+function createPopupModelWithListModel(listOptions, popupOptions) {
+    var listModel = new _list__WEBPACK_IMPORTED_MODULE_3__["ListModel"](listOptions);
+    listModel.onSelectionChanged = function (item) {
+        listOptions.onSelectionChanged(item);
+        popupModel.hide();
+    };
+    var _popupOptions = popupOptions || {};
+    _popupOptions.onDispose = function () { listModel.dispose(); };
+    var popupModel = new _popup__WEBPACK_IMPORTED_MODULE_4__["PopupModel"]("sv-list", { model: listModel }, _popupOptions);
+    popupModel.isFocusedContent = listModel.showFilter;
+    popupModel.onShow = function () {
+        if (!!_popupOptions.onShow)
+            _popupOptions.onShow();
+        listModel.scrollToSelectedItem();
+    };
+    return popupModel;
+}
 function getActionDropdownButtonTarget(container) {
     return container === null || container === void 0 ? void 0 : container.previousElementSibling;
 }
@@ -5430,6 +5448,7 @@ var defaultV2Css = {
     rootFitToContainer: "sd-root-modern--full-container",
     rootWrapper: "sd-root-modern__wrapper",
     rootWrapperFixed: "sd-root-modern__wrapper--fixed",
+    rootWrapperHasImage: "sd-root-modern__wrapper--has-image",
     rootBackgroundImage: "sd-root_background-image",
     container: "sd-container-modern",
     header: "sd-title sd-container-modern__title",
@@ -5989,6 +6008,7 @@ var defaultV2Css = {
         dragElementDecorator: "sd-drag-element__svg",
         iconDragElement: "#icon-v2dragelement_16x16",
         footer: "sd-matrixdynamic__footer",
+        footerTotalCell: "sd-table__cell sd-table__cell--footer-total",
         emptyRowsSection: "sd-matrixdynamic__placeholder sd-question__placeholder",
         iconDrag: "sv-matrixdynamic__drag-icon",
         ghostRow: "sv-matrix-row--drag-drop-ghost-mod",
@@ -8263,10 +8283,17 @@ var DropdownListModel = /** @class */ (function (_super) {
                 _this.question.value = item.id;
                 if (_this.question.searchEnabled)
                     _this.applyInputString(item);
-                _this.popupModel.isVisible = false;
+                _this.popupModel.hide();
             };
         }
-        var res = new _list__WEBPACK_IMPORTED_MODULE_4__["ListModel"](visibleItems, _onSelectionChanged, false, undefined, this.listElementId);
+        var listOptions = {
+            items: visibleItems,
+            onSelectionChanged: _onSelectionChanged,
+            allowSelection: false,
+            locOwner: this.question,
+            elementId: this.listElementId
+        };
+        var res = new _list__WEBPACK_IMPORTED_MODULE_4__["ListModel"](listOptions);
         this.setOnTextSearchCallbackForListModel(res);
         res.renderElements = false;
         res.forceShowFilter = true;
@@ -8278,7 +8305,6 @@ var DropdownListModel = /** @class */ (function (_super) {
     DropdownListModel.prototype.updateAfterListModelCreated = function (model) {
         var _this = this;
         model.isItemSelected = function (action) { return !!action.selected; };
-        model.locOwner = this.question;
         model.onPropertyChanged.add(function (sender, options) {
             if (options.name == "hasVerticalScroller") {
                 _this.hasScroll = options.newValue;
@@ -8310,7 +8336,7 @@ var DropdownListModel = /** @class */ (function (_super) {
         this.question.survey.onChoicesSearch.fire(this.question.survey, options);
         this.filteredItems = options.filteredChoices;
         if (!!this.filterString && !this.popupModel.isVisible) {
-            this.popupModel.isVisible = true;
+            this.popupModel.show();
         }
         var updateAfterFilterStringChanged = function () {
             _this.setFilterStringToListModel(_this.filterString);
@@ -8530,8 +8556,8 @@ var DropdownListModel = /** @class */ (function (_super) {
             this.changeSelectionWithKeyboard(false);
     };
     DropdownListModel.prototype.onClear = function (event) {
-        this.question.clearValue();
-        this._popupModel.isVisible = false;
+        this.question.clearValue(true);
+        this._popupModel.hide();
         if (event) {
             event.preventDefault();
             event.stopPropagation();
@@ -8587,19 +8613,17 @@ var DropdownListModel = /** @class */ (function (_super) {
             event.stopPropagation();
         }
         else if (event.keyCode === 40) {
-            if (!this.popupModel.isVisible) {
-                this.popupModel.toggleVisibility();
-            }
+            this.popupModel.show();
             this.changeSelectionWithKeyboard(false);
             event.preventDefault();
             event.stopPropagation();
         }
         if (event.keyCode === 9) {
-            this.popupModel.isVisible = false;
+            this.popupModel.hide();
         }
         else if (!this.popupModel.isVisible && (event.keyCode === 13 || event.keyCode === 32)) {
             if (event.keyCode === 32) {
-                this.popupModel.toggleVisibility();
+                this.popupModel.show();
                 this.changeSelectionWithKeyboard(false);
             }
             if (event.keyCode === 13) {
@@ -8610,7 +8634,7 @@ var DropdownListModel = /** @class */ (function (_super) {
         }
         else if (this.popupModel.isVisible && (event.keyCode === 13 || event.keyCode === 32 && (!this.question.searchEnabled || !this.inputString))) {
             if (event.keyCode === 13 && this.question.searchEnabled && !this.inputString && this.question instanceof _question_dropdown__WEBPACK_IMPORTED_MODULE_6__["QuestionDropdownModel"] && !this._markdownMode && this.question.value) {
-                this._popupModel.isVisible = false;
+                this._popupModel.hide();
                 this.onClear(event);
             }
             else {
@@ -8626,7 +8650,7 @@ var DropdownListModel = /** @class */ (function (_super) {
             }
         }
         else if (event.keyCode === 27) {
-            this._popupModel.isVisible = false;
+            this._popupModel.hide();
             this.hintString = "";
             this.onEscape();
         }
@@ -8654,11 +8678,11 @@ var DropdownListModel = /** @class */ (function (_super) {
     DropdownListModel.prototype.onBlur = function (event) {
         this.focused = false;
         if (this.popupModel.isVisible && _utils_devices__WEBPACK_IMPORTED_MODULE_9__["IsTouch"]) {
-            this._popupModel.isVisible = true;
+            this._popupModel.show();
             return;
         }
         Object(_utils_utils__WEBPACK_IMPORTED_MODULE_10__["doKey2ClickBlur"])(event);
-        this._popupModel.isVisible = false;
+        this._popupModel.hide();
         this.resetFilterString();
         this.inputString = null;
         this.hintString = "";
@@ -8849,7 +8873,14 @@ var DropdownMultiSelectListModel = /** @class */ (function (_super) {
                 }
             };
         }
-        var res = new _multiSelectListModel__WEBPACK_IMPORTED_MODULE_3__["MultiSelectListModel"](visibleItems, _onSelectionChanged, false, undefined, this.listElementId);
+        var listOptions = {
+            items: visibleItems,
+            onSelectionChanged: _onSelectionChanged,
+            allowSelection: false,
+            locOwner: this.question,
+            elementId: this.listElementId
+        };
+        var res = new _multiSelectListModel__WEBPACK_IMPORTED_MODULE_3__["MultiSelectListModel"](listOptions);
         res.actions.forEach(function (a) { return a.disableTabStop = true; });
         this.setOnTextSearchCallbackForListModel(res);
         res.forceShowFilter = true;
@@ -9713,8 +9744,8 @@ __webpack_require__.r(__webpack_exports__);
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.10.4";
-ReleaseDate = "" + "2024-05-15";
+Version = "" + "1.10.6";
+ReleaseDate = "" + "2024-05-28";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -9895,7 +9926,7 @@ function checkPrefix(prefix) {
 /*!**************************************!*\
   !*** ./src/entries/core-wo-model.ts ***!
   \**************************************/
-/*! exports provided: Version, ReleaseDate, checkLibraryVersion, setLicenseKey, slk, hasLicense, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedErrorRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, MultipleTextCell, MultipleTextErrorCell, MutlipleTextErrorRow, MutlipleTextRow, QuestionMultipleTextModel, MultipleTextEditorModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryFocusPage, createTOCListModel, getTocRootCss, TOCModel, SurveyProgressModel, ProgressButtons, ProgressButtonsResponsivityManager, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, SurveyTriggerSkip, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, Cover, CoverCell, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, confirmActionAsync, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, chooseFiles, sanitizeEditableContent, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper */
+/*! exports provided: Version, ReleaseDate, checkLibraryVersion, setLicenseKey, slk, hasLicense, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedErrorRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, MultipleTextCell, MultipleTextErrorCell, MutlipleTextErrorRow, MutlipleTextRow, QuestionMultipleTextModel, MultipleTextEditorModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryFocusPage, createTOCListModel, getTocRootCss, TOCModel, SurveyProgressModel, ProgressButtons, ProgressButtonsResponsivityManager, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, SurveyTriggerSkip, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, Cover, CoverCell, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, confirmActionAsync, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, chooseFiles, sanitizeEditableContent, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, createPopupModelWithListModel, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -10332,6 +10363,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "createDropdownActionModelAdvanced", function() { return _actions_action__WEBPACK_IMPORTED_MODULE_7__["createDropdownActionModelAdvanced"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "createPopupModelWithListModel", function() { return _actions_action__WEBPACK_IMPORTED_MODULE_7__["createPopupModelWithListModel"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getActionDropdownButtonTarget", function() { return _actions_action__WEBPACK_IMPORTED_MODULE_7__["getActionDropdownButtonTarget"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "BaseAction", function() { return _actions_action__WEBPACK_IMPORTED_MODULE_7__["BaseAction"]; });
@@ -10390,7 +10423,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!*****************************!*\
   !*** ./src/entries/core.ts ***!
   \*****************************/
-/*! exports provided: Version, ReleaseDate, checkLibraryVersion, setLicenseKey, slk, hasLicense, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedErrorRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, MultipleTextCell, MultipleTextErrorCell, MutlipleTextErrorRow, MutlipleTextRow, QuestionMultipleTextModel, MultipleTextEditorModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryFocusPage, createTOCListModel, getTocRootCss, TOCModel, SurveyProgressModel, ProgressButtons, ProgressButtonsResponsivityManager, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, SurveyTriggerSkip, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, Cover, CoverCell, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, confirmActionAsync, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, chooseFiles, sanitizeEditableContent, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper, Model */
+/*! exports provided: Version, ReleaseDate, checkLibraryVersion, setLicenseKey, slk, hasLicense, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedErrorRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, MultipleTextCell, MultipleTextErrorCell, MutlipleTextErrorRow, MutlipleTextRow, QuestionMultipleTextModel, MultipleTextEditorModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryFocusPage, createTOCListModel, getTocRootCss, TOCModel, SurveyProgressModel, ProgressButtons, ProgressButtonsResponsivityManager, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, SurveyTriggerSkip, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, Cover, CoverCell, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, confirmActionAsync, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, chooseFiles, sanitizeEditableContent, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, createPopupModelWithListModel, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper, Model */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -10820,6 +10853,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "createDropdownActionModelAdvanced", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["createDropdownActionModelAdvanced"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "createPopupModelWithListModel", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["createPopupModelWithListModel"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getActionDropdownButtonTarget", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["getActionDropdownButtonTarget"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "BaseAction", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["BaseAction"]; });
@@ -20238,8 +20273,28 @@ var ListModel = /** @class */ (function (_super) {
             var level = itemValue.level || 0;
             return (level + 1) * ListModel.INDENT + "px";
         };
-        _this.setItems(items);
-        _this.selectedItem = selectedItem;
+        if (Object.keys(items).indexOf("items") !== -1) {
+            var options_1 = items;
+            Object.keys(options_1).forEach(function (key) {
+                switch (key) {
+                    case "items":
+                        _this.setItems(options_1.items);
+                        break;
+                    case "onFilterStringChangedCallback":
+                        _this.setOnFilterStringChangedCallback(options_1.onFilterStringChangedCallback);
+                        break;
+                    case "onTextSearchCallback":
+                        _this.setOnTextSearchCallback(options_1.onTextSearchCallback);
+                        break;
+                    default:
+                        _this[key] = options_1[key];
+                }
+            });
+        }
+        else {
+            _this.setItems(items);
+            _this.selectedItem = selectedItem;
+        }
         return _this;
     }
     ListModel.prototype.hasText = function (item, filterStringInLow) {
@@ -20466,6 +20521,7 @@ var ListModel = /** @class */ (function (_super) {
     };
     ListModel.prototype.addScrollEventListener = function (handler) {
         if (!!handler) {
+            this.removeScrollEventListener();
             this.scrollHandler = handler;
         }
         if (!!this.scrollHandler) {
@@ -22914,12 +22970,53 @@ var InputMaskNumeric = /** @class */ (function (_super) {
             if (Number.isNaN(value)) {
                 return true;
             }
+            if (value >= min && value <= max)
+                return true;
             if (!matchWholeMask) {
+                if (!number.hasDecimalSeparator) {
+                    var test_high = value;
+                    var test_low = value;
+                    if (value >= 0) {
+                        if (value + 1 > min && value <= max)
+                            return true;
+                        while (true) {
+                            test_high = test_high * 10 + 9;
+                            test_low = test_low * 10;
+                            if (test_low > max) {
+                                break;
+                            }
+                            if (test_high > min) {
+                                return true;
+                            }
+                        }
+                        return false;
+                    }
+                    if (value < 0) {
+                        if (value >= min && value - 1 < max)
+                            return true;
+                        while (true) {
+                            test_high = test_high * 10;
+                            test_low = test_low * 10 - 9;
+                            if (test_high < min) {
+                                break;
+                            }
+                            if (test_low < max) {
+                                return true;
+                            }
+                        }
+                        return false;
+                    }
+                }
+                else {
+                    var delta = Math.pow(0.1, (number.fractionalPart || "").length);
+                    if (value >= 0)
+                        return value + delta > min && value <= max;
+                    if (value < 0)
+                        return value >= min && value - delta < max;
+                }
                 return value >= 0 && value <= max || value < 0 && value >= min;
             }
-            else {
-                return value >= min && value <= max;
-            }
+            return false;
         }
         return true;
     };
@@ -23315,8 +23412,8 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 var MultiSelectListModel = /** @class */ (function (_super) {
     __extends(MultiSelectListModel, _super);
-    function MultiSelectListModel(items, onSelectionChanged, allowSelection, selectedItems, elementId) {
-        var _this = _super.call(this, items, onSelectionChanged, allowSelection, undefined, elementId) || this;
+    function MultiSelectListModel(options) {
+        var _this = _super.call(this, options) || this;
         _this.onItemClick = function (item) {
             if (_this.isItemDisabled(item))
                 return;
@@ -23336,7 +23433,7 @@ var MultiSelectListModel = /** @class */ (function (_super) {
         _this.isItemSelected = function (itemValue) {
             return !!_this.allowSelection && _this.selectedItems.filter(function (item) { return _this.areSameItems(item, itemValue); }).length > 0;
         };
-        _this.setSelectedItems(selectedItems || []);
+        _this.setSelectedItems(options.selectedItems || []);
         return _this;
     }
     MultiSelectListModel.prototype.updateItemState = function () {
@@ -24966,7 +25063,7 @@ var PanelModelBase = /** @class */ (function (_super) {
             else {
                 var question = element;
                 if (!question.validate(rec.fireCallback, rec)) {
-                    if (rec.focuseOnFirstError && rec.firstErrorQuestion == null) {
+                    if (!rec.firstErrorQuestion) {
                         rec.firstErrorQuestion = question;
                     }
                     rec.result = true;
@@ -27342,9 +27439,11 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
                 if (!val) {
                     _this.updateOnHiding();
                     _this.updateIsVisible(val);
+                    _this.updateAfterHiding();
                     _this._isPositionSetValue = false;
                 }
                 else {
+                    _this.updateBeforeShowing();
                     _this.updateIsVisible(val);
                 }
             }
@@ -27362,6 +27461,12 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
         this._isVisible = val;
         this.onVisibilityChanged.fire(this, { isVisible: val });
     };
+    PopupBaseViewModel.prototype.updateBeforeShowing = function () {
+        this.model.onShow();
+    };
+    PopupBaseViewModel.prototype.updateAfterHiding = function () {
+        this.model.onHiding();
+    };
     PopupBaseViewModel.prototype.getLeaveOptions = function () {
         return { cssClass: "sv-popup--animate-leave" };
     };
@@ -27789,13 +27894,6 @@ var PopupModel = /** @class */ (function (_super) {
             }
             this.setPropertyValue("isVisible", value);
             this.onVisibilityChanged.fire(this, { model: this, isVisible: value });
-            if (this.isVisible) {
-                this.onShow();
-            }
-            else {
-                this.refreshInnerModel();
-                this.onHide();
-            }
         },
         enumerable: false,
         configurable: true
@@ -27803,6 +27901,14 @@ var PopupModel = /** @class */ (function (_super) {
     PopupModel.prototype.toggleVisibility = function () {
         this.isVisible = !this.isVisible;
     };
+    PopupModel.prototype.show = function () {
+        if (!this.isVisible)
+            this.isVisible = true;
+    };
+    PopupModel.prototype.hide = function () {
+        if (this.isVisible)
+            this.isVisible = false;
+    };
     PopupModel.prototype.recalculatePosition = function (isResetHeight) {
         this.onRecalculatePosition.fire(this, { isResetHeight: isResetHeight });
     };
@@ -27811,6 +27917,10 @@ var PopupModel = /** @class */ (function (_super) {
         this.onFooterActionsCreated.fire(this, options);
         return options.actions;
     };
+    PopupModel.prototype.onHiding = function () {
+        this.refreshInnerModel();
+        this.onHide();
+    };
     PopupModel.prototype.dispose = function () {
         _super.prototype.dispose.call(this);
         this.onDispose();
@@ -29992,15 +30102,18 @@ var Question = /** @class */ (function (_super) {
      * @see value
      * @see comment
      */
-    Question.prototype.clearValue = function () {
+    Question.prototype.clearValue = function (keepComment) {
         if (this.value !== undefined) {
             this.value = undefined;
         }
-        if (!!this.comment) {
+        if (!!this.comment && keepComment !== true) {
             this.comment = undefined;
         }
         this.setValueChangedDirectly(false);
     };
+    Question.prototype.clearValueOnly = function () {
+        this.clearValue(true);
+    };
     Question.prototype.unbindValue = function () {
         this.clearValue();
     };
@@ -30684,6 +30797,8 @@ var Question = /** @class */ (function (_super) {
         return new _error__WEBPACK_IMPORTED_MODULE_3__["CustomError"](error, this.survey);
     };
     Question.prototype.removeError = function (error) {
+        if (!error)
+            return;
         var errors = this.errors;
         var index = errors.indexOf(error);
         if (index !== -1)
@@ -31128,14 +31243,18 @@ var Question = /** @class */ (function (_super) {
     Question.prototype.getDesktopRenderAs = function () {
         return "default";
     };
+    Question.prototype.onBeforeSetCompactRenderer = function () { };
+    Question.prototype.onBeforeSetDesktopRenderer = function () { };
     Question.prototype.processResponsiveness = function (requiredWidth, availableWidth) {
         availableWidth = Math.round(availableWidth);
         if (Math.abs(requiredWidth - availableWidth) > 2) {
             var oldRenderAs = this.renderAs;
             if (requiredWidth > availableWidth) {
+                this.onBeforeSetCompactRenderer();
                 this.renderAs = this.getCompactRenderAs();
             }
             else {
+                this.onBeforeSetDesktopRenderer();
                 this.renderAs = this.getDesktopRenderAs();
             }
             return oldRenderAs !== this.renderAs;
@@ -31467,8 +31586,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("question", [
         visibleIf: function (obj) {
             return obj.showCommentArea;
         },
-        serializationProperty: "locCommentText",
-        layout: "row",
+        serializationProperty: "locCommentText"
     },
     {
         name: "commentPlaceholder",
@@ -32364,8 +32482,8 @@ var QuestionSelectBase = /** @class */ (function (_super) {
             this.isSettingComment = false;
         }
     };
-    QuestionSelectBase.prototype.clearValue = function () {
-        _super.prototype.clearValue.call(this);
+    QuestionSelectBase.prototype.clearValue = function (keepComment) {
+        _super.prototype.clearValue.call(this, keepComment);
         this.prevOtherValue = undefined;
     };
     QuestionSelectBase.prototype.updateCommentFromSurvey = function (newValue) {
@@ -32622,6 +32740,9 @@ var QuestionSelectBase = /** @class */ (function (_super) {
             this.isLockVisibleChoices = !!question && question.name === val;
             if (!!question && question.name !== val) {
                 question.removeDependedQuestion(this);
+                if (this.isDesignMode && !this.isLoadingFromJson && !!val) {
+                    this.setPropertyValue("choicesFromQuestion", undefined);
+                }
             }
             this.setPropertyValue("choicesFromQuestion", val);
             this.isLockVisibleChoices = false;
@@ -32907,13 +33028,18 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         }
     };
     QuestionSelectBase.prototype.addNewItemToVisibleChoices = function (items, isAddAll) {
+        var _this = this;
         if (!isAddAll)
             return;
         if (!this.newItemValue) {
             this.newItemValue = this.createItemValue("newitem"); //TODO
             this.newItemValue.isGhost = true;
+            this.newItemValue.registerFunctionOnPropertyValueChanged("isVisible", function () {
+                _this.updateVisibleChoices();
+            });
         }
-        if (!this.isUsingCarryForward && this.canShowOptionItem(this.newItemValue, isAddAll, false)) {
+        if (this.newItemValue.isVisible && !this.isUsingCarryForward
+            && this.canShowOptionItem(this.newItemValue, isAddAll, false)) {
             this.footItemsCount = 1;
             items.push(this.newItemValue);
         }
@@ -33571,7 +33697,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     QuestionSelectBase.prototype.clearIncorrectValuesCore = function () {
         var val = this.value;
         if (this.canClearValueAnUnknown(val)) {
-            this.clearValue();
+            this.clearValue(true);
         }
     };
     QuestionSelectBase.prototype.canClearValueAnUnknown = function (val) {
@@ -33581,7 +33707,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     };
     QuestionSelectBase.prototype.clearDisabledValuesCore = function () {
         if (this.isValueDisabled(this.value)) {
-            this.clearValue();
+            this.clearValue(true);
         }
     };
     QuestionSelectBase.prototype.clearUnusedValues = function () {
@@ -35009,7 +35135,7 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
                 this.selectAll();
             }
             else {
-                this.clearValue();
+                this.clearValue(true);
             }
         },
         enumerable: false,
@@ -35421,7 +35547,7 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
                     this.value = null;
                 }
                 else {
-                    this.clearValue();
+                    this.clearValue(true);
                 }
             }
             this.isChangingValueOnClearIncorrect = false;
@@ -35452,7 +35578,7 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
             return;
         this.isChangingValueOnClearIncorrect = true;
         if (newValue.length == 0) {
-            this.clearValue();
+            this.clearValue(true);
         }
         else {
             this.value = newValue;
@@ -37358,9 +37484,9 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
     QuestionDropdownModel.prototype.getInputId = function () {
         return this.inputId + "_0";
     };
-    QuestionDropdownModel.prototype.clearValue = function () {
+    QuestionDropdownModel.prototype.clearValue = function (keepComment) {
         var _a;
-        _super.prototype.clearValue.call(this);
+        _super.prototype.clearValue.call(this, keepComment);
         this.lastSelectedItemValue = null;
         (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.clear();
     };
@@ -37370,7 +37496,7 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
     QuestionDropdownModel.prototype.onKeyUp = function (event) {
         var char = event.which || event.keyCode;
         if (char === 46) {
-            this.clearValue();
+            this.clearValue(true);
             event.preventDefault();
             event.stopPropagation();
         }
@@ -38191,9 +38317,9 @@ var QuestionFileModelBase = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    QuestionFileModelBase.prototype.clearValue = function () {
+    QuestionFileModelBase.prototype.clearValue = function (keepComment) {
         this.clearOnDeletingContainer();
-        _super.prototype.clearValue.call(this);
+        _super.prototype.clearValue.call(this, keepComment);
     };
     QuestionFileModelBase.prototype.clearOnDeletingContainer = function () {
         if (!this.survey)
@@ -40100,7 +40226,7 @@ var QuestionImagePickerModel = /** @class */ (function (_super) {
             if (!val)
                 return;
             if (!Array.isArray(val) || val.length == 0) {
-                this.clearValue();
+                this.clearValue(true);
                 return;
             }
             var newValue = [];
@@ -40112,7 +40238,7 @@ var QuestionImagePickerModel = /** @class */ (function (_super) {
             if (newValue.length == val.length)
                 return;
             if (newValue.length == 0) {
-                this.clearValue();
+                this.clearValue(true);
             }
             else {
                 this.value = newValue;
@@ -42050,10 +42176,10 @@ var MatrixDropdownRowModelBase = /** @class */ (function () {
             this.detailPanel.runCondition(values, newProps);
         }
     };
-    MatrixDropdownRowModelBase.prototype.clearValue = function () {
+    MatrixDropdownRowModelBase.prototype.clearValue = function (keepComment) {
         var questions = this.questions;
         for (var i = 0; i < questions.length; i++) {
-            questions[i].clearValue();
+            questions[i].clearValue(keepComment);
         }
     };
     MatrixDropdownRowModelBase.prototype.onAnyValueChanged = function (name, questionName) {
@@ -43459,23 +43585,7 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
     QuestionMatrixDropdownModelBase.prototype.checkIfValueInRowDuplicated = function (checkedRow, cellQuestion) {
         if (!this.generatedVisibleRows)
             return false;
-        var res = false;
-        for (var i = 0; i < this.generatedVisibleRows.length; i++) {
-            var row = this.generatedVisibleRows[i];
-            if (checkedRow === row)
-                continue;
-            if (_helpers__WEBPACK_IMPORTED_MODULE_2__["Helpers"].isTwoValueEquals(row.getValue(cellQuestion.name), cellQuestion.value, true, this.isUniqueCaseSensitive)) {
-                res = true;
-                break;
-            }
-        }
-        if (res) {
-            this.addDuplicationError(cellQuestion);
-        }
-        else {
-            cellQuestion.clearErrors();
-        }
-        return res;
+        return this.isValueInColumnDuplicated(cellQuestion.name, true, checkedRow);
     };
     /**
      * Assigns values to a row.
@@ -43813,51 +43923,104 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
     QuestionMatrixDropdownModelBase.prototype.isValueDuplicated = function () {
         if (!this.generatedVisibleRows)
             return false;
-        var columns = this.getUniqueColumns();
-        var res = false;
-        for (var i = 0; i < columns.length; i++) {
-            res = this.isValueInColumnDuplicated(columns[i]) || res;
-        }
-        return res;
-    };
-    QuestionMatrixDropdownModelBase.prototype.isValueInColumnDuplicated = function (column) {
-        var keyValues = [];
+        var names = this.getUniqueColumnsNames();
         var res = false;
-        for (var i = 0; i < this.generatedVisibleRows.length; i++) {
-            res =
-                this.isValueDuplicatedInRow(this.generatedVisibleRows[i], column, keyValues) || res;
+        for (var i = 0; i < names.length; i++) {
+            res = this.isValueInColumnDuplicated(names[i], true) || res;
         }
         return res;
     };
-    QuestionMatrixDropdownModelBase.prototype.getUniqueColumns = function () {
+    QuestionMatrixDropdownModelBase.prototype.getUniqueColumnsNames = function () {
         var res = new Array();
         for (var i = 0; i < this.columns.length; i++) {
             if (this.columns[i].isUnique) {
-                res.push(this.columns[i]);
+                res.push(this.columns[i].name);
             }
         }
         return res;
     };
-    QuestionMatrixDropdownModelBase.prototype.isValueDuplicatedInRow = function (row, column, keyValues) {
-        var question = row.getQuestionByColumn(column);
-        if (!question || question.isEmpty())
-            return false;
-        var value = question.value;
-        for (var i = 0; i < keyValues.length; i++) {
-            if (_helpers__WEBPACK_IMPORTED_MODULE_2__["Helpers"].isTwoValueEquals(value, keyValues[i], true, this.isUniqueCaseSensitive)) {
-                this.addDuplicationError(question);
-                return true;
+    QuestionMatrixDropdownModelBase.prototype.isValueInColumnDuplicated = function (columnName, showErrors, row) {
+        var rows = this.getDuplicatedRows(columnName);
+        if (showErrors) {
+            this.showDuplicatedErrorsInRows(rows, columnName);
+        }
+        this.removeDuplicatedErrorsInRows(rows, columnName);
+        return !!row ? rows.indexOf(row) > -1 : rows.length > 0;
+    };
+    QuestionMatrixDropdownModelBase.prototype.getDuplicatedRows = function (columnName) {
+        var keyValues = {};
+        var res = [];
+        var rows = this.generatedVisibleRows;
+        for (var i = 0; i < rows.length; i++) {
+            var val = undefined;
+            var question = rows[i].getQuestionByName(columnName);
+            if (!!question) {
+                val = question.value;
+            }
+            else {
+                var rowVal = this.getRowValue(i);
+                val = !!rowVal ? rowVal[columnName] : undefined;
+            }
+            if (!this.isValueEmpty(val)) {
+                if (!this.isUniqueCaseSensitive && typeof val === "string") {
+                    val = val.toLocaleLowerCase();
+                }
+                if (!keyValues[val]) {
+                    keyValues[val] = [];
+                }
+                keyValues[val].push(rows[i]);
             }
         }
-        keyValues.push(value);
-        return false;
+        for (var key in keyValues) {
+            if (keyValues[key].length > 1) {
+                keyValues[key].forEach(function (row) { return res.push(row); });
+            }
+        }
+        return res;
+    };
+    QuestionMatrixDropdownModelBase.prototype.showDuplicatedErrorsInRows = function (duplicatedRows, columnName) {
+        var _this = this;
+        duplicatedRows.forEach(function (row) {
+            var question = row.getQuestionByName(columnName);
+            if (!question && _this.detailPanel.getQuestionByName(columnName)) {
+                row.showDetailPanel();
+                if (row.detailPanel) {
+                    question = row.detailPanel.getQuestionByName(columnName);
+                }
+            }
+            if (question) {
+                row.showDetailPanel();
+                _this.addDuplicationError(question);
+            }
+        });
+    };
+    QuestionMatrixDropdownModelBase.prototype.removeDuplicatedErrorsInRows = function (duplicatedRows, columnName) {
+        var _this = this;
+        this.generatedVisibleRows.forEach(function (row) {
+            if (duplicatedRows.indexOf(row) < 0) {
+                var question = row.getQuestionByName(columnName);
+                if (question) {
+                    _this.removeDuplicationError(question);
+                }
+            }
+        });
+    };
+    QuestionMatrixDropdownModelBase.prototype.getDuplicationError = function (question) {
+        var errors = question.errors;
+        for (var i = 0; i < errors.length; i++) {
+            if (errors[i].getErrorType() === "keyduplicationerror")
+                return errors[i];
+        }
+        return null;
     };
     QuestionMatrixDropdownModelBase.prototype.addDuplicationError = function (question) {
-        var keyError = question.errors.find(function (error) { return error.getErrorType() === "keyduplicationerror"; });
-        if (!keyError) {
+        if (!this.getDuplicationError(question)) {
             question.addError(new _error__WEBPACK_IMPORTED_MODULE_10__["KeyDuplicationError"](this.keyDuplicationError, this));
         }
     };
+    QuestionMatrixDropdownModelBase.prototype.removeDuplicationError = function (question) {
+        question.removeError(this.getDuplicationError(question));
+    };
     QuestionMatrixDropdownModelBase.prototype.getFirstQuestionToFocus = function (withError) {
         return this.getFirstCellQuestion(withError);
     };
@@ -44003,6 +44166,9 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
                 this.onCellValueChanged(row, columnName, combine.rowValue);
             }
         }
+        if (this.getUniqueColumnsNames().indexOf(columnName) > -1) {
+            this.isValueInColumnDuplicated(columnName, !!rowObj);
+        }
     };
     QuestionMatrixDropdownModelBase.prototype.getNewValueOnRowChanged = function (row, columnName, newRowValue, isDeletingValue, newValue) {
         var rowValue = this.getRowValueCore(row, newValue, true);
@@ -47563,13 +47729,11 @@ var QuestionMatrixDynamicModel = /** @class */ (function (_super) {
         }
         return setRowCount < this.minRowCount;
     };
-    QuestionMatrixDynamicModel.prototype.getUniqueColumns = function () {
-        var res = _super.prototype.getUniqueColumns.call(this);
-        if (!!this.keyName) {
-            var column = this.getColumnByName(this.keyName);
-            if (!!column && res.indexOf(column) < 0) {
-                res.push(column);
-            }
+    QuestionMatrixDynamicModel.prototype.getUniqueColumnsNames = function () {
+        var res = _super.prototype.getUniqueColumnsNames.call(this);
+        var name = this.keyName;
+        if (!!name && res.indexOf(name) < 0) {
+            res.push(name);
         }
         return res;
     };
@@ -52126,7 +52290,7 @@ var QuestionRadiogroupModel = /** @class */ (function (_super) {
             var clearAction = new _actions_action__WEBPACK_IMPORTED_MODULE_3__["Action"]({
                 title: this.clearButtonCaption,
                 id: "sv-clr-btn-" + this.id,
-                action: function () { _this.clearValue(); },
+                action: function () { _this.clearValue(true); },
                 innerCss: this.cssClasses.clearButton,
                 visible: new _base__WEBPACK_IMPORTED_MODULE_4__["ComputedUpdater"](function () { return _this.canShowClearButton; })
             });
@@ -52343,7 +52507,7 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         _this.createNewArray("rankingChoices");
         _this.createNewArray("unRankingChoices");
         _this.registerFunctionOnPropertyValueChanged("selectToRankEnabled", function () {
-            _this.clearValue();
+            _this.clearValue(true);
             _this.setDragDropRankingChoices();
             _this.updateRankingChoicesSync();
         });
@@ -52958,8 +53122,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
 /* harmony import */ var _base__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./base */ "./src/base.ts");
 /* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./utils/utils */ "./src/utils/utils.ts");
-/* harmony import */ var _utils_devices__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./utils/devices */ "./src/utils/devices.ts");
-/* harmony import */ var _global_variables_utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./global_variables_utils */ "./src/global_variables_utils.ts");
+/* harmony import */ var _dropdownListModel__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./dropdownListModel */ "./src/dropdownListModel.ts");
+/* harmony import */ var _utils_devices__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./utils/devices */ "./src/utils/devices.ts");
+/* harmony import */ var _global_variables_utils__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./global_variables_utils */ "./src/global_variables_utils.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -52992,6 +53157,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 var RenderedRatingItem = /** @class */ (function (_super) {
     __extends(RenderedRatingItem, _super);
     function RenderedRatingItem(itemValue, locString) {
@@ -53283,19 +53449,19 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     QuestionRatingModel.prototype.updateColors = function (themeVariables) {
         if (this.colorMode === "monochrome")
             return;
-        if (!_global_variables_utils__WEBPACK_IMPORTED_MODULE_10__["DomDocumentHelper"].isAvailable())
+        if (!_global_variables_utils__WEBPACK_IMPORTED_MODULE_11__["DomDocumentHelper"].isAvailable())
             return;
         if (QuestionRatingModel.colorsCalculated)
             return;
         function getRGBColor(colorName, varName) {
             var str = !!themeVariables && themeVariables[colorName];
             if (!str) {
-                var style = getComputedStyle(_global_variables_utils__WEBPACK_IMPORTED_MODULE_10__["DomDocumentHelper"].getDocumentElement());
+                var style = getComputedStyle(_global_variables_utils__WEBPACK_IMPORTED_MODULE_11__["DomDocumentHelper"].getDocumentElement());
                 str = style.getPropertyValue && style.getPropertyValue(varName);
             }
             if (!str)
                 return null;
-            var canvasElement = _global_variables_utils__WEBPACK_IMPORTED_MODULE_10__["DomDocumentHelper"].createElement("canvas");
+            var canvasElement = _global_variables_utils__WEBPACK_IMPORTED_MODULE_11__["DomDocumentHelper"].createElement("canvas");
             if (!canvasElement)
                 return null;
             var ctx = canvasElement.getContext("2d");
@@ -53567,7 +53733,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     };
     QuestionRatingModel.prototype.setValueFromClick = function (value) {
         if (this.value === parseFloat(value)) {
-            this.clearValue();
+            this.clearValue(true);
         }
         else {
             this.value = value;
@@ -53577,7 +53743,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         }
     };
     QuestionRatingModel.prototype.onItemMouseIn = function (item) {
-        if (_utils_devices__WEBPACK_IMPORTED_MODULE_9__["IsTouch"])
+        if (_utils_devices__WEBPACK_IMPORTED_MODULE_10__["IsTouch"])
             return;
         if (this.isReadOnly || !item.itemValue.isEnabled || this.isDesignMode)
             return;
@@ -53596,7 +53762,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         }
     };
     QuestionRatingModel.prototype.onItemMouseOut = function (item) {
-        if (_utils_devices__WEBPACK_IMPORTED_MODULE_9__["IsTouch"])
+        if (_utils_devices__WEBPACK_IMPORTED_MODULE_10__["IsTouch"])
             return;
         this.renderedRateItems.forEach(function (item) { return item.highlight = "none"; });
     };
@@ -53867,6 +54033,11 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     QuestionRatingModel.prototype.supportResponsiveness = function () {
         return true;
     };
+    QuestionRatingModel.prototype.onBeforeSetCompactRenderer = function () {
+        if (!this.dropdownListModelValue) {
+            this.dropdownListModel = new _dropdownListModel__WEBPACK_IMPORTED_MODULE_9__["DropdownListModel"](this);
+        }
+    };
     QuestionRatingModel.prototype.getCompactRenderAs = function () {
         return (this.displayMode == "buttons") ? "default" : "dropdown";
     };
@@ -53886,6 +54057,9 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionRatingModel.prototype, "dropdownListModel", {
         get: function () {
+            if (this.renderAs === "dropdown") {
+                this.onBeforeSetCompactRenderer();
+            }
             return this.dropdownListModelValue;
         },
         set: function (val) {
@@ -54531,9 +54705,9 @@ var QuestionSignaturePadModel = /** @class */ (function (_super) {
         this.value = (arg === null || arg === void 0 ? void 0 : arg.length) ? arg.map(function (r) { return r.content; })[0] : undefined;
         this.valueIsUpdatingInternally = false;
     };
-    QuestionSignaturePadModel.prototype.clearValue = function () {
+    QuestionSignaturePadModel.prototype.clearValue = function (keepComment) {
         this.valueWasChangedFromLastUpload = false;
-        _super.prototype.clearValue.call(this);
+        _super.prototype.clearValue.call(this, keepComment);
         this.refreshCanvas();
     };
     QuestionSignaturePadModel.prototype.endLoadingFromJson = function () {
@@ -54929,9 +55103,9 @@ var QuestionTagboxModel = /** @class */ (function (_super) {
             this.dropdownListModel.dispose();
         }
     };
-    QuestionTagboxModel.prototype.clearValue = function () {
+    QuestionTagboxModel.prototype.clearValue = function (keepComment) {
         var _a;
-        _super.prototype.clearValue.call(this);
+        _super.prototype.clearValue.call(this, keepComment);
         (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.clear();
     };
     Object.defineProperty(QuestionTagboxModel.prototype, "showClearButton", {
@@ -60103,7 +60277,7 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.onPopupVisibleChanged.add(function (_, opt) {
             if (opt.visible) {
                 _this.onScrollCallback = function () {
-                    opt.popup.toggleVisibility();
+                    opt.popup.hide();
                 };
             }
             else {
@@ -61596,7 +61770,8 @@ var SurveyModel = /** @class */ (function (_super) {
     SurveyModel.prototype.updateWrapperFormCss = function () {
         this.wrapperFormCss = new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_18__["CssClassBuilder"]()
             .append(this.css.rootWrapper)
-            .append(this.css.rootWrapperFixed, this.backgroundImageAttachment === "fixed")
+            .append(this.css.rootWrapperHasImage, !!this.backgroundImage)
+            .append(this.css.rootWrapperFixed, !!this.backgroundImage && this.backgroundImageAttachment === "fixed")
             .toString();
     };
     Object.defineProperty(SurveyModel.prototype, "completedHtml", {
@@ -63410,7 +63585,7 @@ var SurveyModel = /** @class */ (function (_super) {
         if (this.isValidateOnComplete) {
             if (!this.isLastPage)
                 return false;
-            return this.validate(true, true, func) !== true && !skipValidation;
+            return this.validate(true, this.focusOnFirstError, func, true) !== true && !skipValidation;
         }
         return this.validateCurrentPage(func) !== true && !skipValidation;
     };
@@ -63542,25 +63717,27 @@ var SurveyModel = /** @class */ (function (_super) {
      * @see validateCurrentPage
      * @see validatePage
      */
-    SurveyModel.prototype.validate = function (fireCallback, focusOnFirstError, onAsyncValidation) {
+    SurveyModel.prototype.validate = function (fireCallback, focusOnFirstError, onAsyncValidation, changeCurrentPage) {
         if (fireCallback === void 0) { fireCallback = true; }
         if (focusOnFirstError === void 0) { focusOnFirstError = false; }
         if (!!onAsyncValidation) {
             fireCallback = true;
         }
         var visPages = this.visiblePages;
-        var firstErrorPage = null;
         var res = true;
         var rec = { fireCallback: fireCallback, focuseOnFirstError: focusOnFirstError, firstErrorQuestion: null, result: false };
         for (var i = 0; i < visPages.length; i++) {
             if (!visPages[i].validate(fireCallback, focusOnFirstError, rec)) {
-                if (!firstErrorPage)
-                    firstErrorPage = visPages[i];
                 res = false;
             }
         }
-        if (focusOnFirstError && !!firstErrorPage && !!rec.firstErrorQuestion) {
-            rec.firstErrorQuestion.focus(true);
+        if (!!rec.firstErrorQuestion && (focusOnFirstError || changeCurrentPage)) {
+            if (focusOnFirstError) {
+                rec.firstErrorQuestion.focus(true);
+            }
+            else {
+                this.currentPage = rec.firstErrorQuestion.page;
+            }
         }
         if (!res || !onAsyncValidation)
             return res;
@@ -65354,7 +65531,7 @@ var SurveyModel = /** @class */ (function (_super) {
         page.name = name;
         return page;
     };
-    SurveyModel.prototype.questionOnValueChanging = function (valueName, newValue) {
+    SurveyModel.prototype.questionOnValueChanging = function (valueName, newValue, questionValueName) {
         if (!!this.editingObj) {
             var prop = _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].findProperty(this.editingObj.getType(), valueName);
             if (!!prop)
@@ -65364,7 +65541,7 @@ var SurveyModel = /** @class */ (function (_super) {
             return newValue;
         var options = {
             name: valueName,
-            question: this.getQuestionByValueName(valueName),
+            question: this.getQuestionByValueName(questionValueName || valueName),
             value: this.getUnbindValue(newValue),
             oldValue: this.getValue(valueName),
         };
@@ -65549,6 +65726,12 @@ var SurveyModel = /** @class */ (function (_super) {
         }
         this.isTriggerIsRunning = false;
     };
+    SurveyModel.prototype.checkTriggersAndRunConditions = function (name, newValue, oldValue) {
+        var triggerKeys = {};
+        triggerKeys[name] = { newValue: newValue, oldValue: oldValue };
+        this.runConditionOnValueChanged(name, newValue);
+        this.checkTriggers(triggerKeys, false, false, name);
+    };
     Object.defineProperty(SurveyModel.prototype, "hasRequiredValidQuestionTrigger", {
         get: function () {
             for (var i = 0; i < this.triggers.length; i++) {
@@ -66106,10 +66289,7 @@ var SurveyModel = /** @class */ (function (_super) {
         this.variablesHash[name] = newValue;
         this.notifyElementsOnAnyValueOrVariableChanged(name);
         if (!_helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].isTwoValueEquals(oldValue, newValue)) {
-            this.runConditionOnValueChanged(name, newValue);
-            var triggerKeys = {};
-            triggerKeys[name] = { newValue: newValue, oldValue: oldValue };
-            this.checkTriggers(triggerKeys, false, false, name);
+            this.checkTriggersAndRunConditions(name, newValue, oldValue);
             this.onVariableChanged.fire(this, { name: name, value: newValue });
         }
     };
@@ -66198,10 +66378,7 @@ var SurveyModel = /** @class */ (function (_super) {
         if (locNotification === true || this.isDisposed || this.isRunningElementsBindings)
             return;
         questionName = questionName || name;
-        var triggerKeys = {};
-        triggerKeys[name] = { newValue: newValue, oldValue: oldValue };
-        this.runConditionOnValueChanged(name, newValue);
-        this.checkTriggers(triggerKeys, false, false, name);
+        this.checkTriggersAndRunConditions(name, newValue, oldValue);
         if (allowNotifyValueChanged)
             this.notifyQuestionOnValueChanged(name, newValue, questionName);
         if (locNotification !== "text") {
@@ -66319,6 +66496,7 @@ var SurveyModel = /** @class */ (function (_super) {
         if (this.isTwoValueEquals(newValue, this.getComment(name)))
             return;
         var commentName = name + this.commentSuffix;
+        newValue = this.questionOnValueChanging(commentName, newValue, name);
         if (this.isValueEmpty(newValue)) {
             this.deleteDataValueCore(this.valuesHash, commentName);
         }
@@ -66333,7 +66511,7 @@ var SurveyModel = /** @class */ (function (_super) {
             }
         }
         if (!locNotification) {
-            this.runConditionOnValueChanged(name, this.getValue(name));
+            this.checkTriggersAndRunConditions(name, this.getValue(name), undefined);
         }
         if (locNotification !== "text") {
             this.tryGoNextPageAutomatic(name);
@@ -66345,6 +66523,10 @@ var SurveyModel = /** @class */ (function (_super) {
                 question: question,
                 value: newValue,
             });
+            question.comment = newValue;
+            if (question.comment != newValue) {
+                question.comment = newValue;
+            }
         }
     };
     /**
@@ -67492,7 +67674,11 @@ var SurveyModel = /** @class */ (function (_super) {
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], SurveyModel.prototype, "_isCompact", void 0);
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({
+            onSet: function (newValue, target) {
+                target.updateCss();
+            }
+        })
     ], SurveyModel.prototype, "backgroundImage", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
@@ -68318,14 +68504,21 @@ function createTOCListModel(survey, onAction) {
             visible: new _base__WEBPACK_IMPORTED_MODULE_1__["ComputedUpdater"](function () { return page.isVisible && !(page["isStartPage"]); })
         });
     });
-    var listModel = new _list__WEBPACK_IMPORTED_MODULE_3__["ListModel"](items, function (item) {
-        if (!!item.action()) {
-            listModel.selectedItem = item;
-        }
-    }, true, items.filter(function (i) { return !!survey.currentPage && i.id === survey.currentPage.name; })[0] || items.filter(function (i) { return i.id === pagesSource[0].name; })[0]);
+    var selectedItem = items.filter(function (i) { return !!survey.currentPage && i.id === survey.currentPage.name; })[0] || items.filter(function (i) { return i.id === pagesSource[0].name; })[0];
+    var listOptions = {
+        items: items,
+        onSelectionChanged: function (item) {
+            if (!!item.action()) {
+                listModel.selectedItem = item;
+            }
+        },
+        allowSelection: true,
+        searchEnabled: false,
+        locOwner: survey,
+        selectedItem: selectedItem
+    };
+    var listModel = new _list__WEBPACK_IMPORTED_MODULE_3__["ListModel"](listOptions);
     listModel.allowSelection = false;
-    listModel.locOwner = survey;
-    listModel.searchEnabled = false;
     survey.onCurrentPageChanged.add(function (s, o) {
         listModel.selectedItem = items.filter(function (i) { return !!survey.currentPage && i.id === survey.currentPage.name; })[0];
     });