igniteui-cli 10.0.4 → 10.1.0-alpha.0

package/lib/templates/IgniteUIForWebComponentsTemplate.js

@@ -28,10 +28,21 @@ class IgniteUIForWebComponentsTemplate {
         return Object.assign({}, options["extraConfig"], this.getBaseVariables(name));
     }
     registerInProject(projectPath, fullName, options) {
+        cli_core_1.App.initialize(); // remove after POC
+        const routeModulePath = path.posix.join(`src/app`, `${options.routingModulePath}-routing.ts`);
+        let routingModule;
         if (!(options && options.skipRoute) && cli_core_1.App.container.get(cli_core_1.FS_TOKEN)
-            .fileExists("src/app/app-routing.ts")) {
-            const routingModule = new TypeScriptFileUpdate_1.TypeScriptFileUpdate(path.join(projectPath, "src/app/app-routing.ts"));
-            routingModule.addRoute(path.join(projectPath, `src/app/${this.folderName(fullName)}/${this.fileName(fullName)}.component.ts`), this.fileName(fullName), cli_core_1.Util.nameFromPath(fullName));
+            .fileExists(routeModulePath)) {
+            routingModule = new TypeScriptFileUpdate_1.TypeScriptFileUpdate(path.join(projectPath, routeModulePath));
+            routingModule.addRoute(path.join(projectPath, `src/app/${this.folderName(fullName)}/${this.fileName(fullName)}.component.ts`), this.fileName(fullName), cli_core_1.Util.nameFromPath(fullName), options);
+        }
+        if (options.routingModulePath !== "app") {
+            routingModule = new TypeScriptFileUpdate_1.TypeScriptFileUpdate(path.join(projectPath, "src/app/app-routing.ts"));
+            const routingModuleText = routingModule.targetSource.text;
+            const moduleName = options.routingModulePath.split("/")[1];
+            if (routingModuleText.indexOf(moduleName + "-routing") < 0) {
+                routingModule.addRoute(path.join(projectPath, `src/app/${options.routingModulePath}-routing.ts`), this.fileName(`${options.routingModulePath}-routing.ts`), cli_core_1.Util.nameFromPath(`${options.routingModulePath}-routing.ts`), options, options.parentName);
+            }
         }
     }
     getExtraConfiguration() {

package/package.json

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

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

@@ -10,26 +10,26 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~14.0.0",
-    "@angular/common": "~14.0.0",
-    "@angular/compiler": "~14.0.0",
-    "@angular/core": "~14.0.0",
-    "@angular/forms": "~14.0.0",
-    "@angular/platform-browser": "~14.0.0",
-    "@angular/platform-browser-dynamic": "~14.0.0",
-    "@angular/router": "~14.0.0",
+    "@angular/animations": "~14.1.0",
+    "@angular/common": "~14.1.0",
+    "@angular/compiler": "~14.1.0",
+    "@angular/core": "~14.1.0",
+    "@angular/forms": "~14.1.0",
+    "@angular/platform-browser": "~14.1.0",
+    "@angular/platform-browser-dynamic": "~14.1.0",
+    "@angular/router": "~14.1.0",
     "jquery": ">=1.9.1",
     "jquery-ui": ">=1.10.5",
-    "igniteui-angular-wrappers": "~14.0.0",
+    "igniteui-angular-wrappers": "~14.1.0",
     "ignite-ui": "~21.2",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~14.0.0",
-    "@angular/cli": "~14.0.0",
-    "@angular/compiler-cli": "~14.0.0",
+    "@angular-devkit/build-angular": "~14.1.0",
+    "@angular/cli": "~14.1.0",
+    "@angular/compiler-cli": "~14.1.0",
     "@types/jasmine": "~4.0.0",
     "@types/node": "^12.11.1",
     "igniteui-cli": "^$(cliVersion)",

package/templates/webcomponents/TypeScriptFileUpdate.d.ts

@@ -1,3 +1,4 @@
+import { AddTemplateArgs } from "@igniteui/cli-core";
 import * as ts from "typescript";
 /**
  * Apply various updates to typescript files using AST
@@ -18,18 +19,18 @@ export declare class TypeScriptFileUpdate {
     constructor(targetPath: string);
     /** Applies accumulated transforms, saves and formats the file */
     finalize(): void;
-    addRoute(filePath: string, linkPath: string, linkText: string, routesVariable?: string): void;
+    addRoute(filePath: string, linkPath: string, linkText: string, options: AddTemplateArgs, parentName: string, routesVariable?: string): void;
     /** Initializes existing imports info, [re]sets import and `NgModule` edits */
     protected initState(): void;
     protected loadImportsMeta(): {
         lastIndex: number;
         modulePaths: any[];
     };
-    protected addRouteModuleEntry(targetPath: string, filePath: string, linkText: string, linkPath: string, routesVariable?: string, parentRoutePath?: string): void;
-    protected requestImport(modulePath: string): void;
+    protected addRouteModuleEntry(targetPath: string, filePath: string, linkText: string, routesVariable: string, options: any, parentName?: string): void;
+    protected requestImport(modulePath: string, parentName: string): void;
     /** Add `import` statements not previously found in the file  */
     protected addNewFileImports(): void;
-    protected createIdentifierImport(importPath: string): ts.ImportDeclaration;
+    protected createIdentifierImport(importPath: string, as: string): ts.ImportDeclaration;
     /** Transformation to apply edits to existing named import declarations */
     protected importsTransformer: ts.TransformerFactory<ts.Node>;
     /** Format a TS source file, very TBD */

package/templates/webcomponents/TypeScriptFileUpdate.js

@@ -46,8 +46,8 @@ class TypeScriptFileUpdate {
         // reset state in case of further updates
         this.initState();
     }
-    addRoute(filePath, linkPath, linkText, routesVariable = DEFAULT_ROUTES_VARIABLE) {
-        this.addRouteModuleEntry(filePath, linkPath, linkText, routesVariable);
+    addRoute(filePath, linkPath, linkText, options, parentName, routesVariable = DEFAULT_ROUTES_VARIABLE) {
+        this.addRouteModuleEntry(filePath, linkPath, linkText, routesVariable, options, parentName);
     }
     //#region File state
     /** Initializes existing imports info, [re]sets import and `NgModule` edits */
@@ -82,17 +82,26 @@ class TypeScriptFileUpdate {
         return meta;
     }
     //#endregion File state
-    addRouteModuleEntry(targetPath, filePath, linkText, linkPath, routesVariable = DEFAULT_ROUTES_VARIABLE, parentRoutePath) {
+    addRouteModuleEntry(targetPath, filePath, linkText, routesVariable = DEFAULT_ROUTES_VARIABLE, options, parentName) {
+        const isRouting = filePath.indexOf("routing") >= 0;
+        if (isRouting && this.targetSource.text.indexOf(filePath.slice(0, -3)) > 0) {
+            return;
+        }
         let className;
-        const relativePath = "./" + filePath + "/" + filePath;
+        const moduleName = filePath.substring(0, filePath.indexOf("-routing"));
+        const relativePath = isRouting ?
+            "./" + moduleName + "/" + filePath.slice(0, -3) : "./" + filePath + "/" + filePath;
+        const hasParent = parentName ? true : false;
+        const hasChildren = options.hasChildren ? true : false;
+        const hasNestedModule = (!hasParent && hasChildren) ? true : false;
         className = "app-" + filePath;
-        this.requestImport(relativePath);
+        this.requestImport(relativePath, parentName);
         // https://github.com/Microsoft/TypeScript/issues/14419#issuecomment-307256171
         const transformer = (context) => (rootNode) => {
             // the visitor that should be used when adding routes to the main route array
             const conditionalVisitor = (node) => {
                 if (node.kind === ts.SyntaxKind.ArrayLiteralExpression) {
-                    const newObject = this.createRouteEntry(filePath, className, linkText);
+                    const newObject = this.createRouteEntry(filePath, className, linkText, hasNestedModule);
                     const array = node;
                     this.createdStringLiterals.push(filePath, linkText);
                     const notFoundWildCard = ".*";
@@ -118,11 +127,19 @@ class TypeScriptFileUpdate {
                     return ts.visitEachChild(node, conditionalVisitor, context);
                 }
             };
-            const visitCondition = (node) => {
-                return node.kind === ts.SyntaxKind.VariableDeclaration &&
-                    node.name.getText() === routesVariable &&
-                    node.type.getText() === "Route[]";
-            };
+            let visitCondition;
+            if (!isRouting) {
+                visitCondition = (node) => {
+                    return node.kind === ts.SyntaxKind.VariableDeclaration &&
+                        node.name.getText() === routesVariable &&
+                        node.type.getText() === "Route[]";
+                };
+            }
+            else {
+                visitCondition = (node) => {
+                    return undefined;
+                };
+            }
             const visitor = this.createVisitor(conditionalVisitor, visitCondition, context);
             context.enableSubstitution(ts.SyntaxKind.ClassDeclaration);
             return ts.visitNode(rootNode, visitor);
@@ -132,11 +149,13 @@ class TypeScriptFileUpdate {
         }).transformed[0];
         this.finalize();
     }
-    requestImport(modulePath) {
+    requestImport(modulePath, parentName) {
         const existing = this.requestedImports.find(x => x.from === modulePath);
         if (!existing) {
+            const exportedObject = parentName ? parentName : undefined;
             // new imports, check if already exists in file
             this.requestedImports.push({
+                as: exportedObject,
                 from: modulePath,
                 edit: this.importsMeta.modulePaths.indexOf(modulePath) !== -1
             });
@@ -153,14 +172,27 @@ class TypeScriptFileUpdate {
         }
         const newStatements = ts.factory.createNodeArray([
             ...this.targetSource.statements.slice(0, this.importsMeta.lastIndex),
-            ...newImports.map(x => this.createIdentifierImport(x.from)),
+            ...newImports.map(x => this.createIdentifierImport(x.from, x.as)),
             ...this.targetSource.statements.slice(this.importsMeta.lastIndex)
         ]);
         newImports.forEach(x => this.createdStringLiterals.push(x.from));
         this.targetSource = ts.factory.updateSourceFile(this.targetSource, newStatements);
     }
-    createIdentifierImport(importPath) {
-        const importDeclaration = ts.factory.createImportDeclaration(undefined, undefined, undefined, ts.factory.createStringLiteral(importPath));
+    createIdentifierImport(importPath, as) {
+        let exportedObject;
+        let exportedObjectName;
+        let importClause;
+        if (as) {
+            exportedObject = "routes";
+            exportedObjectName = as.replace(/\s/g, "");
+            importClause = ts.factory.createImportClause(false, undefined, ts.factory.createNamedImports([
+                ts.factory.createImportSpecifier(false, ts.factory.createIdentifier(exportedObject), ts.factory.createIdentifier(exportedObjectName))
+            ]));
+        }
+        else {
+            importClause = undefined;
+        }
+        const importDeclaration = ts.factory.createImportDeclaration(undefined, undefined, importClause, ts.factory.createStringLiteral(importPath));
         return importDeclaration;
     }
     //#endregion ts.TransformerFactory
@@ -297,11 +329,17 @@ class TypeScriptFileUpdate {
             return node;
         };
     }
-    createRouteEntry(filePath, className, linkText) {
+    createRouteEntry(filePath, className, linkText, hasNestedModule) {
         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]);
+        const childrenData = ts.factory.createPropertyAssignment("children", ts.factory.createStringLiteral(linkText.replace(/\s/g, "")));
+        if (hasNestedModule) {
+            return ts.factory.createObjectLiteralExpression([routePath, routeComponent, routeData, childrenData]);
+        }
+        else {
+            return ts.factory.createObjectLiteralExpression([routePath, routeComponent, routeData]);
+        }
     }
 }
 exports.TypeScriptFileUpdate = TypeScriptFileUpdate;

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

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path).js';
+
+describe('IgcAccordionComponent', () => {
+  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/accordion/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,30 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcAccordionComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcAccordionComponent);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+    render() {
+        return html`
+        <igc-accordion singleExpand="false" alignment="justify">
+        <igc-expansion-panel>
+            <div slot="title">Ignite UI for Web Components</div>
+            <p>Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.</p>
+        </igc-expansion-panel>
+        <igc-expansion-panel>
+            <div slot="title">Ignite UI for Angular</div>
+            <p>Ignite UI for Angular is a complete set of Material-based UI Widgets, Components & Sketch, Adobe XD and Figma UI kits by Infragistics. Ignite UI for Angular is designed to enable developers to build enterprise-ready, high-performance HTML5 & JavaScript apps for modern desktop browsers.</p>
+        </igc-expansion-panel>
+        <igc-expansion-panel>
+            <div slot="title">Ignite UI for jQuery</div>
+            <p>Ignite UI for jQuery helps you build powerful, high-performance web-based applications. Inside Ignite UI for jQuery you'll find user experience controls and components for creating engaging line-of-business web applications which target the browsers for both mobile & desktop environments.</p>
+        </igc-expansion-panel>
+        </igc-accordion>
+        `;
+      }
+}

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

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

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

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

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

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

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

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

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

@@ -2,20 +2,10 @@ import { html, css, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
-  IgcCardActionsComponent,
-  IgcCardContentComponent,
-  IgcCardHeaderComponent,
-  IgcCardMediaComponent,
   IgcCardComponent,
 } from 'igniteui-webcomponents';
 
-defineComponents(
-  IgcCardComponent,
-  IgcCardActionsComponent,
-  IgcCardContentComponent,
-  IgcCardHeaderComponent,
-  IgcCardMediaComponent,
-);
+defineComponents(IgcCardComponent);
 
 @customElement('app-$(path)')
 export default class $(ClassName) extends LitElement {

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

@@ -8,7 +8,12 @@ import {
   IgcButtonComponent,
 } from 'igniteui-webcomponents';
 
-defineComponents(IgcFormComponent, IgcInputComponent, IgcCheckboxComponent, IgcButtonComponent);
+defineComponents(
+  IgcFormComponent,
+  IgcInputComponent,
+  IgcCheckboxComponent,
+  IgcButtonComponent,
+);
 
 @customElement('app-$(path)')
 export default class $(ClassName) extends LitElement {

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

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path).js';
+
+describe('gcDateTimeInputComponent', () => {
+  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/date-time-input/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,38 @@
+import { html, LitElement } from 'lit';
+import { customElement, query } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcDateTimeInputComponent,
+  registerIconFromText
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcDateTimeInputComponent);
+const clearIcon =
+'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>';
+registerIconFromText('clear', clearIcon, 'material');
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+    @query('igc-date-time-input')
+      _input!: Element
+
+    render() {
+    return html`
+    <igc-date-time-input
+    label="Choose Date"
+    .value=${new Date(2022, 6, 12, 7, 30, 0)}
+    .inputFormat="dd/MM/yyyy"
+    .displayFormat="dd/MM/yyyy"
+    .minValue=${new Date(2022, 6, 2, 7, 30, 0)}
+    .maxValue=${new Date(2022, 6, 27, 7, 30, 0)}
+    .spinDelta={date: 2, year: 10,}>
+        <igc-icon name="clear" collection='material' size='large' slot="suffix" @click=${this.handleClear}></igc-icon>
+        <span slot="helper-text">This is some helper text</span>
+    </igc-date-time-input>
+        `;
+      }
+
+    handleClear() {
+        (this._input as IgcDateTimeInputComponent)!.clear();
+    }
+}

package/templates/webcomponents/igc-ts/date-time-input/default/index.d.ts

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

package/templates/webcomponents/igc-ts/date-time-input/default/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForWebComponentsTemplate_1 = require("../../../../../lib/templates/IgniteUIForWebComponentsTemplate");
+class IgcDateTimeInputTemplate extends IgniteUIForWebComponentsTemplate_1.IgniteUIForWebComponentsTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["DateTime Input"];
+        this.controlGroup = "Data Entry & Display";
+        this.listInComponentTemplates = true;
+        this.id = "date-time-input";
+        this.projectType = "igc-ts";
+        this.name = "DateTime Input";
+        this.description = "basic IgcDateTimeInput";
+    }
+    addClassDeclaration(mainModule, projPath, name, modulePath) {
+        // not applicable with custom module
+    }
+}
+module.exports = new IgcDateTimeInputTemplate();

package/templates/webcomponents/igc-ts/date-time-input/index.d.ts

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

package/templates/webcomponents/igc-ts/date-time-input/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgcDateTimeInputComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "DateTimeInput";
+        this.group = "Data Entry & Display";
+        this.description = `Basic date time input component`;
+    }
+}
+module.exports = new IgcDateTimeInputComponent();

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

