devexpress-reporting 23.1.2-build-2379-1247 → 23.2.0-build-000-1111

package/dist/html/templates.html

@@ -13,7 +13,7 @@
 <script type="text/html" id="dxrd-borders">
     <div class="dxrd-bordereditor" data-bind="dxBorderEditor: { value: value, disabled: disabled }"></div>
 </script><script type="text/html" id="dxrd-colorpicker">
-    <div data-bind="dxColorBox: { value: displayValue, placeholder: $root.getLocalization('(Not set)', 'ReportStringId.UD_PropertyGrid_NotSetText'), editAlphaChannel: true, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element), position: { at: 'left bottom', collision: 'flipfit flipfit', my: 'left top', boundary: $root.getPopupContainer($element), of: $element } }, inputAttr: { 'aria-label': displayName } }"></div>
+    <div data-bind="dxColorBox: { value: displayValue, placeholder: $root.getLocalization('(Not set)', 'ReportStringId.UD_PropertyGrid_NotSetText'), editAlphaChannel: true, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element), position: { at: 'left bottom', collision: 'flipfit flipfit', my: 'left top', boundary: $root.getPopupContainer($element), of: $element } }, inputAttr: { 'aria-label': displayName, id: editorInputId } }"></div>
 </script><script type="text/html" id="dxrd-expressionstring">
     <!-- ko if: $data.value() -->
     <div data-bind="dxExpressionEditor: getOptions({ options: value, fieldListProvider: $root.dataBindingsProvider, displayNameProvider: $root.displayNameProvider && $root.displayNameProvider() })"></div>
@@ -22,7 +22,7 @@
 <script type="text/html" id="dxrd-field">
     <!-- ko displayNameExtender: { path: path, dataMember: value } -->
     <!-- ko if: visible -->
-    <div data-bind="dxFieldListPicker: { path: path, acceptCustomValue: true, value: value, displayValue: $displayName, itemsProvider: $root.dataBindingsProvider, treeListController: treeListController, disabled: disabled }"></div>
+    <div data-bind="dxFieldListPicker: { path: path, acceptCustomValue: true, value: value, displayValue: $displayName, itemsProvider: $root.dataBindingsProvider, treeListController: treeListController, disabled: disabled, inputAttr: {id: editorInputId} }"></div>
     <!-- /ko -->
     <!-- /ko -->
 </script><script type="text/html" id="dxrd-filterstring">
@@ -40,7 +40,7 @@
     <div data-bind="dxFormatEditor: { value: value, disabled: disabled, actions: $data.actions, customPatterns: $data.customPatterns }"></div>
 </script>
 <script type="text/html" id="dxrd-guid">
-    <div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled, inputAttr: { 'aria-label': displayName } }), dxValidator: { validationRules: (validationRules || []) }"></div>
+    <div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled, inputAttr: { 'aria-label': displayName, id: editorInputId } }), dxValidator: { validationRules: (validationRules || []) }"></div>
 </script>
 <script type="text/html" id="dxrd-emptyHeader">
 </script>
@@ -395,7 +395,7 @@
             <!-- /ko -->
         </div>
 
-        <div class="dxrd-right-panel dxd-property-grid-group-header-back-color dxd-back-primary2" data-bind="styleunit: { width: $data.width }, css: $data.cssClasses(), resizable: $data.getResizableOptions($element, 50, 340)">
+        <div class="dxrd-right-panel dxd-property-grid-group-header-back-color dxd-back-primary2" data-bind="styleunit: { width: $data.width }, css: $data.cssClasses(), resizable: $data.getResizableOptions($element, 50, 396)">
             <!-- ko foreach: $data.tabs -->
             <!-- ko lazy: { template: $data.template } -->
             <!-- /ko -->
@@ -422,7 +422,7 @@
     <!-- /ko -->
     <!-- ko if: !$data.templateName -->
     <div class="dxrd-toolbar-item" data-bind="visible: visible, class: 'dxrd-toolbar-item-' + $index(), css: {'dxrd-toolbar-item-with-separator dxd-border-primary': $data.hasSeparator } ">
-        <div role="button" class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" data-bind="attr: { 'aria-label': $data.displayText && $data.displayText() || text, 'aria-hidden': ko.unwrap($data.visible) ? 'false' : 'true', 'aria-disabled': ko.unwrap($data.disabled) ? 'true' : 'false', 'aria-checked': $data.selected ? ($data.selected() ? 'true' : 'false') : null }" >
+        <div role="button" class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" data-bind="attr: { 'aria-label': $data.displayText && $data.displayText() || text, 'aria-disabled': ko.unwrap($data.disabled) ? 'true' : 'false', 'aria-pressed': $data.selected ? ($data.selected() ? 'true' : 'false') : null }" >
             <div data-bind="template: { name: ko.unwrap($data.imageTemplateName), if: !!ko.unwrap($data.imageTemplateName)}, attr: { class: 'dxrd-toolbar-item-image dxd-state-normal dxd-icon-highlighted ' + (ko.unwrap($data.imageClassName) || ''), title: $data.displayText && $data.displayText() || text }, }, dxclick: function() { if((typeof $data.disabled === 'function') && !disabled() || !disabled) { clickAction($root.model && $root.model()); } }, css: {'dxrd-disabled-button': disabled, 'dxd-button-back-color dxd-back-highlighted dxd-state-active': $data.selected }"> </div>
             <div class="dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary" data-bind="visible: $data.hasSeparator"></div>
         </div>
@@ -485,7 +485,11 @@
         <div data-bind="dxdAccordion: { collapsed: collapsed, alwaysShow: alwaysShow }">
             <div class="dx-collectioneditor-header dx-accordion-header">
                 <div class="dx-editor-header">
-                    <div role="tab" class="dx-field dx-accessibility-focus-border-accented dxrd-accessibility-accordion-trigger" data-bind=", attr: {'aria-expanded': !collapsed() ? 'true' : 'false' }">
+                    <div role="treeitem" class="dx-field dx-accessibility-focus-border-accented dxrd-accessibility-accordion-trigger" data-bind="attr: {
+                        'aria-expanded': alwaysShow() || !collapsed() ? 'true' : 'false',
+                        'aria-owns': contentId,
+                        'id': headerId,
+                    }">
                         <!-- ko if: showButtons-->
                         <div class="dx-collectioneditor-actions-wrapper">
                             <!-- ko if: isVisibleButton('up') -->
@@ -512,7 +516,11 @@
                     </div>
                 </div>
             </div>
-            <div role="tabpanel" class="dx-accordion-content" data-bind="attr:{'aria-hidden': collapsed() ? 'true' : 'false'}">
+            <div role="group" class="dx-accordion-content" data-bind="attr: {
+                'aria-hidden': !alwaysShow() && collapsed() ? 'true' : 'false',
+                'aria-labelledby': headerId,
+                'id': contentId
+            }">
                 <div data-bind="visible: !disabled(), dxScrollView: { showScrollbar: 'onHover', disabled: !showScroll, useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); } }">
                     <!-- ko if: values().length === 0 && showButtons -->
                     <div class="dx-collectioneditor-empty dxd-empty-area-placeholder-text-color dxd-text-info">
@@ -537,7 +545,7 @@
 </script>
 
 <script type="text/html" id="dx-boolean-select">
-    <div data-bind="dxLocalizedSelectBox: { dataSource: [ { val: true, text: $root.getLocalization('Yes', 'AnalyticsCoreStringId.ParametersPanel_True') }, { val: false, text: $root.getLocalization('No', 'AnalyticsCoreStringId.ParametersPanel_False') }], inputAttr: { 'aria-label': displayName }, valueExpr: 'val', displayExpr: 'text', value: value, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) } }, dxValidator: { validationRules: validationRules || [] }"></div>
+    <div data-bind="dxLocalizedSelectBox: { dataSource: [ { val: true, text: $root.getLocalization('Yes', 'AnalyticsCoreStringId.ParametersPanel_True') }, { val: false, text: $root.getLocalization('No', 'AnalyticsCoreStringId.ParametersPanel_False') }], inputAttr: { 'aria-label': displayName, id: editorInputId }, valueExpr: 'val', displayExpr: 'text', value: value, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) } }, dxValidator: { validationRules: validationRules || [] }"></div>
 </script><script type="text/html" id="dx-commonCollection">
     <div class="dx-editor" data-bind="visible: visible">
         <div data-bind="dxCollectionEditor: { values: value, displayName: displayName, level: level, info: info }">
@@ -555,27 +563,36 @@
     <div data-bind="dxLocalizedSelectBox: { dataSource: values, value: value, valueExpr: 'value', displayExpr: 'displayValue', displayCustomValue: true, disabled: disabled,
          dropDownOptions: { container: $root.getPopupContainer($element) }, 
          popupPosition: { boundary: $root.getPopupContainer($element) }, 
