devexpress-reporting 23.2.6 → 24.1.2-beta

package/dist/html/templates.html

@@ -391,34 +391,34 @@
             <span data-bind="text: data"></span>
         </div>
     </div>
-</script><script type="text/html" id="dx-right-panel-lightweight">
-    <!-- ko with: tabPanel.getViewModel() -->
-    <div class="dxrd-right-panel dx-shadow dx-shadow-right dxd-border-secondary dxd-property-grid-group-header-back-color dxd-back-primary2" data-bind="styleunit: { width: contentElement.width }, css: class, resizable: getResizableOptions($element, 1, $root.calculateWithZoomFactor(325))">
-        <!-- ko foreach: tabs -->
-        <!-- ko lazy: { template: $data.template } -->
-        <!-- /ko -->
-        <!-- /ko -->
-    </div>
-    <!-- /ko -->
-</script>
-
-<script type="text/html" id="dxrd-right-panel-template-base">
-    <div class="dx-shadow dx-shadow-right dxd-border-secondary dxrd-tab-panel-wrapper" data-bind="styleunit: { width: width }, css: class, dxMutationObserver: keyboardHelper">
-        <div class="dxrd-right-tabs dxd-side-panel-tabs-back-color dxd-back-contrast" data-bind="css: tabsElement.class">
-            <!-- ko foreach: $data.tabs -->
-            <div role="button" class="dxrd-tab-item dx-accessibility-rightpanel-button dxd-side-panel-tab-back-color dxd-back-highlighted dx-accessibility-focus-border-accented" data-bind="dxAction: { action: function(s) { $data.click(); }}, css: css.class, attr: { title: text, 'aria-label': text, 'aria-expanded': active }, visible: visible">
-                <div class="dxrd-image-padding" data-bind="css: image.class, template: {name: image.templateName, if: !!ko.unwrap($data.image.templateName)}"> </div>
-            </div>
-            <!-- /ko -->
-        </div>
-
-        <div class="dxrd-right-panel dxd-property-grid-group-header-back-color dxd-back-primary2" data-bind="styleunit: { width: contentElement.width }, css: contentElement.class, resizable: getResizableOptions($element, 50, 396)">
-            <!-- ko foreach: $data.tabs -->
-            <!-- ko lazy: { template: $data.template } -->
-            <!-- /ko -->
-            <!-- /ko -->
-        </div>
-    </div>
+</script><script type="text/html" id="dx-right-panel-lightweight">
+    <!-- ko with: tabPanel.getViewModel() -->
+    <div class="dxrd-right-panel dx-shadow dx-shadow-right dxd-border-secondary dxd-property-grid-group-header-back-color dxd-back-primary2" data-bind="styleunit: { width: contentElement.width }, css: class, resizable: getResizableOptions($element, 1, $root.calculateWithZoomFactor(325))">
+        <!-- ko foreach: tabs -->
+        <!-- ko lazy: { template: $data.template } -->
+        <!-- /ko -->
+        <!-- /ko -->
+    </div>
+    <!-- /ko -->
+</script>
+
+<script type="text/html" id="dxrd-right-panel-template-base">
+    <div class="dx-shadow dx-shadow-right dxd-border-secondary dxrd-tab-panel-wrapper" data-bind="styleunit: { width: width }, css: class, dxMutationObserver: keyboardHelper">
+        <div class="dxrd-right-tabs dxd-side-panel-tabs-back-color dxd-back-contrast" data-bind="css: tabsElement.class">
+            <!-- ko foreach: $data.tabs -->
+            <div role="button" class="dxrd-tab-item dx-accessibility-rightpanel-button dxd-side-panel-tab-back-color dxd-back-highlighted dx-accessibility-focus-border-accented" data-bind="dxAction: { action: function(s) { $data.click(); }}, css: css.class, attr: { title: text, 'aria-label': text, 'aria-expanded': active }, visible: visible">
+                <div class="dxrd-image-padding" data-bind="css: image.class, template: {name: image.templateName, if: !!ko.unwrap($data.image.templateName)}"> </div>
+            </div>
+            <!-- /ko -->
+        </div>
+
+        <div class="dxrd-right-panel dxd-property-grid-group-header-back-color dxd-back-primary2" data-bind="styleunit: { width: contentElement.width }, css: contentElement.class, resizable: getResizableOptions($element, 50, 396)">
+            <!-- ko foreach: $data.tabs -->
+            <!-- ko lazy: { template: $data.template } -->
+            <!-- /ko -->
+            <!-- /ko -->
+        </div>
+    </div>
 </script><script type="text/html" id="dx-right-panel-switcher">
     <div class="dx-right-panel-switcher">
         <div class="dxrd-collectioneditor-action" data-bind="dxButtonWithTemplate: { icon: 'dxrd-svg-operations-edit', iconClass: 'dx-image-edit', disabled: disabled, onClick: toogle, hint: title }"></div>        
