survey-react 1.12.14 → 1.12.16

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.12.14
+ * surveyjs - Survey JavaScript library v1.12.16
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1705,7 +1705,7 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 /*!********************************************!*\
   !*** ./src/entries/react.ts + 287 modules ***!
   \********************************************/
-/*! exports provided: Version, ReleaseDate, checkLibraryVersion, setLicenseKey, slk, hasLicense, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedErrorRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, MultipleTextCell, MultipleTextErrorCell, MutlipleTextErrorRow, MutlipleTextRow, QuestionMultipleTextModel, MultipleTextEditorModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionFilePage, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryFocusPage, createTOCListModel, getTocRootCss, TOCModel, SurveyProgressModel, ProgressButtons, ProgressButtonsResponsivityManager, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, SurveyTriggerSkip, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, Cover, CoverCell, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, getLocaleString, setupLocale, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, confirmActionAsync, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, chooseFiles, sanitizeEditableContent, prepareElementForVerticalAnimation, cleanHtmlElementAfterAnimation, classesToSelector, renamedIcons, getIconNameFromProxy, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, TextAreaModel, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, StylesManager, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgThemeSets, addIconsToThemeSet, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, createPopupModelWithListModel, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper, Model, bootstrapThemeName, bootstrapThemeColors, bootstrapThemeCssRules, bootstrapMaterialThemeName, bootstrapMaterialThemeColors, bootstrapMaterialThemeCssRules, defaultBootstrapCss, defaultBootstrapMaterialCss, Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, ListItemContent, ListItemGroup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, QuestionErrorComponent, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent, PopupModal */
+/*! exports provided: Version, ReleaseDate, checkLibraryVersion, setLicenseKey, slk, hasLicense, settings, Helpers, AnswerCountValidator, EmailValidator, NumericValidator, RegexValidator, SurveyValidator, TextValidator, ValidatorResult, ExpressionValidator, ValidatorRunner, ItemValue, Base, Event, EventBase, ArrayChanges, ComputedUpdater, SurveyError, SurveyElementCore, SurveyElement, DragTypeOverMeEnum, CalculatedValue, CustomError, AnswerRequiredError, OneAnswerRequiredError, RequreNumericError, ExceedSizeError, LocalizableString, LocalizableStrings, HtmlConditionItem, UrlConditionItem, ChoicesRestful, ChoicesRestfull, FunctionFactory, registerFunction, ConditionRunner, ExpressionRunner, ExpressionExecutor, Operand, Const, BinaryOperand, Variable, FunctionOperand, ArrayOperand, UnaryOperand, ConditionsParser, ProcessValue, JsonError, JsonIncorrectTypeError, JsonMetadata, JsonMetadataClass, JsonMissingTypeError, JsonMissingTypeErrorBase, JsonObject, JsonObjectProperty, JsonRequiredPropertyError, JsonUnknownPropertyError, Serializer, property, propertyArray, MatrixDropdownCell, MatrixDropdownRowModelBase, QuestionMatrixDropdownModelBase, MatrixDropdownColumn, matrixDropdownColumnTypes, QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedErrorRow, QuestionMatrixDropdownRenderedTable, MatrixDropdownRowModel, QuestionMatrixDropdownModel, MatrixDynamicRowModel, QuestionMatrixDynamicModel, MatrixRowModel, MatrixCells, QuestionMatrixModel, QuestionMatrixBaseModel, MultipleTextItemModel, MultipleTextCell, MultipleTextErrorCell, MutlipleTextErrorRow, MutlipleTextRow, QuestionMultipleTextModel, MultipleTextEditorModel, PanelModel, PanelModelBase, QuestionRowModel, FlowPanelModel, PageModel, DefaultTitleModel, Question, QuestionNonValue, QuestionEmptyModel, QuestionCheckboxBase, QuestionSelectBase, QuestionCheckboxModel, QuestionTagboxModel, QuestionRankingModel, QuestionCommentModel, QuestionDropdownModel, QuestionFactory, ElementFactory, QuestionFileModel, QuestionFilePage, QuestionHtmlModel, QuestionRadiogroupModel, QuestionRatingModel, RenderedRatingItem, QuestionExpressionModel, QuestionTextBase, CharacterCounter, QuestionTextModel, QuestionBooleanModel, QuestionImagePickerModel, ImageItemValue, QuestionImageModel, QuestionSignaturePadModel, QuestionPanelDynamicModel, QuestionPanelDynamicItem, SurveyTimer, SurveyTimerModel, tryFocusPage, createTOCListModel, getTocRootCss, TOCModel, SurveyProgressModel, ProgressButtons, ProgressButtonsResponsivityManager, SurveyModel, SurveyTrigger, SurveyTriggerComplete, SurveyTriggerSetValue, SurveyTriggerVisible, SurveyTriggerCopyValue, SurveyTriggerRunExpression, SurveyTriggerSkip, Trigger, PopupSurveyModel, SurveyWindowModel, TextPreProcessor, Notifier, Cover, CoverCell, dxSurveyService, englishStrings, surveyLocalization, surveyStrings, getLocaleString, getLocaleStrings, setupLocale, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, ListModel, MultiSelectListModel, PopupModel, createDialogOptions, PopupBaseViewModel, PopupDropdownViewModel, PopupModalViewModel, createPopupViewModel, createPopupModalViewModel, DropdownListModel, DropdownMultiSelectListModel, QuestionButtonGroupModel, ButtonGroupItemModel, ButtonGroupItemValue, IsMobile, IsTouch, _setIsTouch, confirmAction, confirmActionAsync, detectIEOrEdge, doKey2ClickUp, doKey2ClickDown, doKey2ClickBlur, loadFileFromBase64, increaseHeightByContent, createSvg, chooseFiles, sanitizeEditableContent, prepareElementForVerticalAnimation, cleanHtmlElementAfterAnimation, classesToSelector, renamedIcons, getIconNameFromProxy, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, TextAreaModel, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, StylesManager, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgThemeSets, addIconsToThemeSet, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, activateLazyRenderingChecks, createDropdownActionModel, createDropdownActionModelAdvanced, createPopupModelWithListModel, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper, Model, bootstrapThemeName, bootstrapThemeColors, bootstrapThemeCssRules, bootstrapMaterialThemeName, bootstrapMaterialThemeColors, bootstrapMaterialThemeCssRules, defaultBootstrapCss, defaultBootstrapMaterialCss, Survey, attachKey2click, ReactSurveyElementsWrapper, SurveyNavigationBase, SurveyTimerPanel, SurveyPage, SurveyRow, SurveyPanel, SurveyFlowPanel, SurveyQuestion, SurveyElementErrors, SurveyQuestionAndErrorsCell, ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase, SurveyQuestionCommentItem, SurveyQuestionComment, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent, RatingItem, RatingItemStar, RatingItemSmiley, RatingDropdownItem, TagboxFilterString, SurveyQuestionOptionItem, SurveyQuestionDropdownBase, SurveyQuestionDropdown, SurveyQuestionTagboxItem, SurveyQuestionTagbox, SurveyQuestionDropdownSelect, SurveyQuestionMatrix, SurveyQuestionMatrixRow, SurveyQuestionMatrixCell, SurveyQuestionHtml, SurveyQuestionFile, SurveyFileChooseButton, SurveyFilePreview, SurveyQuestionMultipleText, SurveyQuestionRadiogroup, SurveyQuestionRadioItem, SurveyQuestionText, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionEmpty, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionPanelDynamic, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionExpression, PopupSurvey, SurveyWindow, ReactQuestionFactory, ReactElementFactory, SurveyQuestionImagePicker, SurveyQuestionImage, SurveyQuestionSignaturePad, SurveyQuestionButtonGroup, SurveyQuestionCustom, SurveyQuestionComposite, Popup, ListItemContent, ListItemGroup, List, TitleActions, TitleElement, SurveyActionBar, LogoImage, SurveyHeader, SvgIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicProgressText, SurveyNavigationButton, QuestionErrorComponent, MatrixRow, Skeleton, NotifierComponent, ComponentsContainer, CharacterCounterComponent, HeaderMobile, HeaderCell, Header, SurveyLocStringViewer, SurveyLocStringEditor, LoadingIndicatorComponent, SvgBundleComponent, PopupModal */
 /*! ModuleConcatenation bailout: Cannot concat with external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"} (<- Module is not an ECMAScript module) */
 /*! ModuleConcatenation bailout: Cannot concat with external {"root":"ReactDOM","commonjs2":"react-dom","commonjs":"react-dom","amd":"react-dom"} (<- Module is not an ECMAScript module) */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -1869,6 +1869,7 @@ __webpack_require__.d(__webpack_exports__, "englishStrings", function() { return
 __webpack_require__.d(__webpack_exports__, "surveyLocalization", function() { return /* reexport */ surveyLocalization; });
 __webpack_require__.d(__webpack_exports__, "surveyStrings", function() { return /* reexport */ surveyStrings; });
 __webpack_require__.d(__webpack_exports__, "getLocaleString", function() { return /* reexport */ getLocaleString; });
+__webpack_require__.d(__webpack_exports__, "getLocaleStrings", function() { return /* reexport */ getLocaleStrings; });
 __webpack_require__.d(__webpack_exports__, "setupLocale", function() { return /* reexport */ setupLocale; });
 __webpack_require__.d(__webpack_exports__, "QuestionCustomWidget", function() { return /* reexport */ QuestionCustomWidget; });
 __webpack_require__.d(__webpack_exports__, "CustomWidgetCollection", function() { return /* reexport */ questionCustomWidgets_CustomWidgetCollection; });
@@ -1935,6 +1936,7 @@ __webpack_require__.d(__webpack_exports__, "VerticalResponsivityManager", functi
 __webpack_require__.d(__webpack_exports__, "unwrap", function() { return /* reexport */ unwrap; });
 __webpack_require__.d(__webpack_exports__, "getOriginalEvent", function() { return /* reexport */ getOriginalEvent; });
 __webpack_require__.d(__webpack_exports__, "getElement", function() { return /* reexport */ getElement; });
+__webpack_require__.d(__webpack_exports__, "activateLazyRenderingChecks", function() { return /* reexport */ activateLazyRenderingChecks; });
 __webpack_require__.d(__webpack_exports__, "createDropdownActionModel", function() { return /* reexport */ createDropdownActionModel; });
 __webpack_require__.d(__webpack_exports__, "createDropdownActionModelAdvanced", function() { return /* reexport */ createDropdownActionModelAdvanced; });
 __webpack_require__.d(__webpack_exports__, "createPopupModelWithListModel", function() { return /* reexport */ createPopupModelWithListModel; });
@@ -2855,12 +2857,13 @@ var surveyLocalization = {
     //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;
+    setupLocale: function (localeConfig) {
+        var loc = localeConfig.localeCode;
+        this.locales[loc] = localeConfig.strings;
+        this.localeNames[loc] = localeConfig.nativeName;
+        this.localeNamesInEnglish[loc] = localeConfig.englishName;
+        if (localeConfig.rtl !== undefined) {
+            this.localeDirections[loc] = localeConfig.rtl;
         }
     },
     get currentLocale() {
@@ -2958,8 +2961,11 @@ function getLocaleString(strName, locale) {
     if (locale === void 0) { locale = null; }
     return surveyLocalization.getString(strName, locale);
 }
+function getLocaleStrings(locale) {
+    return surveyLocalization.getLocaleStrings(locale);
+}
 function setupLocale(localeConfig) {
-    surveyLocalization.setupLocale(localeConfig.localeCode, localeConfig.strings, localeConfig.nativeName, localeConfig.englishName, localeConfig.rtl ? "rtl" : undefined);
+    surveyLocalization.setupLocale(localeConfig);
 }
 var surveyStrings = englishStrings;
 surveyLocalization.locales["en"] = englishStrings;
@@ -5594,6 +5600,24 @@ function dateDiff(params) {
     return dateDiffMonths(params[0], params[1], (params.length > 2 ? params[2] : "") || "days");
 }
 functionsfactory_FunctionFactory.Instance.register("dateDiff", dateDiff);
+function dateAdd(params) {
+    if (!Array.isArray(params) || params.length < 2 || !params[0] || !params[1])
+        return null;
+    var date = createDate("function-dateAdd", params[0]);
+    var valToAdd = params[1];
+    var interval = params[2] || "days";
+    if (interval === "days") {
+        date.setDate(date.getDate() + valToAdd);
+    }
+    if (interval === "months") {
+        date.setMonth(date.getMonth() + valToAdd);
+    }
+    if (interval === "years") {
+        date.setFullYear(date.getFullYear() + valToAdd);
+    }
+    return date;
+}
+functionsfactory_FunctionFactory.Instance.register("dateAdd", dateAdd);
 function isContainerReadyCore(container) {
     if (!container)
         return false;
@@ -11781,9 +11805,15 @@ var list_ListModel = /** @class */ (function (_super) {
                 .append(itemValue.css)
                 .toString();
         };
-        _this.getItemIndent = function (itemValue) {
+        // public getItemIndent = (itemValue: any) => {
+        //   const level: number = itemValue.level || 0;
+        //   return (level + 1) * ListModel.INDENT + "px";
+        // };
+        _this.getItemStyle = function (itemValue) {
             var level = itemValue.level || 0;
-            return (level + 1) * ListModel.INDENT + "px";
+            return {
+                "--sjs-list-item-level": level + 1
+            };
         };
         if (Object.keys(items).indexOf("items") !== -1) {
             var options_1 = items;
@@ -12699,13 +12729,14 @@ var action_BaseAction = /** @class */ (function (_super) {
 
 var action_Action = /** @class */ (function (_super) {
     action_extends(Action, _super);
-    function Action(innerItem) {
+    function Action(innerItemData) {
         var _this = _super.call(this) || this;
-        _this.innerItem = innerItem;
         _this.locTitleChanged = function () {
             var val = _this.locTitle.renderedHtml;
             _this.setPropertyValue("_title", !!val ? val : undefined);
         };
+        var innerItem = (innerItemData instanceof Action) ? innerItemData.innerItem : innerItemData;
+        _this.innerItem = innerItem;
         _this.locTitle = !!innerItem ? innerItem["locTitle"] : null;
         //Object.assign(this, item) to support IE11
         if (!!innerItem) {
@@ -13662,7 +13693,13 @@ var survey_element_SurveyElementCore = /** @class */ (function (_super) {
     Object.defineProperty(SurveyElementCore.prototype, "isPage", {
         /**
          * Returns `true` if the survey element is a page.
-         * @see Base.getType
+         *
+         * This property returns `false` for [`PageModel`](https://surveyjs.io/form-library/documentation/api-reference/page-model) objects in the following cases:
+         *
+         * - `SurveyModel`'s [`questionsOnPageMode`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#questionsOnPageMode) is set to `"singlePage"`.
+         * - The page is included in a [preview of given answers](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#preview-page).
+         *
+         * In those cases, the survey creates an internal `PageModel` object to show all questions on one page, and all regular pages become panels.
          */
         get: function () { return false; },
         enumerable: false,
@@ -13670,8 +13707,14 @@ var survey_element_SurveyElementCore = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyElementCore.prototype, "isPanel", {
         /**
-         * Returns `true` if the survey element is a panel.
-         * @see Base.getType
+         * Returns `true` if the survey element is a panel or acts as one.
+         *
+         * This property returns `true` for `PageModel` objects in the following cases:
+         *
+         * - `SurveyModel`'s [`questionsOnPageMode`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#questionsOnPageMode) is set to `"singlePage"`.
+         * - The page is included in a [preview of given answers](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#preview-page).
+         *
+         * In those cases, the survey creates an internal `PageModel` object to show all questions on one page, and all regular pages become panels.
          */
         get: function () { return false; },
         enumerable: false,
@@ -13680,7 +13723,6 @@ var survey_element_SurveyElementCore = /** @class */ (function (_super) {
     Object.defineProperty(SurveyElementCore.prototype, "isQuestion", {
         /**
          * Returns `true` if the survey element is a question.
-         * @see Base.getType
          */
         get: function () { return false; },
         enumerable: false,
@@ -13689,7 +13731,6 @@ var survey_element_SurveyElementCore = /** @class */ (function (_super) {
     Object.defineProperty(SurveyElementCore.prototype, "isSurvey", {
         /**
          * Returns `true` if the element is a survey.
-         * @see Base.getType
          */
         get: function () { return false; },
         enumerable: false,
@@ -14448,9 +14489,11 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
     SurveyElement.prototype.createCssClassesValue = function () {
         var res = this.calcCssClasses(this.css);
         this.setPropertyValue("cssClassesValue", res);
+        this.onCalcCssClasses(res);
         this.updateElementCssCore(this.cssClassesValue);
         return res;
     };
+    SurveyElement.prototype.onCalcCssClasses = function (classes) { };
     Object.defineProperty(SurveyElement.prototype, "cssClasses", {
         /**
          * Returns an object in which keys are UI elements and values are CSS classes applied to them.
@@ -14704,7 +14747,7 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
     SurveyElement.prototype.getPage = function (parent) {
         while (parent && parent.parent)
             parent = parent.parent;
-        if (parent && parent.getType() == "page")
+        if (parent && parent.isPage)
             return parent;
         return null;
     };
@@ -14756,7 +14799,7 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyElement.prototype, "hasParent", {
         get: function () {
-            return (this.parent && !this.parent.isPage && (!this.parent.originalPage)) || (this.parent === undefined);
+            return (this.parent && !this.parent.isPage) || (this.parent === undefined);
         },
         enumerable: false,
         configurable: true
@@ -14943,9 +14986,18 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
             }
         }
         if (Object.keys(style).length == 0) {
-            var minWidth = this.minWidth;
-            if (minWidth != "auto")
+            var minWidth = "" + this.minWidth;
+            if (!!minWidth && minWidth != "auto") {
+                if (minWidth.indexOf("px") != -1 && this.survey) {
+                    minWidth = minWidth.replace("px", "");
+                    var minWidthNum = parseFloat(minWidth);
+                    if (!isNaN(minWidthNum)) {
+                        minWidth = minWidthNum * this.survey.widthScale / 100;
+                        minWidth = "" + minWidth + "px";
+                    }
+                }
                 minWidth = "min(100%, " + minWidth + ")";
+            }
             if (this.allowRootStyle && this.renderWidth) {
                 // style["width"] = this.renderWidth;
                 style["flexGrow"] = 1;
@@ -15016,6 +15068,8 @@ var survey_element_SurveyElement = /** @class */ (function (_super) {
         return null;
     };
     SurveyElement.prototype.getCssTitle = function (cssClasses) {
+        if (!cssClasses)
+            return "";
         var isExpandable = this.state !== "default";
         var numInlineLimit = 4;
         return new CssClassBuilder()
@@ -15915,18 +15969,18 @@ function confirmAction(message) {
         return settings.confirmActionFunc(message);
     return confirm(message);
 }
-function confirmActionAsync(message, funcOnYes, funcOnNo, locale, rootElement) {
+function confirmActionAsync(options) {
     var callbackFunc = function (res) {
         if (res)
-            funcOnYes();
-        else if (!!funcOnNo)
-            funcOnNo();
+            options.funcOnYes();
+        else if (!!options.funcOnNo)
+            options.funcOnNo();
     };
     if (!!settings && !!settings.confirmActionAsync) {
-        if (settings.confirmActionAsync(message, callbackFunc, undefined, locale, rootElement))
+        if (settings.confirmActionAsync(options.message, callbackFunc, options))
             return;
     }
-    callbackFunc(confirmAction(message));
+    callbackFunc(confirmAction(options.message));
 }
 function detectIEBrowser() {
     var ua = navigator.userAgent;
@@ -16462,7 +16516,7 @@ var Logger = /** @class */ (function () {
     return Logger;
 }());
 
-function showConfirmDialog(message, callback, applyTitle, locale, rootElement) {
+function showConfirmDialog(message, callback, options) {
     var locStr = new localizablestring_LocalizableString(undefined);
     var popupViewModel = settings.showDialog({
         componentName: "sv-string-viewer",
@@ -16475,17 +16529,17 @@ function showConfirmDialog(message, callback, applyTitle, locale, rootElement) {
             callback(false);
             return false;
         },
-        title: message,
+        title: message || options.message,
         displayMode: "popup",
         isFocusedContent: false,
-        cssClass: "sv-popup--confirm-delete"
-    }, rootElement);
+        cssClass: options.cssClass || "sv-popup--confirm"
+    }, options.rootElement);
     var toolbar = popupViewModel.footerToolbar;
     var applyBtn = toolbar.getActionById("apply");
     var cancelBtn = toolbar.getActionById("cancel");
-    cancelBtn.title = getLocaleString("cancel", locale);
+    cancelBtn.title = getLocaleString("cancel", options.locale);
     cancelBtn.innerCss = "sv-popup__body-footer-item sv-popup__button sd-btn sd-btn--small";
-    applyBtn.title = applyTitle || getLocaleString("ok", locale);
+    applyBtn.title = options.applyTitle || getLocaleString("ok", options.locale);
     applyBtn.innerCss = "sv-popup__body-footer-item sv-popup__button sv-popup__button--danger sd-btn sd-btn--small sd-btn--danger";
     configConfirmDialog(popupViewModel);
     return true;
@@ -17102,8 +17156,8 @@ var settings = {
      * @param message A message to be displayed in the confirm dialog window.
      * @param callback A callback function that should be called with `true` if a user confirms an action or `false` otherwise.
      */
-    confirmActionAsync: function (message, callback, applyTitle, locale, rootElement) {
-        return showConfirmDialog(message, callback, applyTitle, locale, rootElement);
+    confirmActionAsync: function (message, callback, options) {
+        return showConfirmDialog(message, callback, options);
     },
     /**
      * A minimum width value for all survey elements.
@@ -18332,7 +18386,7 @@ var validator_ExpressionValidator = /** @class */ (function (_super) {
     });
     Object.defineProperty(ExpressionValidator.prototype, "isAsync", {
         get: function () {
-            if (!this.ensureConditionRunner())
+            if (!this.ensureConditionRunner(false))
                 return false;
             return this.conditionRunner.isAsync;
         },
@@ -18351,8 +18405,12 @@ var validator_ExpressionValidator = /** @class */ (function (_super) {
         if (name === void 0) { name = null; }
         if (values === void 0) { values = null; }
         if (properties === void 0) { properties = null; }
-        if (!this.ensureConditionRunner())
+        if (!this.expression)
             return null;
+        if (!!this.conditionRunner) {
+            this.conditionRunner.onRunComplete = null;
+        }
+        this.ensureConditionRunner(true);
         this.conditionRunner.onRunComplete = function (res) {
             _this.isRunningValue = false;
             if (!!_this.onAsyncCompleted) {
@@ -18375,14 +18433,15 @@ var validator_ExpressionValidator = /** @class */ (function (_super) {
     ExpressionValidator.prototype.getDefaultErrorText = function (name) {
         return this.getLocalizationFormatString("invalidExpression", this.expression);
     };
-    ExpressionValidator.prototype.ensureConditionRunner = function () {
-        if (!!this.conditionRunner) {
-            this.conditionRunner.expression = this.expression;
-            return true;
-        }
+    ExpressionValidator.prototype.ensureConditionRunner = function (reNew) {
         if (!this.expression)
             return false;
-        this.conditionRunner = new ConditionRunner(this.expression);
+        if (reNew || !this.conditionRunner) {
+            this.conditionRunner = new ConditionRunner(this.expression);
+        }
+        else {
+            this.conditionRunner.expression = this.expression;
+        }
         return true;
     };
     Object.defineProperty(ExpressionValidator.prototype, "expression", {
@@ -20039,13 +20098,16 @@ var question_Question = /** @class */ (function (_super) {
         this.copyCssClasses(classes, css.question);
         this.copyCssClasses(classes.error, css.error);
         this.updateCssClasses(classes, css);
+        return classes;
+    };
+    Question.prototype.onCalcCssClasses = function (classes) {
+        _super.prototype.onCalcCssClasses.call(this, classes);
         if (this.survey) {
             this.survey.updateQuestionCssClasses(this, classes);
         }
         if (this.onUpdateCssClassesCallback) {
             this.onUpdateCssClassesCallback(classes);
         }
-        return classes;
     };
     Object.defineProperty(Question.prototype, "cssRoot", {
         get: function () {
@@ -20231,18 +20293,33 @@ var question_Question = /** @class */ (function (_super) {
             .toString();
     };
     Question.prototype.updateElementCss = function (reNew) {
-        _super.prototype.updateElementCss.call(this, reNew);
-        if (reNew) {
-            this.updateQuestionCss(true);
+        if (this.wasRendered) {
+            _super.prototype.updateElementCss.call(this, reNew);
+            if (reNew) {
+                this.updateQuestionCss(true);
+            }
+        }
+        else {
+            this.isRequireUpdateElements = true;
         }
         this.resetIndents();
     };
+    Question.prototype.onFirstRenderingCore = function () {
+        if (this.isRequireUpdateElements) {
+            this.isRequireUpdateElements = false;
+            this.updateElementCss(true);
+        }
+        _super.prototype.onFirstRenderingCore.call(this);
+    };
     Question.prototype.updateQuestionCss = function (reNew) {
-        if (this.isLoadingFromJson ||
-            !this.survey ||
-            (reNew !== true && !this.cssClassesValue))
+        if (this.isLoadingFromJson || !this.survey)
             return;
-        this.updateElementCssCore(this.cssClasses);
+        if (this.wasRendered) {
+            this.updateElementCssCore(this.cssClasses);
+        }
+        else {
+            this.isRequireUpdateElements = true;
+        }
     };
     Question.prototype.ensureElementCss = function () {
         if (!this.cssClassesValue) {
@@ -31424,10 +31501,9 @@ var question_matrixdropdownbase_QuestionMatrixDropdownModelBase = /** @class */
         if (isDeletingValue) {
             delete rowValue[columnName];
         }
-        for (var i = 0; i < row.cells.length; i++) {
-            var key = row.cells[i].question.getValueName();
-            delete rowValue[key];
-        }
+        row.questions.forEach(function (q) {
+            delete rowValue[q.getValueName()];
+        });
         if (newRowValue) {
             newRowValue = JSON.parse(JSON.stringify(newRowValue));
             for (var key in newRowValue) {
@@ -33518,10 +33594,16 @@ var question_matrixdynamic_QuestionMatrixDynamicModel = /** @class */ (function
             confirmDelete = this.isRequireConfirmOnRowDelete(index);
         }
         if (confirmDelete) {
-            confirmActionAsync(this.confirmDeleteText, function () {
-                _this.removeRowAsync(index, row);
-                onRowRemoved && onRowRemoved();
-            }, undefined, this.getLocale(), this.survey.rootElement);
+            confirmActionAsync({
+                message: this.confirmDeleteText,
+                funcOnYes: function () {
+                    _this.removeRowAsync(index, row);
+                    onRowRemoved && onRowRemoved();
+                },
+                locale: this.getLocale(),
+                rootElement: this.survey.rootElement,
+                cssClass: this.cssClasses.confirmDialog
+            });
             return;
         }
         this.removeRowAsync(index, row);
@@ -34247,7 +34329,8 @@ var defaultV2Css = {
         noPointerEventsMode: "sd-question--no-pointer-events",
         errorsContainer: "sd-element__erbox sd-question__erbox",
         errorsContainerTop: "sd-element__erbox--above-element sd-question__erbox--above-question",
-        errorsContainerBottom: "sd-question__erbox--below-question"
+        errorsContainerBottom: "sd-question__erbox--below-question",
+        confirmDialog: "sd-popup--confirm sv-popup--confirm"
     },
     image: {
         mainRoot: "sd-question sd-question--image",
@@ -36180,7 +36263,6 @@ var panel_spreadArray = (undefined && undefined.__spreadArray) || function (to,
 
 
 
-
 var panel_QuestionRowModel = /** @class */ (function (_super) {
     panel_extends(QuestionRowModel, _super);
     function QuestionRowModel(panel) {
@@ -36783,9 +36865,14 @@ var panel_PanelModelBase = /** @class */ (function (_super) {
     });
     Object.defineProperty(PanelModelBase.prototype, "parent", {
         /**
-         * Returns a survey element (panel or page) that contains this panel and allows you to move this question to a different survey element.
+         * Returns a survey element (panel or page) that contains this panel and allows you to move the panel to a different survey element.
+         *
+         * For `PageModel` objects, the `parent` property is `null`, except in the following cases:
          *
-         * This property is always `null` for the `PageModel` object.
+         * - `SurveyModel`'s [`questionsOnPageMode`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#questionsOnPageMode) is set to `"singlePage"`.
+         * - The page is included in a [preview of given answers](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey#preview-page).
+         *
+         * In those cases, the survey creates an internal `PageModel` object to show all questions on one page, and the `parent` property contains this object.
          */
         get: function () {
             return this.getPropertyValue("parent", null);
@@ -36868,10 +36955,6 @@ var panel_PanelModelBase = /** @class */ (function (_super) {
         configurable: true
     });
     Object.defineProperty(PanelModelBase.prototype, "isPanel", {
-        /**
-         * Returns `true` if the survey element is a panel.
-         * @see Base.getType
-         */
         get: function () {
             return false;
         },
@@ -37613,11 +37696,11 @@ var panel_PanelModelBase = /** @class */ (function (_super) {
     PanelModelBase.prototype.updateRows = function () {
         if (this.isLoadingFromJson)
             return;
-        for (var i = 0; i < this.elements.length; i++) {
-            if (this.elements[i].isPanel) {
-                this.elements[i].updateRows();
+        this.getElementsForRows().forEach(function (el) {
+            if (el.isPanel) {
+                el.updateRows();
             }
-        }
+        });
         this.onRowsChanged();
     };
     Object.defineProperty(PanelModelBase.prototype, "rows", {
@@ -37726,7 +37809,9 @@ var panel_PanelModelBase = /** @class */ (function (_super) {
         var _this = this;
         var survey = this.survey;
         var fireNotification = this.canFireAddRemoveNotifications(element);
-        element.setSurveyImpl(this.surveyImpl);
+        if (!!this.surveyImpl) {
+            element.setSurveyImpl(this.surveyImpl);
+        }
         element.parent = this;
         this.markQuestionListDirty();
         if (this.canBuildRows()) {
@@ -37752,8 +37837,8 @@ var panel_PanelModelBase = /** @class */ (function (_super) {
     };
     PanelModelBase.prototype.onRemoveElement = function (element) {
         element.parent = null;
+        this.unregisterElementPropertiesChanged(element);
         this.markQuestionListDirty();
-        element.unregisterPropertyChangedHandlers(["visible", "isVisible", "startWithNewLine"], this.id);
         this.updateRowsOnElementRemoved(element);
         if (this.isRandomizing)
             return;
@@ -37762,6 +37847,9 @@ var panel_PanelModelBase = /** @class */ (function (_super) {
             this.removeElementCallback(element);
         this.onElementVisibilityChanged(this);
     };
+    PanelModelBase.prototype.unregisterElementPropertiesChanged = function (element) {
+        element.unregisterPropertyChangedHandlers(["visible", "isVisible", "startWithNewLine"], this.id);
+    };
     PanelModelBase.prototype.onRemoveElementNotifySurvey = function (element) {
         if (!this.canFireAddRemoveNotifications(element))
             return;
@@ -37806,19 +37894,21 @@ var panel_PanelModelBase = /** @class */ (function (_super) {
     PanelModelBase.prototype.buildRows = function () {
         if (!this.canBuildRows())
             return [];
-        var result = new Array();
-        for (var i = 0; i < this.elements.length; i++) {
-            var el = this.elements[i];
+        var res = new Array();
+        var els = this.getElementsForRows();
+        for (var i = 0; i < els.length; i++) {
+            var el = els[i];
             var isNewRow = i == 0 || el.startWithNewLine;
-            var row = isNewRow ? this.createRowAndSetLazy(result.length) : result[result.length - 1];
+            var row = isNewRow ? this.createRowAndSetLazy(res.length) : res[res.length - 1];
             if (isNewRow)
-                result.push(row);
+                res.push(row);
             row.addElement(el);
         }
-        for (var i = 0; i < result.length; i++) {
-            result[i].updateVisible();
-        }
-        return result;
+        res.forEach(function (row) { return row.updateVisible(); });
+        return res;
+    };
+    PanelModelBase.prototype.getElementsForRows = function () {
+        return this.elements;
     };
     PanelModelBase.prototype.getDragDropInfo = function () {
         var page = this.getPage(this.parent);
@@ -38381,10 +38471,13 @@ var panel_PanelModelBase = /** @class */ (function (_super) {
             }
             this.rows.splice(0, this.rows.length);
         }
+        this.disposeElements();
+        this.elements.splice(0, this.elements.length);
+    };
+    PanelModelBase.prototype.disposeElements = function () {
         for (var i = 0; i < this.elements.length; i++) {
             this.elements[i].dispose();
         }
-        this.elements.splice(0, this.elements.length);
     };
     PanelModelBase.panelCounter = 100;
     panel_decorate([
@@ -38437,7 +38530,7 @@ var panel_PanelModel = /** @class */ (function (_super) {
     });
     PanelModel.prototype.getSurvey = function (live) {
         if (live === void 0) { live = false; }
-        if (live) {
+        if (live && this.isPanel) {
             return !!this.parent ? this.parent.getSurvey(live) : null;
         }
         return _super.prototype.getSurvey.call(this, live);
@@ -38588,6 +38681,8 @@ var panel_PanelModel = /** @class */ (function (_super) {
         return locTitleValue;
     };
     PanelModel.prototype.beforeSetVisibleIndex = function (index) {
+        if (this.isPage)
+            return _super.prototype.beforeSetVisibleIndex.call(this, index);
         var visibleIndex = -1;
         if (this.showNumber && (this.isDesignMode || !this.locTitle.isEmpty || this.hasParentInQuestionIndex())) {
             visibleIndex = index;
@@ -38619,7 +38714,7 @@ var panel_PanelModel = /** @class */ (function (_super) {
         }
     };
     PanelModel.prototype.getRenderedTitle = function (str) {
-        if (!str) {
+        if (this.isPanel && !str) {
             if (this.isCollapsed || this.isExpanded)
                 return this.name;
             if (this.isDesignMode)
@@ -38744,11 +38839,7 @@ var panel_PanelModel = /** @class */ (function (_super) {
         return this.footerToolbarValue;
     };
     Object.defineProperty(PanelModel.prototype, "hasEditButton", {
-        get: function () {
-            if (this.survey && this.survey.state === "preview")
-                return (this.parent && this.parent instanceof page_PageModel);
-            return false;
-        },
+        get: function () { return false; },
         enumerable: false,
         configurable: true
     });
@@ -38757,19 +38848,16 @@ var panel_PanelModel = /** @class */ (function (_super) {
             return;
         this.survey.cancelPreviewByPage(this);
     };
-    PanelModel.prototype.canShowTitle = function (survey) {
-        var page = this.originalPage;
-        if (!!page)
-            return page.canShowTitle(survey);
-        return _super.prototype.canShowTitle.call(this, survey);
-    };
     Object.defineProperty(PanelModel.prototype, "cssTitle", {
         get: function () {
-            return this.getCssTitle(this.cssClasses.panel);
+            return this.getCssPanelTitle();
         },
         enumerable: false,
         configurable: true
     });
+    PanelModel.prototype.getCssPanelTitle = function () {
+        return this.getCssTitle(this.cssClasses.panel);
+    };
     PanelModel.prototype.getCssTitleExpandableSvg = function () {
         if (this.state === "default")
             return null;
@@ -38783,6 +38871,8 @@ var panel_PanelModel = /** @class */ (function (_super) {
         configurable: true
     });
     PanelModel.prototype.getCssError = function (cssClasses) {
+        if (this.isPage)
+            return _super.prototype.getCssError.call(this, cssClasses);
         var builder = new CssClassBuilder()
             .append(_super.prototype.getCssError.call(this, cssClasses))
             .append(cssClasses.panel.errorsContainer);
@@ -38813,10 +38903,7 @@ var panel_PanelModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(PanelModel.prototype, "showPanelAsPage", {
         get: function () {
-            var panel = this;
-            if (!!panel.originalPage)
-                return true;
-            return panel.survey.isShowingPreview && panel.survey.isSinglePage && !!panel.parent && !!panel.parent.originalPage;
+            return false;
         },
         enumerable: false,
         configurable: true
@@ -38856,7 +38943,9 @@ var panel_PanelModel = /** @class */ (function (_super) {
     PanelModel.prototype.afterRenderCore = function (element) {
         var _a;
         _super.prototype.afterRenderCore.call(this, element);
-        (_a = this.survey) === null || _a === void 0 ? void 0 : _a.afterRenderPanel(this, element);
+        if (this.isPanel) {
+            (_a = this.survey) === null || _a === void 0 ? void 0 : _a.afterRenderPanel(this, element);
+        }
     };
     return PanelModel;
 }(panel_PanelModelBase));
@@ -38904,27 +38993,17 @@ Serializer.addClass("panelbase", [
     return new panel_PanelModelBase();
 });
 Serializer.addClass("panel", [
-    {
-        name: "state",
-        default: "default",
-        choices: ["default", "collapsed", "expanded"],
-    },
+    { name: "state", default: "default", choices: ["default", "collapsed", "expanded"] },
     { name: "isRequired:switch", overridingProperty: "requiredIf" },
-    {
-        name: "requiredErrorText:text",
-        serializationProperty: "locRequiredErrorText",
-    },
+    { name: "requiredErrorText:text", serializationProperty: "locRequiredErrorText" },
     { name: "startWithNewLine:boolean", default: true },
-    "width",
+    { name: "width" },
     { name: "minWidth", defaultFunc: function () { return "auto"; } },
     { name: "maxWidth", defaultFunc: function () { return settings.maxWidth; } },
-    {
-        name: "colSpan:number", visible: false,
-        onSerializeValue: function (obj) { return obj.getPropertyValue("colSpan"); },
-    },
+    { name: "colSpan:number", visible: false, onSerializeValue: function (obj) { return obj.getPropertyValue("colSpan"); } },
     {
         name: "effectiveColSpan:number", minValue: 1, isSerializable: false,
-        visibleIf: function (obj) { return !!obj && !!obj.survey && obj.survey.gridLayoutEnabled; }
+        visibleIf: function (obj) { return !!obj.survey && obj.survey.gridLayoutEnabled; }
     },
     { name: "innerIndent:number", default: 0, choices: [0, 1, 2, 3] },
     { name: "indent:number", default: 0, choices: [0, 1, 2, 3], visible: false },
@@ -38944,13 +39023,9 @@ Serializer.addClass("panel", [
                 : [];
         },
     },
-    "showNumber:boolean",
-    {
-        name: "showQuestionNumbers",
-        default: "default",
-        choices: ["default", "onpanel", "off"],
-    },
-    "questionStartIndex",
+    { name: "showNumber:boolean" },
+    { name: "showQuestionNumbers", default: "default", choices: ["default", "onpanel", "off"] },
+    { name: "questionStartIndex", visibleIf: function (obj) { return obj.isPanel; } },
     { name: "allowAdaptiveActions:boolean", default: true, visible: false },
 ], function () {
     return new panel_PanelModel();
@@ -39226,12 +39301,61 @@ var page_PageModel = /** @class */ (function (_super) {
         return this.name;
     };
     Object.defineProperty(PageModel.prototype, "isPage", {
+        get: function () {
+            return !this.isPanel;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PageModel.prototype, "isPanel", {
+        get: function () {
+            return !!this.parent;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PageModel.prototype, "showPanelAsPage", {
         get: function () {
             return true;
         },
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(PageModel.prototype, "hasEditButton", {
+        get: function () {
+            return this.isPanel && this.survey && this.survey.state === "preview"
+                && !!this.parent && !this.parent.isPanel;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PageModel.prototype.getElementsForRows = function () {
+        var _a;
+        var q = (_a = this.survey) === null || _a === void 0 ? void 0 : _a.currentSingleQuestion;
+        if (!!q) {
+            if (q.page === this)
+                return [q];
+            return [];
+        }
+        return _super.prototype.getElementsForRows.call(this);
+    };
+    PageModel.prototype.disposeElements = function () {
+        if (!this.isPageContainer) {
+            _super.prototype.disposeElements.call(this);
+        }
+    };
+    PageModel.prototype.onRemoveElement = function (element) {
+        if (this.isPageContainer) {
+            element.parent = null;
+            this.unregisterElementPropertiesChanged(element);
+        }
+        else {
+            _super.prototype.onRemoveElement.call(this, element);
+        }
+    };
+    PageModel.prototype.getTemplate = function () {
+        return this.isPanel ? "panel" : _super.prototype.getTemplate.call(this);
+    };
     Object.defineProperty(PageModel.prototype, "no", {
         get: function () {
             if (!this.canShowPageNumber() || !this.survey)
@@ -39369,6 +39493,8 @@ var page_PageModel = /** @class */ (function (_super) {
         configurable: true
     });
     PageModel.prototype.calcCssClasses = function (css) {
+        if (this.isPanel)
+            return _super.prototype.calcCssClasses.call(this, css);
         var classes = { page: {}, error: {}, pageTitle: "", pageDescription: "", row: "", rowMultiple: "", pageRow: "", rowCompact: "", rowEnter: "", rowLeave: "", rowDelayedEnter: "", rowReplace: "" };
         this.copyCssClasses(classes.page, css.page);
         this.copyCssClasses(classes.error, css.error);
@@ -39407,20 +39533,18 @@ var page_PageModel = /** @class */ (function (_super) {
         }
         return classes;
     };
-    Object.defineProperty(PageModel.prototype, "cssTitle", {
-        get: function () {
-            if (!this.cssClasses.page)
-                return "";
-            return new CssClassBuilder()
-                .append(this.cssClasses.page.title)
-                .toString();
-        },
-        enumerable: false,
-        configurable: true
-    });
+    PageModel.prototype.getCssPanelTitle = function () {
+        if (this.isPanel)
+            return _super.prototype.getCssPanelTitle.call(this);
+        if (!this.cssClasses.page)
+            return "";
+        return new CssClassBuilder()
+            .append(this.cssClasses.page.title)
+            .toString();
+    };
     Object.defineProperty(PageModel.prototype, "cssRoot", {
         get: function () {
-            if (!this.cssClasses.page || !this.survey)
+            if (this.isPanel || !this.cssClasses.page || !this.survey)
                 return "";
             return new CssClassBuilder()
                 .append(this.cssClasses.page.root)
@@ -39432,6 +39556,8 @@ var page_PageModel = /** @class */ (function (_super) {
         configurable: true
     });
     PageModel.prototype.getCssError = function (cssClasses) {
+        if (this.isPanel)
+            return _super.prototype.getCssError.call(this, cssClasses);
         return new CssClassBuilder()
             .append(_super.prototype.getCssError.call(this, cssClasses))
             .append(cssClasses.page.errorsContainer).toString();
@@ -39608,7 +39734,7 @@ var page_PageModel = /** @class */ (function (_super) {
         jsonobject_property({ defaultValue: -1, onSet: function (val, target) { return target.onNumChanged(val); } })
     ], PageModel.prototype, "num", void 0);
     return PageModel;
-}(panel_PanelModelBase));
+}(panel_PanelModel));
 
 Serializer.addClass("page", [
     {
@@ -39633,9 +39759,25 @@ Serializer.addClass("page", [
     },
     { name: "title:text", serializationProperty: "locTitle" },
     { name: "description:text", serializationProperty: "locDescription" },
+    { name: "state", visible: false },
+    { name: "isRequired", visible: false },
+    { name: "startWithNewLine", visible: false },
+    { name: "width", visible: false },
+    { name: "minWidth", visible: false },
+    { name: "maxWidth", visible: false },
+    { name: "colSpan", visible: false, isSerializable: false },
+    { name: "effectiveColSpan:number", visible: false, isSerializable: false },
+    { name: "innerIndent", visible: false },
+    { name: "indent", visible: false },
+    { name: "page", visible: false, isSerializable: false },
+    { name: "showNumber", visible: false },
+    { name: "showQuestionNumbers", visible: false },
+    { name: "questionStartIndex", visible: false },
+    { name: "allowAdaptiveActions", visible: false },
+    { name: "requiredErrorText:text", serializationProperty: "locRequiredErrorText", visible: false },
 ], function () {
     return new page_PageModel();
-}, "panelbase");
+}, "panel");
 
 // CONCATENATED MODULE: ./packages/survey-core/src/progress-buttons.ts
 var progress_buttons_extends = (undefined && undefined.__extends) || (function () {
@@ -39877,16 +40019,27 @@ var ProgressButtonsResponsivityManager = /** @class */ (function () {
 
 
 
-
 function tryFocusPage(survey, panel) {
     if (survey.isDesignMode)
         return true;
     panel.focusFirstQuestion();
     return true;
 }
+function getPage(question) {
+    if (!!question.parentQuestion) {
+        return getPage(question.parentQuestion);
+    }
+    var parent = question.parent;
+    while (parent && parent.getType() !== "page" && parent.parent) {
+        parent = parent.parent;
+    }
+    if (parent && parent.getType() === "page") {
+        return parent;
+    }
+    return null;
+}
 function createTOCListModel(survey, onAction) {
     var items = getTOCItems(survey, onAction);
-    var selectedItem = items.filter(function (i) { return !!survey.currentPage && i.id === survey.currentPage.name; })[0] || items[0];
     var listOptions = {
         items: items,
         onSelectionChanged: function (item) {
@@ -39894,15 +40047,20 @@ function createTOCListModel(survey, onAction) {
                 listModel.selectedItem = item;
             }
         },
-        allowSelection: true,
         searchEnabled: false,
         locOwner: survey,
-        selectedItem: selectedItem
     };
     var listModel = new list_ListModel(listOptions);
     listModel.allowSelection = false;
+    var updateSelectedItem = function (currentPage, defaultSelection) {
+        listModel.selectedItem = !!currentPage && listModel.actions.filter(function (i) { return i.id === currentPage.name; })[0] || defaultSelection;
+    };
+    updateSelectedItem(survey.currentPage, items[0]);
     survey.onCurrentPageChanged.add(function (s, o) {
-        listModel.selectedItem = listModel.actions.filter(function (i) { return !!survey.currentPage && i.id === survey.currentPage.name; })[0];
+        updateSelectedItem(survey.currentPage);
+    });
+    survey.onFocusInQuestion.add(function (s, o) {
+        updateSelectedItem(getPage(o.question));
     });
     survey.registerFunctionOnPropertyValueChanged("pages", function () {
         listModel.setItems(getTOCItems(survey, onAction));
@@ -39910,8 +40068,7 @@ function createTOCListModel(survey, onAction) {
     return listModel;
 }
 function getTOCItems(survey, onAction) {
-    var _a;
-    var pagesSource = survey.questionsOnPageMode === "singlePage" ? (_a = survey.pages[0]) === null || _a === void 0 ? void 0 : _a.elements : survey.pages;
+    var pagesSource = survey.pages;
     var items = (pagesSource || []).map(function (page) {
         return new action_Action({
             id: page.name,
@@ -39919,7 +40076,7 @@ function getTOCItems(survey, onAction) {
             action: function () {
                 DomDocumentHelper.activeElementBlur();
                 !!onAction && onAction();
-                if (page instanceof page_PageModel) {
+                if (page.isPage) {
                     return survey.tryNavigateToPage(page);
                 }
                 return tryFocusPage(survey, page);
@@ -43632,6 +43789,8 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         get: function () {
             if (this.isDesignMode)
                 return this.pages;
+            if (!!this.pageContainerValue && (this.isShowingPreview || this.isSinglePage))
+                return [this.pageContainerValue];
             var result = new Array();
             for (var i = 0; i < this.pages.length; i++) {
                 if (this.isPageInVisibleList(this.pages[i])) {
@@ -43765,7 +43924,7 @@ var survey_SurveyModel = /** @class */ (function (_super) {
             return false;
         if (index === this.currentPageNo)
             return false;
-        if (index < this.currentPageNo || this.isValidateOnComplete) {
+        if (index < this.currentPageNo || this.checkErrorsMode === "onComplete" || this.validationAllowSwitchPages) {
             this.currentPageNo = index;
             return true;
         }
@@ -44097,6 +44256,10 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         this.onFirstPageIsStartedChanged();
         if (goToFirstPage) {
             this.currentPage = this.firstVisiblePage;
+            if (this.currentSingleQuestion) {
+                var questions = this.getAllQuestions(true);
+                this.currentSingleQuestion = questions.length > 0 ? questions[0] : undefined;
+            }
         }
         if (clearData) {
             this.updateValuesWithDefaults();
@@ -44134,7 +44297,7 @@ var survey_SurveyModel = /** @class */ (function (_super) {
     SurveyModel.prototype.currentPageChanged = function (newValue, oldValue) {
         this.notifyQuestionsOnHidingContent(oldValue);
         var options = this.createPageChangeEventOptions(newValue, oldValue);
-        if (oldValue && !oldValue.passed) {
+        if (oldValue && !oldValue.isDisposed && !oldValue.passed) {
             if (oldValue.validate(false)) {
                 oldValue.passed = true;
             }
@@ -44145,9 +44308,9 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         this.onCurrentPageChanged.fire(this, options);
     };
     SurveyModel.prototype.notifyQuestionsOnHidingContent = function (page) {
-        if (!page)
-            return;
-        page.questions.forEach(function (q) { return q.onHidingContent(); });
+        if (page && !page.isDisposed) {
+            page.questions.forEach(function (q) { return q.onHidingContent(); });
+        }
     };
     SurveyModel.prototype.createPageChangeEventOptions = function (newValue, oldValue) {
         var diff = !!newValue && !!oldValue ? newValue.visibleIndex - oldValue.visibleIndex : 0;
@@ -44383,6 +44546,30 @@ var survey_SurveyModel = /** @class */ (function (_super) {
             return false;
         return this.doCurrentPageComplete(false);
     };
+    SurveyModel.prototype.performNext = function () {
+        var q = this.currentSingleQuestion;
+        if (!q)
+            return this.nextPage();
+        if (!q.validate(true))
+            return false;
+        var questions = this.getAllQuestions(true);
+        var index = questions.indexOf(q);
+        if (index < 0 || index === questions.length - 1)
+            return false;
+        this.currentSingleQuestion = questions[index + 1];
+        return true;
+    };
+    SurveyModel.prototype.performPrevious = function () {
+        var q = this.currentSingleQuestion;
+        if (!q)
+            return this.prevPage();
+        var questions = this.getAllQuestions(true);
+        var index = questions.indexOf(q);
+        if (index === 0)
+            return false;
+        this.currentSingleQuestion = questions[index - 1];
+        return true;
+    };
     SurveyModel.prototype.hasErrorsOnNavigate = function (doComplete) {
         var _this = this;
         if (!this.isEditMode || this.ignoreValidation)
@@ -44712,9 +44899,9 @@ var survey_SurveyModel = /** @class */ (function (_super) {
     };
     SurveyModel.prototype.nextPageUIClick = function () {
         if (!!this.mouseDownPage && this.mouseDownPage !== this.activePage)
-            return;
+            return false;
         this.mouseDownPage = null;
-        return this.nextPage();
+        return this.performNext();
     };
     SurveyModel.prototype.nextPageMouseDown = function () {
         this.mouseDownPage = this.activePage;
@@ -44758,7 +44945,7 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         this.isShowingPreview = false;
     };
     SurveyModel.prototype.cancelPreviewByPage = function (panel) {
-        this.cancelPreview(panel["originalPage"]);
+        this.cancelPreview(panel);
     };
     SurveyModel.prototype.doCurrentPageComplete = function (doComplete) {
         if (this.isValidatingOnServer)
@@ -44788,6 +44975,16 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SurveyModel.prototype, "isSingleVisibleQuestion", {
+        get: function () {
+            return this.isSingleVisibleQuestionVal(this.questionsOnPageMode);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyModel.prototype.isSingleVisibleQuestionVal = function (val) {
+        return val === "questionPerPage" || val === "questionOnPage";
+    };
     Object.defineProperty(SurveyModel.prototype, "questionsOnPageMode", {
         /**
          * Specifies how to distribute survey elements between pages.
@@ -44863,25 +45060,54 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         this.pageVisibilityChanged(this.pages[0], !this.isStartedState);
     };
     SurveyModel.prototype.onShowingPreviewChanged = function () {
+        this.updatePagesContainer();
+    };
+    SurveyModel.prototype.createRootPage = function (name, pages) {
+        var container = Serializer.createClass("page");
+        container.name = name;
+        container.isPageContainer = true;
+        pages.forEach(function (page) {
+            if (!page.isStartPage) {
+                container.addElement(page);
+            }
+        });
+        return container;
+    };
+    SurveyModel.prototype.disposeContainerPage = function () {
+        var cPage = this.pageContainerValue;
+        var elements = [].concat(cPage.elements);
+        elements.forEach(function (el) { return cPage.removeElement(el); });
+        cPage.dispose();
+        this.pageContainerValue = undefined;
+    };
+    SurveyModel.prototype.updatePagesContainer = function () {
         if (this.isDesignMode)
             return;
-        if (this.isShowingPreview) {
-            this.runningPages = this.pages.slice(0, this.pages.length);
-            this.setupPagesForPageModes(true, false);
-        }
-        else {
-            if (this.runningPages) {
-                this.restoreOriginalPages(this.runningPages);
+        this.getAllQuestions().forEach(function (q) { return q.updateElementVisibility(); });
+        this.setPropertyValue("currentPage", undefined);
+        var singleName = "single-page";
+        var previewName = "preview-page";
+        var rootPage = undefined;
+        if (this.isSinglePage) {
+            var cPage = this.pageContainerValue;
+            if (cPage && cPage.name === previewName) {
+                rootPage = cPage.elements[0];
+                this.disposeContainerPage();
+            }
+            else {
+                rootPage = this.createRootPage(singleName, this.pages);
             }
-            this.runningPages = undefined;
         }
-        this.runConditions();
-        this.updateAllElementsVisibility(this.pages);
-        this.updateVisibleIndexes();
         if (this.isShowingPreview) {
-            this.currentPageNo = 0;
+            rootPage = this.createRootPage(previewName, rootPage ? [rootPage] : this.pages);
         }
-        else {
+        if (rootPage) {
+            rootPage.setSurveyImpl(this);
+            this.pageContainerValue = rootPage;
+            this.currentPage = rootPage;
+        }
+        if (!this.isSinglePage && !this.isShowingPreview) {
+            this.disposeContainerPage();
             var curPage = this.gotoPageFromPreview;
             this.gotoPageFromPreview = null;
             if (helpers_Helpers.isValueEmpty(curPage) && this.visiblePageCount > 0) {
@@ -44893,110 +45119,62 @@ var survey_SurveyModel = /** @class */ (function (_super) {
                 this.changeCurrentPageFromPreview = false;
             }
         }
+        if (!this.currentPage && this.visiblePageCount > 0) {
+            this.currentPage = this.visiblePages[0];
+        }
+        this.pages.forEach(function (page) {
+            if (page.hasShown) {
+                page.updateElementCss(true);
+            }
+        });
+        this.updateButtonsVisibility();
     };
-    SurveyModel.prototype.onQuestionsOnPageModeChanged = function (oldValue, isFirstLoad) {
-        if (isFirstLoad === void 0) { isFirstLoad = false; }
+    Object.defineProperty(SurveyModel.prototype, "currentSingleQuestion", {
+        get: function () { return this.currentSingleQuestionValue; },
+        set: function (val) {
+            if (val !== this.currentSingleQuestion) {
+                this.currentSingleQuestionValue = val;
+                if (!!val) {
+                    var page = val.page;
+                    page.updateRows();
+                    if (page !== this.currentPage) {
+                        this.currentPage = page;
+                    }
+                    else {
+                        if (this.focusFirstQuestionAutomatic) {
+                            val.focus();
+                        }
+                    }
+                    this.updateButtonsVisibility();
+                }
+                else {
+                    this.visiblePages.forEach(function (page) { return page.updateRows(); });
+                }
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyModel.prototype.onQuestionsOnPageModeChanged = function (oldValue) {
         if (this.isShowingPreview)
             return;
-        if (this.questionsOnPageMode == "standard" || this.isDesignMode) {
-            if (this.originalPages) {
-                this.restoreOriginalPages(this.originalPages);
-            }
-            this.originalPages = undefined;
+        this.currentSingleQuestion = undefined;
+        if (oldValue === "singlePage") {
+            this.updatePagesContainer();
         }
-        else {
-            if (!oldValue || oldValue == "standard") {
-                this.originalPages = this.pages.slice(0, this.pages.length);
-            }
-            this.setupPagesForPageModes(this.isSinglePage, isFirstLoad);
+        if (this.isSinglePage) {
+            this.updatePagesContainer();
         }
-        this.runConditions();
-        this.updateVisibleIndexes();
-    };
-    SurveyModel.prototype.restoreOriginalPages = function (originalPages) {
-        this.questionHashesClear();
-        this.pages.splice(0, this.pages.length);
-        for (var i = 0; i < originalPages.length; i++) {
-            var page = originalPages[i];
-            page.setWasShown(false);
-            this.pages.push(page);
+        if (this.isSingleVisibleQuestion) {
+            var questions = this.getAllQuestions(true);
+            if (questions.length > 0) {
+                this.currentSingleQuestion = questions[0];
+            }
         }
     };
     SurveyModel.prototype.getPageStartIndex = function () {
         return this.firstPageIsStarted && this.pages.length > 0 ? 1 : 0;
     };
-    SurveyModel.prototype.setupPagesForPageModes = function (isSinglePage, isFirstLoad) {
-        var _this = this;
-        this.questionHashesClear();
-        if (this.firstPageIsStarted && this.pages.length > 0) {
-            this.pages[0].questions.forEach(function (q) { return _this.questionHashesAdded(q); });
-        }
-        this.isLockingUpdateOnPageModes = !isFirstLoad;
-        var startIndex = this.getPageStartIndex();
-        _super.prototype.startLoadingFromJson.call(this);
-        var newPages = this.createPagesForQuestionOnPageMode(isSinglePage, startIndex);
-        var deletedLen = this.pages.length - startIndex;
-        this.pages.splice(startIndex, deletedLen);
-        for (var i = 0; i < newPages.length; i++) {
-            this.pages.push(newPages[i]);
-        }
-        _super.prototype.endLoadingFromJson.call(this);
-        for (var i = 0; i < newPages.length; i++) {
-            newPages[i].setSurveyImpl(this, true);
-        }
-        this.doElementsOnLoad();
-        this.updateCurrentPage();
-        this.isLockingUpdateOnPageModes = false;
-    };
-    SurveyModel.prototype.createPagesForQuestionOnPageMode = function (isSinglePage, startIndex) {
-        if (isSinglePage) {
-            return [this.createSinglePage(startIndex)];
-        }
-        return this.createPagesForEveryQuestion(startIndex);
-    };
-    SurveyModel.prototype.createSinglePage = function (startIndex) {
-        var single = this.createNewPage("all");
-        single.setSurveyImpl(this);
-        for (var i = startIndex; i < this.pages.length; i++) {
-            var page = this.pages[i];
-            var panel = Serializer.createClass("panel");
-            panel.originalPage = page;
-            single.addPanel(panel);
-            var json = new jsonobject_JsonObject().toJsonObject(page);
-            new jsonobject_JsonObject().toObject(json, panel);
-        }
-        return single;
-    };
-    SurveyModel.prototype.createPagesForEveryQuestion = function (startIndex) {
-        var res = [];
-        for (var i = startIndex; i < this.pages.length; i++) {
-            var originalPage = this.pages[i];
-            // Initialize randomization
-            originalPage.setWasShown(true);
-            for (var j = 0; j < originalPage.elements.length; j++) {
-                var originalElement = originalPage.elements[j];
-                var element = Serializer.createClass(originalElement.getType());
-                if (!element)
-                    continue;
-                var jsonObj = new jsonobject_JsonObject();
-                //Deserialize page properties only, excluding elements
-                jsonObj.lightSerializing = true;
-                var pageJson = jsonObj.toJsonObject(originalPage);
-                var page = Serializer.createClass(originalPage.getType());
-                page.fromJSON(pageJson);
-                page.name = originalElement.name;
-                page.setSurveyImpl(this);
-                res.push(page);
-                var json = new jsonobject_JsonObject().toJsonObject(originalElement);
-                page.addElement(element);
-                new jsonobject_JsonObject().toObject(json, element);
-                for (var k = 0; k < page.questions.length; k++) {
-                    this.questionHashesAdded(page.questions[k]);
-                }
-            }
-        }
-        return res;
-    };
     Object.defineProperty(SurveyModel.prototype, "isFirstPage", {
         /**
          * Indicates whether the [current page](#currentPage) is the first page.
@@ -45062,30 +45240,73 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SurveyModel.prototype, "isFirstElement", {
+        get: function () {
+            return this.getPropertyValue("isFirstElement");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyModel.prototype, "isLastElement", {
+        get: function () {
+            return this.getPropertyValue("isLastElement");
+        },
+        enumerable: false,
+        configurable: true
+    });
     SurveyModel.prototype.updateIsFirstLastPageState = function () {
         var curPage = this.currentPage;
         this.setPropertyValue("isFirstPage", !!curPage && curPage === this.firstVisiblePage);
         this.setPropertyValue("isLastPage", !!curPage && curPage === this.lastVisiblePage);
+        var fVal = undefined;
+        var lVal = undefined;
+        var q = this.currentSingleQuestion;
+        if (!!q) {
+            var questions = this.getAllQuestions(true);
+            var index = questions.indexOf(q);
+            if (index >= 0) {
+                fVal = index === 0;
+                lVal = index === questions.length - 1;
+            }
+        }
+        this.setPropertyValue("isFirstElement", fVal);
+        this.setPropertyValue("isLastElement", lVal);
     };
+    Object.defineProperty(SurveyModel.prototype, "isLastPageOrElement", {
+        get: function () {
+            return this.isLastElement !== undefined ? this.isLastElement : this.isLastPage;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyModel.prototype, "isFirstPageOrElement", {
+        get: function () {
+            return this.isFirstElement !== undefined ? this.isFirstElement : this.isFirstPage;
+        },
+        enumerable: false,
+        configurable: true
+    });
     SurveyModel.prototype.calcIsShowPrevButton = function () {
-        if (this.isFirstPage || !this.showPrevButton || this.state !== "running")
+        if (this.isFirstPageOrElement || !this.showPrevButton || this.state !== "running")
             return false;
+        if (this.isFirstElement !== undefined)
+            return true;
         var page = this.visiblePages[this.currentPageNo - 1];
         return page && page.getMaxTimeToFinish() <= 0;
     };
     SurveyModel.prototype.calcIsShowNextButton = function () {
-        return this.state === "running" && !this.isLastPage && !this.canBeCompletedByTrigger;
+        return this.state === "running" && !this.isLastPageOrElement && !this.canBeCompletedByTrigger;
     };
     SurveyModel.prototype.calcIsCompleteButtonVisible = function () {
         var state = this.state;
         return this.isEditMode && (this.state === "running" &&
-            (this.isLastPage && !this.isShowPreviewBeforeComplete || this.canBeCompletedByTrigger)
+            (this.isLastPageOrElement && !this.isShowPreviewBeforeComplete || this.canBeCompletedByTrigger)
             || state === "preview") && this.showCompleteButton;
     };
     SurveyModel.prototype.calcIsPreviewButtonVisible = function () {
         return (this.isEditMode &&
             this.isShowPreviewBeforeComplete &&
-            this.state == "running" && this.isLastPage);
+            this.state == "running" && this.isLastPageOrElement);
     };
     SurveyModel.prototype.calcIsCancelPreviewButtonVisible = function () {
         return (this.isEditMode &&
@@ -45094,6 +45315,8 @@ var survey_SurveyModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(SurveyModel.prototype, "firstVisiblePage", {
         get: function () {
+            if (this.visiblePageCount === 1)
+                return this.visiblePages[0];
             var pages = this.pages;
             for (var i = 0; i < pages.length; i++) {
                 if (this.isPageInVisibleList(pages[i]))
@@ -45106,6 +45329,8 @@ var survey_SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "lastVisiblePage", {
         get: function () {
+            if (this.visiblePageCount === 1)
+                return this.visiblePages[0];
             var pages = this.pages;
             for (var i = pages.length - 1; i >= 0; i--) {
                 if (this.isPageInVisibleList(pages[i]))
@@ -45454,7 +45679,7 @@ var survey_SurveyModel = /** @class */ (function (_super) {
     });
     SurveyModel.prototype.updateProgressText = function (onValueChanged) {
         if (onValueChanged === void 0) { onValueChanged = false; }
-        if (this.isCalculatingProgressText || this.isShowingPreview || this.isLockingUpdateOnPageModes)
+        if (this.isCalculatingProgressText || this.isShowingPreview)
             return;
         if (onValueChanged &&
             this.progressBarType == "pages" &&
@@ -45565,7 +45790,7 @@ var survey_SurveyModel = /** @class */ (function (_super) {
             width: width,
         };
         this.onResize.fire(this, options);
-        this.setResponsiveStartWidth(width);
+        // this.setResponsiveStartWidth(width);
         return isMobileChanged;
     };
     SurveyModel.prototype.triggerResponsiveness = function (hard) {
@@ -46796,7 +47021,7 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         this.updateVisibleIndexes();
     };
     SurveyModel.prototype.updateVisibleIndexes = function (page) {
-        if (this.isLoadingFromJson || !!this.isEndLoadingFromJson || this.isLockingUpdateOnPageModes)
+        if (this.isLoadingFromJson || !!this.isEndLoadingFromJson)
             return;
         if (this.isRunningConditions &&
             this.onQuestionVisibleChanged.isEmpty &&
@@ -46865,12 +47090,12 @@ var survey_SurveyModel = /** @class */ (function (_super) {
     SurveyModel.prototype.endLoadingFromJson = function () {
         this.isEndLoadingFromJson = "processing";
         this.onFirstPageIsStartedChanged();
-        this.onQuestionsOnPageModeChanged("standard", true);
         _super.prototype.endLoadingFromJson.call(this);
         if (this.hasCookie) {
             this.isCompletedBefore = true;
         }
         this.doElementsOnLoad();
+        this.onQuestionsOnPageModeChanged("standard");
         this.isEndLoadingFromJson = "conditions";
         this.runConditions();
         this.notifyElementsOnAnyValueOrVariableChanged("");
@@ -46918,7 +47143,7 @@ var survey_SurveyModel = /** @class */ (function (_super) {
                 mouseDown: function () { return _this.navigationMouseDown(); },
             },
             locTitle: this.locPagePrevText,
-            action: function () { return _this.prevPage(); },
+            action: function () { return _this.performPrevious(); },
             component: defaultComponent
         });
         var navNext = new action_Action({
@@ -47198,8 +47423,6 @@ var survey_SurveyModel = /** @class */ (function (_super) {
     SurveyModel.prototype.setValue = function (name, newQuestionValue, locNotification, allowNotifyValueChanged, questionName) {
         if (locNotification === void 0) { locNotification = false; }
         if (allowNotifyValueChanged === void 0) { allowNotifyValueChanged = true; }
-        if (this.isLockingUpdateOnPageModes)
-            return;
         var newValue = newQuestionValue;
         if (allowNotifyValueChanged) {
             newValue = this.questionOnValueChanging(name, newQuestionValue);
@@ -47884,6 +48107,7 @@ var survey_SurveyModel = /** @class */ (function (_super) {
             if (this.isScaled && this.responsiveStartWidth > 1) {
                 var initialWidth = this.responsiveStartWidth;
                 try {
+                    width = width || this.staticStartWidth;
                     initialWidth = !isNaN(width) ? width : parseFloat(width.toString().replace("px", ""));
                 }
                 catch (e) { }
@@ -47896,6 +48120,9 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    SurveyModel.prototype.setStaticStartWidth = function (width) {
+        this.staticStartWidth = width;
+    };
     SurveyModel.prototype.setResponsiveStartWidth = function (width) {
         this.responsiveStartWidth = width;
     };
@@ -48732,8 +48959,16 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         jsonobject_property()
     ], SurveyModel.prototype, "calculatedWidthMode", void 0);
     survey_decorate([
-        jsonobject_property({ defaultValue: 100 })
+        jsonobject_property({
+            defaultValue: 100,
+            onSet: function (val, target, prevVal) {
+                target.pages.forEach(function (p) { return p.updateRootStyle(); });
+            },
+        })
     ], SurveyModel.prototype, "widthScale", void 0);
+    survey_decorate([
+        jsonobject_property()
+    ], SurveyModel.prototype, "staticStartWidth", void 0);
     survey_decorate([
         jsonobject_property()
     ], SurveyModel.prototype, "responsiveStartWidth", void 0);
@@ -55988,6 +56223,9 @@ var question_multipletext_MultipleTextItemModel = /** @class */ (function (_supe
         if (title) {
             _this.title = title;
         }
+        _this.editor.onPropertyChanged.add(function (sender, options) {
+            _this.onPropertyChanged.fire(_this, options);
+        });
         return _this;
     }
     MultipleTextItemModel.prototype.getType = function () {
@@ -61009,7 +61247,13 @@ var question_file_QuestionFileModel = /** @class */ (function (_super) {
         };
         _this.doClean = function () {
             if (_this.needConfirmRemoveFile) {
-                confirmActionAsync(_this.confirmRemoveAllMessage, function () { _this.clearFilesCore(); }, undefined, _this.getLocale(), _this.survey.rootElement);
+                confirmActionAsync({
+                    message: _this.confirmRemoveAllMessage,
+                    funcOnYes: function () { _this.clearFilesCore(); },
+                    locale: _this.getLocale(),
+                    rootElement: _this.survey.rootElement,
+                    cssClass: _this.cssClasses.confirmDialog
+                });
                 return;
             }
             _this.clearFilesCore();
@@ -61309,7 +61553,7 @@ var question_file_QuestionFileModel = /** @class */ (function (_super) {
         if (this.previewValue.length > 0 && !this.calculatedGapBetweenItems && !this.calculatedItemWidth) {
             setTimeout(function () {
                 _this.processResponsiveness(0, _this._width);
-            });
+            }, 1);
         }
         this.prevPreviewLength = this.previewValue.length;
     };
@@ -62018,7 +62262,13 @@ var question_file_QuestionFileModel = /** @class */ (function (_super) {
         var _this = this;
         event.stopPropagation();
         if (this.needConfirmRemoveFile) {
-            confirmActionAsync(this.getConfirmRemoveMessage(data.name), function () { _this.removeFileCore(data); }, undefined, this.getLocale(), this.survey.rootElement);
+            confirmActionAsync({
+                message: this.getConfirmRemoveMessage(data.name),
+                funcOnYes: function () { _this.clearFilesCore(); },
+                locale: this.getLocale(),
+                rootElement: this.survey.rootElement,
+                cssClass: this.cssClasses.confirmDialog
+            });
             return;
         }
         this.removeFileCore(data);
@@ -68003,7 +68253,13 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
             }
         };
         if (this.isRequireConfirmOnDelete(value)) {
-            confirmActionAsync(this.confirmDeleteText, function () { removePanel(); }, undefined, this.getLocale(), this.survey.rootElement);
+            confirmActionAsync({
+                message: this.confirmDeleteText,
+                funcOnYes: function () { removePanel(); },
+                locale: this.getLocale(),
+                rootElement: this.survey.rootElement,
+                cssClass: this.cssClasses.confirmDialog
+            });
         }
         else {
             removePanel();
@@ -72144,8 +72400,8 @@ Serializer.addClass("currencymask", [
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.12.14";
-ReleaseDate = "" + "2024-12-09";
+Version = "" + "1.12.16";
+ReleaseDate = "" + "2024-12-24";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -82655,7 +82911,7 @@ var element_SurveyRowElement = /** @class */ (function (_super) {
         if (!this.row.isNeedRender) {
             return ReactElementFactory.Instance.createElement(element.skeletonComponentName, { key: element.name + index, element: element, css: this.css, });
         }
-        var elementType = element.getType();
+        var elementType = element.getTemplate();
         if (!ReactElementFactory.Instance.isElementRegistered(elementType)) {
             elementType = "question";
         }
@@ -83391,7 +83647,7 @@ var action_bar_SurveyActionBar = /** @class */ (function (_super) {
             return;
         var container = this.rootRef.current;
         if (!!container) {
-            this.model.initResponsivityManager(container, function (callback) { setTimeout(callback); });
+            this.model.initResponsivityManager(container, function (callback) { setTimeout(callback, 100); });
         }
     };
     SurveyActionBar.prototype.componentWillUnmount = function () {
@@ -83406,7 +83662,7 @@ var action_bar_SurveyActionBar = /** @class */ (function (_super) {
         if (!!this.model.hasActions) {
             var container = this.rootRef.current;
             if (!!container) {
-                this.model.initResponsivityManager(container, function (callback) { setTimeout(callback); });
+                this.model.initResponsivityManager(container, function (callback) { setTimeout(callback, 100); });
             }
         }
     };
@@ -89460,13 +89716,10 @@ var list_item_ListItem = /** @class */ (function (_super) {
         var _this = this;
         if (!this.item)
             return null;
-        var contentWrapStyle = {
-            paddingInlineStart: this.model.getItemIndent(this.item)
-        };
         var className = this.model.getItemClass(this.item);
         var itemContent = this.item.component || this.model.itemComponent;
         var newElement = ReactElementFactory.Instance.createElement(itemContent, { item: this.item, key: this.item.id, model: this.model });
-        var contentWrap = external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { style: contentWrapStyle, className: this.model.cssClasses.itemBody, title: this.item.locTitle.calculatedText, onMouseOver: function (event) { _this.model.onItemHover(_this.item); }, onMouseLeave: function (event) { _this.model.onItemLeave(_this.item); } }, newElement);
+        var contentWrap = external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { style: this.model.getItemStyle(this.item), className: this.model.cssClasses.itemBody, title: this.item.locTitle.calculatedText, onMouseOver: function (event) { _this.model.onItemHover(_this.item); }, onMouseLeave: function (event) { _this.model.onItemLeave(_this.item); } }, newElement);
         var separator = this.item.needSeparator ? external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { className: this.model.cssClasses.itemSeparator }) : null;
         var isVisible = this.model.isItemVisible(this.item);
         var style = {
@@ -90210,7 +90463,7 @@ var image_SurveyQuestionImage = /** @class */ (function (_super) {
         }
         var control = null;
         if (this.question.renderedMode === "image") {
-            control = (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("img", { className: cssClasses, src: this.question.locImageLink.renderedHtml, alt: this.question.altText || this.question.title, width: this.question.renderedWidth, height: this.question.renderedHeight, 
+            control = (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("img", { className: cssClasses, src: this.question.locImageLink.renderedHtml || null, alt: this.question.altText || this.question.title, width: this.question.renderedWidth, height: this.question.renderedHeight, 
                 //alt={item.text || item.value}
                 style: style, onLoad: function (event) { _this.question.onLoadHandler(); }, onError: function (event) { _this.question.onErrorHandler(); } }));
         }
@@ -90527,21 +90780,15 @@ var list_item_content_ListItemContent = /** @class */ (function (_super) {
     ListItemContent.prototype.render = function () {
         if (!this.item)
             return null;
-        var content = [];
         var text = this.renderLocString(this.item.locTitle, undefined, "locString");
-        if (this.item.iconName) {
-            var icon = external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(svg_icon_SvgIcon, { key: "icon", className: this.model.cssClasses.itemIcon, iconName: this.item.iconName, size: this.item.iconSize, "aria-label": this.item.title });
-            content.push(icon);
-            content.push(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", { key: "text" }, text));
-        }
-        else {
-            content.push(text);
-        }
-        if (this.item.markerIconName) {
-            var icon = external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(svg_icon_SvgIcon, { key: "marker", className: this.item.cssClasses.itemMarkerIcon, iconName: this.item.markerIconName, size: "auto" });
-            content.push(icon);
-        }
-        return external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Fragment, null, content);
+        var icon = (this.item.iconName) ?
+            external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(svg_icon_SvgIcon, { className: this.model.cssClasses.itemIcon, iconName: this.item.iconName, size: this.item.iconSize, "aria-label": this.item.title }) : null;
+        var markerIcon = (this.item.markerIconName) ?
+            external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(svg_icon_SvgIcon, { className: this.item.cssClasses.itemMarkerIcon, iconName: this.item.markerIconName, size: "auto" }) : null;
+        return external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Fragment, null,
+            icon,
+            text,
+            markerIcon);
     };
     return ListItemContent;
 }(reactquestion_element_SurveyElementBase));
@@ -90641,7 +90888,7 @@ var logo_image_LogoImage = /** @class */ (function (_super) {
     LogoImage.prototype.render = function () {
         var content = [];
         content.push(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", { key: "logo-image", className: this.survey.logoClassNames },
-            external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("img", { className: this.survey.css.logoImage, src: this.survey.locLogo.renderedHtml, alt: this.survey.locTitle.renderedHtml, width: this.survey.renderedLogoWidth, height: this.survey.renderedLogoHeight, style: { objectFit: this.survey.logoFit, width: this.survey.renderedStyleLogoWidth, height: this.survey.renderedStyleLogoHeight } })));
+            external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("img", { className: this.survey.css.logoImage, src: this.survey.locLogo.renderedHtml || null, alt: this.survey.locTitle.renderedHtml, width: this.survey.renderedLogoWidth, height: this.survey.renderedLogoHeight, style: { objectFit: this.survey.logoFit, width: this.survey.renderedStyleLogoWidth, height: this.survey.renderedStyleLogoHeight } })));
         return external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Fragment, null, content);
     };
     return LogoImage;