-         inputAttr: { 'aria-label': displayName }},
+         inputAttr: { 'aria-label': displayName, id: editorInputId }},
          dxValidator: getValidatorOptions($data.validatorOptions || { validationRules: $data.validationRules || [] })">
     </div>
 </script>
 
 <script type="text/html" id="dx-combobox-editable">
-    <div data-bind="dxSelectBox: getOptions({ items: values, value: value, valueExpr: 'value', displayExpr: 'displayValue', disabled: disabled, useItemTextAsTitle: true, placeholder: $root.dx._static.selectPlaceholder(), noDataText: $root.dx._static.noDataText(), encodeNoDataText: true, acceptCustomValue: true, onCustomItemCreating: function(arg) { return { value: arg.text, displayValue: arg.text }; }, dropDownOptions: { container: $root.getPopupContainer($element) } })"></div>
+    <div data-bind="dxLocalizedSelectBox: {
+         items: values, value: value, valueExpr: 'value', displayExpr: 'displayValue', disabled: disabled,
+         acceptCustomValue: true,
+         onCustomItemCreating: function(arg) { return { value: arg.text, displayValue: arg.text }; },
+         dropDownOptions: { container: $root.getPopupContainer($element) }, 
+         popupPosition: { boundary: $root.getPopupContainer($element) }, 
+         inputAttr: { 'aria-label': displayName, id: editorInputId },
+         useLocalizedTextAsValue: true
+        }">
+    </div>
 </script>
 
 <script type="text/html" id="dx-combobox-undo">
-    <div data-bind="dxLocalizedSelectBox: { dataSource: values, value: generateValue($root.undoEngine), valueExpr: 'value', displayExpr: 'displayValue', displayCustomValue: true, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) } }, dxValidator: getValidatorOptions($data.validatorOptions || { validationRules: validationRules || [] })">
+    <div data-bind="dxLocalizedSelectBox: { dataSource: values, value: generateValue($root.undoEngine), valueExpr: 'value', displayExpr: 'displayValue', displayCustomValue: true, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) }, inputAttr: { id: editorInputId } }, dxValidator: getValidatorOptions($data.validatorOptions || { validationRules: validationRules || [] })">
     </div>
 </script><script type="text/html" id="dx-property-editor">
     <div class="dx-editor" data-bind="visible: visible">
         <div class="dx-group" data-bind="dxdAccordion: { collapsed: collapsed }">
             <div class="dx-editor-header">
                 <div class="dx-field" data-bind="attr: { 
-                        role: isComplexEditor && 'tab',
-                        'id': isComplexEditor && getIdByDisplayName('dxrd-accordion-trigger'),
-                        'aria-controls': isComplexEditor && getIdByDisplayName('dxrd-accordion-pannel'),
-                        'aria-expanded': isComplexEditor && (!collapsed() ? 'true' : 'false') },
+                        role: 'treeitem',
+                        'id': isComplexEditor && headerId,
+                        'aria-owns': isComplexEditor && contentId,
+                        'aria-expanded': isComplexEditor && (alwaysShow() || !collapsed() ? 'true' : 'false') },
                     css: {'dxrd-accessibility-accordion-trigger dx-accessibility-focus-border-accented': isComplexEditor}">
                         <div class="dx-field-label dx-accordion-header dxd-text-primary" data-bind="styleunit: padding, css: { 'dx-accordion-empty': templateName === 'dx-emptyHeader' }">
                             <!-- ko if: isComplexEditor -->
@@ -591,10 +608,10 @@
                             <!-- /ko -->
                             <!-- ko if: !isComplexEditor -->
                             <!-- ko if: !!$data.textToSearch -->
-                            <div class="propertygrid-editor-displayName" data-bind="searchHighlighting: { text: displayName, textToSearch: textToSearch }, attr: { 'title': displayName }, css: { 'dx-field-label-required': isRequired }, style: { fontWeight: isPropertyModified() ? 'Bold' : ''}"></div>
+                            <label class="propertygrid-editor-displayName" data-bind="searchHighlighting: { text: displayName, textToSearch: textToSearch }, attr: { 'title': displayName, 'for': editorInputId }, css: { 'dx-field-label-required': isRequired }, style: { fontWeight: isPropertyModified() ? 'Bold' : ''}"></label>
                             <!-- /ko -->
                             <!-- ko ifnot: !!$data.textToSearch -->
-                            <div class="propertygrid-editor-displayName" data-bind="text: displayName, attr: { 'title': displayName }, css: { 'dx-property-required': isRequired }, style: { fontWeight: isPropertyModified() ? 'Bold' : ''}"></div>
+                            <label class="propertygrid-editor-displayName" data-bind="text: displayName, attr: { 'title': displayName, 'for': editorInputId }, css: { 'dx-property-required': isRequired }, style: { fontWeight: isPropertyModified() ? 'Bold' : ''}"></label>
                             <!-- /ko -->
                             <!-- /ko -->                            
                     </div>
@@ -608,7 +625,11 @@
                 </div>
             </div>
             <!-- ko if: isComplexEditor -->
-            <div class="dx-editor-content dx-accordion-content" role="tabpanel" data-bind="attr:{'aria-labelledby': getIdByDisplayName('dxrd-accordion-trigger'), 'id': getIdByDisplayName('dxrd-accordion-pannel'), 'aria-hidden': collapsed() ? 'true' : 'false' }">
+            <div class="dx-editor-content dx-accordion-content" role="group" data-bind="attr: {
+                'aria-labelledby': headerId,
+                'id': contentId,
+                'aria-hidden': !alwaysShow() && collapsed() ? 'true' : 'false'
+            }">
                 <!-- ko if: (!$data.editorCreated || editorCreated) -->
                 <!-- ko template: contentTemplateName -->
                 <!-- /ko -->
@@ -628,7 +649,7 @@
                 closeOnValueChange: true, 
                 type: 'datetime', 
                 disabled: disabled,
-                inputAttr: { 'aria-label': displayName },
+                inputAttr: { 'aria-label': displayName, id: editorInputId },
                 dropDownOptions: {
                     container: $root.getPopupContainer($element),
                     position: {
@@ -663,17 +684,17 @@
 </script><script type="text/html" id="dx-image">
     <div data-bind="dxFileImagePicker: { value: value, placeholderId: 'Image', accept: 'image/*', type: 'img', disabled: disabled }"></div>
 </script><script type="text/html" id="dx-numeric">
-    <div data-bind="dxNumberBox: getOptions({ value:value, showSpinButtons:true, disabled:disabled, inputAttr: { 'aria-label': displayName } }), dxValidator: { validationRules: validationRules || [] }"></div>
+    <div data-bind="dxNumberBox: getOptions({ value:value, showSpinButtons:true, disabled:disabled, inputAttr: { 'aria-label': displayName, id: editorInputId } }), dxValidator: { validationRules: validationRules || [] }"></div>
 </script>
 
 <script type="text/html" id="dx-number-editor">
-    <div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled, inputAttr: { 'aria-label': displayName } }), dxValidator: { validationRules: validationRules || [] }"></div>
+    <div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled, inputAttr: { 'aria-label': displayName, id: editorInputId } }), dxValidator: { validationRules: validationRules || [] }"></div>
 </script><script type="text/html" id="dx-text">
     <!-- ko if: $data.validationRules -->
-    <div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled, inputAttr: { 'aria-label': displayName }}), dxValidator: getValidatorOptions($data.validatorOptions || { validationRules: validationRules || [] })"></div>
+    <div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled, inputAttr: { 'aria-label': displayName, 'id': editorInputId }}), dxValidator: getValidatorOptions($data.validatorOptions || { validationRules: validationRules || [] })"></div>
     <!-- /ko -->
     <!-- ko if: !$data.validationRules -->
-    <div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled, inputAttr: { 'aria-label': displayName }})"></div>
+    <div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled, inputAttr: { 'aria-label': displayName, 'id': editorInputId }})"></div>
     <!-- /ko -->
 </script>
 
@@ -768,7 +789,7 @@
 
 <script type="text/html" id="dx-expressioneditor">
     <div>
-        <div class="no-margin-right" data-bind="dxEllipsisEditor: { value: displayValue, buttonAction: function() { popupVisible(true); }, disabled: disabled, isValid: modelValueValid, warningMessage: modelValueWarning }"></div>
+        <div class="no-margin-right" data-bind="dxEllipsisEditor: { value: displayValue, buttonAction: function() { popupVisible(true); }, disabled: disabled, isValid: modelValueValid, warningMessage: modelValueWarning, inputAttr: { id: editorInputId } }"></div>
         <!-- ko template: 'dx-expressioneditor-popup'-->
         <!--/ko-->
     </div>