@@ -4,15 +4,11 @@ import {
   defineComponents,
   IgcButtonComponent,
   IgcDropdownComponent,
-  IgcDropdownItemComponent,
-  IgcDropdownGroupComponent,
 } from 'igniteui-webcomponents';
 
 defineComponents(
   IgcButtonComponent,
   IgcDropdownComponent,
-  IgcDropdownItemComponent,
-  IgcDropdownGroupComponent,
 );
 
 @customElement('app-$(path)')

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

@@ -5,9 +5,7 @@ import {
   IgcExpansionPanelComponent,
 } from 'igniteui-webcomponents';
 
-defineComponents(
-  IgcExpansionPanelComponent,
-);
+defineComponents(IgcExpansionPanelComponent);
 
 @customElement('app-$(path)')
 export default class $(ClassName) extends LitElement {

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

@@ -3,11 +3,13 @@ import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
   IgcFormComponent,
-  IgcRadioComponent,
   IgcRadioGroupComponent,
 } from 'igniteui-webcomponents';
 
-defineComponents(IgcFormComponent, IgcRadioComponent, IgcRadioGroupComponent);
+defineComponents(
+  IgcFormComponent,
+  IgcRadioGroupComponent,
+);
 
 @customElement('app-$(path)')
 export default class $(ClassName) extends LitElement {

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

@@ -5,16 +5,12 @@ import {
   IgcAvatarComponent,
   IgcButtonComponent,
   IgcListComponent,
-  IgcListHeaderComponent,
-  IgcListItemComponent,
 } from 'igniteui-webcomponents';
 
 defineComponents(
   IgcAvatarComponent,
   IgcButtonComponent,
   IgcListComponent,
-  IgcListHeaderComponent,
-  IgcListItemComponent,
 );
 
 @customElement('app-$(path)')

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

@@ -9,7 +9,10 @@ import {
   registerIcon,
 } from 'igniteui-webcomponents/components/icon/icon.registry';
 
-defineComponents(IgcIconComponent, IgcNavbarComponent);
+defineComponents(
+  IgcIconComponent,
+  IgcNavbarComponent,
+);
 
 registerIcon(
   'home',

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

@@ -5,7 +5,6 @@
   <meta charset="utf-8">
   <base href="/">
   <title>Ignite UI for Web Components</title>
-  <link rel="stylesheet" href="./node_modules/igniteui-webcomponents/themes/light/bootstrap.css">
   <link rel="stylesheet" href="./styles.css">
 </head>
 
@@ -14,4 +13,5 @@
 
   <script type="module" src="./dist/src/index.js"></script>
 </body>
+
 </html>

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

@@ -21,43 +21,34 @@
   },
   "dependencies": {
     "@vaadin/router": "^1.7.4",
-    "igniteui-webcomponents": "~3.2.0",
-    "igniteui-webcomponents-grids": "~3.2.1",
-    "igniteui-webcomponents-core": "~3.2.1",
-    "igniteui-webcomponents-layouts": "~3.2.1",
-    "igniteui-webcomponents-inputs": "~3.2.1",
-    "igniteui-webcomponents-charts": "~3.2.1",
-    "igniteui-webcomponents-gauges": "~3.2.1",
-    "igniteui-dockmanager": "~1.8.0",
-    "@igniteui/material-icons-extended": "^2.11.0",
     "lit": "^2.0.2",
     "typescript": "^4.5.2"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.16.4",
-    "@open-wc/testing": "^2.5.33",
     "@open-wc/building-rollup": "^2.0.1",
+    "@open-wc/eslint-config": "^4.3.0",
+    "@open-wc/testing": "^2.5.33",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-node-resolve": "^13.0.6",
-    "rollup-plugin-copy-assets": "^2.0.3",
-    "@open-wc/eslint-config": "^4.3.0",
     "@typescript-eslint/eslint-plugin": "^4.30.0",
     "@typescript-eslint/parser": "^4.30.0",
     "@web/dev-server": "^0.1.22",
     "@web/rollup-plugin-html": "^1.10.1",
     "@web/rollup-plugin-import-meta-assets": "^1.0.7",
-    "babel-plugin-template-html-minifier": "^4.1.0",
     "@web/test-runner": "next",
-    "igniteui-cli": "~$(cliVersion)",
+    "babel-plugin-template-html-minifier": "^4.1.0",
     "concurrently": "^6.3.0",
     "deepmerge": "^4.2.2",
+    "eslint": "^7.32.0",
+    "igniteui-cli": "~10.0.3",
     "rimraf": "^3.0.2",
     "rollup": "^2.60.0",
+    "rollup-plugin-copy-assets": "^2.0.3",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-workbox": "^6.2.0",
-    "eslint": "^7.32.0",
-    "tslib": "^2.3.1",
-    "source-map": "^0.7.3"
+    "source-map": "^0.7.3",
+    "tslib": "^2.3.1"
   },
   "eslintConfig": {
     "parser": "@typescript-eslint/parser",
@@ -68,20 +59,9 @@
       "@typescript-eslint"
     ],
     "rules": {
-      "linebreak-style": "off",
       "no-unused-vars": "off",
-      "@typescript-eslint/no-unused-vars": [
-        "error"
-      ],
-      "import/no-extraneous-dependencies": "off",
       "import/no-unresolved": "off",
-      "import/extensions": [
-        "error",
-        "always",
-        {
-          "ignorePackages": true
-        }
-      ]
+      "linebreak-style": "off"
     }
   }
 }

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

@@ -1,11 +1,11 @@
-import nodeResolve from '@rollup/plugin-node-resolve';
 import babel from '@rollup/plugin-babel';
-import copy from 'rollup-plugin-copy-assets';
+import nodeResolve from '@rollup/plugin-node-resolve';
 import { rollupPluginHTML as html } from '@web/rollup-plugin-html';
 import { importMetaAssets } from '@web/rollup-plugin-import-meta-assets';
+import path from 'path';
+import copy from 'rollup-plugin-copy-assets';
 import { terser } from 'rollup-plugin-terser';
 import { generateSW } from 'rollup-plugin-workbox';
-import path from 'path';
 
 export default {
   input: 'index.html',

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

@@ -1,11 +1,7 @@
-import {
-  Route
-} from '@vaadin/router';
-import './home/home.js';
+import { Route } from '@vaadin/router';
 import './not-found/not-found.js';
 
 export const routes: Route[] = [
-  { path: '/', component: 'app-home', name: 'Home' },
   // The fallback route should always be after other alternatives.
   { path: '(.*)', component: 'app-not-found' },
 ];

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

@@ -1,6 +1,6 @@
-import { html, css, LitElement } from 'lit';
+import { Router } from '@vaadin/router';
+import { css, html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import { Router, } from '@vaadin/router';
 import { routes } from './app-routing.js';
 
 @customElement('app-root')

package/templates/webcomponents/igc-ts/projects/_base/files/styles.css

@@ -1,4 +1,5 @@
-html, body {
+html,
+body {
   height: 100%;
   margin: 0px;
   background: #fafafa;

package/templates/webcomponents/igc-ts/projects/_base/files/web-dev-server.config.mjs

@@ -4,24 +4,24 @@
 const hmr = process.argv.includes('--hmr');
 
 export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-	open: '/',
-	/** Use regular watch mode if HMR is not enabled. */
-	watch: !hmr,
-	/** Resolve bare module imports */
-	nodeResolve: {
-		exportConditions: ['browser', 'development'],
-	},
+  open: '/',
+  /** Use regular watch mode if HMR is not enabled. */
+  watch: !hmr,
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
 
-	/** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-	// esbuildTarget: 'auto'
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
 
-	/** Set appIndex to enable SPA routing */
-	appIndex: './index.html',
+  /** Set appIndex to enable SPA routing */
+  appIndex: './index.html',
 
-	plugins: [
-		/** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-		// hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-	],
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
 
-	// See documentation for all available options
+  // See documentation for all available options
 });

package/templates/webcomponents/igc-ts/projects/_base/files/web-test-runner.config.mjs

@@ -3,39 +3,39 @@
 const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
 
 export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-	/** Test files to run */
-	files: 'dist/src/app/**/*.test.js',
-
-	/** Resolve bare module imports */
-	nodeResolve: {
-		exportConditions: ['browser', 'development'],
-	},
-
-	/** Filter out lit dev mode logs */
-	filterBrowserLogs(log) {
-		for (const arg of log.args) {
-			if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
-				return false;
-			}
-		}
-		return true;
-	},
-
-	/** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-	// esbuildTarget: 'auto',
-
-	/** Amount of browsers to run concurrently */
-	// concurrentBrowsers: 2,
-
-	/** Amount of test files per browser to test concurrently */
-	// concurrency: 1,
-
-	/** Browsers to run tests on */
-	// browsers: [
-	//   playwrightLauncher({ product: 'chromium' }),
-	//   playwrightLauncher({ product: 'firefox' }),
-	//   playwrightLauncher({ product: 'webkit' }),
-	// ],
-
-	// See documentation for all available options
-});
+  /** Test files to run */
+  files: 'dist/src/app/**/*.test.js',
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  // concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  // concurrency: 1,
+
+  /** Browsers to run tests on */
+  // browsers: [
+  //   playwrightLauncher({ product: 'chromium' }),
+  //   playwrightLauncher({ product: 'firefox' }),
+  //   playwrightLauncher({ product: 'webkit' }),
+  // ],
+
+  // See documentation for all available options
+});

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

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en-GB">
+
+<head>
+  <meta charset="utf-8">
+  <base href="/">
+  <title>Ignite UI for Web Components</title>
+  <link rel="stylesheet" href="./node_modules/igniteui-webcomponents/themes/light/bootstrap.css">
+  <link rel="stylesheet" href="./styles.css">
+</head>
+
+<body>
+  <app-root></app-root>
+
+  <script type="module" src="./dist/src/index.js"></script>
+</body>
+
+</html>

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

