igniteui-cli 9.0.3 → 9.0.5-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-cli",
-  "version": "9.0.3",
+  "version": "9.0.5-beta.2",
   "description": "CLI tool for creating Ignite UI projects",
   "keywords": [
     "CLI",
@@ -72,8 +72,8 @@
     "all": true
   },
   "dependencies": {
-    "@igniteui/angular-templates": "~13.0.903",
-    "@igniteui/cli-core": "~9.0.3",
+    "@igniteui/angular-templates": "~13.0.905-beta.2",
+    "@igniteui/cli-core": "~9.0.5-beta.2",
     "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/avatar/default/files/src/app/__path__/__filePrefix__.component.test.ts

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path)';
+
+describe('IgcAvatarComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

package/templates/webcomponents/igc-ts/badge/default/files/src/app/__path__/__filePrefix__.component.test.ts

@@ -0,0 +1,10 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path)';
+
+describe('IgcBadgeComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
+

package/templates/webcomponents/igc-ts/button/default/files/src/app/__path__/__filePrefix__.component.test.ts

@@ -0,0 +1,10 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path)';
+
+describe('IgcButtonComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});
+

package/templates/webcomponents/igc-ts/calendar/default/files/src/app/__path__/__filePrefix__.component.test.ts

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path)';
+
+describe('IgcCalendarComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

package/templates/webcomponents/igc-ts/card/default/files/src/app/__path__/__filePrefix__.component.test.ts

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path)';
+
+describe('IgcCardComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

package/templates/webcomponents/igc-ts/checkbox/default/files/src/app/__path__/__filePrefix__.component.test.ts

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path)';
+
+describe('IgcCheckboxComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

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

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path)';
+
+describe('IgcSubscriptionFormComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

package/templates/webcomponents/igc-ts/dock-manager/default/files/src/app/__path__/__filePrefix__.component.test.ts

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path)';
+
+describe('IgcDockManagerComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

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

@@ -91,15 +91,15 @@ export default class $(ClassName) extends HTMLElement {
               {
                 type: IgcDockManagerPaneType.contentPane,
                 contentId: 'content1',
-                header: 'Content Pane 1'
+                header: 'Content Pane 1',
               },
               {
                 type: IgcDockManagerPaneType.contentPane,
                 contentId: 'content2',
                 header: 'Unpinned Pane 1',
-                isPinned: false
-              }
-            ]
+                isPinned: false,
+              },
+            ],
           },
           {
             type: IgcDockManagerPaneType.splitPane,
@@ -119,25 +119,25 @@ export default class $(ClassName) extends HTMLElement {
                         {
                           type: IgcDockManagerPaneType.contentPane,
                           header: 'Document 1',
-                          contentId: 'content3'
+                          contentId: 'content3',
                         },
                         {
                           type: IgcDockManagerPaneType.contentPane,
                           header: 'Document 2',
-                          contentId: 'content4'
-                        }
-                      ]
-                    }
-                  ]
-                }
+                          contentId: 'content4',
+                        },
+                      ],
+                    },
+                  ],
+                },
               },
               {
                 type: IgcDockManagerPaneType.contentPane,
                 contentId: 'content5',
                 header: 'Unpinned Pane 2',
-                isPinned: false
-              }
-            ]
+                isPinned: false,
+              },
+            ],
           },
           {
             type: IgcDockManagerPaneType.splitPane,
@@ -150,38 +150,38 @@ export default class $(ClassName) extends HTMLElement {
                   {
                     type: IgcDockManagerPaneType.contentPane,
                     contentId: 'content6',
-                    header: 'Tab 1'
+                    header: 'Tab 1',
                   },
                   {
                     type: IgcDockManagerPaneType.contentPane,
                     contentId: 'content7',
-                    header: 'Tab 2'
+                    header: 'Tab 2',
                   },
                   {
                     type: IgcDockManagerPaneType.contentPane,
                     contentId: 'content8',
-                    header: 'Tab 3'
+                    header: 'Tab 3',
                   },
                   {
                     type: IgcDockManagerPaneType.contentPane,
                     contentId: 'content9',
-                    header: 'Tab 4'
+                    header: 'Tab 4',
                   },
                   {
                     type: IgcDockManagerPaneType.contentPane,
                     contentId: 'content10',
-                    header: 'Tab 5'
-                  }
-                ]
+                    header: 'Tab 5',
+                  },
+                ],
               },
               {
                 type: IgcDockManagerPaneType.contentPane,
                 contentId: 'content11',
-                header: 'Content Pane 2'
-              }
-            ]
-          }
-        ]
+                header: 'Content Pane 2',
+              },
+            ],
+          },
+        ],
       },
       floatingPanes: [
         {
@@ -194,11 +194,11 @@ export default class $(ClassName) extends HTMLElement {
             {
               type: IgcDockManagerPaneType.contentPane,
               contentId: 'content12',
-              header: 'Floating Pane'
-            }
-          ]
-        }
-      ]
+              header: 'Floating Pane',
+            },
+          ],
+        },
+      ],
     };
   }
 }

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

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path)';
+
+describe('IgcFinancialChartComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

package/templates/webcomponents/igc-ts/form/default/files/src/app/__path__/__filePrefix__.component.test.ts

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path)';
+
+describe('IgcFormComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

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

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path)';
+
+describe('IgcDataGridComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

package/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/DataGridSharedData.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 export class DataGridSharedData {
   public static getEmployees(count?: number): any[] {
     if (count === undefined) {
@@ -102,7 +103,7 @@ export class DataGridSharedData {
       const items = this.getRandomNumber(10, 80);
       const value = price * items;
       const margin = this.getRandomNumber(3, 10);
-      const profit = Math.round((price * margin / 100) * items);
+      const profit = Math.round((price * (margin / 100)) * items);
       const country = this.getRandomItem(countries);
       sales.push({
         BundlePrice: price,

package/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/__filePrefix__.component.test.ts

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path)';
+
+describe('IgcGridEditingComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

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

@@ -1,3 +1,4 @@
+/* eslint-disable import/extensions */
 import {
   IgcDataGridModule,
   IgcGridColumnOptionsModule,
@@ -80,6 +81,11 @@ export default class $(ClassName) extends HTMLElement {
   }
 
   connectedCallback() {
+    const grid = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('grid') as IgcDataGridComponent;
+    const commitButton = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('commitClick') as HTMLButtonElement;
+    const undoButton = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('undoClick') as HTMLButtonElement;
+    const redoButton = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('redoClick') as HTMLButtonElement;
+
     const onCommitClick = () => {
       grid.commitEdits();
       commitButton.disabled = true;
@@ -115,7 +121,35 @@ export default class $(ClassName) extends HTMLElement {
       }
     };
 
-    const onDeleteCellUpdating = (s: IgcTemplateColumnComponent, e: IgcTemplateCellUpdatingEventArgs) => {
+    if (commitButton !== null) {
+      commitButton.onclick = onCommitClick;
+    }
+    if (undoButton !== null) {
+      undoButton.onclick = onUndoClick;
+    }
+
+    if (redoButton !== null) {
+      redoButton.onclick = onRedoClick;
+    }
+
+    const onDeleteRowClick = (e: MouseEvent) => {
+      const button = e.srcElement as HTMLButtonElement;
+      const viewIndex = parseInt(button.id, 10);
+      const rowItem = grid.actualDataSource.getItemAtIndex(viewIndex);
+
+      if (grid.editMode === EditModeType.CellBatch || grid.editMode === EditModeType.Row) {
+        grid.removeItem(rowItem);
+        commitButton.disabled = !grid.canCommit;
+        redoButton.disabled = !grid.canRedo;
+        undoButton.disabled = !grid.canUndo;
+      } else if (grid.editMode === EditModeType.Cell) {
+        // delete grid row immediately
+        grid.removeItem(rowItem);
+      }
+    };
+
+    const onDeleteCellUpdating = (s: IgcTemplateColumnComponent,
+      e: IgcTemplateCellUpdatingEventArgs) => {
       const content = e.content as HTMLDivElement;
       if (content.childElementCount === 0) {
         const button = document.createElement('button') as HTMLButtonElement;
@@ -143,22 +177,6 @@ export default class $(ClassName) extends HTMLElement {
       grid.editModeClickAction = event.target.value;
     };
 
-    const onDeleteRowClick = (e: MouseEvent) => {
-      const button = e.srcElement as HTMLButtonElement;
-      const viewIndex = parseInt(button.id);
-      const rowItem = grid.actualDataSource.getItemAtIndex(viewIndex);
-
-      if (grid.editMode === EditModeType.CellBatch || grid.editMode === EditModeType.Row) {
-        grid.removeItem(rowItem);
-        commitButton.disabled = !grid.canCommit;
-        redoButton.disabled = !grid.canRedo;
-        undoButton.disabled = !grid.canUndo;
-      } else if (grid.editMode === EditModeType.Cell) {
-        //delete grid row immediately
-        grid.removeItem(rowItem);
-      }
-    };
-
     const onCellValueChanging = (s: IgcDataGridComponent, e: IgcGridCellValueChangingEventArgs) => {
       if (s.editMode === EditModeType.CellBatch || grid.editMode === EditModeType.Row) {
         commitButton.disabled = !grid.canCommit;
@@ -170,9 +188,8 @@ export default class $(ClassName) extends HTMLElement {
         commitButton.disabled = true;
         s.setEditError(e.editID, 'Error, cell is empty');
       }
-  };
+    };
 
-    const grid = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('grid') as IgcDataGridComponent;
     if (grid !== null) {
       grid.dataSource = this.data;
       grid.activationMode = GridActivationMode.Cell;
@@ -181,32 +198,17 @@ export default class $(ClassName) extends HTMLElement {
       grid.cellValueChanging = onCellValueChanging;
     }
 
-    const dropDown = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('editModeDropBox');
+    const dropDown = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('editModeDropBox');
     if (dropDown !== null) {
       dropDown.onchange = editModeChanged;
     }
 
-    const dropDown2 = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('editModeClickActionDropBox');
+    const dropDown2 = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('editModeClickActionDropBox');
     if (dropDown2 !== null) {
       dropDown2.onchange = editModeClickActionChanged;
     }
 
-    let commitButton = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('commitClick') as HTMLButtonElement;
-    if (commitButton !== null) {
-      commitButton.onclick = onCommitClick;
-    }
-
-    let undoButton = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('undoClick') as HTMLButtonElement;
-    if (undoButton !== null) {
-      undoButton.onclick = onUndoClick;
-    }
-
-    let redoButton = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('redoClick') as HTMLButtonElement;
-    if (redoButton !== null) {
-      redoButton.onclick = onRedoClick;
-    }
-
-    const deleteRowColumn = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('deleteRowColumn') as IgcTemplateColumnComponent;
+    const deleteRowColumn = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('deleteRowColumn') as IgcTemplateColumnComponent;
     if (deleteRowColumn !== null) {
       deleteRowColumn.cellUpdating = onDeleteCellUpdating;
     }

package/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/DataGridSharedData.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 export class DataGridSharedData {
   public static getEmployees(count?: number): any[] {
     if (count === undefined) {
@@ -102,7 +103,7 @@ export class DataGridSharedData {
       const items = this.getRandomNumber(10, 80);
       const value = price * items;
       const margin = this.getRandomNumber(3, 10);
-      const profit = Math.round((price * margin / 100) * items);
+      const profit = Math.round((price * (margin / 100)) * items);
       const country = this.getRandomItem(countries);
       sales.push({
         BundlePrice: price,

package/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.component.test.ts

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path)';
+
+describe('IgcGridSummariesComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

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

@@ -1,3 +1,4 @@
+/* eslint-disable import/extensions, max-classes-per-file, class-methods-use-this */
 import {
   IgcDataGridModule,
   IgcGridColumnOptionsModule,
@@ -62,6 +63,8 @@ export default class $(ClassName) extends HTMLElement {
   }
 
   connectedCallback() {
+    const grid = document.getElementsByTagName('app-grid-summaries')[0].shadowRoot!.getElementById('grid') as IgcDataGridComponent;
+
     // Custom Calculator - calculates the count for all USA.
     class CustomDomestic extends SummaryCalculator {
       get displayName(): string {
@@ -81,13 +84,14 @@ export default class $(ClassName) extends HTMLElement {
 
       public aggregate(a: any): void {
         if (a.Countries === 'USA') {
-            this.usCountries += 1;
+          this.usCountries += 1;
         }
       }
     }
 
-    const onProvideCalculator = (s: IgcColumnSummaryDescription, e: IgcProvideCalculatorEventArgs) => {
-        e.calculator = new CustomDomestic();
+    const onProvideCalculator = (s: IgcColumnSummaryDescription,
+      e: IgcProvideCalculatorEventArgs) => {
+      e.calculator = new CustomDomestic();
     };
 
     const onLoad = () => {
@@ -175,7 +179,6 @@ export default class $(ClassName) extends HTMLElement {
       grid.summaryDescriptions.add(countries);
     };
 
-    const grid = document.getElementsByTagName('app-grid-summaries')[0].shadowRoot!.getElementById('grid') as IgcDataGridComponent;
     grid.dataSource = DataGridSharedData.getSales();
 
     onLoad();

package/templates/webcomponents/igc-ts/icon/default/files/src/app/__path__/__filePrefix__.component.test.ts

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path)';
+
+describe('IgcIconComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

package/templates/webcomponents/igc-ts/icon-button/default/files/src/app/__path__/__filePrefix__.component.test.ts

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path)';
+
+describe('IgcIconButtonComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

package/templates/webcomponents/igc-ts/input/default/files/src/app/__path__/__filePrefix__.component.test.ts

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path)';
+
+describe('IgcInputComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

package/templates/webcomponents/igc-ts/linear-gauge/default/files/src/app/__path__/__filePrefix__.component.test.ts

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path)';
+
+describe('IgcLinearGaugeComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

package/templates/webcomponents/igc-ts/list/default/files/src/app/__path__/__filePrefix__.component.test.ts

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path)';
+
+describe('IgcListComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

package/templates/webcomponents/igc-ts/navbar/default/files/src/app/__path__/__filePrefix__.component.test.ts

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path)';
+
+describe('IgcNavbarComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

package/templates/webcomponents/igc-ts/pie-chart/default/files/src/app/__path__/__filePrefix__.component.test.ts

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path)';
+
+describe('IgcPieChartComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

package/templates/webcomponents/igc-ts/projects/empty/files/index.html

@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8">
   <base href="/">
-  <link rel="stylesheet" href="./node_modules/igniteui-webcomponents/themes/bootstrap.css">
+  <link rel="stylesheet" href="./node_modules/igniteui-webcomponents/themes/light/bootstrap.css">
   <style>
     html, body {
       height: 100%;

package/templates/webcomponents/igc-ts/projects/empty/files/package.json

@@ -21,7 +21,7 @@
   "dependencies": {
     "@open-wc/testing": "^2.5.33",
     "@vaadin/router": "^1.7.4",
-    "igniteui-webcomponents": "1.0.0",
+    "igniteui-webcomponents": "2.0.0-beta.1",
     "igniteui-webcomponents-grids": "~1.4.1",
     "igniteui-webcomponents-core": "~1.4.1",
     "igniteui-webcomponents-layouts": "~1.4.1",
@@ -42,7 +42,7 @@
     "igniteui-cli": "$(cliVersion)",
     "eslint": "^7.32.0",
     "tslib": "^2.3.1",
-    "typescript": "^4.4.2",
+    "typescript": "^4.5.2",
     "@babel/cli": "^7.16.0",
     "@babel/core": "^7.16.0",
     "@babel/plugin-proposal-class-properties": "^7.16.0",

package/templates/webcomponents/igc-ts/projects/empty/files/src/app.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-return-assign */
 import {
   defineComponents,
   IgcNavDrawerComponent,
@@ -29,13 +30,13 @@ export class App extends HTMLElement {
       <igc-nav-drawer open=true>
         <igc-nav-drawer-header-item>Ignite UI CLI</igc-nav-drawer-header-item>
 
-        ${routes.filter((element, index) => index < routes.length - 1).map(i => this.innerHTML = `
+        ${routes.filter((element, index) => index < routes.length - 1).map(i => `
           <igc-nav-drawer-item>
             <span slot="content">
               <a style="text-decoration: none;" href="${i.path}">${i.name}<igc-ripple></igc-ripple></a>
             </span>
           </igc-nav-drawer-item>
-        `)}
+        `).join('')}
       </igc-nav-drawer>
     </div>
     `;

package/templates/webcomponents/igc-ts/projects/empty/files/src/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/extensions, quotes, no-tabs, indent, comma-dangle */
 import {
   Route,
   Router

package/templates/webcomponents/igc-ts/radial-gauge/default/files/src/app/__path__/__filePrefix__.component.test.ts

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path)';
+
+describe('IgcRadialGaugeComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

package/templates/webcomponents/igc-ts/radio-group/default/files/src/app/__path__/__filePrefix__.component.test.ts

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path)';
+
+describe('IgcRadioGroupComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

package/templates/webcomponents/igc-ts/ripple/default/files/src/app/__path__/__filePrefix__.component.test.ts

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path)';
+
+describe('IgcRippleComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

package/templates/webcomponents/igc-ts/slider/default/files/src/app/__path__/__filePrefix__.component.test.ts

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path)';
+
+describe('IgcSliderComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

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

@@ -0,0 +1,23 @@
+import {
+  defineComponents,
+  IgcSliderComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcSliderComponent);
+
+export default class $(ClassName) extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+    <igc-slider
+      style="margin: 40px 20px; width: 200px;"
+      min="0"
+      max="2"
+      primary-ticks="3"
+    >
+    Label
+  </igc-slider>
+    `;
+  }
+}
+
+customElements.define('app-$(path)', $(ClassName));

package/templates/webcomponents/igc-ts/slider/default/index.d.ts

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

package/templates/webcomponents/igc-ts/slider/default/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForWebComponentsTemplate_1 = require("../../../../../lib/templates/IgniteUIForWebComponentsTemplate");
+class IgcSliderComponent extends IgniteUIForWebComponentsTemplate_1.IgniteUIForWebComponentsTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Slider"];
+        this.controlGroup = "Interactions";
+        this.listInComponentTemplates = true;
+        this.id = "slider";
+        this.projectType = "igc-ts";
+        this.name = "Slider";
+        this.description = `Basic slider component`;
+    }
+    addClassDeclaration(mainModule, projPath, name, modulePath) {
+        // not applicable with custom module
+    }
+}
+module.exports = new IgcSliderComponent();

package/templates/webcomponents/igc-ts/slider/index.d.ts

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

package/templates/webcomponents/igc-ts/slider/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgcSliderComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Slider";
+        this.group = "Interactions";
+        this.description = `Basic slider component`;
+    }
+}
+module.exports = new IgcSliderComponent();

package/templates/webcomponents/igc-ts/switch/default/files/src/app/__path__/__filePrefix__.component.test.ts

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path)';
+
+describe('IgcSwitchComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});