feature(REPORT-478182): Bold Reports 12.1 Release Changes

build/copy.js

@@ -3,13 +3,12 @@ const { cp, mkdir } = require('shelljs');
 const fs = require('fs');
 
 const scripts = {
-    common: ['common/ej2-base.min.js', 'common/ej2-data.min.js', 'common/ej2-pdf-export.min.js', 'common/ej2-svg-base.min.js'],
-    control: ['data-visualization/ej2-circulargauge.min.js', 'data-visualization/ej2-lineargauge.min.js', 'data-visualization/ej2-maps.min.js'],
     barcode: ['images', 'barcode.reportitem.css', 'barcode.reportitem.js', 'qrbarcode.reportitem.js'],
     signature: ['signature.reportitem.css', 'signature.dialog.css', 'signature.reportitem.js', 'signature.dialog.js'],
     shape: ['shape.reportitem.css','shape.reportitem.js'],
     pdf: ['document.reportitem.css', 'pdfdocument.reportitem.js'],
-    html: ['htmldocument.reportitem.js']
+    html: ['htmldocument.reportitem.js'],
+    pdfSignature: ['pdf.signature.reportitem.css', 'pdf.signature.reportitem.js']
 };
 
 const srcDir = 'node_modules/@boldreports/javascript-reporting-controls/Scripts/';
@@ -23,17 +22,17 @@ const extensionsExportTemp = {
     'signatureDialog': 'export { SignatureDialog }',
     'shape': 'export { EJShape }',
     'pdfDocument': 'export { EJPdfDocument };',
-    'htmlDocument': 'export { EJHtmlDocument };'
+    'htmlDocument': 'export { EJHtmlDocument };',
+    'pdfSignature': 'export { EJPDFSignature  }'
 }
 
 gulp.task('copy', (done) => {
-    copyFiles(scripts.common, srcDir, destDir + 'common');
-    copyFiles(scripts.control, srcDir, destDir + 'data-visualization');
     copyFiles(scripts.barcode, extensionsItemSrcDir, extensionsItemDir);
     copyFiles(scripts.signature, extensionsItemSrcDir, extensionsItemDir);
     copyFiles(scripts.shape, extensionsItemSrcDir, extensionsItemDir);
     copyFiles(scripts.html, extensionsItemSrcDir, extensionsItemDir);
     copyFiles(scripts.pdf, extensionsItemSrcDir, extensionsItemDir);
+    copyFiles(scripts.pdfSignature, extensionsItemSrcDir, extensionsItemDir);
     done();
 });
 