@@ -799,7 +820,8 @@
             onShowing: onShowing,
             onHiding: onHiding,
             onShown: onShown,
-            resizeEnabled: true
+            resizeEnabled: true,
+            onResize: function() { $data.resizeAceEditor() }
         }">
         <!-- ko if: popupVisible -->
         <!-- ko template: "dx-expressioneditor-main" -->
@@ -973,7 +995,7 @@
     <!-- /ko -->
 </script><script type="text/html" id="dx-filtereditor">
     <div>
-        <div class="no-margin-right" data-bind="dxEllipsisEditor: { value: modelDisplayValue, isValid: modelValueIsValid, disabled: disabled, buttonAction: function() { popupVisible(true); } }"></div>
+        <div class="no-margin-right" data-bind="dxEllipsisEditor: { value: modelDisplayValue, isValid: modelValueIsValid, disabled: disabled, buttonAction: function() { popupVisible(true); }, inputAttr: { id: editorInputId } }"></div>
         <!-- ko template: 'dx-filtereditor-popup' -->
         <!-- /ko -->
     </div>
@@ -1230,6 +1252,7 @@
         showTitle: true,
         wrapperAttr: { class: 'dx-filtereditor dx-popup-general' },
         resizeEnabled: true,
+        onResize: function() { $data.resizeAceEditor() },
         width: 700,
         height: 500,
         maxHeight: '95%',
@@ -1305,6 +1328,7 @@
             placeholder: searchPlaceholder(), 
             value: ($data.value || $data.filterString),
             height: '100%',
+            width: '100%',
             stylingMode: 'underlined',
             valueChangeEvent: 'keyup'
         }">
@@ -1316,7 +1340,7 @@
     <!-- ko if: $data.isFiltered -->
     <div data-bind="template: { name: 'dx-filtereditor-search-panel', data: $data }"></div>
     <!-- /ko -->
-    <div class="dx-widget" data-bind="dxScrollView: { showScrollbar: 'onHover' }, style: {'height': $data.height }">
+    <div class="dx-widget" data-bind="dxScrollView: { showScrollbar: 'onHover' }, css: { 'dx-filtereditor-filtered': isFiltered }">
         <!-- ko foreach: data -->
         <!-- ko if: !$data.hidden -->
         <!-- ko ifnot: $parent.isFiltered -->
@@ -1339,7 +1363,7 @@
 
 <script type="text/html" id="dx-filtereditor-popup-treelist">
     <div class="dx-filtereditor-search" data-bind="treeListSearchPanel: { controllers: data().treeListController, template: 'dx-filtereditor-search-panel' } "></div>
-    <div class="dx-widget" data-bind="dxScrollView: { showScrollbar: 'onHover' }, style: {'height': $data.height} ">
+    <div class="dx-widget dx-filtereditor-filtered" data-bind="dxScrollView: { showScrollbar: 'onHover' }">
         <div class="dx-treelist-wrapper" data-bind="treelist: data"></div>
     </div>
 </script><script type="text/html" id="dx-format-string-list">
@@ -1799,7 +1823,7 @@
 </script><script type="text/html" id="dx-query-surface">
     <div class="dxrd-surface dxrd-display-inline-block"  data-bind="styleunit: { 'width': $root.surfaceSize }, click: function(_, e) { $root.selection.clickHandler(null, e); e.stopPropagation(); }, keyDownActions: $root.actionLists">
         <div class="dxrd-viewport dxrd-width-inherit dxrd-height-inherit" >
-            <div class="dxqb-mainwin" data-bind="dxScrollView: { direction: 'both', showScrollbar: 'onHover', scrollByContent: false, scrollByThumb: true, bounceEnabled: false, useNative: false, height: '100%' }">
+            <div class="dxqb-mainwin" data-bind="dxScrollView: { direction: 'both', showScrollbar: 'always', scrollByContent: false, scrollByThumb: true, bounceEnabled: false, useNative: true, height: '100%' }">
                 <div class="dxrd-height-100">
                     <div class="dxrd-ghost-containment dxrd-height-100" >
                         <div class="dxrd-ghost-container dxqb-ghost-container" data-bind="styleunit: { 'minWidth': pageWidth, 'minHeight': pageHeight }, trackCursor: { recalculateBounds: true, underCursor: underCursor }">
@@ -2924,7 +2948,7 @@
 
 
 <script type='text/html' id='dxrd-treelist-with-checkbox'>
-    <div data-bind="visible: visible">
+    <!-- ko if: visible -->
         <!-- ko if: hasContent -->
         <!-- ko template: "dx-treelist-accordion-item-with-checkbox" -->
         <!-- /ko -->
@@ -2933,7 +2957,7 @@
         <!-- ko template: "dx-treelist-header-item-with-checkbox" -->
         <!-- /ko -->
         <!-- /ko -->
-    </div>
+    <!-- /ko -->
 </script>
 
 <script type="text/html" id="dx-treelist-accordion-item-with-checkbox">
@@ -3308,22 +3332,26 @@
             <div class="dx-field">
                 <div class="dx-fieldset-column">
                     <div class="dx-fieldset-header" data-bind="text: $root.getLocalization('From','AnalyticsCoreStringId.Mobile_DateRange_From')"></div>
-                    <div data-bind="css: popupModel._dateButtonEditorClassName, dxButton: { text: startDate && popupModel.getStringDate(startDate) || $root.getLocalization('Start Date','AnalyticsCoreStringId.Mobile_DateRange_StartDate'), stylingMode: 'contained', onClick: popupModel.focusButton, focusStateEnabled: false, activeStateEnabled: false }"></div>
-                    <div data-bind="css: popupModel._dateEditorClassName">
-                        <!-- ko template: { name: 'dxrv-daterange-calendar', data: _createTemplateData(startDate, undefined) } -->
-                        <!-- /ko -->
-                    </div>                    
+                    <div class="dxrv-daterange-editor-button" data-bind="css: { 'dx-button-default': popupModel.startButton.focused }, dxButton: popupModel.startButton"></div>
                 </div>
                 <div class="dx-fieldset-column dx-fieldset-column-right">
                     <div class="dx-fieldset-header" data-bind="text: $root.getLocalization('Until','AnalyticsCoreStringId.Mobile_DateRange_Until')"></div>
                     <div class="dxd-back-secondary dx-fieldset-column-separator"></div>
-                    <div data-bind="css: popupModel._dateButtonEditorClassName, dxButton: { text: endDate && popupModel.getStringDate(endDate) || $root.getLocalization('End Date','AnalyticsCoreStringId.Mobile_DateRange_EndDate'), stylingMode: 'contained', type:'default', onClick: popupModel.focusButton, focusStateEnabled: false, activeStateEnabled: false }"></div>
-                    <div data-bind="css: popupModel._dateEditorClassName">
-                        <!-- ko template: { name: 'dxrv-daterange-calendar', data: _createTemplateData(endDate, startDate) } -->
-                        <!-- /ko -->
-                    </div>
+                    <div class="dxrv-daterange-editor-button" data-bind="css: { 'dx-button-default': popupModel.endButton.focused }, dxButton: popupModel.endButton"></div>
                 </div>
             </div>
+            <div class="dx-field">
+                <div class="dxrv-daterange-editor-item">
+                    <!-- ko if: popupModel.startButton.focused -->
+                    <!-- ko template: { name: 'dxrv-daterange-calendar', data: _createTemplateData(startDate, undefined) } -->
+                    <!-- /ko -->
+                    <!-- /ko -->
+                    <!-- ko if: popupModel.endButton.focused -->
+                    <!-- ko template: { name: 'dxrv-daterange-calendar', data: _createTemplateData(endDate, startDate) } -->
+                    <!-- /ko -->
+                    <!-- /ko -->
+                </div>        
+            </div>
         </div>
     </div>
 </script><script type="text/html" id="dxrd-preview-page-mobile">
@@ -3480,15 +3508,15 @@
         <div class="dxrp-editing-field-borders" data-bind="style: borderStyle()"></div>
         <div class="dxrp-editing-field-content" data-bind="dxclick: activateEditor">
             <!-- ko if: !active() || field.readOnly()  -->
+            <!-- ko if: htmlValue()  -->
             <div class="dxrp-editing-field-readonly-text" data-bind="style: textStyle(), css: {'dxrp-editing-field-text-wordwrap': !wordWrap}">
-                <!-- ko if: htmlValue()  -->
                 <div class="dxrp-editing-field-text-html dxrp-editing-field-text-html-complex" data-bind="style: breakOffsetStyle(), html: htmlValue()"></div>
