fix(igc-ts): grid templates correct component use and deps

Author: damyanpetev

packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.test.ts

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

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

@@ -1,20 +1,28 @@
 import { html, css, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import {
-  IgcDataGridModule,
-  IgcGridColumnOptionsModule,
-  IgcDataGridComponent,
-  IgcColumnGroupDescription,
-} from 'igniteui-webcomponents-grids';
-import { ModuleManager } from 'igniteui-webcomponents-core';
+import { customElement, state } from 'lit/decorators.js';
+import { IgcGridComponent, IgcGroupingExpression, SortingDirection } from 'igniteui-webcomponents-grids';
 
-ModuleManager.register(
-  IgcDataGridModule,
-  IgcGridColumnOptionsModule,
-);
+import gridThemeLightMaterial from 'igniteui-webcomponents-grids/grids/themes/light/material.css?inline'
+
+IgcGridComponent.register();
 
 @customElement('app-$(path)')
 export default class $(ClassName) extends LitElement {
+  static styles = css`
+    :host {
+      height: 100%;
+      margin: 0px;
+      padding-right: 20px;
+      width: calc(100% - 600px);
+    }
+    igc-grid img {
+      object-fit: contain;
+      height: 100%;
+      width: 100%;
+    }
+  `;
+
+  @state()
   data: any[] = [{
     Country: 'USA',
     CountryFlag: 'https://static.infragistics.com/xplatform/images/flags/USA.png',
@@ -40,44 +48,29 @@ export default class $(ClassName) extends LitElement {
     Status: 'Packing',
   }];
 
-  static styles = css`
-    :host {
-      height: 100%;
-      margin: 0px;
-      padding-right: 20px;
-      width: calc(100% - 600px);
-    }
-  `;
+  @state()
+  groupingExpressions: IgcGroupingExpression[] = [
+    { fieldName: 'status', dir: SortingDirection.Desc },
+  ];
 
   render() {
     return html`
-      <igc-data-grid
-      id="grid"
-      height="100%"
-      width="100%"
-      auto-generate-columns="false"
-      is-column-options-enabled="true"
+      <style>${gridThemeLightMaterial}</style>
+      <igc-grid
+        class="ig-typography"
+        .data=${this.data}
+        .groupingExpressions=${this.groupingExpressions}
+        filter-mode="excelStyleFilter"
       >
-          <igc-text-column field="ProductID" header-text="ID" width="*>95"></igc-text-column>
-          <igc-text-column field="ProductName" header-text="Product" width="*>160"></igc-text-column>
-          <igc-image-column field="CountryFlag" header-text="Country" width="*>120" contentOpacity="1"
-          padding-top="5" padding-bottom="5"></igc-image-column>
-          <igc-numeric-column field="OrderItems" header-text="Orders" width="*>105"></igc-numeric-column>
-          <igc-numeric-column field="OrderValue" header-text="Order Value" width="*>140" positive-prefix="$" show-grouping-separator="true"></igc-numeric-column>
-          <igc-date-time-column field="OrderDate" header-text="Order Date" width="*>135" dateTimeFormat="DateShort" ></igc-date-time-column>
-          <igc-numeric-column field="Margin" header-text="Margin" width="*>115" positive-suffix="%"></igc-numeric-column>
-          <igc-text-column field="Status" header-text="Status" width="*>100"></igc-text-column>
-      </igc-data-grid>
+        <igc-column field="productID" header="ID" width="90px"></igc-column>
+        <igc-column field="productName" header="Product" width="160px"></igc-column>
+        <igc-column field="countryFlag" header="Country" data-type="image" width="100px"></igc-column>
+        <igc-column field="orderItems" header="Orders" data-type="number" width="100px"></igc-column>
+        <igc-column field="orderValue" header="Order Value" data-type="currency" width="140px"></igc-column>
+        <igc-column field="orderDate" header="Order Date" data-type="date"></igc-column>
+        <igc-column field="margin" header="Margin" data-type="percent" width="100px"></igc-column>
+        <igc-column field="status" header="Status" width="100px" groupable></igc-column>
+      </igc-grid>
     `;
   }
-
-  firstUpdated() {
-    const grid = this.shadowRoot?.getElementById('grid') as IgcDataGridComponent;
-    grid.dataSource = this.data;
-
-    const grouping = new IgcColumnGroupDescription();
-    grouping.field = 'Status';
-    grouping.displayName = 'Status';
-    grid.groupDescriptions.add(grouping);
-  }
 }

packages/cli/templates/webcomponents/igc-ts/grid/default/index.ts

@@ -10,12 +10,7 @@ class IgcGridTemplate extends IgniteUIForWebComponentsTemplate {
 		this.projectType = "igc-ts";
 		this.name = "Grid";
 		this.description = "IgcGrid with local data";
-		this.packages = [
-			"igniteui-webcomponents-core@~6.0.0",
-			"igniteui-webcomponents-grids@~6.0.0",
-			"igniteui-webcomponents-inputs@~6.0.0",
-			"igniteui-webcomponents-layouts@~6.0.0"
-		];
+		this.packages = [ "igniteui-webcomponents-grids@~6.0.0" ];
 	}
 }
 module.exports = new IgcGridTemplate();