@igniteui/angular-templates 17.0.1302 → 17.0.1310-beta.2

package/igx-ts-legacy/time-picker/default/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -0,0 +1,31 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxTimePickerModule } from '<%=igxPackage%>';
+import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
+
+describe('<%=ClassName%>Component', () => {
+  let component: <%=ClassName%>Component;
+  let fixture: ComponentFixture<<%=ClassName%>Component>;
+  const date: Date = new Date();
+  const hours: number = date.getHours();
+  const minutes: number = date.getMinutes();
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [<%=ClassName%>Component],
+      imports: [IgxTimePickerModule, NoopAnimationsModule]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('time is correct', () => {
+    expect(component.date.getHours()).toBe(hours);
+    expect(component.date.getMinutes()).toBe(minutes);
+  });
+});

package/igx-ts-legacy/time-picker/default/files/src/app/__path__/__filePrefix__.component.ts

@@ -0,0 +1,11 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.component.html',
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class <%=ClassName%>Component {
+  public date: Date = new Date(Date.now());
+}

package/igx-ts-legacy/time-picker/default/index.d.ts

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

package/igx-ts-legacy/time-picker/default/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxTimePickerTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Time Picker"];
+        this.controlGroup = "Scheduling";
+        this.listInComponentTemplates = true;
+        this.id = "time-picker";
+        this.projectType = "igx-ts";
+        this.name = "Time Picker";
+        this.description = "IgxTimePicker with initial value";
+        this.dependencies = [
+            { import: "IgxTimePickerModule", from: "<%=igxPackage%>" }
+        ];
+    }
+}
+module.exports = new IgxTimePickerTemplate();

package/igx-ts-legacy/time-picker/index.d.ts

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

package/igx-ts-legacy/time-picker/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgxTimePickerComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Time Picker";
+        this.group = "Scheduling";
+        this.description = "select time from a dialog with spinners which is then mirrored in the input field.";
+    }
+}
+module.exports = new IgxTimePickerComponent();

package/igx-ts-legacy/tooltip/default/files/src/app/__path__/__filePrefix__.component.html

@@ -0,0 +1,30 @@
+<p>An igxTooltip template </p>
+<p>You can read more about configuring the igxTooltip component in the
+  <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/tooltip/README.md"
+    target="_blank">README</a> or the
+  <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/tooltip" target="_blank">official
+    documentation</a>.
+</p>
+
+<article class="sample-column">
+  <div class="wrapper">
+    <igx-avatar class="avatar" #target="tooltipTarget" [igxTooltipTarget]="tooltipRef" src="../assets/1.jpg"
+      size="medium" [roundShape]="true">
+    </igx-avatar>
+
+    <div #tooltipRef="tooltip" igxTooltip>
+      <div class="locationTooltipContent">
+        <igx-avatar class="locationIcon" src="../assets/2.png" size="medium" [roundShape]="false"></igx-avatar>
+        <div>
+          <div>Name: June Osborne</div>
+          <div>Address: 2 Commerce Dr, Cranbury, NJ 08512, USA</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</article>
+<article class="sample-column">
+  <div class="bottomMargin">
+    <igx-switch [(ngModel)]="target.tooltipDisabled">Disable tooltip</igx-switch>
+  </div>
+</article>

package/igx-ts-legacy/tooltip/default/files/src/app/__path__/__filePrefix__.component.scss

@@ -0,0 +1,23 @@
+.wrapper {
+  text-align: center;
+  margin: 20px;
+}
+
+.avatar {
+  display: inline-block;
+}
+
+.bottomMargin {
+  margin-bottom: 50px;
+}
+
+.locationTooltipContent {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.locationIcon {
+  width: 45px;
+  height: 45px;
+}

package/igx-ts-legacy/tooltip/default/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxAvatarModule, IgxSwitchModule, IgxTooltipModule } from '<%=igxPackage%>';
+import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
+
+describe('<%=ClassName%>Component', () => {
+  let component: <%=ClassName%>Component;
+  let fixture: ComponentFixture<<%=ClassName%>Component>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [<%=ClassName%>Component],
+      imports: [NoopAnimationsModule, FormsModule, IgxTooltipModule, IgxAvatarModule, IgxSwitchModule]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/igx-ts-legacy/tooltip/default/files/src/app/__path__/__filePrefix__.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  templateUrl: './<%=filePrefix%>.component.html'
+})
+
+export class <%=ClassName%>Component {
+}

package/igx-ts-legacy/tooltip/default/index.d.ts

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