-                <!--/ko-->
-                <!-- ko ifnot: htmlValue()  -->
-                <div class="dxrp-editing-field-text-html" data-bind="style: breakOffsetStyle(), text: field.editValue()"></div>
-                <!--/ko-->
             </div>
             <!--/ko-->
+            <!-- ko ifnot: htmlValue()  -->
+            <div class="dxrp-editing-field-readonly-text" data-bind="style: textStyle(), css: {'dxrp-editing-field-text-wordwrap': !wordWrap}, text: field.editValue()"></div>
+            <!--/ko-->
+            <!--/ko-->
             <!-- ko if: active() && !field.readOnly() -->
             <!-- ko template: { name: editorTemplate, data: data } -->
             <!--/ko-->
@@ -3572,7 +3600,7 @@
         container: $root.getPopupContainer($element), 
         position: { of: $root.getPopupContainer($element) }
     }">
-        <div class="dx-popup-content">
+        <div class="dxrd-print-dialog-content">
             <div data-bind="text: $root.getLocalization('The browser sent the document to the printer.', 'ASPxReportsStringId.WebDocumentViewer_Print_Popup_Caption')"></div>
             <p></p>
             <!-- ko if: $data.printingTextPrefix -->
@@ -3592,7 +3620,7 @@
     <!-- ko if: model-->
     <div class="dxrd-right-panel-body" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); }  }">
         <div class="dx-fieldset" data-bind="accessibilityKeyboardHelper: $data.keyboardHelper">
-            <div role="tablist" class="dxrd-right-panel-content dxrd-export-options-content" data-bind="dxPropertyGrid: { target: model }"></div>
+            <div class="dxrd-right-panel-content dxrd-export-options-content" data-bind="dxPropertyGrid: { target: model }"></div>
         </div>
     </div>
     <!-- /ko -->
@@ -3602,11 +3630,20 @@
 
 <script type="text/html" id="dxrd-preview-export-to">
     <div class="dxrd-preview-export-toolbar-item dxrd-toolbar-item" data-bind="visible: visible">
-        <div role="menu" class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" data-bind="attr: { 'aria-label': $root.getLocalization(text, $data.textId), 'aria-hidden': ko.unwrap($data.visible) ? 'false' : 'true', 'aria-disabled': $data.disabled() ? 'true' : 'false' }" >
+        <div class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented">
             <div class="dxrd-preview-export-to dxd-button-back-color dxd-state-normal dxd-icon-highlighted" 
                 data-bind="dxMenu: {
                     wrapperAttr: { class: 'dxrd-preview-export-to dxd-button-back-color dxd-state-normal dxd-icon-highlighted' },
-                    disabled: $data.disabled(), items: items, cssClass: 'dxrdp-export-to-menu', onItemClick: clickAction, onSubmenuShowing: $data.eventHandlers.onSubmenuShowing($root.getPopupContainer($element), $element), onSubmenuShown: $data.eventHandlers.onSubmenuShown, onSubmenuHiding: $data.eventHandlers.onSubmenuHiding, tabIndex: '-1' }, attr: { title: $root.getLocalization(text, $data.textId) }">
+                    disabled: $data.disabled(),
+                    items: items,
+                    cssClass: 'dxrdp-export-to-menu',
+                    onItemClick: clickAction,
+                    onSubmenuShowing: $data.eventHandlers.onSubmenuShowing($root.getPopupContainer($element), $element),
+                    onSubmenuShown: $data.eventHandlers.onSubmenuShown,
+                    onSubmenuHiding: $data.eventHandlers.onSubmenuHiding,
+                    onItemRendered: $data.eventHandlers.onItemRendered,
+                    tabIndex: '-1'
+                }">
                 <div class="dxrd-preview-export-menu-item" data-options="dxTemplate: { name: 'item' }" data-bind="attr: { title: $root.getLocalization(text, $data.textId) }">
                     <!--ko if: $data.format -->
                     <div class="dxrd-preview-export-item-text" data-bind="text: $root.getLocalization($data.text, $data.textId)"></div>
@@ -3680,10 +3717,10 @@
     <div class="dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen" data-bind="dxPopup: {
             width: contentData.containerStyle().width,
             height: contentData.containerStyle().height,
-            position: { boundary: getContainer(), of: getPositionTarget($element), collision: 'flipfit flipfit' },
-            container: getContainer(),
+            position: { boundary: $root.getPopupContainer($element), of: getPositionTarget($element), collision: 'flipfit flipfit' },
+            container: $root.getPopupContainer($element),
             showTitle: false,
-            target: getContainer(),
+            target: $root.getPopupContainer($element),
             deferRendering: false,
             hideOnOutsideClick: true,
             showCloseButton: false,
@@ -3704,7 +3741,7 @@
     </div>
 </script><script type="text/html" id="dxrd-zoom-autofit-select-template">
         <div class="dxrd-toolbar-item-zoom" data-bind="visible: visible">
-            <div role="combobox" class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" data-bind="attr: { 'aria-label': $root.getLocalization('Zoom', 'ASPxReportsStringId.WebDocumentViewer_AriaLabelZoomCombobox'), 'aria-hidden': ko.unwrap($data.visible) ? 'false' : 'true', 'aria-disabled': $data.disabled() ? 'true' : 'false' }" >
+            <div class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" >
                 <div class="dxrd-toolbar-item-zoom-editor" data-bind="dxSelectBox: {
                     items: zoomItems, value: $data.zoom, displayExpr: displayExpr, displayCustomValue: true,
                     acceptCustomValue: true, onCustomItemCreating: onCustomItemCreating, useItemTextAsTitle: true,
@@ -3736,18 +3773,33 @@
         <!-- ko with: model -->
         <div class="dxrd-preview-search-tab-header">
             <span class="dxrd-preview-search-tab-header-text dxrd-right-panel-header dxd-text-primary" data-bind="text: $root.getLocalization('Search', 'ASPxReportsStringId.SearchDialog_Header')"></span>