@@ -1560,19 +1560,11 @@
             <!-- ko template: templates.actionsContainer -->
             <!-- /ko  -->
             <!-- /ko  -->
-            <!-- ko if: isDraggable -->
-            <div class="dx-treelist-selectedcontent" data-bind="click: function(s, e) { $root.hideContextMenu && $root.hideContextMenu(); toggleSelected(s, e); }, event: $root.ContextMenusEnabled && $root.ContextMenusEnabled() ? { contextmenu: toggleSelected } : null, draggable: dragDropHandler">
-                <!-- ko template: templates.headerItemContent -->
-                <!-- /ko -->
-            </div>
-            <!-- /ko -->
-            <!-- ko ifnot: isDraggable -->
-            <div class="dx-treelist-selectedcontent" data-bind="click: function(s, e) { $root.hideContextMenu && $root.hideContextMenu(); toggleSelected(s, e); }, event: $root.ContextMenusEnabled && $root.ContextMenusEnabled() ? { contextmenu: toggleSelected } : null">
-                <!-- ko template: templates.headerItemContent -->
-                <!-- /ko -->
-            </div>
+        <div class="dx-treelist-selectedcontent" data-bind="click: function(s, e) { $root.hideContextMenu && $root.hideContextMenu(); toggleSelected(s, e); }, event: $root.ContextMenusEnabled && $root.ContextMenusEnabled() ? { contextmenu: toggleSelected } : null, draggable: isDraggable ? dragDropHandler : null">
+            <!-- ko template: templates.headerItemContent -->
             <!-- /ko -->
         </div>
+        </div>
     </div>
 </script>
 
@@ -1767,7 +1759,7 @@
 
 
 <script type='text/html' id='dx-diagram-element-selection'>
-    <div class="dxrd-control" data-bind="event: { dblclick: $root.inlineTextEdit.show }, css: {'dxrd-selected': selected, 'dxrd-focused': focused }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
+    <div class="dxrd-control" data-bind="event: { dblclick: $root.inlineTextEdit.show($element) }, css: {'dxrd-selected': selected, 'dxrd-focused': focused }, resizable: $root.resizeHandler, draggable: $root.dragHandler, styleunit: position, trackCursor: underCursor">
         <!-- ko if: !$root.inlineTextEdit.visible() -->
         <div class="dxrd-control-content-main" data-bind="styleunit: { lineHeight: positionLineHeightWithoutMargins }, style: css">
             <div data-bind="template: contenttemplate, styleunit: { 'height': positionLineHeightWithoutMargins, 'width': positionWidthWithoutMargins}">
@@ -1990,7 +1982,7 @@
 </script>
 
 <script type='text/html' id='dxqb-federation-table-title'>
-    <div class="dxqb-table-title dxqb-federation-table-title" data-bind="event: { dblclick: $root.inlineTextEdit.show }, style: { cursor: selected() ? 'move' : 'default' }">
+    <div class="dxqb-table-title dxqb-federation-table-title" data-bind="event: { dblclick: $root.inlineTextEdit.show($element) }, style: { cursor: selected() ? 'move' : 'default' }">
         <div class="dxqb-federation-table-title-container">
             <!-- ko if: !$root.inlineTextEdit.visible() || !selected()  -->
             <div class="dxqb-table-title-content dxd-text-primary" data-bind="text: getControlModel().actualName"></div>
@@ -3259,7 +3251,7 @@
     <div class="dx-designer dx-querybuilder" data-bind="template: 'dxrd-designer'">
     </div>
 </script><script type="text/html" id="dx-wizard-menu-box-editorswitch">
-    <div class="dxrd-editormenu-box dxd-property-grid-menu-box-color dxd-back-highlighted" data-bind="css: { 'dxd-state-active': $data.isExpression() }, dxButtonWithTemplate: { onClick: switchEditors, icon: 'dxrd-svg-wizard-expressions' }">
+    <div class="dxrd-editormenu-box dxd-property-grid-menu-box-color dxd-back-highlighted" data-bind="css: { 'dxd-state-active': $data.isExpression() }, dxButtonWithTemplate: { onClick: switchEditors, icon: 'dxrd-svg-wizard-expressions', disabled: disabled }">
     </div>
 </script>
 
@@ -3386,7 +3378,7 @@
 
 <script type="text/html" id="dxrd-preview-export-to-mobile">
     <div class="dxrd-preview-export-to" data-bind="dxMenu: { wrapperAttr: { class: 'dxrd-preview-export-to' }, items: items, onItemClick: clickAction }, attr: { title: $root.getLocalization(text, $data.textId) }">
-        <div class="dxrd-preview-export-menu-item" data-options="dxTemplate: { name: 'item' }" data-bind="attr: { title: $root.getLocalization(text, $data.textId) }">
+        <div 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>
             <!-- /ko -->
