devexpress-reporting
Version:
DevExpress Reporting provides the capability to develop a reporting application to create and customize reports.
683 lines (656 loc) • 423 kB
HTML
<script type='text/html' id='dxrd-bordereditor'>
<div class="bordereditor-content">
<!-- ko with: value-->
<div class="bordereditor-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dxrd-image-borders-none" data-bind="template: 'dxrd-svg-properties-borders-none', css: { 'dxd-state-active': (!bottom() && !left() && !top() && !right()), 'dxrd-disabled-button': disabled }, click: function() { setNone() }"></div>
<div class="bordereditor-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dxrd-image-borders-all right-margin" data-bind="template: 'dxrd-svg-properties-borders-all', css: { 'dxd-state-active': (bottom() && left() && top() && right()), 'dxrd-disabled-button': disabled }, click: function() { setAll() }"></div>
<div class="bordereditor-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dxrd-image-borders-left" data-bind="template: 'dxrd-svg-properties-borders-left', css: { 'dxd-state-active': left(), 'dxrd-disabled-button': disabled }, click: function() { setValue('left') }"></div>
<div class="bordereditor-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dxrd-image-borders-top" data-bind="template: 'dxrd-svg-properties-borders-top', css: { 'dxd-state-active': top(), 'dxrd-disabled-button': disabled }, click: function() { setValue('top') }"></div>
<div class="bordereditor-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dxrd-image-borders-right" data-bind="template: 'dxrd-svg-properties-borders-right', css: { 'dxd-state-active': right(), 'dxrd-disabled-button': disabled }, click: function() { setValue('right') }"></div>
<div class="bordereditor-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dxrd-image-borders-bottom" data-bind="template: 'dxrd-svg-properties-borders-bottom', css: { 'dxd-state-active': bottom(), 'dxrd-disabled-button': disabled }, click: function() { setValue('bottom') }"></div>
<!-- /ko -->
</div></script>
<script type="text/html" id="dxrd-borders">
<div class="dxrd-bordereditor" data-bind="dxBorderEditor: { value: value }"></div>
</script><script type="text/html" id="dxrd-colorpicker">
<div data-bind="dxColorBox: { value: displayValue, editAlphaChannel: true, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element), position: { at: 'left bottom', collision: 'flipfit flipfit', my: 'left top', boundary: $root.getPopupContainer($element), of: $element } }, inputAttr: { 'aria-label': displayName } }"></div>
</script><script type="text/html" id="dxrd-expressionstring">
<!-- ko if: $data.value() -->
<div data-bind="dxExpressionEditor: getOptions({ options: value, fieldListProvider: $root.dataBindingsProvider, displayNameProvider: $root.displayNameProvider && $root.displayNameProvider() })"></div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-field">
<!-- ko displayNameExtender: { path: path, dataMember: value } -->
<!-- ko if: visible -->
<div data-bind="dxFieldListPicker: { path: path, acceptCustomValue: true, value: value, displayValue: $displayName, itemsProvider: $root.dataBindingsProvider, treeListController: treeListController, disabled: disabled }"></div>
<!-- /ko -->
<!-- /ko -->
</script><script type="text/html" id="dxrd-filterstring">
<!-- ko if: $data.value() -->
<div data-bind="dxFilterEditor: { options: value, fieldListProvider: $root.dataBindingsProvider, getDisplayNameByPath: $root.getDisplayNameByPath, displayNameProvider: $root.displayNameProvider && $root.displayNameProvider() }"></div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-filterstringgroup">
<!-- ko if: $data.value() -->
<div data-bind="dxFilterEditor: { options: value, fieldListProvider: $root.dataBindingsGroupProvider, getDisplayNameByPath: $root.getDisplayNameByPath, displayNameProvider: $root.displayNameProvider && $root.displayNameProvider() }"></div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-formatstring">
<div data-bind="dxFormatEditor: { value: value, disabled: disabled, actions: $data.actions, customPatterns: $data.customPatterns }"></div>
</script>
<script type="text/html" id="dxrd-guid">
<div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled, inputAttr: { 'aria-label': displayName } }), dxValidator: { validationRules: (validationRules || []) }"></div>
</script>
<script type="text/html" id="dxrd-emptyHeader">
</script>
<script type="text/html" id="dxrd-objectEditorContent">
<!-- ko if: $data.visible() && $data.editorCreated() -->
<div data-bind="template: { name: 'dx-propertieseditor', data: viewmodel }"></div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-objectEditor">
<div data-bind="dxPropertyGrid: { target: ko.observable($data), level: $parent.level, textToSearch: $parent.textToSearch }"></div>
</script>
<script type="text/html" id="dxrd-commonCollectionItem">
<div data-bind="dxPropertyGrid: { target: value, level: editor.level + 1, parentDisabled: editor.disabled }"></div>
</script>
<script type="text/html" id="dxrd-objectVisitor">
<!-- ko if: options -->
<div data-bind="treelist: options"></div>
<!-- /ko -->
</script><script type="text/html" id="dxd-snap-lines-holder">
<div class="dxd-snap-lines-holder">
<div class="dxd-snap-line dxd-snap-line-horizontal" data-bind="style: { transform: snapLineSurfaces[0].transform() }"></div>
<div class="dxd-snap-line dxd-snap-line-horizontal" data-bind="style: { transform: snapLineSurfaces[1].transform() }"></div>
<div class="dxd-snap-line dxd-snap-line-vertical" data-bind="style: { transform: snapLineSurfaces[2].transform() }"></div>
<div class="dxd-snap-line dxd-snap-line-vertical" data-bind="style: { transform: snapLineSurfaces[3].transform() }"></div>
</div>
</script><script type="text/html" id="dxrd-surface-template-base">
<!-- ko ifnot: isLoading -->
<!-- ko with: surface -->
<div class="dxrd-surface-wrapper" data-bind="template: templateName, click: function(_, e) { !$root.selection.disabled() && $root.selection.clickHandler($data, e); e.stopPropagation(); }">
</div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: isLoading -->
<div class="dxrd-surface-wrapper">
<div style="text-align: center; padding-top: 25%;">
<div data-bind="dxLoadIndicator: { visible: isLoading() }"></div>
</div>
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-designer">
<div tabindex="-1" data-bind="cssArray: [surfaceClass($element), { 'dx-accessibility': $data.accessibilityCompliant } ]">
<div class="dxrd-designer-wrapper dx-editors dxd-surface-back-color dxd-scrollbar-color" data-bind="visible: (!$data.designMode || designMode()), cssArray: [$data.rootStyle, { 'dx-rtl' : $data.rtl, 'dx-ltr': !$data.rtl }]">
<!-- ko foreach: parts -->
<!-- ko template: { name: templateName, data: model }-->
<!-- /ko -->
<!-- /ko -->
</div>
<!-- ko if: ($data.addOns) -->
<!-- ko foreach: addOns -->
<!-- ko template: { name: templateName, data: model } -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<div id="dxrd-designer-last-focus-item-blank" class="dxrd-visually-hidden" tabindex='-1'></div>
</div>
</script>
<script type="text/html" id="dxrd-collectionactions-template">
<div class="dxrd-action-items-container"></div>
<div class="dx-treelist-action" data-bind="dxButtonWithTemplate: { onClick: togglePopoverVisible, disabled: disabled, icon: ko.unwrap($data.imageTemplateName), iconClass: ko.unwrap($data.imageClassName) }, attr: { id: id, title: text }"></div>
<div data-bind="dxPopup: { width: 235, height: 'auto',
position: { my: $root.rtl ? 'left top': 'right top', at: 'bottom', of: ('#' + id) },
showTitle: false,
showCloseButton: false,
animation: {},
closeOnOutsideClick: true,
container: ($data.getContainer || function(_e, selector) { return selector; })($element, '.dxrd-action-items-container'),
shading: false,
visible: popoverVisible }">
<!-- ko foreach: actions -->
<div class="dxrd-action-item dxd-button-back-color dxd-state-normal dxd-back-highlighted" data-bind="dxclick: clickAction, css: { 'dxrd-disabled-button': disabled }">
<div class="dxrd-action-item-image" data-bind="css: ko.unwrap($data.imageClassName), template: {name: ko.unwrap($data.imageTemplateName), if: !!ko.unwrap($data.imageTemplateName)}, attr: { title: $data.displayText && $data.displayText() || text }"> </div>
</div>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-drag-helper-source">
<div class="dxrd-drag-helper-source" data-bind="styleunit: { top: $data.top, left: $data.left, width: $data.width, height: $data.height }, css: { 'dxrd-locked': $data.isLocked }">
<!-- ko foreach: $data.controls() -->
<div class="dxrd-drag-helper-control" data-bind="styleunit: { left: $data.left, top: $data.top, width: $data.width, height: $data.height }, css: $data.className">
<!-- ko with: $parent.customData() -->
<div data-bind="template: { name: $data.template, data: $data.data }"> </div>
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</script><script type="text/html" id="dxrd-menubutton-template-base">
<div class="dxrd-menu-container" style="position:relative; width:0; height:100%"></div>
<div class="dxrd-menu-button dxd-toolbox-back-color dxd-border-primary dxd-back-primary2">
<div class="dxrd-menu-place" style="width:54px;"></div>
<div class="dxrd-menu-button-image dxd-button-back-color dxd-state-normal dxd-back-highlighted" data-bind="dxclick: function(e) { if(stopPropagation) { stopPropagation = false; } else { toggleAppMenu() } }, template: 'dxrd-svg-menu-menu', css: {'dxd-state-active': appMenuVisible }"></div>
<div class="dxd-menu-back-color dxd-back-primary2" data-bind="dxPopup: {
width: 250,
height: '100%' ,
position: $data.rtl ? { my: 'right top' , at: 'left top' , offset: '-10 0' } : { my: 'left top' , at: 'right top' , offset: '10 0' },
showTitle: false,
showCloseButton: false,
container: getMenuPopupContainer($element),
target: getMenuPopupTarget($element),
animation: {},
closeOnOutsideClick: function(e) {
var buttonClassName = 'dxrd-menu-button-image';
var parentClassList = e.target.parentNode && e.target.parentNode.parentNode && e.target.parentNode.parentNode.classList;
stopPropagation = (e.target.classList && e.target.classList.contains(buttonClassName)) || (parentClassList && parentClassList.contains(buttonClassName));
return true;
},
shading: false,
focusStateEnabled: false,
visible: appMenuVisible }">
<div class="dxrd-menu-break dxd-popup-back-color dxd-back-primary2"></div>
<!-- ko foreach: actionLists.menuItems -->
<div class="dxrd-menu-item dxd-text-primary dxd-list-item-back-color dxd-back-highlighted" data-bind="dxclick: function(e) { if(disabled && !disabled() || !disabled) { $root.toggleAppMenu(); clickAction($root.model(), e); }}, css: { 'dxrd-disabled-button': disabled }, visible: visible">
<div class="dxrd-menu-item-image" data-bind="css: ko.unwrap($data.imageClassName), template: {name: ko.unwrap($data.imageTemplateName), if: !!ko.unwrap($data.imageTemplateName)}, attr: { title: $data.displayText && $data.displayText() || text }"> </div>
<div class="dxrd-menu-item-text" data-bind="text: $data.displayText && $data.displayText() || text, attr: { title: $data.displayText && $data.displayText() || text}"></div>
<div class="dxrd-menu-item-separator" data-bind="visible: $data.hasSeparator"></div>
</div>
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dxrd-top-grid">
<!-- ko if: popularVisible -->
<div class="dx-fieldset">
<div data-bind="dxdAccordion: { collapsed: collapsed }">
<div class="dxrd-group-header dx-accordion-header" data-bind="css: { 'dxrd-group-header-collapsed dxd-border-primary': collapsed() }">
<div class="dx-collapsing-image" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed() }" style="display:inline-block;"></div>
<span class="dxrd-group-header-text" data-bind="text: $root.actionsGroupTitle()"></span>
</div>
<div class="dx-accordion-content dxd-back-primary">
<!-- ko foreach: (contextActions || []) -->
<!-- ko if: $data.templateName -->
<!-- ko template: templateName -->
<!-- /ko -->
<!-- /ko -->
<!-- ko if: !$data.templateName -->
<div class="dxrd-properties-grid-action" data-bind="dxclick: function() { if($data.disabled && !$data.disabled() || !$data.disabled) { clickAction($root.editableObject()); } }, css: { 'dxrd-disabled-button': $data.disabled && $data.disabled() }, visible: (ko.unwrap($data.visible) == undefined) || ko.unwrap($data.visible)">
<div class="dxrd-properties-grid-action-image dxd-button-back-color dxd-state-normal dxd-back-highlighted" data-bind="css: $data.imageClassName, template: {name: $data.imageTemplateName, if: !!ko.unwrap($data.imageTemplateName)}, attr: { title: $data.displayText && $data.displayText() || text }"> </div>
</div>
<!-- /ko -->
<!-- /ko -->
<!-- ko with: popularProperties -->
<div style="position: relative" data-bind="template: { name: 'dx-propertieseditor', data: $data }"></div>
<!-- /ko -->
</div>
</div>
</div>
<!-- /ko -->
</script><script type="text/javascript" id="dx-propertygrid-searchbox">
<div class="dx-property-grid-search-group dx-property-gread-search-collapsed" data-bind="css: { 'dx-property-gread-search-collapsed': !isSearching() }">
<div class="dx-property-grid-sorting-action dxd-button-back-color dxd-state-normal dxd-back-highlighted dxd-back-primary2" data-bind="css: { 'dxd-state-active': isSearching },
dxButtonWithTemplate: { onClick: switchSearchBox, icon: 'dxrd-svg-properties-search', iconClass: 'image-search' },
attr: { title: $root.getLocalization('Search', 'ASPxReportsStringId.SearchDialog_Header') }">
</div>
<div class="dx-property-grid-search-box" data-bind="dxTextBox: { value: textToSearch, valueChangeEvent: 'keyup', placeholder: searchPlaceholder(), showClearButton: true }, cacheElement: { action: function(element) { searchBox(element); } }"></div>
</div>
</script>
<script type="text/html" id="dxrd-propertiestab">
<div class="dxrd-properties-wrapper" data-bind="visible: active() && visible()">
<div style="height:100%" class="dxd-text-primary">
<div class="dxrd-right-panel-header">
<span data-bind="text: text"></span>
</div>
<!-- ko with: model -->
<!-- ko if: $root.controlsStore.visible() -->
<div class="dx-property-grid-header">
<div class="dx-property-grid-header-content">
<div class="dx-property-grid-sorting-actions-group" data-bind="css: { 'dx-property-gread-search-collapsed': isSearching }">
<div class="dxrd-properties-focused-item" data-bind="dxSelectBox: { dataSource: $root.controlsStore.dataSource, value: focusedItem, displayExpr: displayExpr, dropDownOptions: { container: $root.getPopupContainer($element) } }"></div>
<div class="dx-property-grid-sorting-actions-container">
<div class="dx-property-grid-sorting-action dxd-button-back-color dxd-state-normal dxd-back-highlighted dxd-back-primary2" data-bind="css: { 'dxd-state-active dxd-state-no-hover': !isSortingByGroups() }, dxButtonWithTemplate: { onClick: function() { $data.isSortingByGroups(false); }, icon: 'dxrd-svg-properties-sortingbyalphabet', iconClass: 'image-sortingbyalphabet' }"></div>
<div class="dx-property-grid-sorting-action dxd-button-back-color dxd-state-normal dxd-back-highlighted dxd-back-primary2" data-bind="css: { 'dxd-state-active dxd-state-no-hover': isSortingByGroups }, dxButtonWithTemplate: { onClick: function() { $data.isSortingByGroups(true); }, icon: 'dxrd-svg-properties-sortingbygroups', iconClass: 'image-sortingbygroups' }"></div>
</div>
</div>
<!-- ko template: 'dx-propertygrid-searchbox' -->
<!-- /ko -->
</div>
</div>
<!-- /ko -->
<div class="dxrd-properties-grid dxd-border-primary" data-bind="dxScrollView: { showScrollbar: 'onHover', useNative: false, scrollByThumb: true }, styleunit: { top: $root.controlsStore.visible() ? 80 : 40 }">
<!-- ko template: { name: 'dxrd-top-grid', data: { contextActions: $root.contextActions, popularProperties: $root.popularProperties, collapsed: ko.observable(false), popularVisible: $root.popularVisible() && isSortingByGroups(), actionsGroupTitle: $root.actionsGroupTitle } } -->
<!-- /ko -->
<div data-bind="visible: isSortingByGroups">
<!-- ko foreach: groups -->
<div class="dx-fieldset" data-bind="visible: visible">
<div data-bind="dxdAccordion: { collapsed: collapsed }">
<div class="dxrd-group-header dx-accordion-header" data-bind="css: { 'dxrd-group-header-collapsed dxd-border-primary': collapsed() }">
<div class="dx-collapsing-image" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed() }" style="display:inline-block;"></div>
<span class="dxrd-group-header-text" data-bind="text: displayName()"></span>
</div>
<div class="dx-accordion-content dxd-back-primary">
<!-- ko ifnot: editorsCreated -->
<div class="dx-accordion-content-loading-panel">
<div data-bind="dxLoadIndicator: { visible: !editorsCreated() }"></div>
</div>
<!-- /ko -->
<!-- ko if: $data.editorsRendered() -->
<div data-bind="visible: editorsCreated">
<div class="dx-editors">
<!-- ko foreach: editors -->
<!-- ko template: editorTemplate -->
<!-- /ko -->
<!-- ko if: ($index() === $parent.editors().length - 1 && $parent.editorsCreated(true)) -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
<!-- /ko -->
</div>
</div>
</div>
<!-- /ko -->
</div>
<div class="dx-fieldset dxd-back-primary" data-bind="visible: !isSortingByGroups()">
<div data-bind="dxLoadIndicator: { visible: !allEditorsCreated() }"></div>
<!-- ko if: $data.editorsRendered() -->
<div data-bind="visible: allEditorsCreated">
<div class="dx-editors">
<!-- ko foreach: $data.getEditors() -->
<!-- ko template: editorTemplate -->
<!-- /ko -->
<!-- ko if: ($index() === $parent._editors().length - 1 && $parent.allEditorsCreated(true)) -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
<!-- /ko -->
</div>
<!-- ko template: 'dx-propertygrid-popupservice' -->
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dx-propertygrid-popupservice">
<div data-bind="dxPopup: { width: 250, height: 'auto',
position: $data.rtl ? { my: 'left top', at: 'right top', of: popupService.target, collision: 'flipfit' } : { my: 'right top', at: 'left top', of: popupService.target, collision: 'flipfit' },
container: $root.getPopupContainer($element),
target: popupService.target,
showTitle: false,
showCloseButton: false,
animation: {},
closeOnOutsideClick: true,
shading: false,
visible: popupService.visible }">
<div data-options="dxTemplate: { name: 'content' }">
<div class="dxrd-editor-menu-caption dxd-text-primary" data-bind="text: popupService.title, visible: popupService.title"></div>
<div class="dxd-button-back-color" data-bind="dxMenu: { dataSource: popupService.actions, displayExpr: 'title', cssClass: 'dxrd-editor-menu', orientation: 'vertical', showFirstSubmenuMode: 'onHover', onSubmenuShowing: function(e) { e.submenu._overlay.option('container', $root.getPopupContainer($element)) } }">
<div class="dxrd-editor-menu-item dxd-back-highlighted dxd-state-normal" data-options="dxTemplate: { name: 'item' }"
data-bind="dxclick: action, css: { 'dxrd-editor-menu-item-separator dxd-border-primary': $parent.popupService.actions().length > 1 && $index === ($parent.popupService.actions().length - 1) }">
<span class="dxd-text-primary dx-menu-item-text" data-bind="attr: { title: title }, text: title"></span>
<div class="dx-menu-item-popout-container" data-bind="visible: $data.items && $data.items.length"><div class="dx-menu-item-popout"></div></div>
<!--ko if: $data.customTemplate-->
<!--ko template: $data.customTemplate-->
<!--/ko-->
<!--/ko-->
</div>
</div>
</div>
</div>
</script><script type="text/html" id="dx-right-panel-lightweight">
<div class="dxrd-right-panel dx-shadow dxd-border-secondary dxd-property-grid-group-header-back-color dxd-back-primary2" data-bind="styleunit: { width: tabPanel.width }, css: tabPanel.cssClasses(), resizable: tabPanel.getResizableOptions($element, 1, 325)">
<!-- ko foreach: tabPanel.tabs -->
<!-- ko lazy: { template: $data.template } -->
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dxrd-right-panel-template-base">
<!-- ko with: tabPanel -->
<div class="dx-shadow dxd-border-secondary dxrd-tab-panel-wrapper" data-bind="styleunit: { width: $data.headerWidth }, css: $data.cssClasses({'dxrd-tab-panel-border': !$data.collapsed(), 'dx-tab-panel-collapsed':$data.collapsed }), accessibilityKeyboardHelper: $data.keyboardHelper">
<div role="button" class="dxrd-right-panel-collapse dx-accessibility-rightpanel-button dxd-back-primary dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-accessibility-focus-border-accented" data-bind="styleunit: { width: $data.headerWidth }, css: $data.cssClasses(), dxAction: { model: $data, action: $data.toggleCollapsed }, attr: { title: $data.toggleCollapsedText, 'aria-label': $data.toggleCollapsedText, 'aria-expanded': !$data.collapsed() }">
<div class="dxrd-right-panel-collapse-image" data-bind="css: $data.toggleCollapsedImage().class, template: $data.toggleCollapsedImage().template"></div>
</div>
<div class="dxrd-right-tabs dxd-side-panel-tabs-back-color dxd-back-contrast" data-bind="css: $data.cssClasses()">
<!-- ko foreach: $data.tabs -->
<div role="button" class="dxrd-tab-item dx-accessibility-rightpanel-button dxd-side-panel-tab-back-color dxd-back-highlighted dx-accessibility-focus-border-accented" data-bind="dxAction: { model: $data, action: function(s) { $parent.selectTab({ model: s }) }}, css: { 'dxd-state-active dxd-state-no-hover': active, 'dxrd-tab-item-disabled': disabled }, attr: { title: $data.text, 'aria-label': $data.text, 'aria-expanded': $data.active }, visible: visible">
<div class="dxrd-image-padding" data-bind="css: $data.imageClassName, template: {name: $data.imageTemplateName, if: !!ko.unwrap($data.imageTemplateName)}"> </div>
</div>
<!-- /ko -->
</div>
<div class="dxrd-right-panel dxd-property-grid-group-header-back-color dxd-back-primary2" data-bind="styleunit: { width: $data.width }, css: $data.cssClasses(), resizable: $data.getResizableOptions($element, 50, 340)">
<!-- ko foreach: $data.tabs -->
<!-- ko lazy: { template: $data.template } -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-toolbar-template-base">
<div class="dxrd-toolbar-wrapper">
<div class="dxrd-toolbar" data-bind="template: {name: 'dxrd-toolbar-tmplt', data: actionLists.toolbarItems }"></div>
</div>
</script>
<script type="text/html" id="dxrd-toolbar-tmplt">
<!-- ko foreach: $data -->
<!-- ko if: $data.templateName -->
<!-- ko template: templateName -->
<!-- /ko -->
<!-- /ko -->
<!-- ko if: !$data.templateName -->
<div class="dxrd-toolbar-item" data-bind="visible: visible">
<div role="button" class="dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" data-bind="attr: { 'aria-label': $data.displayText && $data.displayText() || text, 'aria-hidden': ko.unwrap($data.visible) ? 'false' : 'true', 'aria-disabled': ko.unwrap($data.disabled) ? 'true' : 'false', 'aria-checked': $data.selected ? ($data.selected() ? 'true' : 'false') : null }" >
<div data-bind="template: { name: ko.unwrap($data.imageTemplateName), if: !!ko.unwrap($data.imageTemplateName)}, attr: { class: 'dxrd-toolbar-item-image dxd-button-back-color dxd-state-normal dxd-back-highlighted ' + (ko.unwrap($data.imageClassName) || ''), title: $data.displayText && $data.displayText() || text }, }, dxclick: function() { if((typeof $data.disabled === 'function') && !disabled() || !disabled) { clickAction($root.model && $root.model()); } }, css: {'dxrd-disabled-button': disabled, 'dxd-state-active': $data.selected }"> </div>
<div class="dxrd-toolbar-item-separator dxd-toolbar-separator-color dxd-border-secondary" data-bind="visible: $data.hasSeparator"></div>
</div>
</div>
<!-- /ko -->
<!-- /ko -->
</script>
<script type="text/html" id="dxrd-toolbox-template-base">
<div class="dxrd-toolbox-wrapper dxd-toolbox-back-color dxd-back-primary2" data-bind="dxScrollView: { showScrollbar: 'onHover', scrollByContent: false, bounceEnabled: false, useNative: false, scrollByThumb: true }">
<!-- ko foreach: toolboxItems -->
<div class="dxrd-toolbox-item" data-bind="attr: { title: displayName }">
<div class="dx-background-inheritor dxd-toolbox-item-back-color dxd-back-secondary">
<div class="dxrd-image-padding dx-fontsize-reestablished" data-bind="template: {name: $data.imageTemplateName, if: !!ko.unwrap($data.imageTemplateName)}, css: $data.imageClassName, draggable: $root.toolboxDragHandler"> </div>
</div>
</div>
<!-- /ko -->
</div>
</script><script type="text/html" id="dxrd-zoom-select-template">
<div class="dxrd-toolbar-item-zoom" data-bind="visible: visible">
<div class="dxrd-toolbar-item-zoom-editor" data-bind="dxSelectBox: { items: zoomLevels, value: $data.zoom, displayExpr: function(val) { return Math.round((val || this.option('value')) * 100) + '%'; }, displayCustomValue: true, acceptCustomValue: true, onCustomItemCreating: onCustomItemCreating, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) } }"></div>
</div>
</script>
<script type="text/html" id="dx-editor-addons">
<!-- ko if: visible -->
<!-- ko if: !ko.unwrap($data.imageTemplateName) -->
<div class="dxrd-editormenu-box dxd-property-grid-menu-box-color dxd-back-contrast" data-bind="dxclick: showPopup, css: editorMenuButtonCss, attr: { title: $data.hint }">
<div class="dxrd-editormenu-box-inside dxd-back-secondary"></div>
</div>
<!-- /ko -->
<!-- ko if: ko.unwrap($data.imageTemplateName) -->
<div class="dxrd-editormenu-box dxd-property-grid-menu-box-color" data-bind="dxclick: showPopup, attr: { title: $data.hint }, css: editorMenuButtonCss, template: { name: $data.imageTemplateName, if: ko.unwrap($data.imageTemplateName) }">
</div>
<!-- /ko -->
<!-- /ko -->
</script><script type="text/html" id="dx-collectioneditor">
<div class="dx-collectioneditor">
<div data-bind="dxdAccordion: { collapsed: collapsed, alwaysShow: alwaysShow }">
<div class="dx-collectioneditor-header dx-accordion-header">
<div class="dx-editor-header">
<div role="tab" class="dx-field dx-accessibility-focus-border-accented dxrd-accessibility-accordion-trigger" data-bind=", attr: {'aria-expanded': !collapsed() ? 'true' : 'false' }">
<!-- ko if: showButtons-->
<div class="dx-collectioneditor-actions-wrapper">
<!-- ko if: isVisibleButton('up') -->
<div class="dx-collectioneditor-action dx-accessibility-focus-border-accented" data-bind="dxButtonWithTemplate: { onClick: up, disabled: isDisabledButton('up'), icon: 'dxrd-svg-operations-moveup', iconClass: 'dx-image-moveup' }, attr: { title: getDisplayTextButton('up') }"></div>
<!-- /ko -->
<!-- ko if: isVisibleButton('down') -->
<div class="dx-collectioneditor-action dx-accessibility-focus-border-accented" data-bind="dxButtonWithTemplate: { onClick: down, disabled: isDisabledButton('down'), icon: 'dxrd-svg-operations-movedown', iconClass: 'dx-image-movedown' }, attr: { title: getDisplayTextButton('down') }"></div>
<!-- /ko -->
<div class="dx-collectioneditor-action-separator"></div>
<!-- ko if: isVisibleButton('add') -->
<div class="dx-collectioneditor-action dx-accessibility-focus-border-accented" data-bind="dxButtonWithTemplate: { onClick: add, disabled: isDisabledButton('add'), icon: 'dxrd-svg-operations-add', iconClass: 'dx-image-add' }, attr: { title: getDisplayTextButton('add') }"></div>
<!-- /ko -->
<!-- ko if: isVisibleButton('delete') -->
<div class="dx-collectioneditor-action dx-accessibility-focus-border-accented" data-bind="dxButtonWithTemplate: { onClick: remove, disabled: isDisabledButton('delete'), icon: 'dxrd-svg-operations-remove', iconClass: 'dx-image-remove' }, attr: { title: getDisplayTextButton('delete') }"></div>
<!-- /ko -->
</div>
<!-- /ko -->
<!-- ko if: displayName -->
<div class="dx-collectioneditor-header-text dxd-text-primary" data-bind="styleunit: { 'paddingLeft': padding }">
<div class="propertygrid-editor-collapsed dx-collapsing-image" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed() }"></div>
<div class="dx-group-header-font dxd-text-primary" data-bind="text: displayName, attr: { title: displayName }"></div>
</div>
<!-- /ko -->
</div>
</div>
</div>
<div role="tabpanel" class="dx-accordion-content" data-bind="attr:{'aria-hidden': collapsed() ? 'true' : 'false'}">
<div data-bind="visible: !disabled(), dxScrollView: { showScrollbar: 'onHover', disabled: !showScroll, useNative: false, scrollByThumb: true, onInitialized: function(e) { e.component.option('useKeyboard', false); } }">
<!-- ko if: values().length === 0 && showButtons -->
<div class="dx-collectioneditor-empty dxd-empty-area-placeholder-text-color dxd-text-info">
<span class="dx-collectioneditor-empty-text" data-bind="text: getDisplayTextEmptyArray()"></span>
</div>
<!-- /ko -->
<!-- ko if: values().length !== 0 -->
<div class="dx-collectioneditor-items" data-bind="foreach: values">
<div data-bind="with: $parent.createCollectionItemWrapper($parents[1], $index, $element)">
<div class="dx-collectioneditor-item-container dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented" data-bind="attr: { 'aria-selected': $parents[1].selectedIndex() === $index() }, dxAction: { model: $data, action: $parents[1].select }, css: { 'dxd-state-selected' : $parents[1].selectedIndex() === $index() }">
<div class="dx-collection-item"></div>
</div>
</div>
</div>
<!-- /ko -->
</div>
</div>
</div>
</div>
</script><script type="text/html" id="dx-boolean">
<div class="propertygrid-editor-checkbox" data-bind="dxCheckBox: getOptions({ value: value, disabled: disabled, elementAttr: { 'aria-label': displayName } }), dxValidator: { validationRules: validationRules || [] }"></div>
</script>
<script type="text/html" id="dx-boolean-select">
<div data-bind="dxLocalizedSelectBox: { dataSource: [ { val: true, text: $root.getLocalization('Yes', 'AnalyticsCoreStringId.ParametersPanel_True') }, { val: false, text: $root.getLocalization('No', 'AnalyticsCoreStringId.ParametersPanel_False') }], inputAttr: { 'aria-label': displayName }, valueExpr: 'val', displayExpr: 'text', value: value, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) } }, dxValidator: { validationRules: validationRules || [] }"></div>
</script><script type="text/html" id="dx-commonCollection">
<div class="dx-editor" data-bind="visible: visible">
<div data-bind="dxCollectionEditor: { values: value, displayName: displayName, level: level, info: info }">
</div>
</div>
</script>
<script type="text/html" id="dx-commonCollectionItem">
<div data-bind="dxPropertyGrid: { target: value, level: editor.level + 1, parentDisabled: editor.disabled }"></div>
</script><script type="text/html" id="item-with-title">
<div class="dx-listitem-with-title" data-bind="text: $data.display, attr: { title: $data.display }"></div>
</script>
<script type="text/html" id="dx-combobox">
<div data-bind="dxLocalizedSelectBox: { 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: getValidatorOptions($data.validatorOptions || { validationRules: validationRules || [] })">
</div>
</script>
<script type="text/html" id="dx-combobox-editable">
<div data-bind="dxSelectBox: getOptions({ items: values, value: value, valueExpr: 'value', displayExpr: 'displayValue', disabled: disabled, placeholder: $root.dx._static.selectPlaceholder(), acceptCustomValue: true, onCustomItemCreating: function(arg) { return { value: arg.text, displayValue: arg.text }; }, dropDownOptions: { container: $root.getPopupContainer($element) } })"></div>
</script>
<script type="text/html" id="dx-combobox-undo">
<div data-bind="dxLocalizedSelectBox: { dataSource: values, value: generateValue($root.undoEngine), valueExpr: 'value', displayExpr: 'displayValue', displayCustomValue: true, disabled: disabled, dropDownOptions: { container: $root.getPopupContainer($element) } }, dxValidator: getValidatorOptions($data.validatorOptions || { validationRules: validationRules || [] })">
</div>
</script><script type="text/html" id="dx-property-editor">
<div class="dx-editor" data-bind="visible: visible">
<div class="dx-group" data-bind="dxdAccordion: { collapsed: collapsed }">
<div class="dx-editor-header">
<div class="dx-field" data-bind="attr: {
role: isComplexEditor && 'tab',
'id': isComplexEditor && getIdByDisplayName('dxrd-accordion-trigger'),
'aria-controls': isComplexEditor && getIdByDisplayName('dxrd-accordion-pannel'),
'aria-expanded': isComplexEditor && (!collapsed() ? 'true' : 'false') },
css: {'dxrd-accessibility-accordion-trigger dx-accessibility-focus-border-accented': isComplexEditor}">
<div class="dx-field-label dx-accordion-header dxd-text-primary" data-bind="styleunit: padding, css: { 'dx-accordion-empty': templateName === 'dx-emptyHeader' }">
<!-- ko if: isComplexEditor -->
<div data-bind="enable: templateName === 'dx-emptyHeader'">
<div class="propertygrid-editor-collapsed dx-collapsing-image" data-bind="template: 'dxrd-svg-collapsed', css: { 'dx-image-expanded': !collapsed() }"></div>
<!-- ko if: !!$data.textToSearch -->
<div class="dx-group-header-font" data-bind="searchHighlighting: { text: displayName, textToSearch: textToSearch }, attr: { 'title': displayName }"></div>
<!-- /ko -->
<!-- ko ifnot: !!$data.textToSearch -->
<div class="dx-group-header-font" data-bind="text: displayName, attr: { 'title': displayName }"></div>
<!-- /ko -->
</div>
<!-- /ko -->
<!-- ko if: !isComplexEditor -->
<!-- ko if: !!$data.textToSearch -->
<div class="propertygrid-editor-displayName" data-bind="searchHighlighting: { text: displayName, textToSearch: textToSearch }, attr: { 'title': displayName }, css: { 'dx-field-label-required': isRequired }, style: { fontWeight: isPropertyModified() ? 'Bold' : ''}"></div>
<!-- /ko -->
<!-- ko ifnot: !!$data.textToSearch -->
<div class="propertygrid-editor-displayName" data-bind="text: displayName, attr: { 'title': displayName }, css: { 'dx-property-required': isRequired }, style: { fontWeight: isPropertyModified() ? 'Bold' : ''}"></div>
<!-- /ko -->
<!-- /ko -->
</div>
<div class="dx-field-value" data-bind="css: { 'dxd-border-accented': $data.isPropertyHighlighted }">
<div data-bind="service: { name: 'createEditorAddOn' }"></div>
<!-- ko if: templateName !== 'dx-emptyHeader' -->
<!-- ko lazy: { innerBindings: { template: templateName }, isResolved: $data.isRendered } -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</div>
<!-- ko if: isComplexEditor -->
<div class="dx-editor-content dx-accordion-content" role="tabpanel" data-bind="attr:{'aria-labelledby': getIdByDisplayName('dxrd-accordion-trigger'), 'id': getIdByDisplayName('dxrd-accordion-pannel'), 'aria-hidden': collapsed() ? 'true' : 'false' }">
<!-- ko if: (!$data.editorCreated || editorCreated) -->
<!-- ko template: contentTemplateName -->
<!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</div>
</script>
<script type="text/html" id="dx-emptyHeader">
</script><script type="text/html" id="dx-date">
<div class="dx-datebox-container">
<div data-bind="
dxDateBox: getOptions({
value: value,
closeOnValueChange: true,
type: 'datetime',
disabled: disabled,
inputAttr: { 'aria-label': displayName },
dropDownOptions: {
container: $root.getPopupContainer($element),
position: {
at: 'left bottom',
collision: 'flipfit flip',
my: 'left top',
boundary: $root.getPopupContainer($element),
of: $element
}
}
}),
dxValidator: { validationRules: validationRules || [] }"></div>
</div>
</script><script type="text/html" id="dx-file">
<div data-bind="dxFileImagePicker: { value: value, placeholderId: 'File', disabled: disabled }"></div>
</script><script type="text/html" id="dx-modificators">
<div class="dx-font-content">
<div class="dx-field">
<div class="dx-field-label dxd-text-primary" data-bind="styleunit: { 'paddingLeft': padding }"></div>
<!-- ko with: value -->
<div class="dx-field-value">
<div class="dx-font-styles-content">
<div class="dx-font-style-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-image-fontstyle-bold" data-bind="css: { 'dxd-state-active': bold(), 'dx-disabled-button': $parent.disabled }, click: function() { if(!$parent.disabled()) { bold(!bold()); } }"><!-- ko template: 'dxrd-svg-fontstyle-bold'--><!-- /ko --></div>
<div class="dx-font-style-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-image-fontstyle-italic" data-bind="css: { 'dxd-state-active': italic(), 'dx-disabled-button': $parent.disabled }, click: function() { if(!$parent.disabled()) { italic(!italic()); } }"><!-- ko template: 'dxrd-svg-fontstyle-italic'--><!-- /ko --></div>
<div class="dx-font-style-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-image-fontstyle-underline" data-bind="css: { 'dxd-state-active': underline(), 'dx-disabled-button': $parent.disabled }, click: function() { if(!$parent.disabled()) { underline(!underline()); } }"><!-- ko template: 'dxrd-svg-fontstyle-underline'--><!-- /ko --></div>
<div class="dx-font-style-button dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-image-fontstyle-strikeout" data-bind="css: { 'dxd-state-active': strikeout(), 'dx-disabled-button': $parent.disabled }, click: function() { if(!$parent.disabled()) { strikeout(!strikeout()); } }"><!-- ko template: 'dxrd-svg-fontstyle-strikeout'--><!-- /ko --></div>
</div>
</div>
<!-- /ko -->
</div>
</div>
</script><script type="text/html" id="dx-image">
<div data-bind="dxFileImagePicker: { value: value, placeholderId: 'Image', accept: 'image/*', type: 'img', disabled: disabled }"></div>
</script><script type="text/html" id="dx-numeric">
<div data-bind="dxNumberBox: getOptions({ value:value, showSpinButtons:true, disabled:disabled, inputAttr: { 'aria-label': displayName } }), dxValidator: { validationRules: validationRules || [] }"></div>
</script>
<script type="text/html" id="dx-number-editor">
<div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled, inputAttr: { 'aria-label': displayName } }), dxValidator: { validationRules: validationRules || [] }"></div>
</script><script type="text/html" id="dx-text">
<!-- ko if: $data.validationRules -->
<div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled, inputAttr: { 'aria-label': displayName }}), dxValidator: getValidatorOptions($data.validatorOptions || { validationRules: validationRules || [] })"></div>
<!-- /ko -->
<!-- ko if: !$data.validationRules -->
<div data-bind="dxTextBox: getOptions({ value: value, disabled: disabled, inputAttr: { 'aria-label': displayName }})"></div>
<!-- /ko -->
</script>
<script type="text/html" id="dx-string-array">
<div class="dx-field" data-bind="css: { 'dxd-border-accented': $data.isPropertyHighlighted }">
<div class="dx-string-array-container dx-texteditor dx-editor-outlined dx-multiline">
<textarea class="dx-string-array-textarea dx-texteditor-input" data-bind="value: value, disable: disabled"></textarea>
</div>
</div>
</script><script type="text/html" id="dx-propertieseditor">
<div data-bind="css: { 'dx-rtl' : rtl }">
<div class="dx-editors">
<div class="dx-fieldset">
<!-- ko foreach: getEditors() -->
<!-- ko template: editorTemplate -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
</div>
</script>
<script type="text/html" id="dx-objectEditorContent">
<!-- ko if: visible -->
<div data-bind="template: { name: 'dx-propertieseditor', data: viewmodel }"></div>
<!-- /ko -->
</script><script type="text/html" id="dx-expressioneditor-main">
<div class="dx-expression-tree">
<!-- ko if: !aceAvailable -->
<div class="dx-expressioneditor-textarea dxd-border-secondary dxd-back-primary2" data-bind="dxTextArea: { value: textAreaValue, isValid: isValid, spellcheck: false, onKeyUp: function() { isValid(true); } }"></div>
<!-- /ko -->
<!-- ko if: aceAvailable -->
<div class="dx-expressioneditor-textarea dxd-border-secondary dxd-back-primary2" data-bind="dxAceEditor: { value: textAreaValue, editorContainer: editorContainer, theme: theme, options: aceOptions, additionalOptions: additionalOptions, callbacks: callbacks }"></div>
<!-- /ko -->
<div class="dx-expressioneditor-tools">
<!-- ko with: tools-->
<div class="dx-expressioneditor-tools-tabs">
<!-- ko foreach: toolBox-->
<div class="dx-expressioneditor-tools-tab dxd-back-primary2" data-bind="style: { width: width }, visible: visible">
<!-- ko if: $data.templateName -->
<!-- ko template: { name: $data.templateName }-->
<!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko-->
</div>
<!-- /ko-->
</div>
</div>
</script>
<script type="text/html" id="dx-expressioneditor">
<div>
<div class="no-margin-right" data-bind="dxEllipsisEditor: { value: displayValue, buttonAction: function() { popupVisible(true); }, disabled: disabled, isValid: modelValueValid, warningMessage: modelValueWarning }"></div>
<!-- ko template: 'dx-expressioneditor-popup'-->
<!--/ko-->
</div>
</script>
<script type="text/html" id="dx-expressioneditor-popup">
<div class="dx-expressioneditor dx-popup-general" data-bind="dxPopup: {
showTitle: true,
title: title(),
visible: popupVisible,
toolbarItems: buttonItems,
showCloseButton: true,
fullScreen: false,
height: '600px',
width: '645px',
container: getPopupContainer($element),
position: { of: getPopupContainer($element)},
onShown: onShown
}">
<!-- ko if: popupVisible -->
<!-- ko template: "dx-expressioneditor-main" -->
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/html" id="dx-expressioneditor-categories">
<div class="dx-expressioneditor-tools-tab-content-wrapper dxd-border-secondary " data-bind="dxScrollView: { showScrollbar: 'onHover' }">
<!-- ko foreach: content -->
<!-- ko if: $data.templateName -->
<!-- ko template: $data.templateName-->
<!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $data.templateName -->
<div class="dx-expressioneditor-tools-tab-category dxd-list-item-back-color dxd-back-highlighted" data-bind="css: {'dxd-state-selected': content.isSelected }, text: displayName, dxclick: function() { $parent.click($data.content) }">
</div>
<!-- /ko -->
<!-- /ko -->
</div>
</script>
<script type="text/