survey-react 1.9.84 → 1.9.86

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.84
+ * surveyjs - Survey JavaScript library v1.9.86
  * 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 () {
@@ -2560,6 +2578,9 @@ var Base = /** @class */ (function () {
         if (defaultValue === void 0) { defaultValue = null; }
         var res = this.getPropertyValueCore(this.propertyHash, name);
         if (this.isPropertyEmpty(res)) {
+            var locStr = this.localizableStrings ? this.localizableStrings[name] : undefined;
+            if (locStr)
+                return locStr.text;
             if (defaultValue != null)
                 return defaultValue;
             var propDefaultValue = this.getDefaultValueFromProperty(name);
@@ -4930,6 +4951,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 +5292,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 +5664,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 +5692,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 +5723,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 +5844,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 +5969,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 +5995,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 +6033,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 +6056,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 +6185,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 +8285,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 +8450,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();
@@ -8437,10 +8474,10 @@ var DropdownListModel = /** @class */ (function (_super) {
         }
         this.scrollToFocusedItem();
         if (this.question.value && !this.listModel.filterString && this.question.searchEnabled && this.question instanceof _question_dropdown__WEBPACK_IMPORTED_MODULE_4__["QuestionDropdownModel"]) {
-            this.applyInputString(this.listModel.focusedItem);
+            this.applyInputString(this.listModel.focusedItem || this.question.selectedItem);
         }
         else {
-            this.applyHintString(this.listModel.focusedItem);
+            this.applyHintString(this.listModel.focusedItem || this.question.selectedItem);
         }
         this.ariaActivedescendant = (_a = this.listModel.focusedItem) === null || _a === void 0 ? void 0 : _a.elementId;
     };
@@ -8759,6 +8796,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 +9591,7 @@ __webpack_require__.r(__webpack_exports__);
 // import "../../main.scss";
 //import "../../modern.scss";
 var Version;
-Version = "" + "1.9.84";
+Version = "" + "1.9.86";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -16274,6 +16315,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 +16552,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(".");
@@ -19627,10 +19711,24 @@ var ListModel = /** @class */ (function (_super) {
     });
     ListModel.prototype.onFilterStringChanged = function (text) {
         var _this = this;
-        this.isEmpty = this.renderedActions.filter(function (action) { return _this.isItemVisible(action); }).length === 0;
         if (!!this.onFilterStringChangedCallback) {
             this.onFilterStringChangedCallback(text);
         }
+        this.isEmpty = this.renderedActions.filter(function (action) { return _this.isItemVisible(action); }).length === 0;
+    };
+    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;
@@ -19793,15 +19891,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) {
@@ -20071,9 +20164,7 @@ var LocalizableString = /** @class */ (function () {
         return res;
     };
     LocalizableString.prototype.setLocaleText = function (loc, value) {
-        if (this.disableLocalization) {
-            loc = _settings__WEBPACK_IMPORTED_MODULE_2__["settings"].defaultLocaleName;
-        }
+        loc = this.getValueLoc(loc);
         if (!this.storeDefaultText && value == this.getLocaleTextWithDefault(loc)) {
             if (!!value || !!loc && loc !== this.defaultLoc)
                 return;
@@ -20278,19 +20369,24 @@ var LocalizableString = /** @class */ (function () {
     LocalizableString.prototype.getValue = function (loc) {
         if (!!this.sharedData)
             return this.sharedData.getValue(loc);
-        return this.values[loc];
+        return this.values[this.getValueLoc(loc)];
     };
     LocalizableString.prototype.setValue = function (loc, value) {
         if (!!this.sharedData)
             this.sharedData.setValue(loc, value);
         else
-            this.values[loc] = value;
+            this.values[this.getValueLoc(loc)] = value;
     };
     LocalizableString.prototype.deleteValue = function (loc) {
         if (!!this.sharedData)
             this.sharedData.deleteValue(loc);
         else
-            delete this.values[loc];
+            delete this.values[this.getValueLoc(loc)];
+    };
+    LocalizableString.prototype.getValueLoc = function (loc) {
+        if (this.disableLocalization)
+            return _settings__WEBPACK_IMPORTED_MODULE_2__["settings"].defaultLocaleName;
+        return loc;
     };
     LocalizableString.prototype.getValuesKeys = function () {
         if (!!this.sharedData)
@@ -26509,7 +26605,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 +26622,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);
         }
@@ -26917,8 +27016,11 @@ var QuestionRowModel = /** @class */ (function (_super) {
                     el.renderWidth = this.getRenderedWidthFromWidth(width);
                     preSetWidthElements.push(el);
                 }
-                if (!(this.panel.isDefaultV2Theme || ((_a = this.panel.parentQuestion) === null || _a === void 0 ? void 0 : _a.isDefaultV2Theme))) {
-                    el.rightIndent = counter < visCount - 1 ? 1 : 0;
+                if (counter < visCount - 1 && !(this.panel.isDefaultV2Theme || ((_a = this.panel.parentQuestion) === null || _a === void 0 ? void 0 : _a.isDefaultV2Theme))) {
+                    el.rightIndent = 1;
+                }
+                else {
+                    el.rightIndent = 0;
                 }
                 counter++;
             }
@@ -26994,6 +27096,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 +27345,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;
         }
@@ -28704,8 +28810,19 @@ var PanelModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(PanelModel.prototype, "showErrorsAbovePanel", {
+        get: function () {
+            return this.isDefaultV2Theme;
+        },
+        enumerable: false,
+        configurable: true
+    });
     PanelModel.prototype.getCssError = function (cssClasses) {
-        var builder = new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]().append(this.cssClasses.error.root);
+        var isDefaultV2Theme = this.isDefaultV2Theme;
+        var builder = new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]()
+            .append(this.cssClasses.error.root)
+            .append(this.cssClasses.error.outsideQuestion, isDefaultV2Theme)
+            .append(this.cssClasses.error.aboveQuestion, isDefaultV2Theme);
         return builder.append("panel-error-root", builder.isEmpty()).toString();
     };
     PanelModel.prototype.onVisibleChanged = function () {
@@ -28939,6 +29056,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 +29500,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 +33247,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.
@@ -34751,21 +34876,40 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         return this.hasUnknownValue(val, true, false);
     };
     QuestionSelectBase.prototype.updateSelectedItemValues = function () {
+        var IsMultipleValue = this.getIsMultipleValue();
+        if (IsMultipleValue) {
+            this.updateMultipleSelectedItemValues();
+        }
+        else {
+            this.updateSingleSelectedItemValues();
+        }
+    };
+    QuestionSelectBase.prototype.updateSingleSelectedItemValues = function () {
         var _this = this;
-        if (!!this.survey && !this.isEmpty() && this.choices.length === 0) {
-            var IsMultipleValue_1 = this.getIsMultipleValue();
+        if (!!this.survey && !this.isEmpty() && !_itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"].getItemByValue(this.choices, this.value)) {
             this.survey.getChoiceDisplayValue({
                 question: this,
-                values: IsMultipleValue_1 ? this.value : [this.value],
+                values: [this.value],
                 setItems: function (displayValues) {
                     if (!displayValues || !displayValues.length)
                         return;
-                    if (IsMultipleValue_1) {
-                        _this.selectedItemValues = displayValues.map(function (displayValue, index) { return _this.createItemValue(_this.value[index], displayValue); });
-                    }
-                    else {
-                        _this.selectedItemValues = _this.createItemValue(_this.value, displayValues[0]);
-                    }
+                    _this.selectedItemValues = _this.createItemValue(_this.value, displayValues[0]);
+                }
+            });
+        }
+    };
+    QuestionSelectBase.prototype.updateMultipleSelectedItemValues = function () {
+        var _this = this;
+        var valueArray = this.value;
+        var hasItemWithValues = valueArray.some(function (val) { return !_itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"].getItemByValue(_this.choices, val); });
+        if (!!this.survey && !this.isEmpty() && hasItemWithValues) {
+            this.survey.getChoiceDisplayValue({
+                question: this,
+                values: valueArray,
+                setItems: function (displayValues) {
+                    if (!displayValues || !displayValues.length)
+                        return;
+                    _this.selectedItemValues = displayValues.map(function (displayValue, index) { return _this.createItemValue(_this.value[index], displayValue); });
                 }
             });
         }
@@ -35539,11 +35683,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 +36484,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 +38867,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 +38887,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 +45777,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 +51520,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,12 +51536,13 @@ 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);
         _this.registerFunctionOnPropertiesValueChanged(["rateMin", "rateMax",
             "minRateDescription", "maxRateDescription", "rateStep", "displayRateDescriptionsAsExtremeItems"], function () { return _this.createRenderedRateItems(); });
-        _this.registerFunctionOnPropertiesValueChanged(["rateDisplayMode"], function () {
+        _this.registerFunctionOnPropertiesValueChanged(["rateType"], function () {
             _this.setIconsToRateValues();
             _this.createRenderedRateItems();
             _this.updateRateCount();
@@ -51393,12 +51552,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 +51572,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 +51582,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 +51628,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;
@@ -51507,6 +51675,8 @@ var QuestionRatingModel = /** @class */ (function (_super) {
          * If you need to specify only the `value` property, you can set the `rateValues` property to an array of numbers, for example, `[ 3, 6, 10 ]`. These values are both saved in survey results and used as display text.
          *
          * If you do not specify the `rateValues` property, rate values are generated automatically based upon the [`rateMin`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#rateMin), [`rateMax`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#rateMax), [`rateStep`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#rateStep), and [`rateCount`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#rateCount) property values.
+         *
+         * [View Demo](/form-library/examples/rating-scale/ (linkStyle))
          */
         get: function () {
             return this.getPropertyValue("rateValues");
@@ -51523,6 +51693,8 @@ var QuestionRatingModel = /** @class */ (function (_super) {
          * Specifies the first rate value in the generated sequence of rate values. Applies if the [`rateValues`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#rateValues) array is empty.
          *
          * Default value: 1
+         *
+         * [View Demo](/form-library/examples/rating-scale/ (linkStyle))
          * @see rateMax
          * @see rateStep
          * @see rateCount
@@ -51541,6 +51713,8 @@ var QuestionRatingModel = /** @class */ (function (_super) {
          * Specifies the last rate value in the generated sequence of rate values. Applies if the [`rateValues`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#rateValues) array is empty.
          *
          * Default value: 5
+         *
+         * [View Demo](/form-library/examples/rating-scale/ (linkStyle))
          * @see rateMin
          * @see rateStep
          * @see rateCount
@@ -51559,6 +51733,8 @@ var QuestionRatingModel = /** @class */ (function (_super) {
          * Specifies a step with which to generate rate values. Applies if the [`rateValues`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#rateValues) array is empty.
          *
          * Default value: 1
+         *
+         * [View Demo](/form-library/examples/rating-scale/ (linkStyle))
          * @see rateMin
          * @see rateMax
          * @see rateCount
@@ -51572,6 +51748,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 +51820,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) {
@@ -51709,12 +51921,12 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(QuestionRatingModel.prototype, "rateType", {
+    Object.defineProperty(QuestionRatingModel.prototype, "rateDisplayMode", {
         get: function () {
-            return this.rateDisplayMode;
+            return this.rateType;
         },
         set: function (val) {
-            this.rateDisplayMode = val;
+            this.rateType = val;
         },
         enumerable: false,
         configurable: true
@@ -51767,6 +51979,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 +52021,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 +52085,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 +52102,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 +52119,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)
@@ -52018,35 +52281,58 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     ], QuestionRatingModel.prototype, "displayMode", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: "labels" })
-    ], QuestionRatingModel.prototype, "rateDisplayMode", void 0);
+    ], QuestionRatingModel.prototype, "rateType", 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"]));
 
 _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("rating", [
     { name: "showCommentArea:switch", layout: "row", visible: true, category: "general" },
     {
-        name: "rateDisplayMode",
-        alternativeName: "rateType",
+        name: "rateType",
+        alternativeName: "rateDisplayMode",
         default: "labels",
         category: "rateValues",
         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 +52352,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 +52362,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 +52372,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 +52386,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("rating", [
         visibleIf: function (obj) {
             return !!obj.autoGenerate;
         },
-        visibleIndex: 6
+        visibleIndex: 8
     },
     {
         name: "minRateDescription",
@@ -52119,8 +52405,11 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("rating", [
         name: "displayMode",
         default: "auto",
         choices: ["auto", "buttons", "dropdown"],
+        visibleIf: function (obj) {
+            return obj.rateType == "labels";
+        },
         visibleIndex: 20
-    },
+    }
 ], function () {
     return new QuestionRatingModel("");
 }, "question");
@@ -52622,6 +52911,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 +52961,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);
@@ -53335,6 +53635,12 @@ function getCorrectMinMax(obj, min, max, isMax) {
         return isMax ? min : max;
     return val;
 }
+function propertyEditorMinMaxUpdate(obj, propertyEditor) {
+    if (!!obj && !!obj.inputType) {
+        propertyEditor.inputType = obj.inputType !== "range" ? obj.inputType : "number";
+        propertyEditor.textUpdateMode = "onBlur";
+    }
+}
 _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("text", [
     {
         name: "inputType",
@@ -53374,9 +53680,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("text", [
             return isMinMaxType(obj);
         },
         onPropertyEditorUpdate: function (obj, propertyEditor) {
-            if (!!obj && !!obj.inputType) {
-                propertyEditor.inputType = obj.inputType !== "range" ? obj.inputType : "number";
-            }
+            propertyEditorMinMaxUpdate(obj, propertyEditor);
         },
         onSettingValue: function (obj, val) {
             return getCorrectMinMax(obj, val, obj.max, false);
@@ -53393,9 +53697,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("text", [
             return getCorrectMinMax(obj, obj.min, val, true);
         },
         onPropertyEditorUpdate: function (obj, propertyEditor) {
-            if (!!obj && !!obj.inputType) {
-                propertyEditor.inputType = obj.inputType !== "range" ? obj.inputType : "number";
-            }
+            propertyEditorMinMaxUpdate(obj, propertyEditor);
         },
     },
     {
@@ -53696,10 +53998,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _jsonobject__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./jsonobject */ "./src/jsonobject.ts");
 
 
-//TODO replace completely with ElementFactory
 var QuestionFactory = /** @class */ (function () {
     function QuestionFactory() {
-        this.creatorHash = {};
     }
     Object.defineProperty(QuestionFactory, "DefaultChoices", {
         get: function () {
@@ -53737,26 +54037,23 @@ var QuestionFactory = /** @class */ (function () {
         configurable: true
     });
     QuestionFactory.prototype.registerQuestion = function (questionType, questionCreator) {
-        this.creatorHash[questionType] = questionCreator;
+        ElementFactory.Instance.registerElement(questionType, questionCreator);
     };
-    QuestionFactory.prototype.unregisterElement = function (elementType) {
-        delete this.creatorHash[elementType];
+    QuestionFactory.prototype.registerCustomQuestion = function (questionType) {
+        ElementFactory.Instance.registerCustomQuestion(questionType);
+    };
+    QuestionFactory.prototype.unregisterElement = function (elementType, removeFromSerializer) {
+        if (removeFromSerializer === void 0) { removeFromSerializer = false; }
+        ElementFactory.Instance.unregisterElement(elementType, removeFromSerializer);
     };
     QuestionFactory.prototype.clear = function () {
-        this.creatorHash = {};
+        ElementFactory.Instance.clear();
     };
     QuestionFactory.prototype.getAllTypes = function () {
-        var result = new Array();
-        for (var key in this.creatorHash) {
-            result.push(key);
-        }
-        return result.sort();
+        return ElementFactory.Instance.getAllTypes();
     };
     QuestionFactory.prototype.createQuestion = function (questionType, name) {
-        var creator = this.creatorHash[questionType];
-        if (creator == null)
-            return null;
-        return creator(name);
+        return ElementFactory.Instance.createElement(questionType, name);
     };
     QuestionFactory.Instance = new QuestionFactory();
     return QuestionFactory;
@@ -53764,7 +54061,17 @@ var QuestionFactory = /** @class */ (function () {
 
 var ElementFactory = /** @class */ (function () {
     function ElementFactory() {
+        var _this = this;
         this.creatorHash = {};
+        this.registerCustomQuestion = function (questionType) {
+            var creator = function (name) {
+                var el = _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].createClass(questionType);
+                if (!!el)
+                    el.name = name;
+                return el;
+            };
+            _this.registerElement(questionType, creator);
+        };
     }
     ElementFactory.prototype.registerElement = function (elementType, elementCreator) {
         this.creatorHash[elementType] = elementCreator;
@@ -53775,13 +54082,12 @@ var ElementFactory = /** @class */ (function () {
     ElementFactory.prototype.unregisterElement = function (elementType, removeFromSerializer) {
         if (removeFromSerializer === void 0) { removeFromSerializer = false; }
         delete this.creatorHash[elementType];
-        QuestionFactory.Instance.unregisterElement(elementType);
         if (removeFromSerializer) {
             _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].removeClass(elementType);
         }
     };
     ElementFactory.prototype.getAllTypes = function () {
-        var result = QuestionFactory.Instance.getAllTypes();
+        var result = new Array();
         for (var key in this.creatorHash) {
             result.push(key);
         }
@@ -53789,9 +54095,9 @@ var ElementFactory = /** @class */ (function () {
     };
     ElementFactory.prototype.createElement = function (elementType, name) {
         var creator = this.creatorHash[elementType];
-        if (creator == null)
-            return QuestionFactory.Instance.createQuestion(elementType, name);
-        return creator(name);
+        if (!!creator)
+            return creator(name);
+        return null;
     };
     ElementFactory.Instance = new ElementFactory();
     return ElementFactory;
@@ -54152,12 +54458,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 +54646,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 +56187,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 })));
     };
@@ -57897,8 +58205,9 @@ var SurveyPanel = /** @class */ (function (_super) {
                 _this.panelBase.focusIn();
         };
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { ref: this.rootRef, className: this.panelBase.getContainerCss(), onFocus: focusIn, id: this.panelBase.id },
+            this.panel.showErrorsAbovePanel ? errors : null,
             header,
-            errors,
+            this.panel.showErrorsAbovePanel ? null : errors,
             content));
     };
     SurveyPanel.prototype.renderHeader = function () {
@@ -58260,7 +58569,8 @@ var Survey = /** @class */ (function (_super) {
         var rootCss = this.survey.getRootCss();
         var cssClasses = this.rootNodeClassName ? this.rootNodeClassName + " " + rootCss : rootCss;
         var rootStyle = {
-            backgroundImage: this.survey.renderBackgroundImage
+            backgroundImage: this.survey.renderBackgroundImage,
+            backgroundSize: this.survey.backgroundImageFit
         };
         var formStyle = {
             backgroundColor: this.survey.renderBackgroundOpacity
@@ -59909,7 +60219,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 +65356,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 +65371,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 +65505,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 +66386,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 +67760,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;
     };
@@ -71099,7 +71438,7 @@ var SurveyModel = /** @class */ (function (_super) {
             values[name] = this.getValue(name);
         }
         this.addCalculatedValuesIntoFilteredValues(values);
-        this.checkTriggers(values, true);
+        this.checkTriggers(values, true, isOnComplete);
     };
     SurveyModel.prototype.getCurrentPageQuestions = function (includeInvsible) {
         if (includeInvsible === void 0) { includeInvsible = false; }
@@ -72144,6 +72483,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,9 +73147,15 @@ 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);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
+    ], SurveyModel.prototype, "backgroundImageFit", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], SurveyModel.prototype, "rootCss", void 0);
@@ -73051,6 +73402,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("survey", [
     },
     "width",
     { name: "backgroundImage", serializationProperty: "locBackgroundImage", visible: false },
+    { name: "backgroundImageFit", default: "cover", choices: ["auto", "contain", "cover"], visible: false },
     { name: "backgroundOpacity:number", minValue: 0, maxValue: 1, default: 1, visible: false },
     { name: "showBrandInfo:boolean", default: false, visible: false }
 ]);