boldreports · karthickthangasamy · Feb 10, 2025 · Feb 10, 2025
diff --git a/assets/sidebar/portrait.png b/assets/sidebar/portrait.png
diff --git a/build/build.js b/build/build.js
@@ -3,7 +3,7 @@ var shelljs = require('shelljs');
 const runSequence = require('gulp4-run-sequence');
 
 gulp.task('build',(done)=>{
-    runSequence('update-barcode' ,'clean', 'new-tab', done);
+    runSequence('update-extensions-export', 'clean', 'new-tab', done);
 });
 
 gulp.task('clean', (done)=>{

diff --git a/build/copy.js b/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 = 'scripts/';
-const barCodeSrcDir = 'node_modules/@boldreports/javascript-reporting-extensions/';
-const barcodeDir = './build/templates/extensions/report-item-extensions/';
-const barcodeTeml = {
+const extensionsItemSrcDir = 'node_modules/@boldreports/javascript-reporting-extensions/';
+const extensionsItemDir = './build/templates/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();
 });
diff --git a/build/new-tab.js b/build/new-tab.js
@@ -36,7 +36,7 @@ gulp.task('new-tab-generation', (done)=>{
     let bodyContent = fs.readFileSync(`${reportBaseDir + reportRouterPath}/${fileName}.html`, 'utf8');
     let content = htmlTemplate
       .replace('{{body}}', bodyContent)
-      .replace('{{title}}', title)
+      .replace(/{{title}}/g, title)
       .replace('{{sampleName}}', sampleName);
     shelljs.mkdir('-p', `${reportBaseDir + reportRouterPath}/preview`);
     fs.writeFileSync(`${reportBaseDir + reportRouterPath}/preview/index.html`, content, {

diff --git a/build/serve.js b/build/serve.js
@@ -2,21 +2,27 @@ const gulp = require("gulp");
 const webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
 const config = require('./../webpack.config.js');
-const open = require('open');
 var argv = require('yargs').argv;
 const port = argv.port || 9000;
 
 
 gulp.task('serve-run',(done)=>{
-  const server = new WebpackDevServer(webpack(config));
-  server.listen(port, 'localhost', function (err) {
-    if (err) {
-      console.log(err);
-    }
+  const serverOptions = {
+    port: port,
+    static: {
+      directory: './',
+    },
+    hot: true,
+    open: true,
+    historyApiFallback: true
+  };
+
+  const compiler = webpack(config);
+  const server = new WebpackDevServer(serverOptions, compiler);
+  server.startCallback(() => {
     console.log('Reports JS sample browser is listening on localhost:', port);
-    open('http://localhost:' + port + '/');
+    done();
   });
-  done();
 });
 
 gulp.task('serve', gulp.series('build','serve-run'));
diff --git a/build/templates/common/webpack.config.js b/build/templates/common/webpack.config.js
@@ -29,9 +29,7 @@ module.exports = {
             },
             {
                 test: /\.(png|svg|jpg|gif|cur|ttf|eot|woff)$/,
-                use: [{
-                    loader: 'file-loader'
-                }]
+                type: 'asset/resource'
             }
         ]
     },

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "javascript-samples",
-  "version": "6.3.16",
+  "version": "7.1.9",
   "description": "",
   "author": "",
   "license": "ISC",
@@ -10,43 +10,41 @@
     "postinstall": "gulp copy"
   },
   "devDependencies": {
-    "@babel/cli": "7.2.3",
-    "@babel/core": "7.3.4",
-    "@babel/node": "7.2.2",
-    "@babel/preset-env": "7.3.4",
-    "@babel/register": "7.0.0",
+    "@babel/cli": "7.26.4",
+    "@babel/core": "7.26.0",
+    "@babel/node": "7.26.0",
+    "@babel/preset-env": "7.26.0",
+    "@babel/register": "7.25.9",
     "argv": "0.0.2",
     "babel-eslint": "10.0.1",
-    "babel-loader": "8.0.5",
+    "babel-loader": "9.2.1",
     "bootstrap": "5.3.3",
-    "copy-webpack-plugin": "5.0.1",
-    "css-loader": "2.1.1",
-    "file-loader": "3.0.1",
+    "copy-webpack-plugin": "12.0.2",
+    "css-loader": "7.1.2",
     "glob": "7.1.3",
     "gulp": "^4.0.2",
     "gulp-eslint": "5.0.0",
     "gulp-gzip": "1.4.2",
     "gulp-s3-upload": "1.7.3",
-    "mini-css-extract-plugin": "0.5.0",
+    "mini-css-extract-plugin": "2.9.2",
     "@popperjs/core": "2.11.8",
-    "open": "6.0.0",
     "require-dir": "1.2.0",
     "gulp4-run-sequence": "1.0.1",
     "shelljs": "^0.8.4",
     "typo-js": "1.0.3",
-    "webpack": "4.29.6",
-    "webpack-cli": "3.2.3",
-    "webpack-dev-server": "3.2.1",
-    "webpack-stream": "5.2.1"
+    "webpack": "5.97.1",
+    "webpack-cli": "6.0.1",
+    "webpack-dev-server": "5.2.0",
+    "webpack-stream": "7.0.0"
   },
   "dependencies": {
     "@babel/polyfill": "7.2.5",
-    "@boldreports/javascript-reporting-controls": "6.3.16",
-    "@boldreports/javascript-reporting-extensions": "6.3.16",
+    "@boldreports/javascript-reporting-controls": "7.1.9",
+    "@boldreports/javascript-reporting-extensions": "7.1.9",
     "codemirror": "5.58.2",
     "hasher": "1.2.0",
     "jquery": "3.6.0",
-    "jquery-validation": "1.19.5",  
+    "jquery-validation": "1.19.5",
     "jsrender": "1.0.2",
     "prismjs": "1.27.0",
     "whatwg-fetch": "3.0.0",

diff --git a/src/common/header/header.html b/src/common/header/header.html
@@ -13,6 +13,6 @@
         <!-- We hided this element as per management instruction -->
         <!-- <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/javascript-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>
diff --git a/src/common/header/header.js b/src/common/header/header.js
@@ -1,7 +1,7 @@
 import {
     getRouterData
 } from './../router';
-import * as data from '../../controls/samples.json';
+import samplesData from '../../controls/samples.json';
 import * as hasher from 'hasher';
 
 export class Header {
@@ -11,10 +11,10 @@ export class Header {
 
     async init() {
         this.element.innerHTML = await this.fetchFile('src/common/header/header.html');
-        let otherPlatforms = Object.keys(data.default.otherPlatforms);
+        let otherPlatforms = Object.keys(samplesData.otherPlatforms);
         let dropDownItems = this.element.querySelector('.dropdown-menu');
         dropDownItems.addEventListener('click', this.platformSwitcher.bind(this));
-        this.createdropdownItem(data.default.platform, dropDownItems, true);
+        this.createdropdownItem(samplesData.platform, dropDownItems, true);
         for (let i = 0; i < otherPlatforms.length; i++) {
             this.createdropdownItem(otherPlatforms[i].trim(), dropDownItems);
         }
@@ -62,11 +62,11 @@ export class Header {
             let platformSamplePath;
             const sampleName = routerData.reportRouterPath ? routerData.reportRouterPath : routerData.reportBasePath;
             if (routerData.reportRouterPath) {
-                platformBasePath = this.getRouterPath(data.default.platform, targetPlatform, routerData.reportBasePath);
+                platformBasePath = this.getRouterPath(samplesData.platform, targetPlatform, routerData.reportBasePath);
             }
-            platformSamplePath = this.getRouterPath(data.default.platform, targetPlatform, sampleName);
+            platformSamplePath = this.getRouterPath(samplesData.platform, targetPlatform, sampleName);
             const reportPath = routerData.reportRouterPath ? (platformBasePath + '/' + platformSamplePath) : platformSamplePath;
-            window.open(location.origin + "/" + data.default.otherPlatforms[targetPlatform] + reportPath, '_self');
+            window.open(location.origin + "/" + samplesData.otherPlatforms[targetPlatform] + reportPath, '_self');
         }
     }
 

diff --git a/src/common/index.css b/src/common/index.css
@@ -95,7 +95,7 @@ body {
 
 @font-face {
   font-family: 'ejicons';
-  src: url('./../../assets/sb-icons/fonts/icons.ttf?gcjn6a') format('truetype'), url('./../../assets/sb-icons/fonts/icons.woff?gcjn6a') format('woff'), url('./../../assets/sb-icons/fonts/icons.svg?gcjn6a#sbicons') format('svg');
+  src: url('./../../assets/sb-icons/fonts/icons.ttf') format('truetype'), url('./../../assets/sb-icons/fonts/icons.woff') format('woff'), url('./../../assets/sb-icons/fonts/icons.svg#sbicons') format('svg');
   font-weight: normal;
   font-style: normal;
 }

diff --git a/src/common/index.js b/src/common/index.js
@@ -25,7 +25,7 @@ import {
     MainContent
 } from './main-content/main-content';
 import Prism from 'prismjs';
-import * as data from '../controls/samples.json';
+import samplesData from '../controls/samples.json';
 import {
     routerInit
 } from './router';
@@ -69,7 +69,8 @@ function onResize() {
 }
 
 function tocSelection(sampleData) {
-    let ele = document.querySelectorAll('.ej-sb-toc-card')[data.default.samples.indexOf(sampleData)];
+    let samples = samplesData.samples;
+    let ele = document.querySelectorAll('.ej-sb-toc-card')[samples.indexOf(sampleData)];
     let previousSelected = document.querySelector('.toc-selected');
     if (previousSelected) {
         previousSelected.classList.remove('toc-selected')
@@ -111,15 +112,16 @@ function setInnerText(selector, text) {
     document.querySelector(selector).innerText = text;
 }
 function updateSampleDetails(sampleData) {
+    let banner = samplesData.banner;
     setInnerText('.ej-main-body-content .ej-title', sampleData.sampleName);
     setInnerText('.ej-main-body-content .ej-meta-description', sampleData.metaData.description);
 
     //Banner
-    setInnerText('.ej-main-body-content .header', data.default.banner.text);
-    setInnerText('.ej-main-body-content .cnt-text-1', data.default.banner.features[0]);
-    setInnerText('.ej-main-body-content .cnt-text-2', data.default.banner.features[1]);
-    setInnerText('.ej-main-body-content .cnt-text-3', data.default.banner.features[2]);
-    document.querySelector('.free-trial-url').setAttribute('href', data.default.banner.freeTrialUrl);
+    setInnerText('.ej-main-body-content .header', banner.text);
+    setInnerText('.ej-main-body-content .cnt-text-1', banner.features[0]);
+    setInnerText('.ej-main-body-content .cnt-text-2', banner.features[1]);
+    setInnerText('.ej-main-body-content .cnt-text-3', banner.features[2]);
+    document.querySelector('.free-trial-url').setAttribute('href', banner.freeTrialUrl);
 
 }
 

diff --git a/src/common/main-content/main-content.css b/src/common/main-content/main-content.css
@@ -72,6 +72,14 @@
   margin: 25px 3px 20px 20px;
 }
 
+.tab-pane#ej-description #description a {
+  text-decoration: none;
+}
+
+.tab-pane#ej-description #description a:hover {
+  text-decoration: underline;
+}
+
 .tab-pane form{
   margin-bottom: -7px;
 }
@@ -377,11 +385,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 {
-    display: block;
+  .ej-main-body-content .ej-lp-footer {
+      display: block;
+  }
+
+  .ej-main-body-content .ej-lp-footer .ej-lp-footer-copyright {
+    padding: 10px;
+  }
+}
+
+@media (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;
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,9 +29,7 @@ module.exports = { @@
                 },
                 {
                     test: /\.(png|svg|jpg|gif|cur|ttf|eot|woff)$/,
-                    use: [{
-                        loader: 'file-loader'
-                    }]
+                    type: 'asset/resource'
                 }
             ]
         },
@@ Expand Down @@