devexpress-reporting 23.2.1-alpha-23254-1700 → 23.2.3

package/dist/html/templates.html

@@ -70,7 +70,7 @@
 </script><script type="text/html" id="dxrd-surface-template-base">
     <!-- ko ifnot: isLoading -->
     <!-- ko with: surface -->
-    <div class="dxrd-surface-wrapper" data-bind="css: { 'dxrd-context-menu-container': selected() }, template: templateName, click: function(_, e) { $data.clickHandler($root.selection, e); }, event: $root.ContextMenuDisabled && $root.ContextMenuDisabled() ? null : { contextmenu: function(_, e) { $data.reportContextMenuHandler && $data.reportContextMenuHandler($root.selection, e); }}">
+    <div class="dxrd-surface-wrapper" data-bind="css: { 'dxrd-context-menu-container': selected() }, template: templateName, click: function(_, e) { $data.clickHandler($root.selection, e); }, event: $root.ContextMenusEnabled && $root.ContextMenusEnabled() ? { contextmenu: function(_, e) { $data.reportContextMenuHandler && $data.reportContextMenuHandler($root.selection, e); }} : null">
     </div>
     <!-- /ko -->
     <!-- /ko -->
@@ -216,7 +216,7 @@
                 <!-- /ko -->
                 <!-- /ko -->
                 <!-- ko with: popularProperties -->
-                <div class="dxrd-position-relative" data-bind="template: { name: 'dx-propertieseditor', data: { editors: $root.popularVisibleEditors(), rtl: rtl } }"></div>
+                <div class="dxrd-position-relative" data-bind="template: { name: 'dx-propertieseditor', data: $data }"></div>
                 <!-- /ko -->
             </div>
         </div>
@@ -226,7 +226,7 @@
 
 <script type="text/html" id="dxrd-group-actions">
     <div class="dxd-back-primary2 dxrd-property-grid-actions-group">
-        <!-- ko if: $root.ShowPopularControlActions() -->
+        <!-- ko if: groupActionsVisible -->
             <!-- ko foreach: (groupActions || []) -->
             <div class="dxd-border-primary dxrd-properties-grid-actions-group-content" data-bind="visible: items.some(x => !x.visible || ko.unwrap(x.visible))">
                 <div class="dxd-text-primary dxrd-properties-grid-action-name" data-bind="text: group"></div>
@@ -276,7 +276,7 @@
             </div>
             <!-- /ko -->
             <div class="dxrd-properties-grid dxd-border-primary" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true }">
-                <!-- ko template: { name: 'dxrd-group-actions', data: { groupActions: $root.contextGroupActions } } -->
+                <!-- ko template: { name: 'dxrd-group-actions', data: { groupActions: $root.contextGroupActions, groupActionsVisible: $root.groupActionsVisible() } } -->
                 <!-- /ko -->
                 <!-- ko template: { name: 'dxrd-top-grid', data: { contextActions: $root.contextActions, popularProperties: $root.popularProperties, collapsed: ko.observable(false), popularVisible: $root.popularVisible() && isSortingByGroups(), actionsGroupTitle: $root.actionsGroupTitle } } -->
                 <!-- /ko -->
@@ -328,6 +328,8 @@
                 </div>
                 <!-- ko template: 'dx-propertygrid-popupservice' -->
                 <!-- /ko -->
+                <!-- ko template: { name: 'dx-propertygrid-popoverservice', if: popover, data: popover.getViewModel() } -->
+                <!-- /ko -->
             </div>
             <!-- /ko -->
         </div>
@@ -371,6 +373,25 @@
             </div>
         </div>
     </div>
+</script>
+
+<script type="text/html" id="dx-propertygrid-popoverservice">
+    <div data-bind="dxPopover: {
+        container: $root.getPopupContainer($element),
+        target: target,
+        position: 'bottom',
+        showCloseButton: false,
+        onHidden: onHidden,
+        hideEvent: 'mouseleave focusout',
+        hideOnOutsideClick: true,
+        hideOnParentScroll: true,
+        width: '350px',
+        visible: visible
+    }">
+        <div class="propertygrid-editor-description-popover-content">
+            <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))">
@@ -399,8 +420,7 @@
             <!-- /ko -->
         </div>
     </div>
