UNPKG

devexpress-reporting

Version:

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

www.devexpress.com

66 lines • 54 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
/** * DevExpress HTML/JS Reporting (dx-viewer-templates.js) * Version: 24.2.6 * Build date: Mar 18, 2025 * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED * License: https://www.devexpress.com/Support/EULAs/universal.xml */ import { SvgTemplatesEngine } from '@devexpress/analytics-core/analytics-widgets-internal-native'; 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\', onValueChanged: popupModel.onTextChanged, useItemTextAsTitle: true , placeholder: popupModel.selectPeriodPlaceholder }"></div> </div> <div class="dx-field"> <div class="dx-fieldset-column"> <div class="dx-fieldset-header" data-bind="text: popupModel.fromText"></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: popupModel.untilText"></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: startRange } --> <!-- /ko --> <!-- /ko --> <!-- ko if: popupModel.endButton.focused --> <!-- ko template: { name: \'dxrv-daterange-calendar\', data: endRange } --> <!-- /ko --> <!-- /ko --> </div> </div> </div> </div>', 'dxrd-preview-page-mobile': '<div class="dxrdp-content" data-bind="dxclick: clickToBrick, styleunit: { width: width, height: height }, autoFit: autoFitOptions, dxPreviewPageRenderer: imageOptions"> <div class="dxrdp-loading-wrapper" data-bind="styleunit: { width: width, height: height, lineHeight: height }, style: { \'background-color\': color }, visible: pageLoading, text: loadingText"> </div> <div class="dxrdp-active-border" data-bind="css: { \'dxrdp-active\': active && hasBricks }, visible: !readerMode"></div> <!-- ko foreach: activeBricks --> <!-- ko template: { name: "dxrd-page-brick-mobile" } --> <!--/ko--> <!--/ko--> <!-- ko if: !brickLoading && 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: leftP, right: rightP, height: heightP, width: widthP }, css: { \'dxrd-report-preview-brick-selected\': 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: !editorVisible, dxclick: focusEditor"> <div class="dxrdp-taptosearch-text" data-bind="text: tapToSearchText"></div> </div> <div class="dxrdp-search-panel" data-bind="visible: editorVisible"> <div class="dxrdp-search-editor" data-bind="dxTextBox: { value: searchText, onValueChanged: onSearchTextChanged, onEnterKey: startSearch }"></div> </div> </div> </div> <!-- /ko -->', 'dxrd-preview-export-to-mobile': '<div class="dxrd-preview-export-to" data-bind="dxMenu: { wrapperAttr: { class: \'dxrd-preview-export-to\' }, items: items, onItemClick: clickAction }, attr: { title: $root.getLocalization(text, $data.textId) }"> <div 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: { wrapperAttr: { class: \'dxrd-menu-export-popover\' }, 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 data-bind="dxPopup: { wrapperAttr: { class: \'dxrd-menu-parameters-popup\' }, showTitle: false, onHidden: onHidden, width: \'100vw\', height: \'100vh\', 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.getViewModel() }--> <!-- /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-range-parameter-mobile': '<div data-bind="dxrvDateRangeEditor: {value: value, isMobile: true }"></div>', 'dxrdp-surface-mobile': '<div class="dxrd-preview-wrapper dxrdp-fullscreen dxrd-preview-surface" data-bind="style: { pointerEvents: surfaceEvents, touchEvents: surfaceEvents }, styleunit: { top: topOffset, height: previewWrapperSizeHeight, width: previewWrapperSizeWidth }, slide: slideOptions, mobileZoom: mobileZoomOptions, dxclick: click, 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: galleryEvents, touchEvents: galleryEvents }, dxGalleryReportPreview: { dataSource: gallery.items, gallery: gallery, slideOptions: slideOptions, animationEnabled: gallery.animationEnabled, disabled: zoomUpdating, width:\'100%\', height: \'100%\', showIndicator: false, loop: true, onSelectionChanged: onSlide, onOptionChanged: gallery.onOptionChanged }"> <div data-options="dxTemplate: { name: \'item\' }"> <div class="dxrd-scrollView-mobile" data-bind="dxScrollView: reportPreview.scrollViewOptions"> <div class="dxrd-gallery-blocks" data-bind="style: gallery.contentSize"> <!-- ko foreach: blocks --> <!-- ko if: page --> <div class="dxrd-gallery-block" data-bind="styleunit: position, css: 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 && active, \'dxrdp-page-padding\': page.active && active }, visible: reportPreview.slideOptions.readerMode"></div> <div class="dxrd-mobile-page" data-bind="styleunit: { width: page.width, height: page.height }, style: { pointerEvents: reportPreview.pageEvents, touchEvents: reportPreview.pageEvents }"> <!-- 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, cacheElement: { action: function (elt) { setEditingFieldElement(elt); } }, 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: field.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: field.htmlValue"></div> </div> <!--/ko--> <!-- ko ifnot: field.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>', 'dxrp-editing-field-datetime': '<div class="dxrp-editing-field-datetime dxrd-width-100" 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 class="dxrd-height-100 dxrd-width-100" data-bind="dxPictureEditor: $data"></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: checkStateStyleIcon, if: !!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: popupOptions.width, height: popupOptions.height, title: popupOptions.title, visible: popupOptions.visible, showCloseButton: true, onHidden: popupOptions.onHidden, toolbarItems: popupOptions.toolbarItems, wrapperAttr: popupOptions.wrapperAttr, container: popupOptions.getPopupContainer($element), position: { of: popupOptions.getPopupContainer($element) } }"> <div class="dxrd-print-dialog-content"> <div data-bind="text: printingTexts.caption"></div> <p></p> <!-- ko if: printingTexts.prefix --> <div class="dxrdp-print-text-prefix" data-bind="text: printingTexts.prefix"></div> <!-- /ko --> <a href="" class="dxrd-preview-printing-link" data-bind="click: printingLinkCallback, text: printingTexts.link"></a> <!-- ko if: printingTexts.postfix --> <div class="dxrdp-print-text-postfix" data-bind="text: printingTexts.postfix"></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> <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="dxMutationObserver: keyboardHelper"> <div class="dxrd-right-panel-content dxrd-export-options-content" role="tree"> <!-- ko template: { name: \'dx-propertieseditor\', data: propertyGrid } --> <!-- /ko --> </div> <!-- ko template: { name: \'dx-propertygrid-popoverservice\', if: propertyGrid.popover, data: propertyGrid.popover } --> <!-- /ko --> </div> </div></div>', '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: { elementAttr: { class: \'dxrd-preview-export-to dxd-button-back-color dxd-state-normal dxd-icon-highlighted\' }, disabled: disabled, items: widget.items, cssClass: \'dxrdp-export-to-menu\', onItemClick: click, onSubmenuShowing: widget.onSubmenuShowing(getPopupContainer($element), $element), onSubmenuShown: widget.onSubmenuShown, onSubmenuHiding: widget.onSubmenuHiding, onItemRendered: widget.onItemRendered, tabIndex: \'-1\', }"> <div data-options="dxTemplate: { name: \'item\' }" data-bind="attr: { title: text }"> <!--ko if: $data.format --> <div class="dxrd-preview-export-item-text" data-bind="text: text"></div> <!-- /ko --> <!--ko ifnot: $data.format --> <div class="dxrd-preview-export-item-image-wrapper"> <div class="dxrd-preview-export-item-image" data-bind="css: imageClassName, template: 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: 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\': currentPageAriaLabelImgAlt }, dxclick: clickToBrick, \'brick-selection-prog\': brickSelectionProg"> <div class="dxrd-report-preview-content-loading-wrapper dxrd-background-white" data-bind="styleunit: { \'width\': width + 2, \'height\': height + 2 }, visible: pageLoading"> <div class="dxrd-report-preview-content-loading-panel dxrd-text-align-center" data-bind="styleunit: { \'paddingTop\': height / 2.3 }"> <div class="dxrd-report-preview-content-loading-panel-text" data-bind="text: loadingText"></div> </div> </div> <div data-bind="dxPreviewPageRenderer: imageOptions, visible: !pageLoading"> <!-- 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="dxMutationObserver: editingFieldsKeyboardHelper"> <!-- ko foreach: editingFields --> <!-- ko template: template --> <!--/ko--> <!--/ko--> </div> <!--/ko--> <!-- ko if: aiServicesEnabled && activeBricks.length > 0 --> <div data-bind="style: { \'position\': \'absolute\', top: smartTagAIMenuPosition.topP, left: smartTagAIMenuPosition.leftP, right: smartTagAIMenuPosition.rightP, height: smartTagAIMenuPosition.heightP, width: smartTagAIMenuPosition.widthP }"> <div class="dxrd-control-ai-smart-tag dxd-icon-accented" data-bind="dxMenu: smartTagAIMenu"> <div class="dxrd-ai-floating-smart-tag-container"> <!-- ko if: $data.text --> <div class="dxrd-ai-floating-smart-tag-text" data-bind="text: text"></div> <!-- ko if: $data.items --> <div class="dx-icon dxrd-ai-floating-smart-tag-items" data-bind="css: { \'dx-icon-spinright\': !$root.rtl, \'dx-icon-spinleft\': $root.rtl }"></div> <!-- /ko --> <!-- /ko --> <!-- ko if: $data.icon --> <div class="dxrd-ai-floating-smart-tag-icon"> <div data-bind="template: icon"> </div> </div> <!-- /ko --> </div> </div> </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: getPainterOptions()"></div> <!-- ko template: { name: \'dx-picture-editing-popup\' } --> <!-- /ko --> </div> </div>', 'dx-picture-editing-popup': '<div class="dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen" data-bind="dxPopup: { width: containerStyle.width, height: containerStyle.height, position: { boundary: popupData.getPopupContainer($element), of: popupData.getPositionTarget($element), collision: \'flipfit flipfit\' }, container: popupData.getPopupContainer($element), showTitle: false, target: popupData.getPopupContainer($element), deferRendering: false, hideOnOutsideClick: true, showCloseButton: false, onContentReady: popupData.onContentReady, onHiding: popupData.onHiding, onShown: popupData.onShown, shading: popupData.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: popupData.visible }, cacheElement: { action: function(elt) { setEditingFieldElement(elt); } }"> <!-- ko if: popupData.showContent --> <!-- ko template: { name: popupData.contentTemplate, afterRender: popupData.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: widget.dataSource, value: widget.value, onValueChanged: widget.onValueChanged, displayExpr: widget.displayExpr, displayCustomValue: true, acceptCustomValue: true, onCustomItemCreating: widget.onCustomItemCreating, useItemTextAsTitle: true, width: 140, dropDownOptions: { container: getPopupContainer($element), position: { my: \'left top\', at: \'left bottom\', of: $element }, wrapperAttr: { class: \'dx-zoom-selectbox-popup-wrapper\' } }, tabIndex: \'-1\', inputAttr: widget.inputAttr }"> </div> </div> </div>', 'dxrd-preview-toolbar-scrollable': '<div class="dxrd-toolbar-wrapper dxrdp-toolbar-scrollable dx-shadow-top dxd-back-secondary-invariant" data-bind="dxScrollView: { showScrollbar: \'onHover\', direction: \'horizontal\', useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option(\'useKeyboard\', false); } }"> <div class="dxrd-toolbar" role="toolbar" data-bind="keyDownActions: actionLists, dxMutationObserver: keyboardHelper"> <div id="dxrd-preview-toolbar-live-region" class="dxrd-visually-hidden" aria-live="polite" aria-atomic="true"></div> <div class="dx-accessibility-container-background dxd-back-accented"></div> <!-- ko template: {name: \'dxrd-toolbar-tmplt\', data: actionLists.toolbarItems } --> <!-- /ko --> </div> </div>', 'dxrd-preview-breadcrumb': '<!-- ko if: listItems.length > 1 --><div class="dxrd-breadcrumbs-wrapper" data-bind="dxMutationObserver: keyboardHelper" aria-label="Breadcrumbs" role="navigation"> <!-- ko foreach: listItems --> <!-- ko if: $index() !== ($parent.listItems.length - 1) --> <a class="dxrd-breadcrump-link dxrd-breadcrumb-item dxd-text-accented dx-accessibility-border-accented" data-bind="click: function(s, e) { $parent.onClick($data.position); }"> <span data-bind="text: $data.displayText"></span> </a> <span class="dxrd-breadcrumb-item-seperator" data-bind="template: { name: \'dxrd-svg-preview-breadcrumbs_seperator\' }"> </span> <!-- /ko --> <!-- ko if: $index() === ($parent.listItems.length - 1) --> <div class="dxrd-breadcrumb-item dxd-text-primary dx-accessibility-border-accented" aria-current="location"> <span data-bind="text: $data.displayText"></span> </div> <!-- /ko --> <!-- /ko --></div><!-- /ko -->', 'dxrd-preview-search': '<div role="search" aria-haspopup="listbox" class="dxrd-preview-search-wrapper" data-bind="visible: active && visible, dxMutationObserver: keyboardHelper"> <div id="dxrd-preview-search-live-region" class="dxrd-visually-hidden" aria-live="polite" aria-atomic="true"></div> <!-- ko with: model.getViewModel() --> <div class="dxrd-preview-search-tab-header"> <div class="dxrd-right-panel-header dxd-text-primary"> <span data-bind="text: headerText"></span> </div> <div class="dxrd-preview-search-tab-editor-button-container"> <div class="dxrd-preview-search-editor dx-searcheditor" data-bind="dxTextBox: searchEditor"></div> <div data-bind="dxButton: buttons.searchButton" class="dxrd-preview-search-button"></div> </div> <div class="dxrd-preview-search-tab-header-text"> <div class="dxrd-preview-search-checkbox" data-bind="dxCheckBox: matchCaseEditor"></div> <div class="dxrd-preview-search-checkbox dxrd-preview-search-checkbox-second" data-bind="dxCheckBox: matchWholeWordEditor"></div> </div> </div> <!-- ko if: (searchResultCount > 0 || loading) --> <div class="dxrd-preview-search-result-wrapper"> <div class="dxrd-preview-search-result-header dxd-border-primary dxd-text-primary"> <div class="dxrd-preview-search-tab-header dxrd-preview-search-indicator-group"> <div class = "dxrd-preview-search-results dxrd-preview-search-result-text" data-bind="attr: { id: searchResultHeaderId, \'aria-busy\': loading ? \'true\' : \'false\' }"> <span class="dxrd-preview-search-result-text-bold" data-bind="text: searchResultCount"></span>&nbsp <span data-bind="text: resultsInText"></span>&nbsp <span class="dxrd-preview-search-result-text-bold" data-bind="text: searchResultPageCount"></span>&nbsp <span data-bind="text: resultsPagesText"></span> </div> <div class="dxrd-preview-search-results-navigation"> <div class="dxrdp-search-loading" data-bind="dxLoadIndicator: { visible: loading }"></div> <div data-bind="dxButton: buttons.upButton " class="dxrd-preview-search-results-navigation-button dx-searcheditor-button dx-widget dx-dropdowneditor-button dxd-icon-highlighted dx-shape-standard"></div> <div data-bind="dxButton: buttons.downButton " class="dxrd-preview-search-results-navigation-button dx-searcheditor-button dx-widget dx-dropdowneditor-button dxd-icon-highlighted dx-shape-standard"></div> </div> </div> </div> <div class="dx-accessibility-container-background dxd-back-accented"></div> <div class="dxrd-preview-search-result dxd-border-accented" data-bind="dxList: { dataSource: searchResultDataSource, pageLoadMode: \'scrollBottom\', focusStateEnabled:false, hoverStateEnabled:false, onItemRendered: onItemRendered, noDataText: \'\', encodeNoDataText: true }, attr: { \'aria-labelledby\': searchResultHeaderId }"> <div class="dxrd-preview-search-result-item dxd-list-item-back-color dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented" data-bind="dxAction: { model: data, action: itemClickAction }, attr: attr" data-options="dxTemplate : { name: \'item\' }" > <div class="dx-accessibility-field-background dxd-back-accented"></div> <div class="dxrd-preview-search-tab-item-text propertygrid-editor-displayName dxd-text-primary" data-bind="text: data.text"></div> <div class="dxrd-preview-search-tab-item-info dxd-text-primary" data-bind="text: info"></div> </div> </div> </div> <!-- /ko --> <!-- ko if: (searchCompleted && searchResultCount == 0) --> <div class="dxrd-preview-search-result-header dxd-border-primary dxd-text-primary"> <div class="dxrd-preview-search-tab-header dxrd-preview-search-indicator-group"> <div data-bind="text: noResultText" class = "dxrd-preview-search-result-text"> </div> </div> </div> <!-- /ko --> <!-- /ko --> </div>', 'dxrd-preview-ai-panel': '<div id="dxrd-preview-ai-panel-id" class="dxrd-preview-ai-panel" data-bind="visible: active && visible"> <!-- ko with: model.getViewModel() --> <div class="dxrd-right-panel-header dxd-text-primary"> <span data-bind="text: aiPanelHeaderLabel"></span> </div> <div class="dxrd-preview-ai-panel-wrapper dx-editors"> <div class="dx-fieldset"> <div class="dx-field dxrd-preview-ai-select-box"> <label class="dxrd-preview-ai-form-label" for="dxrv-ai-target-select" data-bind="text: targetContentText"></label> <div class="dxrd-preview-ai-form-input" id="dxrv-ai-target-select" data-bind="dxSelectBox: getSelectBoxOptions(targetSelectBoxOptions, $element)"></div> </div> <div class="dx-field dxrd-preview-ai-select-box"> <label class="dxrd-preview-ai-form-label" for="dxrv-ai-language-select" data-bind="text: targetLanguageText"></label> <div class="dxrd-preview-ai-form-input" id="dxrv-ai-language-select" data-bind="dxSelectBox: getSelectBoxOptions(languageSelectBoxOptions, $element)"></div> </div> <!-- ko if: pageSelectBoxVisible --> <div class="dx-field dxrd-preview-ai-select-box"> <label class="dxrd-preview-ai-form-label" for="dxrv-ai-page-select" data-bind="text: pageSelectText"></label> <div class="dxrd-preview-ai-form-input" id="dxrv-ai-page-select" data-bind="dxSelectBox: getSelectBoxOptions(pageSelectBoxOptions, $element)"> </div> </div> <!-- /ko --> <div class="dx-field"> <div class="dxrd-preview-ai-buttons-wrapper"> <div class="dxrd-preview-ai-buttons dx-accessibility-focus-border-accented" data-bind="dxButton: buttons.translateTextButton"> </div> <div class="dxrd-preview-ai-buttons dx-accessibility-focus-border-accented" data-bind="dxButton: buttons.summarizeTextButton"> </div> </div> </div> </div> <!-- ko if: resultVisible --> <div class="dxrd-right-panel-header dxd-text-primary dxd-border-primary dxrd-ai-result-text"> <span data-bind="text: textProcessingResultHeaderText" class="dxrd-right-panel-result-text"></span> <div role="button" class="dxrd-right-panel-copy-button dx-accessibility-focus-border-accented" tabindex="0" data-bind="event: { keydown: copyText }"> <div class="dxd-icon-highlighted" data-bind="template: { name: buttons.copyResultButton.template }, dxclick: buttons.copyResultButton.onClick"></div> </div> </div> <div id="dxrd-ai-panel-text-area-id" tabindex="0" role="presentation" class="dx-accessibility-focus-border-accented dxrd-preview-ai-panel-textarea dxd-back-primary2" data-bind="dxTextArea: { value: aiProcessingResultText, onInput: function(e) { e.event.preventDefault(); }, onPaste: function(e) { e.event.preventDefault(); }, onKeyDown: function(e) { if (e.event.key !== \'Tab\') e.event.preventDefault(); }, hoverStateEnabled: false, inputAttr: { spellcheck: \'false\' }, tabIndex: -1 }"> </div> <!-- /ko --> </div> <div data-bind="dxPopup: { width: 350, height: 200, shading: false, focusStateEnabled: false, visible: warningTextLimitPopupVisible, container: \'.dxrd-preview-ai-panel\', target: \'.dxrd-preview-ai-panel\', position: { at: \'top\', my: \'top\', collision: \'fit\', of: \'.dxrd-preview-ai-panel\' }, showCloseButton: false, showTitle: false, wrapperAttr: { class: \'dxrd-preview-ai-panel-warning-popup\' }, }"> <span data-bind="text: limitExceededWarningMsg" class="dxrd-preview-ai-panel-warning-popup-text"></span> <div class="dxrd-preview-ai-panel-warning-popup-checkbox" data-bind="dxCheckBox: proceedForAllCheckBoxOptions"> </div> <div class="dxrd-preview-ai-panel-warning-popup-button-group"> <div class="dxrd-preview-ai-panel-warning-popup-button dx-button-default" data-bind="dxButton: { text: proceedNextChunkButtonText, onClick: proceedNextButtonClick }"> </div> <div class="dxrd-preview-ai-panel-warning-popup-button" data-bind="dxButton: { text: cancelChunkedOperationButtonText, onClick: cancelProcessButtonClick }"> </div> </div> </div> <!-- /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: cssClasses, dxMutationObserver: progressBarAccessibilityKeyboardHelper"> <div class="dxrd-preview-progress-text dxd-text-primary" data-bind="text : text"></div> <div class="dxrd-preview-progress-bar dxd-back-primary"> <div class="dxrd-preview-progress-value dxd-preview-progress-bar-value-color dxd-back-accented" data-bind="style : { width: progress + \'%\' }"></div> </div> <div role="button" class="dxrd-preview-progress-cancel dxd-hyperlink-color dxd-border-accented dxd-text-accented dx-accessibility-list-item dx-accessibility-border-accented" data-bind="text: cancelButton.text, visible: cancelButton.visible, click: function() { cancelButton.action && cancelButton.action(); }"></div> </div>', 'dxrd-preview-parameters': '<div class="dxrd-preview-parameters-wrapper dxrd-preview-property-wrapper" data-bind="visible: active && visible"> <div class="dxrd-right-panel-header dxd-text-primary"> <span data-bind="text: model.headerText, visible: model.showHeader"></span> <!-- ko if: (model && !model.isEmpty) --> <!-- /ko --> </div> <!-- ko if: (!model || model.isEmpty) --> <div class="dxrd-group-header-parameters-empty dxd-text-primary" data-bind="text: model.emptyText"></div> <!-- /ko --> <!-- ko if: (model && !model.isEmpty) --> <div class="dxrd-right-panel-body" id="propertiesPanel" data-bind="dxScrollView: { showScrollbar: \'onHover\', useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option(\'useKeyboard\', false); } }, dxValidationGroup: {}, dxMutationObserver: keyboardHelper"> <div role="tree" class="dx-fieldset dxrd-right-panel-content"> <!-- ko template: { name: \'dx-propertieseditor\', data: propertyGrid } --> <!-- /ko --> </div> <div class="dxrd-preview-parameter-actions-container" data-bind="visible: model.showButtons"> <div class="dxrd-preview-parameter-action dxrd-preview-loading" data-bind="dxLoadIndicator: { visible: model.parametersLoading }"></div> <!-- ko foreach: model.buttons --> <div class="dxrd-preview-parameter-action dxrdp-parameters-reset dx-accessibility-focus-border-accented" data-bind="dxButton: $data"></div> <!-- /ko --> </div> </div> <!-- /ko --> </div>', 'dxrd-preview-pager': '<div class="dxrd-preview-pager dxrd-toolbar-item" data-bind="visible: visible"> <div class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" > <div class="dxrd-preview-pager-selectbox" data-bind="dxSelectBox: { dataSource: widget.dataSource, onValueChanged: widget.onValueChanged, value: widget.value, displayExpr: widget.displayExpr, useItemTextAsTitle: true, itemTemplate: widget.itemTemplate, searchMode: widget.searchMode, searchEnabled: widget.searchEnabled, searchTimeout: widget.searchTimeout, disabled: widget.disabled, dropDownOptions: { container: getPopupContainer($element), wrapperAttr: widget.wrapperAttr, }, tabIndex: \'-1\', inputAttr: widget.inputAttr }"> </div> </div> <div class="dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary" data-bind="visible: $data.hasSeparator"></div> </div>', 'dxrd-preview-document-map': '<div class="dxrd-preview-document-map dxrd-height-100 dxrd-overflow-hidden" data-bind="visible: active && visible" > <div class="dxrd-right-panel-header dxd-text-primary"> <div class="dxrd-display-inline-block" data-bind="text: $root.getLocalization(\'Document Map\', \'ASPxReportsStringId.DocumentViewer_RibbonCommandText_DocumentMap\')"></div> </div> <!-- ko if: model --> <!-- ko with: model.getViewModel() --> <div class="dxrd-right-panel-body" data-bind="dxScrollView: { showScrollbar: \'onHover\', useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option(\'useKeyboard\', false); } }, dxMutationObserver: keyboardHelper"> <div role="tree" id="documentMapTree" data-bind="treelist: treeListOptions" class="dxrd-width-100 dxrd-height-100"></div> </div> <!-- /ko --> <!-- /ko --></div>', '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: viewModel || model }--> <!-- /ko --> <!-- /ko --> </div>', 'dxrdp-surface': '<div class="dxrd-preview-wrapper" data-bind="textCopier, css: { \'dx-rtl\': rtlReport, \'dxrp-editing-fields-hightlighted\': editingFieldsHighlighted } "> <!-- ko with: progressBar --> <!-- ko template: \'dxrd-preview-progress-bar\'--> <!-- /ko --> <!-- /ko --> <div class="dxrd-preview-surface" data-bind="dxMutationObserver: previewBrickKeyboardHelper"> <!-- ko if: !showMultipagePreview --> <div class="dxrd-report-preview-holder" role="tablist"> <!-- ko with: currentPage --> <!-- ko if: pageLoading || (!pageLoading && pageLoaded) --> <div role="tab" class="dxrd-report-preview dx-accessibility-page-item dx-accessibility-border-accented" data-bind="autoFit: autoFitOptions, styleunit: { width: width, height: height }"> <!-- ko template: { name: \'dxrd-preview-page\', afterRender: function() { delayedInit() } }--> <!-- /ko --> </div> <!-- /ko --> <!-- /ko --> </div> <!-- /ko --> <!-- ko if: showMultipagePreview && !!currentPage --> <div class="dxrd-report-preview-holder" role="list" data-bind="lazyImages: lazyImagesOptions"> <!-- ko foreach: {data: pages, afterRender: function() { delayedInit() } } --> <!-- ko lazy: { if: pageLoading || (!pageLoading && pageLoaded) } --> <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: { setPageActiveChangedEvent: setPageActiveChangedEvent }, 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>', 'dxrd-export-tool': '<div data-bind="dxViewerExport: $data"></div>', 'dxrv-daterange-editor': '<div class="dxrv-daterange-editor"> <div data-bind="cacheElement: { action: cacheElement }, dxEllipsisEditor: { value: displayValue, readOnly: true, inputAttr: { \'aria-label\': _displayName, id: _editorInputId }, openOnFieldClick: true, buttonAction: function() { showPopup(); } }"></div> <!-- ko template: { name: popupTemplate, data: popupModel } --> <!-- /ko --> </div>', 'dxrv-daterange-editor-popup': '<div role="dialog" aria-modal="true" data-bind="dxPopup: getPopupSettings()"> <div data-bind="dxScrollView: scrollViewOptions"> <div class="dxrv-daterange-editor-popup-container" data-bind="dxMutationObserver: dialogKeyboardHelper"> <div role="listbox" class="dxrv-daterange-editor-list dxrv-daterange-editor-item dxd-border-primary dx-accessibility-daterange-item" data-bind="attr: predefinedRanges.attr, dxScrollView: predefinedRanges.scrollViewOptions, dxMutationObserver: predefinedRanges.accessibilityKeyboardHelper"> <div class="dx-accessibility-container-background dxd-back-accented"></div> <!-- ko foreach: predefinedRanges.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\': selected }, css: { \'dxd-state-selected\': selected }, dxAction: { action: click }"> <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: startRange } --> <!-- /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: endRange } --> <!-- /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, onValueChanged: onValueChanged, 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: value }"></div>', 'dxrd-propertieseditor': '<div data-bind="css: { \'dx-rtl\' : viewmodel.rtl }"> <div class="dx-editors"> <div class="dx-fieldset dxrd-parameters-fieldset dxd-border-primary" data-bind="style: { \'display\': showHorizontally ? \'flex\' : \'block\' }"> <!-- ko foreach: viewmodel.editors --> <!-- 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: $data }, 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: getOptions({ dataSource: dataSource, searchEnabled: true, useItemTextAsTitle: true, searchExpr: searchExpr || [\'displayValue\'], value: value, displayExpr: displayExpr || \'displayValue\', valueExpr: valueExpr || \'value\', multiline: false, showSelectionControls: true, showDropDownButton: !!showDropDownButton, selectAllMode: \'allPages\', selectedItems: selectedItems, inputAttr: { \'aria-label\': displayName, id: editorInputId }, disabled: disabled, selectAllText: selectAllText, placeholder: placeholder, maxDisplayedTags: maxDisplayedTags, showMultiTagOnly: true, dropDownOptions: { container: getPopupContainer($element), position: { boundary: getPopupContainer($element), collision: \'flipfit flipfit\', of: $element, at: \'bottom\', my: \'top\' } } }), dxValidator: getValidatorOptions ? getValidatorOptions(validatorOptions || { validationRules: validationRules || [] }) : (validatorOptions || { validationRules: 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="template: { name: \'dx-propertieseditor\', data: getProperties() }"></div> </div> </div> <!-- /ko -->', 'dxrd-parameters-property-editor': '<div class="dx-editor" data-bind="visible: visible"> <div class="dx-group" data-bind="dxdAccordion: { collapsed: collapsed, alwaysShow: alwaysShow, setCollapsed: setCollapsed, getCollapsed: getCollapsed, setCollapsedChangedEvent: setCollapsedChangedEvent }"> <div class="dx-editor-header" data-bind="css: { \'dxrd-empty-header\': 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\': editorOptions && 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\': isGroupLabel, \'dx-accordion-hide-collapsing-image\': alwaysShow }"> <!-- ko if: isComplexEditor --> <div data-bind="enable: templateName === \'dx-emptyHeader\'"> <!-- ko ifnot: $data.alwaysShow --> <div class="dx-collapsing-image dxrd-display-inline-block" data-bind="template: \'dxrd-svg-collapsed\', css: { \'dx-image-expanded\': !collapsed }"></div> <!-- /ko --> <!-- ko if: !!$data.textToSearch --> <div class="dx-group-header-font" data-bind="searchHighlighting: { text: displayName, textToSearch: textToSearch }, attr: { \'title\': displayName }"></div> <!-- /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: ko.unwrap(isPropertyModified) ? \'Bold\' : \'\'}"></label> <!-- /ko --> <!-- ko ifnot: !!$data.textToSearch --> <label class="propertygrid-editor-displayName" data-bind="text: displayName, attr: { \'title\': displayName, for: editorInputId }, css: { \'dx-property-required\': isRequired }, style: { fontWeight: ko.unwrap(isPropertyModified) ? \'Bold\' : \'\'}"></label> <!-- /ko --> <!-- /ko --> </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: function(val) { $data.setIsRendered(val) } } --> <!-- /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: 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: getPopupContainer($element), of: element, collision: \'fit fit\', offset: \'1 -1\' }, container: shadingEnabled ? \'.dx-overlay-wrapper.dx-picture-edit-popup-content-fullscreen\' : getPopupContainer($element), target: getPopupContainer($element), showTitle: false, onContentReady: onContentReady, showCloseButton: false, animation: {}, shading: false, visible: true }"> <div data-options="dxTemplate: { name: \'content\' }"> <div class="dx-picture-editing-toolbar" data-bind="foreach: actions"> <div class="dx-picture-editing-toolbar-item" data-bind="dxclick: action, attr: { title: title }"> <div class="dx-picture-editing-toolbar-item-icon" data-bind="template: { name: icon }"> </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: hideOnOutsideClick, onShown: onShown, onHidden: onHidden, onContentReady: 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: lineWidth, onValueChanged: onLineWidthChanged, 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: colors"> <div class="dx-picture-editing-brush-options-color" data-bind="css: { selected: isSelected }"> <div class="dx-picture-editing-brush-options-color-cell" data-bind="style: { background: value }, dxclick: 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 clas