@@ -3631,9 +3623,10 @@
                     onSubmenuShown: widget.onSubmenuShown,
                     onSubmenuHiding: widget.onSubmenuHiding,
                     onItemRendered: widget.onItemRendered,
-                    tabIndex: '-1'
+                    tabIndex: '-1',                    
+                    focusStateEnabled: false
                 }">
-                <div class="dxrd-preview-export-menu-item" data-options="dxTemplate: { name: 'item' }" data-bind="attr: { title: text }">
+                <div data-options="dxTemplate: { name: 'item' }" data-bind="attr: { title: text }">
                     <!--ko if: $data.format -->
                     <div class="dxrd-preview-export-item-text" data-bind="text: text"></div>
                     <!-- /ko -->
@@ -3728,181 +3721,182 @@
         <!--/ko-->
         <!--/ko-->
     </div>
-</script><script type="text/html" id="dxrd-zoom-autofit-select-template">
-        <div class="dxrd-toolbar-item-zoom" data-bind="visible: visible">
-            <div class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" >
-                <div class="dxrd-toolbar-item-zoom-editor" data-bind="dxSelectBox: {
-                    items: widget.dataSource, value: widget.value, onValueChanged: widget.onValueChanged, 
-                    displayExpr: widget.displayExpr, displayCustomValue: true, acceptCustomValue: true,
-                    onCustomItemCreating: widget.onCustomItemCreating, useItemTextAsTitle: true,
-                    width: 140,
-                    dropDownOptions: { 
-                        container: getPopupContainer($element), 
-                        position: { my: 'left top', at: 'left bottom', of: $element },
-                        wrapperAttr: { class: 'dx-zoom-selectbox-popup-wrapper' }
-                    }, tabIndex: '-1', inputAttr: widget.inputAttr }">
-                </div>
-            </div>
-        </div>
-</script>
-
-<script type="text/html" id="dxrd-preview-toolbar-scrollable">
-    <div class="dxrd-toolbar-wrapper dxrdp-toolbar-scrollable dx-shadow-top dxd-back-secondary-invariant" data-bind="dxScrollView: { showScrollbar: 'onHover', direction: 'horizontal', useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); } }">
-        <div class="dxrd-toolbar" role="toolbar" data-bind="keyDownActions: actionLists, dxMutationObserver: keyboardHelper">
-            <div id="dxrd-preview-toolbar-live-region" class="dxrd-visually-hidden" aria-live="polite" aria-atomic="true"></div>
-            <div class="dx-accessibility-container-background dxd-back-accented"></div>
-            <!-- ko template: {name: 'dxrd-toolbar-tmplt', data: actionLists.toolbarItems } -->
-            <!-- /ko -->
-        </div>
-    </div>
-</script>
-<script type="text/html" id="dxrd-preview-breadcrumb">
-    <!-- ko if: listItems.length > 1 -->
-<div class="breadcrumbs-wrapper">
-    <!-- ko foreach: listItems -->
-    <!-- ko if: $index() !== ($parent.listItems.length - 1) -->
-    <a class="breadcrump-link breadcrumb-item dxd-text-accented" data-bind="click: function(s, e) { $parent.onClick($data.position); }">
-        <span data-bind="text: $data.displayText"></span>
-    </a>
-    <span class="breadcrumb-item-seperator" data-bind="template: { name: 'dxrd-svg-preview-breadcrumbs_seperator' }">
-    </span>
-    <!-- /ko -->
-    <!-- ko if: $index() === ($parent.listItems.length - 1) -->
-    <div class="breadcrumb-item dxd-text-primary">
-        <span data-bind="text: $data.displayText"></span>
-    </div>
-    <!-- /ko -->
-
-    <!-- /ko -->
-</div>
-<!-- /ko -->
-</script>
-<script type="text/html" id="dxrd-preview-search">
-    <div role="search" aria-haspopup="listbox" class="dxrd-preview-search-wrapper" data-bind="visible: active && visible, dxMutationObserver: keyboardHelper">
-        <div id="dxrd-preview-search-live-region" class="dxrd-visually-hidden" aria-live="polite" aria-atomic="true"></div>
-        <!-- ko with: model.getViewModel() -->
-        <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: headerText"></span>
-            <div class="dxrd-preview-search-tab-editor-button-container">
-                <div class="dxrd-preview-search-editor dx-searcheditor" data-bind="dxTextBox: searchEditor"></div>
-                <div data-bind="dxButton: buttons.searchButton" class="dxrd-preview-search-button"></div>                
-            </div>
-            <div class="dxrd-preview-search-tab-header-text">
-                <div class="dxrd-preview-search-checkbox" data-bind="dxCheckBox: matchCaseEditor"></div>
-                <div class="dxrd-preview-search-checkbox dxrd-preview-search-checkbox-second" data-bind="dxCheckBox: matchWholeWordEditor"></div>           
-            </div>
-        </div>
-        <!-- ko if: (searchResultCount > 0 || loading) -->
-        <div class="dxrd-preview-search-result-wrapper">
-            <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: searchResultHeaderId, 'aria-busy': loading ? 'true' : 'false' }">
-                        <span class="dxrd-preview-search-result-text-bold" data-bind="text: searchResultCount"></span>&nbsp
-                        <span data-bind="text: resultsInText"></span>&nbsp
-                        <span class="dxrd-preview-search-result-text-bold" data-bind="text: searchResultPageCount"></span>&nbsp
-                        <span data-bind="text: resultsPagesText"></span>
-                    </div>
-                    <div class="dxrd-preview-search-results-navigation">
-                        <div class="dxrdp-search-loading" data-bind="dxLoadIndicator: { visible: loading }"></div>
-                        <div data-bind="dxButton: buttons.upButton " 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="dxButton: buttons.downButton " 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 }, attr: { 'aria-labelledby': 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: itemClickAction }, attr: attr"
-                data-options="dxTemplate : { name: 'item' }"
-                 >
-                    <div class="dx-accessibility-field-background dxd-back-accented"></div>
-                    <div class="dxrd-preview-search-tab-item-text propertygrid-editor-displayName dxd-text-primary" data-bind="text: data.text"></div>
-                    <div class="dxrd-preview-search-tab-item-info dxd-text-primary" data-bind="text: info"></div>
-                </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 -->
-    </div>
-</script>
-
-<script type="text/html" id="dxrd-preview-progress-bar">
-    <div role="dialog" class="dxrd-preview-progress dxd-popup-back-color dxd-back-primary2 dxd-border-primary" data-bind="visible: visible, css: cssClasses, dxMutationObserver: progressBarAccessibilityKeyboardHelper">
-        <div class="dxrd-preview-progress-text dxd-text-primary" data-bind="text : text"></div>
-        <div class="dxrd-preview-progress-bar dxd-back-primary">
-            <div class="dxrd-preview-progress-value dxd-preview-progress-bar-value-color dxd-back-accented" data-bind="style : { width: progress  + '%' }"></div>
-        </div>
-        <div role="button" class="dxrd-preview-progress-cancel dxd-hyperlink-color dxd-border-accented dxd-text-accented dx-accessibility-list-item dx-accessibility-border-accented" data-bind="text: cancelButton.text, visible: cancelButton.visible, click: function() { cancelButton.action && cancelButton.action(); }"></div>
-    </div>
-</script>
-
-<script type="text/html" id="dxrd-preview-parameters">
-    <div class="dxrd-preview-parameters-wrapper dxrd-preview-property-wrapper" data-bind="visible: active && visible">
-        <div class="dxrd-right-panel-header dxd-text-primary">
-            <span data-bind="text: model.headerText"></span>
-            <!-- ko if: (model && !model.isEmpty) -->
-            <!-- /ko -->
-        </div>
-        <!-- ko if: (!model || model.isEmpty) -->
-        <div class="dxrd-group-header-parameters-empty dxd-text-primary" data-bind="text: model.emptyText"></div>
-        <!-- /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: {}, dxMutationObserver: keyboardHelper">
-            <div role="tree" class="dx-fieldset dxrd-right-panel-content">
-                <!-- ko template: { name: 'dx-propertieseditor', data: propertyGrid } -->
-                <!-- /ko -->
-            </div>
-            <div class="dxrd-preview-parameter-actions-container">
-                <div class="dxrd-preview-parameter-action dxrd-preview-loading" data-bind="dxLoadIndicator: { visible: model.parametersLoading }"></div>
-                <div class="dxrd-preview-parameter-action dxrdp-parameters-reset dx-accessibility-focus-border-accented" data-bind="dxButton: model.resetButton"></div>
-                <div class="dxrd-preview-parameter-action dxrdp-parameters-submit dx-accessibility-focus-border-accented" data-bind="dxButton: model.submitButton"></div>
-            </div>
-        </div>
-        <!-- /ko -->
-    </div>
-</script>
-
-<script type="text/html" id="dxrd-preview-pager">
-    <div class="dxrd-preview-pager dxrd-toolbar-item" data-bind="visible: visible">
-        <div class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" >
-            <div class="dxrd-preview-pager-selectbox" data-bind="dxSelectBox: {
-                dataSource: widget.dataSource, onValueChanged: widget.onValueChanged, value: widget.value,
-                opened: widget.opened, displayExpr: widget.displayExpr, useItemTextAsTitle: true,
-                onKeyUp: widget.onKeyUp, itemTemplate: widget.itemTemplate,
-                searchMode: widget.searchMode, searchEnabled: widget.searchEnabled,
-                searchTimeout: widget.searchTimeout, disabled: widget.disabled,
-                dropDownOptions: {
-                    container: getPopupContainer($element),
-                    wrapperAttr: widget.wrapperAttr,
-                },
-                tabIndex: '-1', inputAttr: widget.inputAttr }">
-            </div>
-        </div>
-        <div class="dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary" data-bind="visible: $data.hasSeparator"></div>
-    </div>
-</script>
-
-<script type="text/html" id="dxrd-preview-document-map">
-<div class="dxrd-preview-document-map dxrd-height-100 dxrd-overflow-hidden" data-bind="visible: active && visible" >
-    <div class="dxrd-right-panel-header dxd-text-primary">
-        <div class="dxrd-display-inline-block" data-bind="text: $root.getLocalization('Document Map', 'ASPxReportsStringId.DocumentViewer_RibbonCommandText_DocumentMap')"></div>
-    </div>
-    <!-- ko if: model -->
-    <!-- ko with: model.getViewModel() -->
-    <div class="dxrd-right-panel-body" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); } }, dxMutationObserver: keyboardHelper">
-        <div role="tree" id="documentMapTree" data-bind="treelist: treeListOptions" class="dxrd-width-100 dxrd-height-100"></div>
-    </div>
-    <!-- /ko -->
-    <!-- /ko -->
-</div>
+</script><script type="text/html" id="dxrd-zoom-autofit-select-template">
+        <div class="dxrd-toolbar-item-zoom" data-bind="visible: visible">
+            <div class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" >
+                <div class="dxrd-toolbar-item-zoom-editor" data-bind="dxSelectBox: {
+                    items: widget.dataSource, value: widget.value, onValueChanged: widget.onValueChanged, 
+                    displayExpr: widget.displayExpr, displayCustomValue: true, acceptCustomValue: true,
+                    onCustomItemCreating: widget.onCustomItemCreating, useItemTextAsTitle: true,
+                    width: 140,
+                    dropDownOptions: { 
+                        container: getPopupContainer($element), 
+                        position: { my: 'left top', at: 'left bottom', of: $element },
+                        wrapperAttr: { class: 'dx-zoom-selectbox-popup-wrapper' }
+                    }, tabIndex: '-1', inputAttr: widget.inputAttr }">
+                </div>
+            </div>
+        </div>
+</script>
+
+<script type="text/html" id="dxrd-preview-toolbar-scrollable">
+    <div class="dxrd-toolbar-wrapper dxrdp-toolbar-scrollable dx-shadow-top dxd-back-secondary-invariant" data-bind="dxScrollView: { showScrollbar: 'onHover', direction: 'horizontal', useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); } }">
+        <div class="dxrd-toolbar" role="toolbar" data-bind="keyDownActions: actionLists, dxMutationObserver: keyboardHelper">
+            <div id="dxrd-preview-toolbar-live-region" class="dxrd-visually-hidden" aria-live="polite" aria-atomic="true"></div>
+            <div class="dx-accessibility-container-background dxd-back-accented"></div>
+            <!-- ko template: {name: 'dxrd-toolbar-tmplt', data: actionLists.toolbarItems } -->
+            <!-- /ko -->
+        </div>
+    </div>
+</script>
+<script type="text/html" id="dxrd-preview-breadcrumb">
+    <!-- ko if: listItems.length > 1 -->
+<div class="breadcrumbs-wrapper">
+    <!-- ko foreach: listItems -->
+    <!-- ko if: $index() !== ($parent.listItems.length - 1) -->
+    <a class="breadcrump-link breadcrumb-item dxd-text-accented" data-bind="click: function(s, e) { $parent.onClick($data.position); }">
+        <span data-bind="text: $data.displayText"></span>
+    </a>
+    <span class="breadcrumb-item-seperator" data-bind="template: { name: 'dxrd-svg-preview-breadcrumbs_seperator' }">
+    </span>
+    <!-- /ko -->
+    <!-- ko if: $index() === ($parent.listItems.length - 1) -->
+    <div class="breadcrumb-item dxd-text-primary">
+        <span data-bind="text: $data.displayText"></span>
+    </div>
+    <!-- /ko -->
+
+    <!-- /ko -->
+</div>
+<!-- /ko -->
+</script>
+<script type="text/html" id="dxrd-preview-search">
+    <div role="search" aria-haspopup="listbox" class="dxrd-preview-search-wrapper" data-bind="visible: active && visible, dxMutationObserver: keyboardHelper">
+        <div id="dxrd-preview-search-live-region" class="dxrd-visually-hidden" aria-live="polite" aria-atomic="true"></div>
+        <!-- ko with: model.getViewModel() -->
+        <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: headerText"></span>
+            <div class="dxrd-preview-search-tab-editor-button-container">
+                <div class="dxrd-preview-search-editor dx-searcheditor" data-bind="dxTextBox: searchEditor"></div>
+                <div data-bind="dxButton: buttons.searchButton" class="dxrd-preview-search-button"></div>                
+            </div>
+            <div class="dxrd-preview-search-tab-header-text">
+                <div class="dxrd-preview-search-checkbox" data-bind="dxCheckBox: matchCaseEditor"></div>
+                <div class="dxrd-preview-search-checkbox dxrd-preview-search-checkbox-second" data-bind="dxCheckBox: matchWholeWordEditor"></div>           
+            </div>
+        </div>
+        <!-- ko if: (searchResultCount > 0 || loading) -->
+        <div class="dxrd-preview-search-result-wrapper">
+            <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: searchResultHeaderId, 'aria-busy': loading ? 'true' : 'false' }">
+                        <span class="dxrd-preview-search-result-text-bold" data-bind="text: searchResultCount"></span>&nbsp
+                        <span data-bind="text: resultsInText"></span>&nbsp
+                        <span class="dxrd-preview-search-result-text-bold" data-bind="text: searchResultPageCount"></span>&nbsp
+                        <span data-bind="text: resultsPagesText"></span>
+                    </div>
+                    <div class="dxrd-preview-search-results-navigation">
+                        <div class="dxrdp-search-loading" data-bind="dxLoadIndicator: { visible: loading }"></div>
+                        <div data-bind="dxButton: buttons.upButton " 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="dxButton: buttons.downButton " 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 }, attr: { 'aria-labelledby': 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: itemClickAction }, attr: attr"
+                data-options="dxTemplate : { name: 'item' }"
+                 >
+                    <div class="dx-accessibility-field-background dxd-back-accented"></div>
+                    <div class="dxrd-preview-search-tab-item-text propertygrid-editor-displayName dxd-text-primary" data-bind="text: data.text"></div>
+                    <div class="dxrd-preview-search-tab-item-info dxd-text-primary" data-bind="text: info"></div>
+                </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 -->
+    </div>
+</script>
+
+<script type="text/html" id="dxrd-preview-progress-bar">
+    <div role="dialog" class="dxrd-preview-progress dxd-popup-back-color dxd-back-primary2 dxd-border-primary" data-bind="visible: visible, css: cssClasses, dxMutationObserver: progressBarAccessibilityKeyboardHelper">
+        <div class="dxrd-preview-progress-text dxd-text-primary" data-bind="text : text"></div>
+        <div class="dxrd-preview-progress-bar dxd-back-primary">
+            <div class="dxrd-preview-progress-value dxd-preview-progress-bar-value-color dxd-back-accented" data-bind="style : { width: progress  + '%' }"></div>
+        </div>
+        <div role="button" class="dxrd-preview-progress-cancel dxd-hyperlink-color dxd-border-accented dxd-text-accented dx-accessibility-list-item dx-accessibility-border-accented" data-bind="text: cancelButton.text, visible: cancelButton.visible, click: function() { cancelButton.action && cancelButton.action(); }"></div>
+    </div>
+</script>
+
+<script type="text/html" id="dxrd-preview-parameters">
+    <div class="dxrd-preview-parameters-wrapper dxrd-preview-property-wrapper" data-bind="visible: active && visible">
+        <div class="dxrd-right-panel-header dxd-text-primary">
+            <span data-bind="text: model.headerText, visible: model.showHeader"></span>
+            <!-- ko if: (model && !model.isEmpty) -->
+            <!-- /ko -->
+        </div>
+        <!-- ko if: (!model || model.isEmpty) -->
+        <div class="dxrd-group-header-parameters-empty dxd-text-primary" data-bind="text: model.emptyText"></div>
+        <!-- /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: {}, dxMutationObserver: keyboardHelper">
+            <div role="tree" class="dx-fieldset dxrd-right-panel-content">
+                <!-- ko template: { name: 'dx-propertieseditor', data: propertyGrid } -->
+                <!-- /ko -->
+            </div>
+            <div class="dxrd-preview-parameter-actions-container" data-bind="visible: model.showButtons">
+                <div class="dxrd-preview-parameter-action dxrd-preview-loading" data-bind="dxLoadIndicator: { visible: model.parametersLoading }"></div>
+                <!-- ko foreach: model.buttons -->
+                <div class="dxrd-preview-parameter-action dxrdp-parameters-reset dx-accessibility-focus-border-accented" data-bind="dxButton: $data"></div>
+                <!-- /ko -->
+            </div>
+        </div>
+        <!-- /ko -->
+    </div>
+</script>
+
+<script type="text/html" id="dxrd-preview-pager">
+    <div class="dxrd-preview-pager dxrd-toolbar-item" data-bind="visible: visible">
+        <div class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" >
+            <div class="dxrd-preview-pager-selectbox" data-bind="dxSelectBox: {
+                dataSource: widget.dataSource, onValueChanged: widget.onValueChanged, value: widget.value,
+                opened: widget.opened, displayExpr: widget.displayExpr, useItemTextAsTitle: true,
+                onKeyUp: widget.onKeyUp, itemTemplate: widget.itemTemplate,
+                searchMode: widget.searchMode, searchEnabled: widget.searchEnabled,
+                searchTimeout: widget.searchTimeout, disabled: widget.disabled,
+                dropDownOptions: {
+                    container: getPopupContainer($element),
+                    wrapperAttr: widget.wrapperAttr,
+                },
+                tabIndex: '-1', inputAttr: widget.inputAttr }">
+            </div>
+        </div>
+        <div class="dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary" data-bind="visible: $data.hasSeparator"></div>
+    </div>
+</script>
+
+<script type="text/html" id="dxrd-preview-document-map">
+<div class="dxrd-preview-document-map dxrd-height-100 dxrd-overflow-hidden" data-bind="visible: active && visible" >
+    <div class="dxrd-right-panel-header dxd-text-primary">
+        <div class="dxrd-display-inline-block" data-bind="text: $root.getLocalization('Document Map', 'ASPxReportsStringId.DocumentViewer_RibbonCommandText_DocumentMap')"></div>
+    </div>
+    <!-- ko if: model -->
+    <!-- ko with: model.getViewModel() -->
+    <div class="dxrd-right-panel-body" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); } }, dxMutationObserver: keyboardHelper">
+        <div role="tree" id="documentMapTree" data-bind="treelist: treeListOptions" class="dxrd-width-100 dxrd-height-100"></div>
+    </div>
+    <!-- /ko -->
+    <!-- /ko -->
+</div>
 </script><script type="text/html" id="dxrd-report-preview">
     <div class="dxrd-preview dxrd-designer-wrapper dxd-scrollbar-color dxd-surface-back-color" data-bind="visible: reportPreview.previewVisible, cssArray: [ $data.rootStyle , { 'dx-rtl' : $data.rtl, 'dx-ltr': !$data.rtl } ]">
         <!-- ko foreach: parts -->
