865959: Updated the Vol 4 2023 release version to packages.

.gitignore

@@ -0,0 +1,6 @@
+.vscode/
+node_modules/
+dist/
+npm-debug.log
+shelljs*
+package-lock.json

README.md

@@ -4,22 +4,28 @@ This expense tracker demo application showcases using several Essential JS 2 com
 a real-world application scenario. You can further explore the source code of this application and
 use it as a reference for integrating Essential JS 2 components into your applications.
 
-## Deployment
+## Installation
 
-### Install
+To install the application dependencies, use the following command:
 
-To install all dependent packages, use the below command
-
-```
+```sh
 npm install
 ```
 
-### Run
+## Build the application
 
-To run the sample, use the below command
+To Build the application, use the below command,
 
+```sh
+npm run build
 ```
-gulp serve
+
+## Run the application
+
+To run the sample in the browser with live reload, use the following command:
+
+```sh
+npm run start
 ```
 
 ## Demo

config.json

@@ -1,4 +1,5 @@
 {
+    "productOwner": "Satheeskumar S",
     "sasslint": ["./styles/**/*.scss"],
     "tslint": ["./src/**/*.ts", "!./src/common/common.data.ts"],
     "styleDependency": ["ej2"],

gulpfile.js

@@ -1,80 +1 @@
-var fs = require('fs');
-var gulp = require('gulp');
-var webpack = require('webpack');
-var webpackGulp = require('webpack-stream');
-
-/**
- * Compile script files
- */
-gulp.task('scripts', function (done) {
-    var ts = require('gulp-typescript');
-    var tsProject = ts.createProject('tsconfig.json', { typescript: require('typescript') });
-    var tsResult = gulp.src(['./src/**/*.ts', './spec/**/*.ts'], { base: '.' })
-        .pipe(ts(tsProject));
-    tsResult.js
-        .pipe(gulp.dest('./'))
-        .on('end', function () {
-            done();
-        });
-});
-
-/**
- * Compile scss files
- */
-gulp.task('styles', function () {
-    var sass = require('gulp-sass');
-    return gulp.src(['./styles/**/*.scss'], { base: './' })
-        .pipe(sass({
-            outputStyle: 'expanded',
-            includePaths: './node_modules/@syncfusion/'
-        }))
-        .pipe(gulp.dest('.'));
-});
-
-/**
- * Bundle all module using webpack
- */
-gulp.task('bundle', function () {
-    var webpackConfig = require(fs.realpathSync('./webpack.config.js'));
-    return gulp.src('')
-        .pipe(webpackGulp(webpackConfig, webpack))
-        .pipe(gulp.dest('.'));
-});
-
-/**
- * Build ts and scss files
- */
-gulp.task('build', function (done) {
-    var runSequence = require('run-sequence');
-    runSequence('scripts', 'styles', 'bundle', done);
-});
-
-/**
- * Run test for samplebrowser
- */
-gulp.task('test', function (done) {
-    var karma = require('karma');
-    new karma.Server({
-        configFile: __dirname + '/karma.conf.js',
-        singleRun: true,
-        browsers: ['ChromeHeadless'],
-        browserNoActivityTimeout: 30000
-    }, function (e) {
-        done(e === 0 ? null : 'karma exited with status ' + e);
-    }).start();
-});
-
-/**
- * Load the samples
- */
-gulp.task('serve', ['build'], function (done) {
-    var browserSync = require('browser-sync');
-    var bs = browserSync.create('Essential JS 2');
-    var options = {
-        server: {
-            baseDir: './'
-        },
-        ui: false
-    };
-    bs.init(options, done);
-});
+require('@syncfusion/ej2-showcase-helper');

index.html

@@ -20,7 +20,7 @@
     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
 	<link href="./styles/styles.css" rel="stylesheet" />
     <link href="./styles/index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.4.38/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/24.1.41/bootstrap5.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.10/Reflect.min.js"></script>
@@ -59,7 +59,7 @@
             <div class="content nameContent">
                 <p class='name' id='user-name'>Nicholas Delacruz</p>
                 <div class='wallet-container'>
-                    <span style='height: 27px;' class='balance-align'><img src="./styles/images/cash-wallet.svg" alt="Cash Wallet" /></span>
+                    <span style='height: 27px;' class='balance-align'><img src="https://ej2.syncfusion.com/showcase/javascript/expensetracker/styles/images/cash-wallet.svg" alt="Cash Wallet" /></span>
                     <span id="current-balance" class='balance-align'>$ 0</span>
                 </div>
             </div>

package.json

@@ -1,9 +1,31 @@
 {
   "name": "@syncfusion/ej2-ts-expense-tracker",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "Essential JS 2 - Expense Tracker",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack --mode production",
+    "start": "webpack serve --mode development --open"
+  },
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
+  "devDependencies": {
+    "@types/crossroads": "^0.0.30",
+    "@types/hasher": "^0.0.32",
+    "crossroads": "^0.12.2",
+    "css-loader": "^6.8.1",
+    "hasher": "^1.2.0",
+    "html-webpack-plugin": "^5.5.3",
+    "mini-css-extract-plugin": "^2.7.6",
+    "terser-webpack-plugin": "^5.3.9",
+    "sass": "^1.63.6",
+    "sass-loader": "^13.3.2",
+    "ts-loader": "^9.4.4",
+    "typescript": "^5.1.6",
+    "webpack": "^5.88.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  },
   "dependencies": {
     "@syncfusion/ej2-base": "*",
     "@syncfusion/ej2-icons": "*",
@@ -14,45 +36,6 @@
     "@syncfusion/ej2-dropdowns": "*",
     "@syncfusion/ej2-grids": "*",
     "@syncfusion/ej2-inputs": "*",
-    "@syncfusion/ej2-popups": "*",
-    "browser-sync": "^2.23.6",
-    "crossroads": "^0.12.2",
-    "hasher": "^1.2.0"
-  },
-  "devDependencies": {
-    "@types/chai": "^3.4.28",
-    "@types/hasher": "0.0.27",
-    "@types/crossroads": "0.0.28",
-    "@types/jasmine": "^2.2.29",
-    "@types/jasmine-ajax": "^3.1.27",
-    "@types/requirejs": "^2.1.26",
-    "gulp": "^3.9.0",
-    "gulp-sass": "^3.1.0",
-    "gulp-print": "^2.0.1",
-    "gulp-tslint": "^7.0.1",
-    "gulp-sass-lint": "^1.1.1",
-    "gulp-typescript": "^2.13.0",
-    "tslint": "4.0.2",
-    "run-sequence": "2.2.0",
-    "typescript": "2.3.3",
-    "webpack": "2.5.1",
-    "webpack-stream": "^3.2.0"
-  },
-  "keywords": [
-    "ej2",
-    "syncfusion",
-    "Expense Tracker"
-  ],
-  "scripts": {
-    "compile": "gulp ci-compile",
-    "ci-publish": "gulp publish-samples",
-    "build": "gulp lint && gulp build"
-  },
-  "config": {
-    "ghooks": {
-      "pre-commit": "gulp pre-commit",
-      "pre-push": "gulp pre-push",
-      "commit-msg": "gulp commit-msg"
-    }
+    "@syncfusion/ej2-popups": "*"
   }
 }

src/dashboard/dashboard.ts

@@ -81,7 +81,7 @@ export function cardUpdate(toUpdate?: boolean): void {
                 incomeRS += parseInt(incomeD[i].Amount, 0);
             }
             if (document.getElementById('tolincome')) {
-                document.getElementById('tolincome').textContent = window.getCurrencyVal(incomeRS ? incomeRS : 0);
+                document.getElementById('tolincome')!.textContent = window.getCurrencyVal(incomeRS ? incomeRS : 0);
             }
         });
 
@@ -94,21 +94,21 @@ export function cardUpdate(toUpdate?: boolean): void {
                 expenseRS += parseInt(expenseD[i].Amount, 0);
             }
             if (document.getElementById('tolexpense')) {
-                document.getElementById('tolexpense').textContent = window.getCurrencyVal(expenseRS ? expenseRS : 0);
+                document.getElementById('tolexpense')!.textContent = window.getCurrencyVal(expenseRS ? expenseRS : 0);
             }
             if (document.getElementById('current-balance')) {
-                document.getElementById('current-balance').textContent = window.getCurrencyVal(incomeRS - expenseRS);
+                document.getElementById('current-balance')!.textContent = window.getCurrencyVal(incomeRS - expenseRS);
             }
             if (document.getElementById('tolbalance')) {
-                document.getElementById('tolbalance').textContent = window.getCurrencyVal(incomeRS - expenseRS);
+                document.getElementById('tolbalance')!.textContent = window.getCurrencyVal(incomeRS - expenseRS);
             }
         });
 
     /* tslint:disable-next-line */
     let transaction: any = new DataManager(window.expenseDS)
         .executeLocal((new Query().where(predicateStart.and(predicateEnd))));
     if (document.getElementById('toltransaction')) {
-        document.getElementById('toltransaction').textContent = window.getNumberVal(transaction.length);
+        document.getElementById('toltransaction')!.textContent = window.getNumberVal(transaction.length);
     }
 }
 
@@ -214,17 +214,17 @@ function getCoulmnChartIncomeDS(e: any): void {
 
 // tslint:disable-next-line:max-func-body-length
 function onDateRangeChange(args: RangeEventArgs): void {
-    window.startDate = args.startDate;
-    window.endDate = args.endDate;
+    window.startDate = args.startDate as Date;
+    window.endDate = args.endDate as Date;
     lineDS = [];
     lineD = [];
     columnIncomeDS = [];
     columnExpenseDS = [];
     tempChartExpenseDS = [];
     tempChartIncomeDS = [];
     lineD = [];
-    predicateStart = new Predicate('DateTime', 'greaterthanorequal', args.startDate);
-    predicateEnd = new Predicate('DateTime', 'lessthanorequal', args.endDate);
+    predicateStart = new Predicate('DateTime', 'greaterthanorequal', args.startDate as Date);
+    predicateEnd = new Predicate('DateTime', 'lessthanorequal', args.endDate as Date);
     predicate = predicateStart.and(predicateEnd);
     cardUpdate();
     /* tslint:disable */
@@ -413,7 +413,7 @@ function InitializeComponet(): void {
         result: Object;
     }    
     if (document.getElementById('user-name')) {
-        document.getElementById('user-name').textContent = window.userName;
+        document.getElementById('user-name')!.textContent = window.userName;
     }
     cardUpdate();
     /* tslint:disable-next-line */
@@ -582,14 +582,14 @@ function InitializeComponet(): void {
             visible: true
         },
         textRender: (args: IAccTextRenderEventArgs) => {
-            args.series.dataLabel.font.size = getFontSize(pie.initialClipRect.width);
+            args.series.dataLabel!.font!.size = getFontSize(pie.initialClipRect.width);
             pie.animateSeries = true;
             if (args.text.indexOf('Others') > -1) {
                 args.text = 'Others';
             }
         },
         animationComplete: (args: IAccAnimationCompleteEventArgs) => {
-            let element: HTMLElement = document.getElementById('total-expense_datalabel_Series_0');
+            let element: HTMLElement = document.getElementById('total-expense_datalabel_Series_0') as HTMLElement;
             if (!isNOU(element)) { element.style.visibility = 'visible'; }
         }
     });
@@ -607,12 +607,12 @@ function InitializeComponet(): void {
         ],
         load: (args: any) => {
             if (document.getElementById('grid-popup')) {
-                document.getElementById('grid-popup').style.display = "block";
+                document.getElementById('grid-popup')!.style.display = "block";
             }
         },
         dataBound: (args: Object) => {
             if (document.getElementById('grid-popup')) {
-                document.getElementById('grid-popup').style.display = "none";
+                document.getElementById('grid-popup')!.style.display = "none";
             }
         }
     });
@@ -684,28 +684,28 @@ window.dashboard = (): void => {
     });
 };
 function updateChart(): void {
-    let pieContainerObj: HTMLElement = document.getElementById('totalExpense');
+    let pieContainerObj: HTMLElement = document.getElementById('totalExpense') as HTMLElement;
     if (!isNOU(pieContainerObj) && pieContainerObj.offsetWidth < 480) {
         disableChartLabel();
     } else {
         enableChartLabel();
     }
 }
 function disableChartLabel(): void {
-    pie.series[0].dataLabel.visible = false;
+    pie.series[0].dataLabel!.visible = false;
     pie.dataBind();
     pie.refresh();
 }
 function enableChartLabel(): void {
-    pie.series[0].dataLabel.visible = true;
+    pie.series[0].dataLabel!.visible = true;
     pie.dataBind();
     pie.refresh();
 }
 function formatRangeDate(): void {
     let intl: Internationalization = new Internationalization();
     let dateStart: string = intl.formatDate(dateRangePickerObject.startDate, { skeleton: 'MMMd' });
     let dateEnd: string = intl.formatDate(dateRangePickerObject.endDate, { skeleton: 'MMMd' });
-    document.getElementById('rangeDate').textContent = dateStart + ' - ' + dateEnd;
+    document.getElementById('rangeDate')!.textContent = dateStart + ' - ' + dateEnd;
 }
 export function getTotalExpense(): void {
     expTotal = 0;