survey-react 1.9.86 → 1.9.88

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.86
+ * surveyjs - Survey JavaScript library v1.9.88
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -5563,7 +5563,11 @@ var defaultStandardCss = {
         controlValue: "sv_q_tagbox__value sv_q_dropdown__value",
         controlEmpty: "sv_q_dropdown--empty sv_q_tagbox--empty",
         placeholderInput: "sv_q_tagbox__placeholder",
-        filterStringInput: "sv_q_tagbox__filter-string-input sv_q_dropdown__filter-string-input"
+        filterStringInput: "sv_q_tagbox__filter-string-input sv_q_dropdown__filter-string-input",
+        hint: "sv_q_tagbox__hint",
+        hintPrefix: "sv_q_dropdown__hint-prefix sv_q_tagbox__hint-prefix",
+        hintSuffix: "sv_q_dropdown__hint-suffix sv_q_tagbox__hint-suffix",
+        hintSuffixWrapper: "sv_q_tagbox__hint-suffix-wrapper"
     },
 };
 _defaultV2Css__WEBPACK_IMPORTED_MODULE_0__["surveyCss"]["default"] = defaultStandardCss;
@@ -6051,6 +6055,7 @@ var defaultV2Css = {
         itemStarDisabled: "sd-rating__item-star--disabled",
         itemStarHighlighted: "sd-rating__item-star--highlighted",
         itemStarUnhighlighted: "sd-rating__item-star--unhighlighted",
+        itemStarSmall: "sd-rating__item-star--small",
         itemSmiley: "sd-rating__item-smiley",
         itemSmileyOnError: "sd-rating__item-smiley--error",
         itemSmileyHover: "sd-rating__item-smiley--allowhover",
@@ -6059,12 +6064,14 @@ var defaultV2Css = {
         itemSmileyHighlighted: "sd-rating__item-star--highlighted",
         itemSmileyScaleColored: "sd-rating__item-smiley--scale-colored",
         itemSmileyRateColored: "sd-rating__item-smiley--rate-colored",
+        itemSmileySmall: "sd-rating__item-smiley--small",
         minText: "sd-rating__item-text sd-rating__min-text",
         itemText: "sd-rating__item-text",
         maxText: "sd-rating__item-text sd-rating__max-text",
         itemDisabled: "sd-rating__item--disabled",
         itemFixedSize: "sd-rating__item--fixed-size",
         control: "sd-input sd-dropdown",
+        itemSmall: "sd-rating--small",
         controlValue: "sd-dropdown__value",
         controlDisabled: "sd-input--disabled",
         controlEmpty: "sd-dropdown--empty",
@@ -6231,7 +6238,11 @@ var defaultV2Css = {
         controlEmpty: "sd-dropdown--empty sd-tagbox--empty",
         controlLabel: "sd-item__control-label",
         filterStringInput: "sd-tagbox__filter-string-input sd-dropdown__filter-string-input",
-        materialDecorator: "sd-item__decorator sd-checkbox__decorator"
+        materialDecorator: "sd-item__decorator sd-checkbox__decorator",
+        hint: "sd-tagbox__hint",
+        hintPrefix: "sd-dropdown__hint-prefix sd-tagbox__hint-prefix",
+        hintSuffix: "sd-dropdown__hint-suffix sd-tagbox__hint-suffix",
+        hintSuffixWrapper: "sd-tagbox__hint-suffix-wrapper"
     },
 };
 var defaultV2ThemeName = "defaultV2";
@@ -6786,7 +6797,7 @@ var DragDropChoices = /** @class */ (function (_super) {
     };
     DragDropChoices.prototype.createImagePickerShortcut = function (item, text, draggedElementNode, event) {
         var draggedElementShortcut = document.createElement("div");
-        draggedElementShortcut.style.cssText = " \n      cursor: grabbing;\n      position: absolute;\n      z-index: 1000;\n      filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.1));\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);\n      padding: 4px;\n      border-radius: 4px;\n      background: white;\n    ";
+        draggedElementShortcut.style.cssText = " \n      cursor: grabbing;\n      position: absolute;\n      z-index: 1000;\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1), 0px 2px 6px rgba(0, 0, 0, 0.1);\n      padding: 4px;\n      border-radius: 4px;\n      background: white;\n    ";
         var itemValueNode = draggedElementNode.closest("[data-sv-drop-target-item-value]");
         var controlsNode = itemValueNode.querySelector(".svc-image-item-value-controls");
         var imageContainerNode = itemValueNode.querySelector(".sd-imagepicker__image-container");
@@ -6901,6 +6912,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _jsonobject__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../jsonobject */ "./src/jsonobject.ts");
 /* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils/utils */ "./src/utils/utils.ts");
 /* harmony import */ var _utils_devices__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils/devices */ "./src/utils/devices.ts");
