igniteui-cli 12.0.0-beta.0 → 12.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-cli",
-  "version": "12.0.0-beta.0",
+  "version": "12.0.0",
   "description": "CLI tool for creating Ignite UI projects",
   "keywords": [
     "CLI",
@@ -72,8 +72,8 @@
     "all": true
   },
   "dependencies": {
-    "@igniteui/angular-templates": "~16.0.1200-beta.0",
-    "@igniteui/cli-core": "~12.0.0-beta.0",
+    "@igniteui/angular-templates": "~16.0.1200",
+    "@igniteui/cli-core": "~12.0.0",
     "chalk": "^2.3.2",
     "fs-extra": "^3.0.1",
     "glob": "^7.1.2",

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

@@ -101,6 +101,5 @@
         }
       }
     }
-  },
-  "defaultProject": "$(dash-name)"
+  }
 }

package/templates/angular/ig-ts/projects/empty/files/src/test.ts

@@ -21,7 +21,3 @@ getTestBed().initTestEnvironment(
   teardown: { destroyAfterEach: false }
 }
 );
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

package/templates/webcomponents/igc-ts/dock-manager/default/index.js

@@ -11,6 +11,7 @@ class IgcDockManagerTemplate extends IgniteUIForWebComponentsTemplate_1.IgniteUI
         this.projectType = "igc-ts";
         this.name = "Dock Manager";
         this.description = "Dock Manager with most functionalities and docking options";
