survey-react 1.9.84 → 1.9.85

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.84
+ * surveyjs - Survey JavaScript library v1.9.85
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1278,9 +1278,11 @@ function createDropdownActionModelAdvanced(actionOptions, listOptions, popupOpti
     var newActionOptions = Object.assign({}, actionOptions, {
         component: "sv-action-bar-item-dropdown",
         popupModel: innerPopupModel,
-        action: function () {
+        action: function (action, isUserAction) {
             !!(actionOptions.action) && actionOptions.action();
+            innerPopupModel.isFocusedContent = !isUserAction || listModel.showFilter;
             innerPopupModel.toggleVisibility();
+            listModel.scrollToSelectedItem();
         },
     });
     var newAction = new Action(newActionOptions);
@@ -1356,7 +1358,7 @@ var BaseAction = /** @class */ (function (_super) {
     });
     Object.defineProperty(BaseAction.prototype, "isVisible", {
         get: function () {
-            return this.visible && this.mode !== "popup";
+            return this.visible && this.mode !== "popup" && this.mode !== "removed";
         },
         enumerable: false,
         configurable: true
@@ -1411,6 +1413,12 @@ var BaseAction = /** @class */ (function (_super) {
     BaseAction.prototype.getTooltip = function () {
         return this.tooltip || this.title;
     };
+    BaseAction.prototype.getIsTrusted = function (args) {
+        if (!!args.originalEvent) {
+            return args.originalEvent.isTrusted;
+        }
+        return args.isTrusted;
+    };
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
     ], BaseAction.prototype, "tooltip", void 0);
@@ -1748,6 +1756,16 @@ var AdaptiveActionContainer = /** @class */ (function (_super) {
                 items[index].mode = "large";
             }
         }
+        if (itemsSize > availableSize) {
+            var hidableItems = this.visibleActions.filter(function (a) { return a.removePriority; });
+            hidableItems.sort(function (a, b) { return a.removePriority - b.removePriority; });
+            for (var index = 0; index < hidableItems.length; index++) {
+                if (itemsSize > availableSize) {
+                    itemsSize -= items[index].disableShrink ? hidableItems[index].maxDimension : hidableItems[index].minDimension;
+                    hidableItems[index].mode = "removed";
+                }
+            }
+        }
     };
     Object.defineProperty(AdaptiveActionContainer.prototype, "hiddenItemsListModel", {
         get: function () {
@@ -4930,6 +4948,7 @@ var modernCss = {
         slider: "sv-boolean__slider",
         label: "sv-boolean__label",
         disabledLabel: "sv-boolean__label--disabled",
+        sliderGhost: "sv-boolean__thumb-ghost",
         //checkbox
         rootCheckbox: "sv_qbln",
         checkboxItem: "sv-boolean sv-item",
@@ -5270,6 +5289,7 @@ var defaultStandardCss = {
         slider: "sv-boolean__slider",
         label: "sv-boolean__label ",
         disabledLabel: "sv-boolean__label--disabled",
+        sliderGhost: "sv-boolean__thumb-ghost",
         //checkbox
         rootCheckbox: "sv_qcbc sv_qbln",
         checkboxItem: "sv-boolean",
@@ -5641,6 +5661,7 @@ var defaultV2Css = {
         nested: "sd-element--nested",
         invisible: "sd-element--invisible",
         navigationButton: "",
+        compact: "sd-element--with-frame sd-element--compact"
     },
     paneldynamic: {
         mainRoot: "sd-element  sd-question sd-question--paneldynamic sd-element--complex sd-question--complex sd-row__question",
@@ -5668,7 +5689,8 @@ var defaultV2Css = {
         footerButtonsContainer: "sd-paneldynamic__buttons-container",
         panelWrapperInRow: "sd-paneldynamic__panel-wrapper--in-row",
         progressBtnIcon: "icon-progressbuttonv2",
-        noEntriesPlaceholder: "sd-paneldynamic__placeholder sd-question__placeholder"
+        noEntriesPlaceholder: "sd-paneldynamic__placeholder sd-question__placeholder",
+        compact: "sd-element--with-frame sd-element--compact"
     },
     progress: "sd-progress sd-body__progress",
     progressTop: "sd-body__progress--top",
@@ -5698,6 +5720,7 @@ var defaultV2Css = {
     pageDescription: "sd-description sd-page__description",
     row: "sd-row sd-clearfix",
     rowMultiple: "sd-row--multiple",
+    rowCompact: "sd-row--compact",
     pageRow: "sd-page__row",
     question: {
         mainRoot: "sd-element sd-question sd-row__question",
@@ -5818,11 +5841,13 @@ var defaultV2Css = {
         itemChecked: "sd-boolean--checked",
         itemIndeterminate: "sd-boolean--indeterminate",
         itemDisabled: "sd-boolean--disabled",
+        itemHover: "sd-boolean--allowhover",
         label: "sd-boolean__label",
         switch: "sd-boolean__switch",
         disabledLabel: "sd-checkbox__label--disabled",
         sliderText: "sd-boolean__thumb-text",
         slider: "sd-boolean__thumb",
+        sliderGhost: "sd-boolean__thumb-ghost",
         //radio
         radioItem: "sd-item",
         radioItemChecked: "sd-item--checked sd-radio--checked",
@@ -5941,7 +5966,8 @@ var defaultV2Css = {
         cellText: "sd-matrix__text",
         cellTextSelected: "sd-matrix__text--checked",
         cellTextDisabled: "sd-matrix__text--disabled",
-        cellResponsiveTitle: "sd-matrix__responsive-title"
+        cellResponsiveTitle: "sd-matrix__responsive-title",
+        compact: "sd-element--with-frame sd-element--compact"
     },
     matrixdropdown: {
         mainRoot: "sd-element sd-question sd-row__question sd-element--complex sd-question--complex sd-question--table",
@@ -5966,7 +5992,8 @@ var defaultV2Css = {
         actionsCell: "sd-table__cell sd-table__cell--actions",
         emptyCell: "sd-table__cell--empty",
         verticalCell: "sd-table__cell--vertical",
-        cellQuestionWrapper: "sd-table__question-wrapper"
+        cellQuestionWrapper: "sd-table__question-wrapper",
+        compact: "sd-element--with-frame sd-element--compact"
     },
     matrixdynamic: {
         mainRoot: "sd-element sd-question sd-row__question sd-element--complex sd-question--complex sd-question--table",
@@ -6003,7 +6030,8 @@ var defaultV2Css = {
         ghostRow: "sv-matrix-row--drag-drop-ghost-mod",
         emptyCell: "sd-table__cell--empty",
         verticalCell: "sd-table__cell--vertical",
-        cellQuestionWrapper: "sd-table__question-wrapper"
+        cellQuestionWrapper: "sd-table__question-wrapper",
+        compact: "sd-element--with-frame sd-element--compact"
     },
     rating: {
         rootDropdown: "sd-scrollable-container sd-scrollable-container--compact sd-selectbase",
@@ -6025,6 +6053,9 @@ var defaultV2Css = {
         itemSmileyHover: "sd-rating__item-smiley--allowhover",
         itemSmileySelected: "sd-rating__item-smiley--selected",
         itemSmileyDisabled: "sd-rating__item-smiley--disabled",
+        itemSmileyHighlighted: "sd-rating__item-star--highlighted",
+        itemSmileyScaleColored: "sd-rating__item-smiley--scale-colored",
+        itemSmileyRateColored: "sd-rating__item-smiley--rate-colored",
         minText: "sd-rating__item-text sd-rating__min-text",
         itemText: "sd-rating__item-text",
         maxText: "sd-rating__item-text sd-rating__max-text",
@@ -6151,7 +6182,8 @@ var defaultV2Css = {
         root: "sv-list__container sd-list",
         item: "sv-list__item sd-list__item",
         itemBody: "sv-list__item-body sd-list__item-body",
-        itemSelected: "sv-list__item--selected sd-list__item--selected"
+        itemSelected: "sv-list__item--selected sd-list__item--selected",
+        itemFocused: "sv-list__item--focused sd-list__item--focused",
     },
     actionBar: {
         root: "sd-action-bar",
@@ -8250,6 +8282,11 @@ var DropdownListModel = /** @class */ (function (_super) {
             this.filterString = undefined;
         }
     };
+    DropdownListModel.prototype.clear = function () {
+        this.inputString = null;
+        this.hintString = "";
+        this.resetFilterString();
+    };
     DropdownListModel.prototype.onSetFilterString = function () {
         var _this = this;
         if (!!this.filterString && !this.popupModel.isVisible) {
@@ -8410,9 +8447,6 @@ var DropdownListModel = /** @class */ (function (_super) {
     };
     DropdownListModel.prototype.onClear = function (event) {
         this.question.clearValue();
-        this.inputString = null;
-        this.hintString = "";
-        this.resetFilterString();
         if (event) {
             event.preventDefault();
             event.stopPropagation();
@@ -8759,6 +8793,10 @@ var DropdownMultiSelectListModel = /** @class */ (function (_super) {
         this.question.renderedValue = newValue;
         this.updateListState();
     };
+    DropdownMultiSelectListModel.prototype.clear = function () {
+        _super.prototype.clear.call(this);
+        this.syncFilterStringPlaceholder();
+    };
     DropdownMultiSelectListModel.prototype.onClear = function (event) {
         _super.prototype.onClear.call(this, event);
         this.updateListState();
@@ -9550,7 +9588,7 @@ __webpack_require__.r(__webpack_exports__);
 // import "../../main.scss";
 //import "../../modern.scss";
 var Version;
-Version = "" + "1.9.84";
+Version = "" + "1.9.85";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -16274,6 +16312,37 @@ var Helpers = /** @class */ (function () {
         }
         return true;
     };
+    Helpers.compareStrings = function (x, y) {
+        if (!!x)
+            x = x.trim();
+        if (!!y)
+            y = y.trim();
+        if (!x && !y)
+            return 0;
+        if (!x)
+            return -1;
+        if (!y)
+            return 1;
+        if (x === y)
+            return 0;
+        var digitIndex = -1;
+        for (var i = 0; i < x.length && i < y.length; i++) {
+            if (this.isCharDigit(x[i]) && this.isCharDigit(y[i])) {
+                digitIndex = i;
+                break;
+            }
+            if (x[i] !== y[i])
+                break;
+        }
+        if (digitIndex > -1) {
+            var nX = this.getNumberFromStr(x, digitIndex);
+            var nY = this.getNumberFromStr(y, digitIndex);
+            if (!Number.isNaN(nX) && !Number.isNaN(nY) && nX !== nY) {
+                return nX > nY ? 1 : -1;
+            }
+        }
+        return x > y ? 1 : -1;
+    };
     Helpers.isTwoValueEquals = function (x, y, ignoreOrder, caseSensitive, trimStrings) {
         if (ignoreOrder === void 0) { ignoreOrder = false; }
         if (x === y)
@@ -16480,6 +16549,18 @@ var Helpers = /** @class */ (function () {
     Helpers.isCharDigit = function (ch) {
         return ch >= "0" && ch <= "9";
     };
+    Helpers.getNumberFromStr = function (str, index) {
+        if (!this.isCharDigit(str[index]))
+            return NaN;
+        var nStr = "";
+        while (index < str.length && this.isCharDigit(str[index])) {
+            nStr += str[index];
+            index++;
+        }
+        if (!nStr)
+            return NaN;
+        return this.getNumber(nStr);
+    };
     Helpers.countDecimals = function (value) {
         if (Helpers.isNumber(value) && Math.floor(value) !== value) {
             var strs = value.toString().split(".");
@@ -19632,6 +19713,20 @@ var ListModel = /** @class */ (function (_super) {
             this.onFilterStringChangedCallback(text);
         }
     };
+    ListModel.prototype.scrollToItem = function (selector, ms) {
+        var _this = this;
+        if (ms === void 0) { ms = 0; }
+        setTimeout(function () {
+            if (!_this.listContainerHtmlElement)
+                return;
+            var item = _this.listContainerHtmlElement.querySelector("." + selector);
+            if (item) {
+                setTimeout(function () {
+                    item.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
+                }, ms);
+            }
+        }, ms);
+    };
     ListModel.prototype.setItems = function (items, sortByVisibleIndex) {
         var _this = this;
         if (sortByVisibleIndex === void 0) { sortByVisibleIndex = true; }
@@ -19793,15 +19888,10 @@ var ListModel = /** @class */ (function (_super) {
         }
     };
     ListModel.prototype.scrollToFocusedItem = function () {
-        var _this = this;
-        setTimeout(function () {
-            if (!_this.listContainerHtmlElement)
-                return;
-            var item = _this.listContainerHtmlElement.querySelector("." + _this.getDefaultCssClasses().itemFocused);
-            if (item) {
-                item.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
-            }
-        }, 0);
+        this.scrollToItem(this.getDefaultCssClasses().itemFocused);
+    };
+    ListModel.prototype.scrollToSelectedItem = function () {
+        this.scrollToItem(this.getDefaultCssClasses().itemSelected, 110);
     };
     ListModel.prototype.addScrollEventListener = function (handler) {
         if (!!handler) {
@@ -26509,7 +26599,7 @@ var PageModel = /** @class */ (function (_super) {
         configurable: true
     });
     PageModel.prototype.calcCssClasses = function (css) {
-        var classes = { page: {}, pageTitle: "", pageDescription: "", row: "", rowMultiple: "", pageRow: "" };
+        var classes = { page: {}, pageTitle: "", pageDescription: "", row: "", rowMultiple: "", pageRow: "", rowCompact: "" };
         this.copyCssClasses(classes.page, css.page);
         if (!!css.pageTitle) {
             classes.pageTitle = css.pageTitle;
@@ -26526,6 +26616,9 @@ var PageModel = /** @class */ (function (_super) {
         if (!!css.rowMultiple) {
             classes.rowMultiple = css.rowMultiple;
         }
+        if (!!css.rowCompact) {
+            classes.rowCompact = css.rowCompact;
+        }
         if (this.survey) {
             this.survey.updatePageCssClasses(this, classes);
         }
@@ -26994,6 +27087,7 @@ var QuestionRowModel = /** @class */ (function (_super) {
     QuestionRowModel.prototype.getRowCss = function () {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]()
             .append(this.panel.cssClasses.row)
+            .append(this.panel.cssClasses.rowCompact, this.panel["isCompact"])
             .append(this.panel.cssClasses.pageRow, this.panel.isPage || (!!this.panel.originalPage && !this.panel.survey.isShowingPreview))
             .append(this.panel.cssClasses.rowMultiple, this.visibleElements.length > 1)
             .toString();
@@ -27242,12 +27336,15 @@ var PanelModelBase = /** @class */ (function (_super) {
         configurable: true
     });
     PanelModelBase.prototype.calcCssClasses = function (css) {
-        var classes = { panel: {}, error: {}, row: "", rowMultiple: "", pageRow: "" };
+        var classes = { panel: {}, error: {}, row: "", rowMultiple: "", pageRow: "", rowCompact: "" };
         this.copyCssClasses(classes.panel, css.panel);
         this.copyCssClasses(classes.error, css.error);
         if (!!css.pageRow) {
             classes.pageRow = css.pageRow;
         }
+        if (!!css.rowCompact) {
+            classes.rowCompact = css.rowCompact;
+        }
         if (!!css.row) {
             classes.row = css.row;
         }
@@ -28939,6 +29036,7 @@ var defaultCss = {
         slider: "sv-boolean__slider",
         label: "sv-boolean__label ",
         disabledLabel: "sv-boolean__label--disabled",
+        sliderGhost: "sv-boolean__thumb-ghost",
         materialDecorator: "sv-item__decorator sv-boolean__decorator",
         itemDecorator: "sv-item__svg sv-boolean__svg",
         checkedPath: "sv-boolean__checked-path",
@@ -29382,6 +29480,7 @@ var defaultCss = {
         slider: "sv-boolean__slider",
         label: "sv-boolean__label ",
         disabledLabel: "sv-boolean__label--disabled",
+        sliderGhost: "sv-boolean__thumb-ghost",
         materialDecorator: "sv-item__decorator sv-boolean__decorator",
         itemDecorator: "sv-item__svg sv-boolean__svg",
         checkedPath: "sv-boolean__checked-path",
@@ -33128,9 +33227,15 @@ var Question = /** @class */ (function (_super) {
         return 1;
     };
     Question.prototype.getCorrectAnswerCount = function () {
-        return this.isTwoValueEquals(this.value, this.correctAnswer, !_settings__WEBPACK_IMPORTED_MODULE_8__["settings"].comparator.caseSensitive, true)
-            ? 1
-            : 0;
+        return this.checkIfAnswerCorrect() ? 1 : 0;
+    };
+    Question.prototype.checkIfAnswerCorrect = function () {
+        var isEqual = this.isTwoValueEquals(this.value, this.correctAnswer, !_settings__WEBPACK_IMPORTED_MODULE_8__["settings"].comparator.caseSensitive, true);
+        var options = { result: isEqual, correctAnswer: isEqual ? 1 : 0 };
+        if (!!this.survey) {
+            this.survey.onCorrectQuestionAnswer(this, options);
+        }
+        return options.result;
     };
     /**
     * Returns `true` if a question answer matches the `correctAnswer` property value.
@@ -35539,11 +35644,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     };
     QuestionSelectBase.prototype.sortArray = function (array, mult) {
         return array.sort(function (a, b) {
-            if (a.calculatedText < b.calculatedText)
-                return -1 * mult;
-            if (a.calculatedText > b.calculatedText)
-                return 1 * mult;
-            return 0;
+            return _helpers__WEBPACK_IMPORTED_MODULE_8__["Helpers"].compareStrings(a.calculatedText, b.calculatedText) * mult;
         });
     };
     QuestionSelectBase.prototype.randomizeArray = function (array) {
@@ -36344,6 +36445,7 @@ var QuestionBooleanModel = /** @class */ (function (_super) {
             .append(css.item)
             .append(css.itemOnError, this.errors.length > 0)
             .append(css.itemDisabled, this.isReadOnly)
+            .append(css.itemHover, !this.isDesignMode)
             .append(css.itemChecked, !!this.booleanValue)
             .append(css.itemIndeterminate, this.booleanValue === null)
             .toString();
@@ -38726,6 +38828,13 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
         }
         return _super.prototype.hasUnknownValue.call(this, val, includeOther, isFilteredChoices, checkEmptyValue);
     };
+    QuestionDropdownModel.prototype.needConvertRenderedOtherToDataValue = function () {
+        var _a;
+        var val = (_a = this.otherValue) === null || _a === void 0 ? void 0 : _a.trim();
+        if (!val)
+            return false;
+        return _super.prototype.hasUnknownValue.call(this, val, true, false);
+    };
     QuestionDropdownModel.prototype.onVisibleChoicesChanged = function () {
         _super.prototype.onVisibleChoicesChanged.call(this);
         if (this.popupModel) {
@@ -38739,8 +38848,10 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
         return this.inputId + "_0";
     };
     QuestionDropdownModel.prototype.clearValue = function () {
+        var _a;
         _super.prototype.clearValue.call(this);
         this.lastSelectedItemValue = null;
+        (_a = this.dropdownListModel) === null || _a === void 0 ? void 0 : _a.clear();
     };
     QuestionDropdownModel.prototype.onClick = function (e) {
         !!this.onOpenedCallBack && this.onOpenedCallBack();
@@ -45627,7 +45738,12 @@ var QuestionMatrixDropdownRenderedCell = /** @class */ (function () {
                     return this.cell.column.locCellHint.renderedHtml;
                 }
                 if (this.cell.column.isShowInMultipleColumns) {
-                    return this.item.locText.renderedHtml;
+                    if (!!this.item) {
+                        return this.item.locText.renderedHtml;
+                    }
+                    else {
+                        return "";
+                    }
                 }
             }
             if (this.question && this.question.isVisible) {
@@ -51365,6 +51481,9 @@ var RenderedRatingItem = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: "" })
     ], RenderedRatingItem.prototype, "text", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
+    ], RenderedRatingItem.prototype, "style", void 0);
     return RenderedRatingItem;
 }(_base__WEBPACK_IMPORTED_MODULE_7__["Base"]));
 
@@ -51378,6 +51497,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     function QuestionRatingModel(name) {
         var _this = _super.call(this, name) || this;
         _this._syncPropertiesChanging = false;
+        _this.initColors();
         _this.createItemValues("rateValues");
         _this.createRenderedRateItems();
         _this.createLocalizableString("ratingOptionsCaption", _this, false, true);
@@ -51393,12 +51513,17 @@ var QuestionRatingModel = /** @class */ (function (_super) {
             _this.setIconsToRateValues();
             _this.createRenderedRateItems();
         });
+        _this.registerFunctionOnPropertiesValueChanged(["rateColorMode", "scaleColorMode"], function () {
+            _this.initColors();
+        });
         _this.registerFunctionOnPropertiesValueChanged(["autoGenerate"], function () {
             if (!_this.autoGenerate && _this.rateValues.length === 0) {
                 _this.setPropertyValue("rateValues", _this.visibleRateValues);
             }
-            if (_this.autoGenerate)
+            if (_this.autoGenerate) {
+                _this.rateValues.length = 0;
                 _this.updateRateMax();
+            }
             _this.createRenderedRateItems();
         });
         _this.createLocalizableString("minRateDescription", _this, true);
@@ -51408,8 +51533,9 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     }
     QuestionRatingModel.prototype.setIconsToRateValues = function () {
         var _this = this;
-        if (this.rateType == "smileys")
+        if (this.rateType == "smileys") {
             this.rateValues.map(function (item) { return item.icon = _this.getItemSmiley(item); });
+        }
     };
     QuestionRatingModel.prototype.startLoadingFromJson = function (jsonObj) {
         _super.prototype.startLoadingFromJson.call(this, jsonObj);
@@ -51417,6 +51543,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     };
     QuestionRatingModel.prototype.endLoadingFromJson = function () {
         _super.prototype.endLoadingFromJson.call(this);
+        this.initColors();
         this.hasMinRateDescription = !!this.minRateDescription;
         this.hasMaxRateDescription = !!this.maxRateDescription;
         if (this.jsonObj.rateMin !== undefined && this.jsonObj.rateCount !== undefined && this.jsonObj.rateMax === undefined) {
@@ -51462,6 +51589,8 @@ var QuestionRatingModel = /** @class */ (function (_super) {
             newCount = 10;
         }
         this.rateCount = newCount;
+        if (this.rateValues.length > newCount)
+            this.rateValues.length = newCount;
     };
     QuestionRatingModel.prototype.initPropertyDependencies = function () {
         var _this = this;
@@ -51572,6 +51701,39 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionRatingModel.prototype.initColors = function () {
+        if (this.colorMode === "monochrome")
+            return;
+        if (!document)
+            return;
+        if (QuestionRatingModel.badColor && QuestionRatingModel.normalColor && QuestionRatingModel.goodColor)
+            return;
+        function getRGBColor(varName) {
+            var style = getComputedStyle(document.documentElement);
+            var str = style.getPropertyValue && style.getPropertyValue(varName);
+            if (!str)
+                return null;
+            var ctx = document.createElement("canvas").getContext("2d");
+            ctx.fillStyle = str;
+            var newStr = ctx.fillStyle;
+            if (newStr.startsWith("rgba")) {
+                return newStr.substring(5, newStr.length - 1).split(",").map(function (c) { return +(c.trim()); });
+            }
+            var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(newStr);
+            return result ? [
+                parseInt(result[1], 16),
+                parseInt(result[2], 16),
+                parseInt(result[3], 16),
+                1
+            ] : null;
+        }
+        QuestionRatingModel.badColor = getRGBColor("--sd-rating-bad-color");
+        QuestionRatingModel.normalColor = getRGBColor("--sd-rating-normal-color");
+        QuestionRatingModel.goodColor = getRGBColor("--sd-rating-good-color");
+        QuestionRatingModel.badColorLight = getRGBColor("--sd-rating-bad-color-light");
+        QuestionRatingModel.normalColorLight = getRGBColor("--sd-rating-normal-color-light");
+        QuestionRatingModel.goodColorLight = getRGBColor("--sd-rating-good-color-light");
+    };
     QuestionRatingModel.prototype.getDisplayValueCore = function (keysAsText, value) {
         var res = _itemvalue__WEBPACK_IMPORTED_MODULE_0__["ItemValue"].getTextOrHtmlByValue(this.visibleRateValues, value);
         return !!res ? res : value;
@@ -51611,13 +51773,16 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         if (this.rateType == "smileys" && rateValues.length > 10)
             rateValues = rateValues.slice(0, 10);
         this.renderedRateItems = rateValues.map(function (v, i) {
+            var renderedItem = null;
             if (_this.displayRateDescriptionsAsExtremeItems) {
                 if (i == 0)
-                    return new RenderedRatingItem(v, _this.minRateDescription && _this.locMinRateDescription || v.locText);
+                    renderedItem = new RenderedRatingItem(v, _this.minRateDescription && _this.locMinRateDescription || v.locText);
                 if (i == rateValues.length - 1)
-                    return new RenderedRatingItem(v, _this.maxRateDescription && _this.locMaxRateDescription || v.locText);
+                    renderedItem = new RenderedRatingItem(v, _this.maxRateDescription && _this.locMaxRateDescription || v.locText);
             }
-            return new RenderedRatingItem(v);
+            if (!renderedItem)
+                renderedItem = new RenderedRatingItem(v);
+            return renderedItem;
         });
     };
     QuestionRatingModel.prototype.correctValue = function (value, step) {
@@ -51767,6 +51932,10 @@ var QuestionRatingModel = /** @class */ (function (_super) {
             return;
         var high = true;
         var selected = this.value != null;
+        if (this.rateType !== "stars") {
+            item.highlight = "highlighted";
+            return;
+        }
         for (var i = 0; i < this.renderedRateItems.length; i++) {
             this.renderedRateItems[i].highlight = high && !selected && "highlighted" || !high && selected && "unhighlighted" || "none";
             if (this.renderedRateItems[i] == item)
@@ -51805,6 +51974,46 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     QuestionRatingModel.prototype.getItemClassByText = function (item, text) {
         return this.getItemClass(item);
     };
+    QuestionRatingModel.prototype.getRenderedItemColor = function (index, light) {
+        var startColor = light ? QuestionRatingModel.badColorLight : QuestionRatingModel.badColor;
+        var endColor = light ? QuestionRatingModel.goodColorLight : QuestionRatingModel.goodColor;
+        var normalIndex = (this.rateCount - 1) / 2.0;
+        var middleColor = light ? QuestionRatingModel.normalColorLight : QuestionRatingModel.normalColor;
+        if (index < normalIndex) {
+            endColor = middleColor;
+        }
+        else {
+            startColor = middleColor;
+            index -= normalIndex;
+        }
+        if (!startColor || !endColor)
+            return null;
+        var curColor = [0, 0, 0, 0];
+        for (var i = 0; i < 4; i++) {
+            curColor[i] = startColor[i] + (endColor[i] - startColor[i]) * index / normalIndex;
+            if (i < 3)
+                curColor[i] = Math.trunc(curColor[i]);
+        }
+        return "rgba(" + curColor[0] + ", " + curColor[1] + ", " + curColor[2] + ", " + curColor[3] + ")";
+    };
+    QuestionRatingModel.prototype.getItemStyle = function (item, highlight) {
+        if (highlight === void 0) { highlight = "none"; }
+        if (this.scaleColorMode === "monochrome" && this.rateColorMode == "default")
+            return { borderColor: null, fill: null, backgroundColor: null };
+        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 };
+        }
+    };
     QuestionRatingModel.prototype.getItemClass = function (item, highlight) {
         var _this = this;
         if (highlight === void 0) { highlight = "none"; }
@@ -51829,6 +52038,8 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         var itemitemOnErrorClass = this.cssClasses.itemOnError;
         var itemHighlightedClass = null;
         var itemUnhighlightedClass = null;
+        var itemScaleColoredClass = null;
+        var itemRateColoredClass = null;
         if (this.isStar) {
             itemClass = this.cssClasses.itemStar;
             itemSelectedClass = this.cssClasses.itemStarSelected;
@@ -51844,6 +52055,9 @@ var QuestionRatingModel = /** @class */ (function (_super) {
             itemDisabledClass = this.cssClasses.itemSmileyDisabled;
             itemHoverClass = this.cssClasses.itemSmileyHover;
             itemitemOnErrorClass = this.cssClasses.itemSmileyOnError;
+            itemHighlightedClass = this.cssClasses.itemSmileyHighlighted;
+            itemScaleColoredClass = this.cssClasses.itemSmileyScaleColored;
+            itemRateColoredClass = this.cssClasses.itemSmileyRateColored;
         }
         var hasFixedSize = !this.isStar &&
             !this.isSmiley &&
@@ -51858,6 +52072,8 @@ var QuestionRatingModel = /** @class */ (function (_super) {
             .append(itemDisabledClass, this.isReadOnly)
             .append(itemHoverClass, allowHover)
             .append(itemHighlightedClass, isHighlighted)
+            .append(itemScaleColoredClass, this.scaleColorMode == "colored")
+            .append(itemRateColoredClass, this.rateColorMode == "scale" && isSelected)
             .append(itemUnhighlightedClass, isUnhighlighted)
             .append(itemitemOnErrorClass, this.errors.length > 0)
             .append(this.cssClasses.itemFixedSize, hasFixedSize)
@@ -52021,7 +52237,10 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     ], QuestionRatingModel.prototype, "rateDisplayMode", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: "monochrome" })
-    ], QuestionRatingModel.prototype, "smileysColorMode", void 0);
+    ], QuestionRatingModel.prototype, "scaleColorMode", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: "scale" })
+    ], QuestionRatingModel.prototype, "rateColorMode", void 0);
     return QuestionRatingModel;
 }(_question__WEBPACK_IMPORTED_MODULE_1__["Question"]));
 
@@ -52035,18 +52254,38 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("rating", [
         choices: ["labels", "stars", "smileys"],
         visibleIndex: 0
     },
+    {
+        name: "scaleColorMode",
+        category: "rateValues",
+        default: "monochrome",
+        choices: ["monochrome", "colored"],
+        visibleIf: function (obj) {
+            return obj.rateDisplayMode == "smileys";
+        },
+        visibleIndex: 1
+    },
+    {
+        name: "rateColorMode",
+        category: "rateValues",
+        default: "scale",
+        choices: ["default", "scale"],
+        visibleIf: function (obj) {
+            return obj.rateDisplayMode == "smileys" && obj.scaleColorMode == "monochrome";
+        },
+        visibleIndex: 2
+    },
     {
         name: "autoGenerate",
         category: "rateValues",
         default: true,
         choices: [{ value: true, text: "Generate" }, { value: false, text: "Enter manually" }],
-        visibleIndex: 2
+        visibleIndex: 4
     },
     {
         name: "rateCount:number",
         default: 5,
         category: "rateValues",
-        visibleIndex: 1,
+        visibleIndex: 3,
         onSettingValue: function (obj, val) {
             if (val < 2)
                 return 2;
@@ -52066,7 +52305,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("rating", [
         visibleIf: function (obj) {
             return !obj.autoGenerate;
         },
-        visibleIndex: 3
+        visibleIndex: 5
     },
     {
         name: "rateMin:number", default: 1,
@@ -52076,7 +52315,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("rating", [
         visibleIf: function (obj) {
             return !!obj.autoGenerate;
         },
-        visibleIndex: 4
+        visibleIndex: 6
     },
     {
         name: "rateMax:number", default: 5,
@@ -52086,7 +52325,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("rating", [
         visibleIf: function (obj) {
             return !!obj.autoGenerate;
         },
-        visibleIndex: 5
+        visibleIndex: 7
     },
     {
         name: "rateStep:number", default: 1, minValue: 0.1,
@@ -52100,7 +52339,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("rating", [
         visibleIf: function (obj) {
             return !!obj.autoGenerate;
         },
-        visibleIndex: 6
+        visibleIndex: 8
     },
     {
         name: "minRateDescription",
@@ -52120,7 +52359,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("rating", [
         default: "auto",
         choices: ["auto", "buttons", "dropdown"],
         visibleIndex: 20
-    },
+    }
 ], function () {
     return new QuestionRatingModel("");
 }, "question");
@@ -52622,6 +52861,13 @@ var QuestionTagboxModel = /** @class */ (function (_super) {
         }
         return _super.prototype.hasUnknownValue.call(this, val, includeOther, isFilteredChoices, checkEmptyValue);
     };
+    QuestionTagboxModel.prototype.needConvertRenderedOtherToDataValue = function () {
+        var _a;
+        var val = (_a = this.otherValue) === null || _a === void 0 ? void 0 : _a.trim();
+        if (!val)
+            return false;
+        return _super.prototype.hasUnknownValue.call(this, val, true, false);
+    };
     QuestionTagboxModel.prototype.onVisibleChoicesChanged = function () {
         _super.prototype.onVisibleChoicesChanged.call(this);
         if (this.popupModel) {
@@ -52665,6 +52911,10 @@ var QuestionTagboxModel = /** @class */ (function (_super) {
             this.dropdownListModelValue.dispose();
         }
     };
+    QuestionTagboxModel.prototype.clearValue = function () {
+        _super.prototype.clearValue.call(this);
+        this.dropdownListModel.clear();
+    };
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])()
     ], QuestionTagboxModel.prototype, "allowClear", void 0);
@@ -54152,12 +54402,14 @@ var SurveyQuestionBoolean = /** @class */ (function (_super) {
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", { ref: this.checkRef, type: "checkbox", name: this.question.name, value: this.question.booleanValue === null
                         ? ""
                         : this.question.booleanValue, id: this.question.inputId, className: cssClasses.control, disabled: this.isDisplayMode, checked: this.question.booleanValue || false, onChange: this.handleOnChange, "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__["createElement"]("span", { className: this.question.getLabelCss(false), onClick: function (event) { return _this.handleOnLabelClick(event, false); } }, this.renderLocString(this.question.locLabelFalse)),
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.sliderGhost, onClick: function (event) { return _this.handleOnLabelClick(event, false); } },
+                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.getLabelCss(false) }, this.renderLocString(this.question.locLabelFalse))),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.switch, onClick: this.handleOnSwitchClick },
                     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"]("span", { className: this.question.getLabelCss(true), onClick: function (event) { return _this.handleOnLabelClick(event, true); } }, this.renderLocString(this.question.locLabelTrue)))));
+                react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.sliderGhost, onClick: function (event) { return _this.handleOnLabelClick(event, true); } },
+                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.getLabelCss(true) }, this.renderLocString(this.question.locLabelTrue))))));
     };
     return SurveyQuestionBoolean;
 }(_reactquestion_element__WEBPACK_IMPORTED_MODULE_1__["SurveyQuestionElementBase"]));
@@ -54338,7 +54590,7 @@ var SurveyActionBarItem = /** @class */ (function (_super) {
         var title = this.item.tooltip || this.item.title;
         var buttonContent = this.renderButtonContent();
         var tabIndex = this.item.disableTabStop ? -1 : undefined;
-        var button = Object(_reactSurvey__WEBPACK_IMPORTED_MODULE_3__["attachKey2click"])(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { className: className, type: "button", disabled: this.item.disabled, onClick: function () { return _this.item.action(_this.item); }, title: title, tabIndex: tabIndex, "aria-checked": this.item.ariaChecked, "aria-expanded": this.item.ariaExpanded, role: this.item.ariaRole }, buttonContent), null, { processEsc: false });
+        var button = Object(_reactSurvey__WEBPACK_IMPORTED_MODULE_3__["attachKey2click"])(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { className: className, type: "button", disabled: this.item.disabled, onClick: function (args) { return _this.item.action(_this.item, _this.item.getIsTrusted(args)); }, title: title, tabIndex: tabIndex, "aria-checked": this.item.ariaChecked, "aria-expanded": this.item.ariaExpanded, role: this.item.ariaRole }, buttonContent), null, { processEsc: false });
         return button;
     };
     return SurveyActionBarItem;
@@ -55879,7 +56131,7 @@ var RatingItemSmiley = /** @class */ (function (_super) {
     };
     RatingItemSmiley.prototype.render = function () {
         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); } },
+        return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", { style: this.question.getItemStyle(this.item.itemValue, this.item.highlight), 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"], { size: "auto", iconName: this.question.getItemSmileyIconName(this.item.itemValue), title: this.item.text })));
     };
@@ -59909,7 +60161,7 @@ var SurveyElementBase = /** @class */ (function (_super) {
     };
     SurveyElementBase.renderQuestionDescription = function (question) {
         var descriptionText = SurveyElementBase.renderLocString(question.locDescription);
-        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: question.cssDescription }, descriptionText);
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { style: question.isDescriptionVisible ? undefined : { display: "none" }, className: question.cssDescription }, descriptionText);
     };
     SurveyElementBase.prototype.componentDidMount = function () {
         this.makeBaseElementsReact();
@@ -65046,6 +65298,13 @@ var SurveyElement = /** @class */ (function (_super) {
     SurveyElement.prototype.shouldAddRunnerStyles = function () {
         return !this.isDesignMode && this.isDefaultV2Theme;
     };
+    Object.defineProperty(SurveyElement.prototype, "isCompact", {
+        get: function () {
+            return this.survey && this.survey["isCompact"];
+        },
+        enumerable: false,
+        configurable: true
+    });
     SurveyElement.prototype.getHasFrameV2 = function () {
         return this.shouldAddRunnerStyles() && (!this.hasParent && this.isSingleInRow);
     };
@@ -65054,7 +65313,8 @@ var SurveyElement = /** @class */ (function (_super) {
     };
     SurveyElement.prototype.getCssRoot = function (cssClasses) {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_6__["CssClassBuilder"]()
-            .append(cssClasses.withFrame, this.getHasFrameV2())
+            .append(cssClasses.withFrame, this.getHasFrameV2() && !this.isCompact)
+            .append(cssClasses.compact, this.isCompact && this.getHasFrameV2())
             .append(cssClasses.collapsed, !!this.isCollapsed)
             .append(cssClasses.expanded, !!this.isExpanded)
             .append(cssClasses.nested, this.getIsNested())
@@ -65187,6 +65447,13 @@ var SurveyElement = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SurveyElement.prototype, "isDescriptionVisible", {
+        get: function () {
+            return (!!this.description || this.isDesignMode);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(SurveyElement.prototype, "rootStyle", {
         get: function () {
             var style = {};
@@ -66061,6 +66328,7 @@ var SurveyModel = /** @class */ (function (_super) {
         _this.hideRequiredErrors = false;
         //#endregion
         _this._isMobile = false;
+        _this._isCompact = false;
         _this._isDesignMode = false;
         /**
          * Gets or sets whether the survey must ignore validation like required questions and others, on `nextPage` and `completeLastPage` function calls. The default is `false`.
@@ -67434,6 +67702,19 @@ var SurveyModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SurveyModel.prototype, "isCompact", {
+        get: function () {
+            return this._isCompact;
+        },
+        set: function (newVal) {
+            if (newVal !== this._isCompact) {
+                this._isCompact = newVal;
+                this.updateElementCss();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     SurveyModel.prototype.isLogoImageChoosen = function () {
         return this.locLogo.renderedHtml;
     };
@@ -72144,6 +72425,12 @@ var SurveyModel = /** @class */ (function (_super) {
     SurveyModel.prototype.getInCorrectAnswerCount = function () {
         return this.getCorrectedAnswerCountCore(false);
     };
+    SurveyModel.prototype.onCorrectQuestionAnswer = function (question, options) {
+        if (this.onIsAnswerCorrect.isEmpty)
+            return;
+        options.question = question;
+        this.onIsAnswerCorrect.fire(this, options);
+    };
     SurveyModel.prototype.getCorrectedAnswerCountCore = function (isCorrect) {
         var questions = this.getQuizQuestions();
         var counter = 0;
@@ -72802,6 +73089,9 @@ var SurveyModel = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], SurveyModel.prototype, "_isMobile", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
+    ], SurveyModel.prototype, "_isCompact", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], SurveyModel.prototype, "renderBackgroundImage", void 0);