+/* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../settings */ "./src/settings.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -6926,6 +6938,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 // WebKit requires cancelable `touchmove` events to be added as early as possible
 // see https://bugs.webkit.org/show_bug.cgi?id=184250
 if (typeof window !== "undefined") {
@@ -7035,7 +7048,7 @@ var DragDropCore = /** @class */ (function (_super) {
             if (_utils_devices__WEBPACK_IMPORTED_MODULE_3__["IsTouch"]) {
                 _this.draggedElementShortcut.removeEventListener("contextmenu", _this.onContextMenu);
             }
-            document.body.removeChild(_this.draggedElementShortcut);
+            _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].environment.rootElement.removeChild(_this.draggedElementShortcut);
             _this.doClear();
             _this.dropTarget = null;
             _this.draggedElementShortcut = null;
@@ -7044,7 +7057,7 @@ var DragDropCore = /** @class */ (function (_super) {
             _this.parentElement = null;
             _this.scrollIntervalId = null;
             if (_utils_devices__WEBPACK_IMPORTED_MODULE_3__["IsTouch"]) {
-                _this.savedTargetNode && document.body.removeChild(_this.savedTargetNode);
+                _this.savedTargetNode && _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].environment.rootElement.removeChild(_this.savedTargetNode);
                 DragDropCore.PreventScrolling = false;
             }
             document.body.style.setProperty("touch-action", "");
@@ -7092,7 +7105,7 @@ var DragDropCore = /** @class */ (function (_super) {
                 _this.savedTargetNode = event.target;
                 _this.savedTargetNode.style.cssText =
                     "\n          position: absolute;\n          height: 1px!important;\n          width: 1px!important;\n          overflow: hidden;\n          clip: rect(1px 1px 1px 1px);\n          clip: rect(1px, 1px, 1px, 1px);\n        ";
-                document.body.appendChild(_this.savedTargetNode);
+                _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].environment.rootElement.appendChild(_this.savedTargetNode);
             }
             _this.stopLongTap();
         }, this.longTap ? 500 : 0);
@@ -7171,8 +7184,8 @@ var DragDropCore = /** @class */ (function (_super) {
             shortcutXOffset = shortcutWidth / 2;
             shortcutYOffset = shortcutHeight / 2;
         }
-        var documentBottom = document.documentElement.clientHeight;
-        var documentRight = document.documentElement.clientWidth;
+        var documentBottom = (Object(_utils_utils__WEBPACK_IMPORTED_MODULE_2__["isShadowDOM"])(_settings__WEBPACK_IMPORTED_MODULE_4__["settings"].environment.root) ? _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].environment.root.host : _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].environment.root.documentElement).clientHeight;
+        var documentRight = (Object(_utils_utils__WEBPACK_IMPORTED_MODULE_2__["isShadowDOM"])(_settings__WEBPACK_IMPORTED_MODULE_4__["settings"].environment.root) ? _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].environment.root.host : _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].environment.root.documentElement).clientWidth;
         var shortcutBottomCoordinate = this.getShortcutBottomCoordinate(event.clientY, shortcutHeight, shortcutYOffset);
         var shortcutRightCoordinate = this.getShortcutRightCoordinate(event.clientX, shortcutWidth, shortcutXOffset);
         if (shortcutRightCoordinate >= documentRight) {
@@ -7371,7 +7384,7 @@ var DragDropMatrixRows = /** @class */ (function (_super) {
         var row = (draggedElementNode
             .closest("[data-sv-drop-target-matrix-row]"));
         var clone = (row.cloneNode(isDeepClone));
-        clone.style.cssText = "\n      filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.1));\n      box-shadow: rgb(0 0 0 / 10%) 0px 8px 16px;\n      background-color: white;\n      display: flex;\n      flex-grow: 0;\n      flex-shrink: 0;\n      align-items: center;\n      line-height: 0;\n      width: " + row.offsetWidth + "px;\n    ";
+        clone.style.cssText = "\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1), 0px 2px 6px rgba(0, 0, 0, 0.1);\n      background-color: white;\n      display: flex;\n      flex-grow: 0;\n      flex-shrink: 0;\n      align-items: center;\n      line-height: 0;\n      width: " + row.offsetWidth + "px;\n    ";
         clone.classList.remove("sv-matrix__drag-drop--moveup");
         clone.classList.remove("sv-matrix__drag-drop--movedown");
         this.draggedElement.isDragDropMoveDown = false;
@@ -7538,7 +7551,7 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
     DragDropRankingChoices.prototype.createDraggedElementShortcut = function (text, draggedElementNode, event) {
         var draggedElementShortcut = document.createElement("div");
         draggedElementShortcut.className = this.shortcutClass + " sv-ranking-shortcut";
-        draggedElementShortcut.style.cssText = " \n          cursor: grabbing;\n          position: absolute;\n          z-index: 1000;\n          border-radius: 36px;\n          min-width: 100px;\n          filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.1));\n          box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);\n          background-color: var(--background, white);\n          font-family: var(--font-family, $font-family);\n        ";
+        draggedElementShortcut.style.cssText = " \n          cursor: grabbing;\n          position: absolute;\n          z-index: 1000;\n          border-radius: 36px;\n          min-width: 100px;\n          box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1), 0px 2px 6px rgba(0, 0, 0, 0.1);\n          background-color: var(--background, white);\n          font-family: var(--font-family, $font-family);\n        ";
         var isDeepClone = true;
         var clone = draggedElementNode.cloneNode(isDeepClone);
         draggedElementShortcut.appendChild(clone);
@@ -7646,6 +7659,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _survey_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../survey-element */ "./src/survey-element.ts");
 /* harmony import */ var _jsonobject__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../jsonobject */ "./src/jsonobject.ts");
 /* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./core */ "./src/dragdrop/core.ts");
+/* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../settings */ "./src/settings.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -7664,6 +7678,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var DragDropSurveyElements = /** @class */ (function (_super) {
     __extends(DragDropSurveyElements, _super);
     function DragDropSurveyElements() {
@@ -7678,7 +7693,7 @@ var DragDropSurveyElements = /** @class */ (function (_super) {
         };
         _this.doDrop = function () {
             if (_this.dropTarget) {
-                document.activeElement.blur();
+                _settings__WEBPACK_IMPORTED_MODULE_3__["settings"].environment.root.activeElement.blur();
                 return _this.insertRealElementIntoSurvey();
             }
             return null;
@@ -8312,12 +8327,18 @@ var DropdownListModel = /** @class */ (function (_super) {
         if (hasHtml || this.question.inputFieldComponentName) {
             this._markdownMode = true;
             this.inputString = "";
+            this.hintString = "";
         }
         else {
             this.inputString = item === null || item === void 0 ? void 0 : item.title;
             this.hintString = item === null || item === void 0 ? void 0 : item.title;
         }
     };
+    DropdownListModel.prototype.fixInputCase = function () {
+        var hintStringMiddle = this.hintStringMiddle;
+        if (hintStringMiddle && this.inputString != hintStringMiddle)
+            this.inputString = hintStringMiddle;
+    };
     DropdownListModel.prototype.applyHintString = function (item) {
         var hasHtml = item === null || item === void 0 ? void 0 : item.locText.hasHtml;
         if (hasHtml || this.question.inputFieldComponentName) {
@@ -8330,10 +8351,10 @@ var DropdownListModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(DropdownListModel.prototype, "inputStringRendered", {
         get: function () {
-            return this.getPropertyValue("inputString") || "";
+            return this.inputString || "";
         },
         set: function (val) {
-            this.setPropertyValue("inputString", val);
+            this.inputString = val;
             this.filterString = val;
             this.applyHintString(this.listModel.focusedItem);
         },
@@ -8401,6 +8422,16 @@ var DropdownListModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(DropdownListModel.prototype, "hintStringMiddle", {
+        get: function () {
+            var start = this.hintStringLC.indexOf(this.inputStringLC);
+            if (start == -1)
+                return null;
+            return this.hintString.substring(start, start + this.inputStringLC.length);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DropdownListModel.prototype, "popupModel", {
         get: function () {
             return this._popupModel;
@@ -8439,8 +8470,7 @@ var DropdownListModel = /** @class */ (function (_super) {
     };
     DropdownListModel.prototype.onClick = function (event) {
         this._popupModel.toggleVisibility();
-        if (this._popupModel.isVisible && this.question.value && this.question instanceof _question_dropdown__WEBPACK_IMPORTED_MODULE_4__["QuestionDropdownModel"])
-            this.changeSelectionWithKeyboard(false);
+        this.focusItemOnClickAndPopup();
         if (this.searchEnabled && !!event && !!event.target) {
             var input = event.target.querySelector("input");
             if (!!input) {
@@ -8448,8 +8478,13 @@ var DropdownListModel = /** @class */ (function (_super) {
             }
         }
     };
+    DropdownListModel.prototype.focusItemOnClickAndPopup = function () {
+        if (this._popupModel.isVisible && this.question.value)
+            this.changeSelectionWithKeyboard(false);
+    };
     DropdownListModel.prototype.onClear = function (event) {
         this.question.clearValue();
+        this._popupModel.isVisible = false;
         if (event) {
             event.preventDefault();
             event.stopPropagation();
@@ -8467,18 +8502,27 @@ var DropdownListModel = /** @class */ (function (_super) {
         else {
             this.listModel.focusNextVisibleItem();
         }
-        if (this.question.value && focusedItem && this.question instanceof _question_dropdown__WEBPACK_IMPORTED_MODULE_4__["QuestionDropdownModel"]) {
+        this.beforeScrollToFocusedItem(focusedItem);
+        this.scrollToFocusedItem();
+        this.afterScrollToFocusedItem();
+        this.ariaActivedescendant = (_a = this.listModel.focusedItem) === null || _a === void 0 ? void 0 : _a.elementId;
+    };
+    DropdownListModel.prototype.beforeScrollToFocusedItem = function (focusedItem) {
+        if (this.question.value && focusedItem) {
             focusedItem.selectedValue = false;
             this.listModel.focusedItem.selectedValue = !this.listModel.filterString;
             this.question.suggestedItem = this.listModel.focusedItem;
         }
-        this.scrollToFocusedItem();
-        if (this.question.value && !this.listModel.filterString && this.question.searchEnabled && this.question instanceof _question_dropdown__WEBPACK_IMPORTED_MODULE_4__["QuestionDropdownModel"]) {
+    };
+    DropdownListModel.prototype.afterScrollToFocusedItem = function () {
+        var _a;
+        if (this.question.value && !this.listModel.filterString && this.question.searchEnabled) {
             this.applyInputString(this.listModel.focusedItem || this.question.selectedItem);
         }
         else {
             this.applyHintString(this.listModel.focusedItem || this.question.selectedItem);
         }
+        this.fixInputCase();
         this.ariaActivedescendant = (_a = this.listModel.focusedItem) === null || _a === void 0 ? void 0 : _a.elementId;
     };
     DropdownListModel.prototype.keyHandler = function (event) {
@@ -8502,7 +8546,7 @@ var DropdownListModel = /** @class */ (function (_super) {
             event.preventDefault();
             event.stopPropagation();
         }
-        else if (this.popupModel.isVisible && (event.keyCode === 13 || event.keyCode === 32 && !this.question.searchEnabled)) {
+        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_4__["QuestionDropdownModel"] && !this._markdownMode && this.question.value) {
                 this._popupModel.isVisible = false;
                 this.onClear(event);
@@ -8524,8 +8568,7 @@ var DropdownListModel = /** @class */ (function (_super) {
         else if (event.keyCode === 27) {
             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);
+            this.onEscape();
         }
         else {
             if (event.keyCode === 38 || event.keyCode === 40 || event.keyCode === 32 && !this.question.searchEnabled) {
@@ -8538,6 +8581,10 @@ var DropdownListModel = /** @class */ (function (_super) {
             Object(_utils_utils__WEBPACK_IMPORTED_MODULE_7__["doKey2ClickUp"])(event, { processEsc: false, disableTabStop: this.question.isInputReadOnly });
         }
     };
+    DropdownListModel.prototype.onEscape = function () {
+        if (this.question.searchEnabled)
+            this.applyInputString(this.question.selectedItem);
+    };
     DropdownListModel.prototype.onScroll = function (event) {
         var target = event.target;
         if ((target.scrollHeight - (target.scrollTop + target.offsetHeight)) <= this.loadingItemHeight) {
@@ -8693,7 +8740,7 @@ var DropdownMultiSelectListModel = /** @class */ (function (_super) {
     };
     DropdownMultiSelectListModel.prototype.syncFilterStringPlaceholder = function () {
         var selectedActions = this.getSelectedActions();
-        if (selectedActions.length || this.question.selectedItems.length) {
+        if (selectedActions.length || this.question.selectedItems.length || this.listModel.focusedItem) {
             this.filterStringPlaceholder = undefined;
         }
         else {
@@ -8741,6 +8788,7 @@ var DropdownMultiSelectListModel = /** @class */ (function (_super) {
     DropdownMultiSelectListModel.prototype.resetFilterString = function () {
         _super.prototype.resetFilterString.call(this);
         this.inputString = null;
+        this.hintString = "";
     };
     Object.defineProperty(DropdownMultiSelectListModel.prototype, "shouldResetAfterCancel", {
         get: function () {
@@ -8794,6 +8842,7 @@ var DropdownMultiSelectListModel = /** @class */ (function (_super) {
         var newValue = [].concat(this.question.renderedValue || []);
         newValue.splice(newValue.indexOf(id), 1);
         this.question.renderedValue = newValue;
+        this.applyHintString(this.listModel.focusedItem);
         this.updateListState();
     };
     DropdownMultiSelectListModel.prototype.clear = function () {
@@ -8824,6 +8873,25 @@ var DropdownMultiSelectListModel = /** @class */ (function (_super) {
             this.inputString = null;
         }
     };
+    DropdownMultiSelectListModel.prototype.focusItemOnClickAndPopup = function () {
+        return;
+    };
+    DropdownMultiSelectListModel.prototype.onEscape = function () {
+        return;
+    };
+    DropdownMultiSelectListModel.prototype.beforeScrollToFocusedItem = function (focusedItem) {
+        return;
+    };
+    DropdownMultiSelectListModel.prototype.afterScrollToFocusedItem = function () {
+        var _a;
+        if (!((_a = this.listModel.focusedItem) === null || _a === void 0 ? void 0 : _a.selected)) {
+            this.applyHintString(this.listModel.focusedItem || this.question.selectedItem);
+        }
+        else {
+            this.hintString = "";
+        }
+        this.syncFilterStringPlaceholder();
+    };
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: "" })
     ], DropdownMultiSelectListModel.prototype, "filterStringPlaceholder", void 0);
@@ -9591,7 +9659,7 @@ __webpack_require__.r(__webpack_exports__);
 // import "../../main.scss";
 //import "../../modern.scss";
 var Version;
-Version = "" + "1.9.86";
+Version = "" + "1.9.88";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -9696,7 +9764,7 @@ function checkLibraryVersion(ver, libraryName) {
 /*!**************************************!*\
   !*** ./src/entries/core-wo-model.ts ***!
   \**************************************/
-/*! exports provided: Version, checkLibraryVersion, 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, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, QuestionMultipleTextModel, 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, tryNavigateToPage, createTOCListModel, getTocRootCss, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, 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, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, sanitizeEditableContent, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropSurveyElements, DragDropChoices, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, createDropdownActionModel, createDropdownActionModelAdvanced, BaseAction, Action, ActionDropdownViewModel, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, TooltipManager, DragOrClickHelper */
+/*! exports provided: Version, checkLibraryVersion, 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, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, QuestionMultipleTextModel, 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, tryNavigateToPage, createTOCListModel, getTocRootCss, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, 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, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, sanitizeEditableContent, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropSurveyElements, DragDropChoices, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, BaseAction, Action, ActionDropdownViewModel, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, TooltipManager, DragOrClickHelper */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -10080,6 +10148,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getOriginalEvent", function() { return _utils_utils__WEBPACK_IMPORTED_MODULE_6__["getOriginalEvent"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getElement", function() { return _utils_utils__WEBPACK_IMPORTED_MODULE_6__["getElement"]; });
+
 /* harmony import */ var _actions_action__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../actions/action */ "./src/actions/action.ts");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "createDropdownActionModel", function() { return _actions_action__WEBPACK_IMPORTED_MODULE_7__["createDropdownActionModel"]; });
 
@@ -10129,7 +10199,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!*****************************!*\
   !*** ./src/entries/core.ts ***!
   \*****************************/
-/*! exports provided: Version, checkLibraryVersion, 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, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, QuestionMultipleTextModel, 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, tryNavigateToPage, createTOCListModel, getTocRootCss, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, 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, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, sanitizeEditableContent, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropSurveyElements, DragDropChoices, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, createDropdownActionModel, createDropdownActionModelAdvanced, BaseAction, Action, ActionDropdownViewModel, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, TooltipManager, DragOrClickHelper, Model */
+/*! exports provided: Version, checkLibraryVersion, 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, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, QuestionMultipleTextModel, 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, tryNavigateToPage, createTOCListModel, getTocRootCss, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, 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, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, sanitizeEditableContent, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropSurveyElements, DragDropChoices, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, BaseAction, Action, ActionDropdownViewModel, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, TooltipManager, DragOrClickHelper, Model */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -10507,6 +10577,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getOriginalEvent", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["getOriginalEvent"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getElement", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["getElement"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "createDropdownActionModel", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["createDropdownActionModel"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "createDropdownActionModelAdvanced", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["createDropdownActionModelAdvanced"]; });
@@ -10922,7 +10994,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!******************************!*\
   !*** ./src/entries/react.ts ***!
   \******************************/
-/*! exports provided: Version, checkLibraryVersion, 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, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, QuestionMultipleTextModel, 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, tryNavigateToPage, createTOCListModel, getTocRootCss, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, 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, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, sanitizeEditableContent, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropSurveyElements, DragDropChoices, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, createDropdownActionModel, createDropdownActionModelAdvanced, BaseAction, Action, ActionDropdownViewModel, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, TooltipManager, DragOrClickHelper, Model, bootstrapThemeName, bootstrapThemeColors, bootstrapThemeCssRules, bootstrapMaterialThemeName, bootstrapMaterialThemeColors, bootstrapMaterialThemeCssRules, defaultBootstrapCss, defaultBootstrapMaterialCss, Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionHtml, SurveyQuestionFile, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, SurveyLocStringViewer, SurveyLocStringEditor */
+/*! exports provided: Version, checkLibraryVersion, 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, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, QuestionMultipleTextModel, 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, tryNavigateToPage, createTOCListModel, getTocRootCss, SurveyProgressModel, SurveyProgressButtonsModel, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, 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, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, sanitizeEditableContent, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropSurveyElements, DragDropChoices, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, BaseAction, Action, ActionDropdownViewModel, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, TooltipManager, DragOrClickHelper, Model, bootstrapThemeName, bootstrapThemeColors, bootstrapThemeCssRules, bootstrapMaterialThemeName, bootstrapMaterialThemeColors, bootstrapMaterialThemeCssRules, defaultBootstrapCss, defaultBootstrapMaterialCss, Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, RatingItem, RatingItemStar, RatingItemSmiley, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionHtml, SurveyQuestionFile, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, SurveyLocStringViewer, SurveyLocStringEditor */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -11300,6 +11372,8 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getOriginalEvent", function() { return _core__WEBPACK_IMPORTED_MODULE_0__["getOriginalEvent"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getElement", function() { return _core__WEBPACK_IMPORTED_MODULE_0__["getElement"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "createDropdownActionModel", function() { return _core__WEBPACK_IMPORTED_MODULE_0__["createDropdownActionModel"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "createDropdownActionModelAdvanced", function() { return _core__WEBPACK_IMPORTED_MODULE_0__["createDropdownActionModelAdvanced"]; });
@@ -16725,6 +16799,8 @@ var map = {
 	"./expandDetail.svg": "./src/images/expandDetail.svg",
 	"./no-image.svg": "./src/images/no-image.svg",
 	"./rating-star-2.svg": "./src/images/rating-star-2.svg",
+	"./rating-star-small-2.svg": "./src/images/rating-star-small-2.svg",
+	"./rating-star-small.svg": "./src/images/rating-star-small.svg",
 	"./rating-star.svg": "./src/images/rating-star.svg",
 	"./search.svg": "./src/images/search.svg"
 };
@@ -17081,6 +17157,28 @@ module.exports = "<svg viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\
 
 /***/ }),
 
+/***/ "./src/images/rating-star-small-2.svg":
+/*!********************************************!*\
+  !*** ./src/images/rating-star-small-2.svg ***!
+  \********************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 19.3373L6.13001 22.4373C5.50001 22.7673 4.77001 22.2373 4.89001 21.5373L6.01001 14.9773L1.26001 10.3273C0.750007 9.83728 1.03001 8.96728 1.73001 8.86728L8.29001 7.90728L11.23 1.93728C11.54 1.29728 12.45 1.29728 12.77 1.93728L15.7 7.90728L22.26 8.86728C22.96 8.96728 23.24 9.83728 22.73 10.3273L17.98 14.9773L19.1 21.5373C19.22 22.2373 18.49 22.7773 17.86 22.4373L11.99 19.3373H12Z\" fill=\"none\" stroke-width=\"2\"></path><path d=\"M12 15.9472L8.58001 17.7572L9.23001 13.9272L6.45001 11.2072L10.29 10.6472L12 7.17725L13.71 10.6472L17.55 11.2072L14.77 13.9272L15.42 17.7572L12 15.9472Z\"></path></svg>"
+
+/***/ }),
+
+/***/ "./src/images/rating-star-small.svg":
+/*!******************************************!*\
+  !*** ./src/images/rating-star-small.svg ***!
+  \******************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><g><path d=\"M12 19.3373L6.13001 22.4373C5.50001 22.7673 4.77001 22.2373 4.89001 21.5373L6.01001 14.9773L1.26001 10.3273C0.750007 9.83728 1.03001 8.96728 1.73001 8.86728L8.29001 7.90728L11.23 1.93728C11.54 1.29728 12.45 1.29728 12.77 1.93728L15.7 7.90728L22.26 8.86728C22.96 8.96728 23.24 9.83728 22.73 10.3273L17.98 14.9773L19.1 21.5373C19.22 22.2373 18.49 22.7773 17.86 22.4373L11.99 19.3373H12Z\" stroke-width=\"2\"></path></g></svg>"
+
+/***/ }),
+
 /***/ "./src/images/rating-star.svg":
 /*!************************************!*\
   !*** ./src/images/rating-star.svg ***!
@@ -30285,6 +30383,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _utils_popup__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils/popup */ "./src/utils/popup.ts");
 /* harmony import */ var _popup_view_model__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./popup-view-model */ "./src/popup-view-model.ts");
 /* harmony import */ var _utils_devices__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./utils/devices */ "./src/utils/devices.ts");
+/* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./settings */ "./src/settings.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -30310,6 +30409,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 var PopupDropdownViewModel = /** @class */ (function (_super) {
     __extends(PopupDropdownViewModel, _super);
     function PopupDropdownViewModel(model, targetElement) {
@@ -30434,7 +30534,8 @@ var PopupDropdownViewModel = /** @class */ (function (_super) {
         return "popup-pointer";
     };
     PopupDropdownViewModel.prototype.updateOnShowing = function () {
-        this.prevActiveElement = document.activeElement;
+        var root = _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].environment.root;
+        this.prevActiveElement = root.activeElement;
         if (this.isOverlay) {
             this.resetDimensionsAndPositionStyleProperties();
         }
@@ -30942,6 +31043,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _jsonobject__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./jsonobject */ "./src/jsonobject.ts");
 /* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
 /* harmony import */ var _actions_container__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./actions/container */ "./src/actions/container.ts");
+/* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./settings */ "./src/settings.ts");
+/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils/utils */ "./src/utils/utils.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -30967,6 +31070,8 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
+
 var FOCUS_INPUT_SELECTOR = "input:not(:disabled):not([readonly]):not([type=hidden]),select:not(:disabled):not([readonly]),textarea:not(:disabled):not([readonly]), button:not(:disabled):not([readonly]), [tabindex]:not([tabindex^=\"-\"])";
 var PopupBaseViewModel = /** @class */ (function (_super) {
     __extends(PopupBaseViewModel, _super);
@@ -31148,13 +31253,13 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
         var firstFocusableElement = focusableElements[0];
         var lastFocusableElement = focusableElements[focusableElements.length - 1];
         if (event.shiftKey) {
-            if (document.activeElement === firstFocusableElement) {
+            if (_settings__WEBPACK_IMPORTED_MODULE_4__["settings"].environment.root.activeElement === firstFocusableElement) {
                 lastFocusableElement.focus();
                 event.preventDefault();
             }
         }
         else {
-            if (document.activeElement === lastFocusableElement) {
+            if (_settings__WEBPACK_IMPORTED_MODULE_4__["settings"].environment.root.activeElement === lastFocusableElement) {
                 firstFocusableElement.focus();
                 event.preventDefault();
             }
@@ -31166,7 +31271,7 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
         }
     };
     PopupBaseViewModel.prototype.updateOnShowing = function () {
-        this.prevActiveElement = document.activeElement;
+        this.prevActiveElement = _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].environment.root.activeElement;
         if (this.isOverlay) {
             this.resetDimensionsAndPositionStyleProperties();
         }
@@ -31209,13 +31314,7 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
             var container = document.createElement("div");
             this.container = this.createdContainer = container;
         }
-        var mountContainer = document.body.querySelector(".sv-popup-mount");
-        if (mountContainer) {
-            mountContainer.appendChild(this.container);
-        }
-        else {
-            document.body.appendChild(this.container);
-        }
+        Object(_utils_utils__WEBPACK_IMPORTED_MODULE_5__["getElement"])(_settings__WEBPACK_IMPORTED_MODULE_4__["settings"].environment.popupMountContainer).appendChild(this.container);
     };
     PopupBaseViewModel.prototype.unmountPopupContainer = function () {
         this.createdContainer.remove();
@@ -31316,6 +31415,10 @@ var PopupModel = /** @class */ (function (_super) {
         _this.title = title;
         return _this;
     }
+    PopupModel.prototype.refreshInnerModel = function () {
+        var innerModel = this.contentComponentData["model"];
+        innerModel && innerModel.refresh && innerModel.refresh();
+    };
     Object.defineProperty(PopupModel.prototype, "isVisible", {
         get: function () {
             return this.getPropertyValue("isVisible", false);
@@ -31326,9 +31429,8 @@ var PopupModel = /** @class */ (function (_super) {
             }
             this.setPropertyValue("isVisible", value);
             this.onVisibilityChanged.fire(this, { model: this, isVisible: value });
+            this.refreshInnerModel();
             if (this.isVisible) {
-                var innerModel = this.contentComponentData["model"];
-                innerModel && innerModel.refresh && innerModel.refresh();
                 this.onShow();
             }
             else {
@@ -32239,7 +32341,8 @@ var Question = /** @class */ (function (_super) {
         if (this.supportComment() || this.supportOther()) {
             this.commentElements = [];
             this.getCommentElementsId().forEach(function (id) {
-                var el = document.getElementById(id);
+                var root = _settings__WEBPACK_IMPORTED_MODULE_8__["settings"].environment.root;
+                var el = root.getElementById(id);
                 if (el)
                     _this.commentElements.push(el);
             });
@@ -32775,6 +32878,9 @@ var Question = /** @class */ (function (_super) {
     });
     Object.defineProperty(Question.prototype, "isInputReadOnly", {
         get: function () {
+            if (this.forceIsInputReadOnly !== undefined) {
+                return this.forceIsInputReadOnly;
+            }
             var isDesignModeV2 = _settings__WEBPACK_IMPORTED_MODULE_8__["settings"].supportCreatorV2 && this.isDesignMode;
             return this.isReadOnly || isDesignModeV2;
         },
@@ -33924,12 +34030,18 @@ var Question = /** @class */ (function (_super) {
                 target.setIsMobile(val);
             } })
     ], Question.prototype, "isMobile", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
+    ], Question.prototype, "forceIsInputReadOnly", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ localizable: true })
     ], Question.prototype, "commentPlaceholder", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], Question.prototype, "renderAs", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: false })
+    ], Question.prototype, "inMatrixMode", void 0);
     return Question;
 }(_survey_element__WEBPACK_IMPORTED_MODULE_2__["SurveyElement"]));
 
@@ -34876,6 +34988,8 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         return this.hasUnknownValue(val, true, false);
     };
     QuestionSelectBase.prototype.updateSelectedItemValues = function () {
+        if (this.waitingGetChoiceDisplayValueResponse)
+            return;
         var IsMultipleValue = this.getIsMultipleValue();
         if (IsMultipleValue) {
             this.updateMultipleSelectedItemValues();
@@ -34887,10 +35001,12 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     QuestionSelectBase.prototype.updateSingleSelectedItemValues = function () {
         var _this = this;
         if (!!this.survey && !this.isEmpty() && !_itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"].getItemByValue(this.choices, this.value)) {
+            this.waitingGetChoiceDisplayValueResponse = true;
             this.survey.getChoiceDisplayValue({
                 question: this,
                 values: [this.value],
                 setItems: function (displayValues) {
+                    _this.waitingGetChoiceDisplayValueResponse = false;
                     if (!displayValues || !displayValues.length)
                         return;
                     _this.selectedItemValues = _this.createItemValue(_this.value, displayValues[0]);
@@ -34903,10 +35019,12 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         var valueArray = this.value;
         var hasItemWithValues = valueArray.some(function (val) { return !_itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"].getItemByValue(_this.choices, val); });
         if (!!this.survey && !this.isEmpty() && hasItemWithValues) {
+            this.waitingGetChoiceDisplayValueResponse = true;
             this.survey.getChoiceDisplayValue({
                 question: this,
                 values: valueArray,
                 setItems: function (displayValues) {
+                    _this.waitingGetChoiceDisplayValueResponse = false;
                     if (!displayValues || !displayValues.length)
                         return;
                     _this.selectedItemValues = displayValues.map(function (displayValue, index) { return _this.createItemValue(_this.value[index], displayValue); });
@@ -37382,6 +37500,7 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
         if (operator == "contains" || operator == "notcontains") {
             json["type"] = "radiogroup";
         }
+        json["maxSelectedChoices"] = 0;
         return json;
     };
     QuestionCheckboxModel.prototype.isAnswerCorrect = function () {
@@ -37533,6 +37652,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _questionfactory__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./questionfactory */ "./src/questionfactory.ts");
 /* harmony import */ var _question_textbase__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./question_textbase */ "./src/question_textbase.ts");
 /* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./utils/utils */ "./src/utils/utils.ts");
+/* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./settings */ "./src/settings.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -37552,6 +37672,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 /**
  * A class that describes the Comment question type.
  *
@@ -37628,7 +37749,8 @@ var QuestionCommentModel = /** @class */ (function (_super) {
         return "comment";
     };
     QuestionCommentModel.prototype.afterRenderQuestionElement = function (el) {
-        this.element = document.getElementById(this.inputId) || el;
+        var root = _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].environment.root;
+        this.element = root.getElementById(this.inputId) || el;
         this.updateElement();
         _super.prototype.afterRenderQuestionElement.call(this, el);
     };
@@ -40071,7 +40193,7 @@ var QuestionFileModel = /** @class */ (function (_super) {
         return errorLength === this.errors.length;
     };
     QuestionFileModel.prototype.isFileImage = function (file) {
-        if (!file)
+        if (!file || !file.content || !file.content.substring)
             return false;
         var imagePrefix = "data:image";
         var subStr = file.content && file.content.substring(0, imagePrefix.length);
@@ -44398,6 +44520,7 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
         var question = column.createCellQuestion(row);
         question.setSurveyImpl(row);
         question.setParentQuestion(this);
+        question.inMatrixMode = true;
         return question;
     };
     QuestionMatrixDropdownModelBase.prototype.deleteRowValue = function (newValue, row) {
@@ -48565,6 +48688,13 @@ var QuestionPanelDynamicItemTextProcessor = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionPanelDynamicItemTextProcessor.prototype, "visiblePanelIndex", {
+        get: function () {
+            return !!this.data ? this.data.getVisibleItemIndex(this.panelItem) : -1;
+        },
+        enumerable: false,
+        configurable: true
+    });
     QuestionPanelDynamicItemTextProcessor.prototype.getValues = function () {
         return this.panelItem.getAllValues();
     };
@@ -48594,6 +48724,14 @@ var QuestionPanelDynamicItemTextProcessor = /** @class */ (function (_super) {
                 return true;
             }
         }
+        if (textValue.name == QuestionPanelDynamicItem.VisibleIndexVariableName) {
+            var index = this.visiblePanelIndex;
+            if (index > -1) {
+                textValue.isExists = true;
+                textValue.value = index + 1;
+                return true;
+            }
+        }
         if (textValue.name.toLowerCase().indexOf(QuestionPanelDynamicItem.ParentItemVariableName + ".") == 0) {
             var q = this.data;
             if (!!q && !!q.parentQuestion && !!q.parent && !!q.parent.data) {
@@ -48679,8 +48817,11 @@ var QuestionPanelDynamicItem = /** @class */ (function () {
         values[QuestionPanelDynamicItem.ItemVariableName] = this.getAllValues();
         if (!!this.data) {
             var indexStr = QuestionPanelDynamicItem.IndexVariableName;
+            var visibleIndexStr = QuestionPanelDynamicItem.VisibleIndexVariableName;
             delete values[indexStr];
+            delete values[visibleIndexStr];
             values[indexStr.toLowerCase()] = this.data.getItemIndex(this);
+            values[visibleIndexStr.toLowerCase()] = this.data.getVisibleItemIndex(this);
             var q = this.data;
             if (!!q && !!q.parentQuestion && !!q.parent) {
                 values[QuestionPanelDynamicItem.ParentItemVariableName] = q.parent.getValue();
@@ -48705,6 +48846,7 @@ var QuestionPanelDynamicItem = /** @class */ (function () {
     QuestionPanelDynamicItem.ItemVariableName = "panel";
     QuestionPanelDynamicItem.ParentItemVariableName = "parentpanel";
     QuestionPanelDynamicItem.IndexVariableName = "panelIndex";
+    QuestionPanelDynamicItem.VisibleIndexVariableName = "visiblePanelIndex";
     return QuestionPanelDynamicItem;
 }());
 
@@ -48740,7 +48882,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             _this.recalculateIsReadyValue();
         };
         _this.isSetPanelItemData = {};
-        _this.createNewArray("panels");
+        _this.createNewArray("panels", function (panel) { _this.onPanelAdded(panel); }, function (panel) { _this.onPanelRemoved(panel); });
+        _this.createNewArray("visiblePanels");
         _this.templateValue = _this.createAndSetupNewPanelObject();
         _this.template.renderWidth = "100%";
         _this.template.selectedElementInDesign = _this;
@@ -48776,8 +48919,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         configurable: true
     });
     QuestionPanelDynamicModel.prototype.getFirstQuestionToFocus = function (withError) {
-        for (var i = 0; i < this.panels.length; i++) {
-            var res = this.panels[i].getFirstQuestionToFocus(withError);
+        for (var i = 0; i < this.visiblePanels.length; i++) {
+            var res = this.visiblePanels[i].getFirstQuestionToFocus(withError);
             if (!!res)
                 return res;
         }
@@ -48888,6 +49031,11 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "templateTitle", {
         /**
          * A template for panel titles.
+         *
+         * The template can contain the following placeholders:
+         *
+         * - `{panelIndex}` - A zero-based index of a panel in the [`panels`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#panels) array.
+         * - `{visiblePanelIndex}` - A zero-based index of a panel in the [`visiblePanels`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#visiblePanels) array.
          * @see template
          * @see templateDescription
          * @see templateElements
@@ -48913,6 +49061,11 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "templateTabTitle", {
         /**
          * A template for tab titles. Applies when [`renderMode`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#renderMode) is `"tab"`.
+         *
+         * The template can contain the following placeholders:
+         *
+         * - `{panelIndex}` - A zero-based index of a panel in the [`panels`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#panels) array.
+         * - `{visiblePanelIndex}` - A zero-based index of a panel in the [`visiblePanels`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#visiblePanels) array.
          * @see templateTitle
          * @see renderMode
          */
@@ -48957,6 +49110,27 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "templateVisibleIf", {
+        /**
+         * A Boolean expression that is evaluated against each panel. If the expression evaluates to `false`, the panel becomes hidden.
+         *
+         * A survey parses and runs all expressions on startup. If any values used in the expression change, the survey re-evaluates it.
+         *
+         * Use the `{panel}` placeholder to reference the current panel in the expression.
+         *
+         * Refer to the following help topic for more information: [Conditional Visibility](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#conditional-visibility).
+         * @see visibleIf
+         * @see visiblePanels
+         */
+        get: function () {
+            return this.template.visibleIf;
+        },
+        set: function (val) {
+            this.template.visibleIf = val;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "items", {
         get: function () {
             var res = [];
@@ -48981,6 +49155,53 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "visiblePanels", {
+        /**
+         * An array of currently visible panels ([`PanelModel`](https://surveyjs.io/form-library/documentation/api-reference/panel-model) objects).
+         * @see templateVisibleIf
+         */
+        get: function () {
+            return this.getPropertyValue("visiblePanels");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    QuestionPanelDynamicModel.prototype.onPanelAdded = function (panel) {
+        this.onPanelRemovedCore(panel);
+        if (!panel.visible)
+            return;
+        var index = 0;
+        var panels = this.panels;
+        for (var i = 0; i < panels.length; i++) {
+            if (panels[i] === panel)
+                break;
+            if (panels[i].visible)
+                index++;
+        }
+        this.visiblePanels.splice(index, 0, panel);
+        this.addTabFromToolbar(panel, index);
+        if (!this.currentPanel) {
+            this.currentPanel = panel;
+        }
+    };
+    QuestionPanelDynamicModel.prototype.onPanelRemoved = function (panel) {
+        var index = this.onPanelRemovedCore(panel);
+        if (this.currentPanel === panel) {
+            var visPanels = this.visiblePanels;
+            if (index >= visPanels.length)
+                index = visPanels.length - 1;
+            this.currentPanel = index >= 0 ? visPanels[index] : null;
+        }
+    };
+    QuestionPanelDynamicModel.prototype.onPanelRemovedCore = function (panel) {
+        var visPanels = this.visiblePanels;
+        var index = visPanels.indexOf(panel);
+        if (index > -1) {
+            visPanels.splice(index, 1);
+            this.removeTabFromToolbar(panel);
+        }
+        return index;
+    };
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "currentIndex", {
         /**
          * A zero-based index of the currently displayed panel.
@@ -48996,33 +49217,18 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
                 return -1;
             if (this.useTemplatePanel)
                 return 0;
-            if (this.currentIndexValue < 0 && this.panelCount > 0) {
-                this.currentIndexValue = 0;
-            }
-            if (this.currentIndexValue >= this.panelCount) {
-                this.currentIndexValue = this.panelCount - 1;
-            }
-            return this.currentIndexValue;
+            return this.visiblePanels.indexOf(this.currentPanel);
         },
         set: function (val) {
-            if (this.currentIndexValue !== val) {
-                if (val >= this.panelCount)
-                    val = this.panelCount - 1;
-                this.currentIndexValue = val;
-                this.updateFooterActions();
-                this.updateTabToolbarItemsPressedState();
-                this.fireCallback(this.currentIndexChangedCallback);
-            }
+            if (val < 0 || this.visiblePanelCount < 1)
+                return;
+            if (val >= this.visiblePanelCount)
+                val = this.visiblePanelCount - 1;
+            this.currentPanel = this.visiblePanels[val];
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(QuestionPanelDynamicModel.prototype, "currentIndexValue", {
-        get: function () { return this.getPropertyValue("currentIndexValue", -1); },
-        set: function (val) { this.setPropertyValue("currentIndexValue", val); },
-        enumerable: false,
-        configurable: true
-    });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "currentPanel", {
         /**
          * A `PanelModel` object that is the currently displayed panel.
@@ -49034,10 +49240,24 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
          * @see renderMode
          */
         get: function () {
-            var index = this.currentIndex;
-            if (index < 0 || index >= this.panels.length)
+            if (this.isRenderModeList || this.useTemplatePanel)
                 return null;
-            return this.panels[index];
+            var res = this.getPropertyValue("currentPanel", null);
+            if (!res && this.visiblePanelCount > 0) {
+                res = this.visiblePanels[0];
+                this.currentPanel = res;
+            }
+            return res;
+        },
+        set: function (val) {
+            if (this.isRenderModeList || this.useTemplatePanel)
+                return;
+            if (!!val && this.visiblePanels.indexOf(val) < 0 || val === this.getPropertyValue("currentPanel"))
+                return;
+            this.setPropertyValue("currentPanel", val);
+            this.updateFooterActions();
+            this.updateTabToolbarItemsPressedState();
+            this.fireCallback(this.currentIndexChangedCallback);
         },
         enumerable: false,
         configurable: true
@@ -49243,7 +49463,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
          * @see panelNextText
          */
         get: function () {
-            return this.currentIndex >= 0 && this.currentIndex < this.panelCount - 1;
+            return this.currentIndex >= 0 && this.currentIndex < this.visiblePanelCount - 1;
         },
         enumerable: false,
         configurable: true
@@ -49255,10 +49475,10 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "isRangeShowing", {
         /**
-         * Returns true when showRangeInProgress equals to true, renderMode doesn't equal to "list" and panelCount is >= 2.
+         * Returns true when showRangeInProgress equals to true, renderMode doesn't equal to "list" and visiblePanelCount is >= 2.
          */
         get: function () {
-            return (this.showRangeInProgress && this.currentIndex >= 0 && this.panelCount > 1);
+            return (this.showRangeInProgress && this.currentIndex >= 0 && this.visiblePanelCount > 1);
         },
         enumerable: false,
         configurable: true
@@ -49326,7 +49546,6 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             for (var i = this.panelCount; i < val; i++) {
                 var panel = this.createNewPanel();
                 this.panels.push(panel);
-                this.addTabFromToolbar(panel);
                 if (this.renderMode == "list" && this.panelsState != "default") {
                     if (this.panelsState === "expand") {
                         panel.expand();
@@ -49347,11 +49566,19 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             this.reRunCondition();
             this.updateFooterActions();
             this.fireCallback(this.panelCountChangedCallback);
-            (removedPanels.length > 0) && this.removeTabFromToolbar(removedPanels);
         },
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "visiblePanelCount", {
+        /**
+         * Returns the number of visible panels in Dynamic Panel.
+         * @see templateVisibleIf
+         */
+        get: function () { return this.visiblePanels.length; },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "panelsState", {
         /**
          * Specifies whether users can expand and collapse panels. Applies if `renderMode` is `"list"` and the `templateTitle` property is specified.
@@ -49626,7 +49853,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "hasTitleOnLeftTop", {
         get: function () {
-            if (this.isRenderModeTab && !!this.panelCount)
+            if (this.isRenderModeTab && this.visiblePanelCount > 0)
                 return true;
             if (!this.hasTitle)
                 return false;
@@ -49640,8 +49867,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         if (!this.isVisible)
             return 0;
         var startIndex = this.showQuestionNumbers == "onSurvey" ? value : 0;
-        for (var i = 0; i < this.panels.length; i++) {
-            var counter = this.setPanelVisibleIndex(this.panels[i], startIndex, this.showQuestionNumbers != "off");
+        for (var i = 0; i < this.visiblePanels.length; i++) {
+            var counter = this.setPanelVisibleIndex(this.visiblePanels[i], startIndex, this.showQuestionNumbers != "off");
             if (this.showQuestionNumbers == "onSurvey") {
                 startIndex += counter;
             }
@@ -49674,7 +49901,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         get: function () {
             if (this.isDesignMode)
                 return false;
-            if (this.isDefaultV2Theme && !this.legacyNavigation && !this.isRenderModeList && this.currentIndex < this.panelCount - 1) {
+            if (this.isDefaultV2Theme && !this.legacyNavigation && !this.isRenderModeList && this.currentIndex < this.visiblePanelCount - 1) {
                 return false;
             }
             return (this.allowAddPanel &&
@@ -49793,7 +50020,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         return true;
     };
     QuestionPanelDynamicModel.prototype.getProgressInfo = function () {
-        return _survey_element__WEBPACK_IMPORTED_MODULE_1__["SurveyElement"].getProgressInfoByElements(this.panels, this.isRequired);
+        return _survey_element__WEBPACK_IMPORTED_MODULE_1__["SurveyElement"].getProgressInfoByElements(this.visiblePanels, this.isRequired);
     };
     QuestionPanelDynamicModel.prototype.isRowEmpty = function (val) {
         for (var prop in val) {
@@ -49909,10 +50136,13 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
      * @see template
      */
     QuestionPanelDynamicModel.prototype.removePanel = function (value) {
-        var index = this.getPanelIndex(value);
-        if (index < 0 || index >= this.panelCount)
+        var visIndex = this.getVisualPanelIndex(value);
+        if (visIndex < 0 || visIndex >= this.visiblePanelCount)
+            return;
+        var panel = this.visiblePanels[visIndex];
+        var index = this.panels.indexOf(panel);
+        if (index < 0)
             return;
-        var panel = this.panels[index];
         if (this.survey && !this.survey.dynamicPanelRemoving(this, index, panel))
             return;
         this.panels.splice(index, 1);
@@ -49928,14 +50158,13 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         if (this.survey)
             this.survey.dynamicPanelRemoved(this, index, panel);
         this.isValueChangingInternally = false;
-        this.removeTabFromToolbar([panel]);
     };
-    QuestionPanelDynamicModel.prototype.getPanelIndex = function (val) {
+    QuestionPanelDynamicModel.prototype.getVisualPanelIndex = function (val) {
         if (_helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].isNumber(val))
             return val;
-        var items = this.items;
-        for (var i = 0; i < this.panels.length; i++) {
-            if (this.panels[i] === val || items[i] === val)
+        var visPanels = this.visiblePanels;
+        for (var i = 0; i < visPanels.length; i++) {
+            if (visPanels[i] === val || visPanels[i].data === val)
                 return i;
         }
         return -1;
@@ -50199,7 +50428,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     QuestionPanelDynamicModel.prototype.getIsAnswered = function () {
         if (!_super.prototype.getIsAnswered.call(this))
             return false;
-        var panels = this.panels;
+        var panels = this.visiblePanels;
         for (var i = 0; i < panels.length; i++) {
             var visibleQuestions = [];
             panels[i].addQuestionsToList(visibleQuestions, true);
@@ -50237,8 +50466,9 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     };
     QuestionPanelDynamicModel.prototype.getAllErrors = function () {
         var result = _super.prototype.getAllErrors.call(this);
-        for (var i = 0; i < this.panels.length; i++) {
-            var questions = this.panels[i].questions;
+        var panels = this.visiblePanels;
+        for (var i = 0; i < panels.length; i++) {
+            var questions = panels[i].questions;
             for (var j = 0; j < questions.length; j++) {
                 var errors = questions[j].getAllErrors();
                 if (errors && errors.length > 0) {
@@ -50284,7 +50514,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     };
     QuestionPanelDynamicModel.prototype.hasErrorInPanels = function (fireCallback, rec) {
         var res = false;
-        var panels = this.panels;
+        var panels = this.visiblePanels;
         var keyValues = [];
         for (var i = 0; i < panels.length; i++) {
             this.setOnCompleteAsyncInPanel(panels[i]);
@@ -50367,6 +50597,13 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             return _this.getPanelActions(panel);
         };
         panel.footerToolbarCss = this.cssClasses.panelFooter;
+        panel.registerPropertyChangedHandlers(["visible"], function () {
+            if (panel.visible)
+                _this.onPanelAdded(panel);
+            else
+                _this.onPanelRemoved(panel);
+            _this.updateFooterActions();
+        });
         return panel;
     };
     QuestionPanelDynamicModel.prototype.createAndSetupNewPanelObject = function () {
@@ -50477,6 +50714,14 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         var res = this.items.indexOf(item);
         return res > -1 ? res : this.items.length;
     };
+    QuestionPanelDynamicModel.prototype.getVisibleItemIndex = function (item) {
+        var visPanels = this.visiblePanels;
+        for (var i = 0; i < visPanels.length; i++) {
+            if (visPanels[i].data === item)
+                return i;
+        }
+        return visPanels.length;
+    };
     QuestionPanelDynamicModel.prototype.getPanelItemData = function (item) {
         var items = this.items;
         var index = items.indexOf(item);
@@ -50580,7 +50825,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "progressText", {
         get: function () {
-            var rangeMax = this.panelCount;
+            var rangeMax = this.visiblePanelCount;
             return this.getLocalizationFormatString("panelDynamicProgressText", this.currentIndex + 1, rangeMax);
         },
         enumerable: false,
@@ -50588,7 +50833,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "progress", {
         get: function () {
-            return ((this.currentIndex + 1) / this.panelCount) * 100 + "%";
+            return ((this.currentIndex + 1) / this.visiblePanelCount) * 100 + "%";
         },
         enumerable: false,
         configurable: true
@@ -50661,7 +50906,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         configurable: true
     });
     QuestionPanelDynamicModel.prototype.getShowNoEntriesPlaceholder = function () {
-        return !!this.cssClasses.noEntriesPlaceholder && !this.isDesignMode && this.panelCount === 0;
+        return !!this.cssClasses.noEntriesPlaceholder && !this.isDesignMode && this.visiblePanelCount === 0;
     };
     QuestionPanelDynamicModel.prototype.needResponsiveWidth = function () {
         var panel = this.getPanel();
@@ -50721,7 +50966,6 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         var addBtn = new _actions_action__WEBPACK_IMPORTED_MODULE_11__["Action"]({
             id: "sv-pd-add-btn",
             component: "sv-paneldynamic-add-btn",
-            visible: new _base__WEBPACK_IMPORTED_MODULE_12__["ComputedUpdater"](function () { return _this.canAddPanel; }),
             data: { question: this }
         });
         var prevBtnIcon = new _actions_action__WEBPACK_IMPORTED_MODULE_11__["Action"]({
@@ -50746,8 +50990,9 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             var isMobile = _this.isMobile;
             var showNavigation = !isLegacyNavigation && !isRenderModeList;
             prevTextBtn.visible = showNavigation && _this.currentIndex > 0;
-            nextTextBtn.visible = showNavigation && _this.currentIndex < _this.panelCount - 1;
+            nextTextBtn.visible = showNavigation && _this.currentIndex < _this.visiblePanelCount - 1;
             nextTextBtn.needSpace = isMobile && nextTextBtn.visible && prevTextBtn.visible;
+            addBtn.visible = _this.canAddPanel;
             addBtn.needSpace = _this.isMobile && !nextTextBtn.visible && prevTextBtn.visible;
             progressText.visible = !_this.isRenderModeList && !isMobile;
             progressText.needSpace = !isLegacyNavigation && !_this.isMobile;
@@ -50788,9 +51033,9 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     QuestionPanelDynamicModel.prototype.updateTabToolbarItemsPressedState = function () {
         if (!this.isRenderModeTab)
             return;
-        if (this.currentIndex < 0 || this.currentIndex >= this.panels.length)
+        if (this.currentIndex < 0 || this.currentIndex >= this.visiblePanelCount)
             return;
-        var panel = this.panels[this.currentIndex];
+        var panel = this.visiblePanels[this.currentIndex];
         this.additionalTitleToolbar.renderedActions.forEach(function (action) { return action.pressed = action.id === panel.id; });
     };
     QuestionPanelDynamicModel.prototype.updateTabToolbar = function () {
@@ -50798,24 +51043,23 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         if (!this.isRenderModeTab)
             return;
         var items = [];
-        this.panels.forEach(function (panel) { return items.push(_this.createTabByPanel(panel)); });
+        this.visiblePanels.forEach(function (panel) { return items.push(_this.createTabByPanel(panel)); });
         this.additionalTitleToolbar.setItems(items);
     };
-    QuestionPanelDynamicModel.prototype.addTabFromToolbar = function (panel) {
+    QuestionPanelDynamicModel.prototype.addTabFromToolbar = function (panel, index) {
         if (!this.isRenderModeTab)
             return;
         var newItem = this.createTabByPanel(panel);
-        this.additionalTitleToolbar.actions.push(newItem);
+        this.additionalTitleToolbar.actions.splice(index, 0, newItem);
         this.updateTabToolbarItemsPressedState();
     };
-    QuestionPanelDynamicModel.prototype.removeTabFromToolbar = function (panels) {
-        var _this = this;
+    QuestionPanelDynamicModel.prototype.removeTabFromToolbar = function (panel) {
         if (!this.isRenderModeTab)
             return;
-        panels.forEach(function (panel) {
-            var removedItem = _this.additionalTitleToolbar.getActionById(panel.id);
-            _this.additionalTitleToolbar.actions.splice(_this.additionalTitleToolbar.actions.indexOf(removedItem), 1);
-        });
+        var removedItem = this.additionalTitleToolbar.getActionById(panel.id);
+        if (!removedItem)
+            return;
+        this.additionalTitleToolbar.actions.splice(this.additionalTitleToolbar.actions.indexOf(removedItem), 1);
         this.updateTabToolbarItemsPressedState();
     };
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "showLegacyNavigation", {
@@ -50903,6 +51147,10 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_5__["Serializer"].addClass("paneldynamic",
         default: "default",
         choices: ["default", "top", "bottom", "left"],
     },
+    {
+        name: "templateVisibleIf:expression",
+        category: "logic"
+    },
     {
         name: "panelRemoveButtonLocation",
         default: "bottom",
@@ -51527,9 +51775,9 @@ var RenderedRatingItem = /** @class */ (function (_super) {
 }(_base__WEBPACK_IMPORTED_MODULE_7__["Base"]));
 
 /**
- * A Model for a rating question.
+ * A class that describes the Rating Scale question type.
  *
- * [View Demo](https://surveyjs.io/form-library/examples/questiontype-rating/ (linkStyle))
+ * [View Demo](https://surveyjs.io/form-library/examples/rating-scale/ (linkStyle))
  */
 var QuestionRatingModel = /** @class */ (function (_super) {
     __extends(QuestionRatingModel, _super);
@@ -51994,10 +52242,35 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     QuestionRatingModel.prototype.onItemMouseOut = function (item) {
         this.renderedRateItems.forEach(function (item) { return item.highlight = "none"; });
     };
+    Object.defineProperty(QuestionRatingModel.prototype, "itemSmallMode", {
+        get: function () {
+            return this.inMatrixMode && _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].matrix.rateSize == "small";
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionRatingModel.prototype, "ratingRootCss", {
         get: function () {
-            return ((this.displayMode == "buttons" || (!!this.survey && this.survey.isDesignMode)) && this.cssClasses.rootWrappable) ?
+            var baseClass = ((this.displayMode == "buttons" || (!!this.survey && this.survey.isDesignMode)) && this.cssClasses.rootWrappable) ?
                 this.cssClasses.rootWrappable : this.cssClasses.root;
+            return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_6__["CssClassBuilder"]()
+                .append(baseClass)
+                .append(this.cssClasses.itemSmall, this.itemSmallMode && this.rateType != "labels")
+                .toString();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(QuestionRatingModel.prototype, "itemStarIcon", {
+        get: function () {
+            return this.itemSmallMode ? "icon-rating-star-small" : "icon-rating-star";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(QuestionRatingModel.prototype, "itemStarIconAlt", {
+        get: function () {
+            return this.itemStarIcon + "-2";
         },
         enumerable: false,
         configurable: true
@@ -52087,6 +52360,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         var itemUnhighlightedClass = null;
         var itemScaleColoredClass = null;
         var itemRateColoredClass = null;
+        var itemSmallClass = null;
         if (this.isStar) {
             itemClass = this.cssClasses.itemStar;
             itemSelectedClass = this.cssClasses.itemStarSelected;
@@ -52095,6 +52369,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
             itemitemOnErrorClass = this.cssClasses.itemStarOnError;
             itemHighlightedClass = this.cssClasses.itemStarHighlighted;
             itemUnhighlightedClass = this.cssClasses.itemStarUnhighlighted;
+            itemSmallClass = this.cssClasses.itemStarSmall;
         }
         if (this.isSmiley) {
             itemClass = this.cssClasses.itemSmiley;
@@ -52105,6 +52380,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
             itemHighlightedClass = this.cssClasses.itemSmileyHighlighted;
             itemScaleColoredClass = this.cssClasses.itemSmileyScaleColored;
             itemRateColoredClass = this.cssClasses.itemSmileyRateColored;
+            itemSmallClass = this.cssClasses.itemSmileySmall;
         }
         var hasFixedSize = !this.isStar &&
             !this.isSmiley &&
@@ -52123,6 +52399,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
             .append(itemRateColoredClass, this.rateColorMode == "scale" && isSelected)
             .append(itemUnhighlightedClass, isUnhighlighted)
             .append(itemitemOnErrorClass, this.errors.length > 0)
+            .append(itemSmallClass, this.itemSmallMode)
             .append(this.cssClasses.itemFixedSize, hasFixedSize)
             .toString();
     };
@@ -52325,7 +52602,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("rating", [
         name: "autoGenerate",
         category: "rateValues",
         default: true,
-        choices: [{ value: true, text: "Generate" }, { value: false, text: "Enter manually" }],
+        choices: [true, false],
         visibleIndex: 4
     },
     {
@@ -53103,7 +53380,7 @@ var QuestionTextModel = /** @class */ (function (_super) {
             }
         };
         _this.onChange = function (event) {
-            if (event.target === document.activeElement) {
+            if (event.target === _settings__WEBPACK_IMPORTED_MODULE_6__["settings"].environment.root.activeElement) {
                 if (_this.isInputTextUpdate) {
                     _this.updateValueOnEvent(event);
                 }
@@ -55103,10 +55380,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "List", function() { return List; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../element-factory */ "./src/react/element-factory.tsx");
-/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../reactquestion_element */ "./src/react/reactquestion_element.tsx");
-/* harmony import */ var _svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
-/* harmony import */ var _list_item__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./list-item */ "./src/react/components/list/list-item.tsx");
+/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-core */ "./src/entries/core.ts");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../element-factory */ "./src/react/element-factory.tsx");
+/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../reactquestion_element */ "./src/react/reactquestion_element.tsx");
+/* harmony import */ var _svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
+/* harmony import */ var _list_item__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./list-item */ "./src/react/components/list/list-item.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -55127,6 +55405,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var List = /** @class */ (function (_super) {
     __extends(List, _super);
     function List(props) {
@@ -55184,7 +55463,7 @@ var List = /** @class */ (function (_super) {
             return null;
         }
         return items.map(function (item, itemIndex) {
-            return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_list_item__WEBPACK_IMPORTED_MODULE_4__["ListItem"], { model: _this.model, item: item, key: "item" + itemIndex }));
+            return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_list_item__WEBPACK_IMPORTED_MODULE_5__["ListItem"], { model: _this.model, item: item, key: "item" + itemIndex }));
         });
     };
     List.prototype.searchElementContent = function () {
@@ -55193,7 +55472,8 @@ var List = /** @class */ (function (_super) {
             return null;
         else {
             var onChange = function (e) {
-                if (e.target === document.activeElement) {
+                var root = survey_core__WEBPACK_IMPORTED_MODULE_1__["settings"].environment.root;
+                if (e.target === root.activeElement) {
                     _this.model.filterString = e.target.value;
                 }
             };
@@ -55202,10 +55482,10 @@ var List = /** @class */ (function (_super) {
             };
             var clearButton = this.model.showSearchClearButton && !!this.model.filterString ?
                 react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { className: this.model.cssClasses.searchClearButtonIcon, onClick: function (event) { _this.model.onClickSearchClearButton(event); } },
-                    react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { iconName: "icon-searchclear", size: "auto" })) : null;
+                    react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_4__["SvgIcon"], { iconName: "icon-searchclear", size: "auto" })) : null;
             return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.model.cssClasses.filter },
                 react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.model.cssClasses.filterIcon },
-                    react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { iconName: "icon-search", size: "auto" })),
+                    react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_4__["SvgIcon"], { iconName: "icon-search", size: "auto" })),
                 react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "text", className: this.model.cssClasses.filterInput, "aria-label": this.model.filterStringPlaceholder, placeholder: this.model.filterStringPlaceholder, value: this.state.filterString, onKeyUp: onKeyUp, onChange: onChange }),
                 clearButton));
         }
@@ -55216,9 +55496,9 @@ var List = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.model.cssClasses.emptyText, "aria-label": this.model.emptyMessage }, this.model.emptyMessage)));
     };
     return List;
-}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_2__["SurveyElementBase"]));
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_3__["SurveyElementBase"]));
 
-_element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.registerElement("sv-list", function (props) {
+_element_factory__WEBPACK_IMPORTED_MODULE_2__["ReactElementFactory"].Instance.registerElement("sv-list", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(List, props);
 });
 
@@ -55571,7 +55851,7 @@ var NotifierComponent = /** @class */ (function (_super) {
         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 },
+        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: this.notifier.css, style: style, role: "alert", "aria-live": "polite" },
             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 })));
     };
@@ -56268,8 +56548,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: "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 })));
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_3__["SvgIcon"], { className: "sv-star", size: "auto", iconName: this.question.itemStarIcon, 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: this.question.itemStarIconAlt, title: this.item.text })));
     };
     return RatingItemStar;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_2__["SurveyElementBase"]));
@@ -56837,7 +57117,8 @@ var TitleContent = /** @class */ (function (_super) {
         }
         var questionNumber = element.no;
         if (questionNumber) {
-            spans.push(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { "data-key": "q_num", key: "q_num", className: cssClasses.number || cssClasses.panel.number, style: { position: "static" }, "aria-hidden": true }, questionNumber));
+            var panelNumber = !!cssClasses.panel ? cssClasses.panel.number : undefined;
+            spans.push(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { "data-key": "q_num", key: "q_num", className: cssClasses.number || panelNumber, style: { position: "static" }, "aria-hidden": true }, questionNumber));
             spans.push(getSpaceSpan("num-sp"));
         }
         if (element.isRequireTextBeforeTitle) {
@@ -57133,8 +57414,9 @@ var SurveyQuestionDropdownBase = /** @class */ (function (_super) {
     SurveyQuestionDropdownBase.prototype.renderInput = function (dropdownListModel) {
         var _this = this;
         var valueElement = this.renderValueElement(dropdownListModel);
+        var root = survey_core__WEBPACK_IMPORTED_MODULE_1__["settings"].environment.root;
         var onInputChange = function (e) {
-            if (e.target === document.activeElement) {
+            if (e.target === root.activeElement) {
                 dropdownListModel.inputStringRendered = e.target.value;
             }
         };
@@ -60710,6 +60992,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/svg-icon/svg-icon */ "./src/react/components/svg-icon/svg-icon.tsx");
 /* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reactquestion_element */ "./src/react/reactquestion_element.tsx");
 /* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./reactquestion_factory */ "./src/react/reactquestion_factory.tsx");
+/* harmony import */ var _reactSurvey__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./reactSurvey */ "./src/react/reactSurvey.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -60730,6 +61013,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var SurveyQuestionFile = /** @class */ (function (_super) {
     __extends(SurveyQuestionFile, _super);
     function SurveyQuestionFile(props) {
@@ -60767,7 +61051,7 @@ var SurveyQuestionFile = /** @class */ (function (_super) {
         var questionCss = this.question.cssClasses;
         var noFileChosen = null;
         var chooseFile = null;
-        chooseFile = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { role: "button", tabIndex: 0, className: this.question.getChooseFileCss(), htmlFor: this.question.inputId, "aria-label": this.question.chooseButtonCaption },
+        chooseFile = Object(_reactSurvey__WEBPACK_IMPORTED_MODULE_5__["attachKey2click"])(react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { role: "button", tabIndex: 0, className: this.question.getChooseFileCss(), htmlFor: this.question.inputId, "aria-label": this.question.chooseButtonCaption },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, this.question.chooseButtonCaption),
             (!!this.question.cssClasses.chooseFileIconId) ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { title: this.question.chooseButtonCaption, iconName: this.question.cssClasses.chooseFileIconId, size: "auto" }) : null));
         if (this.question.isEmpty()) {
@@ -63337,7 +63621,8 @@ var TagboxFilterString = /** @class */ (function (_super) {
         }
     };
     TagboxFilterString.prototype.onChange = function (e) {
-        if (e.target === document.activeElement) {
+        var root = survey_core__WEBPACK_IMPORTED_MODULE_1__["settings"].environment.root;
+        if (e.target === root.activeElement) {
             this.model.inputStringRendered = e.target.value;
         }
     };
@@ -63355,7 +63640,16 @@ var TagboxFilterString = /** @class */ (function (_super) {
     };
     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.inputStringRendered ? 1 : undefined, role: this.model.filterStringEnabled ? this.question.ariaRole : undefined, "aria-label": this.question.placeholder, "aria-expanded": this.question.ariaExpanded ? "true" : "false", "aria-controls": this.model.listElementId, "aria-activedescendant": this.model.ariaActivedescendant, 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 (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.hint },
+            this.model.showHintPrefix ?
+                (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.hintPrefix },
+                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, this.model.hintStringPrefix))) : null,
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.cssClasses.hintSuffixWrapper },
+                this.model.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" }, this.model.inputStringRendered),
+                        react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, this.model.hintStringSuffix))) : null,
+                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, "aria-expanded": this.question.ariaExpanded ? "true" : "false", "aria-controls": this.model.listElementId, "aria-activedescendant": this.model.ariaActivedescendant, 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"]));
@@ -63404,9 +63698,6 @@ var SurveyQuestionTagboxItem = /** @class */ (function (_super) {
     function SurveyQuestionTagboxItem(props) {
         return _super.call(this, props) || this;
     }
-    SurveyQuestionTagboxItem.prototype.getStateElement = function () {
-        return this.item;
-    };
     Object.defineProperty(SurveyQuestionTagboxItem.prototype, "question", {
         get: function () {
             return this.props.question;
@@ -63494,7 +63785,29 @@ var RendererFactory = /** @class */ (function () {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "settings", function() { return settings; });
+/* WEBPACK VAR INJECTION */(function(global) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "settings", function() { return settings; });
+var document = global.document;
+var defaultEnvironment = (!!document ? {
+    root: document,
+    _rootElement: document.body,
+    get rootElement() {
+        var _a;
+        return (_a = this._rootElement) !== null && _a !== void 0 ? _a : document.body;
+    },
+    set rootElement(rootElement) {
+        this._rootElement = rootElement;
+    },
+    _popupMountContainer: document.body,
+    get popupMountContainer() {
+        var _a;
+        return (_a = this._popupMountContainer) !== null && _a !== void 0 ? _a : document.body;
+    },
+    set popupMountContainer(popupMountContainer) {
+        this._popupMountContainer = popupMountContainer;
+    },
+    svgMountContainer: document.head,
+    stylesSheetsMountContainer: document.head,
+} : undefined);
 var columnWidthsByType = {
     "file": { minWidth: "240px" },
     "comment": { minWidth: "200px" }
@@ -63876,6 +64189,10 @@ var settings = {
      * - `"icon"` - Users can only use the choice item icon as a drag handle.
      */
     rankingDragHandleArea: "entireItem",
+    /**
+     * Specifies environment in which SurveyJS will exist
+     */
+    environment: defaultEnvironment,
     titleTags: {
         survey: "h3",
         page: "h4",
@@ -63963,12 +64280,17 @@ var settings = {
      * - `columnWidthsByType`: `Object`\
      * An object that specifies fixed and minimum column width based on the column type.\
      * Example: `settings.matrix.columnWidthsByType = { "tagbox": { minWidth: "240px", width: "300px" } }`
+     *
+     * - `rateSize`: `"small"` (default) | `"normal"`\
+     * Specifies the size of rate values. Applies to [Rating Scale](https://surveyjs.io/form-library/examples/rating-scale/) questions within matrixes.
      */
     matrix: {
-        columnWidthsByType: columnWidthsByType
+        columnWidthsByType: columnWidthsByType,
+        rateSize: "small",
     }
 };
 
+/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../node_modules/webpack/buildin/global.js */ "./node_modules/webpack/buildin/global.js")))
 
 /***/ }),
 
@@ -63991,6 +64313,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "winterstoneThemeColors", function() { return winterstoneThemeColors; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "StylesManager", function() { return StylesManager; });
 /* harmony import */ var _defaultCss_defaultV2Css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./defaultCss/defaultV2Css */ "./src/defaultCss/defaultV2Css.ts");
+/* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./settings */ "./src/settings.ts");
+/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils/utils */ "./src/utils/utils.ts");
+
+
 
 var modernThemeColors = {
     "$main-color": "#1ab394",
@@ -64222,9 +64548,11 @@ var StylesManager = /** @class */ (function () {
         return themeMapper;
     };
     StylesManager.getIncludedThemeCss = function () {
+        var rootElement = _settings__WEBPACK_IMPORTED_MODULE_1__["settings"].environment.rootElement;
         var themeMapper = StylesManager.getAvailableThemes();
-        if (!!document && !!document.body) {
-            var styles_1 = getComputedStyle(document.body);
+        var element = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_2__["isShadowDOM"])(rootElement) ? rootElement.host : rootElement;
+        if (!!element) {
+            var styles_1 = getComputedStyle(element);
             if (styles_1.length) {
                 return themeMapper.filter(function (item) { return item.theme.variables && styles_1.getPropertyValue(item.theme.variables.themeMark); });
             }
@@ -64232,23 +64560,25 @@ var StylesManager = /** @class */ (function () {
         return [];
     };
     StylesManager.findSheet = function (styleSheetId) {
-        if (typeof document === "undefined")
+        if (typeof _settings__WEBPACK_IMPORTED_MODULE_1__["settings"].environment === "undefined")
             return null;
-        for (var i = 0; i < document.styleSheets.length; i++) {
-            if (!!document.styleSheets[i].ownerNode && document.styleSheets[i].ownerNode["id"] === styleSheetId) {
-                return document.styleSheets[i];
+        var styleSheets = _settings__WEBPACK_IMPORTED_MODULE_1__["settings"].environment.root.styleSheets;
+        for (var i = 0; i < styleSheets.length; i++) {
+            if (!!styleSheets[i].ownerNode && styleSheets[i].ownerNode["id"] === styleSheetId) {
+                return styleSheets[i];
             }
         }
         return null;
     };
     StylesManager.createSheet = function (styleSheetId) {
+        var stylesSheetsMountContainer = _settings__WEBPACK_IMPORTED_MODULE_1__["settings"].environment.stylesSheetsMountContainer;
         var style = document.createElement("style");
         style.id = styleSheetId;
         // Add a media (and/or media query) here if you'd like!
         // style.setAttribute("media", "screen")
         // style.setAttribute("media", "only screen and (max-width : 1024px)")
         style.appendChild(document.createTextNode(""));
-        document.head.appendChild(style);
+        Object(_utils_utils__WEBPACK_IMPORTED_MODULE_2__["getElement"])(stylesSheetsMountContainer).appendChild(style);
         if (!!StylesManager.Logger) {
             StylesManager.Logger.log("style sheet " + styleSheetId + " created");
         }
@@ -64256,10 +64586,12 @@ var StylesManager = /** @class */ (function () {
     };
     StylesManager.applyTheme = function (themeName, themeSelector) {
         if (themeName === void 0) { themeName = "default"; }
+        var rootElement = _settings__WEBPACK_IMPORTED_MODULE_1__["settings"].environment.rootElement;
+        var element = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_2__["isShadowDOM"])(rootElement) ? rootElement.host : rootElement;
         _defaultCss_defaultV2Css__WEBPACK_IMPORTED_MODULE_0__["surveyCss"].currentType = themeName;
         if (StylesManager.Enabled) {
             if (themeName !== "bootstrap" && themeName !== "bootstrapmaterial") {
-                setCssVariables(StylesManager.ThemeColors[themeName], document.body);
+                setCssVariables(StylesManager.ThemeColors[themeName], element);
                 if (!!StylesManager.Logger) {
                     StylesManager.Logger.log("apply theme " + themeName + " completed");
                 }
@@ -64596,9 +64928,10 @@ var SurveyElement = /** @class */ (function (_super) {
         return info;
     };
     SurveyElement.ScrollElementToTop = function (elementId) {
-        if (!elementId || typeof document === "undefined")
+        var root = _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].environment.root;
+        if (!elementId || typeof root === "undefined")
             return false;
-        var el = document.getElementById(elementId);
+        var el = root.getElementById(elementId);
         if (!el || !el.scrollIntoView)
             return false;
         var elemTop = el.getBoundingClientRect().top;
@@ -64636,9 +64969,10 @@ var SurveyElement = /** @class */ (function (_super) {
         return res;
     };
     SurveyElement.focusElementCore = function (elementId) {
-        if (!document)
+        var root = _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].environment.root;
+        if (!root)
             return false;
-        var el = document.getElementById(elementId);
+        var el = root.getElementById(elementId);
         if (el && !el["disabled"]) {
             el.focus();
             return true;
@@ -65038,9 +65372,10 @@ var SurveyElement = /** @class */ (function (_super) {
          *
          * Use the following events of the [`SurveyModel`](https://surveyjs.io/form-library/documentation/surveymodel) object to override CSS classes:
          *
-         * - [`onUpdatePageCssClasses`](https://surveyjs.io/form-library/documentation/surveymodel#onUpdatePageCssClasses)
-         * - [`onUpdatePanelCssClasses`](https://surveyjs.io/form-library/documentation/surveymodel#onUpdatePanelCssClasses)
          * - [`onUpdateQuestionCssClasses`](https://surveyjs.io/form-library/documentation/surveymodel#onUpdateQuestionCssClasses)
+         * - [`onUpdatePanelCssClasses`](https://surveyjs.io/form-library/documentation/surveymodel#onUpdatePanelCssClasses)
+         * - [`onUpdatePageCssClasses`](https://surveyjs.io/form-library/documentation/surveymodel#onUpdatePageCssClasses)
+         * - [`onUpdateChoiceItemCss`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onUpdateChoiceItemCss)
          */
         get: function () {
             if (!this.survey)
@@ -65051,6 +65386,16 @@ var SurveyElement = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SurveyElement.prototype, "cssTitleNumber", {
+        get: function () {
+            var css = this.cssClasses;
+            if (css.number)
+                return css.number;
+            return css.panel ? css.panel.number : undefined;
+        },
+        enumerable: false,
+        configurable: true
+    });
     SurveyElement.prototype.calcCssClasses = function (css) { return undefined; };
     SurveyElement.prototype.updateElementCssCore = function (cssClasses) { };
     Object.defineProperty(SurveyElement.prototype, "cssError", {
@@ -66111,23 +66456,33 @@ var SurveyModel = /** @class */ (function (_super) {
          */
         _this.onProcessTextValue = _this.addEvent();
         /**
-         * An event that is raised before rendering a question. Use it to override the default question CSS classes.
+         * An event that is raised before rendering a question. Use it to override default question 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))
+         * [View Demo](/form-library/examples/customize-survey-with-css/ (linkStyle))
+         * @see css
          */
         _this.onUpdateQuestionCssClasses = _this.addEvent();
         /**
-         * An event that is raised before rendering a panel. Use it to override the default panel CSS classes.
+         * An event that is raised before rendering a panel. Use it to override default panel CSS classes.
+         *
+         * [View Demo](/form-library/examples/customize-survey-with-css/ (linkStyle))
+         * @see css
          */
         _this.onUpdatePanelCssClasses = _this.addEvent();
         /**
-         * An event that is raised before rendering a page. Use it to override the default page CSS classes.
+         * An event that is raised before rendering a page. Use it to override default page CSS classes.
+         *
+         * [View Demo](/form-library/examples/customize-survey-with-css/ (linkStyle))
+         * @see css
          */
         _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.
+         * An event that is raised before rendering a choice item in Radio Button Group, Checkboxes, and Dropdown questions. Use it to override default CSS classes applied to choice items.
+         *
+         * [View Demo](/form-library/examples/customize-survey-with-css/ (linkStyle))
+         * @see css
          */
         _this.onUpdateChoiceItemCss = _this.addEvent();
         /**
@@ -66703,6 +67058,11 @@ var SurveyModel = /** @class */ (function (_super) {
         this.updateCompletedPageCss();
     };
     Object.defineProperty(SurveyModel.prototype, "css", {
+        /**
+         * Gets or sets an object in which keys are UI elements and values are CSS classes applied to them.
+         *
+         * [View Demo](/form-library/examples/customize-survey-with-css/ (linkStyle))
+         */
         get: function () {
             if (!this.cssValue) {
                 this.cssValue = {};
@@ -69237,7 +69597,7 @@ var SurveyModel = /** @class */ (function (_super) {
         this.isCompleted = false;
         this.isCompletedBefore = false;
         this.isLoading = false;
-        this.canBeCompletedByTrigger = false;
+        this.completedByTriggers = undefined;
         if (clearData) {
             this.data = null;
             this.variablesHash = {};
@@ -69483,7 +69843,7 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "hasCookie", {
         /**
-         * Returns `true`, if a user has already completed the survey in this browser and there is a cookie about it. Survey goes to `completed` state if the function returns `true`.
+         * Returns `true`, if a user has already completed the survey in this browser and there is a cookie about it. Survey goes to `completedbefore` state if the function returns `true`.
          * @see cookieName
          * @see setCookie
          * @see deleteCookie
@@ -70282,8 +70642,8 @@ var SurveyModel = /** @class */ (function (_super) {
         this.stopTimer();
         this.isCompleted = true;
         this.clearUnusedValues();
-        this.setCookie();
         this.saveDataOnComplete(isCompleteOnTrigger);
+        this.setCookie();
         return true;
     };
     SurveyModel.prototype.saveDataOnComplete = function (isCompleteOnTrigger) {
@@ -70477,14 +70837,31 @@ var SurveyModel = /** @class */ (function (_super) {
     SurveyModel.prototype.setCompleted = function () {
         this.doComplete(true);
     };
-    SurveyModel.prototype.canBeCompleted = function () {
+    SurveyModel.prototype.canBeCompleted = function (trigger, isCompleted) {
         if (!_settings__WEBPACK_IMPORTED_MODULE_14__["settings"].changeNavigationButtonsOnCompleteTrigger)
             return;
-        if (!this.canBeCompletedByTrigger) {
-            this.canBeCompletedByTrigger = true;
+        var prevCanBeCompleted = this.canBeCompletedByTrigger;
+        if (!this.completedByTriggers)
+            this.completedByTriggers = {};
+        if (isCompleted) {
+            this.completedByTriggers[trigger.id] = true;
+        }
+        else {
+            delete this.completedByTriggers[trigger.id];
+        }
+        if (prevCanBeCompleted !== this.canBeCompletedByTrigger) {
             this.updateButtonsVisibility();
         }
     };
+    Object.defineProperty(SurveyModel.prototype, "canBeCompletedByTrigger", {
+        get: function () {
+            if (!this.completedByTriggers)
+                return false;
+            return Object.keys(this.completedByTriggers).length > 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(SurveyModel.prototype, "processedCompletedHtml", {
         /**
          * Returns the HTML content for the complete page.
@@ -70699,8 +71076,9 @@ var SurveyModel = /** @class */ (function (_super) {
         if (this.onAfterRenderQuestionInput.isEmpty)
             return;
         var id = question.inputId;
-        if (!!id && htmlElement.id !== id && typeof document !== "undefined") {
-            var el = document.getElementById(id);
+        var root = _settings__WEBPACK_IMPORTED_MODULE_14__["settings"].environment.root;
+        if (!!id && htmlElement.id !== id && typeof root !== "undefined") {
+            var el = root.getElementById(id);
             if (!!el) {
                 htmlElement = el;
             }
@@ -70741,7 +71119,12 @@ var SurveyModel = /** @class */ (function (_super) {
         this.onChoicesLazyLoad.fire(this, options);
     };
     SurveyModel.prototype.getChoiceDisplayValue = function (options) {
-        this.onGetChoiceDisplayValue.fire(this, options);
+        if (this.onGetChoiceDisplayValue.isEmpty) {
+            options.setItems(null);
+        }
+        else {
+            this.onGetChoiceDisplayValue.fire(this, options);
+        }
     };
     SurveyModel.prototype.matrixBeforeRowAdded = function (options) {
         this.onMatrixBeforeRowAdded.fire(this, options);
@@ -71470,7 +71853,6 @@ var SurveyModel = /** @class */ (function (_super) {
         this.triggerValues = this.getFilteredValues();
         var properties = this.getFilteredProperties();
         var prevCanBeCompleted = this.canBeCompletedByTrigger;
-        this.canBeCompletedByTrigger = false;
         for (var i = 0; i < this.triggers.length; i++) {
             this.triggers[i].checkExpression(isOnNextPage, isOnComplete, this.triggerKeys, this.triggerValues, properties);
         }
@@ -71735,7 +72117,7 @@ var SurveyModel = /** @class */ (function (_super) {
         this.onQuestionsOnPageModeChanged("standard");
         _super.prototype.endLoadingFromJson.call(this);
         if (this.hasCookie) {
-            this.doComplete();
+            this.isCompletedBefore = true;
         }
         this.doElementsOnLoad();
         this.isEndLoadingFromJson = "conditions";
@@ -73826,7 +74208,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "createTOCListModel", function() { return createTOCListModel; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getTocRootCss", function() { return getTocRootCss; });
 /* harmony import */ var _actions_action__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./actions/action */ "./src/actions/action.ts");
-/* harmony import */ var _list__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./list */ "./src/list.ts");
+/* harmony import */ var _base__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./base */ "./src/base.ts");
+/* harmony import */ var _list__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./list */ "./src/list.ts");
+
 
 
 function tryNavigateToPage(survey, index) {
@@ -73853,10 +74237,11 @@ function createTOCListModel(survey) {
                     !!document.activeElement.blur && document.activeElement.blur();
                 }
                 return tryNavigateToPage(survey, index);
-            }
+            },
+            visible: new _base__WEBPACK_IMPORTED_MODULE_1__["ComputedUpdater"](function () { return page.isVisible; })
         });
     });
-    var listModel = new _list__WEBPACK_IMPORTED_MODULE_1__["ListModel"](items, function (item) {
+    var listModel = new _list__WEBPACK_IMPORTED_MODULE_2__["ListModel"](items, function (item) {
         if (!!item.action()) {
             listModel.selectedItem = item;
         }
@@ -73977,6 +74362,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SvgIconRegistry", function() { return SvgIconRegistry; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SvgRegistry", function() { return SvgRegistry; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SvgBundleViewModel", function() { return SvgBundleViewModel; });
+/* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./settings */ "./src/settings.ts");
+/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils/utils */ "./src/utils/utils.ts");
+
+
 var SvgIconData = /** @class */ (function () {
     function SvgIconData() {
     }
@@ -74033,12 +74422,12 @@ var SvgIconRegistry = /** @class */ (function () {
     };
     SvgIconRegistry.prototype.renderIcons = function () {
         var containerId = "sv-icon-holder-global-container";
-        if (!document.getElementById(containerId)) {
+        if (!_settings__WEBPACK_IMPORTED_MODULE_0__["settings"].environment.root.getElementById(containerId)) {
             var iconsDiv = document.createElement("div");
             iconsDiv.id = containerId;
             iconsDiv.innerHTML = "<svg>" + this.iconsRenderedHtml() + "</svg>";
             iconsDiv.style.display = "none";
-            document.head.insertBefore(iconsDiv, document.head.firstChild);
+            Object(_utils_utils__WEBPACK_IMPORTED_MODULE_1__["getElement"])(_settings__WEBPACK_IMPORTED_MODULE_0__["settings"].environment.svgMountContainer).appendChild(iconsDiv);
         }
     };
     return SvgIconRegistry;
@@ -74349,6 +74738,7 @@ var Trigger = /** @class */ (function (_super) {
     __extends(Trigger, _super);
     function Trigger() {
         var _this = _super.call(this) || this;
+        _this.idValue = (Trigger.idCounter++);
         _this.usedNames = [];
         _this.registerPropertyChangedHandlers(["operator", "value", "name"], function () {
             _this.oldPropertiesChanged();
@@ -74397,6 +74787,11 @@ var Trigger = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Trigger.prototype, "id", {
+        get: function () { return this.idValue; },
+        enumerable: false,
+        configurable: true
+    });
     Trigger.prototype.getType = function () {
         return "triggerbase";
     };
@@ -74576,6 +74971,7 @@ var Trigger = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Trigger.idCounter = 1;
     Trigger.operatorsValue = null;
     return Trigger;
 }(_base__WEBPACK_IMPORTED_MODULE_1__["Base"]));
@@ -74676,9 +75072,12 @@ var SurveyTriggerComplete = /** @class */ (function (_super) {
             this.owner.setCompleted();
         }
         else {
-            this.owner.canBeCompleted();
+            this.owner.canBeCompleted(this, true);
         }
     };
+    SurveyTriggerComplete.prototype.onFailure = function () {
+        this.owner.canBeCompleted(this, false);
+    };
     return SurveyTriggerComplete;
 }(SurveyTrigger));
 
@@ -75411,7 +75810,7 @@ var TooltipManager = /** @class */ (function () {
 /*!****************************!*\
   !*** ./src/utils/utils.ts ***!
   \****************************/
-/*! exports provided: unwrap, getSize, doKey2ClickBlur, doKey2ClickUp, doKey2ClickDown, sanitizeEditableContent, Logger, mergeValues, getElementWidth, isContainerVisible, classesToSelector, compareVersions, confirmAction, detectIEOrEdge, detectIEBrowser, loadFileFromBase64, isMobile, isElementVisible, findScrollableParent, scrollElementByChildId, navigateToUrl, createSvg, getIconNameFromProxy, increaseHeightByContent, getOriginalEvent, preventDefaults, findParentByClassNames */
+/*! exports provided: unwrap, getSize, doKey2ClickBlur, doKey2ClickUp, doKey2ClickDown, sanitizeEditableContent, Logger, mergeValues, getElementWidth, isContainerVisible, classesToSelector, compareVersions, confirmAction, detectIEOrEdge, detectIEBrowser, loadFileFromBase64, isMobile, isShadowDOM, getElement, isElementVisible, findScrollableParent, scrollElementByChildId, navigateToUrl, createSvg, getIconNameFromProxy, increaseHeightByContent, getOriginalEvent, preventDefaults, findParentByClassNames */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -75433,6 +75832,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "detectIEBrowser", function() { return detectIEBrowser; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "loadFileFromBase64", function() { return loadFileFromBase64; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isMobile", function() { return isMobile; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isShadowDOM", function() { return isShadowDOM; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getElement", function() { return getElement; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isElementVisible", function() { return isElementVisible; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "findScrollableParent", function() { return findScrollableParent; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "scrollElementByChildId", function() { return scrollElementByChildId; });
@@ -75510,13 +75911,24 @@ function loadFileFromBase64(b64Data, fileName) {
 function isMobile() {
     return (typeof window !== "undefined" && typeof window.orientation !== "undefined");
 }
+var isShadowDOM = function (rootElement) {
+    return !!rootElement && !!("host" in rootElement && rootElement.host);
+};
+var getElement = function (element) {
+    var root = _settings__WEBPACK_IMPORTED_MODULE_0__["settings"].environment.root;
+    return typeof element === "string" ? root.getElementById(element) : element;
+};
 function isElementVisible(element, threshold) {
     if (threshold === void 0) { threshold = 0; }
-    if (typeof document === "undefined") {
+    if (typeof _settings__WEBPACK_IMPORTED_MODULE_0__["settings"].environment === "undefined") {
         return false;
     }
+    var root = _settings__WEBPACK_IMPORTED_MODULE_0__["settings"].environment.root;
+    var clientHeight = isShadowDOM(root)
+        ? root.host.clientHeight
+        : root.documentElement.clientHeight;
     var elementRect = element.getBoundingClientRect();
-    var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
+    var viewHeight = Math.max(clientHeight, window.innerHeight);
     var topWin = -threshold;
     var bottomWin = viewHeight + threshold;
     var topEl = elementRect.top;
@@ -75526,8 +75938,11 @@ function isElementVisible(element, threshold) {
     return maxTop <= minBottom;
 }
 function findScrollableParent(element) {
+    var root = _settings__WEBPACK_IMPORTED_MODULE_0__["settings"].environment.root;
     if (!element) {
-        return document.documentElement;
+        return isShadowDOM(root)
+            ? root.host
+            : root.documentElement;
     }
     if (element.scrollHeight > element.clientHeight &&
         (getComputedStyle(element).overflowY === "scroll" ||
@@ -75542,9 +75957,11 @@ function findScrollableParent(element) {
     return findScrollableParent(element.parentElement);
 }
 function scrollElementByChildId(id) {
-    if (!document)
+    var environment = _settings__WEBPACK_IMPORTED_MODULE_0__["settings"].environment;
+    if (!environment)
         return;
-    var el = document.getElementById(id);
+    var root = environment.root;
+    var el = root.getElementById(id);
     if (!el)
         return;
     var scrollableEl = findScrollableParent(el);
@@ -75717,7 +76134,7 @@ function mergeValues(src, dest) {
         return;
     for (var key in src) {
         var value = src[key];
-        if (value && typeof value === "object") {
+        if (!Array.isArray(value) && value && typeof value === "object") {
             if (!dest[key] || typeof dest[key] !== "object")
                 dest[key] = {};
             mergeValues(value, dest[key]);