-</script>
-<script type="text/html" id="dx-right-panel-switcher">
+</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>        
     </div>
@@ -516,8 +536,8 @@
                         <!-- /ko -->
                         <!-- ko if: displayName -->
                         <div class="dx-collectioneditor-header-text dxd-text-primary" data-bind="styleunit: { 'paddingLeft': padding }">
-                            <div class="propertygrid-editor-collapsed dx-collapsing-image" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed }"></div>
-                            <div class="dx-group-header-font dxd-text-primary" data-bind="text: displayName, attr: { title: displayName }"></div>
+                            <div class="dx-collapsing-image dxrd-display-inline-block" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed }"></div>
+                            <div class="dx-group-header-font dxd-text-primary dxrd-display-inline-block" data-bind="text: displayName, attr: { title: displayName }"></div>
                         </div>
                         <!-- /ko -->
                     </div>
@@ -599,26 +619,31 @@
                         '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 -->
+                    <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 -->
                             <div data-bind="enable: templateName === 'dx-emptyHeader'">
-                                <div class="propertygrid-editor-collapsed dx-collapsing-image" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed }"></div>
+                                <!-- ko ifnot: $data.hideCollapsingButton -->
+                                <div class="dx-collapsing-image dxrd-display-inline-block" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !ko.unwrap(collapsed) }"></div>
+                                <!-- /ko -->
                                 <!-- ko if: !!$data.textToSearch -->
-                                <div class="dx-group-header-font" data-bind="searchHighlighting: { text: displayName, textToSearch: textToSearch }, attr: { 'title': displayName }"></div>
+                                <div class="dx-group-header-font" data-bind="searchHighlighting: { text: displayName, textToSearch: textToSearch }, attr: { 'title': displayName }, css: { 'dx-collapsing-image-hidden': $data.hideCollapsingButton }"></div>
                                 <!-- /ko -->
                                 <!-- ko ifnot: !!$data.textToSearch -->
-                                <div class="dx-group-header-font" data-bind="text: displayName, attr: { 'title': displayName }"></div>
+                                <div class="dx-group-header-font" data-bind="text: displayName, attr: { 'title': displayName }, css: { 'dx-collapsing-image-hidden': $data.hideCollapsingButton }"></div>
                                 <!-- /ko -->
                             </div>
                             <!-- /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: 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: ko.unwrap(isPropertyModified) ? 'Bold' : ''}"></label>
+                                <!-- 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: 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: ko.unwrap(isPropertyModified) ? 'Bold' : ''}"></label>
+                                <!-- /ko -->
+                                <!-- ko if: $data.description -->
+                                    <div data-bind="service: { name: 'createEditorDescriptionAddOn' }"></div>
+                                <!-- /ko -->
                             <!-- /ko -->
-                            <!-- /ko -->                            
                     </div>
                     <div class="dx-field-value" data-bind="css: { 'dxd-border-accented': $data.isPropertyHighlighted }">
                         <div data-bind="service: { name: 'createEditorAddOn' }"></div>
@@ -646,6 +671,10 @@
 </script>
 
 <script type="text/html" id="dx-emptyHeader">
+</script>
+
+<script type="text/html" id="dx-property-grid-editor-description">
+    <div class="propertygrid-editor-description" data-bind="dxButtonWithTemplate: { onClick: onClick, icon: 'dxrd-svg-tabs-description_info' }"></div>
 </script><script type="text/html" id="dx-date">
     <div class="dx-datebox-container">
         <div data-bind="
@@ -677,10 +706,14 @@
             <!-- ko with: value -->
             <div class="dx-field-value">
                 <div class="dx-font-styles-content">
