@mescius/activereportsjs-angular
Version:
ActiveReportsJS components for Angular
618 lines (606 loc) • 26 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, EventEmitter, Component, ViewEncapsulation, Inject, Optional, ViewChild, Input, Output, NgModule, Injectable } from '@angular/core';
import { ReportViewer, ReportDesigner, PdfExport, XlsxExport, HtmlExport, TabularDataExport } from '@mescius/activereportsjs';
export { ColorThemes } from '@mescius/activereportsjs/reportdesigner';
const AR_EXPORTS = new InjectionToken('AR_EXPORTS');
class Export {
}
class ViewerComponent {
get supportedExportKeys() {
return (this.supportedExports || []).map(e => e.key);
}
constructor(supportedExports) {
this.supportedExports = supportedExports;
this._initProps = [];
this.width = '100%';
this.height = '100%';
this.availableExports = [];
this.init = new EventEmitter();
this.reportLoaded = new EventEmitter();
this.documentLoaded = new EventEmitter();
this._propSetters = {
sidebarVisible: (value) => { this._viewer.toggleSidebar(value); },
toolbarVisible: (value) => { this._viewer.toggleToolbar(value); },
fullscreen: (value) => { this._viewer.toggleFullScreen(value); },
availableExports: (value) => {
if (value && value.length > 0) {
const supportedValues = value.filter((v) => this.supportedExportKeys.indexOf(v) >= 0);
// set ['disabled'] to hide export panel if no exports supported
this._viewer.availableExports = supportedValues.length ? supportedValues : ['disabled'];
}
else {
// set explicit list to avoid side effects of global exports initialization
this._viewer.availableExports = this.supportedExportKeys.length ? this.supportedExportKeys : ['disabled'];
}
},
mouseMode: (value) => { this._viewer.mouseMode = value; },
theme: (value) => { this._viewer.theme = value; },
renderMode: (value) => { this._viewer.renderMode = value; },
viewMode: (value) => { this._viewer.viewMode = value; },
zoom: (value) => { this._viewer.zoom = value; },
errorHandler: (value) => { this._viewer.errorHandler = value; },
showParametersOnOpen: (value) => { this._viewer.showParametersOnOpen = value; },
};
this._disposables = [];
}
ngOnChanges(changes) {
for (const prop of Object.keys(changes)) {
const setter = this._propSetters[prop];
if (!setter) {
continue;
}
const value = changes[prop].currentValue;
if (this._viewer) {
setter(value);
}
else {
this._initProps.push(() => setter(value));
}
}
}
ngAfterViewInit() {
this.initViewer()
.then(() => this.init.emit(this));
}
ngOnDestroy() {
while (this._disposables.length) {
this._disposables.shift()();
}
this._viewer.dispose();
}
get ref() {
return this._viewer;
}
async initViewer() {
for (const supportedExport of this.supportedExports || []) {
await supportedExport.init();
}
this._viewer = new ReportViewer.Viewer(this.rootElement.nativeElement, {
language: this.language,
themeConfig: this.themeConfig,
PanelsLayout: this.panelsLayout,
ParameterPanelLocation: this.parameterPanelLocation,
memoizeData: this.memoizeData,
ToolbarLayout: this.toolbarLayout,
ExportsSettings: this.exportsSettings,
});
this._disposables.push(this._viewer.reportLoaded.register(args => this.reportLoaded.emit(args)), this._viewer.documentLoaded.register(args => this.documentLoaded.emit(args)));
this._propSetters.availableExports(this.availableExports);
while (this._initProps.length) {
this._initProps.shift()();
}
}
/**
* Opens report from file or as definition (json string)).
*
* @param report The report template. Can be report URI, or report definition, or instance of PageReport class.
* @param settings Additional settings for report (name, parameters).
*/
open(report, settings) {
return this._viewer.open(report, settings);
}
/**
* Exports currently displayed report to specified output format. Returns object which contains
* result data as blob object | string and download function. So you could either use this blob object or download file immediately.
* Please note that you can specify settings in PDF export as plain list
* (like **{title: 'Title', author: 'Author Name', ownerPassword: '1'}** etc...
*
* ```javascript
* var options = {filename:"Invoice List"};
* var cancelCallback = function(){
* return false; // continue export. Return true to cancel export process
* }
* viewer.export('pdf', options, {cancel: cancelCallback }).then(result => doSmthWithBlob(result.data));
* //or you can download file
* viewer.export('pdf', options, {cancel: cancelCallback }).then(result => result.download('Invoice List'));
* ```
*
* @param format Export format identifier. One of 'pdf', 'xlsx', 'html', 'tabular-data'.
* @param settings Format specific export settings.
* @param params Additional export customization.
*/
export(format, settings, params) {
return this._viewer.export(format, settings, params);
}
/**
* Resets current viewer document
*/
resetDocument() {
return this._viewer.resetDocument();
}
/**
* Prints currently displayed report.
*/
print() {
return this._viewer.print();
}
/** Gets current page number (1-based). Returns 0 if no document loaded. */
get currentPage() {
return this._viewer.currentPage;
}
/** Gets the total number of pages available in report. */
get pageCount() {
return this._viewer.pageCount;
}
/** Provides access to the "history" API. */
get history() {
return this._viewer.history;
}
/** Gets the toolbar API */
get toolbar() {
return this._viewer.toolbar;
}
/** Navigates to the first page. */
goToFirstPage() {
return this._viewer.goToFirstPage();
}
/** Navigates to the previous page. */
goToPrevPage() {
return this._viewer.goToPrevPage();
}
/** Navigates to the next page. */
goToNextPage() {
return this._viewer.goToNextPage();
}
/** Navigates to the last page. */
goToLastPage() {
return this._viewer.goToLastPage();
}
/** Navigates to the specified page (starting from 1). */
goToPage(pageNumber) {
return this._viewer.goToPage(pageNumber);
}
/** Performs backToParent action which will return user to parent report. */
backToParent() {
return this._viewer.backToParent();
}
/** Performs refresh operation in report (re-render report). */
refresh() {
return this._viewer.refresh();
}
/** Gets **true** if backToParent command is applicable to current document. */
get canBackToParent() {
return this._viewer.canBackToParent();
}
/**
* Performs search operation in currently rendered report. Allows you to create your own custom search pane.
*/
search(options, resultFn, progressFn, cancel) {
return this._viewer.search(options, resultFn, progressFn, cancel);
}
/**
* Highlights the search result returned by a search method.
*/
highlight(result) {
return this._viewer.highlight(result);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewerComponent, deps: [{ token: AR_EXPORTS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ViewerComponent, selector: "gc-activereports-viewer", inputs: { width: "width", height: "height", language: "language", theme: "theme", themeConfig: "themeConfig", panelsLayout: "panelsLayout", parameterPanelLocation: "parameterPanelLocation", showParametersOnOpen: "showParametersOnOpen", memoizeData: "memoizeData", toolbarLayout: "toolbarLayout", exportsSettings: "exportsSettings", availableExports: "availableExports", mouseMode: "mouseMode", renderMode: "renderMode", viewMode: "viewMode", zoom: "zoom", fullscreen: "fullscreen", toolbarVisible: "toolbarVisible", sidebarVisible: "sidebarVisible", errorHandler: "errorHandler" }, outputs: { init: "init", reportLoaded: "reportLoaded", documentLoaded: "documentLoaded" }, viewQueries: [{ propertyName: "rootElement", first: true, predicate: ["viewerRoot"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #viewerRoot [style.width]=\"width\" [style.height]=\"height\"></div>", encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewerComponent, decorators: [{
type: Component,
args: [{ selector: 'gc-activereports-viewer', encapsulation: ViewEncapsulation.None, template: "<div #viewerRoot [style.width]=\"width\" [style.height]=\"height\"></div>" }]
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
type: Inject,
args: [AR_EXPORTS]
}, {
type: Optional
}] }]; }, propDecorators: { rootElement: [{
type: ViewChild,
args: ['viewerRoot', { static: false }]
}], width: [{
type: Input
}], height: [{
type: Input
}], language: [{
type: Input
}], theme: [{
type: Input
}], themeConfig: [{
type: Input
}], panelsLayout: [{
type: Input
}], parameterPanelLocation: [{
type: Input
}], showParametersOnOpen: [{
type: Input
}], memoizeData: [{
type: Input
}], toolbarLayout: [{
type: Input
}], exportsSettings: [{
type: Input
}], availableExports: [{
type: Input
}], mouseMode: [{
type: Input
}], renderMode: [{
type: Input
}], viewMode: [{
type: Input
}], zoom: [{
type: Input
}], fullscreen: [{
type: Input
}], toolbarVisible: [{
type: Input
}], sidebarVisible: [{
type: Input
}], errorHandler: [{
type: Input
}], init: [{
type: Output
}], reportLoaded: [{
type: Output
}], documentLoaded: [{
type: Output
}] } });
function isReportDef(report) {
return !!(report && report.definition);
}
function hasReportChanged(curr, prev) {
const definitionChanged = (isReportDef(curr) && curr.definition) !== (isReportDef(curr) && curr.definition);
return (definitionChanged || (curr && curr.id) !== (prev && prev.id) || (curr && curr.displayName) !== (prev && prev.displayName));
}
class DesignerComponent {
constructor() {
/** Sets componets width */
this.width = '100%';
/** Sets componets height */
this.height = '100%';
this._actionHandlers = {};
this._disposables = [];
/** documentChanged event. */
this.documentChanged = new EventEmitter();
}
/**
* Sets DataSource templates
* @param value List of DataSource templates
*/
set dataSources(value) {
this._dataSources = value;
if (this._designer)
this._designer.setDataSourceTemplates(this._dataSources || []);
}
/* Gets DataSource templates */
get dataSources() {
return this._dataSources;
}
/**
* Sets handler to be called on open report.
* Handler return Promise with report info or 'undefined' if operation was cancelled.
*/
set onCreate(value) {
this._actionHandlers.onCreate = value;
if (this._designer)
this._designer.setActionHandlers(this._actionHandlers);
}
get onCreate() {
return this._actionHandlers.onCreate;
}
/**
* Sets handler to be called on opening report.
* Handler returns Promise with report info or 'undefined' if operation was cancelled.
*/
set onOpen(value) {
this._actionHandlers.onOpen = value;
if (this._designer)
this._designer.setActionHandlers(this._actionHandlers);
}
get onOpen() {
return this._actionHandlers.onOpen;
}
/**
* Sets handler to be called on request to render current report.
*/
set onRender(value) {
this._actionHandlers.onRender = value;
if (this._designer)
this._designer.setActionHandlers(this._actionHandlers);
}
get onRender() {
return this._actionHandlers.onRender;
}
/**
* Sets handler to be called on saving report.
* Handler returns Promise with new report info if report was saved or 'undefined' if operation was cancelled.
*/
set onSave(value) {
this._actionHandlers.onSave = value;
if (this._designer)
this._designer.setActionHandlers(this._actionHandlers);
}
get onSave() {
return this._actionHandlers.onSave;
}
/**
* Sets handler to be called on saving report as new.
* Handler returns Promise with new report info if report was saved or 'undefined' if operation was cancelled.
*/
set onSaveAs(value) {
this._actionHandlers.onSaveAs = value;
if (this._designer)
this._designer.setActionHandlers(this._actionHandlers);
}
get onSaveAs() {
return this._actionHandlers.onSaveAs;
}
/**
* Sets handler to be called on open custom file menu.
*/
set onOpenFileMenu(value) {
this._actionHandlers.onOpenFileMenu = value;
if (this._designer)
this._designer.setActionHandlers(this._actionHandlers);
}
get onOpenFileMenu() {
return this._actionHandlers.onOpenFileMenu;
}
/**
* Watch report property
*/
set report(value) {
if (hasReportChanged(value, this._report)) {
this._report = value;
if (value)
this.setReport(value, 'override');
else {
if (!this._designer)
return;
this._designer.createReport({ reportType: 'CPL' }, 'override');
}
}
}
ngAfterViewInit() {
const config = this.onInit?.();
this._designer = new ReportDesigner.Designer(this.rootElement.nativeElement, config);
this._designer.setResourceProvider({
getImagesList: async () => this.imageList || [],
getReportsList: async () => this.reportList || [],
getMasterReportList: async () => this.masterReportList || [],
getThemesList: async () => this.themeList || [],
});
this._designer.setActionHandlers(this._actionHandlers);
if (this.dataSources)
this._designer.setDataSourceTemplates(this._dataSources || []);
if (this._report)
this.setReport(this._report, 'override');
this._disposables.push(this._designer.documentChanged.register(args => this.documentChanged.emit(args)));
}
/**
* Sets report.
* @param report Report info to load.
* @param whenDirty Action to perform in case of 'dirty' report.
* @param isDirtyInitial Initial value for 'dirty' state after load.
*/
setReport(report, whenDirty, isDirtyInitial) {
if (!this._designer)
return Promise.resolve();
return this._designer.setReport(report, whenDirty, isDirtyInitial);
}
/** Gets current report. */
getReport() {
if (!this._designer)
return Promise.resolve();
return this._designer.getReport();
}
/**
* Creates report.
* @param reportInfo Report info to load.
* @param whenDirty Action to perform in case of 'dirty' report.
*/
createReport(reportInfo, whenDirty) {
if (!this._designer)
return Promise.resolve();
return this._designer.createReport(reportInfo, whenDirty);
}
/**
* Process command.
* @param cmd Command name.
*/
processCommand(cmd) {
if (!this._designer)
return Promise.resolve();
return this._designer.processCommand(cmd);
}
/**
* Returns focus to Designer.
*/
focus() {
if (this._designer == null)
throw new Error("Designer is not initialized yet");
this._designer.focus();
}
/**
* Gets API to manipulate designer.
*/
getEditorAPI() {
if (this._designer == null)
throw new Error("Designer is not initialized yet");
return this._designer.getEditorAPI();
}
/*
* Access to the menu and sidebar panels
*/
getPanelsAPI() {
if (this._designer == null)
throw new Error("Designer is not initialized yet");
return this._designer.getPanelsAPI();
}
/*
* Manipulate notifications panel.
*/
getNotificationsAPI() {
if (this._designer == null)
throw new Error("Designer is not initialized yet");
return this._designer.getNotificationsAPI();
}
ngOnDestroy() {
while (this._disposables.length) {
this._disposables.shift()();
}
// this._designer.dispose();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DesignerComponent, selector: "gc-activereports-designer", inputs: { width: "width", height: "height", onInit: "onInit", dataSources: "dataSources", reportList: "reportList", masterReportList: "masterReportList", imageList: "imageList", themeList: "themeList", onCreate: "onCreate", onOpen: "onOpen", onRender: "onRender", onSave: "onSave", onSaveAs: "onSaveAs", onOpenFileMenu: "onOpenFileMenu", report: "report" }, outputs: { documentChanged: "documentChanged" }, viewQueries: [{ propertyName: "rootElement", first: true, predicate: ["designerRoot"], descendants: true }], ngImport: i0, template: "<div #designerRoot [style.width]=\"width\" [style.height]=\"height\"></div>\n", styles: [""] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DesignerComponent, decorators: [{
type: Component,
args: [{ selector: 'gc-activereports-designer', template: "<div #designerRoot [style.width]=\"width\" [style.height]=\"height\"></div>\n" }]
}], ctorParameters: function () { return []; }, propDecorators: { rootElement: [{
type: ViewChild,
args: ['designerRoot', { static: false }]
}], width: [{
type: Input
}], height: [{
type: Input
}], onInit: [{
type: Input
}], dataSources: [{
type: Input
}], reportList: [{
type: Input
}], masterReportList: [{
type: Input
}], imageList: [{
type: Input
}], themeList: [{
type: Input
}], onCreate: [{
type: Input
}], onOpen: [{
type: Input
}], onRender: [{
type: Input
}], onSave: [{
type: Input
}], onSaveAs: [{
type: Input
}], onOpenFileMenu: [{
type: Input
}], report: [{
type: Input
}], documentChanged: [{
type: Output
}] } });
class ActiveReportsModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActiveReportsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ActiveReportsModule, declarations: [ViewerComponent, DesignerComponent], exports: [ViewerComponent, DesignerComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActiveReportsModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActiveReportsModule, decorators: [{
type: NgModule,
args: [{
declarations: [ViewerComponent, DesignerComponent],
imports: [],
exports: [ViewerComponent, DesignerComponent]
}]
}] });
class PdfExportService extends Export {
constructor() {
super();
this.key = 'pdf';
}
async init() {
// 'exportDocument' must be used to avoid tree-shaking
if (typeof PdfExport.exportDocument !== 'function') {
console.error(`Invalid "${this.key}" export module.`);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PdfExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PdfExportService, providedIn: ViewerComponent }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PdfExportService, decorators: [{
type: Injectable,
args: [{
providedIn: ViewerComponent
}]
}], ctorParameters: function () { return []; } });
class XlsxExportService extends Export {
constructor() {
super();
this.key = 'xlsx';
}
async init() {
// 'exportDocument' must be used to avoid tree-shaking
if (typeof XlsxExport.exportDocument !== 'function') {
console.error(`Invalid "${this.key}" export module.`);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: XlsxExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: XlsxExportService, providedIn: ViewerComponent }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: XlsxExportService, decorators: [{
type: Injectable,
args: [{
providedIn: ViewerComponent
}]
}], ctorParameters: function () { return []; } });
class HtmlExportService extends Export {
constructor() {
super();
this.key = 'html';
}
async init() {
// 'exportDocument' must be used to avoid tree-shaking
if (typeof HtmlExport.exportDocument !== 'function') {
console.error(`Invalid "${this.key}" export module.`);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HtmlExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HtmlExportService, providedIn: ViewerComponent }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HtmlExportService, decorators: [{
type: Injectable,
args: [{
providedIn: ViewerComponent
}]
}], ctorParameters: function () { return []; } });
class TabularDataExportService extends Export {
constructor() {
super();
this.key = 'tabular-data';
}
async init() {
// 'exportDocument' must be used to avoid tree-shaking
if (typeof TabularDataExport.exportDocument !== 'function') {
console.error(`Invalid "${this.key}" export module.`);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabularDataExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabularDataExportService, providedIn: ViewerComponent }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabularDataExportService, decorators: [{
type: Injectable,
args: [{
providedIn: ViewerComponent
}]
}], ctorParameters: function () { return []; } });
/*
* Public API Surface of activereports
*/
/**
* Generated bundle index. Do not edit.
*/
export { AR_EXPORTS, ActiveReportsModule, DesignerComponent, Export, HtmlExportService, PdfExportService, TabularDataExportService, ViewerComponent, XlsxExportService };
//# sourceMappingURL=grapecity-activereports-angular.mjs.map