survey-react 1.11.3 → 1.11.5

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.11.3
+ * surveyjs - Survey JavaScript library v1.11.5
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -909,6 +909,13 @@ var BaseAction = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(BaseAction.prototype, "hasSubItems", {
+        get: function () {
+            return !!this.items && this.items.length > 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
     BaseAction.prototype.getActionBarItemTitleCss = function () {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_5__["CssClassBuilder"]()
             .append(this.cssClasses.itemTitle)
@@ -1095,11 +1102,13 @@ var Action = /** @class */ (function (_super) {
     Action.prototype.createLocTitle = function () {
         return this.createLocalizableString("title", this, true);
     };
-    Action.prototype.setItems = function (items, onSelectionChanged) {
+    Action.prototype.setSubItems = function (options) {
         this.markerIconName = "icon-next_16x16";
         this.component = "sv-list-item-group";
-        this.items = __spreadArray([], items);
-        var popupModel = createPopupModelWithListModel({ items: items, onSelectionChanged: onSelectionChanged, searchEnabled: false }, { horizontalPosition: "right", showPointer: false, canShrink: false });
+        this.items = __spreadArray([], options.items);
+        var listOptions = Object.assign({}, options);
+        listOptions.searchEnabled = false;
+        var popupModel = createPopupModelWithListModel(listOptions, { horizontalPosition: "right", showPointer: false, canShrink: false });
         popupModel.cssClass = "sv-popup-inner";
         this.popupModel = popupModel;
     };
@@ -1650,9 +1659,6 @@ var ActionContainer = /** @class */ (function (_super) {
                 itemValue.showPopupDelayed(_this.subItemsShowDelay);
                 _this.popupAfterShowCallback(itemValue);
             }
-            else if (!!action.popupModel && action.popupModel.isVisible) {
-                action.hidePopupDelayed(_this.subItemsHideDelay);
-            }
         });
     };
     ActionContainer.prototype.initResponsivityManager = function (container, delayedUpdateFunction) {
@@ -2925,7 +2931,8 @@ var Base = /** @class */ (function () {
         configurable: true
     });
     Base.prototype.afterRerender = function () {
-        this.onElementRerendered.fire(this, undefined);
+        var _a;
+        (_a = this.onElementRerendered) === null || _a === void 0 ? void 0 : _a.fire(this, undefined);
     };
     Base.currentDependencis = undefined;
     return Base;
@@ -4639,6 +4646,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var modernCss = {
     root: "sv-root-modern",
+    rootProgress: "sv-progress",
     timerRoot: "sv-body__timer",
     container: "sv-container-modern",
     header: "sv-title sv-container-modern__title",
@@ -5106,6 +5114,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var defaultStandardCss = {
     root: "sv_main sv_default_css",
+    rootProgress: "sv_progress",
     container: "sv_container",
     header: "sv_header",
     bodyContainer: "sv-components-row",
@@ -5549,6 +5558,7 @@ var surveyCss = {
 };
 var defaultV2Css = {
     root: "sd-root-modern",
+    rootProgress: "sd-progress",
     rootMobile: "sd-root-modern--mobile",
     rootAnimationDisabled: "sd-root-modern--animation-disabled",
     rootReadOnly: "sd-root--readonly",
@@ -6939,12 +6949,12 @@ var DragDropChoices = /** @class */ (function (_super) {
         if (!draggedElementShortcut)
             return;
         // draggedElementShortcut.innerText = text;
-        draggedElementShortcut.style.cssText = " \n          cursor: grabbing;\n          position: absolute;\n          z-index: 10000;\n          font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));\n        ";
+        draggedElementShortcut.className = "sv-drag-drop-choices-shortcut";
         var isDeepClone = true;
         var clone = (draggedElementNode
             .closest("[data-sv-drop-target-item-value]")
             .cloneNode(isDeepClone));
-        clone.style.cssText = "\n      min-width: 100px;\n      box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));\n      background-color: var(--sjs-general-backcolor, var(--background, #fff));\n      border-radius: calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));\n      padding-right: calc(2* var(--sjs-base-unit, var(--base-unit, 8px)));\n      margin-left: 0;\n    ";
+        clone.classList.add("sv-drag-drop-choices-shortcut__content");
         var dragIcon = clone.querySelector(".svc-item-value-controls__drag-icon");
         dragIcon.style.visibility = "visible";
         var removeIcon = clone.querySelector(".svc-item-value-controls__remove");
@@ -6958,6 +6968,9 @@ var DragDropChoices = /** @class */ (function (_super) {
         draggedElementShortcut.shortcutXOffset = event.clientX - rect.x;
         draggedElementShortcut.shortcutYOffset = event.clientY - rect.y;
         this.isBottom = null;
+        if (typeof this.onShortcutCreated === "function") {
+            this.onShortcutCreated(draggedElementShortcut);
+        }
         return draggedElementShortcut;
     };
     DragDropChoices.prototype.createImagePickerShortcut = function (item, text, draggedElementNode, event) {
@@ -7912,9 +7925,13 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
         }
         return _super.prototype.calculateIsBottom.call(this, clientY);
     };
-    DragDropRankingChoices.prototype.getIndixies = function (model, fromChoicesArray, toChoicesArray) {
+    DragDropRankingChoices.prototype.getIndices = function (model, fromChoicesArray, toChoicesArray) {
         var fromIndex = fromChoicesArray.indexOf(this.draggedElement);
         var toIndex = toChoicesArray.indexOf(this.dropTarget);
+        if (fromIndex < 0 && !!this.draggedElement) {
+            this.draggedElement = _itemvalue__WEBPACK_IMPORTED_MODULE_0__["ItemValue"].getItemByValue(fromChoicesArray, this.draggedElement.value) || this.draggedElement;
+            fromIndex = fromChoicesArray.indexOf(this.draggedElement);
+        }
         if (toIndex === -1) {
             var length_1 = model.value.length;
             toIndex = length_1;
@@ -7932,7 +7949,7 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
         return { fromIndex: fromIndex, toIndex: toIndex };
     };
     DragDropRankingChoices.prototype.afterDragOver = function (dropTargetNode) {
-        var _a = this.getIndixies(this.parentElement, this.parentElement.rankingChoices, this.parentElement.rankingChoices), fromIndex = _a.fromIndex, toIndex = _a.toIndex;
+        var _a = this.getIndices(this.parentElement, this.parentElement.rankingChoices, this.parentElement.rankingChoices), fromIndex = _a.fromIndex, toIndex = _a.toIndex;
         this.reorderRankedItem(this.parentElement, fromIndex, toIndex);
     };
     DragDropRankingChoices.prototype.updateDraggedElementShortcut = function (newIndex) {
@@ -8062,7 +8079,7 @@ var DragDropRankingSelectToRank = /** @class */ (function (_super) {
     };
     DragDropRankingSelectToRank.prototype.doRankBetween = function (dropTargetNode, fromChoicesArray, toChoicesArray, rankFunction) {
         var questionModel = this.parentElement;
-        var _a = this.getIndixies(questionModel, fromChoicesArray, toChoicesArray), fromIndex = _a.fromIndex, toIndex = _a.toIndex;
+        var _a = this.getIndices(questionModel, fromChoicesArray, toChoicesArray), fromIndex = _a.fromIndex, toIndex = _a.toIndex;
         rankFunction(questionModel, fromIndex, toIndex, dropTargetNode);
     };
     Object.defineProperty(DragDropRankingSelectToRank.prototype, "isDraggedElementRanked", {
@@ -8161,6 +8178,7 @@ var DropdownListModel = /** @class */ (function (_super) {
         _this.onSelectionChanged = onSelectionChanged;
         _this.minPageSize = 25;
         _this.loadingItemHeight = 40;
+        _this.timer = undefined;
         _this._markdownMode = false;
         _this.filteredItems = undefined;
         _this.selectedItemSelector = ".sv-list__item--selected";
@@ -8215,28 +8233,43 @@ var DropdownListModel = /** @class */ (function (_super) {
         this.listModel.isAllDataLoaded = this.question.choicesLazyLoadEnabled && this.itemsSettings.items.length == this.itemsSettings.totalCount;
         this.question.choices = this.itemsSettings.items;
     };
+    DropdownListModel.prototype.loadQuestionChoices = function (callbackAfterItemsLoaded) {
+        var _this = this;
+        this.isRunningLoadQuestionChoices = true;
+        this.question.survey.loadQuestionChoices({
+            question: this.question,
+            filter: this.filterString,
+            skip: this.itemsSettings.skip,
+            take: this.itemsSettings.take,
+            setItems: function (items, totalCount) {
+                _this.isRunningLoadQuestionChoices = false;
+                _this.setItems(items || [], totalCount || 0);
+                _this.popupRecalculatePosition(_this.itemsSettings.skip === _this.itemsSettings.take);
+                if (!!callbackAfterItemsLoaded) {
+                    callbackAfterItemsLoaded();
+                }
+            }
+        });
+        this.itemsSettings.skip += this.itemsSettings.take;
+    };
     DropdownListModel.prototype.updateQuestionChoices = function (callbackAfterItemsLoaded) {
         var _this = this;
         if (this.isRunningLoadQuestionChoices)
             return;
         var isUpdate = (this.itemsSettings.skip + 1) < this.itemsSettings.totalCount;
         if (!this.itemsSettings.skip || isUpdate) {
-            this.isRunningLoadQuestionChoices = true;
-            this.question.survey.loadQuestionChoices({
-                question: this.question,
-                filter: this.filterString,
-                skip: this.itemsSettings.skip,
-                take: this.itemsSettings.take,
-                setItems: function (items, totalCount) {
-                    _this.isRunningLoadQuestionChoices = false;
-                    _this.setItems(items || [], totalCount || 0);
-                    _this.popupRecalculatePosition(_this.itemsSettings.skip === _this.itemsSettings.take);
-                    if (!!callbackAfterItemsLoaded) {
-                        callbackAfterItemsLoaded();
-                    }
+            if (!!this.filterString && _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].dropdownSearchDelay > 0) {
+                if (!!this.timer) {
+                    clearTimeout(this.timer);
+                    this.timer = undefined;
                 }
-            });
-            this.itemsSettings.skip += this.itemsSettings.take;
+                this.timer = setTimeout(function () {
+                    _this.loadQuestionChoices(callbackAfterItemsLoaded);
+                }, _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].dropdownSearchDelay);
+            }
+            else {
+                this.loadQuestionChoices(callbackAfterItemsLoaded);
+            }
         }
     };
     DropdownListModel.prototype.updatePopupFocusFirstInputSelector = function () {
@@ -8579,7 +8612,7 @@ var DropdownListModel = /** @class */ (function (_super) {
         this.listModel.setItems(this.getAvailableItems());
     };
     DropdownListModel.prototype.onClick = function (event) {
-        if (this.question.readOnly || this.question.isDesignMode || this.question.isPreviewStyle)
+        if (this.question.readOnly || this.question.isDesignMode || this.question.isPreviewStyle || this.question.isReadOnlyAttr)
             return;
         this._popupModel.toggleVisibility();
         this.focusItemOnClickAndPopup();
@@ -9904,8 +9937,8 @@ __webpack_require__.r(__webpack_exports__);
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.11.3";
-ReleaseDate = "" + "2024-06-18";
+Version = "" + "1.11.5";
+ReleaseDate = "" + "2024-07-03";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -17133,6 +17166,11 @@ var DomWindowHelper = /** @class */ (function () {
             return;
         window.removeEventListener(type, listener);
     };
+    DomWindowHelper.matchMedia = function (mediaQueryString) {
+        if (!DomWindowHelper.isAvailable() || typeof window.matchMedia === "undefined")
+            return null;
+        return window.matchMedia(mediaQueryString);
+    };
     return DomWindowHelper;
 }());
 
@@ -18656,7 +18694,7 @@ module.exports = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = "<svg viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\"><g><path d=\"M24 39.5057L11.7226 45.9839C10.4095 46.6739 8.87606 45.5622 9.12525 44.096L11.4734 30.373L1.54411 20.6556C0.480254 19.6207 1.06489 17.8095 2.53128 17.5986L16.2559 15.5957L22.3994 3.10891C23.0512 1.77685 24.9488 1.77685 25.6102 3.10891L31.7441 15.5957L45.4687 17.5986C46.9351 17.8095 47.5197 19.6207 46.4559 20.6556L36.5266 30.373L38.8748 44.096C39.1239 45.5622 37.5905 46.6835 36.2774 45.9839L24 39.5057Z\" fill=\"none\"></path><path d=\"M24.4663 34.6154L24 34.3695L23.5336 34.6154L14.4788 39.389L16.2156 29.2691L16.3044 28.7517L15.9289 28.3848L8.57358 21.1966L18.7249 19.7094L19.245 19.6332L19.4772 19.1616L24 9.97413L28.5228 19.1616L28.755 19.6332L29.275 19.7094L39.4264 21.1966L32.0711 28.3848L31.6956 28.7517L31.7844 29.2691L33.5211 39.389L24.4663 34.6154Z\"></path></g></svg>"
+module.exports = "<svg viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M24 39.5057L11.7226 45.9839C10.4095 46.6739 8.87606 45.5622 9.12525 44.096L11.4734 30.373L1.54411 20.6556C0.480254 19.6207 1.06489 17.8095 2.53128 17.5986L16.2559 15.5957L22.3994 3.10891C23.0512 1.77685 24.9488 1.77685 25.6102 3.10891L31.7441 15.5957L45.4687 17.5986C46.9351 17.8095 47.5197 19.6207 46.4559 20.6556L36.5266 30.373L38.8748 44.096C39.1239 45.5622 37.5905 46.6835 36.2774 45.9839L24 39.5057Z\" fill=\"none\" stroke-width=\"2\"></path><path d=\"M24.3981 33.1305L24 32.9206L23.6019 33.1305L15.8715 37.2059L17.3542 28.5663L17.43 28.1246L17.1095 27.8113L10.83 21.6746L19.4965 20.4049L19.9405 20.3399L20.1387 19.9373L24 12.0936L27.8613 19.9373L28.0595 20.3399L28.5035 20.4049L37.17 21.6746L30.8905 27.8113L30.57 28.1246L30.6458 28.5663L32.1285 37.2059L24.3981 33.1305Z\" stroke-width=\"1.70746\"></path></svg>"
 
 /***/ }),
 
@@ -21521,6 +21559,7 @@ var defaultListCss = {
     searchClearButtonIcon: "sv-list__filter-clear-button",
     loadingIndicator: "sv-list__loading-indicator",
     itemSelected: "sv-list__item--selected",
+    itemGroup: "sv-list__item--group",
     itemWithIcon: "sv-list__item--with-icon",
     itemDisabled: "sv-list__item--disabled",
     itemFocused: "sv-list__item--focused",
@@ -21586,6 +21625,7 @@ var ListModel = /** @class */ (function (_super) {
                 .append(_this.cssClasses.itemDisabled, _this.isItemDisabled(itemValue))
                 .append(_this.cssClasses.itemFocused, _this.isItemFocused(itemValue))
                 .append(_this.cssClasses.itemSelected, _this.isItemSelected(itemValue))
+                .append(_this.cssClasses.itemGroup, itemValue.hasSubItems)
                 .append(_this.cssClasses.itemHovered, itemValue.isHovered)
                 .append(_this.cssClasses.itemTextWrap, _this.textWrapEnabled)
                 .append(itemValue.css)
@@ -22690,6 +22730,7 @@ var arabicSurveyStrings = {
 };
 survey_core__WEBPACK_IMPORTED_MODULE_0__["surveyLocalization"].locales["ar"] = arabicSurveyStrings;
 survey_core__WEBPACK_IMPORTED_MODULE_0__["surveyLocalization"].localeNames["ar"] = "العربية";
+survey_core__WEBPACK_IMPORTED_MODULE_0__["surveyLocalization"].localeDirections["ar"] = "rtl";
 // The following strings have been translated by a machine translation service
 // Remove those strings that you have corrected manually
 // indexText: "{0} of {1}" => "{0} من {1}"
@@ -30490,11 +30531,15 @@ var QuestionMatrixBaseModel = /** @class */ (function (_super) {
     };
     QuestionMatrixBaseModel.prototype.updateVisibilityBasedOnRows = function () {
         if (this.hideIfRowsEmpty) {
-            this.visible =
-                this.rows.length > 0 &&
-                    (!this.filteredRows || this.filteredRows.length > 0);
+            this.onVisibleChanged();
         }
     };
+    QuestionMatrixBaseModel.prototype.isVisibleCore = function () {
+        var res = _super.prototype.isVisibleCore.call(this);
+        if (!res || !this.hideIfRowsEmpty)
+            return res;
+        return this.rows.length > 0 && (!this.filteredRows || this.filteredRows.length > 0);
+    };
     QuestionMatrixBaseModel.prototype.shouldRunColumnExpression = function () {
         return !this.survey || !this.survey.areInvisibleElementsShowing;
     };
@@ -30537,6 +30582,7 @@ var QuestionMatrixBaseModel = /** @class */ (function (_super) {
             : null;
         this.filteredRows = [];
         var hasChanged = _itemvalue__WEBPACK_IMPORTED_MODULE_0__["ItemValue"].runConditionsForItems(this.rows, this.filteredRows, runner, values, properties, !showInvisibile);
+        _itemvalue__WEBPACK_IMPORTED_MODULE_0__["ItemValue"].runEnabledConditionsForItems(this.rows, undefined, values, properties);
         if (this.filteredRows.length === this.rows.length) {
             this.filteredRows = null;
         }
@@ -30838,6 +30884,10 @@ var InputMaskBase = /** @class */ (function (_super) {
     function InputMaskBase() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    InputMaskBase.prototype.getSurvey = function (live) {
+        if (live === void 0) { live = false; }
+        return this.owner;
+    };
     InputMaskBase.prototype.getType = function () {
         return "masksettings";
     };
@@ -33373,11 +33423,22 @@ var PanelModelBase = /** @class */ (function (_super) {
     });
     PanelModelBase.prototype.delete = function (doDispose) {
         if (doDispose === void 0) { doDispose = true; }
+        this.deletePanel();
         this.removeFromParent();
         if (doDispose) {
             this.dispose();
         }
     };
+    PanelModelBase.prototype.deletePanel = function () {
+        var els = this.elements;
+        for (var i = 0; i < els.length; i++) {
+            var el = els[i];
+            if (el.isPanel) {
+                el.deletePanel();
+            }
+            this.onRemoveElementNotifySurvey(el);
+        }
+    };
     PanelModelBase.prototype.removeFromParent = function () { };
     PanelModelBase.prototype.canShowTitle = function () { return true; };
     Object.defineProperty(PanelModelBase.prototype, "_showDescription", {
@@ -34156,6 +34217,23 @@ var PanelModelBase = /** @class */ (function (_super) {
             return this.parent.getQuestionTitleLocation();
         return this.survey ? this.survey.questionTitleLocation : "top";
     };
+    PanelModelBase.prototype.availableQuestionTitleWidth = function () {
+        var questionTitleLocation = this.getQuestionTitleLocation();
+        if (questionTitleLocation === "left")
+            return true;
+        return this.hasElementWithTitleLocationLeft();
+    };
+    PanelModelBase.prototype.hasElementWithTitleLocationLeft = function () {
+        var result = this.elements.some(function (el) {
+            if (el instanceof PanelModelBase) {
+                return el.hasElementWithTitleLocationLeft();
+            }
+            else if (el instanceof _question__WEBPACK_IMPORTED_MODULE_4__["Question"]) {
+                return el.getTitleLocation() === "left";
+            }
+        });
+        return result;
+    };
     PanelModelBase.prototype.getQuestionTitleWidth = function () {
         return this.questionTitleWidth || this.parent && this.parent.getQuestionTitleWidth();
     };
@@ -34362,17 +34440,20 @@ var PanelModelBase = /** @class */ (function (_super) {
         this.updateRowsOnElementRemoved(element);
         if (this.isRandomizing)
             return;
+        this.onRemoveElementNotifySurvey(element);
+        if (!!this.removeElementCallback)
+            this.removeElementCallback(element);
+        this.onElementVisibilityChanged(this);
+    };
+    PanelModelBase.prototype.onRemoveElementNotifySurvey = function (element) {
+        if (!this.survey)
+            return;
         if (!element.isPanel) {
-            if (this.survey)
-                this.survey.questionRemoved(element);
+            this.survey.questionRemoved(element);
         }
         else {
-            if (this.survey)
-                this.survey.panelRemoved(element);
+            this.survey.panelRemoved(element);
         }
-        if (!!this.removeElementCallback)
-            this.removeElementCallback(element);
-        this.onElementVisibilityChanged(this);
     };
     PanelModelBase.prototype.onElementVisibilityChanged = function (element) {
         if (this.isLoadingFromJson || this.isRandomizing)
@@ -35363,7 +35444,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("panelbase", [
     {
         name: "questionTitleWidth",
         visibleIf: function (obj) {
-            return !!obj && obj["getQuestionTitleLocation"]() === "left";
+            return !!obj && obj["availableQuestionTitleWidth"]();
         }
     },
     {
@@ -38448,7 +38529,8 @@ var ProgressButtons = /** @class */ (function (_super) {
             return;
         var listContainerElements = element.querySelectorAll(".sd-progress-buttons__connector");
         var circleWidth = this.showItemNumbers ? 17 : 5;
-        var connectorWidth = listContainerElement.clientWidth / (listContainerElement.children.length - 1) - circleWidth;
+        var sideCorrection = this.survey.isMobile ? 0 : listContainerElement.children[0].clientWidth;
+        var connectorWidth = (listContainerElement.clientWidth - sideCorrection) / (listContainerElement.children.length - 1) - circleWidth;
         for (var i = 0; i < listContainerElements.length; i++) {
             listContainerElements[i].style.width = connectorWidth + "px";
         }
@@ -38466,7 +38548,7 @@ var ProgressButtons = /** @class */ (function (_super) {
     Object.defineProperty(ProgressButtons.prototype, "progressWidth", {
         get: function () {
             if (this.isFitToSurveyWidth) {
-                return this.survey.width;
+                return this.survey.renderedWidth;
             }
             return "";
         },
@@ -38646,6 +38728,9 @@ var TriggerExpressionInfo = /** @class */ (function () {
     }
     return TriggerExpressionInfo;
 }());
+function querySelectorIncludingSelf(el, selector) {
+    return el.querySelector(selector) || el != _global_variables_utils__WEBPACK_IMPORTED_MODULE_14__["DomWindowHelper"].getWindow() && el.matches(selector) && el;
+}
 /**
  * A base class for all questions.
  */
@@ -39149,9 +39234,7 @@ var Question = /** @class */ (function (_super) {
         if (!this.setValueExpressionRunner) {
             this.setValueExpressionRunner = new _conditions__WEBPACK_IMPORTED_MODULE_6__["ExpressionRunner"](this.setValueExpression);
             this.setValueExpressionRunner.onRunComplete = function (res) {
-                if (!_this.isTwoValueEquals(_this.value, res)) {
-                    _this.value = res;
-                }
+                _this.runExpressionSetValue(res);
             };
         }
         else {
@@ -40210,7 +40293,8 @@ var Question = /** @class */ (function (_super) {
             var isParentReadOnly = !!this.parent && this.parent.isReadOnly;
             var isPareQuestionReadOnly = !!this.parentQuestion && this.parentQuestion.isReadOnly;
             var isSurveyReadOnly = !!this.survey && this.survey.isDisplayMode;
-            return this.readOnly || isParentReadOnly || isSurveyReadOnly || isPareQuestionReadOnly;
+            var callbackVal = !!this.readOnlyCallback && this.readOnlyCallback();
+            return this.readOnly || isParentReadOnly || isSurveyReadOnly || isPareQuestionReadOnly || callbackVal;
         },
         enumerable: false,
         configurable: true
@@ -40369,6 +40453,13 @@ var Question = /** @class */ (function (_super) {
             return undefined;
         return this.survey.runExpression(expression);
     };
+    Object.defineProperty(Question.prototype, "commentAreaRows", {
+        get: function () {
+            return this.survey && this.survey.commentAreaRows;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Question.prototype, "autoGrowComment", {
         get: function () {
             return this.survey && this.survey.autoGrowComment;
@@ -40923,7 +41014,7 @@ var Question = /** @class */ (function (_super) {
         if (values === void 0) { values = null; }
         if (properties === void 0) { properties = null; }
         var func = function (val) {
-            _this.runExpressionSetValue(val, setFunc);
+            _this.runExpressionSetValueCore(val, setFunc);
         };
         if (!this.runDefaultValueExpression(runner, values, properties, func)) {
             func(defaultValue);
@@ -40932,9 +41023,17 @@ var Question = /** @class */ (function (_super) {
     Question.prototype.convertFuncValuetoQuestionValue = function (val) {
         return _helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].convertValToQuestionVal(val);
     };
-    Question.prototype.runExpressionSetValue = function (val, setFunc) {
+    Question.prototype.runExpressionSetValueCore = function (val, setFunc) {
         setFunc(this.convertFuncValuetoQuestionValue(val));
     };
+    Question.prototype.runExpressionSetValue = function (val) {
+        var _this = this;
+        this.runExpressionSetValueCore(val, function (val) {
+            if (!_this.isTwoValueEquals(_this.value, val)) {
+                _this.value = val;
+            }
+        });
+    };
     Question.prototype.runDefaultValueExpression = function (runner, values, properties, setFunc) {
         var _this = this;
         if (values === void 0) { values = null; }
@@ -40943,11 +41042,7 @@ var Question = /** @class */ (function (_super) {
             return false;
         if (!setFunc) {
             setFunc = function (val) {
-                _this.runExpressionSetValue(val, function (val) {
-                    if (!_this.isTwoValueEquals(_this.value, val)) {
-                        _this.value = val;
-                    }
-                });
+                _this.runExpressionSetValue(val);
             };
         }
         if (!values)
@@ -41564,7 +41659,7 @@ var Question = /** @class */ (function (_super) {
             var scrollableSelector_1 = this.getObservedElementSelector();
             if (!scrollableSelector_1)
                 return;
-            var defaultRootEl = el.querySelector(scrollableSelector_1);
+            var defaultRootEl = querySelectorIncludingSelf(el, scrollableSelector_1);
             if (!defaultRootEl)
                 return;
             var isProcessed_1 = false;
@@ -41576,7 +41671,7 @@ var Question = /** @class */ (function (_super) {
                     isProcessed_1 = false;
                 }
                 var callback = function () {
-                    var rootEl = el.querySelector(scrollableSelector_1);
+                    var rootEl = querySelectorIncludingSelf(el, scrollableSelector_1);
                     if (!requiredWidth_1 && _this.isDefaultRendering()) {
                         requiredWidth_1 = rootEl.scrollWidth;
                     }
@@ -41601,8 +41696,10 @@ var Question = /** @class */ (function (_super) {
             });
             this.onMobileChangedCallback = function () {
                 setTimeout(function () {
-                    var rootEl = el.querySelector(scrollableSelector_1);
-                    _this.processResponsiveness(requiredWidth_1, Object(_utils_utils__WEBPACK_IMPORTED_MODULE_11__["getElementWidth"])(rootEl));
+                    var rootEl = querySelectorIncludingSelf(el, scrollableSelector_1);
+                    if (rootEl) {
+                        _this.processResponsiveness(requiredWidth_1, Object(_utils_utils__WEBPACK_IMPORTED_MODULE_11__["getElementWidth"])(rootEl));
+                    }
                 }, 0);
             };
             this.resizeObserver.observe(el);
@@ -42235,6 +42332,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         _this.isUpdatingChoicesDependedQuestions = false;
         _this.headItemsCount = 0;
         _this.footItemsCount = 0;
+        _this.allowMultiColumns = true;
         _this.prevIsOtherSelected = false;
         _this.noneItemValue = _this.createDefaultItem(_settings__WEBPACK_IMPORTED_MODULE_9__["settings"].noneItemValue, "noneText", "noneItemText");
         _this.refuseItemValue = _this.createDefaultItem(_settings__WEBPACK_IMPORTED_MODULE_9__["settings"].refuseItemValue, "refuseText", "refuseItemText");
@@ -44255,9 +44353,23 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionSelectBase.prototype.getObservedElementSelector = function () {
+        return Object(_utils_utils__WEBPACK_IMPORTED_MODULE_11__["classesToSelector"])(this.cssClasses.mainRoot);
+    };
+    QuestionSelectBase.prototype.supportResponsiveness = function () {
+        return true;
+    };
+    QuestionSelectBase.prototype.onBeforeSetCompactRenderer = function () {
+        _super.prototype.onBeforeSetDesktopRenderer.call(this);
+        this.allowMultiColumns = false;
+    };
+    QuestionSelectBase.prototype.onBeforeSetDesktopRenderer = function () {
+        _super.prototype.onBeforeSetDesktopRenderer.call(this);
+        this.allowMultiColumns = true;
+    };
     Object.defineProperty(QuestionSelectBase.prototype, "hasColumns", {
         get: function () {
-            return !this.isMobile &&
+            return !this.isMobile && this.allowMultiColumns &&
                 (this.getCurrentColCount() > 1);
         },
         enumerable: false,
@@ -44374,6 +44486,10 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     Object.defineProperty(QuestionSelectBase.prototype, "itemComponent", {
         /**
          * The name of a component used to render items.
+         *
+         * [View Dropdown Demo](https://surveyjs.io/form-library/examples/dropdown-box-with-custom-items/ (linkStyle))
+         *
+         * [View Ranking Demo](https://surveyjs.io/form-library/examples/dropdown-box-with-custom-items/ (linkStyle))
          */
         get: function () {
             return this.getPropertyValue("itemComponent", this.getDefaultItemComponent());
@@ -44411,6 +44527,9 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ localizable: true })
     ], QuestionSelectBase.prototype, "otherPlaceholder", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])()
+    ], QuestionSelectBase.prototype, "allowMultiColumns", void 0);
     return QuestionSelectBase;
 }(_question__WEBPACK_IMPORTED_MODULE_2__["Question"]));
 
@@ -44761,23 +44880,6 @@ var QuestionBooleanModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    QuestionBooleanModel.prototype.updateThumbMargin = function () {
-        var _this = this;
-        if (!this.isIndeterminate && this.leftAnswerElement) {
-            if (!this.swapOrder && this.value === this.getValueTrue() || this.swapOrder && this.value === this.getValueFalse()) {
-                var el_1 = this.leftAnswerElement;
-                setTimeout(function () {
-                    _this.thumbMargin = el_1.clientWidth + (_this.swapOrder ? 4 : 2) + "px";
-                }, 50);
-            }
-        }
-        this.thumbMargin = undefined;
-    };
-    QuestionBooleanModel.prototype.afterRender = function (el) {
-        _super.prototype.afterRender.call(this, el);
-        this.leftAnswerElement = el.querySelectorAll("." + this.cssClasses.sliderGhost)[0];
-        this.updateThumbMargin();
-    };
     QuestionBooleanModel.prototype.beforeDestroyQuestionElement = function (el) {
         _super.prototype.beforeDestroyQuestionElement.call(this, el);
         this.leftAnswerElement = undefined;
@@ -44929,11 +45031,9 @@ var QuestionBooleanModel = /** @class */ (function (_super) {
     QuestionBooleanModel.prototype.updateValueFromSurvey = function (newValue, clearData) {
         if (clearData === void 0) { clearData = false; }
         _super.prototype.updateValueFromSurvey.call(this, newValue, clearData);
-        this.updateThumbMargin();
     };
     QuestionBooleanModel.prototype.onValueChanged = function () {
         _super.prototype.onValueChanged.call(this);
-        this.updateThumbMargin();
     };
     Object.defineProperty(QuestionBooleanModel.prototype, "svgIcon", {
         get: function () {
@@ -45061,12 +45161,6 @@ var QuestionBooleanModel = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], QuestionBooleanModel.prototype, "booleanValueRendered", void 0);
-    __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
-    ], QuestionBooleanModel.prototype, "leftAnswerElement", void 0);
-    __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
-    ], QuestionBooleanModel.prototype, "thumbMargin", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], QuestionBooleanModel.prototype, "showTitle", void 0);
@@ -45566,7 +45660,7 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
         }
         else {
             if (this.isNoneItem(item)) {
-                this.renderedValue = [item.value];
+                this.renderedValue = checked ? [item.value] : [];
             }
             else {
                 var newValue = [].concat(this.renderedValue || []);
@@ -45665,7 +45759,8 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
             if (!itemValues.length && !selectedItemValues) {
                 this.updateSelectedItemValues();
             }
-            return this.validateItemValues(itemValues);
+            var validValues = this.validateItemValues(itemValues);
+            return validValues;
         },
         enumerable: false,
         configurable: true
@@ -46123,7 +46218,14 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionCheckboxModel.prototype, "a11y_input_ariaRole", {
         get: function () {
-            return "listbox";
+            return "group";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(QuestionCheckboxModel.prototype, "a11y_input_ariaRequired", {
+        get: function () {
+            return null;
         },
         enumerable: false,
         configurable: true
@@ -46475,9 +46577,12 @@ var ComponentQuestionJSON = /** @class */ (function () {
         this.json.onUpdateQuestionCssClasses(question, element, css);
     };
     ComponentQuestionJSON.prototype.onSetQuestionValue = function (question, newValue) {
-        if (!this.json.onSetQuestionValue)
-            return;
-        this.json.onSetQuestionValue(question, newValue);
+        if (this.json.onSetQuestionValue) {
+            this.json.onSetQuestionValue(question, newValue);
+        }
+        if (this.json.onValueSet) {
+            this.json.onValueSet(question, newValue);
+        }
     };
     ComponentQuestionJSON.prototype.onPropertyChanged = function (question, propertyName, newValue) {
         if (!this.json.onPropertyChanged)
@@ -47868,7 +47973,7 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
         return _super.prototype.hasUnknownValue.call(this, val, true, false);
     };
     QuestionDropdownModel.prototype.getItemIfChoicesNotContainThisValue = function (value, text) {
-        if (this.choicesLazyLoadEnabled && !this.dropdownListModel.isAllDataLoaded) {
+        if (this.choicesLazyLoadEnabled) {
             return this.createItemValue(value, text);
         }
         else {
@@ -51967,6 +52072,8 @@ var MatrixDropdownRowModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    MatrixDropdownRowModel.prototype.isRowEnabled = function () { return this.item.isEnabled; };
+    MatrixDropdownRowModel.prototype.isRowHasEnabledCondition = function () { return !!this.item.enableIf; };
     return MatrixDropdownRowModel;
 }(_question_matrixdropdownbase__WEBPACK_IMPORTED_MODULE_0__["MatrixDropdownRowModelBase"]));
 
@@ -52265,7 +52372,9 @@ var MatrixDropdownCell = /** @class */ (function () {
         this.question.locStrsChanged();
     };
     MatrixDropdownCell.prototype.createQuestion = function (column, row, data) {
+        var _this = this;
         var res = data.createQuestion(this.row, this.column);
+        res.readOnlyCallback = function () { return !_this.row.isRowEnabled(); };
         res.validateValueCallback = function () {
             return data.validateCell(row, column.name, row.value);
         };
@@ -52451,6 +52560,8 @@ var MatrixDropdownRowModelBase = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    MatrixDropdownRowModelBase.prototype.isRowEnabled = function () { return true; };
+    MatrixDropdownRowModelBase.prototype.isRowHasEnabledCondition = function () { return false; };
     Object.defineProperty(MatrixDropdownRowModelBase.prototype, "value", {
         get: function () {
             var result = {};
@@ -52627,6 +52738,9 @@ var MatrixDropdownRowModelBase = /** @class */ (function () {
         if (!!this.detailPanel) {
             this.detailPanel.runCondition(values, newProps);
         }
+        if (this.isRowHasEnabledCondition()) {
+            this.onQuestionReadOnlyChanged();
+        }
     };
     MatrixDropdownRowModelBase.prototype.getNamesWithDefaultValues = function () {
         var res = [];
@@ -52881,14 +52995,15 @@ var MatrixDropdownRowModelBase = /** @class */ (function () {
             return;
         this.updateCellOnColumnItemValueChanged(cell, propertyName, obj, name, newValue, oldValue);
     };
-    MatrixDropdownRowModelBase.prototype.onQuestionReadOnlyChanged = function (parentIsReadOnly) {
+    MatrixDropdownRowModelBase.prototype.onQuestionReadOnlyChanged = function () {
         var questions = this.questions;
         for (var i = 0; i < questions.length; i++) {
             var q = questions[i];
             q.setPropertyValue("isReadOnly", q.isReadOnly);
         }
         if (!!this.detailPanel) {
-            this.detailPanel.readOnly = parentIsReadOnly;
+            var parentIsReadOnly = !!this.data && this.data.isMatrixReadOnly();
+            this.detailPanel.readOnly = parentIsReadOnly || !this.isRowEnabled();
         }
     };
     MatrixDropdownRowModelBase.prototype.hasErrors = function (fireCallback, rec, raiseOnCompletedAsyncValidators) {
@@ -54151,7 +54266,8 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
         return questionPlainData;
     };
     QuestionMatrixDropdownModelBase.prototype.addConditionObjectsByContext = function (objects, context) {
-        var hasContext = !!context ? context === true || this.columns.indexOf(context) > -1 : false;
+        var hasColumnContext = !!context && this.columns.indexOf(context) > -1;
+        var hasContext = context === true || hasColumnContext;
         var rowsIndeces = this.getConditionObjectsRowIndeces();
         if (hasContext) {
             rowsIndeces.push(-1);
@@ -54178,6 +54294,11 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
                 if (index === -1 && context === true) {
                     obj.context = this;
                 }
+                else {
+                    if (hasColumnContext && prefixName.startsWith("row.")) {
+                        obj.context = context;
+                    }
+                }
                 objects.push(obj);
             }
         }
@@ -54512,7 +54633,7 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
         if (!this.generateRows)
             return;
         for (var i = 0; i < this.visibleRows.length; i++) {
-            this.visibleRows[i].onQuestionReadOnlyChanged(this.isReadOnly);
+            this.visibleRows[i].onQuestionReadOnlyChanged();
         }
     };
     //IMatrixDropdownData
@@ -54738,7 +54859,7 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
         if (this.isDesignMode)
             return this.detailPanel;
         var panel = this.createNewDetailPanel();
-        panel.readOnly = this.isReadOnly;
+        panel.readOnly = this.isReadOnly || !row.isRowEnabled();
         panel.setSurveyImpl(row);
         var json = this.detailPanel.toJSON();
         new _jsonobject__WEBPACK_IMPORTED_MODULE_0__["JsonObject"]().toObject(json, panel);
@@ -54778,6 +54899,7 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
             return data.getTextProcessor();
         return null;
     };
+    QuestionMatrixDropdownModelBase.prototype.isMatrixReadOnly = function () { return this.isReadOnly; };
     QuestionMatrixDropdownModelBase.prototype.getQuestionFromArray = function (name, index) {
         if (index >= this.visibleRows.length)
             return null;
@@ -54856,6 +54978,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("matrixdropdownb
         visible: false,
         isLightSerializable: false,
     },
+    { name: "columnsVisibleIf", visible: false },
     {
         name: "detailPanelMode",
         choices: ["none", "underRow", "underRowSingle"],
@@ -62971,13 +63094,14 @@ var QuestionRankingModel = /** @class */ (function (_super) {
             if (_this.allowStartDrag &&
                 _this.canStartDragDueMaxSelectedChoices(target) &&
                 _this.canStartDragDueItemEnabled(choice)) {
-                _this.draggedChoise = choice;
+                _this.draggedChoiceValue = choice.value;
                 _this.draggedTargetNode = node;
                 _this.dragOrClickHelper.onPointerDown(event);
             }
         };
         _this.startDrag = function (event) {
-            _this.dragDropRankingChoices.startDrag(event, _this.draggedChoise, _this, _this.draggedTargetNode);
+            var choice = _itemvalue__WEBPACK_IMPORTED_MODULE_2__["ItemValue"].getItemByValue(_this.activeChoices, _this.draggedChoiceValue);
+            _this.dragDropRankingChoices.startDrag(event, choice, _this, _this.draggedTargetNode);
         };
         _this.handlePointerUp = function (event, choice, node) {
             if (!_this.selectToRankEnabled)
@@ -63033,9 +63157,6 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         _this.dragOrClickHelper = new _utils_dragOrClickHelper__WEBPACK_IMPORTED_MODULE_11__["DragOrClickHelper"](_this.startDrag);
         return _this;
     }
-    QuestionRankingModel.prototype.getDefaultItemComponent = function () {
-        return "";
-    };
     QuestionRankingModel.prototype.getType = function () {
         return "ranking";
     };
@@ -63458,19 +63579,9 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(QuestionRankingModel.prototype, "itemContentComponent", {
-        /**
-         * The name of a component used to render items.
-         */
-        get: function () {
-            return this.getPropertyValue("itemContentComponent", "sv-ranking-item-content");
-        },
-        set: function (value) {
-            this.setPropertyValue("itemContentComponent", value);
-        },
-        enumerable: false,
-        configurable: true
-    });
+    QuestionRankingModel.prototype.getDefaultItemComponent = function () {
+        return "sv-ranking-item";
+    };
     Object.defineProperty(QuestionRankingModel.prototype, "selectToRankEnabled", {
         /**
          * Specifies whether users can select choices they want to rank.
@@ -63663,8 +63774,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_3__["Serializer"].addClass("ranking", [
         dependsOn: "selectToRankEnabled", visibleIf: function (obj) {
             return !!obj.selectToRankEnabled;
         }, isSerializable: true },
-    { name: "itemComponent", visible: false, default: "" },
-    { name: "itemContentComponent", visible: false, default: "sv-ranking-item-content" },
+    { name: "itemComponent", visible: false, default: "sv-ranking-item" },
 ], function () {
     return new QuestionRankingModel("");
 }, "checkbox");
@@ -64433,20 +64543,11 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         if (this.scaleColorMode === "monochrome" && this.rateColorMode == "default" ||
             this.isPreviewStyle ||
             this.isReadOnlyStyle)
-            return { borderColor: null, fill: null, backgroundColor: null };
+            return {};
         var index = this.visibleRateValues.indexOf(item);
         var color = this.getRenderedItemColor(index, false);
-        if (this.value != this.renderedRateItems[index].value) {
-            var colorLight = this.getRenderedItemColor(index, true);
-            if (highlight == "highlighted" && this.scaleColorMode === "colored")
-                return { borderColor: color, fill: color, backgroundColor: colorLight };
-            if (this.scaleColorMode === "colored" && this.errors.length == 0)
-                return { borderColor: color, fill: color, backgroundColor: null };
-            return { borderColor: null, fill: null, backgroundColor: null };
-        }
-        else {
-            return { borderColor: color, fill: null, backgroundColor: color };
-        }
+        var colorLight = highlight == "highlighted" && this.scaleColorMode === "colored" && this.getRenderedItemColor(index, true);
+        return colorLight ? { "--sd-rating-item-color": color, "--sd-rating-item-color-light": colorLight } : { "--sd-rating-item-color": color };
     };
     QuestionRatingModel.prototype.getItemClass = function (item, highlight) {
         var _this = this;
@@ -65632,8 +65733,7 @@ var QuestionTagboxModel = /** @class */ (function (_super) {
         }
     };
     QuestionTagboxModel.prototype.getItemIfChoicesNotContainThisValue = function (value, text) {
-        var _a;
-        if (this.choicesLazyLoadEnabled && !((_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.isAllDataLoaded)) {
+        if (this.choicesLazyLoadEnabled) {
             return this.createItemValue(value, text);
         }
         else {
@@ -65914,7 +66014,11 @@ var QuestionTextModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(QuestionTextModel.prototype, "maskTypeIsEmpty", {
         get: function () {
-            return this.maskType === "none" || this.inputType !== "text";
+            switch (this.inputType) {
+                case "tel":
+                case "text": return this.maskType === "none";
+                default: return true;
+            }
         },
         enumerable: false,
         configurable: true
@@ -65956,6 +66060,7 @@ var QuestionTextModel = /** @class */ (function (_super) {
             maskClassName = "masksettings";
         }
         var inputMask = _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].createClass(maskClassName);
+        inputMask.owner = this.survey;
         return inputMask;
     };
     QuestionTextModel.prototype.isTextValue = function () {
@@ -66451,7 +66556,7 @@ var QuestionTextModel = /** @class */ (function (_super) {
         if (this.inputTextAlignment !== "auto") {
             style.textAlign = this.inputTextAlignment;
         }
-        else if (this.maskSettings.getTextAlignment() !== "auto") {
+        else if (!this.maskTypeIsEmpty && this.maskSettings.getTextAlignment() !== "auto") {
             style.textAlign = this.maskSettings.getTextAlignment();
         }
     };
@@ -66652,7 +66757,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("text", [
         visibleIndex: 0,
         dependsOn: "inputType",
         visibleIf: function (obj) {
-            return obj.inputType === "text";
+            return obj.inputType === "text" || obj.inputType === "tel";
         }
     },
     {
@@ -66661,7 +66766,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("text", [
         visibleIndex: 1,
         dependsOn: "inputType",
         visibleIf: function (obj) {
-            return obj.inputType === "text";
+            return obj.inputType === "text" || obj.inputType === "tel";
         },
         onGetValue: function (obj) {
             return obj.maskSettings.getData();
@@ -67450,7 +67555,7 @@ var SurveyQuestionBoolean = /** @class */ (function (_super) {
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.sliderGhost, onClick: function (event) { return _this.handleOnLabelClick(event, _this.question.swapOrder); } },
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.getLabelCss(this.question.swapOrder) }, this.renderLocString(this.question.locLabelLeft))),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.switch, onClick: this.handleOnSwitchClick },
-                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: cssClasses.slider, style: { marginLeft: this.question.thumbMargin } }, this.question.isDeterminated && cssClasses.sliderText ?
+                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: cssClasses.slider }, this.question.isDeterminated && cssClasses.sliderText ?
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: cssClasses.sliderText }, this.renderLocString(this.question.getCheckedLabel()))
                         : null)),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.sliderGhost, onClick: function (event) { return _this.handleOnLabelClick(event, !_this.question.swapOrder); } },
@@ -67964,7 +68069,7 @@ var ComponentsContainer = /** @class */ (function (_super) {
                 return _element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.createElement(component.component, { survey: _this.props.survey, model: component.data, container: _this.props.container, key: component.id });
             }));
         }
-        return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: "sv-components-column" }, components.map(function (component) {
+        return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: "sv-components-column" + " sv-components-container-" + this.props.container }, components.map(function (component) {
             return _element_factory__WEBPACK_IMPORTED_MODULE_1__["ReactElementFactory"].Instance.createElement(component.component, { survey: _this.props.survey, model: component.data, container: _this.props.container, key: component.id });
         }));
     };
@@ -69942,7 +70047,7 @@ var RatingItem = /** @class */ (function (_super) {
         var itemText = this.renderLocString(this.item.locText);
         return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { onMouseDown: this.handleOnMouseDown, className: this.question.getItemClassByText(this.item.itemValue, this.item.text) },
             react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { type: "radio", className: "sv-visuallyhidden", name: this.question.questionName, id: this.question.getInputId(this.index), value: this.item.value, disabled: this.question.isDisabledAttr, readOnly: this.question.isReadOnlyAttr, 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-errormessage": this.question.ariaErrormessage }),
-            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: this.question.cssClasses.itemText }, itemText)));
+            react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { className: this.question.cssClasses.itemText, "data-text": this.item.text }, itemText)));
     };
     RatingItem.prototype.componentDidMount = function () {
         _super.prototype.componentDidMount.call(this);
@@ -72683,7 +72788,7 @@ var Survey = /** @class */ (function (_super) {
         }
         var rootCss = this.survey.getRootCss();
         var cssClasses = this.rootNodeClassName ? this.rootNodeClassName + " " + rootCss : rootCss;
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.rootNodeId, ref: this.rootRef, className: cssClasses, style: this.survey.themeVariables },
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { id: this.rootNodeId, ref: this.rootRef, className: cssClasses, style: this.survey.themeVariables, lang: this.survey.locale || "en", dir: this.survey.localeDir },
             this.survey.needRenderIcons ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_svgbundle__WEBPACK_IMPORTED_MODULE_10__["SvgBundleComponent"], null) : null,
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.survey.wrapperFormCss },
                 backgroundImage,
@@ -73719,7 +73824,7 @@ var SurveyQuestionCheckboxItem = /** @class */ (function (_super) {
         var itemLabel = !this.hideCaption ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.cssClasses.controlLabel }, this.renderLocString(this.item.locText, this.textStyle)) : null;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: itemClass, role: "presentation" },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", { className: labelClass },
-                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { className: this.cssClasses.itemControl, type: "checkbox", role: "option", name: this.question.name + this.item.id, value: this.item.value, id: id, style: this.inputStyle, disabled: !this.question.getItemEnabled(this.item), readOnly: this.question.isReadOnlyAttr, checked: isChecked, onChange: this.handleOnChange }),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { className: this.cssClasses.itemControl, type: "checkbox", name: this.question.name + this.item.id, value: this.item.value, id: id, style: this.inputStyle, disabled: !this.question.getItemEnabled(this.item), readOnly: this.question.isReadOnlyAttr, checked: isChecked, onChange: this.handleOnChange, required: this.question.hasRequiredError() }),
                 this.cssClasses.materialDecorator ?
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.cssClasses.materialDecorator }, this.question.itemSvgIcon ?
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: this.cssClasses.itemDecorator },
@@ -73868,7 +73973,7 @@ var SurveyQuestionCommentItem = /** @class */ (function (_super) {
             var comment = this.getComment() || "";
             return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null, comment);
         }
-        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("textarea", { id: this.getId(), className: className, ref: function (textarea) { return (_this.setControl(textarea)); }, disabled: this.isDisplayMode, maxLength: question.getOthersMaxLength(), placeholder: this.getPlaceholder(), onBlur: function (e) { _this.onCommentChange(e); }, onInput: function (e) { return _this.onCommentInput(e); }, "aria-required": question.isRequired || question.a11y_input_ariaRequired, "aria-label": question.ariaLabel || question.a11y_input_ariaLabel, style: { resize: question.resizeStyle } }));
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("textarea", { id: this.getId(), className: className, ref: function (textarea) { return (_this.setControl(textarea)); }, disabled: this.isDisplayMode, maxLength: question.getOthersMaxLength(), rows: question.commentAreaRows, placeholder: this.getPlaceholder(), onBlur: function (e) { _this.onCommentChange(e); }, onInput: function (e) { return _this.onCommentInput(e); }, "aria-required": question.isRequired || question.a11y_input_ariaRequired, "aria-label": question.ariaLabel || question.a11y_input_ariaLabel, style: { resize: question.resizeStyle } }));
     };
     return SurveyQuestionCommentItem;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElement"]));
@@ -76468,7 +76573,7 @@ var SurveyQuestionRankingItem = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("use", { xlinkHref: this.question.dashSvgIcon })));
     };
     SurveyQuestionRankingItem.prototype.renderElement = function () {
-        var itemContentComponent = _element_factory__WEBPACK_IMPORTED_MODULE_4__["ReactElementFactory"].Instance.createElement(this.question.itemContentComponent, { item: this.item, cssClasses: this.cssClasses });
+        var itemContent = _element_factory__WEBPACK_IMPORTED_MODULE_4__["ReactElementFactory"].Instance.createElement(this.question.itemComponent, { item: this.item, cssClasses: this.cssClasses });
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { tabIndex: this.itemTabIndex, className: this.itemClass, onKeyDown: this.handleKeydown, onPointerDown: this.handlePointerDown, onPointerUp: this.handlePointerUp, "data-sv-drop-target-ranking-item": this.index },
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { tabIndex: -1, style: { outline: "none" } },
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.cssClasses.itemGhostNode }),
@@ -76479,7 +76584,7 @@ var SurveyQuestionRankingItem = /** @class */ (function (_super) {
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", { className: this.question.getIconFocusCss() },
                             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("use", { xlinkHref: this.question.arrowsSvgIcon }))),
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: this.question.getItemIndexClasses(this.item) }, (!this.unrankedItem && this.indexText) ? this.indexText : this.renderEmptyIcon()),
-                    itemContentComponent))));
+                    itemContent))));
     };
     return SurveyQuestionRankingItem;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElement"]));
@@ -76509,7 +76614,7 @@ var SurveyQuestionRankingItemContent = /** @class */ (function (_super) {
     return SurveyQuestionRankingItemContent;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["ReactSurveyElement"]));
 
-_element_factory__WEBPACK_IMPORTED_MODULE_4__["ReactElementFactory"].Instance.registerElement("sv-ranking-item-content", function (props) {
+_element_factory__WEBPACK_IMPORTED_MODULE_4__["ReactElementFactory"].Instance.registerElement("sv-ranking-item", function (props) {
     return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionRankingItemContent, props);
 });
 _reactquestion_factory__WEBPACK_IMPORTED_MODULE_2__["ReactQuestionFactory"].Instance.registerQuestion("ranking", function (props) {
@@ -78085,11 +78190,19 @@ var settings = {
      */
     ratingMaximumRateValueCount: 20,
     /**
-     * Specifies whether to close the drop-down menu of a [TagBox](https://surveyjs.io/form-library/examples/how-to-create-multiselect-tag-box/) question after a user selects a value.
+     * Specifies whether to close the drop-down menu of a [Multi-Select Dropdown (Tag Box)](https://surveyjs.io/form-library/examples/how-to-create-multiselect-tag-box/) question after a user selects a value.
      *
-     * This setting applies to all TagBox questions on a page. You can use the [closeOnSelect](https://surveyjs.io/form-library/documentation/api-reference/dropdown-tag-box-model#closeOnSelect) property to specify the same setting for an individual TagBox question.
+     * This setting applies to all Multi-Select Dropdown questions on a web page. You can use the [`closeOnSelect`](https://surveyjs.io/form-library/documentation/api-reference/dropdown-tag-box-model#closeOnSelect) property to specify the same setting for an individual Multi-Select Dropdown question.
      */
     tagboxCloseOnSelect: false,
+    /**
+     * A time interval in milliseconds between the last entered character and the beginning of search in [Single-](https://surveyjs.io/form-library/examples/create-dropdown-menu-in-javascript/) and [Multi-Select Dropdown](https://surveyjs.io/form-library/examples/how-to-create-multiselect-tag-box/) questions. Applies only to questions with the [`choicesLazyLoadEnabled`](https://surveyjs.io/form-library/documentation/api-reference/dropdown-menu-model#choicesLazyLoadEnabled) property set to `true`.
+     *
+     * Default value: 500
+     *
+     * [View Demo](https://surveyjs.io/form-library/examples/lazy-loading-dropdown/ (linkStyle))
+     */
+    dropdownSearchDelay: 500,
     /**
      * A function that activates a browser confirm dialog.
      *
@@ -80849,7 +80962,7 @@ var SurveyModel = /** @class */ (function (_super) {
          */
         _this.onUpdatePageCssClasses = _this.addEvent();
         /**
-         * 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.
+         * An event that is raised before rendering a choice item in Radio Button Group and Checkboxes questions. Use it to override default CSS classes applied to choice items.
          *
          * For information on event handler parameters, refer to descriptions within the interface.
          *
@@ -82177,6 +82290,8 @@ var SurveyModel = /** @class */ (function (_super) {
          * - `"onValueChanged"` - Triggers validation each time a question value is changed.
          * - `"onComplete"` - Triggers validation when a user clicks the Complete button. If previous pages contain errors, the survey switches to the page with the first error.
          *
+         * > The `"onValueChanged"` doesn't work with date input fields because of the way browsers process date values. In most browsers, the value is considered changed as soon as a user starts entering the date in a text input field. This means that a user may only enter the day without having the chance to enter the month and year before validation is triggered. For this reason, date input fields are validated before the survey is switched to the next page or completed.
+         *
          * Refer to the following help topic for more information: [Data Validation](https://surveyjs.io/form-library/documentation/data-validation).
          * @see validationEnabled
          * @see validationAllowSwitchPages
@@ -82200,6 +82315,7 @@ var SurveyModel = /** @class */ (function (_super) {
          *
          * You can override this property for individual Long Text questions: [`autoGrow`](https://surveyjs.io/form-library/documentation/api-reference/comment-field-model#autoGrow).
          * @see allowResizeComment
+         * @see commentAreaRows
          */
         get: function () {
             return this.getPropertyValue("autoGrowComment");
@@ -82218,6 +82334,7 @@ var SurveyModel = /** @class */ (function (_super) {
          *
          * You can override this property for individual Long Text questions: [`allowResize`](https://surveyjs.io/form-library/documentation/api-reference/comment-field-model#allowResize).
          * @see autoGrowComment
+         * @see commentAreaRows
          */
         get: function () {
             return this.getPropertyValue("allowResizeComment");
@@ -82228,6 +82345,25 @@ var SurveyModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SurveyModel.prototype, "commentAreaRows", {
+        /**
+         * Specifies the visible height of comment areas, measured in lines. Applies to the questions with the [`showCommentArea`](https://surveyjs.io/form-library/documentation/api-reference/question#showCommentArea) or [`showOtherItem`](https://surveyjs.io/form-library/documentation/api-reference/question#showOtherItem) property enabled.
+         *
+         * Default value: 2
+         *
+         * The value of this property is passed on to the `rows` attribute of the underlying `<textarea>` element.
+         * @see autoGrowComment
+         * @see allowResizeComment
+         */
+        get: function () {
+            return this.getPropertyValue("commentAreaRows");
+        },
+        set: function (val) {
+            this.setPropertyValue("commentAreaRows", val);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(SurveyModel.prototype, "textUpdateMode", {
         /**
          * Specifies when to update the question value in questions with a text input field.
@@ -82359,6 +82495,13 @@ var SurveyModel = /** @class */ (function (_super) {
         this.localeChanged();
         this.onLocaleChangedEvent.fire(this, this.locale);
     };
+    Object.defineProperty(SurveyModel.prototype, "localeDir", {
+        get: function () {
+            return _surveyStrings__WEBPACK_IMPORTED_MODULE_8__["surveyLocalization"].localeDirections[this.locale];
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * Returns an array of locales whose translations are used in the survey.
      *
@@ -85727,6 +85870,7 @@ var SurveyModel = /** @class */ (function (_super) {
     SurveyModel.prototype.getRootCss = function () {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_18__["CssClassBuilder"]()
             .append(this.css.root)
+            .append(this.css.rootProgress + "--" + this.progressBarType)
             .append(this.css.rootMobile, this.isMobile)
             .append(this.css.rootAnimationDisabled, !_settings__WEBPACK_IMPORTED_MODULE_14__["settings"].animationEnabled)
             .append(this.css.rootReadOnly, this.mode === "display" && !this.isDesignMode)
@@ -88629,6 +88773,15 @@ var SurveyModel = /** @class */ (function (_super) {
         }
     };
     SurveyModel.prototype.onScroll = function () {
+        if (!!this.rootElement) {
+            var topStickyContainer = this.rootElement.querySelector(".sv-components-container-center");
+            if (!!topStickyContainer && topStickyContainer.getBoundingClientRect().y <= this.rootElement.getBoundingClientRect().y) {
+                this.rootElement.classList && this.rootElement.classList.add("sv-root--sticky-top");
+            }
+            else {
+                this.rootElement.classList && this.rootElement.classList.remove("sv-root--sticky-top");
+            }
+        }
         if (this.onScrollCallback) {
             this.onScrollCallback();
         }
@@ -88970,6 +89123,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("survey", [
     },
     { name: "autoGrowComment:boolean", default: false },
     { name: "allowResizeComment:boolean", default: true },
+    { name: "commentAreaRows:number", minValue: 1 },
     {
         name: "startSurveyText",
         serializationProperty: "locStartSurveyText",
@@ -89121,6 +89275,7 @@ var surveyLocalization = {
     defaultLocaleValue: "en",
     locales: {},
     localeNames: {},
+    localeDirections: {},
     supportedLocales: [],
     get currentLocale() {
         return this.currentLocaleValue === this.defaultLocaleValue ? "" : this.currentLocaleValue;
@@ -89620,7 +89775,7 @@ var TOCModel = /** @class */ (function () {
                 var titleElement = rootElement.querySelector(titleSelector);
                 var titleElementHeight = titleElement ? titleElement.getBoundingClientRect().height : 0;
                 var scrollCompensationHeight = rootElement.scrollTop > titleElementHeight ? 0 : titleElementHeight - rootElement.scrollTop;
-                tocRootElement.style.height = (rootHeight - scrollCompensationHeight - 2) + "px";
+                tocRootElement.style.height = (rootHeight - scrollCompensationHeight - 1) + "px";
             }
         }
     };
@@ -91427,7 +91582,7 @@ var CssClassBuilder = /** @class */ (function () {
 /*!******************************!*\
   !*** ./src/utils/devices.ts ***!
   \******************************/
-/*! exports provided: IsMobile, mouseInfo, IsTouch, _setIsTouch */
+/*! exports provided: IsMobile, mouseInfo, IsTouch, _setIsTouch, detectMouseSupport */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -91436,6 +91591,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "mouseInfo", function() { return mouseInfo; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "IsTouch", function() { return IsTouch; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_setIsTouch", function() { return _setIsTouch; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "detectMouseSupport", function() { return detectMouseSupport; });
 /* harmony import */ var _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../global_variables_utils */ "./src/global_variables_utils.ts");
 
 // isMobile
@@ -91465,13 +91621,20 @@ var mouseInfo = {
     },
     hasMouse: true
 };
-var pointerMatches = (typeof matchMedia !== "undefined" && !!matchMedia && matchMedia("(pointer:fine)")) || undefined;
-mouseInfo.hasMouse = !!pointerMatches && !!pointerMatches.matches;
+var matchMediaMethod = _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].matchMedia;
+mouseInfo.hasMouse = detectMouseSupport(matchMediaMethod);
 var IsTouch = mouseInfo.isTouch;
 //for tests
 function _setIsTouch(val) {
     IsTouch = val;
 }
+function detectMouseSupport(matchMedia) {
+    if (!matchMedia)
+        return false;
+    var pointerQuery = matchMedia("(pointer:fine)");
+    var hoverQuery = matchMedia("(any-hover:hover)");
+    return !!pointerQuery && pointerQuery.matches || !!hoverQuery && hoverQuery.matches;
+}
 
 
 /***/ }),