feature(REPORT-502080): Bold Reports 13.1 release changes

package.json

@@ -1,25 +1,25 @@
 {
   "name": "angular-samples",
-  "version": "12.1.12",
+  "version": "13.1.26",
   "scripts": {
     "test": "gulp test",
     "postinstall": "gulp copy",
     "build": "gulp production-build",
     "serve": "gulp serve"
   },
   "dependencies": {
-    "@angular/animations": "21.1.0",
-    "@angular/common": "21.1.0",
-    "@angular/compiler": "21.1.0",
-    "@angular/core": "21.1.0",
-    "@angular/forms": "21.1.0",
-    "@angular/platform-browser": "21.1.0",
-    "@angular/platform-browser-dynamic": "21.1.0",
-    "@angular/router": "21.1.0",
-    "@boldreports/angular-reporting-components": "12.1.12",
-    "@boldreports/javascript-reporting-controls": "12.1.12",
-    "@boldreports/javascript-reporting-extensions": "12.1.12",
-    "@boldreports/types": "12.1.12",
+    "@angular/animations": "^16.1.0",
+    "@angular/common": "^16.1.0",
+    "@angular/compiler": "^16.1.0",
+    "@angular/core": "^16.1.0",
+    "@angular/forms": "^16.1.0",
+    "@angular/platform-browser": "^16.1.0",
+    "@angular/platform-browser-dynamic": "^16.1.0",
+    "@angular/router": "^16.1.0",
+    "@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",
     "@syncfusion/ej2-angular-buttons": "22.2.5",
     "@syncfusion/ej2-angular-calendars": "22.2.5",
     "@syncfusion/ej2-angular-dropdowns": "22.2.5",
@@ -33,12 +33,12 @@
     "rxjs": "6.6.0",
     "shelljs": "0.8.5",
     "tslib": "2.0.0",
-    "zone.js": "0.15.1"
+    "zone.js": "0.13.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "21.1.0",
-    "@angular/cli": "21.1.0",
-    "@angular/compiler-cli": "21.1.0",
+    "@angular-devkit/build-angular": "^16.1.0",
+    "@angular/cli": "~16.1.0",
+    "@angular/compiler-cli": "^16.1.0",
     "@types/jasmine": "2.8.8",
     "@types/jasminewd2": "2.0.3",
     "@types/jquery": "3.3.29",
@@ -57,7 +57,7 @@
     "require-dir": "1.2.0",
     "ts-node": "8.3.0",
     "tslint": "6.1.0",
-    "typescript": "5.9.3",
+    "typescript": "4.9.3",
     "typo-js": "1.0.3"
   }
 }

src/app/common/app.component.scss

@@ -16,6 +16,7 @@
   transition: left 400ms ease;
   overflow-y: auto;
   overflow-x: hidden;
