survey-react 1.9.86 → 1.9.87

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.86
+ * surveyjs - Survey JavaScript library v1.9.87
  * 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";
@@ -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) {
@@ -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.87";
 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();
@@ -32239,7 +32338,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 +32875,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 +34027,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 +34985,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 +34998,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 +35016,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); });
@@ -37533,6 +37648,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 +37668,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 /**
  * A class that describes the Comment question type.
  *
@@ -37628,7 +37745,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 +40189,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 +44516,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) {
@@ -51527,9 +51646,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 +52113,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 +52231,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 +52240,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 +52251,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 +52270,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();
     };
@@ -53103,7 +53251,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 +55251,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 +55276,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var List = /** @class */ (function (_super) {
     __extends(List, _super);
     function List(props) {
@@ -55184,7 +55334,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 +55343,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 +55353,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 +55367,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);
 });
 
@@ -56268,8 +56419,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 +56988,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 +57285,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;
             }
         };
@@ -63337,7 +63490,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 +63509,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"]));
@@ -63494,7 +63657,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 +64061,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 +64152,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 +64185,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 +64420,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 +64432,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 +64458,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 +64800,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 +64841,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 +65244,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 +65258,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 +66328,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 +66930,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 +69469,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 +69715,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
@@ -70477,14 +70709,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 +70948,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 +70991,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 +71725,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 +71989,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";
@@ -73977,6 +74231,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 +74291,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 +74607,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 +74656,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 +74840,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 +74941,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 +75679,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 +75701,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 +75780,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 +75807,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 +75826,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);