@progress/telerik-angular-native-report-viewer
Version:
Progress® Telerik® Native Report Viewer for Angular
795 lines (792 loc) • 225 kB
JavaScript
import { ReportingAngularViewerService } from './reporting-angular-viewer.service';
import { Subscription, fromEvent, of } from 'rxjs';
import { Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation, ViewChild, ViewContainerRef, TemplateRef } from '@angular/core';
import { ContentArea, ReportController, ServiceClient, SearchManager } from '@progress/telerik-common-report-viewer';
import { alignLeftIcon, arrowRotateCwIcon, caretAltToLeftIcon, caretAltToRightIcon, downloadIcon, fileTxtIcon, forwardIcon, questionCircleIcon, positionLeftIcon, positionRightIcon, printIcon, redoIcon, rewindIcon, searchIcon, sparklesIcon, undoIcon, xCircleIcon, warningTriangleIcon, 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 "@progress/kendo-angular-notification";
import * as i3 from "@angular/common";
import * as i4 from "@progress/kendo-angular-layout";
import * as i5 from "@progress/kendo-angular-toolbar";
import * as i6 from "@progress/kendo-angular-indicators";
import * as i7 from "@progress/kendo-angular-treeview";
import * as i8 from "@progress/kendo-angular-tooltip";
import * as i9 from "@progress/kendo-angular-icons";
import * as i10 from "@progress/kendo-angular-buttons";
import * as i11 from "./toolbar-tools/pager.component";
import * as i12 from "./search/search-window.component";
import * as i13 from "./aiprompt/aiprompt-window.component";
import * as i14 from "./parameters/parameters-section.component";
import * as i15 from "./toolbar-tools/zoom.component";
let reportingIndex = 0;
export class ReportingAngularViewerComponent {
constructor(ngZone, renderer, cdr, hostEl, service, kendoNotificationService) {
this.ngZone = ngZone;
this.renderer = renderer;
this.cdr = cdr;
this.hostEl = hostEl;
this.service = service;
this.kendoNotificationService = kendoNotificationService;
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.sparklesIcon = sparklesIcon;
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.questionCircleIcon = questionCircleIcon;
this.warningTriangleIcon = warningTriangleIcon;
this.subs = new Subscription();
this.tooltipSelector = '';
this.searchTerms = [];
this.showLicenseBanner = false;
this.showLicenseOverlay = false;
this.aiAvailable = false;
this.aiPromptOutputs = [];
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());
this.service.controller.getServiceConfiguration().then((configurationInfo) => {
this.service.controller.setConfigurationInfo(configurationInfo);
this.licenseBannerData = configurationInfo?.license;
this.showLicenseBanner = this.service.controller.shouldShowLicenseBanner();
this.showLicenseOverlay = this.service.controller.shouldShowLicenseOverlay();
if (this.showLicenseBanner) {
const notification = this.kendoNotificationService.show({
appendTo: this.licenseBannerAppendTo,
content: this.licenseBannerTemplate,
cssClass: 'trv-license-banner',
type: { style: "warning", icon: false },
closable: true,
hideAfter: 0,
});
notification.afterHide?.subscribe(() => this.service.controller.saveToSessionStorage('hideBanner', 'true'));
}
this.aiAvailable = this.service.controller.isAiInsightsEnabled();
});
}
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 isAiPromptWindowOpen() {
return this.service.isAiPromptWindowOpen;
}
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();
closeAiWindow();
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();
closeAiWindow();
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;
case 'toggleAiPromptWindow':
if (!this.isRenderingInProgress) {
service.isAiPromptWindowOpen = !service.isAiPromptWindowOpen;
}
break;
}
function closeSearchWindow() {
if (service.isSearchWindowOpen) {
service.isSearchWindowOpen = false;
}
}
function closeAiWindow() {
if (service.isAiPromptWindowOpen) {
service.isAiPromptWindowOpen = 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 }, { token: i2.NotificationService }], 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], viewQueries: [{ propertyName: "licenseBannerAppendTo", first: true, predicate: ["licenseBannerAppendTo"], descendants: true, read: ViewContainerRef }, { propertyName: "licenseBannerTemplate", first: true, predicate: ["licenseBanner"], descendants: true, read: TemplateRef }], 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 *ngIf="showLicenseOverlay" class="trv-license-overlay"></div>
<div class="trv-report-viewer-wrapper">
<span #licenseBannerAppendTo *ngIf="showLicenseBanner" class="trv-license-banner"></span>
<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-button *ngIf="aiAvailable"
fillMode="flat"
showText="overflow"
icon="sparkles"
[svgIcon]="sparklesIcon"
[disabled]="isRenderingInProgress"
[text]="getToolbarButtonTitle('AiPrompt')"
(click)="executeCommand('toggleAiPromptWindow')"
[selected]="isAiPromptWindowOpen"
[title]="getToolbarButtonTitle('AiPrompt')">
</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>
<ng-template #licenseBanner>
<kendo-svgicon [icon]="warningTriangleIcon" size="medium"></kendo-svgicon>
<span class='trv-license-message'>{{ licenseBannerData?.title || licenseBannerData?.message }} {{ licenseBannerData?.actionMessage }}</span>
<a class='trv-license-link' target='_blank' href='{{ licenseBannerData?.actionLink }}'>
<kendo-svgicon [icon]="questionCircleIcon" size="medium"></kendo-svgicon>
</a>
</ng-template>
<search-window *ngIf="isSearchWindowOpen" [searchTerms]="searchTerms"></search-window>
<aiprompt-window *ngIf="isAiPromptWindowOpen" [promptOutputs]="aiPromptOutputs"></aiprompt-window>
`, isInline: true, styles: [".content-area-wrapper{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%}.trv-license-overlay{z-index:10049;position:absolute;width:100%;height:100%;opacity:.15;pointer-events:none;background-image:url('data:image/svg+xml, <svg width=\"256\" height=\"256\" viewBox=\"0 0 256 256\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <g clip-path=\"url(%23clip0_846_26921)\"> <path d=\"M39.9839 81.8235L45.011 86.8506L44.3446 87.5169L39.3175 82.4898L39.9839 81.8235ZM43.8267 82.1584L46.7649 85.0966L46.1262 85.7354L42.3904 81.9996L42.9946 81.3954L43.8267 82.1584ZM44.6036 83.2391L44.3274 83.4946C44.0742 83.2368 43.8762 82.9629 43.7335 82.6728C43.5885 82.3805 43.5022 82.087 43.4746 81.7924C43.4469 81.4978 43.4815 81.2147 43.5781 80.9431C43.6748 80.6668 43.8359 80.4159 44.0615 80.1904C44.2456 80.0062 44.4367 79.8658 44.6347 79.7691C44.8303 79.6702 45.034 79.623 45.2458 79.6276C45.4598 79.6299 45.6808 79.6897 45.9087 79.8071C46.1343 79.9222 46.3702 80.1029 46.6165 80.3492L49.0644 82.7971L48.4222 83.4393L45.9674 80.9845C45.7717 80.7888 45.5864 80.6611 45.4115 80.6012C45.2343 80.5391 45.0639 80.5368 44.9005 80.5943C44.7348 80.6496 44.5714 80.7578 44.4102 80.9189C44.2514 81.0777 44.1398 81.2561 44.0753 81.454C44.0132 81.6497 43.9936 81.8534 44.0166 82.0652C44.0419 82.2746 44.1041 82.4818 44.2031 82.6866C44.302 82.8869 44.4355 83.071 44.6036 83.2391ZM50.594 80.1144L48.4568 75.9332L49.1093 75.2807L51.502 80.3595L51.0739 80.7877L50.594 80.1144ZM46.582 77.808L50.8115 79.9314L51.4433 80.4182L51.0152 80.8464L45.9259 78.464L46.582 77.808ZM54.9685 75.6156L53.0454 73.6924C52.898 73.5451 52.7404 73.4473 52.5723 73.399C52.4043 73.346 52.2317 73.3483 52.0544 73.4059C51.8772 73.4634 51.7023 73.5785 51.5296 73.7511C51.3685 73.9123 51.2546 74.0814 51.1878 74.2587C51.1234 74.4336 51.1015 74.6005 51.1222 74.7593C51.1452 74.9158 51.2085 75.0459 51.3121 75.1495L50.6734 75.7882C50.5399 75.6547 50.442 75.4878 50.3799 75.2876C50.3177 75.0873 50.2982 74.8698 50.3212 74.635C50.3442 74.3956 50.4156 74.154 50.5353 73.91C50.655 73.6614 50.8276 73.4243 51.0532 73.1987C51.3248 72.9271 51.6102 72.7338 51.9094 72.6187C52.211 72.5013 52.5136 72.4771 52.8175 72.5462C53.1213 72.6106 53.4125 72.7821 53.691 73.0606L55.4311 74.8008C55.5554 74.925 55.6982 75.047 55.8593 75.1667C56.0227 75.2841 56.1769 75.3716 56.3219 75.4291L56.3772 75.4844L55.7108 76.1507C55.6049 76.1093 55.4818 76.0368 55.3414 75.9332C55.1987 75.8273 55.0744 75.7215 54.9685 75.6156ZM53.4528 73.8789L53.9085 74.3208L53.2629 74.9665C53.081 75.1483 52.9337 75.3256 52.8209 75.4982C52.7058 75.6685 52.6287 75.8308 52.5896 75.985C52.5505 76.1392 52.5493 76.2854 52.5861 76.4235C52.6207 76.5593 52.6955 76.6848 52.8106 76.7998C52.928 76.9172 53.0615 76.9978 53.2111 77.0415C53.3607 77.0853 53.5172 77.083 53.6806 77.0346C53.8441 76.9817 54.004 76.877 54.1606 76.7204C54.3562 76.5248 54.4874 76.3107 54.5542 76.0782C54.6209 75.8458 54.6382 75.6259 54.606 75.4188C54.576 75.2093 54.5081 75.0447 54.4023 74.925L54.9823 74.9596C55.0629 75.0724 55.1262 75.2231 55.1722 75.4119C55.2182 75.6006 55.2355 75.8089 55.224 76.0368C55.2125 76.2601 55.1607 76.4891 55.0686 76.7239C54.9765 76.9541 54.8292 77.1704 54.6267 77.373C54.3735 77.6262 54.1019 77.7988 53.8118 77.8909C53.5241 77.9807 53.2445 77.9956 52.9728 77.9358C52.7012 77.8713 52.4619 77.7355 52.2547 77.5284C52.0544 77.3281 51.9175 77.1129 51.8438 76.8827C51.7679 76.6502 51.7529 76.4097 51.7989 76.1611C51.8427 75.9102 51.9417 75.6547 52.0959 75.3946C52.2501 75.1345 52.4549 74.8767 52.7104 74.6212L53.4528 73.8789ZM52.6414 68.6136L57.9447 73.9169L57.3025 74.5591L51.9992 69.2558L52.6414 68.6136ZM55.9283 68.4616L59.6641 72.1974L59.0219 72.8396L55.2861 69.1038L55.9283 68.4616ZM54.2469 68.1613C54.1433 68.0577 54.0869 67.9391 54.0777 67.8056C54.0708 67.6698 54.1295 67.5398 54.2538 67.4155C54.3758 67.2935 54.5047 67.236 54.6405 67.2429C54.7786 67.2475 54.8994 67.3016 55.003 67.4051C55.102 67.5041 55.1538 67.6227 55.1584 67.7608C55.163 67.8943 55.1043 68.022 54.9823 68.144C54.858 68.2683 54.7291 68.3281 54.5956 68.3235C54.4621 68.3143 54.3459 68.2602 54.2469 68.1613ZM62.3192 68.0922L57.741 63.514L58.3832 62.8718L63.6865 68.1751L63.0995 68.762L62.3192 68.0922ZM58.7043 69.5044L58.6318 69.4318C58.3464 69.1464 58.1219 68.853 57.9585 68.5514C57.7951 68.2453 57.6938 67.9437 57.6547 67.6468C57.6178 67.3476 57.6443 67.0633 57.7341 66.794C57.8238 66.5201 57.9804 66.2715 58.2036 66.0482C58.4384 65.8135 58.6847 65.65 58.9425 65.558C59.2003 65.4613 59.4685 65.4302 59.747 65.4647C60.0255 65.4947 60.3098 65.5833 60.5998 65.7306C60.8898 65.8779 61.1867 66.0759 61.4906 66.3244L61.8082 66.6421C62.0568 66.9413 62.2536 67.2371 62.3986 67.5294C62.546 67.8195 62.6346 68.1037 62.6645 68.3822C62.6967 68.6585 62.6656 68.9266 62.5713 69.1867C62.4746 69.4445 62.3077 69.692 62.0706 69.929C61.852 70.1477 61.6045 70.3008 61.3283 70.3882C61.0544 70.4734 60.7667 70.4964 60.4651 70.4573C60.1659 70.4159 59.8655 70.3157 59.564 70.1569C59.2625 69.9935 58.9759 69.776 58.7043 69.5044ZM59.274 68.7897L59.3465 68.8622C59.5329 69.0486 59.7263 69.2051 59.9265 69.3317C60.1291 69.456 60.3328 69.54 60.5376 69.5838C60.7425 69.6275 60.9428 69.6229 61.1384 69.57C61.3318 69.5147 61.5148 69.4008 61.6874 69.2281C61.8991 69.0164 62.028 68.7977 62.0741 68.5721C62.1224 68.3443 62.1144 68.1152 62.0499 67.8851C61.9855 67.6549 61.8899 67.4305 61.7633 67.2118L60.9313 66.3797C60.777 66.2807 60.6148 66.199 60.4444 66.1346C60.2741 66.0655 60.1015 66.0264 59.9265 66.0172C59.7516 66.0033 59.5767 66.0287 59.4017 66.0931C59.2291 66.1553 59.0622 66.2669 58.9011 66.428C58.7261 66.603 58.6122 66.7906 58.5593 66.9908C58.5063 67.1865 58.5029 67.3879 58.5489 67.595C58.5926 67.7999 58.6778 68.0047 58.8044 68.2096C58.931 68.4099 59.0875 68.6032 59.274 68.7897ZM61.8255 59.4295L67.1288 64.7328L66.4866 65.375L61.1833 60.0717L61.8255 59.4295ZM65.1124 59.2775L68.8482 63.0133L68.206 63.6555L64.4702 59.9197L65.1124 59.2775ZM63.431 58.9772C63.3274 58.8736 63.271 58.755 63.2618 58.6215C63.2549 58.4857 63.3136 58.3557 63.4379 58.2314C63.5599 58.1094 63.6888 58.0519 63.8246 58.0588C63.9627 58.0634 64.0835 58.1175 64.1871 58.221C64.2861 58.32 64.3379 58.4385 64.3425 58.5767C64.3471 58.7102 64.2884 58.8379 64.1664 58.9599C64.0421 59.0842 63.9132 59.144 63.7797 59.1394C63.6462 59.1302 63.53 59.0761 63.431 58.9772ZM70.9129 60.0371C71.0648 59.8852 71.1742 59.7137 71.2409 59.5227C71.3077 59.3316 71.3284 59.1406 71.3031 58.9495C71.2755 58.7562 71.1972 58.5836 71.0683 58.4316L71.676 57.824C71.8854 58.0565 72.0166 58.3373 72.0696 58.6664C72.1225 58.991 72.0972 59.3224 71.9936 59.6608C71.8877 59.9969 71.7024 60.2972 71.4377 60.5619C71.1569 60.8428 70.8623 61.0384 70.5538 61.1489C70.2477 61.2571 69.9393 61.2939 69.6285 61.2594C69.3201 61.2226 69.0197 61.127 68.7274 60.9728C68.4351 60.814 68.1634 60.6091 67.9125 60.3582L67.7675 60.2132C67.5166 59.9623 67.3129 59.6919 67.1564 59.4018C66.9999 59.1072 66.9032 58.8057 66.8664 58.4972C66.8319 58.1865 66.8687 57.8781 66.9769 57.5719C67.0874 57.2635 67.283 56.9689 67.5638 56.688C67.8562 56.3957 68.1715 56.2001 68.5099 56.1011C68.8459 55.9998 69.1785 55.9895 69.5077 56.07C69.8368 56.146 70.1361 56.3071 70.4054 56.5534L69.7977 57.1611C69.632 57.0184 69.449 56.9228 69.2487 56.8745C69.0508 56.8239 68.8505 56.8262 68.648 56.8814C68.4454 56.932 68.259 57.0425 68.0886 57.2129C67.893 57.4085 67.7675 57.6122 67.7123 57.824C67.6571 58.0311 67.6559 58.2394 67.7088 58.4489C67.7618 58.6538 67.8504 58.8529 67.9747 59.0462C68.099 59.235 68.2429 59.4111 68.4063 59.5745L68.5513 59.7195C68.7147 59.8829 68.892 60.0279 69.083 60.1545C69.2741 60.2811 69.472 60.3709 69.6769 60.4238C69.884 60.4745 70.0923 60.4733 70.3018 60.4204C70.5113 60.3628 70.715 60.2351 70.9129 60.0371ZM75.1942 56.8054C74.9341 57.0655 74.6545 57.2577 74.3552 57.382C74.056 57.5017 73.7499 57.557 73.4368 57.5478C73.1261 57.5363 72.8199 57.4603 72.5184 57.3199C72.2169 57.1795 71.9349 56.9781 71.6725 56.7157L71.5275 56.5707C71.2237 56.2668 70.9981 55.9515 70.8508 55.6246C70.7012 55.2955 70.6206 54.9709 70.6091 54.651C70.5976 54.331 70.6471 54.0306 70.7575 53.7498C70.868 53.469 71.028 53.2239 71.2375 53.0144C71.5045 52.7474 71.7807 52.5633 72.0661 52.462C72.3538 52.3584 72.6427 52.3273 72.9327 52.3688C73.2205 52.4079 73.5059 52.5092 73.789 52.6726C74.0698 52.8337 74.3