survey-core 1.9.138 → 1.10.1

package/survey.core.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.138
+ * surveyjs - Survey JavaScript library v1.10.1
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -769,9 +769,27 @@ var BaseAction = /** @class */ (function (_super) {
     __extends(BaseAction, _super);
     function BaseAction() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.rendredIdValue = BaseAction.getNextRendredId();
         _this.iconSize = 24;
         return _this;
     }
+    BaseAction.getNextRendredId = function () { return BaseAction.renderedId++; };
+    Object.defineProperty(BaseAction.prototype, "renderedId", {
+        get: function () { return this.rendredIdValue; },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BaseAction.prototype, "owner", {
+        get: function () { return this.ownerValue; },
+        set: function (val) {
+            if (val !== this.owner) {
+                this.ownerValue = val;
+                this.locStrsChanged();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(BaseAction.prototype, "visible", {
         get: function () {
             return this.getVisible();
@@ -896,6 +914,7 @@ var BaseAction = /** @class */ (function (_super) {
         }
         return args.isTrusted;
     };
+    BaseAction.renderedId = 1;
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
     ], BaseAction.prototype, "tooltip", void 0);
@@ -1848,6 +1867,7 @@ var Base = /** @class */ (function () {
          */
         this.onItemValuePropertyChanged = this.addEvent();
         this.isCreating = true;
+        this.animationAllowedLock = 0;
         this.bindingsValue = new Bindings(this);
         _jsonobject__WEBPACK_IMPORTED_MODULE_2__["CustomPropertiesCollection"].createProperties(this);
         this.onBaseCreating();
@@ -2768,6 +2788,22 @@ var Base = /** @class */ (function () {
         if (includeHidden === void 0) { includeHidden = false; }
         return [];
     };
+    Object.defineProperty(Base.prototype, "animationAllowed", {
+        get: function () {
+            return this.getIsAnimationAllowed();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Base.prototype.getIsAnimationAllowed = function () {
+        return _settings__WEBPACK_IMPORTED_MODULE_3__["settings"].animationEnabled && this.animationAllowedLock >= 0 && !this.isLoadingFromJson && !this.isDisposed;
+    };
+    Base.prototype.blockAnimations = function () {
+        this.animationAllowedLock--;
+    };
+    Base.prototype.releaseAnimations = function () {
+        this.animationAllowedLock++;
+    };
     Base.currentDependencis = undefined;
     return Base;
 }());
@@ -4863,7 +4899,7 @@ var modernCss = {
         root: "sv-file",
         other: "sv-comment sv-question__other",
         placeholderInput: "sv-visuallyhidden",
-        preview: "sv-file__preview",
+        previewItem: "sd-file__preview-item",
         fileSignBottom: "sv-file__sign",
         fileDecorator: "sv-file__decorator",
         fileInput: "sv-visuallyhidden",
@@ -5270,7 +5306,7 @@ var defaultStandardCss = {
     file: {
         root: "sv_q_file",
         placeholderInput: "sv-visuallyhidden",
-        preview: "sv_q_file_preview",
+        previewItem: "sv_q_file_preview",
         removeButton: "sv_q_file_remove_button",
         fileInput: "sv-visuallyhidden",
         removeFile: "sv_q_file_remove",
@@ -5484,7 +5520,11 @@ var defaultV2Css = {
         footer: "sd-paneldynamic__footer",
         panelFooter: "sd-paneldynamic__panel-footer",
         footerButtonsContainer: "sd-paneldynamic__buttons-container",
+        panelsContainer: "sd-paneldynamic__panels-container",
         panelWrapperInRow: "sd-paneldynamic__panel-wrapper--in-row",
+        panelWrapperFadeIn: "sd-paneldynamic__panel-wrapper--fade-in",
+        panelWrapperFadeOut: "sd-paneldynamic__panel-wrapper--fade-out",
+        panelWrapperList: "sd-paneldynamic__panel-wrapper--list",
         progressBtnIcon: "icon-progressbuttonv2",
         noEntriesPlaceholder: "sd-paneldynamic__placeholder sd-question__placeholder",
         compact: "sd-element--with-frame sd-element--compact",
@@ -5572,6 +5612,7 @@ var defaultV2Css = {
         titleExpanded: "sd-element__title--expanded",
         titleCollapsed: "sd-element__title--collapsed",
         titleDisabled: "sd-element__title--disabled",
+        titleReadOnly: "sd-element__title--readonly",
         titleBar: "sd-action-title-bar",
         requiredText: "sd-question__required-text",
         number: "sd-element__num",
@@ -5596,6 +5637,8 @@ var defaultV2Css = {
         invisible: "sd-element--invisible",
         composite: "sd-element--complex sd-composite",
         disabled: "sd-question--disabled",
+        readOnly: "sd-question--readonly",
+        preview: "sd-question--preview",
         errorsContainer: "sd-element__erbox sd-question__erbox",
         errorsContainerTop: "sd-element__erbox--above-element sd-question__erbox--above-question",
         errorsContainerBottom: "sd-question__erbox--below-question"
@@ -5632,6 +5675,9 @@ var defaultV2Css = {
         itemSelectAll: "sd-checkbox--selectall",
         itemNone: "sd-checkbox--none",
         itemDisabled: "sd-item--disabled sd-checkbox--disabled",
+        itemReadOnly: "sd-item--readonly sd-checkbox--readonly",
+        itemPreview: "sd-item--preview sd-checkbox--preview",
+        itemPreviewSvgIconId: "#icon-v2check",
         itemChecked: "sd-item--checked sd-checkbox--checked",
         itemHover: "sd-item--allowhover sd-checkbox--allowhover",
         itemInline: "sd-selectbase__item--inline",
@@ -5656,6 +5702,9 @@ var defaultV2Css = {
         label: "sd-selectbase__label",
         labelChecked: "",
         itemDisabled: "sd-item--disabled sd-radio--disabled",
+        itemReadOnly: "sd-item--readonly sd-radio--readonly",
+        itemPreview: "sd-item--preview sd-radio--preview",
+        itemPreviewSvgIconId: "#icon-v2check",
         itemChecked: "sd-item--checked sd-radio--checked",
         itemHover: "sd-item--allowhover sd-radio--allowhover",
         itemControl: "sd-visuallyhidden sd-item__control sd-radio__control",
@@ -5677,18 +5726,26 @@ var defaultV2Css = {
         itemExchanged: "sd-boolean--exchanged",
         itemIndeterminate: "sd-boolean--indeterminate",
         itemDisabled: "sd-boolean--disabled",
+        itemReadOnly: "sd-boolean--readonly",
+        itemPreview: "sd-boolean--preview",
         itemHover: "sd-boolean--allowhover",
         label: "sd-boolean__label",
         labelTrue: "sd-boolean__label--true",
         labelFalse: "sd-boolean__label--false",
         switch: "sd-boolean__switch",
         disabledLabel: "sd-checkbox__label--disabled",
+        labelReadOnly: "sd-checkbox__label--readonly",
+        labelPreview: "sd-checkbox__label--preview",
         sliderText: "sd-boolean__thumb-text",
         slider: "sd-boolean__thumb",
         sliderGhost: "sd-boolean__thumb-ghost",
         //radio
         radioItem: "sd-item",
         radioItemChecked: "sd-item--checked sd-radio--checked",
+        radioItemDisabled: "sd-item--disabled sd-radio--disabled",
+        radioItemReadOnly: "sd-item--readonly sd-radio--readonly",
+        radioItemPreview: "sd-item--preview sd-radio--preview",
+        itemPreviewSvgIconId: "#icon-v2check",
         radioLabel: "sd-selectbase__label",
         radioControlLabel: "sd-item__control-label",
         radioFieldset: "sd-selectbase",
@@ -5705,6 +5762,8 @@ var defaultV2Css = {
         checkboxItemChecked: "sd-item--checked sd-checkbox--checked",
         checkboxItemDecorator: "sd-item__svg sd-checkbox__svg",
         checkboxItemDisabled: "sd-item--disabled sd-checkbox--disabled",
+        checkboxItemReadOnly: "sd-item--readonly sd-checkbox--readonly",
+        checkboxItemPreview: "sd-item--preview sd-checkbox--preview",
         controlCheckbox: "sd-visuallyhidden sd-item__control sd-checkbox__control",
         checkboxMaterialDecorator: "sd-item__decorator sd-checkbox__decorator",
         checkboxControlLabel: "sd-item__control-label",
@@ -5714,6 +5773,8 @@ var defaultV2Css = {
         root: "sd-input sd-text",
         small: "sd-row__question--small",
         controlDisabled: "sd-input--disabled",
+        controlReadOnly: "sd-input--readonly",
+        controlPreview: "sd-input--preview",
         constrolWithCharacterCounter: "sd-text__character-counter",
         characterCounterBig: "sd-text__character-counter--big",
         content: "sd-text__content sd-question__content",
@@ -5724,6 +5785,9 @@ var defaultV2Css = {
         root: "sd-multipletext",
         rootMobile: "sd-multipletext--mobile",
         itemLabel: "sd-multipletext__item-container sd-input",
+        itemLabelReadOnly: "sd-input--readonly",
+        itemLabelDisabled: "sd-input--disabled",
+        itemLabelPreview: "sd-input--preview",
         itemLabelOnError: "sd-multipletext__item-container--error",
         itemLabelAllowFocus: "sd-multipletext__item-container--allow-focus",
         itemLabelAnswered: "sd-multipletext__item-container--answered",
@@ -5761,6 +5825,8 @@ var defaultV2Css = {
         controlInputFieldComponent: "sd-dropdown__input-field-component",
         controlValue: "sd-dropdown__value",
         controlDisabled: "sd-input--disabled",
+        controlReadOnly: "sd-input--readonly",
+        controlPreview: "sd-input--preview",
         controlEmpty: "sd-dropdown--empty",
         controlLabel: "sd-item__control-label",
         filterStringInput: "sd-dropdown__filter-string-input",
@@ -5777,6 +5843,8 @@ var defaultV2Css = {
         itemInline: "sd-imagepicker__item--inline",
         itemChecked: "sd-imagepicker__item--checked",
         itemDisabled: "sd-imagepicker__item--disabled",
+        itemReadOnly: "sd-imagepicker__item--readonly",
+        itemPreview: "sd-imagepicker__item--preview",
         itemHover: "sd-imagepicker__item--allowhover",
         label: "sd-imagepicker__label",
         itemDecorator: "sd-imagepicker__item-decorator",
@@ -5806,6 +5874,7 @@ var defaultV2Css = {
         cell: "sd-table__cell sd-matrix__cell",
         row: "sd-table__row",
         rowDisabled: "sd-table__row-disabled",
+        rowReadOnly: "sd-table__row-readonly",
         headerCell: "sd-table__cell sd-table__cell--header",
         rowTextCell: "sd-table__cell sd-matrix__cell sd-table__cell--row-text",
         label: "sd-item sd-radio sd-matrix__label",
@@ -5813,6 +5882,9 @@ var defaultV2Css = {
         itemValue: "sd-visuallyhidden sd-item__control sd-radio__control",
         itemChecked: "sd-item--checked sd-radio--checked",
         itemDisabled: "sd-item--disabled sd-radio--disabled",
+        itemReadOnly: "sd-item--readonly sd-radio--readonly",
+        itemPreview: "sd-item--preview sd-radio--preview",
+        itemPreviewSvgIconId: "#icon-v2check",
         itemHover: "sd-radio--allowhover",
         materialDecorator: "sd-item__decorator sd-radio__decorator",
         itemDecorator: "sd-item__svg sd-radio__svg",
@@ -5839,6 +5911,8 @@ var defaultV2Css = {
         errorsCellBottom: "sd-table__cell--error-bottom",
         itemCell: "sd-table__cell--item",
         row: "sd-table__row",
+        rowFadeIn: "sd-table__row--fade-in",
+        rowFadeOut: "sd-table__row--fade-out",
         expandedRow: "sd-table__row--expanded",
         rowHasPanel: "sd-table__row--has-panel",
         rowHasEndActions: "sd-table__row--has-end-actions",
@@ -5877,6 +5951,8 @@ var defaultV2Css = {
         content: "sd-matrixdynamic__content sd-question__content",
         cell: "sd-table__cell",
         row: "sd-table__row",
+        rowFadeIn: "sd-table__row--fade-in",
+        rowFadeOut: "sd-table__row--fade-out",
         rowHasPanel: "sd-table__row--has-panel",
         rowHasEndActions: "sd-table__row--has-end-actions",
         expandedRow: "sd-table__row--expanded",
@@ -5933,6 +6009,8 @@ var defaultV2Css = {
         itemStarHover: "sd-rating__item-star--allowhover",
         itemStarSelected: "sd-rating__item-star--selected",
         itemStarDisabled: "sd-rating__item-star--disabled",
+        itemStarReadOnly: "sd-rating__item-star--readonly",
+        itemStarPreview: "sd-rating__item-star--preview",
         itemStarHighlighted: "sd-rating__item-star--highlighted",
         itemStarUnhighlighted: "sd-rating__item-star--unhighlighted",
         itemStarSmall: "sd-rating__item-star--small",
@@ -5941,6 +6019,8 @@ var defaultV2Css = {
         itemSmileyHover: "sd-rating__item-smiley--allowhover",
         itemSmileySelected: "sd-rating__item-smiley--selected",
         itemSmileyDisabled: "sd-rating__item-smiley--disabled",
+        itemSmileyReadOnly: "sd-rating__item-smiley--readonly",
+        itemSmileyPreview: "sd-rating__item-smiley--preview",
         itemSmileyHighlighted: "sd-rating__item-star--highlighted",
         itemSmileyScaleColored: "sd-rating__item-smiley--scale-colored",
         itemSmileyRateColored: "sd-rating__item-smiley--rate-colored",
@@ -5949,6 +6029,8 @@ var defaultV2Css = {
         itemText: "sd-rating__item-text",
         maxText: "sd-rating__item-text sd-rating__max-text",
         itemDisabled: "sd-rating__item--disabled",
+        itemReadOnly: "sd-rating__item--readonly",
+        itemPreview: "sd-rating__item--preview",
         itemFixedSize: "sd-rating__item--fixed-size",
         control: "sd-input sd-dropdown",
         itemSmall: "sd-rating--small",
@@ -5967,6 +6049,8 @@ var defaultV2Css = {
         root: "sd-input sd-comment",
         small: "sd-row__question--small",
         controlDisabled: "sd-input--disabled",
+        controlReadOnly: "sd-input--readonly",
+        controlPreview: "sd-input--preview",
         content: "sd-comment__content sd-question__content",
         remainingCharacterCounter: "sd-remaining-character-counter",
         onError: "sd-input--error"
@@ -5976,9 +6060,12 @@ var defaultV2Css = {
         root: "sd-file",
         rootDragging: "sd-file--dragging",
         rootAnswered: "sd-file--answered",
+        rootDisabled: "sd-file--disabled",
+        rootReadOnly: "sd-file--readonly",
+        rootPreview: "sd-file--preview",
         other: "sd-input sd-comment",
         placeholderInput: "sd-visuallyhidden",
-        preview: "sd-file__preview",
+        previewItem: "sd-file__preview-item",
         fileSign: "",
         fileList: "sd-file__list",
         fileSignBottom: "sd-file__sign",
@@ -6069,9 +6156,12 @@ var defaultV2Css = {
         rootMobileMod: "sv-ranking--mobile",
         rootDragMod: "sv-ranking--drag",
         rootDisabled: "sd-ranking--disabled",
+        rootReadOnly: "sd-ranking--readonly",
+        rootPreview: "sd-ranking--preview",
         rootDesignMode: "sv-ranking--design-mode",
         rootDragHandleAreaIcon: "sv-ranking--drag-handle-area-icon",
         rootSelectToRankMod: "sv-ranking--select-to-rank",
+        rootSelectToRankEmptyValueMod: "sv-ranking--select-to-rank-empty-value",
         rootSelectToRankAlignVertical: "sv-ranking--select-to-rank-vertical",
         rootSelectToRankAlignHorizontal: "sv-ranking--select-to-rank-horizontal",
         item: "sv-ranking-item",
@@ -6080,6 +6170,8 @@ var defaultV2Css = {
         itemIndexEmptyMode: "sv-ranking-item__index--empty sd-ranking-item__index--empty",
         // itemText: "sv-ranking-item__text",
         itemDisabled: "sv-ranking-item--disabled",
+        itemReadOnly: "sv-ranking-item--readonly",
+        itemPreview: "sv-ranking-item--preview",
         controlLabel: "sv-ranking-item__text",
         itemGhostNode: "sv-ranking-item__ghost",
         itemIconContainer: "sv-ranking-item__icon-container",
@@ -6156,7 +6248,10 @@ var defaultV2Css = {
         controlValue: "sd-tagbox__value sd-dropdown__value",
         controlValueItems: "sd-tagbox__value-items",
         placeholderInput: "sd-tagbox__placeholder",
+        controlEditable: "sd-input--editable",
         controlDisabled: "sd-input--disabled",
+        controlReadOnly: "sd-input--readonly",
+        controlPreview: "sd-input--preview",
         controlEmpty: "sd-dropdown--empty sd-tagbox--empty",
         controlLabel: "sd-item__control-label",
         filterStringInput: "sd-tagbox__filter-string-input sd-dropdown__filter-string-input",
@@ -8070,6 +8165,7 @@ var DropdownListModel = /** @class */ (function (_super) {
         this._popupModel.isFocusedContainer = false;
         this._popupModel.isFocusedContent = _utils_devices__WEBPACK_IMPORTED_MODULE_9__["IsTouch"];
         this._popupModel.setWidthByTarget = !_utils_devices__WEBPACK_IMPORTED_MODULE_9__["IsTouch"];
+        this._popupModel.locale = this.question.getLocale();
         this.updatePopupFocusFirstInputSelector();
         this.listModel.registerPropertyChangedHandlers(["showFilter"], function () {
             _this.updatePopupFocusFirstInputSelector();
@@ -8170,6 +8266,7 @@ var DropdownListModel = /** @class */ (function (_super) {
             }
         });
         model.isAllDataLoaded = !this.question.choicesLazyLoadEnabled;
+        model.actions.forEach(function (a) { return a.disableTabStop = true; });
     };
     DropdownListModel.prototype.updateCssClasses = function (popupCssClass, listCssClasses) {
         this.popupModel.cssClass = new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_8__["CssClassBuilder"]().append(popupCssClass).append(this.popupCssClasses).toString();
@@ -8734,6 +8831,7 @@ var DropdownMultiSelectListModel = /** @class */ (function (_super) {
             };
         }
         var res = new _multiSelectListModel__WEBPACK_IMPORTED_MODULE_3__["MultiSelectListModel"](visibleItems, _onSelectionChanged, false, undefined, this.question.choicesLazyLoadEnabled ? this.listModelFilterStringChanged : undefined, this.listElementId);
+        res.actions.forEach(function (a) { return a.disableTabStop = true; });
         this.setOnTextSearchCallbackForListModel(res);
         res.forceShowFilter = true;
         return res;
@@ -8881,7 +8979,11 @@ var DropdownMultiSelectListModel = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "dxSurveyService", function() { return dxSurveyService; });
 /* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./settings */ "./src/settings.ts");
+/* harmony import */ var _surveyStrings__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./surveyStrings */ "./src/surveyStrings.ts");
 
+
+var surveyIOSite = "surveyjs.io";
+var surveyIOMaxPostSize = 65536;
 /**
  * The class contains methods to work with api.surveyjs.io service.
  */
@@ -8900,7 +9002,7 @@ var dxSurveyService = /** @class */ (function () {
     });
     dxSurveyService.prototype.loadSurvey = function (surveyId, onLoad) {
         var xhr = new XMLHttpRequest();
-        xhr.open("GET", dxSurveyService.serviceUrl + "/getSurvey?surveyId=" + surveyId);
+        xhr.open("GET", this.serviceUrl + "/getSurvey?surveyId=" + surveyId);
         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
         xhr.onload = function () {
             var result = JSON.parse(xhr.response);
@@ -8910,7 +9012,7 @@ var dxSurveyService = /** @class */ (function () {
     };
     dxSurveyService.prototype.getSurveyJsonAndIsCompleted = function (surveyId, clientId, onLoad) {
         var xhr = new XMLHttpRequest();
-        xhr.open("GET", dxSurveyService.serviceUrl +
+        xhr.open("GET", this.serviceUrl +
             "/getSurveyAndIsCompleted?surveyId=" +
             surveyId +
             "&clientId=" +
@@ -8924,11 +9026,34 @@ var dxSurveyService = /** @class */ (function () {
         };
         xhr.send();
     };
+    dxSurveyService.prototype.canSendResult = function (result) {
+        if (!this.isSurveJSIOService)
+            return true;
+        var str = JSON.stringify(result);
+        return str.length < surveyIOMaxPostSize;
+    };
+    Object.defineProperty(dxSurveyService.prototype, "isSurveJSIOService", {
+        get: function () {
+            return this.serviceUrl.indexOf(surveyIOSite) >= 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
     dxSurveyService.prototype.sendResult = function (postId, result, onSendResult, clientId, isPartialCompleted) {
+        if (clientId === void 0) { clientId = null; }
+        if (isPartialCompleted === void 0) { isPartialCompleted = false; }
+        if (!this.canSendResult(result)) {
+            onSendResult(false, _surveyStrings__WEBPACK_IMPORTED_MODULE_1__["surveyLocalization"].getString("savingExceedSize", this.locale), undefined);
+        }
+        else {
+            this.sendResultCore(postId, result, onSendResult, clientId, isPartialCompleted);
+        }
+    };
+    dxSurveyService.prototype.sendResultCore = function (postId, result, onSendResult, clientId, isPartialCompleted) {
         if (clientId === void 0) { clientId = null; }
         if (isPartialCompleted === void 0) { isPartialCompleted = false; }
         var xhr = new XMLHttpRequest();
-        xhr.open("POST", dxSurveyService.serviceUrl + "/post/");
+        xhr.open("POST", this.serviceUrl + "/post/");
         xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
         var data = { postId: postId, surveyResult: JSON.stringify(result) };
         if (clientId)
@@ -8936,7 +9061,6 @@ var dxSurveyService = /** @class */ (function () {
         if (isPartialCompleted)
             data["isPartialCompleted"] = true;
         var dataStringify = JSON.stringify(data);
-        var self = this;
         xhr.onload = xhr.onerror = function () {
             if (!onSendResult)
                 return;
@@ -8951,7 +9075,7 @@ var dxSurveyService = /** @class */ (function () {
                 return;
             onSendFile(xhr.status == 200, JSON.parse(xhr.response));
         };
-        xhr.open("POST", dxSurveyService.serviceUrl + "/upload/", true);
+        xhr.open("POST", this.serviceUrl + "/upload/", true);
         var formData = new FormData();
         formData.append("file", file);
         formData.append("postId", postId);
@@ -8960,7 +9084,7 @@ var dxSurveyService = /** @class */ (function () {
     dxSurveyService.prototype.getResult = function (resultId, name, onGetResult) {
         var xhr = new XMLHttpRequest();
         var data = "resultId=" + resultId + "&name=" + name;
-        xhr.open("GET", dxSurveyService.serviceUrl + "/getResult?" + data);
+        xhr.open("GET", this.serviceUrl + "/getResult?" + data);
         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
         var self = this;
         xhr.onload = function () {
@@ -8981,7 +9105,7 @@ var dxSurveyService = /** @class */ (function () {
     dxSurveyService.prototype.isCompleted = function (resultId, clientId, onIsCompleted) {
         var xhr = new XMLHttpRequest();
         var data = "resultId=" + resultId + "&clientId=" + clientId;
-        xhr.open("GET", dxSurveyService.serviceUrl + "/isCompleted?" + data);
+        xhr.open("GET", this.serviceUrl + "/isCompleted?" + data);
         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
         var self = this;
         xhr.onload = function () {
@@ -8993,6 +9117,13 @@ var dxSurveyService = /** @class */ (function () {
         };
         xhr.send();
     };
+    Object.defineProperty(dxSurveyService.prototype, "serviceUrl", {
+        get: function () {
+            return dxSurveyService.serviceUrl || "";
+        },
+        enumerable: false,
+        configurable: true
+    });
     return dxSurveyService;
 }());
 
@@ -9563,8 +9694,8 @@ __webpack_require__.r(__webpack_exports__);
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.9.138";
-ReleaseDate = "" + "2024-04-09";
+Version = "" + "1.10.1";
+ReleaseDate = "" + "2024-04-25";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -9745,7 +9876,7 @@ function checkPrefix(prefix) {
 /*!**************************************!*\
   !*** ./src/entries/core-wo-model.ts ***!
   \**************************************/
-/*! 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, 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, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, 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, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationBoolean, AnimationGroup, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper */
+/*! 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, 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, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, 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, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -10197,10 +10328,14 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AnimationGroupUtils", function() { return _utils_animation__WEBPACK_IMPORTED_MODULE_8__["AnimationGroupUtils"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AnimationProperty", function() { return _utils_animation__WEBPACK_IMPORTED_MODULE_8__["AnimationProperty"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AnimationBoolean", function() { return _utils_animation__WEBPACK_IMPORTED_MODULE_8__["AnimationBoolean"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AnimationGroup", function() { return _utils_animation__WEBPACK_IMPORTED_MODULE_8__["AnimationGroup"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AnimationTab", function() { return _utils_animation__WEBPACK_IMPORTED_MODULE_8__["AnimationTab"]; });
+
 /* harmony import */ var _actions_adaptive_container__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../actions/adaptive-container */ "./src/actions/adaptive-container.ts");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AdaptiveActionContainer", function() { return _actions_adaptive_container__WEBPACK_IMPORTED_MODULE_9__["AdaptiveActionContainer"]; });
 
@@ -10236,7 +10371,7 @@ __webpack_require__.r(__webpack_exports__);
 /*!*****************************!*\
   !*** ./src/entries/core.ts ***!
   \*****************************/
-/*! 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, 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, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, 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, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationBoolean, AnimationGroup, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper, Model */
+/*! 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, 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, QuestionCustomWidget, CustomWidgetCollection, QuestionCustomModel, QuestionCompositeModel, ComponentQuestionJSON, ComponentCollection, StylesManager, 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, InputMaskBase, InputMaskPattern, InputMaskNumeric, InputMaskDateTime, InputMaskCurrency, CssClassBuilder, surveyCss, defaultV2Css, defaultV2ThemeName, DragDropCore, DragDropChoices, DragDropRankingSelectToRank, defaultStandardCss, modernCss, SvgIconRegistry, SvgRegistry, SvgBundleViewModel, RendererFactory, ResponsivityManager, VerticalResponsivityManager, unwrap, getOriginalEvent, getElement, createDropdownActionModel, createDropdownActionModelAdvanced, getActionDropdownButtonTarget, BaseAction, Action, ActionDropdownViewModel, AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab, AdaptiveActionContainer, defaultActionBarCss, ActionContainer, DragOrClickHelper, Model */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -10680,10 +10815,14 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AnimationGroupUtils", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["AnimationGroupUtils"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AnimationProperty", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["AnimationProperty"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AnimationBoolean", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["AnimationBoolean"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AnimationGroup", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["AnimationGroup"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AnimationTab", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["AnimationTab"]; });
+
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AdaptiveActionContainer", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["AdaptiveActionContainer"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "defaultActionBarCss", function() { return _core_wo_model__WEBPACK_IMPORTED_MODULE_0__["defaultActionBarCss"]; });
@@ -17139,7 +17278,7 @@ module.exports = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = "<svg viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\"><g><path d=\"M24 39.5057L11.7226 45.9839C10.4095 46.6739 8.87606 45.5622 9.12525 44.096L11.4734 30.373L1.54411 20.6556C0.480254 19.6207 1.06489 17.8095 2.53128 17.5986L16.2559 15.5957L22.3994 3.10891C23.0512 1.77685 24.9488 1.77685 25.6102 3.10891L31.7441 15.5957L45.4687 17.5986C46.9351 17.8095 47.5197 19.6207 46.4559 20.6556L36.5266 30.373L38.8748 44.096C39.1239 45.5622 37.5905 46.6835 36.2774 45.9839L24 39.5057Z\" fill=\"none\" stroke-width=\"2\"></path><path d=\"M24.4663 34.6154L24 34.3695L23.5336 34.6154L14.4788 39.389L16.2156 29.2691L16.3044 28.7517L15.9289 28.3848L8.57358 21.1966L18.7249 19.7094L19.245 19.6332L19.4772 19.1616L24 9.97413L28.5228 19.1616L28.755 19.6332L29.275 19.7094L39.4264 21.1966L32.0711 28.3848L31.6956 28.7517L31.7844 29.2691L33.5211 39.389L24.4663 34.6154Z\" stroke-width=\"2\"></path></g></svg>"
+module.exports = "<svg viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\"><g><path d=\"M24 39.5057L11.7226 45.9839C10.4095 46.6739 8.87606 45.5622 9.12525 44.096L11.4734 30.373L1.54411 20.6556C0.480254 19.6207 1.06489 17.8095 2.53128 17.5986L16.2559 15.5957L22.3994 3.10891C23.0512 1.77685 24.9488 1.77685 25.6102 3.10891L31.7441 15.5957L45.4687 17.5986C46.9351 17.8095 47.5197 19.6207 46.4559 20.6556L36.5266 30.373L38.8748 44.096C39.1239 45.5622 37.5905 46.6835 36.2774 45.9839L24 39.5057Z\" fill=\"none\"></path><path d=\"M24.4663 34.6154L24 34.3695L23.5336 34.6154L14.4788 39.389L16.2156 29.2691L16.3044 28.7517L15.9289 28.3848L8.57358 21.1966L18.7249 19.7094L19.245 19.6332L19.4772 19.1616L24 9.97413L28.5228 19.1616L28.755 19.6332L29.275 19.7094L39.4264 21.1966L32.0711 28.3848L31.6956 28.7517L31.7844 29.2691L33.5211 39.389L24.4663 34.6154Z\"></path></g></svg>"
 
 /***/ }),
 
@@ -17161,7 +17300,7 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><g><path d=\"M12 19.3373L6.13001 22.4373C5.50001 22.7673 4.77001 22.2373 4.89001 21.5373L6.01001 14.9773L1.26001 10.3273C0.750007 9.83728 1.03001 8.96728 1.73001 8.86728L8.29001 7.90728L11.23 1.93728C11.54 1.29728 12.45 1.29728 12.77 1.93728L15.7 7.90728L22.26 8.86728C22.96 8.96728 23.24 9.83728 22.73 10.3273L17.98 14.9773L19.1 21.5373C19.22 22.2373 18.49 22.7773 17.86 22.4373L11.99 19.3373H12Z\" stroke-width=\"2\"></path></g></svg>"
+module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><g><path d=\"M12 19.3373L6.13001 22.4373C5.50001 22.7673 4.77001 22.2373 4.89001 21.5373L6.01001 14.9773L1.26001 10.3273C0.750007 9.83728 1.03001 8.96728 1.73001 8.86728L8.29001 7.90728L11.23 1.93728C11.54 1.29728 12.45 1.29728 12.77 1.93728L15.7 7.90728L22.26 8.86728C22.96 8.96728 23.24 9.83728 22.73 10.3273L17.98 14.9773L19.1 21.5373C19.22 22.2373 18.49 22.7773 17.86 22.4373L11.99 19.3373H12Z\"></path></g></svg>"
 
 /***/ }),
 
@@ -17172,7 +17311,7 @@ module.exports = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = "<svg viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\"><g><path d=\"M24 39.5057L11.7226 45.9839C10.4095 46.6739 8.87606 45.5622 9.12525 44.096L11.4734 30.373L1.54411 20.6556C0.480254 19.6207 1.06489 17.8095 2.53128 17.5986L16.2559 15.5957L22.3994 3.10891C23.0512 1.77685 24.9488 1.77685 25.6102 3.10891L31.7441 15.5957L45.4687 17.5986C46.9351 17.8095 47.5197 19.6207 46.4559 20.6556L36.5266 30.373L38.8748 44.096C39.1239 45.5622 37.5905 46.6835 36.2774 45.9839L24 39.5057Z\" stroke-width=\"2\"></path></g></svg>"
+module.exports = "<svg viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\"><g><path d=\"M24 39.5057L11.7226 45.9839C10.4095 46.6739 8.87606 45.5622 9.12525 44.096L11.4734 30.373L1.54411 20.6556C0.480254 19.6207 1.06489 17.8095 2.53128 17.5986L16.2559 15.5957L22.3994 3.10891C23.0512 1.77685 24.9488 1.77685 25.6102 3.10891L31.7441 15.5957L45.4687 17.5986C46.9351 17.8095 47.5197 19.6207 46.4559 20.6556L36.5266 30.373L38.8748 44.096C39.1239 45.5622 37.5905 46.6835 36.2774 45.9839L24 39.5057Z\"></path></g></svg>"
 
 /***/ }),
 
@@ -21048,7 +21187,7 @@ var englishStrings = {
     uploadingFile: "Your file is uploading. Please wait several seconds and try again.",
     loadingFile: "Loading...",
     chooseFile: "Choose file(s)...",
-    noFileChosen: "No file chosen",
+    noFileChosen: "No file selected",
     filePlaceholder: "Drag and drop a file here or click the button below to select a file to upload.",
     confirmDelete: "Are you sure you want to delete this record?",
     keyDuplicationError: "This value should be unique.",
@@ -21067,6 +21206,7 @@ var englishStrings = {
     savingData: "The results are being saved on the server...",
     savingDataError: "An error occurred and we could not save the results.",
     savingDataSuccess: "The results were saved successfully!",
+    savingExceedSize: "Your response exceeds 64KB. Please reduce the size of your file(s) and try again or contact a survey owner.",
     saveAgainButton: "Try again",
     timerMin: "min",
     timerSec: "sec",
@@ -21078,6 +21218,7 @@ var englishStrings = {
     timerLimitSurvey: "You have spent {0} of {1} in total.",
     clearCaption: "Clear",
     signaturePlaceHolder: "Sign here",
+    signaturePlaceHolderReadOnly: "No signature",
     chooseFileCaption: "Select File",
     takePhotoCaption: "Take Photo",
     photoPlaceholder: "Click the button below to take a photo using the camera.",
@@ -21094,7 +21235,7 @@ var englishStrings = {
     filterStringPlaceholder: "Type to search...",
     emptyMessage: "No data to display",
     noEntriesText: "No entries yet.\nClick the button below to add a new entry.",
-    noEntriesReadonlyText: "No entries.",
+    noEntriesReadonlyText: "No entries",
     more: "More",
     tagboxDoneButtonCaption: "OK",
     selectToRankEmptyRankedAreaText: "All choices are selected for ranking",
@@ -21579,9 +21720,6 @@ var InputElementAdapter = /** @class */ (function () {
         if (_value === null || _value === undefined) {
             _value = "";
         }
-        else if (typeof _value !== "string") {
-            _value = _value.toString();
-        }
         this.inputElement.value = inputMaskInstance.getMaskedValue(_value);
         this.prevUnmaskedValue = _value;
         inputMaskInstance.onPropertyChanged.add(this.inputMaskInstancePropertyChangedHandler);
@@ -21702,17 +21840,12 @@ var InputMaskBase = /** @class */ (function (_super) {
         });
         return res;
     };
-    // public get maskedInputValue(): string {
-    //   return this.input.value;
-    // }
-    // public get unmaskedInputValue(): string {
-    //   return this.getUnmaskedValue(this.input.value, true);
-    // }
     InputMaskBase.prototype.processInput = function (args) {
         return { value: args.prevValue, caretPosition: args.selectionEnd, cancelPreventDefault: false };
     };
     InputMaskBase.prototype.getUnmaskedValue = function (src) { return src; };
     InputMaskBase.prototype.getMaskedValue = function (src) { return src; };
+    InputMaskBase.prototype.getTextAlignment = function () { return "auto"; };
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
     ], InputMaskBase.prototype, "saveMaskedValue", void 0);
@@ -21889,6 +22022,17 @@ var __extends = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -21900,11 +22044,15 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 function getMaxCountLexem(currentLexemType, count) {
     switch (currentLexemType) {
-        case ("day"):
-        case ("month"): {
+        case "hour":
+        case "minute":
+        case "second":
+        case "day":
+        case "month": {
             return 2;
         }
-        case ("year"): {
+        case "timeMarker":
+        case "year": {
             return count;
         }
         default: {
@@ -21936,7 +22084,8 @@ function getDefaultYearForValidation(minYear, maxYear) {
 function getDateTimeLexems(pattern) {
     var result = [];
     var prevLexemType;
-    var createOrUpdateLexem = function (currentLexemType, currentChar) {
+    var createOrUpdateLexem = function (currentLexemType, currentChar, upperCase) {
+        if (upperCase === void 0) { upperCase = false; }
         if (!!prevLexemType && prevLexemType === currentLexemType) {
             result[result.length - 1].count++;
             var maxCount = getMaxCountLexem(currentLexemType, result[result.length - 1].count);
@@ -21945,23 +22094,41 @@ function getDateTimeLexems(pattern) {
         else {
             var maxCount = getMaxCountLexem(currentLexemType, 1);
             // result.push({ type: currentLexemType, value: currentChar, count: 1, data: { value: "", isCompleted: false, isCorrect: false }, maxCount: maxCount });
-            result.push({ type: currentLexemType, value: currentChar, count: 1, maxCount: maxCount });
+            result.push({ type: currentLexemType, value: currentChar, count: 1, maxCount: maxCount, upperCase: upperCase });
         }
     };
     for (var index = 0; index < pattern.length; index++) {
         var currentChar = pattern[index];
         switch (currentChar) {
             case "m":
-                createOrUpdateLexem("month", "m");
+                createOrUpdateLexem("month", currentChar);
                 break;
             case "d":
-                createOrUpdateLexem("day", "d");
+                createOrUpdateLexem("day", currentChar);
                 break;
             case "y":
-                createOrUpdateLexem("year", "y");
+                createOrUpdateLexem("year", currentChar);
+                break;
+            case "h":
+                createOrUpdateLexem("hour", currentChar, false);
+                break;
+            case "H":
+                createOrUpdateLexem("hour", currentChar, true);
+                break;
+            case "M":
+                createOrUpdateLexem("minute", currentChar);
+                break;
+            case "s":
+                createOrUpdateLexem("second", currentChar);
+                break;
+            case "t":
+                createOrUpdateLexem("timeMarker", currentChar);
+                break;
+            case "T":
+                createOrUpdateLexem("timeMarker", currentChar, true);
                 break;
             default:
-                result.push({ type: "separator", value: currentChar, count: 1, maxCount: 1 });
+                result.push({ type: "separator", value: currentChar, count: 1, maxCount: 1, upperCase: false });
                 break;
         }
         prevLexemType = result[result.length - 1].type;
@@ -21992,11 +22159,42 @@ var InputMaskDateTime = /** @class */ (function (_super) {
     __extends(InputMaskDateTime, _super);
     function InputMaskDateTime() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.defaultDate = "1970-01-01T";
         _this.turnOfTheCentury = 68;
+        _this.twelve = 12;
         _this.lexems = [];
         _this.inputDateTimeData = [];
+        _this.validBeginningOfNumbers = {
+            hour: 1,
+            hourU: 2,
+            minute: 5,
+            second: 5,
+            day: 3,
+            month: 1,
+        };
         return _this;
     }
+    Object.defineProperty(InputMaskDateTime.prototype, "hasDatePart", {
+        get: function () {
+            return this.lexems.some(function (l) { return l.type === "day" || l.type === "month" || l.type === "year"; });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(InputMaskDateTime.prototype, "hasTimePart", {
+        get: function () {
+            return this.lexems.some(function (l) { return l.type === "hour" || l.type === "minute" || l.type === "second"; });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(InputMaskDateTime.prototype, "is12Hours", {
+        get: function () {
+            return this.lexems.filter(function (l) { return l.type === "hour" && !l.upperCase; }).length > 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
     InputMaskDateTime.prototype.getType = function () {
         return "datetimemask";
     };
@@ -22016,20 +22214,45 @@ var InputMaskDateTime = /** @class */ (function (_super) {
         var _this = this;
         var date = new Date(str);
         this.initInputDateTimeData();
+        if (!this.hasDatePart) {
+            date = new Date(this.defaultDate + str);
+        }
         if (!isNaN(date)) {
             this.lexems.forEach(function (lexem, index) {
                 var inputData = _this.inputDateTimeData[index];
                 inputData.isCompleted = true;
                 switch (lexem.type) {
-                    case ("day"): {
+                    case "hour": {
+                        if (!_this.is12Hours) {
+                            inputData.value = date.getHours().toString();
+                        }
+                        else {
+                            inputData.value = ((date.getHours() - 1) % _this.twelve + 1).toString();
+                        }
+                        break;
+                    }
+                    case "minute": {
+                        inputData.value = date.getMinutes().toString();
+                        break;
+                    }
+                    case "second": {
+                        inputData.value = date.getSeconds().toString();
+                        break;
+                    }
+                    case "timeMarker": {
+                        var marker = (date.getHours() >= _this.twelve) ? "pm" : "am";
+                        inputData.value = lexem.upperCase ? marker.toUpperCase() : marker;
+                        break;
+                    }
+                    case "day": {
                         inputData.value = date.getDate().toString();
                         break;
                     }
-                    case ("month"): {
+                    case "month": {
                         inputData.value = (date.getMonth() + 1).toString();
                         break;
                     }
-                    case ("year"): {
+                    case "year": {
                         var year = date.getFullYear();
                         if (lexem.count == 2)
                             year = year % 100;
@@ -22053,6 +22276,7 @@ var InputMaskDateTime = /** @class */ (function (_super) {
     };
     InputMaskDateTime.prototype.getISO_8601Format = function (dateTime) {
         var date = [];
+        var time = [];
         if (dateTime.year !== undefined) {
             var year = this.getPlaceholder(4, dateTime.year.toString(), "0") + dateTime.year;
             date.push(year);
@@ -22065,7 +22289,26 @@ var InputMaskDateTime = /** @class */ (function (_super) {
             var day = this.getPlaceholder(2, dateTime.day.toString(), "0") + dateTime.day;
             date.push(day);
         }
-        return date.join("-");
+        if (dateTime.hour !== undefined) {
+            var hour = this.getPlaceholder(2, dateTime.hour.toString(), "0") + dateTime.hour;
+            time.push(hour);
+        }
+        if (dateTime.minute !== undefined && dateTime.hour !== undefined) {
+            var minute = this.getPlaceholder(2, dateTime.minute.toString(), "0") + dateTime.minute;
+            time.push(minute);
+        }
+        if (dateTime.second !== undefined && dateTime.minute !== undefined && dateTime.hour !== undefined) {
+            var second = this.getPlaceholder(2, dateTime.second.toString(), "0") + dateTime.second;
+            time.push(second);
+        }
+        var result = [];
+        if (date.length > 0) {
+            result.push(date.join("-"));
+        }
+        if (time.length > 1) {
+            result.push(time.join(":"));
+        }
+        return result.join("T");
     };
     InputMaskDateTime.prototype.isYearValid = function (dateTime) {
         if (dateTime.min === undefined && dateTime.max === undefined)
@@ -22075,74 +22318,153 @@ var InputMaskDateTime = /** @class */ (function (_super) {
         var maxYearPart = dateTime.max.toISOString().slice(0, data.length);
         return dateTime.year >= parseInt(minYearPart) && dateTime.year <= parseInt(maxYearPart);
     };
+    InputMaskDateTime.prototype.createIDateTimeCompositionWithDefaults = function (dateTime, isUpperLimit) {
+        var min = dateTime.min;
+        var max = dateTime.max;
+        var year = dateTime.year !== undefined ? dateTime.year : getDefaultYearForValidation(min.getFullYear(), max.getFullYear());
+        var month = dateTime.month !== undefined ? dateTime.month : (isUpperLimit && this.hasDatePart ? 12 : 1);
+        var day = dateTime.day !== undefined ? dateTime.day : (isUpperLimit && this.hasDatePart ? this.getMaxDateForMonth(year, month) : 1);
+        var hour = dateTime.hour !== undefined ? dateTime.hour : (isUpperLimit ? 23 : 0);
+        var minute = dateTime.minute !== undefined ? dateTime.minute : (isUpperLimit ? 59 : 0);
+        var second = dateTime.second !== undefined ? dateTime.second : (isUpperLimit ? 59 : 0);
+        return { year: year, month: month, day: day, hour: hour, minute: minute, second: second };
+    };
+    InputMaskDateTime.prototype.getMaxDateForMonth = function (year, month) {
+        if (month == 2)
+            return year % 4 == 0 && year % 100 != 0 || year % 400 ? 29 : 28;
+        return [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month - 1];
+    };
     InputMaskDateTime.prototype.isDateValid = function (dateTime) {
         var min = dateTime.min;
         var max = dateTime.max;
         var year = dateTime.year !== undefined ? dateTime.year : getDefaultYearForValidation(min.getFullYear(), max.getFullYear());
         var month = dateTime.month !== undefined ? dateTime.month : 1;
         var day = dateTime.day !== undefined ? dateTime.day : 1;
-        var date = new Date(this.getISO_8601Format({ year: year, month: month, day: day }));
         var monthIndex = month - 1;
+        var date = new Date(this.getISO_8601Format(this.createIDateTimeCompositionWithDefaults(dateTime, false)));
+        var dateH = new Date(this.getISO_8601Format(this.createIDateTimeCompositionWithDefaults(dateTime, true)));
         return !isNaN(date) &&
             date.getDate() === day &&
             date.getMonth() === monthIndex &&
             date.getFullYear() === year &&
-            date >= dateTime.min && date <= dateTime.max;
+            dateH >= dateTime.min && date <= dateTime.max;
     };
     InputMaskDateTime.prototype.getPlaceholder = function (lexemLength, str, char) {
         var paddingsLength = lexemLength - (str || "").length;
         var paddings = paddingsLength > 0 ? char.repeat(paddingsLength) : "";
         return paddings;
     };
+    InputMaskDateTime.prototype.isDateValid12 = function (dateTime12) {
+        if (!this.is12Hours)
+            return this.isDateValid(dateTime12);
+        if (this.is12Hours && dateTime12.hour > this.twelve) {
+            return false;
+        }
+        if (!dateTime12.timeMarker) {
+            if (this.isDateValid(dateTime12))
+                return true;
+            dateTime12.hour += this.twelve;
+            return this.isDateValid(dateTime12);
+        }
+        else if (dateTime12.timeMarker[0].toLowerCase() === "p") {
+            if (dateTime12.hour !== this.twelve) {
+                dateTime12.hour += this.twelve;
+            }
+            return this.isDateValid(dateTime12);
+        }
+        else {
+            if (dateTime12.hour === this.twelve) {
+                dateTime12.hour = 0;
+            }
+            return this.isDateValid(dateTime12);
+        }
+    };
+    InputMaskDateTime.prototype.updateTimeMarkerInputDateTimeData = function (newItem, dateTime) {
+        var data = newItem.value;
+        if (!data)
+            return;
+        var propertyName = "timeMarker";
+        var tempDateTime = __assign({}, dateTime);
+        tempDateTime[propertyName] = data;
+        if (this.isDateValid12(tempDateTime)) {
+            newItem.isCompleted = true;
+        }
+        else {
+            data = data.slice(0, data.length - 1);
+        }
+        newItem.value = data || undefined;
+        dateTime[propertyName] = data || undefined;
+        return;
+    };
     InputMaskDateTime.prototype.updateInputDateTimeData = function (newItem, dateTime) {
         var data = newItem.value;
         if (!data)
             return;
         var propertyName = newItem.lexem.type;
-        dateTime[propertyName] = parseInt(data);
+        var tempDateTime = __assign({}, dateTime);
+        tempDateTime[propertyName] = parseInt(data);
         if (data.length === newItem.lexem.maxCount) {
-            if (this.isDateValid(dateTime)) {
+            if (this.isDateValid12(tempDateTime)) {
                 newItem.isCompleted = true;
+                newItem.value = data || undefined;
+                dateTime[propertyName] = parseInt(data) > 0 ? parseInt(data) : undefined;
+                return;
             }
             else {
                 data = data.slice(0, data.length - 1);
             }
         }
-        dateTime[propertyName] = parseInt(data);
-        if (propertyName === "year" && !this.isYearValid(dateTime)) {
+        tempDateTime[propertyName] = parseInt(data);
+        var firstDigit = parseInt(data[0]);
+        var validBeginningOfNumber = this.validBeginningOfNumbers[propertyName + (newItem.lexem.upperCase ? "U" : "")];
+        if ((propertyName === "year" && !this.isYearValid(tempDateTime))) {
             data = data.slice(0, data.length - 1);
+            newItem.isCompleted = false;
         }
-        else if ((propertyName === "day" && parseInt(data[0]) > 3) || (propertyName === "month" && parseInt(data[0]) > 1)) {
-            if (this.isDateValid(dateTime)) {
+        else if (validBeginningOfNumber !== undefined && firstDigit > validBeginningOfNumber) {
+            if (this.isDateValid12(tempDateTime)) {
                 newItem.isCompleted = true;
             }
             else {
                 data = data.slice(0, data.length - 1);
             }
         }
-        else if ((propertyName === "day" && parseInt(data[0]) <= 3 && parseInt(data[0]) !== 0) || (propertyName === "month" && parseInt(data[0]) <= 1 && parseInt(data[0]) !== 0)) {
-            var prevValue = dateTime[propertyName];
-            var tempValue = prevValue * 10;
-            var maxValue = propertyName === "month" ? 3 : 10;
-            newItem.isCompleted = true;
-            for (var index = 0; index < maxValue; index++) {
-                dateTime[propertyName] = tempValue + index;
-                if (this.isDateValid(dateTime)) {
-                    newItem.isCompleted = false;
-                    break;
-                }
-            }
-            dateTime[propertyName] = prevValue;
-            if (newItem.isCompleted && !this.isDateValid(dateTime)) {
+        else if (validBeginningOfNumber !== undefined && firstDigit !== 0 && firstDigit <= validBeginningOfNumber) {
+            this.checkValidationDateTimePart(tempDateTime, propertyName, newItem);
+            if (newItem.isCompleted && !this.isDateValid12(tempDateTime)) {
                 data = data.slice(0, data.length - 1);
             }
         }
         newItem.value = data || undefined;
         dateTime[propertyName] = parseInt(data) > 0 ? parseInt(data) : undefined;
     };
+    InputMaskDateTime.prototype.checkValidationDateTimePart = function (dateTime, propertyName, newItem) {
+        var prevValue = dateTime[propertyName];
+        var tempValue = prevValue * 10;
+        var maxValue = 10;
+        if (propertyName === "month")
+            maxValue = 3;
+        if (propertyName === "hour")
+            maxValue = this.is12Hours ? 3 : 5;
+        newItem.isCompleted = true;
+        for (var index = 0; index < maxValue; index++) {
+            dateTime[propertyName] = tempValue + index;
+            if (this.isDateValid12(dateTime)) {
+                newItem.isCompleted = false;
+                break;
+            }
+        }
+        dateTime[propertyName] = prevValue;
+    };
     InputMaskDateTime.prototype.getCorrectDatePartFormat = function (inputData, matchWholeMask) {
         var lexem = inputData.lexem;
         var dataStr = inputData.value || "";
+        if (!!dataStr && lexem.type === "timeMarker") {
+            if (matchWholeMask) {
+                dataStr = dataStr + this.getPlaceholder(lexem.count, dataStr, lexem.value);
+            }
+            return dataStr;
+        }
         if (!!dataStr && inputData.isCompleted) {
             dataStr = parseInt(dataStr).toString();
         }
@@ -22160,12 +22482,24 @@ var InputMaskDateTime = /** @class */ (function (_super) {
         return dataStr;
     };
     InputMaskDateTime.prototype.createIDateTimeComposition = function () {
+        var isoMin, isoMax;
+        if (this.hasDatePart) {
+            isoMin = this.min || "0001-01-01";
+            isoMax = this.max || "9999-12-31";
+        }
+        else {
+            isoMin = this.defaultDate + (this.min || "00:00:00");
+            isoMax = this.defaultDate + (this.max || "23:59:59");
+        }
         var tempDateTime = {
+            hour: undefined,
+            minute: undefined,
+            second: undefined,
             day: undefined,
             month: undefined,
             year: undefined,
-            min: new Date(this.min || "0001-01-01"),
-            max: new Date(this.max || "9999-12-31")
+            min: new Date(isoMin),
+            max: new Date(isoMax)
         };
         return tempDateTime;
     };
@@ -22192,6 +22526,10 @@ var InputMaskDateTime = /** @class */ (function (_super) {
         for (var index = 0; index < this.inputDateTimeData.length; index++) {
             var inputData = this.inputDateTimeData[index];
             switch (inputData.lexem.type) {
+                case "timeMarker":
+                case "hour":
+                case "minute":
+                case "second":
                 case "day":
                 case "month":
                 case "year":
@@ -22200,7 +22538,7 @@ var InputMaskDateTime = /** @class */ (function (_super) {
                         return result;
                     }
                     else {
-                        var _matchWholeMask = matchWholeMask || lastItemWithDataIndex !== index;
+                        var _matchWholeMask = matchWholeMask || lastItemWithDataIndex > index;
                         var data = this.getCorrectDatePartFormat(inputData, _matchWholeMask);
                         result += (prevSeparator + data);
                         prevIsCompleted = inputData.isCompleted;
@@ -22213,15 +22551,38 @@ var InputMaskDateTime = /** @class */ (function (_super) {
         }
         return result;
     };
+    InputMaskDateTime.prototype.cleanTimeMarker = function (str, upperCase) {
+        var result = "";
+        str = str.toUpperCase();
+        for (var i = 0; i < str.length; i++) {
+            if (!result && (str[i] == "P" || str[i] == "A") || result && str[i] == "M")
+                result += str[i];
+        }
+        if (upperCase) {
+            result = result.toUpperCase();
+        }
+        else {
+            result = result.toLowerCase();
+        }
+        return result;
+    };
     InputMaskDateTime.prototype.setInputDateTimeData = function (numberParts) {
         var _this = this;
         var numberPartsArrayIndex = 0;
         this.initInputDateTimeData();
         this.lexems.forEach(function (lexem, index) {
-            if (lexem.type !== "separator" && numberParts.length > 0 && numberPartsArrayIndex < numberParts.length) {
+            if (numberParts.length > 0 && numberPartsArrayIndex < numberParts.length) {
+                if (lexem.type === "separator")
+                    return;
                 var inputData = _this.inputDateTimeData[index];
                 var currentPart = numberParts[numberPartsArrayIndex];
-                var _data = _this.leaveOnlyNumbers(currentPart);
+                var _data = void 0;
+                if (lexem.type === "timeMarker") {
+                    _data = _this.cleanTimeMarker(currentPart, lexem.upperCase);
+                }
+                else {
+                    _data = _this.leaveOnlyNumbers(currentPart);
+                }
                 inputData.value = _data.slice(0, lexem.maxCount);
                 numberPartsArrayIndex++;
             }
@@ -22234,7 +22595,14 @@ var InputMaskDateTime = /** @class */ (function (_super) {
         var inputParts = this.getParts(input);
         this.setInputDateTimeData(inputParts);
         var tempDateTime = this.createIDateTimeComposition();
-        this.inputDateTimeData.forEach(function (itemData) { return _this.updateInputDateTimeData(itemData, tempDateTime); });
+        this.inputDateTimeData.forEach(function (itemData) {
+            if (itemData.lexem.type === "timeMarker") {
+                _this.updateTimeMarkerInputDateTimeData(itemData, tempDateTime);
+            }
+            else {
+                _this.updateInputDateTimeData(itemData, tempDateTime);
+            }
+        });
         var result = this.getFormatedString(matchWholeMask);
         return result;
     };
@@ -22252,6 +22620,11 @@ var InputMaskDateTime = /** @class */ (function (_super) {
                 foundPseudoSeparator = false;
                 curPart += inputChar;
             }
+            else if (lexemsWithValue[inputParts.length].type === "timeMarker") {
+                foundSeparator = false;
+                foundPseudoSeparator = false;
+                curPart += inputChar;
+            }
             else {
                 if (separators.indexOf(inputChar) !== -1) {
                     if (!foundPseudoSeparator) {
@@ -22280,17 +22653,27 @@ var InputMaskDateTime = /** @class */ (function (_super) {
     };
     InputMaskDateTime.prototype.getUnmaskedValue = function (src) {
         var _this = this;
+        var _a;
         var input = (src === undefined || src === null) ? "" : src.toString();
         var inputParts = this.getParts(input);
         this.setInputDateTimeData(inputParts);
+        var timeMarker = (_a = this.inputDateTimeData.filter(function (idtd) { return idtd.lexem.type === "timeMarker"; })[0]) === null || _a === void 0 ? void 0 : _a.value.toLowerCase()[0];
         var tempDateTime = this.createIDateTimeComposition();
+        var uncompleted = false;
         this.inputDateTimeData.forEach(function (inputData) {
             var str = inputData.value;
-            if (!str || str.length < inputData.lexem.count)
-                return undefined;
-            tempDateTime[inputData.lexem.type] = parseInt(_this.parseTwoDigitYear(inputData));
+            if (inputData.lexem.type == "timeMarker" || inputData.lexem.type == "separator")
+                return;
+            if (!str || str.length < inputData.lexem.count) {
+                uncompleted = true;
+                return;
+            }
+            var value = parseInt(_this.parseTwoDigitYear(inputData));
+            if (inputData.lexem.type == "hour" && timeMarker === "p" && value != _this.twelve)
+                value += _this.twelve;
+            tempDateTime[inputData.lexem.type] = value;
         });
-        return this.getISO_8601Format(tempDateTime);
+        return uncompleted ? "" : this.getISO_8601Format(tempDateTime);
     };
     InputMaskDateTime.prototype.getMaskedValue = function (src) {
         return this.getMaskedStrFromISO(src);
@@ -22502,9 +22885,6 @@ var InputMaskNumeric = /** @class */ (function (_super) {
     InputMaskNumeric.prototype.parseNumber = function (src) {
         var result = { integralPart: "", fractionalPart: "", hasDecimalSeparator: false, isNegative: false };
         var input = (src === undefined || src === null) ? "" : src.toString();
-        if (typeof src === "number") {
-            input = src.toString().replace(".", this.decimalSeparator);
-        }
         var minusCharCount = 0;
         for (var inputIndex = 0; inputIndex < input.length; inputIndex++) {
             var currentChar = input[inputIndex];
@@ -22544,8 +22924,7 @@ var InputMaskNumeric = /** @class */ (function (_super) {
     };
     InputMaskNumeric.prototype.getNumberMaskedValue = function (src, matchWholeMask) {
         if (matchWholeMask === void 0) { matchWholeMask = false; }
-        var input = (src === undefined || src === null) ? "" : src;
-        var parsedNumber = this.parseNumber(input);
+        var parsedNumber = this.parseNumber(src);
         if (!this.validateNumber(parsedNumber, matchWholeMask)) {
             return null;
         }
@@ -22556,8 +22935,13 @@ var InputMaskNumeric = /** @class */ (function (_super) {
         var parsedNumber = this.parseNumber(str);
         return this.convertNumber(parsedNumber);
     };
+    InputMaskNumeric.prototype.getTextAlignment = function () {
+        return "right";
+    };
     InputMaskNumeric.prototype.getMaskedValue = function (src) {
-        return this.getNumberMaskedValue(src, true);
+        var input = (src === undefined || src === null) ? "" : src.toString();
+        input = input.replace(".", this.decimalSeparator);
+        return this.getNumberMaskedValue(input, true);
     };
     InputMaskNumeric.prototype.getUnmaskedValue = function (src) {
         return this.getNumberUnmaskedValue(src);
@@ -23641,6 +24025,10 @@ var QuestionRowModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionRowModel.prototype.getIsAnimationAllowed = function () {
+        var _a;
+        return _super.prototype.getIsAnimationAllowed.call(this) && this.visible && ((_a = this.panel) === null || _a === void 0 ? void 0 : _a.animationAllowed);
+    };
     QuestionRowModel.prototype.getVisibleElementsAnimationOptions = function () {
         var _this = this;
         var beforeRunAnimation = function (el) {
@@ -23648,7 +24036,7 @@ var QuestionRowModel = /** @class */ (function (_super) {
             el.style.setProperty("--animation-width", Object(_utils_utils__WEBPACK_IMPORTED_MODULE_8__["getElementWidth"])(el) + "px");
         };
         return {
-            isAnimationEnabled: function () { var _a; return _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].animationEnabled && ((_a = _this.panel) === null || _a === void 0 ? void 0 : _a.animationAllowed) && _this.visible; },
+            isAnimationEnabled: function () { return _this.animationAllowed; },
             getAnimatedElement: function (element) { return element.getWrapperElement(); },
             getLeaveOptions: function (element) {
                 var surveyElement = element;
@@ -23797,7 +24185,7 @@ var QuestionRowModel = /** @class */ (function (_super) {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_9__["CssClassBuilder"]()
             .append(this.panel.cssClasses.row)
             .append(this.panel.cssClasses.rowCompact, this.panel["isCompact"])
-            .append(this.panel.cssClasses.pageRow, this.panel.isPage || (!!this.panel.originalPage))
+            .append(this.panel.cssClasses.pageRow, this.panel.isPage || this.panel.showPanelAsPage)
             .append(this.panel.cssClasses.rowMultiple, this.visibleElements.length > 1)
             .toString();
     };
@@ -23861,7 +24249,7 @@ var PanelModelBase = /** @class */ (function (_super) {
             el.style.setProperty("--animation-height", el.offsetHeight + "px");
         };
         return {
-            isAnimationEnabled: function () { return _settings__WEBPACK_IMPORTED_MODULE_7__["settings"].animationEnabled && _this.animationAllowed; },
+            isAnimationEnabled: function () { return _this.animationAllowed; },
             getAnimatedElement: function (row) { return row.getRootElement(); },
             getLeaveOptions: function (_) {
                 return { cssClass: _this.cssClasses.rowFadeOut,
@@ -23898,14 +24286,14 @@ var PanelModelBase = /** @class */ (function (_super) {
         return "panelbase";
     };
     PanelModelBase.prototype.setSurveyImpl = function (value, isLight) {
-        this.animationAllowed = false;
+        this.blockAnimations();
         _super.prototype.setSurveyImpl.call(this, value, isLight);
         if (this.isDesignMode)
             this.onVisibleChanged();
         for (var i = 0; i < this.elements.length; i++) {
             this.elements[i].setSurveyImpl(value, isLight);
         }
-        this.animationAllowed = true;
+        this.releaseAnimations();
     };
     PanelModelBase.prototype.endLoadingFromJson = function () {
         _super.prototype.endLoadingFromJson.call(this);
@@ -24720,13 +25108,13 @@ var PanelModelBase = /** @class */ (function (_super) {
         return new QuestionRowModel(this);
     };
     PanelModelBase.prototype.onSurveyLoad = function () {
-        this.animationAllowed = false;
+        this.blockAnimations();
         _super.prototype.onSurveyLoad.call(this);
         for (var i = 0; i < this.elements.length; i++) {
             this.elements[i].onSurveyLoad();
         }
         this.onElementVisibilityChanged(this);
-        this.animationAllowed = true;
+        this.releaseAnimations();
     };
     PanelModelBase.prototype.onFirstRendering = function () {
         _super.prototype.onFirstRendering.call(this);
@@ -24760,9 +25148,9 @@ var PanelModelBase = /** @class */ (function (_super) {
     PanelModelBase.prototype.onRowsChanged = function () {
         if (this.isLoadingFromJson)
             return;
-        this.animationAllowed = false;
+        this.blockAnimations();
         this.setArrayPropertyDirectly("rows", this.buildRows());
-        this.animationAllowed = true;
+        this.releaseAnimations();
     };
     PanelModelBase.prototype.blockRowsUpdates = function () {
         this.locCountRowUpdates++;
@@ -25844,7 +26232,10 @@ var PanelModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(PanelModel.prototype, "showPanelAsPage", {
         get: function () {
-            return !!this.originalPage;
+            var panel = this;
+            if (!!panel.originalPage)
+                return true;
+            return panel.survey.isShowingPreview && panel.survey.isSinglePage && !!panel.parent && !!panel.parent.originalPage;
         },
         enumerable: false,
         configurable: true
@@ -26147,6 +26538,7 @@ var PopupDropdownViewModel = /** @class */ (function (_super) {
             this.resizeEventCallback();
         }
         _global_variables_utils__WEBPACK_IMPORTED_MODULE_6__["DomWindowHelper"].addEventListener("scroll", this.scrollEventCallBack);
+        this._isPositionSetValue = true;
     };
     Object.defineProperty(PopupDropdownViewModel.prototype, "shouldCreateResizeCallback", {
         get: function () {
@@ -26887,6 +27279,7 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
                 if (!val) {
                     _this.updateOnHiding();
                     _this.updateIsVisible(val);
+                    _this._isPositionSetValue = false;
                 }
                 else {
                     _this.updateIsVisible(val);
@@ -26897,7 +27290,9 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
         _this.onModelIsVisibleChangedCallback = function () {
             _this.isVisible = _this.model.isVisible;
         };
+        _this._isPositionSetValue = false;
         _this.model = model;
+        _this.locale = _this.model.locale;
         return _this;
     }
     PopupBaseViewModel.prototype.updateIsVisible = function (val) {
@@ -27133,12 +27528,20 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
             this.focusContainer();
         }
     };
+    Object.defineProperty(PopupBaseViewModel.prototype, "isPositionSet", {
+        get: function () {
+            return this._isPositionSetValue;
+        },
+        enumerable: false,
+        configurable: true
+    });
     PopupBaseViewModel.prototype.updateOnShowing = function () {
         this.prevActiveElement = _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].environment.root.activeElement;
         if (this.isOverlay) {
             this.resetDimensionsAndPositionStyleProperties();
         }
         this.switchFocus();
+        this._isPositionSetValue = true;
     };
     PopupBaseViewModel.prototype.updateOnHiding = function () {
         if (this.isFocusedContent && this.prevActiveElement) {
@@ -28311,8 +28714,7 @@ var Question = /** @class */ (function (_super) {
     };
     Question.prototype.runTriggers = function (name, value) {
         var _this = this;
-        if (this.isReadOnly || this.isSettingQuestionValue ||
-            (this.parentQuestion && this.parentQuestion.getValueName() === name))
+        if (this.isSettingQuestionValue || (this.parentQuestion && this.parentQuestion.getValueName() === name))
             return;
         this.triggersInfo.forEach(function (info) {
             _this.runTriggerInfo(info, name, value);
@@ -28406,10 +28808,11 @@ var Question = /** @class */ (function (_super) {
     });
     Question.prototype.getTitleOwner = function () { return this; };
     Question.prototype.getIsTitleRenderedAsString = function () { return this.titleLocation === "hidden"; };
+    Question.prototype.notifySurveyOnChildrenVisibilityChanged = function () { return false; };
     Question.prototype.notifySurveyVisibilityChanged = function () {
         if (!this.survey || this.isLoadingFromJson)
             return;
-        this.survey.questionVisibilityChanged(this, this.isVisible);
+        this.survey.questionVisibilityChanged(this, this.isVisible, !this.parentQuestion || this.parentQuestion.notifySurveyOnChildrenVisibilityChanged());
         var isClearOnHidden = this.isClearValueOnHidden;
         if (!this.visible) {
             this.clearValueOnHidding(isClearOnHidden);
@@ -29002,7 +29405,9 @@ var Question = /** @class */ (function (_super) {
     Question.prototype.getRootCss = function () {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__["CssClassBuilder"]()
             .append(this.cssRoot)
-            .append(this.cssClasses.disabled, this.isReadOnly)
+            .append(this.cssClasses.readOnly, this.isReadOnlyStyle)
+            .append(this.cssClasses.disabled, this.isDisabledStyle)
+            .append(this.cssClasses.preview, this.isPreviewStyle)
             .append(this.cssClasses.invisible, !this.isDesignMode && this.areInvisibleElementsShowing && !this.visible)
             .toString();
     };
@@ -29527,6 +29932,7 @@ var Question = /** @class */ (function (_super) {
         configurable: true
     });
     Question.prototype.getFilteredValue = function () { return this.value; };
+    Question.prototype.getFilteredName = function () { return this.getValueName(); };
     Object.defineProperty(Question.prototype, "valueForSurvey", {
         get: function () {
             if (!!this.valueToDataCallback) {
@@ -30129,7 +30535,7 @@ var Question = /** @class */ (function (_super) {
     };
     Question.prototype.addConditionObjectsByContext = function (objects, context) {
         objects.push({
-            name: this.getValueName(),
+            name: this.getFilteredName(),
             text: this.processedTitle,
             question: this,
         });
@@ -33171,15 +33577,20 @@ var QuestionSelectBase = /** @class */ (function (_super) {
             .append(this.cssClasses.itemInline, !this.hasColumns && this.colCount === 0)
             .append("sv-q-col-" + this.getCurrentColCount(), !this.hasColumns && this.colCount !== 0)
             .append(this.cssClasses.itemOnError, this.hasCssError());
-        var isDisabled = this.isReadOnly || !item.isEnabled;
+        var readOnlyStyles = this.getIsDisableAndReadOnlyStyles(!item.isEnabled);
+        var isReadOnly = readOnlyStyles[0];
+        var isDisabled = readOnlyStyles[1];
         var isChecked = this.isItemSelected(item) ||
             (this.isOtherSelected && this.otherItem.value === item.value);
         var allowHover = !isDisabled && !isChecked && !(!!this.survey && this.survey.isDesignMode);
         var isNone = item === this.noneItem;
-        options.isDisabled = isDisabled;
+        options.isDisabled = isDisabled || isReadOnly;
         options.isChecked = isChecked;
         options.isNone = isNone;
-        return builder.append(this.cssClasses.itemDisabled, isDisabled)
+        return builder
+            .append(this.cssClasses.itemDisabled, isDisabled)
+            .append(this.cssClasses.itemReadOnly, isReadOnly)
+            .append(this.cssClasses.itemPreview, this.isPreviewStyle)
             .append(this.cssClasses.itemChecked, isChecked)
             .append(this.cssClasses.itemHover, allowHover)
             .append(this.cssClasses.itemNone, isNone)
@@ -33342,6 +33753,9 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     };
     Object.defineProperty(QuestionSelectBase.prototype, "itemSvgIcon", {
         get: function () {
+            if (this.isPreviewStyle && this.cssClasses.itemPreviewSvgIconId) {
+                return this.cssClasses.itemPreviewSvgIconId;
+            }
             return this.cssClasses.itemSvgIconId;
         },
         enumerable: false,
@@ -33901,7 +34315,9 @@ var QuestionBooleanModel = /** @class */ (function (_super) {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_3__["CssClassBuilder"]()
             .append(css.item)
             .append(css.itemOnError, this.hasCssError())
-            .append(css.itemDisabled, this.isReadOnly)
+            .append(css.itemDisabled, this.isDisabledStyle)
+            .append(css.itemReadOnly, this.isReadOnlyStyle)
+            .append(css.itemPreview, this.isPreviewStyle)
             .append(css.itemHover, !this.isDesignMode)
             .append(css.itemChecked, !!this.booleanValue)
             .append(css.itemExchanged, !!this.swapOrder)
@@ -33916,6 +34332,9 @@ var QuestionBooleanModel = /** @class */ (function (_super) {
             item: this.cssClasses.checkboxItem,
             itemOnError: this.cssClasses.checkboxItemOnError,
             itemDisabled: this.cssClasses.checkboxItemDisabled,
+            itemDisable: this.cssClasses.checkboxItemDisabled,
+            itemReadOnly: this.cssClasses.checkboxItemReadOnly,
+            itemPreview: this.cssClasses.checkboxItemPreview,
             itemChecked: this.cssClasses.checkboxItemChecked,
             itemIndeterminate: this.cssClasses.checkboxItemIndeterminate
         });
@@ -33923,7 +34342,9 @@ var QuestionBooleanModel = /** @class */ (function (_super) {
     QuestionBooleanModel.prototype.getLabelCss = function (checked) {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_3__["CssClassBuilder"]()
             .append(this.cssClasses.label)
-            .append(this.cssClasses.disabledLabel, this.booleanValue === !checked || this.isReadOnly)
+            .append(this.cssClasses.disabledLabel, this.booleanValue === !checked || this.isDisabledStyle)
+            .append(this.cssClasses.labelReadOnly, this.isReadOnlyStyle)
+            .append(this.cssClasses.labelPreview, this.isPreviewStyle)
             .append(this.cssClasses.labelTrue, !this.isIndeterminate && checked === !this.swapOrder)
             .append(this.cssClasses.labelFalse, !this.isIndeterminate && checked === this.swapOrder)
             .toString();
@@ -33941,6 +34362,16 @@ var QuestionBooleanModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionBooleanModel.prototype, "itemSvgIcon", {
+        get: function () {
+            if (this.isPreviewStyle && this.cssClasses.itemPreviewSvgIconId) {
+                return this.cssClasses.itemPreviewSvgIconId;
+            }
+            return this.cssClasses.itemSvgIconId;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionBooleanModel.prototype, "allowClick", {
         get: function () {
             return this.isIndeterminate && !this.isInputReadOnly;
@@ -34006,6 +34437,15 @@ var QuestionBooleanModel = /** @class */ (function (_super) {
         if (css.radioItemChecked && value === this.booleanValue) {
             className = (className ? className + " " : "") + css.radioItemChecked;
         }
+        if (this.isDisabledStyle) {
+            className += " " + css.radioItemDisabled;
+        }
+        if (this.isReadOnlyStyle) {
+            className += " " + css.radioItemReadOnly;
+        }
+        if (this.isPreviewStyle) {
+            className += " " + css.radioItemPreview;
+        }
         return className;
     };
     QuestionBooleanModel.prototype.supportResponsiveness = function () {
@@ -34646,6 +35086,13 @@ var QuestionCheckboxModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionCheckboxModel.prototype.getFilteredName = function () {
+        var res = _super.prototype.getFilteredName.call(this);
+        if (this.hasFilteredValue) {
+            res += "-unwrapped";
+        }
+        return res;
+    };
     QuestionCheckboxModel.prototype.getFilteredValue = function () {
         if (this.hasFilteredValue)
             return this.renderedValue;
@@ -35251,7 +35698,7 @@ var QuestionCommentModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionCommentModel.prototype, "renderedAllowResize", {
         get: function () {
-            return this.allowResize && (this.survey && this.survey.allowResizeComment);
+            return this.allowResize && (this.survey && this.survey.allowResizeComment) && !this.isPreviewStyle && !this.isReadOnlyStyle;
         },
         enumerable: false,
         configurable: true
@@ -35369,6 +35816,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _textPreProcessor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./textPreProcessor */ "./src/textPreProcessor.ts");
 /* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
 /* harmony import */ var _error__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./error */ "./src/error.ts");
+/* harmony import */ var _console_warnings__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./console-warnings */ "./src/console-warnings.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -35391,6 +35839,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var ComponentQuestionJSON = /** @class */ (function () {
     function ComponentQuestionJSON(name, json) {
         this.name = name;
@@ -35982,15 +36431,15 @@ var QuestionCustomModel = /** @class */ (function (_super) {
             if (!qType || !_jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].findClass(qType))
                 throw "type attribute in questionJSON is empty or incorrect";
             res = _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].createClass(qType);
-            this.initElement(res);
             res.fromJSON(json.questionJSON);
+            res = this.checkCreatedQuestion(res);
         }
         else {
             if (!!json.createQuestion) {
-                res = json.createQuestion();
-                this.initElement(res);
+                res = this.checkCreatedQuestion(json.createQuestion());
             }
         }
+        this.initElement(res);
         if (!!res) {
             res.isContentElement = true;
             if (!res.name) {
@@ -36004,6 +36453,20 @@ var QuestionCustomModel = /** @class */ (function (_super) {
         }
         return res;
     };
+    QuestionCustomModel.prototype.checkCreatedQuestion = function (res) {
+        if (!res)
+            return res;
+        if (!res.isQuestion) {
+            if (Array.isArray(res.questions) && res.questions.length > 0) {
+                res = res.questions[0];
+            }
+            else {
+                res = _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].createClass("text");
+            }
+            _console_warnings__WEBPACK_IMPORTED_MODULE_7__["ConsoleWarnings"].error("Could not create component: '" + this.getType() + "'. questionJSON should be a question.");
+        }
+        return res;
+    };
     QuestionCustomModel.prototype.onSurveyLoad = function () {
         _super.prototype.onSurveyLoad.call(this);
         if (!this.contentQuestion)
@@ -36711,7 +37174,9 @@ var QuestionDropdownModel = /** @class */ (function (_super) {
             .append(this.cssClasses.control)
             .append(this.cssClasses.controlEmpty, this.isEmpty())
             .append(this.cssClasses.onError, this.hasCssError())
-            .append(this.cssClasses.controlDisabled, this.isReadOnly)
+            .append(this.cssClasses.controlDisabled, this.isDisabledStyle)
+            .append(this.cssClasses.controlReadOnly, this.isReadOnlyStyle)
+            .append(this.cssClasses.controlPreview, this.isPreviewStyle)
             .append(this.cssClasses.controlInputFieldComponent, !!this.inputFieldComponentName)
             .toString();
     };
@@ -38551,6 +39016,9 @@ var QuestionFileModel = /** @class */ (function (_super) {
         get: function () {
             return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_5__["CssClassBuilder"]()
                 .append(this.cssClasses.root)
+                .append(this.cssClasses.rootDisabled, this.isDisabledStyle)
+                .append(this.cssClasses.rootReadOnly, this.isReadOnlyStyle)
+                .append(this.cssClasses.rootPreview, this.isPreviewStyle)
                 .append(this.cssClasses.rootDragging, this.isDragging)
                 .append(this.cssClasses.rootAnswered, this.isAnswered)
                 .append(this.cssClasses.single, !this.allowMultiple)
@@ -40041,7 +40509,8 @@ var MatrixRowModel = /** @class */ (function (_super) {
             var cssClasses = this.data.cssClasses;
             return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_11__["CssClassBuilder"]().append(cssClasses.row)
                 .append(cssClasses.rowError, this.data.hasErrorInRow(this))
-                .append(cssClasses.rowDisabled, this.isReadOnly)
+                .append(cssClasses.rowReadOnly, this.isReadOnly)
+                .append(cssClasses.rowDisabled, this.data.isDisabledStyle)
                 .toString();
         },
         enumerable: false,
@@ -40367,12 +40836,17 @@ var QuestionMatrixModel = /** @class */ (function (_super) {
             .append(hasCellText ? css.cellText : css.label)
             .append(css.itemOnError, !hasCellText && (this.isAllRowRequired ? this.hasErrorInRow(row) : this.hasCssError()))
             .append(hasCellText ? css.cellTextSelected : css.itemChecked, isChecked)
-            .append(hasCellText ? css.cellTextDisabled : css.itemDisabled, isDisabled)
+            .append(hasCellText ? css.cellTextDisabled : css.itemDisabled, this.isDisabledStyle)
+            .append(hasCellText ? css.cellTextReadOnly : css.itemReadOnly, this.isReadOnlyStyle)
+            .append(hasCellText ? css.cellTextPreview : css.itemPreview, this.isPreviewStyle)
             .append(css.itemHover, allowHover && !hasCellText)
             .toString();
     };
     Object.defineProperty(QuestionMatrixModel.prototype, "itemSvgIcon", {
         get: function () {
+            if (this.isPreviewStyle && this.cssClasses.itemPreviewSvgIconId) {
+                return this.cssClasses.itemPreviewSvgIconId;
+            }
             return this.cssClasses.itemSvgIconId;
         },
         enumerable: false,
@@ -44838,6 +45312,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
 /* harmony import */ var _actions_container__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./actions/container */ "./src/actions/container.ts");
 /* harmony import */ var _settings__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./settings */ "./src/settings.ts");
+/* harmony import */ var _utils_animation__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./utils/animation */ "./src/utils/animation.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -44872,6 +45347,7 @@ var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from
 
 
 
+
 var QuestionMatrixDropdownRenderedCell = /** @class */ (function () {
     function QuestionMatrixDropdownRenderedCell() {
         this.minWidth = "";
@@ -45096,6 +45572,12 @@ var QuestionMatrixDropdownRenderedRow = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionMatrixDropdownRenderedRow.prototype.setRootElement = function (val) {
+        this.rootElement = val;
+    };
+    QuestionMatrixDropdownRenderedRow.prototype.getRootElement = function () {
+        return this.rootElement;
+    };
     QuestionMatrixDropdownRenderedRow.counter = 1;
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: false })
@@ -45154,10 +45636,53 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
         var _this = _super.call(this) || this;
         _this.matrix = matrix;
         _this.renderedRowsChangedCallback = function () { };
+        _this._renderedRows = [];
+        _this.renderedRowsAnimation = new _utils_animation__WEBPACK_IMPORTED_MODULE_8__["AnimationGroup"](_this.getRenderedRowsAnimationOptions(), function (val) {
+            _this._renderedRows = val;
+            _this.renderedRowsChangedCallback();
+        }, function () { return _this._renderedRows; });
         _this.hasActionCellInRowsValues = {};
         _this.build();
         return _this;
     }
+    QuestionMatrixDropdownRenderedTable.prototype.getIsAnimationAllowed = function () {
+        return _super.prototype.getIsAnimationAllowed.call(this) && this.matrix.animationAllowed;
+    };
+    QuestionMatrixDropdownRenderedTable.prototype.getRenderedRowsAnimationOptions = function () {
+        var _this = this;
+        var beforeAnimationRun = function (el) {
+            el.querySelectorAll(":scope > td > *").forEach(function (el) {
+                el.style.setProperty("--animation-height", el.offsetHeight + "px");
+            });
+        };
+        return {
+            isAnimationEnabled: function () {
+                return _this.animationAllowed;
+            },
+            getAnimatedElement: function (el) {
+                return el.getRootElement();
+            },
+            getLeaveOptions: function () {
+                return { cssClass: _this.cssClasses.rowFadeOut, onBeforeRunAnimation: beforeAnimationRun };
+            },
+            getEnterOptions: function () {
+                return { cssClass: _this.cssClasses.rowFadeIn, onBeforeRunAnimation: beforeAnimationRun };
+            }
+        };
+    };
+    QuestionMatrixDropdownRenderedTable.prototype.updateRenderedRows = function () {
+        this.renderedRows = this.rows;
+    };
+    Object.defineProperty(QuestionMatrixDropdownRenderedTable.prototype, "renderedRows", {
+        get: function () {
+            return this._renderedRows;
+        },
+        set: function (val) {
+            this.renderedRowsAnimation.sync(val);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionMatrixDropdownRenderedTable.prototype, "showTable", {
         get: function () {
             return this.getPropertyValue("showTable", true);
@@ -45472,10 +45997,12 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
         }
     };
     QuestionMatrixDropdownRenderedTable.prototype.buildRows = function () {
+        this.blockAnimations();
         var rows = this.matrix.isColumnLayoutHorizontal
             ? this.buildHorizontalRows()
             : this.buildVerticalRows();
         this.rows = rows;
+        this.releaseAnimations();
     };
     QuestionMatrixDropdownRenderedTable.prototype.hasActionCellInRows = function (location) {
         if (this.hasActionCellInRowsValues[location] === undefined) {
@@ -45534,6 +46061,7 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
         var cell = new QuestionMatrixDropdownRenderedCell();
         var lockedRows = this.matrix.lockedRowCount;
         cell.isDragHandlerCell = lockedRows < 1 || rowIndex >= lockedRows;
+        cell.isEmpty = !cell.isDragHandlerCell;
         cell.className = this.getActionsCellClassName(cell);
         cell.row = this.matrix.visibleRows[rowIndex];
         return cell;
@@ -45992,9 +46520,16 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["propertyArray"])({
             onPush: function (_, i, target) {
                 target.renderedRowsChangedCallback();
+                target.updateRenderedRows();
             },
+            onRemove: function (_, i, target) {
+                target.updateRenderedRows();
+            }
         })
     ], QuestionMatrixDropdownRenderedTable.prototype, "rows", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["propertyArray"])()
+    ], QuestionMatrixDropdownRenderedTable.prototype, "_renderedRows", void 0);
     return QuestionMatrixDropdownRenderedTable;
 }(_base__WEBPACK_IMPORTED_MODULE_1__["Base"]));
 
@@ -48186,6 +48721,9 @@ var QuestionMultipleTextModel = /** @class */ (function (_super) {
     QuestionMultipleTextModel.prototype.getItemLabelCss = function (item) {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_7__["CssClassBuilder"]()
             .append(this.cssClasses.itemLabel)
+            .append(this.cssClasses.itemLabelDisabled, this.isDisabledStyle)
+            .append(this.cssClasses.itemLabelReadOnly, this.isReadOnlyStyle)
+            .append(this.cssClasses.itemLabelPreview, this.isPreviewStyle)
             .append(this.cssClasses.itemLabelAnswered, item.editor.isAnswered)
             .append(this.cssClasses.itemLabelAllowFocus, !this.isDesignMode)
             .append(this.cssClasses.itemLabelOnError, item.editor.errors.length > 0)
@@ -48389,6 +48927,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _actions_action__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./actions/action */ "./src/actions/action.ts");
 /* harmony import */ var _base__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./base */ "./src/base.ts");
 /* harmony import */ var _actions_adaptive_container__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./actions/adaptive-container */ "./src/actions/adaptive-container.ts");
+/* harmony import */ var _utils_animation__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./utils/animation */ "./src/utils/animation.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -48429,6 +48968,7 @@ var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from
 
 
 
+
 var QuestionPanelDynamicItemTextProcessor = /** @class */ (function (_super) {
     __extends(QuestionPanelDynamicItemTextProcessor, _super);
     function QuestionPanelDynamicItemTextProcessor(data, panelItem, variableName) {
@@ -48652,6 +49192,8 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     __extends(QuestionPanelDynamicModel, _super);
     function QuestionPanelDynamicModel(name) {
         var _this = _super.call(this, name) || this;
+        _this._renderedPanels = [];
+        _this.isPanelsAnimationRunning = false;
         _this.isAddingNewPanels = false;
         _this.isSetPanelItemData = {};
         _this.createNewArray("panels", function (panel) { _this.onPanelAdded(panel); }, function (panel) { _this.onPanelRemoved(panel); });
@@ -48977,6 +49519,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         if (!this.currentPanel) {
             this.currentPanel = panel;
         }
+        this.updateRenderedPanels();
     };
     QuestionPanelDynamicModel.prototype.onPanelRemoved = function (panel) {
         var index = this.onPanelRemovedCore(panel);
@@ -48986,6 +49529,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
                 index = visPanels.length - 1;
             this.currentPanel = index >= 0 ? visPanels[index] : null;
         }
+        this.updateRenderedPanels();
     };
     QuestionPanelDynamicModel.prototype.onPanelRemovedCore = function (panel) {
         var visPanels = this.visiblePanelsCore;
@@ -49056,6 +49600,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
                 curPanel.onHidingContent();
             }
             this.setPropertyValue("currentPanel", val);
+            this.updateRenderedPanels();
             this.updateFooterActions();
             this.updateTabToolbarItemsPressedState();
             this.fireCallback(this.currentIndexChangedCallback);
@@ -49070,6 +49615,123 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionPanelDynamicModel.prototype.updateRenderedPanels = function () {
+        if (this.isRenderModeList) {
+            this.renderedPanels = [].concat(this.visiblePanels);
+        }
+        else if (this.currentPanel) {
+            this.renderedPanels = [this.currentPanel];
+        }
+        else {
+            this.renderedPanels = [];
+        }
+    };
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "renderedPanels", {
+        get: function () {
+            return this._renderedPanels;
+        },
+        set: function (val) {
+            if (this.renderedPanels.length == 0 || val.length == 0) {
+                this.blockAnimations();
+                this.panelsAnimation.sync(val);
+                this.releaseAnimations();
+            }
+            else {
+                this.isPanelsAnimationRunning = true;
+                this.panelsAnimation.sync(val);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    QuestionPanelDynamicModel.prototype.getPanelsAnimationOptions = function () {
+        var _this = this;
+        var getDirection = function () {
+            if (_this.isRenderModeList)
+                return "";
+            var leavingPanel = _this.renderedPanels.filter(function (el) { return el !== _this.currentPanel; })[0];
+            var leavingPanelIndex = _this.visiblePanels.indexOf(leavingPanel);
+            if (leavingPanelIndex < 0)
+                leavingPanelIndex = _this.removedPanelIndex;
+            return leavingPanelIndex > _this.currentIndex ? "-right" : "-left";
+        };
+        return {
+            getAnimatedElement: function (panel) {
+                var _a, _b;
+                if (panel && _this.cssContent) {
+                    var contentSelector = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_9__["classesToSelector"])(_this.cssContent);
+                    return (_b = (_a = _this.getWrapperElement()) === null || _a === void 0 ? void 0 : _a.querySelector(":scope " + contentSelector + " #" + panel.id)) === null || _b === void 0 ? void 0 : _b.parentElement;
+                }
+            },
+            getEnterOptions: function () {
+                var cssClass = _this.cssClasses.panelWrapperFadeIn ? "" + _this.cssClasses.panelWrapperFadeIn + getDirection() : "";
+                return {
+                    onBeforeRunAnimation: function (el) {
+                        var _a;
+                        if (_this.focusNewPanelCallback) {
+                            var scolledElement = _this.isRenderModeList ? el : el.parentElement;
+                            _survey_element__WEBPACK_IMPORTED_MODULE_1__["SurveyElement"].ScrollElementToViewCore(scolledElement, false, false, { behavior: "smooth" });
+                        }
+                        if (!_this.isRenderModeList) {
+                            (_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.style.setProperty("--animation-height-to", el.offsetHeight + "px");
+                        }
+                        else {
+                            el.style.setProperty("--animation-height", el.offsetHeight + "px");
+                        }
+                    },
+                    cssClass: cssClass
+                };
+            },
+            getLeaveOptions: function () {
+                var cssClass = _this.cssClasses.panelWrapperFadeOut ? "" + _this.cssClasses.panelWrapperFadeOut + getDirection() : "";
+                return {
+                    onBeforeRunAnimation: function (el) {
+                        var _a;
+                        if (!_this.isRenderModeList) {
+                            (_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.style.setProperty("--animation-height-from", el.offsetHeight + "px");
+                        }
+                        else {
+                            el.style.setProperty("--animation-height", el.offsetHeight + "px");
+                        }
+                    },
+                    cssClass: cssClass
+                };
+            },
+            isAnimationEnabled: function () {
+                return _this.animationAllowed && !!_this.getWrapperElement();
+            },
+        };
+    };
+    QuestionPanelDynamicModel.prototype.disablePanelsAnimations = function () {
+        this.panelsCore.forEach(function (panel) {
+            panel.blockAnimations();
+        });
+    };
+    QuestionPanelDynamicModel.prototype.enablePanelsAnimations = function () {
+        this.panelsCore.forEach(function (panel) {
+            panel.releaseAnimations();
+        });
+    };
+    QuestionPanelDynamicModel.prototype.updatePanelsAnimation = function () {
+        var _this = this;
+        this._panelsAnimations = new (this.isRenderModeList ? _utils_animation__WEBPACK_IMPORTED_MODULE_14__["AnimationGroup"] : _utils_animation__WEBPACK_IMPORTED_MODULE_14__["AnimationTab"])(this.getPanelsAnimationOptions(), function (val, isTempUpdate) {
+            _this._renderedPanels = val;
+            if (!isTempUpdate) {
+                _this.isPanelsAnimationRunning = false;
+                _this.focusNewPanel();
+            }
+        }, function () { return _this._renderedPanels; });
+    };
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "panelsAnimation", {
+        get: function () {
+            if (!this._panelsAnimations) {
+                this.updatePanelsAnimation();
+            }
+            return this._panelsAnimations;
+        },
+        enumerable: false,
+        configurable: true
+    });
     QuestionPanelDynamicModel.prototype.onHidingContent = function () {
         _super.prototype.onHidingContent.call(this);
         if (this.currentPanel) {
@@ -49384,11 +50046,13 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             if (val < this.panelCount) {
                 this.panelsCore.splice(val, this.panelCount - val);
             }
+            this.disablePanelsAnimations();
             this.setValueAfterPanelsCreating();
             this.setValueBasedOnPanelCount();
             this.reRunCondition();
             this.updateFooterActions();
             this.fireCallback(this.panelCountChangedCallback);
+            this.enablePanelsAnimations();
         },
         enumerable: false,
         configurable: true
@@ -49623,12 +50287,13 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         set: function (val) {
             this.setPropertyValue("showQuestionNumbers", val);
             if (!this.isLoadingFromJson && this.survey) {
-                this.survey.questionVisibilityChanged(this, this.visible);
+                this.survey.questionVisibilityChanged(this, this.visible, true);
             }
         },
         enumerable: false,
         configurable: true
     });
+    QuestionPanelDynamicModel.prototype.notifySurveyOnChildrenVisibilityChanged = function () { return this.showQuestionNumbers === "onSurvey"; };
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "panelRemoveButtonLocation", {
         /**
          * Specifies the location of the Delete Panel button relative to panel content.
@@ -49682,6 +50347,10 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         set: function (val) {
             this.setPropertyValue("renderMode", val);
             this.fireCallback(this.renderModeChangedCallback);
+            this.blockAnimations();
+            this.updateRenderedPanels();
+            this.releaseAnimations();
+            this.updatePanelsAnimation();
         },
         enumerable: false,
         configurable: true
@@ -49728,15 +50397,16 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     QuestionPanelDynamicModel.prototype.setVisibleIndex = function (value) {
         if (!this.isVisible)
             return 0;
-        var startIndex = this.showQuestionNumbers == "onSurvey" ? value : 0;
+        var onSurveyNumbering = this.showQuestionNumbers === "onSurvey";
+        var startIndex = onSurveyNumbering ? value : 0;
         for (var i = 0; i < this.visiblePanelsCore.length; i++) {
             var counter = this.setPanelVisibleIndex(this.visiblePanelsCore[i], startIndex, this.showQuestionNumbers != "off");
-            if (this.showQuestionNumbers == "onSurvey") {
+            if (onSurveyNumbering) {
                 startIndex += counter;
             }
         }
-        _super.prototype.setVisibleIndex.call(this, this.showQuestionNumbers != "onSurvey" ? value : -1);
-        return this.showQuestionNumbers != "onSurvey" ? 1 : startIndex - value;
+        _super.prototype.setVisibleIndex.call(this, !onSurveyNumbering ? value : -1);
+        return !onSurveyNumbering ? 1 : startIndex - value;
     };
     QuestionPanelDynamicModel.prototype.setPanelVisibleIndex = function (panel, index, showIndex) {
         if (!showIndex) {
@@ -49914,9 +50584,20 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         if (this.renderMode === "list" && this.panelsState !== "default") {
             newPanel.expand();
         }
-        newPanel.focusFirstQuestion();
+        this.focusNewPanelCallback = function () {
+            newPanel.focusFirstQuestion();
+        };
+        if (!this.isPanelsAnimationRunning) {
+            this.focusNewPanel();
+        }
         return newPanel;
     };
+    QuestionPanelDynamicModel.prototype.focusNewPanel = function () {
+        if (this.focusNewPanelCallback) {
+            this.focusNewPanelCallback();
+            this.focusNewPanelCallback = undefined;
+        }
+    };
     /**
      * Adds a new panel based on the [template](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#template).
      * @param index *(Optional)* An index at which to insert the new panel. `undefined` adds the panel to the end or inserts it after the current panel if [`renderMode`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-panel-model#renderMode) is `"tab"`. A negative index (for instance, -1) adds the panel to the end in all cases, regardless of the `renderMode` value.
@@ -50025,16 +50706,11 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             return;
         this.currentIndex--;
     };
-    /**
-     * Removes a dynamic panel from the panels array.
-     * @param value a panel or panel index
-     * @see panels
-     * @see template
-     */
     QuestionPanelDynamicModel.prototype.removePanel = function (value) {
         var visIndex = this.getVisualPanelIndex(value);
         if (visIndex < 0 || visIndex >= this.visiblePanelCount)
             return;
+        this.removedPanelIndex = visIndex;
         var panel = this.visiblePanelsCore[visIndex];
         var index = this.panelsCore.indexOf(panel);
         if (index < 0)
@@ -50225,6 +50901,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             return;
         if (!force && this.wasNotRenderedInSurvey)
             return;
+        this.blockAnimations();
         this.hasPanelBuildFirstTime = true;
         this.isBuildingPanelsFirstTime = true;
         if (this.getPropertyValue("panelCount") > 0) {
@@ -50247,6 +50924,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         }
         this.updateFooterActions();
         this.isBuildingPanelsFirstTime = false;
+        this.releaseAnimations();
     };
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "wasNotRenderedInSurvey", {
         get: function () {
@@ -50792,7 +51470,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     };
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "cssHeader", {
         get: function () {
-            var showTab = this.isRenderModeTab && !!this.panelCount;
+            var showTab = this.isRenderModeTab && !!this.visiblePanelCount;
             return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__["CssClassBuilder"]()
                 .append(this.cssClasses.header)
                 .append(this.cssClasses.headerTop, this.hasTitleOnTop || showTab)
@@ -50805,6 +51483,7 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     QuestionPanelDynamicModel.prototype.getPanelWrapperCss = function (panel) {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__["CssClassBuilder"]()
             .append(this.cssClasses.panelWrapper, !panel || panel.visible)
+            .append(this.cssClasses.panelWrapperList, this.isRenderModeList)
             .append(this.cssClasses.panelWrapperInRow, this.panelRemoveButtonLocation === "right")
             .toString();
     };
@@ -50863,6 +51542,13 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             return true;
         return false;
     };
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "hasAdditionalTitleToolbar", {
+        get: function () {
+            return this.isRenderModeTab && this.visiblePanels.length > 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
     QuestionPanelDynamicModel.prototype.getAdditionalTitleToolbar = function () {
         if (!this.isRenderModeTab)
             return null;
@@ -51043,13 +51729,15 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "showNavigation", {
         get: function () {
+            if (this.isReadOnly && this.visiblePanelCount == 1)
+                return false;
             return this.visiblePanelCount > 0 && !this.showLegacyNavigation && !!this.cssClasses.footer;
         },
         enumerable: false,
         configurable: true
     });
     QuestionPanelDynamicModel.prototype.showSeparator = function (index) {
-        return this.isRenderModeList && index < this.visiblePanelCount - 1;
+        return this.isRenderModeList && index < this.renderedPanels.length - 1;
     };
     QuestionPanelDynamicModel.prototype.calcCssClasses = function (css) {
         var classes = _super.prototype.calcCssClasses.call(this, css);
@@ -51063,6 +51751,9 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         return classes;
     };
     QuestionPanelDynamicModel.maxCheckCount = 3;
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_5__["propertyArray"])({})
+    ], QuestionPanelDynamicModel.prototype, "_renderedPanels", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_5__["property"])({ defaultValue: false, onSet: function (_, target) { target.updateFooterActions(); } })
     ], QuestionPanelDynamicModel.prototype, "legacyNavigation", void 0);
@@ -51362,6 +52053,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./helpers */ "./src/helpers.ts");
 /* harmony import */ var _src_settings__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../src/settings */ "./src/settings.ts");
 /* harmony import */ var _utils_animation__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./utils/animation */ "./src/utils/animation.ts");
+/* harmony import */ var _utils_dragOrClickHelper__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./utils/dragOrClickHelper */ "./src/utils/dragOrClickHelper.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -51394,6 +52086,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 /**
  * A class that describes the Ranking question type.
  *
@@ -51447,7 +52140,19 @@ var QuestionRankingModel = /** @class */ (function (_super) {
             if (_this.allowStartDrag &&
                 _this.canStartDragDueMaxSelectedChoices(target) &&
                 _this.canStartDragDueItemEnabled(choice)) {
-                _this.dragDropRankingChoices.startDrag(event, choice, _this, node);
+                _this.draggedChoise = choice;
+                _this.draggedTargetNode = node;
+                _this.dragOrClickHelper.onPointerDown(event);
+            }
+        };
+        _this.startDrag = function (event) {
+            _this.dragDropRankingChoices.startDrag(event, _this.draggedChoise, _this, _this.draggedTargetNode);
+        };
+        _this.handlePointerUp = function (event, choice, node) {
+            if (!_this.selectToRankEnabled)
+                return;
+            if (_this.allowStartDrag) {
+                _this.handleKeydownSelectToRank(event, choice, " ", false);
             }
         };
         _this.handleKeydown = function (event, choice) {
@@ -51507,6 +52212,7 @@ var QuestionRankingModel = /** @class */ (function (_super) {
             _this.setDragDropRankingChoices();
             _this.updateRankingChoicesSync();
         });
+        _this.dragOrClickHelper = new _utils_dragOrClickHelper__WEBPACK_IMPORTED_MODULE_11__["DragOrClickHelper"](_this.startDrag);
         return _this;
     }
     QuestionRankingModel.prototype.getDefaultItemComponent = function () {
@@ -51528,11 +52234,14 @@ var QuestionRankingModel = /** @class */ (function (_super) {
             return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_6__["CssClassBuilder"]()
                 .append(this.cssClasses.root)
                 .append(this.cssClasses.rootMobileMod, this.isMobileMode())
-                .append(this.cssClasses.rootDisabled, this.isReadOnly)
+                .append(this.cssClasses.rootDisabled, this.isDisabledStyle)
+                .append(this.cssClasses.rootReadOnly, this.isReadOnlyStyle)
+                .append(this.cssClasses.rootPreview, this.isPreviewStyle)
                 .append(this.cssClasses.rootDesignMode, !!this.isDesignMode)
                 .append(this.cssClasses.itemOnError, this.hasCssError())
                 .append(this.cssClasses.rootDragHandleAreaIcon, _src_settings__WEBPACK_IMPORTED_MODULE_9__["settings"].rankingDragHandleArea === "icon")
                 .append(this.cssClasses.rootSelectToRankMod, this.selectToRankEnabled)
+                .append(this.cssClasses.rootSelectToRankEmptyValueMod, this.isEmpty())
                 .append(this.cssClasses.rootSelectToRankAlignHorizontal, this.selectToRankEnabled && this.renderedSelectToRankAreasLayout === "horizontal")
                 .append(this.cssClasses.rootSelectToRankAlignVertical, this.selectToRankEnabled && this.renderedSelectToRankAreasLayout === "vertical")
                 .toString();
@@ -51540,6 +52249,12 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionRankingModel.prototype.isItemSelectedCore = function (item) {
+        if (this.selectToRankEnabled) {
+            return _super.prototype.isItemSelectedCore.call(this, item);
+        }
+        return true;
+    };
     QuestionRankingModel.prototype.getItemClassCore = function (item, options) {
         var itemIndex = this.rankingChoices.indexOf(item);
         var unrankedItemIndex = this.unRankingChoices.indexOf(item);
@@ -51600,9 +52315,9 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         return this.isEmpty() ? "" : index + 1 + "";
     };
     QuestionRankingModel.prototype.updateRankingChoicesSync = function () {
-        this.animationAllowed = false;
+        this.blockAnimations();
         this.updateRankingChoices();
-        this.animationAllowed = true;
+        this.releaseAnimations();
     };
     QuestionRankingModel.prototype.setSurveyImpl = function (value, isLight) {
         _super.prototype.setSurveyImpl.call(this, value, isLight);
@@ -51645,7 +52360,7 @@ var QuestionRankingModel = /** @class */ (function (_super) {
     QuestionRankingModel.prototype.getChoicesAnimation = function (isRankingChoices) {
         var _this = this;
         return {
-            isAnimationEnabled: function () { return _src_settings__WEBPACK_IMPORTED_MODULE_9__["settings"].animationEnabled && _this.animationAllowed; },
+            isAnimationEnabled: function () { return _this.animationAllowed; },
             getLeaveOptions: function (item) {
                 var choices = isRankingChoices ? _this.rankingChoices : _this.unRankingChoices;
                 if (_this.renderedSelectToRankAreasLayout == "vertical" && choices.length == 1 && choices.indexOf(item) >= 0) {
@@ -51813,10 +52528,13 @@ var QuestionRankingModel = /** @class */ (function (_super) {
     QuestionRankingModel.prototype.supportNone = function () { return false; };
     QuestionRankingModel.prototype.supportRefuse = function () { return false; };
     QuestionRankingModel.prototype.supportDontKnow = function () { return false; };
-    QuestionRankingModel.prototype.handleKeydownSelectToRank = function (event, movedElement) {
+    QuestionRankingModel.prototype.handleKeydownSelectToRank = function (event, movedElement, hardKey, isNeedFocus) {
+        if (isNeedFocus === void 0) { isNeedFocus = true; }
         if (this.isDesignMode)
             return;
         var key = event.key;
+        if (hardKey)
+            key = hardKey;
         if (key !== " " && key !== "ArrowUp" && key !== "ArrowDown")
             return;
         var dnd = this.dragDropRankingChoices; //????
@@ -51828,21 +52546,23 @@ var QuestionRankingModel = /** @class */ (function (_super) {
             return;
         var toIndex;
         if (key === " " && !isMovedElementRanked) {
-            toIndex = 0;
-            this.animationAllowed = false;
+            if (!this.checkMaxSelectedChoicesUnreached() || !this.canStartDragDueItemEnabled(movedElement))
+                return;
+            toIndex = this.value.length;
+            this.blockAnimations();
             dnd.selectToRank(this, fromIndex, toIndex);
-            this.animationAllowed = true;
-            this.setValueAfterKeydown(toIndex, "to-container");
+            this.releaseAnimations();
+            this.setValueAfterKeydown(toIndex, "to-container", isNeedFocus);
             return;
         }
         if (!isMovedElementRanked)
             return;
         if (key === " ") {
-            this.animationAllowed = false;
+            this.blockAnimations();
             dnd.unselectFromRank(this, fromIndex);
-            this.animationAllowed = true;
+            this.releaseAnimations();
             toIndex = this.unRankingChoices.indexOf(movedElement); //'this.' leads to actual array after the 'unselectFromRank' method
-            this.setValueAfterKeydown(toIndex, "from-container");
+            this.setValueAfterKeydown(toIndex, "from-container", isNeedFocus);
             return;
         }
         var delta = key === "ArrowUp" ? -1 : (key === "ArrowDown" ? 1 : 0);
@@ -51852,15 +52572,18 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         if (toIndex < 0 || toIndex >= rankingChoices.length)
             return;
         dnd.reorderRankedItem(this, fromIndex, toIndex);
-        this.setValueAfterKeydown(toIndex, "to-container");
+        this.setValueAfterKeydown(toIndex, "to-container", isNeedFocus);
     };
-    QuestionRankingModel.prototype.setValueAfterKeydown = function (index, container) {
+    QuestionRankingModel.prototype.setValueAfterKeydown = function (index, container, isNeedFocus) {
         var _this = this;
+        if (isNeedFocus === void 0) { isNeedFocus = true; }
         this.setValue();
-        setTimeout(function () {
-            _this.focusItem(index, container);
-        }, 1);
-        event.preventDefault();
+        if (isNeedFocus) {
+            setTimeout(function () {
+                _this.focusItem(index, container);
+            }, 1);
+        }
+        event && event.preventDefault();
     };
     QuestionRankingModel.prototype.getIconHoverCss = function () {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_6__["CssClassBuilder"]()
@@ -52204,19 +52927,23 @@ var QuestionRatingModel = /** @class */ (function (_super) {
             _this.updateRateCount();
         });
         _this.registerFunctionOnPropertiesValueChanged(["rateValues"], function () {
-            _this.autoGenerate = false;
+            _this.setIconsToRateValues();
+            _this.createRenderedRateItems();
+        });
+        _this.registerSychProperties(["rateValues"], function () {
+            _this.autoGenerate = _this.rateValues.length == 0;
             _this.setIconsToRateValues();
             _this.createRenderedRateItems();
         });
         _this.registerFunctionOnPropertiesValueChanged(["rateColorMode", "scaleColorMode"], function () {
             _this.updateColors(_this.survey.themeVariables);
         });
-        _this.registerFunctionOnPropertiesValueChanged(["autoGenerate"], function () {
+        _this.registerSychProperties(["autoGenerate"], function () {
             if (!_this.autoGenerate && _this.rateValues.length === 0) {
                 _this.setPropertyValue("rateValues", _this.visibleRateValues);
             }
             if (_this.autoGenerate) {
-                _this.rateValues.length = 0;
+                _this.rateValues.splice(0, _this.rateValues.length);
                 _this.updateRateMax();
             }
             _this.createRenderedRateItems();
@@ -52542,6 +53269,13 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     QuestionRatingModel.prototype.getInputId = function (index) {
         return this.inputId + "_" + index;
     };
+    Object.defineProperty(QuestionRatingModel.prototype, "questionName", {
+        get: function () {
+            return this.name + "_" + this.id;
+        },
+        enumerable: false,
+        configurable: true
+    });
     QuestionRatingModel.prototype.supportGoNextPageAutomatic = function () {
         return this.isMouseDown === true || this.renderAs === "dropdown";
     };
@@ -52794,7 +53528,9 @@ var QuestionRatingModel = /** @class */ (function (_super) {
     };
     QuestionRatingModel.prototype.getItemStyle = function (item, highlight) {
         if (highlight === void 0) { highlight = "none"; }
-        if (this.scaleColorMode === "monochrome" && this.rateColorMode == "default")
+        if (this.scaleColorMode === "monochrome" && this.rateColorMode == "default" ||
+            this.isPreviewStyle ||
+            this.isReadOnlyStyle)
             return { borderColor: null, fill: null, backgroundColor: null };
         var index = this.visibleRateValues.indexOf(item);
         var color = this.getRenderedItemColor(index, false);
@@ -52830,6 +53566,8 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         var itemClass = this.cssClasses.item;
         var itemSelectedClass = this.cssClasses.selected;
         var itemDisabledClass = this.cssClasses.itemDisabled;
+        var itemReadOnlyClass = this.cssClasses.itemReadOnly;
+        var itemPreviewClass = this.cssClasses.itemPreview;
         var itemHoverClass = this.cssClasses.itemHover;
         var itemitemOnErrorClass = this.cssClasses.itemOnError;
         var itemHighlightedClass = null;
@@ -52841,6 +53579,8 @@ var QuestionRatingModel = /** @class */ (function (_super) {
             itemClass = this.cssClasses.itemStar;
             itemSelectedClass = this.cssClasses.itemStarSelected;
             itemDisabledClass = this.cssClasses.itemStarDisabled;
+            itemReadOnlyClass = this.cssClasses.itemStarReadOnly;
+            itemPreviewClass = this.cssClasses.itemStarPreview;
             itemHoverClass = this.cssClasses.itemStarHover;
             itemitemOnErrorClass = this.cssClasses.itemStarOnError;
             itemHighlightedClass = this.cssClasses.itemStarHighlighted;
@@ -52851,6 +53591,8 @@ var QuestionRatingModel = /** @class */ (function (_super) {
             itemClass = this.cssClasses.itemSmiley;
             itemSelectedClass = this.cssClasses.itemSmileySelected;
             itemDisabledClass = this.cssClasses.itemSmileyDisabled;
+            itemReadOnlyClass = this.cssClasses.itemSmileyReadOnly;
+            itemPreviewClass = this.cssClasses.itemSmileyPreview;
             itemHoverClass = this.cssClasses.itemSmileyHover;
             itemitemOnErrorClass = this.cssClasses.itemSmileyOnError;
             itemHighlightedClass = this.cssClasses.itemSmileyHighlighted;
@@ -52868,7 +53610,9 @@ var QuestionRatingModel = /** @class */ (function (_super) {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_6__["CssClassBuilder"]()
             .append(itemClass)
             .append(itemSelectedClass, isSelected)
-            .append(itemDisabledClass, this.isReadOnly)
+            .append(itemDisabledClass, this.isDisabledStyle)
+            .append(itemReadOnlyClass, this.isReadOnlyStyle)
+            .append(itemPreviewClass, this.isPreviewStyle)
             .append(itemHoverClass, allowHover)
             .append(itemHighlightedClass, isHighlighted)
             .append(itemScaleColoredClass, this.scaleColorMode == "colored")
@@ -53611,6 +54355,13 @@ var QuestionSignaturePadModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionSignaturePadModel.prototype, "locRenderedPlaceholder", {
+        get: function () {
+            return this.isReadOnly ? this.locPlaceholderReadOnly : this.locPlaceholder;
+        },
+        enumerable: false,
+        configurable: true
+    });
     QuestionSignaturePadModel.prototype.nothingIsDrawn = function () {
         var isDrawing = this.isDrawingValue;
         var isEmpty = this.isEmpty();
@@ -53672,6 +54423,9 @@ var QuestionSignaturePadModel = /** @class */ (function (_super) {
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ localizable: { defaultStr: "signaturePlaceHolder" } })
     ], QuestionSignaturePadModel.prototype, "placeholder", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ localizable: { defaultStr: "signaturePlaceHolderReadOnly" } })
+    ], QuestionSignaturePadModel.prototype, "placeholderReadOnly", void 0);
     return QuestionSignaturePadModel;
 }(_question_file__WEBPACK_IMPORTED_MODULE_5__["QuestionFileModelBase"]));
 
@@ -53728,6 +54482,13 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("signaturepad",
         dependsOn: "showPlaceholder",
         visibleIf: function (obj) { return obj.showPlaceholder; }
     },
+    {
+        name: "placeholderReadOnly:text",
+        serializationProperty: "locPlaceholderReadOnly",
+        category: "general",
+        dependsOn: "showPlaceholder",
+        visibleIf: function (obj) { return obj.showPlaceholder; }
+    },
     {
         name: "backgroundImage:file",
         category: "general",
@@ -53933,7 +54694,10 @@ var QuestionTagboxModel = /** @class */ (function (_super) {
             .append(this.cssClasses.control)
             .append(this.cssClasses.controlEmpty, this.isEmpty())
             .append(this.cssClasses.onError, this.hasCssError())
-            .append(this.cssClasses.controlDisabled, this.isReadOnly)
+            .append(this.cssClasses.controlEditable, !this.isDisabledStyle && !this.isReadOnlyStyle && !this.isPreviewStyle)
+            .append(this.cssClasses.controlDisabled, this.isDisabledStyle)
+            .append(this.cssClasses.controlReadOnly, this.isReadOnlyStyle)
+            .append(this.cssClasses.controlPreview, this.isPreviewStyle)
             .toString();
     };
     QuestionTagboxModel.prototype.onOpenedCallBack = function () {
@@ -54768,8 +55532,8 @@ var QuestionTextModel = /** @class */ (function (_super) {
         if (this.inputTextAlignment !== "auto") {
             style.textAlign = this.inputTextAlignment;
         }
-        else if (this.maskType === "numeric" || this.maskType === "currency") {
-            style.textAlign = "right";
+        else if (this.maskSettings.getTextAlignment() !== "auto") {
+            style.textAlign = this.maskSettings.getTextAlignment();
         }
     };
     QuestionTextModel.prototype.updateValueOnEvent = function (event) {
@@ -55230,7 +55994,9 @@ var QuestionTextBase = /** @class */ (function (_super) {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_3__["CssClassBuilder"]()
             .append(this.cssClasses.root)
             .append(this.cssClasses.onError, this.hasCssError())
-            .append(this.cssClasses.controlDisabled, this.isReadOnly);
+            .append(this.cssClasses.controlDisabled, this.isDisabledStyle)
+            .append(this.cssClasses.controlReadOnly, this.isReadOnlyStyle)
+            .append(this.cssClasses.controlPreview, this.isPreviewStyle);
     };
     QuestionTextBase.prototype.getControlClass = function () {
         return this.getControlCssClassBuilder().toString();
@@ -56922,7 +57688,6 @@ var SurveyElement = /** @class */ (function (_super) {
                 }
             }
         }, function () { return _this.renderedIsExpanded; });
-        _this.animationAllowedValue = true;
         _this.name = name;
         _this.createNewArray("errors");
         _this.createNewArray("titleActions");
@@ -56958,7 +57723,7 @@ var SurveyElement = /** @class */ (function (_super) {
         var el = root.getElementById(elementId);
         return SurveyElement.ScrollElementToViewCore(el, false, scrollIfVisible);
     };
-    SurveyElement.ScrollElementToViewCore = function (el, checkLeft, scrollIfVisible) {
+    SurveyElement.ScrollElementToViewCore = function (el, checkLeft, scrollIfVisible, scrollIntoViewOptions) {
         if (!el || !el.scrollIntoView)
             return false;
         var elTop = scrollIfVisible ? -1 : el.getBoundingClientRect().top;
@@ -56977,7 +57742,7 @@ var SurveyElement = /** @class */ (function (_super) {
             }
         }
         if (needScroll) {
-            el.scrollIntoView();
+            el.scrollIntoView(scrollIntoViewOptions);
         }
         return needScroll;
     };
@@ -57753,11 +58518,14 @@ var SurveyElement = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    SurveyElement.prototype.canHaveFrameStyles = function () {
+        return (this.parent !== undefined && (!this.hasParent || this.parent && this.parent.showPanelAsPage));
+    };
     SurveyElement.prototype.getHasFrameV2 = function () {
-        return this.shouldAddRunnerStyles() && (!this.hasParent);
+        return this.shouldAddRunnerStyles() && this.canHaveFrameStyles();
     };
     SurveyElement.prototype.getIsNested = function () {
-        return this.shouldAddRunnerStyles() && (this.hasParent);
+        return this.shouldAddRunnerStyles() && !this.canHaveFrameStyles();
     };
     SurveyElement.prototype.getCssRoot = function (cssClasses) {
         var isExpanadable = !!this.isCollapsed || !!this.isExpanded;
@@ -57958,6 +58726,13 @@ var SurveyElement = /** @class */ (function (_super) {
             this.toggleState();
         }
     };
+    Object.defineProperty(SurveyElement.prototype, "hasAdditionalTitleToolbar", {
+        get: function () {
+            return false;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(SurveyElement.prototype, "additionalTitleToolbar", {
         get: function () {
             return this.getAdditionalTitleToolbar();
@@ -57977,9 +58752,38 @@ var SurveyElement = /** @class */ (function (_super) {
             .append(cssClasses.titleExpandable, isExpandable)
             .append(cssClasses.titleExpanded, this.isExpanded)
             .append(cssClasses.titleCollapsed, this.isCollapsed)
-            .append(cssClasses.titleDisabled, this.isReadOnly)
+            .append(cssClasses.titleDisabled, this.isDisabledStyle)
+            .append(cssClasses.titleReadOnly, this.isReadOnly)
             .append(cssClasses.titleOnError, this.containsErrors).toString();
     };
+    Object.defineProperty(SurveyElement.prototype, "isDisabledStyle", {
+        get: function () {
+            return this.getIsDisableAndReadOnlyStyles(false)[1];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyElement.prototype, "isReadOnlyStyle", {
+        get: function () {
+            return this.getIsDisableAndReadOnlyStyles(false)[0];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SurveyElement.prototype.getIsDisableAndReadOnlyStyles = function (itemReadOnly) {
+        var isPreview = this.isPreviewStyle;
+        var isReadOnly = itemReadOnly || this.isReadOnly;
+        var isReadOnlyStyle = isReadOnly && !isPreview;
+        var isDisableStyle = !this.isDefaultV2Theme && (isReadOnly || isPreview);
+        return [isReadOnlyStyle, isDisableStyle];
+    };
+    Object.defineProperty(SurveyElement.prototype, "isPreviewStyle", {
+        get: function () {
+            return !!this.survey && this.survey.state === "preview";
+        },
+        enumerable: false,
+        configurable: true
+    });
     SurveyElement.prototype.localeChanged = function () {
         _super.prototype.localeChanged.call(this);
         this.updateDescriptionVisibility(this.description);
@@ -58039,12 +58843,12 @@ var SurveyElement = /** @class */ (function (_super) {
                 if (cssClasses.content) {
                     var selector = Object(_utils_utils__WEBPACK_IMPORTED_MODULE_8__["classesToSelector"])(cssClasses.content);
                     if (selector) {
-                        return (_a = _this.getWrapperElement()) === null || _a === void 0 ? void 0 : _a.querySelector(selector);
+                        return (_a = _this.getWrapperElement()) === null || _a === void 0 ? void 0 : _a.querySelector(":scope " + selector);
                     }
                 }
                 return undefined;
             },
-            isAnimationEnabled: function () { return _settings__WEBPACK_IMPORTED_MODULE_4__["settings"].animationEnabled && _this.animationAllowed && !_this.isDesignMode; }
+            isAnimationEnabled: function () { return _this.animationAllowed && !_this.isDesignMode; }
         };
     };
     Object.defineProperty(SurveyElement.prototype, "renderedIsExpanded", {
@@ -58057,16 +58861,9 @@ var SurveyElement = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(SurveyElement.prototype, "animationAllowed", {
-        get: function () {
-            return !this.isLoadingFromJson && !this.isDisposed && !!this.survey && this.animationAllowedValue;
-        },
-        set: function (val) {
-            this.animationAllowedValue = val;
-        },
-        enumerable: false,
-        configurable: true
-    });
+    SurveyElement.prototype.getIsAnimationAllowed = function () {
+        return _super.prototype.getIsAnimationAllowed.call(this) && !!this.survey;
+    };
     SurveyElement.prototype.dispose = function () {
         _super.prototype.dispose.call(this);
         if (this.titleToolbarValue) {
@@ -61572,7 +62369,7 @@ var SurveyModel = /** @class */ (function (_super) {
         }
         this.getAllQuestions().forEach(function (q) {
             if (q.hasFilteredValue) {
-                values[q.getValueName()] = q.getFilteredValue();
+                values[q.getFilteredName()] = q.getFilteredValue();
             }
         });
         return values;
@@ -63481,7 +64278,7 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     SurveyModel.prototype.updateProgressText = function (onValueChanged) {
         if (onValueChanged === void 0) { onValueChanged = false; }
-        if (this.isCalculatingProgressText)
+        if (this.isCalculatingProgressText || this.isShowingPreview || this.isLockingUpdateOnPageModes)
             return;
         if (onValueChanged &&
             this.progressBarType == "pages" &&
@@ -64672,6 +65469,7 @@ var SurveyModel = /** @class */ (function (_super) {
      * @param isPartial Pass `true` to save partial survey results (see [Continue an Incomplete Survey](https://surveyjs.io/form-library/documentation/handle-survey-results-continue-incomplete)).
      */
     SurveyModel.prototype.sendResult = function (postId, clientId, isPartial) {
+        var _this = this;
         if (postId === void 0) { postId = null; }
         if (clientId === void 0) { clientId = null; }
         if (isPartial === void 0) { isPartial = false; }
@@ -64690,24 +65488,23 @@ var SurveyModel = /** @class */ (function (_super) {
         }
         if (isPartial && !this.clientId)
             return;
-        var self = this;
-        if (this.surveyShowDataSaving) {
+        var service = this.createSurveyService();
+        service.locale = this.getLocale();
+        var showSaving = this.surveyShowDataSaving || (!isPartial && service.isSurveJSIOService);
+        if (showSaving) {
             this.setCompletedState("saving", "");
         }
-        this.createSurveyService().sendResult(postId, this.data, function (success, response, request) {
-            if (self.surveyShowDataSaving) {
+        service.sendResult(postId, this.data, function (success, response, request) {
+            if (showSaving || service.isSurveJSIOService) {
                 if (success) {
-                    self.setCompletedState("success", "");
+                    _this.setCompletedState("success", "");
                 }
                 else {
-                    self.setCompletedState("error", response);
+                    _this.setCompletedState("error", response);
                 }
             }
-            self.onSendResult.fire(self, {
-                success: success,
-                response: response,
-                request: request,
-            });
+            var options = { success: success, response: response, request: request };
+            _this.onSendResult.fire(_this, options);
         }, this.clientId, isPartial);
     };
     /**
@@ -64779,7 +65576,7 @@ var SurveyModel = /** @class */ (function (_super) {
         this.updateVisibleIndexes();
     };
     SurveyModel.prototype.updateVisibleIndexes = function () {
-        if (this.isLoadingFromJson || !!this.isEndLoadingFromJson)
+        if (this.isLoadingFromJson || !!this.isEndLoadingFromJson || this.isLockingUpdateOnPageModes)
             return;
         if (this.isRunningConditions &&
             this.onQuestionVisibleChanged.isEmpty &&
@@ -65345,7 +66142,7 @@ var SurveyModel = /** @class */ (function (_super) {
         if (locNotification !== "text") {
             this.tryGoNextPageAutomatic(name);
         }
-        var question = this.getQuestionByName(name);
+        var question = this.getQuestionByValueName(name);
         if (question) {
             this.onValueChanged.fire(this, {
                 name: commentName,
@@ -65386,8 +66183,10 @@ var SurveyModel = /** @class */ (function (_super) {
             return questionClearIf;
         return this.clearInvisibleValues;
     };
-    SurveyModel.prototype.questionVisibilityChanged = function (question, newValue) {
-        this.updateVisibleIndexes();
+    SurveyModel.prototype.questionVisibilityChanged = function (question, newValue, resetIndexes) {
+        if (resetIndexes) {
+            this.updateVisibleIndexes();
+        }
         this.onQuestionVisibleChanged.fire(this, {
             question: question,
             name: question.name,
@@ -68346,6 +69145,9 @@ var SurveyTriggerRunExpression = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    SurveyTriggerRunExpression.prototype.canBeExecuted = function (isOnNextPage) {
+        return !isOnNextPage;
+    };
     SurveyTriggerRunExpression.prototype.onSuccess = function (values, properties) {
         var _this = this;
         if (!this.owner || !this.runExpression)
@@ -68469,7 +69271,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].addClass("runexpressiontr
 /*!********************************!*\
   !*** ./src/utils/animation.ts ***!
   \********************************/
-/*! exports provided: AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationBoolean, AnimationGroup */
+/*! exports provided: AnimationUtils, AnimationPropertyUtils, AnimationGroupUtils, AnimationProperty, AnimationBoolean, AnimationGroup, AnimationTab */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -68477,8 +69279,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationUtils", function() { return AnimationUtils; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationPropertyUtils", function() { return AnimationPropertyUtils; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationGroupUtils", function() { return AnimationGroupUtils; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationProperty", function() { return AnimationProperty; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationBoolean", function() { return AnimationBoolean; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationGroup", function() { return AnimationGroup; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationTab", function() { return AnimationTab; });
 /* harmony import */ var _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../global_variables_utils */ "./src/global_variables_utils.ts");
 /* harmony import */ var _taskmanager__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./taskmanager */ "./src/utils/taskmanager.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
@@ -68507,6 +69311,9 @@ var AnimationUtils = /** @class */ (function () {
             return 0;
         return Number(value.slice(0, -1).replace(",", ".")) * 1000;
     };
+    AnimationUtils.prototype.reflow = function (element) {
+        return element.offsetHeight;
+    };
     AnimationUtils.prototype.getAnimationsCount = function (element) {
         var animationName = "";
         if (getComputedStyle) {
@@ -68524,6 +69331,14 @@ var AnimationUtils = /** @class */ (function () {
         }
         return duration;
     };
+    AnimationUtils.prototype.addCancelCallback = function (callback) {
+        this.cancelQueue.push(callback);
+    };
+    AnimationUtils.prototype.removeCancelCallback = function (callback) {
+        if (this.cancelQueue.indexOf(callback) >= 0) {
+            this.cancelQueue.splice(this.cancelQueue.indexOf(callback), 1);
+        }
+    };
     AnimationUtils.prototype.onAnimationEnd = function (element, callback, options) {
         var _this = this;
         var cancelTimeout;
@@ -68533,7 +69348,7 @@ var AnimationUtils = /** @class */ (function () {
             options.onAfterRunAnimation && options.onAfterRunAnimation(element);
             callback(isCancel);
             clearTimeout(cancelTimeout);
-            _this.cancelQueue.splice(_this.cancelQueue.indexOf(onEndCallback), 1);
+            _this.removeCancelCallback(onEndCallback);
             element.removeEventListener("animationend", onAnimationEndCallback);
         };
         var onAnimationEndCallback = function (event) {
@@ -68543,7 +69358,7 @@ var AnimationUtils = /** @class */ (function () {
         };
         if (animationsCount > 0) {
             element.addEventListener("animationend", onAnimationEndCallback);
-            this.cancelQueue.push(onEndCallback);
+            this.addCancelCallback(onEndCallback);
             cancelTimeout = setTimeout(function () {
                 onEndCallback(false);
             }, this.getAnimationDuration(element) + 10);
@@ -68553,40 +69368,51 @@ var AnimationUtils = /** @class */ (function () {
         }
     };
     AnimationUtils.prototype.beforeAnimationRun = function (element, options) {
-        if (element) {
+        if (element && options) {
             options.onBeforeRunAnimation && options.onBeforeRunAnimation(element);
         }
     };
-    AnimationUtils.prototype.runLeaveAnimation = function (element, options, callback) {
+    AnimationUtils.prototype.runAnimation = function (element, options, callback) {
         if (element && options.cssClass) {
+            this.reflow(element);
             element.classList.add(options.cssClass);
-            var onAnimationEndCallback = function (isCancel) {
+            this.onAnimationEnd(element, callback, options);
+        }
+        else {
+            callback(true);
+        }
+    };
+    AnimationUtils.prototype.clearHtmlElement = function (element, options) {
+        if (element && options.cssClass) {
+            element.classList.remove(options.cssClass);
+        }
+    };
+    AnimationUtils.prototype.onNextRender = function (callback, runEarly, isCancel) {
+        var _this = this;
+        if (isCancel === void 0) { isCancel = false; }
+        if (!isCancel && _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].isAvailable()) {
+            var cancelCallback_1 = function () {
                 callback();
-                if (isCancel) {
-                    element.classList.remove(options.cssClass);
+                cancelAnimationFrame(latestRAF_1);
+            };
+            var latestRAF_1 = _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
+                if (runEarly && runEarly()) {
+                    callback();
+                    _this.removeCancelCallback(cancelCallback_1);
                 }
                 else {
-                    _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
-                        _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
-                            element.classList.remove(options.cssClass);
-                        });
+                    latestRAF_1 = _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
+                        callback();
+                        _this.removeCancelCallback(cancelCallback_1);
                     });
                 }
-            };
-            this.onAnimationEnd(element, onAnimationEndCallback, options);
+            });
+            this.addCancelCallback(cancelCallback_1);
         }
         else {
             callback();
         }
     };
-    AnimationUtils.prototype.runEnterAnimation = function (element, options) {
-        if (element && options.cssClass) {
-            element.classList.add(options.cssClass);
-            this.onAnimationEnd(element, function () {
-                element.classList.remove(options.cssClass);
-            }, options);
-        }
-    };
     AnimationUtils.prototype.cancel = function () {
         var cancelQueue = [].concat(this.cancelQueue);
         cancelQueue.forEach(function (callback) { return callback(); });
@@ -68600,26 +69426,28 @@ var AnimationPropertyUtils = /** @class */ (function (_super) {
     function AnimationPropertyUtils() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    AnimationPropertyUtils.prototype.onEnter = function (getElement, options) {
+    AnimationPropertyUtils.prototype.onEnter = function (options) {
         var _this = this;
-        var callback = function () {
-            var element = getElement();
-            _this.beforeAnimationRun(element, options);
-            _this.runEnterAnimation(element, options);
-        };
-        _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
-            if (getElement()) {
-                callback();
-            }
-            else {
-                _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(callback);
-            }
-        });
+        this.onNextRender(function () {
+            var htmlElement = options.getAnimatedElement();
+            var enterOptions = options.getEnterOptions();
+            _this.beforeAnimationRun(htmlElement, enterOptions);
+            _this.runAnimation(htmlElement, enterOptions, function () {
+                _this.clearHtmlElement(htmlElement, enterOptions);
+            });
+        }, function () { return !!options.getAnimatedElement(); });
     };
-    AnimationPropertyUtils.prototype.onLeave = function (getElement, callback, options) {
-        var element = getElement();
-        this.beforeAnimationRun(element, options);
-        this.runLeaveAnimation(element, options, callback);
+    AnimationPropertyUtils.prototype.onLeave = function (options, callback) {
+        var _this = this;
+        var htmlElement = options.getAnimatedElement();
+        var leaveOptions = options.getLeaveOptions();
+        this.beforeAnimationRun(htmlElement, leaveOptions);
+        this.runAnimation(htmlElement, leaveOptions, function (isCancel) {
+            callback();
+            _this.onNextRender(function () {
+                _this.clearHtmlElement(htmlElement, leaveOptions);
+            }, undefined, isCancel);
+        });
     };
     return AnimationPropertyUtils;
 }(AnimationUtils));
@@ -68629,41 +69457,40 @@ var AnimationGroupUtils = /** @class */ (function (_super) {
     function AnimationGroupUtils() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    AnimationGroupUtils.prototype.onEnter = function (getElement, getOptions, elements) {
+    AnimationGroupUtils.prototype.runGroupAnimation = function (options, addedElements, removedElements, callback) {
         var _this = this;
-        if (elements.length == 0)
-            return;
-        _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
-            var callback = function () {
-                elements.forEach(function (el) {
-                    _this.beforeAnimationRun(getElement(el), getOptions(el));
-                });
-                elements.forEach(function (el) {
-                    _this.runEnterAnimation(getElement(el), getOptions(el));
-                });
+        this.onNextRender(function () {
+            var addedHtmlElements = addedElements.map(function (el) { return options.getAnimatedElement(el); });
+            var enterOptions = addedElements.map(function (el) { return options.getEnterOptions(el); });
+            var removedHtmlElements = removedElements.map(function (el) { return options.getAnimatedElement(el); });
+            var leaveOptions = removedElements.map(function (el) { return options.getLeaveOptions(el); });
+            addedElements.forEach(function (_, i) {
+                _this.beforeAnimationRun(addedHtmlElements[i], enterOptions[i]);
+            });
+            removedElements.forEach(function (_, i) {
+                _this.beforeAnimationRun(removedHtmlElements[i], leaveOptions[i]);
+            });
+            var counter = addedElements.length + removedElements.length;
+            var onAnimationEndCallback = function (isCancel) {
+                if (--counter <= 0) {
+                    callback && callback();
+                    _this.onNextRender(function () {
+                        addedElements.forEach(function (_, i) {
+                            _this.clearHtmlElement(addedHtmlElements[i], enterOptions[i]);
+                        });
+                        removedElements.forEach(function (_, i) {
+                            _this.clearHtmlElement(removedHtmlElements[i], leaveOptions[i]);
+                        });
+                    }, undefined, isCancel);
+                }
             };
-            if (!getElement(elements[0])) {
-                _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(callback);
-            }
-            else {
-                callback();
-            }
-        });
-    };
-    AnimationGroupUtils.prototype.onLeave = function (getElement, callback, getOptions, elements) {
-        var _this = this;
-        elements.forEach(function (el) {
-            _this.beforeAnimationRun(getElement(el), getOptions(el));
-        });
-        var counter = elements.length;
-        var onEndCallback = function () {
-            if (--counter <= 0) {
-                callback();
-            }
-        };
-        elements.forEach(function (el) {
-            _this.runLeaveAnimation(getElement(el), getOptions(el), onEndCallback);
-        });
+            addedElements.forEach(function (_, i) {
+                _this.runAnimation(addedHtmlElements[i], enterOptions[i], onAnimationEndCallback);
+            });
+            removedElements.forEach(function (_, i) {
+                _this.runAnimation(removedHtmlElements[i], leaveOptions[i], onAnimationEndCallback);
+            });
+        }, function () { return addedElements.length == 0 || addedElements.some(function (el) { return !!options.getAnimatedElement(el); }); });
     };
     return AnimationGroupUtils;
 }(AnimationUtils));
@@ -68684,6 +69511,7 @@ var AnimationProperty = /** @class */ (function () {
             this._debouncedSync.run(newValue);
         }
         else {
+            this.cancel();
             this.update(newValue);
         }
     };
@@ -68693,6 +69521,7 @@ var AnimationProperty = /** @class */ (function () {
     };
     return AnimationProperty;
 }());
+
 var AnimationBoolean = /** @class */ (function (_super) {
     __extends(AnimationBoolean, _super);
     function AnimationBoolean() {
@@ -68705,12 +69534,12 @@ var AnimationBoolean = /** @class */ (function (_super) {
         if (newValue !== this.getCurrentValue()) {
             if (newValue) {
                 this.update(newValue);
-                this.animation.onEnter(function () { return _this.animationOptions.getAnimatedElement(); }, this.animationOptions.getEnterOptions());
+                this.animation.onEnter(this.animationOptions);
             }
             else {
-                this.animation.onLeave(function () { return _this.animationOptions.getAnimatedElement(); }, function () {
+                this.animation.onLeave(this.animationOptions, function () {
                     _this.update(newValue);
-                }, this.animationOptions.getLeaveOptions());
+                });
             }
         }
         else {
@@ -68732,19 +69561,42 @@ var AnimationGroup = /** @class */ (function (_super) {
         var oldValue = this.getCurrentValue();
         var itemsToAdd = newValue.filter(function (el) { return oldValue.indexOf(el) < 0; });
         var deletedItems = oldValue.filter(function (el) { return newValue.indexOf(el) < 0; });
-        this.animation.onEnter(function (el) { return _this.animationOptions.getAnimatedElement(el); }, function (el) { return _this.animationOptions.getEnterOptions(el); }, itemsToAdd);
         if (itemsToAdd.length == 0 && (deletedItems === null || deletedItems === void 0 ? void 0 : deletedItems.length) > 0) {
-            this.animation.onLeave(function (el) { return _this.animationOptions.getAnimatedElement(el); }, function () {
-                _this.update(newValue);
-            }, function (el) { return _this.animationOptions.getLeaveOptions(el); }, deletedItems);
+            this.animation.runGroupAnimation(this.animationOptions, [], deletedItems, function () { return _this.update(newValue); });
         }
         else {
             this.update(newValue);
+            this.animation.runGroupAnimation(this.animationOptions, itemsToAdd, []);
         }
     };
     return AnimationGroup;
 }(AnimationProperty));
 
+var AnimationTab = /** @class */ (function (_super) {
+    __extends(AnimationTab, _super);
+    function AnimationTab(animationOptions, update, getCurrentValue, mergeValues) {
+        var _this = _super.call(this, animationOptions, update, getCurrentValue) || this;
+        _this.mergeValues = mergeValues;
+        _this.animation = new AnimationGroupUtils();
+        return _this;
+    }
+    AnimationTab.prototype._sync = function (newValue) {
+        var _this = this;
+        var oldValue = [].concat(this.getCurrentValue());
+        if (oldValue[0] !== newValue[0]) {
+            var tempValue = !!this.mergeValues ? this.mergeValues(newValue, oldValue) : [].concat(oldValue, newValue);
+            this.update(tempValue, true);
+            this.animation.runGroupAnimation(this.animationOptions, newValue, oldValue, function () {
+                _this.update(newValue);
+            });
+        }
+        else {
+            this.update(newValue);
+        }
+    };
+    return AnimationTab;
+}(AnimationProperty));
+
 
 
 /***/ }),