-            <div class="dxrd-preview-search-editor" data-bind="dxSearchEditor: { searchModel: $data, inputAttr: { 'type': 'search', 'title': $root.getLocalization('Search', 'ASPxReportsStringId.SearchDialog_Header') }}"></div>
-            <div class="dxrd-preview-search-checkbox" data-bind="dxCheckBox: { value: matchCase, text: $root.getLocalization('Match case', 'ASPxReportsStringId.SearchDialog_Case')}"></div>
-            <div class="dxrd-preview-search-checkbox" data-bind="dxCheckBox: { value: matchWholeWord, text: $root.getLocalization('Match whole word only', 'ASPxReportsStringId.SearchDialog_WholeWord')}"></div>
-        </div>
-                
-        <div class="dxrd-preview-search-result-header dxd-border-primary">
-            <div class="dx-accessibility-focus-border-accented dxrd-preview-search-result-header-text dxd-text-primary" data-bind="text: $root.getLocalization('Search result', 'ASPxReportsStringId.WebDocumentViewer_SearchResultText')"></div>
-        </div>
-        <!-- ko if: searchText().length -->
-        <div class="dx-accessibility-container-background dxd-back-accented"></div>
-        <div class="dxrdp-search-loading" data-bind="dxLoadIndicator: { visible: $data.loading }"></div>
-        <div class="dxrd-preview-search-result dxd-border-accented" data-bind="dxList: { dataSource: searchResultDataSource, pageLoadMode: 'scrollBottom', focusStateEnabled:false, hoverStateEnabled:false, onItemRendered: onItemRendered, noDataText:  loading() ? '' : noResultText(), encodeNoDataText: true, visible: !loading() }">
+            <div class="dxrd-preview-search-tab-editor-button-container">
+                <div class="dxrd-preview-search-editor" data-bind="dxSearchEditor: { searchModel: $data, inputAttr: { 'type': 'search', 'title': $root.getLocalization('Search', 'ASPxReportsStringId.SearchDialog_Header') }}"></div>
+                <div data-bind="dxButton: { disabled: $data.stopSearchDisabled(), text: $data.loading() ? $root.getLocalization('Stop', 'ASPxReportsStringId.SearchDialog_StopButton'): $root.getLocalization('Search', 'ASPxReportsStringId.SearchDialog_SearchButton'), onClick: $data.searchButtonClick  }" class="dxrd-preview-search-button"></div>                
+            </div>
+            <div class="dxrd-preview-search-tab-header-text">
+                <div class="dxrd-preview-search-checkbox" data-bind="dxCheckBox: { value: matchCase, text: $root.getLocalization('Match case', 'ASPxReportsStringId.SearchDialog_Case')}"></div>
+                <div class="dxrd-preview-search-checkbox dxrd-preview-search-checkbox-second" data-bind="dxCheckBox: { value: matchWholeWord, text: $root.getLocalization('Match whole word only', 'ASPxReportsStringId.SearchDialog_WholeWord')}"></div>           
+            </div>
+        </div>
+        <!-- ko if: (searchResultCount() > 0 || loading()) -->
+        <div  class="dxrd-preview-search-result-header dxd-border-primary dxd-text-primary">            
+            <div class="dxrd-preview-search-tab-header dxrd-preview-search-indicator-group">
+                <div class = "dxrd-preview-search-results dxrd-preview-search-result-text" data-bind="attr: { id: $data.searchResultHeaderId, 'aria-busy': $data.loading() ? 'true' : 'false' }">
+                    <span class="dxrd-preview-search-result-text-bold" data-bind="text: $data.searchResultCount"></span>&nbsp
+                    <span data-bind="text: $root.getLocalization('results in', 'ASPxReportsStringId.SearchDialog_Results_In')"></span>&nbsp
+                    <span class="dxrd-preview-search-result-text-bold" data-bind="text: $data.searchResultPageCount"></span>&nbsp
+                    <span data-bind="text: $root.getLocalization('pages', 'ASPxReportsStringId.SearchDialog_Results_Pages')"></span>
+                </div>
+                <div class="dxrd-preview-search-results-navigation">
+                    <div class="dxrdp-search-loading" data-bind="dxLoadIndicator: { visible: $data.loading }"></div>
+                    <div data-bind="dxButtonWithTemplate: { icon: 'dxrd-svg-operations-arrowup', onClick: $data.findUp  }" class="dxrd-preview-search-results-navigation-button dx-searcheditor-button dx-widget dx-dropdowneditor-button dxd-icon-highlighted dx-shape-standard"></div>
+                    <div data-bind="dxButtonWithTemplate: { icon: 'dxrd-svg-operations-arrowdown', onClick: $data.findDown  }" class="dxrd-preview-search-results-navigation-button dx-searcheditor-button dx-widget dx-dropdowneditor-button dxd-icon-highlighted dx-shape-standard"></div>                
+                </div>
+            </div> 
+        </div>  
+        <div class="dx-accessibility-container-background dxd-back-accented"></div> 
+        <div class="dxrd-preview-search-result dxd-border-accented" data-bind="dxList: { dataSource: searchResultDataSource, pageLoadMode: 'scrollBottom', focusStateEnabled:false, hoverStateEnabled:false, onItemRendered: onItemRendered, noDataText: '', encodeNoDataText: true,  height: '80%' }, attr: { 'aria-labelledby': $data.searchResultHeaderId }">
             <div class="dxrd-preview-search-result-item dxd-list-item-back-color dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented"
              data-bind="dxAction: { model: $data, action: $parent.itemClickAction }, attr: {'aria-label': $data.data.text + ', ' + $root.dx._static.formatSearchResult($data.data) + ', ' + ($parent.searchResult().indexOf($data.data) + 1) + ' of ' + $parent.searchResult().length }" 
              data-options="dxTemplate : { name: 'item' }"
@@ -3756,6 +3808,14 @@
                 <div class="dxrd-preview-search-tab-item-text propertygrid-editor-displayName dxd-text-primary" data-bind="text: $data.data.text"></div>
                 <div class="dxrd-preview-search-tab-item-info dxd-text-primary" data-bind="text: $root.dx._static.formatSearchResult($data.data)"></div>
             </div>  
+        </div>        
+        <!-- /ko -->
+        <!-- ko if: (searchCompleted() && searchResultCount() == 0) -->
+        <div  class="dxrd-preview-search-result-header dxd-border-primary dxd-text-primary">
+            <div class="dxrd-preview-search-tab-header dxrd-preview-search-indicator-group">
+                <div data-bind="text: noResultText()" class = "dxrd-preview-search-result-text">
+                </div>
+            </div>
         </div>
         <!-- /ko -->
         <!-- /ko -->
@@ -3784,7 +3844,7 @@
         <!-- /ko -->
         <!-- ko if: (model && !model.isEmpty()) -->
         <div class="dxrd-right-panel-body" id="propertiesPanel" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); } }, dxValidationGroup: {}, accessibilityKeyboardHelper: $data.keyboardHelper">
-            <div role="tablist" class="dx-fieldset dxrd-right-panel-content">
+            <div role="tree" class="dx-fieldset dxrd-right-panel-content">
                 <!-- ko template: { name: 'dx-propertieseditor', data: $data.propertyGrid } -->
                 <!-- /ko -->
             </div>
@@ -3800,15 +3860,16 @@
 
 <script type="text/html" id="dxrd-preview-pager">
     <div class="dxrd-preview-pager dxrd-toolbar-item" data-bind="visible: visible">
-        <div role="combobox" class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" data-bind="attr: { 'aria-label': $root.getLocalization('Pager', 'ASPxReportsStringId.WebDocumentViewer_AriaLabelPagerCombobox') , 'aria-hidden': ko.unwrap($data.visible) ? 'false' : 'true', 'aria-disabled': $data.disabled() ? 'true' : 'false' }" >
+        <div class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" >
             <div class="dxrd-preview-pager-selectbox" data-bind="dxSelectBox: {
                 dataSource: pageItems, value: selectedItem, opened: opened, displayExpr: displayExpr, useItemTextAsTitle: true,
                 onFocusOut: focusOut, onKeyUp: keyUp, itemTemplate: itemTemplate, searchMode: searchMode, searchEnabled: searchEnabled,
                 searchTimeout: searchTimeout, disabled: disabled,
                 dropDownOptions: {
                     container: $root.getPopupContainer($element),
-                    wrapperAttr: { class: 'dx-page-selectbox-popup-wrapper' },
-                }, tabIndex: '-1', inputAttr: { 'aria-label': $root.getLocalization('Pager', 'ASPxReportsStringId.WebDocumentViewer_AriaLabelPagerCombobox') } }">
+                    wrapperAttr: { class: 'dx-page-selectbox-popup-wrapper', 'aria-label': $root.getLocalization('Pager', 'ASPxReportsStringId.WebDocumentViewer_AriaLabelPagerCombobox')  },
+                },
+                tabIndex: '-1', inputAttr: { 'aria-label': $root.getLocalization('Pager', 'ASPxReportsStringId.WebDocumentViewer_AriaLabelPagerCombobox') } }">
             </div>
         </div>
         <div class="dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary" data-bind="visible: $data.hasSeparator"></div>
@@ -3845,10 +3906,10 @@
         <!-- /ko -->
         <div class="dxrd-preview-surface" data-bind="accessibilityKeyboardHelper: $data.previewBrickKeyboardHelper">
             <!-- ko if: !showMultipagePreview() -->
-            <div class="dxrd-report-preview-holder">
+            <div class="dxrd-report-preview-holder" role="list">
                 <!-- ko with: currentPage-->
                 <!-- ko if: pageLoading() || (!pageLoading() && displayImageSrc()) -->
-                <div role="tab" class="dxrd-report-preview dx-accessibility-page-item dx-accessibility-border-accented" data-bind="autoFit: { autoFitBy: $parent.autoFitBy, zoom: zoom, width: originalWidth, height: originalHeight, rightPanelWidth: $root.tabPanel.width, previewSize: $parent.previewSize, brickLoading: brickLoading }, styleunit: { width: width, height: height }">
+                <div role="listitem" class="dxrd-report-preview dx-accessibility-page-item dx-accessibility-border-accented" data-bind="autoFit: { autoFitBy: $parent.autoFitBy, zoom: zoom, width: originalWidth, height: originalHeight, rightPanelWidth: $root.tabPanel.width, previewSize: $parent.previewSize, brickLoading: brickLoading }, styleunit: { width: width, height: height }">
                     <!-- ko template: { name: 'dxrd-preview-page', afterRender: function() { $parent.delayedInit() } }-->
                     <!-- /ko -->
                 </div>
@@ -3857,10 +3918,10 @@
             </div>
             <!-- /ko -->
             <!-- ko if: showMultipagePreview() && !!currentPage() -->
-            <div class="dxrd-report-preview-holder" data-bind="lazyImages: { enabled: showMultipagePreview, updateCallback: onSizeChanged }">
+            <div class="dxrd-report-preview-holder" role="list" data-bind="lazyImages: { enabled: showMultipagePreview, updateCallback: onSizeChanged }">
                 <!-- ko foreach: {data: pages, afterRender: function() { $parent.model.delayedInit() } }  -->
                 <!-- ko lazy: { if: pageLoading() || (!pageLoading() && displayImageSrc()) } -->