@@ -4088,10 +4082,10 @@
                             <!-- /ko -->
                             <!-- ko if: !isComplexEditor -->
                             <!-- ko if: !!$data.textToSearch -->
-                            <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>
+                            <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: ko.unwrap(isPropertyModified) ? 'Bold' : ''}"></label>
                             <!-- /ko -->
                             <!-- ko ifnot: !!$data.textToSearch -->
-                            <label class="propertygrid-editor-displayName" data-bind="text: displayName, attr: { 'title': displayName, for: editorInputId }, css: { 'dx-property-required': isRequired }, style: { fontWeight: isPropertyModified ? 'Bold' : ''}"></label>
+                            <label class="propertygrid-editor-displayName" data-bind="text: displayName, attr: { 'title': displayName, for: editorInputId }, css: { 'dx-property-required': isRequired }, style: { fontWeight: ko.unwrap(isPropertyModified) ? 'Bold' : ''}"></label>
                             <!-- /ko -->
                             <!-- /ko -->
                     </div>
@@ -4244,28 +4238,28 @@
 </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, id: editorInputId } }), dxValidator: { validationRules: $data.validationRules || [] }"></div>
 </script>
-<script type="text/html" id="dxrdv-signature">
-    <div data-bind="dxSelectBox: getOptions({ dataSource: values, value: value, itemTemplate: 'signature', displayExpr: 'displayName', valueExpr: 'key', showClearButton: true, noDataText: $root.dx._static.noDataText(), encodeNoDataText: true, dropDownOptions: { minWidth: '300px', container: $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 type="text/html" id="dxrdv-signature">
+    <div data-bind="dxSelectBox: getOptions({ dataSource: values, value: value, itemTemplate: 'signature', displayExpr: 'displayName', valueExpr: 'key', showClearButton: true, noDataText: $root.dx._static.noDataText(), encodeNoDataText: true, dropDownOptions: { minWidth: '300px', container: $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()">
@@ -6077,12 +6071,17 @@
     <div class="dxrd-parameters-content">
         <div class="dxrd-parameters-content-list-wrapper">
             <div class="dx-collectioneditor-actions-wrapper">
