diff --git a/angular.json b/angular.json index 2f1a296..0075464 100644 --- a/angular.json +++ b/angular.json @@ -20,10 +20,8 @@ "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", - "polyfills": [ - "zone.js" - ], - "tsConfig": "tsconfig.app.json", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets", @@ -38,17 +36,13 @@ "styles": [ "src/styles.scss" ], - "scripts": [ - "./node_modules/jquery/dist/jquery.js" - ], + "scripts": [], "allowedCommonJsDependencies": [ "bootstrap", - "prismjs", - "@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.common.min", - "@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.widgets.min", - "@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min", - "@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-designer.min", - "codemirror/lib/codemirror", + "@boldreports/javascript-reporting-controls/Scripts/bold.report-viewer.min", + "@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.bulletgraph.min", + "@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.chart.min", + "@boldreports/javascript-reporting-controls/Scripts/bold.report-designer.min", "codemirror/addon/hint/show-hint", "codemirror/addon/hint/sql-hint", "codemirror/mode/sql/sql", @@ -78,12 +72,8 @@ "maximumError": "30mb" } ] - }, - "development": { - "outputHashing": "all" } - }, - "defaultConfiguration": "production" + } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", @@ -106,11 +96,8 @@ "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", - "polyfills": [ - "zone.js", - "zone.js/testing" - ], - "tsConfig": "tsconfig.spec.json", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", "karmaConfig": "src/karma.conf.js", "styles": [ "src/styles.scss" @@ -126,8 +113,8 @@ "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ - "tsconfig.app.json", - "tsconfig.spec.json" + "src/tsconfig.app.json", + "src/tsconfig.spec.json" ], "exclude": [ "**/node_modules/**", @@ -166,5 +153,6 @@ } } } - } + }, + "defaultProject": "reports-cli" } diff --git a/build/router.js b/build/router.js index 3fb0f6d..f5555f3 100644 --- a/build/router.js +++ b/build/router.js @@ -3,7 +3,7 @@ const fs = require("fs"); let importTemplate = `import { {{component}} } from '{{path}}';`; let childRouterTemplate = `{ path: '{{path}}', component: {{component}} }`; -let routerTempalte = `{ +let routerTemplate = `{ path: '', component: {{component}}, children: [ @@ -11,27 +11,14 @@ let routerTempalte = `{ ] }`; -let importStatements = [`import { BrowserModule } from '@angular/platform-browser'; -import { Type, ModuleWithProviders, NgModule } from '@angular/core'; -import { BoldReportsModule } from '@boldreports/angular-reporting-components'; -import { Routes, RouterModule } from '@angular/router'; +let importStatements = [`import { Routes, provideRouter, withHashLocation } from '@angular/router'; import { AppComponent } from './app.component'; import { PreviewComponent } from './preview/preview.component'; import { HeaderComponent } from './header/header.component'; import { SidebarComponent } from './sidebar/sidebar.component'; import { MainContentComponent } from './main-content/main-content.component';`]; -let moduleTemplate = `@NgModule({ - declarations: components, - imports: [ - BrowserModule, - BoldReportsModule, - RouterModule.forRoot(routes, { useHash: true }) - ], - exports: [RouterModule], -}) +let moduleTemplate = `export const appRoutingProviders = provideRouter(routes, withHashLocation());`; -export class AppRouterModule { } -` let components = ['AppComponent', 'PreviewComponent', 'HeaderComponent', 'SidebarComponent', 'MainContentComponent']; let routes = []; let childRoutes = []; @@ -40,9 +27,9 @@ let previewChildRoutes = []; gulp.task('generate-router', (done) => { let samples = JSON.parse(fs.readFileSync('./src/app/components/samples.json', 'utf8')).samples; let defaultSampleData = samples[0]; - let initilaReportRouterPath = defaultSampleData.routerPath ? defaultSampleData.basePath + '/' + defaultSampleData.routerPath : defaultSampleData.basePath; + let initilaReportRouterPath = defaultSampleData.routerPath ? defaultSampleData.basePath + '/' + defaultSampleData.routerPath : defaultSampleData.basePath; - //Initila routing + //Initial routing routes.push(`{ path: '', redirectTo: '${initilaReportRouterPath}/', pathMatch: 'full' }`); for (let i = 0; i < samples.length; i++) { @@ -65,19 +52,16 @@ gulp.task('generate-router', (done) => { components.push('RDLCComponent'); previewChildRoutes.push(childRouterTemplate.replace('{{path}}', `report-designer/rdlc/`).replace('{{component}}', 'RDLCComponent')); - routes.push(routerTempalte.replace('{{component}}', `AppComponent`).replace('{{childRoute}}', childRoutes.join(',\n\ '))); - routes.push(routerTempalte.replace('{{component}}', `PreviewComponent`).replace('{{childRoute}}', previewChildRoutes.join(',\n\ '))); + routes.push(routerTemplate.replace('{{component}}', `AppComponent`).replace('{{childRoute}}', childRoutes.join(',\n\ '))); + routes.push(routerTemplate.replace('{{component}}', `PreviewComponent`).replace('{{childRoute}}', previewChildRoutes.join(',\n\ '))); //re-routing routes.push(`{ path: '**', redirectTo: '${initilaReportRouterPath}/' }`); let importContent = importStatements.join('\n'); - let componentContent = `const components: any[] | Type | ModuleWithProviders<{}> = [ - ${components.join(',\n ')} -];`; let routerContent = `const routes: Routes = [ ${routes.join(',\n\ ')} ];`; - let Content = importContent + '\n\r' + componentContent + '\n\r' + routerContent + '\n\r' + moduleTemplate; + let Content = importContent + '\n\r' + routerContent + '\n\r' + moduleTemplate; fs.writeFileSync('./src/app/common/app.routing.module.ts', Content, 'utf8'); done(); }); diff --git a/build/serve.js b/build/serve.js index 3042156..8672f78 100644 --- a/build/serve.js +++ b/build/serve.js @@ -1,12 +1,15 @@ -const gulp = require("gulp"); -const { exec } = require('shelljs'); -var argv = require('yargs').argv; +import yargs from 'yargs'; +import { hideBin } from 'yargs/helpers'; +import gulp from 'gulp'; +import shelljs from 'shelljs'; +import runSequence from 'gulp4-run-sequence'; +const argv = yargs(hideBin(process.argv)).parse(); +const { exec } = shelljs; const ngCli = "node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng"; -const runSequence = require('gulp4-run-sequence'); - gulp.task('serve', (done) => { runSequence('update-extensions-export', 'generate-router', () => { - exec(`${ngCli} serve --open --port ${argv?.port || ''}`); + const portArg = argv.port ? `--port ${argv.port}` : ''; + exec(`${ngCli} serve --open ${portArg}`); done(); }); }); diff --git a/package.json b/package.json index b741ada..efb404f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-samples", - "version": "13.1.26", + "version": "14.1.12", "scripts": { "test": "gulp test", "postinstall": "gulp copy", @@ -16,10 +16,10 @@ "@angular/platform-browser": "21.2.17", "@angular/platform-browser-dynamic": "21.2.17", "@angular/router": "21.2.17", - "@boldreports/angular-reporting-components": "13.1.26", - "@boldreports/javascript-reporting-controls": "13.1.26", - "@boldreports/javascript-reporting-extensions": "13.1.26", - "@boldreports/types": "13.1.26", + "@boldreports/angular-reporting-components": "14.1.12", + "@boldreports/javascript-reporting-controls": "14.1.12", + "@boldreports/javascript-reporting-extensions": "14.1.12", + "@boldreports/types": "14.1.12", "@syncfusion/ej2-angular-buttons": "22.2.5", "@syncfusion/ej2-angular-calendars": "22.2.5", "@syncfusion/ej2-angular-dropdowns": "22.2.5", @@ -32,16 +32,17 @@ "prismjs": "1.30.0", "rxjs": "6.6.0", "shelljs": "0.8.5", - "tslib": "2.0.0", - "zone.js": "0.15.1" + "tslib": "2.6.3", + "zone.js": "0.16.2" }, "devDependencies": { - "@angular-devkit/build-angular": "21.2.7", - "@angular/cli": "21.2.7", - "@angular/compiler-cli": "21.2.17", + "@angular-devkit/build-angular": "22.0.5", + "@angular/build": "22.0.5", + "@angular/cli": "22.0.5", + "@angular/compiler-cli": "22.0.5", "@types/jasmine": "2.8.8", "@types/jasminewd2": "2.0.3", - "@types/jquery": "3.3.29", + "@types/jquery": "4.0.1", "@types/node": "8.9.4", "codelyzer": "6.0.0", "gulp": "^4.0.2", @@ -56,8 +57,8 @@ "protractor": "7.0.0", "require-dir": "1.2.0", "ts-node": "8.3.0", - "tslint": "6.1.0", - "typescript": "5.9.3", + "tslint": "6.1.3", + "typescript": "6.0.3", "typo-js": "1.0.3" } } diff --git a/src/app/common/app.component.ts b/src/app/common/app.component.ts index 036f1e5..1851fdf 100644 --- a/src/app/common/app.component.ts +++ b/src/app/common/app.component.ts @@ -1,10 +1,12 @@ -import { Component, ViewChild, OnInit, HostListener } from '@angular/core'; +import { ChangeDetectorRef, Component, ViewChild, OnInit, HostListener } from '@angular/core'; +import { CommonModule } from '@angular/common'; import { Subscription } from 'rxjs'; import 'bootstrap'; import { RouterService } from './router.service'; import samples from '../components/samples.json'; import { MainContentComponent } from './main-content/main-content.component'; import { SidebarComponent } from './sidebar/sidebar.component'; +import { HeaderComponent } from './header/header.component'; import { Title, Meta } from '@angular/platform-browser'; const data = samples; @@ -12,20 +14,21 @@ type sampleInfo = typeof data; @Component({ selector: 'ej-main', + standalone: true, + imports: [CommonModule, HeaderComponent, SidebarComponent, MainContentComponent], templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'], - standalone: false + styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { tocSlideLeft = false; enableOverlay = false; tocMobileSlideLeft = false; private subscriptions = new Subscription(); - @ViewChild('body', { static: true }) body: MainContentComponent; - @ViewChild('sidebar', { static: true }) sidebar: SidebarComponent; - constructor(private routerService: RouterService, private titleService: Title, private meta: Meta) { } + @ViewChild('body', { static: true }) body!: MainContentComponent; + @ViewChild('sidebar', { static: true }) sidebar!: SidebarComponent; + constructor(private routerService: RouterService, private titleService: Title, private meta: Meta, private cdr: ChangeDetectorRef) { } ngOnInit(): void { - let sampleData: sampleInfo['samples'][0]; + let sampleData!: sampleInfo['samples'][0]; this.subscriptions.add(this.routerService.sampleUrl.subscribe((url) => { if (url === '/') { sampleData = data.samples[0]; @@ -37,9 +40,9 @@ export class AppComponent implements OnInit { if (!sampleData) { sampleData = data.samples[0]; } - this.sidebar.selectedPath = sampleData.routerPath; this.body.loadSourceCode(sampleData); this.updateMetaData(sampleData); + this.cdr.markForCheck(); })); let bannerData = data.banner; this.subscriptions.add(this.routerService.navEnd.subscribe(() => { @@ -64,9 +67,9 @@ export class AppComponent implements OnInit { this.meta.updateTag({ name: 'description', property: 'og:description', content: sampleData.metaData.description }); } - @HostListener('window:resize') - onResize(): void { - let sampleData: sampleInfo['samples'][0]; + @HostListener('window:resize', ['$event']) + onResize(event?: Event): void { + let sampleData!: sampleInfo['samples'][0]; this.subscriptions.add(this.routerService.sampleUrl.subscribe((url) => { if (url === '/') { sampleData = data.samples[0]; @@ -91,7 +94,7 @@ export class AppComponent implements OnInit { } private setReportsHeight(sampleData: sampleInfo['samples'][0]): void { - let style: HTMLElement = document.getElementById('reports-style'); + let style: HTMLElement | null = document.getElementById('reports-style'); if (!style) { style = document.createElement('style'); style.id = 'reports-style'; diff --git a/src/app/common/header/header.component.html b/src/app/common/header/header.component.html index fb6935f..4d176a7 100644 --- a/src/app/common/header/header.component.html +++ b/src/app/common/header/header.component.html @@ -20,6 +20,6 @@ Product Detail - Try it Free + Try it Free \ No newline at end of file diff --git a/src/app/common/header/header.component.ts b/src/app/common/header/header.component.ts index f40140f..542178c 100644 --- a/src/app/common/header/header.component.ts +++ b/src/app/common/header/header.component.ts @@ -1,22 +1,23 @@ import { Component, Output, EventEmitter, Inject } from '@angular/core'; +import { CommonModule, DOCUMENT } from '@angular/common'; import samples from '../../components/samples.json'; import { Router } from '@angular/router'; -import { DOCUMENT } from '@angular/common'; import { RouterService } from '../router.service'; const data = samples; @Component({ selector: 'ej-header', + standalone: true, + imports: [CommonModule], templateUrl: './header.component.html', - styleUrls: ['./header.component.scss'], - standalone: false + styleUrls: ['./header.component.scss'] }) export class HeaderComponent { platforms: string[]; platformName = data.platform; - document; - constructor(private routerService: RouterService, private router: Router, @Inject(DOCUMENT) document) { + document: Document; + constructor(private routerService: RouterService, private router: Router, @Inject(DOCUMENT) document: Document) { this.document = document; this.platforms = Object.keys(data.otherPlatforms); } @@ -40,7 +41,7 @@ export class HeaderComponent { } platformSamplePath = this.getRouterPath(this.platformName, platform, sampleName); const reportPath = routerData.reportRouterPath ? (platformBasePath + '/' + platformSamplePath) : platformSamplePath; - window.open(this.document.location.origin + "/" + data.otherPlatforms[platform] + reportPath, '_self'); + window.open(this.document.location.origin + "/" + (data.otherPlatforms as Record)[platform] + reportPath, '_self'); } private getRouterPath(curPlatform: string, targetplatform: string, sampleName: string): string { diff --git a/src/app/common/main-content/main-content.component.html b/src/app/common/main-content/main-content.component.html index 1dd5dd5..d6f9f77 100644 --- a/src/app/common/main-content/main-content.component.html +++ b/src/app/common/main-content/main-content.component.html @@ -78,7 +78,7 @@

- +
TRY IT FOR FREE
 diff --git a/src/app/common/main-content/main-content.component.ts b/src/app/common/main-content/main-content.component.ts index 36348da..5402524 100644 --- a/src/app/common/main-content/main-content.component.ts +++ b/src/app/common/main-content/main-content.component.ts @@ -1,8 +1,8 @@ -import { Component, ViewChild, AfterViewInit, Input, EventEmitter, Output, Renderer2, ChangeDetectorRef } from '@angular/core'; +import { Component, ViewChild, AfterViewInit, Input, EventEmitter, Output, ElementRef, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectorRef, Renderer2 } from '@angular/core'; +import { CommonModule, Location } from '@angular/common'; +import { HttpClient, HttpClientModule } from '@angular/common/http'; import { forkJoin, Observable } from 'rxjs'; -import { Location } from '@angular/common'; -import { Router } from '@angular/router'; -import { HttpClient } from '@angular/common/http'; +import { Router, RouterOutlet } from '@angular/router'; import Prism from 'prismjs'; import { RouterService } from '../router.service'; import 'prismjs/components/prism-typescript'; @@ -18,36 +18,38 @@ interface SourceDataCollection { } interface CurData { - curIndex: number; - isFirst: boolean; - isLast: boolean; + curIndex: number | undefined; + isFirst: boolean | undefined; + isLast: boolean | undefined; } @Component({ selector: 'ej-main-content', + standalone: true, + imports: [CommonModule, HttpClientModule, RouterOutlet], + schemas: [CUSTOM_ELEMENTS_SCHEMA], templateUrl: './main-content.component.html', - styleUrls: ['./main-content.component.scss'], - standalone: false + styleUrls: ['./main-content.component.scss'] }) export class MainContentComponent implements AfterViewInit { - @Input() enableOverlay: boolean; + protected readonly data: sampleInfo = samples; + @Input() enableOverlay!: boolean; @Output() enableOverlayChange = new EventEmitter(); sourceData: SourceDataCollection[] = []; - @ViewChild('title', { static: true }) title; - @ViewChild('metaDescription', { static: true }) metaDescription; - @ViewChild('tabContent', { static: true }) tabContent; - @ViewChild('demoTab', { static: true }) demoTab; - @ViewChild('sourceTab', { static: true }) sourceTab; - @ViewChild('descTab', { static: true }) descTab; - @ViewChild('description', { static: true }) description; - @ViewChild('text', { static: true }) text; - @ViewChild('features[0]', { static: true }) feature1; - @ViewChild('features[1]', { static: true }) feature2; - @ViewChild('features[2]', { static: true }) feature3; - @ViewChild('freeTrialUrl', { static: true }) freeTrialUrl; - @ViewChild('copyrightYear', { static: true }) copyrightYear; - constructor(private routerService: RouterService, private http: HttpClient, private router: Router, private location: Location, private renderer: Renderer2, private cdr: ChangeDetectorRef) { } + @ViewChild('title', { static: true }) title!: ElementRef; + @ViewChild('metaDescription', { static: true }) metaDescription!: ElementRef; + @ViewChild('tabContent', { static: true }) tabContent!: ElementRef; + @ViewChild('demoTab', { static: true }) demoTab!: ElementRef; + @ViewChild('sourceTab', { static: true }) sourceTab!: ElementRef; + @ViewChild('descTab', { static: true }) descTab!: ElementRef; + @ViewChild('description', { static: true }) description!: ElementRef; + @ViewChild('text', { static: true }) text!: ElementRef; + @ViewChild('features[0]', { static: true }) feature1!: ElementRef; + @ViewChild('features[1]', { static: true }) feature2!: ElementRef; + @ViewChild('features[2]', { static: true }) feature3!: ElementRef; + @ViewChild('copyrightYear', { static: true }) copyrightYear!: ElementRef; + constructor(private routerService: RouterService, private http: HttpClient, private router: Router, private location: Location, private renderer: Renderer2, private cdRef: ChangeDetectorRef) { } public loadSourceCode(sampleData: sampleInfo['samples'][0]): void { (jQuery('#parentTab li:first-child a') as any).tab('show'); @@ -56,25 +58,27 @@ export class MainContentComponent implements AfterViewInit { ngAfterViewInit(): void { this.updateTab(); - jQuery(this.demoTab.nativeElement.firstElementChild).on('shown.bs.tab', this.resizeReportViewer); + const tab = this.demoTab.nativeElement.firstElementChild; + tab && (jQuery as any)(tab).on('shown.bs.tab', this.resizeReportViewer); this.copyrightYear.nativeElement.innerText = `Copyright © 2001 - ${data.copyrightYear} Syncfusion Inc.`; + document.dispatchEvent(new Event('DOMContentLoaded')); } - updateSampleDetails(sampleData): void { + updateSampleDetails(sampleData: sampleInfo['samples'][0]): void { this.title.nativeElement.innerText = sampleData.sampleName; this.metaDescription.nativeElement.innerText = sampleData.metaData.description; this.description.nativeElement.innerHTML = ''; setTimeout(() => { - this.description.nativeElement.appendChild(this.tabContent.nativeElement.querySelector('#description')); + const descriptionNode = this.tabContent.nativeElement.querySelector('#description'); + descriptionNode && this.description.nativeElement.appendChild(descriptionNode); }, 0) } - updateBannerDetails(bannerData): void { + updateBannerDetails(bannerData: any): void { this.text.nativeElement.innerText = bannerData.text; this.feature1.nativeElement.innerText = bannerData.features[0]; this.feature2.nativeElement.innerText = bannerData.features[1]; this.feature3.nativeElement.innerText = bannerData.features[2]; - this.renderer.setProperty(this.freeTrialUrl.nativeElement, 'href', bannerData.freeTrialUrl) } getFiles(sampleData: sampleInfo['samples'][0]): void { @@ -83,25 +87,27 @@ export class MainContentComponent implements AfterViewInit { const basePath = `app/components/${reportComponentPath}`; const observableCollection: Observable[] = [this.http.get(basePath + '.component.html', { responseType: 'text' }), this.http.get(basePath + '.component.ts', { responseType: 'text' })]; - forkJoin(observableCollection).subscribe( - (resultCollection: string[]) => { + forkJoin(observableCollection).subscribe({ + next: (resultCollection: string[]) => { this.sourceData = []; this.sourceData.push({ name: `${sampleData.routerPath}.component.ts`, - body: Prism.highlight(resultCollection[1], Prism.languages.ts), id: 'ts' + body: Prism.highlight(resultCollection[1], Prism.languages.ts, 'ts'), id: 'ts' }); this.sourceData.push({ name: `${sampleData.routerPath}.component.html`, - body: Prism.highlight(this.getStringWithOutDescription(resultCollection[0], /(\'|\")description/g), Prism.languages.html), id: 'html' + body: Prism.highlight(this.getStringWithOutDescription(resultCollection[0], /(\'|\")description/g), Prism.languages.html, 'html'), id: 'html' }); - this.cdr.detectChanges(); - }); + this.cdRef.detectChanges(); + }, + error: (err) => console.error('Failed to load source files:', err) + }); } getStringWithOutDescription(code: string, descRegex: RegExp): string { const lines: string[] = code.split('\n'); - let desStartLine: number = null; - let desEndLine: number = null; + let desStartLine: number | null = null; + let desEndLine: number | null = null; let desInsideDivCnt = 0; for (let i = 0; i < lines.length; i++) { const curLine: string = lines[i]; @@ -134,7 +140,7 @@ export class MainContentComponent implements AfterViewInit { onTabNext(): void { this.togglePopup(); const curRouterData: CurData = this.getCurRouterData(); - const curRouterIndex: number = curRouterData.curIndex; + const curRouterIndex: number = curRouterData.curIndex ?? 0; const sampleData: sampleInfo['samples'][0] = curRouterData.isLast ? data.samples[0] : data.samples[curRouterIndex + 1]; const reportPath = sampleData.routerPath ? (sampleData.basePath + '/' + sampleData.routerPath) : sampleData.basePath; this.router.navigate([reportPath]); @@ -155,7 +161,7 @@ export class MainContentComponent implements AfterViewInit { onTabPrev(): void { this.togglePopup(); const curRouterData: CurData = this.getCurRouterData(); - const curRouterIndex: number = curRouterData.curIndex; + const curRouterIndex: number = curRouterData.curIndex ?? 0; const sampleData: sampleInfo['samples'][0] = curRouterData.isFirst ? data.samples[data.samples.length - 1] : data.samples[curRouterIndex - 1]; const reportPath = sampleData.routerPath ? (sampleData.basePath + '/' + sampleData.routerPath) : sampleData.basePath; diff --git a/src/app/common/main.component.ts b/src/app/common/main.component.ts index 95b2e8b..7d1bc04 100644 --- a/src/app/common/main.component.ts +++ b/src/app/common/main.component.ts @@ -1,10 +1,13 @@ import { Component } from '@angular/core'; -import { Router, NavigationStart, Event, NavigationEnd } from '@angular/router'; +import { Router, NavigationStart, Event, NavigationEnd, RouterOutlet } from '@angular/router'; import { RouterService } from './router.service'; + @Component({ selector: 'app-root', - template: '', - standalone: false + standalone: true, + imports: [RouterOutlet], + providers: [RouterService], + template: '' }) export class MainComponent { constructor(private router: Router, private routerService: RouterService) { diff --git a/src/app/common/preview/preview.component.html b/src/app/common/preview/preview.component.html index 0499413..17cf5c0 100644 --- a/src/app/common/preview/preview.component.html +++ b/src/app/common/preview/preview.component.html @@ -10,7 +10,7 @@

Bold Reports® for Angular

Product Detail - Try it Free diff --git a/src/app/common/preview/preview.component.ts b/src/app/common/preview/preview.component.ts index c4cd44c..679b121 100644 --- a/src/app/common/preview/preview.component.ts +++ b/src/app/common/preview/preview.component.ts @@ -1,17 +1,21 @@ -import { Component, HostListener, OnInit } from '@angular/core'; +import { Component, HostListener, OnInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { Title, Meta } from '@angular/platform-browser'; import samples from '../../components/samples.json'; -import { Router, Params } from '@angular/router'; +import { Router, Params, RouterOutlet } from '@angular/router'; import { Subscription } from 'rxjs'; import { RouterService } from '../router.service'; const data = samples; +type sampleInfo = typeof data; +type SampleMeta = { metaData: { title?: string }; sampleName?: string }; @Component({ selector: 'ej-preview', + standalone: true, + imports: [RouterOutlet], + schemas: [CUSTOM_ELEMENTS_SCHEMA], templateUrl: './preview.component.html', - styleUrls: ['./preview.component.scss'], - standalone: false + styleUrls: ['./preview.component.scss'] }) export class PreviewComponent implements OnInit { @@ -53,15 +57,15 @@ export class PreviewComponent implements OnInit { })); } - @HostListener('window:resize') - onResize(): void { + @HostListener('window:resize', ['$event']) + onResize(event?: Event): void { this.setReportsHeight(); } - public updateMetaData(sampleData, reportBasePath): void { - let title: string = sampleData.metaData.title; + public updateMetaData(sampleData: SampleMeta, reportBasePath: string): void { + let title: string = sampleData.metaData.title ?? ''; if (!title) { - title = sampleData.sampleName; + title = sampleData.sampleName ?? ''; } let metaContent: string; switch (reportBasePath) { @@ -88,7 +92,7 @@ export class PreviewComponent implements OnInit { } private setReportsHeight(): void { - let style: HTMLElement = document.getElementById('reports-style'); + let style: HTMLElement | null = document.getElementById('reports-style'); if (!style) { style = document.createElement('style'); style.id = 'reports-style'; diff --git a/src/app/common/router.service.ts b/src/app/common/router.service.ts index d5b658a..7b03e14 100644 --- a/src/app/common/router.service.ts +++ b/src/app/common/router.service.ts @@ -2,13 +2,13 @@ import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; import { Router } from '@angular/router'; -@Injectable() +@Injectable({ providedIn: 'root' }) export class RouterService { public sampleUrl: BehaviorSubject = new BehaviorSubject(''); public previewUrl: BehaviorSubject = new BehaviorSubject(''); public navEnd: BehaviorSubject = new BehaviorSubject(''); - public getRouterData(path, basePathIndex = 1, routerPathIndex = 2): RouterData { + public getRouterData(path: string, basePathIndex = 1, routerPathIndex = 2): RouterData { const routerData: RouterData = { reportBasePath: '', reportRouterPath: '', spilttedUrl: [] }; const modifiedUrl = path.indexOf('?') !== -1 ? path.substring(0, path.indexOf('?')) : path; const spilttedUrl = modifiedUrl.split('/'); diff --git a/src/app/common/sidebar/sidebar.component.html b/src/app/common/sidebar/sidebar.component.html index 1795843..50bece4 100644 --- a/src/app/common/sidebar/sidebar.component.html +++ b/src/app/common/sidebar/sidebar.component.html @@ -5,15 +5,15 @@
+ [ngClass]="(sample.routerPath === selectedPath()) ? tocSelection(toc) : ''" (mousedown)="onSampleClick(sample)">
{{sample.sampleName}}
+ class="ej-status-label ej-{{sample.status?.toLowerCase()}}"> {{sample.status}}
diff --git a/src/app/common/sidebar/sidebar.component.ts b/src/app/common/sidebar/sidebar.component.ts index 84d1a58..56ae9d3 100644 --- a/src/app/common/sidebar/sidebar.component.ts +++ b/src/app/common/sidebar/sidebar.component.ts @@ -1,29 +1,52 @@ -import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'; +import { Component, ElementRef, OnDestroy, OnInit, ViewChild, signal } from '@angular/core'; +import { CommonModule } from '@angular/common'; import { Router } from '@angular/router'; +import { Subscription } from 'rxjs'; +import { RouterService } from '../router.service'; import samples from '../../components/samples.json'; type sampleInfo = typeof data; +type Sample = sampleInfo['samples'][0] & { status?: string }; const data = samples; @Component({ selector: 'ej-sidebar', + standalone: true, + imports: [CommonModule], templateUrl: './sidebar.component.html', - styleUrls: ['./sidebar.component.scss'], - standalone: false + styleUrls: ['./sidebar.component.scss'] }) export class SidebarComponent { - samples: sampleInfo['samples'] = data.samples; - selectedPath: string = undefined; - @ViewChild('toc', { static: true }) toc; + samples: Sample[] = data.samples as Sample[]; + readonly selectedPath = signal(undefined); + @ViewChild('toc', { static: true }) toc!: ElementRef; + private subscriptions = new Subscription(); - constructor(private router: Router) { } + constructor(private router: Router, private routerService: RouterService) { } + + ngOnInit(): void { + this.subscriptions.add(this.routerService.sampleUrl.subscribe((url) => { + if (!url || url === '/') { + this.selectedPath.set(data.samples[0].routerPath); + } else { + const routerData = this.routerService.getRouterData(url); + const match = data.samples.find((sample) => + sample.routerPath === routerData.reportRouterPath && sample.basePath === routerData.reportBasePath); + this.selectedPath.set(match ? match.routerPath : data.samples[0].routerPath); + } + })); + } + + ngOnDestroy(): void { + this.subscriptions.unsubscribe(); + } public onHomeClick(): void { const homePageUrl: string = location.origin.indexOf('demos.boldreports.com') !== -1 ? '/home/' : '/'; location.href = location.origin + homePageUrl + 'angular.html'; } - public onSampleClick(sample: sampleInfo['samples'][0]): void { + public onSampleClick(sample: Sample): void { const reportPath = sample.routerPath ? (sample.basePath + '/' + sample.routerPath) : sample.basePath; this.router.navigate([reportPath]); } @@ -35,7 +58,7 @@ export class SidebarComponent { return 'toc-selected'; } - public getVerticalPosition(sample: sampleInfo['samples'][0]): string { + public getVerticalPosition(sample: Sample): string { const isLandscape = sample.imageDetails.isLandscape; const index = sample.imageDetails.index; return -(isLandscape ? index * 70 : index * 120) + 'px'; diff --git a/src/app/components/barcode/barcode.component.ts b/src/app/components/barcode/barcode.component.ts index d07e5e6..9a1a096 100644 --- a/src/app/components/barcode/barcode.component.ts +++ b/src/app/components/barcode/barcode.component.ts @@ -1,13 +1,15 @@ /** * Barcode - This sample demonstrates the types of barcode and qrcode */ -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './barcode.component.html', - styleUrls: ['./barcode.component.css'], - standalone: false + styleUrls: ['./barcode.component.css'] }) export class BarcodeComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/cmr-report/cmr-report.component.ts b/src/app/components/cmr-report/cmr-report.component.ts index 1d1990f..656e5bc 100644 --- a/src/app/components/cmr-report/cmr-report.component.ts +++ b/src/app/components/cmr-report/cmr-report.component.ts @@ -1,13 +1,15 @@ /** * CMR report sample - This sample analyzes the legal document standardizing international road freight transport with random data. */ -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './cmr-report.component.html', - styleUrls: ['./cmr-report.component.css'], - standalone: false + styleUrls: ['./cmr-report.component.css'] }) export class CMRReportComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/company-sales/company-sales.component.ts b/src/app/components/company-sales/company-sales.component.ts index 9e5d394..104861b 100644 --- a/src/app/components/company-sales/company-sales.component.ts +++ b/src/app/components/company-sales/company-sales.component.ts @@ -1,13 +1,15 @@ /** * Company sales - This sample demonstrates the Sales data by year with grouping. */ -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './company-sales.component.html', - styleUrls: ['./company-sales.component.css'], - standalone: false + styleUrls: ['./company-sales.component.css'] }) export class CompanySalesComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/conditional-row-formatting/conditional-row-formatting.component.ts b/src/app/components/conditional-row-formatting/conditional-row-formatting.component.ts index 9152c1f..39aa2e7 100644 --- a/src/app/components/conditional-row-formatting/conditional-row-formatting.component.ts +++ b/src/app/components/conditional-row-formatting/conditional-row-formatting.component.ts @@ -1,13 +1,15 @@ /** * Conditional Row Formatting - This sample demonstrates the support to view shared dataset and Tablix rows with conditional formatting. */ -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './conditional-row-formatting.component.html', - styleUrls: ['./conditional-row-formatting.component.css'], - standalone: false + styleUrls: ['./conditional-row-formatting.component.css'] }) export class ConditionalRowFormattingComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/consolidated-balance-sheet/consolidated-balance-sheet.component.ts b/src/app/components/consolidated-balance-sheet/consolidated-balance-sheet.component.ts index bd7e17c..e2d2e02 100644 --- a/src/app/components/consolidated-balance-sheet/consolidated-balance-sheet.component.ts +++ b/src/app/components/consolidated-balance-sheet/consolidated-balance-sheet.component.ts @@ -1,17 +1,19 @@ /** * Consolidated Balance Sheet - This RDLC report demonstrates the financial balance records rendered in Bold Report Viewer. */ -import { Component, ViewChild } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; import { rdlcData } from '../rdlcData'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './consolidated-balance-sheet.component.html', - styleUrls: ['./consolidated-balance-sheet.component.css'], - standalone: false + styleUrls: ['./consolidated-balance-sheet.component.css'] }) export class ConsolidatedBalanceSheetComponent { - @ViewChild('viewer') viewerInst; + @ViewChild('viewer') viewerInst: any; // Specifies the report Web API service URL. It is used to process the reports. public serviceUrl = Globals.SERVICE_URL; // Specifies the path of the RDLC report file @@ -24,9 +26,9 @@ export class ConsolidatedBalanceSheetComponent { this.reportPath = 'consolidated-balance-sheet.rdlc'; } - public onReportLoaded(args): void { - const reportNameWithoutExt = args.model.reportPath.split('.')[0]; - this.viewerInst.widget.model.dataSources = rdlcData[reportNameWithoutExt]; + public onReportLoaded(args: any): void { + const reportNameWithoutExt: string = args.model.reportPath.split('.')[0]; + (this.viewerInst.widget.model as any).dataSources = (rdlcData as any)[reportNameWithoutExt]; } } diff --git a/src/app/components/customer-support-analysis/customer-support-analysis.component.ts b/src/app/components/customer-support-analysis/customer-support-analysis.component.ts index 8e03be6..af11c2a 100644 --- a/src/app/components/customer-support-analysis/customer-support-analysis.component.ts +++ b/src/app/components/customer-support-analysis/customer-support-analysis.component.ts @@ -1,13 +1,15 @@ /** * Customer Support Analysis - This sample analyze the efficiency of customer support with random data. */ -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './customer-support-analysis.component.html', - styleUrls: ['./customer-support-analysis.component.css'], - standalone: false + styleUrls: ['./customer-support-analysis.component.css'] }) export class CustomerSupportAnalysisComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/data-bar/data-bar.component.ts b/src/app/components/data-bar/data-bar.component.ts index 3a51f18..a03098a 100644 --- a/src/app/components/data-bar/data-bar.component.ts +++ b/src/app/components/data-bar/data-bar.component.ts @@ -1,13 +1,15 @@ /** * Data Bar - This sample demonstrates the Data Bar. */ -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './data-bar.component.html', - styleUrls: ['./data-bar.component.css'], - standalone: false + styleUrls: ['./data-bar.component.css'] }) export class DataBar { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/designer/designer.component.ts b/src/app/components/designer/designer.component.ts index 3741523..7af164d 100644 --- a/src/app/components/designer/designer.component.ts +++ b/src/app/components/designer/designer.component.ts @@ -1,7 +1,8 @@ /** * Report designer control */ -import { Component, ViewChild, AfterViewInit } from '@angular/core'; +import { Component, ViewChild, AfterViewInit } from '@angular/core'; +import { BoldReportDesignerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; import { Router, Params } from '@angular/router'; import { EJBarcode } from './../extensions/report-item-extensions/barcode.reportitem'; @@ -15,33 +16,34 @@ import { EJHtmlDocument } from './../extensions/report-item-extensions/htmldocum const barcode = 'EJBarcode'; const qrBarcode = 'EJQRBarcode'; -window[barcode] = EJBarcode; -window[qrBarcode] = EJQRBarcode; +(window as any)[barcode] = EJBarcode; +(window as any)[qrBarcode] = EJQRBarcode; const signature = 'EJSignature'; const signatureDialog = 'SignatureDialog'; -window[signature] = EJSignature; -window[signatureDialog] = SignatureDialog; +(window as any)[signature] = EJSignature; +(window as any)[signatureDialog] = SignatureDialog; const shape = 'EJShape'; -window[shape] = EJShape; +(window as any)[shape] = EJShape; const pdfDocument = 'EJPdfDocument'; const htmlDocument = 'EJHtmlDocument'; -window[pdfDocument] = EJPdfDocument; -window[htmlDocument] = EJHtmlDocument; +(window as any)[pdfDocument] = EJPdfDocument; +(window as any)[htmlDocument] = EJHtmlDocument; const pdfSignature = 'EJPDFSignature'; -window[pdfSignature] = EJPDFSignature; +(window as any)[pdfSignature] = EJPDFSignature; @Component({ selector: 'ej-sample', templateUrl: './designer.component.html', - styleUrls: ['./designer.component.css'], - standalone: false + standalone: true, + imports: [BoldReportDesignerModule], + styleUrls: ['./designer.component.css'] }) export class DesignerComponent implements AfterViewInit { - @ViewChild('designer') designerInst; + @ViewChild('designer') designerInst: any; // Specifies the URL of the WebAPI service. It will be used for processing the report. public serviceUrl = Globals.DESIGNER_SERVICE_URL; public reportPath: string; @@ -104,12 +106,12 @@ export class DesignerComponent implements AfterViewInit { }]; } - public onAjaxBeforeLoad(args): void { + public onAjaxBeforeLoad(args: any): void { args.data = JSON.stringify({ reportType: 'RDL' }); } - public toolbarRendering(args): void { + public toolbarRendering(args: any): void { if (args?.target && $(args.target)?.hasClass('e-rptdesigner-toolbarcontainer')) { if (args.action === 'beforeCreate') { args.items.splice(0, 0, { @@ -140,7 +142,7 @@ export class DesignerComponent implements AfterViewInit { } } - public toolbarClick(args): void { + public toolbarClick(args: any): void { if (args.event.click === 'Save') { args.event.cancel = true; args.designerInst.widget.saveToDevice(); diff --git a/src/app/components/dynamic-chart-series/dynamic-chart-series.component.ts b/src/app/components/dynamic-chart-series/dynamic-chart-series.component.ts index 4f3ce34..3edb99e 100644 --- a/src/app/components/dynamic-chart-series/dynamic-chart-series.component.ts +++ b/src/app/components/dynamic-chart-series/dynamic-chart-series.component.ts @@ -1,13 +1,15 @@ /** * Dynamic Chart Series - This sample demonstrates the dynamic chart series. */ -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './dynamic-chart-series.component.html', - styleUrls: ['./dynamic-chart-series.component.css'], - standalone: false + styleUrls: ['./dynamic-chart-series.component.css'] }) export class DynamicChartSeriesComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/dynamic-columns/dynamic-columns.component.ts b/src/app/components/dynamic-columns/dynamic-columns.component.ts index 839b5c1..1dc966a 100644 --- a/src/app/components/dynamic-columns/dynamic-columns.component.ts +++ b/src/app/components/dynamic-columns/dynamic-columns.component.ts @@ -1,13 +1,15 @@ /** * Website Visitor Analysis - This sample analyze the user behavior for a fictitious e-commerce website with random data. */ - import { Component } from '@angular/core'; + import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './dynamic-columns.component.html', - styleUrls: ['./dynamic-columns.component.css'], - standalone: false + styleUrls: ['./dynamic-columns.component.css'] }) export class DynamicColumnsComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/dynamic-logos/dynamic-logos.component.ts b/src/app/components/dynamic-logos/dynamic-logos.component.ts index 33d8c8a..a9908fe 100644 --- a/src/app/components/dynamic-logos/dynamic-logos.component.ts +++ b/src/app/components/dynamic-logos/dynamic-logos.component.ts @@ -1,13 +1,15 @@ /** * Dynamic Logos - This demo showcases a dynamic business report, where company-specific logos and content are updated automatically based on parameter selections. */ - import { Component } from '@angular/core'; + import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './dynamic-logos.component.html', - styleUrls: ['./dynamic-logos.component.css'], - standalone: false + styleUrls: ['./dynamic-logos.component.css'] }) export class DynamicLogosComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/external-parameter-report/external-parameter-report.component.ts b/src/app/components/external-parameter-report/external-parameter-report.component.ts index 680fcc8..0f6550c 100644 --- a/src/app/components/external-parameter-report/external-parameter-report.component.ts +++ b/src/app/components/external-parameter-report/external-parameter-report.component.ts @@ -1,7 +1,8 @@ /** * Product Line Sales - The sample demonstrates the product details information based on barcode report item. */ -import { Component, ViewChild } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { HttpClient } from '@angular/common/http'; import { forkJoin } from 'rxjs'; import { DatePicker } from '@syncfusion/ej2-angular-calendars'; @@ -11,13 +12,14 @@ import { createSpinner, showSpinner, hideSpinner } from "@syncfusion/ej2-angular import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './external-parameter-report.component.html', - styleUrls: ['./external-parameter-report.component.css'], - standalone: false + styleUrls: ['./external-parameter-report.component.css'] }) export class ExternalParameterReportComponent { - @ViewChild('externalparameterreport', { static: false }) externalParameterReport; + @ViewChild('externalparameterreport', { static: false }) externalParameterReport: any; // Specifies the report Web API service URL. It is used to process the reports. public serviceUrl = Globals.SERVICE_URL; // Specifies the path of the RDL report file @@ -53,17 +55,20 @@ export class ExternalParameterReportComponent { if (wheelEvent && !isMobile) { window.addEventListener(wheelEvent, function () { }, { passive: false }); } - createSpinner({target: document.getElementById("spinner-container")}); - showSpinner(document.getElementById("spinner-container")); + const spinnerContainer = document.getElementById("spinner-container"); + if (spinnerContainer) { + createSpinner({target: spinnerContainer}); + showSpinner(spinnerContainer); + } $(".e-spinner-pane").css("background-color", "rgba(0, 0, 0, 0.4)"); const observableCollection = this.http.get(Globals.SERVICE_URL + '/GetExternalParameterData', { responseType: 'json' }); forkJoin(observableCollection).subscribe( - (parameterDataCollection: object) => { + (parameterDataCollection: any) => { var startDate: DatePicker = new DatePicker({ value: new Date("1/1/2003"), width: "180px" }); var endDate: DatePicker = new DatePicker({ value: new Date("12/31/2003"), width: "180px" }); let catogoryList = JSON.parse(parameterDataCollection[0].productCategoryDetail); let subCategoryList = JSON.parse(parameterDataCollection[0].productSubCategoryDetail); - var subCategoryDropDownList = subCategoryList.filter(({ ProductCategoryID }) => ProductCategoryID == 1); + var subCategoryDropDownList = subCategoryList.filter(({ ProductCategoryID }: any) => ProductCategoryID == 1); var category: DropDownList = new DropDownList({ dataSource: catogoryList, fields: { @@ -72,9 +77,9 @@ export class ExternalParameterReportComponent { }, index: 1, width: "180px", - change: function (e) { + change: function (e: any) { var categoryID = e.value; - var categoryDropDownList = subCategoryList.filter(({ ProductCategoryID }) => ProductCategoryID == categoryID); + var categoryDropDownList = subCategoryList.filter(({ ProductCategoryID }: any) => ProductCategoryID == categoryID); if (subCategory.value != null) subCategory.clear(); subCategory.dataSource = categoryDropDownList; @@ -94,7 +99,7 @@ export class ExternalParameterReportComponent { width: "180px", value: [2], placeholder: "Select Option", - change: function(args) { + change: function(args: any) { $('#update').prop('disabled', !args.value.length); } }); @@ -102,7 +107,8 @@ export class ExternalParameterReportComponent { endDate.appendTo('#enddate'); category.appendTo('#category'); subCategory.appendTo('#subcategory'); - hideSpinner(document.getElementById("spinner-container")); + const spinnerHide = document.getElementById("spinner-container"); + spinnerHide && hideSpinner(spinnerHide); $("#r-w-property-title").css("display", "block"); $(".r-w-property").css("display", "inline-flex"); $(".r-w-genearte").css("display", "block"); diff --git a/src/app/components/globals.ts b/src/app/components/globals.ts index 142e5a4..bca2912 100644 --- a/src/app/components/globals.ts +++ b/src/app/components/globals.ts @@ -28,7 +28,7 @@ export const Globals = { EXPORT_ITEM_CLICK: () => { Globals.DESTROY_REPORT = false; }, - EDIT_REPORT: (args) => { + EDIT_REPORT: (args: any) => { if (args.value === 'edit-report') { const path = location.href.split('#'); const reportPath = location.href.lastIndexOf('external-parameter-report') !== -1 ? 'external-parameter-report' : diff --git a/src/app/components/grouping-aggregate/grouping-aggregate.component.ts b/src/app/components/grouping-aggregate/grouping-aggregate.component.ts index cfd4f09..82e22b3 100644 --- a/src/app/components/grouping-aggregate/grouping-aggregate.component.ts +++ b/src/app/components/grouping-aggregate/grouping-aggregate.component.ts @@ -1,13 +1,15 @@ /** * Grouping Aggregate - This sample demonstrates the sorting, group total support in Tablix report item. */ -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './grouping-aggregate.component.html', - styleUrls: ['./grouping-aggregate.component.css'], - standalone: false + styleUrls: ['./grouping-aggregate.component.css'] }) export class GroupingAggregateComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/hr-payroll/hr-payroll.component.ts b/src/app/components/hr-payroll/hr-payroll.component.ts index 4c0374a..0e58bb6 100644 --- a/src/app/components/hr-payroll/hr-payroll.component.ts +++ b/src/app/components/hr-payroll/hr-payroll.component.ts @@ -1,13 +1,15 @@ /** * HR Payroll - This demo showcases an HR Payroll report showing salaries, deductions, demographics, and performance insights in the Angular Bold Report Viewer. */ - import { Component } from '@angular/core'; + import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './hr-payroll.component.html', - styleUrls: ['./hr-payroll.component.css'], - standalone: false + styleUrls: ['./hr-payroll.component.css'] }) export class HRPayrollComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/infographics-report/infographics-report.component.ts b/src/app/components/infographics-report/infographics-report.component.ts index 437af64..831a483 100644 --- a/src/app/components/infographics-report/infographics-report.component.ts +++ b/src/app/components/infographics-report/infographics-report.component.ts @@ -1,13 +1,15 @@ /** * Infographics Report - Visualize student demographics, course interests, achievements, and study preferences. */ -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './infographics-report.component.html', - styleUrls: ['./infographics-report.component.css'], - standalone: false + styleUrls: ['./infographics-report.component.css'] }) export class InfographicsReportComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/invoice/invoice.component.ts b/src/app/components/invoice/invoice.component.ts index 4f37f71..0142193 100644 --- a/src/app/components/invoice/invoice.component.ts +++ b/src/app/components/invoice/invoice.component.ts @@ -1,13 +1,15 @@ /** * Invoice - This sample demonstrates the Report Parameters, Expressions, Textbox and Tablix Report Item capabilities of the ReportViewer. */ -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './invoice.component.html', - styleUrls: ['./invoice.component.css'], - standalone: false + styleUrls: ['./invoice.component.css'] }) export class InvoiceComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/load-large-data/load-large-data.component.ts b/src/app/components/load-large-data/load-large-data.component.ts index 0e5a4d5..a607028 100644 --- a/src/app/components/load-large-data/load-large-data.component.ts +++ b/src/app/components/load-large-data/load-large-data.component.ts @@ -1,17 +1,19 @@ /** * Load Large Data - This report demonstrates the complete details of sales orders in Adventure Works */ -import { Component, ViewChild } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; import { rdlcData } from '../rdlcData'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './load-large-data.component.html', - styleUrls: ['./load-large-data.component.css'], - standalone: false + styleUrls: ['./load-large-data.component.css'] }) export class LoadLargeDataComponent { - @ViewChild('viewer') viewerInst; + @ViewChild('viewer') viewerInst: any; // Specifies the report Web API service URL. It is used to process the reports. public serviceUrl = Globals.SERVICE_URL; // Specifies the path of the RDL report file @@ -25,7 +27,7 @@ export class LoadLargeDataComponent { this.toolbarSettings = { showToolbar: true, items: ~ej.ReportViewer.ToolbarItems.Export & ~ej.ReportViewer.ToolbarItems.Print, - toolbars: ej.ReportViewer.Toolbars.All & ~ej.ReportViewer.Toolbars.Vertical, + toolbars: (ej as any).ReportViewer.Toolbars.All & ~(ej as any).ReportViewer.Toolbars.Vertical, customGroups: [{ items: [{ type: 'Default', diff --git a/src/app/components/mail-merge/mail-merge.component.ts b/src/app/components/mail-merge/mail-merge.component.ts index ebbc9dc..c3e3adb 100644 --- a/src/app/components/mail-merge/mail-merge.component.ts +++ b/src/app/components/mail-merge/mail-merge.component.ts @@ -1,13 +1,15 @@ /** * Mail Merge - This sample demonstrates the complete employee details in List report item. */ -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './mail-merge.component.html', - styleUrls: ['./mail-merge.component.css'], - standalone: false + styleUrls: ['./mail-merge.component.css'] }) export class MailMergeComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/multi-language-report/multi-language-report.component.ts b/src/app/components/multi-language-report/multi-language-report.component.ts index 0422b74..e6de69f 100644 --- a/src/app/components/multi-language-report/multi-language-report.component.ts +++ b/src/app/components/multi-language-report/multi-language-report.component.ts @@ -1,20 +1,22 @@ /** * Multi Language Report - This demo showcases a Multi Language Report that allows users to view report in various languages. */ -import { Component, ViewChild } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { HttpClient } from '@angular/common/http'; import { DropDownList } from '@syncfusion/ej2-angular-dropdowns'; import { createSpinner, showSpinner, hideSpinner } from "@syncfusion/ej2-angular-popups"; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './multi-language-report.component.html', - styleUrls: ['./multi-language-report.component.css'], - standalone: false + styleUrls: ['./multi-language-report.component.css'] }) export class MultiLanguageReportComponent { - @ViewChild('multilanguagereport', { static: false }) multiLanguageReport; + @ViewChild('multilanguagereport', { static: false }) multiLanguageReport: any; // Specifies the report Web API service URL. It is used to process the reports. public serviceUrl = Globals.SERVICE_URL; // Specifies the path of the RDL report file @@ -47,7 +49,7 @@ export class MultiLanguageReportComponent { const reportViewer = this.multiLanguageReport; const selectedLanguageId = (jQuery("#languages"))[0].ej2_instances[0].value; const tooltipData = this.tooltipLocales[selectedLanguageId]; - const selectedLanguage = this.languagesList.find(lang => lang.languageId === selectedLanguageId); + const selectedLanguage = this.languagesList.find((lang: any) => lang.languageId === selectedLanguageId); const parameters = [{ name: 'Language', labels: [selectedLanguage.Name], values: [selectedLanguage.Name] }]; reportViewer.widget.model.parameters = parameters; reportViewer.widget.reload(); @@ -59,8 +61,11 @@ export class MultiLanguageReportComponent { }; } ngAfterViewInit(): void { - createSpinner({target: document.getElementById("spinner-container")}); - showSpinner(document.getElementById("spinner-container")); + const spinnerContainer = document.getElementById("spinner-container"); + if (spinnerContainer) { + createSpinner({target: spinnerContainer}); + showSpinner(spinnerContainer); + } $(".e-spinner-pane").css("background-color", "rgba(0, 0, 0, 0.4)"); const languages: DropDownList = new DropDownList({ dataSource: this.languagesList, @@ -73,7 +78,8 @@ export class MultiLanguageReportComponent { showClearButton: false }); languages.appendTo('#languages'); - hideSpinner(document.getElementById("spinner-container")); + const spinnerHide = document.getElementById("spinner-container"); + spinnerHide && hideSpinner(spinnerHide); $("#r-w-property-title").css("display", "block"); $(".r-w-property").css("display", "inline-flex"); $(".r-w-genearte").css("display", "block"); diff --git a/src/app/components/nda-report/nda-report.component.ts b/src/app/components/nda-report/nda-report.component.ts index 65110a2..2bf3d6d 100644 --- a/src/app/components/nda-report/nda-report.component.ts +++ b/src/app/components/nda-report/nda-report.component.ts @@ -1,13 +1,15 @@ /** * NDA Reort - This demo showcases the integration of PDF digital signature in a Non-Disclosure Agreement (NDA) report. */ - import { Component } from '@angular/core'; + import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './nda-report.component.html', - styleUrls: ['./nda-report.component.css'], - standalone: false + styleUrls: ['./nda-report.component.css'] }) export class NDAReportComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/northwind-products-suppliers-report/northwind-products-suppliers-report.component.ts b/src/app/components/northwind-products-suppliers-report/northwind-products-suppliers-report.component.ts index bb2ccb8..ea369dc 100644 --- a/src/app/components/northwind-products-suppliers-report/northwind-products-suppliers-report.component.ts +++ b/src/app/components/northwind-products-suppliers-report/northwind-products-suppliers-report.component.ts @@ -1,13 +1,15 @@ /** * Northwind Products and Suppliers Report - This sample demonstrates the sales performance of different products. */ -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './northwind-products-suppliers-report.component.html', - styleUrls: ['./northwind-products-suppliers-report.component.css'], - standalone: false + styleUrls: ['./northwind-products-suppliers-report.component.css'] }) export class NorthwindProductsSuppliersReportComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/parameter-customization/parameter-customization.component.ts b/src/app/components/parameter-customization/parameter-customization.component.ts index dae3c49..e6f1f31 100644 --- a/src/app/components/parameter-customization/parameter-customization.component.ts +++ b/src/app/components/parameter-customization/parameter-customization.component.ts @@ -1,15 +1,17 @@ /** * Parameter Customization - This sample demonstrates the parameter customization for product sales details information based on category and sub category of products report parameters. */ -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; import { Switch } from '@syncfusion/ej2-buttons'; import { DateTimePicker } from '@syncfusion/ej2-angular-calendars'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './parameter-customization.component.html', styleUrls: ['./parameter-customization.component.css'], - standalone: false }) export class ParameterCustomizationComponent { // Specifies the report Web API service URL. It is used to process the reports. @@ -24,7 +26,7 @@ export class ParameterCustomizationComponent { constructor() { this.reportPath = 'product-line-sales.rdl'; } - onBeforeParameterAdd(args) { + onBeforeParameterAdd(args: any) { args.parameterSettings.dateTimePickerType = "DateTime"; args.parameterSettings.dateTimeFormat = "MM/dd/yyyy hh:mm tt"; args.parameterSettings.timeDisplayFormat = "HH:mm"; @@ -36,17 +38,17 @@ export class ParameterCustomizationComponent { $targetTag.append($dateTime); var datetimepicker: DateTimePicker = new DateTimePicker({ value: args.parameterModel._dateValue, - open: function (args) { + open: function (args: any) { var btn = ej.buildTag("div.e-dt-button e-btn e-dt-button e-btn e-select e-flate-flat mr-1", "NULL", "", { id: "null-btn-v2" }); if (args.popup.element.className.includes('null')) { args.popup.element.firstChild.lastChild.prepend(btn[0]); } btn[0].addEventListener('click', function () { - datetimepicker.value = null; + datetimepicker.value = null as any; datetimepicker.placeholder = 'Null'; }); }, - change: function (args) { + change: function (args: any) { var data = datetimepicker.value; var updateParam = { name: name, @@ -58,12 +60,12 @@ export class ParameterCustomizationComponent { }); datetimepicker.appendTo($dateTime[0]) var endDateInst = (document.querySelector('[name="EndDate"]')).ej2_instances[0]; - var switchBaseTag = ej.buildTag("input", null, null, { 'id': endDateInst.element.id + '_parameter_disable_switch', 'type': 'checkbox', 'name': 'chkDateTime', 'value': args.parameterModel.ControlId, 'style': 'margin-top:8px' }); + var switchBaseTag = ej.buildTag("input", null as any, null as any, { 'id': endDateInst.element.id + '_parameter_disable_switch', 'type': 'checkbox', 'name': 'chkDateTime', 'value': args.parameterModel.ControlId, 'style': 'margin-top:8px' }); if (document.querySelectorAll("#" + endDateInst.element.id + '_parameter_disable_switch').length == 0) { $("#" + endDateInst.element.id + "_div").append(switchBaseTag); var switchObj: Switch = new Switch({ checked: false, cssClass: "switchstyle" }); switchObj.appendTo($('#' + endDateInst.element.id + '_parameter_disable_switch')[0]); - switchObj.addEventListener('change', function (args) { + switchObj.addEventListener('change', function (args: any) { endDateInst.enabled = !switchObj.checked; }) } diff --git a/src/app/components/patient-experience-analysis/patient-experience-analysis.component.ts b/src/app/components/patient-experience-analysis/patient-experience-analysis.component.ts index 73082e3..82f344e 100644 --- a/src/app/components/patient-experience-analysis/patient-experience-analysis.component.ts +++ b/src/app/components/patient-experience-analysis/patient-experience-analysis.component.ts @@ -1,13 +1,15 @@ /** * Patient Experience Analysis - This sample analyze the patient satisfaction trends during hospital visits with random data. */ -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './patient-experience-analysis.component.html', - styleUrls: ['./patient-experience-analysis.component.css'], - standalone: false + styleUrls: ['./patient-experience-analysis.component.css'] }) export class PatientExperienceAnalysisComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/paystub/paystub.component.ts b/src/app/components/paystub/paystub.component.ts index 9246e4c..66846a5 100644 --- a/src/app/components/paystub/paystub.component.ts +++ b/src/app/components/paystub/paystub.component.ts @@ -1,17 +1,19 @@ /** * Paystub - This RDLC report demonstrates the paystub records rendered in Bold Report Viewer. */ -import { Component, ViewChild } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; import { rdlcData } from '../rdlcData'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './paystub.component.html', - styleUrls: ['./paystub.component.css'], - standalone: false + styleUrls: ['./paystub.component.css'] }) export class PaystubComponent { - @ViewChild('viewer') viewerInst; + @ViewChild('viewer') viewerInst: any; // Specifies the report Web API service URL. It is used to process the reports. public serviceUrl = Globals.SERVICE_URL; // Specifies the path of the RDL report file @@ -24,9 +26,9 @@ export class PaystubComponent { this.reportPath = 'paystub.rdlc'; } - public onReportLoaded(args): void { - const reportNameWithoutExt = args.model.reportPath.split('.')[0]; - this.viewerInst.widget.model.dataSources = rdlcData[reportNameWithoutExt]; + public onReportLoaded(args: any): void { + const reportNameWithoutExt: string = args.model.reportPath.split('.')[0]; + (this.viewerInst.widget.model as any).dataSources = (rdlcData as any)[reportNameWithoutExt]; } } diff --git a/src/app/components/personal-expense-analysis/personal-expense-analysis.component.ts b/src/app/components/personal-expense-analysis/personal-expense-analysis.component.ts index 95cc8c8..180ca9a 100644 --- a/src/app/components/personal-expense-analysis/personal-expense-analysis.component.ts +++ b/src/app/components/personal-expense-analysis/personal-expense-analysis.component.ts @@ -1,13 +1,15 @@ /** * Personal Expense Analysis - The sample demonstrates the spending patterns of an individual with random data. */ -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './personal-expense-analysis.component.html', - styleUrls: ['./personal-expense-analysis.component.css'], - standalone: false + styleUrls: ['./personal-expense-analysis.component.css'] }) export class PersonalExpenseAnalysisComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/powerpoint-report/powerpoint-report.component.ts b/src/app/components/powerpoint-report/powerpoint-report.component.ts index 3d302a7..06b4ad6 100644 --- a/src/app/components/powerpoint-report/powerpoint-report.component.ts +++ b/src/app/components/powerpoint-report/powerpoint-report.component.ts @@ -1,13 +1,15 @@ /** * Powerpoint Report - This sample demonstrates the online food ordering details which is presented as a power point report using page break. */ -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './powerpoint-report.component.html', - styleUrls: ['./powerpoint-report.component.css'], - standalone: false + styleUrls: ['./powerpoint-report.component.css'] }) export class PowerpointReportComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/product-catalog/product-catalog.component.ts b/src/app/components/product-catalog/product-catalog.component.ts index b98b298..dac54d6 100644 --- a/src/app/components/product-catalog/product-catalog.component.ts +++ b/src/app/components/product-catalog/product-catalog.component.ts @@ -1,17 +1,19 @@ /** * Product Catalog - This RDLC report demonstrates the list of products rendered in Bold Report Viewer. */ -import { Component, ViewChild } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; import { rdlcData } from '../rdlcData'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './product-catalog.component.html', - styleUrls: ['./product-catalog.component.css'], - standalone: false + styleUrls: ['./product-catalog.component.css'] }) export class ProductCatalogComponent { - @ViewChild('viewer') viewerInst; + @ViewChild('viewer') viewerInst: any; // Specifies the report Web API service URL. It is used to process the reports. public serviceUrl = Globals.SERVICE_URL; // Specifies the path of the RDL report file @@ -24,9 +26,9 @@ export class ProductCatalogComponent { this.reportPath = 'product-catalog.rdlc'; } - public onReportLoaded(args): void { - const reportNameWithoutExt = args.model.reportPath.split('.')[0]; - this.viewerInst.widget.model.dataSources = rdlcData[reportNameWithoutExt]; + public onReportLoaded(args: any): void { + const reportNameWithoutExt: string = args.model.reportPath.split('.')[0]; + (this.viewerInst.widget.model as any).dataSources = (rdlcData as any)[reportNameWithoutExt]; } } diff --git a/src/app/components/product-details/product-details.component.ts b/src/app/components/product-details/product-details.component.ts index c596612..24a7054 100644 --- a/src/app/components/product-details/product-details.component.ts +++ b/src/app/components/product-details/product-details.component.ts @@ -1,13 +1,15 @@ /** * Product Details - The sample demonstrates the product details information based on barcode report item. */ -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './product-details.component.html', - styleUrls: ['./product-details.component.css'], - standalone: false + styleUrls: ['./product-details.component.css'] }) export class ProductDetailsComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/product-line-sales/product-line-sales.component.ts b/src/app/components/product-line-sales/product-line-sales.component.ts index e5ed615..f2bedcd 100644 --- a/src/app/components/product-line-sales/product-line-sales.component.ts +++ b/src/app/components/product-line-sales/product-line-sales.component.ts @@ -1,13 +1,15 @@ /** * Product Line Sales - This sample demonstrates the product sales details information based on category and sub category of products report parameters. */ -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './product-line-sales.component.html', - styleUrls: ['./product-line-sales.component.css'], - standalone: false + styleUrls: ['./product-line-sales.component.css'] }) export class ProductLineSalesComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/rdlc/rdlc.component.ts b/src/app/components/rdlc/rdlc.component.ts index 04b467a..7936374 100644 --- a/src/app/components/rdlc/rdlc.component.ts +++ b/src/app/components/rdlc/rdlc.component.ts @@ -1,7 +1,8 @@ /** * Report designer control */ -import { Component, ViewChild, AfterViewInit } from '@angular/core'; +import { Component, ViewChild, AfterViewInit } from '@angular/core'; +import { BoldReportDesignerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; import { Router, Params } from '@angular/router'; import { EJBarcode } from './../extensions/report-item-extensions/barcode.reportitem'; @@ -17,33 +18,34 @@ import { rdlcData } from '../rdlcData'; const barcode = 'EJBarcode'; const qrBarcode = 'EJQRBarcode'; -window[barcode] = EJBarcode; -window[qrBarcode] = EJQRBarcode; +(window as any)[barcode] = EJBarcode; +(window as any)[qrBarcode] = EJQRBarcode; const signature = 'EJSignature'; const signatureDialog = 'SignatureDialog'; -window[signature] = EJSignature; -window[signatureDialog] = SignatureDialog; +(window as any)[signature] = EJSignature; +(window as any)[signatureDialog] = SignatureDialog; const shape = 'EJShape'; -window[shape] = EJShape; +(window as any)[shape] = EJShape; const pdfDocument = 'EJPdfDocument'; const htmlDocument = 'EJHtmlDocument'; -window[pdfDocument] = EJPdfDocument; -window[htmlDocument] = EJHtmlDocument; +(window as any)[pdfDocument] = EJPdfDocument; +(window as any)[htmlDocument] = EJHtmlDocument; const pdfSignature = 'EJPDFSignature'; -window[pdfSignature] = EJPDFSignature; +(window as any)[pdfSignature] = EJPDFSignature; @Component({ + standalone: true, + imports: [BoldReportDesignerModule], selector: 'ej-sample', templateUrl: './rdlc.component.html', - styleUrls: ['./rdlc.component.css'], - standalone: false + styleUrls: ['./rdlc.component.css'] }) export class RDLCComponent implements AfterViewInit { - @ViewChild('designer') designerInst; + @ViewChild('designer') designerInst: any; // Specifies the URL of the WebAPI service. It will be used for processing the report. public serviceUrl = Globals.DESIGNER_SERVICE_URL; public reportPath: string; @@ -107,7 +109,7 @@ export class RDLCComponent implements AfterViewInit { }]; } - public toolbarRendering(args): void { + public toolbarRendering(args: any): void { if (args?.target && $(args.target)?.hasClass('e-rptdesigner-toolbarcontainer')) { if (args.action === 'beforeCreate') { args.items.splice(0, 0, { @@ -138,27 +140,27 @@ export class RDLCComponent implements AfterViewInit { } } - public toolbarClick(args): void { + public toolbarClick(args: any): void { if (args.event.click === 'Save') { args.event.cancel = true; args.designerInst.widget.saveToDevice(); } } - public onAjaxBeforeLoad(args): void { + public onAjaxBeforeLoad(args: any): void { args.data = JSON.stringify({ reportType: 'RDLC' }); } - public onReportOpened(args): void { + public onReportOpened(args: any): void { this.isServerReport = args.isServerReport; } - public previewReport(args): void { + public previewReport(args: any): void { if (this.isServerReport) { let reportPath = args.model.reportPath; reportPath = reportPath.indexOf('//') !== -1 ? reportPath.substring(2) : reportPath; const reportNameWithoutExt = reportPath.split('.rdlc')[0]; - const datasource = rdlcData[reportNameWithoutExt]; + const datasource = (rdlcData as Record)[reportNameWithoutExt]; args.dataSets = datasource; args.cancelDataInputDialog = true; } diff --git a/src/app/components/sales-by-year/sales-by-year.component.ts b/src/app/components/sales-by-year/sales-by-year.component.ts index 7f9527a..000dc8d 100644 --- a/src/app/components/sales-by-year/sales-by-year.component.ts +++ b/src/app/components/sales-by-year/sales-by-year.component.ts @@ -1,17 +1,19 @@ /** * Sales By Year - This RDLC report demonstrates the Sales record rendered in Bold Report Viewer. */ -import { Component, ViewChild } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; import { rdlcData } from '../rdlcData'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './sales-by-year.component.html', - styleUrls: ['./sales-by-year.component.css'], - standalone: false + styleUrls: ['./sales-by-year.component.css'] }) export class SalesByYearComponent { - @ViewChild('viewer') viewerInst; + @ViewChild('viewer') viewerInst: any; // Specifies the report Web API service URL. It is used to process the reports. public serviceUrl = Globals.SERVICE_URL; // Specifies the path of the RDL report file @@ -24,9 +26,9 @@ export class SalesByYearComponent { this.reportPath = 'sales-by-year.rdlc'; } - public onReportLoaded(args): void { - const reportNameWithoutExt = args.model.reportPath.split('.')[0]; - this.viewerInst.widget.model.dataSources = rdlcData[reportNameWithoutExt]; + public onReportLoaded(args: any): void { + const reportNameWithoutExt: string = args.model.reportPath.split('.')[0]; + (this.viewerInst.widget.model as any).dataSources = (rdlcData as any)[reportNameWithoutExt]; } } diff --git a/src/app/components/sales-order-detail/sales-order-detail.component.ts b/src/app/components/sales-order-detail/sales-order-detail.component.ts index 88d8993..8a5f8fe 100644 --- a/src/app/components/sales-order-detail/sales-order-detail.component.ts +++ b/src/app/components/sales-order-detail/sales-order-detail.component.ts @@ -1,13 +1,15 @@ /** * Sales Order Detail - This sample demonstrates the sales order information based on order id. */ -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './sales-order-detail.component.html', - styleUrls: ['./sales-order-detail.component.css'], - standalone: false + styleUrls: ['./sales-order-detail.component.css'] }) export class SalesOrderDetailComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/sales-report/sales-report.component.ts b/src/app/components/sales-report/sales-report.component.ts index f5698ac..dc96e08 100644 --- a/src/app/components/sales-report/sales-report.component.ts +++ b/src/app/components/sales-report/sales-report.component.ts @@ -1,13 +1,15 @@ /** * Sales Report - This report demonstrates the complete details of sales orders in Adventure Works */ -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './sales-report.component.html', - styleUrls: ['./sales-report.component.css'], - standalone: false + styleUrls: ['./sales-report.component.css'] }) export class SalesReportComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/samples.json b/src/app/components/samples.json index 5f37f23..92697e3 100644 --- a/src/app/components/samples.json +++ b/src/app/components/samples.json @@ -30,7 +30,7 @@ "Intuitive drag-and-drop widgets", "Hassle-free licensing" ], - "freeTrialUrl": "https://app.boldid.net/register/reports/enterprise?evaluation=v2&leadsource=demos.boldreports.com&gclid=&referrerroriginurl=https://demos.boldreports.com/pricing&secondaryreferraloriginurl=https://demos.boldreports.com/&host=server&quantity=1" + "freeTrialUrl": "https://www.boldreports.com/register/reports?evaluation=v2" }, "copyrightYear": "2026", "samples": [ diff --git a/src/app/components/spark-line/spark-line.component.ts b/src/app/components/spark-line/spark-line.component.ts index 9234fca..1ee26df 100644 --- a/src/app/components/spark-line/spark-line.component.ts +++ b/src/app/components/spark-line/spark-line.component.ts @@ -1,17 +1,19 @@ /** * spark-line - This RDLC report demonstrates the spark-line records rendered in Bold Report Viewer. */ -import { Component, ViewChild } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; import { rdlcData } from '../rdlcData'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './spark-line.component.html', - styleUrls: ['./spark-line.component.css'], - standalone: false + styleUrls: ['./spark-line.component.css'] }) export class SparkLine { - @ViewChild('viewer') viewerInst; + @ViewChild('viewer') viewerInst: any; // Specifies the report Web API service URL. It is used to process the reports. public serviceUrl = Globals.SERVICE_URL; // Specifies the path of the RDL report file @@ -24,9 +26,9 @@ export class SparkLine { this.reportPath = 'spark-line.rdlc'; } - public onReportLoaded(args): void { - const reportNameWithoutExt = args.model.reportPath.split('.')[0]; - this.viewerInst.widget.model.dataSources = rdlcData[reportNameWithoutExt]; + public onReportLoaded(args: any): void { + const reportNameWithoutExt: string = args.model.reportPath.split('.')[0]; + (this.viewerInst.widget.model as any).dataSources = (rdlcData as any)[reportNameWithoutExt]; } } diff --git a/src/app/components/sub-report/sub-report.component.ts b/src/app/components/sub-report/sub-report.component.ts index ad27722..17c4bd5 100644 --- a/src/app/components/sub-report/sub-report.component.ts +++ b/src/app/components/sub-report/sub-report.component.ts @@ -1,13 +1,15 @@ /** * Sub Report - This report demonstrates the complete details of sales order details by order number in Adventure Works */ -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './sub-report.component.html', - styleUrls: ['./sub-report.component.css'], - standalone: false + styleUrls: ['./sub-report.component.css'] }) export class SubReportComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/territory-sales/territory-sales.component.ts b/src/app/components/territory-sales/territory-sales.component.ts index fa915a2..a6741f0 100644 --- a/src/app/components/territory-sales/territory-sales.component.ts +++ b/src/app/components/territory-sales/territory-sales.component.ts @@ -1,13 +1,15 @@ /** * Territory Sales - This sample demonstrates the Tablix with Row Grouping by sales region and drill down the group details. */ -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './territory-sales.component.html', - styleUrls: ['./territory-sales.component.css'], - standalone: false + styleUrls: ['./territory-sales.component.css'] }) export class TerritorySalesComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/tickets-sales-analysis/tickets-sales-analysis.component.ts b/src/app/components/tickets-sales-analysis/tickets-sales-analysis.component.ts index 444b693..6a205a2 100644 --- a/src/app/components/tickets-sales-analysis/tickets-sales-analysis.component.ts +++ b/src/app/components/tickets-sales-analysis/tickets-sales-analysis.component.ts @@ -1,13 +1,15 @@ /** * Tickets Sales Analysis - This sample analyze the tickets sold in theater with random data */ -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './tickets-sales-analysis.component.html', - styleUrls: ['./tickets-sales-analysis.component.css'], - standalone: false + styleUrls: ['./tickets-sales-analysis.component.css'] }) export class TicketsSalesComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/transcript-report/transcript-report.component.ts b/src/app/components/transcript-report/transcript-report.component.ts index d942bb9..d07913b 100644 --- a/src/app/components/transcript-report/transcript-report.component.ts +++ b/src/app/components/transcript-report/transcript-report.component.ts @@ -1,13 +1,15 @@ /** * Transcript report sample - This sample analyze the student's performance in a fictitious school with random data. */ -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './transcript-report.component.html', - styleUrls: ['./transcript-report.component.css'], - standalone: false + styleUrls: ['./transcript-report.component.css'] }) export class TranscriptReportComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/app/components/website-visitor-analysis/website-visitor-analysis.component.ts b/src/app/components/website-visitor-analysis/website-visitor-analysis.component.ts index 39a0736..17c6f19 100644 --- a/src/app/components/website-visitor-analysis/website-visitor-analysis.component.ts +++ b/src/app/components/website-visitor-analysis/website-visitor-analysis.component.ts @@ -1,13 +1,15 @@ /** * Website Visitor Analysis - This sample analyze the user behavior for a fictitious e-commerce website with random data. */ -import { Component } from '@angular/core'; +import { Component } from '@angular/core'; +import { BoldReportViewerModule } from '@boldreports/angular-reporting-components'; import { Globals } from '../globals'; @Component({ + standalone: true, + imports: [BoldReportViewerModule], selector: 'ej-sample', templateUrl: './website-visitor-analysis.component.html', - styleUrls: ['./website-visitor-analysis.component.css'], - standalone: false + styleUrls: ['./website-visitor-analysis.component.css'] }) export class WebsiteVisitorAnalysisComponent { // Specifies the report Web API service URL. It is used to process the reports. diff --git a/src/index.html b/src/index.html index e77593f..1c56513 100644 --- a/src/index.html +++ b/src/index.html @@ -5,6 +5,7 @@ Bold Reports Angular Demos & Tutorials + @@ -14,7 +15,26 @@ - + + + +