-                    <div class="dx-font-style-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-image-fontstyle-bold" data-bind="css: { 'dxd-state-active': bold(), 'dx-disabled-button': $parent.disabled }, click: function() { if(!$parent.disabled()) { bold(!bold()); } }"><!-- ko template: 'dxrd-svg-fontstyle-bold'--><!-- /ko --></div>
-                    <div class="dx-font-style-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-image-fontstyle-italic" data-bind="css: { 'dxd-state-active': italic(), 'dx-disabled-button': $parent.disabled }, click: function() { if(!$parent.disabled()) { italic(!italic()); } }"><!-- ko template: 'dxrd-svg-fontstyle-italic'--><!-- /ko --></div>
-                    <div class="dx-font-style-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-image-fontstyle-underline" data-bind="css: { 'dxd-state-active': underline(), 'dx-disabled-button': $parent.disabled }, click: function() { if(!$parent.disabled()) { underline(!underline()); } }"><!-- ko template: 'dxrd-svg-fontstyle-underline'--><!-- /ko --></div>
-                    <div class="dx-font-style-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-image-fontstyle-strikeout" data-bind="css: { 'dxd-state-active': strikeout(), 'dx-disabled-button': $parent.disabled }, click: function() { if(!$parent.disabled()) { strikeout(!strikeout()); } }"><!-- ko template: 'dxrd-svg-fontstyle-strikeout'--><!-- /ko --></div>
+                    <div class="dx-font-style-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-image-fontstyle-bold" data-bind="css: { 'dxd-state-active': bold(), 'dx-disabled-button': $parent.disabled }, click: function() { if(!ko.unwrap($parent.disabled)) { bold(!bold()); } }"><!-- ko template: 'dxrd-svg-fontstyle-bold'--><!-- /ko --></div>
+                    <div class="dx-font-style-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-image-fontstyle-italic" data-bind="css: { 'dxd-state-active': italic(), 'dx-disabled-button': $parent.disabled }, click: function() { if(!ko.unwrap($parent.disabled)) { italic(!italic()); } }"><!-- ko template: 'dxrd-svg-fontstyle-italic'--><!-- /ko --></div>
+                <!-- ko ifnot: $parents[2].editorOptions && $parents[2].editorOptions.hideUnderline -->
+                    <div class="dx-font-style-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-image-fontstyle-underline" data-bind="css: { 'dxd-state-active': underline(), 'dx-disabled-button': $parent.disabled }, click: function() { if(!ko.unwrap($parent.disabled)) { underline(!underline()); } }"><!-- ko template: 'dxrd-svg-fontstyle-underline'--><!-- /ko --></div>
+                <!-- /ko -->
+                <!-- ko ifnot: $parents[2].editorOptions && $parents[2].editorOptions.hideStrikeout -->
+                    <div class="dx-font-style-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-image-fontstyle-strikeout" data-bind="css: { 'dxd-state-active': strikeout(), 'dx-disabled-button': $parent.disabled }, click: function() { if(!ko.unwrap($parent.disabled)) { strikeout(!strikeout()); } }"><!-- ko template: 'dxrd-svg-fontstyle-strikeout'--><!-- /ko --></div>
+                <!-- /ko -->
                 </div>
             </div>
             <!-- /ko -->
@@ -718,6 +751,7 @@
                 <!-- /ko -->
                 <!-- /ko -->
             </div>
+
         </div>
     </div>
 </script>
@@ -1524,13 +1558,13 @@
             <!-- /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.ContextMenuDisabled && $root.ContextMenuDisabled() ? null : { contextmenu: toggleSelected }, draggable: dragDropHandler">
+            <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.ContextMenuDisabled && $root.ContextMenuDisabled() ? null : { contextmenu: toggleSelected }">
+            <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>
@@ -1775,7 +1809,7 @@
         <!-- /ko -->
     </div>
 </script><script type="text/html" id="dx-diagram-surface">
-    <div class="dxrd-surface dxrd-height-100 dxrd-display-inline-block"  data-bind="styleunit: { 'width': Math.min(pageWidth(), $root.surfaceSize()) }, click: function(_, e) { $root.selection.clickHandler(null, e); e.stopPropagation(); }, keyDownActions: $root.actionLists">
+    <div class="dxrd-surface dxrd-height-100 dxrd-display-inline-block"  data-bind="styleunit: { 'width': Math.min(pageWidth(), $root.surfaceSize()) }, click: function(_, e) { $root.selection.clickHandler(null, e); e.stopPropagation(); }, keyDownActions: $root.actionLists.getViewModel()">
         <div class="dxrd-viewport dxrd-overflow-auto dxrd-width-inherit dxrd-height-inherit"  data-bind="styleunit: { minWidth: Math.min(pageWidth(), $root.surfaceSize()), maxWidth: pageWidth(),  maxHeight: pageHeight() + 20 }">
             <div data-bind="selectable: { selection: $root.selection, zoom: zoom }">
                 <div class="dxrd-ghost-containment">