-                <div class="dx-collectioneditor-action dx-accessibility-focus-border-accented" data-bind="dxButtonWithTemplate: { onClick: addParameter, icon: 'dxrd-svg-actions-add_parameter', iconClass: 'dx-image-add-parameter' }, attr: { title: getDisplayTextButton('addParameter') }"></div>
-                <div class="dx-collectioneditor-action dx-accessibility-focus-border-accented" data-bind="dxButtonWithTemplate: { onClick: addGroup, icon: 'dxrd-svg-actions-add_group', iconClass: 'dx-image-add-group' }, attr: { title: getDisplayTextButton('addGroup') }"></div>
-                <div class="dx-collectioneditor-action dx-accessibility-focus-border-accented" data-bind="dxButtonWithTemplate: { onClick: addSeparator, icon: 'dxrd-svg-actions-add_separator', iconClass: 'dx-image-add-separator' }, attr: { title: getDisplayTextButton('addSeparator') }"></div>
+                <!-- ko foreach: addButtons -->
+                    <!-- ko if: visible -->
+                        <div class="dx-collectioneditor-action dx-accessibility-focus-border-accented" data-bind="dxButtonWithTemplate: { onClick: onClick, icon: icon, iconClass: iconClass }, attr: { title: title }"></div>
+                    <!-- /ko -->
+                <!-- /ko -->
                 <div class="dx-collectioneditor-action-separator"></div>
