igniteui-cli 9.0.0-rc.3 → 9.0.3

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.0-rc.3",
+  "version": "9.0.3",
   "description": "CLI tool for creating Ignite UI projects",
   "keywords": [
     "CLI",
@@ -72,8 +72,8 @@
     "all": true
   },
   "dependencies": {
-    "@igniteui/angular-templates": "~13.0.900-rc.3",
-    "@igniteui/cli-core": "~9.0.0-rc.3",
+    "@igniteui/angular-templates": "~13.0.903",
+    "@igniteui/cli-core": "~9.0.3",
     "chalk": "^2.3.2",
     "fs-extra": "^3.0.1",
     "glob": "^7.1.2",

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>