@@ -1797,7 +1831,7 @@
         </svg>
     </div>
 </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-surface dxrd-display-inline-block"  data-bind="styleunit: { 'width': $root.surfaceSize }, click: function(_, e) { $root.selection.clickHandler(null, e); e.stopPropagation(); }, keyDownActions: $root.actionLists.getViewModel()">
         <div class="dxrd-viewport dxrd-width-inherit dxrd-height-inherit" >
             <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">
@@ -2253,8 +2287,8 @@
     <div class="dxrd-accordion-collection-item" data-bind="dxdAccordion: { collapsed: collapsed, setCollapsed: setCollapsed, getCollapsed: getCollapsed, setCollapsedChangedEvent: setCollapsedChangedEvent }">
         <div class="dxrd-group-header dx-accordion-header">
             <div>
-                <div class="propertygrid-editor-collapsed dx-collapsing-image" data-bind="css: { 'dx-image-expanded': !collapsed }, template: 'dxrd-svg-collapsed'"></div>
-                <div class="dx-group-header-font" data-bind="text: $root.getLocalization(value.name), attr: { title: $root.getLocalization(value.name) }"></div>
+                <div class="dx-collapsing-image dxrd-display-inline-block" data-bind="css: { 'dx-image-expanded': !collapsed }, template: 'dxrd-svg-collapsed'"></div>
+                <div class="dx-group-header-font dxrd-display-inline-block" data-bind="text: $root.getLocalization(value.name), attr: { title: $root.getLocalization(value.name) }"></div>
             </div>
         </div>
         <div class="dx-accordion-content">
@@ -2281,28 +2315,9 @@
 </script><script type="text/html" id="dxqb-toolbar">
     <div class="dxrd-toolbar-wrapper dxd-toolbar-back-color" data-bind="click: $root.findControl">
         <div class="dxqb-toolbar-background dxd-back-primary-invariant"></div>
-        <div class="dxrd-toolbar" data-bind="template: {name: 'dxqb-toolbar-items', data: actionLists.toolbarItems }"></div>
-    </div>
-</script>
-
-<script type="text/html" id="dxqb-toolbar-items">
-    <!-- ko foreach: $data -->
-    <!-- ko if: $data.templateName -->
-    <!-- ko template: templateName  -->
-    <!-- /ko -->
-    <!-- /ko -->
-    <!-- ko if: !$data.templateName -->
-    <div class="dxrd-toolbar-item" data-bind="visible: visible">
-        <div class="dxqb-toolbar-item-container">
-            <div class="dxqb-toolbar-item-background dxd-back-secondary"></div>
-            <div data-bind="template: {name: ko.unwrap($data.imageTemplateName), if: !!ko.unwrap($data.imageTemplateName)}, attr: { class: 'dxrd-toolbar-item-image dxd-icon-highlighted dxd-state-normal ' + (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-state-active': $data.selected }"> </div>            
-        </div>
-        <div class="dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary" data-bind="visible: $data.hasSeparator"></div>
+        <div class="dxrd-toolbar" data-bind="template: {name: 'dxrd-toolbar-tmplt', data: actionLists.getViewModel().toolbarItems }"></div>
     </div>
-    <!-- /ko -->
-    <!-- /ko -->
-</script>
-<script type="text/html" id="dxqb-property-editor">
+</script><script type="text/html" id="dxqb-property-editor">
     <div class="dxrd-editor" data-bind="visible: visible">
         <div class="dxrd-editor-header">
             <div class="dx-field dxd-back-primary">
@@ -3592,6 +3607,8 @@
                 <!-- ko template: { name: 'dx-propertieseditor', data: propertyGrid } -->
                 <!-- /ko -->
             </div>
+            <!-- ko template: { name: 'dx-propertygrid-popoverservice', if: propertyGrid.popover, data: propertyGrid.popover } -->
+            <!-- /ko -->
         </div>
     </div>
 </div>
@@ -3645,14 +3662,14 @@
 </script>
 
 <script type="text/html" id="dxrd-preview-page">
