npm - survey-react - Versions diffs - 1.9.138 → 1.9.139 - Mend

survey-react 1.9.138 → 1.9.139

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/survey.react.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.138
+ * surveyjs - Survey JavaScript library v1.9.139
  * 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);
@@ -4863,7 +4882,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 +5289,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",
@@ -5572,6 +5591,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 +5616,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 +5654,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 +5681,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 +5705,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 +5741,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 +5752,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 +5764,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 +5804,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 +5822,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 +5853,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 +5861,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",
@@ -5933,6 +5984,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 +5994,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 +6004,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 +6024,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 +6035,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 +6131,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 +6145,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 +6223,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 +8140,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 +8241,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 +8806,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;
@@ -9674,8 +9747,8 @@ __webpack_require__.r(__webpack_exports__);
 var Version;
 var ReleaseDate;
-Version = "" + "1.9.138";
-ReleaseDate = "" + "2024-04-09";
+Version = "" + "1.9.139";
+ReleaseDate = "" + "2024-04-16";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -18348,7 +18421,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>"
 /***/ }),
@@ -18370,7 +18443,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>"
 /***/ }),
@@ -18381,7 +18454,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>"
 /***/ }),
@@ -23510,7 +23583,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.",
@@ -23540,6 +23613,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.",
@@ -23556,7 +23630,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",
@@ -30059,9 +30133,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);
@@ -30369,6 +30440,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);
@@ -30380,11 +30462,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: {
@@ -30416,7 +30502,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);
@@ -30425,23 +30512,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;
@@ -30472,11 +30577,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";
     };
@@ -30496,20 +30632,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;
@@ -30533,6 +30694,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);
@@ -30545,7 +30707,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)
@@ -30555,74 +30736,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();
         }
@@ -30640,12 +30900,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;
     };
@@ -30672,6 +30944,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":
@@ -30680,7 +30956,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;
@@ -30693,15 +30969,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++;
             }
@@ -30714,7 +31013,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;
     };
@@ -30732,6 +31038,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) {
@@ -30760,17 +31071,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);
@@ -34324,7 +34645,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
@@ -36736,6 +37060,7 @@ var PopupBaseViewModel = /** @class */ (function (_super) {
             _this.isVisible = _this.model.isVisible;
         };
         _this.model = model;
+        _this.locale = _this.model.locale;
         return _this;
     }
     PopupBaseViewModel.prototype.updateIsVisible = function (val) {
@@ -38244,10 +38569,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);
@@ -38840,7 +39166,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();
     };
@@ -43017,7 +43345,10 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         options.isDisabled = isDisabled;
         options.isChecked = isChecked;
         options.isNone = isNone;
-        return builder.append(this.cssClasses.itemDisabled, isDisabled)
+        return builder
+            .append(this.cssClasses.itemDisabled, this.isDisabledStyle)
+            .append(this.cssClasses.itemReadOnly, this.isReadOnlyStyle)
+            .append(this.cssClasses.itemPreview, this.isPreviewStyle)
             .append(this.cssClasses.itemChecked, isChecked)
             .append(this.cssClasses.itemHover, allowHover)
             .append(this.cssClasses.itemNone, isNone)
@@ -43180,6 +43511,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,
@@ -43739,7 +44073,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)
@@ -43754,6 +44090,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
         });