+        this.packages = ["igniteui-dockmanager@~1.12.4"];
     }
     addClassDeclaration(mainModule, projPath, name, modulePath) {
         // not applicable with custom module

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

@@ -11,6 +11,10 @@ class IgcFinancialChartTemplate extends IgniteUIForWebComponentsTemplate_1.Ignit
         this.projectType = "igc-ts";
         this.name = "Financial Chart";
         this.description = "IgcFinancialChart";
+        this.packages = [
+            "igniteui-webcomponents-core@~4.2.5",
+            "igniteui-webcomponents-charts@~4.2.5"
+        ];
     }
     addClassDeclaration(mainModule, projPath, name, modulePath) {
         // not applicable with custom module

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

@@ -11,6 +11,12 @@ class IgcGridTemplate extends IgniteUIForWebComponentsTemplate_1.IgniteUIForWebC
         this.projectType = "igc-ts";
         this.name = "Grid";
         this.description = "IgcGrid with local data";
+        this.packages = [
+            "igniteui-webcomponents-core@~4.2.5",
+            "igniteui-webcomponents-grids@~4.2.5",
+            "igniteui-webcomponents-inputs@~4.2.5",
+            "igniteui-webcomponents-layouts@~4.2.5"
+        ];
     }
     addClassDeclaration(mainModule, projPath, name, modulePath) {
         // not applicable with custom module

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

@@ -3,7 +3,7 @@ import { customElement } from 'lit/decorators.js';
 import {
   EditModeType,
   GridActivationMode,
-  GridSelectionMode,
+  DataGridSelectionMode,
   IgcDataGridComponent,
   IgcDataGridModule,
   IgcGridCellValueChangingEventArgs,
@@ -193,7 +193,7 @@ export default class $(ClassName) extends LitElement {
     if (grid !== null) {
       grid.dataSource = this.data;
       grid.activationMode = GridActivationMode.Cell;
-      grid.selectionMode = GridSelectionMode.SingleCell;
+      grid.selectionMode = DataGridSelectionMode.SingleCell;
       grid.editMode = EditModeType.Cell;
       grid.cellValueChanging = onCellValueChanging;
     }

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

@@ -0,0 +1,545 @@
+/* eslint-disable no-param-reassign */
+export class NwindDataItem {
+    public constructor(init: Partial<NwindDataItem>) {
+        Object.assign(this, init);
+    }
+
+    ProductID: number = 0;
+    ProductName: string = "";
+    SupplierID: number = 0;
+    CategoryID: number = 0;
+    QuantityPerUnit: string = "";
+    UnitPrice: number = 0;
+    UnitsInStock: number = 0;
+    UnitsOnOrder: number = 0;
+    ReorderLevel: number = 0;
+    Discontinued: boolean = false;
+    OrderDate: string = "";
+    Rating: number = 0;
+    Locations: NwindDataItem_LocationsItem[] = [];
+
+}
+export class NwindDataItem_LocationsItem {
+    public constructor(init: Partial<NwindDataItem_LocationsItem>) {
+        Object.assign(this, init);
+    }
+
+    Shop: string = "";
+    LastInventory: string = "";
+
+}
+export class NwindData extends Array<NwindDataItem> {
+    public constructor() {
+        super();
+        this.push(new NwindDataItem(
+        {
+            ProductID: 1,
+            ProductName: `Chai`,
+            SupplierID: 1,
+            CategoryID: 1,
+            QuantityPerUnit: `10 boxes x 20 bags`,
+            UnitPrice: 18,
+            UnitsInStock: 39,
+            UnitsOnOrder: 30,
+            ReorderLevel: 10,
+            Discontinued: false,
+            OrderDate: `2012-02-12`,
+            Rating: 5,
+            Locations: [
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Fun-Tasty Co.`,
+                    LastInventory: `06/12/2018`
+                }),
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Farmer Market`,
+                    LastInventory: `04/04/2018`
+                })]
+
+        }));
+        this.push(new NwindDataItem(
+        {
+            ProductID: 2,
+            ProductName: `Chang`,
+            SupplierID: 1,
+            CategoryID: 1,
+            QuantityPerUnit: `24 - 12 oz bottles`,
+            UnitPrice: 19,
+            UnitsInStock: 17,
+            UnitsOnOrder: 40,
+            ReorderLevel: 25,
+            Discontinued: true,
+            OrderDate: `2003-03-17`,
+            Rating: 5,
+            Locations: [
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Super Market`,
+                    LastInventory: `09/09/2018`
+                })]
+
+        }));
+        this.push(new NwindDataItem(
+        {
+            ProductID: 3,
+            ProductName: `Aniseed Syrup`,
+            SupplierID: 1,
+            CategoryID: 2,
+            QuantityPerUnit: `12 - 550 ml bottles`,
+            UnitPrice: 10,
+            UnitsInStock: 13,
+            UnitsOnOrder: 70,
+            ReorderLevel: 25,
+            Discontinued: false,
+            OrderDate: `2006-03-17`,
+            Rating: 3,
+            Locations: [
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Farmer Market`,
+                    LastInventory: `04/04/2018`
+                }),
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Street Market`,
+                    LastInventory: `12/12/2018`
+                }),
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `24/7 Market`,
+                    LastInventory: `11/11/2018`
+                })]
+
+        }));
+        this.push(new NwindDataItem(
+        {
+            ProductID: 4,
+            ProductName: `Chef Antons Cajun Seasoning`,
+            SupplierID: 2,
+            CategoryID: 2,
+            QuantityPerUnit: `48 - 6 oz jars`,
+            UnitPrice: 22,
+            UnitsInStock: 53,
+            UnitsOnOrder: 30,
+            ReorderLevel: 0,
+            Discontinued: false,
+            OrderDate: `2016-03-17`,
+            Rating: 3,
+            Locations: [
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Fun-Tasty Co.`,
+                    LastInventory: `06/12/2018`
+                }),
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Farmer Market`,
+                    LastInventory: `04/04/2018`
+                }),
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Street Market`,
+                    LastInventory: `12/12/2018`
+                })]
+
+        }));
+        this.push(new NwindDataItem(
+        {
+            ProductID: 5,
+            ProductName: `Chef Antons Gumbo Mix`,
+            SupplierID: 2,
+            CategoryID: 2,
+            QuantityPerUnit: `36 boxes`,
+            UnitPrice: 21.35,
+            UnitsInStock: 0,
+            UnitsOnOrder: 30,
+            ReorderLevel: 0,
+            Discontinued: true,
+            OrderDate: `2011-11-11`,
+            Rating: 5,
+            Locations: [
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Super Market`,
+                    LastInventory: `09/09/2018`
+                })]
+
+        }));
+        this.push(new NwindDataItem(
+        {
+            ProductID: 6,
+            ProductName: `Grandmas Boysenberry Spread`,
+            SupplierID: 3,
+            CategoryID: 2,
+            QuantityPerUnit: `12 - 8 oz jars`,
+            UnitPrice: 25,
+            UnitsInStock: 0,
+            UnitsOnOrder: 30,
+            ReorderLevel: 25,
+            Discontinued: false,
+            OrderDate: `2017-12-17`,
+            Rating: 4,
+            Locations: [
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Super Market`,
+                    LastInventory: `09/09/2018`
+                })]
+
+        }));
+        this.push(new NwindDataItem(
+        {
+            ProductID: 7,
+            ProductName: `Uncle Bobs Organic Dried Pears`,
+            SupplierID: 3,
+            CategoryID: 7,
+            QuantityPerUnit: `12 - 1 lb pkgs.`,
+            UnitPrice: 30,
+            UnitsInStock: 150,
+            UnitsOnOrder: 30,
+            ReorderLevel: 10,
+            Discontinued: false,
+            OrderDate: `2016-07-17`,
+            Rating: 5,
+            Locations: [
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Fun-Tasty Co.`,
+                    LastInventory: `06/12/2018`
+                }),
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Farmer Market`,
+                    LastInventory: `04/04/2018`
+                }),
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Street Market`,
+                    LastInventory: `12/12/2018`
+                })]
+
+        }));
+        this.push(new NwindDataItem(
+        {
+            ProductID: 8,
+            ProductName: `Northwoods Cranberry Sauce`,
+            SupplierID: 3,
+            CategoryID: 2,
+            QuantityPerUnit: `12 - 12 oz jars`,
+            UnitPrice: 40,
+            UnitsInStock: 6,
+            UnitsOnOrder: 30,
+            ReorderLevel: 0,
+            Discontinued: false,
+            OrderDate: `2018-01-17`,
+            Rating: 4,
+            Locations: [
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Fun-Tasty Co.`,
+                    LastInventory: `06/12/2018`
+                }),
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Farmer Market`,
+                    LastInventory: `04/04/2018`
+                })]
+
+        }));
+        this.push(new NwindDataItem(
+        {
+            ProductID: 9,
+            ProductName: `Mishi Kobe Niku`,
+            SupplierID: 4,
+            CategoryID: 6,
+            QuantityPerUnit: `18 - 500 g pkgs.`,
+            UnitPrice: 97,
+            UnitsInStock: 29,
+            UnitsOnOrder: 30,
+            ReorderLevel: 0,
+            Discontinued: true,
+            OrderDate: `2010-02-17`,
+            Rating: 4,
+            Locations: [
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Farmer Market`,
+                    LastInventory: `04/04/2018`
+                })]
+
+        }));
+        this.push(new NwindDataItem(
+        {
+            ProductID: 10,
+            ProductName: `Ikura`,
+            SupplierID: 4,
+            CategoryID: 8,
+            QuantityPerUnit: `12 - 200 ml jars`,
+            UnitPrice: 31,
+            UnitsInStock: 31,
+            UnitsOnOrder: 30,
+            ReorderLevel: 0,
+            Discontinued: false,
+            OrderDate: `2008-05-17`,
+            Rating: 3,
+            Locations: [
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Wall Market`,
+                    LastInventory: `12/06/2018`
+                })]
+
+        }));
+        this.push(new NwindDataItem(
+        {
+            ProductID: 11,
+            ProductName: `Queso Cabrales`,
+            SupplierID: 5,
+            CategoryID: 4,
+            QuantityPerUnit: `1 kg pkg.`,
+            UnitPrice: 21,
+            UnitsInStock: 22,
+            UnitsOnOrder: 30,
+            ReorderLevel: 30,
+            Discontinued: false,
+            OrderDate: `2009-01-17`,
+            Rating: 5,
+            Locations: [
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Fun-Tasty Co.`,
+                    LastInventory: `06/12/2018`
+                }),
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Farmer Market`,
+                    LastInventory: `04/04/2018`
+                })]
+
+        }));
+        this.push(new NwindDataItem(
+        {
+            ProductID: 12,
+            ProductName: `Queso Manchego La Pastora`,
+            SupplierID: 5,
+            CategoryID: 4,
+            QuantityPerUnit: `10 - 500 g pkgs.`,
+            UnitPrice: 38,
+            UnitsInStock: 86,
+            UnitsOnOrder: 30,
+            ReorderLevel: 0,
+            Discontinued: false,
+            OrderDate: `2015-11-17`,
+            Rating: 3,
+            Locations: [
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Farmer Market`,
+                    LastInventory: `04/04/2018`
+                })]
+
+        }));
+        this.push(new NwindDataItem(
+        {
+            ProductID: 13,
+            ProductName: `Konbu`,
+            SupplierID: 6,
+            CategoryID: 8,
+            QuantityPerUnit: `2 kg box`,
+            UnitPrice: 6,
+            UnitsInStock: 24,
+            UnitsOnOrder: 30,
+            ReorderLevel: 5,
+            Discontinued: false,
+            OrderDate: `2015-03-17`,
+            Rating: 2,
+            Locations: [
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Super Market`,
+                    LastInventory: `09/09/2018`
+                })]
+
+        }));
+        this.push(new NwindDataItem(
+        {
+            ProductID: 14,
+            ProductName: `Tofu`,
+            SupplierID: 6,
+            CategoryID: 7,
+            QuantityPerUnit: `40 - 100 g pkgs.`,
+            UnitPrice: 23.25,
+            UnitsInStock: 35,
+            UnitsOnOrder: 30,
+            ReorderLevel: 0,
+            Discontinued: false,
+            OrderDate: `2017-06-17`,
+            Rating: 4,
+            Locations: [
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Farmer Market`,
+                    LastInventory: `04/04/2018`
+                }),
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Street Market`,
+                    LastInventory: `12/12/2018`
+                })]
+
+        }));
+        this.push(new NwindDataItem(
+        {
+            ProductID: 15,
+            ProductName: `Genen Shouyu`,
+            SupplierID: 6,
+            CategoryID: 2,
+            QuantityPerUnit: `24 - 250 ml bottles`,
+            UnitPrice: 15.5,
+            UnitsInStock: 39,
+            UnitsOnOrder: 30,
+            ReorderLevel: 5,
+            Discontinued: false,
+            OrderDate: `2014-03-17`,
+            Rating: 4,
+            Locations: [
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Local Market`,
+                    LastInventory: `07/03/2018`
+                }),
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Wall Market`,
+                    LastInventory: `12/06/2018`
+                })]
+
+        }));
+        this.push(new NwindDataItem(
+        {
+            ProductID: 16,
+            ProductName: `Pavlova`,
+            SupplierID: 7,
+            CategoryID: 3,
+            QuantityPerUnit: `32 - 500 g boxes`,
+            UnitPrice: 17.45,
+            UnitsInStock: 29,
+            UnitsOnOrder: 30,
+            ReorderLevel: 10,
+            Discontinued: false,
+            OrderDate: `2018-03-28`,
+            Rating: 2,
+            Locations: [
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Farmer Market`,
+                    LastInventory: `04/04/2018`
+                }),
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Street Market`,
+                    LastInventory: `12/12/2018`
+                }),
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `24/7 Market`,
+                    LastInventory: `11/11/2018`
+                })]
+
+        }));
+        this.push(new NwindDataItem(
+        {
+            ProductID: 17,
+            ProductName: `Alice Mutton`,
+            SupplierID: 7,
+            CategoryID: 6,
+            QuantityPerUnit: `20 - 1 kg tins`,
+            UnitPrice: 39,
+            UnitsInStock: 0,
+            UnitsOnOrder: 30,
+            ReorderLevel: 0,
+            Discontinued: true,
+            OrderDate: `2015-08-17`,
+            Rating: 2,
+            Locations: [
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Farmer Market`,
+                    LastInventory: `04/04/2018`
+                })]
+
+        }));
+        this.push(new NwindDataItem(
+        {
+            ProductID: 18,
+            ProductName: `Carnarvon Tigers`,
+            SupplierID: 7,
+            CategoryID: 8,
+            QuantityPerUnit: `16 kg pkg.`,
+            UnitPrice: 62.5,
+            UnitsInStock: 42,
+            UnitsOnOrder: 30,
+            ReorderLevel: 0,
+            Discontinued: false,
+            OrderDate: `2005-09-27`,
+            Rating: 2,
+            Locations: [
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `24/7 Market`,
+                    LastInventory: `11/11/2018`
+                }),
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Super Market`,
+                    LastInventory: `09/09/2018`
+                })]
+
+        }));
+        this.push(new NwindDataItem(
+        {
+            ProductID: 19,
+            ProductName: `Teatime Chocolate Biscuits`,
+            SupplierID: 8,
+            CategoryID: 3,
+            QuantityPerUnit: ``,
+            UnitPrice: 9.2,
+            UnitsInStock: 25,
+            UnitsOnOrder: 30,
+            ReorderLevel: 5,
+            Discontinued: false,
+            OrderDate: `2001-03-17`,
+            Rating: 2,
+            Locations: [
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Local Market`,
+                    LastInventory: `07/03/2018`
+                })]
+
+        }));
+        this.push(new NwindDataItem(
+        {
+            ProductID: 20,
+            ProductName: `Sir Rodneys Marmalade`,
+            SupplierID: 8,
+            CategoryID: 3,
+            QuantityPerUnit: `4 - 100 ml jars`,
+            UnitPrice: 4.5,
+            UnitsInStock: 40,
+            UnitsOnOrder: 30,
+            ReorderLevel: 0,
+            Discontinued: false,
+            OrderDate: `2005-03-17`,
+            Rating: 5,
+            Locations: [
+                new NwindDataItem_LocationsItem(
+                {
+                    Shop: `Super Market`,
+                    LastInventory: `09/09/2018`
+                })]
+
+        }));
+    }
+}

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