-    <div role="img" class="dxrd-report-preview-content dxrd-position-relative dxrd-width-100 dxrd-height-100"  data-bind="attr: {'aria-label': currentPageAriaLabelImgAlt() }, dxclick: clickToBrick, 'brick-selection-prog': brickSelectionProg">
+    <div role="img" class="dxrd-report-preview-content dxrd-position-relative dxrd-width-100 dxrd-height-100"  data-bind="attr: {'aria-label': currentPageAriaLabelImgAlt }, dxclick: clickToBrick, 'brick-selection-prog': brickSelectionProg">
         <div class="dxrd-report-preview-content-loading-wrapper dxrd-background-white"  data-bind="styleunit: { 'width': width + 2, 'height': height + 2 }, visible: pageLoading">
             <div class="dxrd-report-preview-content-loading-panel dxrd-text-align-center"  data-bind="styleunit: { 'paddingTop': height / 2.3 }">
                 <div class="dxrd-report-preview-content-loading-panel-text" data-bind="text: loadingText"></div>
             </div>
         </div>
         <div>
-            <img class="dxrd-pointer-events-none dxrd-width-100 dxrd-height-100" data-bind="attr: { src: displayImageSrc, 'alt': currentPageAriaLabelImgAlt() }" />
+            <img class="dxrd-pointer-events-none dxrd-width-100 dxrd-height-100" data-bind="attr: { src: displayImageSrc, 'alt': currentPageAriaLabelImgAlt }" />
             <!-- ko foreach: activeBricks -->
             <!-- ko template: { name: "dxrd-page-brick-mobile", data: $data } -->
             <!--/ko-->
@@ -3731,12 +3748,32 @@
         <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.getViewModel().toolbarItems } -->
+            <!-- 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>
@@ -4036,7 +4073,7 @@
                             <!-- ko if: isComplexEditor -->
                             <div data-bind="enable: templateName === 'dx-emptyHeader'">
                                 <!-- ko ifnot: $data.alwaysShow -->
-                                <div class="propertygrid-editor-collapsed dx-collapsing-image" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed }"></div>
+                                <div class="dx-collapsing-image dxrd-display-inline-block" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed }"></div>
                                 <!-- /ko -->
                                 <!-- ko if: !!$data.textToSearch -->
                                 <div class="dx-group-header-font" data-bind="searchHighlighting: { text: displayName, textToSearch: textToSearch }, attr: { 'title': displayName }"></div>
@@ -4053,7 +4090,7 @@
                             <!-- 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>
                             <!-- /ko -->
-                            <!-- /ko -->                            
+                            <!-- /ko -->
                     </div>
                     <div class="dx-field-value" data-bind="css: { 'dxd-border-accented': $data.isPropertyHighlighted }">
                         <div data-bind="service: { name: 'createEditorAddOn' }"></div>
@@ -4529,7 +4566,7 @@
     </div>
     <!-- /ko -->
     <!-- ko if: showMarker -->
-    <div class="dxrd-band-marker dxrd-context-menu-container" data-bind="css: markerClass, styleunit: { 'height': height(), 'width': markerWidth }, click: function(_, e) { markerClick($root.selection); e.stopPropagation(); }, event: $root.ContextMenuDisabled && $root.ContextMenuDisabled() ? null : { contextmenu: function(_, e) { markerClick($root.selection, false);  }}, resizable: { starting: function() { $root.resizeHandler.started = true; $root.resizeHandler.starting(); $root.selection.initialize($data); }, stopped: function() { $data.stopResize(); $root.resizeHandler.stopped(); $root.resizeHandler.started = false; }, handles: 's', disabled: collapsed() || !hasOwnRuler() || locked, forceResize: resize, zoom: $root.surface().zoom, minimumHeight: minHeight() }">
+    <div class="dxrd-band-marker dxrd-context-menu-container" data-bind="css: markerClass, styleunit: { 'height': height(), 'width': markerWidth }, click: function(_, e) { markerClick($root.selection); e.stopPropagation(); }, event: $root.ContextMenusEnabled && $root.ContextMenusEnabled() ? { contextmenu: function(_, e) { markerClick($root.selection, false);  }} : null, resizable: { starting: function() { $root.resizeHandler.started = true; $root.resizeHandler.starting(); $root.selection.initialize($data); }, stopped: function() { $data.stopResize(); $root.resizeHandler.stopped(); $root.resizeHandler.started = false; }, handles: 's', disabled: collapsed() || !hasOwnRuler() || locked, forceResize: resize, zoom: $root.surface().zoom, minimumHeight: minHeight() }">
         <div class="dxrd-band-marker-content">
             <div class="dxrd-width-1px dxrd-height-1px dxrd-margin-left-9px"></div>
             <div class="dxrd-band-marker-rotation">
