igniteui-cli 9.0.1 → 9.0.5-beta.0

package/migrations/update-4_2_3/index.spec.js

@@ -32,7 +32,7 @@ describe("Update 4.2.3", () => {
     });
     it("should add Awesome Grid extra paginator style", (done) => __awaiter(void 0, void 0, void 0, function* () {
         const stylesFile = "/src/app/awesome-grid/awesome-grid.component.scss";
-        appTree.create(stylesFile, `@import '~igniteui-angular/theming';
+        appTree.create(stylesFile, `@use 'igniteui-angular/theming' as *;
 
 :host ::ng-deep {
 
@@ -49,7 +49,7 @@ describe("Update 4.2.3", () => {
 `);
         yield schematicRunner.runSchematicAsync("migration-04", {}, appTree).toPromise();
         expect(appTree.readContent(stylesFile).replace(/\r\n/g, "\n"))
-            .toEqual(`@import '~igniteui-angular/theming';
+            .toEqual(`@use 'igniteui-angular/theming' as *;
 
 :host ::ng-deep {
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-cli",
-  "version": "9.0.1",
+  "version": "9.0.5-beta.0",
   "description": "CLI tool for creating Ignite UI projects",
   "keywords": [
     "CLI",
@@ -72,8 +72,8 @@
     "all": true
   },
   "dependencies": {
-    "@igniteui/angular-templates": "~13.0.901",
-    "@igniteui/cli-core": "~9.0.1",
+    "@igniteui/angular-templates": "~13.0.905-beta.0",
+    "@igniteui/cli-core": "~9.0.5-beta.0",
     "chalk": "^2.3.2",
     "fs-extra": "^3.0.1",
     "glob": "^7.1.2",
@@ -81,7 +81,7 @@
     "opn": "^5.3.0",
     "resolve": "^1.6.0",
     "through2": "^2.0.3",
-    "typescript": "~4.4.4",
+    "typescript": "~4.5.2",
     "yargs": "^8.0.2"
   },
   "devDependencies": {

package/templates/angular/ig-ts/projects/empty/files/package.json

@@ -10,26 +10,26 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~13.0.0",
-    "@angular/common": "~13.0.0",
-    "@angular/compiler": "~13.0.0",
-    "@angular/core": "~13.0.0",
-    "@angular/forms": "~13.0.0",
-    "@angular/platform-browser": "~13.0.0",
-    "@angular/platform-browser-dynamic": "~13.0.0",
-    "@angular/router": "~13.0.0",
+    "@angular/animations": "~13.1.1",
+    "@angular/common": "~13.1.1",
+    "@angular/compiler": "~13.1.1",
+    "@angular/core": "~13.1.1",
+    "@angular/forms": "~13.1.1",
+    "@angular/platform-browser": "~13.1.1",
+    "@angular/platform-browser-dynamic": "~13.1.1",
+    "@angular/router": "~13.1.1",
     "jquery": ">=1.9.1",
     "jquery-ui": ">=1.10.5",
-    "igniteui-angular-wrappers": "^13.0.1",
-    "ignite-ui": "~20.2",
+    "igniteui-angular-wrappers": "^13.1.0",
+    "ignite-ui": "~21.2",
     "rxjs": "~6.6.0",
     "tslib": "^2.2.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.0.1",
-    "@angular/cli": "~13.0.1",
-    "@angular/compiler-cli": "~13.0.0",
+    "@angular-devkit/build-angular": "~13.1.2",
+    "@angular/cli": "~13.1.2",
+    "@angular/compiler-cli": "~13.1.1",
     "@types/jasmine": "~3.8.0",
     "@types/node": "^12.11.1",
     "igniteui-cli": "^$(cliVersion)",
@@ -39,6 +39,6 @@
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
-    "typescript": "~4.4.4"
+    "typescript": "~4.5.2"
   }
 }

package/templates/jquery/js/projects/empty/files/package.json

@@ -7,7 +7,7 @@
   "dependencies": {
     "jquery": ">=1.9.1",
     "jquery-ui": ">=1.10.5",
-    "ignite-ui": "~20.1"
+    "ignite-ui": "~21.2"
   },
   "devDependencies": {
     "browser-sync": "^2.26.3",

package/templates/quickstart/angular/package.json

@@ -31,7 +31,7 @@
   "devDependencies": {
     "concurrently": "^3.1.0",
     "lite-server": "^2.5.4",
-    "typescript": "~4.4.4",
+    "typescript": "~4.5.2",
     "canonical-path": "0.0.2",
     "http-server": "^0.12.1",
     "tslint": "~6.1.0",

package/templates/quickstart/react/package.json

@@ -15,7 +15,7 @@
   "bin": {
   },
   "dependencies": {
-    "ignite-ui": "~20.1",
+    "ignite-ui": "~21.2",
     "lite-server": "^2.3.0",
     "babel-runtime": "6.22.0",
     "react": "15.4.2",

package/templates/react/igr-es6/bullet-graph/default/index.js

@@ -11,7 +11,7 @@ class IgrBulletGraphTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReact
         this.projectType = "igr-es6";
         this.name = "Bullet Graph";
         this.description = `allows for a linear and concise view of measures compared against a scale.`;
-        this.packages = ["igniteui-react-gauges@~16.12.0"]; // TODO: read version from igniteui-react-core in package.json
+        this.packages = ["igniteui-react-gauges@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json
     }
 }
 module.exports = new IgrBulletGraphTemplate();

package/templates/react/igr-es6/category-chart/default/index.js

@@ -12,7 +12,7 @@ class IgrCategoryChartTemplate extends IgniteUIForReactTemplate_1.IgniteUIForRea
         this.name = "Category Chart";
         this.description = `makes visualizing category data easy. Simplifies the complexities
 							of the data visualization domain into manageable API`;
-        this.packages = ["igniteui-react-charts@~16.12.0"]; // TODO: read version from igniteui-react-core in package.json
+        this.packages = ["igniteui-react-charts@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json
     }
 }
 module.exports = new IgrCategoryChartTemplate();

package/templates/react/igr-es6/doughnut-chart/default/index.js

@@ -11,7 +11,7 @@ class IgrDoughnutChartTemplate extends IgniteUIForReactTemplate_1.IgniteUIForRea
         this.projectType = "igr-es6";
         this.name = "Doughnut Chart";
         this.description = `proportionally illustrate the occurrences of variables.`;
-        this.packages = ["igniteui-react-charts@~16.12.0"]; // TODO: read version from igniteui-react-core in package.json
+        this.packages = ["igniteui-react-charts@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json
     }
 }
 module.exports = new IgrDoughnutChartTemplate();

package/templates/react/igr-es6/financial-chart/default/index.js

@@ -13,7 +13,7 @@ class IgrFinancialChartTemplate extends IgniteUIForReactTemplate_1.IgniteUIForRe
         this.name = "Financial Chart";
         this.description = `charting component that makes it easy to visualize financial data by
 							using a simple and intuitive API.`;
-        this.packages = ["igniteui-react-charts@~16.12.0"]; // TODO: read version from igniteui-react-core in package.json
+        this.packages = ["igniteui-react-charts@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json
     }
 }
 module.exports = new IgrFinancialChartTemplate();

package/templates/react/igr-es6/grid/basic/index.js

@@ -15,8 +15,8 @@ class GridTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
         this.components = ["Grid"];
         this.controlGroup = "Data Grids";
         // TODO: read version from igniteui-react-core in package.json
-        this.packages = ["igniteui-react-grids@~16.12.0", "igniteui-react-inputs@~16.12.0",
-            "igniteui-react-layouts@~16.12.0"];
+        this.packages = ["igniteui-react-grids@~16.15.0", "igniteui-react-inputs@~16.15.0",
+            "igniteui-react-layouts@~16.15.0"];
         this.hasExtraConfiguration = false;
     }
 }

package/templates/react/igr-es6/linear-gauge/default/index.js

@@ -11,7 +11,7 @@ class IgrLinearGaugeTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReact
         this.projectType = "igr-es6";
         this.name = "Linear Gauge";
         this.description = `value compared against a scale and one or more ranges.`;
-        this.packages = ["igniteui-react-gauges@~16.12.0"]; // TODO: read version from igniteui-react-core in package.json
+        this.packages = ["igniteui-react-gauges@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json
     }
 }
 module.exports = new IgrLinearGaugeTemplate();

package/templates/react/igr-es6/pie-chart/default/index.js

@@ -11,7 +11,7 @@ class IgrPieChartTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTem
         this.projectType = "igr-es6";
         this.name = "Pie Chart";
         this.description = `easily illustate the proportions of data entries`;
-        this.packages = ["igniteui-react-charts@~16.12.0"]; // TODO: read version from igniteui-react-core in package.json
+        this.packages = ["igniteui-react-charts@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json
     }
 }
 module.exports = new IgrPieChartTemplate();

package/templates/react/igr-es6/projects/_base/files/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "igniteui-react-core": "~16.12.0",
+    "igniteui-react-core": "~16.15.0",
     "react": "^16.8.2",
     "react-app-polyfill": "^0.2.0",
     "react-dom": "^16.8.2",

package/templates/react/igr-es6/radial-gauge/default/index.js

@@ -12,7 +12,7 @@ class IgrRadialGaugeTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReact
         this.name = "Radial Gauge";
         this.description = `provides a number of visual elements, like a needle, tick marks, ranges
 							and labels, in order to create a predefined shape and scale.`;
-        this.packages = ["igniteui-react-gauges@~16.12.0"]; // TODO: read version from igniteui-react-core in package.json
+        this.packages = ["igniteui-react-gauges@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json
     }
 }
 module.exports = new IgrRadialGaugeTemplate();

package/templates/webcomponents/TypeScriptFileUpdate.js

@@ -109,10 +109,10 @@ class TypeScriptFileUpdate {
                         resultNodes = nodes
                             .concat(newObject);
                     }
-                    const elements = ts.createNodeArray([
+                    const elements = ts.factory.createNodeArray([
                         ...resultNodes
                     ]);
-                    return ts.updateArrayLiteral(array, elements);
+                    return ts.factory.updateArrayLiteralExpression(array, elements);
                 }
                 else {
                     return ts.visitEachChild(node, conditionalVisitor, context);
@@ -151,16 +151,16 @@ class TypeScriptFileUpdate {
         if (!newImports.length) {
             return;
         }
-        const newStatements = ts.createNodeArray([
+        const newStatements = ts.factory.createNodeArray([
             ...this.targetSource.statements.slice(0, this.importsMeta.lastIndex),
             ...newImports.map(x => this.createIdentifierImport(x.from)),
             ...this.targetSource.statements.slice(this.importsMeta.lastIndex)
         ]);
         newImports.forEach(x => this.createdStringLiterals.push(x.from));
-        this.targetSource = ts.updateSourceFileNode(this.targetSource, newStatements);
+        this.targetSource = ts.factory.updateSourceFile(this.targetSource, newStatements);
     }
     createIdentifierImport(importPath) {
-        const importDeclaration = ts.createImportDeclaration(undefined, undefined, undefined, ts.createLiteral(importPath));
+        const importDeclaration = ts.factory.createImportDeclaration(undefined, undefined, undefined, ts.factory.createStringLiteral(importPath));
         return importDeclaration;
     }
     //#endregion ts.TransformerFactory
@@ -295,10 +295,10 @@ class TypeScriptFileUpdate {
         };
     }
     createRouteEntry(filePath, className, linkText) {
-        const routePath = ts.createPropertyAssignment("path", ts.createLiteral(filePath));
-        const routeComponent = ts.createPropertyAssignment("component", ts.createLiteral(className));
-        const routeData = ts.createPropertyAssignment("name", ts.createLiteral(linkText));
-        return ts.createObjectLiteral([routePath, routeComponent, routeData]);
+        const routePath = ts.factory.createPropertyAssignment("path", ts.factory.createStringLiteral(filePath));
+        const routeComponent = ts.factory.createPropertyAssignment("component", ts.factory.createStringLiteral(className));
+        const routeData = ts.factory.createPropertyAssignment("name", ts.factory.createStringLiteral(linkText));
+        return ts.factory.createObjectLiteralExpression([routePath, routeComponent, routeData]);
     }
 }
 exports.TypeScriptFileUpdate = TypeScriptFileUpdate;

package/templates/webcomponents/igc-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,61 @@
+import {
+  defineComponents,
+  IgcFormComponent,
+  IgcInputComponent,
+  IgcCheckboxComponent,
+  IgcButtonComponent
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcFormComponent, IgcInputComponent, IgcCheckboxComponent, IgcButtonComponent);
+
+export default class $(ClassName) extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <style>
+        #form {
+          flex-grow: 1;
+          display: flex;
+          flex-direction: column;
+        }
+        .buttonContainer {
+          display: flex;
+        }
+        .buttonContainer > igc-button {
+          flex: 1;
+        }
+      </style>
+
+      <div class="container sample">
+        <igc-form id="form">
+          <div>Subscribe</div>
+          <igc-input required name="name" type="text" label="Your Name"></igc-input>
+          <igc-input required name="email" type="email" label="Your E-mail"></igc-input>
+          <igc-checkbox name="agreement">I accept the license agreement</igc-checkbox>
+          <br />
+          <div class="buttonContainer">
+            <igc-button type="reset">Reset</igc-button>
+            <igc-button type="submit">Submit</igc-button>
+          </div>
+        </igc-form>
+      </div>
+    `;
+
+    document.addEventListener('igcSubmit', function (event) {
+      const customEvent = event as CustomEvent<FormData>;
+      const formData = customEvent.detail;
+      const formKeys = formData.keys();
+      const formEntries = formData.entries();
+      let result = '';
+      do {
+          const pair = formEntries.next().value;
+          if (pair) {
+              result += pair[0] + '=' + pair[1] + ';';
+          }
+        } while (!formKeys.next().done)
+      console.log(result);
+      alert(result);
+    });
+  }
+}
+
+customElements.define('app-$(path)', $(ClassName));

package/templates/webcomponents/igc-ts/custom-templates/subscription-form/index.d.ts

@@ -0,0 +1 @@
+export {};

package/templates/webcomponents/igc-ts/custom-templates/subscription-form/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForWebComponentsTemplate_1 = require("../../../../../lib/templates/IgniteUIForWebComponentsTemplate");
+class IgcSubscriptionFormTemplate extends IgniteUIForWebComponentsTemplate_1.IgniteUIForWebComponentsTemplate {
+    constructor() {
+        super(__dirname);
+        this.listInComponentTemplates = false;
+        this.listInCustomTemplates = true;
+        this.id = "subscription-form";
+        this.projectType = "igc-ts";
+        this.name = "Subscription Form";
+        this.description = "Subscription form with inputs, buttons and a checkbox inside";
+    }
+    addClassDeclaration(mainModule, projPath, name, modulePath) {
+        // not applicable with custom module
+    }
+}
+module.exports = new IgcSubscriptionFormTemplate();

package/templates/webcomponents/igc-ts/financial-chart/default/files/src/app/__path__/StockIndexData.ts

@@ -0,0 +1,130 @@
+export class StockIndexData {
+  public static getData(): any[] {
+      return [
+{ 'Date': new Date(2020, 2, 3),   'Open': 3235, 'High': 3268, 'Low': 3235, 'Close': 3248, 'Volume': 3757910000 },
+{ 'Date': new Date(2020, 2, 4),   'Open': 3280, 'High': 3306, 'Low': 3280, 'Close': 3297, 'Volume': 3995320000 },
+{ 'Date': new Date(2020, 2, 5),   'Open': 3324, 'High': 3337, 'Low': 3313, 'Close': 3334, 'Volume': 4117730000 },
+{ 'Date': new Date(2020, 2, 6),   'Open': 3344, 'High': 3347, 'Low': 3334, 'Close': 3345, 'Volume': 3868370000 },
+{ 'Date': new Date(2020, 2, 7),   'Open': 3335, 'High': 3341, 'Low': 3322, 'Close': 3327, 'Volume': 3730650000 },
+{ 'Date': new Date(2020, 2, 10),  'Open': 3318, 'High': 3352, 'Low': 3317, 'Close': 3352, 'Volume': 3450350000 },
+{ 'Date': new Date(2020, 2, 11),  'Open': 3365, 'High': 3375, 'Low': 3352, 'Close': 3357, 'Volume': 3760550000 },
+{ 'Date': new Date(2020, 2, 12),  'Open': 3370, 'High': 3381, 'Low': 3369, 'Close': 3379, 'Volume': 3926380000 },
+{ 'Date': new Date(2020, 2, 13),  'Open': 3365, 'High': 3385, 'Low': 3360, 'Close': 3373, 'Volume': 3498240000 },
+{ 'Date': new Date(2020, 2, 14),  'Open': 3378, 'High': 3380, 'Low': 3366, 'Close': 3380, 'Volume': 3398040000 },
+{ 'Date': new Date(2020, 2, 18),  'Open': 3369, 'High': 3375, 'Low': 3355, 'Close': 3370, 'Volume': 3746720000 },
+{ 'Date': new Date(2020, 2, 19),  'Open': 3380, 'High': 3393, 'Low': 3378, 'Close': 3386, 'Volume': 3600150000 },
+{ 'Date': new Date(2020, 2, 20),  'Open': 3380, 'High': 3389, 'Low': 3341, 'Close': 3373, 'Volume': 4007320000 },
+{ 'Date': new Date(2020, 2, 21),  'Open': 3360, 'High': 3360, 'Low': 3328, 'Close': 3337, 'Volume': 3899270000 },
+{ 'Date': new Date(2020, 2, 24),  'Open': 3257, 'High': 3259, 'Low': 3214, 'Close': 3225, 'Volume': 4842960000 },
+{ 'Date': new Date(2020, 2, 25),  'Open': 3238, 'High': 3246, 'Low': 3118, 'Close': 3128, 'Volume': 5591510000 },
+{ 'Date': new Date(2020, 2, 26),  'Open': 3139, 'High': 3182, 'Low': 3108, 'Close': 3116, 'Volume': 5478110000 },
+{ 'Date': new Date(2020, 2, 27),  'Open': 3062, 'High': 3097, 'Low': 2977, 'Close': 2978, 'Volume': 7058840000 },
+{ 'Date': new Date(2020, 2, 28),  'Open': 2916, 'High': 2959, 'Low': 2855, 'Close': 2954, 'Volume': 8563850000 },
+{ 'Date': new Date(2020, 3, 2),   'Open': 2974, 'High': 3090, 'Low': 2945, 'Close': 3090, 'Volume': 6376400000 },
+{ 'Date': new Date(2020, 3, 3),   'Open': 3096, 'High': 3136, 'Low': 2976, 'Close': 3003, 'Volume': 6355940000 },
+{ 'Date': new Date(2020, 3, 4),   'Open': 3045, 'High': 3130, 'Low': 3034, 'Close': 3130, 'Volume': 5035480000 },
+{ 'Date': new Date(2020, 3, 5),   'Open': 3075, 'High': 3083, 'Low': 2999, 'Close': 3023, 'Volume': 5575550000 },
+{ 'Date': new Date(2020, 3, 6),   'Open': 2954, 'High': 2985, 'Low': 2901, 'Close': 2972, 'Volume': 6552140000 },
+{ 'Date': new Date(2020, 3, 9),   'Open': 2863, 'High': 2863, 'Low': 2734, 'Close': 2746, 'Volume': 8423050000 },
+{ 'Date': new Date(2020, 3, 10),  'Open': 2813, 'High': 2882, 'Low': 2734, 'Close': 2882, 'Volume': 7635960000 },
+{ 'Date': new Date(2020, 3, 11),  'Open': 2825, 'High': 2825, 'Low': 2707, 'Close': 2741, 'Volume': 7374110000 },
+{ 'Date': new Date(2020, 3, 12),  'Open': 2630, 'High': 2660, 'Low': 2478, 'Close': 2480, 'Volume': 8829380000 },
+{ 'Date': new Date(2020, 3, 13),  'Open': 2569, 'High': 2711, 'Low': 2492, 'Close': 2711, 'Volume': 8258670000 },
+{ 'Date': new Date(2020, 3, 16),  'Open': 2508, 'High': 2562, 'Low': 2380, 'Close': 2386, 'Volume': 7781540000 },
+{ 'Date': new Date(2020, 3, 17),  'Open': 2425, 'High': 2553, 'Low': 2367, 'Close': 2529, 'Volume': 8358500000 },
+{ 'Date': new Date(2020, 3, 18),  'Open': 2436, 'High': 2453, 'Low': 2280, 'Close': 2398, 'Volume': 8755780000 },
+{ 'Date': new Date(2020, 3, 19),  'Open': 2393, 'High': 2466, 'Low': 2319, 'Close': 2409, 'Volume': 7946710000 },
+{ 'Date': new Date(2020, 3, 20),  'Open': 2431, 'High': 2453, 'Low': 2295, 'Close': 2304, 'Volume': 9044690000 },
+{ 'Date': new Date(2020, 3, 23),  'Open': 2290, 'High': 2300, 'Low': 2191, 'Close': 2237, 'Volume': 7402180000 },
+{ 'Date': new Date(2020, 3, 24),  'Open': 2344, 'High': 2449, 'Low': 2344, 'Close': 2447, 'Volume': 7547350000 },
+{ 'Date': new Date(2020, 3, 25),  'Open': 2457, 'High': 2571, 'Low': 2407, 'Close': 2475, 'Volume': 8285670000 },
+{ 'Date': new Date(2020, 3, 26),  'Open': 2501, 'High': 2637, 'Low': 2500, 'Close': 2630, 'Volume': 7753160000 },
+{ 'Date': new Date(2020, 3, 27),  'Open': 2555, 'High': 2615, 'Low': 2520, 'Close': 2541, 'Volume': 6194330000 },
+{ 'Date': new Date(2020, 3, 30),  'Open': 2558, 'High': 2631, 'Low': 2545, 'Close': 2626, 'Volume': 5746220000 },
+{ 'Date': new Date(2020, 3, 31),  'Open': 2614, 'High': 2641, 'Low': 2571, 'Close': 2584, 'Volume': 6568290000 },
+{ 'Date': new Date(2020, 4, 1),   'Open': 2498, 'High': 2522, 'Low': 2447, 'Close': 2470, 'Volume': 5947900000 },
+{ 'Date': new Date(2020, 4, 2),   'Open': 2458, 'High': 2533, 'Low': 2455, 'Close': 2526, 'Volume': 6454990000 },
+{ 'Date': new Date(2020, 4, 3),   'Open': 2514, 'High': 2538, 'Low': 2459, 'Close': 2488, 'Volume': 6087190000 },
+{ 'Date': new Date(2020, 4, 6),   'Open': 2578, 'High': 2676, 'Low': 2574, 'Close': 2663, 'Volume': 6391860000 },
+{ 'Date': new Date(2020, 4, 7),   'Open': 2738, 'High': 2756, 'Low': 2657, 'Close': 2659, 'Volume': 7040720000 },
+{ 'Date': new Date(2020, 4, 8),   'Open': 2685, 'High': 2760, 'Low': 2663, 'Close': 2749, 'Volume': 5856370000 },
+{ 'Date': new Date(2020, 4, 9),   'Open': 2776, 'High': 2818, 'Low': 2762, 'Close': 2789, 'Volume': 7880140000 },
+{ 'Date': new Date(2020, 4, 13),  'Open': 2782, 'High': 2782, 'Low': 2721, 'Close': 2761, 'Volume': 5274310000 },
+{ 'Date': new Date(2020, 4, 14),  'Open': 2805, 'High': 2851, 'Low': 2805, 'Close': 2846, 'Volume': 5567400000 },
+{ 'Date': new Date(2020, 4, 15),  'Open': 2795, 'High': 2801, 'Low': 2761, 'Close': 2783, 'Volume': 5203390000 },
+{ 'Date': new Date(2020, 4, 16),  'Open': 2799, 'High': 2806, 'Low': 2764, 'Close': 2799, 'Volume': 5179990000 },
+{ 'Date': new Date(2020, 4, 17),  'Open': 2842, 'High': 2879, 'Low': 2830, 'Close': 2874, 'Volume': 5792140000 },
+{ 'Date': new Date(2020, 4, 20),  'Open': 2845, 'High': 2868, 'Low': 2820, 'Close': 2823, 'Volume': 5220160000 },
+{ 'Date': new Date(2020, 4, 21),  'Open': 2784, 'High': 2785, 'Low': 2727, 'Close': 2736, 'Volume': 5075830000 },
+{ 'Date': new Date(2020, 4, 22),  'Open': 2787, 'High': 2815, 'Low': 2775, 'Close': 2799, 'Volume': 5049660000 },
+{ 'Date': new Date(2020, 4, 23),  'Open': 2810, 'High': 2844, 'Low': 2794, 'Close': 2797, 'Volume': 5756520000 },
+{ 'Date': new Date(2020, 4, 24),  'Open': 2812, 'High': 2842, 'Low': 2791, 'Close': 2836, 'Volume': 5374480000 },
+{ 'Date': new Date(2020, 4, 27),  'Open': 2854, 'High': 2887, 'Low': 2852, 'Close': 2878, 'Volume': 5194260000 },
+{ 'Date': new Date(2020, 4, 28),  'Open': 2909, 'High': 2921, 'Low': 2860, 'Close': 2863, 'Volume': 5672880000 },
+{ 'Date': new Date(2020, 4, 29),  'Open': 2918, 'High': 2954, 'Low': 2912, 'Close': 2939, 'Volume': 6620140000 },
+{ 'Date': new Date(2020, 4, 30),  'Open': 2930, 'High': 2930, 'Low': 2892, 'Close': 2912, 'Volume': 6523120000 },
+{ 'Date': new Date(2020, 5, 1),   'Open': 2869, 'High': 2869, 'Low': 2821, 'Close': 2830, 'Volume': 4753160000 },
+{ 'Date': new Date(2020, 5, 4),   'Open': 2815, 'High': 2844, 'Low': 2797, 'Close': 2842, 'Volume': 4723140000 },
+{ 'Date': new Date(2020, 5, 5),   'Open': 2868, 'High': 2898, 'Low': 2863, 'Close': 2868, 'Volume': 5129590000 },
+{ 'Date': new Date(2020, 5, 6),   'Open': 2883, 'High': 2891, 'Low': 2847, 'Close': 2848, 'Volume': 4861920000 },
+{ 'Date': new Date(2020, 5, 7),   'Open': 2878, 'High': 2901, 'Low': 2876, 'Close': 2881, 'Volume': 5164640000 },
+{ 'Date': new Date(2020, 5, 8),   'Open': 2908, 'High': 2932, 'Low': 2902, 'Close': 2929, 'Volume': 4857160000 },
+{ 'Date': new Date(2020, 5, 11),  'Open': 2915, 'High': 2944, 'Low': 2903, 'Close': 2930, 'Volume': 4807320000 },
+{ 'Date': new Date(2020, 5, 12),  'Open': 2939, 'High': 2945, 'Low': 2869, 'Close': 2870, 'Volume': 5107710000 },
+{ 'Date': new Date(2020, 5, 13),  'Open': 2865, 'High': 2874, 'Low': 2793, 'Close': 2820, 'Volume': 6143130000 },
+{ 'Date': new Date(2020, 5, 14),  'Open': 2794, 'High': 2852, 'Low': 2766, 'Close': 2852, 'Volume': 5641920000 },
+{ 'Date': new Date(2020, 5, 15),  'Open': 2829, 'High': 2865, 'Low': 2816, 'Close': 2863, 'Volume': 5477040000 },
+{ 'Date': new Date(2020, 5, 18),  'Open': 2913, 'High': 2968, 'Low': 2913, 'Close': 2953, 'Volume': 6364290000 },
+{ 'Date': new Date(2020, 5, 19),  'Open': 2948, 'High': 2964, 'Low': 2922, 'Close': 2922, 'Volume': 4969330000 },
+{ 'Date': new Date(2020, 5, 20),  'Open': 2953, 'High': 2980, 'Low': 2953, 'Close': 2971, 'Volume': 4992970000 },
+{ 'Date': new Date(2020, 5, 21),  'Open': 2969, 'High': 2978, 'Low': 2938, 'Close': 2948, 'Volume': 4966940000 },
+{ 'Date': new Date(2020, 5, 22),  'Open': 2948, 'High': 2956, 'Low': 2933, 'Close': 2955, 'Volume': 3952800000 },
+{ 'Date': new Date(2020, 5, 26),  'Open': 3004, 'High': 3021, 'Low': 2988, 'Close': 2991, 'Volume': 5837060000 },
+{ 'Date': new Date(2020, 5, 27),  'Open': 3015, 'High': 3036, 'Low': 2969, 'Close': 3036, 'Volume': 6371230000 },
+{ 'Date': new Date(2020, 5, 28),  'Open': 3046, 'High': 3068, 'Low': 3023, 'Close': 3029, 'Volume': 5402670000 },
+{ 'Date': new Date(2020, 5, 29),  'Open': 3025, 'High': 3049, 'Low': 2998, 'Close': 3044, 'Volume': 7275080000 },
+{ 'Date': new Date(2020, 6, 1),   'Open': 3038, 'High': 3062, 'Low': 3031, 'Close': 3055, 'Volume': 4673410000 },
+{ 'Date': new Date(2020, 6, 2),   'Open': 3064, 'High': 3081, 'Low': 3051, 'Close': 3080, 'Volume': 5187230000 },
+{ 'Date': new Date(2020, 6, 3),   'Open': 3098, 'High': 3130, 'Low': 3098, 'Close': 3122, 'Volume': 5989560000 },
+{ 'Date': new Date(2020, 6, 4),   'Open': 3111, 'High': 3128, 'Low': 3090, 'Close': 3112, 'Volume': 6428130000 },
+{ 'Date': new Date(2020, 6, 5),   'Open': 3163, 'High': 3211, 'Low': 3163, 'Close': 3193, 'Volume': 8617590000 },
+{ 'Date': new Date(2020, 6, 8),   'Open': 3199, 'High': 3233, 'Low': 3196, 'Close': 3232, 'Volume': 8437380000 },
+{ 'Date': new Date(2020, 6, 9),   'Open': 3213, 'High': 3222, 'Low': 3193, 'Close': 3207, 'Volume': 6382620000 },
+{ 'Date': new Date(2020, 6, 10),  'Open': 3213, 'High': 3223, 'Low': 3181, 'Close': 3190, 'Volume': 6570840000 },
+{ 'Date': new Date(2020, 6, 11),  'Open': 3123, 'High': 3123, 'Low': 2999, 'Close': 3002, 'Volume': 7018890000 },
+{ 'Date': new Date(2020, 6, 12),  'Open': 3071, 'High': 3088, 'Low': 2984, 'Close': 3041, 'Volume': 5832250000 },
+{ 'Date': new Date(2020, 6, 15),  'Open': 2993, 'High': 3079, 'Low': 2965, 'Close': 3066, 'Volume': 5740660000 },
+{ 'Date': new Date(2020, 6, 16),  'Open': 3131, 'High': 3153, 'Low': 3076, 'Close': 3124, 'Volume': 5829240000 },
+{ 'Date': new Date(2020, 6, 17),  'Open': 3136, 'High': 3141, 'Low': 3108, 'Close': 3113, 'Volume': 4549390000 },
+{ 'Date': new Date(2020, 6, 18),  'Open': 3101, 'High': 3120, 'Low': 3093, 'Close': 3115, 'Volume': 4429030000 },
+{ 'Date': new Date(2020, 6, 19),  'Open': 3140, 'High': 3155, 'Low': 3083, 'Close': 3097, 'Volume': 8327780000 },
+{ 'Date': new Date(2020, 6, 22),  'Open': 3094, 'High': 3120, 'Low': 3079, 'Close': 3117, 'Volume': 4665380000 },
+{ 'Date': new Date(2020, 6, 23),  'Open': 3138, 'High': 3154, 'Low': 3127, 'Close': 3131, 'Volume': 4704830000 },
+{ 'Date': new Date(2020, 6, 24),  'Open': 3114, 'High': 3115, 'Low': 3032, 'Close': 3050, 'Volume': 5587200000 },
+{ 'Date': new Date(2020, 6, 25),  'Open': 3046, 'High': 3086, 'Low': 3024, 'Close': 3083, 'Volume': 4815420000 },
+{ 'Date': new Date(2020, 6, 26),  'Open': 3073, 'High': 3073, 'Low': 3004, 'Close': 3009, 'Volume': 8098120000 },
+{ 'Date': new Date(2020, 6, 29),  'Open': 3018, 'High': 3053, 'Low': 2999, 'Close': 3053, 'Volume': 4462770000 },
+{ 'Date': new Date(2020, 6, 30),  'Open': 3050, 'High': 3111, 'Low': 3047, 'Close': 3100, 'Volume': 4696280000 },
+{ 'Date': new Date(2020, 7, 1),   'Open': 3105, 'High': 3128, 'Low': 3101, 'Close': 3115, 'Volume': 4443130000 },
+{ 'Date': new Date(2020, 7, 2),   'Open': 3143, 'High': 3165, 'Low': 3124, 'Close': 3130, 'Volume': 4190830000 },
+{ 'Date': new Date(2020, 7, 6),   'Open': 3155, 'High': 3182, 'Low': 3155, 'Close': 3179, 'Volume': 4736450000 },
+{ 'Date': new Date(2020, 7, 7),   'Open': 3166, 'High': 3184, 'Low': 3142, 'Close': 3145, 'Volume': 4563700000 },
+{ 'Date': new Date(2020, 7, 8),   'Open': 3153, 'High': 3171, 'Low': 3136, 'Close': 3169, 'Volume': 4927700000 },
+{ 'Date': new Date(2020, 7, 9),   'Open': 3176, 'High': 3179, 'Low': 3115, 'Close': 3152, 'Volume': 4829020000 },
+{ 'Date': new Date(2020, 7, 10),  'Open': 3152, 'High': 3186, 'Low': 3136, 'Close': 3185, 'Volume': 4515340000 },
+{ 'Date': new Date(2020, 7, 13),  'Open': 3205, 'High': 3235, 'Low': 3149, 'Close': 3155, 'Volume': 4890780000 },
+{ 'Date': new Date(2020, 7, 14),  'Open': 3141, 'High': 3200, 'Low': 3127, 'Close': 3197, 'Volume': 4476170000 },
+{ 'Date': new Date(2020, 7, 15),  'Open': 3225, 'High': 3238, 'Low': 3200, 'Close': 3226, 'Volume': 4669760000 },
+{ 'Date': new Date(2020, 7, 16),  'Open': 3208, 'High': 3220, 'Low': 3198, 'Close': 3215, 'Volume': 3961230000 },
+{ 'Date': new Date(2020, 7, 17),  'Open': 3224, 'High': 3233, 'Low': 3205, 'Close': 3224, 'Volume': 3993830000 },
+{ 'Date': new Date(2020, 7, 20),  'Open': 3224, 'High': 3258, 'Low': 3215, 'Close': 3251, 'Volume': 3971200000 },
+{ 'Date': new Date(2020, 7, 21),  'Open': 3268, 'High': 3277, 'Low': 3247, 'Close': 3257, 'Volume': 4547960000 },
+{ 'Date': new Date(2020, 7, 22),  'Open': 3254, 'High': 3279, 'Low': 3253, 'Close': 3276, 'Volume': 4255190000 },
+{ 'Date': new Date(2020, 7, 23),  'Open': 3271, 'High': 3279, 'Low': 3222, 'Close': 3235, 'Volume': 4290460000 },
+{ 'Date': new Date(2020, 7, 24),  'Open': 3218, 'High': 3227, 'Low': 3200, 'Close': 3215, 'Volume': 3894900000 },
+{ 'Date': new Date(2020, 7, 27),  'Open': 3219, 'High': 3241, 'Low': 3214, 'Close': 3239, 'Volume': 3963910000 },
+{ 'Date': new Date(2020, 7, 28),  'Open': 3234, 'High': 3243, 'Low': 3216, 'Close': 3218, 'Volume': 4027890000 },
+{ 'Date': new Date(2020, 7, 29),  'Open': 3227, 'High': 3264, 'Low': 3227, 'Close': 3258, 'Volume': 4676300000 }
+];
+  }
+}

package/templates/webcomponents/igc-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,53 @@
+import { StockIndexData } from './StockIndexData';
+import {
+  IgcFinancialChartComponent ,
+  IgcFinancialChartModule,
+  FinancialChartXAxisMode,
+  FinancialChartYAxisMode ,
+} from 'igniteui-webcomponents-charts';
+import { ModuleManager } from 'igniteui-webcomponents-core';
+
+ModuleManager.register(IgcFinancialChartModule);
+
+export default class $(ClassName) extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot!.innerHTML = `
+    <style>
+      :host{
+        height: 50%;
+        width: 50%;
+      }
+    </style>
+    <igc-financial-chart id="chart" width="100%" height="100%"
+      is-toolbar-visible="false"
+      chart-type="Candle"
+      chart-title="S&P 500"
+      title-alignment="Left"
+      title-left-margin="25"
+      title-top-margin="10"
+      title-bottom-margin="10"
+      subtitle="CME - CME Delayed Price, Currency in USD"
+      subtitle-alignment="Left"
+      subtitle-left-margin="25"
+      subtitle-top-margin="5"
+      subtitle-bottom-margin="10"
+      y-axis-label-location="OutsideLeft"
+      y-axis-title="Financial Prices"
+      y-axis-title-left-margin="10"
+      y-axis-title-right-margin="5"
+      y-axis-label-left-margin="0"
+      zoom-slider-type="None">
+    </igc-financial-chart>
+  `;
+  }
+
+  connectedCallback() {
+    const chart = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('chart') as IgcFinancialChartComponent;
+    chart.dataSource = StockIndexData.getData();
+    chart.yAxisMode = FinancialChartYAxisMode.Numeric;
+  }
+}
+
+customElements.define('app-$(path)', $(ClassName));

package/templates/webcomponents/igc-ts/financial-chart/default/index.d.ts

@@ -0,0 +1 @@
+export {};

package/templates/webcomponents/igc-ts/financial-chart/default/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForWebComponentsTemplate_1 = require("../../../../../lib/templates/IgniteUIForWebComponentsTemplate");
+class IgcFinancialChartTemplate extends IgniteUIForWebComponentsTemplate_1.IgniteUIForWebComponentsTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["FinancialChart"];
+        this.controlGroup = "Charts";
+        this.listInComponentTemplates = true;
+        this.id = "financial-chart";
+        this.projectType = "igc-ts";
+        this.name = "Financial Chart";
+        this.description = "IgcFinancialChart";
+    }
+    addClassDeclaration(mainModule, projPath, name, modulePath) {
+        // not applicable with custom module
+    }
+}
+module.exports = new IgcFinancialChartTemplate();

package/templates/webcomponents/igc-ts/financial-chart/index.d.ts

@@ -0,0 +1 @@
+export {};

package/templates/webcomponents/igc-ts/financial-chart/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgcFinancialChartComponent extends cli_core_1.BaseComponent {
+    constructor() {
+        super(__dirname);
+        this.name = "Financial Chart";
+        this.group = "Charts";
+        this.description = "pick from different chart views";
+    }
+}
+module.exports = new IgcFinancialChartComponent();

package/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.ts

@@ -2,17 +2,13 @@ import {
   IgcDataGridModule,
   IgcGridColumnOptionsModule,
   IgcDataGridComponent,
-  IgcImageColumnComponent,
-  IgcTextColumnComponent,
-  IgcNumericColumnComponent,
-  IgcDateTimeColumnComponent,
-  IgcColumnGroupDescription
+  IgcColumnGroupDescription,
 } from 'igniteui-webcomponents-grids';
 import { ModuleManager } from 'igniteui-webcomponents-core';
 
 ModuleManager.register(
   IgcDataGridModule,
-  IgcGridColumnOptionsModule
+  IgcGridColumnOptionsModule,
 );
 
 export default class $(ClassName) extends HTMLElement {
@@ -43,13 +39,14 @@ export default class $(ClassName) extends HTMLElement {
 
   constructor() {
     super();
-    this.attachShadow({mode: 'open'});
+    this.attachShadow({ mode: 'open' });
     this.shadowRoot!.innerHTML = `
     <style>
       :host {
         height: 100%;
         margin: 0px;
         padding-left: 275px;
+        padding-right: 20px;
         width: calc(100% - 275px);
       }
     </style>