package/igx-ts-legacy/tooltip/default/index.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxTooltipTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Tooltip"];
+        this.controlGroup = "Interactions";
+        this.listInComponentTemplates = true;
+        this.id = "tooltip";
+        this.projectType = "igx-ts";
+        this.name = "Tooltip";
+        this.description = "A fully customizable tooltip";
+        this.dependencies = [
+            {
+                import: ["IgxAvatarModule", "IgxTooltipModule", "IgxSwitchModule"],
+                from: "<%=igxPackage%>"
+            },
+            { import: "FormsModule", from: "@angular/forms" }
+        ];
+    }
+}
+module.exports = new IgxTooltipTemplate();

package/igx-ts-legacy/tooltip/index.d.ts

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

package/igx-ts-legacy/tooltip/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgxTooltipComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Tooltip";
+        this.group = "Interactions";
+    }
+}
+module.exports = new IgxTooltipComponent();

package/igx-ts-legacy/tree/default/files/src/app/__path__/__filePrefix__.component.html

@@ -0,0 +1,43 @@
+<p>igx-tree component with selection and load on demand.</p>
+<p>You can read more about configuring the igx-tree component in the
+  <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/tree/README.md" target="_blank">README</a> or the
+  <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/tree" target="_blank">official documentation</a>.
+</p>
+
+<div class="sample-wrapper">
+  <igx-tree selection="Cascading">
+    <igx-tree-node *ngFor="let root of data" [expanded]="true" [data]="root">
+      <ng-template *ngTemplateOutlet="nodeTemplate; context: { $implicit: root }"></ng-template>
+      <igx-tree-node #subfolder *ngFor="let folder of root.Files" [data]="folder">
+        <ng-template *ngTemplateOutlet="nodeTemplate; context: { $implicit: folder }"></ng-template>
+        <igx-tree-node *ngFor="let file of folder.Files" [data]="file">
+          <ng-template *ngTemplateOutlet="nodeTemplate; context: { $implicit: file }"></ng-template>
+        </igx-tree-node>
+      </igx-tree-node>
+    </igx-tree-node>
+    <igx-tree-node #remote [loading]="loading" [disabled]="loading" [data]="remoteRoot"
+      (expandedChange)="getNodeData(remote, $event)">
+      <div class="node">
+        <igx-icon class="tree-node-icon">{{ remoteRoot.Icon }}</igx-icon>
+        <span class="node-title">{{ remoteRoot.Name }}</span>
+        <igx-icon *ngIf="showRefresh" class="tree-node-icon node-refresh" (click)="refreshData(remote)"
+          [showDelay]="600" [hideDelay]="100" igxTooltipTarget="tooltipRef">refresh</igx-icon>
+      </div>
+      <igx-tree-node #dummyNode *ngIf="!remoteData?.length && !remote.loading" [data]="{}" [disabled]="true">
+      </igx-tree-node>
+      <igx-tree-node *ngFor="let entry of remoteData" [data]="entry" [selected]="!!entry.Selected"
+        (selectedChange)="handleSelection(entry, $event)">
+        <ng-template *ngTemplateOutlet="nodeTemplate; context: { $implicit: entry }"></ng-template>
+      </igx-tree-node>
+    </igx-tree-node>
+  </igx-tree>
+  <ng-template #nodeTemplate let-data>
+    <div class="node">
+      <igx-icon class="tree-node-icon">{{ data.Icon }}</igx-icon>
+      <span class="node-title">{{ data.Name }}</span>
+    </div>
+  </ng-template>
+</div>
+<div #tooltipRef="tooltip" igxTooltip>
+  Reload Remote Data
+</div>

package/igx-ts-legacy/tree/default/files/src/app/__path__/__filePrefix__.component.scss

@@ -0,0 +1,31 @@
+.tree-node-icon {
+  display: flex;
+  align-items: center;
+  vertical-align: middle;
+}
+
+igx-tree {
+  max-height: 560px;
+  overflow-y: auto;
+}
+
+.node-refresh {
+  cursor: pointer;
+  padding: 0px 4px;
+  color: hsla(var(--igx-success-500));
+}
+
+.node {
+  display: flex;
+  align-items: center;
+}
+
+.node-title {
+  margin-left: 10px;
+  vertical-align: middle;
+}
+
+.sample-wrapper {
+  margin: 0 auto;
+  padding: 10px;
+}

