survey-react 1.10.2 → 1.10.4

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.10.2
+ * surveyjs - Survey JavaScript library v1.10.4
  * 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
      */
@@ -3967,13 +3970,18 @@ var ProcessValue = /** @class */ (function () {
     };
     ProcessValue.prototype.isAnyKeyChanged = function (keys, usedNames) {
         for (var i = 0; i < usedNames.length; i++) {
-            var name = usedNames[i];
-            if (keys.hasOwnProperty(name))
+            var name_1 = usedNames[i];
+            if (!name_1)
+                continue;
+            var lowerName = name_1.toLowerCase();
+            if (keys.hasOwnProperty(name_1))
                 return true;
-            var firstName = this.getFirstName(name);
+            if (name_1 !== lowerName && keys.hasOwnProperty(lowerName))
+                return true;
+            var firstName = this.getFirstName(name_1);
             if (!keys.hasOwnProperty(firstName))
                 continue;
-            if (name === firstName)
+            if (name_1 === firstName)
                 return true;
             var keyValue = keys[firstName];
             if (keyValue == undefined)
@@ -3983,9 +3991,9 @@ var ProcessValue = /** @class */ (function () {
                 return true;
             var v = {};
             v[firstName] = keyValue["oldValue"];
-            var oldValue = this.getValue(name, v);
+            var oldValue = this.getValue(name_1, v);
             v[firstName] = keyValue["newValue"];
-            var newValue = this.getValue(name, v);
+            var newValue = this.getValue(name_1, v);
             if (!_helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].isTwoValueEquals(oldValue, newValue, false, false, false))
                 return true;
         }
@@ -6036,6 +6044,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",
@@ -7310,10 +7320,9 @@ var DragDropDOMAdapter = /** @class */ (function () {
         var pageY = event.pageY;
         var clientX = event.clientX;
         var clientY = event.clientY;
-        if (!!this.fitToContainer) {
-            rootElementX -= rootElementScrollLeft;
-            rootElementY -= rootElementScrollTop;
-        }
+        //https://github.com/surveyjs/survey-creator/issues/5484
+        rootElementX -= rootElementScrollLeft;
+        rootElementY -= rootElementScrollTop;
         var shortcutBottomCoordinate = this.getShortcutBottomCoordinate(clientY, shortcutHeight, shortcutYOffset);
         var shortcutRightCoordinate = this.getShortcutRightCoordinate(clientX, shortcutWidth, shortcutXOffset);
         if (shortcutRightCoordinate >= documentRight) { // right boundary
@@ -7365,17 +7374,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 +7397,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 +7720,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 +8177,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 +8239,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 +9824,8 @@ __webpack_require__.r(__webpack_exports__);
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.10.2";
-ReleaseDate = "" + "2024-04-30";
+Version = "" + "1.10.4";
+ReleaseDate = "" + "2024-05-15";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -16517,6 +16535,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./helpers */ "./src/helpers.ts");
 /* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./settings */ "./src/settings.ts");
 /* harmony import */ var _console_warnings__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./console-warnings */ "./src/console-warnings.ts");
+/* harmony import */ var _conditions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./conditions */ "./src/conditions.ts");
+
 
 
 
@@ -16639,7 +16659,7 @@ function avg(params) {
 }
 FunctionFactory.Instance.register("avg", avg);
 function getInArrayParams(params) {
-    if (params.length != 2)
+    if (params.length < 2 || params.length > 3)
         return null;
     var arr = params[0];
     if (!arr)
@@ -16649,16 +16669,22 @@ function getInArrayParams(params) {
     var name = params[1];
     if (typeof name !== "string" && !(name instanceof String))
         return null;
-    return { data: arr, name: name };
+    var expression = params.length === 3 ? params[2] : undefined;
+    if (typeof expression !== "string" && !(expression instanceof String)) {
+        expression = undefined;
+    }
+    return { data: arr, name: name, expression: expression };
 }
 function convertToNumber(val) {
     if (typeof val === "string")
         return _helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].isNumber(val) ? _helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].getNumber(val) : undefined;
     return val;
 }
-function processItemInArray(item, name, res, func, needToConvert) {
+function processItemInArray(item, name, res, func, needToConvert, condition) {
     if (!item || _helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].isValueEmpty(item[name]))
         return res;
+    if (condition && !condition.run(item))
+        return res;
     var val = needToConvert ? convertToNumber(item[name]) : 1;
     return func(res, val);
 }
@@ -16667,15 +16693,19 @@ function calcInArray(params, func, needToConvert) {
     var v = getInArrayParams(params);
     if (!v)
         return undefined;
+    var condition = !!v.expression ? new _conditions__WEBPACK_IMPORTED_MODULE_3__["ConditionRunner"](v.expression) : undefined;
+    if (condition && condition.isAsync) {
+        condition = undefined;
+    }
     var res = undefined;
     if (Array.isArray(v.data)) {
         for (var i = 0; i < v.data.length; i++) {
-            res = processItemInArray(v.data[i], v.name, res, func, needToConvert);
+            res = processItemInArray(v.data[i], v.name, res, func, needToConvert, condition);
         }
     }
     else {
         for (var key in v.data) {
-            res = processItemInArray(v.data[key], v.name, res, func, needToConvert);
+            res = processItemInArray(v.data[key], v.name, res, func, needToConvert, condition);
         }
     }
     return res;
@@ -20441,10 +20471,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 +21193,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 +23690,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 +23740,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",
@@ -31445,6 +31483,9 @@ var InputMaskNumeric = /** @class */ (function (_super) {
         }
         return result;
     };
+    InputMaskNumeric.prototype.numericalCompositionIsEmpty = function (number) {
+        return !number.integralPart && !number.fractionalPart;
+    };
     InputMaskNumeric.prototype.displayNumber = function (parsedNumber, insertThousandsSeparator, matchWholeMask) {
         if (insertThousandsSeparator === void 0) { insertThousandsSeparator = true; }
         if (matchWholeMask === void 0) { matchWholeMask = false; }
@@ -31549,6 +31590,8 @@ var InputMaskNumeric = /** @class */ (function (_super) {
     };
     InputMaskNumeric.prototype.getNumberUnmaskedValue = function (str) {
         var parsedNumber = this.parseNumber(str);
+        if (this.numericalCompositionIsEmpty(parsedNumber))
+            return undefined;
         return this.convertNumber(parsedNumber);
     };
     InputMaskNumeric.prototype.getTextAlignment = function () {
@@ -33475,7 +33518,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 +37197,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 +37724,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 +37802,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 +37813,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 +40971,6 @@ var Question = /** @class */ (function (_super) {
     };
     Question.prototype.isDefaultRendering = function () {
         return (!!this.customWidget ||
-            this.renderAs === "default" ||
             this.getComponentName() === "default");
     };
     //ISurveyErrorOwner
@@ -41755,7 +41794,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 +42248,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 +42256,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 +42914,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;
@@ -42972,7 +43011,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
                 }
             }
         }
-        return strs.join(", ");
+        return strs.join(_settings__WEBPACK_IMPORTED_MODULE_9__["settings"].choicesSeparator);
     };
     QuestionSelectBase.prototype.getItemDisplayValue = function (item, val) {
         if (item === this.otherItem) {
@@ -43423,8 +43462,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 +44183,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 +44223,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 +44514,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 +45453,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";
         }
@@ -48425,7 +48492,7 @@ var QuestionFileModel = /** @class */ (function (_super) {
         _super.prototype.updateElementCssCore.call(this, cssClasses);
         this.prevFileAction.iconName = this.cssClasses.leftIconId;
         this.nextFileAction.iconName = this.cssClasses.rightIconId;
-        //this.mobileFileNavigator.cssClasses = this.survey.getCss().actionBar;
+        this.updateCurrentMode();
     };
     QuestionFileModel.prototype.getFileIndexCaption = function () {
         return this.getLocalizationFormatString("indexText", this.indexToShow + 1, this.pagesCount);
@@ -49067,11 +49134,6 @@ var QuestionFileModel = /** @class */ (function (_super) {
         this.actionsContainer.containerCss = classes.actionsContainer;
         return classes;
     };
-    //todo remove in v2
-    QuestionFileModel.prototype.updateElementCss = function (reNew) {
-        _super.prototype.updateElementCss.call(this, reNew);
-        this.updateCurrentMode();
-    };
     QuestionFileModel.prototype.onSurveyLoad = function () {
         _super.prototype.onSurveyLoad.call(this);
         this.updateCurrentMode();
@@ -49477,7 +49539,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
-var youtubeTags = ["youtube.com", "youtu.be"];
+var youtubeDomains = ["www.youtube.com", "m.youtube.com", "youtube.com", "youtu.be"];
 var videoSuffics = [".mp4", ".mov", ".wmv", ".flv", ".avi", ".mkv"];
 var youtubeUrl = "https://www.youtube.com/";
 var youtubeEmbed = "embed";
@@ -49485,8 +49547,9 @@ function isUrlYoutubeVideo(url) {
     if (!url)
         return false;
     url = url.toLowerCase();
-    for (var i = 0; i < youtubeTags.length; i++) {
-        if (url.indexOf(youtubeTags[i]) !== -1)
+    url = url.replace(/^https?:\/\//, "");
+    for (var i = 0; i < youtubeDomains.length; i++) {
+        if (url.indexOf(youtubeDomains[i] + "/") === 0)
             return true;
     }
     return false;
@@ -49502,7 +49565,7 @@ var QuestionImageModel = /** @class */ (function (_super) {
         var _this = _super.call(this, name) || this;
         var locImageLink = _this.createLocalizableString("imageLink", _this, false);
         locImageLink.onGetTextCallback = function (text) {
-            return getCorrectImageLink(text);
+            return getCorrectImageLink(text, _this.contentMode == "youtube");
         };
         _this.createLocalizableString("altText", _this, false);
         _this.registerPropertyChangedHandlers(["contentMode", "imageLink"], function () { return _this.calculateRenderedMode(); });
@@ -49734,9 +49797,10 @@ var QuestionImageModel = /** @class */ (function (_super) {
     return QuestionImageModel;
 }(_questionnonvalue__WEBPACK_IMPORTED_MODULE_0__["QuestionNonValue"]));
 
-function getCorrectImageLink(val) {
+function getCorrectImageLink(val, isYouTube) {
     if (!val || !isUrlYoutubeVideo(val))
-        return val;
+        return isYouTube ? "" : val;
+    //if(!val || !isUrlYoutubeVideo(val)) return val;
     var res = val.toLocaleLowerCase();
     if (res.indexOf(youtubeEmbed) > -1)
         return val;
@@ -51145,7 +51209,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 +53046,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] == ".")
@@ -54433,9 +54497,9 @@ var MatrixDropdownColumn = /** @class */ (function (_super) {
          * @see isRequired
          * @see readOnly
          */
-        get: function () { return this.getPropertyValue("visible"); },
+        get: function () { return this.templateQuestion.visible; },
         set: function (val) {
-            this.setPropertyValue("visible", val);
+            this.templateQuestion.visible = val;
         },
         enumerable: false,
         configurable: true
@@ -56483,7 +56547,7 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
     QuestionMatrixDropdownRenderedTable.prototype.getMultipleColumnChoices = function (column) {
         var choices = column.templateQuestion.choices;
         if (!!choices && Array.isArray(choices) && choices.length == 0)
-            return this.matrix.choices;
+            return [].concat(this.matrix.choices, column.getVisibleMultipleChoices());
         choices = column.getVisibleMultipleChoices();
         if (!choices || !Array.isArray(choices))
             return null;
@@ -56663,11 +56727,11 @@ var QuestionMatrixDynamicModel = /** @class */ (function (_super) {
     function QuestionMatrixDynamicModel(name) {
         var _this = _super.call(this, name) || this;
         _this.rowCounter = 0;
-        _this.initialRowCount = 2;
         _this.setRowCountValueFromData = false;
         _this.startDragMatrixRow = function (event, currentTarget) {
             _this.dragDropMatrixRows.startDrag(event, _this.draggedRow, _this, event.target);
         };
+        _this.initialRowCount = _this.getDefaultPropertyValue("rowCount");
         _this.createLocalizableString("confirmDeleteText", _this, false, "confirmDelete");
         var locAddRowText = _this.createLocalizableString("addRowText", _this);
         locAddRowText.onGetTextCallback = function (text) {
@@ -57544,6 +57608,12 @@ var QuestionMatrixDynamicModel = /** @class */ (function (_super) {
         this.setPropertyValueDirectly("rowCount", val.length);
         return true;
     };
+    QuestionMatrixDynamicModel.prototype.updateValueFromSurvey = function (newValue, clearData) {
+        if (clearData === void 0) { clearData = false; }
+        this.setRowCountValueFromData = true;
+        _super.prototype.updateValueFromSurvey.call(this, newValue, clearData);
+        this.setRowCountValueFromData = false;
+    };
     QuestionMatrixDynamicModel.prototype.onBeforeValueChanged = function (val) {
         if (!val || !Array.isArray(val))
             return;
@@ -58407,7 +58477,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 +59736,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 +59763,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 +59782,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 +60962,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 +62071,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);
@@ -62961,6 +63047,9 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         _this.registerFunctionOnPropertiesValueChanged(["rateColorMode", "scaleColorMode"], function () {
             _this.updateColors(_this.survey.themeVariables);
         });
+        _this.registerFunctionOnPropertiesValueChanged(["displayMode"], function () {
+            _this.updateRenderAsBasedOnDisplayMode(true);
+        });
         _this.registerSychProperties(["autoGenerate"], function () {
             if (!_this.autoGenerate && _this.rateValues.length === 0) {
                 _this.setPropertyValue("rateValues", _this.visibleRateValues);
@@ -63376,6 +63465,27 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionRatingModel.prototype.updateRenderAsBasedOnDisplayMode = function (isOnChange) {
+        if (this.isDesignMode) {
+            if (isOnChange || this.renderAs === "dropdown") {
+                this.renderAs = "default";
+            }
+        }
+        else {
+            if (isOnChange || this.displayMode !== "auto") {
+                this.renderAs = this.displayMode === "dropdown" ? "dropdown" : "default";
+            }
+        }
+    };
+    QuestionRatingModel.prototype.onSurveyLoad = function () {
+        _super.prototype.onSurveyLoad.call(this);
+        if (this.renderAs === "dropdown" && this.displayMode === "auto") {
+            this.displayMode = this.renderAs;
+        }
+        else {
+            this.updateRenderAsBasedOnDisplayMode();
+        }
+    };
     Object.defineProperty(QuestionRatingModel.prototype, "rateDisplayMode", {
         get: function () {
             return this.rateType;
@@ -63653,7 +63763,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", {
@@ -63783,6 +63895,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         if (!this.survey)
             return;
         this.updateColors(this.survey.themeVariables);
+        this.updateRenderAsBasedOnDisplayMode();
     };
     QuestionRatingModel.prototype.dispose = function () {
         _super.prototype.dispose.call(this);
@@ -63813,18 +63926,7 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
     ], QuestionRatingModel.prototype, "displayRateDescriptionsAsExtremeItems", void 0);
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({
-            onSet: function (val, target) {
-                if (!target.isDesignMode) {
-                    if (val === "dropdown") {
-                        target.renderAs = "dropdown";
-                    }
-                    else {
-                        target.renderAs = "default";
-                    }
-                }
-            }
-        })
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
     ], QuestionRatingModel.prototype, "displayMode", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
@@ -64628,7 +64730,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 +66662,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 +76610,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);
@@ -76930,6 +77053,7 @@ var settings = {
      * A separator used in a shorthand notation that specifies a value and display text for an [`ItemValue`](https://surveyjs.io/form-library/documentation/api-reference/itemvalue) object: `"value|text"`.
      *
      * Default value: `"|"`
+     * @see [settings.choicesSeparator](https://surveyjs.io/form-library/documentation/api-reference/settings#choicesSeparator)
      */
     itemValueSeparator: "|",
     /**
@@ -77084,6 +77208,13 @@ var settings = {
         dontKnowItem: [3],
         otherItem: [4]
     },
+    /**
+     * One or several characters used to separate choice options in a list.
+     *
+     * Default value: `", "`
+     * @see [settings.itemValueSeparator](https://surveyjs.io/form-library/documentation/api-reference/settings#itemValueSeparator)
+     */
+    choicesSeparator: ", ",
     /**
      * A list of supported validators by question type.
      */
@@ -79076,7 +79207,7 @@ var SurveyElement = /** @class */ (function (_super) {
         configurable: true
     });
     SurveyElement.prototype.getIsAnimationAllowed = function () {
-        return _super.prototype.getIsAnimationAllowed.call(this) && !!this.survey;
+        return _super.prototype.getIsAnimationAllowed.call(this) && !!this.survey && !this.survey["isEndLoadingFromJson"];
     };
     SurveyElement.prototype.dispose = function () {
         _super.prototype.dispose.call(this);
@@ -86126,14 +86257,20 @@ var SurveyModel = /** @class */ (function (_super) {
     SurveyModel.prototype.setVariable = function (name, newValue) {
         if (!name)
             return;
+        var oldValue = this.getVariable(name);
         if (!!this.valuesHash) {
             delete this.valuesHash[name];
         }
         name = name.toLowerCase();
         this.variablesHash[name] = newValue;
         this.notifyElementsOnAnyValueOrVariableChanged(name);
-        this.runConditionOnValueChanged(name, newValue);
-        this.onVariableChanged.fire(this, { name: name, value: newValue });
+        if (!_helpers__WEBPACK_IMPORTED_MODULE_0__["Helpers"].isTwoValueEquals(oldValue, newValue)) {
+            this.runConditionOnValueChanged(name, newValue);
+            var triggerKeys = {};
+            triggerKeys[name] = { newValue: newValue, oldValue: oldValue };
+            this.checkTriggers(triggerKeys, false, false, name);
+            this.onVariableChanged.fire(this, { name: name, value: newValue });
+        }
     };
     /**
      * Returns the names of all variables in the survey.
@@ -86299,7 +86436,10 @@ var SurveyModel = /** @class */ (function (_super) {
             return;
         if (this.checkIsCurrentPageHasErrors(false))
             return;
+        var curPage = this.currentPage;
         var goNextPage = function () {
+            if (curPage !== _this.currentPage)
+                return;
             if (!_this.isLastPage) {
                 _this.nextPage();
             }
@@ -87288,32 +87428,34 @@ var SurveyModel = /** @class */ (function (_super) {
                 }
             }
             else if (this.state === "running" && isStrCiEqual(layoutElement.id, this.progressBarComponentName)) {
-                var headerLayoutElement = this.findLayoutElement("advanced-header");
-                var advHeader = headerLayoutElement && headerLayoutElement.data;
-                var isBelowHeader = !advHeader || advHeader.hasBackground;
-                if (isStrCiEqual(this.showProgressBar, "aboveHeader")) {
-                    isBelowHeader = false;
-                }
-                if (isStrCiEqual(this.showProgressBar, "belowHeader")) {
-                    isBelowHeader = true;
-                }
-                if (container === "header" && !isBelowHeader) {
-                    layoutElement.index = -150;
-                    if (this.isShowProgressBarOnTop && !this.isShowStartingPage) {
-                        containerLayoutElements.push(layoutElement);
+                if (this.questionsOnPageMode != "singlePage") {
+                    var headerLayoutElement = this.findLayoutElement("advanced-header");
+                    var advHeader = headerLayoutElement && headerLayoutElement.data;
+                    var isBelowHeader = !advHeader || advHeader.hasBackground;
+                    if (isStrCiEqual(this.showProgressBar, "aboveHeader")) {
+                        isBelowHeader = false;
                     }
-                }
-                if (container === "center" && isBelowHeader) {
-                    if (!!layoutElement.index) {
-                        delete layoutElement.index;
+                    if (isStrCiEqual(this.showProgressBar, "belowHeader")) {
+                        isBelowHeader = true;
                     }
-                    if (this.isShowProgressBarOnTop && !this.isShowStartingPage) {
-                        containerLayoutElements.push(layoutElement);
+                    if (container === "header" && !isBelowHeader) {
+                        layoutElement.index = -150;
+                        if (this.isShowProgressBarOnTop && !this.isShowStartingPage) {
+                            containerLayoutElements.push(layoutElement);
+                        }
                     }
-                }
-                if (container === "footer") {
-                    if (this.isShowProgressBarOnBottom && !this.isShowStartingPage) {
-                        containerLayoutElements.push(layoutElement);
+                    if (container === "center" && isBelowHeader) {
+                        if (!!layoutElement.index) {
+                            delete layoutElement.index;
+                        }
+                        if (this.isShowProgressBarOnTop && !this.isShowStartingPage) {
+                            containerLayoutElements.push(layoutElement);
+                        }
+                    }
+                    if (container === "footer") {
+                        if (this.isShowProgressBarOnBottom && !this.isShowStartingPage) {
+                            containerLayoutElements.push(layoutElement);
+                        }
                     }
                 }
             }
@@ -89585,10 +89727,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 +89744,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) {