survey-react 1.9.137 → 1.9.139

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.137
+ * 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",
@@ -6933,7 +7003,7 @@ var DragDropCore = /** @class */ (function () {
         return (this.dropTarget === this.prevDropTarget && newIsBottom === this.isBottom);
     };
     DragDropCore.prototype.getShortcutText = function (draggedElement) {
-        return draggedElement.shortcutText;
+        return draggedElement === null || draggedElement === void 0 ? void 0 : draggedElement.shortcutText;
     };
     DragDropCore.prototype.createDraggedElementShortcut = function (text, draggedElementNode, event) {
         var draggedElementShortcut = _global_variables_utils__WEBPACK_IMPORTED_MODULE_2__["DomDocumentHelper"].createElement("div");
@@ -7470,8 +7540,12 @@ var DragDropMatrixRows = /** @class */ (function (_super) {
         dropTargetRenderedRow = matrix.renderedTable.rows.filter(function (renderedRow) { return renderedRow.row && renderedRow.row.id === dataAttributeValue; })[0];
         return dropTargetRenderedRow.row;
     };
+    DragDropMatrixRows.prototype.canInsertIntoThisRow = function (row) {
+        var lockedRows = this.parentElement.lockedRowCount;
+        return lockedRows <= 0 || row.rowIndex > lockedRows;
+    };
     DragDropMatrixRows.prototype.isDropTargetValid = function (dropTarget, dropTargetNode) {
-        return true;
+        return this.canInsertIntoThisRow(dropTarget);
     };
     DragDropMatrixRows.prototype.calculateIsBottom = function (clientY) {
         var rendreredRows = this.parentElement.renderedTable.rows;
@@ -8066,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();
@@ -8166,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();
@@ -8730,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;
@@ -9670,8 +9747,8 @@ __webpack_require__.r(__webpack_exports__);
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.9.137";
-ReleaseDate = "" + "2024-04-02";
+Version = "" + "1.9.139";
+ReleaseDate = "" + "2024-04-16";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -18344,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>"
 
 /***/ }),
 
@@ -18366,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>"
 
 /***/ }),
 
@@ -18377,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>"
 
 /***/ }),
 
@@ -23506,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.",
@@ -23536,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.",
@@ -23552,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",
@@ -30036,6 +30114,12 @@ var InputElementAdapter = /** @class */ (function () {
                 _this.inputElement.value = maskedValue;
             }
         };
+        this.clickHandler = function (event) {
+            if (_this.inputElement.value == _this.inputMaskInstance.getMaskedValue("")) {
+                _this.inputElement.setSelectionRange(0, 0);
+                event.preventDefault();
+            }
+        };
         this.beforeInputHandler = function (event) {
             var args = _this.createArgs(event);
             var result = _this.inputMaskInstance.processInput(args);
@@ -30049,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);
@@ -30079,11 +30160,15 @@ var InputElementAdapter = /** @class */ (function () {
     InputElementAdapter.prototype.addInputEventListener = function () {
         if (!!this.inputElement) {
             this.inputElement.addEventListener("beforeinput", this.beforeInputHandler);
+            this.inputElement.addEventListener("click", this.clickHandler);
+            this.inputElement.addEventListener("focus", this.clickHandler);
         }
     };
     InputElementAdapter.prototype.removeInputEventListener = function () {
         if (!!this.inputElement) {
             this.inputElement.removeEventListener("beforeinput", this.beforeInputHandler);
+            this.inputElement.removeEventListener("click", this.clickHandler);
+            this.inputElement.removeEventListener("focus", this.clickHandler);
         }
     };
     InputElementAdapter.prototype.dispose = function () {
@@ -30355,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);
@@ -30366,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: {
@@ -30402,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);
@@ -30411,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;
@@ -30458,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";
     };
@@ -30482,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;
@@ -30518,12 +30693,40 @@ var InputMaskDateTime = /** @class */ (function (_super) {
         });
     };
     InputMaskDateTime.prototype.getISO_8601Format = function (dateTime) {
-        if (dateTime.year === undefined || dateTime.month === undefined || dateTime.day === undefined)
-            return "";
-        var year = this.getPlaceholder(4, dateTime.year.toString(), "0") + dateTime.year;
-        var month = this.getPlaceholder(2, dateTime.month.toString(), "0") + dateTime.month;
-        var day = this.getPlaceholder(2, dateTime.day.toString(), "0") + dateTime.day;
-        return [year, month, day].join("-");
+        var date = [];
+        var time = [];
+        if (dateTime.year !== undefined) {
+            var year = this.getPlaceholder(4, dateTime.year.toString(), "0") + dateTime.year;
+            date.push(year);
+        }
+        if (dateTime.month !== undefined && dateTime.year !== undefined) {
+            var month = this.getPlaceholder(2, dateTime.month.toString(), "0") + dateTime.month;
+            date.push(month);
+        }
+        if (dateTime.day !== undefined && dateTime.month !== undefined && dateTime.year !== undefined) {
+            var day = this.getPlaceholder(2, dateTime.day.toString(), "0") + dateTime.day;
+            date.push(day);
+        }
+        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)
@@ -30533,51 +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);
             }
         }