@@ -5214,7 +5251,7 @@
         <!-- /ko -->
     </div>
 </script><script type='text/html' id='dxrd-report'>
-<div class="dxrd-surface" data-bind="styleunit: { 'width': Math.min($data.pageWidth() + $data.maxMarkerWidth() + $root.verticalScrollOffset() , $root.surfaceSize()) }, css: { 'dxrd-surface-rtl': rtl() }, click: function(surface, e) { !$root.selection.disabled() && $root.selection.clickHandler($root.selection.dropTarget ? null : surface, e); e.stopPropagation(); }, event: $root.ContextMenuDisabled && $root.ContextMenuDisabled() ? null : { contextmenu: function(surface, e) { $data.surfaceContextMenuHandler && $data.surfaceContextMenuHandler($root.selection, surface, e); }}, keyDownActions: $root.actionLists">
+<div class="dxrd-surface" data-bind="styleunit: { 'width': Math.min($data.pageWidth() + $data.maxMarkerWidth() + $root.verticalScrollOffset() , $root.surfaceSize()) }, css: { 'dxrd-surface-rtl': rtl() }, click: function(surface, e) { !$root.selection.disabled() && $root.selection.clickHandler($root.selection.dropTarget ? null : surface, e); e.stopPropagation(); }, event: $root.ContextMenusEnabled && $root.ContextMenusEnabled() ? { contextmenu: function(surface, e) { $data.surfaceContextMenuHandler && $data.surfaceContextMenuHandler($root.selection, surface, e); }} : null, keyDownActions: $root.actionLists.getViewModel()">
     <div class="dxrd-content-panel-wrapper" data-bind="styleunit: $root.dx['config']()['rtlEnabled'] ?  { right: maxMarkerWidth() } : { left: maxMarkerWidth() }, style: { bottom: (20 - $root.horizontalScrollOffset()) + 'px' }">
         <div class="dxrd-content-panel">
             <div class="dxrd-hruler-wrapper">
@@ -5705,17 +5742,7 @@
         </div>
     </div>
     <!-- ko if: useContextMenu -->
-    <div data-bind="dxContextMenu: {
-        dataSource: fieldListContextMenu.dataSource,
-        target: fieldListContextMenu.target,
-        itemTemplate: fieldListContextMenu.itemTemplate,
-        cssClass: fieldListContextMenu.cssClass,
-        hideOnOutsideClick: fieldListContextMenu.hideOnOutsideClick,
-        onItemClick: function(e) {
-            fieldListContextMenu.onItemClick(e);
-        },
-        onInitialized: fieldListContextMenu.onInitialized
-    }"></div>
+    <div data-bind="dxContextMenu: fieldListContextMenu"></div>
     <!-- /ko -->
     <!-- /ko -->
 </div></script>
@@ -5869,10 +5896,10 @@
 </svg>
 </script>
 <script type='text/html' id='dxrd-watermark'>
-<!-- ko if: $data.reportSurface.watermark.shouldDrawWatermarkImage() -->
+<!-- ko if: $data.reportSurface.watermark && $data.reportSurface.watermark.shouldDrawWatermarkImage() -->
 <div class="dxrd-band-content-watermark" data-bind="css: {'dxrd-flip': forLeftMargin }, dxWatermark: { band: band, reportSurface: reportSurface, forLeftMargin: forLeftMargin, image: reportSurface.watermark.imageSource().getDataUrl(), transparency: reportSurface.watermark.imageTransparency(), viewMode: reportSurface.watermark.imageViewMode(), align: reportSurface.watermark.imageAlign(), tiling: reportSurface.watermark.imageTiling() }"></div>
 <!-- /ko -->
