feature(REPORT-405059): Bold Reports 7.1 Release Changes

build/build.js

@@ -5,8 +5,8 @@ const runSequence = require('gulp4-run-sequence');
 
 const ngCli = "node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng";
 
-gulp.task('build', (done) => {
-  runSequence('update-barcode', 'generate-router', () => {
+gulp.task('production-build', (done) => {
+  runSequence('update-extensions-export', 'generate-router', () => {
     if (argv.prefix) {
       exec(`${ngCli} build -c production --base-href ${argv.prefix}`);
     } else {

build/copy.js

@@ -5,22 +5,26 @@ 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']
+    barcode: ['images', 'barcode.reportitem.css', 'barcode.reportitem.js', 'qrbarcode.reportitem.js'],
+    signature: ['signature.reportitem.css', 'signature.dialog.css', 'signature.reportitem.js', 'signature.dialog.js']
 };
 
 const srcDir = 'node_modules/@boldreports/javascript-reporting-controls/Scripts/';
 const destDir = 'src/scripts/';
-const barCodeSrcDir = 'node_modules/@boldreports/javascript-reporting-extensions/';
-const barcodeDir = './src/app/components/extensions/report-item-extensions/';
-const barcodeTeml = {
+const extensionsItemSrcDir = 'node_modules/@boldreports/javascript-reporting-extensions/';
+const extensionsItemDir = './src/app/components/extensions/report-item-extensions/';
+const extensionsExportTemp = {
     '1D': 'export { EJBarcode };',
-    '2D': 'export { EJQRBarcode };'
+    '2D': 'export { EJQRBarcode };',
+    'signature': 'export { EJSignature }',
+    'signatureDialog': 'export { SignatureDialog }'
 }
 
 gulp.task('copy', (done) => {
     copyFiles(scripts.common, srcDir, destDir + 'common');
     copyFiles(scripts.control, srcDir, destDir + 'data-visualization');
-    copyFiles(scripts.barcode, barCodeSrcDir, barcodeDir);
+    copyFiles(scripts.barcode, extensionsItemSrcDir, extensionsItemDir);
+    copyFiles(scripts.signature, extensionsItemSrcDir, extensionsItemDir);
     done();
 });
 
@@ -31,18 +35,25 @@ function copyFiles(fileArray, src, dest) {
     });
 };
 
-gulp.task('update-barcode', (done) => {
-    if (fs.existsSync(`${barcodeDir}barcode.reportitem.js`) && fs.existsSync(`${barcodeDir}qrbarcode.reportitem.js`)) {
-        var barcode = fs.readFileSync(`${barcodeDir}barcode.reportitem.js`);
-        var qrbarcode = fs.readFileSync(`${barcodeDir}qrbarcode.reportitem.js`);
-        if (!barcode.includes(barcodeTeml['1D']))
-            fs.writeFileSync(`${barcodeDir}barcode.reportitem.js`, `${barcode} \n ${barcodeTeml['1D']}`);
-        if (!qrbarcode.includes(barcodeTeml['2D']))
-            fs.writeFileSync(`${barcodeDir}qrbarcode.reportitem.js`, `${qrbarcode} \n ${barcodeTeml['2D']}`);
-        done();
-    }
-    else {
-        console.log(`!!!... The Barcode files not found in ${barcodeDir} ...!!!`);
-        process.exit(1);
-    }
+gulp.task('update-extensions-export', (done) => {
+    const files = {
+        'barcode': ['barcode.reportitem.js', '1D'],
+        'qrbarcode': ['qrbarcode.reportitem.js', '2D'],
+        'signature': ['signature.reportitem.js', 'signature'],
+        'signatureDialog': ['signature.dialog.js', 'signatureDialog'],
+    };
+    const updateFile = (key, [filename, exportKey]) => {
+        const filePath = `${extensionsItemDir}${filename}`;
+        if (fs.existsSync(filePath)) {
+            const content = fs.readFileSync(filePath, 'utf8');
+            if (!content.includes(extensionsExportTemp[exportKey])) {
+                fs.writeFileSync(filePath, `${content}\n${extensionsExportTemp[exportKey]}`);
+            }
+        } else {
+            console.log(`!!!... The ${key} file not found in ${extensionsItemDir} ...!!!`);
+            process.exit(1);
+        }
+    };
+    Object.entries(files).forEach(([key, value]) => updateFile(key, value));
+    done();
 });

build/serve.js

@@ -5,7 +5,7 @@ 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-barcode', 'generate-router', () => {
+  runSequence('update-extensions-export', 'generate-router', () => {
     exec(`${ngCli} serve --open --port ${argv.port || ''}`);
     done();
   });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-samples",
-  "version": "6.3.16",
+  "version": "7.1.9",
   "scripts": {
     "test": "gulp test",
     "postinstall": "gulp copy",
@@ -22,6 +22,7 @@
     "@syncfusion/ej2-angular-buttons": "22.2.5",
     "@syncfusion/ej2-angular-calendars": "22.2.5",
     "@syncfusion/ej2-angular-dropdowns": "22.2.5",
+    "@syncfusion/ej2-angular-popups": "22.2.5",
     "bootstrap": "5.3.3",
     "codemirror": "5.58.2",
     "core-js": "2.5.4",

src/app/common/header/header.component.html

@@ -20,6 +20,6 @@
     <!-- <a class="ej-sb-button nav-link bold-schedule-demo" href="https://www.boldreports.com/schedule-free-demo" target="_blank" rel="noreferrer">Schedule
       Free Demo</a> -->
       <a class="ej-sb-button nav-link product-detail" href="https://www.boldreports.com/embedded-reporting/angular-report-viewer" target="_blank" rel="noreferrer">Product Detail</a>
-    <a class="ej-sb-button nav-link try-it-free" href="https://app.boldid.net/reporting/embedded/register?plan=174&evaluation=v2&leadsource=demos.boldreports.com&gclid=&referrerroriginurl=https://demos.boldreports.com/pricing&secondaryreferraloriginurl=https://demos.boldreports.com/&host=server&quantity=1" target="_blank" rel="noreferrer">Try it Free</a>
+    <a class="ej-sb-button nav-link try-it-free" href="https://app.boldid.net/reporting/embedded/register?plan=194&evaluation=v2&leadsource=demos.boldreports.com&gclid=&referrerroriginurl=https://demos.boldreports.com/pricing&secondaryreferraloriginurl=https://demos.boldreports.com/&host=server&quantity=1" target="_blank" rel="noreferrer">Try it Free</a>
   </div>
 </div>

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

@@ -92,13 +92,19 @@ <h1 class="ej-title" #title></h1>
       <a href="https://www.boldreports.com/blog" target="_blank" rel="noreferrer">
         Blog
       </a>
-      <a href="https://support.boldreports.com/" target="_blank" rel="noreferrer">
-          Support
-      </a> 
+      <a href="https://support.boldreports.com/support/tickets/create" target="_blank" rel="noreferrer">
+        Support
+      </a>
       <a href="https://www.boldreports.com/feedback" target="_blank" rel="noreferrer">
           Feedback
       </a>
+      <a href="https://support.boldreports.com/" target="_blank" rel="noreferrer">
+        Knowledge Base
+      </a>
+      <a href="https://www.boldreports.com/learn" target="_blank" rel="noreferrer">
+        Learning Center
+      </a>
     </div>
-    <div class="ej-lp-footer-copyright">Copyright © 2001-2024 Syncfusion Inc.</div>
+    <div class="ej-lp-footer-copyright">Copyright © 2001-2025 Syncfusion Inc.</div>
   </div>
 </div>

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

@@ -372,11 +372,22 @@
 }
 
 @media only screen and (min-width: 300px) and (max-width: 872px) {
-  .ej-main-body-content .ej-lp-footer, .ej-main-body-content .ej-lp-footer > div {
+  .ej-main-body-content .ej-lp-footer {
     display: block;
   }
+
+  .ej-main-body-content .ej-lp-footer .ej-lp-footer-copyright {
+    padding: 10px;
+  }
+}
+
+@media only screen and (max-width: 1095px) {
+  .ej-lp-footer .ej-lp-footer-links {
+    display: none;
+  }
+
   .ej-main-body-content .ej-lp-footer .ej-lp-footer-copyright {
     float: left;
-    line-height: 30px;
+    line-height: 21px;
   }
 }

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

@@ -45,6 +45,7 @@ export class MainContentComponent implements AfterViewInit {
   @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) { }
 
   public loadSourceCode(sampleData: sampleInfo['samples'][0]): void {
@@ -55,6 +56,7 @@ export class MainContentComponent implements AfterViewInit {
   ngAfterViewInit(): void {
     this.updateTab();
     jQuery(this.demoTab.nativeElement.firstElementChild).on('shown.bs.tab', this.resizeReportViewer);
+    this.copyrightYear.nativeElement.innerText = `Copyright © 2001 - ${data.copyrightYear} Syncfusion Inc.`;
   }
 
   updateSampleDetails(sampleData): void {

src/app/common/preview/preview.component.html

@@ -10,7 +10,7 @@ <h1 class="ej-preview-platform-name">Bold Reports for Angular</h1>
     <!-- <a class="ej-preview-button bold-schedule-demo" href="https://www.boldreports.com/schedule-free-demo" title="Report Server"
       target="_blank" rel="noreferrer">Schedule Free Demo</a> -->
     <a class="ej-preview-button nav-link product-detail" href="{{productDetailURL}}"  target="_blank" rel="noreferrer">Product Detail</a>
-    <a class="ej-preview-button try-it-free" href="https://app.boldid.net/reporting/embedded/register?plan=174&evaluation=v2&leadsource=demos.boldreports.com&gclid=&referrerroriginurl=https://demos.boldreports.com/pricing&secondaryreferraloriginurl=https://demos.boldreports.com/&host=server&quantity=1" title="Report Server"
+    <a class="ej-preview-button try-it-free" href="https://app.boldid.net/reporting/embedded/register?plan=194&evaluation=v2&leadsource=demos.boldreports.com&gclid=&referrerroriginurl=https://demos.boldreports.com/pricing&secondaryreferraloriginurl=https://demos.boldreports.com/&host=server&quantity=1" title="Report Server"
       target="_blank" rel="noreferrer">Try it Free</a>
   </div>
 </div>

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

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

@@ -0,0 +1,17 @@
+<bold-reportviewer id="cmr-report" [reportServiceUrl]="serviceUrl" [reportPath]="reportPath"
+    (toolBarItemClick)="onToolbarItemClick($event)" (exportItemClick)="onExportItemClick()" [toolbarSettings]="toolbarSettings">
+</bold-reportviewer>
+
+<div id="description">
+    <p>
+        The CMR International Consignment Note outlines the terms, responsibilities, and legal framework for international road freight transport under the CMR Convention, presented in a comprehensive RDL format.
+    </p>
+    <ul>
+        <li>The CMR International Consignment Note is effectively represented through a variety of table report items, each providing a detailed and informative view of the consignment details.</li>
+    </ul>
+    <p>
+        More information about the image report item can be found in this <a
+            href="https://help.boldreports.com/enterprise-reporting/designer-guide/report-designer/report-items/tablix/"
+            target="_blank" rel="noreferrer">documentation</a> section.
+    </p>
+</div>

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

@@ -0,0 +1,23 @@
+/**
+    * CMR report sample - This sample analyzes the legal document standardizing international road freight transport with random data.
+ */
+import { Component } from '@angular/core';
+import { Globals } from '../globals';
+@Component({
+    selector: 'ej-sample',
+    templateUrl: './cmr-report.component.html',
+    styleUrls: ['./cmr-report.component.css']
+})
+export class CMRReportComponent {
+    // 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 = 'cmr-report.rdl';
+    }
+}

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

@@ -6,12 +6,19 @@ import { Globals } from '../globals';
 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 { SignatureDialog } from './../extensions/report-item-extensions/signature.dialog';
 
 const barcode = 'EJBarcode';
 const qrBarcode = 'EJQRBarcode';
 window[barcode] = EJBarcode;
 window[qrBarcode] = EJQRBarcode;
 
+const signature = 'EJSignature';
+const signatureDialog = 'SignatureDialog';
+window[signature] = EJSignature;
+window[signatureDialog] = SignatureDialog;
+
 @Component({
   selector: 'ej-sample',
   templateUrl: './designer.component.html',
@@ -47,6 +54,12 @@ export class DesignerComponent implements AfterViewInit {
       imageClass: 'customitem-qrbarcode',
       displayName: '2D Barcode',
       category: 'Barcodes'
+    }, {
+      name: 'ESignature',
+      className: 'EJSignature',
+      imageClass: 'customitem-signature',
+      displayName: 'Electronic',
+      category: 'Signature'
     }];
   }
 
@@ -125,4 +138,4 @@ export class DesignerComponent implements AfterViewInit {
       this.designerInst.widget.openReport(this.reportPath.indexOf("external-parameter-report") !== -1 ? "product-line-sales.rdl" : this.reportPath.indexOf("parameter-customization") !== -1 ? "product-line-sales.rdl" : this.reportPath);
     }
   }
-}
+}

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

@@ -0,0 +1,18 @@
+<bold-reportviewer id="infographics-report" [reportServiceUrl]="serviceUrl" [reportPath]="reportPath"
+    (toolBarItemClick)="onToolbarItemClick($event)" (exportItemClick)="onExportItemClick()" [toolbarSettings]="toolbarSettings">
+</bold-reportviewer>
+
+<div id="description">
+    <p>
+        The Infographics Report showcases the overall academic performance of a college through graphical representations, utilizing the Bold Reports <code>image</code> report item for visually engaging insights.
+    </p>
+    <ul>
+        <li>The report  presents  student demographics, academic achievements, and study preferences through visually engaging infographics, seamlessly incorporating the concept.</li>
+        <li>It provides visual insights into key metrics such as graduation rates, course interests, and study habits.</li>
+    </ul>
+    <p>
+        More information about the image report item can be found in 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/infographics-report/infographics-report.component.ts

@@ -0,0 +1,23 @@
+/**
+ * Infographics Report - Visualize student demographics, course interests, achievements, and study preferences.
+ */
+import { Component } from '@angular/core';
+import { Globals } from '../globals';
+@Component({
+  selector: 'ej-sample',
+  templateUrl: './infographics-report.component.html',
+  styleUrls: ['./infographics-report.component.css']
+})
+export class InfographicsReportComponent {
+  // 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 = 'infographics-report.rdl';
+  }
+}

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

@@ -6,13 +6,20 @@ import { Globals } from '../globals';
 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 { SignatureDialog } from './../extensions/report-item-extensions/signature.dialog';
 import { rdlcData } from '../rdlcData';
 
 const barcode = 'EJBarcode';
 const qrBarcode = 'EJQRBarcode';
 window[barcode] = EJBarcode;
 window[qrBarcode] = EJQRBarcode;
 
+const signature = 'EJSignature';
+const signatureDialog = 'SignatureDialog';
+window[signature] = EJSignature;
+window[signatureDialog] = SignatureDialog;
+
 @Component({
   selector: 'ej-sample',
   templateUrl: './rdlc.component.html',
@@ -49,6 +56,12 @@ export class RDLCComponent implements AfterViewInit {
       imageClass: 'customitem-qrbarcode',
       displayName: '2D Barcode',
       category: 'Barcodes'
+    }, {
+      name: 'ESignature',
+      className: 'EJSignature',
+      imageClass: 'customitem-signature',
+      displayName: 'Electronic',
+      category: 'Signature'
     }];
   }
 
@@ -124,4 +137,4 @@ export class RDLCComponent implements AfterViewInit {
       this.designerInst.widget.openReport(this.reportPath);
     }
   }
-}
+}