@@ -1,26 +1,20 @@
 import { css, html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import 'igniteui-webcomponents-grids/grids/combined';
 import {
-  IgcDataGridComponent,
-  IgcDataGridModule,
-  IgcColumnGroupDescription,
-  IgcColumnSummaryDescription,
-  IgcGridColumnOptionsModule
-} from 'igniteui-webcomponents-grids';
+  IgcGridComponent,
+  IgcColumnComponent,
+} from 'igniteui-webcomponents-grids/grids';
 import {
-  ModuleManager, IgcProvideCalculatorEventArgs, SummaryOperand, SummaryCalculator,
-  DefaultSummaryResult, IDataSource, ISummaryResult,
+  ComponentRenderer,
+  WebGridDescriptionModule,
 } from 'igniteui-webcomponents-core';
-import { DataGridSharedData } from './DataGridSharedData';
-
-ModuleManager.register(
-  IgcDataGridModule,
-  IgcGridColumnOptionsModule,
-);
+import {
+  NwindData,
+} from './NwindData';
 
 @customElement('app-$(path)')
 export default class $(ClassName) extends LitElement {
-  data: any[] = DataGridSharedData.getEmployees();
 
   static styles = css`
     :host {
@@ -33,151 +27,41 @@ export default class $(ClassName) extends LitElement {
 
   render() {
     return html`
+    <link rel="stylesheet" href="./node_modules/igniteui-webcomponents-grids/grids/themes/light/bootstrap.css">
     <div class="container sample">
-      <igc-data-grid
-        id="grid"
-        height="calc(100% - 3rem)"
-        width="100%"
-        summary-scope="Root"
-        group-summary-display-mode="RowTop"
-        auto-generate-columns="false"
-        is-group-collapsable="true"
-        group-header-display-mode="combined"
-        is-column-options-enabled="true"
-        default-column-min-width="100"
-      >
-      <igc-numeric-column field="ProductID" header-text="ID" horizontal-alignment="center" ></igc-numeric-column>
-      <igc-text-column field="ProductName" header-text="Product" width="*>160"></igc-text-column>
-      <igc-numeric-column positive-prefix="$" field="BundlePrice" show-grouping-separator="true" header-text="Price" ></igc-numeric-column>
-      <igc-numeric-column field="OrderItems" header-text="Order Items" width="*>135"></igc-numeric-column>
-      <igc-numeric-column field="OrderValue" show-grouping-separator="true" header-text="Order Totals" positive-prefix="$" width="*>195"></igc-numeric-column>
-      <igc-date-time-column field="OrderDate" header-text="Order Date" horizontal-alignment="right" width="*>180"></igc-date-time-column>
-      <igc-numeric-column field="Profit" show-grouping-separator="true" header-text="Profit" positive-prefix="$" width="*>165"></igc-numeric-column>
-      <igc-text-column field="Countries" header-text="Country" width="*>115"></igc-text-column>
-      </igc-data-grid>
+      <div class="container fill">
+        <igc-grid auto-generate="false" name="grid" id="grid" primary-key="ProductID">
+          <igc-column name="ProductID" id="ProductID" field="ProductID"></igc-column>
+          <igc-column name="ProductName" id="ProductName" field="ProductName" header="Product Name" has-summary="true"></igc-column>
+          <igc-column name="UnitPrice" id="UnitPrice" field="UnitPrice" header="Unit Price" has-summary="true"></igc-column>
+          <igc-column name="UnitsInStock" id="UnitsInStock" field="UnitsInStock" header="Units In Stock" has-summary="true" data-type="number"></igc-column>
+          <igc-column name="Discontinued" id="Discontinued" field="Discontinued" header="Discontinued"></igc-column>
+          <igc-column name="OrderDate" id="OrderDate" field="OrderDate" header="Order Date" has-summary="true" data-type="date"></igc-column>
+        </igc-grid>
     </div>
+  </div>
   `;
   }
 
   firstUpdated() {
-    const grid = this.shadowRoot?.getElementById('grid') as IgcDataGridComponent;
-
-    // Custom Calculator - calculates the count for all USA.
-    class CustomDomestic extends SummaryCalculator {
-      get displayName(): string {
-        return 'USA';
-      }
-
-      public usCountries: number = 0;
-
-      public beginCalculation(a: IDataSource, b: string): void {
-        super.beginCalculation(a, b);
-        this.usCountries = 0;
-      }
-
-      public endCalculation(): ISummaryResult {
-        return new DefaultSummaryResult(this.propertyName, SummaryOperand.Custom, this.usCountries);
-      }
-
-      public aggregate(a: any): void {
-        if (a.Countries === 'USA') {
-          this.usCountries += 1;
-        }
-      }
+    const grid = this.shadowRoot?.getElementById('grid') as IgcGridComponent;
+    const nwindData = NwindData;
+
+    const productID = this.shadowRoot?.getElementById('ProductID') as IgcColumnComponent;
+    const productName = this.shadowRoot?.getElementById('ProductName') as IgcColumnComponent;
+    const unitPrice = this.shadowRoot?.getElementById('UnitPrice') as IgcColumnComponent;
+    const unitsInStock = this.shadowRoot?.getElementById('UnitsInStock') as IgcColumnComponent;
+    const discontinued = this.shadowRoot?.getElementById('Discontinued') as IgcColumnComponent;
+    const orderDate = this.shadowRoot?.getElementById('OrderDate') as IgcColumnComponent;
+
+    grid.data = new nwindData();
+
+    const _componentRenderer = new ComponentRenderer();
+    const renderer = (_componentRenderer: ComponentRenderer) => {
+        const context = _componentRenderer.context;
+        WebGridDescriptionModule.register(context);
+        return _componentRenderer;
     }
-
-    const onProvideCalculator = (s: IgcColumnSummaryDescription,
-      e: IgcProvideCalculatorEventArgs) => {
-      e.calculator = new CustomDomestic();
-    };
-
-    const onLoad = () => {
-      const productGroup = new IgcColumnGroupDescription();
-      productGroup.field = 'ProductName';
-      productGroup.displayName = 'ProductName';
-      grid.groupDescriptions.add(productGroup);
-
-      const productCount = new IgcColumnSummaryDescription();
-      productCount.field = 'ProductName';
-      productCount.operand = SummaryOperand.Count;
-      grid.summaryDescriptions.add(productCount);
-
-      const priceMin = new IgcColumnSummaryDescription();
-      priceMin.field = 'BundlePrice';
-      priceMin.operand = SummaryOperand.Min;
-      priceMin.formatOverride = new Intl.NumberFormat('en-EN', {
-        style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0,
-      });
-      grid.summaryDescriptions.add(priceMin);
-
-      const priceMax = new IgcColumnSummaryDescription();
-      priceMax.field = 'BundlePrice';
-      priceMax.operand = SummaryOperand.Max;
-      priceMax.formatOverride = new Intl.NumberFormat('en-EN', {
-        style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0,
-      });
-      grid.summaryDescriptions.add(priceMax);
-
-      const orderSum = new IgcColumnSummaryDescription();
-      orderSum.field = 'OrderItems';
-      orderSum.operand = SummaryOperand.Sum;
-      grid.summaryDescriptions.add(orderSum);
-
-      const orderValueSum = new IgcColumnSummaryDescription();
-      orderValueSum.field = 'OrderValue';
-      orderValueSum.operand = SummaryOperand.Sum;
-      orderValueSum.formatOverride = new Intl.NumberFormat('en-EN', {
-        style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0,
-      });
-      grid.summaryDescriptions.add(orderValueSum);
-
-      const orderValueAvg = new IgcColumnSummaryDescription();
-      orderValueAvg.field = 'OrderValue';
-      orderValueAvg.operand = SummaryOperand.Average;
-      orderValueAvg.formatOverride = new Intl.NumberFormat('en-EN', {
-        style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0,
-      });
-      grid.summaryDescriptions.add(orderValueAvg);
-
-      const orderDateMin = new IgcColumnSummaryDescription();
-      orderDateMin.field = 'OrderDate';
-      orderDateMin.operand = SummaryOperand.Min;
-      orderDateMin.calculatorDisplayName = 'First';
-      orderDateMin.formatOverride = new Intl.DateTimeFormat('en-EN');
-      grid.summaryDescriptions.add(orderDateMin);
-
-      const orderDateMax = new IgcColumnSummaryDescription();
-      orderDateMax.field = 'OrderDate';
-      orderDateMax.operand = SummaryOperand.Max;
-      orderDateMax.calculatorDisplayName = 'Last';
-      orderDateMax.formatOverride = new Intl.DateTimeFormat('en-EN');
-      grid.summaryDescriptions.add(orderDateMax);
-
-      const sum1 = new IgcColumnSummaryDescription();
-      sum1.field = 'Profit';
-      sum1.operand = SummaryOperand.Sum;
-      sum1.formatOverride = new Intl.NumberFormat('en-EN', {
-        style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0,
-      });
-      grid.summaryDescriptions.add(sum1);
-
-      const avg2 = new IgcColumnSummaryDescription();
-      avg2.field = 'Profit';
-      avg2.operand = SummaryOperand.Average;
-      avg2.formatOverride = new Intl.NumberFormat('en-EN', {
-        style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0,
-      });
-      grid.summaryDescriptions.add(avg2);
-
-      const countries = new IgcColumnSummaryDescription();
-      countries.field = 'Countries';
-      countries.operand = SummaryOperand.Custom;
-      countries.provideCalculator = onProvideCalculator;
-      grid.summaryDescriptions.add(countries);
-    };
-
-    grid.dataSource = DataGridSharedData.getSales();
-
-    onLoad();
+    renderer(_componentRenderer);
   }
 }

package/templates/webcomponents/igc-ts/linear-gauge/default/index.js

@@ -11,6 +11,10 @@ class IgcLinearGaugeTemplate extends IgniteUIForWebComponentsTemplate_1.IgniteUI
         this.projectType = "igc-ts";
         this.name = "Linear Gauge";
         this.description = "IgcLinearGauge";
+        this.packages = [
+            "igniteui-webcomponents-core@~4.2.5",
+            "igniteui-webcomponents-gauges@~4.2.5"
+        ];
     }
     addClassDeclaration(mainModule, projPath, name, modulePath) {
         // not applicable with custom module

package/templates/webcomponents/igc-ts/linear-progress/default/index.js

@@ -11,6 +11,10 @@ class IgcLinearProgressComponent extends IgniteUIForWebComponentsTemplate_1.Igni
         this.projectType = "igc-ts";
         this.name = "Linear Progress";
         this.description = "Basic Linear Progress";
+        this.packages = [
+            "igniteui-webcomponents-core@~4.2.5",
+            "igniteui-webcomponents-charts@~4.2.5"
+        ];
     }
     addClassDeclaration(mainModule, projPath, name, modulePath) {
         // not applicable with custom module

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

@@ -11,6 +11,10 @@ class IgcPieChartTemplate extends IgniteUIForWebComponentsTemplate_1.IgniteUIFor
         this.projectType = "igc-ts";
         this.name = "Pie Chart";
         this.description = "IgcPieChart with local data";
+        this.packages = [
+            "igniteui-webcomponents-core@~4.2.5",
+            "igniteui-webcomponents-charts@~4.2.5"
+        ];
     }
     addClassDeclaration(mainModule, projPath, name, modulePath) {
         // not applicable with custom module

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

@@ -22,7 +22,8 @@
   "dependencies": {
     "@vaadin/router": "^1.7.4",
     "lit": "^2.6.1",
-    "typescript": "^4.9.4"
+    "typescript": "^4.9.4",
+    "igniteui-webcomponents": "4.2.0"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.20.2",

package/templates/webcomponents/igc-ts/projects/_base/files/rollup.config.mjs

@@ -16,6 +16,10 @@ export default {
     format: 'es',
     dir: 'dist',
   },
+  onwarn: function(warning) {
+    // Skip https://rollupjs.org/troubleshooting/#error-this-is-undefined
+    if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
+  },
   preserveEntrySignatures: false,
 
   plugins: [
@@ -38,6 +42,7 @@ export default {
     importMetaAssets(),
     /** Compile JS to a lower language target */
     babel({
+      compact: true,
       babelHelpers: 'bundled',
       presets: [
         [

package/templates/webcomponents/igc-ts/radial-gauge/default/index.js

@@ -11,6 +11,10 @@ class IgcradialGaugeTemplate extends IgniteUIForWebComponentsTemplate_1.IgniteUI
         this.projectType = "igc-ts";
         this.name = "Radial Gauge";
         this.description = "IgcRadialGauge";
+        this.packages = [
+            "igniteui-webcomponents-core@~4.2.5",
+            "igniteui-webcomponents-gauges@~4.2.5"
+        ];
     }
     addClassDeclaration(mainModule, projPath, name, modulePath) {
         // not applicable with custom module

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

@@ -11,6 +11,12 @@ class IgcTreeTemplate extends IgniteUIForWebComponentsTemplate_1.IgniteUIForWebC
         this.projectType = "igc-ts";
         this.name = "Tree";
         this.description = "basic IgcTree";
+        this.packages = [
+            "igniteui-webcomponents-core@~4.2.5",
+            "igniteui-webcomponents-grids@~4.2.5",
+            "igniteui-webcomponents-inputs@~4.2.5",
+            "igniteui-webcomponents-layouts@~4.2.5"
+        ];
     }
     addClassDeclaration(mainModule, projPath, name, modulePath) {
         // not applicable with custom module

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

@@ -1,297 +0,0 @@
-/* eslint-disable no-param-reassign */
-export class DataGridSharedData {
-  public static getEmployees(count?: number): any[] {
-    if (count === undefined) {
-      count = 250;
-    }
-
-    const employees: any[] = [];
-    let maleCount: number = 0;
-    let femaleCount: number = 0;
-    for (let i = 0; i < count; i += 1) {
-      const age: number = Math.round(this.getRandomNumber(20, 40));
-      const gender: string = this.getRandomGender();
-      const firstName: string = this.getRandomNameFirst(gender);
-      const lastName: string = this.getRandomNameLast();
-      const street: string = this.getRandomStreet();
-      const country: string = this.getRandomItem(this.countries);
-      const city: string = this.getRandomCity(country);
-      const generation = `${Math.floor(age / 10) * 10}s`;
-      const email: string = `${firstName.toLowerCase()}@${this.getRandomItem(this.emails)}`;
-      const website: string = `${firstName.toLowerCase()}-${this.getRandomItem(this.websites)}`;
-      let photoPath: any;
-
-      if (gender === 'male') {
-        maleCount += 1;
-        if (maleCount > 26) {
-          maleCount = 1;
-        }
-        photoPath = this.getPhotoMale(maleCount);
-      } else {
-        femaleCount += 1;
-        if (femaleCount > 24) {
-          femaleCount = 1;
-        }
-        photoPath = this.getPhotoFemale(femaleCount);
-      }
-
-      const person: any = {};
-      person.Address = `${street},${city}`;
-      person.Age = age;
-      person.Birthday = this.getBirthday(age);
-      person.City = city;
-      person.Country = country;
-      person.CountryFlag = this.getCountryFlag(country);
-      person.Email = email;
-      person.FirstName = firstName;
-      person.Gender = this.getGenderPhoto(gender);
-      person.Generation = generation;
-      person.ID = this.pad(i + 1, 5);
-      person.LastName = lastName;
-      person.Name = `${firstName} ${lastName}`;
-      person.Phone = this.getRandomPhone();
-      person.Photo = photoPath;
-      person.Street = street;
-      person.Salary = this.getRandomNumber(40, 200) * 1000;
-      person.Sales = this.getRandomNumber(200, 980) * 1000;
-      person.Website = website;
-      person.Productivity = this.getProductivity();
-
-      if (person.Salary < 50000) {
-        person.Income = 'Low';
-      } else if (person.Salary < 100000) {
-        person.Income = 'Average';
-      } else {
-        person.Income = 'High';
-      }
-
-      employees.push(person);
-    }
-    return employees;
-  }
-
-  public static getProductivity(weekCount?: number): any[] {
-    if (weekCount === undefined) {
-      weekCount = 52;
-    }
-    const productivity: any[] = [];
-    for (let w = 0; w < weekCount; w += 1) {
-      const value = this.getRandomNumber(-50, 50);
-      productivity.push({ Value: value, Week: w });
-    }
-    return productivity;
-  }
-
-  public static getSales(count?: number): any[] {
-    if (count === undefined) {
-      count = 250;
-    }
-
-    const names: string[] = [
-      'Intel CPU', 'AMD CPU',
-      'NVIDIA GPU', 'GIGABYTE GPU', 'Asus GPU', 'AMD GPU', 'MSI GPU',
-      'Corsair Memory', 'Patriot Memory', 'Skill Memory',
-      'Samsung HDD', 'WD HDD', 'Seagate HDD', 'Intel HDD',
-      'Samsung SSD', 'WD SSD', 'Seagate SSD', 'Intel SSD',
-      'Samsung Monitor', 'Asus Monitor', 'LG Monitor', 'HP Monitor'];
-    const countries: string[] = ['USA', 'UK', 'France', 'Canada', 'Poland', 'Japan', 'Germany'];
-    const status: string[] = ['Packing', 'Shipped', 'Delivered'];
-    const sales: any[] = [];
-
-    for (let i = 0; i < count; i += 1) {
-      const price = this.getRandomNumber(100, 900);
-      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 country = this.getRandomItem(countries);
-      sales.push({
-        BundlePrice: price,
-        ProductPrice: price,
-        Margin: margin,
-        OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()),
-        OrderItems: items,
-        OrderValue: value, //  Math.round(value / 1000) + ',' + Math.round(value % 1000),
-        ProductID: 1001 + i,
-        ProductName: this.getRandomItem(names),
-        Profit: profit,
-        Countries: country,
-        CountryFlag: this.getCountryFlag(country),
-        Status: this.getRandomItem(status),
-      });
-    }
-    return sales;
-  }
-
-  public static getHouses(count?: number): any[] {
-    if (count === undefined) {
-      count = 250;
-    }
-
-    const houses: any[] = [];
-    const property: string[] = ['Townhouse', 'Single', 'Condo', 'Villa'];
-    const emails: string[] = ['estates.com', 'remax.com', 'zillow.com', 'realtor.com', 'coldwell.com'];
-    const countries: string[] = ['USA', 'UK', 'France', 'Canada', 'Poland', 'Japan', 'Germany'];
-
-    for (let i = 0; i < count; i += 1) {
-      const year: number = this.getRandomNumber(1950, 2015);
-      const age: number = 2020 - year;
-
-      const gender: string = this.getRandomGender();
-      const firstName: string = this.getRandomNameFirst(gender);
-      const lastName: string = this.getRandomNameLast();
-      const initials = firstName.substr(0, 1).toLowerCase();
-      const email: string = `${initials + lastName.toLowerCase()}@${this.getRandomItem(emails)}`;
-
-      const street: string = this.getRandomStreet();
-      const country: string = this.getRandomItem(countries);
-      const city: string = this.getRandomCity(country);
-
-      houses.push({
-        Address: `${street},${city}`,
-        Age: age,
-        Agent: `${firstName} ${lastName}`,
-        Area: this.getRandomNumber(50, 300),
-        Baths: this.getRandomNumber(1, 3),
-        Built: year,
-        City: city,
-        Country: country,
-        CountryFlag: this.getCountryFlag(country),
-        Email: email,
-        ID: this.pad(i + 1, 5),
-        Phone: this.getRandomPhone(),
-        Price: this.getRandomNumber(210, 900) * 1000,
-        Property: this.getRandomItem(property),
-        Rooms: this.getRandomNumber(2, 5),
-        SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()),
-        Street: street,
-      });
-    }
-    return houses;
-  }
-
-  private static websites: string[] = ['.com', '.gov', '.edu', '.org'];
-
-  private static emails: string[] = ['gmail.com', 'yahoo.com', 'twitter.com'];
-
-  private static genders: string[] = ['male', 'female'];
-
-  private static maleNames: string[] = ['Kyle', 'Oscar', 'Ralph', 'Mike', 'Bill', 'Frank', 'Howard', 'Jack', 'Larry', 'Pete', 'Steve', 'Vince', 'Mark', 'Alex', 'Max', 'Brian', 'Chris', 'Andrew', 'Martin', 'Mike', 'Steve', 'Glenn', 'Bruce'];
-
-  private static femaleNames: string[] = ['Gina', 'Irene', 'Katie', 'Brenda', 'Casey', 'Fiona', 'Holly', 'Kate', 'Liz', 'Pamela', 'Nelly', 'Marisa', 'Monica', 'Anna', 'Jessica', 'Sofia', 'Isabella', 'Margo', 'Jane', 'Audrey', 'Sally', 'Melanie', 'Greta', 'Aurora', 'Sally'];
-
-  private static lastNames: string[] = ['Adams', 'Crowley', 'Ellis', 'Martinez', 'Irvine', 'Maxwell', 'Clark', 'Owens', 'Rooney', 'Lincoln', 'Thomas', 'Spacey', 'MOrgan', 'King', 'Newton', 'Fitzgerald', 'Holmes', 'Jefferson', 'Landry', 'Berry', 'Perez', 'Spencer', 'Starr', 'Carter', 'Edwards', 'Stark', 'Johnson', 'Fitz', 'Chief', 'Blanc', 'Perry', 'Stone', 'Williams', 'Lane', 'Jobs', 'Adams', 'Power', 'Tesla'];
-
-  private static countries: string[] = ['USA', 'UK', 'France', 'Canada', 'Poland'];
-
-  private static citiesUS: string[] = ['New York', 'Los Angeles', 'Miami', 'San Francisco', 'San Diego', 'Las Vegas'];
-
-  private static citiesUK: string[] = ['London', 'Liverpool', 'Manchester'];
-
-  private static citiesFR: string[] = ['Paris', 'Marseille', 'Lyon'];
-
-  private static citiesCA: string[] = ['Toronto', 'Vancouver', 'Montreal'];
-
-  private static citiesPL: string[] = ['Krakow', 'Warsaw', 'Wroclaw', 'Gdansk'];
-
-  private static citiesJP: string[] = ['Tokyo', 'Osaka', 'Kyoto', 'Yokohama'];
-
-  private static citiesGR: string[] = ['Berlin', 'Bonn', 'Cologne', 'Munich', 'Hamburg'];
-
-  private static roadSuffixes: string[] = ['Road', 'Street', 'Way'];
-
-  private static roadNames: string[] = ['Main', 'Garden', 'Broad', 'Oak', 'Cedar', 'Park', 'Pine', 'Elm', 'Market', 'Hill'];
-
-  private static getRandomNumber(min: number, max: number): number {
-    return Math.round(min + Math.random() * (max - min));
-  }
-
-  private static getRandomItem(array: any[]): any {
-    const index = Math.round(this.getRandomNumber(0, array.length - 1));
-    return array[index];
-  }
-
-  private static getRandomDate(start: Date, end: Date) {
-    return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
-  }
-
-  private static getRandomPhone(): string {
-    const phoneCode = this.getRandomNumber(100, 900);
-    const phoneNum1 = this.getRandomNumber(100, 900);
-    const phoneNum2 = this.getRandomNumber(1000, 9000);
-    const phone = `${phoneCode}-${phoneNum1}-${phoneNum2}`;
-    return phone;
-  }
-
-  private static getRandomGender(): string {
-    return this.getRandomItem(this.genders);
-  }
-
-  private static getRandomNameLast(): string {
-    return this.getRandomItem(this.lastNames);
-  }
-
-  private static getRandomNameFirst(gender: string): string {
-    if (gender === 'male') {
-      return this.getRandomItem(this.maleNames);
-    }
-
-    return this.getRandomItem(this.femaleNames);
-  }
-
-  private static getRandomCity(country: string): string {
-    if (country === 'Canada') {
-      return this.getRandomItem(this.citiesCA);
-    } if (country === 'France') {
-      return this.getRandomItem(this.citiesFR);
-    } if (country === 'Poland') {
-      return this.getRandomItem(this.citiesPL);
-    } if (country === 'USA') {
-      return this.getRandomItem(this.citiesUS);
-    } if (country === 'Japan') {
-      return this.getRandomItem(this.citiesJP);
-    } if (country === 'Germany') {
-      return this.getRandomItem(this.citiesGR);
-    } // if (country === 'United Kingdom')
-    return this.getRandomItem(this.citiesUK);
-  }
-
-  private static getRandomStreet(): string {
-    const num = Math.round(this.getRandomNumber(100, 300)).toString();
-    const road = this.getRandomItem(this.roadNames);
-    const suffix = this.getRandomItem(this.roadSuffixes);
-    return `${num} ${road} ${suffix}`;
-  }
-
-  private static getBirthday(age: number): Date {
-    const today: Date = new Date();
-    const year: number = today.getFullYear() - age;
-    const month: number = this.getRandomNumber(0, 8);
-    const day: number = this.getRandomNumber(10, 27);
-    return new Date(year, month, day);
-  }
-
-  private static getPhotoMale(id: number): string {
-    return `https://static.infragistics.com/xplatform/images/people//GUY${this.pad(id, 2)}.png`;
-  }
-
-  private static getPhotoFemale(id: number): string {
-    return `https://static.infragistics.com/xplatform/images/people/GIRL${this.pad(id, 2)}.png`;
-  }
-
-  private static getGenderPhoto(gender: string): string {
-    return `https://static.infragistics.com/xplatform/images/genders/${gender}.png`;
-  }
-
-  private static getCountryFlag(country: string): string {
-    return `https://static.infragistics.com/xplatform/images/flags/${country}.png`;
-  }
-
-  private static pad(num: number, size: number) {
-    let s = `${num}`;
-    while (s.length < size) {
-      s = `0${s}`;
-    }
-    return s;
-  }
-}