-                <div role="tab" class="dxrd-report-preview dxrd-report-preview-multipage dx-accessibility-page-item dx-accessibility-border-accented" data-bind="styleunit: { 'width': width(), 'height': height() }, toView: { active: active }, css : { 'dxrd-report-preview-active': active }">
+                <div role="listitem" class="dxrd-report-preview dxrd-report-preview-multipage dx-accessibility-page-item dx-accessibility-border-accented" data-bind="styleunit: { 'width': width(), 'height': height() }, toView: { active: active }, css : { 'dxrd-report-preview-active': active }">
                     <!-- ko template: 'dxrd-preview-page'-->
                     <!-- /ko -->
                 </div>
@@ -3881,7 +3942,7 @@
     <div data-bind="dxViewerExport: $data"></div>
 </script><script type="text/html" id="dxrv-daterange-editor">
     <div class="dxrv-daterange-editor">
-        <div data-bind="cacheElement: { action: function(element) { $data._$element = element; } }, dxEllipsisEditor: { value: _displayText, readOnly:true, inputAttr: { 'aria-label': $parent.displayName }, openOnFieldClick: true, buttonAction: function() { $data._showPopup(); } }"></div>
+        <div data-bind="cacheElement: { action: function(element) { $data._$element = element; } }, dxEllipsisEditor: { value: _displayText, readOnly:true, inputAttr: { 'aria-label': $parent.displayName, id: _editorInputId }, openOnFieldClick: true, buttonAction: function() { $data._showPopup(); } }"></div>
         <!-- ko template: { name: popupTemplate, data: popupModel } -->
         <!-- /ko -->
     </div>
@@ -3904,7 +3965,7 @@
          }">
         <div data-bind="dxScrollView: { showScrollbar: 'always', direction: 'horizontal', useNative: false, onInitialized: function(e) { e.component.option('useKeyboard', false); } }">
             <div class="dxrv-daterange-editor-popup-container" data-bind="accessibilityKeyboardHelper: $data.dialogKeyboardHelper">
-                <div role="listbox" class="dxrv-daterange-editor-list dxrv-daterange-editor-item dxd-border-primary dx-accessibility-daterange-item" data-bind="accessibilityKeyboardHelper: $data.dialogKeyboardHelper.predefinedDateRangesKeyboardHelper, dxScrollView: { showScrollbar: 'onHover', scrollByContent: false, bounceEnabled: false, useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); } }">
+                <div role="listbox" class="dxrv-daterange-editor-list dxrv-daterange-editor-item dxd-border-primary dx-accessibility-daterange-item" data-bind="attr: { 'aria-label': $root.getLocalization('Predefined periods', 'ASPxReportsStringId.WebDocumentViewer_AriaLabelPredefinedPeriods') }, accessibilityKeyboardHelper: $data.dialogKeyboardHelper.predefinedDateRangesKeyboardHelper, dxScrollView: { showScrollbar: 'onHover', scrollByContent: false, bounceEnabled: false, useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); } }">
                     <div class="dx-accessibility-container-background dxd-back-accented"></div>
                     <!-- ko foreach: items -->
                     <div role="option" class="dxrv-daterange-editor-list-item dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented" data-bind="attr: { 'aria-selected': $parent._isSelected($data) }, css: { 'dxd-state-selected': $parent._isSelected($data) }, dxAction: { model: $data, action: function() { $parent.applyDate($data.range(), true) }}">
@@ -3930,7 +3991,7 @@
 </script>
 
 <script type="text/html" id="dxrv-daterange-calendar">
-    <div tabIndex="0" class="dx-accessibility-calendar-item dx-accessibility-daterange-item" data-bind="dxCalendar: { value: value, cellTemplate: 'select_cell', height: '100%', min: min }">
+    <div tabIndex="0" class="dx-accessibility-calendar-item dx-accessibility-daterange-item" data-bind="dxCalendar: { value: value, cellTemplate: 'select_cell', height: height, min: min }">
         <div class="dxrv-daterange-cell" data-options="dxTemplate:{ name:'select_cell' }">
             <div class="dxrv-daterange-cell-text" data-bind="text: text"></div>
             <div data-bind="css: { 'dxd-back-accented': $parent.inRange(date) }"></div>
@@ -3974,7 +4035,7 @@
     <div data-bind="dxTagBox: $parent.getOptions({ dataSource: $data.dataSource, searchEnabled: true, useItemTextAsTitle: true, searchExpr: $data.searchExpr || ['displayValue'], value: $data.value,
          displayExpr: $data.displayExpr || 'displayValue', valueExpr: $data.valueExpr || 'value', multiline: false, showSelectionControls: true,
          showDropDownButton: !!$data.showDropDownButton, selectAllMode: 'allPages', selectedItems: $data.selectedItems,
-         inputAttr: { 'aria-label': $parent.displayName },
+         inputAttr: { 'aria-label': $parent.displayName, id: $parent.editorInputId },
          disabled: $parent.disabled,
          selectAllText: $root.getLocalization('Select All', 'AnalyticsCoreStringId.SelectAll'),
          placeholder: $root.dx._static.selectPlaceholder(), maxDisplayedTags: $data.maxDisplayedTags, showMultiTagOnly: true, dropDownOptions: { container: $root.getPopupContainer($element), position: { boundary: $root.getPopupContainer($element), collision: 'flipfit flipfit', of: $element, at: 'bottom', my: 'top' } } }), 
@@ -3994,14 +4055,14 @@
 </script>
 <script type="text/html" id="dxrd-parameters-property-editor">
     <div class="dx-editor" data-bind="visible: visible">
-        <div class="dx-group" data-bind="dxdAccordion: { collapsed: $data.collapsed, alwaysShow: $data.hideCollapsingImage }">
+        <div class="dx-group" data-bind="dxdAccordion: { collapsed: $data.collapsed, alwaysShow: $data.alwaysShow }">
             <div class="dx-editor-header" data-bind="css: { 'dxrd-empty-header': $data.hideEditorHeader }">
                 <!-- ko ifnot: $data.hideEditorHeader -->
                 <div class="dx-field" data-bind="attr: { 
-                        role: isComplexEditor && 'tab',
-                        'id': isComplexEditor && getIdByDisplayName('dxrd-accordion-trigger'),
-                        'aria-controls': isComplexEditor && getIdByDisplayName('dxrd-accordion-pannel'),
-                        'aria-expanded': isComplexEditor && (!collapsed() ? 'true' : 'false') },
+                        role: 'treeitem',
+                        'id': isComplexEditor && headerId,
+                        'aria-owns': isComplexEditor && contentId,
+                        'aria-expanded': isComplexEditor && (alwaysShow() || !collapsed() ? 'true' : 'false') },
                     css: {
                         'dxrd-accessibility-accordion-trigger dx-accessibility-focus-border-accented': isComplexEditor,
                         'dxrd-vertical-label': $data.editorOptions && $data.editorOptions.hasVerticalLabel
@@ -4009,11 +4070,11 @@
                         <div class="dx-field-label dxrd-group-label dxd-back-secondary dx-accordion-header dxd-text-primary" data-bind="styleunit: padding, css: {
                             'dx-accordion-empty': templateName === 'dx-emptyHeader',
                             'dxd-back-secondary': $data.isGroupLabel,
-                            'dx-accordion-hide-collapsing-image': $data.hideCollapsingImage
+                            'dx-accordion-hide-collapsing-image': $data.alwaysShow()
                         }">
                             <!-- ko if: isComplexEditor -->
                             <div data-bind="enable: templateName === 'dx-emptyHeader'">
-                                <!-- ko ifnot: $data.hideCollapsingImage -->
+                                <!-- ko ifnot: $data.alwaysShow() -->
                                 <div class="propertygrid-editor-collapsed dx-collapsing-image" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed() }"></div>
                                 <!-- /ko -->
                                 <!-- ko if: !!$data.textToSearch -->
@@ -4026,10 +4087,10 @@
                             <!-- /ko -->
                             <!-- ko if: !isComplexEditor -->
                             <!-- ko if: !!$data.textToSearch -->
-                            <div class="propertygrid-editor-displayName" data-bind="searchHighlighting: { text: displayName, textToSearch: textToSearch }, attr: { 'title': displayName }, css: { 'dx-field-label-required': isRequired }, style: { fontWeight: isPropertyModified() ? 'Bold' : ''}"></div>
+                            <label class="propertygrid-editor-displayName" data-bind="searchHighlighting: { text: displayName, textToSearch: textToSearch }, attr: { 'title': displayName, 'for': editorInputId }, css: { 'dx-field-label-required': isRequired }, style: { fontWeight: isPropertyModified() ? 'Bold' : ''}"></label>
                             <!-- /ko -->
                             <!-- ko ifnot: !!$data.textToSearch -->
