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

package/dx-viewer-templates.js

@@ -1,14 +1,14 @@
 /**
 * DevExpress HTML/JS Reporting (dx-viewer-templates.js)
-* Version:  23.1.2-build-2379-1247
-* Build date: Mar 20, 2023
+* Version:  23.2.1-build-23191-1448
+* Build date: Jul 10, 2023
 * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */
 import { SvgTemplatesEngine } from '@devexpress/analytics-core/analytics-widgets-internal';
 SvgTemplatesEngine.addTemplates({
     'dxrd-checkboxcustomglyph': '<div class="dxrd-checkbox-custom-glyph" data-bind="style: $data.customGlyphStyleCss"></div>',
-    'dxrv-preview-date-range-mobile': '<div class="dxrv-preview-date-range-mobile"> <div class="dx-fieldset"> <div class="dx-field"> <div data-bind="dxSelectBox: { dataSource: items, displayExpr: \'displayName\', value: popupModel.textRangeValue, useItemTextAsTitle: true , placeholder: $root.getLocalization(\'Select Period\', \'AnalyticsCoreStringId.Mobile_DateRange_SelectPeriod\') }"></div> </div> <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> <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> </div> </div> </div>',
+    'dxrv-preview-date-range-mobile': '<div class="dxrv-preview-date-range-mobile"> <div class="dx-fieldset"> <div class="dx-field"> <div data-bind="dxSelectBox: { dataSource: items, displayExpr: \'displayName\', value: popupModel.textRangeValue, useItemTextAsTitle: true , placeholder: $root.getLocalization(\'Select Period\', \'AnalyticsCoreStringId.Mobile_DateRange_SelectPeriod\') }"></div> </div> <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 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 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>',
     'dxrd-preview-page-mobile': '<div class="dxrdp-content" data-bind="dxclick: clickToBrick, styleunit: { width: width, height: height }, autoFit: { autoFitBy: $root.reportPreview.autoFitBy, zoom: zoom, width: originalWidth, height: originalHeight, previewSize: $root.reportPreview.previewSize, brickLoading: brickLoading, skipIfInvisible: true }"> <div class="dxrdp-loading-wrapper" data-bind="styleunit: { width: width, height: height, lineHeight: height }, style: { \'background-color\': color }, visible: pageLoading, text: loadingText"> </div> <img class="dxrd-width-100 dxrd-height-100" data-bind="attr: { src: displayImageSrc }, style:{ \'background-color\': color }" /> <div class="dxrdp-active-border" data-bind="css: { \'dxrdp-active\': active() && $parents[1].blocks().length > 1 }, visible: !$root.slideOptions.readerMode"></div> <!-- ko foreach: activeBricks --> <!-- ko template: { name: "dxrd-page-brick-mobile", data: $data } --> <!--/ko--> <!--/ko--> <!-- ko if: !brickLoading() && $data.editingFields--> <!-- ko foreach: editingFields --> <!-- ko template: template --> <!--/ko--> <!--/ko--> <!--/ko--> </div>',
     'dxrd-page-brick-mobile': '<div class="dxrd-report-preview-brick" data-bind="style: { top: topP, left: $data.leftP, right: $data.rightP, height: heightP, width: widthP }, css: { \'dxrd-report-preview-brick-selected\': $data.active }"> </div>',
     'dxrdp-search-mobile': '<!-- ko if: $data.enabled --> <div class="dxrdp-search-wrapper" data-bind="styleunit:{ height: height }, dxrdSearchBar: $data"> <div class="dxrd-mobile-search"> <div class="dxrdp-taptosearch" data-bind="visible: !$data.editorVisible(), dxclick: function(s, e) { $data.focusEditor(e); }"> <div class="dxrdp-taptosearch-text" data-bind="text: $root.getLocalization(\'Tap here to Search\', \'ASPxReportsStringId.WebDocumentViewer_Mobile_TapHereToSearch\')"></div> </div> <div class="dxrdp-search-panel" data-bind="visible: $data.editorVisible()"> <div class="dxrdp-search-editor" data-bind="dxTextBox: { value: searchText, onEnterKey: function() { $data.startSearch(); } }"></div> </div> </div> </div> <!-- /ko -->',
@@ -21,7 +21,7 @@ SvgTemplatesEngine.addTemplates({
     'dxrv-preview-parameters-mobile-content': '<div class="dx-fieldset"> <div data-bind="dxPropertyGrid: { target: ko.observable($data) }"></div> </div>',
     'dxrv-range-parameter-mobile': '<div data-bind="dxrvDateRangeEditor: {value: $data.value(), isMobile: true }"></div>',
     'dxrdp-surface-mobile': '<div class="dxrd-preview-wrapper dxrdp-fullscreen dxrd-preview-surface" data-bind="style: { pointerEvents: $data.documentId === null ? \'none\' : \'\', touchEvents: $data.documentId === null ? \'none\' : \'\' }, styleunit: { top: topOffset, height: previewWrapperSize().height, width: previewWrapperSize().width }, slide: $root.slideOptions, mobileZoom: { zoom: mobileZoom, zoomUpdating: zoomUpdating }, dxclick: function(s,e) { if(!$root.brickEventsDisabled()) { $data.showActions(s,e); } }, css: { \'dxrp-editing-fields-hightlighted\': editingFieldsHighlighted }"> <!-- ko template: {name: \'dxrd-preview-progress-bar\', data: progressBar }--> <!-- /ko --> <div class="dxrd-mobile-content"> <div class="dxrd-mobile-gallery" data-bind="style: { pointerEvents: $data.zoomUpdating() ? \'none\' : \'\', touchEvents: $data.zoomUpdating() ? \'none\' : \'\' }, dxGalleryReportPreview: { dataSource: $root.gallery.items, gallery: $root.gallery, animationEnabled: $root.gallery.animationEnabled, disabled: $data.zoomUpdating, selectedIndex: $root.gallery.selectedIndex, width:\'100%\', height: \'100%\', showIndicator: false, loop: true, onSelectionChanged: onSlide, swipeEnabled: $root.slideOptions.swipeEnabled }"> <div data-options="dxTemplate: { name: \'item\' }"> <div class="dxrd-scrollView-mobile" data-bind="dxScrollView: $root.reportPreview.getScrollViewOptions()"> <div class="dxrd-gallery-blocks" data-bind="style: $root.gallery.contentSize()"> <!-- ko foreach: $data.blocks() --> <!-- ko if: $data.page --> <div class="dxrd-gallery-block" data-bind="styleunit: position, css: $data.classSet"> <div class="dxrd-gallery-block-content" data-bind="styleunit: { width: Math.max(page.width(), position().width), height: Math.max(page.height(), position().height) }, style: { \'background-color\': page.color }"> <div class="dxrdp-active-border" data-bind="css: { \'dxrdp-active\': page.active() && $parents[0].blocks().length > 1, \'dxrdp-page-padding\': $parents[0].blocks().length > 1 }, visible: $root.slideOptions.readerMode"></div> <div class="dxrd-mobile-page" data-bind="styleunit: { width: page.width, height: page.height }, style: { pointerEvents: $root.brickEventsDisabled() ? \'none\' : \'\', touchEvents: $root.brickEventsDisabled() ? \'none\' : \'\' }"> <!-- ko template: { name :\'dxrd-preview-page-mobile\', data: page } --> <!-- /ko --> </div> </div> </div> <!-- /ko --> <!-- /ko --> </div> </div> </div> </div> </div> </div> <input type="text" class="dxrd-display-none" />',
-    'dxrp-editing-field-container': '<div class="dxrp-editing-field-container dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle(), zoom: zoom, css: { active: active(), readonly: field.readOnly() }"> <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()  --> <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 if: active() && !field.readOnly() --> <!-- ko template: { name: editorTemplate, data: data } --> <!--/ko--> <!--/ko--> </div> </div>',
+    'dxrp-editing-field-container': '<div class="dxrp-editing-field-container dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle(), zoom: zoom, css: { active: active(), readonly: field.readOnly() }"> <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}"> <div class="dxrp-editing-field-text-html dxrp-editing-field-text-html-complex" data-bind="style: breakOffsetStyle(), html: htmlValue()"></div> </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--> <!--/ko--> </div> </div>',
     'dxrp-editing-field-text': '<textarea class="dxrp-editing-field-text" data-bind="value: value, valueUpdate: \'keypress\', style: textStyle(), event: { blur: hideEditor, keyup: keypressAction }"></textarea>',
     'dxrp-editing-field-mask': '<div class="dxrp-editing-field-mask" data-bind="dxTextBox: options, childStyle: { style: textStyle(), selector: \'.dx-texteditor-input\'}"></div>',
     'dxrp-editing-field-number': '<div class="dxrp-editing-field-mask" data-bind="dxNumberBox: options, childStyle: { style: textStyle(), selector: \'.dx-texteditor-input\'}"></div>',
@@ -31,39 +31,40 @@ SvgTemplatesEngine.addTemplates({
     'dxrp-editing-field-checkbox': '<div class="dxrp-editing-field-check-container dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle(), zoom: zoom, click: onClick"> <div class="dxrp-editing-field-check" tabindex="1" data-bind="style: checkStyle(), template: {name: $data.checkStateStyleIcon, if: !!ko.unwrap($data.checkStateStyleIcon)}"> </div> </div>',
     'dxrp-editing-field-radio': '<div class="dxrp-editing-field-check-container dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle(), zoom: zoom, click: onClick"> <div class="dxrp-editing-field-check" data-bind="style: checkStyle()"> <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 760 760" preserveAspectRatio="xMidYMid meet"> <g fill="#010101" stroke="none"> <path d="M32,380a348,348 0 1,0 696,0a348,348 0 1,0 -696,0" class="highlight dxrd-stroke-width-50 dxrd-stroke-rgb-0"  /> <path d="M185,380a195,195 0 1,0 390,0a195,195 0 1,0 -390,0" data-bind="style: { fill: checked() ? \'black\' : \'transparent\' }" /> </g> </svg> </div> </div>',
     'dxrp-character-comb-editing-field': '<div class="dxrp-editing-field-charactercomb dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle(), dxclick: activateEditor, zoom: zoom, css: { active: active(), readonly: field.readOnly() }"> <!-- ko if: !active() || field.readOnly()  --> <!-- ko foreach: cells --> <div class="dxrp-editing-field-charactercomb-cell" data-bind="style: style, text: text"></div> <!-- /ko --> <!-- /ko --> <!-- ko if: active() && !field.readOnly() --> <textarea  class="dxrp-editing-field-text dxrd-background-white" data-bind="value: field._editorValue, valueUpdate: \'keypress\', style: textStyle(), event: { blur: hideEditor, keyup: keypressAction }"></textarea> <!--/ko--> </div>',
-    'dxrd-export-tool-content': '<div class="dxrd-visually-hidden"> <form data-bind="attr: { \'action\': exportActionUri }, foreach: exportFormData" method="post"> <input data-bind="attr: {\'name\': name, \'value\': value}"/> </form> </div> <div data-bind="dxPopup: { width: popupWidth, height: popupHeight, title: getPopupTitle(), visible: popupVisible, showCloseButton: true, toolbarItems: popupButtons, wrapperAttr: { class: \'dxrd-print-dialog dx-editors dx-widget\' }, container: $root.getPopupContainer($element), position: { of: $root.getPopupContainer($element) } }"> <div class="dx-popup-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 --> <div class="dxrdp-print-text-prefix" data-bind="text: printingTextPrefix"></div> <!-- /ko --> <a href="" class="dxrd-preview-printing-link" data-bind="click: printingLinkCallback, text: $root.getLocalization(\'document in PDF format\', \'ASPxReportsStringId.WebDocumentViewer_Print_Popup_LinkText\')"></a> <!-- ko if: $data.printingTextPostfix --> <div class="dxrdp-print-text-postfix" data-bind="text: printingTextPostfix"></div> <!-- /ko --> </div> </div>',
-    'dxrd-preview-export-options': '<div class="dxrd-preview-export-options-wrapper dxrd-preview-property-wrapper" data-bind="visible: active() && visible()"> <div class="dxrd-right-panel-header dxd-text-primary"> <span data-bind="text: $root.getLocalization(\'Export Options\', \'DevExpress.XtraReports.UI.XtraReport.ExportOptions\')"></span> </div> <!-- 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> </div> <!-- /ko --></div>',
-    '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="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) }"> <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> <!-- /ko --> <!--ko ifnot: $data.format --> <div class="dxrd-preview-export-item-image-wrapper"> <div class="dxrd-preview-export-item-image" data-bind="css: ko.unwrap($data.imageClassName), template: ko.unwrap($data.imageTemplateName)"> </div> </div> <div class="dx-menu-item-popout-container"> <div class="dx-menu-item-popout"></div> </div> <!-- /ko --> </div> </div> </div> <div class="dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary" data-bind="visible: $data.hasSeparator"></div> </div>',
+    'dxrd-export-tool-content': '<div class="dxrd-visually-hidden"> <form data-bind="attr: { \'action\': exportActionUri }, foreach: exportFormData" method="post"> <input data-bind="attr: {\'name\': name, \'value\': value}"/> </form> </div> <div data-bind="dxPopup: { width: popupWidth, height: popupHeight, title: getPopupTitle(), visible: popupVisible, showCloseButton: true, toolbarItems: popupButtons, wrapperAttr: { class: \'dxrd-print-dialog dx-editors dx-widget\' }, container: $root.getPopupContainer($element), position: { of: $root.getPopupContainer($element) } }"> <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 --> <div class="dxrdp-print-text-prefix" data-bind="text: printingTextPrefix"></div> <!-- /ko --> <a href="" class="dxrd-preview-printing-link" data-bind="click: printingLinkCallback, text: $root.getLocalization(\'document in PDF format\', \'ASPxReportsStringId.WebDocumentViewer_Print_Popup_LinkText\')"></a> <!-- ko if: $data.printingTextPostfix --> <div class="dxrdp-print-text-postfix" data-bind="text: printingTextPostfix"></div> <!-- /ko --> </div> </div>',
+    'dxrd-preview-export-options': '<div class="dxrd-preview-export-options-wrapper dxrd-preview-property-wrapper" data-bind="visible: active() && visible()"> <div class="dxrd-right-panel-header dxd-text-primary"> <span data-bind="text: $root.getLocalization(\'Export Options\', \'DevExpress.XtraReports.UI.XtraReport.ExportOptions\')"></span> </div> <!-- 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 class="dxrd-right-panel-content dxrd-export-options-content" data-bind="dxPropertyGrid: { target: model }"></div> </div> </div> <!-- /ko --></div>',
+    'dxrd-preview-export-to': '<div class="dxrd-preview-export-toolbar-item dxrd-toolbar-item" data-bind="visible: visible"> <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, 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> <!-- /ko --> <!--ko ifnot: $data.format --> <div class="dxrd-preview-export-item-image-wrapper"> <div class="dxrd-preview-export-item-image" data-bind="css: ko.unwrap($data.imageClassName), template: ko.unwrap($data.imageTemplateName)"> </div> </div> <div class="dx-menu-item-popout-container"> <div class="dx-menu-item-popout"></div> </div> <!-- /ko --> </div> </div> </div> <div class="dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary" data-bind="visible: $data.hasSeparator"></div> </div>',
     'dxrd-page-brick-clickable': '<div class="dxrd-report-preview-brick" data-bind="dxclick: function(_, event){ onClick(event); event.stopPropagation(); }, style: { top: topP, left: $data.leftP, right: $data.rightP, height: heightP, width: widthP }, css: { \'dxrd-report-preview-brick-selected\': $data.active, \'dxrd-report-preview-brick-selectable\': !($data.bricks) }"> <!-- ko if: $data.navigation --> <div class="dxrd-report-preview-brick-navigation" data-bind="css: { \'dxrdp-navigation-brick-drill-down\' : !!navigation.drillDownKey, \'dxrdp-navigation-brick-sorting\' : !!navigation.sortData, \'dxrdp-navigation-brick-sorting-desc\': navigation.sortData && navigation.sortData.order === 1, \'dxrdp-navigation-brick-sorting-asc\': navigation.sortData && navigation.sortData.order === 2 }"></div> <!--/ko--> </div>',
     '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\': $parent.currentPageAriaLabelImgAlt($data.pageIndex) }, dxclick: clickToBrick, \'brick-selection-prog\': { page: $data, preview: $parent, click: function(pageIndex) { $parent.goToPage(pageIndex) } }"> <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\': $parent.currentPageAriaLabelImgAlt($data.pageIndex) }" /> <!-- ko foreach: activeBricks --> <!-- ko template: { name: "dxrd-page-brick-mobile", data: $data } --> <!--/ko--> <!--/ko--> <!-- ko foreach: clickableBricks --> <!-- ko template: { name: "dxrd-page-brick-clickable", data: $data } --> <!--/ko--> <!--/ko--> <!-- ko if: !brickLoading() && $data.editingFields--> <div data-bind="accessibilityKeyboardHelper: $data.editingFieldsKeyboardHelper"> <!-- ko foreach: editingFields --> <!-- ko template: template --> <!--/ko--> <!--/ko--> </div> <!--/ko--> </div> </div>',
     'dxrp-popup-editing-field-image': '<div class="dxrp-editing-field-container" data-bind="style: containerStyle() "> <div class="dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="dxclick: activateEditor, css: parentPopupClass"> <div class="dxrp-editing-field-popup-container-cloned" data-bind="dxPainter: $data.getPainter()"></div> <!-- ko template: { name: \'dx-picture-editing-popup\', data: $data.getPopupData() } --> <!-- /ko --> </div> </div>',
-    'dx-picture-editing-popup': '<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(), showTitle: false, target: getContainer(), deferRendering: false, hideOnOutsideClick: true, showCloseButton: false, onContentReady: onContentReady, onHiding: onHiding, onShown: onShown, shading: shading, wrapperAttr: { class: \'dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen\' }, animation: { show: { type: \'slide\', duration: 0, to: { opacity: 1 }, from: { opacity: 0 } }, hide: { type: \'fade\', duration: 100, to: { opacity: 0 }, from: { opacity: 1 } } }, visible: isVisible($element) }"> <!-- ko if: showContent --> <!-- ko template: { name: contentTemplate, data: contentData, afterRender: $data.renderedHandler } --> <!--/ko--> <!--/ko--> </div>',
-    '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="dxrd-toolbar-item-zoom-editor" data-bind="dxSelectBox: { items: zoomItems, value: $data.zoom, displayExpr: displayExpr, displayCustomValue: true, acceptCustomValue: true, onCustomItemCreating: onCustomItemCreating, useItemTextAsTitle: true, width: 140, dropDownOptions: { container: $root.getPopupContainer($element), position: { my: \'left top\', at: \'left bottom\', of: $element }, wrapperAttr: { class: \'dx-zoom-selectbox-popup-wrapper\' } }, tabIndex: \'-1\', inputAttr: { \'aria-label\': $root.getLocalization(\'Zoom\', \'ASPxReportsStringId.WebDocumentViewer_AriaLabelZoomCombobox\') }}"> </div> </div> </div>',
+    'dx-picture-editing-popup': '<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: $root.getPopupContainer($element), of: getPositionTarget($element), collision: \'flipfit flipfit\' }, container: $root.getPopupContainer($element), showTitle: false, target: $root.getPopupContainer($element), deferRendering: false, hideOnOutsideClick: true, showCloseButton: false, onContentReady: onContentReady, onHiding: onHiding, onShown: onShown, shading: shading, wrapperAttr: { class: \'dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen\' }, animation: { show: { type: \'slide\', duration: 0, to: { opacity: 1 }, from: { opacity: 0 } }, hide: { type: \'fade\', duration: 100, to: { opacity: 0 }, from: { opacity: 1 } } }, visible: isVisible($element) }"> <!-- ko if: showContent --> <!-- ko template: { name: contentTemplate, data: contentData, afterRender: $data.renderedHandler } --> <!--/ko--> <!--/ko--> </div>',
+    '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: zoomItems, value: $data.zoom, displayExpr: displayExpr, displayCustomValue: true, acceptCustomValue: true, onCustomItemCreating: onCustomItemCreating, useItemTextAsTitle: true, width: 140, dropDownOptions: { container: $root.getPopupContainer($element), position: { my: \'left top\', at: \'left bottom\', of: $element }, wrapperAttr: { class: \'dx-zoom-selectbox-popup-wrapper\' } }, tabIndex: \'-1\', inputAttr: { \'aria-label\': $root.getLocalization(\'Zoom\', \'ASPxReportsStringId.WebDocumentViewer_AriaLabelZoomCombobox\') }}"> </div> </div> </div>',
     '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, accessibilityKeyboardHelper: $data.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>',
-    'dxrd-preview-search': '<div role="search" aria-haspopup="listbox" class="dxrd-preview-search-wrapper" data-bind="visible: active() && visible(), accessibilityKeyboardHelper: $data.keyboardHelper"> <div id="dxrd-preview-search-live-region" class="dxrd-visually-hidden" aria-live="polite" aria-atomic="true"></div> <!-- 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-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\' }" > <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.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 --> </div>',
+    'dxrd-preview-search': '<div role="search" aria-haspopup="listbox" class="dxrd-preview-search-wrapper" data-bind="visible: active() && visible(), accessibilityKeyboardHelper: $data.keyboardHelper"> <div id="dxrd-preview-search-live-region" class="dxrd-visually-hidden" aria-live="polite" aria-atomic="true"></div> <!-- 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-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\' }" > <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.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 --> </div>',
     '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: $data.cssClasses, accessibilityKeyboardHelper: $data.progressBarAccessibility"> <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: cancelText, visible: $data.cancelVisible, dxAction: { model: $data, action: function() { $data.stop && stop(); }}"></div> </div>',
-    '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: $root.getLocalization(\'Preview Parameters\', \'ASPxReportsStringId.ReportDesigner_Preview_ParametersTitle\')"></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: $root.getLocalization(\'The report does not contain any parameters.\', \'ASPxReportsStringId.WebDocumentViewer_NoParameters\')"></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: {}, accessibilityKeyboardHelper: $data.keyboardHelper"> <div role="tablist" class="dx-fieldset dxrd-right-panel-content"> <!-- ko template: { name: \'dx-propertieseditor\', data: $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: { text: $root.getLocalization(\'Reset\', \'ASPxReportsStringId.ParametersPanel_Reset\'), onClick: function() { model.restore(); } }"></div> <div class="dxrd-preview-parameter-action dxrdp-parameters-submit dx-accessibility-focus-border-accented" data-bind="dxButton: { text: $root.getLocalization(\'Submit\', \'ASPxReportsStringId.ParametersPanel_Submit\'), onClick: function(params) { model.validateAndSubmit(params); } }"></div> </div> </div> <!-- /ko --> </div>',
-    '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="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\') } }"> </div> </div> <div class="dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary" data-bind="visible: $data.hasSeparator"></div> </div>',
+    '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: $root.getLocalization(\'Preview Parameters\', \'ASPxReportsStringId.ReportDesigner_Preview_ParametersTitle\')"></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: $root.getLocalization(\'The report does not contain any parameters.\', \'ASPxReportsStringId.WebDocumentViewer_NoParameters\')"></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: {}, accessibilityKeyboardHelper: $data.keyboardHelper"> <div role="tree" class="dx-fieldset dxrd-right-panel-content"> <!-- ko template: { name: \'dx-propertieseditor\', data: $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: { text: $root.getLocalization(\'Reset\', \'ASPxReportsStringId.ParametersPanel_Reset\'), onClick: function() { model.restore(); } }"></div> <div class="dxrd-preview-parameter-action dxrdp-parameters-submit dx-accessibility-focus-border-accented" data-bind="dxButton: { text: $root.getLocalization(\'Submit\', \'ASPxReportsStringId.ParametersPanel_Submit\'), onClick: function(params) { model.validateAndSubmit(params); } }"></div> </div> </div> <!-- /ko --> </div>',
+    '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: 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\', \'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> </div>',
     '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 --> <div class="dxrd-right-panel-body" data-bind="dxScrollView: { showScrollbar: \'onHover\', useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option(\'useKeyboard\', false); } }, accessibilityKeyboardHelper: $parent.keyboardHelper"> <div role="tree" id="documentMapTree" data-bind="treelist: documentMapOptions" class="dxrd-width-100 dxrd-height-100"></div> </div> <!-- /ko --> <!-- /ko --></div>',
     '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 --> <!-- ko template: { name: templateName, data: model }--> <!-- /ko --> <!-- /ko --> </div>',
-    'dxrdp-surface': '<div class="dxrd-preview-wrapper" data-bind="textCopier, css: { \'dx-rtl\': $data.rtlReport, \'dxrp-editing-fields-hightlighted\': editingFieldsHighlighted } "> <!-- ko with: progressBar--> <!-- ko template: \'dxrd-preview-progress-bar\'--> <!-- /ko --> <!-- /ko --> <div class="dxrd-preview-surface" data-bind="accessibilityKeyboardHelper: $data.previewBrickKeyboardHelper"> <!-- ko if: !showMultipagePreview() --> <div class="dxrd-report-preview-holder"> <!-- 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 }"> <!-- ko template: { name: \'dxrd-preview-page\', afterRender: function() { $parent.delayedInit() } }--> <!-- /ko --> </div> <!-- /ko --> <!-- /ko --> </div> <!-- /ko --> <!-- ko if: showMultipagePreview() && !!currentPage() --> <div class="dxrd-report-preview-holder" 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 }"> <!-- ko template: \'dxrd-preview-page\'--> <!-- /ko --> </div> <!-- /ko --> <!-- /ko --> </div> <!-- /ko --> <div data-bind="css: { \'dxrd-visually-hidden\': currentPage() }" class="dxrd-report-preview-placeholder"> <div aria-live="assertive" aria-atomic="true" class="dxd-empty-area-placeholder-text-color dxd-text-info" data-bind="text: emptyDocumentCaption()"></div> </div> </div> </div> <div id="dxrd-preview-bricks-live-region" class="dxrd-visually-hidden" aria-live="polite" aria-atomic="true"></div> <div id="clipboard-container" class="dxrd-position-absolute dxrd-top--100px"><textarea disabled data-bind="attr: { \'aria-label\': $root.getLocalization(\'Clipboard\', \'ASPxReportsStringId.WebDocumentViewer_AriaClipboard\') }" id="clipboard"></textarea></div>',
+    'dxrdp-surface': '<div class="dxrd-preview-wrapper" data-bind="textCopier, css: { \'dx-rtl\': $data.rtlReport, \'dxrp-editing-fields-hightlighted\': editingFieldsHighlighted } "> <!-- ko with: progressBar--> <!-- ko template: \'dxrd-preview-progress-bar\'--> <!-- /ko --> <!-- /ko --> <div class="dxrd-preview-surface" data-bind="accessibilityKeyboardHelper: $data.previewBrickKeyboardHelper"> <!-- ko if: !showMultipagePreview() --> <div class="dxrd-report-preview-holder" role="list"> <!-- ko with: currentPage--> <!-- ko if: pageLoading() || (!pageLoading() && displayImageSrc()) --> <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> <!-- /ko --> <!-- /ko --> </div> <!-- /ko --> <!-- ko if: showMultipagePreview() && !!currentPage() --> <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="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> <!-- /ko --> <!-- /ko --> </div> <!-- /ko --> <div data-bind="css: { \'dxrd-visually-hidden\': currentPage() }" class="dxrd-report-preview-placeholder"> <div aria-live="assertive" aria-atomic="true" class="dxd-empty-area-placeholder-text-color dxd-text-info" data-bind="text: emptyDocumentCaption()"></div> </div> </div> </div> <div id="dxrd-preview-bricks-live-region" class="dxrd-visually-hidden" aria-live="polite" aria-atomic="true"></div> <div id="clipboard-container" class="dxrd-position-absolute dxrd-top--100px"><textarea disabled data-bind="attr: { \'aria-label\': $root.getLocalization(\'Clipboard\', \'ASPxReportsStringId.WebDocumentViewer_AriaClipboard\') }" id="clipboard"></textarea></div>',
     'dxrd-export-tool': '<div data-bind="dxViewerExport: $data"></div>',
-    '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> <!-- ko template: { name: popupTemplate, data: popupModel } --> <!-- /ko --> </div>',
-    'dxrv-daterange-editor-popup': '<div role="dialog" aria-modal="true" data-bind="dxPopup: { width: \'max-content\', height: $root.calculateWithZoomFactor(362), wrapperAttr: { class: \'dxrv-daterange-editor-popup-wrapper\' }, position: { my: \'right top\', at: \'right bottom\', of: $data._$element, collision: \'fit fit\', offset: \'1 -1\' }, container: $root.getPopupContainer($element), target: $root.getPopupContainer($element), showTitle: false, showCloseButton: false, hideOnOutsideClick: true, animation: {}, shading: false, visible: _popupVisible }"> <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 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) }}"> <div class="dx-accessibility-field-background dxd-back-accented"></div> <!-- ko text: displayName --> <!-- /ko --> </div> <!-- /ko --> </div> <div class="dxrv-daterange-editor-item"> <div class="dx-accessibility-container-background dxd-back-accented"></div> <!-- ko template: { name: \'dxrv-daterange-calendar\', data: _createTemplateData(startDate, undefined) } --> <!-- /ko --> </div> <div class="dxrv-daterange-editor-item"> <div class="dx-accessibility-container-background dxd-back-accented"></div> <!-- ko template: { name: \'dxrv-daterange-calendar\', data: _createTemplateData(endDate, startDate) } --> <!-- /ko --> </div> </div> </div> </div>',
-    '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 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> </div> </div>',
+    '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, id: _editorInputId }, openOnFieldClick: true, buttonAction: function() { $data._showPopup(); } }"></div> <!-- ko template: { name: popupTemplate, data: popupModel } --> <!-- /ko --> </div>',
+    'dxrv-daterange-editor-popup': '<div role="dialog" aria-modal="true" data-bind="dxPopup: { width: \'max-content\', height: $root.calculateWithZoomFactor(362), wrapperAttr: { class: \'dxrv-daterange-editor-popup-wrapper\' }, position: { my: \'right top\', at: \'right bottom\', of: $data._$element, collision: \'fit fit\', offset: \'1 -1\' }, container: $root.getPopupContainer($element), target: $root.getPopupContainer($element), showTitle: false, showCloseButton: false, hideOnOutsideClick: true, animation: {}, shading: false, visible: _popupVisible }"> <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="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) }}"> <div class="dx-accessibility-field-background dxd-back-accented"></div> <!-- ko text: displayName --> <!-- /ko --> </div> <!-- /ko --> </div> <div class="dxrv-daterange-editor-item"> <div class="dx-accessibility-container-background dxd-back-accented"></div> <!-- ko template: { name: \'dxrv-daterange-calendar\', data: _createTemplateData(startDate, undefined) } --> <!-- /ko --> </div> <div class="dxrv-daterange-editor-item"> <div class="dx-accessibility-container-background dxd-back-accented"></div> <!-- ko template: { name: \'dxrv-daterange-calendar\', data: _createTemplateData(endDate, startDate) } --> <!-- /ko --> </div> </div> </div> </div>',
+    'dxrv-daterange-calendar': '<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> </div> </div>',
     'dxrv-range-parameter': '<div data-bind="dxrvDateRangeEditor: {value: $data.value() }"></div>',
     'dxrd-propertieseditor': '<div data-bind="css: { \'dx-rtl\' : rtl }"> <div class="dx-editors"> <div class="dx-fieldset dxrd-parameters-fieldset dxd-border-primary"> <!-- ko foreach: getEditors() --> <!-- ko template: editorTemplate --> <!-- /ko --> <!-- /ko --> </div> </div> </div>',
     'dxrd-parameters-editor-content': '<!-- ko if: visible --> <div class="dxrd-parameters-group" data-bind="template: { name: \'dxrd-propertieseditor\', data: viewmodel }, css: { \'dxrd-parameters-border\' : !$data.hideBorder, \'dxrd-parameters-horizontal\' : $data.showHorizontally, }"> </div> <!-- /ko -->',
     'dxrd-parameters-separator': '<div class="dxrd-parameters-item-separator"> <div class="dxrd-item-separator dxd-border-secondary"></div> </div>',
-    'dxrd-multivalue': '<!-- ko with: value --> <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 }, 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\' } } }), dxValidator: { validationRules: $parent.validationRules || [] }"> </div> <!-- /ko -->',
+    'dxrd-multivalue': '<!-- ko with: value --> <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, 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\' } } }), dxValidator: { validationRules: $parent.validationRules || [] }"> </div> <!-- /ko -->',
     'dxrd-multivalue-editable': '<!-- ko if: value --> <div class="dxrd-editor" data-bind="visible: visible"> <div data-bind="dxCollectionEditor: { values: value, info: info, level: level, displayName: $root.getLocalization(displayName) }"> <div data-bind="dxPropertyGrid: { target: value, level: editor.level + 1 }"></div> </div> </div> <!-- /ko -->',
-    '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-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\') }, css: { \'dxrd-accessibility-accordion-trigger dx-accessibility-focus-border-accented\': isComplexEditor, \'dxrd-vertical-label\': $data.editorOptions && $data.editorOptions.hasVerticalLabel }"> <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 }"> <!-- ko if: isComplexEditor --> <div data-bind="enable: templateName === \'dx-emptyHeader\'"> <!-- ko ifnot: $data.hideCollapsingImage --> <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 --> <div class="dx-group-header-font" data-bind="searchHighlighting: { text: displayName, textToSearch: textToSearch }, attr: { \'title\': displayName }"></div> <!-- /ko --> <!-- ko ifnot: !!$data.textToSearch --> <div class="dx-group-header-font" data-bind="text: displayName, attr: { \'title\': displayName }"></div> <!-- /ko --> </div> <!-- /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> <!-- /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> <!-- /ko --> <!-- /ko --> </div> <div class="dx-field-value" data-bind="css: { \'dxd-border-accented\': $data.isPropertyHighlighted }"> <div data-bind="service: { name: \'createEditorAddOn\' }"></div> <!-- ko if: templateName !== \'dx-emptyHeader\' --> <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: $data.isRendered } --> <!-- /ko --> <!-- /ko --> </div> </div> <!-- /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\' }"> <!-- ko if: (!$data.editorCreated || editorCreated) --> <!-- ko template: contentTemplateName --> <!-- /ko --> <!-- /ko --> </div> <!-- /ko --> </div> </div>',
-    'dx-picture-editing': '<div class="dx-picture-editing"> <canvas data-bind="zoom: painter.scale"></canvas> <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\', showTitle: false, onContentReady: function(e) { e.component && e.component.registerKeyHandler(\'tab\', function(_) { $data.active(false); }); }, showCloseButton: false, animation: {}, shading: false, visible: $data.active }"> <div data-options="dxTemplate: { name: \'content\' }"> <div class="dx-picture-editing-toolbar" data-bind="foreach: $data.actions"> <div class="dx-picture-editing-toolbar-item" data-bind="dxclick: $data.action, attr: { title: title }"> <div class="dx-picture-editing-toolbar-item-icon" data-bind="template: { name: icon, afterRender: $data.renderedHandler }"> </div> </div> <!-- ko template: { if: $data.template, name: $data.template, data: $data.templateOptions }--> <!-- /ko --> </div> </div> </div> </div>',
+    'dxrd-parameters-property-editor': '<div class="dx-editor" data-bind="visible: visible"> <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: \'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 }"> <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.alwaysShow() }"> <!-- 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> <!-- /ko --> <!-- ko if: !!$data.textToSearch --> <div class="dx-group-header-font" data-bind="searchHighlighting: { text: displayName, textToSearch: textToSearch }, attr: { \'title\': displayName }"></div> <!-- /ko --> <!-- ko ifnot: !!$data.textToSearch --> <div class="dx-group-header-font" data-bind="text: displayName, attr: { \'title\': displayName }"></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: 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> <!-- /ko --> <!-- /ko --> </div> <div class="dx-field-value" data-bind="css: { \'dxd-border-accented\': $data.isPropertyHighlighted }"> <div data-bind="service: { name: \'createEditorAddOn\' }"></div> <!-- ko if: templateName !== \'dx-emptyHeader\' --> <!-- ko lazy: { innerBindings: { template: templateName }, isResolved: $data.isRendered } --> <!-- /ko --> <!-- /ko --> </div> </div> <!-- /ko --> </div> <!-- ko if: isComplexEditor --> <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 --> <!-- /ko --> </div> <!-- /ko --> </div> </div>',
+    'dx-picture-editing': '<div class="dx-picture-editing"> <canvas data-bind="zoom: painter.scale"></canvas> <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: $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(_) { $data.active(false); }); }, showCloseButton: false, animation: {}, shading: false, visible: $data.active }"> <div data-options="dxTemplate: { name: \'content\' }"> <div class="dx-picture-editing-toolbar" data-bind="foreach: $data.actions"> <div class="dx-picture-editing-toolbar-item" data-bind="dxclick: $data.action, attr: { title: title }"> <div class="dx-picture-editing-toolbar-item-icon" data-bind="template: { name: icon, afterRender: $data.renderedHandler }"> </div> </div> <!-- ko template: { if: $data.template, name: $data.template, data: $data.templateOptions }--> <!-- /ko --> </div> </div> </div> </div>',
     'dx-painter': '<div class="dx-painter"> <canvas data-bind="zoom: scale"></canvas> </div>',
-    'dx-picture-editing-toolbar-popup': '<div class="dx-picture-edit-popup-content" data-bind="dxPopover: { width: width, height: height, wrapperAttr: { class: \'dx-picture-edit-popup-content\' }, 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(), showTitle: false, target: getPositionTarget(), showCloseButton: false, shading: false, animation: {}, visible: visible }"> <!-- ko template: { name: contentTemplate, data: contentData } --> <!--/ko--> </div>',
+    'dx-picture-editing-toolbar-popup': '<div class="dx-picture-edit-popup-content" data-bind="dxPopover: { width: width, height: height, wrapperAttr: { class: \'dx-picture-edit-popup-content\' }, hideOnOutsideClick: $data.hideOnOutsideClick, onShown: $data.onShown, onContentReady: $data.onContentReady, 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($element), showCloseButton: false, shading: false, animation: {}, visible: visible }"> <!-- ko template: { name: contentTemplate, data: contentData } --> <!--/ko--> </div>',
     'dx-picture-editing-brush-options': '<div class="dx-picture-editing-brush-options"> <div class="dx-picture-editing-line-width"> <div class="dx-picture-editing-text" data-bind="text: brushWidthText"></div> <div class="dx-picture-editing-line-width-slider" data-bind="dxSlider: { min: 1, max: 9, value: $data.lineWidth, label: { visible: true }, tooltip: { enabled: true, showMode: \'always\', position: \'bottom\' } }"></div> </div> <div class="dx-picture-editing-line-color"> <div class="dx-picture-editing-text" data-bind="text: brushColorText"></div> <div class="dx-picture-editing-brush-options-colors" data-bind="foreach: $data.colors"> <div class="dx-picture-editing-brush-options-color" data-bind="css: { selected: $data.isSelected }"> <div class="dx-picture-editing-brush-options-color-cell" data-bind="style: { background: $data.value }, dxclick: $data.action"></div> </div> </div> </div> </div>',
     'dx-picture-editing-sizemode-alignment': '<div class="dx-picture-editing-sizemode-alignment"> <div class="dx-picture-editing-sizemode"> <div class="dx-picture-editing-text" data-bind="text: sizeModeText"></div> <div class="dx-picture-editing-sizemode-values" data-bind="foreach: { data: sizeModeValues }"> <div class="dx-picture-editing-sizemode-alignment-value" data-bind="css: { selected: isSelected }, template: $data.iconTemplate, dxclick: $data.action, attr: { title: $data.attrTitle }"> </div> </div> </div> <div class="dx-picture-editing-alignment"> <div class="dx-picture-editing-text" data-bind="text: alignmentText"></div> <div class="dx-picture-editing-alignment-values" data-bind="foreach: { data: alignmentValues }"> <div class="dx-picture-editing-sizemode-alignment-value" data-bind="css: { selected: isSelected }, template: $data.iconTemplate, dxclick: $data.action, , attr: { title: $data.attrTitle }"> </div> </div> </div> </div>',
     'dx-picture-editing-imagepickerwithfilter': '<div class="dx-picture-editing-filtercontent" data-bind="styleunit: { width: contentWidth }"> <div class="dx-picture-editing-filtercontent-editor" data-bind="dxTextBox: { value: filter, valueChangeEvent: \'keyup\', placeholder: searchPlaceholder(), showClearButton: true  }"></div> <div class="dx-picture-editing-filtercontent-images"> <!-- ko template: \'dx-picture-editing-imagespicker\' --> <!-- /ko --> </div> </div>',
     'dx-picture-editing-imagespicker': '<div class="dx-picture-editing-imagescontainer dxd-text-primary" data-bind="styleunit: { width: contentWidth }, dxScrollView: { showScrollbar: \'onHover\', useNative: false, scrollByThumb: true }"> <!-- ko foreach: images --> <div class="dx-picture-editing-block dxd-state-normal dxd-back-highlighted" data-bind="styleunit: { width: $parent.width + 10 }, visible: visible, click: function() { $parent.action($data); }"> <div class="dx-picture-editing-block-image" data-bind="styleunit: { width: $parent.width, height: $parent.height }, style: { backgroundImage: \'url(\' + ($data.url || $data.data) + \')\' }"></div> <!-- ko if: $data.text--> <!-- ko if: $parent.filterEnabled --> <div class="dx-picture-editing-block-text" data-bind="searchHighlighting: { text: $data.text, textToSearch: $parent.filter }, attr: { title: $data.text }"></div> <!-- /ko --> <!-- ko ifnot: $parent.filterEnabled --> <div class="dx-picture-editing-block-text" data-bind="text: $data.text, attr: { title: $data.text }"></div> <!-- /ko --> <!-- /ko --> </div> <!-- /ko --> </div>',
-    '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>'
+    '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>',
+    '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>'
 });

package/dx-webdocumentviewer-imports.d.ts

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (dx-webdocumentviewer-imports.d.ts)
-* Version:  23.1.2-build-2379-1247
-* Build date: Mar 20, 2023
+* Version:  23.2.1-build-23191-1448
+* Build date: Jul 10, 2023
 * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */

package/dx-webdocumentviewer-imports.js

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (dx-webdocumentviewer-imports.js)
-* Version:  23.1.2-build-2379-1247
-* Build date: Mar 20, 2023
+* Version:  23.2.1-build-23191-1448
+* Build date: Jul 10, 2023
 * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */

package/dx-webdocumentviewer.d.ts

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (dx-webdocumentviewer.d.ts)
-* Version:  23.1.2-build-2379-1247
-* Build date: Mar 20, 2023
+* Version:  23.2.1-build-23191-1448
+* Build date: Jul 10, 2023
 * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */

package/dx-webdocumentviewer.js

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (dx-webdocumentviewer.js)
-* Version:  23.1.2-build-2379-1247
-* Build date: Mar 20, 2023
+* Version:  23.2.1-build-23191-1448
+* Build date: Jul 10, 2023
 * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */

package/index.d.ts

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (index.d.ts)
-* Version:  23.1.2-build-2379-1247
-* Build date: Mar 20, 2023
+* Version:  23.2.1-build-23191-1448
+* Build date: Jul 10, 2023
 * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */

package/index.js

@@ -1,7 +1,7 @@
 /**
 * DevExpress HTML/JS Reporting (index.js)
-* Version:  23.1.2-build-2379-1247
-* Build date: Mar 20, 2023
+* Version:  23.2.1-build-23191-1448
+* Build date: Jul 10, 2023
 * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
 * License: https://www.devexpress.com/Support/EULAs/universal.xml
 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devexpress-reporting",
-  "version": "23.1.2-build-2379-1247",
+  "version": "23.2.0-build-000-1111",
   "homepage": "https://www.devexpress.com/",
   "bugs": "https://www.devexpress.com/support/",
   "author": "Developer Express Inc.",
@@ -20,7 +20,7 @@
     "knockout": "~3.5.0"
   },
   "peerDependencies": {
-    "@devexpress/analytics-core": "23.1.2-build-2379-1247"
+    "@devexpress/analytics-core": "23.2.1-build-23191-1448"
   },
   "devDependencies": {
     "webpack": "^1.13.1"