@@ -43761,7 +44100,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();
@@ -43779,6 +44120,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;
@@ -43844,6 +44195,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 () {
@@ -45089,7 +45449,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
@@ -45207,6 +45567,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 ||
@@ -45229,6 +45590,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 var ComponentQuestionJSON = /** @class */ (function () {
     function ComponentQuestionJSON(name, json) {
         this.name = name;
@@ -45820,15 +46182,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) {
@@ -45842,6 +46204,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)
@@ -46549,7 +46925,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();
     };
@@ -48389,6 +48767,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)
@@ -49879,7 +50260,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,
@@ -50205,12 +50587,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,
@@ -55372,6 +55759,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;
@@ -58024,6 +58412,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)
@@ -59461,12 +59852,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.
@@ -59566,15 +59958,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) {
@@ -60881,6 +61274,8 @@ 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,
@@ -61366,11 +61761,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();
@@ -61378,6 +61776,9 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    QuestionRankingModel.prototype.isItemSelectedCore = function (item) {
+        return false;
+    };
     QuestionRankingModel.prototype.getItemClassCore = function (item, options) {
         var itemIndex = this.rankingChoices.indexOf(item);
         var unrankedItemIndex = this.unRankingChoices.indexOf(item);
@@ -62632,7 +63033,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);
@@ -62668,6 +63071,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;
@@ -62679,6 +63084,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;
@@ -62689,6 +63096,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;
@@ -62706,7 +63115,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")
@@ -63449,6 +63860,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();
@@ -63510,6 +63928,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"]));
@@ -63566,6 +63987,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",
@@ -63771,7 +64199,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 () {
@@ -65068,7 +65499,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();
@@ -66248,7 +66681,7 @@ var SurveyFilePreview = /** @class */ (function (_super) {
         var previews = this.question.previewValue.map(function (val, index) {
             if (!val)
                 return null;
-            return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { key: _this.question.inputId + "_" + index, className: _this.question.cssClasses.preview, style: { display: _this.question.isPreviewVisible(index) ? undefined : "none" } },
+            return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { key: _this.question.inputId + "_" + index, className: _this.question.cssClasses.previewItem, style: { display: _this.question.isPreviewVisible(index) ? undefined : "none" } },
                 _this.renderFileSign(_this.question.cssClasses.fileSign, val),
                 react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: _this.question.getImageWrapperCss(val) },
                     _this.question.canPreviewImage(val) ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("img", { src: val.content, style: { height: _this.question.imageHeight, width: _this.question.imageWidth }, alt: "File preview" })) : (_this.question.cssClasses.defaultImage ? (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_2__["SvgIcon"], { iconName: _this.question.cssClasses.defaultImageIconId, size: "auto", className: _this.question.cssClasses.defaultImage })) : null),
@@ -66510,7 +66943,7 @@ var ListItem = /** @class */ (function (_super) {
                 event.stopPropagation();
             }, onPointerDown: function (event) { return _this.model.onPointerDown(event, _this.item); } },
             separator,
-            contentWrap));
+            contentWrap), this.item);
     };
     ListItem.prototype.componentDidMount = function () {
         _super.prototype.componentDidMount.call(this);
@@ -73749,8 +74182,8 @@ var SurveyQuestionPanelDynamic = /** @class */ (function (_super) {
     SurveyQuestionPanelDynamic.prototype.renderElement = function () {
         var panels = [];
         if (this.question.isRenderModeList) {
-            for (var i = 0; i < this.question.panels.length; i++) {
-                var panel = this.question.panels[i];
+            for (var i = 0; i < this.question.visiblePanels.length; i++) {
+                var panel = this.question.visiblePanels[i];
                 panels.push(react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionPanelDynamicItem, { key: panel.id, element: panel, question: this.question, index: i, cssClasses: this.question.cssClasses, isDisplayMode: this.isDisplayMode, creator: this.creator }));
             }
         }
@@ -74233,12 +74666,12 @@ var SurveyQuestionRanking = /** @class */ (function (_super) {
         return items;
     };
     SurveyQuestionRanking.prototype.renderItem = function (item, i, handleKeydown, handlePointerDown, cssClasses, itemClass, question, unrankedItem) {
-        var key = item.value + "-" + i + "-item";
+        var key = "id-" + item.renderedId;
         var text = this.renderLocString(item.locText);
         var index = i;
-        var indexText = this.question.getNumberByIndex(i);
+        var indexText = this.question.getNumberByIndex(index);
         var tabIndex = this.question.getItemTabIndex(item);
-        var renderedItem = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionRankingItem, { key: key, text: text, index: index, indexText: indexText, itemTabIndex: tabIndex, handleKeydown: handleKeydown, handlePointerDown: handlePointerDown, cssClasses: cssClasses, itemClass: itemClass, question: question, unrankedItem: unrankedItem, item: item }));
+        var renderedItem = (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SurveyQuestionRankingItem, { key: item.value, text: text, index: index, indexText: indexText, itemTabIndex: tabIndex, handleKeydown: handleKeydown, handlePointerDown: handlePointerDown, cssClasses: cssClasses, itemClass: itemClass, question: question, unrankedItem: unrankedItem, item: item }));
         var survey = this.question.survey;
         var wrappedItem = null;
         if (!!survey) {
@@ -74987,7 +75420,7 @@ var SurveyQuestionSignaturePad = /** @class */ (function (_super) {
         var loadingIndicator = this.question.showLoadingIndicator ? this.renderLoadingIndicator() : null;
         var clearButton = this.renderCleanButton();
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.root, ref: function (root) { return (_this.setControl(root)); }, style: { width: this.question.renderedCanvasWidth } },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.placeholder, style: { display: this.question.needShowPlaceholder() ? "" : "none" } }, this.renderLocString(this.question.locPlaceholder)),
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.placeholder, style: { display: this.question.needShowPlaceholder() ? "" : "none" } }, this.renderLocString(this.question.locRenderedPlaceholder)),
             react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null,
                 this.renderBackgroundImage(),
                 react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("canvas", { tabIndex: -1, className: this.question.cssClasses.canvas, onBlur: this.question.onBlur })),
@@ -77701,11 +78134,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;
@@ -77925,9 +78361,31 @@ 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.isDefaultV2Theme && (this.isReadOnlyStyle || this.isPreviewStyle);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SurveyElement.prototype, "isReadOnlyStyle", {
+        get: function () {
+            return this.isReadOnly && !this.isPreviewStyle;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    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);
@@ -83429,7 +83887,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" &&
@@ -84727,7 +85185,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 &&
@@ -85334,8 +85792,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,