survey-react 1.10.2 → 1.10.3

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.10.2
+ * surveyjs - Survey JavaScript library v1.10.3
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -745,9 +745,9 @@ function createDropdownActionModelAdvanced(actionOptions, listOptions, popupOpti
     }, listOptions.allowSelection, listOptions.selectedItem);
     listModel.locOwner = locOwner;
     listModel.setOnFilterStringChangedCallback(listOptions.onFilterStringChangedCallback);
-    var innerPopupModel = new _popup__WEBPACK_IMPORTED_MODULE_4__["PopupModel"]("sv-list", { model: listModel }, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.verticalPosition, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.horizontalPosition, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.showPointer, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.isModal, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.onCancel, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.onApply, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.onHide, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.onShow, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.cssClass, popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.title, function () {
-        listModel.dispose();
-    });
+    var options = popupOptions || {};
+    options.onDispose = function () { listModel.dispose(); };
+    var innerPopupModel = new _popup__WEBPACK_IMPORTED_MODULE_4__["PopupModel"]("sv-list", { model: listModel }, options);
     innerPopupModel.displayMode = popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.displayMode;
     var newActionOptions = Object.assign({}, actionOptions, {
         component: "sv-action-bar-item-dropdown",
@@ -771,7 +771,6 @@ var BaseAction = /** @class */ (function (_super) {
     function BaseAction() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.rendredIdValue = BaseAction.getNextRendredId();
-        _this.iconSize = 24;
         return _this;
     }
     BaseAction.getNextRendredId = function () { return BaseAction.renderedId++; };
@@ -974,7 +973,7 @@ var BaseAction = /** @class */ (function (_super) {
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
     ], BaseAction.prototype, "iconName", void 0);
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: 24 })
     ], BaseAction.prototype, "iconSize", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