package/igx-ts-legacy/tree/default/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxComboModule, IgxTooltipModule } from '<%=igxPackage%>';
+import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
+
+describe('<%=ClassName%>Component', () => {
+  let component: <%=ClassName%>Component;
+  let fixture: ComponentFixture<<%=ClassName%>Component>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [<%=ClassName%>Component],
+      imports: [IgxComboModule, NoopAnimationsModule, IgxTooltipModule]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/igx-ts-legacy/tree/default/files/src/app/__path__/__filePrefix__.component.ts

@@ -0,0 +1,65 @@
+import { Component, OnDestroy } from '@angular/core';
+import { IgxTreeNodeComponent } from '<%=igxPackage%>';
+import { Subject } from 'rxjs';
+import { take, takeUntil } from 'rxjs/operators';
+import { DATA, NodeData, REMOTE_ROOT, SelectableNodeData } from './local-data';
+import { DataService } from './services/data.service';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.component.html',
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  providers: [DataService]
+})
+
+export class <%=ClassName%>Component implements OnDestroy {
+  public data = DATA;
+  public loading = false;
+  public showRefresh = false;
+  public remoteRoot = REMOTE_ROOT;
+  public remoteData: SelectableNodeData[] = [];
+  private destroy$ = new Subject<void>();
+
+  constructor(private dataService: DataService) {
+    this.dataService.data.pipe(takeUntil(this.destroy$)).subscribe((data) => {
+      this.loading = false;
+      this.remoteData = data;
+    });
+  }
+
+  public refreshData(node: IgxTreeNodeComponent<NodeData>): void {
+    this.dataService.clearData();
+    this.remoteData = [];
+    this.getNodeData(node, true);
+    this.dataService.getData();
+  }
+
+  public getNodeData(node: IgxTreeNodeComponent<any>, evt: boolean): void {
+    if (this.remoteData?.length) {
+      return;
+    }
+    if (evt) {
+      this.showRefresh = true;
+      this.loading = true;
+      this.dataService.getData();
+      this.dataService.data.pipe(take(1)).subscribe((data) => {
+        if (node.selected) {
+          data.forEach(e => {
+            if (e.Selected === undefined) {
+              e.Selected = true;
+            }
+          });
+        }
+      });
+    }
+  }
+
+  public handleSelection(node: NodeData, selected: boolean): void {
+    this.dataService.toggleSelected(node, selected);
+  }
+
+  public ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

package/igx-ts-legacy/tree/default/files/src/app/__path__/local-data.ts

@@ -0,0 +1,75 @@
+export interface NodeData {
+  Name: string;
+  Icon: string;
+  Files?: NodeData[];
+}
+
+export interface SelectableNodeData extends NodeData {
+  Selected?: boolean;
+}
+
+export const REMOTE_ROOT: NodeData = {
+  Name: 'Network',
+  Icon: 'devices',
+  Files: []
+};
+
+export const REMOTE_DATA: NodeData[] = [
+  { Name: 'DESKTOP-XYZ', Icon: 'computer' },
+  { Name: 'TABLET-ABC', Icon: 'tablet' },
+  { Name: 'PHONE-123', Icon: 'smartphone' }
+];
+
+export const DATA: NodeData[] = [
+  {
+    Name: 'Computer', Icon: 'computer', Files: [
+      {
+        Name: 'Documents',
+        Icon: 'library_books',
+        Files:
+          [
+            { Name: 'Report 2016', Icon: 'article' },
+            { Name: 'Report 2017', Icon: 'article' },
+            { Name: 'Report 2018', Icon: 'article' },
+            { Name: 'Report 2019', Icon: 'article' },
+            { Name: 'Report 2020', Icon: 'article' }
+          ]
+      },
+      {
+        Name: 'Music',
+        Icon: 'library_music',
+        Files:
+          [
+            { Name: 'Track 1', Icon: 'audiotrack' },
+            { Name: 'Track 2', Icon: 'audiotrack' },
+            { Name: 'Track 3', Icon: 'audiotrack' },
+            { Name: 'Track 4', Icon: 'audiotrack' },
+            { Name: 'Track 5', Icon: 'audiotrack' }
+          ]
+      },
+      {
+        Name: 'Pictures',
+        Icon: 'photo_library',
+        Files:
+          [
+            { Name: 'Image 101', Icon: 'image' },
+            { Name: 'Image 102', Icon: 'image' },
+            { Name: 'Image 103', Icon: 'image' },
+            { Name: 'Image 104', Icon: 'image' },
+            { Name: 'Image 105', Icon: 'image' }
+          ]
+      },
+      {
+        Name: 'Recycle Bin',
+        Icon: 'delete',
+        Files:
+          [
+            { Name: 'Track 6', Icon: 'audiotrack' },
+            { Name: 'Track 7', Icon: 'audiotrack' },
+            { Name: 'Image 106', Icon: 'image' },
+            { Name: 'Image 107', Icon: 'image' }
+          ]
+      }
+    ]
+  }
+];

package/igx-ts-legacy/tree/default/files/src/app/__path__/services/data.service.ts

@@ -0,0 +1,51 @@
+import { Injectable } from '@angular/core';
+import { Observable, ReplaySubject } from 'rxjs';
+import { NodeData, REMOTE_DATA, SelectableNodeData } from '../local-data';
+
+@Injectable()
+export class DataService {
+  private nodeData: SelectableNodeData[] = [];
+  private selectedNode: Set<string> = new Set<string>();
+  private deselectedNode: Set<string> = new Set<string>();
+  private data$: ReplaySubject<SelectableNodeData[]> = new ReplaySubject();
+  public get data(): Observable<SelectableNodeData[]> {
+    return this.data$;
+  }
+
+  public getData(): void {
+    setTimeout(() => {
+      this.nodeData = REMOTE_DATA;
+      const passed = this.nodeData.map(e => {
+        const selectionState: Partial<SelectableNodeData> = {};
+        if (this.selectedNode.has(e.Name)) {
+          selectionState.Selected = true;
+        }
+        if (this.deselectedNode.has(e.Name)) {
+          selectionState.Selected = false;
+        }
+        return Object.assign({}, e, selectionState);
+      });
+      this.data$.next(passed);
+    }, 2000);
+  }
+
+  public clearData(): void {
+    this.nodeData = [];
+    this.data$.next(this.nodeData);
+  }
+
+  public clearSelect(): void {
+    this.selectedNode = new Set<string>();
+    this.deselectedNode = new Set<string>();
+  }
+
+  public toggleSelected(node: NodeData, state: boolean): void {
+    if (state) {
+      this.selectedNode.add(node.Name);
+      this.deselectedNode.delete(node.Name);
+    } else {
+      this.deselectedNode.add(node.Name);
+      this.selectedNode.delete(node.Name);
+    }
+  }
+}

package/igx-ts-legacy/tree/default/index.d.ts

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

package/igx-ts-legacy/tree/default/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxComboTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Tree"];
+        this.controlGroup = "Grids & Lists";
+        this.listInComponentTemplates = true;
+        this.id = "tree";
+        this.projectType = "igx-ts";
+        this.name = "Tree";
+        this.description = "IgxTree sample with selection and load-on-demand node";
+        this.dependencies = [{
+                import: ["IgxTreeModule", "IgxIconModule", "IgxTooltipModule"],
+                from: "<%=igxPackage%>"
+            }];
+    }
+}
+module.exports = new IgxComboTemplate();