-                <div class="dx-collectioneditor-action dx-collectioneditor-action-right dx-accessibility-focus-border-accented" data-bind="dxButtonWithTemplate: { onClick: up, disabled: isDisabledButton('up'), icon: 'dxrd-svg-operations-moveup', iconClass: 'dx-image-moveup' }, attr: { title: getDisplayTextButton('up') }"></div>
-                <div class="dx-collectioneditor-action dx-collectioneditor-action-right dx-accessibility-focus-border-accented" data-bind="dxButtonWithTemplate: { onClick: down, disabled: isDisabledButton('down'), icon: 'dxrd-svg-operations-movedown', iconClass: 'dx-image-movedown' }, attr: { title: getDisplayTextButton('down') }"></div>
+                <!-- ko foreach: moveButtons -->
+                    <!-- ko if: visible -->
+                    <div class="dx-collectioneditor-action dx-collectioneditor-action-right dx-accessibility-focus-border-accented" data-bind="dxButtonWithTemplate: { onClick: onClick, disabled: $parent.isDisabledButton(name), icon: icon, iconClass: iconClass }, attr: { title: title }"></div>
+                    <!-- /ko -->
+                <!-- /ko -->
             </div>
             <div class="dxrd-parameters-content-list dxd-border-primary" data-bind="dxScrollView: { showScrollbar: 'onHover', scrollByContent: false, bounceEnabled: false, useNative: false, scrollByThumb: true, direction: 'both' }, dxAutoScrolling: { active: $root.dx._static.DragDropHandler.started }">
                 <!-- ko if: $data.visible -->