@@ -1848,6 +1847,8 @@ var Base = /** @class */ (function () {
          * A new value for the property.
          * - `options.oldValue`: `any`\
          * An old value of the property. If the property is an array, `oldValue` contains the same array as `newValue` does.
+         *
+         * If you need to add and remove property change event handlers dynamically, use the [`registerPropertyChangedHandlers`](#registerPropertyChangedHandlers) and [`unregisterPropertyChangedHandlers`](#unregisterPropertyChangedHandlers) methods instead.
          */
         this.onPropertyChanged = this.addEvent();
         /**
@@ -2418,9 +2419,11 @@ var Base = /** @class */ (function () {
         return res;
     };
     /**
-     * Registers a function to call when a property value changes.
+     * Registers a single value change handler for one or multiple properties.
+     *
+     * The `registerPropertyChangedHandlers` and [`unregisterPropertyChangedHandlers`](#unregisterPropertyChangedHandlers) methods allow you to manage property change event handlers dynamically. If you only need to attach an event handler without removing it afterwards, you can use the [`onPropertyChanged`](#onPropertyChanged) event instead.
      * @param propertyNames An array of one or multiple property names.
-     * @param handler A function to call when one of the listed properties change.
+     * @param handler A function to call when one of the listed properties change. Accepts a new property value as an argument.
      * @param key *(Optional)* A key that identifies the current registration. If a function for one of the properties is already registered with the same key, the function will be overwritten. You can also use the key to subsequently unregister handlers.
      * @see unregisterPropertyChangedHandlers
      */
@@ -6036,6 +6039,8 @@ var defaultV2Css = {
         selectWrapper: "sv-dropdown_select-wrapper",
         controlValue: "sd-dropdown__value",
         controlDisabled: "sd-input--disabled",
+        controlReadOnly: "sd-input--readonly",
+        controlPreview: "sd-input--preview",
         controlEmpty: "sd-dropdown--empty",
         filterStringInput: "sd-dropdown__filter-string-input",
         chevronButton: "sd-dropdown_chevron-button",
@@ -7365,17 +7370,12 @@ var DragDropDOMAdapter = /** @class */ (function () {
     DragDropDOMAdapter.prototype.getShortcutRightCoordinate = function (currentX, shortcutWidth, shortcutXOffset) {
         return currentX + shortcutWidth - shortcutXOffset;
     };
-    DragDropDOMAdapter.prototype.doScroll = function (clientY, clientX) {
+    DragDropDOMAdapter.prototype.requestAnimationFrame = function (callback) {
+        return requestAnimationFrame(callback);
+    };
+    DragDropDOMAdapter.prototype.scrollByDrag = function (scrollableParentNode, clientY, clientX) {
         var _this = this;
-        cancelAnimationFrame(this.scrollIntervalId);
         var startScrollBoundary = 100;
-        var displayProp = this.draggedElementShortcut.style.display;
-        //this.draggedElementShortcut.hidden = true;
-        this.draggedElementShortcut.style.display = "none";
-        var dragOverNode = this.documentOrShadowRoot.elementFromPoint(clientX, clientY);
-        //this.draggedElementShortcut.hidden = false;
-        this.draggedElementShortcut.style.display = displayProp || "block";
-        var scrollableParentNode = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_0__["findScrollableParent"])(dragOverNode);
         var top;
         var bottom;
         var left;
@@ -7393,21 +7393,36 @@ var DragDropDOMAdapter = /** @class */ (function () {
             right = scrollableParentNode.getBoundingClientRect().right;
         }
         var repeat = function () {
-            if (clientY - top <= startScrollBoundary) {
+            var isTop = clientY - top <= startScrollBoundary;
+            var isBottom = bottom - clientY <= startScrollBoundary;
+            var isLeft = clientX - left <= startScrollBoundary;
+            var isRight = right - clientX <= startScrollBoundary;
+            if (isTop && !isLeft && !isRight) {
                 scrollableParentNode.scrollTop -= 15;
             }
-            else if (bottom - clientY <= startScrollBoundary) {
+            else if (isBottom && !isLeft && !isRight) {
                 scrollableParentNode.scrollTop += 15;
             }
-            else if (right - clientX <= startScrollBoundary) {
+            else if (isRight && !isTop && !isBottom) {
                 scrollableParentNode.scrollLeft += 15;
             }
-            else if (clientX - left <= startScrollBoundary) {
+            else if (isLeft && !isTop && !isBottom) {
                 scrollableParentNode.scrollLeft -= 15;
             }
-            _this.scrollIntervalId = requestAnimationFrame(repeat);
+            _this.scrollIntervalId = _this.requestAnimationFrame(repeat);
         };
-        this.scrollIntervalId = requestAnimationFrame(repeat);
+        this.scrollIntervalId = this.requestAnimationFrame(repeat);
+    };
+    DragDropDOMAdapter.prototype.doScroll = function (clientY, clientX) {
+        cancelAnimationFrame(this.scrollIntervalId);
+        var displayProp = this.draggedElementShortcut.style.display;
+        //this.draggedElementShortcut.hidden = true;
+        this.draggedElementShortcut.style.display = "none";
+        var dragOverNode = this.documentOrShadowRoot.elementFromPoint(clientX, clientY);
+        //this.draggedElementShortcut.hidden = false;
+        this.draggedElementShortcut.style.display = displayProp || "block";
+        var scrollableParentNode = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_0__["findScrollableParent"])(dragOverNode);
+        this.scrollByDrag(scrollableParentNode, clientY, clientX);
     };
     DragDropDOMAdapter.prototype.doStartDrag = function (event, draggedElement, parentElement, draggedElementNode) {
         if (_utils_devices__WEBPACK_IMPORTED_MODULE_1__["IsTouch"]) {
@@ -7701,7 +7716,6 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
         if (!draggedElementShortcut)
             return;
         draggedElementShortcut.className = this.shortcutClass + " sv-ranking-shortcut";
-        draggedElementShortcut.style.cssText = " \n          cursor: grabbing;\n          position: absolute;\n          z-index: 10000;\n          border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));\n          min-width: 100px;\n          max-width: 400px;\n          box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));\n          background-color: var(--sjs-general-backcolor, var(--background, #fff));\n          font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));\n        ";
         var isDeepClone = true;
         var clone = draggedElementNode.cloneNode(isDeepClone);
         draggedElementShortcut.appendChild(clone);
@@ -8159,7 +8173,8 @@ var DropdownListModel = /** @class */ (function (_super) {
     };
     DropdownListModel.prototype.createPopup = function () {
         var _this = this;
-        this._popupModel = new _popup__WEBPACK_IMPORTED_MODULE_5__["PopupModel"]("sv-list", { model: this.listModel }, "bottom", "center", false);
+        var popupOptions = { verticalPosition: "bottom", horizontalPosition: "center", showPointer: false };
+        this._popupModel = new _popup__WEBPACK_IMPORTED_MODULE_5__["PopupModel"]("sv-list", { model: this.listModel }, popupOptions);
         this._popupModel.displayMode = _utils_devices__WEBPACK_IMPORTED_MODULE_9__["IsTouch"] ? "overlay" : "popup";
         this._popupModel.positionMode = "fixed";
         this._popupModel.isFocusedContainer = false;
@@ -8220,7 +8235,6 @@ var DropdownListModel = /** @class */ (function (_super) {
     DropdownListModel.prototype.onHidePopup = function () {
         this.resetFilterString();
         this.question.suggestedItem = null;
-        this.listModel.refresh();
     };
     DropdownListModel.prototype.getAvailableItems = function () {
         return this.question.visibleChoices;
@@ -9806,8 +9820,8 @@ __webpack_require__.r(__webpack_exports__);
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.10.2";
-ReleaseDate = "" + "2024-04-30";
+Version = "" + "1.10.3";
+ReleaseDate = "" + "2024-05-07";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -20441,10 +20455,18 @@ var JsonMetadata = /** @class */ (function () {
         return metaClass.getAllProperties();
     };
     JsonMetadata.prototype.getPropertiesByObj = function (obj) {
-        if (!obj || !obj.getType)
+        var type = !!obj && !!obj.getType ? obj.getType() : undefined;
+        if (!type)
             return [];
-        var props = this.getProperties(obj.getType());
+        var props = this.getProperties(type);
         var dynamicProps = this.getDynamicPropertiesByObj(obj);
+        for (var i = dynamicProps.length - 1; i >= 0; i--) {
+            if (this.findProperty(type, dynamicProps[i].name)) {
+                dynamicProps.splice(i, 1);
+            }
+        }
+        if (dynamicProps.length === 0)
+            return props;
         return [].concat(props).concat(dynamicProps);
     };
     JsonMetadata.prototype.addDynamicPropertiesIntoObj = function (dest, src, props) {
@@ -21155,7 +21177,7 @@ var JsonObject = /** @class */ (function () {
         this.removePosFromObj(value);
     };
     JsonObject.prototype.removePosFromObj = function (obj) {
-        if (!obj)
+        if (!obj || typeof obj.getType === "function")
             return;
         if (Array.isArray(obj)) {
             for (var i = 0; i < obj.length; i++) {
@@ -23652,7 +23674,7 @@ var englishStrings = {
     questionsProgressText: "Answered {0}/{1} questions",
     emptySurvey: "The survey doesn't contain any visible elements.",
     completingSurvey: "Thank you for completing the survey",
-    completingSurveyBefore: "Our records show that you have already completed this survey.",
+    completingSurveyBefore: "You have already completed this survey.",
     loadingSurvey: "Loading Survey...",
     placeholder: "Select...",
     ratingOptionsCaption: "Select...",
@@ -23702,7 +23724,7 @@ var englishStrings = {
     savingData: "The results are being saved on the server...",
     savingDataError: "An error occurred and we could not save the results.",
     savingDataSuccess: "The results were saved successfully!",
-    savingExceedSize: "Your response exceeds 64KB. Please reduce the size of your file(s) and try again or contact a survey owner.",
+    savingExceedSize: "Your response exceeds 64KB. Please reduce the size of your file(s) and try again or contact the survey owner.",
     saveAgainButton: "Try again",
     timerMin: "min",
     timerSec: "sec",
@@ -33475,7 +33497,7 @@ var PanelModelBase = /** @class */ (function (_super) {
         if (rec.result !== true)
             rec.result = false;
         this.hasErrorsCore(rec);
-        if (rec.firstErrorQuestion) {
+        if (rec.focuseOnFirstError && rec.firstErrorQuestion) {
             rec.firstErrorQuestion.focus(true);
         }
         return !rec.result;
@@ -37154,14 +37176,30 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _popup__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./popup */ "./src/popup.ts");
 /* harmony import */ var _popup_dropdown_view_model__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./popup-dropdown-view-model */ "./src/popup-dropdown-view-model.ts");
 /* harmony import */ var _popup_modal_view_model__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./popup-modal-view-model */ "./src/popup-modal-view-model.ts");
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 
 
 
 
 function createPopupModalViewModel(options, rootElement) {
     var _a;
-    var popupModel = new _popup__WEBPACK_IMPORTED_MODULE_1__["PopupModel"](options.componentName, options.data, "top", "left", false, true, options.onCancel, options.onApply, options.onHide, options.onShow, options.cssClass, options.title);
-    popupModel.displayMode = options.displayMode || "popup";
+    var popupOptions = __assign({}, options);
+    popupOptions.verticalPosition = "top";
+    popupOptions.horizontalPosition = "left";
+    popupOptions.showPointer = false;
+    popupOptions.isModal = true;
+    popupOptions.displayMode = options.displayMode || "popup";
+    var popupModel = new _popup__WEBPACK_IMPORTED_MODULE_1__["PopupModel"](options.componentName, options.data, popupOptions);
     popupModel.isFocusedContent = (_a = options.isFocusedContent) !== null && _a !== void 0 ? _a : true;
     var popupViewModel = new _popup_modal_view_model__WEBPACK_IMPORTED_MODULE_3__["PopupModalViewModel"](popupModel);
     if (!!rootElement && !!rootElement.appendChild) {
@@ -37665,36 +37703,29 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 var PopupModel = /** @class */ (function (_super) {
     __extends(PopupModel, _super);
-    function PopupModel(contentComponentName, contentComponentData, verticalPosition, horizontalPosition, showPointer, isModal, onCancel, onApply, onHide, onShow, cssClass, title, onDispose) {
-        if (verticalPosition === void 0) { verticalPosition = "bottom"; }
-        if (horizontalPosition === void 0) { horizontalPosition = "left"; }
-        if (showPointer === void 0) { showPointer = true; }
-        if (isModal === void 0) { isModal = false; }
-        if (onCancel === void 0) { onCancel = function () { }; }
-        if (onApply === void 0) { onApply = function () { return true; }; }
-        if (onHide === void 0) { onHide = function () { }; }
-        if (onShow === void 0) { onShow = function () { }; }
-        if (cssClass === void 0) { cssClass = ""; }
-        if (title === void 0) { title = ""; }
-        if (onDispose === void 0) { onDispose = function () { }; }
+    function PopupModel(contentComponentName, contentComponentData, option1, option2) {
         var _this = _super.call(this) || this;
-        _this.onDispose = onDispose;
         _this.focusFirstInputSelector = "";
+        _this.onCancel = function () { };
+        _this.onApply = function () { return true; };
+        _this.onHide = function () { };
+        _this.onShow = function () { };
+        _this.onDispose = function () { };
         _this.onVisibilityChanged = _this.addEvent();
         _this.onFooterActionsCreated = _this.addEvent();
         _this.onRecalculatePosition = _this.addEvent();
         _this.contentComponentName = contentComponentName;
         _this.contentComponentData = contentComponentData;
-        _this.verticalPosition = verticalPosition;
-        _this.horizontalPosition = horizontalPosition;
-        _this.showPointer = showPointer;
-        _this.isModal = isModal;
-        _this.onCancel = onCancel;
-        _this.onApply = onApply;
-        _this.onHide = onHide;
-        _this.onShow = onShow;
-        _this.cssClass = cssClass;
-        _this.title = title;
+        if (!!option1 && typeof option1 === "string") {
+            _this.verticalPosition = option1;
+            _this.horizontalPosition = option2;
+        }
+        else if (!!option1) {
+            var popupOptions = option1;
+            for (var key in popupOptions) {
+                _this[key] = popupOptions[key];
+            }
+        }
         return _this;
     }
     PopupModel.prototype.refreshInnerModel = function () {
@@ -37750,7 +37781,7 @@ var PopupModel = /** @class */ (function (_super) {
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: "left" })
     ], PopupModel.prototype, "horizontalPosition", void 0);
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: false })
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: true })
     ], PopupModel.prototype, "showPointer", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: false })
@@ -37761,18 +37792,6 @@ var PopupModel = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: true })
     ], PopupModel.prototype, "isFocusedContainer", void 0);
-    __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: function () { } })
-    ], PopupModel.prototype, "onCancel", void 0);
-    __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: function () { return true; } })
-    ], PopupModel.prototype, "onApply", void 0);
-    __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: function () { } })
-    ], PopupModel.prototype, "onHide", void 0);
-    __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: function () { } })
-    ], PopupModel.prototype, "onShow", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: "" })
     ], PopupModel.prototype, "cssClass", void 0);