-                            <div class="propertygrid-editor-displayName" data-bind="text: displayName, attr: { 'title': displayName }, css: { 'dx-property-required': isRequired }, style: { fontWeight: isPropertyModified() ? 'Bold' : ''}"></div>
+                            <label class="propertygrid-editor-displayName" data-bind="text: displayName, attr: { 'title': displayName, for: editorInputId }, css: { 'dx-property-required': isRequired }, style: { fontWeight: isPropertyModified() ? 'Bold' : ''}"></label>
                             <!-- /ko -->
                             <!-- /ko -->                            
                     </div>
@@ -4044,7 +4105,11 @@
                 <!-- /ko -->
             </div>
             <!-- ko if: isComplexEditor -->
-            <div class="dx-editor-content dx-accordion-content" role="tabpanel" data-bind="attr:{'aria-labelledby': getIdByDisplayName('dxrd-accordion-trigger'), 'id': getIdByDisplayName('dxrd-accordion-pannel'), 'aria-hidden': collapsed() ? 'true' : 'false' }">
+            <div class="dx-editor-content dx-accordion-content" role="group" data-bind="attr: {
+                'aria-labelledby': headerId,
+                'id': contentId,
+                'aria-hidden': !alwaysShow() && collapsed() ? 'true' : 'false'
+            }">
                 <!-- ko if: (!$data.editorCreated || editorCreated) -->
                 <!-- ko template: contentTemplateName -->
                 <!-- /ko -->
@@ -4060,9 +4125,9 @@
         <div class="dx-picture-editing-active" data-bind="dxPopup: {
                 width: 48, height: 'auto',
                 wrapperAttr: { class: 'dx-picture-editing-active' },
-                position:{ my: 'left top', at: 'right top', boundary: '.dxrd-preview-surface', of: $data.$element, collision: 'fit fit', offset: '1 -1' },
-                container: shadingEnabled() ? '.dx-overlay-wrapper.dx-picture-edit-popup-content-fullscreen' : '.dx-designer',
-                target: '.dx-designer',
+                position:{ my: 'left top', at: 'right top', boundary: $root.getPopupContainer($element), of: $data.$element, collision: 'fit fit', offset: '1 -1' },
+                container: shadingEnabled() ? '.dx-overlay-wrapper.dx-picture-edit-popup-content-fullscreen' : $root.getPopupContainer($element),
+                target: $root.getPopupContainer($element),
                 showTitle: false,
                 onContentReady: function(e) {                    
                     e.component && e.component.registerKeyHandler('tab', function(_) {
@@ -4101,10 +4166,10 @@
             hideOnOutsideClick: $data.hideOnOutsideClick,
             onShown: $data.onShown,
             onContentReady: $data.onContentReady,
-            position: { my: 'left top', at: 'right top', boundary: '.dx-designer', of: getPositionTarget(), collision: 'flipfit fit', offset: '-10 0' },
-            container: getPositionTarget(),
+            position: { my: 'left top', at: 'right top', boundary: $root.getPopupContainer($element), of: getPositionTarget($element), collision: 'flipfit fit', offset: '-10 0' },
+            container: getPositionTarget($element),
             showTitle: false,
-            target: getPositionTarget(),
+            target: getPositionTarget($element),
             showCloseButton: false,
             shading: false,
             animation: {},
@@ -4179,9 +4244,31 @@
         <!-- /ko -->
     </div>
 </script><script type="text/html" id="dx-selectbox">
-    <div data-bind="dxSelectBox: getOptions({ dataSource: values, value: value, valueExpr: 'value', displayExpr: 'displayValue', displayCustomValue: true, disabled: disabled, useItemTextAsTitle: true, noDataText: $root.dx._static.noDataText(), encodeNoDataText: true, dropDownOptions: { container: $root.getPopupContainer($element) }, popupPosition: { boundary: $root.getPopupContainer($element) }, inputAttr: { 'aria-label': displayName } }), dxValidator: { validationRules: $data.validationRules || [] }"></div>
-</script>
-<script type="text/html" id="dx-chart-leftPanel">
+    <div data-bind="dxSelectBox: getOptions({ dataSource: values, value: value, valueExpr: 'value', displayExpr: 'displayValue', displayCustomValue: true, disabled: disabled, useItemTextAsTitle: true, noDataText: $root.dx._static.noDataText(), encodeNoDataText: true, dropDownOptions: { container: $root.getPopupContainer($element) }, popupPosition: { boundary: $root.getPopupContainer($element) }, inputAttr: { 'aria-label': displayName, id: editorInputId } }), dxValidator: { validationRules: $data.validationRules || [] }"></div>
+</script>
+<script type="text/html" id="dxrdv-signature">
+    <div data-bind="dxSelectBox: getOptions({ dataSource: getAvailableSignature($root), value: value, itemTemplate: 'signature', displayExpr: 'displayName', valueExpr: 'key', showClearButton: true, noDataText: $root.dx._static.noDataText(), encodeNoDataText: true, dropDownOptions: { minWidth: '300px', container: $root.getPopupContainer($element) }, popupPosition: { boundary: $root.getPopupContainer($element) }, inputAttr: { 'aria-label': displayName, id: editorInputId } }), dxValidator: { validationRules: $data.validationRules || [] }">
+        <div class="dxrdv-signature-editor-item" data-options="dxTemplate: { name: 'signature' }">
+            <div class="dxrdv-signature-editor-item-image">
+                <!-- ko if: image -->
+                <img data-bind="attr: { src: image }"/>
+                <!-- /ko -->
+                <!-- ko ifnot: image -->
+                <!-- ko template: 'dxrd-svg-preview-signature_img_placeholder' -->
+                <!-- /ko -->
+                <!-- /ko -->
+            </div>
+            <div class="dxrdv-signature-editor-item-info">
+                <!-- ko foreach: fields -->
+                <div class="dxrdv-signature-editor-item-info-field" data-bind="attr: { title: value }">
+                    <span class="dxrdv-signature-editor-item-info-field-label" data-bind="text: label"></span>
+                    <span data-bind="text: value"></span>
+                </div>
+                <!-- /ko -->
+            </div>
+        </div>
+    </div>
+</script><script type="text/html" id="dx-chart-leftPanel">
     <div class="dx-chart-left-panel dxd-border-primary dxd-properties-panel-group-header-back-color dxd-back-primary">
         <div class="dxrd-right-panel dxd-border-primary dxd-properties-panel-group-header-back-color" data-bind="css: tabPanel.cssClasses()">
             <div class="dxrd-right-panel-header dxd-text-primary">
@@ -5276,12 +5363,18 @@
     <div data-bind="style: borderCss" class="dxrd-width-100 dxrd-height-100 dxrd-position-absolute dxrd-box-sizing-border-box"></div>
 </div>
 </script>
-<script type='text/html' id='dxrd-shape-content'>
-<img data-bind="attr: { src: imageSrc }, styleunit: { 'height': contentHeightWithoutZoom, 'width': contentWidthWithoutZoom }" />
+<script type='text/html' id='dxrd-server-rendered-control-content'>
+<!-- ko if: $data.imageSrc -->
+<img data-bind="attr: { src: imageSrc }, styleunit: { 'height': contentHeightWithoutZoom, 'width': contentWidthWithoutZoom }" />
+<!-- /ko -->
+
 <!-- ko if: $data.isLoading -->
 <div class="dx-content-loading-panel">
     <div data-bind="dxLoadIndicator: { visible: isLoading() }"></div>
 </div>
+<!-- /ko -->
+<!-- ko if: $data.error -->
+<p class="dxrd-internal-error" data-bind="text: error"></p>
 <!-- /ko --></script>
 <script type='text/html' id='dxrd-shape'>
 <div class="dxrd-control dxd-selectable" data-bind="styleunit: position, css: adorntemplate">
@@ -5528,6 +5621,14 @@
     <span class="dxrd-control-content" data-bind="text: displayName, style: contentCss"></span>
 </div>
 </script>
+<script type='text/html' id='dxrd-unknown-control'>
+<div class="dxrd-control dxd-selectable" data-bind="styleunit: position, css: adorntemplate">
+    <div class="dxrd-control-content-main">
+        <div data-bind="zoom: _context.zoom, template: contenttemplate" class="dxrd-position-absolute">
+        </div>
+    </div>
+</div>
+</script>
 <script type='text/html' id='dxrd-calculatedfield-content'>
 <div data-bind="with: propertyGrid">
     <!-- ko foreach: getEditors() -->
@@ -5651,17 +5752,20 @@
 <script type="text/html" id="dxrd-localization-editor-item">
     <div class="dx-fieldset">
         <div class="dx-field">
+            <div class="dx-field-label dx-accordion-header dxd-text-primary">
+                <label class="propertygrid-editor-displayName" data-bind="searchHighlighting: { text: displayName, textToSearch: $parent.textToSearch }, attr: { 'title': displayName }"></label>  
+            </div>
             <div class="dx-field-value">
                 <!-- ko if: !ko.unwrap($data.multiline) -->
-                    <div class="dxrd-localization-panel-default" data-bind="dxTextBox: { value: defaultText, readOnly: $data.readOnly() || !$data.isDefaultLanguage() },
+                    <div class="dxrd-localization-panel-default" data-bind="dxTextBox: { value: defaultText, readOnly: !$data.isDefaultLanguage() },
                         css: { 'dxrd-localization-panel-textbox-full': $data.isDefaultLanguage() }"></div>
-                    <div class="dxrd-localization-panel-current" data-bind="dxTextBox: { value: localizedText, readOnly: $data.readOnly(), onFocusIn: function(e, s) { $parent.onItemGotFocus(e) },
+                    <div class="dxrd-localization-panel-current" data-bind="dxTextBox: { value: localizedText, onFocusIn: function(e, s) { $parent.onItemGotFocus(e) },
                         visible: !$data.isDefaultLanguage()}"></div>
                 <!-- /ko -->
                 <!-- ko if: ko.unwrap($data.multiline)-->
                     <div class="dxrd-multi-area-container">
                         <div class="dxrd-localization-panel-default" data-bind="dxTextArea: {
-                            value: defaultText, readOnly: $data.readOnly() || !$data.isDefaultLanguage(),
+                            value: defaultText, readOnly: !$data.isDefaultLanguage(),
                             autoResizeEnabled: true,
                             minHeight: '26px', 
                             maxHeight: '58px' },
@@ -5670,7 +5774,6 @@
                         <!-- ko if: !$data.isDefaultLanguage() -->
                             <div class="dxrd-localization-panel-current" data-bind="dxTextArea: {
                                 value: localizedText,
-                                readOnly: $data.readOnly(),
                                 onFocusIn: function(e, s) { $parent.onItemGotFocus(e) },
                                 autoResizeEnabled: true,
                                 minHeight: '26px',
@@ -5719,6 +5822,9 @@
                 <div class="dxrd-localization-panel-content-header">
                     <div class="dx-fieldset">
                         <div class="dx-field">
+                            <div class="dx-field-label">
+                                <div class="dxrd-localization-language dxrd-localization-panel-default dxd-text-secondary" data-bind="text: $data.propertiesHeaderText()"></div>        
+                            </div>
                             <div class="dx-field-value">
                                 <div class="dxrd-localization-language dxrd-localization-panel-default dxd-text-secondary" data-bind="text: $data.defaultLanguageText()"></div>
                                 <div class="dxrd-localization-language dxrd-localization-panel-current dxd-text-secondary" data-bind="text: $data.currentLanguageText(), visible: !$data.isDefaultLanguage()"></div>
@@ -6241,7 +6347,7 @@
 </script>
 
 <script type="text/html" id="dxrd-toolbar-two-way-switch-clickable">
-    <div role="button" class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" data-bind="attr: { 'aria-label': $data.displayText && $data.displayText() || $data.text, 'aria-hidden': ko.unwrap($data.visible) ? 'false' : 'true', 'aria-disabled': ko.unwrap($data.disabled) ? 'true' : 'false', 'aria-checked': $data.selected ? ($data.selected() ? 'true' : 'false') : null }" >
+    <div role="button" class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" data-bind="visible: $data.visible, attr: { 'aria-label': $data.displayText && $data.displayText() || $data.text, 'aria-disabled': ko.unwrap($data.disabled) ? 'true' : 'false', 'aria-pressed': $data.selected ? ($data.selected() ? 'true' : 'false') : null }" >
         <div data-bind="text: $data.displayText && $data.displayText() || $data.text, attr: { title: $data.displayText && $data.displayText() || $data.text, class: 'dxd-text-primary dxd-back-highlighted ' + (ko.unwrap($data.imageClassName) || '') }, dxclick: function() { if((typeof $data.disabled === 'function') && !$data.disabled() || !$data.disabled) { $data.clickAction($root.model && $root.model()); } }, css: {'dxrd-disabled-button': $data.disabled }"></div>
     </div>
 </script><script type="text/html" id="dxrd-expression-action">
@@ -6284,6 +6390,7 @@
             minHeight: '400px',
             minWidth: '600px',
             resizeEnabled: true,
+            onResize: function() { $data.resizeAceEditor() },
             container: getPopupContainer($element),
             position: { of: getPopupContainer($element)},
             onShowing: function(e) { onShowing(e); },
@@ -6585,7 +6692,7 @@
 </script>
 
 <script type="text/html" id="dxrd-name">
-    <div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled }), dxValidator: { validationRules: generateRules($root.controlsHelper.allControls) || [] }"></div>
+    <div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled, inputAttr: { id: editorInputId } }), dxValidator: { validationRules: generateRules($root.controlsHelper.allControls) || [] }"></div>
 </script>
 
 <script type="text/html" id="dxrd-reportexpression-ellipsis">
@@ -6594,7 +6701,9 @@
         buttonAction: function() { $parent.showPopup($root.editableObject && $root.editableObject()); },
         disabled: disabled,
         isValid: modelValueValid,
-        warningMessage: modelValueWarning }"></div>
+        warningMessage: modelValueWarning,
+        inputAttr: { id: editorInputId }
+     }"></div>
 </script>
 
 <script type="text/html" id="dxrd-reportexpression-complex">
@@ -6627,11 +6736,11 @@
 </script>
 
 <script type="text/html" id="dxrd-image-loadfile">
-    <div data-bind="dxImageSourceEditor: { value: value, accept: 'image/*', type: 'img', disabled: disabled }"></div>
+    <div data-bind="dxImageSourceEditor: { value: value, accept: 'image/*', type: 'img', disabled: disabled, inputAttr: { id: editorInputId}, showClearButton: true }"></div>
 </script>
 
 <script type="text/html" id="dxrd-pdfcontent-loadfile">
-    <div data-bind="dxFileImagePicker: { value: value, placeholderId: 'File', disabled: disabled, accept:'.pdf' }"></div>
+    <div data-bind="dxFileImagePicker: { value: value, placeholderId: 'File', disabled: disabled, accept:'.pdf', showClearButton: true }"></div>
 </script>
 
 <script type="text/html" id="dxrd-summaryeditor-header">
@@ -6655,7 +6764,7 @@
 </script>
 
 <script type="text/html" id="dxrd-datasource-combobox">
-    <div data-bind="dxSelectBox: { dataSource: $data.getValues(), searchEnabled: true, value: value, valueExpr: 'value', displayExpr: 'displayValue', disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element)  }, popupPosition: { boundary: $root.getPopupContainer($element) }, useItemTextAsTitle: true  }">
+    <div data-bind="dxSelectBox: { dataSource: $data.getValues(), searchEnabled: true, value: value, valueExpr: 'value', displayExpr: 'displayValue', disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element)  }, inputAttr: { id: editorInputId }, popupPosition: { boundary: $root.getPopupContainer($element) }, useItemTextAsTitle: true  }">
         <div data-options="dxTemplate: { name: 'item' }" data-bind="text: displayValue, style: { 'fontWeight': $root.isLocalized($data.value) ? 'bold' : 'normal' }, attr: { title: displayValue }">
         </div>
     </div>
@@ -6663,7 +6772,7 @@
 
 <script type="text/html" id="dxrd-localization-combobox">
     <div data-bind="dxSelectBox: { dataSource: $data.getValues(), searchEnabled: true, value: value, valueExpr: 'value', displayExpr: 'displayValue', disabled: disabled, 
-        dropDownOptions: { container: $root.getPopupContainer($element), width:  $root.calculateWithZoomFactor(357)  }, popupPosition: { boundary: $root.getPopupContainer($element) }, useItemTextAsTitle: true }">
+        dropDownOptions: { container: $root.getPopupContainer($element), width:  $root.calculateWithZoomFactor(357) }, inputAttr: { id: editorInputId }, popupPosition: { boundary: $root.getPopupContainer($element) }, useItemTextAsTitle: true }">
         <div class="dx-localization-combobox-content" data-options="dxTemplate: { name: 'item' }">
             <div class="dx-culture dx-culture-code dxd-text-info" data-bind="text: value === 'Default' ? '' : value, style: { 'fontWeight': $root.isLocalized($data.value) ? 'bold' : 'normal' }, attr: { title: value }"></div>
             <div class="dx-culture" data-bind="text: displayValue, style: { 'fontWeight': $root.isLocalized($data.value) ? 'bold' : 'normal' }, attr: { title: displayValue }"></div>