survey-core 1.11.12 → 1.11.13

package/survey.core.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.11.12
+ * surveyjs - Survey JavaScript library v1.11.13
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1927,8 +1927,7 @@ var englishStrings = {
 // Uncomment the lines below if you create a custom dictionary.
 // Replace "en" with a custom locale code (for example, "fr" or "de"),
 // Replace `englishStrings` with the name of the variable that contains the custom dictionary.
-// surveyLocalization.locales["en"] = englishStrings;
-// surveyLocalization.localeNames["en"] = "English";
+//surveyLocalization.setupLocale("en", englishStrings, "English", "English");
 
 // CONCATENATED MODULE: ./packages/survey-core/src/surveyStrings.ts
 
@@ -1937,8 +1936,21 @@ var surveyLocalization = {
     defaultLocaleValue: "en",
     locales: {},
     localeNames: {},
+    localeNamesInEnglish: {},
     localeDirections: {},
     supportedLocales: [],
+    useEnglishNames: false,
+    //TODO remove on next week
+    get showNamesInEnglish() { return this.useEnglishNames; },
+    set showNamesInEnglish(val) { this.useEnglishNames = val; },
+    setupLocale: function (loc, strings, name, nameInEngish, direction) {
+        this.locales[loc] = strings;
+        this.localeNames[loc] = name;
+        this.localeNamesInEnglish[loc] = nameInEngish;
+        if (direction !== undefined) {
+            this.localeDirections[loc] = direction;
+        }
+    },
     get currentLocale() {
         return this.currentLocaleValue === this.defaultLocaleValue ? "" : this.currentLocaleValue;
     },
@@ -1990,7 +2002,17 @@ var surveyLocalization = {
         }
         return this.onGetExternalString(strName, locale);
     },
+    getLocaleName: function (loc, inEnglish) {
+        if (!loc)
+            return "";
+        if (inEnglish === undefined)
+            inEnglish = this.showNamesInEnglish;
+        var firstNames = inEnglish ? this.localeNamesInEnglish : this.localeNames;
+        var secondNames = inEnglish ? this.localeNames : this.localeNamesInEnglish;
+        return firstNames[loc] || secondNames[loc] || loc;
+    },
     getLocales: function (removeDefaultLoc) {
+        var _this = this;
         if (removeDefaultLoc === void 0) { removeDefaultLoc = false; }
         var res = [];
         res.push("");
@@ -2007,12 +2029,7 @@ var surveyLocalization = {
             res.push(key);
         }
         var locName = function (loc) {
-            if (!loc)
-                return "";
-            var res = surveyLocalization.localeNames[loc];
-            if (!res)
-                res = loc;
-            return res.toLowerCase();
+            return _this.getLocaleName(loc).toLowerCase();
         };
         res.sort(function (a, b) {
             var str1 = locName(a);
@@ -5267,11 +5284,27 @@ var expressions_FunctionOperand = /** @class */ (function (_super) {
         return true;
     };
     FunctionOperand.prototype.hasAsyncFunction = function () {
+        return this.isAsyncFunction() || this.parameters.hasAsyncFunction();
+    };
+    FunctionOperand.prototype.isAsyncFunction = function () {
         return functionsfactory_FunctionFactory.Instance.isAsyncFunction(this.originalValue);
     };
     FunctionOperand.prototype.addToAsyncList = function (list) {
-        if (this.hasAsyncFunction()) {
-            list.push(this);
+        var item = undefined;
+        if (this.isAsyncFunction()) {
+            item = { operand: this };
+        }
+        if (this.parameters.hasAsyncFunction()) {
+            var children = new Array();
+            this.parameters.addToAsyncList(children);
+            children.forEach(function (child) { return child.parent = item; });
+            if (!item) {
+                item = {};
+            }
+            item.children = children;
+        }
+        if (item) {
+            list.push(item);
         }
     };
     FunctionOperand.prototype.isContentEqual = function (op) {
@@ -8630,7 +8663,6 @@ var conditions_ExpressionExecutor = /** @class */ (function () {
         return !!this.operand;
     };
     ExpressionExecutor.prototype.run = function (values, properties) {
-        var _this = this;
         if (properties === void 0) { properties = null; }
         if (!this.operand) {
             if (!!this.expression) {
@@ -8642,25 +8674,57 @@ var conditions_ExpressionExecutor = /** @class */ (function () {
         this.processValue.properties = properties;
         if (!this.isAsync)
             return this.runValues();
-        this.asyncFuncList = [];
+        this.asyncFuncList = new Array();
         this.operand.addToAsyncList(this.asyncFuncList);
         for (var i = 0; i < this.asyncFuncList.length; i++) {
-            this.asyncFuncList[i].onAsyncReady = function () {
-                _this.doAsyncFunctionReady();
-            };
-        }
-        for (var i = 0; i < this.asyncFuncList.length; i++) {
-            this.asyncFuncList[i].evaluateAsync(this.processValue);
+            this.runAsyncItem(this.asyncFuncList[i]);
         }
         return false;
     };
-    ExpressionExecutor.prototype.doAsyncFunctionReady = function () {
+    ExpressionExecutor.prototype.runAsyncItem = function (item) {
+        var _this = this;
+        if (item.children) {
+            item.children.forEach(function (child) { return _this.runAsyncItem(child); });
+        }
+        else {
+            this.runAsyncItemCore(item);
+        }
+    };
+    ExpressionExecutor.prototype.runAsyncItemCore = function (item) {
+        var _this = this;
+        if (item.operand) {
+            item.operand.onAsyncReady = function () { return _this.doAsyncFunctionReady(item); };
+            item.operand.evaluateAsync(this.processValue);
+        }
+        else {
+            this.doAsyncFunctionReady(item);
+        }
+    };
+    ExpressionExecutor.prototype.doAsyncFunctionReady = function (item) {
+        if (item.parent && this.isAsyncChildrenReady(item)) {
+            this.runAsyncItemCore(item.parent);
+            return;
+        }
         for (var i = 0; i < this.asyncFuncList.length; i++) {
-            if (!this.asyncFuncList[i].isReady)
+            if (!this.isAsyncFuncReady(this.asyncFuncList[i]))
                 return;
         }
         this.runValues();
     };
+    ExpressionExecutor.prototype.isAsyncFuncReady = function (item) {
+        if (item.operand && !item.operand.isReady)
+            return false;
+        return this.isAsyncChildrenReady(item);
+    };
+    ExpressionExecutor.prototype.isAsyncChildrenReady = function (item) {
+        if (item.children) {
+            for (var i = 0; i < item.children.length; i++) {
+                if (!this.isAsyncFuncReady(item.children[i]))
+                    return false;
+            }
+        }
+        return true;
+    };
     ExpressionExecutor.prototype.runValues = function () {
         var res = this.operand.evaluate(this.processValue);
         if (!!this.onComplete) {
@@ -25854,6 +25918,14 @@ var question_matrixdropdownrendered_QuestionMatrixDropdownRenderedCell = /** @cl
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionMatrixDropdownRenderedCell.prototype, "isVisible", {
+        get: function () {
+            var _a;
+            return (!this.hasQuestion && !this.isErrorsCell) || !((_a = this.matrix) === null || _a === void 0 ? void 0 : _a.isMobile) || this.question.isVisible;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionMatrixDropdownRenderedCell.prototype, "showResponsiveTitle", {
         get: function () {
             var _a;
@@ -26899,9 +26971,6 @@ var question_matrixdropdownrendered_QuestionMatrixDropdownRenderedTable = /** @c
     QuestionMatrixDropdownRenderedTable.prototype.createTextCell = function (locTitle) {
         var cell = new question_matrixdropdownrendered_QuestionMatrixDropdownRenderedCell();
         cell.locTitle = locTitle;
-        if (!!locTitle) {
-            locTitle.strChanged();
-        }
         if (!!this.cssClasses.cell) {
             cell.className = this.cssClasses.cell;
         }
@@ -38389,14 +38458,6 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         _this._isMobile = false;
         _this._isCompact = false;
         _this._isDesignMode = false;
-        /**
-         * Specifies whether data validation is enabled.
-         *
-         * Default value: `true`
-         * @see checkErrorsMode
-         * @see hideRequiredErrors
-         */
-        _this.validationEnabled = true;
         /**
          * Specifies whether respondents can switch the current page even if it contains validation errors.
          *
@@ -46116,6 +46177,9 @@ var survey_SurveyModel = /** @class */ (function (_super) {
     survey_decorate([
         jsonobject_property()
     ], SurveyModel.prototype, "progressBarInheritWidthFrom", void 0);
+    survey_decorate([
+        jsonobject_property({ defaultValue: true })
+    ], SurveyModel.prototype, "validationEnabled", void 0);
     survey_decorate([
         jsonobject_property()
     ], SurveyModel.prototype, "rootCss", void 0);
@@ -53025,7 +53089,7 @@ Serializer.addClass("text", [
             return isMinMaxType(obj);
         },
     },
-    { name: "inputTextAlignment", default: "auto", choices: ["left", "right", "auto"], visible: false },
+    { name: "inputTextAlignment", default: "auto", choices: ["left", "right", "auto"] },
     {
         name: "maskType",
         default: "none",
@@ -53516,6 +53580,15 @@ var question_multipletext_MultipleTextItemModel = /** @class */ (function (_supe
         configurable: true
     });
     Object.defineProperty(MultipleTextItemModel.prototype, "inputTextAlignment", {
+        /**
+         * Specifies text alignment within the input field.
+         *
+         * Possible values:
+         *
+         * - `"left"` - Aligns input text to the left side.
+         * - `"right"` - Aligns input text to the right side.
+         * - `"auto"` (default) - Applies right alignment if a [numeric or currency input mask](https://surveyjs.io/form-library/documentation/api-reference/multipletextitemmodel#maskType) is specified. Otherwise, applies left alignment.
+         */
         get: function () {
             return this.editor.inputTextAlignment;
         },
@@ -54261,7 +54334,7 @@ Serializer.addClass("multipletextitem", [
             obj.maskSettings.setData(value);
         },
     },
-    { name: "inputTextAlignment", default: "auto", choices: ["left", "right", "auto"], visible: false },
+    { name: "inputTextAlignment", default: "auto", choices: ["left", "right", "auto"] },
     { name: "title", serializationProperty: "locTitle" },
     { name: "maxLength:number", default: -1 },
     { name: "size:number", minValue: 0 },
@@ -57580,7 +57653,6 @@ questionfactory_QuestionFactory.Instance.registerQuestion("comment", function (n
 
 // CONCATENATED MODULE: ./packages/survey-core/src/utils/camera.ts
 
-
 var camera_Camera = /** @class */ (function () {
     function Camera() {
         this.canFlipValue = undefined;
@@ -57683,27 +57755,25 @@ var camera_Camera = /** @class */ (function () {
             audio: false
         };
     };
-    Camera.prototype.startVideo = function (videoElementId, callback, imageWidth, imageHeight) {
+    Camera.prototype.startVideo = function (videoElement, callback, imageWidth, imageHeight) {
         var _this = this;
-        var _a;
-        var videoEl = (_a = settings.environment.root) === null || _a === void 0 ? void 0 : _a.getElementById(videoElementId);
-        if (!videoEl) {
+        if (!videoElement) {
             callback(undefined);
             return;
         }
-        videoEl.style.width = "100%";
-        videoEl.style.height = "auto";
-        videoEl.style.height = "100%";
-        videoEl.style.objectFit = "contain";
+        videoElement.style.width = "100%";
+        videoElement.style.height = "auto";
+        videoElement.style.height = "100%";
+        videoElement.style.objectFit = "contain";
         var mediaConstraints = this.getMediaConstraints({ width: imageWidth, height: imageHeight });
         navigator.mediaDevices.getUserMedia(mediaConstraints).then(function (stream) {
             var _a;
-            videoEl.srcObject = stream;
+            videoElement.srcObject = stream;
             if (!((_a = Camera.cameraList[Camera.cameraIndex]) === null || _a === void 0 ? void 0 : _a.deviceId) && !!stream.getTracks()[0].getCapabilities().facingMode) {
                 Camera.canSwitchFacingMode = true;
                 _this.updateCanFlipValue();
             }
-            videoEl.play();
+            videoElement.play();
             callback(stream);
         })
             .catch(function (error) {
@@ -57713,15 +57783,14 @@ var camera_Camera = /** @class */ (function () {
     Camera.prototype.getImageSize = function (videoEl) {
         return { width: videoEl.videoWidth, height: videoEl.videoHeight };
     };
-    Camera.prototype.snap = function (videoElementId, callback) {
+    Camera.prototype.snap = function (videoElement, callback) {
+        if (!videoElement)
+            return false;
         if (!DomDocumentHelper.isAvailable())
             return false;
         var root = DomDocumentHelper.getDocument();
-        var videoEl = root === null || root === void 0 ? void 0 : root.getElementById(videoElementId);
-        if (!videoEl)
-            return false;
         var canvasEl = root.createElement("canvas");
-        var imageSize = this.getImageSize(videoEl);
+        var imageSize = this.getImageSize(videoElement);
         canvasEl.height = imageSize.height;
         canvasEl.width = imageSize.width;
         var context = canvasEl.getContext("2d");
@@ -57732,7 +57801,7 @@ var camera_Camera = /** @class */ (function () {
         }
         */
         context.clearRect(0, 0, canvasEl.width, canvasEl.height);
-        context.drawImage(videoEl, 0, 0, canvasEl.width, canvasEl.height);
+        context.drawImage(videoElement, 0, 0, canvasEl.width, canvasEl.height);
         canvasEl.toBlob(callback, "image/png");
         return true;
     };
@@ -58195,9 +58264,17 @@ var question_file_QuestionFileModel = /** @class */ (function (_super) {
             _this.startVideoInCamera();
         }, 0);
     };
+    Object.defineProperty(QuestionFileModel.prototype, "videoHtmlElement", {
+        get: function () {
+            var _a;
+            return (_a = this.rootElement) === null || _a === void 0 ? void 0 : _a.querySelector("#" + this.videoId);
+        },
+        enumerable: false,
+        configurable: true
+    });
     QuestionFileModel.prototype.startVideoInCamera = function () {
         var _this = this;
-        this.camera.startVideo(this.videoId, function (stream) {
+        this.camera.startVideo(this.videoHtmlElement, function (stream) {
             _this.videoStream = stream;
             if (!stream) {
                 _this.stopVideo();
@@ -58218,7 +58295,7 @@ var question_file_QuestionFileModel = /** @class */ (function (_super) {
                 _this.loadFiles([file]);
             }
         };
-        this.camera.snap(this.videoId, blobCallback);
+        this.camera.snap(this.videoHtmlElement, blobCallback);
         this.stopVideo();
     };
     QuestionFileModel.prototype.canFlipCamera = function () {
@@ -59989,7 +60066,7 @@ var question_rating_QuestionRatingModel = /** @class */ (function (_super) {
     QuestionRatingModel.prototype.setValueFromClick = function (value) {
         if (this.isReadOnlyAttr)
             return;
-        if (this.value === parseFloat(value)) {
+        if (this.value === ((typeof (this.value) === "string") ? value : parseFloat(value))) {
             this.clearValue(true);
         }
         else {
@@ -63333,7 +63410,7 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         _this.registerPropertyChangedHandlers(["panelsState"], function () {
             _this.setPanelsState();
         });
-        _this.registerPropertyChangedHandlers(["isMobile", "newPanelPosition", "showRangeInProgress", "renderMode"], function () {
+        _this.registerPropertyChangedHandlers(["isMobile", "newPanelPosition", "displayMode", "showProgressBar"], function () {
             _this.updateFooterActions();
         });
         _this.registerPropertyChangedHandlers(["allowAddPanel"], function () { _this.updateNoEntriesTextDefaultLoc(); });
@@ -63489,7 +63566,7 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
     });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "templateTabTitle", {
         /**
-         * A template for tab titles. Applies when [`renderMode`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#renderMode) is `"tab"`.
+         * A template for tab titles. Applies when [`displayMode`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#displayMode) is `"tab"`.
          *
          * The template can contain the following placeholders:
          *
@@ -63501,7 +63578,7 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
          * [View Demo](https://surveyjs.io/form-library/examples/tabbed-interface-for-duplicate-group-option/ (linkStyle))
          * @see templateTitle
          * @see tabTitlePlaceholder
-         * @see renderMode
+         * @see displayMode
          */
         get: function () {
             return this.locTemplateTabTitle.text;
@@ -63681,11 +63758,11 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         /**
          * A zero-based index of the currently displayed panel.
          *
-         * When `renderMode` is `"list"` or Dynamic Panel is empty (`panelCount` is 0), this property contains -1.
+         * When `displayMode` is `"list"` or Dynamic Panel is empty (`panelCount` is 0), this property contains -1.
          * @see currentPanel
          * @see panels
          * @see panelCount
-         * @see renderMode
+         * @see displayMode
          */
         get: function () {
             if (this.isRenderModeList)
@@ -63708,11 +63785,11 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         /**
          * A `PanelModel` object that is the currently displayed panel.
          *
-         * When `renderMode` is `"list"` or Dynamic Panel is empty (`panelCount` is 0), this property contains `null`.
+         * When `displayMode` is `"list"` or Dynamic Panel is empty (`panelCount` is 0), this property contains `null`.
          * @see currentIndex
          * @see panels
          * @see panelCount
-         * @see renderMode
+         * @see displayMode
          */
         get: function () {
             if (this.isDesignMode)
@@ -63962,8 +64039,8 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
     });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "panelPrevText", {
         /**
-         * A caption for the Previous button. Applies only if `renderMode` is different from `"list"`.
-         * @see renderMode
+         * A caption for the Previous button. Applies only if `displayMode` is different from `"list"`.
+         * @see displayMode
          * @see isPrevButtonVisible
          */
         get: function () {
@@ -63984,8 +64061,8 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
     });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "panelNextText", {
         /**
-         * A caption for the Next button. Applies only if `renderMode` is different from `"list"`.
-         * @see renderMode
+         * A caption for the Next button. Applies only if `displayMode` is different from `"list"`.
+         * @see displayMode
          * @see isNextButtonVisible
          */
         get: function () {
@@ -64046,21 +64123,15 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         configurable: true
     });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "isProgressTopShowing", {
-        /**
-         * Returns true when the renderMode equals to "progressTop" or "progressTopBottom"
-         */
         get: function () {
-            return this.renderMode === "progressTop" || this.renderMode === "progressTopBottom";
+            return this.displayMode == "carousel" && (this.progressBarLocation === "top" || this.progressBarLocation === "topBottom");
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "isProgressBottomShowing", {
-        /**
-         * Returns true when the renderMode equals to "progressBottom" or "progressTopBottom"
-         */
         get: function () {
-            return this.renderMode === "progressBottom" || this.renderMode === "progressTopBottom";
+            return this.displayMode == "carousel" && (this.progressBarLocation === "bottom" || this.progressBarLocation === "topBottom");
         },
         enumerable: false,
         configurable: true
@@ -64100,9 +64171,6 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         configurable: true
     });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "isRangeShowing", {
-        /**
-         * Returns true when showRangeInProgress equals to true, renderMode doesn't equal to "list" and visiblePanelCount is >= 2.
-         */
         get: function () {
             return (this.showRangeInProgress && this.currentIndex >= 0 && this.visiblePanelCount > 1);
         },
@@ -64179,7 +64247,7 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
             for (var i = this.panelCount; i < val; i++) {
                 var panel = this.createNewPanel();
                 this.panelsCore.push(panel);
-                if (this.renderMode == "list" && this.panelsState != "default") {
+                if (this.displayMode == "list" && this.panelsState != "default") {
                     if (this.panelsState === "expanded") {
                         panel.expand();
                     }
@@ -64215,7 +64283,7 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
     });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "panelsState", {
         /**
-         * Specifies whether users can expand and collapse panels. Applies if `renderMode` is `"list"` and the `templateTitle` property is specified.
+         * Specifies whether users can expand and collapse panels. Applies if `displayMode` is `"list"` and the `templateTitle` property is specified.
          *
          * Possible values:
          *
@@ -64223,7 +64291,7 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
          * - `"expanded"` - All panels are displayed in full and can be collapsed in the UI.
          * - `"collapsed"` - All panels display only their titles and descriptions and can be expanded in the UI.
          * - `"firstExpanded"` - Only the first panel is displayed in full; other panels are collapsed and can be expanded in the UI.
-         * @see renderMode
+         * @see displayMode
          * @see templateTitle
          */
         get: function () {
@@ -64249,7 +64317,7 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         }
     };
     QuestionPanelDynamicModel.prototype.setPanelsState = function () {
-        if (this.useTemplatePanel || this.renderMode != "list" || !this.templateTitle)
+        if (this.useTemplatePanel || this.displayMode != "list" || !this.templateTitle)
             return;
         for (var i = 0; i < this.panelsCore.length; i++) {
             var state = this.panelsState;
@@ -64462,46 +64530,68 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
     });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "showRangeInProgress", {
         /**
-         * Shows the range from 1 to panelCount when renderMode doesn't equal to "list". Set to false to hide this element.
-         * @see panelCount
-         * @see renderMode
+         * Obsolete. Use the [`showProgressBar`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#showProgressBar) property instead.
+         * @deprecated
          */
         get: function () {
-            return this.getPropertyValue("showRangeInProgress");
+            return this.showProgressBar;
+            // return this.getPropertyValue("showRangeInProgress");
         },
         set: function (val) {
-            this.setPropertyValue("showRangeInProgress", val);
-            this.fireCallback(this.currentIndexChangedCallback);
+            this.showProgressBar = val;
+            // this.setPropertyValue("showRangeInProgress", val);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "renderMode", {
         /**
-         * Specifies how to render panels.
-         *
-         * Possible values:
-         *
-         * - `"list"` (default) - Renders panels one under the other. [View Demo](https://surveyjs.io/form-library/examples/how-to-use-expressions-in-dynamic-panel/)
-         * - `"progressTop"` - Renders each panel as a card and displays a progress bar at the top. [View Demo](https://surveyjs.io/form-library/examples/questiontype-paneldynamic/)
-         * - `"progressBottom"` - Renders each panel panel as a card and displays a progress bar at the bottom.
-         * - `"progressTopBottom"` - Renders each panel as a card and displays a progress bar at the top and bottom.
-         * - `"tab"` - Renders each panel within a tab. Use the [`templateTabTitle`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#templateTabTitle) to specify a template for tab titles. [View Demo](https://surveyjs.io/form-library/examples/tabbed-interface-for-duplicate-group-option/)
+         * Obsolete. Use the [`displayMode`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#displayMode) property instead.
+         * @deprecated
          */
         get: function () {
-            return this.getPropertyValue("renderMode");
+            var displayMode = this.displayMode;
+            if (displayMode == "carousel") {
+                var progressBarLocation = this.progressBarLocation;
+                if (progressBarLocation == "top") {
+                    return "progressTop";
+                }
+                else if (progressBarLocation == "bottom") {
+                    return "progressBottom";
+                }
+                else if (progressBarLocation == "topBottom") {
+                    return "progressTopBottom";
+                }
+            }
+            return displayMode;
         },
         set: function (val) {
-            this.setPropertyValue("renderMode", val);
-            this.fireCallback(this.renderModeChangedCallback);
-            this.blockAnimations();
-            this.updateRenderedPanels();
-            this.releaseAnimations();
-            this.updatePanelsAnimation();
+            if ((val || "").startsWith("progress")) {
+                if (val == "progressTop") {
+                    this.progressBarLocation = "top";
+                }
+                else if (val == "progressBottom") {
+                    this.progressBarLocation = "bottom";
+                }
+                else if (val == "progressTopBottom") {
+                    this.progressBarLocation = "topBottom";
+                }
+                this.displayMode = "carousel";
+            }
+            else {
+                this.displayMode = val;
+            }
+            // this.updatePanelView();
         },
         enumerable: false,
         configurable: true
     });
+    QuestionPanelDynamicModel.prototype.updatePanelView = function () {
+        this.blockAnimations();
+        this.updateRenderedPanels();
+        this.releaseAnimations();
+        this.updatePanelsAnimation();
+    };
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "tabAlign", {
         get: function () {
             return this.getPropertyValue("tabAlign");
@@ -64517,14 +64607,14 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
     });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "isRenderModeList", {
         get: function () {
-            return this.renderMode === "list";
+            return this.displayMode === "list";
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "isRenderModeTab", {
         get: function () {
-            return this.renderMode === "tab";
+            return this.displayMode === "tab";
         },
         enumerable: false,
         configurable: true
@@ -64716,7 +64806,7 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
     };
     /**
      * Add a new dynamic panel based on the template Panel. It checks if canAddPanel returns true and then calls addPanel method.
-     * If a renderMode is different from "list" and the current panel has erros, then
+     * If a displayMode is different from "list" and the current panel has erros, then
      * @see template
      * @see panelCount
      * @see panels
@@ -64728,7 +64818,7 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         if (!this.canLeaveCurrentPanel())
             return null;
         var newPanel = this.addPanel();
-        if (this.renderMode === "list" && this.panelsState !== "default") {
+        if (this.displayMode === "list" && this.panelsState !== "default") {
             newPanel.expand();
         }
         this.focusNewPanelCallback = function () {
@@ -64747,7 +64837,7 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
     };
     /**
      * Adds a new panel based on the [template](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#template).
-     * @param index *(Optional)* An index at which to insert the new panel. `undefined` adds the panel to the end or inserts it after the current panel if [`renderMode`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#renderMode) is `"tab"`. A negative index (for instance, -1) adds the panel to the end in all cases, regardless of the `renderMode` value.
+     * @param index *(Optional)* An index at which to insert the new panel. `undefined` adds the panel to the end or inserts it after the current panel if [`displayMode`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#renderMode) is `"tab"`. A negative index (for instance, -1) adds the panel to the end in all cases, regardless of the `displayMode` value.
      * @see panelCount
      * @see panels
      * @see allowAddPanel
@@ -64796,7 +64886,7 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         }
     };
     QuestionPanelDynamicModel.prototype.canLeaveCurrentPanel = function () {
-        return !(this.renderMode !== "list" && this.currentPanel && this.currentPanel.hasErrors(true, true));
+        return !(this.displayMode !== "list" && this.currentPanel && this.currentPanel.hasErrors(true, true));
     };
     QuestionPanelDynamicModel.prototype.copyValue = function (dest, src) {
         for (var key in src) {
@@ -64834,8 +64924,8 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
             (this.isValueEmpty(this.defaultPanelValue) || !this.isTwoValueEquals(panelValue, this.defaultPanelValue));
     };
     /**
-     * Switches Dynamic Panel to the next panel. Returns `true` in case of success, or `false` if `renderMode` is `"list"` or the current panel contains validation errors.
-     * @see renderMode
+     * Switches Dynamic Panel to the next panel. Returns `true` in case of success, or `false` if `displayMode` is `"list"` or the current panel contains validation errors.
+     * @see displayMode
      */
     QuestionPanelDynamicModel.prototype.goToNextPanel = function () {
         if (this.currentIndex < 0)
@@ -65649,7 +65739,7 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         return new CssClassBuilder()
             .append(this.cssClasses.button)
             .append(this.cssClasses.buttonAdd)
-            .append(this.cssClasses.buttonAdd + "--list-mode", this.renderMode === "list")
+            .append(this.cssClasses.buttonAdd + "--list-mode", this.displayMode === "list")
             .toString();
     };
     QuestionPanelDynamicModel.prototype.getPrevButtonCss = function () {
@@ -65908,6 +65998,28 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
     question_paneldynamic_decorate([
         propertyArray({})
     ], QuestionPanelDynamicModel.prototype, "_renderedPanels", void 0);
+    question_paneldynamic_decorate([
+        jsonobject_property({
+            onSet: function (val, target) {
+                target.fireCallback(target.renderModeChangedCallback);
+                target.updatePanelView();
+            }
+        })
+    ], QuestionPanelDynamicModel.prototype, "displayMode", void 0);
+    question_paneldynamic_decorate([
+        jsonobject_property({
+            onSet: function (val, target) {
+                target.fireCallback(target.currentIndexChangedCallback);
+            }
+        })
+    ], QuestionPanelDynamicModel.prototype, "showProgressBar", void 0);
+    question_paneldynamic_decorate([
+        jsonobject_property({
+            onSet: function (val, target) {
+                // target.updatePanelView();
+            }
+        })
+    ], QuestionPanelDynamicModel.prototype, "progressBarLocation", void 0);
     question_paneldynamic_decorate([
         jsonobject_property({ defaultValue: false, onSet: function (_, target) { target.updateFooterActions(); } })
     ], QuestionPanelDynamicModel.prototype, "legacyNavigation", void 0);
@@ -65924,8 +66036,14 @@ Serializer.addClass("paneldynamic", [
         isLightSerializable: false
     },
     { name: "templateTitle:text", serializationProperty: "locTemplateTitle" },
-    { name: "templateTabTitle", serializationProperty: "locTemplateTabTitle", visibleIf: function (obj) { return obj.renderMode === "tab"; } },
-    { name: "tabTitlePlaceholder", serializationProperty: "locTabTitlePlaceholder", visibleIf: function (obj) { return obj.renderMode === "tab"; } },
+    {
+        name: "templateTabTitle", serializationProperty: "locTemplateTabTitle",
+        visibleIf: function (obj) { return obj.displayMode === "tab"; }
+    },
+    {
+        name: "tabTitlePlaceholder", serializationProperty: "locTabTitlePlaceholder",
+        visibleIf: function (obj) { return obj.displayMode === "tab"; }
+    },
     {
         name: "templateDescription:text",
         serializationProperty: "locTemplateDescription",
@@ -65952,7 +66070,7 @@ Serializer.addClass("paneldynamic", [
         name: "panelsState",
         default: "default",
         choices: ["default", "collapsed", "expanded", "firstExpanded"],
-        visibleIf: function (obj) { return obj.renderMode === "list"; }
+        visibleIf: function (obj) { return obj.displayMode === "list"; }
     },
     { name: "keyName" },
     {
@@ -65978,12 +66096,12 @@ Serializer.addClass("paneldynamic", [
     {
         name: "panelPrevText",
         serializationProperty: "locPanelPrevText",
-        visibleIf: function (obj) { return obj.renderMode !== "list"; }
+        visibleIf: function (obj) { return obj.displayMode !== "list"; }
     },
     {
         name: "panelNextText",
         serializationProperty: "locPanelNextText",
-        visibleIf: function (obj) { return obj.renderMode !== "list"; }
+        visibleIf: function (obj) { return obj.displayMode !== "list"; }
     },
     {
         name: "showQuestionNumbers",
@@ -65993,16 +66111,30 @@ Serializer.addClass("paneldynamic", [
     {
         name: "showRangeInProgress:boolean",
         default: true,
-        visibleIf: function (obj) { return obj.renderMode !== "list"; }
+        visible: false
+        // visibleIf: (obj: any) => { return obj.displayMode !== "list"; }
     },
     {
         name: "renderMode",
         default: "list",
         choices: ["list", "progressTop", "progressBottom", "progressTopBottom", "tab"],
+        visible: false,
+    },
+    { name: "displayMode", default: "list", choices: ["list", "carousel", "tab"] },
+    {
+        name: "showProgressBar:boolean",
+        default: true,
+        visibleIf: function (obj) { return obj.displayMode === "carousel"; }
+    },
+    {
+        name: "progressBarLocation",
+        default: "top",
+        choices: ["top", "bottom", "topBottom"],
+        visibleIf: function (obj) { return obj.showProgressBar; }
     },
     {
         name: "tabAlign", default: "center", choices: ["left", "center", "right"],
-        visibleIf: function (obj) { return obj.renderMode === "tab"; }
+        visibleIf: function (obj) { return obj.displayMode === "tab"; }
     },
     {
         name: "templateTitleLocation",
@@ -68894,8 +69026,8 @@ Serializer.addClass("currencymask", [
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.11.12";
-ReleaseDate = "" + "2024-08-20";
+Version = "" + "1.11.13";
+ReleaseDate = "" + "2024-08-27";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName