@progress/telerik-angular-native-report-viewer
Version:
Progress® Telerik® Native Report Viewer for Angular
776 lines (773 loc) • 150 kB
JavaScript
import { ReportingAngularViewerService } from './reporting-angular-viewer.service';
import { Subscription, fromEvent, of } from 'rxjs';
import { Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation } from '@angular/core';
import { ContentArea, ReportController, ServiceClient, SearchManager } from '@progress/telerik-common-report-viewer';
import { alignLeftIcon, arrowRotateCwIcon, caretAltToLeftIcon, caretAltToRightIcon, downloadIcon, fileTxtIcon, forwardIcon, positionLeftIcon, positionRightIcon, printIcon, redoIcon, rewindIcon, searchIcon, undoIcon, xCircleIcon, zoomInIcon, zoomOutIcon } from '@progress/kendo-svg-icons';
import { isDocumentAvailable } from '@progress/kendo-angular-common';
import { ParametersSectionComponent } from './parameters/parameters-section.component';
import * as i0 from "@angular/core";
import * as i1 from "./reporting-angular-viewer.service";
import * as i2 from "@angular/common";
import * as i3 from "@progress/kendo-angular-layout";
import * as i4 from "@progress/kendo-angular-toolbar";
import * as i5 from "@progress/kendo-angular-indicators";
import * as i6 from "@progress/kendo-angular-treeview";
import * as i7 from "@progress/kendo-angular-tooltip";
import * as i8 from "@progress/kendo-angular-buttons";
import * as i9 from "./toolbar-tools/pager.component";
import * as i10 from "./search/search-window.component";
import * as i11 from "./parameters/parameters-section.component";
import * as i12 from "./toolbar-tools/zoom.component";
let reportingIndex = 0;
export class ReportingAngularViewerComponent {
constructor(ngZone, renderer, cdr, hostEl, service) {
this.ngZone = ngZone;
this.renderer = renderer;
this.cdr = cdr;
this.hostEl = hostEl;
this.service = service;
this.hostClass = true;
this.historySessionKey = "history";
this.currentHistoryIndexSessionKey = "currentHistoryIndex";
this.currentHistoryItemSessionKey = "currentHistoryItem";
this.scale = 1;
this.width = '100%';
this.height = '700px';
this.contentTabIndex = 1000;
this.scaleMode = 'specific';
this.enableSendEmail = false;
this.keepClientAlive = false;
this.serviceType = 'REST';
this.viewMode = 'interactive';
this.documentMapVisible = true;
this.printMode = 'autoSelect';
this.parametersAreaVisible = true;
this.pageMode = 'continuousScroll';
this.persistSession = false;
this.updateUI = new EventEmitter();
this.error = new EventEmitter();
this.printStarted = new EventEmitter();
this.exportStarted = new EventEmitter();
this.beginLoadReport = new EventEmitter();
this.beforeLoadReport = new EventEmitter();
this.renderingStopped = new EventEmitter();
this.loadedReportChange = new EventEmitter();
this.printDocumentReady = new EventEmitter();
this.pageReady = new EventEmitter();
this.exportDocumentReady = new EventEmitter();
this.interactiveActionExecuting = new EventEmitter();
this.reportVersionMismatch = new EventEmitter();
this.reportLoadProgress = new EventEmitter();
this.reportLoadComplete = new EventEmitter();
this.reportAutoRunOff = new EventEmitter();
this.currentPageChanged = new EventEmitter();
this.navigateToReport = new EventEmitter();
this.parametersLoaded = new EventEmitter();
this.redoIcon = redoIcon;
this.undoIcon = undoIcon;
this.printIcon = printIcon;
this.rewindIcon = rewindIcon;
this.zoomInIcon = zoomInIcon;
this.searchIcon = searchIcon;
this.xCircleIcon = xCircleIcon;
this.forwardIcon = forwardIcon;
this.zoomOutIcon = zoomOutIcon;
this.fileTxtIcon = fileTxtIcon;
this.downloadIcon = downloadIcon;
this.alignLeftIcon = alignLeftIcon;
this.positionLeftIcon = positionLeftIcon;
this.positionRightIcon = positionRightIcon;
this.arrowRotateCwIcon = arrowRotateCwIcon;
this.caretAltToLeftIcon = caretAltToLeftIcon;
this.caretAltToRightIcon = caretAltToRightIcon;
this.subs = new Subscription();
this.tooltipSelector = '';
this.searchTerms = [];
this.children = (dataItem) => of(dataItem.items);
this.hasChildren = (dataItem) => !!dataItem.items;
reportingIndex++;
this.tooltipSelector = `[data-id=\"report-viewer-${reportingIndex}\"] [data-tooltip-title],[data-id=\"report-viewer-${reportingIndex}\"] [data-tooltip-text]`;
}
ngOnInit() {
this.service.serviceClient = new ServiceClient(this.service.getServiceClientOptions());
this.service.controller = new ReportController(this.service.serviceClient, this.service.getControllerOptions());
}
ngAfterViewInit() {
if (!isDocumentAvailable()) {
return;
}
const elem = this.hostEl.nativeElement;
const service = this.service;
service.reportWidth = elem.getBoundingClientRect().width;
this.resizeObservable = fromEvent(window, 'resize');
this.subs.add(this.resizeObservable.subscribe(_ => {
service.reportWidth = elem.getBoundingClientRect().width;
}));
this.renderer.setStyle(elem, 'width', this.width);
this.renderer.setStyle(elem, 'height', this.height);
this.renderer.setAttribute(elem, 'data-id', `report-viewer-${reportingIndex}`);
service.searchManager = new SearchManager(elem, service.controller);
service.contentArea = new ContentArea(elem, service.controller, service.options.messages);
this.ngZone.runOutsideAngular(() => this.initReportingSubs());
if (service.options.authenticationToken) {
service.controller.setAuthenticationToken(service.options.authenticationToken);
}
service.controller.init();
this.restoreSession();
}
ngOnChanges(changes) {
const options = this.service.options;
for (const property in changes) {
options[property] = changes[property].currentValue;
}
changes['printMode'] && (options.printMode = this.getPrintModeAsNumber());
changes['pageMode'] && (options.pageMode = this.getPageModeAsNumber());
changes['viewMode'] && (options.viewMode = this.getViewModeAsNumber());
changes['scaleMode'] && (options.scaleMode = this.getScaleModeAsNumber());
changes['serviceType'] && (options.serviceType = this.getServiceTypeAsNumber());
}
ngOnDestroy() {
this.subs.unsubscribe();
if (this.service.controller) {
this.service.controller.destroy();
}
if (this.service.contentArea) {
this.service.contentArea.destroy();
}
}
get getDocumentMapNodes() {
return this.service.documentInfo.documentMapNodes;
}
get getRenderingExtensions() {
return this.service.documentInfo.renderingExtensions;
}
onApplyButtonClick() {
const parameters = this.service.parameters;
let invalidParameters = [];
let hasError = false;
for (let key in parameters) {
if (ParametersSectionComponent.isInvalidInput(parameters[key])) {
hasError = true;
invalidParameters.push(parameters[key]);
}
}
if (hasError) {
this.service.controller.missingOrInvalidParameters(invalidParameters);
}
else {
this.service.options.reportSource.parameters = JSON.parse(JSON.stringify(this.service.options.reportSource.parameters));
this.service.controller.setParameters(this.service.options.reportSource.parameters);
this.service.controller.previewReport();
}
}
navigateToPage(ev) {
const node = ev.dataItem;
const nodePage = node.page;
const target = { id: node.id, type: 'bookmark' };
this.service.controller.navigateToPage(nodePage, target);
}
getToolbarButtonTitle(buttonName) {
return this.service.options.messages[`ReportViewer_Toolbar${buttonName}Title`];
}
get splitterWrapperClasses() {
const documentMapClass = this.isDocumentMapAvailable ? '' : "trv-document-map-pane-hidden";
const parametersAreaClass = (this.isParametersSectionAvailable || !this.autoRunEnabled) ? '' : "trv-parameters-pane-hidden";
return `trv-content ${documentMapClass} ${parametersAreaClass}`;
}
get hasLazyParameters() {
return this.service.parameters.some(param => param.isVisible && !param.autoRefresh);
}
get autoRunEnabled() {
return this.service.controller.autoRunEnabled;
}
get displayParameterArea() {
return !this.isRenderingInProgress && this.isParametersSectionAvailable;
}
get displayDocumentMap() {
return !this.isRenderingInProgress && this.isDocumentMapAvailable;
}
get isRenderingInProgress() {
return this.service.renderingInProgress;
}
get isParametersSectionAvailable() {
return this.service.isParametersSectionAvailable;
}
get isDocumentMapAvailable() {
return this.service.documentInfo.documentMapAvailable;
}
get isSearchWindowOpen() {
return this.service.isSearchWindowOpen;
}
get totalPages() {
return this.service.totalPages;
}
executeCommand(commandName, commandValue) {
this.executeCommandInternal(commandName, commandValue);
}
get isInPrintViewMode() {
return this.service.options.viewMode === 1;
}
executeCommandInternal(commandName, commandValue) {
const service = this.service;
switch (commandName) {
case 'setScaleMode':
this.scale = commandValue.scale;
this.scaleMode = commandValue.scaleMode;
const scaleModeAsNumber = this.getScaleModeAsNumber();
service.setScaleMode(scaleModeAsNumber);
if (commandValue.scaleMode.toLowerCase() === 'specific') {
this.service.setScale(this.scale);
}
break;
case 'setReportSource':
service.controller.setReportSource(commandValue);
service.controller.refreshReport(true, '');
break;
case 'setAuthenticationToken':
service.controller.setAuthenticationToken(commandValue);
break;
case 'exportReport':
if (!commandValue) {
commandValue = 'pdf';
}
service.controller.exportReport(commandValue);
break;
case 'printReport':
service.controller.printReport();
break;
case 'navigateBackward':
if (!this.isRenderingInProgress || service.currentHistoryIndex > 0) {
service.navigateBackwards();
}
break;
case 'navigateForward':
if (!this.isRenderingInProgress || service.currentHistoryIndex + 1 < service.history.length) {
service.navigateForward();
}
break;
case 'stopRendering':
if (this.isRenderingInProgress) {
service.clearReport();
service.controller.stopRendering();
}
break;
case 'refreshReport':
closeSearchWindow();
service.controller.refreshReport(true, '');
break;
case 'navigateToFirstPage':
service.controller.navigateToPage(1, undefined);
break;
case 'navigateToPrevPage':
if (service.currentPageIndex > 0) {
service.controller.navigateToPage(service.getPageNumber() - 1, undefined);
}
break;
case 'navigateToNextPage':
if (service.currentPageIndex < this.totalPages - 1) {
service.controller.navigateToPage(service.getPageNumber() + 1, undefined);
}
break;
case 'navigateToLastPage':
service.controller.navigateToPage(this.totalPages, undefined);
break;
case 'toggleDocumentMap':
if (!this.isRenderingInProgress || this.isDocumentMapAvailable) {
this.documentMapVisible = !this.documentMapVisible;
}
break;
case 'toggleParametersSection':
if (!this.isRenderingInProgress || this.isParametersSectionAvailable) {
this.parametersAreaVisible = !this.parametersAreaVisible;
}
break;
case 'setViewMode':
closeSearchWindow();
if (!this.isRenderingInProgress) {
service.setViewMode();
}
break;
case 'zoomIn':
if (!this.isRenderingInProgress) {
service.zoomIn();
}
break;
case 'zoomOut':
if (!this.isRenderingInProgress) {
service.zoomOut();
}
break;
case 'toggleSearchWindow':
if (!this.isRenderingInProgress) {
service.isSearchWindowOpen = !service.isSearchWindowOpen;
}
break;
}
function closeSearchWindow() {
if (service.isSearchWindowOpen) {
service.isSearchWindowOpen = false;
}
}
}
getPrintModeAsNumber() {
return this.printMode === 'autoSelect' ? 0 : this.printMode === 'forcePDFFile' ? 1 : 2;
}
getScaleModeAsNumber() {
return this.scaleMode === 'fitPage' ? 0 : this.scaleMode === 'fitPageWidth' ? 1 : 2;
}
getPageModeAsNumber() {
return this.pageMode === 'continuousScroll' ? 0 : 1;
}
getViewModeAsNumber() {
return this.viewMode === 'interactive' ? 0 : 1;
}
getServiceTypeAsNumber() {
return this.serviceType === 'REST' ? 0 : 1;
}
getErrorMessage(reportVersion, restVersion) {
return `The version of the Report Viewer ${reportVersion} does not match the version of the Reporting REST Service ${restVersion}. Please make sure both are running same version.`;
}
initReportingSubs() {
const service = this.service;
const controller = service.controller;
controller
.on('updateUI', () => this.updateUI.emit())
.on('printStarted', () => this.printStarted.emit())
.on('exportStarted', () => this.exportStarted.emit())
.onAsync('beforeLoadReport', () => this.onBeforeLoadReport())
.on('error', (message) => this.onError(message))
.on('renderingStopped', () => this.onRenderingStopped())
.on('beginLoadReport', () => this.beginLoadReport.emit())
.on('loadedReportChange', () => this.onLoadedReportChange())
.on('printDocumentReady', () => this.printDocumentReady.emit())
.on('exportDocumentReady', () => this.exportDocumentReady.emit())
.on('pageReady', (pageInfo) => this.pageReady.emit(pageInfo))
.on('navigateToReport', (report) => this.onNavigateToReport(report))
.on('currentPageChanged', (page) => this.onCurrentPageChanged(page))
.on('interactiveActionExecuting', () => this.interactiveActionExecuting.emit())
.on('reportLoadProgress', (info) => this.onReportLoadProgress(info))
.onAsync('reportLoadComplete', (info) => this.onReportLoadComplete(info))
.on('reportAutoRunOff', () => this.onReportAutoRunOff())
.on('reportVersionMismatch', (restVersion) => this.onReportVersionMismatch(restVersion))
.on('parametersLoaded', (parameters) => this.onParametersLoaded(parameters))
.on('scaleChanged', this.onScaleChanged.bind(this))
.on('scaleModeChanged', this.onScaleModeChanged.bind(this))
.on('viewModeChanged', this.onViewModeChanged.bind(this))
.on('missingOrInvalidParameters', () => this.onMissingOrInvalidParameters());
}
onBeforeLoadReport() {
this.beforeLoadReport.emit();
this.service.renderingInProgress = true;
}
onReportVersionMismatch(restVersion) {
this.service.controller.getServiceVersion().then((reportVersion) => {
const errorMessage = this.getErrorMessage(reportVersion, restVersion);
this.reportVersionMismatch.emit(errorMessage);
throw new Error(errorMessage);
});
}
onReportLoadProgress(info) {
this.reportLoadProgress.emit(info);
this.service.documentInfo = info;
this.service.totalPages = info.pageCount;
}
onLoadedReportChange() {
this.loadedReportChange.emit();
this.service.addHistoryItem(true /* temp */);
}
onReportLoadComplete(info) {
this.reportLoadComplete.emit(info);
this.service.renderingInProgress = false;
this.service.documentInfo = info;
this.service.totalPages = this.service.controller.getPageCount();
this.service.isParametersSectionAvailable = this.service.parameters.some(p => p.isVisible);
const historyItem = this.service.addHistoryItem();
this.saveSession(this.service, historyItem);
}
onReportAutoRunOff() {
this.reportAutoRunOff.emit();
}
saveSession(service, historyItem) {
if (this.persistSession) {
const storage = window.sessionStorage;
storage.setItem(this.historySessionKey, JSON.stringify(service.history));
storage.setItem(this.currentHistoryIndexSessionKey, service.currentHistoryIndex.toString());
storage.setItem(this.currentHistoryItemSessionKey, JSON.stringify(historyItem));
}
}
restoreSession() {
if (this.persistSession) {
const storage = window.sessionStorage;
const historyJson = storage.getItem(this.historySessionKey);
if (historyJson) {
let history = JSON.parse(historyJson);
this.service.history = history;
}
let currentHistoryIndex = storage.getItem(this.currentHistoryIndexSessionKey);
if (currentHistoryIndex) {
this.service.currentHistoryIndex = Number(currentHistoryIndex);
}
const historyItemJson = storage.getItem(this.currentHistoryItemSessionKey);
if (historyItemJson) {
let historyItem = JSON.parse(historyItemJson);
this.service.applyHistory(historyItem.reportSource, historyItem.page, historyItem.documentId, historyItem.scale, historyItem.scaleMode, historyItem.viewMode);
}
this.cdr.detectChanges();
}
}
onRenderingStopped() {
this.service.clearReport();
this.renderingStopped.emit();
}
onError(message) {
this.service.clearReport();
this.error.emit(message);
}
onParametersLoaded(parameters) {
this.parametersLoaded.emit(parameters);
const paramsObj = {};
parameters.forEach((p) => paramsObj[p.id] = p.value);
this.service.options.reportSource.parameters = paramsObj;
this.service.parameters = parameters;
}
onCurrentPageChanged(page) {
this.service.currentPageIndex = page - 1;
this.currentPageChanged.emit({
page: page,
reportDocumentId: this.service.controller.getReportDocumentId()
});
this.updateCurrentHistoryItemPageNumber(page);
}
updateCurrentHistoryItemPageNumber(page) {
let historyItem = this.service.history[this.service.currentHistoryIndex];
if (historyItem && historyItem.page !== page) {
historyItem.page = page;
window.sessionStorage.setItem(this.currentHistoryItemSessionKey, JSON.stringify(historyItem));
window.sessionStorage.setItem(this.historySessionKey, JSON.stringify(this.service.history));
}
}
onNavigateToReport(report) {
this.service.clearReport();
this.navigateToReport.emit(report);
//TODO: should be removed once the common viewer accepts upper case Report/Parameters
const lowerCaseReport = { report: report.Report, parameters: report.Parameters };
this.service.controller.setReportSource(lowerCaseReport);
this.service.controller.refreshReport(true, '');
}
onScaleModeChanged() {
this.updateScaleModeHistory();
}
onScaleChanged() {
this.updateScaleHistory();
}
onViewModeChanged() {
this.updateViewModeHistory();
}
updateScaleModeHistory() {
let historyItem = this.service.history[this.service.currentHistoryIndex];
const scaleMode = this.service.controller.getScaleMode();
if (historyItem.scaleMode !== scaleMode) {
historyItem.scaleMode = scaleMode;
this.saveSession(this.service, historyItem);
}
}
updateScaleHistory() {
let historyItem = this.service.history[this.service.currentHistoryIndex];
const scale = this.service.controller.getScale();
if (historyItem.scale !== scale) {
historyItem.scale = scale;
this.saveSession(this.service, historyItem);
}
}
updateViewModeHistory() {
let historyItem = this.service.history[this.service.currentHistoryIndex];
const viewMode = this.service.controller.getViewMode();
if (historyItem.viewMode !== viewMode) {
historyItem.viewMode = viewMode;
this.saveSession(this.service, historyItem);
}
}
onMissingOrInvalidParameters() {
this.service.isParametersSectionAvailable = this.service.parameters.some(p => p.isVisible);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReportingAngularViewerComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.ReportingAngularViewerService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ReportingAngularViewerComponent, selector: "reporting-angular-viewer", inputs: { scale: "scale", serviceUrl: "serviceUrl", width: "width", height: "height", authenticationToken: "authenticationToken", contentTabIndex: "contentTabIndex", scaleMode: "scaleMode", enableSendEmail: "enableSendEmail", keepClientAlive: "keepClientAlive", serviceType: "serviceType", viewMode: "viewMode", documentMapVisible: "documentMapVisible", reportSource: "reportSource", printMode: "printMode", parametersAreaVisible: "parametersAreaVisible", pageMode: "pageMode", reportServer: "reportServer", persistSession: "persistSession" }, outputs: { updateUI: "updateUI", error: "error", printStarted: "printStarted", exportStarted: "exportStarted", beginLoadReport: "beginLoadReport", beforeLoadReport: "beforeLoadReport", renderingStopped: "renderingStopped", loadedReportChange: "loadedReportChange", printDocumentReady: "printDocumentReady", pageReady: "pageReady", exportDocumentReady: "exportDocumentReady", interactiveActionExecuting: "interactiveActionExecuting", reportVersionMismatch: "reportVersionMismatch", reportLoadProgress: "reportLoadProgress", reportLoadComplete: "reportLoadComplete", reportAutoRunOff: "reportAutoRunOff", currentPageChanged: "currentPageChanged", navigateToReport: "navigateToReport", parametersLoaded: "parametersLoaded" }, host: { properties: { "class.k-reporting-viewer": "this.hostClass" } }, providers: [ReportingAngularViewerService], usesOnChanges: true, ngImport: i0, template: `
<ng-template #tooltipTemplate let-anchor>
<div> {{ anchor.nativeElement.getAttribute('data-tooltip-title') }} </div>
<div> {{ anchor.nativeElement.getAttribute('data-tooltip-text') }} </div>
</ng-template>
<div
class="trv-report-viewer"
kendoTooltip
[tooltipTemplate]="tooltipTemplate"
[filter]="tooltipSelector">
<div class="trv-report-viewer-wrapper">
<div class="trv-toolbar">
<kendo-toolbar>
<kendo-toolbar-button
fillMode="flat"
showText="overflow"
icon="undo"
[svgIcon]="undoIcon"
[text]="getToolbarButtonTitle('NavigateBackward')"
[disabled]="isRenderingInProgress || service.currentHistoryIndex <= 0"
(click)="executeCommand('navigateBackward')"
[title]="getToolbarButtonTitle('NavigateBackward')">
</kendo-toolbar-button>
<kendo-toolbar-button
fillMode="flat"
showText="overflow"
icon="redo"
[svgIcon]="redoIcon"
[text]="getToolbarButtonTitle('NavigateForward')"
[disabled]="isRenderingInProgress || service.currentHistoryIndex + 1 >= service.history.length"
(click)="executeCommand('navigateForward')"
[title]="getToolbarButtonTitle('NavigateForward')">
</kendo-toolbar-button>
<kendo-toolbar-button
fillMode="flat"
showText="overflow"
icon="close-circle"
[svgIcon]="xCircleIcon"
[text]="getToolbarButtonTitle('StopRendering')"
[disabled]="!isRenderingInProgress"
(click)="executeCommand('stopRendering')"
[title]="getToolbarButtonTitle('StopRendering')">
</kendo-toolbar-button>
<kendo-toolbar-button
fillMode="flat"
showText="overflow"
icon="rotate"
[svgIcon]="arrowRotateCwIcon"
[text]="getToolbarButtonTitle('Refresh')"
[disabled]="false"
(click)="executeCommand('refreshReport')"
[title]="getToolbarButtonTitle('Refresh')">
</kendo-toolbar-button>
<custom-pager-tool [totalPages]="totalPages"></custom-pager-tool>
<kendo-toolbar-buttongroup selection="single">
<kendo-toolbar-button
[toggleable]="false"
fillMode="flat"
showText="overflow"
icon="align-left"
[svgIcon]="alignLeftIcon"
[text]="getToolbarButtonTitle('InteractiveView')"
[selected]="!isInPrintViewMode"
[disabled]="isRenderingInProgress || !isInPrintViewMode"
(click)="executeCommand('setViewMode')"
[title]="getToolbarButtonTitle('InteractiveView')"
>
</kendo-toolbar-button>
<kendo-toolbar-button
[toggleable]="false"
fillMode="flat"
showText="overflow"
icon="file-txt"
[svgIcon]="fileTxtIcon"
[text]="getToolbarButtonTitle('PrintPreview')"
[selected]="isInPrintViewMode"
[disabled]="isRenderingInProgress || isInPrintViewMode"
(click)="executeCommand('setViewMode')"
[title]="getToolbarButtonTitle('PrintPreview')">
</kendo-toolbar-button>
</kendo-toolbar-buttongroup>
<kendo-toolbar-separator></kendo-toolbar-separator>
<kendo-toolbar-button
fillMode="flat"
showText="overflow"
icon="print"
[svgIcon]="printIcon"
[text]="getToolbarButtonTitle('PrintReport')"
[disabled]="isRenderingInProgress"
(click)="executeCommand('printReport')"
[title]="getToolbarButtonTitle('PrintReport')">
</kendo-toolbar-button>
<kendo-toolbar-splitbutton
#splitButton
showText="overflow"
icon="download"
[svgIcon]="downloadIcon"
[text]="getToolbarButtonTitle('Export')"
[data]="getRenderingExtensions"
textField="localizedName"
(buttonClick)="splitButton['toolbarSplitButton'].toggle()"
(itemClick)="executeCommand('exportReport', $event.name)"
[title]="getToolbarButtonTitle('Export')"
>
</kendo-toolbar-splitbutton>
<kendo-toolbar-button
fillMode="flat"
showText="overflow"
icon="zoom-in"
[svgIcon]="zoomInIcon"
[text]="getToolbarButtonTitle('ZoomIn')"
[disabled]="isRenderingInProgress || service.options.scaleMode !== 2"
(click)="executeCommand('zoomIn')"
[title]="getToolbarButtonTitle('ZoomIn')">
</kendo-toolbar-button>
<kendo-toolbar-button
fillMode="flat"
showText="overflow"
icon="zoom-out"
[svgIcon]="zoomOutIcon"
[disabled]="isRenderingInProgress || service.options.scaleMode !== 2"
[text]="getToolbarButtonTitle('ZoomOut')"
(click)="executeCommand('zoomOut')"
[title]="getToolbarButtonTitle('ZoomOut')">
</kendo-toolbar-button>
<custom-zoom-tool></custom-zoom-tool>
<kendo-toolbar-separator></kendo-toolbar-separator>
<kendo-toolbar-button
fillMode="flat"
showText="overflow"
icon="search"
[svgIcon]="searchIcon"
[disabled]="isRenderingInProgress"
[text]="getToolbarButtonTitle('Search')"
(click)="executeCommand('toggleSearchWindow')"
[selected]="isSearchWindowOpen"
[title]="getToolbarButtonTitle('Search')">
</kendo-toolbar-button>
<kendo-toolbar-separator></kendo-toolbar-separator>
<kendo-toolbar-button
fillMode="flat"
showText="overflow"
icon="position-left"
[svgIcon]="positionLeftIcon"
[text]="getToolbarButtonTitle('ToggleDocumentMap')"
[disabled]="isRenderingInProgress || !isDocumentMapAvailable"
[selected]="isDocumentMapAvailable && documentMapVisible"
(click)="executeCommand('toggleDocumentMap')"
[title]="getToolbarButtonTitle('ToggleDocumentMap')">
</kendo-toolbar-button>
<kendo-toolbar-button
fillMode="flat"
showText="overflow"
icon="position-right"
[svgIcon]="positionRightIcon"
[text]="getToolbarButtonTitle('ToggleParametersArea')"
[disabled]="isRenderingInProgress || !isParametersSectionAvailable"
[selected]="isParametersSectionAvailable && parametersAreaVisible"
(click)="executeCommand('toggleParametersSection')"
[title]="getToolbarButtonTitle('ToggleParametersArea')">
</kendo-toolbar-button>
</kendo-toolbar>
</div>
<kendo-splitter [class]="splitterWrapperClasses">
<kendo-splitter-pane
class="trv-document-map-pane"
size="300px"
[collapsed]="!documentMapVisible"
[collapsible]="true"
(collapsedChange)="documentMapVisible = !documentMapVisible">
<div class="trv-document-map-container">
<div class="trv-document-map-wrapper">
<kendo-treeview
[nodes]="getDocumentMapNodes"
kendoTreeViewExpandable
kendoTreeViewSelectable
textField="text"
[children]="children"
[hasChildren]="hasChildren"
(selectionChange)="navigateToPage($event)"
></kendo-treeview>
</div>
</div>
</kendo-splitter-pane>
<kendo-splitter-pane class="trv-pages-pane">
<div class="content-area-wrapper">
<kendo-loader
*ngIf="isRenderingInProgress"
type="pulsing"
themeColor="primary"
size="large">
</kendo-loader>
<div class="trv-page-container">
<div class="trv-page-wrapper"></div>
</div>
</div>
<div class="k-notification k-hidden trv-notification">
<div class="k-notification-wrap">
<span class="k-icon k-i-warning"></span>
<div class="k-notification-content trv-error-message"></div>
</div>
</div>
</kendo-splitter-pane>
<kendo-splitter-pane
[collapsed]="!parametersAreaVisible"
class="trv-parameters-pane"
[collapsible]="true"
size="300px"
(collapsedChange)="parametersAreaVisible = !parametersAreaVisible">
<div class="trv-parameters-container">
<div class="trv-parameters-wrapper">
<parameters-section
*ngFor="let parameter of service.parameters"
[parameter]="parameter"
[loading]="isRenderingInProgress"
>
</parameters-section>
<div *ngIf="hasLazyParameters || !autoRunEnabled" class="trv-parameters-area-footer k-actions">
<button kendoButton
title="Preview the report"
class="trv-parameters-area-preview-button"
[disabled]="service.controller.hasInvalidParameter(service.parameters)"
(click)="onApplyButtonClick()"
ariaLabel="preview">Preview
</button>
</div>
</div>
</div>
</kendo-splitter-pane>
</kendo-splitter>
</div>
</div>
<search-window *ngIf="isSearchWindowOpen" [searchTerms]="searchTerms"></search-window>
`, isInline: true, styles: [".content-area-wrapper{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%}.trv-report-viewer{width:100%;height:100%;padding:0;border-radius:0;box-sizing:border-box;position:relative;overflow:hidden;font-size:16px}.k-reporting-viewer{display:block}.trv-report-viewer *{box-sizing:border-box}.trv-report-viewer :before,.trv-report-viewer :after{box-sizing:inherit}.trv-report-viewer-wrapper{display:flex;flex-flow:column nowrap;position:absolute;inset:0}.trv-toolbar{border-width:0;border-bottom-width:1px;flex-shrink:0}.trv-toolbar .trv-toolbar-label{align-self:center}.trv-toolbar>.k-toolbar-item{gap:5px}.trv-toolbar>.k-toolbar-item .trv-toolbar-numeric{width:4em}.trv-toolbar>.k-toolbar-item .k-input-inner{text-align:right}.trv-content{height:100%;border-width:0;box-sizing:border-box;flex:1 1 0%;position:relative;overflow:hidden}.trv-content.trv-document-map-pane-hidden>:nth-child(1):is(.k-pane),.trv-content.trv-document-map-pane-hidden>:nth-child(2):is(.k-splitbar){display:none!important}.trv-content.trv-parameters-pane-hidden>:nth-child(4):is(.k-splitbar),.trv-content.trv-parameters-pane-hidden>:nth-child(5):is(.k-pane){display:none!important}.trv-document-map-pane{max-width:300px}.trv-document-map-container{height:100%;overflow:auto}.trv-document-map-wrapper{padding:20px}.trv-parameters-pane{max-width:300px}.trv-parameters-container{height:100%;overflow:auto}.trv-parameters-wrapper{padding:20px;min-height:100%;display:flex;flex-flow:column nowrap;gap:20px;align-items:stretch}.trv-parameters-area-footer{margin-top:auto;padding:0}.trv-parameter-header,.trv-parameter-value{padding:8px}.trv-parameter-actions{padding:0;margin-top:16px}.trv-pages-pane{position:relative;transform:translateZ(0)}.trv-pages-pane .trv-overlay{display:none}.trv-pages-pane.trv-loading .trv-overlay{display:block;z-index:9000}.trv-pages-pane .trv-notification{width:auto;position:absolute;top:10px;left:50%;z-index:9100;transform:translate(-50%)}.trv-pages-pane .trv-notification>.k-notification-wrap{display:flex;flex-flow:row nowrap;gap:5px}.trv-page-container{position:absolute;padding:20px;width:100%;height:100%;overflow:auto}.trv-page-wrapper{width:min-content}.trv-page-wrapper .trv-report-page{background-color:#fff}.trv-page-wrapper .trv-report-page div{box-sizing:content-box}.trv-page-wrapper .trv-search-dialog-highlighted-result{background-color:#0023664d;color:#fff;background-image:none}.trv-page-wrapper .trv-search-dialog-shaded-result{background-color:#ff8c004d}.printpreview .trv-page-wrapper{margin:auto}.printpreview .trv-page-wrapper .trv-report-page{margin-top:20px}.printpreview .trv-page-wrapper .trv-report-page .sheet .layer{border:1px solid #cccccc}.trv-skeleton-wrapper{width:100%;height:100%;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTUgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTUgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cgkuc3Qxe2ZpbGw6I0UxRURGMTt9Cjwvc3R5bGU+CjxyZWN0IHk9IjAiIGNsYXNzPSJzdDAiIHdpZHRoPSI1MTUiIGhlaWdodD0iMjUwIi8+CjxnPgoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTQxNiwxNDEuNWw0Mi43LDQyLjdjLTUuNSw1LjYtMTIsMTAtMTkuMywxMy4xYy03LjQsMy4xLTE1LjEsNC43LTIzLjMsNC43Yy0xMC45LDAtMjAuOS0yLjctMzAuMS04CgkJYy05LjItNS40LTE2LjUtMTIuNi0yMS44LTIxLjhjLTUuNC05LjItOC0xOS4yLTgtMzAuMWMwLTEwLjksMi43LTIwLjksOC0zMC4xYzUuNC05LjIsMTIuNi0xNi41LDIxLjgtMjEuOGM5LjItNS40LDE5LjItOCwzMC4xLTgKCQl2NTkuM0g0MTZ6IE00ODYsMTMyaC02MFY3MmMxMC45LDAsMjAuOSwyLjcsMzAuMSw4YzkuMiw1LjQsMTYuNSwxMi42LDIxLjgsMjEuOEM0ODMuMywxMTEuMSw0ODYsMTIxLjEsNDg2LDEzMnogTTQzMC42LDE0Mkg0OTEKCQljMCw4LjItMS42LDE2LTQuNywyMy4zYy0zLjEsNy40LTcuNSwxMy44LTEzLjEsMTkuM0w0MzAuNiwxNDJ6Ii8+CjwvZz4KPHJlY3QgeD0iMjAiIHk9IjIwIiBjbGFzcz0ic3QxIiB3aWR0aD0iNDc1IiBoZWlnaHQ9IjEwIi8+CjxyZWN0IHg9IjIwIiB5PSI0NSIgY2xhc3M9InN0MSIgd2lkdGg9IjQ3NSIgaGVpZ2h0PSIxMCIvPgo8cmVjdCB4PSIyMCIgeT0iMTk1IiBjbGFzcz0ic3QxIiB3aWR0aD0iMzE1IiBoZWlnaHQ9IjEwIi8+CjxyZWN0IHg9IjIwIiB5PSIyMjAiIGNsYXNzPSJzdDEiIHdpZHRoPSI0NzUiIGhlaWdodD0iMTAiLz4KPHJlY3QgeD0iMjAiIHk9IjEwNyIgY2xhc3M9InN0MSIgd2lkdGg9IjYwIiBoZWlnaHQ9IjEwIi8+CjxyZWN0IHg9IjIwIiB5PSIxMzIiIGNsYXNzPSJzdDEiIHdpZHRoPSIxOTAiIGhlaWdodD0iMTAiLz4KPHJlY3QgeD0iMTAwIiB5PSIxMDciIGNsYXNzPSJzdDEiIHdpZHRoPSIxMTAiIGhlaWdodD0iMTAiLz4KPHJlY3QgeD0iMjI1IiB5PSIxMDciIGNsYXNzPSJzdDEiIHdpZHRoPSIxMTAiIGhlaWdodD0iMzUiLz4KPC9zdmc+Cg==) repeat top left;background-size:contain}.trv-search-dialog .k-window-content{display:flex;flex-flow:column nowrap;overflow:hidden;padding-top:8px}.trv-search-dialog .k-listview{border-width:.8px}.trv-pages-area-kendo-tooltip{font-size:.9em}.trv-pages-area-kendo-tooltip-title{font-weight:700}.trv-pages-area-kendo-tooltip-text{font-weight:400}.trv-toolbar .k-pager{border:none}.search-dialog-wrapper{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "splitbarWidth", "resizeStep", "splitterBarClass"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { kind: "component", type: i3.SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "splitterBarAttributes", "splitterBarClass", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { kind: "component", type: i4.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: i4.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "component", type: i4.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "fillMode", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { kind: "component", type: i4.ToolBarSeparatorComponent, selector: "kendo-toolbar-separator", exportAs: ["kendoToolBarSeparator"] }, { kind: "component", type: i4.ToolBarSplitButtonComponent, selector: "kendo-toolbar-splitbutton", inputs: ["showText", "showIcon", "text", "icon", "svgIcon", "iconClass", "imageUrl", "disabled", "popupSettings", "fillMode", "themeColor", "look", "buttonClass", "arrowButtonClass", "arrowButtonIcon", "arrowButtonSvgIcon", "textField", "data"], outputs: ["buttonClick", "itemClick", "open", "close"], exportAs: ["kendoToolBarSplitButton"] }, { kind: "component", type: i5.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { kind: "component", type: i6.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: i6.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { kind: "directive", type: i6.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }, { kind: "directive", type: i7.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "tooltipContentClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { kind: "component", type: i8.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i9.CustomPagerToolComponent, selector: "custom-pager-tool", inputs: ["totalPages", "disabled"] }, { kind: "component", type: i10.SearchComponent, selector: "search-window", inputs: ["searchTerms"] }, { kind: "component", type: i11.ParametersSectionComponent, selector: "parameters-section", inputs: ["loading", "parameter"] }, { kind: "component", type: i12.CustomZoomComponent, selector: "custom-zoom-tool" }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReportingAngularViewerComponent, decorators: [{
type: Component,
args: [{ providers: [ReportingAngularViewerService], selector: 'reporting-angular-viewer', template: `
<ng-template #tooltipTemplate let-anchor>
<div> {{ anchor.nativeElement.getAttribute('data-tooltip-title') }} </div>
<div> {{ anchor.nativeElement.getAttribute('data-tooltip-text') }} </div>
</ng-template>
<div
class="trv-report-viewer"
kendoTooltip
[tooltipTemplate]="tooltipTemplate"
[filter]="tooltipSelector">
<div class="trv-report-viewer-wrapper">
<div class="trv-toolbar">
<kendo-toolbar>
<kendo-toolbar-button
fillMode="flat"
showText="overflow"
icon="undo"
[svgIcon]="undoIcon"
[text]="getToolbarButtonTitle('NavigateBackward')"
[disabled]="isRenderingInProgress || service.currentHistoryIndex <= 0"
(click)="executeCommand('navigateBackward')"
[title]="getToolbarButtonTitle('NavigateBackward')">
</kendo-toolbar-button>
<kendo-toolbar-button
fillMode="flat"
showText="overflow"
icon="redo"
[svgIcon]="redoIcon"
[text]="getToolbarButtonTitle('NavigateForward')"
[disabled]="isRenderingInProgress || service.currentHistoryIndex + 1 >= service.history.length"
(click)="executeCommand('navigateForward')"
[title]="getToolbarButtonTitle('NavigateForward')">
</kendo-toolbar-button>
<kendo-toolbar-button
fillMode="flat"
showText="overflow"
icon="close-circle"
[svgIcon]="xCircleIcon"
[text]="getToolbarButtonTitle('StopRendering')"
[disabled]="!isRenderingInProgress"
(click)="executeCommand('stopRendering')"
[title]="getToolbarButtonTitle('StopRendering')">
</kendo-toolbar-but