package/igx-ts-legacy/tree/index.d.ts

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

package/igx-ts-legacy/tree/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgxComboComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Tree";
+        this.group = "Grids & Lists";
+        this.description = `visualize hierarchical data in beautiful and easy-to-navigate tree-view.`;
+    }
+}
+module.exports = new IgxComboComponent();

package/igx-ts-legacy/tree-grid/index.d.ts

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

package/igx-ts-legacy/tree-grid/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgxGridComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Tree Grid";
+        this.group = "Grids & Lists";
+        this.description = "pick from tree grid templates";
+        this.groupPriority = 9;
+    }
+}
+module.exports = new IgxGridComponent();

package/igx-ts-legacy/tree-grid/tree-grid-custom/files/src/app/__path__/__filePrefix__.component.html

@@ -0,0 +1,17 @@
+<p>
+  <%=description%><br />
+    You can read more about configuring the igx-grid component in the
+    <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grids/tree-grid/README.md"
+      target="_blank">README</a> or the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/tree-grid"
+      target="_blank">official documentation</a>.
+</p>
+<%=selectedFeatures%>
+
+<igx-tree-grid #treeGrid [data]="localData" primaryKey="ID" childDataKey="Employees" width="990px" height="700px"
+<%=treeGridFeatures%>>
+  <igx-column field="Name" dataType="string" minWidth="200px" width="500px" <%=columnFeatures%> <%=columnPinning%>></igx-column>
+  <igx-column field="Location" dataType="string" <%=columnFeatures%>></igx-column>
+  <igx-column field="HireDate" header="Hire Date" dataType="date" minWidth="100px" <%=columnFeatures%>></igx-column>
+  <igx-column field="Age" dataType="number" minWidth="100px" <%=columnFeatures%>></igx-column><%=additionalMarkup%>
+</igx-tree-grid>

package/igx-ts-legacy/tree-grid/tree-grid-custom/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxCheckboxModule, IgxDatePickerModule, IgxTreeGridModule } from '<%=igxPackage%>';
+import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
+
+describe('<%=ClassName%>Component', () => {
+  let component: <%=ClassName%>Component;
+  let fixture: ComponentFixture<<%=ClassName%>Component>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [<%=ClassName%>Component],
+      imports: [BrowserAnimationsModule, IgxTreeGridModule, IgxDatePickerModule, IgxCheckboxModule]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});