@@ -52,7 +51,8 @@ gulp.task('update-extensions-export', (done) => {
         'signatureDialog': ['signature.dialog.js', 'signatureDialog'],
         'pdfDocument': ['pdfdocument.reportitem.js', 'pdfDocument'],
         'htmlDocument': ['htmldocument.reportitem.js', 'htmlDocument'],
-        'shape': ['shape.reportitem.js', 'shape']
+        'shape': ['shape.reportitem.js', 'shape'],
+        'pdfSignature': ['pdf.signature.reportitem.js', 'pdfSignature']
     };
     const updateFile = (key, [filename, exportKey]) => {
         const filePath = `${extensionsItemDir}${filename}`;

build/router.js

@@ -43,33 +43,33 @@ gulp.task('generate-router', (done) => {
   let initilaReportRouterPath =  defaultSampleData.routerPath ? defaultSampleData.basePath + '/' + defaultSampleData.routerPath : defaultSampleData.basePath;
 
   //Initila routing
-  routes.push(`{ path: '', redirectTo: '${initilaReportRouterPath}', pathMatch: 'full' }`);
+  routes.push(`{ path: '', redirectTo: '${initilaReportRouterPath}/', pathMatch: 'full' }`);
 
   for (let i = 0; i < samples.length; i++) {
     let sampleData = samples[i];
     let reportRouterPath = sampleData.routerPath ? sampleData.basePath + '/' + sampleData.routerPath : sampleData.basePath;
     let reportComponentPath = sampleData.routerPath ? sampleData.directoryName + '/' + sampleData.routerPath : sampleData.directoryName + '/' + sampleData.basePath;
-    childRoutes.push(childRouterTemplate.replace('{{path}}', reportRouterPath).replace('{{component}}', sampleData.className));
-    previewChildRoutes.push(childRouterTemplate.replace('{{path}}', `${reportRouterPath}/preview`).replace('{{component}}', sampleData.className));
+    childRoutes.push(childRouterTemplate.replace('{{path}}', `${reportRouterPath}/`).replace('{{component}}', sampleData.className));
+    previewChildRoutes.push(childRouterTemplate.replace('{{path}}', `${reportRouterPath}/preview/`).replace('{{component}}', sampleData.className));
     importStatements.push(importTemplate.replace('{{component}}', sampleData.className).replace('{{path}}', `../components/${reportComponentPath}.component`));
     components.push(sampleData.className);
   }
 
   //Designer
   importStatements.push(importTemplate.replace('{{component}}', `DesignerComponent`).replace('{{path}}', `../components/designer/designer.component`));
   components.push('DesignerComponent');
-  previewChildRoutes.push(childRouterTemplate.replace('{{path}}', `report-designer`).replace('{{component}}', 'DesignerComponent'));
+  previewChildRoutes.push(childRouterTemplate.replace('{{path}}', `report-designer/`).replace('{{component}}', 'DesignerComponent'));
 
   //RDLC Designer
   importStatements.push(importTemplate.replace('{{component}}', `RDLCComponent`).replace('{{path}}', `../components/rdlc/rdlc.component`));
   components.push('RDLCComponent');
-  previewChildRoutes.push(childRouterTemplate.replace('{{path}}', `report-designer/rdlc`).replace('{{component}}', '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\  ')));
 
   //re-routing
-  routes.push(`{ path: '**', redirectTo: '${initilaReportRouterPath}' }`);
+  routes.push(`{ path: '**', redirectTo: '${initilaReportRouterPath}/' }`);
   let importContent = importStatements.join('\n');
   let componentContent = `const components: any[] | Type<any> | ModuleWithProviders<{}> = [
   ${components.join(',\n  ')}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-samples",
-  "version": "11.1.10",
+  "version": "12.1.12",
   "scripts": {
     "test": "gulp test",
     "postinstall": "gulp copy",
@@ -16,10 +16,10 @@
     "@angular/platform-browser": "^16.1.0",
     "@angular/platform-browser-dynamic": "^16.1.0",
     "@angular/router": "^16.1.0",
-    "@boldreports/angular-reporting-components": "*",
-    "@boldreports/javascript-reporting-controls": "*",
-    "@boldreports/javascript-reporting-extensions": "*",
-    "@boldreports/types": "*",
+    "@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",
     "@syncfusion/ej2-angular-buttons": "22.2.5",
     "@syncfusion/ej2-angular-calendars": "22.2.5",
     "@syncfusion/ej2-angular-dropdowns": "22.2.5",

src/app/common/app.component.ts

@@ -122,7 +122,7 @@ export class AppComponent implements OnInit {
       width: 100% !important;
     }
 
-    #external-parameter-report, #multi-language-report {
+    #external-parameter-report, #external-parameter-report {
       height: auto !important;
     }`;
   }

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

@@ -105,6 +105,6 @@ <h1 class="ej-title" #title></h1>
         Learning Center
       </a>
     </div>
-    <div class="ej-lp-footer-copyright">Copyright © 2001-2025 Syncfusion Inc.</div>
+    <div class="ej-lp-footer-copyright" #copyrightYear></div>
   </div>
 </div>

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

@@ -126,7 +126,7 @@ export class MainContentComponent implements AfterViewInit {
 
   onTabBtnClick(): void {
     const modifiedUrl = this.router.url.indexOf('?') !== -1 ? this.router.url.substring(0, this.router.url.indexOf('?')) : this.router.url;
-    window.open(this.location.prepareExternalUrl(modifiedUrl) + '/preview', '_blank', 'noreferrer');
+    window.open(this.location.prepareExternalUrl(modifiedUrl) + 'preview/', '_blank', 'noreferrer');
   }
 
   onTabNext(): void {

src/app/common/main.component.ts

@@ -10,6 +10,7 @@ export class MainComponent {
     this.router.events.subscribe((event: Event) => {
 
       if (event instanceof NavigationStart) {
+        this.routerService.addTrailingSlash(event.url);
         if (event.url.indexOf('/preview') === -1 && event.url.indexOf('/report-designer') === -1) {
           this.routerService.sampleUrl.next(event.url);
         } else {

src/app/common/router.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
+import { Router } from '@angular/router';
 
 @Injectable()
 export class RouterService {
@@ -16,6 +17,17 @@ export class RouterService {
         routerData.spilttedUrl = spilttedUrl;
         return routerData;
     }
+
+    constructor(private router: Router) { }
+    public addTrailingSlash(url: string): boolean {
+        const qIndex = url.indexOf('?');
+        const pathPart = url.slice(0, qIndex !== -1 ? qIndex : url.length);
+        if (pathPart && pathPart !== '/' && !pathPart.endsWith('/')) {
+            this.router.navigateByUrl(url.replace(pathPart, `${pathPart}/`));
+            return false;
+        }
+        return true;
+    }
 }
 
 interface RouterData {

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% 2100%;
+        background-size: 100% 2200%;
       }
 
       .ej-sb-toc-title {

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

@@ -7,6 +7,7 @@ import { Router, Params } from '@angular/router';
 import { EJBarcode } from './../extensions/report-item-extensions/barcode.reportitem';
 import { EJQRBarcode } from './../extensions/report-item-extensions/qrbarcode.reportitem';
 import { EJSignature } from './../extensions/report-item-extensions/signature.reportitem';
+import { EJPDFSignature } from './../extensions/report-item-extensions/pdf.signature.reportitem';
 import { SignatureDialog } from './../extensions/report-item-extensions/signature.dialog';
 import { EJShape } from './../extensions/report-item-extensions/shape.reportitem';
 import { EJPdfDocument } from './../extensions/report-item-extensions/pdfdocument.reportitem';
@@ -30,6 +31,9 @@ const htmlDocument = 'EJHtmlDocument';
 window[pdfDocument] = EJPdfDocument;
 window[htmlDocument] = EJHtmlDocument;
 
+const pdfSignature = 'EJPDFSignature';
+window[pdfSignature] = EJPDFSignature;
+
 @Component({
   selector: 'ej-sample',
   templateUrl: './designer.component.html',
@@ -70,7 +74,7 @@ export class DesignerComponent implements AfterViewInit {
       className: 'EJSignature',
       imageClass: 'customitem-signature',
       displayName: 'Electronic',
-      category: 'Signature'
+      category: 'Signatures'
     }, {
       name: 'Shape',
       className: 'EJShape',
@@ -90,6 +94,12 @@ export class DesignerComponent implements AfterViewInit {
       imageClass: 'customitem-htmldocument',
       displayName: 'Html',
       category: 'Documents',
+    }, {
+      name: 'PDFSignature',
+      className: 'EJPDFSignature',
+      imageClass: 'customitem-pdfsignature',
+      displayName: 'PDF',
+      category: 'Signatures'
     }];
   }
 

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

@@ -0,0 +1,21 @@
+<bold-reportviewer id="hr-payroll" [reportServiceUrl]="serviceUrl" [reportPath]="reportPath"
+    (toolBarItemClick)="onToolbarItemClick($event)" (exportItemClick)="onExportItemClick()"
+    [toolbarSettings]="toolbarSettings">
+</bold-reportviewer>
+<div id="description">
+    <p>
+        The HR Payroll report provides a comprehensive overview of employee compensation, departmental performance, and leave management. It helps HR teams analyze payroll trends and make informed decisions.
+    </p>
+    <ul>
+        <li>Displays <code>gross salary</code>, <code>net salary</code>, and <code>deductions</code> across departments.</li>
+        <li>Visualizes <code>Loss of Pay (LOP)</code>breakdown by leave type: sick, good, and compensation leave.</li>
+        <li>Includes <code>employee demographics</code> such as gender distribution and contract types.</li>
+        <li>Summarizes leave availability for sick and casual leave by department.</li>
+        <li>Highlights <code>average performance</code> and employee count per department.</li>
+    </ul>
+    <p>
+        For more information on how dynamic image report items enhance customization in multi-company HR reports, refer to this 
+        <a href="https://help.boldreports.com/enterprise-reporting/designer-guide/report-designer/image-manager/"
+            target="_blank" rel="noreferrer">documentation</a> section.
+    </p>
+</div>

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

@@ -0,0 +1,24 @@
+/**
+ * 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 { Globals } from '../globals';
+ @Component({
+   selector: 'ej-sample',
+   templateUrl: './hr-payroll.component.html',
+   styleUrls: ['./hr-payroll.component.css']
+ })
+ export class HRPayrollComponent {
+   // 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
+   public reportPath: string;
+   public toolbarSettings = Globals.TOOLBAR_OPTIONS;
+   public onToolbarItemClick = Globals.EDIT_REPORT;
+   public onExportItemClick = Globals.EXPORT_ITEM_CLICK;
+
+   constructor() {
+     this.reportPath = 'hr-payroll.rdl';
+   }
+ }
+

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

@@ -31,14 +31,31 @@ export class MultiLanguageReportComponent {
         this.parameterSettings = { hideParameterBlock: true };
     }
     public languagesList: any = [{ Name: "English", languageId: "en-US" }, { Name: "French", languageId: "fr-CA" }, { Name: "German", languageId: "de-DE" }, { Name: "Hindi", languageId: "hi-IN" }, { Name: "Spanish", languageId: "es-ES" }, { Name: "Dutch", languageId: "nl-NL" }, { Name: "Korean", languageId: "ko-KR" }, { Name: "Hebrew", languageId: "he-IL" }, { Name: "Russian", languageId: "ru-RU" }];
+    public tooltipLocales: any = {
+        "en-US": { header: "Edit Report", content: "Edit this report in designer" },
+        "fr-CA": { header: "Modifier le rapport", content: "Modifier ce rapport dans le concepteur" },
+        "de-DE": { header: "Bericht bearbeiten", content: "Bearbeiten Sie diesen Bericht im Designer" },
+        "hi-IN": { header: "रिपोर्ट संपादित करें", content: "इस रिपोर्ट को डिज़ाइनर में संपादित करें" },
+        "es-ES": { header: "Editar informe", content: "Editar este informe en el diseñador" },
+        "nl-NL": { header: "Rapport bewerken", content: "Bewerk dit rapport in de ontwerper" },
+        "ko-KR": { header: "보고서 편집", content: "디자이너에서 이 보고서를 편집합니다" },
+        "he-IL": { header: "ערוך דוח", content: "ערוך דוח זה במעצב" },
+        "ru-RU": { header: "Редактировать отчет", content: "Редактировать этот отчет в дизайнере" }
+    };
     public loadReport(): void {
         const reportViewer = this.multiLanguageReport;
         const selectedLanguageId = (<any>jQuery("#languages"))[0].ej2_instances[0].value;
+        const tooltipData = this.tooltipLocales[selectedLanguageId];
         const selectedLanguage = this.languagesList.find(lang => lang.languageId === selectedLanguageId);
         const parameters = [{ name: 'Language', labels: [selectedLanguage.Name], values: [selectedLanguage.Name] }];
         reportViewer.widget.model.parameters = parameters;
         reportViewer.widget.reload();
         reportViewer.widget.setModel({'locale': selectedLanguageId});
+        const item = reportViewer.widget.model.toolbarSettings.customGroups[0].items[0];
+        item.tooltip = {
+            header: tooltipData.header,
+            content: tooltipData.content
+        };
     }
     ngAfterViewInit(): void {
         createSpinner({target: document.getElementById("spinner-container")});

src/app/components/rdlc/rdlc.component.ts

@@ -11,6 +11,7 @@ import { SignatureDialog } from './../extensions/report-item-extensions/signatur
 import { EJShape } from './../extensions/report-item-extensions/shape.reportitem';
 import { EJPdfDocument } from './../extensions/report-item-extensions/pdfdocument.reportitem';
 import { EJHtmlDocument } from './../extensions/report-item-extensions/htmldocument.reportitem';
+import { EJPDFSignature } from './../extensions/report-item-extensions/pdf.signature.reportitem';
 
 import { rdlcData } from '../rdlcData';
 
@@ -32,6 +33,9 @@ const htmlDocument = 'EJHtmlDocument';
 window[pdfDocument] = EJPdfDocument;
 window[htmlDocument] = EJHtmlDocument;
 
+const pdfSignature = 'EJPDFSignature';
+window[pdfSignature] = EJPDFSignature;
+
 @Component({
   selector: 'ej-sample',
   templateUrl: './rdlc.component.html',
@@ -73,7 +77,7 @@ export class RDLCComponent implements AfterViewInit {
       className: 'EJSignature',
       imageClass: 'customitem-signature',
       displayName: 'Electronic',
-      category: 'Signature'
+      category: 'Signatures'
     }, {
       name: 'Shape',
       className: 'EJShape',
@@ -93,6 +97,12 @@ export class RDLCComponent implements AfterViewInit {
       imageClass: 'customitem-htmldocument',
       displayName: 'Html',
       category: 'Documents',
+    }, {
+      name: 'PDFSignature',
+      className: 'EJPDFSignature',
+      imageClass: 'customitem-pdfsignature',
+      displayName: 'PDF',
+      category: 'Signatures'
     }];
   }
 

src/app/components/samples.json

@@ -81,7 +81,6 @@
       "sampleName": "Sales Report",
       "basePath": "report-viewer",
       "directoryName": "sales-report",
-      "status": "Updated",
       "imageDetails": {
         "isLandscape": false,
         "index": 9
@@ -503,7 +502,6 @@
       "sampleName": "Dynamic Logos",
       "basePath": "report-viewer",
       "directoryName": "dynamic-logos",
-      "status": "New",
       "imageDetails": {
         "isLandscape": false,
         "index": 19
@@ -518,14 +516,28 @@
       "sampleName": "Multi Language Report",
       "basePath": "report-viewer",
       "directoryName": "multi-language-report",
-      "status": "New",
       "imageDetails": {
         "isLandscape": false,
         "index": 5
       },
       "metaData": {
         "description": "This demo showcases a Multi Language Report that allows users to view report in various languages using the Angular Bold Report Viewer."
       }
+    },
+    {
+      "routerPath": "hr-payroll",
+      "className": "HRPayrollComponent",
+      "sampleName": "HR Payroll",
+      "basePath": "report-viewer",
+      "directoryName": "hr-payroll",
+      "status": "New",
+      "imageDetails": {
+        "isLandscape": false,
+        "index": 20
+      },
+      "metaData": {
+        "description": "This demo showcases an HR Payroll report showing salaries, deductions, demographics, and performance insights in the Angular Bold Report Viewer."
+      }
     }
   ]
 }

src/styles.scss

@@ -9,6 +9,7 @@
 @import './app/components/extensions/report-item-extensions/signature.dialog.css';
 @import './app/components/extensions/report-item-extensions/shape.reportitem.css';
 @import './app/components/extensions/report-item-extensions/document.reportitem.css';
+@import './app/components/extensions/report-item-extensions/pdf.signature.reportitem.css';
 
 // code-mirror
 @import './../node_modules/codemirror/lib/codemirror.css';