-<!-- ko if: $data.reportSurface.watermark.text() -->
+<!-- ko if: $data.reportSurface.watermark && $data.reportSurface.watermark.text() -->
 <div class="dxrd-band-content-watermark" data-bind="css: {'dxrd-flip': forLeftMargin }, dxWatermark: { band: band, reportSurface: reportSurface, forLeftMargin: forLeftMargin, image: reportSurface._watermarkTextRenderingResult(), transparency: reportSurface.watermark.textTransparency(), viewMode: 'Stretch', align: 'MiddleCenter', tiling: false }"></div>
 <!-- /ko --></script>
 <script type="text/html" id="dxrd-scripts-addon">
@@ -6501,7 +6528,7 @@
 <script type="text/html" id="dxrd-content-type">
     <!-- ko if: value -->
     <!-- ko with: value -->
-    <div data-bind="dxLocalizedSelectBox: { items: $parent.values, value: type, valueExpr: 'value', displayExpr: 'displayValue', displayCustomValue: true, disabled: $parent.disabled, dropDownOptions: { container: $root.getPopupContainer($element) } }"></div>
+    <div data-bind="dxLocalizedSelectBox: { items: $parent.values, value: type, valueExpr: 'value', showClearButton: showClearButton, displayExpr: 'displayValue', displayCustomValue: true, disabled: $parent.disabled, dropDownOptions: { container: $root.getPopupContainer($element) } }"></div>
     <!-- /ko -->
     <!-- /ko -->
 </script>
@@ -6659,6 +6686,13 @@
     </div>
 </script>
 
+<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>
+    </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 }">
@@ -6677,8 +6711,8 @@
     <div class="dxrd-accordion-collection-item" data-bind="dxdAccordion: { collapsed: collapsed, setCollapsed: setCollapsed, getCollapsed: getCollapsed, setCollapsedChangedEvent: setCollapsedChangedEvent }">
         <div class="dxrd-group-header dx-accordion-header dxd-text-primary">
             <div data-bind="styleunit: {'paddingLeft': padding + $root.dx._static.propertiesGridEditorsPaddingLeft }">
-                <div class="propertygrid-editor-collapsed dx-collapsing-image" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed }"></div>
-                <div class="dx-group-header-font dxd-text-primary" data-bind="text: $root.getLocalization(value.name), attr: { title: $root.getLocalization(value.name) }"></div>
+                <div class="dx-collapsing-image dxrd-display-inline-block" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed }"></div>
+                <div class="dx-group-header-font dxd-text-primary dxrd-display-inline-block" data-bind="text: $root.getLocalization(value.name), attr: { title: $root.getLocalization(value.name) }"></div>
             </div>
         </div>
         <div class="dx-accordion-content dxd-back-primary">
@@ -6733,7 +6767,7 @@
 </script>
 
 <script type="text/html" id="dxrd-name">
-    <div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled, inputAttr: { id: editorInputId } }), 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">
@@ -6777,7 +6811,7 @@
 </script>
 
 <script type="text/html" id="dxrd-image-loadfile">
-    <div data-bind="dxImageSourceEditor: { value: value, accept: 'image/*', type: 'img', disabled: disabled, inputAttr: { id: editorInputId}, showClearButton: true }"></div>
+    <div data-bind="dxImageSourceEditor: { value: value, onValueChanged: onValueChanged, accept: 'image/*', type: 'img', disabled: disabled, inputAttr: { id: editorInputId}, showClearButton: true }"></div>
 </script>
 
 <script type="text/html" id="dxrd-pdfcontent-loadfile">
@@ -6819,8 +6853,7 @@
             <div class="dx-culture" data-bind="text: displayValue, style: { 'fontWeight': $root.isLocalized($data.value) ? 'bold' : 'normal' }, attr: { title: displayValue }"></div>
         </div>
     </div>
-</script>
-<script type="text/html" id="dxrd-page-choose-report-type">
+</script><script type="text/html" id="dxrd-page-choose-report-type">
     <div class="dxrd-wizard-type-page" data-bind="css: $data._extendCssClass('type-page')">
         <div class="dxrd-wizard-report-gallery" data-bind="dxList: getListOptions()"></div>
     </div>