@igniteui/angular-templates 21.1.1491 → 21.1.1500-rc.0

package/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,281 @@
+import {
+  Component,
+  OnInit,
+  AfterViewInit,
+  QueryList,
+  ViewChild,
+  ElementRef,
+} from '@angular/core';
+
+import {
+  CloseScrollStrategy,
+  ConnectedPositioningStrategy,
+  GridSelectionMode,
+  HorizontalAlignment,
+  IColumnExportingEventArgs,
+  ColumnType,
+  IgxDateSummaryOperand,
+  IgxCsvExporterService,
+  IgxExcelExporterService,
+  IgxGridComponent,
+  IgxNumberSummaryOperand,
+  IgxSummaryResult,
+  IgxToggleDirective,
+  OverlaySettings,
+  PositionSettings,
+  VerticalAlignment,
+  IgxGridToolbarComponent,
+  IgxGridToolbarTitleComponent,
+  IgxInputGroupComponent,
+  IgxPrefixDirective,
+  IgxIconComponent,
+  IgxInputDirective,
+  IgxSuffixDirective,
+  IgxButtonDirective,
+  IgxRippleDirective,
+  IgxGridToolbarActionsComponent,
+  IgxGridToolbarHidingComponent,
+  IgxGridToolbarPinningComponent,
+  IgxGridToolbarExporterComponent,
+  IgxColumnComponent,
+  IgxCellTemplateDirective,
+  IgxAvatarComponent,
+  IgxLinearProgressBarComponent,
+} from '<%=igxPackage%>';
+import { SparklineDisplayType, IgxSparklineCoreModule } from 'igniteui-angular-charts';
+import { DATA, DealsDescriptor, Employee } from './data';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [
+    IgxGridComponent,
+    IgxGridToolbarComponent,
+    IgxGridToolbarTitleComponent,
+    IgxInputGroupComponent,
+    IgxPrefixDirective,
+    IgxIconComponent,
+    ReactiveFormsModule,
+    IgxInputDirective,
+    FormsModule,
+    IgxSuffixDirective,
+    IgxButtonDirective,
+    IgxRippleDirective,
+    IgxGridToolbarActionsComponent,
+    IgxGridToolbarHidingComponent,
+    IgxGridToolbarPinningComponent,
+    IgxGridToolbarExporterComponent,
+    IgxColumnComponent,
+    IgxCellTemplateDirective,
+    IgxAvatarComponent,
+    IgxLinearProgressBarComponent,
+    IgxSparklineCoreModule,
+  ]
+})
+export class <%=ClassName%> implements OnInit, AfterViewInit {
+
+  @ViewChild('grid1', { read: IgxGridComponent, static: true })
+  public grid1!: IgxGridComponent;
+
+  @ViewChild('toggleRefHiding') public toggleRefHiding!: IgxToggleDirective;
+  @ViewChild('toggleRefPinning') public toggleRefPinning!: IgxToggleDirective;
+
+  @ViewChild('hidingButton') public hidingButton!: ElementRef;
+  @ViewChild('pinningButton') public pinningButton!: ElementRef;
+
+  public localData: Employee[] = [];
+  public dealsSummary = DealsSummary;
+  public earliestSummary = EarliestSummary;
+  public soonSummary = SoonSummary;
+
+  public cols!: QueryList<ColumnType>;
+  public hiddenColsLength = 0;
+  public pinnedColsLength = 0;
+
+  public searchText = '';
+  public caseSensitive = false;
+  public selectionMode: GridSelectionMode = 'multiple';
+  public displayType = SparklineDisplayType;
+
+  public positionSettings: PositionSettings = {
+    horizontalDirection: HorizontalAlignment.Left,
+    horizontalStartPoint: HorizontalAlignment.Right,
+    verticalStartPoint: VerticalAlignment.Bottom
+  };
+
+  public overlaySettings: OverlaySettings = {
+    closeOnOutsideClick: true,
+    modal: false,
+    positionStrategy: new ConnectedPositioningStrategy(this.positionSettings),
+    scrollStrategy: new CloseScrollStrategy()
+  };
+
+  constructor(
+    private csvExporter: IgxCsvExporterService,
+    private excelExporter: IgxExcelExporterService) {
+
+    const exporterCb = (args: IColumnExportingEventArgs): void => {
+      if (args.field === 'Deals') { args.cancel = true; }
+    };
+
+    this.excelExporter.columnExporting.subscribe(exporterCb);
+    this.csvExporter.columnExporting.subscribe(exporterCb);
+  }
+
+  public ngOnInit(): void {
+    const employees: Employee[] = DATA;
+    for (const employee of employees) {
+      this.getDeals(employee);
+    }
+    this.localData = employees;
+  }
+
+  public toggleHiding(): void {
+    this.overlaySettings.target = this.hidingButton.nativeElement;
+    this.toggleRefHiding.toggle(this.overlaySettings);
+  }
+
+  public togglePinning(): void {
+    this.overlaySettings.target = this.pinningButton.nativeElement;
+    this.toggleRefPinning.toggle(this.overlaySettings);
+  }
+
+  public ngAfterViewInit(): void {
+    this.cols = this.grid1.columnList;
+    this.hiddenColsLength = this.cols.filter((col) => col.hidden).length;
+    this.pinnedColsLength = this.cols.filter((col) => col.pinned).length;
+  }
+
+  public toggleVisibility(col: ColumnType): void {
+    if (col.hidden) {
+      this.hiddenColsLength--;
+    } else {
+      this.hiddenColsLength++;
+    }
+    col.hidden = !col.hidden;
+  }
+
+  public togglePin(col: ColumnType, evt: any): void {
+    if (col.pinned) {
+      this.grid1.unpinColumn(col.field);
+      this.pinnedColsLength--;
+    } else {
+      if (this.grid1.pinColumn(col.field)) {
+        this.pinnedColsLength++;
+      } else {
+        // if pinning fails uncheck the checkbox
+        evt.checkbox.checked = false;
+      }
+    }
+  }
+
+  public formatDate(val: Date): string {
+    return new Intl.DateTimeFormat('en-US').format(val);
+  }
+
+  public searchKeyDown(ev: KeyboardEvent): void {
+    if (ev.key === 'Enter' || ev.key === 'ArrowDown' || ev.key === 'ArrowRight') {
+      ev.preventDefault();
+      this.grid1.findNext(this.searchText, this.caseSensitive);
+    } else if (ev.key === 'ArrowUp' || ev.key === 'ArrowLeft') {
+      ev.preventDefault();
+      this.grid1.findPrev(this.searchText, this.caseSensitive);
+    }
+  }
+
+  public updateSearch(): void {
+    this.caseSensitive = !this.caseSensitive;
+    this.grid1.findNext(this.searchText, this.caseSensitive);
+  }
+
+  public clearSearch(): void {
+    this.searchText = '';
+    this.grid1.clearSearch();
+  }
+
+  public formatValue(val: any): string {
+    return val.toLocaleString('en-us', { maximumFractionDigits: 2 });
+  }
+
+  public getDeals(employee: Employee): void {
+    employee.deals = this.getDealsData();
+  }
+
+  public getDealsData(months?: number): DealsDescriptor[] {
+    if (months === undefined) {
+      months = 12;
+    }
+    const deals: DealsDescriptor[] = [];
+    for (let m = 0; m < months; m++) {
+      const value = this.getRandomNumber(-20, 30);
+      deals.push({ Deals: value, Month: m });
+    }
+    return deals;
+  }
+
+  public getRandomNumber(min: number, max: number): number {
+    return Math.round(min + Math.random() * (max - min));
+  }
+}
+
+class DealsSummary extends IgxNumberSummaryOperand {
+  constructor() {
+    super();
+  }
+
+  public override operate(summaries?: number[]): IgxSummaryResult[] {
+    const result = super.operate(summaries).filter((obj) => {
+      if (obj.key === 'average' || obj.key === 'sum') {
+        const summaryResult = obj.summaryResult;
+        // apply formatting to float numbers
+        if (Number(summaryResult) === summaryResult) {
+          obj.summaryResult = summaryResult.toLocaleString('en-us', { maximumFractionDigits: 2 });
+        }
+        return true;
+      }
+      return false;
+    });
+    return result;
+  }
+}
+
+function formatDate(val: Date) {
+    return new Intl.DateTimeFormat('en-US').format(val);
+}
+
+class EarliestSummary extends IgxDateSummaryOperand {
+  constructor() {
+    super();
+  }
+
+  public override operate(summaries?: Date[]): IgxSummaryResult[] {
+    const result = super.operate(summaries).filter((obj) => {
+      if (obj.key === 'earliest') {
+        obj.summaryResult = formatDate(obj.summaryResult);
+        return true;
+      }
+      return false;
+    });
+    return result;
+  }
+}
+
+class SoonSummary extends IgxDateSummaryOperand {
+  constructor() {
+    super();
+  }
+
+  public override operate(summaries?: Date[]): IgxSummaryResult[] {
+    const result = super.operate(summaries).filter((obj) => {
+      if (obj.key === 'latest') {
+        obj.label = 'Soon';
+        obj.summaryResult = formatDate(obj.summaryResult);
+        return true;
+      }
+      return false;
+    });
+    return result;
+  }
+}