@@ -40931,7 +40950,6 @@ var Question = /** @class */ (function (_super) {
     };
     Question.prototype.isDefaultRendering = function () {
         return (!!this.customWidget ||
-            this.renderAs === "default" ||
             this.getComponentName() === "default");
     };
     //ISurveyErrorOwner
@@ -41755,7 +41773,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         return "itemvalue";
     };
     QuestionSelectBase.prototype.createItemValue = function (value, text) {
-        var res = _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].createClass(this.getItemValueType(), value);
+        var res = _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].createClass(this.getItemValueType(), { value: value });
         res.locOwner = this;
         if (!!text)
             res.text = text;
@@ -42209,7 +42227,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     QuestionSelectBase.prototype.canSurveyChangeItemVisibility = function () {
         return !!this.survey && this.survey.canChangeChoiceItemsVisibility();
     };
-    QuestionSelectBase.prototype.changeItemVisisbility = function () {
+    QuestionSelectBase.prototype.changeItemVisibility = function () {
         var _this = this;
         return this.canSurveyChangeItemVisibility() ?
             function (item, val) { return _this.survey.getChoiceItemVisibility(_this, item, val); }
@@ -42217,7 +42235,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     };
     QuestionSelectBase.prototype.runConditionsForItems = function (values, properties) {
         this.filteredChoicesValue = [];
-        var calcVisibility = this.changeItemVisisbility();
+        var calcVisibility = this.changeItemVisibility();
         return _itemvalue__WEBPACK_IMPORTED_MODULE_3__["ItemValue"].runConditionsForItems(this.activeChoices, this.getFilteredChoices(), this.areInvisibleElementsShowing
             ? null
             : this.conditionChoicesVisibleIfRunner, values, properties, !this.survey || !this.survey.areInvisibleElementsShowing, function (item, val) {
@@ -42875,7 +42893,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     QuestionSelectBase.prototype.canShowOptionItem = function (item, isAddAll, hasItem) {
         var res = (isAddAll && (!!this.canShowOptionItemCallback ? this.canShowOptionItemCallback(item) : true)) || hasItem;
         if (this.canSurveyChangeItemVisibility()) {
-            var calc = this.changeItemVisisbility();
+            var calc = this.changeItemVisibility();
             return calc(item, res);
         }
         return res;
@@ -43423,8 +43441,8 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         var superVal = _super.prototype.isVisibleCore.call(this);
         if (!this.hideIfChoicesEmpty || !superVal)
             return superVal;
-        var filteredChoices = this.getFilteredChoices();
-        return !filteredChoices || filteredChoices.length > 0;
+        var choices = this.isUsingCarryForward ? this.visibleChoices : this.getFilteredChoices();
+        return !choices || choices.length > 0;
     };
     QuestionSelectBase.prototype.sortVisibleChoices = function (array) {
         if (this.isDesignMode)
@@ -44144,6 +44162,7 @@ var QuestionBooleanModel = /** @class */ (function (_super) {
             this.value = val == true ? this.getValueTrue() : this.getValueFalse();
             this.booleanValueRendered = val;
         }
+        this.updateThumbMargin();
     };
     Object.defineProperty(QuestionBooleanModel.prototype, "defaultValue", {
         get: function () {
@@ -44183,6 +44202,27 @@ var QuestionBooleanModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionBooleanModel.prototype.updateThumbMargin = function () {
+        var _this = this;
+        if (!this.isIndeterminate && this.leftAnswerElement) {
+            if (!this.swapOrder && this.value === this.getValueTrue() || this.swapOrder && this.value === this.getValueFalse()) {
+                var el_1 = this.leftAnswerElement;
+                setTimeout(function () {
+                    _this.thumbMargin = el_1.clientWidth + (_this.swapOrder ? 4 : 2) + "px";
+                }, 50);
+            }
+        }
+        this.thumbMargin = undefined;
+    };
+    QuestionBooleanModel.prototype.afterRender = function (el) {
+        _super.prototype.afterRender.call(this, el);
+        this.leftAnswerElement = el.querySelectorAll("." + this.cssClasses.sliderGhost)[0];
+        this.updateThumbMargin();
+    };
+    QuestionBooleanModel.prototype.beforeDestroyQuestionElement = function (el) {
+        _super.prototype.beforeDestroyQuestionElement.call(this, el);
+        this.leftAnswerElement = undefined;
+    };
     Object.defineProperty(QuestionBooleanModel.prototype, "isLabelRendered", {
         get: function () {
             return this.titleLocation === "hidden";
@@ -44453,6 +44493,12 @@ var QuestionBooleanModel = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], QuestionBooleanModel.prototype, "booleanValueRendered", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
+    ], QuestionBooleanModel.prototype, "leftAnswerElement", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
+    ], QuestionBooleanModel.prototype, "thumbMargin", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], QuestionBooleanModel.prototype, "showTitle", void 0);
@@ -45386,7 +45432,7 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
     QuestionCheckboxModel.prototype.getConditionJson = function (operator, path) {
         if (operator === void 0) { operator = null; }
         if (path === void 0) { path = null; }
-        var json = _super.prototype.getConditionJson.call(this);
+        var json = _super.prototype.getConditionJson.call(this, operator, path);
         if (operator == "contains" || operator == "notcontains") {
             json["type"] = "radiogroup";
         }
@@ -51145,7 +51191,7 @@ var QuestionMatrixModel = /** @class */ (function (_super) {
         if (operator === void 0) { operator = null; }
         if (path === void 0) { path = null; }
         if (!path)
-            return _super.prototype.getConditionJson.call(this);
+            return _super.prototype.getConditionJson.call(this, operator);
         var question = new _question_dropdown__WEBPACK_IMPORTED_MODULE_9__["QuestionDropdownModel"](path);
         question.choices = this.columns;
         var json = new _jsonobject__WEBPACK_IMPORTED_MODULE_3__["JsonObject"]().toJsonObject(question);
@@ -52982,7 +53028,7 @@ var QuestionMatrixDropdownModelBase = /** @class */ (function (_super) {
         if (operator === void 0) { operator = null; }
         if (path === void 0) { path = null; }
         if (!path)
-            return _super.prototype.getConditionJson.call(this);
+            return _super.prototype.getConditionJson.call(this, operator);
         var columnName = "";
         for (var i = path.length - 1; i >= 0; i--) {
             if (path[i] == ".")
@@ -58407,7 +58453,7 @@ var QuestionMultipleTextModel = /** @class */ (function (_super) {
         if (operator === void 0) { operator = null; }
         if (path === void 0) { path = null; }
         if (!path)
-            return _super.prototype.getConditionJson.call(this);
+            return _super.prototype.getConditionJson.call(this, operator);
         var item = this.getItemByName(path);
         if (!item)
             return null;
@@ -59666,14 +59712,23 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     });
     QuestionPanelDynamicModel.prototype.getPanelsAnimationOptions = function () {
         var _this = this;
-        var getDirection = function () {
+        var getDirectionCssClass = function () {
             if (_this.isRenderModeList)
                 return "";
+            var cssClass = new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__["CssClassBuilder"]();
+            var isRemoving = false;
             var leavingPanel = _this.renderedPanels.filter(function (el) { return el !== _this.currentPanel; })[0];
             var leavingPanelIndex = _this.visiblePanels.indexOf(leavingPanel);
-            if (leavingPanelIndex < 0)
+            if (leavingPanelIndex < 0) {
+                isRemoving = true;
                 leavingPanelIndex = _this.removedPanelIndex;
-            return leavingPanelIndex > _this.currentIndex ? "-right" : "-left";
+            }
+            return cssClass
+                .append("sv-pd-animation-adding", !!_this.focusNewPanelCallback)
+                .append("sv-pd-animation-removing", isRemoving)
+                .append("sv-pd-animation-left", leavingPanelIndex <= _this.currentIndex)
+                .append("sv-pd-animation-right", leavingPanelIndex > _this.currentIndex)
+                .toString();
         };
         return {
             getAnimatedElement: function (panel) {
@@ -59684,7 +59739,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
                 }
             },
             getEnterOptions: function () {
-                var cssClass = _this.cssClasses.panelWrapperFadeIn ? "" + _this.cssClasses.panelWrapperFadeIn + getDirection() : "";
+                var cssClass = new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__["CssClassBuilder"]().append(_this.cssClasses.panelWrapperFadeIn).append(getDirectionCssClass()).toString();
                 return {
                     onBeforeRunAnimation: function (el) {
                         var _a;
@@ -59703,7 +59758,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
                 };
             },
             getLeaveOptions: function () {
-                var cssClass = _this.cssClasses.panelWrapperFadeOut ? "" + _this.cssClasses.panelWrapperFadeOut + getDirection() : "";
+                var cssClass = new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__["CssClassBuilder"]().append(_this.cssClasses.panelWrapperFadeOut).append(getDirectionCssClass()).toString();
                 return {
                     onBeforeRunAnimation: function (el) {
                         var _a;
@@ -60883,7 +60938,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         if (operator === void 0) { operator = null; }
         if (path === void 0) { path = null; }
         if (!path)
-            return _super.prototype.getConditionJson.call(this, operator, path);
+            return _super.prototype.getConditionJson.call(this, operator);
         var questionName = path;
         var pos = path.indexOf(".");
         if (pos > -1) {
@@ -61992,6 +62047,13 @@ var QuestionRadiogroupModel = /** @class */ (function (_super) {
     QuestionRadiogroupModel.prototype.supportGoNextPageAutomatic = function () {
         return this.isMouseDown === true && !this.isOtherSelected;
     };
+    QuestionRadiogroupModel.prototype.getConditionJson = function (operator, path) {
+        if (operator === void 0) { operator = null; }
+        if (path === void 0) { path = null; }
+        var json = _super.prototype.getConditionJson.call(this, operator, path);
+        delete json["showClearButton"];
+        return json;
+    };
     QuestionRadiogroupModel.prototype.setNewComment = function (newValue) {
         this.isMouseDown = true;
         _super.prototype.setNewComment.call(this, newValue);
@@ -63653,7 +63715,9 @@ var QuestionRatingModel = /** @class */ (function (_super) {
             .append(this.cssClasses.control)
             .append(this.cssClasses.controlEmpty, this.isEmpty())
             .append(this.cssClasses.onError, this.hasCssError())
-            .append(this.cssClasses.controlDisabled, this.isReadOnly)
+            .append(this.cssClasses.controlDisabled, this.isDisabledStyle)
+            .append(this.cssClasses.controlReadOnly, this.isReadOnlyStyle)
+            .append(this.cssClasses.controlPreview, this.isPreviewStyle)
             .toString();
     };
     Object.defineProperty(QuestionRatingModel.prototype, "placeholder", {
@@ -64628,7 +64692,14 @@ var QuestionTagboxModel = /** @class */ (function (_super) {
     };
     QuestionTagboxModel.prototype.onSurveyLoad = function () {
         _super.prototype.onSurveyLoad.call(this);
-        if (!this.dropdownListModel) {
+        this.createDropdownListModel();
+    };
+    QuestionTagboxModel.prototype.onSetData = function () {
+        _super.prototype.onSetData.call(this);
+        this.createDropdownListModel();
+    };
+    QuestionTagboxModel.prototype.createDropdownListModel = function () {
+        if (!this.dropdownListModel && !this.isLoadingFromJson) {
             this.dropdownListModel = new _dropdownMultiSelectListModel__WEBPACK_IMPORTED_MODULE_4__["DropdownMultiSelectListModel"](this);
         }
     };
@@ -66553,7 +66624,7 @@ var SurveyQuestionBoolean = /** @class */ (function (_super) {
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.sliderGhost, onClick: function (event) { return _this.handleOnLabelClick(event, _this.question.swapOrder); } },
                     react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: this.question.getLabelCss(this.question.swapOrder) }, this.renderLocString(this.question.locLabelLeft))),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.switch, onClick: this.handleOnSwitchClick },
-                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: cssClasses.slider }, this.question.isDeterminated && cssClasses.sliderText ?
+                    react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: cssClasses.slider, style: { marginLeft: this.question.thumbMargin } }, this.question.isDeterminated && cssClasses.sliderText ?
                         react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", { className: cssClasses.sliderText }, this.renderLocString(this.question.getCheckedLabel()))
                         : null)),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.sliderGhost, onClick: function (event) { return _this.handleOnLabelClick(event, !_this.question.swapOrder); } },
@@ -76501,20 +76572,34 @@ __webpack_require__.r(__webpack_exports__);
 var RendererFactory = /** @class */ (function () {
     function RendererFactory() {
         this.renderersHash = {};
+        this.defaultHash = {};
     }
     RendererFactory.prototype.unregisterRenderer = function (questionType, rendererAs) {
         delete this.renderersHash[questionType][rendererAs];
+        if (this.defaultHash[questionType] === rendererAs) {
+            delete this.defaultHash[questionType];
+        }
     };
-    RendererFactory.prototype.registerRenderer = function (questionType, renderAs, renderer) {
+    RendererFactory.prototype.registerRenderer = function (questionType, renderAs, renderer, useAsDefault) {
+        if (useAsDefault === void 0) { useAsDefault = false; }
         if (!this.renderersHash[questionType]) {
             this.renderersHash[questionType] = {};
         }
         this.renderersHash[questionType][renderAs] = renderer;
+        if (useAsDefault) {
+            this.defaultHash[questionType] = renderAs;
+        }
     };
     RendererFactory.prototype.getRenderer = function (questionType, renderAs) {
-        return ((this.renderersHash[questionType] &&
-            this.renderersHash[questionType][renderAs]) ||
-            "default");
+        var qHash = this.renderersHash[questionType];
+        if (!!qHash) {
+            if (!!renderAs && qHash[renderAs])
+                return qHash[renderAs];
+            var dVal = this.defaultHash[questionType];
+            if (!!dVal && qHash[dVal])
+                return qHash[dVal];
+        }
+        return "default";
     };
     RendererFactory.prototype.getRendererByQuestion = function (question) {
         return this.getRenderer(question.getType(), question.renderAs);
@@ -89585,10 +89670,15 @@ var AnimationUtils = /** @class */ (function () {
             options.onBeforeRunAnimation && options.onBeforeRunAnimation(element);
         }
     };
+    AnimationUtils.prototype.getCssClasses = function (options) {
+        return options.cssClass.replace(/\s+$/, "").split(/\s+/);
+    };
     AnimationUtils.prototype.runAnimation = function (element, options, callback) {
         if (element && options.cssClass) {
             this.reflow(element);
-            element.classList.add(options.cssClass);
+            this.getCssClasses(options).forEach(function (cssClass) {
+                element.classList.add(cssClass);
+            });
             this.onAnimationEnd(element, callback, options);
         }
         else {
@@ -89597,7 +89687,9 @@ var AnimationUtils = /** @class */ (function () {
     };
     AnimationUtils.prototype.clearHtmlElement = function (element, options) {
         if (element && options.cssClass) {
-            element.classList.remove(options.cssClass);
+            this.getCssClasses(options).forEach(function (cssClass) {
+                element.classList.remove(cssClass);
+            });
         }
     };
     AnimationUtils.prototype.onNextRender = function (callback, runEarly, isCancel) {