-        else 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)) {
-            newItem.isCompleted = true;
+        else if (validBeginningOfNumber !== undefined && firstDigit > validBeginningOfNumber) {
+            if (this.isDateValid12(tempDateTime)) {
+                newItem.isCompleted = true;
+            }
+            else {
+                data = data.slice(0, data.length - 1);
+            }
+        }
+        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;
+        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();
         }
@@ -30595,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;
     };
@@ -30619,9 +30936,18 @@ var InputMaskDateTime = /** @class */ (function (_super) {
         var result = "";
         var prevSeparator = "";
         var prevIsCompleted = false;
+        var lastItemWithDataIndex = this.inputDateTimeData.length - 1;
+        if (!matchWholeMask) {
+            var arr = this.inputDateTimeData.filter(function (item) { return !!item.value; });
+            lastItemWithDataIndex = this.inputDateTimeData.indexOf(arr[arr.length - 1]);
+        }
         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":
@@ -30630,7 +30956,8 @@ var InputMaskDateTime = /** @class */ (function (_super) {
                         return result;
                     }
                     else {
-                        var data = this.getCorrectDatePartFormat(inputData, matchWholeMask);
+                        var _matchWholeMask = matchWholeMask || lastItemWithDataIndex > index;
+                        var data = this.getCorrectDatePartFormat(inputData, _matchWholeMask);
                         result += (prevSeparator + data);
                         prevIsCompleted = inputData.isCompleted;
                     }
@@ -30642,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++;
             }
@@ -30663,35 +31013,16 @@ 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); });
-        var result = this.getFormatedString(matchWholeMask);
-        return result;
-    };
-    InputMaskDateTime.prototype.getPartsOld = function (input) {
-        var inputParts = [];
-        var separatorLexems = this.lexems.filter(function (l) { return l.type === "separator"; });
-        var separatorLexemsIndex = 0;
-        do {
-            if (!separatorLexems[separatorLexemsIndex]) {
-                if (!!input) {
-                    inputParts.push(input);
-                    input = "";
-                }
-                break;
-            }
-            var separatorCharIndex = input.indexOf(separatorLexems[separatorLexemsIndex].value);
-            if (separatorCharIndex !== -1) {
-                var part = input.slice(0, separatorCharIndex);
-                if (!!part) {
-                    inputParts.push(part);
-                }
-                input = input.slice(separatorCharIndex + 1);
+        this.inputDateTimeData.forEach(function (itemData) {
+            if (itemData.lexem.type === "timeMarker") {
+                _this.updateTimeMarkerInputDateTimeData(itemData, tempDateTime);
             }
             else {
+                _this.updateInputDateTimeData(itemData, tempDateTime);
             }
-            separatorLexemsIndex++;
-        } while (!!input);
-        return inputParts;
+        });
+        var result = this.getFormatedString(matchWholeMask);
+        return result;
     };
     InputMaskDateTime.prototype.getParts = function (input) {
         var inputParts = [];
@@ -30707,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) {
@@ -30735,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);
@@ -30937,7 +31283,7 @@ var InputMaskNumeric = /** @class */ (function (_super) {
         }
         return value;
     };
-    InputMaskNumeric.prototype.validateNumber = function (number) {
+    InputMaskNumeric.prototype.validateNumber = function (number, matchWholeMask) {
         var min = this.min || Number.MIN_SAFE_INTEGER;
         var max = this.max || Number.MAX_SAFE_INTEGER;
         if (this.min !== undefined || this.max !== undefined) {
@@ -30945,7 +31291,12 @@ var InputMaskNumeric = /** @class */ (function (_super) {
             if (Number.isNaN(value)) {
                 return true;
             }
-            return value >= min && value <= max;
+            if (!matchWholeMask) {
+                return value >= 0 && value <= max || value < 0 && value >= min;
+            }
+            else {
+                return value >= min && value <= max;
+            }
         }
         return true;
     };
@@ -30960,7 +31311,7 @@ var InputMaskNumeric = /** @class */ (function (_super) {
             var currentChar = input[inputIndex];
             switch (currentChar) {
                 case "-": {
-                    if (this.allowNegativeValues) {
+                    if (this.allowNegativeValues && (this.min === undefined || this.min < 0)) {
                         minusCharCount++;
                     }
                     break;
@@ -30996,6 +31347,9 @@ var InputMaskNumeric = /** @class */ (function (_super) {
         if (matchWholeMask === void 0) { matchWholeMask = false; }
         var input = (src === undefined || src === null) ? "" : src;
         var parsedNumber = this.parseNumber(input);
+        if (!this.validateNumber(parsedNumber, matchWholeMask)) {
+            return null;
+        }
         var displayText = this.displayNumber(parsedNumber, true, matchWholeMask);
         return displayText;
     };
@@ -31015,7 +31369,7 @@ var InputMaskNumeric = /** @class */ (function (_super) {
         var rightPart = args.prevValue.slice(args.selectionEnd);
         var src = leftPart + rightPart;
         var parsedNumber = this.parseNumber(src);
-        if (!this.validateNumber(parsedNumber)) {
+        if (!this.validateNumber(parsedNumber, false)) {
             return result;
         }
         var maskedValue = this.getNumberMaskedValue(src);
@@ -31960,6 +32314,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _drag_drop_panel_helper_v1__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./drag-drop-panel-helper-v1 */ "./src/drag-drop-panel-helper-v1.ts");
 /* harmony import */ var _utils_animation__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./utils/animation */ "./src/utils/animation.ts");
 /* harmony import */ var _global_variables_utils__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./global_variables_utils */ "./src/global_variables_utils.ts");
+/* harmony import */ var _page__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./page */ "./src/page.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -31999,6 +32354,7 @@ var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from
 
 
 
+
 var QuestionRowModel = /** @class */ (function (_super) {
     __extends(QuestionRowModel, _super);
     function QuestionRowModel(panel) {
@@ -34233,7 +34589,7 @@ var PanelModel = /** @class */ (function (_super) {
     Object.defineProperty(PanelModel.prototype, "hasEditButton", {
         get: function () {
             if (this.survey && this.survey.state === "preview")
-                return this.depth === 1;
+                return (this.parent && this.parent instanceof _page__WEBPACK_IMPORTED_MODULE_13__["PageModel"]);
             return false;
         },
         enumerable: false,
@@ -34289,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
@@ -36701,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) {
@@ -38209,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);
@@ -38805,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();
     };
@@ -42982,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)
@@ -43145,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,
@@ -43704,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)
@@ -43719,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
         });
@@ -43726,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();
@@ -43744,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;
@@ -43809,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 () {
@@ -45054,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
@@ -45172,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 ||
@@ -45194,6 +45590,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var ComponentQuestionJSON = /** @class */ (function () {
     function ComponentQuestionJSON(name, json) {
         this.name = name;
@@ -45234,6 +45631,11 @@ var ComponentQuestionJSON = /** @class */ (function () {
             return;
         this.json.onUpdateQuestionCssClasses(question, element, css);
     };
+    ComponentQuestionJSON.prototype.onSetQuestionValue = function (question, newValue) {
+        if (!this.json.onSetQuestionValue)
+            return;
+        this.json.onSetQuestionValue(question, newValue);
+    };
     ComponentQuestionJSON.prototype.onPropertyChanged = function (question, propertyName, newValue) {
         if (!this.json.onPropertyChanged)
             return;
@@ -45529,6 +45931,9 @@ var QuestionCustomModelBase = /** @class */ (function (_super) {
         if (updateIsAnswered === void 0) { updateIsAnswered = true; }
         _super.prototype.setQuestionValue.call(this, newValue, updateIsAnswered);
         this.updateElementCss();
+        if (!!this.customQuestion) {
+            this.customQuestion.onSetQuestionValue(this, newValue);
+        }
     };
     QuestionCustomModelBase.prototype.setNewValue = function (newValue) {
         _super.prototype.setNewValue.call(this, newValue);
@@ -45557,6 +45962,9 @@ var QuestionCustomModelBase = /** @class */ (function (_super) {
     QuestionCustomModelBase.prototype.setValue = function (name, newValue, locNotification, allowNotifyValueChanged) {
         if (!this.data)
             return;
+        if (!!this.customQuestion) {
+            this.customQuestion.onValueChanged(this, name, newValue);
+        }
         var newName = this.convertDataName(name);
         var valueForSurvey = this.convertDataValue(name, newValue);
         if (this.valueToDataCallback) {
@@ -45565,9 +45973,6 @@ var QuestionCustomModelBase = /** @class */ (function (_super) {
         this.data.setValue(newName, valueForSurvey, locNotification, allowNotifyValueChanged);
         this.updateIsAnswered();
         this.updateElementCss();
-        if (!!this.customQuestion) {
-            this.customQuestion.onValueChanged(this, name, newValue);
-        }
     };
     QuestionCustomModelBase.prototype.getQuestionByName = function (name) {
         return undefined;
@@ -45777,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) {
@@ -45799,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)
@@ -46174,7 +46593,8 @@ var QuestionCompositeModel = /** @class */ (function (_super) {
         this.contentPanel.questions.forEach(function (q) { return q.collectNestedQuestions(questions, visibleOnly); });
     };
     QuestionCompositeModel.prototype.convertDataValue = function (name, newValue) {
-        var val = this.getValueForContentPanel(this.value);
+        var val = !!this.contentPanel && !this.isEditingSurveyElement ?
+            this.contentPanel.getValue() : this.getValueForContentPanel(this.value);
         if (!val)
             val = {};
         if (this.isValueEmpty(newValue) && !this.isEditingSurveyElement) {
@@ -46505,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();
     };
@@ -48345,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)
@@ -49413,11 +49838,12 @@ var QuestionImagePickerModel = /** @class */ (function (_super) {
         /**
          * Specifies the height of containers for images or videos. Accepts positive numbers and CSS values.
          *
-         * Default value: undefined
+         * Default value: `auto`
+         *
+         * This property allows you to specify the exact image height. If you do not set it, the height will be calculated automatically based on the [`minImageHeight`](#minImageHeight) and [`maxImageHeight`](#maxImageHeight) values and available screen height.
          *
-         * Use the `imageFit` property to specify how to fit the images or videos into their containers.
+         * Use the [`imageFit`](#imageFit) property to specify how to fit the images or videos into their containers.
          * @see imageWidth
-         * @see imageFit
          */
         get: function () {
             return this.getPropertyValue("imageHeight");
@@ -49440,11 +49866,12 @@ var QuestionImagePickerModel = /** @class */ (function (_super) {
         /**
          * Specifies the width of containers for images or videos. Accepts positive numbers and CSS values.
          *
-         * Default value: 200
+         * Default value: `auto`
          *
-         * Use the `imageFit` property to specify how to fit the images or videos into their containers.
+         * This property allows you to specify the exact image width. If you do not set it, the width will be calculated automatically based on the [`minImageWidth`](#minImageWidth) and [`maxImageWidth`](#maxImageWidth) values and available screen width.
+         *
+         * Use the [`imageFit`](#imageFit) property to specify how to fit the images or videos into their containers.
          * @see imageHeight
-         * @see imageFit
          */
         get: function () {
             return this.getPropertyValue("imageWidth");
@@ -49833,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,
@@ -50159,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,
@@ -55324,7 +55757,9 @@ var QuestionMatrixDropdownRenderedTable = /** @class */ (function (_super) {
     };
     QuestionMatrixDropdownRenderedTable.prototype.getRowDragCell = function (rowIndex) {
         var cell = new QuestionMatrixDropdownRenderedCell();
-        cell.isDragHandlerCell = true;
+        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;
@@ -55914,7 +56349,7 @@ var QuestionMatrixDynamicModel = /** @class */ (function (_super) {
         _this.registerPropertyChangedHandlers(["hideColumnsIfEmpty", "allowAddRows"], function () {
             _this.updateShowTableAndAddRow();
         });
-        _this.registerPropertyChangedHandlers(["allowRowsDragAndDrop", "isReadOnly"], function () { _this.clearRowsAndResetRenderedTable(); });
+        _this.registerPropertyChangedHandlers(["allowRowsDragAndDrop", "isReadOnly", "lockedRowCount"], function () { _this.clearRowsAndResetRenderedTable(); });
         _this.dragOrClickHelper = new _utils_dragOrClickHelper__WEBPACK_IMPORTED_MODULE_9__["DragOrClickHelper"](_this.startDragMatrixRow);
         return _this;
     }
@@ -56145,6 +56580,16 @@ var QuestionMatrixDynamicModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(QuestionMatrixDynamicModel.prototype, "lockedRowCount", {
+        get: function () {
+            return this.getPropertyValue("lockedRowCount", 0);
+        },
+        set: function (val) {
+            this.setPropertyValue("lockedRowCount", val);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionMatrixDynamicModel.prototype, "iconDragElement", {
         get: function () {
             return this.cssClasses.iconDragElement;
@@ -56302,7 +56747,10 @@ var QuestionMatrixDynamicModel = /** @class */ (function (_super) {
     QuestionMatrixDynamicModel.prototype.canRemoveRow = function (row) {
         if (!this.survey)
             return true;
-        return this.survey.matrixAllowRemoveRow(this, row.index, row);
+        var index = row.rowIndex - 1;
+        if (this.lockedRowCount > 0 && index < this.lockedRowCount)
+            return false;
+        return this.survey.matrixAllowRemoveRow(this, index, row);
     };
     QuestionMatrixDynamicModel.prototype.addRowUI = function () {
         this.addRow(true);
@@ -57964,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)
@@ -59401,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.
@@ -59506,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) {
@@ -60821,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,
@@ -61306,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();
@@ -61318,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);
@@ -61607,14 +62068,18 @@ var QuestionRankingModel = /** @class */ (function (_super) {
         var toIndex;
         if (key === " " && !isMovedElementRanked) {
             toIndex = 0;
+            this.animationAllowed = false;
             dnd.selectToRank(this, fromIndex, toIndex);
+            this.animationAllowed = true;
             this.setValueAfterKeydown(toIndex, "to-container");
             return;
         }
         if (!isMovedElementRanked)
             return;
         if (key === " ") {
+            this.animationAllowed = false;
             dnd.unselectFromRank(this, fromIndex);
+            this.animationAllowed = true;
             toIndex = this.unRankingChoices.indexOf(movedElement); //'this.' leads to actual array after the 'unselectFromRank' method
             this.setValueAfterKeydown(toIndex, "from-container");
             return;
@@ -62568,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);
@@ -62604,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;
@@ -62615,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;
@@ -62625,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;
@@ -62642,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")
@@ -63385,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();
@@ -63446,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"]));
 
@@ -63502,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",
@@ -63707,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 () {
@@ -65004,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();
@@ -65413,9 +65910,14 @@ var SurveyQuestionBooleanRadio = /** @class */ (function (_super) {
     SurveyQuestionBooleanRadio.prototype.renderElement = function () {
         var cssClasses = this.question.cssClasses;
         return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { className: cssClasses.rootRadio },
-            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("fieldset", { role: "presentation", className: cssClasses.radioFieldset },
-                this.renderRadioItem(false, this.question.locLabelFalse),
-                this.renderRadioItem(true, this.question.locLabelTrue))));
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("fieldset", { role: "presentation", className: cssClasses.radioFieldset }, !this.question.swapOrder ?
+                (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null,
+                    this.renderRadioItem(false, this.question.locLabelFalse),
+                    this.renderRadioItem(true, this.question.locLabelTrue)))
+                :
+                    (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null,
+                        this.renderRadioItem(true, this.question.locLabelTrue),
+                        this.renderRadioItem(false, this.question.locLabelFalse))))));
     };
     return SurveyQuestionBooleanRadio;
 }(_boolean__WEBPACK_IMPORTED_MODULE_3__["SurveyQuestionBoolean"]));
@@ -66179,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),
@@ -66441,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);
@@ -73680,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 }));
             }
         }
@@ -74164,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) {
@@ -74918,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 })),
@@ -77632,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;
@@ -77856,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);
@@ -83360,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" &&
@@ -84658,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 &&
@@ -85265,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,
@@ -88358,7 +88887,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationGroupUtils", function() { return AnimationGroupUtils; });
 /* 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 import */ var _taskmanager__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./taskmanager */ "./src/utils/taskmanager.ts");
+/* 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 () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -88375,6 +88905,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
     };
 })();
 
+
 var AnimationUtils = /** @class */ (function () {
     function AnimationUtils() {
         this.cancelQueue = [];
@@ -88443,8 +88974,8 @@ var AnimationUtils = /** @class */ (function () {
                     element.classList.remove(options.cssClass);
                 }
                 else {
-                    requestAnimationFrame(function () {
-                        requestAnimationFrame(function () {
+                    _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);
                         });
                     });
@@ -88465,7 +88996,8 @@ var AnimationUtils = /** @class */ (function () {
         }
     };
     AnimationUtils.prototype.cancel = function () {
-        this.cancelQueue.forEach(function (func) { return func(); });
+        var cancelQueue = [].concat(this.cancelQueue);
+        cancelQueue.forEach(function (callback) { return callback(); });
         this.cancelQueue = [];
     };
     return AnimationUtils;
@@ -88483,12 +89015,12 @@ var AnimationPropertyUtils = /** @class */ (function (_super) {
             _this.beforeAnimationRun(element, options);
             _this.runEnterAnimation(element, options);
         };
-        requestAnimationFrame(function () {
+        _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
             if (getElement()) {
                 callback();
             }
             else {
-                requestAnimationFrame(callback);
+                _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(callback);
             }
         });
     };
@@ -88509,7 +89041,7 @@ var AnimationGroupUtils = /** @class */ (function (_super) {
         var _this = this;
         if (elements.length == 0)
             return;
-        requestAnimationFrame(function () {
+        _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(function () {
             var callback = function () {
                 elements.forEach(function (el) {
                     _this.beforeAnimationRun(getElement(el), getOptions(el));
@@ -88519,7 +89051,7 @@ var AnimationGroupUtils = /** @class */ (function (_super) {
                 });
             };
             if (!getElement(elements[0])) {
-                requestAnimationFrame(callback);
+                _global_variables_utils__WEBPACK_IMPORTED_MODULE_0__["DomWindowHelper"].requestAnimationFrame(callback);
             }
             else {
                 callback();
@@ -88550,7 +89082,7 @@ var AnimationProperty = /** @class */ (function () {
         this.animationOptions = animationOptions;
         this.update = update;
         this.getCurrentValue = getCurrentValue;
-        this._debouncedSync = Object(_taskmanager__WEBPACK_IMPORTED_MODULE_0__["debounce"])(function (newValue) {
+        this._debouncedSync = Object(_taskmanager__WEBPACK_IMPORTED_MODULE_1__["debounce"])(function (newValue) {
             _this.animation.cancel();
             _this._sync(newValue);
         });