@@ -6430,7 +6429,14 @@
 </script>
 
 <script type="text/html" id="dxrd-expression-editor-addon">
-    <div class="dxrd-editormenu-box dxd-property-grid-menu-box-color dxrd-editor-box-image" data-bind="cacheElement: { action: function() { $data.cacheFunction($root.activateExpressionEditor); } }, dxclick: function(_, element) { showPopup(_, element) }, attr: { title: hint }, css: editorMenuButtonCss">
+    <div
+        class="dxrd-editormenu-box dxd-property-grid-menu-box-color dxrd-editor-box-image"
+        data-bind="
+            cacheElement: { action: function() { $data.cacheFunction($root.activateExpressionEditor); } },
+            dxclick: function(_, element) { showPopup(_, element) },
+            attr: { title: hint },
+            css: editorMenuButtonCss"
+    >
         <div class="dxrd-editor-box-image-content" data-bind="template: { name: $data.imageTemplateName, if: ko.unwrap($data.imageTemplateName) }"></div>
     </div>
 </script><script type="text/html" id="dxrd-activated-expressioneditor">
@@ -6692,14 +6698,24 @@
 
 <script type="text/html" id="dxrd-watermarks">
     <div class="dxrd-editor" data-bind="visible: visible">
-        <div data-bind="dxCollectionEditor: { values: value, displayName: $root.getLocalization(displayName), level: level, info: info, addHandler: function() { return $root.watermarks().createWatermark(); } }">
+        <div data-bind="dxCollectionEditor: { values: value, displayName: $root.getLocalization(displayName), level: level, info: info, _accessibilityProvider: ko.unwrap(_accessibilityProvider), addHandler: function() { return $root.watermarks().createWatermark(); } }">
         </div>
     </div>
 </script>
 
 <script type="text/html" id="dxrd-parameters">
     <div class="dxrd-editor" data-bind="visible: visible">
-        <div data-bind="dxCollectionEditor: { values: value, displayName: displayName, level: level, info: info, addHandler: function() { return $root.parameters().add(); }, removeHandler: function(parameter) { return $root.parameters().remove(parameter); }, undoEngine: $root.undoEngine }">
+        <div data-bind="dxCollectionEditor: {
+            values: value,
+            displayName: displayName,
+            level: level,
+            info: info,
+            addHandler: function() { return $root.parameters().add(); },
+            removeHandler: function(parameter) { return $root.parameters().remove(parameter); },
+            allowEditItems: $root.parameterEditingSettings.allowEditParameterCollection,
+            allowReorderItems: $root.parameterEditingSettings.allowReorderParameters,
+            undoEngine: $root.undoEngine
+        }">
         </div>
     </div>
 </script>