package/igx-ts/custom-templates/crm-grid/index.js

@@ -10,7 +10,7 @@ class IgxGridCRMTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngular
         this.listInCustomTemplates = true;
         this.name = "CRM Grid";
         this.description = "CRM IgxGrid";
-        this.packages = ["igniteui-angular-core@~20.1.0", "igniteui-angular-charts@~20.1.0"];
+        this.packages = ["igniteui-angular-core@~21.0.0", "igniteui-angular-charts@~21.0.0"];
     }
 }
 module.exports = new IgxGridCRMTemplate();

package/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.html

@@ -0,0 +1,246 @@
+<div class="grid__wrapper" [class.fin-dark-theme]="theme">
+  <div class="controls-holder">
+    <div class="switches">
+      <div class="control-item">
+        <igx-switch [checked]="true" [(ngModel)]="theme" (change)="onThemeChanged($event)">Dark</igx-switch>
+      </div>
+      <div class="control-item">
+        <igx-switch [checked]="grouped" (change)="onChange()"
+          cssClass="fintech-sample-switch">
+          Grouped</igx-switch>
+      </div>
+      <div class="control-item">
+        <igx-switch [checked]="showToolbar" (change)="toggleToolbar()"
+          cssClass="fintech-sample-switch">Toolbar</igx-switch>
+      </div>
+      <div class="fintech-slider control-item">
+        <label for="slider">Records: {{volume}}</label>
+        <igx-slider #slider1 id="slider" [minValue]="0" [maxValue]="10000" [(ngModel)]="volume" [step]="100"
+          [thumbLabelVisibilityDuration]="250" [continuous]="true"></igx-slider>
+      </div>
+      <div class="fintech-slider control-item">
+        <label for="slider">Frequency: {{frequency}} ms</label>
+        <igx-slider #slider2 id="slider" [minValue]="100" [maxValue]="3000" [step]="10"
+          [(ngModel)]="frequency" [thumbLabelVisibilityDuration]="250" [continuous]="true"></igx-slider>
+      </div>
+    </div>
+    <div class="control-item fintech-play-controls">
+      <igx-buttongroup class="finjssample-btn-group" #buttonGroup1 [multiSelection]="false"
+        [values]="controls" (selected)="onButtonAction($event)"></igx-buttongroup>
+    </div>
+  </div>
+  <div class="sample-toolbar">
+    @if (buttonSelected === 1) {
+      <span>Feeding {{volume}} records every {{frequency / 1000}} sec.
+        {{volume}} records updated. </span>
+    }
+    @if (buttonSelected === 0) {
+      <span>Feeding {{volume}} records every {{frequency / 1000}} sec.
+        ~{{volume/5}} records updated.</span>
+    }
+  </div>
+  <igx-grid #grid1 igxPreventDocumentScroll (rowSelectionChanging)="rowSelectionChanging($event)" [data]="data"
+    width="100%" height="90%" [autoGenerate]="false" displayDensity="compact" primaryKey="ID" hiddenColumnsText="Hidden"
+    [rowSelection]="selectionMode" [allowFiltering]="true" filterMode="excelStyleFilter"
+    (keydown)="gridKeydown($event)" (gridKeydown)="customKeydown($event)" [moving]="true">
+    @if (showToolbar) {
+      <igx-grid-toolbar>
+        <igx-grid-toolbar-actions>
+          <igx-grid-toolbar-hiding title="Indicators"></igx-grid-toolbar-hiding>
+          <igx-grid-toolbar-pinning title=" "></igx-grid-toolbar-pinning>
+          <igx-grid-toolbar-exporter [exportCSV]="false"></igx-grid-toolbar-exporter>
+        </igx-grid-toolbar-actions>
+      </igx-grid-toolbar>
+    }
+
+    <!-- Empty templates for Sorting,Moving,Hiding, Pinning actions inside ESF dialog -->
+    <!-- <ng-template igxExcelStyleSorting></ng-template>
+    <ng-template igxExcelStyleMoving></ng-template>
+    <ng-template igxExcelStyleHiding></ng-template>
+    <ng-template igxExcelStylePinning></ng-template> -->
+
+    <igx-column field="ID" [hidden]="true"></igx-column>
+    <igx-column field="Category" width="120px" [groupable]="true" [sortable]="true"></igx-column>
+    <igx-column field="Type" width="100px" [groupable]="true" [sortable]="true" [filterable]="false">
+    </igx-column>
+    <igx-column field="Contract" width="110px" [groupable]="true" [sortable]="true" [editable]="true">
+      <ng-template igxCellEditor let-cell="cell" let-value>
+        <igx-select [placeholder]="value" [(ngModel)]="cell.editValue" [igxFocus]="true">
+          @for (c of contracts; track c) {
+            <igx-select-item [value]="c">{{ c }}</igx-select-item>
+          }
+        </igx-select>
+      </ng-template>
+    </igx-column>
+    <igx-column field="Settlement" width="100px" [groupable]="true" [sortable]="true"></igx-column>
+    <igx-column field="Country" width="100px" [groupable]="true" [sortable]="true" [editable]="true">
+    </igx-column>
+    <igx-column field="Region" width="110px" [groupable]="true" [sortable]="true" [editable]="true">
+      <ng-template igxCellEditor let-cell="cell" let-value>
+        <igx-select [placeholder]="value" [(ngModel)]="cell.editValue" [igxFocus]="true">
+          @for (r of regions; track r) {
+            <igx-select-item [value]="r.Region">{{ r.Region }}</igx-select-item>
+          }
+        </igx-select>
+      </ng-template>
+    </igx-column>
+    <igx-column field="LastUpdated" width="120px" [editable]="true" header="Last Update" dataType="date">
+    </igx-column>
+    <igx-column field="Open Price" width="120px" dataType="number" [formatter]="formatCurrency"
+      [sortable]="true"></igx-column>
+    <igx-column field="Price" width="110px" dataType="number" [cellClasses]="trends"
+      [sortable]="true">
+      <ng-template igxCell let-cell="cell">
+        <div class="fintech-icons">
+          <span>{{cell.value | currency:'USD':'symbol':'1.4-4'}}</span>
+          @if (trends.positive(cell.row.data)) {
+            <igx-icon>trending_up</igx-icon>
+          }
+          @if (trends.negative(cell.row.data)) {
+            <igx-icon>trending_down</igx-icon>
+          }
+        </div>
+      </ng-template>
+    </igx-column>
+    <igx-column field="Chart" width="60px" [hidden]="false" [filterable]="false">
+      <ng-template igxCell let-cell="cell" class="center-text">
+        <button class="button-icon" igxButton="icon" igxRippleCentered="true" tabindex="-1">
+          <igx-icon family="material" (click)="openSingleRowChart(cell)">insert_chart_outlined</igx-icon>
+        </button>
+      </ng-template>
+    </igx-column>
+
+    <igx-column field="Change" width="120px" dataType="number" headerClasses="headerAlignSyle"
+      [sortable]="true" [cellClasses]="trendsChange" [formatter]="formatNumber" >
+    </igx-column>
+
+    <igx-column field="Change(%)" width="110px" dataType="number" [formatter]="percentage"
+      [sortable]="true" [cellClasses]="trendsChange">
+    </igx-column>
+
+    <igx-column field="Buy" width="110px" dataType="number" [formatter]="formatCurrency"
+      [sortable]="true"></igx-column>
+    <igx-column field="Sell" width="110px" dataType="number" [formatter]="formatCurrency"
+      [sortable]="true"></igx-column>
+    <igx-column field="Spread" width="110px" dataType="number" [formatter]="formatNumber" >
+    </igx-column>
+    <igx-column field="Volume" width="110px" dataType="number" [formatter]="formatNumber"
+      [sortable]="true"></igx-column>
+    <igx-column field="High(D)" width="110px" dataType="number" [formatter]="formatCurrency"
+      [sortable]="true"></igx-column>
+    <igx-column field="Low(D)" width="110px" dataType="number" [formatter]="formatCurrency"
+      [sortable]="true"></igx-column>
+    <igx-column field="High(Y)" width="110px" dataType="number" [formatter]="formatCurrency"
+      [sortable]="true"></igx-column>
+    <igx-column field="Low(Y)" width="110px" dataType="number" [formatter]="formatCurrency"
+      [sortable]="true"></igx-column>
+    <igx-column field="Start(Y)" width="110px" dataType="number" [formatter]="formatCurrency"
+      [sortable]="true"></igx-column>
+
+    <igx-column field="IndGrou" width="100px" [filterable]="false"></igx-column>
+    <igx-column field="IndSect" width="120px" [filterable]="false" [resizable]="true"></igx-column>
+    <igx-column field="IndSubg" width="100px" [filterable]="false"></igx-column>
+    <igx-column field="SecType" width="90px" [filterable]="false"></igx-column>
+    <igx-column field="IssuerN" width="170px" [filterable]="false" [resizable]="true"></igx-column>
+    <igx-column field="Moodys" width="60px" [filterable]="false"></igx-column>
+    <igx-column field="Fitch" width="60px" [filterable]="false"></igx-column>
+    <igx-column field="DBRS" width="60px" [filterable]="false"></igx-column>
+    <igx-column field="CollatT" width="90px" [filterable]="false"></igx-column>
+    <igx-column field="Curncy" width="60px" [filterable]="false"></igx-column>
+    <igx-column field="Security" width="120px" [filterable]="false"></igx-column>
+    <igx-column field="sector" width="80px" [filterable]="false"></igx-column>
+    <igx-column field="CUSIP" width="100px" [filterable]="false"></igx-column>
+    <igx-column field="Ticker" width="60px" [filterable]="false"></igx-column>
+    <igx-column field="Cpn" width="80px" [filterable]="false"></igx-column>
+    <igx-column field="Maturity" width="120px" [filterable]="false"></igx-column>
+    <igx-column field="KRD_3YR" width="110px" [filterable]="false"></igx-column>
+    <igx-column field="ZV_SPREAD" width="90px" [filterable]="false"></igx-column>
+    <igx-column field="KRD_5YR" width="50px" [filterable]="false"></igx-column>
+    <igx-column field="KRD_1YR" width="80px" [filterable]="false"></igx-column>
+    <igx-column field="IndGrou" width="100px" [filterable]="false"></igx-column>
+    <igx-column field="IndSect" width="100px" [filterable]="false" [resizable]="true"></igx-column>
+    <igx-column field="IndSubg" width="100px" [filterable]="false"></igx-column>
+    <igx-column field="SecType" width="90px" [filterable]="false"></igx-column>
+    <igx-column field="IssuerN" width="170px" [filterable]="false" [resizable]="true"></igx-column>
+    <igx-column field="Moodys" width="60px" [filterable]="false"></igx-column>
+    <igx-column field="Fitch" width="60px" [filterable]="false"></igx-column>
+    <igx-column field="DBRS" width="60px" [filterable]="false"></igx-column>
+    <igx-column field="CollatT" width="90px" [filterable]="false"></igx-column>
+    <igx-column field="Curncy" width="60px" [filterable]="false"></igx-column>
+    <igx-column field="Security" width="120px" [filterable]="false"></igx-column>
+    <igx-column field="sector" width="80px" [filterable]="false"></igx-column>
+    <igx-column field="CUSIP" width="100px" [filterable]="false"></igx-column>
+    <igx-column field="Ticker" width="60px" [filterable]="false"></igx-column>
+    <igx-column field="Cpn" width="80px" [filterable]="false"></igx-column>
+    <igx-column field="Maturity" width="120px" [filterable]="false"></igx-column>
+    <igx-column field="KRD_3YR" width="110px" [filterable]="false"></igx-column>
+    <igx-column field="ZV_SPREAD" width="90px" [filterable]="false"></igx-column>
+    <igx-column field="KRD_5YR" width="50px" [filterable]="false"></igx-column>
+    <igx-column field="KRD_1YR" width="80px" [filterable]="false"></igx-column>
+    <igx-column field="IndGrou" width="100px" [filterable]="false"></igx-column>
+    <igx-column field="IndSect" width="100px" [filterable]="false" [resizable]="true"></igx-column>
+    <igx-column field="IndSubg" width="100px" [filterable]="false"></igx-column>
+    <igx-column field="SecType" width="90px" [filterable]="false"></igx-column>
+    <igx-column field="IssuerN" width="170px" [filterable]="false" [resizable]="true"></igx-column>
+    <igx-column field="Moodys" width="60px" [filterable]="false"></igx-column>
+    <igx-column field="Fitch" width="60px" [filterable]="false"></igx-column>
+    <igx-column field="DBRS" width="60px" [filterable]="false"></igx-column>
+    <igx-column field="CollatT" width="90px" [filterable]="false"></igx-column>
+    <igx-column field="Curncy" width="60px" [filterable]="false"></igx-column>
+    <igx-column field="Security" width="120px" [filterable]="false"></igx-column>
+    <igx-column field="sector" width="80px" [filterable]="false"></igx-column>
+    <igx-column field="CUSIP" width="100px" [filterable]="false"></igx-column>
+    <igx-column field="Ticker" width="60px" [filterable]="false"></igx-column>
+    <igx-column field="Cpn" width="80px" [filterable]="false"></igx-column>
+    <igx-column field="Maturity" width="120px" [filterable]="false"></igx-column>
+    <igx-column field="KRD_3YR" width="110px" [filterable]="false"></igx-column>
+    <igx-column field="ZV_SPREAD" width="90px" [filterable]="false"></igx-column>
+    <igx-column field="KRD_5YR" width="50px" [filterable]="false"></igx-column>
+    <igx-column field="KRD_1YR" width="80px" [filterable]="false"></igx-column>
+    <igx-column field="IndGrou" width="100px" [filterable]="false"></igx-column>
+    <igx-column field="IndSect" width="100px" [filterable]="false" [resizable]="true"></igx-column>
+    <igx-column field="IndSubg" width="100px" [filterable]="false"></igx-column>
+    <igx-column field="SecType" width="90px" [filterable]="false"></igx-column>
+    <igx-column field="IssuerN" width="170px" [filterable]="false" [resizable]="true"></igx-column>
+    <igx-column field="Moodys" width="60px" [filterable]="false"></igx-column>
+    <igx-column field="Fitch" width="60px" [filterable]="false"></igx-column>
+    <igx-column field="DBRS" width="60px" [filterable]="false"></igx-column>
+    <igx-column field="CollatT" width="90px" [filterable]="false"></igx-column>
+    <igx-column field="Curncy" width="60px" [filterable]="false"></igx-column>
+    <igx-column field="Security" width="120px" [filterable]="false"></igx-column>
+    <igx-column field="sector" width="80px" [filterable]="false"></igx-column>
+    <igx-column field="CUSIP" width="100px" [filterable]="false"></igx-column>
+    <igx-column field="Ticker" width="60px" [filterable]="false"></igx-column>
+    <igx-column field="Cpn" width="80px" [filterable]="false"></igx-column>
+  </igx-grid>
+</div>
+
+<igx-dialog #dialog [closeOnOutsideSelect]="true" (closed)="onCloseHandler()">
+  <div (keydown)="closeDialog($event)" tabindex="0">
+    <igx-dialog-title> Chart </igx-dialog-title>
+
+    <div style="padding: 20px">
+      <igx-category-chart #chart1 [dataSource]="chartData" width="900px" [chartType]="chartType.Column" [xAxisInterval]="20"
+        [xAxisLabelAngle]="90" [includedProperties]="properties" height="400px" [tooltipTemplate]="seriesTooltip">
+      </igx-category-chart>
+    </div>
+
+    <div igxDialogActions>
+      <button igxButton (click)="dialog.close()" [igxFocus]="dialog.isOpen">ОК</button>
+    </div>
+  </div>
+</igx-dialog>
+
+<ng-template let-series="series" let-item="item" #seriesTooltip>
+  <div class="tooltipTable">
+    <div class="tooltipRow">
+      <div><b>Category:</b> {{ item.Category }}</div>
+    </div>
+    <div class="tooltipRow">
+      <div><b>Country:</b> {{ item.Country }}</div>
+    </div>
+    <div class="tooltipRow">
+      <div><b>Price:</b> ${{ item.Price }}</div>
+    </div>
+  </div>
+</ng-template>

package/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.spec.ts

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+		imports: [
+		  NoopAnimationsModule,
+		  <%=ClassName%>,
+		],
+    teardown: { destroyAfterEach: false }
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});