devexpress-reporting/dx-viewer-templates.js

DevExpress Reporting provides the capability to develop a reporting application to create and customize reports.

/**
* DevExpress HTML/JS Reporting (dx-viewer-templates.js)
* Version:  20.2.13
* Build date: Apr 10, 2023
* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
* License: https://www.devexpress.com/Support/EULAs/universal.xml
*/
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var analytics_widgets_internal_1 = require("@devexpress/analytics-core/analytics-widgets-internal");
analytics_widgets_internal_1.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, 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>',
    '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, alwaysRecalculate: true, 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 style="width:100%; 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 -->',
    'dxrd-preview-export-to-mobile': '<div class="dxrd-preview-export-to" data-bind="dxMenu: { items: items, onItemClick: clickAction }, attr: { title: $root.getLocalization(text, $data.textId) }"> <div class="dxrd-preview-export-menu-item" data-options="dxTemplate: { name: \'item\' }" data-bind="attr: { title: $root.getLocalization(text, $data.textId) }"> <!--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: { name: ko.unwrap($data.imageTemplateName), if: !!ko.unwrap($data.imageTemplateName)}"> </div> </div> <div class="dx-menu-item-popout-container"> <div class="dx-menu-item-popout"></div> </div> <!-- /ko --> </div> </div>',
    'dxrdp-surface-mobile-bottom': '<div class="dxrdp-mobile-actions" data-bind="visible: visible"> <div class="dxrdp-mobile-actions-content"> <!-- ko foreach: actions --> <div class="dxrdp-mobile-action" data-bind="visible: visible, css: $data.imageClassName, template: { name: $data.imageTemplateName, if: !!ko.unwrap($data.imageTemplateName)}, dxclick: clickAction"> </div> <!-- ko if: $data.content --> <!-- ko template: $data.content --> <!-- /ko --> <!-- /ko --> <!-- /ko --> </div> </div>',
    'dxrdp-pages-mobile': '<div class="dxrdp-mobile-paginator" data-bind="dxrdMobilePaginator: $data"> <div class="dxrdp-mobile-paginator-content"> <div class="dxrdp-mobile-paginator-text" data-bind="text : text"></div> </div> </div>',
    'dxrd-menu-export-content': '<div class="dxrd-menu-export-popover" data-bind="dxPopover: { width: \'266px\', height: \'266px\', visible: visible, target: \'.dxrdp-mobile-action.dxrd-image-export-to\', container: $root.getPopupContainer($element), }"> <!-- ko foreach: items --> <div class="dxrd-menu-export-item" data-bind="dxclick: action, text: text"> </div> <!-- /ko--> </div>',
    'dxrd-menu-parameters-content': '<div class="dxrd-menu-parameters-popup" data-bind="dxPopup: { showTitle: false, width: function() {return window.innerWidth }, height: function() {return window.innerHeight }, visible: visible, container: $root.getPopupContainer($element), }"> <!-- ko template: { name: \'dxrv-preview-parameters-mobile\', data: $data }--> <!-- /ko --> </div>',
    'dxrv-preview-parameters-mobile': '<div class="dxrdp-parameters-mobile" data-bind="dxValidationGroup: {}, css: className"> <div class="dxrdp-parameters-title" data-bind="text: $data.title"> </div> <div class="dxrdp-parameters-scroll" data-bind="dxScrollView: { showScrollbar: \'onHover\', useNative: false, scrollByThumb: true, bounceEnabled: false }"> <!-- ko template: { name: $data.contentTemplate, data: model }--> <!-- /ko --> </div> <div class="dxrdp-parameters-buttons text-buttons" data-bind="foreach: { data: $data.actionButtons }, cacheElement: { action: function(element) { $data.cacheElementContent(element); } }"> <div class="dxrdp-parameter-action" data-bind="dxButton: { text: text, onClick: function(params){ $data.action(params) }, disabled: disabled, visible: visible }, css: className"></div> </div> <div class="dxrdp-parameters-buttons" data-bind="visible: showIcons, foreach: { data: $data.actionIcons }"> <div class="dxrdp-parameter-icon" data-bind="dxButton: { onClick: function(params){ $data.action(params)}, disabled: disabled }, css: className"></div> </div> </div>',
    '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" style="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" 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-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>',
    'dxrp-editing-field-datetime': '<div style="width: 100%" class="dxrp-editing-field-datetime" data-bind="dxDateBox: $data.getOptions({ dropDownOptions: { container: $root.getPopupContainer($element), position: { at: \'left bottom\', collision: \'flipfit flip\', my: \'left top\', boundary: $root.getPopupContainer($element), of: $element } } }), childStyle: { style: textStyle(), selector: \'.dx-texteditor-input\'}"></div>',
    'dxrp-editing-field-image': '<div class="dxrp-editing-field-container dx-accessibility-editing-field-item dx-accessibility-border-accented" data-bind="style: containerStyle() "> <!-- ko template: \'dxrp-editing-field-image-editor\' --> <!-- /ko --> </div>',
    'dxrp-editing-field-image-editor': '<div style="height: 100%; width: 100%;" data-bind="dxPictureEditor: $data.getPictureEditorOptions()"></div>',
    '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" style="stroke-width: 50;stroke: rgb(0, 0, 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 style="background:white" class="dxrp-editing-field-text" data-bind="value: field._editorValue, valueUpdate: \'keypress\', style: textStyle(), event: { blur: hideEditor, keyup: keypressAction }"></textarea> <!--/ko--> </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-back-highlighted" data-bind="dxMenu: { 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-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" style="position: relative; width: 100%; 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" style="background: white;" data-bind="styleunit: { \'width\': width() + 2, \'height\': height() + 2 }, visible: pageLoading"> <div class="dxrd-report-preview-content-loading-panel" style="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 style="pointer-events: none; width: 100%; 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) }, container: getContainer(), showTitle: false, target: getContainer(), deferRendering: false, closeOnOutsideClick: true, showCloseButton: false, onContentReady: onContentReady, onHiding: onHiding, onShown: onShown, shading: false, animation: { show: {}, 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, dropDownOptions: { container: $root.getPopupContainer($element), position: { my: \'left top\', at: \'left bottom\', of: $element } }, 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" 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 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" 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="dxrd-preview-search-result dxd-border-accented" data-bind="dxList: { dataSource: searchResultDataSource, pageLoadMode: \'scrollBottom\', focusStateEnabled:false, hoverStateEnabled:false, onItemRendered: onItemRendered, noDataText:  loading() ? \'\' : noResultText() }"> <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" data-bind="text: $root.dx._static.formatSearchResult($data.data)"></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, 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"> <!-- 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, onFocusOut: focusOut, onKeyUp: keyUp, itemTemplate: itemTemplate, searchMode: searchMode, searchEnabled: searchEnabled, searchTimeout: searchTimeout, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) }, 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" data-bind="visible: active() && visible()" style="height: 100%; overflow:hidden"> <div class="dxrd-right-panel-header dxd-text-primary"> <div style="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" style="width:100%; 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="styleunit: { width: width, height: height }, autoFit: { autoFitBy: $parent.autoFitBy, zoom: zoom, width: originalWidth, height: originalHeight, rightPanelWidth: $root.tabPanel.width, previewSize: $parent.previewSize, brickLoading: brickLoading } "> <!-- 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" style="position:absolute;top:-100px;"><textarea disabled data-bind="attr: { \'aria-label\': $root.getLocalization(\'Clipboard\', \'ASPxReportsStringId.WebDocumentViewer_AriaClipboard\') }" id="clipboard"></textarea></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: $root.calculateWithZoomFactor(800), height: $root.calculateWithZoomFactor(350), maxWidth: function() { return window.innerWidth - 1;}, maxHeight: function() { return window.innerHeight - 1;}, 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, closeOnOutsideClick: 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-range-parameter': '<div data-bind="dxrvDateRangeEditor: {value: $data.value() }"></div>',
    'dxrd-multivalue': '<!-- ko with: value --> <div data-bind="dxTagBox: $parent.getOptions({ dataSource: $data.dataSource, searchEnabled: 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 }, selectAllText: $root.getLocalization(\'Select All\', \'AnalyticsCoreStringId.SelectAll\'), placeholder: $root.dx._static.selectPlaceholder(), maxDisplayedTags: $data.maxDisplayedTags, dropDownOptions: { container: $root.getPopupContainer($element) } }), 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 -->',
    '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\', position:{ my: \'left top\', at: \'right top\', boundary: \'.dxrd-preview-surface\', of: $data.$element, collision: \'fit fit\', offset: \'1 -1\' }, container: \'.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>',
    '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, closeOnOutsideClick: $data.closeOnOutsideClick, 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-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"> </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"> </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, dropDownOptions: { container: $root.getPopupContainer($element) }, popupPosition: { boundary: $root.getPopupContainer($element) }, inputAttr: { \'aria-label\': displayName } }), dxValidator: { validationRules: $data.validationRules || [] }"></div>',
});