@@ -0,0 +1,75 @@
+{
+  "name": "$(dashName)",
+  "version": "0.0.0",
+  "private": true,
+  "description": "WebComponents project for Ignite UI CLI",
+  "license": "MIT",
+  "author": "Infragistics",
+  "main": "dist/src/index.js",
+  "module": "dist/src/index.js",
+  "type": "module",
+  "exports": {
+    ".": "./dist/src/index.js",
+    "./$(dashName).js": "./dist/src/$(dashName).js"
+  },
+  "scripts": {
+    "start": "tsc && concurrently -k -r \"tsc --watch\" \"wds\"",
+    "build": "rimraf dist && tsc && rollup -c rollup.config.mjs",
+    "start:build": "web-dev-server --root-dir dist --app-index index.html --open",
+    "lint": "eslint --ext .js,.ts,.html . --ignore-path .gitignore",
+    "test": "tsc && wtr"
+  },
+  "dependencies": {
+    "@vaadin/router": "^1.7.4",
+    "@igniteui/material-icons-extended": "^2.11.0",
+    "igniteui-dockmanager": "~1.8.0",
+    "igniteui-webcomponents": "~3.4.0",
+    "igniteui-webcomponents-charts": "~3.2.1",
+    "igniteui-webcomponents-core": "~3.2.1",
+    "igniteui-webcomponents-gauges": "~3.2.1",
+    "igniteui-webcomponents-grids": "~3.2.1",
+    "igniteui-webcomponents-inputs": "~3.2.1",
+    "igniteui-webcomponents-layouts": "~3.2.1",
+    "lit": "^2.0.2",
+    "typescript": "^4.5.2"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.16.4",
+    "@open-wc/building-rollup": "^2.0.1",
+    "@open-wc/eslint-config": "^4.3.0",
+    "@open-wc/testing": "^2.5.33",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-node-resolve": "^13.0.6",
+    "@typescript-eslint/eslint-plugin": "^4.30.0",
+    "@typescript-eslint/parser": "^4.30.0",
+    "@web/dev-server": "^0.1.22",
+    "@web/rollup-plugin-html": "^1.10.1",
+    "@web/rollup-plugin-import-meta-assets": "^1.0.7",
+    "@web/test-runner": "next",
+    "babel-plugin-template-html-minifier": "^4.1.0",
+    "concurrently": "^6.3.0",
+    "deepmerge": "^4.2.2",
+    "eslint": "^7.32.0",
+    "igniteui-cli": "~10.0.3",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.60.0",
+    "rollup-plugin-copy-assets": "^2.0.3",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-workbox": "^6.2.0",
+    "source-map": "^0.7.3",
+    "tslib": "^2.3.1"
+  },
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+      "@open-wc"
+    ],
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "rules": {
+      "no-unused-vars": "off",
+      "import/no-unresolved": "off"
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+import { Route } from '@vaadin/router';
+import './home/home.js';
+import './not-found/not-found.js';
+
+export const routes: Route[] = [
+  { path: '/', component: 'app-home', name: 'Home' },
+  // The fallback route should always be after other alternatives.
+  { path: '(.*)', component: 'app-not-found' },
+];

package/templates/webcomponents/igc-ts/projects/_base_with_home/index.d.ts

@@ -0,0 +1,8 @@
+import { ProjectTemplate } from "@igniteui/cli-core";
+import { BaseIgcProject } from "../_base";
+export declare class BaseWithHomeIgcProject extends BaseIgcProject implements ProjectTemplate {
+    id: string;
+    name: string;
+    description: string;
+    get templatePaths(): string[];
+}

package/templates/webcomponents/igc-ts/projects/_base_with_home/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseWithHomeIgcProject = void 0;
+const path = require("path");
+const _base_1 = require("../_base");
+class BaseWithHomeIgcProject extends _base_1.BaseIgcProject {
+    constructor() {
+        super(...arguments);
+        this.id = "base with home";
+        this.name = "Base With Home";
+        this.description = "Empty project layout structure for Ignite UI for Web Components";
+    }
+    get templatePaths() {
+        return [...super.templatePaths, path.join(__dirname, "files")];
+    }
+}
+exports.BaseWithHomeIgcProject = BaseWithHomeIgcProject;

package/templates/webcomponents/igc-ts/projects/base/index.d.ts

@@ -0,0 +1,14 @@
+import { ProjectTemplate } from "@igniteui/cli-core";
+import { BaseIgcProject } from "../_base";
+export declare class BasePageTemplate extends BaseIgcProject implements ProjectTemplate {
+    id: string;
+    name: string;
+    description: string;
+    framework: string;
+    projectType: string;
+    dependencies: string[];
+    hasExtraConfiguration: boolean;
+    get templatePaths(): string[];
+}
+declare const _default: BasePageTemplate;
+export default _default;

package/templates/webcomponents/igc-ts/projects/base/index.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BasePageTemplate = void 0;
+const path = require("path");
+const _base_1 = require("../_base");
+class BasePageTemplate extends _base_1.BaseIgcProject {
+    constructor() {
+        super(...arguments);
+        this.id = "base";
+        this.name = "Base Project";
+        this.description = "Project structure with routing";
+        this.framework = "webcomponents";
+        this.projectType = "igc-ts";
+        this.hasExtraConfiguration = false;
+    }
+    get templatePaths() {
+        return [...super.templatePaths, path.join(__dirname, "files")];
+    }
+}
+exports.BasePageTemplate = BasePageTemplate;
+exports.default = new BasePageTemplate();

package/templates/webcomponents/igc-ts/projects/empty/index.d.ts

@@ -1,6 +1,6 @@
 import { ProjectTemplate } from "@igniteui/cli-core";
-import { BaseIgcProject } from "../_base";
-export declare class EmptyPageTemplate extends BaseIgcProject implements ProjectTemplate {
+import { BaseWithHomeIgcProject } from "../_base_with_home";
+export declare class EmptyPageTemplate extends BaseWithHomeIgcProject implements ProjectTemplate {
     id: string;
     name: string;
     description: string;

package/templates/webcomponents/igc-ts/projects/empty/index.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmptyPageTemplate = void 0;
 const path = require("path");
-const _base_1 = require("../_base");
-class EmptyPageTemplate extends _base_1.BaseIgcProject {
+const _base_with_home_1 = require("../_base_with_home");
+class EmptyPageTemplate extends _base_with_home_1.BaseWithHomeIgcProject {
     constructor() {
         super(...arguments);
         this.id = "empty";

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

@@ -4,8 +4,6 @@ import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
   IgcNavDrawerComponent,
-  IgcNavDrawerItemComponent,
-  IgcNavDrawerHeaderItemComponent,
   IgcRippleComponent,
 } from 'igniteui-webcomponents';
 import { Router } from '@vaadin/router';
@@ -13,8 +11,6 @@ import { routes } from './app-routing.js';
 
 defineComponents(
   IgcNavDrawerComponent,
-  IgcNavDrawerItemComponent,
-  IgcNavDrawerHeaderItemComponent,
   IgcRippleComponent,
 );
 

package/templates/webcomponents/igc-ts/projects/side-nav/index.d.ts

@@ -1,6 +1,6 @@
 import { ProjectTemplate } from "@igniteui/cli-core";
-import { BaseIgcProject } from "../_base";
-export declare class SideNavProject extends BaseIgcProject implements ProjectTemplate {
+import { BaseWithHomeIgcProject } from "../_base_with_home";
+export declare class SideNavProject extends BaseWithHomeIgcProject implements ProjectTemplate {
     id: string;
     name: string;
     description: string;

package/templates/webcomponents/igc-ts/projects/side-nav/index.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SideNavProject = void 0;
 const path = require("path");
-const _base_1 = require("../_base");
-class SideNavProject extends _base_1.BaseIgcProject {
+const _base_with_home_1 = require("../_base_with_home");
+class SideNavProject extends _base_with_home_1.BaseWithHomeIgcProject {
     constructor() {
         super(...arguments);
         this.id = "side-nav";

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

@@ -2,11 +2,10 @@ import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
-  IgcRadioComponent,
   IgcRadioGroupComponent,
 } from 'igniteui-webcomponents';
 
-defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
+defineComponents(IgcRadioGroupComponent);
 
 @customElement('app-$(path)')
 export default class $(ClassName) extends LitElement {

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

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path).js';
+
+describe('IgcTabsComponent', () => {
+  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/tabs/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,56 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcTabsComponent,
+  registerIconFromText
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcTabsComponent);
+
+const libraryIcon =
+'<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v14"/><path d="M19 7.674v-.657a4 4 0 0 0-2.901-3.846l-2.824-.807A1 1 0 0 0 12 3.326V7l5.725 1.636A1 1 0 0 0 19 7.674Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3 3 0 1 1-6 0c0-1.657 1.343-2 3-2s3 .343 3 2Z"/></g></svg>';
+registerIconFromText('library', libraryIcon, 'material');
+
+const favoriteIcon =
+'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>';
+registerIconFromText('favorite', favoriteIcon, 'material');
+
+const infoIcon =
+'<svg xmlns="http://www.w3.org/2000/svg" width="0.38em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 192 512"><path fill="currentColor" d="M20 424.229h20V279.771H20c-11.046 0-20-8.954-20-20V212c0-11.046 8.954-20 20-20h112c11.046 0 20 8.954 20 20v212.229h20c11.046 0 20 8.954 20 20V492c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20v-47.771c0-11.046 8.954-20 20-20zM96 0C56.235 0 24 32.235 24 72s32.235 72 72 72s72-32.235 72-72S135.764 0 96 0z"/></svg>';
+registerIconFromText('info', infoIcon, 'material');
+
+@customElement('app-tabs')
+export default class Tabs extends LitElement {
+    render() {
+        return html`
+        <igc-tabs alignment="start" >
+            <igc-tab panel="first">
+                <igc-icon name="library" collection='material' size='large'></igc-icon> Albums
+            </igc-tab>
+            <igc-tab panel="second">
+                <igc-icon name="favorite" collection='material' size='large'></igc-icon> Favourites
+            </igc-tab>
+            <igc-tab panel="third" disabled>
+              <igc-icon name="info" collection='material' size='large'></igc-icon> Info
+            </igc-tab>
+            <igc-tab-panel id="first">
+                <br /><br /><b>
+                Sgt. Peppers Lonely Hearts Club Band <br /><br />
+                The Dark Side of the Moon <br /><br />
+                My Beautiful Dark Twisted Fantasy <br /><br />
+                Led Zeppelin IV <br /><br />
+                It Takes a Nation of Millions to Hold Us Back <br /><br />
+                Thriller <br /><br /></b>
+            </igc-tab-panel>
+            <igc-tab-panel id="second">
+                <br /><br /><b>
+                The Dark Side of the Moon <br /><br />
+                Led Zeppelin IV <br /><br />
+                It Takes a Nation of Millions to Hold Us Back <br /><br />
+                Thriller <br /><br /></b>
+            </igc-tab-panel>
+        </igc-tabs>
+        `;
+      }
+}

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

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

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

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

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

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

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

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

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

@@ -3,10 +3,9 @@ import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
   IgcTreeComponent,
-  IgcTreeItemComponent,
 } from 'igniteui-webcomponents';
 
-defineComponents(IgcTreeComponent, IgcTreeItemComponent);
+defineComponents(IgcTreeComponent);
 
 @customElement('app-$(path)')
 export default class $(ClassName) extends LitElement {