+  background-color: #FAFAFA;
 }
 
 .mobile-overlay{

src/app/common/app.component.ts

@@ -13,8 +13,7 @@ type sampleInfo = typeof data;
 @Component({
   selector: 'ej-main',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
-  standalone: false
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
   tocSlideLeft = false;
@@ -64,7 +63,7 @@ export class AppComponent implements OnInit {
     this.meta.updateTag({ name: 'description', property: 'og:description', content: sampleData.metaData.description });
   }
 
-  @HostListener('window:resize')
+  @HostListener('window:resize', ['$event'])
   onResize(): void {
     let sampleData: sampleInfo['samples'][0];
     this.subscriptions.add(this.routerService.sampleUrl.subscribe((url) => {

src/app/common/header/header.component.ts

@@ -9,8 +9,7 @@ const data = samples;
 @Component({
   selector: 'ej-header',
   templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss'],
-  standalone: false
+  styleUrls: ['./header.component.scss']
 })
 export class HeaderComponent {
   platforms: string[];

src/app/common/main-content/main-content.component.scss

@@ -1,5 +1,8 @@
 .ej-main-body-content {
-  background-color: #FAFAFA;
+  height:100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
 
   #parentTabContainer {
     border: 1px solid #D7D7D7;
@@ -197,7 +200,8 @@
   color: #283A5E;
   margin: 30px 0px;
   width: 100%;
-  height: 121px;  
+  height: 121px;
+  flex-shrink: 0;
 }
 
 .header {

src/app/common/main-content/main-content.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild, AfterViewInit, Input, EventEmitter, Output, Renderer2, ChangeDetectorRef } from '@angular/core';
+import { Component, ViewChild, AfterViewInit, Input, EventEmitter, Output, Renderer2 } from '@angular/core';
 import { forkJoin, Observable } from 'rxjs';
 import { Location } from '@angular/common';
 import { Router } from '@angular/router';
@@ -26,8 +26,7 @@ interface CurData {
 @Component({
   selector: 'ej-main-content',
   templateUrl: './main-content.component.html',
-  styleUrls: ['./main-content.component.scss'],
-  standalone: false
+  styleUrls: ['./main-content.component.scss']
 })
 
 export class MainContentComponent implements AfterViewInit {
@@ -47,7 +46,7 @@ export class MainContentComponent implements AfterViewInit {
   @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) { }
+  constructor(private routerService: RouterService, private http: HttpClient, private router: Router, private location: Location, private renderer: Renderer2) { }
 
   public loadSourceCode(sampleData: sampleInfo['samples'][0]): void {
     (jQuery('#parentTab li:first-child a') as any).tab('show');
@@ -94,7 +93,6 @@ export class MainContentComponent implements AfterViewInit {
           name: `${sampleData.routerPath}.component.html`,
           body: Prism.highlight(this.getStringWithOutDescription(resultCollection[0], /(\'|\")description/g), Prism.languages.html), id: 'html'
         });
-        this.cdr.detectChanges();
       });
   }
 

src/app/common/main.component.ts

@@ -3,8 +3,7 @@ import { Router, NavigationStart, Event, NavigationEnd } from '@angular/router';
 import { RouterService } from './router.service';
 @Component({
   selector: 'app-root',
-  template: '<router-outlet></router-outlet>',
-  standalone: false
+  template: '<router-outlet></router-outlet>'
 })
 export class MainComponent {
   constructor(private router: Router, private routerService: RouterService) {

src/app/common/preview/preview.component.ts

@@ -10,8 +10,7 @@ const data = samples;
 @Component({
   selector: 'ej-preview',
   templateUrl: './preview.component.html',
-  styleUrls: ['./preview.component.scss'],
-  standalone: false
+  styleUrls: ['./preview.component.scss']
 
 })
 export class PreviewComponent implements OnInit {
@@ -53,7 +52,7 @@ export class PreviewComponent implements OnInit {
     }));
   }
 
-  @HostListener('window:resize')
+  @HostListener('window:resize', ['$event'])
   onResize(): void {
     this.setReportsHeight();
   }

src/app/common/sidebar/sidebar.component.scss

@@ -55,7 +55,7 @@
         width: 90px;
         margin: 8px;
         background-image: url('./../../../assets/sidebar/portrait.png');
-        background-size: 100% 2200%;
+        background-size: 100% 2300%;
       }
 
       .ej-sb-toc-title {

src/app/common/sidebar/sidebar.component.ts

@@ -8,8 +8,7 @@ const data = samples;
 @Component({
   selector: 'ej-sidebar',
   templateUrl: './sidebar.component.html',
-  styleUrls: ['./sidebar.component.scss'],
-  standalone: false
+  styleUrls: ['./sidebar.component.scss']
 })
 export class SidebarComponent {
   samples: sampleInfo['samples'] = data.samples;

src/app/components/barcode/barcode.component.ts

@@ -6,8 +6,7 @@ import { Globals } from '../globals';
 @Component({
   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.

src/app/components/cmr-report/cmr-report.component.ts

@@ -6,8 +6,7 @@ import { Globals } from '../globals';
 @Component({
     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.

src/app/components/company-sales/company-sales.component.ts

@@ -6,8 +6,7 @@ import { Globals } from '../globals';
 @Component({
   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.

src/app/components/conditional-row-formatting/conditional-row-formatting.component.ts

@@ -6,8 +6,7 @@ import { Globals } from '../globals';
 @Component({
   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.

src/app/components/consolidated-balance-sheet/consolidated-balance-sheet.component.ts

@@ -7,8 +7,7 @@ import { rdlcData } from '../rdlcData';
 @Component({
   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;

src/app/components/customer-support-analysis/customer-support-analysis.component.ts

@@ -6,8 +6,7 @@ import { Globals } from '../globals';
 @Component({
   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.

src/app/components/data-bar/data-bar.component.ts

@@ -6,8 +6,7 @@ import { Globals } from '../globals';
 @Component({
   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.

src/app/components/designer/designer.component.ts

@@ -37,8 +37,7 @@ window[pdfSignature] = EJPDFSignature;
 @Component({
   selector: 'ej-sample',
   templateUrl: './designer.component.html',
-  styleUrls: ['./designer.component.css'],
-  standalone: false
+  styleUrls: ['./designer.component.css']
 })
 export class DesignerComponent implements AfterViewInit {
   @ViewChild('designer') designerInst;

src/app/components/dynamic-chart-series/dynamic-chart-series.component.ts

@@ -6,8 +6,7 @@ import { Globals } from '../globals';
 @Component({
   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.

src/app/components/dynamic-columns/dynamic-columns.component.ts

@@ -6,8 +6,7 @@
  @Component({
    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.

src/app/components/dynamic-logos/dynamic-logos.component.ts

@@ -6,8 +6,7 @@
  @Component({
    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.

src/app/components/external-parameter-report/external-parameter-report.component.ts

@@ -13,8 +13,7 @@ import { Globals } from '../globals';
 @Component({
   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;

src/app/components/grouping-aggregate/grouping-aggregate.component.ts

@@ -6,8 +6,7 @@ import { Globals } from '../globals';
 @Component({
   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.

src/app/components/hr-payroll/hr-payroll.component.ts

@@ -6,8 +6,7 @@
  @Component({
    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.

src/app/components/infographics-report/infographics-report.component.ts

@@ -6,8 +6,7 @@ import { Globals } from '../globals';
 @Component({
   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.

src/app/components/invoice/invoice.component.ts

@@ -6,8 +6,7 @@ import { Globals } from '../globals';
 @Component({
   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.

src/app/components/load-large-data/load-large-data.component.ts

@@ -7,8 +7,7 @@ import { rdlcData } from '../rdlcData';
 @Component({
   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;

src/app/components/mail-merge/mail-merge.component.ts

@@ -6,8 +6,7 @@ import { Globals } from '../globals';
 @Component({
   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.

src/app/components/multi-language-report/multi-language-report.component.ts

@@ -10,8 +10,7 @@ import { Globals } from '../globals';
 @Component({
   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;